/* ==========================================================================
   Gabarit site vitrine : feuille de style de départ

   À FAIRE PAR PROJET : remplacer les jetons de couleur et de police (bloc :root et bloc
   sombre) d'après la direction choisie avec les skills de design. Ne pas garder la palette
   neutre du gabarit telle quelle.

   Système de formes (règle unique, appliquée partout) :
     - boutons et étiquettes  : pilule (999px)
     - cadres, cartes, blocs   : 28px  (--r-lg)
     - images internes         : 18px  (--r-md)
     - champs de formulaire    : 12px  (--r-sm)

   Échelle des z-index (ne pas improviser d'autres valeurs) :
     39   menu mobile plein écran
     40   barre de navigation collante
     60   grain fixe (si utilisé)
     100  lien d'évitement
     (les <dialog> vivent dans la couche supérieure du navigateur)
   ========================================================================== */

/* ---------- Jetons ---------- */
:root {
  color-scheme: light dark;

  --bg: #FFF4F7;              /* fond de page */
  --bg-2: #FFE9F0;            /* fond de section teintée */
  --surface: #FFFDFD;         /* cartes */
  --ink: #2B1838;             /* texte principal */
  --ink-2: #5D4B6E;           /* texte secondaire */
  --ink-3: #6E5C7F;           /* aides, légendes (min. 4,5:1 sur --surface) */
  --line: rgba(43, 24, 56, 0.10);
  --line-strong: rgba(43, 24, 56, 0.20);
  --field-border: #8C7A9C;   /* contour des champs : au moins 3:1 contre la carte, à remesurer si les couleurs changent */
  --tint: rgba(191, 19, 112, 0.06);
  --tint-strong: rgba(191, 19, 112, 0.12);

  --brand: #BF1370;           /* couleur vive : boutons, accents. UNE seule par projet. */
  --brand-soft: #FF9BCB;      /* version claire pour texte et focus sur fond profond */
  --deep: #2B1838;            /* blocs de fond profond */
  --deep-2: #1F1029;
  --on-green: #FFF4F7;        /* texte sur fond profond */
  --on-green-2: rgba(255, 244, 247, 0.78);
  --accent-text: #BF1370;
  --sun: #FFD23F;             /* jaune du logo : dates prises, puces ; texte prune dessus seulement (11:1) */
  --sun-ink: #2B1838;
  --font-mono: "DM Mono", ui-monospace, "Cascadia Mono", monospace;

  --btn-bg: var(--brand);
  --btn-bg-hover: #A50F60;
  --btn-fg: #FFF8FB;
  --focus: var(--brand);

  --error: #A93F27;
  --error-bg: #FBE9EE;
  --shadow-rgb: 43, 24, 56;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Durées : un seul langage de mouvement */
  --t-fast: 180ms;   /* retours de survol et de focus */
  --t-base: 280ms;   /* changements d'état (cartes, menu, fiche) */
  --t-slow: 700ms;   /* zooms de photos, grandes apparitions */

  --font-display: "Fredoka", "Segoe UI", system-ui, sans-serif;   /* titres : changer par projet */
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Petites tailles de texte, nommées par usage : jamais une taille écrite à la main entre les deux */
  --text-fine: .85rem;    /* petits caractères : aide et erreurs des champs, consentement, bas de page */
  --text-label: .9rem;    /* étiquettes : puces, badges, méta, indices, numéros d'étape */
  --text-small: .95rem;   /* texte secondaire : liens de la barre, libellés, petits boutons, légendes */

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 7.5vw, 7rem);
  --nav-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1024;
    --bg-2: #211433;
    --surface: #241832;
    --ink: #F6EEF3;
    --ink-2: #C9BBD3;
    --ink-3: #B3A4BE;
    --line: rgba(246, 238, 243, 0.10);
    --line-strong: rgba(246, 238, 243, 0.20);
    --field-border: rgba(246, 238, 243, 0.45);
    --tint: rgba(255, 95, 173, 0.10);
    --tint-strong: rgba(255, 95, 173, 0.18);

    --brand: #FF5FAD;
    --deep: #2B1838;
    --deep-2: #1F1029;
    --on-green: #F6EEF3;
    --on-green-2: rgba(246, 238, 243, 0.76);
    --accent-text: #FF5FAD;

    --btn-bg: #FF5FAD;
    --btn-bg-hover: #FF7DBD;
    --btn-fg: #1A1024;
    --focus: #FF5FAD;

    --error: #FF9A8C;
    --error-bg: rgba(255, 154, 140, 0.14);
    --shadow-rgb: 0, 0, 0;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--brand) var(--bg-2);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); color: var(--ink); }
input, textarea, select { caret-color: var(--brand); }
button, input, select, textarea { font: inherit; color: inherit; }
p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 500; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Sur les surfaces profondes, l'anneau passe en version claire. Pas dans la carte blanche du
   formulaire, posée sur le panneau contact : l'anneau pâle y serait presque invisible */
.section--deep :focus-visible, .contact__copy :focus-visible, .consignes__bloc--urgence :focus-visible { outline-color: var(--brand-soft); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--tint { background: var(--bg-2); }
.section--deep { background: var(--deep); color: var(--on-green); border-radius: clamp(24px, 4vw, 56px); }

.skip-link {
  position: absolute; top: -100%; left: var(--gutter); z-index: 100;
  padding: .6rem 1rem; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .75rem; }

#top-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .85rem;
  min-height: 54px; padding: .5rem .5rem .5rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-soft), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.btn:active { transform: scale(.96); }
/* Sur un écran étroit, le libellé passe à la ligne plutôt que de déborder de sa carte */
.btn__label { line-height: 1.2; text-align: start; }
.btn__icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  transition: transform var(--t-base) var(--ease-soft);
}
/* Survols réservés aux appareils qui survolent vraiment (souris, pavé tactile) : sur un écran
   tactile, un survol resterait collé après un toucher */
@media (hover: hover) { .btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); } }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 14px 30px -18px rgba(var(--shadow-rgb), .5); }
@media (hover: hover) { .btn--primary:hover { background: var(--btn-bg-hover); } }
.btn--primary .btn__icon { background: rgba(255, 255, 255, .18); }
@media (prefers-color-scheme: dark) {
  .btn--primary { box-shadow: none; }
  .btn--primary .btn__icon { background: rgba(15, 20, 23, .16); }
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
@media (hover: hover) { .btn--ghost:hover { background: var(--tint); border-color: var(--ink-3); } }
.btn--ghost .btn__icon { background: var(--tint); }
.btn--light { background: var(--on-green); color: var(--deep); }
.btn--light .btn__icon { background: rgba(0, 0, 0, .10); }
.btn--sm { min-height: 46px; padding: .35rem .35rem .35rem 1.15rem; font-size: var(--text-small); gap: .7rem; }
.btn--sm .btn__icon { width: 32px; height: 32px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .72; cursor: progress; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--line);
}
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1;
}
.brand picture { display: contents; }
.brand__mark { width: 44px; height: 44px; object-fit: contain; flex: none; }
.nav__links { display: flex; gap: .15rem; }
.nav__links a {
  text-decoration: none; padding: .7rem .95rem; border-radius: 999px;
  color: var(--ink-2); font-weight: 500; font-size: var(--text-small); line-height: 1.4;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__links a.is-active { color: var(--ink); background: var(--tint); }
@media (hover: hover) { .nav__links a:hover { color: var(--ink); background: var(--tint); } }
.nav__toggle {
  display: none; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
}
.nav__burger { position: relative; display: block; width: 18px; height: 12px; }
.nav__burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform var(--t-base) var(--ease-soft);
}
.nav__burger span:nth-child(1) { top: 0; }
.nav__burger span:nth-child(2) { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
/* Seuil du menu. Avec le contenu d'exemple, la barre complète (nom, liens, bouton) demande 1 008 px.
   À remesurer avec le nom et les liens du client, et à reporter dans js/main.js (même valeur plus 1).
   Amusement Bergenois, avec « Règlements » : 996 px de contenu, soit 1 076 px d'écran ; le seuil
   garde 45 px de marge (polices de secours, autres systèmes). */
@media (max-width: 1120px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: grid; }
}

