/* ─── Reset & Base ─────────────────────────────────────────────────────────── */

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

:root {
    --color-bg:       #ffffff;

    /* ── Système typo (cf. TYPO.md, 21/07/2026) ─────────────────────────────── */
    /* 3 couleurs */
    --ink:            #1a1a2e;   /* texte par défaut (≈ noir) */
    --ink-soft:       #5a6070;   /* hiérarchie secondaire (gris) */
    --accent:         #cc2200;   /* le seul accent (Sol, boutons, alertes) */
    --ink-on-accent:  #fff;      /* texte sur fond coloré/accent (bandeaux rouges, boutons) */

    /* Neutres structurels (miroités en dark). Distincts des 3 couleurs typo :
       ce sont des surfaces/traits d'UI, pas du texte. */
    --surface:        #ffffff;   /* fond plein d'un panneau/bouton clair (≈ --color-bg) */
    --ink-on-surface: #000000;   /* texte/trait « dur » posé sur --surface (≠ --ink légèrement bleuté) */
    --hairline:       #e2e2e2;   /* filet de séparation clair */
    --hairline-strong:#c7c7c7;   /* filet plus marqué (liserés de carte) */
    --muted-track:    #d8d8d8;   /* piste/plage inactive (ex. radio ticket non coché) */
    --muted-faint:    #b0b0b0;   /* texte très estompé (durées, secondaire fort) */
    --sgra:           #2a0840;   /* Sagittarius A* — violet sombre sur clair, s'éclaircit en dark */
    --scrim:          rgba(0, 0, 0, 0.25);   /* voile des lightboxes (ticket) */
    --hz:             #1a7a40;   /* zone habitable / badge conservative (sémantique, ne bascule pas) */
    --frost:          #2244bb;   /* ligne de givre (sémantique) */
    --banner-bg-img:  url('../assets/banner-bgr.jpg');   /* fond image du ticket voyage */

    /* 8 tailles */
    --fs-micro:       9px;
    --fs-label:       11px;
    --fs-body:        13px;
    --fs-value:       18px;
    --fs-title:       clamp(18px, 2.4vw, 30px);
    --fs-count:       clamp(28px, 4vw, 52px);
    --fs-display:     clamp(36px, calc(2.5vw + 18px), 66px);
    --fs-hero:        clamp(40px, calc(6.56vw - 28px), 98px);

    /* Tailles d'icônes/logo — fluides comme la typo (le mask-image suit la taille
       CSS). Le max = l'ancienne valeur fixe (on ne grossit pas, on rétrécit sur
       petit écran) ; le vw croise le max vers ~1400px. Séparés des --fs-* : ce sont
       des surfaces SVG (px purs), pas du texte. */
    --icon-logo:      clamp(60px, 1.5vw,  90px);   /* logo top-left (#site-logo::before) */
    --icon-lg:        clamp(16px, 1.5vw,  22px);   /* breadcrumb (.bc-icon) */
    --icon-md:        clamp(13px, 1.2vw,  17px);   /* contrôles galaxie (.gc-btn .bc-icon) */
    --icon-sm:        clamp(11px, 1.0vw,  14px);   /* barre de métriques (.metric-icon) */
    --bar-h:          90px;                        /* bande du haut : logo, fil d'Ariane, contrôles (réduite en mobile) */
    --icon-mark:      20px;                        /* signature Not Human, bas-droite (#nh-mark) */

    --font-main:      'Space Grotesk', system-ui, sans-serif;
    --font-mono:      'JetBrains Mono', monospace;

    /* Graisses (2 crans). Défaut light partout ; bold = mise en avant ponctuelle
       via `.is-bold`. Symétrique avec --fs-* : jamais de font-weight en dur. */
    --fw-light:       300;
    --fw-bold:        700;
    --panel-bg:       rgba(255, 255, 255, 0.92);
    --panel-border:   rgba(20, 40, 100, 0.12);
    --transition:     0.3s ease;

}

/* ── Thème sombre ────────────────────────────────────────────────────────────────
   Bascule via `data-theme="dark"` sur <html> (posé par theme.js). Seules les COULEURS
   sont redéfinies — tailles, fonts, rayons héritent de :root. Miroir noir↔blanc + gris
   inversés ; l'accent rouge NE bouge PAS (signal, indépendant du fond — cf. theme.js).
   Le rendu 3D a son propre pont couleur dans theme.js ; ici c'est l'UB overlay (CSS). */
:root[data-theme="dark"] {
    --color-bg:       #000000;   /* noir pur — synchronisé avec theme.js `bg` dark */
    --ink:            #ececf2;   /* texte quasi-blanc (miroir de #1a1a2e) */
    --ink-soft:       #9aa0b0;   /* gris secondaire éclairci (miroir de #5a6070) */
    --accent:         #cc2200;   /* inchangé */
    --ink-on-accent:  #fff;      /* le rouge reste sombre → texte blanc dessus, inchangé */
    --panel-bg:       rgba(0, 0, 0, 0.92);   /* noir translucide — aligné sur le fond noir pur (24/07) */
    --panel-border:   rgba(180, 200, 255, 0.14);

    /* Neutres structurels — miroir des clairs */
    --surface:        #000000;   /* fond plein sombre (miroir du blanc) — noir pur */
    --ink-on-surface: #ececf2;   /* trait/texte dur sur --surface (miroir du noir) */
    --hairline:       #2a2a38;
    --hairline-strong:#3a3a4a;
    --muted-track:    #33333f;
    --muted-faint:    #6a6a78;
    --sgra:           #b89ad0;   /* violet clair : le violet sombre disparaîtrait sur fond noir */
    --banner-bg-img:  url('../assets/banner-bgr-dark.jpg');   /* variante dark du fond ticket */
}

/* ─── Classes typo sémantiques (.t-*) — cf. TYPO.md ──────────────────────────────
   Chaque classe est autoportante (taille + poids + couleur + transform). Tout en
   Space Grotesk / light pour l'instant ; bold, gris et mono réintroduits via les
   modifieurs/classes dédiées. */
