/* =============================================================
   PRISON ISLAND — BASE, STRUCTURE, UTILITAIRES, COMPOSANTS
   Nomenclature Client-First. Underscore pour les classes custom,
   tiret pour les utilitaires. Aucune valeur brute : tout vient de tokens.css.
   ============================================================= */

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-color-primary);
  background-color: var(--background-color-primary);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
figure, figcaption, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 {
  /* Vitesse Medium : le slab a assez de présence, le gras l'alourdit. */
  font-family: var(--font-family-titre); font-weight: 500; line-height: 1.14;
  margin: 0; text-wrap: balance;
}
h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -.01em; }
/* Sous-hierarchie. Mesure au navigateur a 1440 : corps 17 px, h3 entre 16 et
   26 px selon le bloc. Deux h3 rendaient a 16 px, soit PLUS PETIT que le texte
   courant, et le gros du reste a 20 px — un rapport de 1,18 au corps, qui ne
   se voit pas. Les h3 remontent a 1.375rem (rapport 1,29) et les intitules
   d'horaires a 1.125rem : un sous-titre doit se lire comme un titre.
   Le saut h2 -> h1 valait deja 1,7, il ne bouge pas. */
h3 { font-size: 1.375rem; }
p { margin: 0; text-wrap: pretty; }
strong { font-weight: 500; }
:focus-visible { outline: 3px solid var(--base-color-ambre-500); outline-offset: 3px; border-radius: 2px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
body:has(dialog[open]) { overflow: hidden; }

/* Lien d'évitement : première tabulation de la page */
.lien-evitement {
  position: absolute; left: var(--espace-4); top: var(--espace-4); z-index: var(--z-index-modal);
  transform: translateY(-200%); transition: transform var(--duration-rapide) ease;
}
.lien-evitement:focus { transform: none; }

/* ---------- 2. Structure Client-First ---------- */
/* overflow-x: clip et non hidden : clip ne crée pas de conteneur de défilement,
   donc l'en-tête collé et les animations pilotées par le scroll continuent de
   fonctionner. C'est ce qui contient le débord du bandeau incliné. */
.page-wrapper { position: relative; overflow-x: clip; }
.main-wrapper { display: block; }
.padding-global { padding-left: var(--espace-5); padding-right: var(--espace-5); }
.padding-section-small { padding-top: var(--espace-10); padding-bottom: var(--espace-10); }
.padding-section-medium { padding-top: var(--espace-12); padding-bottom: var(--espace-12); }
.padding-section-large { padding-top: var(--espace-16); padding-bottom: var(--espace-16); }
.container-large { width: 100%; max-width: var(--container-large); margin-inline: auto; }
.container-medium { width: 100%; max-width: var(--container-medium); margin-inline: auto; }
.container-small { width: 100%; max-width: var(--container-small); margin-inline: auto; }
@media (min-width: 48rem) {
  .padding-global { padding-left: var(--espace-10); padding-right: var(--espace-10); }
}
@media (min-width: 64rem) {
  .padding-global { padding-left: var(--espace-16); padding-right: var(--espace-16); }
  .padding-section-medium { padding-top: var(--espace-16); padding-bottom: var(--espace-16); }
  .padding-section-large { padding-top: var(--espace-20); padding-bottom: var(--espace-20); }
}

/* ---------- 3. Utilitaires ---------- */
.text-color-brand { color: var(--text-color-brand); }
.text-color-brand-strong { color: var(--text-color-brand-strong); }
.text-size-small { font-size: .875rem; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: var(--cible-tactile); padding: var(--espace-3) var(--espace-6);
  border: 0; border-radius: 999px;
  background: var(--button-color-background); color: var(--button-color-text);
  font-family: var(--font-family-titre); font-weight: 500; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .28);
  transition: background-color var(--duration-rapide) ease, transform var(--duration-rapide) var(--easing-sortie);
}
.button:hover { background: var(--button-color-background-hover); }
.button:active { transform: translateY(1px); box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .28); }
.button.is-secondary { background: transparent; color: inherit; border: 1px solid currentColor; box-shadow: none; }
.button.is-secondary:hover { background: rgba(127, 127, 127, .12); }
.button.is-small { padding: var(--espace-2) var(--espace-5); font-size: .9375rem; }
.button.is-large { min-height: 3.5rem; padding: var(--espace-4) var(--espace-8); font-size: 1.125rem; }

/* Éclat géométrique de la maquette, posé à côté des titres */
.eclat { width: 1.375rem; height: 1.375rem; color: var(--base-color-orange-500); flex: none; }

/* Textures partagées du gabarit : zéro image, zéro requête, aucun média de ville */
/* Textures de marque, fournies par la DA.
   Chaque section choisit sa texture par --texture-sombre : pour en ajouter une,
   il suffit de déposer le fichier dans medias/ et de surcharger la variable.
   Tant qu'il n'y en a qu'une, l'échelle, le cadrage et l'orientation varient
   d'une section à l'autre pour que le motif ne se répète pas à l'identique. */
.fond_grillage {
  position: absolute; inset: 0; pointer-events: none; z-index: var(--z-index-fond);
  background-image: var(--texture-sombre, image-set(url("../medias/fond-grillage-1600.webp") 1x, url("../medias/fond-grillage-2400.webp") 2x));
  background-size: var(--texture-taille, cover);
  background-position: var(--texture-position, center);
  transform: var(--texture-orientation, none);
  opacity: var(--texture-opacite, 1);
}
/* Variation par section : même fichier, cadrage différent. */
.section_concept { --texture-position: 20% 30%; --texture-taille: 140%; --texture-opacite: .85; }
.section_cellules { --texture-position: 70% 60%; --texture-taille: 115%; }
.section_avis { --texture-position: 30% 80%; --texture-taille: 130%; --texture-orientation: scaleX(-1); --texture-opacite: .8; }
.infos_fiche { --texture-position: 85% 20%; --texture-taille: 160%; --texture-opacite: .7; }
.footer { --texture-position: 50% 100%; --texture-taille: 120%; --texture-opacite: .6; }
/* Sur une section très haute, la texture est répétée verticalement plutôt qu'étirée */
.section_cellules > .fond_grillage, .footer > .fond_grillage {
  background-size: 100% auto; background-repeat: repeat-y;
}
.hero_fond .fond_grillage { opacity: .22; }
.fond_halo {
  position: absolute; inset: 0; pointer-events: none; z-index: var(--z-index-fond);
  background: radial-gradient(ellipse 60% 50% at var(--halo-x, 70%) var(--halo-y, 40%), rgba(232, 88, 43, .22), transparent 70%);
}
.fond_grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: var(--z-index-fond);
  background-image: var(--texture-claire, image-set(url("../medias/fond-sable-1600.webp") 1x, url("../medias/fond-sable-2400.webp") 2x));
  background-size: var(--texture-taille, cover);
  background-position: var(--texture-position, center);
}

/* Thème nuit : la texture sable est un GRAIN, pas un sol. À pleine opacité elle
   repeignait la section en crème et le texte crème disparaissait dessus.
   À 9 %, le papier module le noir au lieu de le remplacer — et la règle
   qui suit neutralise les opacités par section, écrites pour le fond clair. */
[data-theme="nuit"] .fond_grain::before,
[data-theme="nuit"] .section_infos.fond_grain::before { opacity: .045; }

/* Un seul noir pour tous les sols. Mesuré avant : les fonds de section
   sautaient de 7 à 12 niveaux d'une ligne à l'autre — c'est cette marche
   qu'on voyait aux jointures, pas les masques. Ici, plus aucune marche :
   les sections ne se distinguent plus par leur sol, seulement par ce qui
   est posé dessus. Le bandeau orange est la seule exception, voulue.
   Les surfaces POSÉES (cartes, portes de FAQ) gardent leur relief : elles
   ne touchent aucune jointure. */
[data-theme="nuit"] [class*="section_"]:not(.section_bandeau),
[data-theme="nuit"] .footer { background-color: var(--base-color-noir-900); }

/* Les pictos officiels du parc sont des traits noirs (`stroke="#000"`) : sur le
   thème clair ils se lisent, sur le noir ils disparaissent — il ne restait
   qu'une silhouette à peine plus sombre que le fond. Même traitement que
   `.hero_pictos`, qui pose déjà sur une image sombre en permanence. */
[data-theme="nuit"] .regle_picto { filter: invert(1) brightness(1.9); }

/* Le hero se terminait sur un angle arrondi : un arrondi EST une arête, on le
   repère immédiatement sur du noir. Il tombe, et le média (poster ou vidéo)
   s'éteint par le bas — le hero ne finit plus, il se dissout dans la page. */
[data-theme="nuit"] .section_hero { border-radius: 0; }
[data-theme="nuit"] .hero_media {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 42%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.20) 86%, rgba(0,0,0,.04) 95%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 42%, rgba(0,0,0,.86) 58%, rgba(0,0,0,.55) 72%, rgba(0,0,0,.20) 86%, rgba(0,0,0,.04) 95%, transparent 100%);
}

/* =============================================================
   FONDUS — les couches décoratives s'éteignent aux deux bouts
   Les fonds sont désormais un même noir : ce qui faisait encore une arête
   nette entre deux sections, ce n'était pas la couleur, c'était la texture
   ou l'illustration qui s'arrêtait au couteau. On les masque en dégradé :
   chaque nappe naît et meurt dans le noir, et les blocs se fondent.
   Une seule variable pilote la hauteur du fondu : --fondu.
   ============================================================= */
