/* Rampe, « Atlas de nuit » (décisions de Flavien du 16/10/2026) : fond bleu nuit, lumière ambre pour les traits, les épingles,
   les chiffres et le bouton principal, un seul rouge, réservé aux problèmes (constats, écarts). Téléphone d'abord : les règles
   de base sont celles d'un écran étroit, l'ordinateur vient dans « min-width: 761px » (la même coupe que carte.js).
   Sans script : une page de nuit, le panneau au milieu, tout le contenu à plat.
   Avec carte.js (classe « carte » sur <html>) : la carte derrière, qui reste pendant les constats ; « revelation » pendant
   l'arrivée du résultat, « revele » une fois qu'elle a été jouée.
   Avec suite.js (classe « anime » sur <html>) : la suite de la page se trace au défilement. */
@font-face { font-family: "Source Serif 4"; src: url(/polices/source-serif-4.woff2) format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Overpass"; src: url(/polices/overpass.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --nuit: #070d1a; --ciel: #03060d; --surface: #0e1730; --surface-haute: #16234a; --filet: #24365a;
  --texte-clair: #e9eef7; --doux: #9db0cc; --ambre: #ffcf7a; --ambre-vif: #ffe0a6; --rouge: #ff4b3e;
  --lueur: 0 0 22px rgba(255, 207, 122, .28);
  --titre: "Source Serif 4", Georgia, serif; --texte: "Overpass", Verdana, sans-serif;
  --marge: clamp(16px, 4vw, 32px); --barre: 38px; --voie: 22px;
  --sortie: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--nuit); scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--nuit); color: var(--texte-clair); font: 400 1.0625rem/1.55 var(--texte); overflow-x: clip; }
h1, h2, h3, p, ol, ul { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: rgba(255, 207, 122, .7); }
a:hover { text-decoration-color: var(--ambre); }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; box-shadow: 0 0 0 5px var(--nuit); }
.evite { position: absolute; left: -999px; }
.evite:focus { left: 12px; top: 12px; background: var(--ambre); color: var(--nuit); padding: 10px 14px; z-index: 30; }
.annonce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.petit { font-size: .94em; color: var(--doux); }
.option { font-size: .86em; font-weight: 400; color: var(--doux); }

/* La barre des quatre maisons, commune aux sites d'Everywhere. */
.maisons { background: var(--ciel); color: var(--texte-clair); min-height: var(--barre); display: flex; align-items: center; justify-content: center; padding: 2px var(--marge); border-bottom: 1px solid var(--filet); }
.maisons ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; list-style: none; padding: 0; }
.maisons a { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 5px; font-size: 13px; line-height: 1; text-decoration: none; opacity: .82; }
.maisons a:hover, .maisons a[aria-current] { opacity: 1; }
.maisons img { height: 11px; width: auto; display: block; }
.maisons b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.maisons span { display: none; }
.maisons a[aria-current]::after { content: ""; position: absolute; left: 5px; right: 5px; bottom: 3px; height: 2px; background: var(--ambre); }

/* ---------- La scène ---------- */
.terrain { position: relative; }
.scene { position: relative; padding: clamp(20px, 5vh, 56px) var(--marge); }
.fond { display: none; }
.feuille { position: relative; margin-inline: auto; width: min(430px, 100%); background: var(--surface); border: 1px solid var(--filet); outline: 1px solid var(--filet); outline-offset: -6px; padding: 24px 20px 22px; }
.vue { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ciel); }
#carte { display: block; width: 100%; height: 100%; }
.echelle, .credit { position: absolute; right: 10px; margin: 0; background: rgba(7, 13, 26, .86); color: var(--doux); font-size: 12.5px; font-weight: 600; line-height: 1; padding: 6px 8px 5px; }
.credit { top: 10px; }
.echelle { top: 40px; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.echelle span { display: block; height: 6px; border: 1.5px solid var(--doux); border-top: 0; }
.echelle:has(b:empty) { visibility: hidden; }

.maison { font: 600 18px/1 var(--titre); letter-spacing: .01em; margin-bottom: 12px; color: var(--texte-clair); }
.maison span { font: 400 13px/1 var(--texte); letter-spacing: 0; margin-left: 4px; color: var(--doux); }
h1 { font: 600 clamp(26px, 3.2vw, 38px)/1.12 var(--titre); letter-spacing: -.012em; text-wrap: balance; overflow-wrap: anywhere; }
h1:focus { outline: 0; box-shadow: none; }
/* L'accueil : la première phrase du titre est gravée sur la carte (carte.js) ; dans la feuille, elle reste pour les lecteurs
   d'écran, et la seconde phrase fait le titre. */
.carte .grave { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.faits { margin-top: 10px; font-size: 16px; color: var(--doux); }
.erreur { margin-top: 16px; padding: 10px 14px; background: var(--surface-haute); border-left: 5px solid var(--rouge); font-weight: 700; }

/* Le formulaire. */
form { margin-top: 20px; display: grid; gap: 12px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
input:not([type=checkbox]) { font: 500 17px/1.2 var(--texte); color: var(--texte-clair); background: var(--nuit); border: 1px solid var(--filet); border-bottom: 2px solid var(--doux); padding: 12px 12px 9px; min-height: 48px; width: 100%; border-radius: 0; }
input:not([type=checkbox]):focus { border-bottom-color: var(--ambre); }
input::placeholder { color: var(--doux); opacity: .8; }
input[aria-invalid=true] { border-bottom: 4px solid var(--rouge); }
.coche { display: flex; gap: 12px; align-items: flex-start; }
.coche input { width: 24px; height: 24px; margin: 0; accent-color: var(--ambre); flex: none; }
.coche label { font-weight: 400; font-size: 15px; margin: 0; padding-top: 1px; }
/* Le bouton principal : la lumière, texte de nuit. */
button, .bouton { display: inline-block; width: 100%; min-height: 54px; padding: 16px 22px 14px; border: 0; border-radius: 0; background: var(--ambre); color: var(--nuit); font: 700 17px/1.3 var(--texte); letter-spacing: .01em; text-align: center; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .2s, background .2s; }
button:hover, .bouton:hover { background: var(--ambre-vif); box-shadow: var(--lueur); }
button:active, .bouton:active { transform: scale(.98); }
button[disabled] { opacity: .7; cursor: progress; }
.bouton.clair { width: auto; background: none; color: var(--texte-clair); border: 1.5px solid var(--ambre); }
.bouton.clair:hover { background: rgba(255, 207, 122, .1); }
.feuille > .petit { margin-top: 14px; }

/* Aide au remplissage : propositions du registre officiel sous le champ du nom (chercher.js). */
.recherche { position: relative; }
.propositions { list-style: none; margin: 4px 0 0; padding: 0; background: var(--surface-haute); border: 1.5px solid var(--filet); max-height: 300px; overflow: auto; }
.propositions li { padding: 10px 12px; min-height: 48px; cursor: pointer; display: grid; gap: 2px; }
.propositions li + li { border-top: 1px solid var(--filet); }
.propositions li span { font-size: .86em; color: var(--doux); }
.propositions li[aria-selected=true], .propositions li:hover { background: var(--nuit); outline: 2.5px solid var(--ambre); outline-offset: -2.5px; }
.propositions .aucun { min-height: 44px; align-content: center; font-size: .94em; text-decoration: underline; text-decoration-color: var(--ambre); }
.recherche .petit:empty { display: none; }
.recherche .petit { margin-top: 6px; }
.retenu { margin-top: 8px; padding: 10px 12px; background: var(--nuit); border-left: 3px solid var(--ambre); font-size: .9em; }
.retenu button { width: auto; min-height: 36px; margin: 6px 0 0; padding: 6px 10px; font: inherit; color: inherit; background: none; border: 1.5px solid var(--doux); }
.retenu button:hover { box-shadow: none; border-color: var(--ambre); }

/* L'attente : une ligne par source lue. */
.attente { width: min(360px, 100%); }
.feuille.attente { padding: 18px 20px 18px; }
.attente .maison { display: none; }
.qui { font-size: 24px; } .qui span { font: 400 16px/1.2 var(--texte); letter-spacing: 0; color: var(--doux); }
.attente .faits { font-size: 15.5px; margin-top: 8px; }
.etapes { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 7px; }
.etapes li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 9px; font-size: 14.5px; line-height: 1.2; }
.etapes svg { display: block; width: 22px; height: 22px; color: var(--ambre); }
.etapes em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--doux); }
.carte .etapes path { stroke-dasharray: .07 .05; transition: stroke-dasharray .8s ease-in-out; }
.carte .etapes li.lu path { stroke-dasharray: 1 0; }
.carte .etapes li:not(.lu) svg { opacity: .7; }
.carte .etapes li:not(.lu):not(.encours) { color: var(--doux); }
/* Une source lue quitte la liste : elle a maintenant sa pièce, posée sur la carte. */
.carte .etapes li.lu { display: none; }
.attente .bouton { margin-top: 16px; }
.carte .sans-script { display: none; }

