/* ═══════════════════════════════════════
   Carte du 'verse — page /carte.html
   ═══════════════════════════════════════ */
.map{position:relative;z-index:3;padding:100px clamp(16px,4vw,40px) 60px;max-width:1400px;margin-inline:auto}
.map__head{text-align:center;margin-bottom:22px}

/* ─── Barre d'outils ─── */
.map__tools{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.map__systems{display:flex;gap:8px;flex-wrap:wrap}
.map__systems button{
  font:inherit;cursor:pointer;padding:9px 20px;
  font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;
  color:var(--steel);background:rgba(255,255,255,.03);
  border:1px solid rgba(168,179,189,.18);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:.22s var(--ease);
}
.map__systems button:hover{color:var(--txt);border-color:var(--c)}
.map__systems button[aria-selected="true"]{
  color:#04121c;background:var(--c);border-color:var(--c);
}
.map__zoom{display:flex;gap:6px}
.map__zoom button{
  font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;
  color:var(--steel);background:rgba(84,173,247,.06);border:1px solid rgba(84,173,247,.22);
}
.map__zoom button:hover{color:var(--txt);border-color:var(--cyan);background:rgba(84,173,247,.14)}

/* ─── Scène ─── */
.map__stage{
  position:relative;
  border:1px solid rgba(84,173,247,.16);
  background:
    radial-gradient(55% 45% at 50% 50%,rgba(84,173,247,.06),transparent 70%),
    linear-gradient(to top,rgba(10,26,37,.45),rgba(3,8,13,.65));
  clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
  overflow:hidden;
}
#chart{display:block;width:100%;height:min(76vh,840px);touch-action:none;cursor:grab}
#chart:active{cursor:grabbing}
#chart,#chart *{
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  user-select:none;-webkit-user-select:none;
}
.map__state{
  position:absolute;inset:0;display:grid;place-items:center;margin:0;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--steel);pointer-events:none;
}
.map__legend{
  position:absolute;left:18px;bottom:16px;display:flex;gap:14px;flex-wrap:wrap;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);opacity:.5;pointer-events:none;
}
.map__legend b{color:var(--cyan);font-weight:400;margin-left:5px}
.map__hint{
  text-align:center;margin:16px 0 0;font-family:'JetBrains Mono',monospace;
  font-size:11px;letter-spacing:.1em;color:var(--steel);opacity:.55;
}
[hidden]{display:none!important}

/* ─── Orbites ─── */
.m-orbit{fill:none;stroke:rgba(168,179,189,.16);stroke-width:1}
.m-belt{fill:none;stroke:rgba(168,179,189,.3);stroke-width:7;stroke-dasharray:2 7;opacity:.5}
.m-local{fill:none;stroke:color-mix(in srgb,var(--accent) 22%,transparent);stroke-width:1;stroke-dasharray:3 6}

/* ─── Corps ─── */
.m-node{cursor:pointer}
.m-hit{fill:transparent;pointer-events:all}
.m-node > *:not(.m-hit){pointer-events:none}

.m-star{fill:var(--accent);filter:drop-shadow(0 0 26px var(--accent))}
.m-star-halo{fill:color-mix(in srgb,var(--accent) 16%,transparent)}