[data-theme="nuit"] .fond_grillage,
[data-theme="nuit"] .fond_grain::before,
[data-theme="nuit"] .cta_forteresse,
[data-theme="nuit"] .hero_fond .fond_grillage {
  -webkit-mask-image: var(--masque-fondu);
          mask-image: var(--masque-fondu);
}
/* Le pied ferme la page : sa texture n'a pas de bas à fondre. */
[data-theme="nuit"] .footer > .fond_grillage {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.04) calc(var(--fondu) * .25), rgba(0,0,0,.20) calc(var(--fondu) * .5), rgba(0,0,0,.55) calc(var(--fondu) * .72), rgba(0,0,0,.86) calc(var(--fondu) * .88), #000 var(--fondu), #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.04) calc(var(--fondu) * .25), rgba(0,0,0,.20) calc(var(--fondu) * .5), rgba(0,0,0,.55) calc(var(--fondu) * .72), rgba(0,0,0,.86) calc(var(--fondu) * .88), #000 var(--fondu), #000 100%);
}
/* L'illustration du phare descendait jusqu'au bord et butait sur le pied :
   c'est l'arête visible sur la capture. Elle s'éteint plus tôt, par le bas. */
[data-theme="nuit"] .cta_forteresse { --fondu: 26%; }
/* Son voile était codé en bleu-vert (#0a1418). En noir uni, il redevient noir. */
[data-theme="nuit"] .section_cta::after {
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .5) 45%, #000 100%);
}
.section_faits { --texture-position: 10% 20%; --texture-taille: 130%; }
.section_tarifs { --texture-position: 80% 70%; --texture-taille: 110%; }
.section_lieu { --texture-position: 40% 90%; --texture-taille: 150%; }
.section_infos { --texture-position: 90% 40%; --texture-taille: 120%; }
.section_faits, .section_tarifs, .section_groupes, .section_infos { position: relative; }
.section_faits > *, .section_tarifs > *, .section_groupes > *, .section_infos > * { position: relative; z-index: var(--z-index-contenu); }

/* Média : ratio réservé avant chargement — aucun décalage de mise en page */
.media { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--base-color-noir-700); }

/* ---------- 4. Header et menu ---------- */
/* En-tête collé en haut : le bouton Réserver reste atteignable à tout moment.
   Fond opaque et filet bas pour qu'il se détache du contenu qui défile dessous. */
.header {
  position: sticky; top: 0; z-index: var(--z-index-header);
  background: transparent; color: var(--text-color-alternate);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-moyenne) ease, border-color var(--duration-moyenne) ease;
}
/* Posé sur le hero, l'en-tête laisse passer la vidéo. Dès qu'on quitte le hero,
   il prend un fond plein — jamais translucide — pour rester lisible.
   Sur le hero, un voile sombre garantit le contraste du logo et du menu
   quelle que soit l'image de la vidéo à cet instant. */
.header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 200%; pointer-events: none; z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0) 100%);
  transition: opacity var(--duration-moyenne) ease;
}
.header.is-pose::before { opacity: 0; }
.header.is-pose { background: var(--background-color-alternate); border-bottom-color: var(--border-color-alternate); }
/* Le hero remonte sous l'en-tête : la vidéo occupe toute la hauteur visible. */
.section_hero { margin-top: calc(var(--hauteur-header) * -1); }
.section_hero .padding-section-hero { padding-top: calc(var(--espace-12) + var(--hauteur-header)); }
.header_contenu { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4.5rem; gap: var(--espace-3); }
/* Les ancres ne passent pas sous l'en-tête collé */
:target, [id] { scroll-margin-top: 5.5rem; }
.header_menu-bouton {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--espace-3);
  min-height: var(--cible-tactile); padding: var(--espace-2) var(--espace-2) var(--espace-2) 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-family-titre); font-weight: 500; font-size: .9375rem;
  letter-spacing: .04em; text-transform: uppercase;
}
.header_menu-icone { display: grid; gap: var(--espace-1); width: 1.5rem; }
.header_menu-icone i { display: block; height: 2px; background: var(--base-color-orange-500); border-radius: 1px; }
.header_menu-icone i:nth-child(2) { width: 60%; }
.header_reserver { justify-self: end; }
.header_logo { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--cible-tactile); }

/* Lockup : emblème officiel + nom, la ville se change par une variable */
.logo_lockup { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: var(--espace-2); color: var(--text-color-alternate); }
.logo_lockup img { width: 2.5rem; height: 2.5rem; }
.logo_texte { display: grid; line-height: .95; }
.logo_marque { font-family: var(--font-family-titre); font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-transform: uppercase; }
.logo_ville {
  font-family: var(--font-family-texte); font-weight: 500; font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; margin-top: .1875rem; color: var(--base-color-orange-500);
}
@media (min-width: 48rem) {
  .logo_lockup img { width: 3rem; height: 3rem; }
  .logo_marque { font-size: 1.1875rem; }
  .logo_ville { font-size: .75rem; }
}

.menu_panneau {
  position: fixed; inset: 0 auto 0 0; margin: 0; width: min(24rem, 100%); height: 100dvh;
  max-height: none; max-width: none; padding: var(--espace-6) var(--espace-6) var(--espace-8);
  border: 0; background: var(--base-color-noir-800); color: var(--text-color-alternate);
  display: none; flex-direction: column; gap: var(--espace-8); overflow: auto;
}
.menu_panneau[open] { display: flex; }
.menu_panneau::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(2px); }
.menu_entete { display: flex; justify-content: space-between; align-items: center; gap: var(--espace-4); }
.menu_entete img { width: auto; height: 3.5rem; }
.menu_fermer {
  display: grid; place-items: center; width: var(--cible-tactile); height: var(--cible-tactile);
  background: none; border: 0; cursor: pointer; font-size: 1.75rem; line-height: 1; flex: none;
}
.menu_liste { display: grid; gap: var(--espace-1); }
.menu_lien {
  display: flex; align-items: center; min-height: var(--cible-tactile); padding: var(--espace-3) 0;
  text-decoration: none; font-family: var(--font-family-titre); font-weight: 500; font-size: 1.375rem;
  border-bottom: 1px solid var(--border-color-alternate);
}
.menu_lien:hover, .menu_lien[aria-current="page"] { color: var(--base-color-ambre-500); }
.menu_pied { margin-top: auto; display: grid; gap: var(--espace-4); }
.menu_reseaux { display: flex; gap: var(--espace-2); font-size: .9375rem; }
.menu_reseaux a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); padding-inline: var(--espace-2); }

/* ---------- 5. Hero — vidéo de marque, poster en LCP ---------- */
.section_hero {
  position: relative; overflow: clip;
  background: var(--background-color-alternate); color: var(--text-color-alternate);
  border-radius: 0 0 var(--radius-section) var(--radius-section);
}
.hero_fond { position: absolute; inset: 0; pointer-events: none; }
.hero_media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; }
.hero_video { opacity: 0; transition: opacity var(--duration-lente) ease; }
.hero_video.is-visible { opacity: .72; }
.hero_voile {
  position: absolute; inset: 0;
  /* Juste assez pour que le texte tienne son contraste : la vidéo reste lisible. */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 46%, rgba(0, 0, 0, .10) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .78) 12%, rgba(0, 0, 0, 0) 42%);
}
.hero_contenu { position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-6); max-width: 46rem; }
.padding-section-hero { padding-top: var(--espace-12); padding-bottom: var(--espace-12); }
.hero_surtitre {
  display: flex; align-items: center; gap: var(--espace-2);
  font-weight: 500; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-color-brand);
}
.hero_titre { display: grid; gap: var(--espace-3); }
.hero_marque {
  display: block; font-family: var(--font-family-titre); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.375rem, 1.5rem + 4.5vw, 4.75rem); line-height: .95; letter-spacing: -.005em;
}
.hero_accroche {
  display: block; font-family: var(--font-family-titre); font-weight: 500;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem); line-height: 1.15;
}
.hero_texte { font-size: 1.125rem; max-width: 36rem; color: var(--text-color-alternate-secondary); }
.hero_actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4) var(--espace-6); }
.hero_avis {
  display: inline-flex; align-items: center; gap: var(--espace-2);
  min-height: var(--cible-tactile); text-decoration: none; font-size: .9375rem;
}
.hero_avis:hover .hero_avis-lien { text-decoration: underline; }
.hero_avis-note { font-family: var(--font-family-titre); font-weight: 700; font-size: 1.125rem; }
.hero_avis-lien { color: var(--text-color-alternate-secondary); }
.hero_pictos {
  display: flex; flex-wrap: wrap; gap: var(--espace-4) var(--espace-10);
  margin-top: var(--espace-2); padding-top: var(--espace-6);
  border-top: 1px solid var(--border-color-alternate);
  font-family: var(--font-family-titre); font-size: .9375rem;
}
.hero_pictos li { display: inline-flex; align-items: center; gap: var(--espace-3); }
/* Pictos officiels du parc : dessin fin, ils ont besoin de place pour rester lisibles. */
.hero_pictos img { width: 3.25rem; height: 2.5rem; object-fit: contain; filter: invert(1) brightness(1.9); }
@media (min-width: 48rem) {
  .padding-section-hero { padding-top: var(--espace-20); padding-bottom: var(--espace-16); }
}
@media (min-width: 64rem) {
  .padding-section-hero { padding-top: var(--espace-24); padding-bottom: var(--espace-20); }
  .hero_contenu { min-height: 32rem; align-content: center; }
}

/* ---------- 6. Faits (crème : vend, reste plat) ---------- */
.section_faits { background: var(--background-color-primary); }
.faits_contenu { display: grid; gap: var(--espace-6); }
.faits_entete { display: grid; gap: var(--espace-4); max-width: var(--container-small); }
.faits_chapo { font-size: 1.125rem; color: var(--text-color-secondary); }
.faits_liste { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--border-color-primary); }
.faits_liste li {
  display: grid; gap: var(--espace-1); align-content: start;
  padding: var(--espace-5) var(--espace-4) var(--espace-5) 0; border-bottom: 1px solid var(--border-color-primary);
}
.faits_valeur {
  font-family: var(--font-family-titre); font-weight: 700; font-size: 1.75rem; line-height: 1;
  color: var(--text-color-brand-strong);
}
.faits_libelle { font-size: .9375rem; color: var(--text-color-secondary); }
@media (min-width: 48rem) {
  .faits_liste { grid-template-columns: repeat(4, 1fr); }
  .faits_liste li { padding: var(--espace-6) var(--espace-6) var(--espace-6) 0; }
  .faits_liste li + li { padding-left: var(--espace-6); border-left: 1px solid var(--border-color-primary); }
  .faits_valeur { font-size: 2.25rem; }
}
@media (min-width: 64rem) {
  .faits_contenu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: end; gap: var(--espace-16); }
}