/* Le cartouche : l'encadré de titre d'une carte imprimée, double filet, de nuit. */
.cartouche { width: min(400px, 100%); padding: 0; outline: 0; border: 0; }
.feuille.cartouche { padding: 0; }
.cadre { border: 1.5px solid var(--filet); padding: 5px; position: relative; }
.cadre::before { content: ""; position: absolute; inset: 4px; border: .75px solid var(--filet); pointer-events: none; }
.cadre > * { margin-inline: 20px; }
.lieu { padding-top: 16px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--doux); }
.cadre h1 { font-size: clamp(25px, 2.6vw, 30px); line-height: 1.1; margin-top: 2px; }
.releve-date { font-size: 14px; margin-top: 6px; overflow-wrap: anywhere; color: var(--doux); }
/* La note : un chiffre géant, en serif clair, dans la lumière. */
.note { margin-top: 10px; padding-block: 9px; border-block: .75px solid var(--filet); display: flex; align-items: baseline; gap: 12px; }
.note b { font: 300 64px/.9 var(--titre); letter-spacing: -.03em; color: var(--ambre); text-shadow: var(--lueur); font-variant-numeric: tabular-nums lining-nums; min-width: 1.15em; }
.note span { font-size: 17px; font-weight: 600; color: var(--doux); }
/* Les constats, en liste dans le cartouche : le rouge, ici, dit un problème. */
.apercu { list-style: none; padding: 0; margin-top: 12px; display: grid; gap: 6px; counter-reset: constat; }
.apercu li { counter-increment: constat; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.35; }
.apercu li::before { content: counter(constat); display: grid; place-content: center; width: 22px; height: 22px; margin-top: -1px; border: 1.5px solid var(--rouge); color: var(--rouge); font: 700 12.5px/1 var(--texte); padding-top: 2px; }
.apercu a { display: inline-block; padding-block: 4px; text-decoration-color: rgba(255, 75, 62, .6); }
.apercu a:hover { text-decoration-color: var(--rouge); }
.lecture { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--doux); }
.legende { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 8px; }
.legende li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.3; }
/* Le numéro d'épingle : la même lumière que les épingles de la carte. */
.legende i, .renvoi i { font: 700 13px/24px var(--texte); font-style: normal; width: 24px; height: 24px; text-align: center; border-radius: 50%; background: var(--ambre); color: var(--nuit); box-shadow: 0 0 10px rgba(255, 207, 122, .45); flex: none; }
.legende b { font-weight: 700; } .legende small { display: block; font-size: 14px; color: var(--doux); }
.sans { list-style: none; padding: 0; margin-top: 10px; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--doux); }
.repris { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--doux); }
.vers { margin-block: 14px 4px; }
/* « Revoir » : rejouer l'arrivée du résultat, une fois qu'elle est posée (carte.js). */
.revoir { display: block; width: auto; min-height: 44px; margin-top: 6px; padding: 10px 2px 8px; background: none; color: var(--ambre); font-size: 15px; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: rgba(255, 207, 122, .5); text-underline-offset: 4px; }
.revoir:hover { background: none; box-shadow: none; text-decoration-color: var(--ambre); }
.cadre > :last-child { margin-bottom: 22px; }

/* Le panneau qui change d'état (formulaire, attente, cartouche) : il n'est pas remplacé, il change de forme, et son titre
   glisse jusqu'à sa nouvelle place (carte.js, « muer »). */