/* Menu mobile plein écran : il défile quand il dépasse l'écran (zoom 200 %, téléphone couché) */
.menu {
  position: fixed; inset: 0; z-index: 39;
  padding-top: var(--nav-h);
  overflow-y: auto; overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__inner { display: grid; gap: .25rem; padding-block: 2rem; }
.menu__inner > a:not(.btn) {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600;
  text-decoration: none; padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.menu__inner > a {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  transition-delay: calc(60ms + var(--i, 0) * 50ms);
}
.menu.is-open .menu__inner > a { opacity: 1; transform: none; }
.menu__inner .btn { margin-top: 1.75rem; justify-self: start; }
body.menu-open { overflow: hidden; }
/* Menu ouvert : la barre devient opaque, sinon les liens qui défilent passent derrière le nom */
body.menu-open .nav { background: var(--bg); }

/* ---------- Héro ---------- */
.hero {
  position: relative; overflow: clip;
  padding-top: clamp(1.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end;
}
.hero__copy { grid-column: 1 / 7; padding-bottom: clamp(1.5rem, 5vw, 5rem); }
.hero__media { grid-column: 7 / 13; position: relative; }
/* Le cadre du héro déborde à droite de la grille, seulement à partir de 1 340 px : en dessous,
   le bord de l'écran le rognerait (24 px à 1 280 px) */
@media (min-width: 1340px) { .hero__media { margin-right: -5vw; } }
.hero h1 { font-size: clamp(2.6rem, 1.4rem + 3.8vw, 4.4rem); line-height: 1.02; }
.hero__lede { margin-top: 1.5rem; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero__media .frame img { aspect-ratio: 4 / 5; }
@media (max-width: 900px) {
  /* Une seule colonne : les 11 espacements d'une grille à 12 colonnes dépasseraient un téléphone */
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .hero__copy, .hero__media { grid-column: 1 / -1; }
  .hero__media { margin-top: 1rem; }
  .hero__media .frame img { aspect-ratio: 4 / 3; }
}

/* ---------- Cadre à double bordure (photos) ---------- */
.frame {
  padding: 8px; border-radius: var(--r-lg);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(var(--shadow-rgb), .4);
}
.frame__inner {
  border-radius: calc(var(--r-lg) - 8px); overflow: hidden;
  background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- En-têtes de section ---------- */
.section__head { max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head h2, .contact h2 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.5rem); line-height: 1.04; }
.section__head p { margin-top: 1.1rem; color: var(--ink-2); font-size: 1.12rem; max-width: 56ch; text-wrap: pretty; }
.section--deep .section__head p { color: var(--on-green-2); }
.section__head--right { margin-left: auto; text-align: right; }
.section__head--right p { margin-left: auto; }
/* Amorce en italique : remplace les étiquettes en capitales au-dessus des titres (à éviter) */
.lead-in { margin-bottom: .6rem; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.3rem; color: var(--accent-text); }

/* ---------- Services : quatre cartes en quinconce ---------- */
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (min-width: 901px) { .svc:nth-child(even) { margin-top: 4rem; } }
.svc {
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.svc.svc--flip { flex-direction: column-reverse; }
/* Ces cartes ne sont pas cliquables : pas de soulèvement au survol, seulement le zoom lent de la photo */
.svc__media { aspect-ratio: 16 / 9; overflow: hidden; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .svc:hover .svc__media img { transform: scale(1.04); } }
.svc__body { padding: clamp(1.5rem, 2.6vw, 2.1rem); }
.svc h3 { font-size: 1.8rem; line-height: 1.1; }
.svc__lede { margin-top: .6rem; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.35rem; }
.chips li {
  padding: .45rem .95rem; border-radius: 999px;
  font-size: var(--text-label); font-weight: 500; color: var(--ink);
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

/* ---------- Réalisations : grille simple ---------- */
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.work__pic {
  border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3 / 2;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 30px 60px -40px rgba(0, 0, 0, .6);
}
.work__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .work__grid figure:hover .work__pic img { transform: scale(1.03); } }
.work__grid figcaption { margin-top: .8rem; font-size: var(--text-small); color: var(--on-green-2); }
@media (max-width: 900px) { .work__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .work__grid { grid-template-columns: 1fr; } }

/* ---------- Approche : split ---------- */
.split { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split__media { grid-column: 1 / 6; }
.split__copy { grid-column: 6 / 13; }
.split__media .frame img { aspect-ratio: 4 / 5; }
.split__copy h2 { font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; }
.split__lede { margin-top: 1.25rem; color: var(--ink-2); font-size: 1.1rem; max-width: 56ch; text-wrap: pretty; }
.steps { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.steps h3 { font-size: 1.4rem; line-height: 1.1; }
.steps p { color: var(--ink-2); font-size: var(--text-small); text-wrap: pretty; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .split__media, .split__copy { grid-column: 1 / -1; }
  .split__media .frame img { aspect-ratio: 4 / 3; }
  .steps li { grid-template-columns: 1fr; gap: .35rem; }
}

/* ---------- Contact ---------- */
.contact {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem); padding: clamp(2rem, 5vw, 4.5rem);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--on-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.contact__copy { grid-column: 1 / 6; }
.contact__form { grid-column: 7 / 13; container-type: inline-size; }   /* les rangées du formulaire s'empilent quand la carte est étroite */
.contact__lede { margin-top: 1.25rem; color: var(--on-green-2); font-size: 1.1rem; max-width: 46ch; text-wrap: pretty; }
.next { margin-top: 2.5rem; }
.next h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.next ol { counter-reset: etape; margin-top: 1rem; display: grid; gap: .9rem; }
.next li { display: grid; grid-template-columns: 2rem 1fr; gap: .9rem; align-items: center; color: var(--on-green-2); }
.next li::before {
  counter-increment: etape; content: counter(etape);
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .10); color: var(--on-green); font-weight: 600; font-size: var(--text-label);
}
.direct { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; gap: .5rem; }
.direct p { color: var(--on-green-2); }
.direct a {
  display: inline-flex; align-items: center; gap: .6rem; justify-self: start; max-width: 100%; overflow-wrap: anywhere;
  color: var(--on-green); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent; transition: border-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .direct a:hover { border-bottom-color: currentColor; } }
.direct a i { font-size: 1.15rem; }
@media (max-width: 1000px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .contact__copy, .contact__form { grid-column: 1 / -1; }
}
/* Téléphone : le panneau, le cadre et la carte additionnaient leurs marges (champs de 207 px sur
   un écran de 375 px, bouton d'envoi sur deux lignes). Le formulaire s'approche des bords du
   panneau ; le texte au-dessus garde son retrait. */
@media (max-width: 600px) {
  .contact { padding: 1.75rem .875rem .875rem; }
  .contact__copy { padding-inline: .625rem; }
  .card__inner { padding: 1.25rem 1rem; }
}

/* Carte formulaire (double bordure) */
.card { padding: 8px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.card__inner {
  background: var(--surface); color: var(--ink);
  border-radius: calc(var(--r-lg) - 8px); padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
@media (prefers-color-scheme: dark) { .card__inner { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } }

/* ---------- Formulaire ---------- */
.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 600px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
/* Carte étroite (ex. écran de 1 024 px, deux colonnes serrées) : un champ par rangée, sinon les champs débordent */
@container (max-width: 460px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
/* align-content : un message sous un champ ne décale pas le champ voisin de la même rangée */
.field { display: grid; gap: .45rem; min-width: 0; align-content: start; }
.field label { font-weight: 600; font-size: var(--text-small); }
.field .optional { font-weight: 400; color: var(--ink-3); }
.field .hint { font-size: var(--text-fine); color: var(--ink-3); }
.field .error { display: none; font-size: var(--text-fine); font-weight: 500; color: var(--error); }
.field.is-invalid .error { display: block; }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: .85rem 1rem;
  border-radius: var(--r-sm); border: 1px solid var(--field-border);
  background: var(--bg); color: var(--ink);
  transition: border-color var(--t-fast) var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
/* Un vrai contour plutôt qu'une ombre : le contraste élevé de Windows efface les ombres */
/* :focus-within : l'icône du calendrier d'un champ de date prend le focus au clavier, le champ
   garde alors son anneau */
.field input:focus, .field input:focus-within, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--error); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; }
.select select:invalid { color: var(--ink-3); }
.select i { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); font-size: 1.05rem; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.form__alert {
  display: flex; gap: .65rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: var(--r-sm);
  background: var(--error-bg); color: var(--error); font-size: var(--text-small); font-weight: 500;
  overflow-wrap: anywhere;   /* une adresse courriel longue ne déborde pas sur un écran étroit */
  animation: rise-in var(--t-base) var(--ease);
}
.form__alert i { font-size: 1.2rem; flex: none; }
.form__consent { font-size: var(--text-fine); color: var(--ink-3); text-align: center; }
.form__success { display: grid; gap: .75rem; padding: 1rem 0; animation: rise-in var(--t-base) var(--ease); }
.form__success-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: var(--tint-strong); color: var(--accent-text); }
.form__success h3 { font-size: 1.7rem; line-height: 1.1; }
.form__success p { color: var(--ink-2); }

/* ---------- Pied de page ---------- */
.footer { padding: 4rem 0 2rem; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 2.5rem; }
.footer__brand a { display: inline-block; }
.footer__logo { width: 160px; height: auto; display: block; }
.footer__brand p { margin-top: 1.25rem; color: var(--ink-2); max-width: 36ch; }
.footer h3 { font-family: var(--font-body); font-size: var(--text-small); font-weight: 600; margin-bottom: .35rem; letter-spacing: 0; }
.footer__nav, .footer__contact { display: grid; gap: .45rem; align-content: start; }
.footer__nav a, .footer__contact a, .footer__contact p {
  display: inline-flex; align-items: center; gap: .55rem; justify-self: start;
  padding: .3rem 0; max-width: 100%; overflow-wrap: anywhere;
  color: var(--ink-2); text-decoration: none; transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) { .footer__nav a:hover, .footer__contact a:hover { color: var(--ink); text-decoration: underline; } }
.footer__contact i { font-size: 1.1rem; color: var(--ink-3); }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: var(--text-fine); color: var(--ink-3);
}
.footer__bottom a { color: var(--ink-3); }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } }
/* Écrans tactiles : liens de contact et de pied de page d'au moins 44 px de haut */
@media (pointer: coarse) {
  .direct a, .footer__nav a, .footer__contact a { min-height: 44px; }
  .direct { gap: .1rem; }
  .footer__nav, .footer__contact { gap: 0; }
  .footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Apparition au défilement ----------
   Animation (et non transition) : une fois jouée, elle ne laisse rien dans la cascade et
   l'élément retrouve ses propres transitions de survol. La classe .js n'est posée que par
   le module JavaScript des apparitions : sans lui, tout reste visible. */
@keyframes reveal-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .reveal:not(.is-visible) { opacity: 0; }
.js .reveal.is-visible { animation: reveal-in var(--t-slow) var(--ease) calc(var(--i, 0) * 80ms) backwards; }

/* ---------- Utilitaires ---------- */
[hidden] { display: none !important; }

/* ---------- Mouvement réduit ----------
   On retire les animations décoratives mais on garde les changements d'état courts (couleur au
   survol, focus), utiles comme retour d'information. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; animation: none; }
  .form__alert, .form__success { animation: none; }
  .menu, .menu__inner > a { transition: none; }
  .svc__media img, .work__pic img, .btn, .btn__icon { transition: none; }
  .svc:hover .svc__media img, .work__grid figure:hover .work__pic img, .btn:hover .btn__icon { transform: none; }
}

/* ==========================================================================
   Amusement Bergenois : ajouts au gabarit
   Héros au défilement (vidéo pilotée par la molette), bandes de texte, couche d'ambiance,
   grille des jeux, guirlande, étapes, calendrier, forfaits, questions.
   Le mode du héros (fixe, portrait, paysage) est décidé par le script de tête de index.html.
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Couche d'ambiance fixe : confettis à niveau de murmure ---------- */
.env { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.env__c {
  position: absolute; top: 0; left: var(--x); width: var(--s); height: calc(var(--s) * 1.5);
  border-radius: 2px; background: var(--c); opacity: 0;
  animation: env-drift 72s linear infinite; animation-delay: var(--d);   /* dérive d'ambiance : durée propre, hors échelle d'interface */
}
@keyframes env-drift {
  0% { transform: translateY(-12vh) rotate(0deg); opacity: 0; }
  6% { opacity: .2; }
  94% { opacity: .2; }
  100% { transform: translateY(108vh) rotate(720deg); opacity: 0; }
}

/* ---------- Barre au-dessus de la vidéo ---------- */
.nav:not(.is-scrolled) { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 82%, transparent), transparent); }
body.menu-open .nav:not(.is-scrolled) { background: var(--bg); }
/* Les liens tombent là où le dégradé laisse passer la photo (contraste mesuré : 2,4:1) : une
   pastille de la matière de la barre les porte tant qu'elle est au-dessus de la vidéo. Le retrait
   reste le même dans les deux états, rien ne bouge au défilement. */
.nav__links { padding: .25rem; border-radius: 999px; transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.nav:not(.is-scrolled) .nav__links {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ---------- Héros : trois modes ----------
   Le script de tête (window.HERO, index.html) écrit data-hero-mode sur <html> : "static",
   "portrait" ou "landscape", et js/hero.js le redécide en direct. Aucune requête média ne décide du
   mode ici : le script décide, le CSS suit. L'état par défaut du balisage est le héros fixe (image
   d'arrivée, titre, sous-titre et boutons) : mouvement réduit, économiseur de données, téléphone
   couché, fichier ouvert en double-clic, script absent et toute panne de la vidéo y mènent. */
:root { --bar: 0px; }
@supports (height: 1svh) { :root { --bar: calc(100lvh - 100svh); } }   /* barre du navigateur d'un téléphone, 0 ailleurs */

.hero {
  position: relative; padding: 0;
  margin-top: calc(-1 * var(--nav-h));
  background: var(--deep);
}
.hero__stage {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; place-items: stretch center;
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 3.5rem;
  background: var(--deep); color: #FFF8FB;
}
.hero--capture .hero__stage { min-height: 0; height: 780px; }
.hero__poster {
  position: absolute; inset: 0; background: var(--deep) center / cover no-repeat;
  background-image: url('../assets/img/hero-parcours-fin.jpg');
  background-image: image-set(url('../assets/img/hero-parcours-fin.webp') type('image/webp'), url('../assets/img/hero-parcours-fin.jpg') type('image/jpeg'));
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: 0; pointer-events: none; transition: opacity var(--t-slow) var(--ease);
  transform: translateZ(0); will-change: transform;
}
.hero__stage.video-ready .hero__video { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(20, 8, 28, 0) 35%, rgba(20, 8, 28, .55) 100%);
}
.hero__ring {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: calc(var(--bar) + clamp(1rem, 3vw, 2.5rem)); z-index: 3;
  width: 40px; height: 40px; color: rgba(255, 248, 251, .85);
  transform: rotate(-90deg); transition: opacity var(--t-slow) var(--ease) var(--t-base);
}
.hero__ring circle { transition: stroke-dashoffset var(--t-fast) linear; }   /* progression : linéaire voulu */
.hero__stage.video-ready .hero__ring { opacity: 0; }
.hero__video, .hero__ring, .band--1, .band--2, .band--3 { display: none; }

/* Modes vidéo : scène collante plein écran, en 100lvh (stable quand la barre du téléphone se replie) */
html[data-hero-mode="landscape"] .hero { height: 450vh; }
html[data-hero-mode="portrait"] .hero { height: 750vh; }   /* un coup de pouce voyage plus loin qu'un cran de molette */
html[data-hero-mode="landscape"] .hero__stage, html[data-hero-mode="portrait"] .hero__stage {
  position: sticky; top: 0; display: block; padding: 0;
  min-height: 0; height: 100vh; height: 100lvh;
}
html[data-hero-mode="landscape"] .hero__poster {
  background-image: url('../assets/img/hero-parcours-debut.jpg');
  background-image: image-set(url('../assets/img/hero-parcours-debut.webp') type('image/webp'), url('../assets/img/hero-parcours-debut.jpg') type('image/jpeg'));
}
html[data-hero-mode="portrait"] .hero__poster {
  background-image: url('../assets/img/hero-parcours-debut-portrait.jpg');
  background-image: image-set(url('../assets/img/hero-parcours-debut-portrait.webp') type('image/webp'), url('../assets/img/hero-parcours-debut-portrait.jpg') type('image/jpeg'));
}
html[data-hero-mode="landscape"] .hero__video, html[data-hero-mode="portrait"] .hero__video,
html[data-hero-mode="landscape"] .hero__ring, html[data-hero-mode="portrait"] .hero__ring,
html[data-hero-mode="landscape"] .band, html[data-hero-mode="portrait"] .band { display: block; }

/* ---------- Bandes de texte : lisibilité à quatre couches ---------- */
:root { --tshadow: 0 1px 2px rgba(20, 8, 28, .9), 0 3px 12px rgba(20, 8, 28, .7), 0 10px 44px rgba(20, 8, 28, .75); }
.band { position: relative; z-index: 2; color: #FFF8FB; text-shadow: var(--tshadow); }
.band::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.band__title {
  font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: -.01em;
  font-size: clamp(2.6rem, 2rem + 4vw, 6rem); text-wrap: balance;
}
.band__sub { margin-top: 1rem; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); font-weight: 600; max-width: 34ch; }
.band__sub:first-child { margin-top: 0; }
/* Première bande sans titre (« Ça gonfle. » retiré, 3 octobre 2026) : sa phrase prend la police des titres */
.band--1 .band__sub { font-family: var(--font-display); font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.4rem); line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.band__h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.015em;
  font-weight: 700; color: inherit; text-wrap: balance;
}
.band__lede { margin: 1.25rem auto 0; font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); font-weight: 600; max-width: 48ch; text-wrap: pretty; }
.band__actions { margin-top: 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; }
.band .btn { text-shadow: none; }
.btn--onvideo { color: #FFF8FB; border-color: rgba(255, 255, 255, .55); background: rgba(43, 24, 56, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.btn--onvideo .btn__icon { background: rgba(255, 255, 255, .16); }
@media (hover: hover) { .btn--onvideo:hover { background: rgba(43, 24, 56, .55); border-color: rgba(255, 255, 255, .8); } }
/* Écran tactile : pas de flou d'arrière-plan sur la vidéo (il se recalcule à chaque image), fond plus opaque */
@media (pointer: coarse) { .btn--onvideo { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(43, 24, 56, .72); } }

/* Héros fixe : la bande d'arrivée seule sur l'image d'arrivée. Comme à la fin de la vidéo, elle encadre
   la fête : titre en haut, boutons en bas, le gâteau et les châteaux dégagés au milieu ; le texte
   rejoint les boutons en paysage et le titre en portrait (mise en page seulement, le mode est déjà
   décidé). Voiles en haut et en bas sur toute la scène, réglés par l'audit du pire pixel (3,5:1). */
.band--4 { width: min(100%, 60rem); text-align: center; --k: 1; display: flex; flex-direction: column; }
.band--4 .band__lede { margin-top: auto; padding-top: 1.25rem; }   /* marge automatique, plus un écart minimal sur écran court */
.band--4::before {
  top: calc(-1 * (var(--nav-h) + 3rem)); bottom: -3.5rem; left: calc(50% - 50vw); width: 100vw;
  background:
    linear-gradient(180deg, rgba(20, 8, 28, .76) 0%, rgba(20, 8, 28, .64) 28%, rgba(20, 8, 28, .3) 37%, rgba(20, 8, 28, 0) 48%),
    linear-gradient(0deg, rgba(20, 8, 28, .76) 0%, rgba(20, 8, 28, .62) 22%, rgba(20, 8, 28, .28) 30%, rgba(20, 8, 28, 0) 40%);
}
@media (orientation: portrait) {
  .band--4 .band__lede { margin-top: 1.25rem; padding-top: 0; }
  .band--4 .band__actions { margin-top: auto; padding-top: 2rem; }
  .band--4::before {
    background:
      linear-gradient(180deg, rgba(20, 8, 28, .78) 0%, rgba(20, 8, 28, .64) 37%, rgba(20, 8, 28, .3) 46%, rgba(20, 8, 28, 0) 56%),
      linear-gradient(0deg, rgba(20, 8, 28, .7) 0%, rgba(20, 8, 28, .55) 17%, rgba(20, 8, 28, .22) 25%, rgba(20, 8, 28, 0) 34%);
  }
}
/* Écran bas (téléphone couché) : le texte remplit toute la hauteur, rien à encadrer ; voile uni à
   bords très flous sous tout le bloc */
@media (orientation: landscape) and (max-height: 560px) {
  .band--4::before { top: -10%; bottom: -10%; left: -8%; width: 116%; border-radius: 3rem; background: rgba(20, 8, 28, .7); filter: blur(28px); }
}

/* Modes vidéo : chaque bande est posée sur la scène, hors du couloir d'action, et pilotée par le
   défilement (opacité et --k écrits par js/hero.js). Son voile (::before) couvre toute la scène mais
   ne fonce que le coin ou le bord où vit son texte : le milieu reste lumineux. Il suit l'opacité de la
   bande et son --k. Réglé par l'audit du pire pixel sous chaque ligne (au moins 3,5:1). */
html[data-hero-mode="landscape"] .band, html[data-hero-mode="portrait"] .band {
  position: absolute; opacity: 0; pointer-events: none; max-width: min(92vw, 44rem); --k: 0;
}
html[data-hero-mode="landscape"] .band::before, html[data-hero-mode="portrait"] .band::before {
  inset: auto; width: 100vw; height: 100vh; height: 100lvh;
  border-radius: 0; filter: none;
  opacity: calc(.25 + .75 * var(--k, 1));
}
/* Boutons d'arrivée : cliquables et atteignables au clavier seulement quand la bande est affichée */
html[data-hero-mode="landscape"] .band--4:not(.is-on) .band__actions, html[data-hero-mode="portrait"] .band--4:not(.is-on) .band__actions { visibility: hidden; }
html[data-hero-mode="landscape"] .band--4.is-on .band__actions, html[data-hero-mode="portrait"] .band--4.is-on .band__actions { pointer-events: auto; }

/* Paysage : textes en haut à gauche et en bas, l'action au centre. L'arrivée encadre la fête : le
   titre en haut, le texte et les boutons en bas sur le gazon, le gâteau et les châteaux dégagés. */
html[data-hero-mode="landscape"] .band--1 { left: clamp(1.25rem, 6vw, 6rem); top: clamp(6rem, 18vh, 12rem); }
html[data-hero-mode="landscape"] .band--3 { left: clamp(1.25rem, 6vw, 6rem); top: clamp(6rem, 16vh, 12rem); }
html[data-hero-mode="landscape"] .band--1::before, html[data-hero-mode="landscape"] .band--3::before {
  left: calc(-1 * clamp(1.25rem, 6vw, 6rem)); top: calc(-1 * clamp(6rem, 18vh, 12rem));
  background: radial-gradient(ellipse 46% 56% at 20% 28%, rgba(20, 8, 28, .76) 0%, rgba(20, 8, 28, .64) 50%, rgba(20, 8, 28, .28) 76%, rgba(20, 8, 28, 0) 100%);
}
html[data-hero-mode="landscape"] .band--3::before { top: calc(-1 * clamp(6rem, 16vh, 12rem)); }
html[data-hero-mode="landscape"] .band--2 { left: 50%; bottom: calc(var(--bar) + 14vh); transform: translateX(-50%); width: min(92vw, 100rem); max-width: none; text-align: center; }
html[data-hero-mode="landscape"] .band--2::before {
  left: calc(50% - 50vw); bottom: calc(-1 * (var(--bar) + 14vh));
  background: linear-gradient(0deg, rgba(20, 8, 28, .76) 0%, rgba(20, 8, 28, .64) 30%, rgba(20, 8, 28, .3) 42%, rgba(20, 8, 28, 0) 56%);
}
html[data-hero-mode="landscape"] .band--4 {
  left: 50%; top: calc(var(--nav-h) + 3vh); bottom: calc(var(--bar) + 5vh); transform: translateX(-50%);
  width: min(92vw, 60rem); max-width: none;
  display: flex; flex-direction: column; text-align: center;
}
html[data-hero-mode="landscape"] .band--4 .band__lede { margin-top: auto; padding-top: 1.25rem; }
html[data-hero-mode="landscape"] .band--4 .band__actions { margin-top: 2rem; padding-top: 0; }
html[data-hero-mode="landscape"] .band--4::before {
  left: calc(50% - 50vw); top: calc(-1 * (var(--nav-h) + 3vh));
  background:
    linear-gradient(180deg, rgba(20, 8, 28, .76) 0%, rgba(20, 8, 28, .64) 28%, rgba(20, 8, 28, .3) 37%, rgba(20, 8, 28, 0) 48%),
    linear-gradient(0deg, rgba(20, 8, 28, .76) 0%, rgba(20, 8, 28, .62) 22%, rgba(20, 8, 28, .28) 30%, rgba(20, 8, 28, 0) 40%);
}

/* Portrait (téléphones) : textes en haut ou en bas de l'écran, l'action au milieu, voiles en dégradés
   verticaux. L'arrivée encadre la fête : titre et texte en haut, boutons en bas, le gâteau au milieu. */
html[data-hero-mode="portrait"] .band { left: var(--gutter); right: var(--gutter); max-width: none; }
html[data-hero-mode="portrait"] .band::before { left: calc(-1 * var(--gutter)); }
html[data-hero-mode="portrait"] .band--1, html[data-hero-mode="portrait"] .band--3 { top: calc(var(--nav-h) + 1.25rem); }
html[data-hero-mode="portrait"] .band--1::before, html[data-hero-mode="portrait"] .band--3::before {
  top: calc(-1 * (var(--nav-h) + 1.25rem));
  background: linear-gradient(180deg, rgba(20, 8, 28, .78) 0%, rgba(20, 8, 28, .64) 31%, rgba(20, 8, 28, .3) 41%, rgba(20, 8, 28, 0) 52%);
}
html[data-hero-mode="portrait"] .band--2 { bottom: calc(var(--bar) + 4.5rem); text-align: center; }
html[data-hero-mode="portrait"] .band--2::before {
  bottom: calc(-1 * (var(--bar) + 4.5rem));
  background: linear-gradient(0deg, rgba(20, 8, 28, .78) 0%, rgba(20, 8, 28, .64) 25%, rgba(20, 8, 28, .3) 35%, rgba(20, 8, 28, 0) 46%);
}
html[data-hero-mode="portrait"] .band--4 {
  top: calc(var(--nav-h) + .75rem); bottom: calc(var(--bar) + 1.5rem); width: auto;
  display: flex; flex-direction: column; text-align: center;
}
html[data-hero-mode="portrait"] .band--4 .band__lede { margin-top: 1.25rem; padding-top: 0; }
html[data-hero-mode="portrait"] .band--4 .band__actions { margin-top: auto; padding-top: 2rem; }
html[data-hero-mode="portrait"] .band--4::before {
  top: calc(-1 * (var(--nav-h) + .75rem));
  background:
    linear-gradient(180deg, rgba(20, 8, 28, .78) 0%, rgba(20, 8, 28, .64) 37%, rgba(20, 8, 28, .3) 46%, rgba(20, 8, 28, 0) 56%),
    linear-gradient(0deg, rgba(20, 8, 28, .7) 0%, rgba(20, 8, 28, .55) 17%, rgba(20, 8, 28, .22) 25%, rgba(20, 8, 28, 0) 34%);
}

/* Entrées : transformations et opacité seulement, pilotées par --k, réversibles */
.mots { display: inline; }
.mots .w {
  display: inline-block;
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1);
  --ks: clamp(0, (var(--k, 0) - var(--th, 0) - .12) * 2.6, 1);
}
[data-entrance="gonfle"] .w { opacity: var(--kc); transform-origin: 50% 85%; transform: scale(calc(.55 + .59 * var(--kc) - .14 * var(--ks))); }
[data-entrance="rebond"] .w { opacity: var(--kc); transform-origin: 50% 100%; transform: translateY(calc((1 - var(--kc)) * -28px)) scaleY(calc(1 - .18 * (var(--kc) - var(--ks)))); }
[data-entrance="monte-descend"] .w { opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * var(--jy, 24px))); }
[data-entrance="arrivee"] .w { opacity: var(--kc); transform: translateY(calc((1 - var(--kc)) * 26px)); }
[data-entrance="arrivee"] .band__lede { --k2: clamp(0, (var(--k, 0) - .66) * 4, 1); opacity: var(--k2); transform: translateY(calc((1 - var(--k2)) * 14px)); }
[data-entrance="arrivee"] .band__actions { --k3: clamp(0, (var(--k, 0) - .78) * 5, 1); opacity: var(--k3); transform: translateY(calc((1 - var(--k3)) * 14px)); }