.m-planet{fill:#0d2433;stroke:none}
.m-planet-ring{fill:none;stroke:var(--c);stroke-width:2;opacity:.85;transition:opacity .2s,stroke-width .2s}
.m-moon{fill:#0d2433;stroke:#a8b3bd;stroke-width:1.4}
.m-station{fill:#0d2433;stroke:#a8b3bd;stroke-width:1.4;transform:rotate(45deg)}
.m-jump-mark{fill:none;stroke:var(--c);stroke-width:1.6;opacity:.75}

.m-node:hover .m-planet-ring,
.m-node:focus-visible .m-planet-ring{opacity:1;stroke-width:4}
.m-node:focus-visible{outline:none}
.m-node.is-active .m-planet-ring{opacity:1;stroke-width:4.5}
.m-node.is-active .m-moon,.m-node.is-active .m-station{stroke:var(--amber);stroke-width:2.4}

/* ─── Étiquettes ─── */
.m-lbl{
  font-family:'Bai Jamjuree',sans-serif;text-anchor:middle;fill:#e6ecf2;
  paint-order:stroke;stroke:#000;stroke-width:4px;stroke-linejoin:round;
}
.m-lbl--star{font-size:22px;font-weight:700;fill:var(--accent);letter-spacing:.06em}
.m-lbl--planet{font-size:19px;font-weight:600}
.m-lbl--belt{font-size:14px;font-weight:400;fill:rgba(168,179,189,.75);letter-spacing:.1em}
/* Lunes et stations : masquées de loin, sinon la carte devient illisible. */
.m-lbl--moon{font-size:13px;font-weight:400;fill:#a8b3bd;opacity:0;transition:opacity .25s}
#chart.is-near .m-lbl--moon{opacity:1}

/* ═══════════════════════════════════════
   Panneau de détail
   ═══════════════════════════════════════ */
.sheet{
  --c:var(--cyan);
  position:fixed;z-index:130;display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(to top,rgba(8,20,28,.97),rgba(6,14,21,.97));
  backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--c) 40%,transparent);
}
.sheet::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(85% 42% at 50% 0%,color-mix(in srgb,var(--c) 24%,transparent),transparent 72%);
}
.sheet__tilt{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;position:relative;z-index:1}
.sheet__in{padding:26px 26px 30px;overflow-y:auto;text-align:center}

@media (min-width:861px){
  .sheet{
    top:86px;right:18px;width:352px;max-height:calc(100svh - 110px);
    clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px);
    transform:translateX(calc(100% + 30px));opacity:0;pointer-events:none;
    transition:transform .4s var(--ease),opacity .3s var(--ease);
  }
  .sheet.is-open{transform:translateX(0);opacity:1;pointer-events:auto}
  .sheet__grab{display:none}
}
@media (max-width:860px){
  .sheet{
    left:0;right:0;bottom:0;max-height:min(80svh,80dvh);border-bottom:0;
    border-radius:20px 20px 0 0;
    translate:0 100%;visibility:hidden;
    transition:translate .4s var(--ease),visibility 0s linear .4s;
  }
  .sheet.is-open{translate:0 0;visibility:visible;transition:translate .4s var(--ease),visibility 0s}
  .sheet__grab{
    display:block;width:44px;height:4px;border-radius:3px;margin:10px auto 0;
    background:rgba(168,179,189,.35);flex:none;position:relative;z-index:2;
  }
  .sheet__in{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
}

.sheet__x{
  position:absolute;top:10px;right:12px;z-index:3;width:34px;height:34px;
  font-size:14px;cursor:pointer;color:var(--steel);background:rgba(255,255,255,.07);border:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.sheet__x:hover{background:rgba(255,255,255,.16);color:var(--txt)}

.sheet__wm{
  position:absolute;z-index:0;left:50%;top:74px;transform:translate(-50%,-50%);
  font-family:'Bai Jamjuree',sans-serif;font-weight:700;font-size:4.6rem;line-height:1;
  letter-spacing:-.05em;color:var(--c);opacity:.08;pointer-events:none;white-space:nowrap;
}
.body{
  width:92px;height:92px;border-radius:50%;margin:8px auto 16px;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--c) 55%,transparent),#0a1a24 70%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),
             0 12px 34px -12px color-mix(in srgb,var(--c) 60%,transparent);
}
.sheet__badge{
  display:inline-block;padding:5px 14px;margin-bottom:10px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  font-weight:700;color:#04121c;background:var(--c);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.sheet__name{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;margin:0 0 3px;line-height:1.2}
.sheet__call{font-style:italic;color:var(--c);opacity:.9;margin:0 0 18px;font-size:.92rem}

.sheet__rows{margin:0 0 18px;display:grid;text-align:left;padding:2px 14px;
  background:rgba(0,0,0,.25);border-left:2px solid color-mix(in srgb,var(--c) 45%,transparent)}
.sheet__rows > div{display:flex;justify-content:space-between;gap:14px;padding:10px 2px;
  border-bottom:1px solid rgba(168,179,189,.12)}
.sheet__rows > div:last-child{border-bottom:0}
.sheet__rows dt{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);opacity:.65;margin:0}
.sheet__rows dd{margin:0;font-weight:500;font-size:.95rem;text-align:right;overflow-wrap:anywhere}

.sheet__bio{font-size:.9rem;line-height:1.65;color:var(--steel);margin:0 0 18px;text-align:left;
  padding:14px 16px;background:rgba(84,173,247,.05);border-left:2px solid rgba(168,179,189,.18)}
.sheet__bio[hidden]{display:none}

.children h3{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);opacity:.7;margin:0 0 10px;text-align:left;
}
.children ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left}
.children li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 13px;cursor:pointer;background:rgba(255,255,255,.035);
  border-left:2px solid color-mix(in srgb,var(--c) 45%,transparent);
  transition:background .2s;
}
.children li:hover{background:color-mix(in srgb,var(--c) 14%,transparent)}
.children li b{font-weight:500;font-size:.93rem}
.children li span{font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.1em;color:var(--steel);opacity:.7}

@media (prefers-reduced-motion:reduce){
  .sheet{transition:none}
}