#panneau { view-transition-name: feuille; } #panneau h1 { view-transition-name: titre; }
::view-transition-old(root) { display: none; } ::view-transition-new(root) { animation: none; }
::view-transition-group(feuille), ::view-transition-group(titre) { animation-duration: .7s; animation-timing-function: var(--sortie); }
::view-transition-group(feuille) { overflow: clip; }
::view-transition-old(feuille), ::view-transition-new(feuille) { height: 100%; object-fit: none; object-position: left top; animation-duration: .45s; }
::view-transition-old(titre), ::view-transition-new(titre) { height: 100%; object-fit: none; object-position: left top; animation-duration: .45s; }
@keyframes monte { from { opacity: 0; transform: translateY(28px); } }
@keyframes ouvre { 0% { clip-path: inset(0 0 100% 0); opacity: 0; } 12% { opacity: 1; } 44% { clip-path: inset(0 0 50% 0); } 58% { clip-path: inset(0 0 50% 0); } 100% { clip-path: inset(-12px); opacity: 1; } }
.carte .feuille.neuve { animation: monte .55s var(--sortie) both; }

/* ---------- Les constats : des fiches ; avec la carte, une seule à la fois, devant la carte qui va à son épingle ---------- */
.releve { max-width: 1120px; margin-inline: auto; padding: clamp(40px, 7vh, 72px) var(--marge) 0; }
.tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.tete h2 { font: 600 clamp(26px, 3.4vw, 40px)/1.1 var(--titre); letter-spacing: -.012em; }
.compte { display: none; }
.fiches { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 18px; max-width: 640px; }
.fiche { position: relative; background: var(--surface); border: 1px solid var(--filet); border-top: 3px solid var(--rouge); padding: 16px 20px 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.renvoi { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; line-height: 1.2; margin-bottom: 10px; color: var(--doux); }
.renvoi.hors i { background: none; border: 1.5px dashed var(--doux); box-shadow: none; }
.fiche h3 { font: 600 19.5px/1.2 var(--titre); }
.fiche h3 + p, .fiche p + p { margin-top: 6px; }
.source { font-size: .94em; color: var(--doux); }
/* Posé par carte.js sur chaque fiche : passer au constat suivant d'un appui. */
.suivant { margin-top: 14px; min-height: 48px; padding: 12px 18px 10px; font-size: 16px; }
.fiche .apres { margin-top: 12px; padding-top: 10px; border-top: .75px solid var(--filet); font-size: 16px; color: var(--doux); }

/* Les pièces du relevé, posées sur la carte : ce que chaque source a rendu, tel que nous l'avons lu. */
#pieces:empty { display: none; }
.pieces { list-style: none; margin: 22px auto 0; padding: 0; display: grid; gap: 10px; max-width: 640px; }
.piece { background: var(--surface); border: 1px solid var(--filet); padding: 11px 14px 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; transition: border-color .3s, box-shadow .3s; }
.piece p + p { margin-top: 3px; }
.p-tete { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding-bottom: 7px; margin-bottom: 8px; border-bottom: .75px solid var(--filet); font-size: 14.5px; }
.p-tete svg { display: block; color: var(--ambre); } .p-tete em { font-style: normal; font-weight: 600; color: var(--doux); }
.piece.manque .p-tete svg { color: var(--doux); }
.piece.manque .p-tete path { stroke-dasharray: .07 .05; } .piece.manque .p-tete em { padding: 2px 6px 1px; border: 1.5px dashed var(--doux); }
.p-fort { font: 600 18px/1.2 var(--titre); }
.p-mention { font-size: 14px; color: var(--doux); }
.piece .p-suite { margin-top: 8px; font-weight: 700; }
.piece .p-suite a { text-decoration-color: rgba(255, 75, 62, .7); }
.piece a { color: inherit; display: inline-block; padding-block: 3px; }
#pieces:focus-visible { outline: 3px solid var(--ambre); outline-offset: -3px; box-shadow: none; }
.fenetre { border: 1px solid var(--filet); margin-bottom: 8px; background: var(--nuit); overflow: hidden; }
.fenetre > p:first-child { display: flex; align-items: center; gap: 4px; padding: 5px 7px 4px; border-bottom: 1px solid var(--filet); font-size: 12.5px; line-height: 1; color: var(--doux); }
.fenetre i { width: 7px; height: 7px; border: 1.5px solid var(--doux); border-radius: 50%; } .fenetre span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fenetre img { display: block; width: 100%; height: auto; aspect-ratio: 1366 / 600; object-fit: cover; object-position: top; }
.p-vide { padding: 22px 10px; text-align: center; font-size: 14.5px; color: var(--doux); }
@keyframes pose { from { opacity: 0; transform: translateY(-16px) scale(1.04); } }
@keyframes revele { from { filter: brightness(2.2) contrast(.25) blur(2.5px); } 45% { filter: brightness(1.4) contrast(.6) blur(.6px); } }
@keyframes balaie { from { background-position: 0 100%; } to { background-position: 0 0; } }
/* Sur la carte, la ligne sous la capture cède sa place : l'adresse est dans la barre de la fenêtre, la date dans le cartouche.
   Sans script, à plat, elle reste. */
.carte .piece-site .fenetre + p { display: none; }
/* Sur téléphone, les pièces font une bande au-dessus du panneau ; la pièce du site vient en tête, sa capture sur toute la largeur. */
.carte #pieces { position: static; order: -1; width: 100%; max-height: none; padding: 0; margin-top: 21vh; margin-top: 21svh; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carte .pieces { display: flex; align-items: stretch; gap: 10px; width: max-content; max-width: none; margin: 0; padding: 6px 20px 14px; }
.carte .piece { flex: 0 0 min(78vw, 300px); scroll-snap-align: center; animation: pose .6s var(--sortie) .35s both; }
.carte .piece:nth-child(2) { animation-delay: .51s; } .carte .piece:nth-child(3) { animation-delay: .67s; } .carte .piece:nth-child(4) { animation-delay: .83s; }
.carte .piece-site { order: -1; } .carte .piece-site .fenetre img { aspect-ratio: 1366 / 430; }
/* Pendant l'attente, chaque pièce se pose à l'arrivée de sa source ; la capture du site vient comme une photo qui se développe. */
.carte .piece.arrive { animation-delay: 0s; }
.carte .piece.arrive .fenetre img { animation: revele 2.2s ease-out .5s both; }
/* La fenêtre du site, posée dès le début : une ligne de lumière la parcourt tant que la page est en cours de lecture. */
.carte .piece.encours .p-vide { background: linear-gradient(transparent 46%, rgba(255, 207, 122, .16) 50%, transparent 54%) 0 100% / 100% 300% no-repeat; animation: balaie 2.6s linear infinite; }

/* Une fois la révélation jouée, les pièces sont posées : elles ne rejouent pas leur entrée. */
.carte.revele .piece, .carte.revele .piece .fenetre img { animation: none; }

/* ---------- La révélation du résultat (carte.js, « reveler ») ----------
   Pendant « revelation » : le cartouche se retire, les pièces attendent leur tour ; la note se compte en grand sur la carte, se
   tamponne, se range ; chaque pièce s'ouvre à son tour (« ouverte », « courante » pour celle qu'on regarde). Avec « revele »,
   le cartouche revient et ses constats montent un à un. La mise en page ne bouge pas : rien n'est retiré du flux. */
html.revelation { scroll-padding-bottom: 80px; } /* « Passer », fixé en bas, ne cache rien de ce qui reçoit le focus */
.revelation .feuille { visibility: hidden; opacity: 0; }
.revelation .piece:not(.ouverte) { visibility: hidden; animation: none; }
@keyframes ouvre-piece { from { opacity: 0; transform: translateY(18px) scale(.96); } }
.revelation .piece.ouverte { animation: ouvre-piece .55s var(--sortie) both; }
.revelation .piece.courante { border-color: var(--ambre); box-shadow: 0 0 0 1px var(--ambre), 0 0 32px rgba(255, 207, 122, .3); }
@keyframes deroule { 0% { clip-path: inset(0 0 100% 0); object-position: 50% 0; } 35% { clip-path: inset(0); object-position: 50% 0; } 80% { object-position: 50% 100%; } 100% { clip-path: inset(0); object-position: 50% 0; } }
.revelation .piece-site.ouverte .fenetre img { animation: deroule 1.6s ease-in-out .15s both; }
@keyframes clignote { 50% { opacity: 0; } }
.revelation .piece.courante .p-adresse::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--ambre); animation: clignote .8s steps(1) infinite; }
@keyframes monte-cartouche { from { opacity: 0; transform: translateY(28px); } }
.revelation.revele .feuille { visibility: visible; opacity: 1; animation: monte-cartouche .6s var(--sortie) both; }
.revelation.revele .apercu li { animation: monte .45s var(--sortie) both; }
.revelation.revele .apercu li:nth-child(1) { animation-delay: .3s; } .revelation.revele .apercu li:nth-child(2) { animation-delay: .56s; }
.revelation.revele .apercu li:nth-child(3) { animation-delay: .82s; } .revelation.revele .apercu li:nth-child(4) { animation-delay: 1.08s; }
.revelation.revele .apercu li:nth-child(n+5) { animation-delay: 1.34s; }
/* La note en grand, au milieu de la carte libre (posée par carte.js à l'endroit de la porte) : un décor, muet. */
.grande-note { position: absolute; z-index: 2; left: 50%; top: 50%; margin: 0; display: flex; align-items: baseline; gap: .12em; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.92); transition: opacity .35s, transform .5s var(--sortie); }
.grande-note b { font: 300 clamp(112px, 34vw, 240px)/.85 var(--titre); letter-spacing: -.04em; color: var(--ambre); font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 0 40px rgba(255, 207, 122, .45), 0 2px 0 rgba(3, 6, 13, .6); }
.grande-note span { font: 600 clamp(17px, 4.6vw, 24px)/1 var(--texte); white-space: nowrap; color: var(--texte-clair); text-shadow: 0 1px 6px rgba(3, 6, 13, .9); }
.grande-note.vu { opacity: 1; transform: translate(-50%, -50%); }
@keyframes tampon { 0% { transform: translate(-50%, -50%) scale(1); } 35% { transform: translate(-50%, -50%) scale(1.18) rotate(-4deg); } 60% { transform: translate(-50%, -50%) scale(.94) rotate(0); } 100% { transform: translate(-50%, -50%); } }
@keyframes onde { from { opacity: .8; transform: translate(-50%, -50%) scale(.6); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
.grande-note.tamponne { animation: tampon .5s cubic-bezier(.3, 1.2, .5, 1) backwards; } /* backwards : « range » peut ensuite déplacer la note */
.grande-note.tamponne::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.4em; height: 1.4em; font-size: clamp(112px, 34vw, 240px); border: 2px solid var(--ambre); border-radius: 50%; animation: onde .7s ease-out both; }
.grande-note.range { opacity: 0; transform: translate(-50%, -80%) scale(.6); transition: opacity .25s, transform .3s ease-in; }
/* « Passer » : toujours à l'écran pendant la révélation. */
.passer { position: fixed; z-index: 20; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: auto; min-height: 48px; padding: 12px 26px 10px; background: rgba(7, 13, 26, .88); color: var(--texte-clair); border: 1.5px solid var(--ambre); font-size: 16px; backdrop-filter: blur(6px); }
.passer:hover { background: var(--surface-haute); }
.passer:active { transform: translateX(-50%) scale(.98); }

.carte .releve { position: relative; max-width: none; margin: 0; padding: 0; height: calc(100vh + var(--n, 1) * 78vh); height: calc(100svh + var(--n, 1) * 78svh); pointer-events: none; }
.carte .plateau { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.carte .plateau > * { pointer-events: auto; width: 100%; }
.carte .tete { align-items: center; background: var(--ciel); color: var(--texte-clair); padding: 11px 20px 9px; border-top: 1px solid var(--filet); }
.carte .tete h2 { font-size: 17px; letter-spacing: 0; }
.carte .compte { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--doux); }
.carte .compte b { color: var(--rouge); }
.carte .fiches { margin: 0; gap: 0; max-width: none; grid-template: auto / minmax(0, 1fr); }
.carte .fiche { grid-area: 1 / 1; align-self: stretch; min-height: 34vh; border-inline: 0; border-bottom: 0; box-shadow: none; padding: 16px 20px 22px; opacity: 0; transform: translateY(22px); transition: opacity .3s, transform .55s var(--sortie); }
.carte .fiche.active { opacity: 1; transform: none; z-index: 1; }

/* Le bord bas de la carte : ce qui n'a pas été lu, les sources, comme les mentions d'une carte imprimée. */
.reserve { position: relative; background: var(--nuit); border-top: 1px solid var(--filet); padding: 0 var(--marge) 8px; }
.reserve::before { content: ""; position: absolute; inset: 4px 0 auto; height: 12px; border-top: .75px solid var(--filet); opacity: .9;
  background: repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 50px) top / 100% 12px no-repeat, repeating-linear-gradient(90deg, var(--filet) 0 1px, transparent 1px 10px) top / 100% 6px no-repeat; }