/* ---------- 7. Bandeau incliné ----------
   Une lame de couleur posée en travers de la page, qui déborde des deux côtés
   et mord sur les sections voisines. Le texte est grand, en Vitesse Black, et
   avance avec le scroll. C'est une respiration entre deux blocs, pas une frise.
   ------------------------------------------------------------------- */
.section_bandeau {
  position: relative; z-index: var(--z-index-contenu);
  overflow: clip; background: var(--base-color-orange-600); color: var(--base-color-blanc);
  /* La lame déborde en largeur pour que l'inclinaison n'ouvre pas de coin vide */
  width: 106vw; margin-inline: -3vw;
  transform: rotate(-2.2deg);
  margin-block: calc(var(--espace-8) * -1);
  border-block: 2px solid var(--base-color-noir-900);
  box-shadow: 0 .5rem 0 rgba(0, 0, 0, .18);
}
.bandeau_piste { display: flex; width: max-content; padding: var(--espace-4) 0; }
.bandeau_liste { display: flex; align-items: center; gap: var(--espace-10); padding-right: var(--espace-10); }
.bandeau_liste li {
  display: inline-flex; align-items: center; gap: var(--espace-4); white-space: nowrap;
  font-family: var(--font-family-titre); font-weight: 900;
  font-size: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1;
}
.bandeau_liste .eclat { width: 1.5rem; height: 1.5rem; color: var(--base-color-noir-900); opacity: .55; }
@media (min-width: 64rem) { .section_bandeau { transform: rotate(-1.6deg); } }

/* ---------- 8. Concept — la scène épinglée (noir : raconte) ---------- */
.section_concept { position: relative; background: var(--background-color-alternate); color: var(--text-color-alternate); }
.concept_piste { position: relative; }
.concept_scene { position: relative; overflow: clip; }
.concept_scene-contenu { position: relative; z-index: var(--z-index-contenu); padding-top: var(--espace-16); padding-bottom: var(--espace-16); }
.concept_grille { display: grid; gap: var(--espace-6); min-height: 100%; }
.concept_entete { display: grid; gap: var(--espace-4); }
.concept_texte { color: var(--text-color-alternate-secondary); max-width: 32rem; }
.concept_legendes { position: relative; display: grid; gap: var(--espace-2); }
.concept_legende {
  font-family: var(--font-family-titre); font-weight: 500;
  font-size: clamp(1.125rem, 1rem + .8vw, 1.5rem); line-height: 1.25;
}
.concept_legende b { font-weight: 700; color: var(--base-color-ambre-500); }
.concept_legende.is-rouge b { color: var(--feu-color-rouge); }
.concept_legende.is-vert b { color: var(--feu-color-vert); }
.concept_badge {
  display: inline-flex; align-items: baseline; gap: var(--espace-2); justify-self: start;
  padding: var(--espace-2) var(--espace-4); border: 1px solid var(--border-color-alternate);
  border-radius: var(--radius-small);
  font-family: var(--font-family-titre); font-size: .9375rem; color: var(--text-color-alternate-secondary);
}
.concept_badge b { font-size: 1.375rem; color: var(--text-color-alternate); font-variant-numeric: tabular-nums; }
.concept_dessin { width: 100%; height: auto; max-height: 60svh; margin-inline: auto; }
.figure_pose { opacity: 0; }
.figure_pose.is-debout { opacity: 1; }
.concept_etat { opacity: 0; }
.concept_etat.is-vert { opacity: 1; }
.concept_points { opacity: 0; }
.concept_figure { transform: translate(830px, 640px); }
.figure_orientation { transform-box: fill-box; transform-origin: center; }
@media (min-width: 64rem) {
  .concept_grille { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); align-items: center; gap: var(--espace-16); }
  .concept_colonne { display: grid; gap: var(--espace-8); }
}

/* ---------- 9. Cellules — le mur des portes ---------- */
.section_cellules {
  position: relative; overflow: clip;
  background: var(--background-color-alternate-raised); color: var(--text-color-alternate);
}
.cellules_contenu { position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-8); }
.cellules_entete { display: grid; gap: var(--espace-4); max-width: 48rem; }
.cellules_chapo { font-size: 1.125rem; color: var(--text-color-alternate-secondary); }

/* Cartes vedettes : trois cellules réelles, avec leur photo */
.cellules_vedettes { display: grid; gap: var(--espace-5); }
.vedette {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden;
  border-radius: var(--radius-medium); background: var(--base-color-noir-700);
  border: 1px solid var(--border-color-alternate);
}
.vedette_media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.vedette_type {
  position: absolute; inset: auto auto var(--espace-3) var(--espace-3);
  display: inline-flex; align-items: center; gap: var(--espace-2);
  padding: var(--espace-1) var(--espace-3); border-radius: 999px;
  background: rgba(0, 0, 0, .82); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
}
.vedette_type::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--vedette-couleur); }
.vedette_corps { display: grid; gap: var(--espace-2); align-content: start; padding: var(--espace-5); }
.vedette_corps h3 { font-size: 1.375rem; }
.vedette_meta { display: flex; flex-wrap: wrap; gap: var(--espace-1) var(--espace-4); font-size: .8125rem; color: var(--text-color-alternate-secondary); }
.vedette_texte { font-size: .9375rem; color: var(--text-color-alternate-secondary); }
@media (min-width: 48rem) { .cellules_vedettes { grid-template-columns: repeat(3, 1fr); } }

.cellules_tableau-de-bord { display: grid; gap: var(--espace-6); }
.cellules_badge {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--espace-3) var(--espace-6);
  padding: var(--espace-4) var(--espace-5); border-radius: var(--radius-medium);
  background: linear-gradient(135deg, var(--base-color-noir-850), var(--base-color-noir-450)); border: 1px solid var(--border-color-alternate);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.badge_puce { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-small); background: var(--base-color-orange-600); display: grid; place-items: center; }
.badge_puce svg { width: 1.5rem; height: 1.5rem; }
.badge_valeurs { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-8); align-items: baseline; }
/* Les capitales suppriment la silhouette des mots, et c'est la silhouette qui
   permet de lire vite. Sur une ÉTIQUETTE de deux mots, le coût est nul et la
   voix de la marque y gagne ; sur une phrase de 59 caractères à 13 px, c'est
   une phrase qu'on déchiffre au lieu de la lire. La capitale reste donc sur le
   `<b>` — l'étiquette — et la phrase qui suit revient en bas-de-casse. */
.badge_etiquette { grid-column: 1 / -1; font-size: .8125rem; color: var(--text-color-alternate-secondary); }
.badge_etiquette b { font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.badge_valeur { display: inline-flex; align-items: baseline; gap: var(--espace-1); font-size: .875rem; color: var(--text-color-alternate-secondary); }
.badge_valeur b { font-family: var(--font-family-titre); font-size: 1.5rem; line-height: 1; color: var(--text-color-alternate); font-variant-numeric: tabular-nums; }
.cellules_legende { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-6); font-size: .875rem; color: var(--text-color-alternate-secondary); }
.cellules_legende li { display: inline-flex; align-items: center; gap: var(--espace-2); }
.legende_point { width: .625rem; height: .625rem; border-radius: 50%; background: var(--legende-couleur); box-shadow: 0 0 .5rem var(--legende-couleur); }
.cellules_consigne { font-size: .9375rem; color: var(--text-color-alternate-secondary); max-width: 46rem; }
.cellules_grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--espace-2); }
@media (min-width: 48rem) { .cellules_grille { grid-template-columns: repeat(6, 1fr); gap: var(--espace-3); } }
@media (min-width: 64rem) {
  .cellules_grille { grid-template-columns: repeat(10, 1fr); }
  .cellules_tableau-de-bord { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.cellules_porte {
  position: relative; aspect-ratio: 3 / 4; min-height: var(--cible-tactile);
  padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 40rem; border-radius: var(--radius-small);
  --porte-type-couleur: var(--type-color-physique);
}
.cellules_porte[data-type="tactique"] { --porte-type-couleur: var(--type-color-tactique); }
.cellules_porte[data-type="technique"] { --porte-type-couleur: var(--type-color-technique); }
.porte_lumiere {
  position: absolute; inset: 0; border-radius: var(--radius-small); opacity: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 100%, var(--porte-lumiere-couleur, rgba(255, 178, 122, .7)), transparent 70%);
  transition: opacity var(--duration-moyenne) ease;
}
.porte_battant {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto auto;
  gap: var(--espace-1); align-items: center; justify-items: center;
  padding: var(--espace-2) .375rem; border-radius: var(--radius-small);
  background: linear-gradient(180deg, var(--base-color-noir-950) 0%, var(--base-color-noir-750) 60%, var(--base-color-noir-550) 100%);
  border: 1px solid rgba(247, 239, 225, .12);
  box-shadow: inset 0 1px 0 rgba(247, 239, 225, .08), 0 .5rem 1rem rgba(0, 0, 0, .35);
  transform-origin: left center;
  transition: transform var(--duration-lente) var(--easing-porte), border-color var(--duration-moyenne) ease;
  backface-visibility: hidden;
}
.porte_feu {
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--feu-color-vert);
  box-shadow: 0 0 .625rem var(--feu-color-vert), 0 0 .125rem var(--feu-color-vert);
}
.porte_hublot {
  width: 56%; max-width: 3rem; aspect-ratio: 4 / 3;
  border: 1px solid rgba(247, 239, 225, .18); border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, rgba(247, 239, 225, .18) 0, rgba(247, 239, 225, .18) 1px, transparent 1px, transparent .5rem),
    repeating-linear-gradient(-45deg, rgba(247, 239, 225, .18) 0, rgba(247, 239, 225, .18) 1px, transparent 1px, transparent .5rem),
    var(--background-color-creuse);
}
.porte_numero { position: relative; font-family: var(--font-family-titre); font-weight: 500; font-size: 1.125rem; line-height: 1; letter-spacing: .02em; }
.porte_numero-avant { position: absolute; inset: 0; opacity: 0; }
.porte_numero-final { opacity: 1; }
.porte_type { width: 1.25rem; height: .1875rem; border-radius: 2px; background: var(--porte-type-couleur); opacity: .9; }
.porte_ombre { position: absolute; inset: 0; border-radius: var(--radius-small); background: var(--base-color-noir-900); opacity: 0; pointer-events: none; }
.porte_score {
  position: absolute; inset: auto .25rem .375rem; font-family: var(--font-family-titre); font-weight: 700;
  font-size: .75rem; color: var(--feu-color-vert); opacity: 0; pointer-events: none;
  transition: opacity var(--duration-moyenne) ease;
}
@media (hover: hover) {
  .cellules_porte:hover .porte_battant { transform: rotateY(-28deg); border-color: rgba(247, 239, 225, .3); }
  .cellules_porte:hover .porte_lumiere { opacity: 1; }
}
.cellules_porte:focus-visible .porte_battant { transform: rotateY(-28deg); }
.cellules_porte:focus-visible .porte_lumiere { opacity: 1; }
.cellules_porte.is-ouverte .porte_battant { transform: rotateY(-48deg); }
.cellules_porte.is-ouverte .porte_lumiere { opacity: 1; --porte-lumiere-couleur: rgba(255, 176, 46, .6); }
.cellules_porte.is-validee .porte_battant { transform: rotateY(-72deg); border-color: rgba(52, 211, 122, .4); }
.cellules_porte.is-validee .porte_lumiere { opacity: 1; --porte-lumiere-couleur: rgba(52, 211, 122, .55); }
.cellules_porte.is-validee .porte_score { opacity: 1; }
.cellules_porte.is-validee .porte_feu { box-shadow: 0 0 1rem var(--feu-color-vert), 0 0 .25rem var(--feu-color-vert); }
@media (min-width: 64rem) { .porte_numero { font-size: 1.375rem; } }