.t-hero, .t-display, .t-title, .t-count, .t-value,
.t-body, .t-body-soft, .t-body-xs, .t-label, .t-label-strong, .t-micro, .t-btn {
    font-family: var(--font-main);
    font-weight: var(--fw-light);
    color: var(--ink);
}
.t-hero         { font-size: var(--fs-hero);    line-height: 0.9;  letter-spacing: -0.03em; }
.t-display      { font-size: var(--fs-display); line-height: 1;    letter-spacing: -0.03em; }
.t-title        { font-size: var(--fs-title);   color: var(--ink-soft); letter-spacing: -0.01em; }
.t-count        { font-size: var(--fs-count);   line-height: 1;    letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-value        { font-size: var(--fs-value);   letter-spacing: -0.02em; }
.t-body         { font-size: var(--fs-body);    line-height: 1.5; }
.t-body-soft    { font-size: var(--fs-body);    color: var(--ink-soft); line-height: 1.4; }
.t-body-xs      { font-size: var(--fs-label);   color: var(--ink-soft); line-height: 1.4; }   /* body 11px, casse normale (≠ .t-label uppercase) */
.t-label        { font-size: var(--fs-label);   color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.14em; }
.t-label-strong { font-size: var(--fs-label);   text-transform: uppercase; letter-spacing: 0.14em; }
.t-micro        { font-size: var(--fs-micro);   color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em; }
.t-btn          { font-size: var(--fs-label);   text-transform: uppercase; letter-spacing: 0.08em; }

/* Modifieurs — à combiner, réintroduits intentionnellement */
.is-bold   { font-weight: var(--fw-bold); }
.is-accent { color: var(--accent); }
.is-ink    { color: var(--ink); }   /* force le noir sur une classe qui met du gris (ex. .t-title) */

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--ink);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    /* App immersive : aucun texte sélectionnable (évite les sélections accidentelles
       de labels/noms pendant la navigation 3D). Rend redondant les user-select:none
       ponctuels (.gc-btn, breadcrumb, switches). */
    -webkit-user-select: none;
    user-select: none;
}

.hidden {
    display: none !important;
}

/* .ui-label / .ui-label-strong → remplacées par .t-label / .t-label-strong (TYPO.md) */

/* ─── Canvas ────────────────────────────────────────────────────────────────── */

#galaxy-canvas {
    position: fixed;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ─── Loader ────────────────────────────────────────────────────────────────── */

#loader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);   /* blanc : atlas dès la première image */
}

.loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* .loader-spinner + @keyframes spin retirés (22/07) : cercle bleu hors palette,
   redondant avec le compteur d'intro qui sert déjà de loader. Le #loader ne
   montre plus qu'un texte, et seulement en repli/erreur. */

.loader-text {
    color: var(--ink-soft);
    font-size: var(--fs-body);
    letter-spacing: 0.05em;
}

/* ─── Overlay d'intro « bulle de connaissance » ─────────────────────────────── */

#intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;           /* overlay traversant : le skip se fait au 1er geste (window), pas via un bouton */
}

/* Compteur — sert aussi de loader. Haut-centre : monte pendant le dézoom galactique. */
#intro-counter {
    position: fixed;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-family: var(--font-main);
    color: var(--ink);
}
#intro-count-num {
    display: block;
    font-size: clamp(28px, 4vw, 52px);
    font-weight: var(--fw-light);
    line-height: 1;
    font-variant-numeric: tabular-nums;   /* le chiffre ne tremble pas en montant */
    letter-spacing: -0.02em;
}
#intro-count-label {
    display: block;
    margin-top: 6px;
    font-size: clamp(10px, 1vw, 13px);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink);
}

/* Titre + phrase de palier — bas de l'écran, centrés. À 20vh du bas pour
   équilibrer avec le compteur, à 20vh du haut. */
#intro-text {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20vh;
    max-width: min(560px, 80vw);
    text-align: center;
}
#intro-title {
    font-family: var(--font-main);
    font-weight: var(--fw-light);
    font-size: var(--fs-title);
    line-height: 1.08;
    color: var(--ink);
    margin: 0;
}
#intro-line {
    font-family: var(--font-main);
    font-weight: var(--fw-light);
    font-size: var(--fs-body);
    line-height: 1.45;
    color: var(--ink);
    margin: 12px 0 0;
}

/* #intro-skip retiré (22/07) : l'intro se saute au 1er geste (molette/clic/touche),
   plus de bouton dédié. */

/* ─── Breadcrumb ────────────────────────────────────────────────────────────── */

#breadcrumb {
    position: fixed;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0;
    align-items: stretch;
    height: var(--bar-h);
    white-space: nowrap;
}

/* Logo — pendant gauche du breadcrumb (centré) / des contrôles (droite). Même
   `top: 2vh` et même bande de 90px que ces deux blocs → barre supérieure alignée.
   mask-image : couleur pilotée par `color` (currentColor), comme les .svg-icon.
   Le fichier fait 624×257 → hauteur fixée, largeur via aspect-ratio. */
#site-logo {
    position: fixed;
    top: 2vh;
    left: 32px;
    z-index: 10;
    height: var(--bar-h);
    display: flex;
    align-items: center;
}
#site-logo::before {
    content: "";
    display: block;
    height: var(--icon-logo);         /* hauteur visuelle du wordmark (fluide) */
    aspect-ratio: 624 / 257;          /* ratio du SVG → largeur auto */
    background-color: currentColor;
    color: var(--ink);
    -webkit-mask: url('../assets/offworld.svg') center / contain no-repeat;
    mask: url('../assets/offworld.svg') center / contain no-repeat;
    transition: opacity 0.2s ease;
}
#site-logo:hover::before { opacity: 0.6; }

/* Signature Not Human — bas-droite, 20 px, à 40 %, l'image TELLE QUELLE (carré noir, symbole blanc ;
   assets/logo_nh-bw.png) : ni masque ni adaptation au thème. TOUJOURS visible : son z-index passe
   au-dessus de l'intro (20), du flash de transition (50) et du loader (100). */
#nh-mark {
    position: fixed;
    right: 32px;
    bottom: 3vh;
    z-index: 110;
    display: block;
    width: var(--icon-mark);
    height: var(--icon-mark);
    background: url('../assets/logo_nh-bw.png') center / contain no-repeat;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
#nh-mark:hover { opacity: 0.8; }

.bc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 24px;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.3s ease;
}

.bc-step.active {
    opacity: 1;
    cursor: default;
}
/* Label de l'étape active en noir franc (--ink), comme les boutons Filters/Legend :
   .t-label est gris (--ink-soft) par défaut. Règle plutôt que .is-ink en HTML car
   .active se déplace entre les 3 étapes (piloté par le JS). */
.bc-step.active .t-label { color: var(--ink); }

.bc-step:not(.active):hover { opacity: 0.75; }

.bc-icon {
    width: var(--icon-lg);
    height: var(--icon-lg);
    color: var(--ink);
}

/* .bc-label → .t-label. L'état actif du breadcrumb se distingue par l'OPACITÉ
   (.bc-step 0.45 → .active 1), pas par le label lui-même. */

/* ─── Tooltip ───────────────────────────────────────────────────────────────── */

#tooltip {
    position: fixed;
    z-index: 20;
    padding: 8px 12px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 0;
    backdrop-filter: blur(12px);
    pointer-events: none;
    font-size: var(--fs-body);
    line-height: 1.6;
    max-width: 220px;
    transition: opacity 0.15s ease;
}

#tooltip .tt-name {
    color: var(--ink);
    font-weight: var(--fw-light);
    font-size: var(--fs-value);
    margin-bottom: 2px;
}

#tooltip .tt-sub {
    color: var(--ink);
    font-size: var(--fs-body);
}

/* ─── Calculateur temps de trajet ───────────────────────────────────────────── */

