/* Fast Travel Studio : le site (accueil, pages d'infos, page 404).
 *
 * ⚠️ PORTÉ DE LA MAQUETTE VALIDÉE LE 27 OCTOBRE 2026 (DA/maquette-site.html,
 * hors dépôt) : le même langage que le configurateur. Touches en capuchons
 * blancs, encart d'aide noir, étiquettes de HUD, dégradé du couchant ; l'accueil
 * en écran titre, les styles en écran de sélection, les infos en menu pause, la
 * 404 « Hors carte ». La maquette fait foi pour le visuel : ses valeurs sont
 * reprises telles quelles, sauf où le site réel a plus à dire (la recherche
 * d'adresse et ses suggestions, l'aperçu qui se charge, la visionneuse).
 *
 * ⚠️ UNE FEUILLE AUTONOME. Elle ne s'appuie plus sur landing.css : la landing de
 * prélancement reste en ligne jusqu'à la bascule du 1er novembre, et ses règles
 * (.heros, .affiche, .formats…) ne correspondent plus à ce balisage. Les seules
 * briques reprises de la landing le sont ici, à l'identique : la visionneuse et
 * les remèdes de la page zoomée au pincement (le plantage de Safari du
 * 30 septembre, visionneuse.js).
 *
 * ⚠️ CSP STRICTE : aucune police ni image hors du domaine. Les polices viennent
 * de /landing/fonts ; Pricedown et Rage ne sont JAMAIS servies, leurs phrases
 * sont des dessins figés (/landing/titres, tests/titres-figes.test.mjs).
 * ⚠️ Pas de flou d'arrière-plan plein écran (`backdrop-filter`) : c'est ce qui
 * faisait planter Safari sur iPhone au pincement.
 */

@font-face { font-family: "Bebas Neue"; src: url("/landing/fonts/BebasNeue.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo Expanded"; src: url("/landing/fonts/ArchivoExpanded-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/landing/fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/landing/fonts/Inter-SemiBold.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("/landing/fonts/RobotoMono-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }

:root {
  color-scheme: dark;
  --nuit: #0d0a1e; --nuit-2: #140f2e; --nuit-3: #1d1640; --nuit-4: #271e52; --cadre: #16121f;
  --bord: rgba(255, 255, 255, 0.12); --bord-fort: rgba(255, 255, 255, 0.24);
  --creme: #fff3e6; --brume: #bdb5dd; --brume-2: #8f87b3;
  --soleil: #ffd166; --orange: #ff8a3d; --rose: #ff2e88; --violet: #b14dff; --cyan: #35e0ff; --vert: #2fd47a;
  --couchant: linear-gradient(95deg, var(--soleil) 0%, var(--orange) 30%, var(--rose) 66%, var(--violet) 100%);
  --affiche: "Bebas Neue", Oswald, "Arial Narrow", Impact, sans-serif;
  --marque: "Archivo Expanded", "Arial Black", Arial, sans-serif;
  --texte: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hud: "Roboto Mono", ui-monospace, Consolas, monospace;
  --gouttiere: clamp(16px, 4vw, 56px); --largeur: 1240px; --haut: 64px; --bandeau: 34px;
  --ressort: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
/* ⚠️ `hidden` DOIT CACHER, QUEL QUE SOIT LE `display` DE LA CLASSE (la même règle
   que la landing : `.suite { display: grid }` la battait sinon). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--haut) + 16px); }
/* Les ancres de la page (le menu, le sommaire des CGV) défilent en douceur. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--nuit); color: var(--creme); font: 17px/1.6 var(--texte); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.conteneur { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }

/* Le grain de pellicule de la landing, gardé. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 80; pointer-events: none; opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════ les briques communes au configurateur */

/* Les touches en capuchons blancs, lettre noire : celles des jeux en monde ouvert sur PC. */
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 4px; background: #f4f2ee; color: #0b0a10; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3);
  font: 700 11.5px/1 var(--texte); letter-spacing: 0; text-transform: uppercase; vertical-align: 1px;
}
/* L'encart d'aide : rectangle noir, angles droits, texte blanc. Celui de la légende Sombre. */
.aide { background: rgba(0, 0, 0, .82); color: #fff; padding: 11px 15px 12px; font-size: 14px; line-height: 1.6; }
.aide p { margin: 0; }
.aide p + p { margin-top: 5px; }
.hud {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: var(--hud); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan);
}
.hud::before { content: ""; flex: none; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.titre-affiche { margin: 0 0 18px; font-family: var(--affiche); font-weight: 400; font-size: clamp(46px, 6.6vw, 92px); line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.titre-affiche .fige { display: block; margin-top: .08em; }
.titre-affiche .fige img { width: auto; height: auto; max-height: 1.15em; max-width: 100%; }
.intro { max-width: 46em; margin: 0; color: var(--brume); font-size: 18px; }
.intro strong { color: var(--creme); }
.degrade { background: var(--couchant); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 999px;
  background: var(--couchant); color: #1a0714; box-shadow: 0 10px 30px rgba(255, 46, 136, .35); text-decoration: none; white-space: nowrap;
  font-family: var(--marque); font-weight: 700; font-style: italic; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
  transition: filter .15s;
}
.bouton:hover { filter: brightness(1.08); }
.bouton[disabled] { opacity: .6; cursor: progress; }
.bouton.sombre { background: rgba(255, 255, 255, .06); color: var(--creme); box-shadow: inset 0 0 0 1px var(--bord-fort); }
.bouton.sombre:hover { box-shadow: inset 0 0 0 1px var(--cyan); color: var(--cyan); filter: none; }
.bouton.petit { min-height: 40px; padding: 0 18px; font-size: 12.5px; }
.bouton kbd { margin-left: 2px; }
/* Le lien secondaire : une étiquette de HUD avec sa flèche, jamais un second
   bouton qui ferait concurrence au premier. */
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hud); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--creme); }
.lien-fleche::after { content: "→"; transition: transform .2s var(--ressort); }
.lien-fleche:hover { color: var(--cyan); }
.lien-fleche:hover::after { transform: translateX(4px); }
/* Repartir d'une autre adresse : on revient en arrière, pas en avant. */
.lien-fleche.recommencer::after { content: "↺"; }
.lien-fleche.recommencer:hover::after { transform: none; }
.sticker {
  display: inline-block; padding: 5px 10px; background: var(--rose); color: #fff; transform: rotate(-3deg); box-shadow: 4px 4px 0 #000;
  font-family: var(--marque); font-weight: 700; font-style: italic; font-size: 12px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
}
.sticker.cyan { background: var(--cyan); color: #04121a; }
.sticker.jaune { background: var(--soleil); color: #1a0714; }
/* Le médaillon d'une icône posée sur la carte, cerclé de sa couleur (--c). */
.medaillon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: #14111f; color: #fff; box-shadow: 0 0 0 2px var(--c), 0 2px 6px rgba(0, 0, 0, .45);
}
.medaillon svg { width: 62%; height: 62%; }
.barre { width: 100%; max-width: 420px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.barre i { display: block; height: 100%; width: 0; background: var(--couchant); }
.astuce { margin: 0; max-width: 46ch; font-size: 14px; color: var(--brume); }
.astuce b { margin-right: 8px; font-family: var(--hud); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--soleil); }
.banniere {
  margin: 0; font-family: var(--affiche); font-weight: 400; line-height: .85; text-transform: uppercase; color: var(--creme);
  text-shadow: 1px 1px 0 #ff2e88, 2px 2px 0 #ff2e88, 3px 3px 0 #b14dff, 4px 4px 0 #b14dff, 5px 5px 0 #5a1f8f, 6px 6px 0 #5a1f8f, 0 14px 30px rgba(0, 0, 0, .6);
}
@keyframes clignote { 50% { opacity: .35; } }

/* ═════════════════════════════════════════════════ le bandeau, l'en-tête */

/* Le bandeau du prix de lancement : caché tant que le serveur n'a pas répondu
   (site.js), il ne porte ni prix ni date écrits ici. */
.bandeau-promo {
  display: block; height: var(--bandeau); overflow: hidden; background: #000; color: var(--soleil); text-decoration: none;
  font-family: var(--hud); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; line-height: var(--bandeau); white-space: nowrap;
}
.bandeau-promo .defile { display: inline-flex; animation: defile 34s linear infinite; }
.bandeau-promo .defile span { padding-right: 48px; }
@keyframes defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bandeau-promo .defile { animation: none; } }
.entete {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px; height: var(--haut);
  padding: 0 var(--gouttiere); background: rgba(13, 10, 30, .94); border-bottom: 1px solid var(--bord);
}
.entete .logotype { flex: none; }
.entete .logotype img { height: 32px; width: auto; max-width: none; }
.menu { display: flex; align-items: stretch; gap: 2px; height: 100%; margin: 0 auto; }
.menu > kbd { align-self: center; margin: 0 6px; }
.menu a {
  position: relative; display: flex; align-items: center; padding: 0 14px; text-decoration: none; color: var(--brume-2);
  font-family: var(--affiche); font-size: 22px; letter-spacing: .04em;
}
.menu a:hover, .menu a[aria-current="true"] { color: var(--creme); }
.menu a[aria-current="true"]::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--couchant); }
.entete .droite { display: flex; align-items: center; gap: 10px; }