/* ---------- Les jeux : une grande bande qui défile de gauche à droite ----------
   La carte arrêtée au centre est mise en avant, ses voisines dépassent aux deux bords. Toute la
   carte mène à la page du jeu (ses dates, sa fiche). */
.jeux { display: grid; gap: .5rem; }
.jeux__bande {
  --carte: clamp(260px, 74vw, 440px); --espace: clamp(1rem, 2vw, 1.5rem); --fondu: clamp(14px, 6vw, 96px);
  position: relative; display: flex; gap: var(--espace);
  margin-inline: calc(-1 * var(--gutter)); padding-block: 1rem 2.75rem;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--fondu), #000 calc(100% - var(--fondu)), transparent);
}
.jeux__bande::-webkit-scrollbar { display: none; }
/* Marges des deux bouts : le premier et le dernier jeu peuvent venir au centre */
.jeux__bande::before, .jeux__bande::after { content: ""; flex: 0 0 calc(50% - var(--carte) / 2 - var(--espace)); }
.jeu {
  position: relative; flex: 0 0 var(--carte); scroll-snap-align: center;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--line);
  transform: scale(.92);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.jeu.is-centre { transform: none; box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -34px rgba(var(--shadow-rgb), .45); }
/* Carrée : aucune des quatre photos n'y perd son jeu (les tours du château, les côtés du Stitch) */
.jeu__media { aspect-ratio: 1; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--bg-2); }
.jeu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.jeu__body { flex: 1; display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.6rem); }
.jeu h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); line-height: 1.12; }
.jeu__usage { color: var(--ink-2); text-wrap: pretty; }
.jeu__prix { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
/* Les tarifs : le montant en grand, la durée en petit à côté */
.jeu__tarifs, .fiche__tarifs { display: flex; flex-wrap: wrap; align-items: baseline; }
.jeu__tarifs { gap: .1rem 1.25rem; }
.jeu__tarifs li, .fiche__tarifs li { display: inline-flex; align-items: baseline; gap: .4rem; }
.jeu__tarifs strong, .fiche__tarifs strong { font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.jeu__tarifs strong { font-size: 1.3rem; }
.jeu__tarifs span, .fiche__tarifs span { font-size: var(--text-small); color: var(--ink-2); }
/* Toute la carte mène à la page du jeu : le lien du titre s'étend sur la carte */
/* Le lien est sous la photo, mais son anneau entoure toute la carte : au clavier, la carte entière
   (photo carrée comprise) doit se placer sous la barre du haut */
.jeu__lien { color: inherit; text-decoration: none; scroll-margin-top: calc(var(--carte) + 2rem); scroll-margin-bottom: 7rem; }
.jeu__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-lg); }
.jeu__lien:focus-visible { outline: none; }
.jeu__lien:focus-visible::after { outline: 3px solid var(--brand); outline-offset: 3px; }
.jeu__voir { margin-top: auto; padding-top: .35rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: var(--text-small); color: var(--accent-text); transition: gap var(--t-fast) var(--ease); }
@media (hover: hover) {
  .jeu:hover .jeu__media img { transform: scale(1.04); }
  .jeu:hover .jeu__voir { gap: .7rem; }
  .jeu:not(.is-centre):hover { transform: scale(.94); }
  .jeu.is-centre:hover { transform: translateY(-4px); }
}
.jeux__commandes { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.jeux__fleche {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; font-size: 1.25rem;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-soft);
}
.jeux__fleche:active { transform: scale(.94); }
@media (hover: hover) { .jeux__fleche:not([aria-disabled="true"]):hover { background: var(--tint); border-color: var(--ink-3); } }
.jeux__fleche[aria-disabled="true"] { opacity: .35; cursor: default; transform: none; }
.jeux__points { display: flex; align-items: center; gap: .45rem; }
.jeux__points span { width: 9px; height: 9px; border-radius: 999px; background: var(--line-strong); transition: width var(--t-base) var(--ease), background var(--t-fast) var(--ease); }
.jeux__points span.is-actif { width: 26px; background: var(--brand); }
/* Téléphone couché : la carte tient mieux dans la hauteur de l'écran */
@media (orientation: landscape) and (max-height: 560px) {
  .jeux__bande { --carte: clamp(240px, 42vw, 360px); }
  .jeu__media { aspect-ratio: 3 / 2; }
}
.a-confirmer {
  display: inline-block; padding: .2rem .6rem; border-radius: 999px; border: 1px dashed var(--field-border);
  font-family: var(--font-mono); font-size: var(--text-fine); color: var(--ink-3); line-height: 1.3;
}
.bento__vide { grid-column: 1 / -1; color: var(--ink-2); }
.section--deep .bento__vide { color: var(--on-green-2); text-align: center; }

