/* ==========================================================================
   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 { 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). */
@media (max-width: 1080px) {
  .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; }
}

/* 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); } }
.field { display: grid; gap: .45rem; min-width: 0; }
.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 */
.field input:focus, .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, case à cocher plus grande */
@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; }
  .field--check input { width: 1.5rem; height: 1.5rem; }
}

/* ---------- 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, château à gonfler, 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); }

/* ---------- 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__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="gonfle"] .band__sub { --kb: clamp(0, (var(--k, 0) - .45) * 3, 1); opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 12px)); }
[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)); }
@media (max-height: 560px) { .band__sub { display: none; } }

/* ---------- Les jeux : grille bento, quatre cases pour quatre jeux ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.jeu {
  display: flex; flex-direction: column; grid-column: span 5;
  background: var(--surface); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.jeu--grand { grid-column: span 7; grid-row: span 2; }
.jeu--large { grid-column: 1 / -1; flex-direction: row; }
.jeu__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.jeu--grand .jeu__media { aspect-ratio: auto; flex: 1; min-height: 22rem; }
.jeu--large .jeu__media { flex: 0 0 48%; aspect-ratio: auto; }
.jeu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
@media (hover: hover) { .jeu:hover .jeu__media img { transform: scale(1.04); } }
.jeu__body { padding: clamp(1.25rem, 2.2vw, 1.75rem); display: grid; gap: .65rem; align-content: start; }
.jeu h3 { font-size: 1.5rem; line-height: 1.12; }
.jeu--grand h3 { font-size: 1.9rem; }
.jeu__usage { color: var(--ink-2); text-wrap: pretty; }
.jeu .chips { margin-top: .35rem; }
.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; }
.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; }
@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .jeu, .jeu--grand, .jeu--large { grid-column: 1 / -1; grid-row: auto; flex-direction: column; }
  .jeu--grand .jeu__media, .jeu--large .jeu__media { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
}

/* ---------- Comment ça marche : guirlande qui se trace, château à gonfler, é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;
}
.inflate {
  position: relative; display: grid; justify-items: center; gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  --p: 0;
}
.inflate__svg { width: min(100%, 22rem); height: auto; overflow: visible; }
.inflate__body { transform-box: view-box; transform-origin: 160px 232px; transform: scaleY(calc(.10 + .90 * var(--p))) scaleX(calc(.72 + .28 * var(--p))); }
.inflate__tower { --pt: clamp(0, (var(--p) - .3) / .6, 1); transform-box: view-box; transform-origin: 160px 232px; transform: translateY(calc((1 - var(--pt)) * 48px)) scaleY(calc(.08 + .92 * var(--pt))); }
.inflate__tower--c { --pt: clamp(0, (var(--p) - .5) / .5, 1); }
.inflate__shadow { transform-box: view-box; transform-origin: 160px 236px; transform: scaleX(calc(.4 + .6 * var(--p))); }
.inflate.is-done .inflate__svg { animation: inflate-pop var(--t-slow) var(--ease-soft); }
@keyframes inflate-pop { 0% { transform: scale(1); } 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
.hold {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 54px; padding: .8rem 1.7rem; border-radius: 999px;
  border: 2px solid var(--brand); background: var(--surface); color: var(--brand);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2;
  cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none;
  transition: transform var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease), background var(--t-base) var(--ease);
}
.hold__ring { position: absolute; inset: 0; z-index: -1; background: var(--brand); transform-origin: left center; transform: scaleX(var(--p)); }
.hold.is-holding { transform: scale(.97); }
.hold.is-past, .inflate.is-done .hold { color: #FFF8FB; }
.inflate.is-done .hold { background: var(--brand); }
.hold__hint { font-size: var(--text-fine); color: var(--ink-3); text-align: center; max-width: 32ch; }
.etapes { margin-top: 2rem; display: grid; gap: 1.35rem; }
.etapes li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; align-items: start;
  opacity: .85; transform: translateX(-6px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  transition-delay: calc(var(--n, 0) * 160ms);
}
.etapes.is-lit li { opacity: 1; transform: none; }
.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(--tint-strong); color: var(--ink);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease-soft);
  transition-delay: calc(var(--n, 0) * 160ms);
}
.etapes.is-lit .etapes__num { background: var(--sun); color: var(--sun-ink); transform: scale(1.08); }
.etapes h3 { font-size: 1.35rem; line-height: 1.15; }
.etapes p { margin-top: .35rem; color: var(--ink-2); text-wrap: pretty; }
.etapes__note { margin-top: 1.5rem; margin-bottom: 0; }

/* ---------- Dates : calendrier maison ---------- */
.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; }
.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--note::before { display: none; }
.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); } }
@media (max-width: 760px) {
  .calendrier { grid-template-columns: minmax(0, 1fr); }
  .cal__bascule { display: flex; }
  .calendrier .cal { display: none; }
  .calendrier .cal.is-vu { display: block; }
}

/* ---------- 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 : case à cocher ---------- */
.field--check { grid-template-columns: auto 1fr; align-items: center; gap: .7rem; }
.field--check input { width: 1.25rem; height: 1.25rem; accent-color: var(--brand); margin: 0; }
.field--check label { font-weight: 500; }

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

/* ---------- 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 { animation: none; }
  .etapes li, .etapes__num, .faq__item summary i, .hold, .hold__ring, .jeu__media img { transition: none; }
  .etapes li { opacity: 1; transform: none; }
  .inflate { --p: 1; }
  .inflate.is-done .inflate__svg { animation: none; }
  .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, traits du menu et progression
   du bouton à gonfler 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; }
  .cal__legende span::before { border: 1px solid CanvasText; background: Canvas; forced-color-adjust: none; }
  .cal__legende .legende--pris::before { background: Highlight; border-color: Highlight; }
  /* Bouton entier sans ajustement : sinon le navigateur pose une plaque sous le libellé, qui le
     masque dès qu'il passe en HighlightText */
  .hold { forced-color-adjust: none; background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .hold:focus-visible { outline-color: CanvasText; }
  .hold__ring { background: Highlight; }
  .hold.is-past, .inflate.is-done .hold { color: HighlightText; }
  .inflate.is-done .hold { background: Highlight; border-color: Highlight; }
}