/*
 * L accueil d Azria (« Univers vivant », retenu le 6 octobre 2026) — feuille unique de l avant-jeu : accueil, mot de passe
 * oublie et nouveau, documents, et les pages d erreur qui partagent ce cadre. Palette relevee au pixel sur le jeu
 * (inventaire §8). Aucune image ni regle de l ancien accueil, retire avec ce lot. Police des titres : Rajdhani
 * (OFL, polices/OFL-Rajdhani.txt), servie par le jeu lui-meme ; aucun service externe.
 * Les animations restent actives (decision de l administration) ; aucune ne clignote au-dela de 3 Hz.
 */
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 500; font-display: swap; src: url(polices/rajdhani-500.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices/rajdhani-600.woff2) format('woff2'); }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap; src: url(polices/rajdhani-700.woff2) format('woff2'); }

:root {
    /* La nuit et les panneaux du jeu */
    --nuit: #050b12; --nuit-2: #081521; --nebuleuse-a: #092537; --nebuleuse-b: #132339; --violet: #5f5488;
    --panneau: #141e26; --panneau-fonce: #0d1014; --annonce: #0c1b27;
    /* Les filets */
    --filet: #22394b; --filet-2: #3c566c; --filet-clair: #5689aa;
    /* Les bleus d acier */
    --bleu-titre: #6f9fc8; --acier: #a9bdcd; --acier-clair: #cfdde8; --cyan: #5fb4e6;
    /* Les ors */
    --or: #f2a533; --or-vif: #f29a1d; --or-doux: #e0c46a; --or-lisere: #d6b66e; --or-clair: #f8df99; --or-sombre: #6b5518; --or-fond: #221c0e;
    /* Les signaux */
    --vert: #99cc00; --vert-action: #45893e; --orange: #f48406; --rouge: #d43635;
    --texte: #c9d6e1; --texte-doux: #8fa3b4; --blanc: #f4f8fb;
    --titre: 'Rajdhani', 'Bahnschrift', 'DIN Alternate', 'Arial Narrow', sans-serif;
    --corps: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --biseau: 12px;
    --largeur: 1280px;
    --gouttiere: clamp(16px, 4vw, 40px);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--nuit); color: var(--texte); font: 16px/1.6 var(--corps); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blanc); }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; color: var(--blanc); margin: 0; line-height: 1.05; letter-spacing: .01em; }
p { margin: 0; }
.cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--or); color: #1a1206; font-weight: 700; text-decoration: none; }
.saut:focus { top: 12px; }
.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ---------------------------------------------------------------- Le fond : la vraie Galaxie du jeu */
.fond { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--nuit); }
.fond picture, .fond img, .fond video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.fond video { opacity: 0; transition: opacity 1.6s ease; }
.fond video.joue { opacity: 1; }
.fond::after { /* teinte de la nebuleuse du jeu + lisibilite du texte, sans eteindre la Galaxie */
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 55% 60% at 90% 0%, rgba(95, 84, 136, .34), transparent 70%),
        radial-gradient(ellipse 60% 55% at 0% 100%, rgba(9, 37, 55, .55), transparent 70%),
        linear-gradient(180deg, rgba(5, 11, 18, .62) 0, rgba(5, 11, 18, 0) 20%, rgba(5, 11, 18, 0) 74%, var(--nuit) 100%),
        linear-gradient(90deg, rgba(5, 11, 18, .6) 0, rgba(5, 11, 18, .18) 40%, rgba(5, 11, 18, 0) 58%, rgba(5, 11, 18, .2) 100%);
}
.fond--calme img { filter: blur(3px) brightness(.62) saturate(1.1); transform: scale(1.08); animation: derive 70s ease-in-out infinite alternate; }
.fond--calme::after {
    background:
        radial-gradient(ellipse 70% 70% at 80% 0%, rgba(95, 84, 136, .42), transparent 70%),
        radial-gradient(ellipse 60% 60% at 10% 100%, rgba(9, 37, 55, .8), transparent 70%),
        rgba(5, 11, 18, .45);
}
@keyframes derive { from { transform: scale(1.08) translate3d(-1.5%, 0, 0); } to { transform: scale(1.12) translate3d(1.5%, -1%, 0); } }

/* Un ciel d etoiles fixes pour le bas de la page (aucune image) */
.ciel { background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1px 1px at 72% 34%, rgba(207,221,232,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 72%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 86% 82%, rgba(255,226,174,.5), transparent 60%),
    radial-gradient(1px 1px at 55% 12%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 22% 58%, rgba(159,214,245,.45), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(19, 35, 57, .9), transparent 70%), var(--nuit);
    background-size: 420px 380px, 520px 460px, 610px 540px, 380px 420px, 700px 600px, 460px 500px, 100% 100%, 100% 100%; }

/* ---------------------------------------------------------------- La barre du haut */
.barre { position: absolute; top: 0; left: 0; right: 0; z-index: 20; }
.barre .conteneur { display: flex; align-items: center; gap: 24px; min-height: 76px; }
/* Le logo (graphie stellaire, version Azria) se pose a HAUTEUR fixe — 38 px, 31 px sous 760 px — et sa largeur suit le
   mot : le SVG serre sur son encre (174 x 52) reste net a toute densite d ecran. La barre est celle de la maquette
   d origine, posee sur le film, sans fond ni filet (decision du 6 octobre 2026). */
