/* =========================================================
   ODYSSÉE SPATIALE — trajectoire d’approche.
   Une seule page, aucun scroll, responsive.
   Tokens strictement issus du design system Telnet (v1).
   ========================================================= */
:root{
  --bg:#080C15; --bg-2:#0C1120; --surface:#131A2B; --surface-2:#1A2340;
  --line:#28324C; --line-2:#3C496E;
  --fg:#EAEEF8; --muted:#95A1BF; --faint:#66728F;
  --gold:#E6B23A; --gold-dim:rgba(230,178,58,.14);
  --blue:#5E83DE; --blue-dim:rgba(94,131,222,.16);
  --cyan:#3FE0C4; --cyan-dim:rgba(63,224,196,.14);
  --amber:#E8A23A; --red:#E8584C;
  --font-display:'Montserrat',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-sm:8px; --r:14px; --r-lg:20px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --glow-gold:0 0 0 1px rgba(230,178,58,.4),0 0 24px rgba(230,178,58,.25);
  color-scheme:dark;
}
*{box-sizing:border-box;min-width:0}
html,body{margin:0;height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--fg);font-family:var(--font-body);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  /* dégradés volontairement très discrets : fond « espace profond »,
     comme l'exige la charte (jamais de halo clair) */
  background-image:
    radial-gradient(1100px 620px at 86% 10%,rgba(230,178,58,.06),transparent 60%),
    radial-gradient(900px 560px at -6% 40%,rgba(94,131,222,.09),transparent 58%),
    radial-gradient(900px 600px at 55% 112%,rgba(63,224,196,.05),transparent 62%);
}
/* ---------- le ciel ---------- */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
h1{font-family:var(--font-display);margin:0;line-height:1.05}
p{margin:0}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.gold-t{color:var(--gold)} .cyan-t{color:var(--cyan)}
.sub{font-size:clamp(10px,.82vw,12px);color:var(--muted);line-height:1.45}
.sub b{color:var(--fg);font-weight:600}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:clamp(9px,.8vw,12px);
  letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.eyebrow span{color:var(--gold)}

/* ---------- ossature plein écran ---------- */
.app{
  position:relative;z-index:1;
  height:100dvh;height:100svh;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px)
          env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  overflow:hidden;
}

/* ---------- en-tête ---------- */
.top{display:flex;align-items:center;gap:clamp(10px,1.6vw,18px);
  padding:10px clamp(12px,2.2vw,28px);border-bottom:1px solid var(--line);
  background:rgba(8,12,21,.6);backdrop-filter:blur(10px)}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:800;letter-spacing:.5px;font-size:clamp(11px,1.1vw,14px);white-space:nowrap}
.logo .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);animation:breathe 2.6s ease-in-out infinite;flex:none}
.top .badge{margin-left:auto}
.clock{color:var(--faint);font-size:clamp(10px,1vw,12.5px);white-space:nowrap}

/* ---------- bandeau compte à rebours ---------- */
.cdbar{display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap;
  padding:clamp(10px,1.4vw,18px) clamp(12px,2.2vw,28px);border-bottom:1px solid var(--line)}
.cdbar-left{flex:none}
.cdbar-left h1{font-size:clamp(20px,2.4vw,32px);font-weight:800;letter-spacing:-.4px;margin-top:6px}
.cd{display:grid;grid-template-columns:repeat(6,minmax(40px,1fr));gap:clamp(4px,.5vw,8px);
  flex:1 1 380px;max-width:620px}
.cd-cell{text-align:center;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  padding:clamp(7px,.9vw,12px) 2px clamp(5px,.6vw,8px);box-shadow:var(--shadow)}
.cd-v{display:block;font-size:clamp(21px,2.7vw,36px);line-height:1;color:var(--gold);
  font-weight:700;text-shadow:0 0 18px rgba(230,178,58,.35)}
