/* ═══════════════════════════════════════════════
   TOKENS — identical to editor.html
═══════════════════════════════════════════════ */
:root {
  --bg:        #0b0d11;
  --surface:   #13161e;
  --surface2:  #1a1e2a;
  --border:    #232738;
  --border2:   #2d3348;
  --accent:    #d4903a;
  --accent-rgb:212,144,58;
  --red:       #f28080;
  --green:     #4ab87a;
  --blue:      #4a8fd4;
  --purple:    #9a6ad4;
  --text:      #dde2ed;
  --text2:     #9ca5bd;
  --mono:      'DM Mono', monospace;
  --sans:      'DM Sans', sans-serif;
  --serif:     'Fraunces', serif;
  --radius:    10px;
  --radius-sm: 6px;
  --transition:.18s ease;
  --link:      #5b9cf6;
}

/* ── Color palettes ── */
.palette-amber  { --accent:#d4903a; --accent-rgb:212,144,58; }
.palette-blue   { --accent:#4a8fd4; --accent-rgb:74,143,212; }
.palette-red    { --accent:#d4504a; --accent-rgb:212,80,74;  }
.palette-green  { --accent:#4ab87a; --accent-rgb:74,184,122; }
.palette-purple { --accent:#9a6ad4; --accent-rgb:154,106,212; }
.palette-silver { --accent:#8a9bb5; --accent-rgb:138,155,181; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

/* subtle grid texture */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: .18;
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 10;
  /* v0.63.254 (bug iPad, Safari 26/iPadOS 27) — 100% opaque au lieu de 90% :
     un fond partiellement transparent empêche WebKit de détecter une
     couleur unie fiable au bord supérieur de la page, ce qui déclenche un
     flou "Liquid Glass" parasite sur la status bar en PWA standalone.
     Non vérifié sur device réel. Voir même correctif sur editor.html. */
  background: rgb(11,13,17);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  /* v0.60.6 (Ronald 2026-07-27) — iOS PWA standalone : status bar
     transparent chevauche le titre. Safe-area pousse le contenu dessous. */
  /* v0.63.x — Aligné sur la topbar de l'éditeur : mêmes insets latéraux (32px),
     pastille collée en haut (flex-start + padding-top 8px comme .topbar-brand
     de l'éditeur) plutôt que centrée verticalement dans min-height. */
  padding: calc(env(safe-area-inset-top) + var(--safe-top-extra)) max(var(--safe-side), env(safe-area-inset-right)) 14px max(var(--safe-side), env(safe-area-inset-left));
  display: flex; align-items: flex-start; justify-content: space-between;
  box-sizing: border-box;
}
/* v0.63.260 — Voir editor.html : contournement flou iPad PWA installee. */
@media (display-mode: standalone) {
  html.tt-ipad .topbar {
    padding-top: 30px;
  }
}
.topbar-brand-name {
  display: inline-flex;
  align-items: center;
  gap: var(--pastille-gap);
  white-space: nowrap; /* v0.63.x — « Travel Tag » sur une seule ligne (= guide) */
  font-family: var(--serif);
  font-style: normal;
  font-weight: var(--pastille-font-weight);
  font-size: var(--pastille-font-size);
  line-height: var(--pastille-line-height); /* v0.63.x — fixé (= éditeur) : sinon hérite du body 1.6
                        (32px) et la pastille est 2px plus haute qu'en éditeur */
  letter-spacing: var(--pastille-letter-spacing);
  color: var(--accent);
  font-variant: small-caps;
}
.topbar-right {
  display: flex; align-items: center; gap: 10px;
}
.topbar-right a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text2);
  text-decoration: none;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  transition: all var(--transition);
}
.topbar-right a:hover { border-color: var(--accent); color: var(--accent); }
/* v0.63.x — Sélecteur de langue, aligné sur le bouton retour (fond transparent). */
#cl-lang {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text2);
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: all var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
#cl-lang option { background: var(--surface); color: var(--text); }
#cl-lang:hover { border-color: var(--accent); color: var(--accent); }
/* v0.63.x — Bouton retour icône (aligné sur qr.html / editor.html). */
.topbar-right .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all var(--transition);
}
.topbar-right .icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.topbar-right .icon-btn svg { width: 18px; height: 18px; }
.version-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--text2);
}

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
.page {
  position: relative; z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ═══════════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════════ */
.page-header {
  margin-bottom: 52px;
}
.page-header-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.page-header-eyebrow::before {
  content: '';
  width: 20px; height: 1px;
  background: var(--accent); opacity: .6;
}
.page-header h1 {
  font-family: 'Montserrat', var(--sans);
  font-style: italic;
  font-weight: 700;
  font-size: 34px;
  letter-spacing: .5px;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.1;
}
.page-header p {
  font-size: 16px;
  color: var(--text2);
  max-width: 620px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════
   FILTER BAR
═══════════════════════════════════════════════ */
.filter-bar {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.filter-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn.active {
  background: rgba(var(--accent-rgb),.12);
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════
   CHANGELOG TIMELINE
═══════════════════════════════════════════════ */
.timeline {
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent), var(--border2) 40%, transparent);
}

/* ── Version block ── */
.version-block {
  position: relative;
  padding-left: 32px;
  margin-bottom: 48px;
  animation: fadeUp .35s ease both;
}
.version-block:last-child { margin-bottom: 0; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.version-dot {
  position: absolute;
  left: -5px; top: 10px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  transition: background var(--transition);
}
.version-block.latest .version-dot {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.15);
}

.version-header {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.version-number {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.3px;
}
.version-block.latest .version-number { color: var(--accent); }
.version-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: .5px;
}
.version-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: auto;
}
.version-label.latest  { background: rgba(var(--accent-rgb),.15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb),.3); }
.version-label.stable  { background: rgba(74,184,122,.12); color: #4ab87a; border: 1px solid rgba(74,184,122,.3); }
.version-label.beta    { background: rgba(74,143,212,.12); color: #4a8fd4; border: 1px solid rgba(74,143,212,.3); }

/* ── Change groups ── */
.change-groups {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.change-group { border-bottom: 1px solid var(--border); }
.change-group:last-child { border-bottom: none; }

.change-group-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.change-group-header:hover { background: var(--surface2); }

.change-type-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.type-new     .change-type-dot { background: #4ab87a; }
.type-fix     .change-type-dot { background: #e05555; }
.type-improve .change-type-dot { background: #4a8fd4; }
.type-ui      .change-type-dot { background: #9a6ad4; }
.type-perf    .change-type-dot { background: var(--accent); }

.change-type-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.type-new     .change-type-label { color: #4ab87a; }
.type-fix     .change-type-label { color: #f28080; }
.type-improve .change-type-label { color: #4a8fd4; }
.type-ui      .change-type-label { color: #9a6ad4; }
.type-perf    .change-type-label { color: var(--accent); }

.change-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
  margin-left: auto;
}
.change-chevron {
  font-size: 9px;
  color: var(--text2);
  transition: transform .2s;
}
.change-group.open .change-chevron { transform: rotate(90deg); }

.change-items {
  display: none;
  padding: 0 16px 12px 33px;
}
.change-group.open .change-items { display: block; }

.change-item {
  display: flex; gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  border-top: 1px solid var(--border);
}
.change-item:first-child { border-top: none; padding-top: 8px; }
.change-item::before {
  content: '—';
  color: var(--border2);
  flex-shrink: 0;
  margin-top: 1px;
}
.change-item strong { color: var(--text); font-weight: 500; }
/* Wrapper du body : un seul flex item, peu importe le nombre de <code>
   ou <strong> inline à l'intérieur. min-width: 0 permet le wrap propre
   du texte long (sans ça flexbox ne casse pas les lignes correctement). */
.change-item-body { flex: 1 1 auto; min-width: 0; }
.change-item code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--surface2);
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 0 5px;
  color: var(--accent);
  /* Autorise le wrap pour les fragments très longs (URLs, balises HTML
     complètes). Sans ça les codes longs poussent le layout en overflow. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Empty state (no filter results) ── */
.empty-state {
  text-align: center;
  padding: 48px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  display: none;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* v0.63.x — Aligné sur le header du guide : padding-top safe-area + 8px,
     padding-bottom 14px, insets latéraux 16px. Header identique au guide. */
  .topbar { padding: calc(env(safe-area-inset-top) + var(--safe-top-extra)) var(--safe-side-mobile) 14px var(--safe-side-mobile); }
  .page { padding: 32px 16px 60px; }
  .page-header h1 { font-size: 27px; }
}