.dans { max-width: 1120px; margin-inline: auto; padding: 40px 0 0 var(--voie); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px clamp(24px, 4vw, 56px); align-items: start; }
.dans > div { display: grid; gap: 10px; justify-items: start; }
.dans h3 { font: 600 22px/1.2 var(--titre); }
.dans ul { padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- Sous la carte : la suite de l'atlas, de nuit ---------- */
#suite { position: relative; overflow: clip; background: radial-gradient(120% 60% at 80% 0, rgba(36, 54, 90, .35), transparent 70%), var(--nuit); padding-bottom: clamp(64px, 12vh, 128px); --fil: 1; }
/* La route dans la marge, que la lumière descend avec le défilement, et la règle graduée du bord. */
.route { position: absolute; top: 0; bottom: 0; left: 8px; width: 7px; background: var(--surface-haute); box-shadow: 0 0 0 1px var(--filet); }
.route i { position: absolute; inset: 0 2.5px; background: var(--ambre); box-shadow: 0 0 10px rgba(255, 207, 122, .6); transform-origin: top; transform: scaleY(var(--fil)); }
#suite::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 7px; pointer-events: none; opacity: .9;
  background: repeating-linear-gradient(var(--filet) 0 1px, transparent 1px 50px) right / 7px 100% no-repeat, repeating-linear-gradient(var(--filet) 0 1px, transparent 1px 10px) right / 4px 100% no-repeat; }