/* ─── « Get your ticket » — panneau agence (d'après croquis Mathieu 21/07) ──── */
/* Bannière CTA (vue système) : pub voyage spatial ancrée en bas à droite. Fond =
   banner-bgr.jpg (sphère grise) posé en bas, texte + bouton empilés au-dessus.
   Repliable via l'onglet gauche : ouvert = translateX(0) ; fermé (.is-collapsed) =
   glisse à droite en ne laissant visible que l'onglet (40px). Le clic-action est porté
   par .tk-ticket (pas le conteneur). */
#travel-cta {
    position: fixed;
    top: 20vh;
    right: 8vw;
    z-index: 10;
    width: 235px;                     /* réduit (visuel d'origine 276) */
    box-sizing: border-box;
    border: 1px solid var(--hairline-strong);   /* liseré : détache la carte du fond */
    min-height: 245px;                /* réduit (visuel d'origine 286), ratio conservé */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    padding: 18px;
    text-align: left;
    background: var(--surface) var(--banner-bg-img) bottom center / contain no-repeat;
    transition: transform 0.4s ease;
}
/* Fermée : glisse vers la droite jusqu'à ne laisser visible que l'onglet (40px),
   son bord droit collé au bord de l'écran.
   La bannière (100% = 235px) doit être entièrement cachée à droite → on la décale
   de sa largeur + l'ancrage `8vw`. L'onglet (position:absolute, left:-40px) déborde
   HORS de ce 100% : il reste donc visible tout seul, sans qu'on le soustraie ici.
   Soustraire 40px (ancien code) sous-décalait la bannière de 40px → elle dépassait. */
#travel-cta.is-collapsed {
    transform: translateX(calc(100% + 8vw));
}

/* Onglet latéral (bord gauche) : rouge accent, porte la flèche/croix CSS. */
#travel-cta-tab {
    position: absolute;
    top: 0;
    left: -40px;                      /* déborde à gauche de la bannière */
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: var(--accent);
    cursor: pointer;
}
/* Glyphe onglet — deux formes distinctes basculées par .is-collapsed :
   • ::after  = CROIX (×), visible quand OUVERT
   • ::before = CHEVRON ‹ (carré à 2 bordures pivoté), visible quand FERMÉ
   Une seule est affichée à la fois (opacity), avec un léger fondu. */
#travel-cta-tab::before,
#travel-cta-tab::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transition: opacity 0.25s ease;
}
/* CROIX (ouvert) : deux barres en X — via un gradient croisé sur un carré. */
#travel-cta-tab::after {
    width: 11px; height: 11px;
    transform: translate(-50%, -50%);
    background:
        linear-gradient(45deg,  transparent 45%, var(--ink-on-accent) 45%, var(--ink-on-accent) 55%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, var(--ink-on-accent) 45%, var(--ink-on-accent) 55%, transparent 55%);
    opacity: 1;
}
/* CHEVRON ‹ (fermé) : carré dont on ne garde que 2 bordures, pivoté → pointe gauche. */
#travel-cta-tab::before {
    width: 8px; height: 8px;
    border-left: 2px solid var(--ink-on-accent);
    border-bottom: 2px solid var(--ink-on-accent);
    transform: translate(-35%, -50%) rotate(45deg);
    opacity: 0;
}
/* Bascule : fermé → chevron visible, croix masquée. */
#travel-cta.is-collapsed #travel-cta-tab::before { opacity: 1; }
#travel-cta.is-collapsed #travel-cta-tab::after  { opacity: 0; }
/* Titre : réutilise .tc-liftoff (.t-value, 18) cadré à gauche dans la bannière.
   margin-bottom réduit vs l'overlay (12px) pour resserrer titre/sous-titre. */
#travel-cta .tc-liftoff { text-align: left; line-height: 1.15; margin-bottom: 4px; }
/* Bouton rouge : .tk-ticket est gris par défaut (overlay) → forcé accent ici,
   centré, poussé en bas. Typo = .t-btn (norme, pas de surcharge de taille). */
#travel-cta .tk-ticket {
    margin-top: auto;                 /* pousse le bouton en bas, par-dessus la sphère */
    background: var(--accent);
    text-align: center;
}
/* Hover sur le BOUTON lui-même (pas tout le conteneur) — sinon survoler l'onglet
   déclenchait aussi l'inversion noir du bouton. */
#travel-cta .tk-ticket:hover { background: var(--ink-on-surface); }

/* Backdrop lightbox : voile sombre plein écran. C'est un ÉLÉMENT séparé (pas un
   ::before du panneau) — un pseudo derrière le contenu se retrouvait quand même
   par-dessus le fond blanc de la boîte et la grisait. Ici le voile est un calque
   propre, la boîte blanche flotte au-dessus. */
#travel-calc {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    pointer-events: auto;
}

.tk-box {
    width: 680px;
    max-width: 94vw;
    max-height: 92vh;
    overflow-y: auto;
    padding: 2px 30px 22px;
    background: var(--surface);
}

/* 2e overlay « ticket confirmé » — même voile lightbox que le premier. */
#ticket-confirm {
    position: fixed;
    inset: 0;
    z-index: 21;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    pointer-events: auto;
}
.tk-confirm-box { padding: 0; width: 680px; }

/* Bandeau rouge — liftoff + ironie du prix */
.tc-banner {
    display: flex;
    gap: 20px;
    padding: 26px 30px 28px;
    background: var(--accent);
    color: var(--ink-on-accent);
}
/* Les textes internes portent des classes .t-* qui forcent color:var(--ink) (noir)
   et écrasent le blanc hérité du bandeau. On rétablit le blanc sur fond rouge.
   Couvre les écrans 2 ET 3 (tous deux en .tc-banner). */
.tc-banner .t-value,
.tc-banner .t-body,
.tc-banner .t-body-soft { color: var(--ink-on-accent); }
.tc-banner-ico {
    width: 64px; height: 64px;
    flex: none;
    color: var(--ink-on-accent);
    margin-top: 2px;
}
/* typo portée par .t-value ; ne reste que la marge */
.tc-liftoff { letter-spacing: 0.02em; margin-bottom: 12px; }
/* typo portée par .t-body ; ne restent qu'interligne + marge (structure) */
.tc-hype { line-height: 1.5; margin-bottom: 12px; }
.tc-hype:last-child { margin-bottom: 0; }

/* Récap blanc */
.tc-recap { padding: 24px 30px 20px; }
.tc-recap .tk-dest-name { margin-bottom: 6px; }
.tc-recap .tk-dest-dist { margin-bottom: 20px; }

/* Layout du récap : lignes clé/valeur horizontales. La TYPOGRAPHIE réutilise
   .tk-trip-k (clés) et .tk-trip-v/-v--big (valeurs) du 1er overlay — pas de doublon. */
.tc-rows { display: flex; flex-direction: column; }
.tc-row {
    display: flex;
    align-items: baseline;
    padding: 7px 0;
}
.tc-row dt { width: 42%; margin-bottom: 0; }   /* .tk-trip-k, mais côte à côte ici */
.tc-row dd { flex: 1; }
.tc-row--price #tc-price sup { font-size: 0.62em; }
/* typo portée par .t-micro ; ne restent que la couleur accent + marge */
.tc-promo { display: block; color: var(--accent); margin-top: 3px; }