/* ═══════════════════════════════════════════════════ l'écran titre */

.ecran-titre { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 72px) 0 34px; border-bottom: 1px solid var(--bord); }
/* La carte de nuit, tirée du poster, défile lentement derrière. */
.ecran-titre .fond {
  position: absolute; inset: -8%; opacity: .4; pointer-events: none;
  background: url("/landing/carte-nuit.webp") center / cover;
  -webkit-mask-image: radial-gradient(75% 70% at 62% 45%, #000 25%, transparent 100%); mask-image: radial-gradient(75% 70% at 62% 45%, #000 25%, transparent 100%);
  animation: survol 70s linear infinite alternate;
}
@keyframes survol { from { transform: translate(-2%, -1.5%) scale(1.04); } to { transform: translate(2.5%, 1.5%) scale(1.12); } }
.ecran-titre::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 50% at 75% 40%, rgba(255, 46, 136, .2), transparent 70%), radial-gradient(40% 45% at 10% 90%, rgba(53, 224, 255, .12), transparent 70%);
}
.heros { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.heros h1 span:not(.fige):not(.visuellement-cache) { display: block; }
.chapo { margin: 0 0 26px; max-width: 34em; color: var(--brume); font-size: 18.5px; }
.recherche-titre { margin: 0 0 10px; font-family: var(--hud); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme); }
/* Le champ en pilule, la loupe, le bouton. Les suggestions s'ouvrent dessous, sur
   toute la largeur de la pilule. */
.recherche {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 8px; max-width: 560px; padding: 7px 7px 7px 16px; border-radius: 999px;
  background: rgba(13, 10, 30, .8); border: 1px solid var(--bord-fort); box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}
.recherche:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(53, 224, 255, .22), 0 20px 50px rgba(0, 0, 0, .4); }
.recherche > svg { width: 20px; height: 20px; flex: none; color: var(--brume); }
.recherche .champ-adresse { flex: 1; min-width: 0; }
.recherche input { display: block; width: 100%; min-width: 0; border: 0; background: none; outline: none; font-size: 17px; padding: 10px 0; }
.recherche input::placeholder { color: #9a92bd; }
.recherche input::-webkit-search-cancel-button { display: none; }
.recherche .bouton { min-height: 48px; padding: 0 22px; font-size: 13.5px; }
/* « Chercher » et « Commander » seuls à côté du champ : en entier, le bouton
   prenait la moitié de la barre (3 novembre 2026). Le texte entier revient sur
   téléphone, où le bouton passe sous le champ (plus bas). */
.recherche .bouton .long { display: none; }
.suggestions {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px);
  margin: 0; padding: 6px; list-style: none; text-align: left;
  background: var(--nuit-2); border: 1px solid var(--bord-fort); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  max-height: min(340px, 50vh); overflow-y: auto;
}
.suggestions li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.suggestions strong { font-weight: 600; font-size: 15px; color: var(--creme); }
.suggestions span { font-size: 13px; color: var(--brume); }
.suggestions span:empty { display: none; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: rgba(53, 224, 255, .1); }
.suggestions li[aria-selected="true"] strong { color: var(--cyan); }
.exemples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; color: var(--brume); font-size: 14px; }
.puce { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--bord-fort); font-size: 13.5px; line-height: 1.3; }
.puce:hover { border-color: var(--cyan); color: var(--cyan); }
/* Le message de la recherche (trouvé, pas trouvé, pas de réseau). Vide, il ne
   prend pas de place, mais reste dans la page : sa région « status » doit exister
   avant qu'on y écrive, sinon le lecteur d'écran ne l'annonce pas. */
.retour { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.retour:empty { margin: 0; }
.retour.ok { color: var(--cyan); }
.retour.erreur { color: var(--soleil); }
.appuie { margin: 22px 0 0; font-family: var(--hud); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; animation: clignote 1.6s ease-in-out infinite; }
.appuie kbd { margin: 0 4px; }
/* La suite de l'aperçu : elle n'apparaît qu'une fois le poster affiché (site.js).
   ⚠️ `minmax(0, 1fr)` : sans lui, la colonne de la grille prend la largeur de
   son plus long contenu insécable. Le 3 novembre 2026, « Personnaliser et
   commander » (un `.bouton`, donc `nowrap`) l'élargissait au-delà de l'écran
   d'un iPhone, et le texte débordait du cadre avec lui. */
.suite { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 560px; margin-top: 22px; padding: 18px 20px; border-radius: 18px; border: 2px solid transparent; background: linear-gradient(var(--nuit-2), var(--nuit-2)) padding-box, var(--couchant) border-box; }
.suite p { margin: 0; color: var(--brume); font-size: 15.5px; }
.suite p strong { color: var(--creme); }
.suite .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
/* « Personnaliser ce poster » sur ordinateur, sous la barre où « Commander » a
   pris la place de « Chercher » : le même choix que sous le poster sur
   téléphone, plein d'un côté, en contour de l'autre (index.html). */
.choix-ordi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 560px; margin-top: 12px; }
.choix-ordi .ou { font-family: var(--hud); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }
.choix-ordi .sous-bouton { color: var(--brume); font-size: 13px; }
/* « Personnaliser ce poster » a le style de « Commander », le dégradé
   (7 novembre 2026, l'auteur) : `.bouton` seul, sans `sombre` (index.html). */
/* « Pas convaincu ? » (7 novembre 2026) : une ligne et quatre puces, sous les
   choix de l'aperçu, qui apparaissent en fondu 10 s après lui (site.js). Discrète
   exprès : elle ne doit pas passer devant « Commander ». Ordinateur : au bas de la
   suite ; téléphone : sous les deux boutons du poster (bloc ≤ 920 px). */
.pas-convaincu { display: grid; gap: 10px; min-width: 0; animation: apparait .45s ease both; }
.suite .pas-convaincu { padding-top: 14px; border-top: 1px solid var(--bord); }
.pas-convaincu p { margin: 0; color: var(--brume); font-size: 14px; }
.pas-convaincu .freins-choix { display: grid; gap: 10px; }
.pas-convaincu .freins { display: flex; flex-wrap: wrap; gap: 8px; }
.pas-convaincu .merci { color: var(--cyan); font-weight: 600; outline: none; }
.pas-convaincu .merci:empty { display: none; }
@keyframes apparait { from { opacity: 0; translate: 0 6px; } }