/* ---------- Fonctionnement : guirlande qui se trace, étapes ---------- */
#comment { position: relative; overflow: clip; padding-top: calc(var(--section) + 5vw); }
.garland { position: absolute; top: -2px; left: 0; width: 100%; height: auto; color: var(--brand); pointer-events: none; --d: 0; }
.garland__rope { stroke-dasharray: var(--len, 1500); stroke-dashoffset: calc(var(--len, 1500) * (1 - var(--d))); }
.garland__flags polygon {
  --f: clamp(0, (var(--d) - var(--i) / 8) * 6, 1);
  opacity: var(--f); transform: scaleY(var(--f)); transform-origin: 50% 0; transform-box: fill-box;
}
/* Les trois étapes côte à côte sous le titre centré, l'une sous l'autre sur tablette et téléphone */
.etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); max-width: 68rem; margin-inline: auto; }
.etapes li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start; }
.etapes__num {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; background: var(--sun); color: var(--sun-ink);
}
.etapes h3 { font-size: 1.35rem; line-height: 1.15; }
.etapes p { margin-top: .35rem; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 860px) { .etapes { grid-template-columns: minmax(0, 1fr); max-width: 32rem; gap: 1.35rem; } }

/* ---------- Dates : calendrier maison (page de chaque jeu) ---------- */
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center p { margin-inline: auto; }
.calendrier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.cal { background: rgba(255, 255, 255, .06); border-radius: var(--r-lg); padding: clamp(1rem, 2.5vw, 1.75rem); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.cal__titre { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin-bottom: .85rem; }
.cal__titre::first-letter { text-transform: uppercase; }
.cal__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.cal__jour { font-family: var(--font-mono); font-size: var(--text-fine); color: var(--on-green-2); text-align: center; padding-bottom: .3rem; }
.cal__case {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px;
  font-family: var(--font-mono); font-size: var(--text-label); background: rgba(255, 255, 255, .05);
}
.cal__case--vide { background: transparent; }
.cal__case--pris { background: var(--sun); color: var(--sun-ink); font-weight: 500; }
/* Demande pas encore confirmée : contour pointillé, comme les badges « à confirmer » ; ces dates ne
   sont plus offertes */
.cal__case--attente { background: transparent; border: 2px dashed var(--sun); }
.cal__case--passe { opacity: .4; }
.cal__case--today::after {
  content: ""; position: absolute; inset: 2px; border-radius: 8px;
  border: 2px solid var(--brand-soft); opacity: .8;
  animation: today-breathe 4s var(--ease) infinite;   /* respiration d'ambiance : durée propre */
}
@keyframes today-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.07); opacity: .45; } }
.cal__legende { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; font-size: var(--text-small); color: var(--on-green-2); }
.cal__legende span::before { content: ""; display: inline-block; width: .9em; height: .9em; border-radius: 4px; margin-right: .45em; vertical-align: -.1em; background: var(--sun); }
.cal__legende .legende--libre::before { background: rgba(255, 255, 255, .14); }
.cal__legende .legende--attente::before { background: transparent; border: 2px dashed var(--sun); }
.section__cta { margin-top: 2.5rem; display: flex; justify-content: center; }
.cal__bascule { display: none; grid-column: 1 / -1; justify-content: center; gap: .5rem; }
.cal__onglet {
  min-height: 44px; padding: .55rem 1.25rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: var(--on-green);
  font-weight: 600; font-size: var(--text-small); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cal__onglet[aria-pressed="true"] { background: var(--on-green); color: var(--deep); border-color: transparent; }
@media (hover: hover) { .cal__onglet[aria-pressed="false"]:hover { border-color: rgba(255, 255, 255, .65); } }
.cal__panneau { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--r-lg); }
@media (max-width: 760px) {
  .calendrier { grid-template-columns: minmax(0, 1fr); }
  .cal__panneau { grid-template-columns: minmax(0, 1fr); }
  .cal__bascule { display: flex; }
  .calendrier .cal { display: none; }
  .calendrier .cal.is-vu { display: block; }
}