/* Actions : retour (texte noir) à gauche, confirmer (rouge) à droite. */
.tc-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 8px 30px 28px;
}
/* Écran 3 (thank you) : bouton unique → aligné à droite, avec un peu d'air au-dessus. */
#ticket-thanks .tc-actions {
    justify-content: flex-end;
    margin-top: 40px;
}
/* typo portée par .t-btn ; ne restent que la couleur/structure */
.tc-back-btn {
    background: none;
    border: none;
    color: var(--ink-on-surface);
    cursor: pointer;
    padding: 13px 8px;
    transition: opacity var(--transition);
}
.tc-back-btn:hover { opacity: 0.55; }

.tc-confirm-btn {
    padding: 13px 40px;
    background: var(--accent);
    border: none;
    color: var(--ink-on-accent);
    cursor: pointer;
    transition: background var(--transition);
}
.tc-confirm-btn:hover { background: var(--ink-on-surface); }

/* ─── 3e overlay « thank you » — le twist final ────────────────────────────── */
/* Réutilise .tc-banner / .tc-liftoff / .tc-hype / .tc-confirm-btn de l'écran 2.
   Seuls le voile et l'icône chat (plus grande) sont propres à cet écran. */
#ticket-thanks {
    position: fixed;
    inset: 0;
    z-index: 22;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    pointer-events: auto;
}

/* Sections séparées par un filet, avec en-tête icône + label */
.tk-section {
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
}
.tk-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.tk-ico { width: 22px; height: 22px; color: var(--ink-on-surface); opacity: 0.85; }
/* .tk-head-label → remplacée par .ui-label-strong (rationalisation 21/07) */

/* Destination — typo portée par .t-title / .t-label ; ne reste que la structure */
.tk-dest-name { line-height: 0.95; margin-bottom: 8px; }
.tk-dest-dist { letter-spacing: 0.06em; }

/* Planifiez votre voyage — 2 colonnes (Terre / bord) */
.tk-trip { display: flex; gap: 48px; }
.tk-trip-col { flex: 1; }
/* .tk-col-title → .t-label-strong ; la marge sous le titre de colonne est reportée ici */
.tk-trip-col > .t-label-strong { display: block; margin-bottom: 12px; }
.tk-trip-line { margin-bottom: 10px; }
/* typo portée par .t-micro / .t-body / .t-value ; ne reste que la structure */
.tk-trip-k { display: block; margin-bottom: 2px; }
.tk-trip-v--big { letter-spacing: -0.02em; }
.tk-trip-dur { color: var(--ink-soft); font-size: 0.75em; }

/* Speed options — .tk-speed-label remplacée par .t-label (mais garde sa marge). */
.t-label + #travel-speed { margin-top: 14px; }
#travel-speed {
    display: block;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 1px;
    background: var(--ink-on-surface);
    outline: none;
    cursor: pointer;
    margin-bottom: 16px;
}
#travel-speed::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
#travel-speed::-moz-range-thumb {
    width: 18px; height: 18px;
    border: none; border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
.tk-classes { display: flex; }
.tk-class {
    flex: 1;
    text-align: center;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}
.tk-class:first-child { text-align: left; }
.tk-class:last-child  { text-align: right; }
.tk-class.is-active { opacity: 1; }
/* typo portée par .t-label / .t-micro */
.tk-class-sub { margin-top: 3px; }

/* Moteurs — lignes sélectionnables (radio) */
.tk-engines { padding-top: 8px; }
.tk-engine {
    display: grid;
    grid-template-columns: 22px 1fr auto auto;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--hairline);
}
.tk-engine:last-child { border-bottom: none; }
.tk-radio { position: absolute; opacity: 0; pointer-events: none; }
.tk-radio-dot {
    width: 16px; height: 16px;
    border: 1.5px solid var(--ink-on-surface);
    border-radius: 50%;
    position: relative;
}
.tk-radio:checked + .tk-radio-dot::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--accent);
}
.tk-engine-body { display: flex; flex-direction: column; gap: 3px; }
/* typo portée par .t-micro ; ne reste que la pastille (structure) */
.tk-badge {
    align-self: flex-start;
    border: 1px solid var(--ink-on-surface);
    border-radius: 999px;
    padding: 2px 8px;
    margin-bottom: 3px;
}
/* typo portée par .t-value */
.tk-engine-name { letter-spacing: -0.01em; }
/* typo portée par .t-body ; ne reste que l'interligne + largeur (structure) */
.tk-engine-desc { line-height: 1.4; max-width: 300px; }
/* La 2e ligne (galaxie / conso mondiale) partage désormais le même style foncé
   que la 1re — plus de gris clair distinct. */
.tk-engine-price {
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.tk-engine-price sup { font-size: 0.62em; }

/* Bouton ticket : gris par défaut, rouge quand le moteur est sélectionné.
   Typo portée par .t-btn ; ne restent que la couleur/fond/structure. */
.tk-ticket {
    padding: 11px 18px;
    border: none;
    background: var(--muted-track);
    color: var(--ink-on-accent);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease;
}
.tk-engine:has(.tk-radio:checked) .tk-ticket { background: var(--accent); }

.tk-warp-note {
    font-family: var(--font-main);
    font-size: var(--fs-micro);
    letter-spacing: 0.04em;
    color: var(--muted-faint);
    margin-top: 16px;
    text-align: right;
}

/* ─── Flash overlay (hyperespace) ──────────────────────────────────────────── */

#flash-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-bg);   /* suit le thème : éclair blanc en light, sombre en dark */
    pointer-events: none;
    z-index: 50;
    opacity: 0;
}

/* ─── Overlay éditorial — commun Système & Planète ───────────────────────────────── */

.editorial-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.editorial-title-block {
    position: absolute;
    top: calc(56px + 11vh);
    left: 32px;
    max-width: 45%;
}

/* typo portée par .t-hero — ne restent que les spécificités structurelles */
.editorial-name {
    line-height: 0.88;
    letter-spacing: -0.04em;
    margin-bottom: 16px;
    word-break: break-word;
}

/* typo portée par .t-title (dont color ink-soft — type spectral en secondaire) */
.editorial-type { /* structure only */ }

.metrics-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-end;
    padding: 0 0 28px 0;
    background: none;
}

/* ─── Vue planète — overlay éditorial ──────────────────────────────────────── */

/* Planète : espace avant le bloc découverte */
#planet-type-editorial { margin-bottom: 44px; }

#planet-discovery {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.discovery-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* .disc-label → remplacée par .ui-label (rationalisation 21/07) */

/* .disc-value → typo portée par .t-value (20px → 18px, rationalisé) */

.metric-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 28px;
    gap: 2px;
}