/* Relance : n'interrompt jamais, ne verrouille rien, invite à revenir */
.cellules_relance {
  display: grid; gap: var(--espace-4); padding: var(--espace-6); border-radius: var(--radius-medium);
  background: var(--base-color-noir-700); border: 1px solid rgba(52, 211, 122, .35);
}
.cellules_relance[hidden] { display: none; }
.relance_titre { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.relance_texte { color: var(--text-color-alternate-secondary); max-width: 40rem; }
.relance_actions { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-4); }

/* Dialogue de cellule */
.cellule_dialogue {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 92dvh;
  padding: var(--espace-6) var(--espace-5) var(--espace-8); border: 0;
  border-radius: 1rem 1rem 0 0; overflow: hidden;
  background: var(--base-color-noir-800); color: var(--text-color-alternate);
  box-shadow: 0 -1rem 3rem rgba(0, 0, 0, .5);
}
.cellule_dialogue::backdrop { background: rgba(0, 0, 0, .78); }
.cellule_dialogue[open] { animation: cellule-ouvrir var(--duration-lente) var(--easing-porte) both; }
@keyframes cellule-ouvrir { from { transform: translateY(2rem); opacity: 0; } to { transform: none; opacity: 1; } }
.cellule_lueur {
  position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, var(--cellule-lueur, rgba(255, 176, 46, .28)), transparent 70%);
  transition: opacity var(--duration-moyenne) ease;
}
.cellule_dialogue[data-etat="vert"] { --cellule-lueur: rgba(52, 211, 122, .35); }
.cellule_dialogue[data-etat="rouge"] { --cellule-lueur: rgba(255, 74, 61, .35); }
.cellule_contenu { position: relative; display: grid; gap: var(--espace-5); }
.cellule_fermer {
  position: absolute; top: calc(var(--espace-2) * -1); right: calc(var(--espace-2) * -1);
  display: grid; place-items: center; width: var(--cible-tactile); height: var(--cible-tactile);
  background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1;
  color: var(--text-color-alternate-secondary);
}
.cellule_entete { display: grid; gap: .375rem; padding-right: var(--espace-10); }
.cellule_etiquette {
  display: inline-flex; align-items: center; gap: var(--espace-2); flex-wrap: wrap;
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-color-alternate-secondary);
}
.cellule_feu { width: .625rem; height: .625rem; border-radius: 50%; background: var(--feu-color-ambre); box-shadow: 0 0 .75rem var(--feu-color-ambre); }
.cellule_dialogue[data-etat="vert"] .cellule_feu { background: var(--feu-color-vert); box-shadow: 0 0 .75rem var(--feu-color-vert); }
.cellule_dialogue[data-etat="rouge"] .cellule_feu { background: var(--feu-color-rouge); box-shadow: 0 0 .75rem var(--feu-color-rouge); }
.cellule_titre { font-size: 1.75rem; }
.cellule_meta { font-size: .9375rem; color: var(--text-color-alternate-secondary); }
.cellule_chrono { height: .25rem; border-radius: 2px; background: rgba(247, 239, 225, .12); overflow: hidden; }
.cellule_chrono-barre { display: block; height: 100%; background: var(--base-color-orange-500); transform-origin: left; transform: scaleX(1); }
.cellule_chrono.is-en-cours .cellule_chrono-barre { animation: chrono-vider 12s linear forwards; }
.cellule_chrono.is-fige .cellule_chrono-barre { animation-play-state: paused; }
@keyframes chrono-vider { to { transform: scaleX(0); } }
.cellule_defi { display: grid; gap: var(--espace-4); }
.cellule_defi[hidden], .cellule_resultat[hidden] { display: none; }
.defi_consigne { font-family: var(--font-family-titre); font-size: 1.125rem; }
.defi_etat { font-size: .9375rem; color: var(--text-color-alternate-secondary); min-height: 1.5rem; }
.defi_action { justify-self: start; }
.defi_fil {
  container-type: inline-size; position: relative; height: 2.5rem; border-radius: var(--radius-small);
  background: var(--background-color-creuse); border: 1px solid var(--border-color-alternate); overflow: hidden;
}
.defi_fil-zone { position: absolute; top: 0; bottom: 0; width: 16%; background: rgba(52, 211, 122, .35); border-inline: 1px solid var(--feu-color-vert); }
.defi_fil-curseur {
  position: absolute; top: .25rem; bottom: .25rem; left: 0; width: .75rem; border-radius: 2px;
  background: var(--base-color-creme-100); box-shadow: 0 0 .75rem rgba(247, 239, 225, .6);
  animation: fil-aller-retour 1.1s linear infinite alternate;
}
@keyframes fil-aller-retour { to { transform: translateX(calc(100cqw - .75rem)); } }
.defi_pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--espace-2); }
.defi_pad {
  aspect-ratio: 1; min-height: var(--cible-tactile); border-radius: var(--espace-2);
  border: 1px solid var(--border-color-alternate); background: var(--base-color-noir-650); cursor: pointer;
  box-shadow: inset 0 0 0 .25rem var(--base-color-noir-900);
  transition: background-color var(--duration-rapide) ease, box-shadow var(--duration-rapide) ease;
}
.defi_pad.is-allume { background: var(--feu-color-vert); box-shadow: 0 0 1.5rem var(--feu-color-vert); }
.defi_pad:disabled { cursor: default; }
.defi_arene { position: relative; height: 11rem; border-radius: var(--espace-2); background: var(--background-color-creuse); border: 1px solid var(--border-color-alternate); overflow: hidden; }
.defi_cible {
  position: absolute; width: var(--cible-tactile); height: var(--cible-tactile); border-radius: 50%;
  border: 0; cursor: pointer; left: 50%; top: 50%;
  background: radial-gradient(circle, var(--base-color-orange-500) 0 30%, transparent 32% 42%, var(--base-color-orange-500) 44% 56%, transparent 58%);
  box-shadow: 0 0 1rem rgba(232, 88, 43, .5); transform: translate(-50%, -50%);
}
.cellule_resultat { display: grid; gap: var(--espace-3); }
.resultat_titre { font-size: 1.75rem; color: var(--feu-color-vert); }
.resultat_titre.is-rouge { color: var(--feu-color-rouge); }
.resultat_texte { color: var(--text-color-alternate-secondary); }
.resultat_actions { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-4); margin-top: var(--espace-2); }
@media (min-width: 48rem) {
  .cellule_dialogue { inset: 0; margin: auto; width: min(32rem, calc(100% - 2rem)); height: fit-content; border-radius: 1rem; padding: var(--espace-8); }
  @keyframes cellule-ouvrir { from { transform: perspective(60rem) rotateY(-10deg) translateX(-2rem); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- 10. Tarifs (crème : plat, tout visible d'un coup) ---------- */
.section_tarifs { background: var(--background-color-primary); }
.tarifs_contenu { display: grid; gap: var(--espace-6); }
.tarifs_entete { display: grid; gap: var(--espace-4); max-width: 40rem; justify-items: start; }
.tarifs_chapo { color: var(--text-color-secondary); }
/* Ici vivaient deux corps de règle SANS SÉLECTEUR — les restes du tableau
   tarifaire retiré. Un corps orphelin n'est pas ignoré : le parseur cherche
   son `{` ouvrant, le trouve dans la règle SUIVANTE, et jette les deux.
   `.tarifs_notes` n'existait donc pas dans le CSSOM (vérifié : absent des 562
   règles) et les mentions de bas de page s'affichaient en corps de texte plein
   au lieu du petit gris. Mesuré, pas supposé. */
.tarifs_notes { display: grid; gap: .375rem; font-size: .875rem; color: var(--text-color-secondary); max-width: 52rem; }
@media (min-width: 64rem) {
  .tarifs_contenu { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--espace-16); align-items: start; }
  .tarifs_entete { position: sticky; top: var(--espace-8); }
  .tarifs_colonne { display: grid; gap: var(--espace-6); }
}

/* ---------- 11. Groupes — quatre portes, en grand ----------
   Section noire : c'est un moment de la page, pas une liste de liens.
   Chaque format est une carte pleine hauteur où la photo porte le message,
   le texte posé dessus. Au survol, la carte s'ouvre : la photo avance,
   un liseré orange s'allume, le texte de détail se déplie. */
.section_groupes { position: relative; overflow: clip; background: var(--background-color-alternate); color: var(--text-color-alternate); }
.groupes_contenu { position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-8); }
.groupes_entete { display: grid; gap: var(--espace-4); max-width: 46rem; }
.groupes_chapo { font-size: 1.125rem; color: var(--text-color-alternate-secondary); }
.groupes_liste { display: grid; gap: var(--espace-4); }

.groupe_item {
  position: relative; display: block; overflow: hidden; text-decoration: none;
  aspect-ratio: 4 / 3; border-radius: var(--radius-medium);
  background: var(--base-color-noir-700);
  border: 1px solid var(--border-color-alternate);
  transition: border-color var(--duration-moyenne) ease, transform var(--duration-moyenne) var(--easing-sortie);
}
.groupe_item > .groupe_media { position: absolute; inset: 0; overflow: hidden; border-radius: 0; }
.groupe_item > .groupe_media img { transition: transform var(--duration-lente) var(--easing-sortie); }
.groupe_item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .80) 38%, rgba(0, 0, 0, .12) 70%, rgba(0, 0, 0, .35) 100%);
}
.groupe_media { position: relative; overflow: hidden; border-radius: var(--radius-medium); }
.groupe_item > .groupe_corps {
  position: absolute; inset: auto 0 0 0; z-index: var(--z-index-contenu);
  display: grid; gap: var(--espace-2); align-content: end;
  padding: var(--espace-5);
}
.groupe_corps { display: grid; gap: var(--espace-2); align-content: start; }
.groupe_item h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); }
.groupe_texte { font-size: .9375rem; color: var(--text-color-sur-photo); }
.groupe_lien {
  display: inline-flex; align-items: center; gap: var(--espace-2);
  font-family: var(--font-family-titre); font-weight: 500; font-size: .9375rem;
  color: var(--base-color-orange-500);
}
.groupe_lien::after { content: "→"; transition: transform var(--duration-rapide) var(--easing-sortie); }
@media (hover: hover) {
  .groupe_item:hover { border-color: rgba(232, 88, 43, .55); }
  .groupe_item:hover > .groupe_media img { transform: scale(1.06); }
  .groupe_item:hover .groupe_lien::after { transform: translateX(.25rem); }
}
.groupe_item:focus-visible { border-color: rgba(232, 88, 43, .55); }
@media (min-width: 34rem) { .groupes_liste { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .groupes_liste { grid-template-columns: repeat(4, 1fr); gap: var(--espace-5); }
  .groupe_item { aspect-ratio: 3 / 4; }
  /* Décalage vertical : la ligne respire au lieu de s'aligner au cordeau */
  .groupe_item:nth-child(even) { margin-top: var(--espace-8); }
}

/* ---------- 12. Le lieu (crème : ce que le visiteur trouve sur place) ----------
   Bloc entièrement local : photos, légendes et points pratiques changent d'une
   ville à l'autre. C'est le contenu qu'aucun autre site du réseau ne peut avoir. */
.section_lieu { position: relative; background: var(--background-color-primary); }
.section_lieu > * { position: relative; z-index: var(--z-index-contenu); }
.lieu_contenu { display: grid; gap: var(--espace-6); }
.lieu_entete { display: grid; gap: var(--espace-4); max-width: var(--container-small); }
.lieu_chapo { font-size: 1.125rem; color: var(--text-color-secondary); }

.lieu_grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--espace-3); }
.lieu_vue { position: relative; overflow: hidden; border-radius: var(--radius-medium); aspect-ratio: 4 / 3; }
.lieu_vue.is-large { grid-column: span 2; aspect-ratio: 16 / 10; }
.lieu_vue img { position: absolute; inset: 0; }
.lieu_legende {
  position: absolute; inset: auto 0 0 0; display: grid; gap: .125rem;
  padding: var(--espace-8) var(--espace-4) var(--espace-3);
  /* Palier opaque sous le texte : le contraste ne dépend pas de la photo. */
  background: linear-gradient(0deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, 0) 100%);
  color: var(--base-color-creme-100);
}
.lieu_legende b { font-family: var(--font-family-titre); font-size: 1rem; }
.lieu_legende span { font-size: .8125rem; color: var(--text-color-sur-photo); }
@media (min-width: 48rem) {
  /* Deux lignes de hauteur égale : la grande vue occupe exactement les deux,
     gouttière comprise. Plus aucun blanc entre les colonnes. */
  .lieu_grille { grid-template-columns: repeat(4, 1fr); gap: var(--espace-3); grid-auto-rows: minmax(0, 1fr); }
  .lieu_vue { aspect-ratio: auto; min-height: 13.5rem; }
  .lieu_vue.is-large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 0; }
}