.cd-k{display:block;font-family:var(--font-display);font-size:clamp(8px,.68vw,10px);
  font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.cd-cell.tick .cd-v{animation:tick .45s ease-out}

.zbox{flex:0 1 300px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--cyan-dim);padding:clamp(8px,.9vw,12px) clamp(11px,1.1vw,15px);
  display:flex;flex-direction:column;gap:2px}
.zrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.zrow .k{font-family:var(--font-display);font-size:clamp(9px,.74vw,11px);font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.zrow b{font-size:clamp(13px,1.35vw,19px);color:var(--cyan);white-space:nowrap}
.zbox .sub{margin-top:3px}

/* ---------- scène ---------- */
.stage{min-height:0;min-width:0;display:grid;place-items:stretch;
  padding:clamp(4px,.8vw,12px) clamp(8px,1.6vw,22px)}
#scene{display:block;width:100%;height:100%}

#scene-stars circle{animation:twinkle 4s ease-in-out infinite}
.halo{animation:halo 3.4s ease-in-out infinite}
.bob{animation:bob 2.4s ease-in-out infinite}
.lights circle{animation:blink 1.6s steps(1,end) infinite}
.lights circle:nth-child(2){animation-delay:.53s}
.lights circle:nth-child(3){animation-delay:1.06s}
.ant{animation:breathe 1.9s ease-in-out infinite}
.thrust{animation:thrust .5s ease-in-out infinite alternate;transform-origin:30px 30px}
.orbit{animation:spin 16s linear infinite;transform-origin:0 0}
.orbit-slow{animation:spin 34s linear infinite;transform-origin:0 0}
/* Pas de transition sur #ship : sa position est maintenant posee a chaque
   image par requestAnimationFrame (la glissade de la navette). Une
   transition d'une seconde relancee 60 fois par seconde laisse Chrome en
   animation composite permanente — le groupe se retrouve peint LOIN de sa
   position reelle, quelque part en haut a gauche de la scene. */

/* tailles de police posees en ligne par app.js (1 unite SVG = 1 pixel) */
.ms-date{fill:#66728F;font-family:'JetBrains Mono',monospace}
.pl-label{fill:#95A1BF;font-family:'JetBrains Mono',monospace;letter-spacing:.8px}
.pl-label.done{fill:#3FE0C4}
.orbit-line{stroke:#28324C;stroke-width:1.2;stroke-dasharray:3 6}
.orbit-line.far{stroke:#5E83DE;stroke-opacity:.35;stroke-dasharray:4 8}
.orbit-line.earth{stroke:#3FE0C4;stroke-opacity:.35;stroke-dasharray:4 8}

/* ---------- bande de progression ---------- */
.strip{padding:clamp(8px,1vw,14px) clamp(12px,2.2vw,28px) clamp(10px,1.1vw,16px);
  border-top:1px solid var(--line)}
.prog{height:7px;border-radius:999px;background:var(--bg-2);overflow:hidden;border:1px solid var(--line)}
.prog > i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .6s ease}
.strip-labels{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:clamp(9px,.82vw,12px);color:var(--muted);margin-top:7px}
.strip-labels span:nth-child(2){color:var(--gold)}

/* ---------- badges ---------- */
.badge{font-family:var(--font-mono);font-size:clamp(9px,.82vw,12px);font-weight:500;
  padding:5px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;
  border:1px solid transparent;white-space:nowrap}
.badge .d{width:7px;height:7px;border-radius:50%;flex:none}
.b-track{background:var(--cyan-dim);color:var(--cyan);border-color:rgba(63,224,196,.35)}
.b-track .d{background:var(--cyan);animation:breathe 2s ease-in-out infinite}
.b-warn{background:rgba(232,162,58,.14);color:var(--amber);border-color:rgba(232,162,58,.35)}
.b-warn .d{background:var(--amber);animation:breathe 1.2s ease-in-out infinite}

/* ---------- animations ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(-2.5px)}50%{transform:translateY(2.5px)}}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.2}}
@keyframes thrust{from{transform:scaleX(.8);opacity:.6}to{transform:scaleX(1.3);opacity:1}}
@keyframes halo{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:0;transform:scale(1.7)}}
@keyframes twinkle{0%,100%{opacity:.18}50%{opacity:.9}}
@keyframes tick{from{transform:translateY(-5px);opacity:.35}to{transform:none;opacity:1}}

/* =========================================================
   RESPONSIVE — toujours une page, jamais de scroll
   ========================================================= */
@media(max-width:1000px){
  .cdbar{gap:12px}
  .cdbar-left{flex:1 1 100%}
  .zbox{flex:1 1 100%}
}

/* ---------- MOBILE : la TRAJECTOIRE est l'élément principal ----------
   La scène passe juste sous l'en-tête et prend toute la hauteur
   disponible ; le compte à rebours devient un bandeau compact en bas.
   L'ordre visuel est inversé par la grille, le DOM reste inchangé.   */
@media(max-width:720px){
  .top{padding:9px 12px}
  .top .badge{display:none}
  .clock{margin-left:auto}

  .app{grid-template-rows:auto minmax(0,1fr) auto auto}
  .stage{grid-row:2;padding:4px 6px 0}
  .cdbar{grid-row:3}
  .strip{grid-row:4}

  /* Bandeau sous la trajectoire : discret en hauteur, mais les libellés
     restent au-dessus du seuil de lisibilité (9 px). */
  .cdbar{flex-direction:column;align-items:stretch;gap:5px;
    padding:8px 11px 10px;border-top:1px solid var(--line);border-bottom:0}
  .cdbar-left{flex:none;display:flex;align-items:baseline;gap:8px}
  .cdbar-left .eyebrow{font-size:9px;letter-spacing:1.4px}
  .cdbar-left h1{font-size:12px;line-height:1.1;margin:0;letter-spacing:0;
    font-weight:800;color:var(--fg)}
  .zbox{display:none}
  .cd{flex:none;max-width:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .cd-cell{padding:6px 2px 6px;border-radius:10px;box-shadow:none}
  .cd-v{font-size:clamp(15px,4.6vw,22px)}
  .cd-k{font-size:9px;letter-spacing:.4px;margin-top:4px}
  .cd-cell:nth-child(n+3) .cd-v{color:var(--cyan);text-shadow:0 0 12px rgba(63,224,196,.28)}

  .strip{padding:0 12px 10px}
  .strip-labels{font-size:11px;gap:6px;margin-top:7px}
  /* on garde le libelle du restant, pas celui du parcouru : le mode
     approche de la scene ne montre que ce qu il reste a faire */
  .strip-labels span:nth-child(1),.strip-labels span:nth-child(2){display:none}
  .strip-labels{justify-content:center}
}
@media(max-width:400px){
  .cdbar-left .eyebrow{display:none}
  .cd{gap:3px}
  .cd-cell{padding:6px 1px 5px}
  .cd-v{font-size:clamp(14px,4.4vw,20px)}
  .cd-k{font-size:9px;letter-spacing:.3px}
  .cdbar-left h1{font-size:11px}
}

/* ---------- écrans courts (paysage mobile) ----------
   On sacrifie le titre et les marges, jamais la taille des libellés. */
@media(max-width:720px) and (max-height:520px){
  .cdbar-left{display:none}
  .cdbar{gap:0;padding:8px 10px 9px}
  .cd-cell{padding:6px 1px 5px}
  .cd-v{font-size:clamp(18px,5.4vh,24px)}
  .cd-k{font-size:8.5px;margin-top:3px}
  .strip-labels{margin-top:5px}
}
@media(min-width:721px) and (max-height:600px){
  .cdbar-left h1{display:none}
  .cd-v{font-size:clamp(18px,4.6vh,28px)}
}
@media(min-width:721px) and (max-height:430px){
  .eyebrow{display:none}
  .zbox{display:none}
}

/* ---------- mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  .halo,.bob,.ant,.thrust,.orbit,.orbit-slow,.lights circle,
  #scene-stars circle,.logo .dot,.b-track .d{animation:none !important}
  .prog > i{transition:none}
  #starfield{display:none}
}