/* ─── Icônes SVG (mask-image) ────────────────────────────────────────────────
   Les SVG sont monochromes ; la COULEUR vient du CSS via `background: currentColor`
   + `mask`. Résultat : l'icône suit la couleur du texte, donc l'inversion noir↔blanc
   au hover (bouton pause, contrôles) est GRATUITE — aucune 2ᵉ version de fichier.
   Chaque classe `.svg-icon--X` ne fait que pointer son fichier ; la TAILLE est
   donnée par le contexte (.metric-icon / .bc-icon / .gc-btn), pas ici. */
.svg-icon {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    flex: none;
}
.svg-icon--planets       { --icon: url('../assets/icons/planets.svg'); }
.svg-icon--temp          { --icon: url('../assets/icons/temp.svg'); }
.svg-icon--star-radius   { --icon: url('../assets/icons/star-radius.svg'); }
.svg-icon--distance      { --icon: url('../assets/icons/distance.svg'); }
.svg-icon--planet-radius { --icon: url('../assets/icons/planet-radius.svg'); }
.svg-icon--mass          { --icon: url('../assets/icons/mass.svg'); }
.svg-icon--period        { --icon: url('../assets/icons/period.svg'); }
.svg-icon--galaxy        { --icon: url('../assets/icons/galaxy.svg'); }
.svg-icon--system        { --icon: url('../assets/icons/system.svg'); }
.svg-icon--planet        { --icon: url('../assets/icons/planet.svg'); }
.svg-icon--candidates    { --icon: url('../assets/icons/filter-candidates.svg'); }
.svg-icon--filter-hz     { --icon: url('../assets/icons/filter-hz.svg'); }
.svg-icon--legend        { --icon: url('../assets/icons/legend.svg'); }
.svg-icon--filters       { --icon: url('../assets/icons/filters.svg'); }
.svg-icon--theme-light   { --icon: url('../assets/icons/theme-light.svg'); }
.svg-icon--theme-dark    { --icon: url('../assets/icons/theme-dark.svg'); }
.svg-icon--sound-on      { --icon: url('../assets/icons/sound-on.svg'); }
.svg-icon--sound-off     { --icon: url('../assets/icons/sound-off.svg'); }
.svg-icon--cat           { --icon: url('../assets/icons/cat.svg'); }
.svg-icon--rocket        { --icon: url('../assets/icons/rocket.svg'); }

/* Tête de métrique : icône à gauche + label à droite, sur une ligne. */
.metric-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* Icône métrique : taille SVG (remplace l'ancien font-size 15px des glyphes). */
.metric-icon {
    width: var(--icon-sm);
    height: var(--icon-sm);
    color: var(--ink);
    opacity: 0.55;
}

/* .metric-label → remplacée par .ui-label (rationalisation 21/07) */

/* typo portée par .t-display ; graisse forcée bold sur les valeurs (mise en avant,
   cf. TYPO.md). Les 3 vues partagent ces classes → couvre système/galaxie/planète. */
.metric-value {
    font-weight: var(--fw-bold);
}
/* État null (— gris, piloté par le JS) : pas de mise en avant → retour au light. */
.metric-value.metric-null {
    color: var(--muted-faint);
    font-size: clamp(24px, 2.5vw, 36px);
    font-weight: var(--fw-light);
}

/* Ligne de conversion sous la valeur. Typo portée par .t-body-soft ; ne restent
   que la structure (marge, interligne serré). Vide → pas de place occupée (le JS
   laisse le span vide quand aucune conversion ne s'applique). */
.metric-conv {
    letter-spacing: 0.02em;
    margin-top: 4px;
    line-height: 1.2;
}

/* Wrapper : porte le centrage fixe, immuable. Le bouton change de largeur quand
   le label passe de « Pause orbites » à « Reprendre » — en centrant le wrapper (et
   non le bouton via translateX/xPercent), le bouton reste centré quelle que soit sa
   largeur, et GSAP n'anime plus que le bouton à l'intérieur (opacity + y), sans
   toucher au centrage. Corrige le décalage vers la gauche au changement de label. */
#btn-pause-wrap {
    position: fixed;
    bottom: 25vh;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    pointer-events: none;   /* seul le bouton est cliquable */
}

/* Même registre que le CTA « Get your ticket » (mono, uppercase, angles droits),
   mais en noir avec inversion hover noir ↔ blanc. */
#btn-pause,
.consent-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    background: var(--surface);
    border: 1px solid var(--ink-on-surface);
    color: var(--ink-on-surface);
    font-family: var(--font-main);
    font-size: var(--fs-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

#btn-pause .btn-ico {
    font-size: var(--fs-body);
    line-height: 1;
}

#btn-pause .btn-lbl {
    white-space: nowrap;
}

/* Hover : inversion complète (trait ↔ surface). */
#btn-pause:hover,
.consent-btn:hover {
    background: var(--ink-on-surface);
    color: var(--surface);
    border-color: var(--ink-on-surface);
}

/* btn-hz masqué (logique conservée, remplacé visuellement par #gc-filter) */
#btn-hz { display: none; }

/* ─── Contrôles galaxie (Filtre + Légende) ──────────────────────────────────── */

/* Hamburger : caché partout, affiché seulement en mobile portrait (bloc Responsive en fin de fichier). */
#gc-menu { display: none; }

#galaxy-controls {
    position: fixed;
    top: 2vh;
    right: 1vw;
    z-index: 10;
    display: flex;
    align-items: stretch;
    height: var(--bar-h);
}

.gc-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.gc-btn:hover  { opacity: 0.65; }
.gc-btn.active { opacity: 1; }

.gc-btn .bc-icon { width: var(--icon-md); height: var(--icon-md); color: var(--ink); }

/* ─── Info card galaxie ─────────────────────────────────────────────────────
   #system-card et la plupart des .sc-* ont été retirés (card supprimée du HTML).
   Ne restent VIVANTS que : .sc-star-glow (vignette étoile #sys-star-glow) et le
   bloc #sol-crosshair .sc-* (crosshair Sol). */

.sc-star-glow {
    width: 35px;    /* moitié de l'70 px d'origine */
    height: 35px;
    border-radius: 50%;
    margin-top: 5vh;
    animation: sc-pulse 3s ease-in-out infinite;
}

@keyframes sc-pulse {
    0%, 100% { opacity: 0.75; transform: scale(0.97); }
    50%       { opacity: 1.00; transform: scale(1.00); }
}

/* ── Crosshair Sol ────────────────────────────────────────────────────────── */
#sol-crosshair {
    position: fixed;
    z-index: 20;
    width: 20px;
    height: 20px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
#sol-crosshair .sc-tick {
    position: absolute;
    background: var(--accent);
}
#sol-crosshair .sc-tick-n,
#sol-crosshair .sc-tick-s { width: 1px; height: 5px; left: 50%; transform: translateX(-50%); }
#sol-crosshair .sc-tick-e,
#sol-crosshair .sc-tick-w { height: 1px; width: 5px; top: 50%; transform: translateY(-50%); }
#sol-crosshair .sc-tick-n { bottom: calc(100% + 3px); }
#sol-crosshair .sc-tick-s { top:    calc(100% + 3px); }
#sol-crosshair .sc-tick-e { left:   calc(100% + 3px); }
#sol-crosshair .sc-tick-w { right:  calc(100% + 3px); }
#sol-crosshair .sc-label {
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono, monospace);
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