.lieu_points { display: grid; gap: var(--espace-4); }
.lieu_points li {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--espace-3); align-items: start;
  padding-top: var(--espace-4); border-top: 1px solid var(--border-color-primary);
}
.lieu_points img { width: 2.75rem; height: 2rem; object-fit: contain; opacity: .85; }
.lieu_points b { display: block; font-family: var(--font-family-titre); font-size: 1rem; }
.lieu_points span { font-size: .9375rem; color: var(--text-color-secondary); }
@media (min-width: 48rem) { .lieu_points { grid-template-columns: repeat(2, 1fr); gap: var(--espace-4) var(--espace-8); } }
@media (min-width: 64rem) { .lieu_points { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 13. Avis (noir : la preuve) ---------- */
.section_avis { position: relative; overflow: clip; background: var(--background-color-alternate); color: var(--text-color-alternate); }
.avis_contenu { position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-6); }
.avis_entete { display: grid; gap: var(--espace-4); max-width: 40rem; }
.avis_note { display: inline-flex; align-items: center; gap: var(--espace-3); font-family: var(--font-family-titre); font-size: 1.125rem; }
.avis_etoiles { display: inline-flex; gap: .125rem; color: var(--base-color-ambre-500); }
.avis_etoiles svg { width: 1.125rem; height: 1.125rem; }
.avis_liste { display: grid; gap: var(--espace-4); }
.avis_carte {
  display: grid; gap: var(--espace-3); align-content: start;
  padding: var(--espace-5); border-radius: var(--radius-medium);
  background: var(--background-color-secondary); color: var(--text-color-primary);
}
.avis_carte blockquote { margin: 0; font-size: 1rem; line-height: 1.55; }
.avis_carte footer { display: flex; align-items: center; gap: var(--espace-3); font-size: .875rem; color: var(--text-color-secondary); }
.avis_carte footer b { display: block; font-family: var(--font-family-titre); font-weight: 500; color: var(--text-color-primary); }
.avis_carte footer > span:not(.etoiles) { display: grid; gap: .0625rem; }

/* Étoiles Google : cinq formes pleines, dessinées à l'identique de la source */
.etoiles { display: inline-flex; gap: .0625rem; color: var(--base-color-or-google); }
.etoiles svg { width: 1rem; height: 1rem; fill: currentColor; }
.logo-google { width: 1.5rem; height: 1.5rem; flex: none; }
.avis_bandeau {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-4);
  padding: var(--espace-4) var(--espace-5); border-radius: var(--radius-medium);
  background: var(--background-color-secondary); color: var(--text-color-primary);
  justify-self: start;
}
.avis_bandeau .logo-google { width: 1.75rem; height: 1.75rem; }
.avis_note-chiffre { font-family: var(--font-family-titre); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.avis_note-detail { font-size: .875rem; color: var(--text-color-secondary); }
.avis_lien { justify-self: start; }
@media (min-width: 48rem) { .avis_liste { grid-template-columns: repeat(3, 1fr); gap: var(--espace-6); } }

/* ---------- 14. Infos pratiques (crème : fiche noire) ---------- */
.section_infos { background: var(--background-color-primary); }
.infos_contenu { display: grid; gap: var(--espace-6); }
.infos_fiche {
  position: relative; overflow: clip; display: grid; gap: var(--espace-6);
  padding: var(--espace-8) var(--espace-6); border-radius: var(--radius-medium);
  background: var(--background-color-alternate); color: var(--text-color-alternate);
}
.infos_fiche > * { position: relative; z-index: var(--z-index-contenu); }
.infos_fiche h2 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); }
.infos_horaires { display: grid; gap: var(--espace-6); }
.infos_horaires h3 { font-size: 1.125rem; color: var(--base-color-ambre-500); margin-bottom: var(--espace-2); }
.infos_horaires dl { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-1) var(--espace-4); margin: 0; font-size: .9375rem; }
.infos_horaires dt { color: var(--text-color-alternate-secondary); }
/* Une plage horaire est une valeur, pas une phrase : « 10 h – minuit » coupé
   après le tiret se lit comme deux informations. La gouttière ci-dessus est
   resserrée d'un cran pour lui laisser la place sans rien faire déborder —
   vérifié aux quatre largeurs. */
.infos_horaires dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.infos_coordonnees { display: grid; gap: var(--espace-2); font-size: .9375rem; }
.infos_coordonnees li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--espace-3); align-items: start; }
.infos_coordonnees svg { width: 1.25rem; height: 1.25rem; color: var(--base-color-orange-500); margin-top: .375rem; }
.infos_coordonnees a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.infos_coordonnees a:hover { text-decoration: underline; }
.infos_coordonnees li > span { padding-block: var(--espace-2); }
.infos_actions { display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-4); }
.infos_carte { position: relative; overflow: hidden; border-radius: var(--radius-medium); min-height: 18rem; background: var(--base-color-creme-200); border: 1px solid var(--border-color-primary); }
.infos_carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Plan dessiné : ses couleurs passent par des tokens, comme tout le reste.
   Les attributs de présentation SVG ne comprennent pas var() — c'est donc le
   CSS qui peint, et il gagne de toute façon sur l'attribut. */