.bande { position: relative; max-width: 1120px; margin-inline: auto; padding: clamp(64px, 12vh, 128px) calc(var(--marge) + 4px) 0 calc(var(--marge) + var(--voie)); }
/* Le pli entre deux sections : un filet, et une ombre courte. */
.bande::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 44px; transform: translateX(-50%); pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .25), transparent); border-top: 1px solid var(--filet); }
.bande:first-of-type::before { height: 0; border-top: 0; }
/* Le repère de la section, comme dans la marge d'un plan. */
.bande::after { content: attr(data-repere) / ""; position: absolute; top: calc(clamp(64px, 12vh, 128px) - 40px); right: var(--marge); width: 26px; height: 26px; display: grid; place-content: center; border: 1px solid var(--filet); color: var(--doux); font: 700 13px/1 var(--texte); padding-top: 2px; }
.bande h2 { position: relative; font: 600 clamp(30px, 4.6vw, 60px)/1.04 var(--titre); letter-spacing: -.02em; text-wrap: balance; max-width: 18ch; }
/* La rue qui part de la route vers le titre, allumée. */
.bande h2::before, .bande h2::after { content: ""; position: absolute; top: .52em; right: calc(100% + 4px); width: calc(var(--marge) + var(--voie) - 19px); }
.bande h2::before { height: 7px; margin-top: -3.5px; background: var(--surface-haute); box-shadow: 0 0 0 1px var(--filet); }
.bande h2::after { height: 2px; margin-top: -1px; background: var(--ambre); box-shadow: 0 0 8px rgba(255, 207, 122, .6); transform-origin: left; }
.bande h3 { font: 700 1.05em/1.3 var(--texte); }
.chapo { margin-top: 16px; max-width: 58ch; font-size: 1.08em; color: var(--doux); }

/* La légende : les signes des quatre sources, puis la zone non relevée, en hachures. */
.signes { list-style: none; padding: 0; }
.signes li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: .75px solid var(--filet); }
.signes svg { display: block; width: 40px; height: 40px; color: var(--ambre); }
.signes b { display: block; font-size: 1.05em; }
.blanc { position: relative; padding: 24px 16px;
  clip-path: polygon(0 3%, 9% 0, 34% 2.5%, 58% 0, 83% 3%, 100% 1%, 98% 22%, 100% 47%, 97.5% 71%, 100% 96%, 78% 100%, 52% 97.5%, 27% 100%, 3% 98%, 1.5% 74%, 0 50%, 2% 26%);
  background: repeating-linear-gradient(-45deg, rgba(157, 176, 204, .32) 0 1px, transparent 1px 9px), var(--surface); }
.blanc li, .blanc .petit { background: var(--nuit); padding: 5px 9px 4px; }
.blanc ul { list-style: none; padding: 0; display: grid; gap: 8px; justify-items: start; }
.blanc li { line-height: 1.5; }
.blanc .petit { margin-top: 16px; color: var(--texte-clair); }