#system-selector {
    position: fixed;
    z-index: 15;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: selector-pulse 1.8s ease-in-out infinite;
    /* Point central toujours visible (suit le thème : sombre sur clair, clair sur sombre) */
    background: radial-gradient(circle, var(--ink-on-surface) 50%, transparent 51%);
}

#system-selector.burst {
    animation: selector-burst 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#system-selector::before {
    content: '';
    position: absolute;
    inset: -5px;
    border: 1px solid var(--accent);
    border-radius: 50%;
    opacity: 0.3;
}

/* Anneau secondaire qui explose au clic */
#system-selector::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--accent);
    opacity: 0;
}

#system-selector.burst::after {
    animation: selector-ring-expand 0.55s ease-out forwards;
}

@keyframes selector-burst {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    35%  { transform: translate(-50%, -50%) scale(2.2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}

@keyframes selector-ring-expand {
    0%   { transform: scale(1);   opacity: 0.8; }
    100% { transform: scale(4);   opacity: 0;   }
}

@keyframes selector-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 1;   }
    50%       { transform: translate(-50%, -50%) scale(1.5); opacity: 0.35; }
}

/* ─── Légende galaxie ────────────────────────────────────────────────────────── */

/* ─── Panneau Légende — sidebar + voile (accordéons FAQ + repères couleur) ──────
   Voile : même registre que la lightbox #travel-calc. Le sidebar glisse depuis la
   droite ; le voile capte le clic pour fermer. */
/* ─── Panneau latéral commun (.side-panel) ──────────────────────────────────────
   Base partagée par Legend et Filters : slide-in droite (GSAP translateX), voile
   qui fond. Chaque panneau garde son ID pour le JS + son contenu propre ; le CHÂSSIS
   (backdrop, sidebar, bouton fermer, en-tête) vit ici, une seule fois. */
.side-panel {
    position: fixed;
    inset: 0;
    z-index: 25;
}
.side-panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: auto;
}
.side-panel-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(max(500px, 33vw), 94vw);   /* 33vw, plancher 500px, plafonné au viewport (mobile) */
    padding: 68px 30px 34px;   /* padding-top large : le bouton Fermer reste seul en haut */
    background: var(--panel-bg);
    border-left: 1px solid var(--panel-border);
    backdrop-filter: blur(12px);
    box-shadow: -18px 0 46px rgba(20, 30, 60, 0.14);
    overflow-y: auto;
    pointer-events: auto;
    /* slide-in animé par GSAP (translateX) — will-change évite le saccade dû au
       recompositing du backdrop-filter blur pendant le glissement. */
    will-change: transform;
}
.side-panel-close {
    position: absolute;
    top: 20px;
    right: 22px;
    background: none;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    padding: 4px;
}
.side-panel-close:hover { color: var(--ink); }
.side-panel-head  { margin: 0 0 12px; }
.side-panel-intro { margin: 0 0 24px; }   /* largeur liquide (cf. .acc-body p) */

/* ─── Panneau Filters — contenu propre (le châssis vient de .side-panel) ───────── */
.filters-list { display: flex; flex-direction: column; gap: 2px; }
/* Ligne de filtre : icône + label, cliquable pleine largeur. L'état actif est porté
   par .active (posé par le JS, comme les anciens boutons) : trait accent à gauche. */
.flt-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 12px;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    text-align: left;
    color: var(--ink);
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.flt-row:hover  { opacity: 1; background: rgba(128, 128, 128, 0.06); }
.flt-row.active { opacity: 1; border-left-color: var(--accent); }
.flt-ico { width: var(--icon-md); height: var(--icon-md); color: var(--ink); flex: none; }
/* Vignette soleil : vraie image (couleur = info), taille alignée sur .flt-ico. */
.flt-sun { width: var(--icon-md); height: var(--icon-md); flex: none; display: block; }
/* Compte par classe : poussé à droite de la rangée, discret, chiffres alignés. */
.flt-count { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }

/* Titre de section dans le panneau (« Star colour »). */
.filters-group-label { margin: 22px 0 8px 12px; display: block; }

/* ─── Switches réglages (Theme / Son) — carrés, parti pris anguleux ─────────────
   Empilés verticalement. Piste = contour seul (bordure --ink-on-surface à 30%, fond
   transparent) ; knob carré plein --ink-on-surface, 1px entre knob et piste. Icône
   d'état à droite (taille --icon-md), 2 variantes basculées par .is-on. */
#gc-switches {
    display: flex;
    flex-direction: column;   /* empilés l'un au-dessus de l'autre */
    align-items: flex-start;
    gap: 8px;
    padding: 0 18px;
    justify-content: center;
}
.sw {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sw-track {
    position: relative;
    display: block;
    width: 30px;
    height: 16px;
    box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, var(--ink-on-surface) 30%, transparent);   /* opposée, 30% */
    background: transparent;                        /* pas de fond : seule la bordure dessine la piste */
    transition: border-color 0.2s ease;
}
.sw-knob {
    position: absolute;
    /* Centré verticalement (robuste aux 1.5px de bordure), 1px du bord intérieur à
       gauche. Hauteur intérieure = 16 - 2×1.5 = 13 ; knob 11 → 1px en haut ET en bas. */
    top: 50%;
    left: 1px;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    background: var(--hairline-strong);   /* gris clair */
    transition: transform 0.2s ease;
}
/* État ON : knob glisse à droite. Course = largeur intérieure - knob - 2×1px marge
   = (30 - 2×1.5) - 11 - 2×1 = 14px. On conserve translateY(-50%) dans la translation. */
.sw.is-on .sw-knob { transform: translate(14px, -50%); }   /* translateX + centrage vertical conservé */
.sw:hover .sw-track { border-color: var(--accent); }

/* Icône d'état à droite : mask-image, taille alignée sur les icônes de boutons.
   Une seule des 2 variantes visible à la fois, selon .is-on. */
.sw-ico { width: var(--icon-md); height: var(--icon-md); color: var(--ink); flex: none; }
.sw-ico--on  { display: none; }
.sw.is-on .sw-ico--off { display: none; }
.sw.is-on .sw-ico--on  { display: inline-block; }

/* ─── Panneau Légende — contenu propre (le châssis vient de .side-panel) ───────── */

/* Accordéon FAQ */
.legend-accordion { border-top: 1px solid var(--panel-border); }
.acc-item { border-bottom: 1px solid var(--panel-border); }
.acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 15px 0;
    color: var(--ink);
}
.acc-head:hover { color: var(--accent); }
/* Signe +/− dessiné en CSS (pas de glyphe) : suit la couleur du texte au hover */
.acc-sign {
    position: relative;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}