.plan_sol      { fill: var(--base-color-creme-200); }
.plan_voie     { stroke: var(--base-color-blanc); }
.plan_bati     { fill: var(--base-color-creme-300); }
.plan_halo     { fill: var(--base-color-orange-500); }
.plan_pin      { fill: var(--base-color-orange-600); }
.plan_pin-oeil { fill: var(--base-color-blanc); }

/* En nuit, le plan devient un plan de nuit : sol profond, voies éclairées,
   bâti à peine détaché. Le repère orange reste le seul point vif. */
[data-theme="nuit"] .infos_carte { background: var(--base-color-noir-700); }
[data-theme="nuit"] .plan_sol      { fill: var(--base-color-noir-700); }
[data-theme="nuit"] .plan_voie     { stroke: var(--base-color-noir-500); }
[data-theme="nuit"] .plan_bati     { fill: var(--base-color-noir-600); }
[data-theme="nuit"] .plan_pin-oeil { fill: var(--base-color-noir-900); }
.infos_carte-legende {
  position: absolute; inset: auto var(--espace-4) var(--espace-4) var(--espace-4);
  display: grid; gap: var(--espace-1); padding: var(--espace-3) var(--espace-4);
  border-radius: var(--radius-small); background: var(--background-color-secondary);
  font-size: .875rem; box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .1);
}
.infos_carte-legende b { font-family: var(--font-family-titre); }
@media (min-width: 48rem) { .infos_horaires { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
  .infos_contenu { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--espace-8); align-items: stretch; }
  .infos_fiche { padding: var(--espace-12); }
  .infos_carte { min-height: 100%; }
}

/* ---------- 15. FAQ (blanc : chaque question est une porte) ---------- */
.section_faq { background: var(--background-color-secondary); }
.faq_contenu { display: grid; gap: var(--espace-6); }
.faq_entete { display: grid; gap: var(--espace-3); text-align: center; justify-items: center; }
.faq_pastille {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--base-color-orange-600);
  color: var(--base-color-blanc); display: grid; place-items: center;
  font-family: var(--font-family-titre); font-weight: 500; font-size: 1.75rem;
}
.faq_liste { display: grid; gap: var(--espace-3); }
.faq_porte { border: 1px solid var(--border-color-primary); border-radius: var(--radius-small); background: var(--background-color-primary); }
.faq_question {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--espace-3);
  min-height: var(--cible-tactile); padding: var(--espace-4) var(--espace-5); cursor: pointer; list-style: none;
  font-family: var(--font-family-titre); font-weight: 500; font-size: 1.0625rem;
}
.faq_question::-webkit-details-marker { display: none; }
.faq_feu { width: .5rem; height: .5rem; border-radius: 50%; background: var(--feu-color-vert); box-shadow: 0 0 .5rem var(--feu-color-vert); }
.faq_chevron { width: 1.25rem; height: 1.25rem; transition: transform var(--duration-moyenne) var(--easing-sortie); }
.faq_porte[open] .faq_chevron { transform: rotate(180deg); }
.faq_porte[open] .faq_question { color: var(--text-color-brand-strong); }
.faq_reponse { padding: 0 var(--espace-5) var(--espace-5) var(--espace-10); color: var(--text-color-secondary); transform-origin: top; }
.faq_porte[open] .faq_reponse { animation: faq-ouvrir var(--duration-lente) var(--easing-porte) both; }
@keyframes faq-ouvrir { from { opacity: 0; transform: perspective(40rem) rotateX(-14deg); } to { opacity: 1; transform: none; } }
@media (min-width: 64rem) {
  .faq_contenu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--espace-16); align-items: start; }
  .faq_entete { text-align: left; justify-items: start; position: sticky; top: var(--espace-8); }
}

/* ---------- 16. CTA final + carte cadeau ---------- */
.section_cta { position: relative; overflow: clip; background: var(--background-color-cta); color: var(--text-color-alternate); }
/* Illustration de marque : le phare de la DA, posée en fond du dernier appel. */
.cta_forteresse { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.section_cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10, 20, 24, .92) 0%, rgba(10, 20, 24, .55) 45%, rgba(10, 20, 24, .72) 100%);
}
.cta_contenu {
  position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-6);
  justify-items: center; text-align: center; max-width: 40rem; margin-inline: auto;
}
.cta_contenu h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.cta_texte { font-size: 1.125rem; color: var(--text-color-alternate-secondary); }
.cta_cadeau {
  position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-4); align-items: center;
  margin-top: var(--espace-16); padding: var(--espace-6); border-radius: var(--radius-medium);
  background: rgba(0, 0, 0, .72); border: 1px solid var(--border-color-alternate); backdrop-filter: blur(6px);
}
.cta_cadeau h3 { font-size: 1.375rem; }
.cta_cadeau p { font-size: .9375rem; color: var(--text-color-alternate-secondary); }
.cadeau_media { width: 100%; max-width: 12rem; border-radius: var(--radius-small); overflow: hidden; aspect-ratio: 3 / 2; }
@media (min-width: 48rem) { .cta_cadeau { grid-template-columns: auto 1fr auto; gap: var(--espace-6); padding: var(--espace-6) var(--espace-8); } }

/* ---------- 17. Footer ---------- */
.footer { position: relative; overflow: clip; background: var(--background-color-alternate); color: var(--text-color-alternate); }
.footer_contenu { position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-10); }
.footer_logo img { width: auto; height: 6rem; }
.footer_liens { display: grid; gap: var(--espace-1); font-family: var(--font-family-titre); font-weight: 500; }
.footer_liens a { display: flex; align-items: center; min-height: var(--cible-tactile); text-decoration: none; }
.footer_liens a:hover { color: var(--base-color-ambre-500); }
.footer_coordonnees { display: grid; gap: var(--espace-4); font-size: .9375rem; }
.footer_coordonnees b { display: block; font-family: var(--font-family-titre); }
.footer_coordonnees a { text-decoration: none; color: var(--text-color-alternate-secondary); display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
.footer_coordonnees a:hover { text-decoration: underline; }
.footer_bas {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espace-3) var(--espace-6);
  padding-top: var(--espace-6); border-top: 1px solid var(--border-color-alternate);
  font-size: .8125rem; color: var(--text-color-alternate-secondary);
}
.footer_bas ul { display: flex; flex-wrap: wrap; gap: var(--espace-4); }
.footer_bas a { display: inline-flex; align-items: center; min-height: var(--cible-tactile); }
@media (min-width: 48rem) { .footer_contenu { grid-template-columns: 1.2fr 1fr 1fr; } .footer_bas { grid-column: 1 / -1; } }

/* ---------- 18. Barre de réservation mobile ---------- */
.reservation_barre {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-index-barre);
  display: flex; gap: var(--espace-3); align-items: center;
  padding: var(--espace-3) var(--espace-4) calc(var(--espace-3) + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .92); color: var(--text-color-alternate);
  border-top: 1px solid var(--border-color-alternate); backdrop-filter: blur(8px);
}
.reservation_barre .button { flex: 1; }
.reservation_barre-telephone {
  display: grid; place-items: center; width: var(--cible-tactile); height: var(--cible-tactile);
  border-radius: 50%; border: 1px solid var(--border-color-alternate); flex: none;
}
.reservation_barre-telephone svg { width: 1.25rem; height: 1.25rem; }
@media (min-width: 48rem) { .reservation_barre { display: none; } }
@media (max-width: 47.99rem) { .footer { padding-bottom: 5rem; } }

/* =============================================================
   19. PAGES INTÉRIEURES
   ============================================================= */

/* Hero des pages intérieures : plus court, le titre porte seul */
.section_hero.is-interne .padding-section-hero,
.section_hero.is-court .padding-section-hero { padding-top: var(--espace-12); padding-bottom: var(--espace-12); }
.section_hero.is-interne .hero_contenu { min-height: 0; }
.section_hero.is-interne .hero_accroche,
.section_hero.is-court .hero_accroche {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem); line-height: 1.08;
}
@media (min-width: 64rem) {
  .section_hero.is-interne .padding-section-hero { padding-top: var(--espace-16); padding-bottom: var(--espace-16); }
  .section_hero.is-court .padding-section-hero { padding-top: var(--espace-16); padding-bottom: var(--espace-16); }
}

/* Hero à deux colonnes : texte + mosaïque de photos */
.hero_double { display: grid; gap: var(--espace-8); align-items: center; }
.hero_mosaique { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-2); }
.hero_mosaique li { overflow: hidden; border-radius: var(--radius-small); aspect-ratio: 1; }
.hero_mosaique li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (min-width: 64rem) {
  .hero_double { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espace-16); }
  .hero_mosaique { gap: var(--espace-3); }
}

/* Les six règles du jeu */
.section_regles { position: relative; background: var(--background-color-primary); }
.section_regles > * { position: relative; z-index: var(--z-index-contenu); }
.regles_contenu { display: grid; gap: var(--espace-8); }
.regles_entete { text-align: center; max-width: 44rem; margin-inline: auto; }
.regles_liste { display: grid; gap: var(--espace-5); counter-reset: regle; }
.regle {
  position: relative; display: grid; gap: var(--espace-3); align-content: start;
  padding: var(--espace-8) var(--espace-6) var(--espace-6);
  background: var(--background-color-secondary); border-radius: var(--radius-medium);
  box-shadow: 0 1px 0 var(--border-color-primary);
}
.regle_numero {
  position: absolute; top: var(--espace-4); right: var(--espace-5);
  font-family: var(--font-family-titre); font-weight: 500; font-size: 1.5rem;
  color: var(--base-color-creme-300);
}
.regle_picto { width: 4.5rem; height: 3.25rem; object-fit: contain; }
.regle h3 { font-size: 1.375rem; }
.regle p { font-size: .9375rem; color: var(--text-color-secondary); }
.regle b { font-weight: 500; color: var(--text-color-brand-strong); }
.regle b.est-rouge { color: var(--text-color-echec); }
.regle b.est-vert { color: var(--text-color-succes); }
.regles_actions { display: flex; justify-content: center; }
@media (min-width: 48rem) { .regles_liste { grid-template-columns: repeat(2, 1fr); gap: var(--espace-6); } }
@media (min-width: 64rem) { .regles_liste { grid-template-columns: repeat(3, 1fr); } }