.scene-heros { position: relative; display: grid; place-items: center; min-height: 560px; }
.couchant {
  position: absolute; width: min(560px, 96%); aspect-ratio: 1; border-radius: 50%; top: 6%;
  background: linear-gradient(180deg, var(--soleil) 0%, var(--orange) 35%, var(--rose) 65%, var(--violet) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 22px);
  mask-image: linear-gradient(180deg, #000 0 50%, transparent 50%), repeating-linear-gradient(180deg, #000 0 13px, transparent 13px 22px);
  opacity: .9; filter: drop-shadow(0 0 50px rgba(255, 46, 136, .45));
}
/* ⚠️ UN OBJET, PAS UNE IMAGE : le poster sous verre, dans sa baguette. Son penché
   et son flottement passent par `rotate` et `translate`, jamais par `transform` :
   celui-ci appartient au relief (relief-poster.css). */
.affiche {
  position: relative; width: min(380px, 74%); margin: 0; padding: 10px; background: #fff; rotate: 4deg; animation: flotte 7s ease-in-out infinite;
  box-shadow: 0 0 0 12px var(--cadre), 0 40px 80px rgba(0, 0, 0, .6), 0 0 120px rgba(255, 46, 136, .3);
}
@keyframes flotte { 50% { translate: 0 -12px; rotate: 3deg; } }
.affiche img { width: 100%; aspect-ratio: 1200 / 1708; object-fit: cover; cursor: zoom-in; }
/* L'aperçu du visiteur garde ses propres proportions. */
.affiche.personnel img { aspect-ratio: auto; object-fit: contain; }
.affiche > .sticker { position: absolute; top: -16px; left: -18px; z-index: 2; }
.affiche.personnel > .sticker { background: var(--cyan); color: #04121a; }
.affiche.en-cours { animation-play-state: paused; }
/* Le passage d'un style à l'autre, avant l'adresse : un fondu de l'image seule
   (site.js, `poserExemple`). */
.affiche img { transition: opacity .22s ease; }
.affiche img.bascule { opacity: 0; }
/* Les styles du poster du haut : deux flèches et six points, sous le poster. */
.choix-heros { position: relative; z-index: 3; display: flex; align-items: center; gap: 18px; margin-top: 44px; }
/* La ligne courte et les deux choix sous le poster : téléphone seulement (bloc ≤ 920 px). */
.titre-court, .actions-poster { display: none; }
.choix-heros .fleche { position: static; margin: 0; }
.choix-heros .fleche[disabled] { opacity: .45; cursor: progress; }
.points { display: flex; gap: 8px; }
.points i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .28); transition: background .2s; }
.points i.actif { background: var(--cyan); box-shadow: 0 0 10px rgba(53, 224, 255, .7); }
/* Les COTES, comme sur un plan : le poster est un objet, avec une taille. */
.cote { position: absolute; display: flex; align-items: center; gap: 8px; pointer-events: none; color: var(--cyan); font-family: var(--hud); font-size: 11px; letter-spacing: .1em; white-space: nowrap; }
.cote b { font-weight: 500; }
.cote-h { left: 0; right: 0; top: -44px; height: 12px; border-left: 1px solid; border-right: 1px solid; }
.cote-h::before, .cote-h::after { content: ""; flex: 1; border-top: 1px dashed rgba(53, 224, 255, .55); }
.cote-v { top: 0; bottom: 0; right: -46px; width: 12px; flex-direction: column; border-top: 1px solid; border-bottom: 1px solid; }
.cote-v::before, .cote-v::after { content: ""; flex: 1; border-left: 1px dashed rgba(53, 224, 255, .55); }
.cote-v b { writing-mode: vertical-rl; transform: rotate(180deg); }
/* Le « voyage rapide » : l'écran posé sur le poster pendant que l'aperçu se
   dessine. La barre file vers 92 % le temps du rendu, puis finit sa course quand
   l'image est là (site.js). */
.voyage {
  position: absolute; inset: 10px; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center;
  background: rgba(13, 10, 30, .93); opacity: 0; pointer-events: none; transition: opacity .3s;
}
.voyage.actif { opacity: 1; pointer-events: auto; }
.voyage .hud { margin: 0; }
.voyage strong { max-width: 100%; font-family: var(--affiche); font-weight: 400; font-size: 40px; line-height: .9; text-transform: uppercase; overflow-wrap: anywhere; }
.voyage small { font-family: var(--hud); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brume); }
.voyage .barre { width: 80%; }
.voyage.actif .barre i { width: 92%; transition: width 5s cubic-bezier(.1, .7, .2, 1); }
.voyage.actif.arrive .barre i { width: 100%; transition: width .25s ease-out; }
/* Le bouton « Agrandir » : le poster s'ouvre dans la visionneuse (visionneuse.js). */
.agrandir {
  position: absolute; right: 20px; bottom: 20px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px 8px 10px; border-radius: 999px;
  font-family: var(--hud); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--creme); background: rgba(13, 10, 30, .84); border: 1px solid rgba(53, 224, 255, .65);
  cursor: zoom-in;
}
.agrandir svg { width: 14px; height: 14px; color: var(--cyan); }
.affiche.en-cours .agrandir { visibility: hidden; }
.hud-heros { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 30px; }
.hud-heros .aide { max-width: 340px; }
/* ⚠️ LA DATE N'EST PAS ICI : le bloc reste caché tant que le serveur n'a pas
   répondu (site.js). */
.compte-bloc { display: grid; justify-items: end; gap: 10px; margin-left: auto; }
.compte-titre { margin: 0; }
.compte-titre img { height: 34px; width: auto; }
.compte { display: flex; gap: 8px; }
.compte div { display: grid; justify-items: center; min-width: 66px; padding: 8px 6px 7px; background: rgba(0, 0, 0, .7); border-top: 2px solid var(--rose); }
.compte b { font-family: var(--affiche); font-weight: 400; font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; }
.compte div:first-child b { background: var(--couchant); -webkit-background-clip: text; background-clip: text; color: transparent; }
.compte small { font-family: var(--hud); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }

/* ═══════════════════════════════════════════════════ les sections */

.section { position: relative; padding: clamp(72px, 10vw, 128px) 0; }
.section.nuit-2 { background: var(--nuit-2); }

/* — le choix du style, en écran de sélection */
.selecteur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; margin-top: 40px; }
.vedette { position: relative; display: grid; place-items: center; padding: 26px 0 44px; touch-action: pan-y; }
.vedette::before { content: ""; position: absolute; inset: 0 8%; background: radial-gradient(50% 45% at 50% 45%, rgba(177, 77, 255, .3), transparent 70%); pointer-events: none; }
.vedette::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 22px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.poster-vedette { position: relative; z-index: 1; width: min(100% - 128px, 430px); margin: 0; background: var(--nuit-3); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px rgba(0, 0, 0, .65); }
.poster-vedette img { width: 100%; aspect-ratio: 800 / 1139; object-fit: cover; cursor: zoom-in; }
/* Le changement de style : le poster suivant se dessine de haut en bas, sous une
   ligne de balayage. */