.acc-sign::before,
.acc-sign::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: opacity 0.2s, transform 0.2s;
}
.acc-sign::before { top: 5px; left: 0;  width: 12px; height: 2px; }        /* barre horizontale */
.acc-sign::after  { top: 0;  left: 5px; width: 2px;  height: 12px; }        /* barre verticale (masquée à l'ouverture) */
.acc-item.open .acc-sign::after { opacity: 0; transform: scaleY(0); }
.acc-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s ease;
}
.acc-body p { padding: 0 0 16px; margin: 0; }   /* largeur liquide : suit le sidebar (moins son padding) */

.legend-colors { margin-top: 30px; }

/* typo portée par .t-label — ne reste que la marge (structure) */
.legend-title { margin-bottom: 10px; }

/* typo portée par .t-body — ne reste que la structure */
.legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

.legend-item:last-child { margin-bottom: 0; }

.legend-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Échantillons de la légende — DOIVENT suivre les vraies couleurs du rendu 3D.
   `.black` = les points systèmes : noirs sur clair, blancs sur sombre → --ink-on-surface.
   `.purple` = Sagittarius A* : s'éclaircit en dark → --sgra. Rouge (Sol) et vert (ZH)
   sont sémantiques, identiques dans les deux thèmes. */
.legend-dot.red    { background: var(--accent); }
.legend-dot.black  { background: var(--ink-on-surface); }
.legend-dot.green  { background: var(--hz); }
.legend-dot.purple { background: var(--sgra); border: 1px solid var(--sgra); }

/* ─── Labels galaxie (screen-space) ─────────────────────────────────────────── */

#gl-labels {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 8;
}

.gl-label {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    font-family: var(--font-main);
}

.gl-sol {
    font-size: var(--fs-label);
    font-weight: var(--fw-light);
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gl-sga {
    font-size: var(--fs-label);
    font-weight: var(--fw-light);
    color: var(--sgra);
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.gl-arm {
    font-size: var(--fs-micro);
    font-style: italic;
    color: var(--ink);
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.gl-dist {
    font-size: var(--fs-micro);
    font-family: var(--font-main);
    color: var(--ink);
    opacity: 0.55;
}

.gl-sys-label {
    font-size: var(--fs-micro);
    font-family: var(--font-main);
    color: var(--ink);
    opacity: 0.75;
    letter-spacing: 0.04em;
}

/* ─── Labels vue Système (anneaux SS + frost line) ───────────────────────────── */

.sys-ref-label {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    pointer-events: none;
    font-family: var(--font-main);
    font-size: var(--fs-micro);
    color: var(--ink);
    opacity: 0;
    letter-spacing: 0.05em;
    padding-left: 4px;
    transform-origin: left center;
}

.sys-frost-label {
    color: var(--frost);
    font-size: var(--fs-micro);
}

/* Repère situé hors de l'échelle du système (bande extérieure 700→900).
   Le glyphe est atténué et précédé d'un chevron : il indique une direction
   « au-delà », pas une distance mesurée dans ce système. */
.sys-ref-outside {
    font-style: italic;      /* l'opacité est pilotée par revealSequential (GSAP) */
}

/* Note de contexte dans le tooltip des lunes — ce qui rend la lune remarquable */
.tt-note {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    font-style: italic;
    opacity: 0.8;
    white-space: normal;      /* le conteneur #tooltip borne déjà à 220px */
    line-height: 1.45;
}

/* ─── Navigation latérale entre planètes (vue planète) ──────────────────────── */

.sib-nav {
    position: fixed;
    /* 25vh du bas — sous la planète, marge avec la heatmap température en bas de vue. */
    bottom: 25vh;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    font-family: var(--font-main);
    transition: color 0.25s ease, opacity 0.25s ease;
}

#planet-prev { left: 24px; }
#planet-next { right: 24px; }

.sib-nav:hover { color: var(--ink); }

.sib-arrow {
    font-size: var(--icon-lg);
    line-height: 1;
    transition: transform 0.25s ease;
}

/* Le chevron avance dans le sens de la navigation au survol */
#planet-prev:hover .sib-arrow { transform: translateX(-4px); }
#planet-next:hover .sib-arrow { transform: translateX(4px); }

.sib-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}
#planet-next .sib-body { text-align: right; }

/* typo portée par .t-label ; ne reste que l'atténuation */
.sib-label { opacity: 0.55; }

/* typo portée par .t-body (.sib-name est aussi animé par GSAP → classe conservée) */
.sib-name { letter-spacing: 0.02em; }

/* ─── Badge zone habitable (vue planète) ────────────────────────────────────── */

.hab-badge {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 15px;
    padding: 4px 10px;
    font-family: var(--font-main);
    font-size: var(--fs-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--hz);
    color: var(--hz);
}

/* Conservative : les ~9 planètes des critères stricts du HWC */
.hab-conservative {
    background: var(--hz);
    color: var(--ink-on-accent);
}

/* Optimiste : rayon souvent inconnu, marquage volontairement plus discret */
.hab-optimistic {
    border-style: dashed;
    opacity: 0.75;
}

.sys-ref-outside::before {
    content: '↗ ';
    opacity: 0.5;
    font-style: normal;
}

/* ─── Heatmap température vue planète ───────────────────────────────────────── */

#temp-heatmap {
    position: fixed;
    /* Décalée de 10vw vers la gauche pour dégager le bouton « suivante » :
       l'élément est ancré à droite, donc on augmente `right`. */
    right: calc(52px + 10vw);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 20;
    pointer-events: none;
    gap: 6px;
}

/* .thm-label → typo portée par .t-label */

.thm-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.thm-tick {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--ink);
    opacity: 0.35;
}

.thm-bar {
    width: 14px;
    height: 260px;
    border-radius: 1px;
    position: relative;
    background: linear-gradient(to top,
        #1a0550  0%,
        #3344cc 18%,
        #0099ff 33%,
        #00ddaa 48%,
        #aaee00 60%,
        #ffcc00 70%,
        #ff6600 80%,
        #ff2200 90%,
        #ffffff 100%
    );
}

.thm-cursor {
    position: absolute;
    left: -7px;
    right: -7px;
    height: 2px;
    background: transparent;
    top: 50%;
}

.thm-cursor::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right: 8px solid var(--ink);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* typo portée par .t-micro ; letter-spacing propre (chiffres serrés) */
.thm-val { letter-spacing: 0.04em; }
/* Seconde ligne : °C · équil. (la 1re donne les kelvins). Masquée en mobile, voir le bloc Responsive. */
.thm-val-sub { font-size: var(--fs-micro); opacity: 0.55; }

.thm-zero {
    position: absolute;
    left: -4px;
    right: -4px;
    top: 60%;  /* 0°C = 273 K sur échelle log 50 → 3500 K */
    height: 1px;
    background: rgba(0, 0, 0, 0.30);
    pointer-events: none;
}

.thm-zero::after {
    content: '0°C';
    position: absolute;
    right: calc(100% + 5px);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-main);
    font-size: var(--fs-micro);
    color: rgba(0, 0, 0, 0.40);
    white-space: nowrap;
}