/* Carte d'offre (bar, restauration, formats de groupe) */
.carte_offre {
  display: grid; gap: var(--espace-3); align-content: start;
  padding: var(--espace-5); background: var(--background-color-primary);
  border-radius: var(--radius-medium); border: 1px solid var(--border-color-primary);
}
.carte_offre > .groupe_media { margin: calc(var(--espace-5) * -1) calc(var(--espace-5) * -1) var(--espace-2); border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
/* Sur une section sombre, la carte suit le fond au lieu de le trouer.
   La variante is-clair éclaircit la section : les règles sombres se retirent. */
.section_groupes.is-clair { background: var(--background-color-secondary); color: var(--text-color-primary); }
.section_groupes.is-creme { background: var(--background-color-primary); color: var(--text-color-primary); }
.section_groupes:not(.is-clair):not(.is-creme) .carte_offre {
  background: var(--base-color-noir-700); border-color: var(--border-color-alternate); color: var(--text-color-alternate);
}
.section_groupes:not(.is-clair):not(.is-creme) .carte_offre .groupe_texte,
.section_groupes:not(.is-clair):not(.is-creme) .carte_offre .carte_offre-liste { color: var(--text-color-alternate-secondary); }
.section_groupes:not(.is-clair):not(.is-creme) .carte_offre .carte_offre-etiquette,
.section_groupes:not(.is-clair):not(.is-creme) .carte_offre .carte_offre-liste li::before { color: var(--base-color-orange-500); }
.section_groupes:not(.is-clair):not(.is-creme) .carte_offre .button.is-secondary { color: var(--text-color-alternate); }
.section_groupes:not(.is-clair):not(.is-creme) .groupes_chapo { color: var(--text-color-alternate-secondary); }
.section_groupes.is-clair .groupes_chapo,
.section_groupes.is-creme .groupes_chapo { color: var(--text-color-secondary); }
.carte_offre-etiquette {
  font-family: var(--font-family-titre); font-weight: 500; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-color-brand-strong);
}
.carte_offre h3 { font-size: 1.5rem; }
.carte_offre-liste { display: grid; gap: var(--espace-2); font-size: .9375rem; color: var(--text-color-secondary); }
.carte_offre-liste li { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-2); }
.carte_offre-liste li::before { content: "→"; color: var(--text-color-brand-strong); }

/* Carte cadeau : la page */
.section_cadeau { position: relative; background: var(--background-color-primary); }
.section_cadeau > * { position: relative; z-index: var(--z-index-contenu); }
.cadeau_contenu { display: grid; gap: var(--espace-8); align-items: center; }
.cadeau_visuel { width: 100%; border-radius: var(--radius-medium); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .25); }
.cadeau_texte { display: grid; gap: var(--espace-4); justify-items: start; }
.cadeau_points { display: grid; gap: var(--espace-2); font-size: .9375rem; color: var(--text-color-secondary); }
.cadeau_points li { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-2); }
.cadeau_points li::before { content: "→"; color: var(--text-color-brand-strong); }
@media (min-width: 48rem) { .cadeau_contenu { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--espace-12); } }

/* Contact */
.section_contact { position: relative; background: var(--background-color-primary); }
.section_contact > * { position: relative; z-index: var(--z-index-contenu); }
.contact_titre { font-family: var(--font-family-titre); font-weight: 500; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); line-height: 1.08; margin-bottom: var(--espace-10); }
/* ---------- Jointures : le sol précédent se transmet ----------
   Onze sections, dix changements de sol, dix coupes franches : chaque bloc
   commençait comme un rectangle posé, sans rien qui le relie au précédent.

   Ici, la section entrante porte sur ses 7 premiers rem un voile de la
   couleur du sol qu'elle quitte, qui s'éteint. L'alternance crème / noir est
   conservée — c'est la DA, on ne la lisse pas — mais l'arête devient un
   passage. La rampe est en cinq paliers adoucis : une rampe linéaire montre
   ses deux extrémités (bandes de Mach), une rampe qui part et finit à pente
   nulle ne se voit pas.

   `--sol-precedent` est une variable d'INSTANCE, posée en style inline par
   `node _build/jointures.mjs`, qui mesure le sol réellement rendu de chaque
   section plutôt que de le supposer. À relancer après toute refonte de DA.

   Sans `color-mix`, la règle est simplement ignorée et l'on retrouve la coupe
   franche d'aujourd'hui : la dégradation est propre. */
[style*="--sol-precedent"] {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--sol-precedent) 18%, transparent) 0,
    color-mix(in srgb, var(--sol-precedent) 14%, transparent) 20%,
    color-mix(in srgb, var(--sol-precedent) 8%, transparent) 45%,
    color-mix(in srgb, var(--sol-precedent) 3.5%, transparent) 70%,
    color-mix(in srgb, var(--sol-precedent) 1%, transparent) 88%,
    transparent 100%);
  background-size: 100% var(--jointure, 7rem);
  background-repeat: no-repeat;
}

/* Le rythme s'accélère vers l'appel final : les trois derniers passages sont
   de plus en plus courts, les blocs se rapprochent, la page se referme. */
.section_infos { --jointure: 6rem; }
.section_faq   { --jointure: 4.5rem; }
.section_cta   { --jointure: 3rem; }

/* ---------- Pages légales ----------
   Du texte long qu'on lit rarement mais qui doit être lisible quand on le lit :
   une seule colonne, mesure courte, hiérarchie franche. `mentions_manque` est
   volontairement voyant — c'est un trou dans une page à valeur juridique, il
   ne doit pas pouvoir partir en ligne sans qu'on le voie. */
.section_mentions { background: var(--background-color-primary); }
.mentions_contenu { display: grid; gap: var(--espace-6); }
.mentions_contenu h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.mentions_chapo { font-size: 1.125rem; color: var(--text-color-secondary); max-width: 42rem; }
.mentions_bloc { display: grid; gap: var(--espace-3); max-width: 42rem; }
.mentions_bloc h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); margin-top: var(--espace-6); }
.mentions_bloc p { color: var(--text-color-secondary); }
.mentions_liste { display: grid; gap: var(--espace-3); }
.mentions_liste li { display: grid; gap: var(--espace-1); color: var(--text-color-secondary); }
.mentions_liste b {
  font-family: var(--font-family-titre); font-weight: 500; font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-color-brand-strong);
}
.mentions_manque {
  display: inline-block; padding: var(--espace-1) var(--espace-3);
  background: var(--base-color-orange-600); color: var(--base-color-creme-100);
  border-radius: var(--radius-small); font-size: .8125rem; font-weight: 500;
}

.contact_contenu { display: grid; gap: var(--espace-8); align-items: start; }
/* La colonne du formulaire porte enfin son titre : même échelle que le « Infos
   pratiques » d'en face, pour que les deux entrées de la page se lisent comme
   deux entrées et non comme un bloc et son annexe. */
.contact_colonne { display: grid; gap: var(--espace-4); min-width: 0; }
.contact_sous-titre { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem); }
.contact_formulaire {
  display: grid; gap: var(--espace-4); padding: var(--espace-6);
  background: var(--background-color-secondary); border-radius: var(--radius-medium);
  box-shadow: 0 1px 0 var(--border-color-primary);
}
/* `min-width: 0` sur toute la chaîne. Un élément de grille a pour largeur
   minimale son min-content, et celui d'un `<input>` vient de son attribut
   `size` implicite — une vingtaine de caractères, largeur intrinsèque que rien
   ne fait céder. Le formulaire mesurait donc 440 px dans un écran de 390 :
   à contact @390, le second bouton de la barre d'action était coupé net. */
.champ { display: grid; gap: var(--espace-2); min-width: 0; }
.champ label { font-size: .875rem; font-weight: 500; }
.champ abbr { color: var(--text-color-brand-strong); text-decoration: none; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 1rem; color: inherit; min-height: var(--cible-tactile);
  padding: var(--espace-2) var(--espace-3);
  background: var(--background-color-primary); border: 1px solid var(--border-color-primary);
  border-radius: var(--radius-small);
  min-width: 0; width: 100%;
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { border-color: var(--base-color-orange-600); }
.champ_paire { display: grid; gap: var(--espace-4); min-width: 0; }
.champ_consentement { grid-template-columns: auto 1fr; gap: var(--espace-3); align-items: start; }
/* 24 px, plancher de WCAG 2.5.8 (AA) — la case était à 20. C'est la case
   OBLIGATOIRE du seul formulaire du site : la rater au pouce est le dernier
   obstacle avant l'envoi. */
.champ_consentement input { min-height: 0; width: 1.5rem; height: 1.5rem; margin-top: .0625rem; accent-color: var(--base-color-orange-600); }
.champ_consentement label { font-size: .8125rem; color: var(--text-color-secondary); font-weight: 400; }
.contact_formulaire > .text-size-small { color: var(--text-color-secondary); }

/* Aiguillage de la demande. Deux choix, jamais plus : au-delà, on redemande au
   visiteur de faire le tri à notre place. Le second choix ouvre les champs de
   créneau — voir `.champ_groupe`. */
.champ_objet { display: grid; gap: var(--espace-3); border: 0; padding: 0; margin: 0; }
.champ_objet legend { font-size: .875rem; font-weight: 500; padding: 0; margin-bottom: var(--espace-2); }
.champ_choix { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-3); align-items: start; margin: 0; }
.champ_choix input {
  min-height: 0; width: 1.5rem; height: 1.5rem; margin-top: 0;   /* 24 px — WCAG 2.5.8 */
  accent-color: var(--base-color-orange-600);
}
.champ_choix label { display: grid; gap: .125rem; font-weight: 400; cursor: pointer; }
.champ_choix label b { font-weight: 500; }
.champ_choix label span { font-size: .8125rem; color: var(--text-color-secondary); }

