/* ═══════════════════════════════════════════════════════════════════
   JOURNEY PLAYER — titre, étape active et barre de transport d'un voyage
   ───────────────────────────────────────────────────────────────────
   EN HAUT AU CENTRE (04/10/2026), à `--jp-top` du haut — avant : une barre seule
   en bas. Le bloc est présent PENDANT TOUT LE VOYAGE :

       TITRE DU VOYAGE                  (typo de .gn-title, un cran au-dessus : --t6)
       nom de l'étape active            (sous-titre)
       [ |◀  ▶  ▶|   3 / 8   × ]        (la barre de transport, en dessous)

   ⚠️ AUCUNE FORME NOUVELLE. Le titre reprend la typo de `.gn-title` ; la barre garde
   son châssis (fond, filet, rayon) = celui des panneaux existants — `--panel-bg` /
   `--border`. Les boutons reprennent le geste des puces de filtre `.gn-chip` (texte
   doré au survol sur un fond cuivré translucide) plutôt que d'inventer un second
   vocabulaire de bouton. Le titre et le sous-titre sont posés SUR LE TERRAIN (pas sur
   un voile, contrairement à .gn-title) : d'où leurs ombres de lisibilité
   (`--shadow-title` / `--shadow-text`).
   ═══════════════════════════════════════════════════════════════════ */

/* ⚠️ PLAN DU LECTEUR : SOUS le voile et le slider de la galerie (4000), SOUS la nav (4200).
   Quand on reclique « Voyages » pendant un voyage, la galerie s'ouvre PAR-DESSUS le titre
   et la barre du voyage actif (06/10/2026) — avant, ils étaient à 4200 comme la nav et
   passaient au-dessus du voile. 3900 = toujours au-dessus du terrain et de #ui, sous les
   cartes (5000+). Source unique : le bloc (.jp-root) ET la croix (.jp-x) la lisent. */
:root { --jp-z: 3900; }

.jp-root {
  /* LE réglage de position : distance du haut de l'écran (10–15vh voulu). */
  --jp-top: 12vh;
  position: fixed;
  left: 50%;
  top: var(--jp-top);
  transform: translateX(-50%);
  /* Plan `--jp-z` (voir plus haut). */
  z-index: var(--jp-z);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;                     /* titre+étape ↔ barre (= le gap de .gn-root) */
  /* ⚠️ `width: max-content` : une boîte `position: fixed; left: 50%` ne dispose que de la
     MOITIÉ de l'écran pour s'étaler — sans lui, un titre moyen passait sur 2 lignes. Le bloc
     prend la largeur de son contenu, plafonnée à 92vw (alors seulement, le texte revient à la ligne). */
  width: max-content;
  max-width: 92vw;
  font-family: var(--font);
  opacity: 0;
  translate: 0 -10px;
  /* ⚠️ `pointer-events: none` sur TOUT le bloc, en permanence : le titre et le
     sous-titre couvrent le haut de l'écran et ne doivent JAMAIS voler un clic au
     terrain. Seule la barre se réactive, et seulement ouverte (`opacity: 0` seul
     laisserait ses boutons intercepter les clics — même piège que la timeline,
     CHANTIER-EVENTS.md §7-5). */
  pointer-events: none;
  transition: opacity .28s ease, translate .28s ease;
}
.jp-root.is-open { opacity: 1; translate: 0 0; }
.jp-root.is-open .jp-panel { pointer-events: auto; }

/* ── Titre du voyage + étape active ──────────────────────────────── */
.jp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;                      /* titre ↔ nom de l'étape */
  text-align: center;
}
.jp-title {
  font-size: var(--t6);          /* un cran au-dessus de .gn-title (--t5) : ici le titre porte tout l'écran */
  letter-spacing: .05em;         /* comme .gn-title : même famille de titres */
  color: var(--grey1);
  text-shadow: var(--shadow-title);
}
.jp-sub {
  font-size: var(--t3);
  color: var(--gold-light);
  text-shadow: var(--shadow-text);
  /* Réserve la hauteur d'une ligne : vide avant la 1re étape, le sous-titre
     ne doit pas faire sauter la barre en arrivant. */
  min-height: 1.4em;
}

/* ── La barre de transport (l'ancien .jp-root : même châssis) ────── */
.jp-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;          /* réactivée par .is-open, voir plus haut */
}

/* Progression — un filet, pas une barre : l'information est secondaire,
   le libellé « 3 / 8 » porte déjà le compte. */
.jp-bar { height: 2px; background: color-mix(in srgb, var(--grey2) 30%, transparent); }
.jp-fill {
  display: block; height: 100%; width: 0;
  background: var(--gold-light);
  transition: width .42s ease;
}

.jp-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px;
}

/* Même geste que `.gn-chip` : discret au repos, doré au survol. */
.jp-btn {
  background: none; border: none; cursor: pointer;
  color: var(--grey1);
  font-family: var(--font); font-size: var(--t3); line-height: 1;
  padding: 4px 9px; border-radius: 4px;
  transition: color .28s ease, background-color .28s ease;
}
.jp-btn:hover:not(:disabled) {
  color: var(--gold-light);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
}
.jp-btn:disabled { opacity: .3; cursor: default; }

/* Lecture : le seul bouton doré au repos — c'est l'action principale. */
.jp-play { color: var(--gold-light); font-size: var(--t4); }

.jp-label {
  font-size: var(--t2); color: var(--grey1);
  padding: 0 10px 0 6px;
  white-space: nowrap;
  text-align: center;
  /* Le nom de l'étape est parti dans le sous-titre : le libellé ne porte plus que le
     compte (« 12 / 29 », « 8 étapes »). On réserve la largeur du plus long pour que la
     barre ne se redimensionne pas d'une étape à l'autre et que les boutons ne glissent
     pas sous le curseur. */
  min-width: 6em;
}

.jp-close { margin-left: 4px; font-size: var(--t4); opacity: .6; }
.jp-close:hover { opacity: 1; }

/* ── Croix de sortie, en haut à droite de l'écran ─────────────────────
   LA MÊME que celle de la galerie des personnages : on réutilise la classe `.cg-close`
   (card-gallery.css : deux filets dorés, 42×42, top 26px / right 30px) et on ne surcharge ici
   que ce qui change. ⚠️ `position: fixed` : la galerie la place en `absolute` dans son voile
   plein écran, ici il n'y a pas de voile. Élément à part de `.jp-root` (celui-ci est transformé :
   un fixed dedans serait positionné par rapport à lui). Même plan que le bloc (`--jp-z`). Invisible
   et inerte tant que le voyage n'est pas ouvert : `pointer-events: none` fermée, sinon son coin
   volerait les clics du terrain. */
.jp-x.cg-close {
  position: fixed;
  z-index: var(--jp-z);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease, transform .2s ease;
}
.jp-x.cg-close.is-open { opacity: .78; pointer-events: auto; }
.jp-x.cg-close.is-open:hover { opacity: 1; transform: scale(1.08); }