.marque { display: block; flex: none; padding: 10px 0; }
.marque img { width: auto; height: 38px; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { font: 600 15px/1 var(--titre); text-transform: uppercase; letter-spacing: .1em; color: var(--acier); text-decoration: none; padding: 12px 12px; position: relative; }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: linear-gradient(90deg, transparent, var(--or), transparent); opacity: 0; transform: scaleX(.4); transition: .25s; }
.nav a:hover { color: var(--blanc); }
.nav a:hover::after { opacity: 1; transform: none; }
.barre__droite { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.langues { display: inline-flex; border: 1px solid var(--filet-2); border-radius: 3px; overflow: hidden; background: rgba(5, 11, 18, .55); }
.langues a { display: inline-grid; place-items: center; min-width: 44px; min-height: 36px; padding: 0 10px; font: 700 14px/1 var(--titre); letter-spacing: .08em; color: var(--acier); text-decoration: none; }
.langues a[aria-current] { background: linear-gradient(180deg, #1f3d52, #0c1b27); color: var(--or-clair); box-shadow: inset 0 -2px 0 var(--or); }
.langues a:hover { color: var(--blanc); }

/* ---------------------------------------------------------------- L etat de l univers : le signal */
.etat { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 11px; border: 1px solid rgba(86, 137, 170, .45); border-radius: 999px;
    background: rgba(5, 11, 18, .62); backdrop-filter: blur(8px); font: 600 14px/1.1 var(--titre); letter-spacing: .06em; color: var(--acier-clair); text-decoration: none; white-space: nowrap; }
/* La pastille garde exactement l allure de la capture de reference (31 px de haut) ; sa zone de clic, elle, fait 36 px au moins
   (greffe 11 du juge) par un pseudo-element transparent, sans rien changer a l oeil. */
.etat { position: relative; }
.etat::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: max(100%, 38px); transform: translateY(-50%); }
.etat__point { --c: var(--vert); position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 10px var(--c), 0 0 22px var(--c); flex: none; }
.etat__point::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; animation: onde 2.4s ease-out infinite; }
@keyframes onde { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.etat__nom { color: var(--texte-doux); text-transform: uppercase; font-size: 12px; letter-spacing: .14em; }
.etat__texte, .etat__court { text-transform: uppercase; }
.etat__court { display: none; }
[data-etat='annoncee'] .etat__point { --c: var(--or); }
[data-etat='annoncee'] .etat__point::after { animation-duration: 3.2s; }
[data-etat='maintenance'] .etat__point { --c: var(--orange); animation: clignote 1.4s steps(2, jump-none) infinite; }
[data-etat='hors_ligne'] .etat__point { --c: var(--rouge); }
[data-etat='hors_ligne'] .etat__point::after { animation: none; }
@keyframes clignote { 50% { opacity: .35; } }
.etat[data-etat='annoncee'] { border-color: rgba(242, 165, 51, .55); }
.etat[data-etat='maintenance'] { border-color: rgba(244, 132, 6, .6); }
.etat[data-etat='hors_ligne'] { border-color: rgba(212, 54, 53, .6); }

/* ---------------------------------------------------------------- Le heros */
.heros { position: relative; min-height: max(100svh, 760px); display: flex; align-items: stretch; isolation: isolate; }
.heros > .conteneur { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 424px; gap: clamp(32px, 5vw, 88px); align-items: center; padding-top: 112px; padding-bottom: 72px; }
.surtitre { display: flex; align-items: center; gap: 14px; font: 600 14px/1 var(--titre); letter-spacing: .26em; text-transform: uppercase; color: var(--or-doux); margin-bottom: 22px; }
.surtitre::before { content: ''; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--or)); }
.heros h1 { font-size: clamp(42px, 5.6vw, 84px); line-height: .95; text-transform: uppercase; letter-spacing: .005em; }
.heros h1 span { display: block; }
.heros h1 .l1 { background: linear-gradient(180deg, #ffffff 0%, #dce8ef 46%, #8e9ba3 52%, #c9d6de 62%, #f2f7fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .55)); }
.heros h1 .l2 { margin-top: .12em; font-size: .62em; letter-spacing: .04em; background: linear-gradient(180deg, var(--or-clair) 0%, var(--or) 55%, #b06f0c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .6)); }
.heros__config { margin-top: 14px; max-width: 54em; font-size: 13px; line-height: 1.55; letter-spacing: .01em; color: var(--acier); text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.heros__texte { margin-top: 26px; max-width: 34em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: #d3dfe8; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.heros__actions { display: none; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Les promesses : trois faits du jeu, sous le texte du heros (greffe 8 du juge). Elles tombent sur le coeur clair de la
   galaxie (affiche fixe au telephone, donc toujours au meme endroit) : un voile sombre les porte, de la famille du fil en
   direct. Mesure sur les pixels de la page : de 2,5:1 a 3,7:1 sans lui, pour un seuil de 4,5:1. */
.promesses { list-style: none; width: fit-content; max-width: 100%; margin: 22px 0 0; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 10px 22px; border: 1px solid rgba(60, 86, 108, .35); border-radius: 3px; background: linear-gradient(90deg, rgba(8, 19, 29, .84), rgba(8, 19, 29, .66)); backdrop-filter: blur(6px); }
.promesses li { display: inline-flex; align-items: center; gap: 9px; font: 600 15.5px/1.25 var(--titre); letter-spacing: .05em; color: var(--acier-clair); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.promesses svg { flex: none; width: 18px; height: 18px; color: var(--or); filter: drop-shadow(0 0 6px rgba(242, 165, 51, .45)); }

/* Le fil en direct */
.signal { margin-top: 36px; max-width: 560px; border: 1px solid rgba(60, 86, 108, .45); border-left: 2px solid var(--or); background: linear-gradient(90deg, rgba(12, 27, 39, .86), rgba(12, 27, 39, .58)); padding: 14px 18px 14px 18px; backdrop-filter: blur(6px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
.signal__haut { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.signal__tete { display: flex; align-items: center; gap: 10px; font: 700 13px/1 var(--titre); letter-spacing: .22em; text-transform: uppercase; color: var(--or-doux); }
/* Le releve de la sonde : l heure de sa derniere reponse (ecrite par le script ; vide, il ne prend aucune place). */
.signal__releve { font: 600 12.5px/1 var(--titre); letter-spacing: .08em; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.signal__releve:empty { display: none; }
/* Le point du direct : une lampe rouge et son onde (0,6 Hz), dans le fil du heros et en tete de la liste des faits. */
.direct { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); box-shadow: 0 0 10px var(--rouge); animation: clignote 1.6s steps(2, jump-none) infinite; }
.direct::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--rouge); opacity: 0; animation: onde 1.6s ease-out infinite; }
/* Le fil vit : un trait de lumiere descend le long de son lisere d or, ses lignes entrent l une apres l autre, et une ligne
   que la sonde vient d apporter s allume un instant (`neuf`, posee par le script sur un fait qui n y etait pas). */
.signal::before { content: ''; position: absolute; left: -2px; top: 0; width: 2px; height: 34%; background: linear-gradient(180deg, transparent, #fff3d2, transparent); opacity: .9; animation: balayage 4.8s cubic-bezier(.45, 0, .55, 1) infinite; pointer-events: none; }
.signal { position: relative; }
@keyframes balayage { 0% { transform: translateY(-100%); } 100% { transform: translateY(300%); } }
.signal li { animation: entree .7s cubic-bezier(.2, .7, .2, 1) both; }
.signal li:nth-child(2) { animation-delay: .14s; } .signal li:nth-child(3) { animation-delay: .28s; } .signal li:nth-child(4) { animation-delay: .42s; }
@keyframes entree { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.signal li.neuf, .liste-faits li.neuf { animation: neuf 2.4s ease-out both; }
@keyframes neuf { 0% { opacity: 0; transform: translateX(-10px); text-shadow: 0 0 14px rgba(248, 223, 153, .9); color: var(--or-clair); } 18% { opacity: 1; transform: none; } 100% { text-shadow: none; } }
.signal ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.signal li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; font-size: 15px; color: var(--acier-clair); }
.signal li.calme { display: block; }
.signal li svg { width: 16px; height: 16px; align-self: center; }
.signal li .quand { padding-left: 12px; font: 600 14px/1 var(--titre); letter-spacing: .06em; color: var(--or-clair); white-space: nowrap; font-variant-numeric: tabular-nums; }
.signal .calme { color: var(--texte-doux); font-size: 14.5px; }
.signal__pied { margin-top: 10px; font-size: 12px; color: var(--texte-doux); }
.i-p1 { color: var(--or); } .i-p2 { color: var(--orange); } .i-p3 { color: var(--rouge); } .i-ev { color: var(--cyan); } .i-mt { color: var(--or); }

/* ---------------------------------------------------------------- Boutons */
.bouton { --b: 10px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 0; cursor: pointer;
    font: 700 17px/1 var(--titre); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; overflow: hidden;
    clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)), calc(100% - var(--b)) 100%, 0 100%, 0 var(--b)); transition: filter .2s, transform .2s; }
.bouton--or { color: #1b1305; background: linear-gradient(180deg, #ffe7b4 0%, #f6b545 38%, #e08c12 62%, #b56b08 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }
.bouton--or::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.bouton--or:hover::before { left: 120%; }
.bouton--or:hover { filter: brightness(1.08) saturate(1.1); }
.bouton--or:active { transform: translateY(1px); filter: brightness(.95); }
.bouton--acier { color: var(--acier-clair); background: linear-gradient(180deg, rgba(31, 61, 82, .9), rgba(12, 27, 39, .92)); box-shadow: inset 0 0 0 1px var(--filet-clair), inset 0 1px 0 rgba(159, 214, 245, .25); }
.bouton--acier:hover { color: var(--blanc); box-shadow: inset 0 0 0 1px var(--cyan), inset 0 1px 0 rgba(159, 214, 245, .4), 0 0 24px rgba(95, 180, 230, .25); }
.bouton--plein { width: 100%; }
.bouton svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Le panneau de verre fume */
.verre { position: relative; background: linear-gradient(180deg, rgba(20, 30, 38, .64), rgba(8, 14, 20, .78)); border: 1px solid rgba(86, 137, 170, .38);
    border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(159, 214, 245, .12); backdrop-filter: blur(16px) saturate(1.25); }
.verre::before, .verre::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.verre::before { left: -1px; top: -1px; border-left: 2px solid var(--or); border-top: 2px solid var(--or); }
.verre::after { right: -1px; bottom: -1px; border-right: 2px solid var(--or); border-bottom: 2px solid var(--or); }
.compte { padding: 0 0 26px; }
.onglets { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--filet); }
.onglets a { display: grid; place-items: center; min-height: 54px; font: 700 16px/1 var(--titre); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); text-decoration: none; position: relative; text-align: center; }
.onglets a:hover { color: var(--blanc); }
.onglets a[aria-selected='true'] { color: var(--or-clair); background: linear-gradient(180deg, rgba(242, 165, 51, .08), transparent); }
.onglets a[aria-selected='true']::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; background: var(--or); box-shadow: 0 0 12px var(--or); }
.compte section { padding: 24px 28px 0; }
.compte h2 { font-size: 28px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }
/* Sans JavaScript : les deux formulaires se suivent, separes ; avec, un seul a la fois (data-mode). */
.compte section + section { border-top: 1px solid var(--filet); margin-top: 26px; }
.js .compte[data-mode='inscription'] [data-panneau='connexion'], .js .compte[data-mode='connexion'] [data-panneau='inscription'] { display: none; }
.js .compte section + section { border-top: 0; margin-top: 0; }
.no-js-seul { display: none; }
html:not(.js) .onglets { display: none; }

.champ { margin-bottom: 14px; }
.champ label, .champ .libelle { display: block; font: 600 14px/1.2 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--acier); margin-bottom: 6px; }
.champ input[type='text'], .champ input[type='email'], .champ input[type='password'] { width: 100%; height: 46px; padding: 0 14px; border-radius: 3px; border: 1px solid var(--filet-2);
    background: rgba(3, 8, 13, .72); color: var(--blanc); font: 16px var(--corps); transition: border-color .2s, box-shadow .2s; }
.champ input:hover { border-color: var(--filet-clair); }
.champ input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(95, 180, 230, .22), 0 0 18px rgba(95, 180, 230, .18); }
.champ input[aria-invalid='true'] { border-color: var(--rouge); }
.champ .aide { margin-top: 5px; font-size: 13px; color: var(--texte-doux); }
.champ .erreur { margin-top: 5px; font-size: 13.5px; color: #ff8a80; }
.champ--mdp { position: relative; }
.voir { position: absolute; right: 2px; top: 26px; width: 44px; height: 40px; display: none; place-items: center; border: 0; background: none; color: var(--texte-doux); cursor: pointer; border-radius: 3px; }
.js .voir { display: grid; }
.voir:hover { color: var(--blanc); }
.voir svg { width: 20px; height: 20px; }
.univers-unique { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border: 1px solid var(--filet); border-radius: 3px; background: rgba(12, 27, 39, .6); }
.univers-unique strong { font: 700 18px/1 var(--titre); letter-spacing: .1em; color: var(--or-clair); text-transform: uppercase; }
.univers-unique span { margin-left: auto; font-size: 13px; color: var(--texte-doux); }
.univers-unique svg { flex: none; width: 18px; height: 18px; color: var(--or); }
.compte__statut { margin: 18px 28px 0; }
.oublie { text-align: center; }
.case { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; font-size: 14.5px; color: var(--acier-clair); }
.case input { flex: none; appearance: none; width: 24px; height: 24px; margin: 0; border: 1px solid var(--filet-clair); border-radius: 3px; background: rgba(3, 8, 13, .72); display: grid; place-items: center; cursor: pointer; }
.case input:checked { background: linear-gradient(180deg, #f6b545, #b56b08); border-color: var(--or); }
.case input:checked::after { content: ''; width: 6px; height: 11px; border: solid #1b1305; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }
.case input:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.case a { color: var(--or-doux); }
.piege { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.note { margin-top: 14px; display: flex; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--texte-doux); }
.note svg { flex: none; width: 18px; height: 18px; color: var(--cyan); margin-top: 1px; }
.bascule { margin-top: 16px; font-size: 14.5px; color: var(--texte-doux); text-align: center; }
.bascule a { color: var(--or-doux); font-weight: 600; }
.lien-discret { display: inline-block; margin-top: 10px; font-size: 14px; color: var(--acier); }
.avis { display: flex; gap: 10px; padding: 12px 14px; margin: 0 0 16px; border-radius: 3px; font-size: 14.5px; line-height: 1.5; }
.avis svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.avis--erreur { background: rgba(212, 54, 53, .12); border: 1px solid rgba(212, 54, 53, .5); color: #ffc9c4; }
.avis--erreur ul { margin: 4px 0 0; padding-left: 18px; }
.avis--ok { background: rgba(153, 204, 0, .08); border: 1px solid rgba(153, 204, 0, .42); color: #e2f3b8; }
.avis--info { background: rgba(95, 180, 230, .08); border: 1px solid rgba(95, 180, 230, .4); color: #d6ecfa; }
.avis--or { background: rgba(242, 165, 51, .08); border: 1px solid rgba(242, 165, 51, .45); color: #f8e3bc; }

/* ---------------------------------------------------------------- Sections */
.section { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.section--suite { padding-top: 0; }
/* Pas de `content-visibility` : la maquette differait la mise en page des sections sous une hauteur estimee de 900 px, et le
   pied sautait de 18 px apres leur rendu (un clic du juge sur « Regles du jeu » est tombe a cote, 320 px). Une page qui ne
   bouge pas vaut mieux que la mise en page gagnee ; le cout est mesure au registre du lot A. */
.entete-section { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.entete-section .surtitre { margin-bottom: 14px; }
.entete-section h2 { font-size: clamp(32px, 3.6vw, 52px); text-transform: uppercase; }
.entete-section p { margin-top: 14px; font-size: 17px; color: var(--texte); }

/* L univers en ce moment : la carte des neuf galaxies, rendue par le jeu */
.monde { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
.carte { position: relative; margin: 0; aspect-ratio: 16 / 9; border: 1px solid var(--filet); border-radius: 4px; overflow: hidden; background: #000; }
.carte img { width: 100%; height: 100%; object-fit: cover; }
.carte::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(5, 11, 18, .65)); }
.galaxie { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.galaxie__nom { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); white-space: nowrap; font: 600 12.5px/1 var(--titre); letter-spacing: .06em; color: var(--acier-clair); padding: 3px 7px; background: rgba(5, 11, 18, .66); border: 1px solid rgba(60, 86, 108, .7); border-radius: 2px; }
.galaxie__nom b { color: var(--or); margin-right: 4px; }
.galaxie__cible { width: 34px; height: 34px; border-radius: 50%; }
.galaxie[data-cote='droite'] .galaxie__nom { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.galaxie[data-cote='haut'] .galaxie__nom { top: auto; bottom: calc(100% + 4px); }
.galaxie[data-cote='gauche'] .galaxie__nom { left: auto; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.heure-locale { color: var(--texte-doux); }
.compte-a-rebours .heure-locale { display: block; margin-top: 4px; font: 500 14px/1.3 var(--corps); letter-spacing: 0; color: var(--acier); }
.langues abbr { text-decoration: none; }
.balise { --c: var(--or); position: absolute; inset: 0; border-radius: 50%; }
.balise::before, .balise::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--c); box-shadow: 0 0 14px var(--c); opacity: 0; animation: balise 2.6s ease-out infinite; }
.balise::after { animation-delay: 1.3s; }
.balise--p2 { --c: var(--orange); } .balise--p3 { --c: var(--rouge); } .balise--ev { --c: var(--cyan); }
.balise--p3::before, .balise--p3::after { animation-duration: 1.6s; }
@keyframes balise { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.carte__legende { position: absolute; left: 12px; bottom: 10px; z-index: 3; display: flex; gap: 14px; font-size: 12.5px; color: var(--acier); }
.carte__legende span { display: inline-flex; align-items: center; gap: 6px; }
.carte__legende i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.legende--bataille { background: var(--orange); }
.legende--evenement { background: var(--cyan); }

.faits { display: grid; gap: 16px; }
.etat-carte { padding: 20px 22px; }
.etat-carte h3 { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 12px; font-weight: 600; }
.etat-carte .etat { font-size: 17px; padding: 9px 16px 9px 13px; }
.etat-carte__detail { margin-top: 12px; font-size: 15px; color: var(--acier-clair); }
.etat-local, .etat-raison { display: block; margin-top: 4px; }
.etat-local:empty { display: none; }
/* Une carte d etat etroite (planche, colonne) : la pastille tient dedans, le nom de l univers s efface. */
.etat-carte { container-type: inline-size; }
@container (max-width: 400px) { .etat-carte .etat { font-size: 14px; padding: 7px 12px 7px 10px; max-width: 100%; } .etat-carte .etat__nom { display: none; } }
.etat-carte__petit { margin-top: 8px; font-size: 12.5px; color: var(--texte-doux); }
.liste-faits { padding: 18px 22px; }
.liste-faits h3 { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 12px; font-weight: 600; }
.liste-faits ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-faits li { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: baseline; font-size: 15px; color: var(--acier-clair); }
.liste-faits li svg { width: 16px; height: 16px; align-self: center; }
.liste-faits .quand { font: 600 14px/1 var(--titre); color: var(--or-clair); font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste-faits .vide { color: var(--texte-doux); font-size: 14.5px; }
.liste-faits__pied { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--filet); font-size: 12.5px; color: var(--texte-doux); }
.liste-faits li.vide { display: block; }
/* Au telephone, le minuteur passe sous sa phrase (comme dans le fil du heros) au lieu de l etrangler. */
@media (max-width: 480px) { .liste-faits li { grid-template-columns: 18px minmax(0, 1fr); } .liste-faits .quand { grid-column: 2; } .liste-faits .quand:empty { display: none; } }

/* La fiche de l univers (ce que la fenetre « Parametres du serveur » dit deja en jeu). */
.fiche-carte { padding: 18px 22px; }
.fiche-carte h3 { font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--texte-doux); margin-bottom: 12px; font-weight: 600; }
/* Deux colonnes des que la carte a la place (colonne du bureau : 440 px), une au telephone. */
.fiche { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 22px; }
.fiche div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(34, 57, 75, .6); }
.fiche dt { font-size: 14.5px; color: var(--acier); }
.fiche dd { margin: 0; font: 700 16px/1 var(--titre); letter-spacing: .06em; color: var(--or-clair); font-variant-numeric: tabular-nums; text-align: right; }

/* La sonde : une premiere reponse manquee (« Verification… »), puis « hors ligne » : les faits sont retires, la carte se voile. */
[data-etat='verification'] .etat__point { --c: var(--acier); }
[data-etat='verification'] .etat__point::after { animation-duration: 1.2s; }
.etat[data-etat='verification'] { border-color: rgba(169, 189, 205, .5); }
.monde[data-hors-ligne] .carte img { filter: grayscale(.85) brightness(.5); transition: filter .6s ease; }
.monde[data-hors-ligne] .galaxie { opacity: .45; transition: opacity .6s ease; }
[data-signal][data-hors-ligne] .direct { background: var(--texte-doux); box-shadow: none; animation: none; }
[data-signal][data-hors-ligne] .direct::after, .signal[data-hors-ligne]::before { animation: none; opacity: 0; }
.liste-faits h3 .direct { margin-right: 13px; vertical-align: 1px; }

/* La carte vit aussi (lot G) : un balayage de veille tourne lentement sur l amas (un tour en dix-huit secondes — un decor
   d instrument, pas un fait), et le nom d une galaxie ou il se passe quelque chose s eclaire. Hors ligne, tout s eteint. */
.carte::before { content: ''; position: absolute; z-index: 1; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(95, 180, 230, 0) 0deg, rgba(95, 180, 230, 0) 318deg, rgba(95, 180, 230, .07) 350deg, rgba(159, 214, 245, .2) 360deg); animation: veille 18s linear infinite; }
@keyframes veille { to { transform: rotate(360deg); } }
.galaxie__nom { transition: border-color .4s, color .4s, box-shadow .4s; }
.galaxie:has(.balise:not([hidden])) .galaxie__nom { border-color: var(--or); color: var(--blanc); box-shadow: 0 0 14px rgba(242, 165, 51, .3); }
.galaxie:has(.balise--ev:not([hidden])):not(:has([data-balise-bataille]:not([hidden]))) .galaxie__nom { border-color: var(--cyan); box-shadow: 0 0 14px rgba(95, 180, 230, .3); }
.monde[data-hors-ligne] .carte::before { animation: none; opacity: 0; }

/* ---------------------------------------------------------------- Le jeu en images : la vitrine (lot G, 9 octobre 2026) */
/*
 * Une grande scene 16:9 ou passent les boucles et les captures du VRAI jeu (public/accueil/jeu, lot F), sa legende et ses
 * commandes, puis les vignettes pour choisir. SANS JavaScript — ou si le script de la vitrine ne se charge pas (accueil.js
 * retire alors `data-vitrine`) — la meme liste est une grille de captures avec leurs legendes : les images sont dans des
 * <noscript>. Les regles de la vitrine vivante portent donc toutes `.js [data-vitrine]`.
 * La place est reservee des le premier rendu (classe `js` posee dans l en-tete) : l ecran par son rapport 16:9, la legende
 * par l empilement de TOUTES les legendes dans la meme case (la plus longue fait la hauteur, quelle que soit la langue), les
 * vignettes par leur rapport et deux lignes de titre. Rien ne bouge quand les images arrivent.
 */
.vitrine__legendes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.vitrine__legende { overflow: hidden; border: 1px solid var(--filet); border-radius: 4px; background: var(--panneau-fonce); }
.vitrine__legende picture { display: block; }
.vitrine__legende img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.vitrine__texte { padding: 16px 18px 18px; }
.vitrine__rang { display: flex; align-items: baseline; gap: 8px; font: 600 13px/1 var(--titre); letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }
.vitrine__rang b { font-size: 22px; letter-spacing: .04em; color: var(--or); font-variant-numeric: tabular-nums; }
.vitrine__rang em { margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--filet-2); font-style: normal; color: var(--cyan); }
.vitrine__legende h3 { margin-top: 10px; font-size: 24px; text-transform: uppercase; letter-spacing: .03em; }
.vitrine__phrase { margin-top: 8px; font-size: 15.5px; color: #c4d2dd; }
.vitrine__ecran, .vitrine__commandes, .vitrine__vignettes { display: none; }

/* Avec le script : la scene, sa legende et ses commandes, les vignettes.
   LA VITRINE TIENT ENTIERE DANS L ECRAN : sa largeur est bornee par la hauteur de l ecran (une scene 16:9 de 1 200 px fait
   675 px de haut — plus que l ecran d un portable, qui n en verrait jamais l image entiere, et jamais la scene avec ses
   vignettes). 324 px : ce que la legende, ses commandes et la rangee de vignettes occupent sous la scene — 298 px mesures
   au plus (legende de 161 px, la phrase sur deux lignes ; 16 px d intervalle ; vignettes de 121 px, leur titre sur trois
   lignes) —, plus 12 px de marge en haut et en bas et 2 px de reserve. Au telephone, la scene prend toute la largeur. */
.js [data-vitrine] { max-width: max(520px, calc((100svh - 324px) * 16 / 9)); margin-inline: auto; }
.js [data-vitrine] .vitrine__scene { position: relative; border: 1px solid var(--filet-2); border-radius: 4px; background: #02060b; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(5, 11, 18, .6); }
.js [data-vitrine] .vitrine__scene::before, .js [data-vitrine] .vitrine__scene::after { content: ''; position: absolute; z-index: 4; width: 26px; height: 26px; pointer-events: none; }
.js [data-vitrine] .vitrine__scene::before { left: -1px; top: -1px; border-left: 2px solid var(--or); border-top: 2px solid var(--or); }
.js [data-vitrine] .vitrine__scene::after { right: -1px; bottom: -1px; border-right: 2px solid var(--or); border-bottom: 2px solid var(--or); }
.js [data-vitrine] .vitrine__ecran { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px 3px 0 0; cursor: zoom-in; touch-action: pan-y; background: radial-gradient(ellipse at 50% 42%, #0f2233, #02060b 72%); }
.vitrine__couche { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.vitrine__couche.visible { opacity: 1; }
.vitrine__couche picture, .vitrine__couche img, .vitrine__couche video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vitrine__couche video { opacity: 0; transition: opacity .5s ease; }
.vitrine__couche video.joue { opacity: 1; }
.vitrine__fleche { position: absolute; z-index: 3; top: 50%; width: 48px; height: 64px; margin-top: -32px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(86, 137, 170, .5); background: rgba(5, 11, 18, .58); color: var(--acier-clair); cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s; }
.vitrine__fleche--avant { left: 0; border-left: 0; border-radius: 0 4px 4px 0; }
.vitrine__fleche--apres { right: 0; border-right: 0; border-radius: 4px 0 0 4px; }
.vitrine__fleche svg { width: 20px; height: 20px; }
.vitrine__fleche--avant svg, .i-retourne { transform: scaleX(-1); }
.vitrine__fleche:hover { background: rgba(12, 27, 39, .9); color: var(--or-clair); border-color: var(--or); }
/* L avance de la scene : un trait d or au bas de l ecran (la boucle qui joue, ou le temps d une capture). */
.vitrine__avance { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(60, 86, 108, .45); }
.vitrine__avance i { display: block; height: 100%; background: linear-gradient(90deg, var(--or-sombre), var(--or) 60%, var(--or-clair)); box-shadow: 0 0 10px var(--or); transform-origin: 0 50%; transform: scaleX(var(--avance, 0)); transition: transform .25s linear; }
.js [data-vitrine] .vitrine__cartouche { display: flex; align-items: center; gap: 24px; padding: 18px 22px 20px 26px; border-top: 1px solid var(--filet); border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #0d1822, #081119); }
.js [data-vitrine] .vitrine__legendes { flex: 1; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
.js [data-vitrine] .vitrine__legende { grid-area: 1 / 1; border: 0; border-radius: 0; background: none; overflow: visible; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
.js [data-vitrine] .vitrine__legende[data-active] { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.js [data-vitrine] .vitrine__texte { padding: 0; }
.js [data-vitrine] .vitrine__legende h3 { font-size: clamp(22px, 2.3vw, 30px); }
.js [data-vitrine] .vitrine__phrase { max-width: 48em; font-size: 16px; }
.js [data-vitrine] .vitrine__commandes { display: flex; gap: 10px; flex: none; }
.vitrine__bouton { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 1px solid var(--filet-clair); border-radius: 3px; background: linear-gradient(180deg, rgba(31, 61, 82, .85), rgba(12, 27, 39, .9)); color: var(--acier-clair); cursor: pointer; transition: color .2s, border-color .2s, box-shadow .2s; }
.vitrine__bouton:hover { color: var(--blanc); border-color: var(--cyan); box-shadow: 0 0 18px rgba(95, 180, 230, .25); }
.vitrine__bouton svg { width: 20px; height: 20px; }
.vitrine__bouton .i-en-pause, [data-vitrine][data-arret] .vitrine__bouton .i-en-marche { display: none; }
[data-vitrine][data-arret] .vitrine__bouton .i-en-pause { display: block; }
/* Les vignettes : toutes les scenes d un coup d oeil ; la choisie porte l or et l avance. */
.js [data-vitrine] .vitrine__vignettes { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.vignette { display: block; padding: 0; border: 0; background: none; color: var(--acier); text-align: left; cursor: pointer; font: inherit; scroll-snap-align: start; }
.vignette__image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--filet); border-radius: 3px; background: radial-gradient(ellipse at 50% 40%, #10202e, #050b12 75%); transition: border-color .25s, box-shadow .25s, transform .25s; }
.vignette__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: opacity .25s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.vignette__image::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--or); box-shadow: 0 0 8px var(--or); transform-origin: 0 50%; transform: scaleX(0); }
.vignette__titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-top: 8px; min-height: 3.75em; font: 600 13.5px/1.25 var(--titre); letter-spacing: .05em; text-transform: uppercase; transition: color .2s; }
.vignette:hover .vignette__image { border-color: var(--filet-clair); transform: translateY(-2px); }
.vignette:hover .vignette__image img { opacity: .9; transform: scale(1.05); }
.vignette:hover .vignette__titre { color: var(--blanc); }
.vignette[aria-selected='true'] .vignette__image { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 22px rgba(242, 165, 51, .35); }
.vignette[aria-selected='true'] .vignette__image img { opacity: 1; }
.vignette[aria-selected='true'] .vignette__image::after { transform: scaleX(var(--avance, 0)); transition: transform .25s linear; }
.vignette[aria-selected='true'] .vignette__titre { color: var(--or-clair); }
.vignette:focus-visible { outline: none; }
.vignette:focus-visible .vignette__image { outline: 2px solid var(--or); outline-offset: 3px; }
/* Une boucle se reconnait a son triangle ; une capture n en a pas. */
.vignette__image[data-genre='boucle']::before { content: ''; position: absolute; z-index: 1; right: 7px; top: 7px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent rgba(244, 248, 251, .85); filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)); }

/* Le second appel, juste apres les images. */
.relance { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-top: clamp(28px, 4vw, 44px); padding: 22px 26px; border: 1px solid rgba(242, 165, 51, .38); border-left: 3px solid var(--or); border-radius: 3px; background: linear-gradient(90deg, rgba(34, 28, 14, .72), rgba(12, 27, 39, .5)); }
.relance p { font-size: 17px; color: #e3ecf2; }
.relance strong { display: block; font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--titre); letter-spacing: .03em; text-transform: uppercase; color: var(--blanc); }
.relance span { display: block; margin-top: 4px; }

/* L agrandissement : la scene dans une fenetre, aussi large que l ecran le permet (la hauteur de l ecran borne la largeur).
   Les deux classes dans le selecteur : `dialog.fenetre` (760 px, plus bas dans la feuille) a la meme specificite que
   `dialog.fenetre--scene` et gagnait par l ordre — « Agrandir » retrecissait la scene (758 px contre 894 dans la page a 1 280). */
dialog.fenetre.fenetre--scene { width: min(1320px, calc(100vw - 24px), calc((100vh - 190px) * 16 / 9)); max-width: none; max-height: none; }
dialog.fenetre.fenetre--scene .verre { max-height: none; }
.scene-grande { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #02060b; }
.scene-grande picture, .scene-grande img { display: block; width: 100%; height: 100%; object-fit: contain; }
.scene-grande video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s ease; }
.scene-grande video.joue { opacity: 1; }
.scene-grande__pied { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--filet); }
.scene-grande__pied p { flex: 1; font-size: 15.5px; color: var(--acier-clair); }

/* ---------------------------------------------------------------- Les apparitions au defilement (lot G) */
/* Le script marque `attend` ce qui est SOUS l ecran a l arrivee, puis `paru` a l entree en vue (et retire les deux ensuite) :
   rien de visible n est jamais cache, et sans script, ou sans observateur, rien ne l est. Opacite et glissement seuls :
   aucune mise en page ne bouge. */
.attend { opacity: 0; transform: translateY(22px); }
.attend.paru { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
@media print { .attend { opacity: 1; transform: none; } }

/* La flotte : les vrais modeles */
.flotte { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-color: var(--filet-2) transparent; }
.vaisseau { scroll-snap-align: start; margin: 0; padding: 18px 16px 16px; border: 1px solid var(--filet); border-radius: 4px; background: radial-gradient(ellipse at 50% 35%, rgba(31, 61, 82, .5), transparent 70%), rgba(10, 16, 22, .8); transition: border-color .25s, transform .25s; }
.vaisseau:hover { border-color: var(--filet-clair); transform: translateY(-3px); }
.vaisseau img { width: 100%; height: 120px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
.vaisseau figcaption { margin-top: 12px; text-align: center; font: 700 16px/1.1 var(--titre); letter-spacing: .08em; text-transform: uppercase; color: var(--acier-clair); }

/* L appel final */
.appel { position: relative; overflow: hidden; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
/* Le fond de l appel final : l affiche des vrais vaisseaux (un Destructeur et son escorte, greffe 7 du juge), chargee a l approche. */
.appel .fond img { object-position: 62% 45%; filter: brightness(.62) saturate(1.05); }
.fond--appel::after { background: linear-gradient(90deg, rgba(5, 11, 18, .88) 0, rgba(5, 11, 18, .55) 45%, rgba(5, 11, 18, .1) 100%), linear-gradient(180deg, rgba(5, 11, 18, .5), transparent 30%, transparent 70%, rgba(5, 11, 18, .6)); }
.appel .conteneur { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-top: 72px; padding-bottom: 72px; flex-wrap: wrap; }
.appel h2 { font-size: clamp(30px, 3.4vw, 48px); text-transform: uppercase; }
.appel p { margin-top: 8px; font-size: 17px; color: #d3dfe8; }

/* Le pied */
.pied { border-top: 1px solid var(--filet); background: linear-gradient(180deg, #071019, #04080d); padding: 40px 0 28px; font-size: 14.5px; }
.pied .conteneur { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; align-items: start; }
.pied h2 { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--texte-doux); font-weight: 600; margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pied ul a { display: inline-flex; align-items: center; min-height: 36px; padding: 0; color: var(--acier); text-decoration: none; }
.pied ul a:hover { color: var(--blanc); text-decoration: underline; }
.pied .marque img { width: auto; height: 35px; }
.langues--pied { background: none; }
.pied__credit { margin-top: 14px; color: var(--texte-doux); font-size: 13px; }
.pied__droite { display: grid; gap: 14px; justify-items: start; }

/* ---------------------------------------------------------------- Pages associees : une carte centree */
.page-seule { position: relative; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; }
.page-seule .fond { position: fixed; }
.page-seule main { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: 104px var(--gouttiere) 48px; }
.carte-seule { width: 100%; max-width: 480px; padding: 30px 30px 28px; }
.carte-seule--large { max-width: 760px; }
.carte-seule .surtitre { margin-bottom: 12px; font-size: 13px; }
.carte-seule h1 { font-size: clamp(28px, 3vw, 36px); text-transform: uppercase; letter-spacing: .03em; }
.carte-seule .intro { margin: 12px 0 22px; color: var(--texte); font-size: 15.5px; }
.carte-seule .actions { display: grid; gap: 10px; margin-top: 18px; }
.carte-seule .liens { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 18px; font-size: 14.5px; }
.carte-seule .liens a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--acier); }
.pictogramme { width: 64px; height: 64px; margin-bottom: 18px; }
.indesirables { margin: 18px 0 4px; padding: 16px 18px; border: 1px solid rgba(242, 165, 51, .4); border-left: 3px solid var(--or); border-radius: 3px; background: rgba(34, 28, 14, .55); }
.indesirables h2 { font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--or-clair); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.indesirables ul { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 8px; font-size: 14.5px; color: #e9dcc2; }
.indesirables li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.indesirables li b { color: var(--or-clair); }
.adresse { color: var(--blanc); font-weight: 600; word-break: break-all; }
.pied-mini { position: relative; z-index: 2; padding: 0 var(--gouttiere) 20px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13.5px; }
.pied-mini a { display: inline-flex; align-items: center; min-height: 36px; color: var(--texte-doux); text-decoration: none; padding: 0 2px; }
.pied-mini a:hover { color: var(--blanc); text-decoration: underline; }
.pied-mini__credit { flex-basis: 100%; text-align: center; color: var(--texte-doux); font-size: 12.5px; }

/* Documents */
.document { font-size: 15.5px; line-height: 1.7; color: var(--texte); max-height: none; }
.document--page { margin-top: 20px; }
.lien-icone { display: inline; vertical-align: -2px; }
.liens__note { color: var(--texte-doux); }
.indesirables--envoi { margin-top: 0; margin-bottom: 18px; }
.indesirables--envoi svg { color: var(--or); }
.document h2, .document h3 { margin: 22px 0 8px; color: var(--blanc); font-size: 22px; }
.document p + p { margin-top: 10px; }
.document .vide { padding: 18px; border: 1px dashed var(--filet-2); border-radius: 3px; color: var(--texte-doux); text-align: center; }
dialog.fenetre { width: min(760px, calc(100vw - 24px)); max-height: min(82vh, 900px); padding: 0; border: 0; background: transparent; color: inherit; }
dialog.fenetre::backdrop { background: rgba(2, 6, 10, .72); backdrop-filter: blur(4px); }
dialog.fenetre .verre { display: flex; flex-direction: column; max-height: min(82vh, 900px); }
.fenetre__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--filet); }
.fenetre__barre h2 { font-size: 22px; text-transform: uppercase; letter-spacing: .05em; }
.fenetre__fermer { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--filet-2); border-radius: 3px; color: var(--acier); cursor: pointer; }
.fenetre__fermer:hover { color: var(--blanc); border-color: var(--cyan); }
.fenetre__corps { padding: 20px 24px 26px; overflow: auto; }

/* Erreurs et maintenance */
.erreur-code { font: 700 clamp(84px, 14vw, 150px)/.9 var(--titre); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.5px rgba(207, 221, 232, .55); background: linear-gradient(180deg, rgba(95, 180, 230, .25), transparent 80%); -webkit-background-clip: text; background-clip: text; margin-bottom: 8px; }
/* La maintenance (503) est une page autonome a sa propre feuille en ligne (errors/autonome, errors/maintenance). Une page
   d erreur servie sans session replie l autre langue sous son texte (greffe 5 du juge). */
.autre-langue { margin-top: 22px; border-top: 1px solid var(--filet); }
.autre-langue summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-top: 6px; cursor: pointer; font: 700 14px/1 var(--titre); letter-spacing: .12em; text-transform: uppercase; color: var(--acier); }
.autre-langue summary::-webkit-details-marker { display: none; }
.autre-langue summary::before { content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
.autre-langue[open] summary::before { transform: rotate(45deg); }
.autre-langue summary:hover { color: var(--blanc); }
.autre-langue h2 { margin: 8px 0; font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.autre-langue p + p { margin-top: 10px; }
.autre-langue a { display: inline-flex; align-items: center; min-height: 36px; }

/* ---------------------------------------------------------------- Adaptation */
/* Au bureau, sur un ecran peu haut (portable, fenetre de 800 px) : une rangee de vignettes sous la scene obligerait a
   reduire la scene, et ses titres seraient coupes. Les vignettes passent A DROITE de la scene, en liste (l image et le titre
   entier) ; la scene prend la largeur que la hauteur de l ecran permet. 200 px : la legende et ses commandes sous la scene
   (162 px mesures, la phrase sur deux lignes), plus une marge de 12 px en haut et en bas et 14 px de reserve. 304 px : la
   liste (280 px au moins) et son intervalle. A partir de 887 px de haut, la rangee tient sous une scene d au moins 1 000 px. */
@media (min-width: 1181px) and (max-height: 886px) {
    .js [data-vitrine] { max-width: none; display: grid; grid-template-columns: minmax(0, min(calc(100% - 304px), calc((100svh - 200px) * 16 / 9))) minmax(0, 1fr); gap: 24px; align-items: start; justify-content: center; }
    .js [data-vitrine] .vitrine__vignettes { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 0; }
    .js [data-vitrine] .vignette { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 4px; border-radius: 3px; transition: background .2s; }
    .js [data-vitrine] .vignette[aria-selected='true'] { background: linear-gradient(90deg, rgba(242, 165, 51, .12), transparent); }
    .js [data-vitrine] .vignette__titre { display: block; margin-top: 0; min-height: 0; font-size: 14px; }
    .js [data-vitrine] .vignette:focus-visible .vignette__image { outline-offset: 2px; }
}
/* L ancre de l adresse (/login#connexion, par « Retour a la connexion ») : le navigateur cale la page sur le panneau, qui vit
   SOUS les onglets de la carte. Au bureau la carte est a cote du heros : la marge d une demi-hauteur d ecran laisse la page en
   haut (elle s ouvrait defilee de 234 px, barre et onglets hors de l ecran) et, sans script, garde le second formulaire a
   l ecran. Sur une colonne, plus bas : les onglets restent visibles au-dessus du panneau (55 px mesures, 12 de marge). */
#inscription, #connexion { scroll-margin-top: 50vh; }
@media (max-width: 1180px) {
    #inscription, #connexion { scroll-margin-top: 67px; }
    .nav { display: none; }
    .heros > .conteneur { grid-template-columns: 1fr; padding-top: 104px; }
    .heros__actions { display: flex; }
    .heros__colonne { max-width: 720px; }
    .compte-zone { max-width: 520px; width: 100%; }
    .monde { grid-template-columns: 1fr; }
    /* Les vignettes ne tiennent plus sur une rangee : une bande qui se parcourt du doigt (la bande seule defile, jamais la page).
       356 px sous la scene : 330 px mesures (legende de 155 px, 16 px d intervalle, bande de 159 px), 12 px en haut et en bas, 2 de reserve. */
    .js [data-vitrine] { max-width: max(520px, calc((100svh - 356px) * 16 / 9)); }
    .js [data-vitrine] .vitrine__vignettes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; scrollbar-color: var(--filet-2) transparent; }
}
@media (max-width: 760px) {
    .barre .conteneur { min-height: 64px; gap: 10px; }
    .marque img { height: 31px; }
    .etat { padding: 6px 10px 6px 9px; font-size: 13px; }
    .etat__nom { display: none; }
    /* Les langues gardent 44 x 36 px a toutes les largeurs (greffe 11 du juge) : seule la lettre retrecit. */
    .langues a { font-size: 13px; }
    .promesses { gap: 8px 18px; margin-top: 18px; }
    .promesses li { font-size: 14.5px; }
    .heros { min-height: auto; }
    .heros > .conteneur { padding-top: 92px; padding-bottom: 40px; gap: 28px; }
    .fond picture img, .fond img { object-position: 62% 60%; }
    .surtitre { font-size: 12px; letter-spacing: .2em; margin-bottom: 14px; }
    .surtitre::before { width: 28px; }
    .heros h1 { font-size: clamp(34px, 10.5vw, 46px); }
    .heros__texte { margin-top: 16px; font-size: 16px; }
    .heros__actions .bouton { flex: 1 1 100%; }
    .signal { margin-top: 26px; padding: 12px 14px; }
    .signal li { font-size: 14px; grid-template-columns: 16px minmax(0, 1fr); }
    .signal li .quand { grid-column: 2; padding-left: 0; }
    .heros > .fond { bottom: auto; height: 100svh; }
    .heros > .fond img, .heros > .fond video { object-position: 64% 62%; }
    .compte section { padding: 20px 18px 0; }
    .compte h2 { font-size: 24px; }
    .onglets a { padding: 6px 10px; font-size: 14px; letter-spacing: .06em; line-height: 1.15; }
    .js [data-vitrine] { max-width: none; }
    .js [data-vitrine] .vitrine__cartouche { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; }
    .js [data-vitrine] .vitrine__commandes { justify-content: space-between; }
    .js [data-vitrine] .vitrine__legende h3 { font-size: 22px; }
    .js [data-vitrine] .vitrine__phrase { font-size: 15px; }
    .vitrine__fleche { width: 44px; height: 56px; margin-top: -28px; }
    .js [data-vitrine] .vitrine__vignettes { grid-auto-columns: 132px; gap: 10px; margin-top: 12px; }
    .vignette__titre { font-size: 12.5px; }
    .relance { padding: 18px; }
    .relance .bouton { width: 100%; }
    /* Une capture de l interface ne se lit pas a la largeur d un telephone : dans la fenetre, elle garde 760 px de large et se
       parcourt au doigt. */
    .scene-grande[data-genre='fixe'] { aspect-ratio: auto; overflow: auto; }
    .scene-grande[data-genre='fixe'] img { width: 760px; max-width: none; height: auto; }
    .scene-grande__pied { padding: 12px; gap: 10px; }
    .carte__legende { display: none; }
    .galaxie__nom { font-size: 10.5px; padding: 2px 4px; }
    .galaxie__nom span { display: none; }
    .galaxie__cible { width: 24px; height: 24px; }
    .appel .conteneur { padding-top: 48px; padding-bottom: 48px; }
    .appel .bouton { width: 100%; }
    .pied .conteneur { grid-template-columns: 1fr; gap: 24px; }
    .carte-seule { padding: 24px 18px 22px; }
    .page-seule main { padding-top: 84px; }
}
@media (max-width: 400px) {
    .barre .conteneur { gap: 8px; }
    .marque img { height: 28px; }
    .barre .etat { gap: 7px; padding: 6px 9px 6px 8px; }
    .barre .etat__texte { display: none; }
    .barre .etat__court { display: inline; font-size: 12px; letter-spacing: .04em; }
    .barre__droite { gap: 6px; }
    .langues a { padding: 0 6px; }
    /* Les libelles de bouton tiennent sur une ligne a 320 px (defaut 2 du juge). */
    .bouton { letter-spacing: .05em; font-size: 15px; padding: 0 14px; }
}