/* ═══════════════════════════════════════════════════════════════════
   TIMELINE — DISQUES (remplace l'accordéon de timeline.css)
   Voir timeline-disques.js pour le pourquoi de la forme.

   ⚠️ Tokens de design-tokens.js uniquement : aucune couleur, aucune taille de
   police en dur (docs/DESIGN-TOKENS.md). Tout le texte est en `--font` : ce
   sont des repères qui NOMMENT (un disque, une date), pas du contenu à lire.
   ⚠️ Animer `transform` et `opacity`, rien d'autre.
   ═══════════════════════════════════════════════════════════════════ */

/* ⚠️ `pointer-events: none` À L'ÉTAT FERMÉ — INDISPENSABLE : la racine couvre
   tout l'écran ; sans ça le canvas du terrain ne recevrait plus aucun clic. */
.tl-root {
  position: fixed;
  inset: 0;
  z-index: 4000;                 /* au-dessus de #ui, sous les cartes (5000+) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--tl-build, 460ms) var(--tl-ease, ease),
              visibility 0s linear var(--tl-build, 460ms);
}
.tl-root.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--tl-build, 460ms) var(--tl-ease, ease), visibility 0s;
}

/* Le voile : même que celui de la galerie, le terrain reste perceptible dessous. */
.tl-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 40%,
              color-mix(in srgb, var(--black) 84%, transparent) 0%,
              color-mix(in srgb, var(--black) 95%, transparent) 60%,
              color-mix(in srgb, var(--black) 99%, transparent) 100%);
  backdrop-filter: blur(7px) saturate(.75);
  -webkit-backdrop-filter: blur(7px) saturate(.75);
}

/* La scène 3D : toute la surface, c'est elle qui reçoit les gestes. */
.tl-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.tl-gl.is-drag { cursor: grabbing; }

/* Étiquettes projetées depuis la 3D : jamais interactives. */
.tl-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── En-tête ──────────────────────────────────────────────────────*/
.tl-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2.6vh, 30px) clamp(20px, 4vw, 60px);
  pointer-events: none;
}
.tl-title {
  font-family: var(--font);
  font-size: var(--t4);
  letter-spacing: var(--ls-3);
  text-transform: uppercase;
  color: var(--grey1);
  opacity: .85;
}
.tl-close {
  pointer-events: auto;
  background: none; border: 0; cursor: pointer; padding: 6px;
  line-height: 0; color: var(--gold);
  opacity: .8;
  transition: opacity 180ms var(--tl-ease, ease), transform 240ms var(--tl-ease, ease);
}
.tl-close:hover { opacity: 1; transform: rotate(90deg); }
.tl-close svg { width: 24px; height: 24px; }
.tl-close path { stroke: currentColor; stroke-width: 1.6; fill: none; }

/* ── La date lue sous la ligne de lecture ─────────────────────────*/
.tl-date {
  position: absolute;
  top: clamp(56px, 9vh, 96px);
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
  font-family: var(--font);
  color: var(--grey1);
}
.tl-date-v {
  font-size: calc(var(--t6) * 2.5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-m1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tl-date-c {
  margin-top: 8px;
  font-size: var(--t3);          /* le jour et le mois sous l'année : lisibles d'un coup d'œil */
  letter-spacing: var(--ls-3);
  text-transform: uppercase;
  color: var(--grey2);
}
.tl-root.is-error .tl-date-c { color: var(--grey1); }

/* ── Étiquettes des disques (bord gauche) ─────────────────────────*/
.tl-disc-label {
  position: absolute;
  top: 0; left: 0;
  display: none;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  font-family: var(--font);
  color: var(--grey1);
  pointer-events: auto;          /* cliquable : choisit le disque, comme sa puce */
  cursor: pointer;
}
.tl-disc-name {
  font-size: var(--t3);
  letter-spacing: var(--ls-1);
  transition: color 180ms var(--tl-ease, ease);
}
.tl-disc-label:hover .tl-disc-name,
.tl-disc-label.is-on .tl-disc-name { color: var(--gold-light); }
.tl-disc-n {
  font-size: var(--t1);
  letter-spacing: var(--ls-2);
  color: var(--grey2);
  font-variant-numeric: tabular-nums;
}

/* ── Graduations (sous la pile) ───────────────────────────────────*/
.tl-tick {
  position: absolute;
  top: 0; left: 0;
  display: none;
  white-space: nowrap;
  font-family: var(--font);
  font-size: var(--t1);
  letter-spacing: var(--ls-2);
  color: var(--grey2);
  font-variant-numeric: tabular-nums;
}

/* ── Compteur d'un cluster fermé ──────────────────────────────────*/
.tl-badge {
  position: absolute;
  top: 0; left: 0;
  display: none;
  min-width: 1.6em;
  padding: 1px 5px 2px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font);
  font-size: var(--t1);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  background: var(--gold-light);
  color: var(--black);
}

/* ── Cartouche au survol (même peau que l'ancienne) ───────────────*/
.tl-tip {
  position: absolute;
  top: 0; left: 0;
  max-width: 300px;
  padding: 11px 15px 13px;
  border-radius: 4px;
  background: var(--cat-battle);
  color: var(--white);
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--tl-ease, ease);
  z-index: 5;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 45%, transparent);
}
.tl-tip.is-on { opacity: 1; }
.tl-tip-when {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font);
  font-size: var(--t1);
  letter-spacing: var(--ls-2);
  text-transform: uppercase;
  opacity: .92;
  margin-bottom: 5px;
}
.tl-tip-when i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--white); flex: 0 0 auto;
}
.tl-tip-when em { font-style: normal; opacity: .7; }
.tl-tip-what {
  display: block;
  font-family: var(--font);
  font-size: var(--t2);
  font-weight: var(--fw-bold);
  line-height: 1.32;
}