/* ---------- Page d'un jeu (jeu.html) : photo, prix, fiche technique, calendrier, autres jeux ---------- */
.fiche { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 7vw, 5.5rem); }
.fiche__retour {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  font-weight: 700; color: var(--ink-2); text-decoration: none;
}
@media (hover: hover) { .fiche__retour:hover { color: var(--ink); text-decoration: underline; } }
.fiche__vide { margin-top: 1.5rem; color: var(--ink-2); }
.fiche__tete { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.75rem, 4.5vw, 4rem); align-items: start; margin-top: 1rem; }
/* Les photos du jeu : un cadre carré, comme les cartes de l'accueil ; elles défilent de gauche à
   droite (glisser), les vignettes dessous amènent une photo */
.fiche__media { display: grid; gap: .75rem; min-width: 0; }
.fiche__photos {
  display: flex; aspect-ratio: 1; border-radius: var(--r-lg); background: var(--bg-2);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.fiche__photos::-webkit-scrollbar { display: none; }
.fiche__photos img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.fiche__photos:focus-visible { outline-offset: 4px; }
.fiche__vignettes { display: flex; flex-wrap: wrap; gap: .5rem; }
.fiche__vignette {
  width: clamp(52px, 15vw, 76px); aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-2); cursor: pointer; opacity: .6;
  transition: opacity var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.fiche__vignette img { width: 100%; height: 100%; object-fit: cover; }
.fiche__vignette[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--brand); }
.fiche__vignette:focus-visible { outline-offset: 5px; }
@media (hover: hover) { .fiche__vignette[aria-current="false"]:hover { opacity: .85; } }
.fiche__titre { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
.fiche__usage { margin-top: 1rem; font-size: 1.15rem; color: var(--ink-2); text-wrap: pretty; }
.fiche__prix { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-2); }
.fiche__prix strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.fiche__tarifs { margin-top: 1.1rem; gap: .25rem 2rem; }
.fiche__tarifs strong { font-size: clamp(1.6rem, 1.35rem + .7vw, 2rem); }
.fiche__technique { margin: 1.75rem 0 0; display: grid; gap: .65rem; }
.fiche__ligne {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start;
  padding: .95rem 1.1rem; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.fiche__ligne > i { font-size: 1.5rem; color: var(--brand); margin-top: .1rem; }
.fiche__ligne dt { font-weight: 700; }
.fiche__ligne dd { margin: .15rem 0 0; color: var(--ink-2); }
.fiche__location { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; color: var(--ink-2); font-size: var(--text-small); }
.fiche__location li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem; align-items: start; text-wrap: pretty; }
.fiche__location i { color: var(--brand); margin-top: .2rem; }
/* Saisons et durées de location : un tableau, les durées en lignes, les saisons en colonnes (page de
   chaque jeu, avec ses prix, et règlements). En-têtes teintés, cases blanches ; le cadre est une vraie
   bordure, que le fond des en-têtes ne recouvre pas. */