/* Les prix : quatre feuilles pliées, de nuit ; le prix en chiffres géants, dans la lumière. */
.feuilles { list-style: none; padding: 0; margin-top: clamp(28px, 5vh, 52px); display: grid; gap: 20px; }
.pli { position: relative; border: 1px solid var(--filet); padding: 18px 16px; background-color: var(--surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
  background-image: linear-gradient(transparent calc(50% - 1px), rgba(157, 176, 204, .16) 50%, rgba(157, 176, 204, .04) calc(50% + 1px), transparent calc(50% + 14px)); }
.pli:nth-child(odd) { margin-right: 10px; } .pli:nth-child(even) { margin-left: 10px; }
.ligne { display: flex; align-items: baseline; gap: 8px; }
.ligne h3 { font: 600 clamp(22px, 2.6vw, 30px)/1.15 var(--titre); min-width: 0; }
.points { flex: 1; min-width: 20px; align-self: flex-end; margin-bottom: .55em; border-bottom: 2px dotted var(--filet); transform-origin: left; }
.tarif { white-space: nowrap; text-align: right; }
.tarif b { font: 300 clamp(42px, 6.2vw, 76px)/.86 var(--titre); letter-spacing: -.025em; color: var(--ambre); text-shadow: 0 0 24px rgba(255, 207, 122, .25); font-variant-numeric: lining-nums; }
.tarif span { display: block; margin: 4px 0 0; font-size: 13.5px; font-weight: 600; color: var(--doux); }
.pli > p { margin-top: 10px; max-width: 60ch; }
.pli.fermee { background-color: transparent; border-style: dashed; box-shadow: none; }
.pli.fermee .tarif b { color: var(--doux); text-shadow: none; }
.pli > .etat { display: inline-block; margin-top: 8px; padding: 5px 8px 4px; border: 1.5px dashed var(--doux); color: var(--doux); font: 700 13px/1 var(--texte); }
.demander a { display: inline-block; padding: 8px 0 6px; font-weight: 700; color: var(--ambre); text-decoration-thickness: 2px; }
.prix > .petit { margin-top: 22px; }

/* Les questions : l'index du plan, chaque question à sa case, qui s'allume quand elle est ouverte. */
.questions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.q-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.quadrillage { margin: 0 34px 0 0; width: 116px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--filet); }
.quadrillage i { aspect-ratio: 1; display: grid; place-content: center; border: .5px solid var(--filet); font: 600 9.5px/1 var(--texte); font-style: normal; color: var(--doux); transition: background .25s, color .25s, box-shadow .25s; }
.questions:has([data-case="A1"][open]) i[data-case="A1"], .questions:has([data-case="C1"][open]) i[data-case="C1"], .questions:has([data-case="B2"][open]) i[data-case="B2"],
.questions:has([data-case="D2"][open]) i[data-case="D2"], .questions:has([data-case="C3"][open]) i[data-case="C3"],
.questions:has([data-case="A2"][open]) i[data-case="A2"], .questions:has([data-case="D3"][open]) i[data-case="D3"] { background: var(--ambre); color: var(--nuit); box-shadow: 0 0 14px rgba(255, 207, 122, .5); }
details { border-bottom: .75px solid var(--filet); }
details:first-child { border-top: 1px solid var(--filet); }
summary { list-style: none; cursor: pointer; padding: 19px 44px 17px 48px; position: relative; font: 600 clamp(19px, 2vw, 23px)/1.25 var(--titre); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+" / ""; position: absolute; right: 6px; top: 13px; font: 400 28px/1 var(--texte); color: var(--ambre); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
.case { position: absolute; left: 0; top: 18px; min-width: 36px; padding: 6px 6px 4px; border: 1px solid var(--filet); color: var(--doux); font: 700 13px/1 var(--texte); text-align: center; }
details[open] .case { background: var(--ambre); border-color: var(--ambre); color: var(--nuit); }
details > p, details > ul, details > div { margin: 0 0 22px; max-width: 66ch; }
details > p { color: var(--doux); }

/* ---------- Le bas de page : la carte de nuit, plus profonde encore ---------- */
.pied { position: relative; overflow: hidden; background: var(--ciel); color: var(--texte-clair); padding: min(96vw, 420px) var(--marge) 0; font-size: 16px; border-top: 1px solid var(--filet); }
.nuit { position: absolute; top: 18px; right: 4vw; width: 92vw; max-width: 600px; pointer-events: none; }
.nuit svg { display: block; width: 100%; height: auto; overflow: visible; }
.canevas path { fill: none; stroke: rgba(157, 176, 204, .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.nuit text { fill: rgba(157, 176, 204, .5); font: 600 17px var(--texte); }
.contour { fill: rgba(255, 207, 122, .04); stroke: var(--ambre); stroke-opacity: .85; stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pied-g { position: relative; max-width: 1120px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.appel { grid-column: 1 / -1; margin-bottom: 12px; }
.pied .maison { margin-bottom: 12px; } .pied p + p { margin-top: 10px; }
.appel p { max-width: 36ch; }
.pied .tel { margin-top: 18px; }
.tel a { display: inline-block; padding: 6px 0; font: 300 clamp(34px, 9vw, 68px)/1 var(--titre); letter-spacing: -.02em; color: var(--ambre); font-variant-numeric: lining-nums; white-space: nowrap; text-decoration: none; }
.tel a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.pied h2 { font: 700 14px/1.2 var(--texte); margin-bottom: 10px; color: var(--doux); }
.pied ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.pied li a, .pied li span { display: inline-block; padding: 4px 0; }
.pied-bas { position: relative; max-width: 1120px; margin: 32px auto 0; padding-top: 16px; border-top: .75px solid var(--filet); color: var(--doux); }
/* Les quatre maisons, posées sur la carte de nuit. */
.maisons-nuit { position: relative; max-width: 1120px; margin: clamp(32px, 6vh, 64px) auto 0; }
.maisons-nuit ul { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.maisons-nuit li a { position: relative; display: grid; gap: 12px; align-content: start; height: 100%; min-height: 104px; padding: 18px 16px 14px; border: 1px solid var(--filet); background: rgba(14, 23, 48, .8); text-decoration: none; transition: border-color .2s, transform .25s var(--sortie); }
@media (hover: hover) { .maisons-nuit li a:hover { border-color: var(--ambre); transform: translateY(-3px); } }
.maisons-nuit li a[aria-current] { border-color: var(--ambre); box-shadow: inset 0 -3px 0 var(--ambre); }
.maisons-nuit img { height: 15px; width: auto; max-width: 100%; display: block; object-fit: contain; object-position: left; }
.maisons-nuit b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.maisons-nuit li span { padding: 0; line-height: 1.35; color: var(--doux); }
.maisons-nuit em { position: absolute; top: 8px; right: 10px; font: 600 12.5px/1 var(--texte); font-style: normal; color: var(--ambre); }
/* Le nom en enseigne, coupé par le bas de la page. */
.enseigne { position: relative; height: .58em; margin: clamp(28px, 6vh, 64px) 0 0; overflow: hidden; font: 600 clamp(92px, 29vw, 440px)/.8 var(--titre); letter-spacing: -.04em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 207, 122, .4); user-select: none; }

/* ---------- Les pages légales : le même habillage, sans la carte ---------- */
.haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1120px; margin-inline: auto; padding: 14px var(--marge); }
.haut .maison { margin: 0; text-decoration: none; white-space: nowrap; }
.haut .bouton { width: auto; min-height: 44px; padding: 11px 14px 9px; font-size: 14.5px; white-space: nowrap; }
@media (max-width: 420px) { .haut .maison span { display: none; } }
.texte { max-width: 70ch; margin-inline: auto; padding: clamp(32px, 7vh, 72px) var(--marge) clamp(56px, 10vh, 112px); }
.texte h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.08; }
.texte h2 { margin-top: 2.2em; padding-top: .7em; border-top: 1px solid var(--filet); font: 600 clamp(21px, 2.4vw, 26px)/1.2 var(--titre); }
.texte p, .texte ul { margin-top: .9em; }
.texte ul { padding-left: 1.2em; display: grid; gap: .4em; }
.texte li::marker { color: var(--ambre); }
.texte a { color: var(--ambre); text-decoration-color: rgba(255, 207, 122, .5); overflow-wrap: anywhere; }
.texte a:hover { text-decoration-color: var(--ambre); }
.meta { margin-top: 12px; font-size: 14.5px; color: var(--doux); }

/* ---------- Le mouvement de la suite (suite.js pose « anime », puis « vu » sur ce qui entre à l'écran) ---------- */
.anime .bande > h2, .anime .q-tete > h2, .anime .chapo { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .8s var(--sortie); }
.anime .vu > h2, .anime .vu .q-tete > h2, .anime .vu > .chapo { opacity: 1; transform: none; }
.anime .vu > .chapo { transition-delay: .12s; }
.anime .bande h2::after { transform: scaleX(0); transition: transform .7s var(--sortie) .1s; }
.anime .bande.vu h2::after { transform: none; }
.anime .bande::after { opacity: 0; transition: opacity .4s .5s; } .anime .bande.vu::after { opacity: 1; }
/* La légende se trace à la lumière, signe après signe. */
@keyframes trace { from { stroke-dashoffset: 1; } }
.anime details[open] .signes path { stroke-dasharray: 1; animation: trace 1.1s ease-in-out both; }
.anime .signes li:nth-child(2) path { animation-delay: .2s; } .anime .signes li:nth-child(3) path { animation-delay: .4s; } .anime .signes li:nth-child(4) path { animation-delay: .6s; }
/* Chaque feuille de prix se déplie (en deux volets sur téléphone, en trois sur ordinateur), puis ses points courent jusqu'au prix. */
@keyframes deplie { 0% { clip-path: inset(0 -10px 50% 0); opacity: 0; } 15% { opacity: 1; } 100% { clip-path: inset(0 -10px -10px 0); opacity: 1; } }
.anime .pli { opacity: 0; }
.anime .pli.vu { opacity: 1; animation: deplie 1.05s var(--sortie) both; }
.anime .points { transform: scaleX(0); transition: transform .7s ease-out .8s; }
.anime .tarif { opacity: 0; transition: opacity .4s 1.2s; }
.anime .pli.vu .points { transform: none; } .anime .pli.vu .tarif { opacity: 1; }
.anime .reponses { opacity: 0; transform: translateY(24px); transition: opacity .6s .15s, transform .8s var(--sortie) .15s; }
.anime .quadrillage { opacity: 0; transition: opacity .6s .4s; }
.anime .vu .reponses, .anime .vu .quadrillage { opacity: 1; transform: none; }
/* La France se trace dans la nuit. */
.anime .contour { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 3.4s ease-in-out .2s, fill-opacity 1.2s 2.6s; }
.anime .pied.vu .contour { stroke-dashoffset: 0; fill-opacity: 1; }
.anime .canevas, .anime .nuit text { opacity: 0; transition: opacity 1.2s; } .anime .pied.vu .canevas, .anime .pied.vu .nuit text { opacity: 1; }
.anime .enseigne { transform: translateY(38%); transition: transform 1.4s var(--sortie) .3s; } .anime .pied.vu .enseigne { transform: none; }
@supports (interpolate-size: allow-keywords) {
  .anime details { interpolate-size: allow-keywords; }
  .anime details::details-content { block-size: 0; overflow: clip; transition: block-size .35s var(--sortie), content-visibility .35s allow-discrete; }
  .anime details[open]::details-content { block-size: auto; }
}

/* ---------- Téléphone, avec la carte : la scène ---------- */
@media (max-width: 760px) {
  .carte .scene { min-height: 100vh; min-height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: flex-end; }
  .carte .fond { display: block; position: absolute; inset: 0; }
  .carte .feuille { width: 100%; margin: 42vh 0 0; margin-top: 42svh; border-width: 1px 0 0; outline-offset: -5px; background: rgba(14, 23, 48, .96); }
  .carte .scene:has(#pieces:not(:empty)) .feuille { margin-top: 0; }
  /* Pendant l'attente, le panneau reste entier à l'écran : la scène commence sous la barre des maisons. */
  .carte .scene[data-etat=attente]:has(#pieces:not(:empty)) .feuille { margin-bottom: var(--barre); }
  /* La feuille monte d'un bloc, sous le ciel encore sombre, une fois par visite (« revu »). */
  .carte:not(.revu) .scene[data-etat=formulaire] .feuille { animation: monte .7s var(--sortie) .1s both; }
  /* Pendant la saisie, une bande de carte reste en haut de l'écran (carte.js, « bande ») : un champ amené à l'écran s'arrête dessous. */
  .carte:has(.scene[data-etat=formulaire]) { scroll-padding-top: 148px; }
  .carte .scene[data-etat=formulaire] .recherche { scroll-margin-top: 148px; }
  .carte .cadre { border-width: 1px 0 0; padding: 5px 0 0; } .carte .cadre::before { inset: 4px 0 auto; height: 0; border-width: .75px 0 0; }
  /* La note en grand : sous la bande des pièces, dans le bas de la carte, que le cartouche a laissé libre. */
  .grande-note { left: 50% !important; top: 62% !important; }
}

/* ---------- Ordinateur ---------- */
@media (min-width: 761px) {
  :root { --voie: clamp(44px, 7vw, 96px); }
  .maisons { justify-content: flex-end; } .maisons ul { gap: 2px 10px; } .maisons span { display: inline; } .maisons img { height: 14px; } .maisons a { padding: 9px 8px; }
  .maisons a[aria-current]::after { left: 8px; right: 8px; }
  .feuille { padding: 34px 32px 28px; }
  .feuille.attente { padding: 26px 26px 22px; }
  .feuille.cartouche { padding: 0; }
  .maison { font-size: 21px; margin-bottom: 24px; }
  .attente .maison { display: block; margin-bottom: 16px; }
  .faits { margin-top: 14px; }
  .etapes { gap: 9px; } .etapes li { grid-template-columns: 24px 1fr auto; gap: 10px; font-size: 15px; line-height: 1.5; } .etapes svg { width: 24px; height: 24px; }
  .cadre > * { margin-inline: 24px; } .lieu { padding-top: 22px; }
  .note { margin-top: 14px; padding-block: 12px; } .note b { font-size: 84px; }
  .echelle, .credit { right: var(--marge); } .credit { top: auto; bottom: var(--marge); } .echelle { top: auto; bottom: calc(var(--marge) + 32px); }
  .fiche { padding: 18px 22px 16px; } .fiche h3 { font-size: 23px; }

  .carte .scene { min-height: 100vh; min-height: 100svh; padding: var(--marge); display: flex; align-items: flex-start; }
  .carte .fond { display: block; position: absolute; inset: 0; }
  .carte .feuille { margin: 0; background: rgba(14, 23, 48, .94); backdrop-filter: blur(4px); }
  .carte:not(.revu) .scene[data-etat=formulaire] .feuille { animation: ouvre 1s var(--sortie) .6s both; }
  /* La note en grand : au-dessus de la porte, qu'elle laisse voir. */
  .grande-note, .grande-note.vu { transform: translate(-50%, calc(-100% - 64px)); }
  .grande-note:not(.vu) { transform: translate(-50%, calc(-100% - 64px)) scale(.92); }
  .grande-note.range { transform: translate(-50%, calc(-100% - 120px)) scale(.6); }
  @keyframes tampon { 0% { transform: translate(-50%, calc(-100% - 64px)); } 35% { transform: translate(-50%, calc(-100% - 64px)) scale(1.18) rotate(-4deg); } 60% { transform: translate(-50%, calc(-100% - 64px)) scale(.94); } 100% { transform: translate(-50%, calc(-100% - 64px)); } }
  .passer { bottom: 28px; }

  .carte #pieces { position: absolute; z-index: 1; order: 0; top: var(--marge); right: var(--marge); width: clamp(240px, 23vw, 310px); margin: 0; max-height: calc(100vh - 2 * var(--marge)); max-height: calc(100svh - 2 * var(--marge)); overflow: auto; scroll-snap-type: none; scrollbar-width: thin; scrollbar-color: var(--filet) transparent; padding: 4px 8px 8px 4px; }
  .carte .pieces { display: grid; width: auto; padding: 0; }
  .carte .piece { font-size: 14.5px; line-height: 1.35; }
  .carte .piece-site { order: 0; } .carte .piece-site .fenetre img { aspect-ratio: 1366 / 600; }
  /* La place des pièces est comptée dès le début de l'attente : la carte ne se recadre pas à la première. */
  .carte .scene[data-etat=attente] #pieces:empty { display: block; }

  .carte .plateau { padding: var(--marge); align-items: flex-start; justify-content: flex-start; }
  .carte .plateau > * { width: min(440px, 100%); }
  .carte .tete { padding: 13px 20px 11px; border: 1px solid var(--filet); border-bottom: 0; }
  .carte .tete h2 { font-size: 19px; }
  .carte .fiche { align-self: start; min-height: 0; border: 1px solid var(--filet); border-top: 3px solid var(--rouge); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); padding: 18px 22px 16px; transform: translateY(26px); }
  .carte .fiche.passee { transform: translateY(-22px); }
  .carte .fiche.active { transform: none; }

  .route { left: max(var(--marge), calc(50% - 560px + var(--marge))); width: 9px; } .route i { inset: 0 3.5px; }
  #suite::after { width: 12px; background-size: 12px 100%, 6px 100%; }
  .bande { padding-right: var(--marge); }
  .bande::after { top: calc(clamp(64px, 12vh, 128px) - 50px); width: 30px; height: 30px; font-size: 14px; }
  .bande h2::before, .bande h2::after { right: calc(100% + 14px); width: calc(var(--voie) - 23px); }
  .bande h2::before { height: 9px; margin-top: -4.5px; }
  .signes li { grid-template-columns: 48px 1fr; gap: clamp(14px, 2.4vw, 26px); } .signes svg { width: 48px; height: 48px; }
  .blanc { padding: 30px 26px; }
  .pli { padding: 22px clamp(18px, 3vw, 36px);
    background-image: linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(157, 176, 204, .16) 33.33%, rgba(157, 176, 204, .04) calc(33.33% + 1px), transparent calc(33.33% + 16px)), linear-gradient(90deg, transparent calc(66.66% - 16px), rgba(157, 176, 204, .04) calc(66.66% - 1px), rgba(157, 176, 204, .16) 66.66%, transparent calc(66.66% + 1px)); }
  .pli:nth-child(odd) { margin-right: clamp(0px, 7vw, 96px); } .pli:nth-child(even) { margin-left: clamp(0px, 7vw, 96px); }
  .ligne { gap: 12px; } .tarif { text-align: left; } .tarif span { display: inline; margin: 0 0 0 6px; font-size: 15px; }
  @keyframes deplie { 0% { clip-path: inset(0 66.67% -10px 0); opacity: 0; } 12% { opacity: 1; } 42% { clip-path: inset(0 33.33% -10px 0); } 58% { clip-path: inset(0 33.33% -10px 0); } 100% { clip-path: inset(0 -10px -10px 0); opacity: 1; } }
  .questions { grid-template-columns: minmax(200px, 1fr) 2fr; gap: 24px clamp(28px, 5vw, 72px); }
  .q-tete { display: block; align-self: start; position: sticky; top: 24px; }
  .quadrillage { margin: 22px 0 0; width: 172px; } .quadrillage i { font-size: 11.5px; }
  summary { padding-left: 56px; } .case { min-width: 38px; }
  details > p, details > ul, details > div { margin-left: 56px; }
  .pied { padding-top: clamp(56px, 10vh, 112px); }
  .nuit { top: clamp(20px, 4vh, 48px); right: max(-40px, calc(50% - 640px)); width: min(600px, 46vw); }
  .pied-g { padding-right: min(40%, 470px); }
  .maisons-nuit ul { grid-template-columns: repeat(4, 1fr); } .maisons-nuit img { height: 20px; }
}
/* Écran bas (portable) : la colonne des pièces se resserre pour que les quatre tiennent sans défiler. */
@media (max-height: 820px) and (min-width: 761px) {
  .carte .scene #pieces { width: clamp(260px, 27vw, 350px); }
  .fenetre img, .carte .piece-site .fenetre img { aspect-ratio: 1366 / 420; } .carte .pieces { gap: 7px; }
  .carte .piece { font-size: 13.5px; line-height: 1.3; padding: 8px 12px 9px; } .carte .piece p + p { margin-top: 2px; }
  .carte .p-tete { padding-bottom: 5px; margin-bottom: 6px; font-size: 13.5px; } .carte .p-fort { font-size: 16px; }
  .carte .fenetre { margin-bottom: 6px; } .carte .piece .p-suite { margin-top: 4px; } .carte .piece a { padding-block: 3px; }
}
@media (max-height: 760px) and (min-width: 761px) { .carte .fenetre img, .carte .piece-site .fenetre img { aspect-ratio: 1366 / 330; } }
@media (max-width: 350px) {
  .maisons { padding-inline: 6px; } .maisons ul { flex-wrap: nowrap; gap: 0 2px; } .maisons a { padding: 12px 4px; } .maisons img { height: 9px; }
  .quadrillage { width: 92px; margin-right: 30px; } .quadrillage i { font-size: 8px; }
  .feuille > h1 { font-size: 23px; }
}
/* « Réduire les animations » : tout est posé. carte.js ne joue pas la révélation ; suite.js ne pose pas « anime ». */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}