/* Villes : marqueur distinct des stations, en ambre. */
.m-city{fill:#2a1c06;stroke:#ffd24a;stroke-width:1.6;transform:rotate(45deg)}
.m-node.is-active .m-city{stroke:#fff;stroke-width:2.4}

/* ═══════════════════════════════════════
   RENDU 3D
   Le canvas WebGL et la couche d'étiquettes HTML se superposent : les
   étiquettes restent du texte natif, donc nettes et non déformées.
   ═══════════════════════════════════════ */
#stage3d{position:relative;height:min(76vh,840px);touch-action:none}
#stage3d canvas{display:block;width:100%;height:100%;cursor:grab}
#stage3d canvas:active{cursor:grabbing}
#stage3d .labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#stage3d,#stage3d *{
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;
  user-select:none;-webkit-user-select:none;
}

.lbl{
  font-family:'Bai Jamjuree',sans-serif;color:#e6ecf2;white-space:nowrap;
  text-shadow:0 0 4px #000,0 0 4px #000,0 0 8px #000;
  transform:translateY(-50%);pointer-events:none;
}
.lbl--star{font-size:19px;font-weight:700;letter-spacing:.06em;color:var(--amber)}
.lbl--planet{font-size:16px;font-weight:600}
.lbl--belt{font-size:12px;letter-spacing:.12em;color:rgba(168,179,189,.8)}
/* Petites étiquettes : révélées seulement quand la caméra s'approche. */
.lbl--small{font-size:12px;color:#a8b3bd;opacity:0;transition:opacity .3s}
#stage3d.is-near .lbl--small{opacity:1}

@media (max-width:860px){
  #stage3d{height:64vh}
  .lbl--planet{font-size:18px}
  .lbl--small{font-size:14px}
}

/* Sites de surface : plus discrets que les corps, révélés de près. */
.lbl--site{
  font-size:11px;font-weight:500;color:#ffd24a;letter-spacing:.02em;
  opacity:0;transition:opacity .3s;
}
#stage3d.is-near .lbl--site{opacity:1}

/* ─── Étiquettes des cibles d'opération ─── */
.lbl--target{
  font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:3px 9px;border:1px solid currentColor;white-space:nowrap;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  background:rgba(4,10,16,.82);
}
.lbl--target::after{
  content:attr(data-status);display:block;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.75;font-weight:400;
}
.lbl--target-avenir {color:#54adf7}
.lbl--target-encours{color:#4ade80;animation:pulseT 1.8s ease-in-out infinite}
.lbl--target-termine{color:#8b93a7;opacity:.6}
.lbl--target-annule {color:#ff5a3c;text-decoration:line-through}
@keyframes pulseT{0%,100%{opacity:1}50%{opacity:.55}}

/* ═══════════════════════════════════════
   MISE EN PAGE À DEUX COLONNES
   La fiche ne flotte plus par-dessus la scène : elle occupe une colonne
   d'appui, aux côtés de la liste des opérations. Sur téléphone, la colonne
   passe sous la scène et la fiche redevient une feuille basse.
   ═══════════════════════════════════════ */
.map__layout{display:grid;gap:16px;align-items:start}
@media (min-width:1000px){
  .map__layout{grid-template-columns:minmax(0,1fr) 340px}
}
.map__side{display:flex;flex-direction:column;gap:14px;min-width:0}

@media (min-width:1000px){
  /* Intégrée au flux : plus de position fixe ni de glissement latéral. */
  .sheet{
    position:static;width:auto;max-height:none;
    transform:none;opacity:1;pointer-events:auto;translate:none;visibility:visible;
    transition:none;display:none;
    clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  }
  .sheet.is-open{display:flex}
  .sheet__in{max-height:min(58vh,560px)}
}

/* ─── Liste des opérations ─── */
.ops{
  position:relative;
  border:1px solid rgba(84,173,247,.18);
  background:linear-gradient(to top,rgba(10,26,37,.6),rgba(6,14,21,.45));
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  padding:20px 18px;
}
.ops__title{
  font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:1.05rem;
  margin:0 0 14px;letter-spacing:-.01em;
}
.ops__title b{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;
  color:var(--cyan);margin-left:6px;
}
.ops__list{display:grid;gap:8px}
.ops__empty{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--steel);
  opacity:.65;margin:0;line-height:1.8;
}

.op{
  --c:var(--cyan);
  border-left:2px solid var(--c);background:rgba(255,255,255,.03);
  transition:background .2s;
}
.op:hover{background:color-mix(in srgb,var(--c) 12%,transparent)}
.op__head{
  display:flex;align-items:flex-start;gap:10px;width:100%;
  font:inherit;text-align:left;cursor:pointer;background:none;border:0;
  padding:12px 14px;color:inherit;
}
.op__dot{
  width:9px;height:9px;flex:none;margin-top:5px;background:var(--c);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.op[data-status="encours"] .op__dot{animation:opPulse 1.6s ease-in-out infinite}
@keyframes opPulse{0%,100%{opacity:1}50%{opacity:.35}}
.op__main{min-width:0;flex:1}
.op__title{display:block;font-weight:600;font-size:.95rem;overflow-wrap:anywhere}
.op__meta{
  display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c);opacity:.85;margin-top:3px;
}
.op__when{display:block;font-size:.82rem;color:var(--steel);margin-top:3px}
.op__chev{flex:none;color:var(--steel);transition:transform .25s var(--ease);margin-top:3px}
.op[aria-expanded="true"] .op__chev{transform:rotate(90deg)}

.op__body{padding:0 14px 14px 33px;display:grid;gap:10px}
.op__body[hidden]{display:none}
.op__brief{font-size:.88rem;line-height:1.6;color:var(--steel);margin:0}
.op__rows{display:grid;gap:5px;margin:0}
.op__row{display:flex;justify-content:space-between;gap:12px;font-size:.82rem}
.op__row span{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);opacity:.6;
}
.op__row b{font-weight:500;text-align:right;overflow-wrap:anywhere}
.op__divs{display:flex;gap:5px;flex-wrap:wrap}
.op__divs i{
  font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.14em;padding:3px 8px;color:#04121c;font-weight:700;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.op__goto{
  font:inherit;font-size:12px;cursor:pointer;justify-self:start;
  padding:7px 14px;color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 35%,transparent);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.op__goto:hover{background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--txt)}

/* ═══════════════════════════════════════
   TROIS COLONNES
   Missions à gauche, carte au centre, fiche du corps sélectionné à droite.
   Les empiler dans une seule colonne rendait la page interminable et
   obligeait à faire défiler pour passer de l'une à l'autre.
   L'ordre du DOM reste « carte, détail, opérations » : c'est l'ordre utile
   sur téléphone, où tout se remet en pile. Le placement en colonnes est
   confié à la grille, qui n'a pas à suivre cet ordre.
   ═══════════════════════════════════════ */
@media (min-width:1180px){
  .map__layout{grid-template-columns:310px minmax(0,1fr) 330px;align-items:start}
  .map__side--ops{grid-column:1;grid-row:1}
  .map__stage{grid-column:2;grid-row:1}
  .map__side--detail{grid-column:3;grid-row:1}

  /* Chaque colonne défile pour elle-même : une longue liste d'opérations ne
     doit pas allonger la page ni décaler la carte. */
  .map__side--ops .ops__list{max-height:calc(min(76vh,840px) - 78px);overflow-y:auto;padding-right:4px}
  .sheet__in{max-height:calc(min(76vh,840px) - 40px)}
}

/* Entre 1000 et 1180 px, deux colonnes suffisent : la place manque pour
   trois sans écraser la carte. */
@media (min-width:1000px) and (max-width:1179px){
  .map__layout{grid-template-columns:minmax(0,1fr) 330px}
  .map__side--detail{grid-column:2;grid-row:1}
  .map__side--ops{grid-column:1 / -1;grid-row:2}
  .map__side--ops .ops__list{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}
}

/* En dessous, tout s'empile : carte, puis opérations. La fiche redevient
   une feuille basse, elle ne prend donc pas de place dans le flux. */
@media (max-width:999px){
  .map__side--detail{display:contents}
}

/* ═══════════════════════════════════════
   PLEINE LARGEUR
   La carte est l'objet principal de la page : la brider à 1400 px laissait
   des marges inutiles et rétrécissait la scène d'autant.
   ═══════════════════════════════════════ */
.map{
  max-width:none;
  padding:96px clamp(12px,1.6vw,28px) 40px;
}
.map__head{margin-bottom:18px}

@media (min-width:1180px){
  /* Les colonnes latérales gardent une largeur lisible ; tout le reste va
     à la scène, qui devient l'élément élastique. */
  .map__layout{grid-template-columns:clamp(280px,20vw,360px) minmax(0,1fr) clamp(300px,21vw,380px)}
  /* Hauteur calée sur la fenêtre plutôt que sur une valeur fixe. */
  #stage3d{height:clamp(520px,calc(100svh - 250px),1100px)}
  .map__side--ops .ops__list{max-height:calc(clamp(520px,100svh - 250px,1100px) - 78px)}
  .sheet__in{max-height:calc(clamp(520px,100svh - 250px,1100px) - 40px)}
}