.saisons-cadre { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.saisons { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--text-small); line-height: 1.4; }
.saisons th, .saisons td { padding: .75rem .85rem; text-align: start; vertical-align: top; font-weight: 400; }
.saisons tbody tr > * { border-top: 1px solid var(--line); }
.saisons tr > * + * { border-inline-start: 1px solid var(--line); }
.saisons thead > tr > *, .saisons tbody th { background: var(--tint); }
.saisons thead td { width: 34%; }
.saisons td { color: var(--ink); text-wrap: pretty; }
.saisons__nom { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); }
.saisons__nom i { flex: none; font-size: 1.1rem; color: var(--brand); }
.saisons__detail { display: block; margin-top: .15rem; color: var(--ink-2); text-wrap: pretty; }
.saisons__prix { display: block; margin-top: .35rem; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.1; color: var(--ink); }
.fiche__saisons { margin-top: 1.4rem; }
.fiche__saisons + .fiche__location { margin-top: 1rem; }
.saisons-cadre + .consignes__modalites { margin-top: 1.5rem; }
@media (max-width: 480px) {
  .saisons th, .saisons td { padding: .6rem .55rem; }
  .saisons thead td { width: 32%; }
}
.fiche__lien {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .35rem;
  font-weight: 700; font-size: var(--text-small); color: var(--accent-text);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.fiche__lien i { font-size: 1.15rem; }
@media (hover: hover) { .fiche__lien:hover { text-decoration-color: currentColor; } }
.fiche__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.fiche__description { margin-top: clamp(2.5rem, 6vw, 4rem); max-width: 68ch; }
.fiche__description h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: .75rem; }
.fiche__description p { color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 900px) { .fiche__tete { grid-template-columns: minmax(0, 1fr); } }

