/* Page AMAIA : une scène plein cadre (base lunaire et galaxie), puis un récit en quatre temps, chacun porté par un schéma au trait. */

/* ---------- Ouverture ---------- */
.entete { background: linear-gradient(rgba(9, 30, 80, 0.72), rgba(9, 30, 80, 0)); }
.ouverture { overflow: hidden; overflow: clip; min-height: max(100vh, 780px); min-height: max(100svh, 780px); background: #0B2665; display: flex; flex-direction: column; }
.ouverture .vivant { background: #0B2665; }
.ouverture .repli { object-position: center bottom; }
.ouverture__grille { position: relative; flex: 1; display: grid; gap: 16px var(--colonne); padding-block: 8px 20px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(44vh, 1fr) auto auto auto; grid-template-rows: auto minmax(44svh, 1fr) auto auto auto; }
.ouverture__texte { display: flex; flex-direction: column; gap: 16px; }
.ouverture__texte .chapeau { font-size: var(--t-corps); line-height: 1.5; max-width: 34em; text-shadow: 0 1px 12px rgba(9, 30, 80, 0.6); }
.ouverture h1 { font-size: clamp(2.5rem, 4.9vw, 4.25rem); line-height: 1; }
.ouverture h1 .mot { white-space: nowrap; }
.ouverture h1 .car { transition: opacity 0.12s linear; }
.ouverture h1 .car--attend { opacity: 0.14; }
.ouverture__zone { min-height: 0; pointer-events: none; }

/* Repères : boutons en ligne sous la scène, puis posés sur les modules dès que la scène tourne sur grand écran. */
.reperes { display: flex; flex-wrap: wrap; gap: 8px; }
.repere {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 10px;
  font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.02em;
  color: var(--sur-plan); background: rgba(9, 30, 80, 0.72); border: 1px solid rgba(255, 255, 255, 0.5); cursor: pointer;
}
.repere[aria-pressed="true"] { background: var(--sur-plan); color: var(--cyano); border-color: var(--sur-plan); }
.repere__point { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.repere[aria-pressed="true"] .repere__point { background: currentColor; }

/* Pupitre : ce que dit AMAIA pour le module choisi */
.pupitre { background: rgba(8, 28, 76, 0.86); border: 1px solid rgba(255, 255, 255, 0.28); padding: 18px 20px 20px; display: grid; min-width: 0; }
.fiche { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.js .fiche { grid-area: 1 / 1; visibility: hidden; }
.js .fiche.active { visibility: visible; }
html:not(.js) .fiche + .fiche { margin-top: 24px; }
.dit { position: relative; font-size: var(--t-petit); line-height: 1.5; }
.dit--equipage { color: var(--sur-plan-doux); }
.dit__plein { opacity: 0; }
.dit__frappe { position: absolute; inset: 0; }
.dit--feuille { font-size: var(--t-petit); }
.mini { width: 100%; max-width: 440px; overflow: visible; fill: none; stroke: currentColor; }
.mini__seuil { stroke-dasharray: 3 5; stroke-width: 1; opacity: 0.8; }
.mini__courbe { stroke-width: 1.75; }
.mini__tete, .mini__valeur { fill: currentColor; stroke: none; }
.mini__regle { stroke-width: 1.5; }
.mini__legende { max-width: 440px; display: flex; justify-content: space-between; gap: 12px; margin-top: -4px; font-family: var(--f-mono); font-size: var(--t-mono); color: var(--sur-plan-doux); }
.mini__legende--droite { justify-content: flex-end; gap: 28px; }
.commandes { display: flex; flex-wrap: wrap; gap: 8px; }
.commande { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 10px; color: var(--sur-plan); background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); font: 500 var(--t-petit) / 1 var(--f-texte); cursor: pointer; }
.commande svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.commande[aria-pressed="true"] { background: var(--sur-plan); color: var(--cyano); border-color: var(--sur-plan); }
@media (prefers-reduced-motion: no-preference) { .commande[aria-pressed="true"] .helice { animation: tourne 1.1s linear infinite; } }
.etapes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.etapes i { height: 6px; border: 1px solid rgba(255, 255, 255, 0.6); }
.etapes i.fait { background: var(--sur-plan); border-color: var(--sur-plan); }
.etapes i.encours { background: var(--sur-plan-doux); }
.feuille { background: var(--blanc); color: var(--encre); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.feuille__titre { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--gris); letter-spacing: 0.04em; }

.note { font-family: var(--f-mono); font-size: 0.75rem; line-height: 1.5; color: var(--sur-plan-doux); background: rgba(8, 28, 76, 0.62); padding: 4px 8px; justify-self: end; }
.note__bouton { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 0.22em; color: var(--sur-plan); margin-left: 6px; white-space: nowrap; }
.note__bouton:focus-visible { outline: 2px solid var(--sur-plan); outline-offset: 2px; }
html:not(.js) .note, .ouverture:not(.vivante) .note { display: none; }

@media (min-width: 1000px) {
  .ouverture__grille { padding-block: 24px 24px; grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 40px; row-gap: 20px; }
  .ouverture__texte { grid-column: 1; grid-row: 1; }
  .ouverture__zone { grid-column: 2; grid-row: 1 / 3; }
  .pupitre { grid-column: 1; grid-row: 2 / 4; align-self: end; }
  .note { grid-column: 2; grid-row: 3; align-self: end; text-align: right; }
  .reperes { grid-column: 2; grid-row: 3; align-self: end; }
  .reperes { margin-bottom: 56px; justify-content: flex-end; }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .ouverture h1 { font-size: 3rem; }
  .ouverture__texte .chapeau { font-size: var(--t-petit); }
}
/* Repères posés sur la base : la scène les déplace à chaque image. */
.ouverture.reperes-places .reperes { grid-area: auto; position: absolute; inset: 0 auto auto 0; display: block; width: 0; height: 0; margin: 0; pointer-events: none; z-index: 1; }
.ouverture.reperes-places .repere { position: absolute; left: 0; top: 0; margin: 0; padding: 0 10px 0 8px; min-height: 30px; pointer-events: auto; will-change: transform; white-space: nowrap; }
/* En mobile et tablette, la scène réserve tout en haut ; les repères reviennent en ligne. */
@media (max-width: 999px) {
  .ouverture.reperes-places .ouverture__grille { padding-top: 8px; }
}

/* ---------- Le délai ---------- */
.course { margin-top: 16px; gap: 32px; padding-block: clamp(24px, 3vw, 40px); }
.course__tete { display: grid; gap: 8px 32px; align-items: baseline; }
@media (min-width: 760px) { .course__tete { grid-template-columns: auto minmax(0, 1fr); } }
.course__chrono { font-family: var(--f-mono); font-weight: 500; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--plan); font-variant-numeric: tabular-nums; }
.course__etat { color: var(--encre); max-width: 46ch; min-height: 3.4em; }
.course__compteur { display: grid; gap: 6px; }
.course__vitesse { font-family: var(--f-mono); font-size: var(--t-mono); color: var(--gris); }
.course__rejouer { color: var(--plan); margin-left: 0; }
.course__rejouer[hidden] { display: none; }
.course__piste { position: relative; height: 150px; margin-inline: 6px; color: var(--plan); }
.course__piste::before { content: ""; position: absolute; left: 0; right: 0; top: 75px; border-top: 1px dashed var(--plan); opacity: 0.55; }
.course__jalon { position: absolute; top: 75px; font-family: var(--f-mono); font-size: var(--t-mono); line-height: 1.35; color: var(--encre); width: 13em; }
.course__jalon b { display: block; font-weight: 500; color: var(--plan); }
.course__jalon::before { content: ""; position: absolute; left: -0.5px; width: 1px; background: var(--plan); }
.course__jalon--terre { width: auto; transform: translateY(-62px); }
.course__jalon--terre::before { top: 22px; height: 46px; width: 2px; }
.course__jalon--lune { transform: translateY(18px); }
.course__jalon--lune::before { top: -24px; height: 20px; }
.course__jalon--proche { transform: translateY(-58px); padding-left: 8px; }
.course__jalon--proche::before { top: 0; height: 64px; }
.course__jalon--loin { transform: translate(-100%, -58px); text-align: right; padding-right: 8px; }
.course__jalon--loin::before { left: auto; right: 0; top: 0; height: 64px; }
.course__trace { position: absolute; left: 0; top: 74px; height: 3px; width: 0; background: var(--plan); }
.course__front { position: absolute; left: 0; top: 75px; width: 13px; height: 13px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--plan); box-shadow: 0 0 0 5px rgba(30, 79, 160, 0.18); }
@media (max-width: 620px) {
  .course__piste { height: 196px; }
  .course__piste::before, .course__trace { top: 92px; }
  .course__front { top: 93px; }
  .course__jalon { top: 92px; width: 10em; }
  .course__jalon--proche { width: 13.4em; transform: translateY(-58px); } /* sur deux lignes, il laisse le nom de la Terre seul au-dessus */
  .course__jalon--proche::before { height: 64px; }
  .course__jalon--loin { transform: translate(-100%, 18px); }
  .course__jalon--loin::before { top: -24px; height: 20px; }
  .course__jalon--terre { transform: translateY(-82px); }
  .course__jalon--terre::before { top: 22px; height: 66px; }
}
/* Anglais, sous 620 px : Mars au plus loin tient aussi sur deux lignes, la piste peut être moins haute. */
@media (max-width: 620px) {
  :lang(en) .course__piste { height: 165px; }
  :lang(en) .course__jalon--loin { width: 13.4em; }
}

/* ---------- Orbites ---------- */
.orbites { background: var(--cyano-fonce); }
.orbites svg { overflow: visible; }
.o-trait { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.55; stroke-dasharray: 2 5; }
.o-plein { fill: currentColor; }
.o-vide { fill: var(--cyano-fonce); stroke: currentColor; stroke-width: 2; }
.o-lien { stroke: currentColor; stroke-width: 1.5; }
.o-lien.coupe { stroke-dasharray: 3 7; opacity: 0.55; }
.o-nom, .o-eti { font-family: var(--f-mono); font-size: 19px; fill: currentColor; }
.o-eti { fill: var(--sur-plan-doux); }
.o-delai { font-family: var(--f-titre); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; fill: currentColor; font-variant-numeric: tabular-nums; }
.o-rayon { stroke: currentColor; stroke-width: 1.5; }

/* ---------- Coupe ---------- */
.coupe svg { overflow: visible; fill: none; stroke: none; color: var(--cyano); }
.c-coque { fill: var(--cyano); }
.c-reflet { stroke: var(--sur-plan-doux); stroke-width: 1; opacity: 0.35; }
.c-sol { stroke: var(--cyano); stroke-width: 2.5; }
.c-plancher { stroke: var(--sur-plan-doux); stroke-width: 1; opacity: 0.55; }
.c-blanc { fill: var(--sur-plan); }
.c-antenne { stroke: var(--cyano); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.c-tige { stroke: var(--sur-plan); stroke-width: 2.5; }
.c-tx { font-family: var(--f-mono); font-size: 16px; fill: var(--sur-plan-doux); text-rendering: geometricPrecision; }
/* Schéma étroit (téléphone, ou colonne de 900 à 1199 px) : libellés un peu plus grands. */
@media (max-width: 620px), (min-width: 900px) and (max-width: 1199px) { .c-tx { font-size: 18px; } }
.c-tx--plan { fill: var(--plan); }
.c-tx--fort { fill: var(--sur-plan); font-weight: 500; font-size: 19px; }
.c-lampe { stroke: var(--sur-plan); stroke-width: 2; stroke-linecap: round; }
.c-voix { stroke: var(--sur-plan); stroke-width: 2.4; stroke-linecap: round; }
.c-flux { stroke: var(--sur-plan); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 9; }
.c-ordi { fill: var(--cyano-fonce); stroke: var(--sur-plan); stroke-width: 1.5; }
.c-ordi-l { stroke: var(--sur-plan-doux); stroke-width: 1.5; stroke-linecap: round; }
.c-disque { stroke: var(--sur-plan); stroke-width: 2.4; }
.c-onde { stroke: var(--plan); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 9; }
.c-lien circle { fill: var(--blanc); stroke: var(--plan); stroke-width: 2.4; }
.c-lien path:not(.c-onde) { stroke: var(--plan); stroke-width: 1.4; stroke-linecap: round; }
.c-coupure { stroke: var(--encre); stroke-width: 3.5; stroke-linecap: round; opacity: 0; transition: opacity 0.3s; }
.c-helice { transform-box: view-box; transform-origin: 456px 468px; }
.c-brique { stroke: var(--sur-plan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.c-pastille { fill: var(--cyano-fonce); stroke-width: 1.5; }
.c-point { fill: var(--sur-plan); stroke: none; }
#c-galaxie circle { fill: var(--sur-plan); stroke: none; }
#coupe.coupee .c-onde { opacity: 0.18; animation: none; }
#coupe.coupee .c-lien circle, #coupe.coupee .c-lien path:not(.c-onde) { opacity: 0.35; }
#coupe.coupee .c-coupure { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .c-helice { animation: tourne 1.6s linear infinite; }
  .c-flux { animation: flux 0.8s linear infinite; }
  .c-onde { animation: flux 0.8s linear infinite; }
  .c-voix { animation: voix 2.4s ease-in-out infinite; }
}
.couper { min-height: 48px; padding: 0 20px; background: var(--cyano); color: var(--sur-plan); border: 1px solid var(--cyano); font: 500 var(--t-corps) / 1 var(--f-texte); cursor: pointer; }
@media (hover: hover) { .couper:hover { background: var(--cyano-fonce); } }
.couper[aria-pressed="true"] { background: var(--blanc); color: var(--cyano); }
@keyframes tourne { to { transform: rotate(360deg); } }
@keyframes flux { to { stroke-dashoffset: -20; } }
@keyframes voix { 50% { opacity: 0.25; } }

/* ---------- Trajet ---------- */
.horizon .grand { margin-bottom: clamp(32px, 5vw, 64px); }
.trajet { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.trajet svg { width: 100%; overflow: visible; fill: none; stroke: currentColor; }
.trajet__etroit { display: none; }
@media (max-width: 759px) { .trajet__large { display: none; } .trajet__etroit { display: block; } }
.t-fort { stroke-width: 2.2; stroke-linecap: round; }
.t-fin { stroke-width: 1.1; stroke-linecap: round; opacity: 0.75; }
.t-plein { fill: currentColor; stroke: none; }
.t-vise { stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
.t-eti { font-family: var(--f-mono); font-size: 18px; fill: var(--sur-plan-doux); stroke: none; }
.t-gros { font-family: var(--f-titre); font-weight: 600; font-size: 26px; letter-spacing: -0.01em; fill: currentColor; stroke: none; }
@media (max-width: 759px) { .t-eti { font-size: 14px; } .t-gros { font-size: 21px; } }