/* Bloc « groupe ». Visible par défaut : sans JavaScript, tout reste accessible
   et rien n'est obligatoire. app.js le replie et pose `required` au besoin. */
.champ_groupe { display: grid; gap: var(--espace-4); }
.champ_groupe[hidden] { display: none; }
.champ_groupe-note {
  margin: 0; font-size: .8125rem; color: var(--text-color-secondary);
  padding-left: var(--espace-3); border-left: 1px solid var(--border-color-primary);
}
@media (min-width: 48rem) { .champ_paire { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
  .contact_contenu { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--espace-8); }
  .contact_formulaire { padding: var(--espace-8); }
}

/* =============================================================
   20. AJUSTEMENTS — retours de recette
   ============================================================= */

/* Coordonnées : libellé en Vitesse plutôt qu'une icône dessinée.
   Les seuls pictos du site sont les fichiers SVG officiels du parc. */
.infos_coordonnees li { grid-template-columns: 6rem 1fr; align-items: baseline; }
.infos_libelle {
  font-family: var(--font-family-titre); font-weight: 500; font-size: .8125rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--base-color-orange-500);
}
.footer_coordonnees b { color: var(--base-color-orange-500); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }

/* Chevron de FAQ : forme d'interface tracée en CSS, pas une illustration */
.faq_chevron {
  width: .625rem; height: .625rem; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-.125rem, -.125rem);
  transition: transform var(--duration-moyenne) var(--easing-sortie);
}
.faq_porte[open] .faq_chevron { transform: rotate(225deg) translate(-.125rem, -.125rem); }

/* Badge : picto officiel du parc */
.badge_puce img { width: 1.75rem; height: 1.375rem; object-fit: contain; filter: invert(1) brightness(2); }

/* Barre mobile : libellé au lieu d'une icône */
.reservation_barre-telephone {
  width: auto; min-width: var(--cible-tactile); padding-inline: var(--espace-4); border-radius: 999px;
  font-family: var(--font-family-titre); font-weight: 500; font-size: .9375rem; text-decoration: none;
}

/* Note d'avis sans étoiles inventées : le lien porte l'information */
.hero_avis-lien, .avis_note { color: var(--text-color-alternate-secondary); }
.avis_note { font-family: var(--font-family-texte); font-size: .9375rem; }

/* ---------- Formules : trois cartes plutôt qu'un tableau ---------- */
.formules { display: grid; gap: var(--espace-3); }
.formule {
  display: grid; gap: var(--espace-1); align-content: start;
  padding: var(--espace-6) var(--espace-5);
  background: var(--background-color-secondary);
  border: 1px solid var(--border-color-primary); border-radius: var(--radius-medium);
  border-top: 3px solid var(--base-color-orange-600);
}
.formule_duree {
  font-family: var(--font-family-titre); font-weight: 500; font-size: .9375rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-color-brand-strong);
}
.formule_prix { display: flex; align-items: baseline; gap: .25rem; font-family: var(--font-family-titre); color: var(--text-color-primary); }
.formule_prix b { font-weight: 500; font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.formule_prix span { font-size: 1.25rem; }
.formule_unite { font-size: .875rem; color: var(--text-color-secondary); }
.formule_reduit {
  margin-top: var(--espace-2); padding-top: var(--espace-2);
  border-top: 1px solid var(--border-color-primary);
  font-size: .875rem; color: var(--text-color-secondary); font-variant-numeric: tabular-nums;
}
/* `repeat(3, 1fr)` valait `minmax(auto, 1fr)`, et ce `auto` vaut min-content :
   les pistes ne descendaient jamais sous la largeur du prix, soit 191 px.
   Dans la colonne étroite de `tarifs_contenu`, la grille faisait 606 px pour
   512 px disponibles — la carte « Pass 2 h », la plus chère, était coupée de
   30 px à 1024 px de large. Mesuré, pas supposé.

   `auto-fit` compte lui-même combien de cartes tiennent : 3 quand la place
   existe, 2 sur une colonne étroite, 1 sur un téléphone. Le `min(100%, …)`
   empêche la borne basse de dépasser le conteneur, seul cas où `auto-fit`
   déborde encore. La largeur de référence, 12.5rem, est prise SUR la mesure
   du min-content, pas choisie au jugé. */
.formules { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); min-width: 0; }
.formule { min-width: 0; }

.options { display: grid; gap: var(--espace-2); }
.options li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--espace-1) var(--espace-4); align-items: baseline;
  padding: var(--espace-3) 0; border-bottom: 1px solid var(--border-color-primary);
}
.options li:last-child { border-bottom: 0; }
.options b {
  font-family: var(--font-family-titre); font-weight: 500; font-size: .9375rem;
  white-space: nowrap; color: var(--text-color-primary);
}
.options span { font-size: .9375rem; color: var(--text-color-secondary); }
@media (min-width: 48rem) { .options li { grid-template-columns: 10rem 1fr; } }

/* ---------- « Un moment parfait pour… » (page Bar & restauration) ---------- */
.section_moments { position: relative; overflow: clip; background: var(--background-color-alternate); color: var(--text-color-alternate); }
.moments_contenu { position: relative; z-index: var(--z-index-contenu); display: grid; gap: var(--espace-8); justify-items: center; }
.moments_titre { text-align: center; }
.moments_liste { display: grid; gap: var(--espace-5); width: 100%; }
.moment {
  display: grid; gap: var(--espace-3); align-content: start; text-align: center;
  padding: var(--espace-5); background: var(--background-color-secondary); color: var(--text-color-primary);
  border-radius: var(--radius-medium);
}
.moment_media { display: block; overflow: hidden; border-radius: var(--radius-small); aspect-ratio: 16 / 10; margin: calc(var(--espace-5) * -1) calc(var(--espace-5) * -1) 0; border-radius: var(--radius-medium) var(--radius-medium) 0 0; }
.moment h3 { font-size: 1.375rem; }
.moment p { font-size: .9375rem; color: var(--text-color-secondary); }
@media (min-width: 48rem) { .moments_liste { grid-template-columns: repeat(3, 1fr); } }

/* FAQ courte des pages intérieures : renvoi vers la FAQ complète */
.faq_court { display: grid; gap: var(--espace-4); justify-items: center; text-align: center; }
.faq_court h2 { max-width: 34rem; }

/* =============================================================
   21. UTILITAIRES DE MISE EN PAGE
   Remplacent les styles écrits en attribut : le style vit dans le CSS,
   jamais dans le HTML. Général → spécifique, aucune abréviation.
   ============================================================= */

/* Listes qui s'adaptent au nombre de cartes, sans média-query */
.liste-auto-large { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.liste-auto-medium { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.liste-auto-small { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

/* Ratios de média */
.ratio-quatre-tiers { aspect-ratio: 4 / 3; }
.ratio-seize-dixiemes { aspect-ratio: 16 / 10; }
.hauteur-pleine { height: 100%; }

/* Fonds de section, quand une section réutilise un composant sur un autre fond */
.background-color-primary { background-color: var(--background-color-primary); }
.background-color-secondary { background-color: var(--background-color-secondary); }

/* Largeurs et centrage */
.max-width-medium { max-width: 60rem; }
.max-width-small { max-width: 44rem; }
.align-center { margin-inline: auto; text-align: center; justify-items: center; }

/* Annule la marge haute d'un composant réutilisé hors de son contexte d'origine */
.margin-top-0 { margin-top: 0; }

/* Le média d'une carte d'offre : détouré du padding, coins arrondis en tête */
.carte_offre > .groupe_media { margin-bottom: var(--espace-2); }

/* Sprite d'icônes : retiré du flux sans peser sur la mise en page */
.sprite-icones { position: absolute; width: 0; height: 0; }
/* Titre du bloc cadeau : plus petit qu'un h2 de section, sans changer la balise */
.heading-style-h3 { font-size: 1.5rem; }





/* =============================================================
   22. ALTERNANCE DES FONDS
   Le noir raconte, le clair vend — mais deux valeurs seules finissent
   par battre comme un métronome. Quatre valeurs, réparties pour que
   l'œil ne prévoie jamais la suivante :

     noir profond   hero · concept · avis · pied
     noir surélevé  le mur des trente portes, un cran au-dessus
     crème          faits · tarifs · le lieu · FAQ
     blanc          infos pratiques, la seule section en blanc pur
     bleu nuit      groupes, en rappel du dernier appel
     orange         le bandeau, accent unique

   Chaque section garde en plus son propre cadrage de texture (bloc 3),
   pour que le même grillage ne se lise jamais deux fois pareil.
   ============================================================= */

/* Groupes : bleu nuit. Le bloc respire entre deux crèmes et annonce
   la couleur du dernier appel, cinq sections plus bas. */
.section_groupes:not(.is-clair):not(.is-creme) {
  background: var(--background-color-cta);
  --texture-position: 60% 40%; --texture-taille: 125%; --texture-opacite: .5;
}
.section_groupes:not(.is-clair):not(.is-creme) .groupe_item { border-color: rgba(247, 239, 225, .18); }

/* Infos pratiques : blanc pur. Une section de tâche, la plus plate de la page,
   c'est là que le blanc sert le mieux. */
.section_infos { background: var(--background-color-secondary); }
.section_infos.fond_grain::before { opacity: .5; }

/* FAQ : crème plutôt que blanc, pour ne pas enchaîner deux blancs. */
.section_faq { background: var(--background-color-primary); }
.section_faq .faq_porte { background: var(--background-color-secondary); }

/* Le mur des portes reste un cran au-dessus du noir profond : le regard
   sent la marche sans qu'on lui dessine une frontière. */
.section_cellules { background: var(--background-color-alternate-raised); }