/* Les autres jeux : petites cartes, chacune vers sa page */
.autres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1.25rem; }
.autre {
  position: relative; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.autre img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.autre h3 { padding: .9rem 1.1rem 1.1rem; font-size: 1.15rem; line-height: 1.2; }
.autre__lien { color: inherit; text-decoration: none; }
.autre__lien::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.autre__lien:focus-visible { outline: none; }
.autre__lien:focus-visible::after { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (hover: hover) { .autre:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -34px rgba(43, 24, 56, .45); } }

/* ---------- Règlements et consignes (reglements.html) ----------
   Une page de référence, lue avant de réserver puis le jour de la fête, souvent sur un téléphone.
   Chaque bloc a son titre dans la marge (collant sur un grand écran) et son texte à droite ;
   l'urgence est un panneau foncé qu'on retrouve d'un coup d'œil. */
.consignes { padding-block: clamp(1.5rem, 3.5vw, 3rem) clamp(3rem, 7vw, 5.5rem); }
.consignes__titre { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1.02; }
.consignes__lede { margin-top: 1rem; font-size: 1.15rem; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.consignes__sommaire { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.consignes__sommaire a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .45rem 1.1rem;
  border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink); font-weight: 600; font-size: var(--text-small); line-height: 1.2; text-decoration: none;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.consignes__sommaire i { font-size: 1.1rem; color: var(--brand); }
@media (hover: hover) { .consignes__sommaire a:hover { background: var(--tint); box-shadow: inset 0 0 0 1px var(--ink-3); } }
/* La pastille de l'urgence reprend son panneau : contour prune et icône dans un rond jaune, comme les
   numéros du panneau. Pas de fond plein : elle se lirait comme la pastille choisie, pas comme un lien. */
.consignes__sommaire a.consignes__sommaire-urgence { padding-inline-start: .45rem; box-shadow: inset 0 0 0 1.5px var(--deep); }
.consignes__sommaire a.consignes__sommaire-urgence i {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sun); color: var(--sun-ink); font-size: 1rem;
}
@media (hover: hover) { .consignes__sommaire a.consignes__sommaire-urgence:hover { box-shadow: inset 0 0 0 1.5px var(--deep); } }

.consignes__bloc {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.25rem clamp(2rem, 5vw, 4.5rem);
  align-items: start; margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
.consignes__bloc h2 {
  position: sticky; top: calc(var(--nav-h) + 1.25rem);
  display: flex; align-items: center; gap: .6rem;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.08;
}
.consignes__bloc h2 i { flex: none; font-size: .85em; }
.consignes__corps { min-width: 0; max-width: 44rem; }

/* La réservation : les modalités, chacune avec son icône (les mêmes que sur la page des jeux) */
.consignes__modalites { display: grid; gap: .9rem; }
.consignes__modalites li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .75rem; align-items: start; font-size: 1.08rem; color: var(--ink-2); text-wrap: pretty; }
.consignes__modalites i { font-size: 1.4rem; color: var(--brand); margin-top: .1rem; }

/* Les règles d'utilisation : la supervision d'abord, puis les groupes sur deux colonnes */
.regles__supervision {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem;
  border-radius: var(--r-md); background: var(--tint-strong);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.3;
  color: var(--ink); text-wrap: pretty;
}
.regles__supervision i {
  flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sun); color: var(--sun-ink); font-size: 1.45rem;
}
.regles__groupes { margin-top: 2.25rem; columns: 2 15rem; column-gap: clamp(1.75rem, 3.5vw, 3rem); }
.regles__groupe { break-inside: avoid; padding-bottom: 2rem; }
.regles__groupe h3 { font-size: 1.25rem; line-height: 1.2; margin-bottom: .8rem; }
.regles__groupe ul { display: grid; gap: .65rem; }
.regles__groupe li { position: relative; padding-inline-start: 1.4rem; color: var(--ink-2); text-wrap: pretty; }
/* Puces en confettis, comme la couche d'ambiance : trois couleurs, trois angles */
.regles__groupe li::before {
  content: ""; position: absolute; inset-inline-start: .2rem; top: .5em;
  width: .45rem; height: .68rem; border-radius: 2px;
  background: var(--c, var(--brand)); transform: rotate(var(--r, 16deg));
}
.regles__groupe li:nth-child(3n + 2)::before { --c: var(--sun); --r: -18deg; }
.regles__groupe li:nth-child(3n)::before { --c: #B18BD9; --r: 34deg; }

/* L'installation et le rangement : des étapes numérotées, comme dans « Fonctionnement » (accueil) */
.consignes__verif {
  display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.75rem; padding: 1rem 1.25rem;
  border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink); text-wrap: pretty;
}
.consignes__verif i { flex: none; font-size: 1.4rem; color: var(--brand); margin-top: .05rem; }
.consignes__etapes { counter-reset: etape; display: grid; gap: 1rem; }
.consignes__etapes > li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.consignes__etapes > li::before {
  counter-increment: etape; content: counter(etape);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: var(--text-label);
  background: var(--tint-strong); color: var(--ink);
}
.consignes__etape { min-width: 0; padding-top: .35rem; color: var(--ink-2); text-wrap: pretty; }