.scan { position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
.scan img { width: 100%; height: 100%; object-fit: cover; }
.scan.anime { animation: scan .8s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes scan { to { clip-path: inset(0 0 0 0); } }
.ligne-scan { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 3px; opacity: 0; pointer-events: none; background: var(--couchant); box-shadow: 0 0 18px 4px rgba(255, 46, 136, .7); }
.ligne-scan.anime { animation: ligne .8s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes ligne { 0% { top: 0; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.poster-vedette .agrandir { right: 14px; bottom: 14px; }
.fleche {
  position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%;
  background: rgba(13, 10, 30, .9); border: 1px solid var(--bord-fort); font-size: 22px; line-height: 1;
}
.fleche:hover { border-color: var(--cyan); color: var(--cyan); }
.fleche.gauche { left: 0; }
.fleche.droite { right: 0; }
.fiche { display: grid; gap: 16px; align-content: center; }
.fiche-groupe { display: flex; align-items: center; gap: 14px; font-family: var(--hud); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brume); }
.fiche-nom { display: flex; align-items: center; gap: 10px; min-height: 72px; margin: 0; }
.fiche-nom img { height: 64px; width: auto; max-width: 100%; }
.fiche-nom img.annee { height: 52px; }
.fiche-nom img.variante { height: 54px; }
.fiche-theme { margin: -6px 0 0; font-family: var(--affiche); font-size: 30px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: var(--soleil); }
.fiche-desc { margin: 0; color: var(--brume); font-size: 17px; }
/* Les jauges : trois traits de caractère, notés sur cinq (retour de l'auteur sur
   la maquette, 27 octobre : il les adore, valeurs gardées). */
.jauges { display: grid; gap: 9px; margin: 4px 0 0; }
.jauges div { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; }
.jauges dt { font-family: var(--hud); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }
.jauges dd { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.jauges dd i { height: 10px; background: rgba(255, 255, 255, .1); transition: background .3s; }
.jauges dd i.plein { background: var(--creme); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.etiquettes span { padding: 3px 9px; border: 1px solid var(--bord-fort); font-family: var(--hud); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brume); }
.fiche-prix { display: flex; align-items: flex-end; gap: 14px; }
.fiche-prix strong { font-family: var(--affiche); font-weight: 400; font-size: 58px; line-height: .8; white-space: nowrap; }
.fiche-prix span { font-size: 13px; color: var(--brume); line-height: 1.4; }
.fiche-prix span b { color: var(--soleil); font-weight: 600; }
.fiche-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.bande-styles { display: flex; gap: 12px; margin-top: 36px; padding: 10px 2px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.bande-styles .sep { flex: none; align-self: stretch; display: flex; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--hud); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brume-2); }
.vignette {
  position: relative; flex: 0 0 auto; width: clamp(96px, 11vw, 132px); scroll-snap-align: center; padding: 5px; border-radius: 12px;
  border: 1px solid var(--bord); background: rgba(255, 255, 255, .03); transition: transform .2s var(--ressort), border-color .2s;
}
.vignette img { width: 100%; aspect-ratio: 800 / 1139; object-fit: cover; border-radius: 7px; }
.vignette small { display: block; margin-top: 6px; font-family: var(--hud); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--brume); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vignette:hover { transform: translateY(-3px); border-color: var(--bord-fort); }
.vignette[aria-selected="true"] { border: 2px solid transparent; padding: 4px; background: linear-gradient(var(--nuit-3), var(--nuit-3)) padding-box, var(--couchant) border-box; }
.vignette[aria-selected="true"] small { color: var(--creme); }
.aide-selecteur { display: inline-block; margin-top: 18px; }

/* — la carte de la boîte, en cinématique */
.cinematique { padding: 0; background: #000; }
.cinematique .bande { height: clamp(26px, 5vw, 62px); background: #000; }
.cinematique .plan { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(120px, 13vw, 160px); background: radial-gradient(60% 70% at 30% 50%, rgba(255, 138, 61, .14), transparent 70%), var(--nuit-2); }
.boite { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.boite-texte p { margin: 0 0 14px; color: var(--brume); font-size: 17.5px; max-width: 36em; }
.pliee { position: relative; width: min(100%, 400px); margin: 0 auto; rotate: -4deg; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.pliee img { width: 100%; aspect-ratio: 1200 / 1708; object-fit: cover; }
/* Les plis : une feuille pliée en quatre, ses creux et ses arêtes. */
.pliee::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.3%, rgba(0, 0, 0, .22) 50%, rgba(255, 255, 255, .16) 50.6%, transparent 51.6%),
    linear-gradient(180deg, transparent 32.6%, rgba(0, 0, 0, .18) 33.3%, rgba(255, 255, 255, .12) 33.8%, transparent 34.6%),
    linear-gradient(180deg, transparent 65.9%, rgba(0, 0, 0, .18) 66.6%, rgba(255, 255, 255, .12) 67.1%, transparent 67.9%),
    linear-gradient(115deg, rgba(255, 255, 255, .06), transparent 40%, rgba(0, 0, 0, .12));
}
.punaise { position: absolute; top: -11px; left: 50%; z-index: 2; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff9cc4, var(--rose) 50%, #7d0d40); box-shadow: 0 5px 7px rgba(0, 0, 0, .55); }
/* La phrase de chute en sous-titre, « Fast Travel Studio » en jaune, comme dans
   les reels. Les mots apparaissent quand la section arrive à l'écran (site.js) ;
   sans script, ils sont là d'emblée. */
.sous-titre-cine {
  position: absolute; left: 50%; bottom: clamp(30px, 4vw, 48px); transform: translateX(-50%); width: min(92%, 880px); margin: 0; text-align: center;
  font-weight: 600; font-size: clamp(16px, 1.9vw, 21px); line-height: 1.45; color: #fff;
  text-shadow: 0 0 2px #000, 0 2px 3px #000, 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.sous-titre-cine b { color: var(--soleil); }
.sous-titre-cine .mot { opacity: 0; transition: opacity .25s; transition-delay: calc(var(--i) * 55ms); }
.cinematique.joue .sous-titre-cine .mot { opacity: 1; }

/* — le cadeau, en missions */
.cartes-mission { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mission {
  position: relative; display: grid; align-content: start; gap: 12px; padding: 24px 22px 22px; overflow: hidden;
  border: 1px solid var(--bord); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  transition: transform .25s var(--ressort), border-color .25s;
}
/* La couleur de chaque mission, par classe : pas d'attribut `style` (CSP). */
.mission.rose { --c: var(--rose); }
.mission.cyan { --c: var(--cyan); }
.mission.soleil { --c: var(--soleil); }
.mission::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.mission:hover { transform: translateY(-4px); border-color: var(--bord-fort); }
.mission-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-family: var(--hud); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.mission h3 { margin: 0; font-family: var(--affiche); font-weight: 400; font-size: 36px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.mission p { margin: 0; color: var(--brume); font-size: 15.5px; }
.cartouche-ex { justify-self: start; padding: 6px 14px 5px; background: #fbfaf7; color: #16131f; font-family: var(--affiche); font-size: 24px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); transform: rotate(-1.5deg); }
.conseil { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--bord-fort); font-size: 14px; color: var(--brume); }
.conseil .medaillon { width: 34px; height: 34px; }
.conseil strong { color: var(--creme); font-weight: 600; }
/* Les couleurs des catégories d'icônes du configurateur. */
.medaillon.maison { --c: #ff2e88; }
.medaillon.resto { --c: #ff8a3d; }
.medaillon.aeroport { --c: #35e0ff; }
.cta-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.cta-note { margin: 0; color: var(--brume); font-size: 15px; max-width: 34em; }

/* — comment ça marche, en objectifs */
.objectifs-grand { margin-top: 40px; max-width: 860px; padding: 22px 26px 24px; background: rgba(0, 0, 0, .82); }
.objectifs-tete { display: flex; align-items: center; gap: 14px; }
.objectifs-tete .hud { margin: 0; flex: 1; }
.objectifs-tete b { font-family: var(--hud); font-weight: 500; font-size: 13px; letter-spacing: .08em; }
.progression { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 12px 0 8px; }
.progression i { display: block; height: 100%; width: 0; background: var(--couchant); transition: width .6s var(--ressort); }
.objectifs-grand ol { list-style: none; margin: 0; padding: 0; display: grid; }
.objectif { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--bord); }
.objectif:last-child { border-bottom: 0; padding-bottom: 4px; }
.objectif .coche { grid-row: span 3; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 3px; border-radius: 7px; border: 2px solid var(--bord-fort); transition: background .35s, border-color .35s; }
.objectif.fait .coche { background: var(--vert); border-color: var(--vert); }
.objectif.fait .coche::after { content: ""; width: 12px; height: 6px; margin-top: -3px; border-left: 2.5px solid var(--nuit); border-bottom: 2.5px solid var(--nuit); transform: rotate(-45deg); }
.objectif small { font-family: var(--hud); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume-2); }
.objectif.fait small { color: var(--vert); }
.objectif h3 { margin: 0; font-family: var(--affiche); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.objectif p { margin: 4px 0 0; color: var(--brume); font-size: 16px; }
.accompli { margin-top: 18px; text-align: center; font-size: clamp(40px, 6vw, 72px); }
.accompli.joue { animation: tampon .7s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes tampon { from { transform: scale(1.7); opacity: 0; letter-spacing: .12em; } }

/* — dans le détail, au viseur */
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.detail { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--nuit-3); }
.detail .relief { border-radius: 14px; }
.detail img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.detail .viseur {
  position: absolute; inset: 14px; z-index: 1; pointer-events: none; --l: 22px;
  background:
    linear-gradient(var(--cyan), var(--cyan)) 0 0 / var(--l) 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 0 0 / 2px var(--l) no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 0 / var(--l) 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 100% 0 / 2px var(--l) no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 0 100% / var(--l) 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 0 100% / 2px var(--l) no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) 100% 100% / var(--l) 2px no-repeat, linear-gradient(var(--cyan), var(--cyan)) 100% 100% / 2px var(--l) no-repeat;
}
.detail .zoom-hud { position: absolute; left: 24px; top: 22px; z-index: 1; padding: 3px 8px; background: rgba(0, 0, 0, .8); font-family: var(--hud); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.detail figcaption { position: absolute; left: 20px; bottom: 24px; z-index: 1; }

/* — les formats, au mur : la pièce du configurateur, le poster à l'échelle au-dessus
   du canapé, le personnage (1,85 m) à côté. Les positions sont calculées (site.js). */
.formats-grille { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 28px; margin-top: 40px; align-items: stretch; }
.mur { position: relative; align-self: center; height: 420px; overflow: hidden; border-radius: 20px; border: 1px solid var(--bord); background: linear-gradient(180deg, #2b2153 0%, #241c49 55%, #1e173f 100%); --px: 0; --amp: 1; }
.mur-lumiere { position: absolute; left: 4%; top: 2%; width: 42%; height: 74%; transform: skewY(-14deg); translate: calc(var(--px) * var(--amp) * -5px) 0; background: repeating-linear-gradient(180deg, rgba(255, 170, 90, .15) 0 16px, transparent 16px 30px); -webkit-mask-image: radial-gradient(60% 55% at 50% 50%, #000 20%, transparent 100%); mask-image: radial-gradient(60% 55% at 50% 50%, #000 20%, transparent 100%); }
.mur-sol { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, #221a49, #120d2a); border-top: 3px solid rgba(255, 255, 255, .07); }
.mur-objet { position: absolute; }
.mur-objet svg { display: block; width: 100%; height: 100%; overflow: visible; }
#mur-lampe, #mur-plante { translate: calc(var(--px) * var(--amp) * -16px) 0; }
#mur-canape { translate: calc(var(--px) * var(--amp) * -22px) 0; }
.mur-cadre { position: absolute; background: #0b0a10; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); translate: calc(var(--px) * var(--amp) * -9px) 0; transition: left .55s var(--ressort), top .55s var(--ressort), width .55s var(--ressort), height .55s var(--ressort); }
.mur-cadre .papier { position: absolute; overflow: hidden; background: #fbfaf7; }
.mur-cadre img { width: 100%; height: 100%; object-fit: cover; }
.mur-cadre .papier::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 32%, rgba(255, 236, 210, .2) 44%, rgba(255, 255, 255, .06) 50%, transparent 62%); background-size: 260% 100%; background-position: calc(30% + var(--px) * 18%) 0; mix-blend-mode: screen; }
.mur-etiquette { position: absolute; transform: translate(-50%, -100%); translate: calc(var(--px) * var(--amp) * -9px) 0; white-space: nowrap; transition: top .55s var(--ressort); padding: 5px 11px; border-radius: 999px; background: rgba(13, 10, 30, .85); border: 1px solid rgba(53, 224, 255, .45); font-family: var(--hud); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.silhouette { translate: calc(var(--px) * var(--amp) * -38px) 0; }
.silhouette svg path, .silhouette svg circle { fill: rgba(189, 181, 221, .06); stroke: rgba(189, 181, 221, .6); stroke-width: 1.1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.silhouette .perso, .silhouette .perso-ombre { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; }
.silhouette .perso { transform-origin: 50% 100%; animation: respire 4.2s ease-in-out infinite; }
@keyframes respire { 50% { transform: scale(1.004, 1.009); } }
.silhouette .perso-ombre { filter: brightness(0) blur(6px); opacity: .16; transform-origin: 50% 100%; transform: translate(18%, -9%) skewX(-14deg) scaleY(.94); }
/* L'ombre au sol, calée sur les chaussures du personnage : une ombre de contact
   sous chacune, et un voile léger entre les pieds. L'ancienne grande ellipse
   débordait devant lui comme une flaque (maquette, 27 octobre). */
.ombre-sol { position: absolute; left: 5.5%; top: 94.2%; width: 99.7%; height: 6%; background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 60%, transparent); }
.ombre-sol::before, .ombre-sol::after { content: ""; position: absolute; background: radial-gradient(closest-side, rgba(0, 0, 0, .75) 35%, rgba(0, 0, 0, .3) 70%, transparent); }
/* Son pied droit (à gauche à l'écran), de profil : pointe devant, talon derrière. */
.ombre-sol::before { left: 4.2%; width: 41.7%; top: 11.7%; height: 30%; transform: rotate(-11deg); }
/* Son pied gauche, de face, un peu en avant. */
.ombre-sol::after { left: 69.4%; width: 27.8%; top: 48.3%; height: 50%; }
.silhouette:not(.avec-perso) .ombre-sol { display: none; }
.silhouette.avec-perso svg { display: none; }
.silhouette .taille { position: absolute; left: 100%; top: 0; bottom: 0; margin-left: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--brume); font-family: var(--hud); font-size: 10.5px; white-space: nowrap; }
.silhouette .taille::before, .silhouette .taille::after { content: ""; flex: 1; border-left: 1px dashed rgba(189, 181, 221, .5); }
/* Le fond en image remplace la pièce dessinée ; le poster glisse avec le mur. */
.mur.avec-fond { background: #2c2246; }
.mur-fond {
  position: absolute; max-width: none; translate: calc(var(--px) * var(--amp) * -6px) 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fondu, 0px)); mask-image: linear-gradient(180deg, transparent 0, #000 var(--fondu, 0px));
}
.mur.avec-fond .mur-lumiere, .mur.avec-fond .mur-sol, .mur.avec-fond #mur-plante, .mur.avec-fond #mur-lampe, .mur.avec-fond #mur-canape { display: none; }
.mur.avec-fond .mur-cadre, .mur.avec-fond .mur-etiquette { translate: calc(var(--px) * var(--amp) * -6px) 0; }
.mur.avec-fond .silhouette { translate: calc(var(--px) * var(--amp) * -16px) 0; }
.choix-formats { display: grid; gap: 12px; align-content: center; }
.carte-format {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 14px; padding: 16px 18px; text-align: left;
  border-radius: 16px; border: 1px solid var(--bord-fort); background: rgba(255, 255, 255, .03); transition: border-color .2s;
}
.carte-format:hover { border-color: rgba(255, 255, 255, .5); }
.carte-format[aria-checked="true"] { border: 2px solid transparent; padding: 15px 17px; background: linear-gradient(var(--nuit-3), var(--nuit-3)) padding-box, var(--couchant) border-box; }
.carte-format .taille { font-family: var(--affiche); font-size: 34px; line-height: 1; letter-spacing: .02em; }
.carte-format .prix { grid-row: span 2; font-family: var(--affiche); font-size: 46px; line-height: .85; font-variant-numeric: lining-nums tabular-nums; }
.carte-format .role { font-size: 14px; color: var(--brume); }
.carte-format .normal { grid-column: 1 / -1; margin-top: 6px; font-family: var(--hud); font-size: 11px; letter-spacing: .06em; color: var(--brume); }
.carte-format .normal b { color: var(--soleil); font-weight: 500; }
/* La remise du prix de lancement, en autocollant sur le coin (posée par site.js).
   ⚠️ Le prix normal est annoncé (« ensuite 75 € »), JAMAIS barré. */
.carte-format .sticker { position: absolute; top: -12px; right: 14px; font-size: 11px; padding: 4px 8px; }
.precisions { margin: 22px 0 0; color: var(--brume); font-size: 15.5px; max-width: 52em; }

/* — la FAQ, en encarts : chaque réponse dans l'encart noir de l'aide, une touche
   « + » pour l'ouvrir. La touche est dessinée en CSS : le texte de la question
   reste seul dans son <summary>. */
.questions { display: grid; gap: 10px; max-width: 920px; margin-top: 40px; }
.question { border: 1px solid var(--bord); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.question[open] { border-color: var(--bord-fort); }
.question summary {
  display: flex; align-items: center; gap: 14px; padding: 17px 18px; cursor: pointer; list-style: none;
  font-family: var(--marque); font-weight: 700; font-style: italic; font-size: 15px; line-height: 1.35; letter-spacing: .01em; text-transform: uppercase;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::before {
  content: "+"; flex: none; display: inline-grid; place-items: center; width: 24px; height: 22px;
  border-radius: 4px; background: #f4f2ee; color: #0b0a10; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3);
  font: 700 15px/1 var(--texte); font-style: normal; letter-spacing: 0;
}
.question[open] summary::before { content: "−"; }
.question summary:hover { color: var(--cyan); }
.reponse { margin: 0 12px 12px; padding: 14px 16px 15px; background: rgba(0, 0, 0, .82); color: #fff; font-size: 16px; }
.reponse p { margin: 0; }
.reponse p + p { margin-top: 10px; }
.reponse a { color: var(--cyan); }

/* — la fin, en écran de chargement */
.final { position: relative; overflow: hidden; padding: clamp(96px, 13vw, 168px) 0; text-align: center; }
.final .fond { position: absolute; inset: 0; background: url("/landing/carte-nuit.webp") center / cover; opacity: .5; }
.final::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(50% 60% at 50% 50%, rgba(255, 46, 136, .22), transparent 70%), linear-gradient(180deg, rgba(13, 10, 30, .9), rgba(13, 10, 30, .55) 50%, rgba(13, 10, 30, .95)); }
.final .conteneur { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; }
.final .banniere { font-size: clamp(58px, 10vw, 136px); }
.final .conteneur > p.texte-final { margin: 0; max-width: 34em; color: var(--creme); font-size: 19px; }
.final .barre { max-width: 360px; }
/* Une seule fois : la barre se remplit à l'arrivée, s'arrête avant la fin et
   attend l'adresse. En boucle, elle avait l'air d'un chargement planté (retour de
   l'auteur sur la maquette, 27 octobre). */
.final .barre i { width: 0; transition: width 2.2s cubic-bezier(.4, 0, .2, 1); }
.final .barre.attend i { width: 92%; }
.final .barre.part i { width: 100%; transition: width .5s ease-out; }
.final .etape { margin: -10px 0 0; font-family: var(--hud); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.final .etape.attente { color: var(--soleil); animation: clignote 1.4s ease-in-out infinite; }
.final .recherche { width: min(100%, 560px); }
.final .actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; }

/* ═══════════════════════════════════════════════════ le pied, en générique */

.pied { padding: 64px 0 120px; background: #07051a; border-top: 1px solid var(--bord); }
.pied-grille { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.pied .logotype img { height: 34px; width: auto; }
.pied-accroche { margin: 14px 0 0; color: var(--brume); font-size: 15px; max-width: 26em; }
.pied h2 { margin: 0 0 12px; font-family: var(--hud); font-weight: 500; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pied ul a { text-decoration: none; color: var(--brume); font-size: 15px; }
.pied ul a:hover, .pied ul a[aria-current="page"] { color: var(--creme); }
.pied-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--bord); }
.attribution { margin: 0; color: #8d86ad; font-size: 12.5px; }
.haut-de-page { font-family: var(--hud); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--brume); }
.haut-de-page:hover { color: var(--creme); }

/* ═══════════════════════════════════════════════ les pages d'infos, en menu pause */

.infos-tete { position: relative; overflow: hidden; padding: clamp(44px, 6vw, 72px) 0 34px; border-bottom: 1px solid var(--bord); }
.infos-tete .fond { position: absolute; inset: 0; opacity: .22; background: url("/landing/carte-nuit.webp") center 30% / cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.infos-tete .conteneur { position: relative; }
.infos-tete .titre-affiche { font-size: clamp(44px, 6vw, 84px); margin-bottom: 8px; }
.maj { margin: 0; font-family: var(--hud); font-size: 12px; letter-spacing: .08em; color: var(--brume); }
.infos-grille { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); padding: 40px 0 96px; }
.menu-pause { position: sticky; top: calc(var(--haut) + 24px); align-self: start; display: grid; gap: 4px; }
.menu-pause .tete-menu { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; font-family: var(--hud); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brume-2); }
.menu-pause > a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px 10px; text-decoration: none; color: var(--brume);
  font-family: var(--affiche); font-size: 25px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; background: rgba(255, 255, 255, .03);
}
.menu-pause > a:hover { color: var(--creme); background: rgba(255, 255, 255, .08); }
.menu-pause > a[aria-current="page"] { background: var(--creme); color: #1a0714; }
.menu-pause > a[aria-current="page"]::after { content: "▸"; font-size: 16px; }
.menu-pause .aide { margin-top: 16px; font-size: 13.5px; }
.menu-pause .aide a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
/* « En bref » : les trois choses à retenir, tirées du texte de la page. */
.en-bref { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 30px; }
.bref { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 16px; border-radius: 14px; background: rgba(53, 224, 255, .06); border: 1px solid rgba(53, 224, 255, .22); }
.bref svg { grid-row: span 2; width: 30px; height: 30px; color: var(--cyan); }
.bref strong { font-family: var(--affiche); font-weight: 400; font-size: 23px; line-height: 1.02; letter-spacing: .02em; text-transform: uppercase; }
.bref span { font-size: 13.5px; color: var(--brume); line-height: 1.4; }
/* Le sommaire cliquable des longues pages (les dix-huit articles des CGV). */
.sommaire { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 30px; padding: 0; list-style: none; }
.sommaire a { display: inline-block; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--bord-fort); font-size: 13px; text-decoration: none; color: var(--brume); }
.sommaire a:hover { border-color: var(--cyan); color: var(--cyan); }
/* Le texte légal, INCHANGÉ (tests/pages-legales.test.mjs) : seule sa mise en page vient d'ici. */
/* Pas de `scroll-margin` sur les titres : le `scroll-padding-top` de la page tient
   déjà compte de l'en-tête collant, et les deux s'additionnaient (l'article visé
   tombait à 164 px du haut au lieu de 80). */
.texte-legal { max-width: 760px; }
.texte-legal h2 { margin: 36px 0 10px; font-family: var(--marque); font-weight: 700; font-style: italic; font-size: 17px; letter-spacing: .01em; text-transform: uppercase; }
.texte-legal > :first-child { margin-top: 0; }
.texte-legal p, .texte-legal li { color: var(--brume); }
.texte-legal p { margin: 0 0 12px; }
.texte-legal ul, .texte-legal ol { margin: 0 0 14px; padding-left: 1.3em; }
.texte-legal li { margin-bottom: 6px; }
.texte-legal strong { color: var(--creme); }
.texte-legal a { color: var(--cyan); text-underline-offset: 2px; overflow-wrap: anywhere; }
/* L'encadré des garanties légales des CGV : un texte réglementaire, reproduit tel
   quel, qu'on distingue du reste sans le faire crier. */
.texte-legal .encadre { margin: 16px 0; padding: 18px 20px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--bord-fort); }

/* ═══════════════════════════════════════════════════════════ la 404 */

.hors-carte { position: relative; overflow: hidden; display: grid; place-items: center; min-height: calc(100svh - var(--haut)); padding: 48px var(--gouttiere) 130px; text-align: center; }
.hors-carte::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 20%, transparent 100%); mask-image: radial-gradient(60% 60% at 50% 40%, #000 20%, transparent 100%); }
.hors-carte > div { position: relative; display: grid; justify-items: center; gap: 18px; width: 100%; max-width: 640px; }
/* Un radar sans carte : le balayage tourne, le point du cap clignote dans le vide. */
.radar {
  position: relative; width: min(260px, 64vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle, #2a2a33 0%, #17171d 70%); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 0 0 9px rgba(0, 0, 0, .7), 0 24px 60px rgba(0, 0, 0, .6);
}
.radar::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle, transparent 0 31px, rgba(255, 255, 255, .07) 31px 32px), linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 50% / 100% 50%, linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 50% 0 / 50% 100%; }
.radar .balayage { position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(53, 224, 255, .3), transparent 22%); animation: balaye 3.2s linear infinite; }
@keyframes balaye { to { transform: rotate(360deg); } }
.radar .brouillard { position: absolute; inset: 0; background: url("/landing/carte-nuit.webp") 18% 30% / 260%; opacity: .25; -webkit-mask-image: radial-gradient(circle at 12% 22%, #000, transparent 45%); mask-image: radial-gradient(circle at 12% 22%, #000, transparent 45%); }
.radar .moi { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -11px 0 0 -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 22px solid #fff; transform: rotate(-38deg); filter: drop-shadow(0 0 4px rgba(0, 0, 0, .8)); }
.radar .cap { position: absolute; left: 7%; top: 16%; width: 16px; height: 16px; border-radius: 50%; background: var(--soleil); box-shadow: 0 0 0 3px rgba(0, 0, 0, .6), 0 0 14px var(--soleil); animation: clignote 1s ease-in-out infinite; }
.radar .nord { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-family: var(--hud); font-size: 11px; font-weight: 500; color: #fff; }
.hors-carte .banniere { font-size: clamp(72px, 14vw, 150px); }
.hors-carte p.texte { margin: 0; color: var(--brume); font-size: 18px; }
.hors-carte .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.points-voyage { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.points-voyage a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--bord-fort); font-size: 14px; text-decoration: none; color: var(--brume); }
.points-voyage a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--soleil); }
.points-voyage a:hover { color: var(--creme); border-color: var(--soleil); }

/* ═══════════════════════════════════════ le voyage rapide entre deux pages */

/* Un écran très court entre deux pages du site : la destination, une barre, une
   astuce (commun.js). Un fond presque opaque, jamais un flou. */
.voyage-page {
  position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center;
  background: rgba(9, 7, 22, .98); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.voyage-page.actif { opacity: 1; pointer-events: auto; }
.voyage-page .hud { margin: 0; }
.voyage-page strong { font-family: var(--affiche); font-weight: 400; font-size: clamp(48px, 9vw, 96px); line-height: .88; text-transform: uppercase; }
.voyage-page .barre { width: min(320px, 80vw); }
.voyage-page .barre i { transition: width .55s cubic-bezier(.4, 0, .2, 1); }
.voyage-page.actif .barre i { width: 100%; }

/* ═════════════════════════════ le poster en grand : la visionneuse (visionneuse.js) */

/* ⚠️ UNE IMAGE SEULE SUR UN FOND UNI : rien d'autre à redessiner quand on zoome.
   `touch-action: none` : le pincement est pour l'image, jamais pour la page. */
.visionneuse {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #07051a;
  touch-action: none; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none;
}
.visionneuse-image {
  display: block; width: auto; height: auto;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px);
  transform-origin: 0 0; will-change: transform;
  cursor: zoom-in; -webkit-user-drag: none; -webkit-touch-callout: none;
}
.visionneuse.zoomee .visionneuse-image { cursor: grab; }
.visionneuse-fermer {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid var(--bord);
  background: rgba(13, 10, 30, .85); color: var(--creme); cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s, scale .15s var(--ressort);
}
/* Le survol (7 novembre 2026 : « elle n'a pas de hover »), comme les autres
   boutons ronds du site : le cyan. */
.visionneuse-fermer:hover { border-color: var(--cyan); color: var(--cyan); background: rgba(53, 224, 255, .12); scale: 1.06; }
.visionneuse-fermer:active { scale: .96; }
.visionneuse-fermer:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
/* Le dessin ne reçoit jamais le pointeur : c'est le bouton qu'on touche
   (visionneuse.js, même raison). */
.visionneuse-fermer svg { width: 16px; height: 16px; pointer-events: none; }
/* « Version HD en cours… » : l'aperçu du visiteur s'ouvre aussitôt, sa version
   en grand arrive quelques secondes plus tard (site.js, `ouvrirEnGrand`). */
.visionneuse-etat {
  position: absolute; top: max(26px, calc(env(safe-area-inset-top) + 12px)); left: 50%; translate: -50% 0; margin: 0;
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(13, 10, 30, .85); border: 1px solid var(--bord);
  font-family: var(--hud); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme);
  pointer-events: none; white-space: nowrap;
}
.visionneuse-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); animation: clignote 1.2s ease-in-out infinite; }
.visionneuse-etat:empty { display: none; }
.visionneuse-aide {
  position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0;
  text-align: center; font-family: var(--hud); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brume); pointer-events: none; transition: opacity .2s ease;
}
.visionneuse.zoomee .visionneuse-aide { opacity: 0; }
html.visionneuse-ouverte, html.visionneuse-ouverte body { overflow: hidden; }

/* ⚠️ LA PAGE ZOOMÉE NE DESSINE PLUS RIEN DE CHER. Safari redessine ces effets à
   chaque niveau de zoom ; au pincement, ils ont fait planter la page sur iPhone
   (visionneuse.js). Coupés le temps du zoom, rendus à 100 %. Sous la visionneuse
   aussi : la page reste derrière, autant qu'elle ne coûte rien.
   tests/visionneuse.test.mjs exige un remède ici pour chaque animation infinie,
   chaque halo flou et chaque flou d'arrière-plan de cette feuille. */
html.page-zoomee body::after, html.visionneuse-ouverte body::after { display: none; }
html.page-zoomee .bandeau-promo .defile { animation: none; }
html.page-zoomee .ecran-titre .fond, html.visionneuse-ouverte .ecran-titre .fond { animation: none; }
html.page-zoomee .affiche, html.visionneuse-ouverte .affiche { animation: none; }
html.page-zoomee .appuie { animation: none; }
html.page-zoomee .couchant { filter: none; }
html.page-zoomee .silhouette .perso { animation: none; }
html.page-zoomee .silhouette .perso-ombre { display: none; }
html.page-zoomee .final .etape.attente { animation: none; }
html.page-zoomee .radar .balayage { animation: none; }
html.page-zoomee .radar .cap { animation: none; }
html.page-zoomee .radar .moi { filter: none; }
html.page-zoomee .visionneuse-etat::before { animation: none; }

/* ═══════════════════════════════════════════════════ tablette, téléphone */

@media (max-width: 1080px) {
  /* Le menu se serre : sans ses touches, et sans « Ta carte » (le logo y mène). */
  .menu a { padding: 0 10px; font-size: 20px; }
  .menu > kbd, .menu a[data-section="haut"] { display: none; }
  .entete .logotype img { height: 28px; }
}
@media (max-width: 920px) {
  .menu { display: none; }
  .entete .droite { margin-left: auto; }
  .heros, .selecteur, .boite, .formats-grille, .infos-grille { grid-template-columns: minmax(0, 1fr); }
  /* ⚠️ LE CHAMP D'ABORD, LE POSTER ENSUITE (5 novembre 2026). Le poster passait
     devant (`order: -1`, la maquette du 28 octobre) : sur un iPhone arrivé de la
     pub, le premier écran montrait Los Angeles et des flèches, et le champ
     d'adresse tombait à 1 074 px pour un écran de 664. Une personne sur dix
     cherchait son adresse. Le visiteur vient pour SA ville : il doit voir où
     la taper sans faire défiler. */
  /* ⚠️ LE POSTER, PUIS LE CHAMP JUSTE DESSOUS (5 novembre 2026, au soir, l'auteur).
     Le poster ouvre la page ; le champ le suit, et le GROS TITRE passe sous le
     formulaire : avec lui au-dessus du poster, le champ retombait sous l'écran
     (le défaut corrigé l'après-midi même : 1 074 px pour un écran de 664, une
     personne sur dix cherchait son adresse). Une ligne courte (`.titre-court`)
     garde la promesse, juste au-dessus du champ. Le texte du héros se répartit autour du poster
     (`display: contents`) ; l'ordre ci-dessous est celui de l'écran. */
  .heros { row-gap: 0; }
  .heros-texte { display: contents; }
  /* `scroll-margin-top` : ramené à l'écran après l'aperçu, le poster s'arrête
     sous l'en-tête collant, son autocollant compris (il dépasse de 16 px). */
  .scene-heros { order: 1; min-height: 0; padding: 2px 0 4px; scroll-margin-top: 28px; }
  .heros-texte > .titre-court { order: 2; }
  .heros-texte > .recherche-titre { display: none; }
  .heros-texte > .recherche { order: 3; }
  .heros-texte > .exemples { order: 4; }
  .heros-texte > .retour { order: 5; }
  .heros-texte > .appuie { order: 6; }
  .heros-texte > .suite { order: 7; }
  .heros-texte > .hud { order: 8; margin-top: 36px; }
  .heros-texte > .titre-affiche { order: 9; }
  .heros-texte > .chapo { order: 10; }
  .titre-court {
    display: block; position: relative; z-index: 3; margin: 2px 0 10px; font-family: var(--affiche); font-size: 28px; line-height: 1;
    text-transform: uppercase; letter-spacing: .01em; color: var(--creme);
  }
  .choix-heros { margin-top: 8px; }
  /* Les deux choix sous le poster : le bouton de la recherche s'efface. */
  .recherche [data-commander] { display: none !important; }
  .actions-poster { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: 420px; min-width: 0; margin-top: 14px; }
  /* Le texte passe à la ligne plutôt que d'élargir le bouton : en une ligne,
     « Commander ce poster · 56 € » sortait de l'écran d'un 320 px. */
  .actions-poster .bouton { display: block; min-width: 0; min-height: 0; padding: 16px; white-space: normal; text-align: center; line-height: 1.15; }
  .actions-poster .ou { font-family: var(--hud); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); text-align: center; }
  .actions-poster .sous-bouton { margin-top: -2px; color: var(--brume); font-size: 13px; text-align: center; }
  /* « Pas convaincu ? » : sous les deux boutons, centré comme eux. Celui de la
     suite, plus bas sous le champ, ferait doublon. Les puces grandissent pour le
     doigt (36 px de haut au lieu de 28). */
  .suite .pas-convaincu { display: none; }
  /* Le choix « Personnaliser » de l'ordinateur : sur téléphone, il est sous le
     poster (`.actions-poster`). Sans cette ligne, `display: contents` le
     poserait en tête de page, avant le poster (pas d'`order`). */
  .choix-ordi { display: none; }
  .actions-poster .pas-convaincu { margin: 12px 0 14px; text-align: center; }
  .actions-poster .freins { justify-content: center; }
  .actions-poster .freins .puce { padding: 8px 14px; }
  .couchant { width: min(440px, 92%); top: 0; }
  /* 54 % : le poster ouvre la page sans repousser le champ sous l'écran (mesuré du 320 × 568 au 412 × 915). */
  .affiche { width: min(260px, 54%); }
  .hud-heros { flex-direction: column; align-items: stretch; }
  .hud-heros .aide { display: none; }
  .compte-bloc { justify-items: start; margin-left: 0; }
  .vedette { padding-top: 0; }
  /* 70 % : les flèches de 44 px tiennent dans la marge, sans mordre sur le poster. */
  .poster-vedette { width: min(70%, 400px); }
  .fleche { width: 44px; height: 44px; margin-top: -22px; }
  .pliee { width: min(78%, 360px); }
  .cartes-mission, .details { grid-template-columns: minmax(0, 1fr); }
  .details { gap: 14px; }
  .detail img { aspect-ratio: 16 / 11; }
  .pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-grille > :first-child { grid-column: 1 / -1; }
  .menu-pause { position: static; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .menu-pause .tete-menu, .menu-pause .aide { display: none; }
  .menu-pause > a { flex: none; font-size: 20px; padding: 9px 13px 8px; }
  .infos-grille { padding-top: 24px; gap: 24px; }
  .aide-selecteur { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .entete .bouton.petit .long { display: none; }
  .entete { gap: 10px; }
  .entete .logotype img { height: 24px; }
  .recherche { flex-wrap: wrap; border-radius: 18px; padding: 8px; }
  .recherche > svg { margin-left: 8px; }
  .recherche .champ-adresse { flex: 1 1 calc(100% - 40px); }
  /* « Chercher mon adresse » demande 284 px avec ses marges de 22 px : 5 px de
     trop à 320 px (3 novembre 2026). Avec 14 px, il tient sur une ligne dès
     320 px ; plus étroit, il passe à la ligne au lieu de sortir du cadre. */
  /* `gap: 0` : le bouton est un `inline-flex`, ses 10 px s'ajouteraient à
     l'espace insécable entre « Chercher » et « mon adresse ». */
  .recherche .bouton { flex: 1 1 100%; gap: 0; padding: 0 14px; white-space: normal; text-align: center; }
  .recherche .bouton .long { display: inline; }
  .appuie { display: none; }
  /* Téléphone : le sous-titre passe sous le texte au lieu de flotter dessus. */
  .cinematique .plan { padding-bottom: 40px; }
  .sous-titre-cine { position: static; transform: none; margin: 40px auto 0; }
  .hors-carte .actions .bouton { white-space: normal; text-align: center; }
  .hors-carte .actions kbd { display: none; }
  .cote { display: none; }
  .agrandir { right: 14px; bottom: 14px; }
  .compte div { min-width: 0; flex: 1; }
  .compte b { font-size: 30px; }
  .fiche-nom img { height: 50px; }
  .fiche-nom img.annee { height: 42px; }
  .fiche-nom img.variante { height: 44px; }
  .jauges div { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  .fiche-prix strong { font-size: 48px; }
  .bouton { padding: 0 22px; }
  .carte-format .prix { font-size: 40px; }
  .pied-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}