/* ─── Bandeau de consentement (cookies de mesure d'audience) ────────────────────
   Petit, en bas à gauche, au-dessus des panneaux. Les boutons réutilisent le style
   de « pause orbites » (.consent-btn partage ses règles). */

#consent {
    position: fixed;
    left: 32px;
    bottom: 3vh;
    z-index: 30;
    max-width: 340px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--hairline-strong);
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.consent-actions {
    display: flex;
    gap: 10px;
}
.consent-btn {
    justify-content: center;
    flex: 1;
}

/* Liens discrets du pied de Légende (Analytics / crédits) : souligné, plus foncé au survol. */

/* Crédits : tout en bas du panneau, même si le contenu est court. */
#legend-sidebar { display: flex; flex-direction: column; }
#legend-sidebar > * { flex-shrink: 0; }   /* colonne qui défile : sans ça, les blocs se compressent au lieu de déborder */
.legend-foot { margin-top: auto; padding-top: 34px; }
.legend-foot p { margin: 0; }
.legend-consent { margin-top: 10px; }   /* lien Analytics : sous les crédits */
.legend-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.legend-link:hover { color: var(--ink); }

/* ═══ Responsive ═══════════════════════════════════════════════════════════════════
   Première passe « tailles » (07/10/2026), à régler à l'écran.
   Principe : on surcharge d'abord les TOKENS (typo, icônes, hauteur de bande) — tout ce
   qui s'appuie dessus suit — puis quelques positions. Ce bloc reste EN FIN de fichier :
   une règle de base écrite plus bas écraserait ces surcharges (même spécificité).
   Trois paliers : ≤ 900 px (tablette, téléphone paysage) · ≤ 600 px (téléphone portrait)
   · écrans bas (téléphone paysage). */

@media (max-width: 900px) {
    :root {
        --fs-hero:    clamp(34px, 8vw, 56px);
        --fs-display: clamp(24px, 5vw, 36px);
        --icon-logo:  clamp(40px, 6vw, 56px);
    }
    .sib-body { display: none; }          /* noms des flèches ← → : chevrons seuls */
    .sib-nav  { padding: 14px; }
    .bc-step  { padding: 0 14px; }
    .gc-btn   { padding: 0 12px; }
    #consent  { left: 16px; }
    #nh-mark  { right: 16px; }
}

@media (max-width: 600px) {
    :root {
        --bar-h:      56px;
        --fs-hero:    clamp(30px, 10.5vw, 42px);
        --fs-display: clamp(19px, 6vw, 26px);
        --fs-title:   clamp(15px, 4.4vw, 20px);
        --icon-logo:  48px;          /* boîte CARRÉE du petit logo (le symbole en occupe ~75 %) */
        --icon-lg:    18px;
        --icon-md:    16px;
    }

    /* Bande du haut sur UNE ligne : logo | fil d'Ariane centré | hamburger. */
    #site-logo { left: 14px; }
    /* Petit logo carré à la place du wordmark large (même masque, autre fichier : suit la couleur du thème). */
    #site-logo::before {
        aspect-ratio: 1;
        -webkit-mask-image: url('../assets/offworld_small.svg');
        mask-image: url('../assets/offworld_small.svg');
    }
    .bc-step   { padding: 0 5px; }   /* écart entre les 3 icônes : 10 px entre deux étapes */

    /* Hamburger (trois barres). */
    #gc-menu {
        position: fixed;
        top: 2vh;
        right: 8px;
        z-index: 16;
        width: 48px;
        height: var(--bar-h);
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        color: var(--ink);
    }
    .gc-menu-bars,
    .gc-menu-bars::before,
    .gc-menu-bars::after {
        display: block;
        width: 20px;
        height: 2px;
        background: currentColor;
        transition: transform 0.25s ease, top 0.25s ease, background 0.2s ease;
    }
    .gc-menu-bars { position: relative; }
    .gc-menu-bars::before,
    .gc-menu-bars::after { content: ""; position: absolute; left: 0; }
    .gc-menu-bars::before { top: -6px; }
    .gc-menu-bars::after  { top:  6px; }

    /* Menu : #gc-filters, #gc-legend et #gc-switches sont déplacés par le JS (wireMenu) dans le panneau
       latéral #menu-panel. La barre #galaxy-controls reste donc vide en mobile : on la masque. */
    #galaxy-controls { display: none; }
    #menu-items { display: flex; flex-direction: column; gap: 4px; }
    #menu-items .gc-btn { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 12px; }
    #menu-items #gc-switches { flex-direction: column; align-items: flex-start; gap: 18px; padding: 16px 12px; }   /* Theme au-dessus de Sound, alignés à gauche comme les lignes */

    /* Bloc titre : toute la largeur, sous la bande. */
    .editorial-title-block {
        top: calc(2vh + var(--bar-h) + 44px);   /* 14 px + 30 px : descendu sous la bande */
        left: 16px;
        max-width: calc(100% - 32px);
    }

    #planet-type-editorial { margin-bottom: 24px; }   /* espace type → « Discovery » : 44 → 24 px */

    /* Barre de métriques : 2 × 2 au lieu de 4 colonnes. */
    .metrics-bar { flex-wrap: wrap; padding-bottom: 14px; }
    .metric-item { flex: 1 1 50%; padding: 0 16px; margin-bottom: 12px; }
    .metric-conv { display: none; }   /* sous-lignes (conversions) masquées : on garde le libellé et le gros chiffre */

    /* Barre de température : même hauteur, mais plus fine et collée au bord droit. */
    #planet-prev { left: 14px; }     /* flèches ← → : 10 px plus près des bords (24 → 14) */
    #planet-next { right: 14px; }
    #temp-heatmap { right: 26px; }   /* 6 px + 20 px de marge à droite */
    .thm-bar  { width: 10px; }
    .thm-tick { width: 16px; }
    .thm-val-sub, .thm-val br { display: none; }   /* seconde ligne (°C · équil.) masquée : on garde les kelvins */
    .side-panel-sidebar { padding: 68px 20px 28px; }

    /* Bandeau de consentement : pleine largeur, en laissant la place à la signature. */
    #consent { left: 12px; right: 44px; bottom: 12px; max-width: none; }
    #nh-mark { right: 12px; bottom: 12px; }
}

/* Téléphone en paysage (écran bas) : on gagne de la hauteur plutôt que de la largeur. */
@media (max-height: 520px) and (orientation: landscape) {
    :root {
        --bar-h:      56px;
        --fs-hero:    clamp(28px, 7vh, 44px);
        --fs-display: clamp(18px, 5.5vh, 28px);
        --icon-logo:  32px;
    }
    .gc-btn .t-label { display: none; }
    .editorial-title-block { top: calc(var(--bar-h) + 8px); }
    .metrics-bar { padding-bottom: 10px; }
    .sib-nav, #btn-pause-wrap { bottom: 18vh; }
}