/* En cas d'urgence : le panneau foncé du formulaire de réservation, les numéros en jaune */
.consignes__bloc--urgence {
  padding: clamp(1.75rem, 4vw, 3.25rem); border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--deep) 0%, var(--deep-2) 100%); color: var(--on-green);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.consignes__bloc--urgence h2 i { color: var(--sun); }
.urgence__situation { margin-bottom: 1.25rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); line-height: 1.3; }
.consignes__bloc--urgence .consignes__etape { color: var(--on-green-2); }
.consignes__bloc--urgence .consignes__etapes > li::before { background: var(--sun); color: var(--sun-ink); }
.urgence__titre { margin-top: 1rem; font-weight: 700; color: var(--on-green); }
.urgence__verifs { margin-top: .6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.urgence__verifs li {
  display: flex; align-items: center; gap: .6rem; min-height: 3.1rem; padding: .6rem .9rem;
  border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--on-green); font-weight: 600; line-height: 1.3;
}
.urgence__verifs i { flex: none; font-size: 1.3rem; color: var(--sun); }
/* Sur le fond sombre, le panneau garde son rang : un fond un peu plus clair et un contour jaune discret */
@media (prefers-color-scheme: dark) {
  .consignes__bloc--urgence { background: linear-gradient(160deg, #37214C 0%, var(--deep) 100%); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .3); }
  .consignes__sommaire a.consignes__sommaire-urgence,
  .consignes__sommaire a.consignes__sommaire-urgence:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 210, 63, .45); }
}
.consignes .section__cta { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
@media (max-width: 860px) {
  .consignes__bloc { grid-template-columns: minmax(0, 1fr); }
  .consignes__bloc h2 { position: static; }
}
/* Téléphone : les vérifications reprennent toute la largeur du panneau, sous la pastille du 3
   (pastille de 2,4rem plus l'espace de 1rem) */
@media (max-width: 520px) {
  .urgence__verifs { grid-template-columns: minmax(0, 1fr); }
  .urgence__titre, .urgence__verifs { margin-inline-start: -3.4rem; }
}

/* ---------- Forfaits (une seule carte, montrée seulement si demandé) ---------- */
.forfait { padding: 8px; border-radius: var(--r-lg); background: var(--tint); box-shadow: inset 0 0 0 1px var(--line); }
.forfait__inner { border-radius: calc(var(--r-lg) - 8px); padding: clamp(2rem, 5vw, 4rem); background: linear-gradient(135deg, var(--surface), var(--bg-2)); text-align: center; }
.forfait h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.1; }
.forfait p { margin: .8rem auto 0; color: var(--ink-2); max-width: 50ch; text-wrap: pretty; }

/* ---------- Questions : liste dépliable sur deux colonnes ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; align-items: start; }
.faq__item { border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.25rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.25;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { flex: none; color: var(--accent-text); transition: transform var(--t-base) var(--ease-soft); }
.faq__item[open] summary i { transform: rotate(180deg); }
.faq__item p { padding: 0 1.25rem 1.2rem; color: var(--ink-2); text-wrap: pretty; }
.faq__item .a-confirmer { margin: 0 1.25rem 1.1rem; }
@media (max-width: 800px) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Formulaire : dates et saisons de location ----------
   Pas de gap sur .dates : l'avis de saison, vide la plupart du temps, ne doit laisser aucun espace */
.dates { display: grid; }
.dates__regles {
  margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem;
  font-size: var(--text-fine); color: var(--ink-3); text-wrap: pretty;
}
.dates__regles li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem; align-items: start; }
.dates__regles i { color: var(--brand); font-size: 1rem; margin-top: .1rem; }
.dates__regles strong { color: var(--ink-2); font-weight: 700; }
.dates__avis-texte {
  display: flex; gap: .55rem; align-items: flex-start; margin-top: .8rem;
  padding: .75rem .9rem; border-radius: var(--r-sm); background: var(--tint-strong);
  color: var(--ink); font-size: var(--text-small); font-weight: 600;
  animation: rise-in var(--t-base) var(--ease);
}
.dates__avis-texte i { color: var(--brand); font-size: 1.15rem; flex: none; margin-top: .1rem; }

/* ---------- Pied de page ---------- */
.footer__mention { max-width: 46ch; }

/* ---------- Politique de confidentialité et page introuvable : en-tête et pied réduits ---------- */
.page-head { padding-block: 1rem; border-bottom: 1px solid var(--line); }
.page-head .container { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; }
.page-head__back { font-size: var(--text-small); font-weight: 600; color: var(--ink-2); }
.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); }
.legal .container { max-width: 36rem; }   /* environ 70 caractères par ligne */
.legal h1 { font-size: clamp(2.3rem, 5vw, 3.3rem); line-height: 1.08; }
.legal__date { margin-top: .9rem; font-size: var(--text-small); color: var(--ink-3); }
.legal__resume { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: var(--r-md); background: var(--bg-2); }
.legal h2 { margin-top: 2.75rem; font-size: clamp(1.55rem, 3vw, 1.95rem); line-height: 1.15; }
.legal__resume h2 { margin-top: 0; font-size: 1.35rem; }
.legal p, .legal ul { margin-top: 1rem; }
.legal ul { padding-left: 1.3rem; list-style: disc; }
.legal li + li { margin-top: .45rem; }
.legal li::marker { color: var(--brand); }
.legal a { color: var(--accent-text); overflow-wrap: anywhere; }
.page-foot .footer__bottom { margin-top: 0; padding-block: 1.5rem 2rem; }
.introuvable { min-height: 62vh; display: grid; align-content: center; padding-block: 4rem; }
.introuvable h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 1.05; }
.introuvable p { margin-top: 1rem; max-width: 46ch; color: var(--ink-2); }
.introuvable__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Onglet caché : toutes les animations en pause ---------- */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* ---------- Mouvement réduit : états finaux, pilotes arrêtés ---------- */
@media (prefers-reduced-motion: reduce) {
  .env { display: none; }
  .hero__video { transition: none; }
  .cal__case--today::after, .dates__avis-texte { animation: none; }
  .faq__item summary i, .jeu__media img { transition: none; }
  .jeux__fleche, .jeux__points span, .fiche__vignette { transition: none; }
  .jeu, .autre, .jeu__voir { transition: none; }
  .jeu.is-centre:hover, .autre:hover { transform: none; }
  .jeu:not(.is-centre):hover { transform: scale(.92); }
  .garland { --d: 1; }
  .jeu:hover .jeu__media img { transform: none; }
}

/* ---------- Contraste élevé (Windows) : états portés par une couleur de fond ----------
   Le navigateur y retire les fonds : dates réservées, mois choisi et traits du menu disparaissaient.
   On les rend avec les couleurs du thème de l'utilisateur. */
@media (forced-colors: active) {
  .nav__burger span { background: ButtonText; forced-color-adjust: none; }
  .nav__links a.is-active { text-decoration: underline; text-underline-offset: .3em; }
  .cal__case--pris, .cal__onglet[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  .jeux__points span { background: GrayText; forced-color-adjust: none; }
  .jeux__points span.is-actif { background: Highlight; }
  .fiche__vignette[aria-current="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
  .cal__legende span::before { border: 1px solid CanvasText; background: Canvas; forced-color-adjust: none; }
  .cal__legende .legende--pris::before { background: Highlight; border-color: Highlight; }
  .cal__case--attente, .cal__legende .legende--attente::before { border: 2px dashed CanvasText; }
  /* Puces des règlements, pastilles des étapes (accueil et règlements) et cercle de la supervision
     sans leur fond */
  .regles__groupe li::before { background: CanvasText; forced-color-adjust: none; }
  .etapes__num, .consignes__etapes > li::before, .regles__supervision i { border: 1px solid CanvasText; }
}