/* Polices déclarées ici plutôt qu'importées : un @import ajoutait un aller-retour
   avant même de savoir quels fichiers charger, et le texte restait plus longtemps
   dans la police du téléphone. */
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/baloo2-600.woff2') format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/baloo2-700.woff2') format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/baloo2-800.woff2') format('woff2');}
@font-face{font-family:'Lexend';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lexend-400.woff2') format('woff2');}
@font-face{font-family:'Lexend';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lexend-500.woff2') format('woff2');}
@font-face{font-family:'Lexend';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lexend-600.woff2') format('woff2');}
@font-face{font-family:'Lexend';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lexend-700.woff2') format('woff2');}

/* ============================================================================
   Béarn Kids : système de design
   Thème clair par défaut, thème sombre au choix ou selon le système.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Palette

   Elle part du logo et de la mascotte : le turquoise du bloc de glace pour la
   marque, le vert lime du crocodile pour les touches de couleur, un rose et un
   bleu ciel pour les pastilles. Les fonds profonds sont un vert d'eau très
   sombre plutôt qu'un noir : il prolonge le turquoise et fait chanter le lime.

   Tous les couples texte/fond employés sont vérifiés à 4,5:1 minimum.
   ------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Fonds et surfaces */
  --bg: #F7FBF3;
  --bg-alt: #EAF5EA;
  --surface: #FFFFFF;
  --surface-2: #F2F9EF;
  --border: #D6E9DA;
  --border-strong: #B6D3BF;

  /* Texte */
  --ink: #11302C;
  --ink-2: #2C4A44;
  --muted: #52706A;

  /* Marque : terre cuite */
  --brand: #177A70;
  --brand-2: #0F5F57;
  /* Version claire, décorative : ne porte jamais de texte. */
  --brand-vif: #3DBFAE;
  /* La marque posée sur les fonds profonds : 6,9:1 sur --night. */
  --brand-sur-nuit: #6FE0CF;
  --brand-ink: #FFFFFF;
  --brand-soft: #DDF2EC;
  /* Terre cuite assombrie pour le texte : 6,4:1 sur blanc, 5,5:1 sur --brand-soft. */
  --brand-text: #136B62;

  /* Or : le pelage de la mascotte, en touches */
  --or: #C4E04E;
  --or-2: #9DBB25;
  --or-soft: #F1F8D3;
  --or-text: #4A5E0C;

  /* Profond : fond des sections sombres, dans les deux thèmes */
  --night: #0F3330;
  --night-2: #164440;
  --night-3: #1F564F;
  --on-night: #EFFAF6;
  --on-night-muted: #A8D2C9;

  /* Accents, utilisés avec parcimonie */
  --coral: #E8559B;
  --coral-soft: #FDE5F0;
  --aqua: #2E9FD6;
  --aqua-soft: #E0F1FA;
  --grape: #8E5BD6;
  --grape-soft: #F1E9FB;
  --lime: #58B347;
  --lime-soft: #E6F6DD;

  /* Aplats portant du texte blanc : contraste vérifié à 4,5:1 minimum. */
  --aqua-solid: #1A6C96;
  --coral-solid: #B3216A;
  --lime-solid: #2E7A1F;

  /* Texte posé sur les fonds pastel correspondants. */
  --aqua-ink: #1A6C96;
  --coral-ink: #B3216A;
  --lime-ink: #2E7A1F;

  /* Formes */
  --r-xs: 10px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --sh-xs: 0 1px 3px rgba(17, 48, 44, .07);
  --sh-sm: 0 3px 10px rgba(17, 48, 44, .08);
  --sh: 0 10px 28px rgba(17, 48, 44, .10);
  --sh-lg: 0 24px 60px rgba(17, 48, 44, .16);
  --ring: 0 0 0 4px rgba(23, 122, 112, .30);

  /* Bannière : claire et ensoleillée en thème clair, chaude et sourde en sombre. */
  --ban-1: #EEF9F2;
  --ban-2: #F7FBF3;
  --ban-3: #E2F4E4;
  --ban-lueur-1: rgba(196, 224, 78, .50);
  --ban-lueur-2: rgba(232, 85, 155, .22);
  --ban-points: rgba(17, 48, 44, .14);
  --ban-bord: var(--border);

  --wrap: 1200px;
  --wrap-narrow: 760px;
  --head-h: 76px;

  --f-head: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --f-body: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/*
 * Thème sombre.
 *
 * Il est décrit une seule fois, et ne s'applique qu'à un choix explicite. Le
 * site s'affiche en clair par défaut, même sur un appareil réglé en sombre :
 * c'est la version dessinée pour lui, celle qu'on veut montrer d'abord. Le
 * visiteur qui préfère le sombre, ou qui veut suivre son appareil, le demande
 * depuis le panneau d'affichage, et « suivre l'appareil » pose alors
 * data-theme="auto", que la requête média plus bas reconnaît.
 */
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] {
  --bg: #0B1A18;
  --bg-alt: #0F2220;
  --surface: #132A27;
  --surface-2: #183330;
  --border: #21423D;
  --border-strong: #2F5A53;

  --ink: #EAF7F2;
  --ink-2: #C7E2DA;
  --muted: #8FB3AA;

  --brand: #4FD6C3;
  --brand-2: #2BB8A5;
  --brand-vif: #7AE6D6;
  --brand-sur-nuit: #7AE6D6;
  --brand-ink: #062A25;
  --brand-soft: #14332F;
  --brand-text: #6FE0CF;

  --or: #D6EE6A;
  --or-2: #C4E04E;
  --or-soft: #22301A;
  --or-text: #D6EE6A;

  --night: #071513;
  --night-2: #0D211E;
  --night-3: #163330;
  --on-night: #EAF7F2;
  --on-night-muted: #9CC5BB;

  --coral: #FF8CC0;
  --coral-soft: #36192A;
  --aqua: #6CC8F0;
  --aqua-soft: #12293A;
  --grape: #C29BF0;
  --grape-soft: #261E36;
  --lime: #7FD86A;
  --lime-soft: #16301A;

  --aqua-solid: #1A6C96;
  --coral-solid: #B3216A;
  --lime-solid: #2E7A1F;

  /* Sur fond pastel sombre, le texte reprend la version claire de l'accent. */
  --aqua-ink: #6CC8F0;
  --coral-ink: #FF8CC0;
  --lime-ink: #7FD86A;

  --sh-xs: 0 1px 3px rgba(0, 0, 0, .34);
  --sh-sm: 0 3px 10px rgba(0, 0, 0, .34);
  --sh: 0 10px 28px rgba(0, 0, 0, .42);
  --sh-lg: 0 24px 60px rgba(0, 0, 0, .54);
  --ring: 0 0 0 4px rgba(79, 214, 195, .34);
  --ban-1: #0F2623;
  --ban-2: #0B1A18;
  --ban-3: #123230;
  --ban-lueur-1: rgba(196, 224, 78, .16);
  --ban-lueur-2: rgba(255, 140, 192, .14);
  --ban-points: rgba(255, 255, 255, .12);
  --ban-bord: var(--border-strong);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
      --bg: #0B1A18;
      --bg-alt: #0F2220;
      --surface: #132A27;
      --surface-2: #183330;
      --border: #21423D;
      --border-strong: #2F5A53;

      --ink: #EAF7F2;
      --ink-2: #C7E2DA;
      --muted: #8FB3AA;

      --brand: #4FD6C3;
      --brand-2: #2BB8A5;
      --brand-vif: #7AE6D6;
      --brand-sur-nuit: #7AE6D6;
      --brand-ink: #062A25;
      --brand-soft: #14332F;
      --brand-text: #6FE0CF;

      --or: #D6EE6A;
      --or-2: #C4E04E;
      --or-soft: #22301A;
      --or-text: #D6EE6A;

      --night: #071513;
      --night-2: #0D211E;
      --night-3: #163330;
      --on-night: #EAF7F2;
      --on-night-muted: #9CC5BB;

      --coral: #FF8CC0;
      --coral-soft: #36192A;
      --aqua: #6CC8F0;
      --aqua-soft: #12293A;
      --grape: #C29BF0;
      --grape-soft: #261E36;
      --lime: #7FD86A;
      --lime-soft: #16301A;

      --aqua-solid: #1A6C96;
      --coral-solid: #B3216A;
      --lime-solid: #2E7A1F;

      /* Sur fond pastel sombre, le texte reprend la version claire de l'accent. */
      --aqua-ink: #6CC8F0;
      --coral-ink: #FF8CC0;
      --lime-ink: #7FD86A;

      --sh-xs: 0 1px 3px rgba(0, 0, 0, .34);
      --sh-sm: 0 3px 10px rgba(0, 0, 0, .34);
      --sh: 0 10px 28px rgba(0, 0, 0, .42);
      --sh-lg: 0 24px 60px rgba(0, 0, 0, .54);
      --ring: 0 0 0 4px rgba(79, 214, 195, .34);
      --ban-1: #0F2623;
      --ban-2: #0B1A18;
      --ban-3: #123230;
      --ban-lueur-1: rgba(196, 224, 78, .16);
      --ban-lueur-2: rgba(255, 140, 192, .14);
      --ban-points: rgba(255, 255, 255, .12);
      --ban-bord: var(--border-strong);
  }
}

/* ----------------------------------------------------------------- Base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 20px);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* L'attribut hidden doit gagner : sans cela un bouton en display:inline-flex
   reste affiché alors que le script l'a masqué. C'était le cas des trois
   boutons du parcours anniversaire, tous visibles en même temps. */
[hidden] { display: none !important; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.3rem + 3.7vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 2.95rem); }
h3, .h3 { font-size: clamp(1.2rem, 1rem + .85vw, 1.55rem); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }

:focus-visible {
  outline: 3px solid var(--brand-2);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 40px, var(--wrap-narrow)); margin-inline: auto; }
@media (max-width: 640px) {
  .wrap, .wrap-narrow { width: min(100% - 28px, var(--wrap)); }
}

.center { text-align: center; }
.lead {
  font-size: clamp(1.06rem, 1rem + .4vw, 1.3rem);
  color: var(--muted);
  line-height: 1.65;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--brand); color: var(--brand-ink);
  padding: 14px 22px; border-radius: 0 0 var(--r-sm) 0; font-weight: 800;
}
.skip:focus { left: 0; }

/* -------------------------------------------------------------- Boutons */

.btn {
  --bg-btn: var(--brand);
  --fg-btn: var(--brand-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  background: var(--bg-btn); color: var(--fg-btn);
  font-family: var(--f-head); font-weight: 600; font-size: 1.02rem;
  padding: .82em 1.65em; border-radius: 100px; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap; position: relative;
  max-width: 100%;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .16);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s;
}
/* Sur un petit écran, un libellé long doit passer à la ligne plutôt que
   déborder de l'écran : « Voir toutes les informations sur les anniversaires »
   sortait du cadre sur un téléphone. */
@media (max-width: 620px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; padding-inline: 1.25em; }
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .18); filter: brightness(1.05); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.btn--dark { --bg-btn: var(--night-2); --fg-btn: #fff; }
.btn--coral { --bg-btn: var(--coral); --fg-btn: #fff; }
.btn--ghost {
  --bg-btn: transparent; --fg-btn: var(--ink);
  box-shadow: inset 0 0 0 2.5px currentColor;
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2.5px currentColor; }
.btn--lg { font-size: 1.12rem; padding: .95em 2.05em; }
.btn--sm { font-size: .93rem; padding: .6em 1.2em; box-shadow: 0 3px 0 rgba(0, 0, 0, .14); }
.btn--block { width: 100%; }
.btn[disabled], .btn[data-loading="true"] { opacity: .6; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--c { justify-content: center; }
.on-night .btn--ghost, .section--dark .btn--ghost { --fg-btn: #fff; }
.hero .btn--ghost, .pagehero .btn--ghost, .lp-hero .btn--ghost { --fg-btn: var(--ink); }
.section--gold .btn--ghost { --fg-btn: var(--night); }

/* --------------------------------------------------------------- Entête */

.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ban-2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--ban-bord);
  transition: box-shadow .25s, background-color .25s;
}
.header[data-scrolled="true"] { box-shadow: var(--sh-sm); }
.header__in { display: flex; align-items: center; gap: 14px; height: var(--head-h); }

.brand { display: flex; align-items: center; flex-shrink: 0; margin-right: auto; text-decoration: none; }
.brand img { height: 58px; width: auto; transition: transform .2s var(--ease); }
.brand:hover img { transform: scale(1.04) rotate(-1deg); }
/* Sur un petit téléphone, le logo cède la place aux trois boutons plutôt
   que de pousser la page hors de l'écran. */
@media (max-width: 480px) {
  .brand { flex-shrink: 1; min-width: 0; }
  .brand img { height: auto; max-height: 50px; max-width: 100%; }
  .header__tools { gap: 6px; }
}

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-family: var(--f-head); font-weight: 500; font-size: 1rem;
  color: var(--ink-2); text-decoration: none;
  padding: .52em .9em; border-radius: 100px;
  transition: background-color .16s, color .16s;
  position: relative;
}
.nav a:hover { background: var(--brand-soft); color: var(--brand-text); }
.nav a[aria-current="page"] { color: var(--brand-ink); background: var(--brand); font-weight: 600; }

/*
 * Les sous-entrées du menu.
 *
 * Sur grand écran, un panneau qui s'ouvre au survol et au clavier : le
 * :focus-within suffit, personne n'a besoin d'un script pour dérouler un
 * menu. Une bande transparente au-dessus du panneau rattrape le pixel de vide
 * entre le lien et sa liste, sinon le panneau se referme dès qu'on descend
 * vers lui.
 */
.nav__groupe { position: relative; }
.nav__groupe > a { display: block; }
.nav__sous {
  position: absolute; top: calc(100% + 9px); left: 0; z-index: 30;
  list-style: none; margin: 0; padding: 6px;
  min-width: 232px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .15s, transform .15s var(--ease), visibility .15s;
}
.nav__sous::before {
  content: ''; position: absolute; inset: -11px 0 100% 0;
}
.nav__groupe:hover .nav__sous,
.nav__groupe:focus-within .nav__sous {
  opacity: 1; visibility: visible; transform: none;
}
.nav__sous a {
  display: block; padding: .5em .8em; font-size: .95rem; border-radius: var(--r-sm);
}

.header__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  width: 42px; height: 42px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 50%; cursor: pointer; padding: 0;
  transition: background-color .16s, transform .16s var(--ease);
}
.icon-btn:hover { background: var(--brand-soft); color: var(--brand-text); transform: translateY(-1px); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* La bascule de thème affiche soleil ou lune selon le thème actif. */
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .theme-toggle .sun { display: none; }
  :root[data-theme="auto"] .theme-toggle .moon { display: block; }
}

.burger { display: none; }
.burger span {
  display: block; height: 2.5px; width: 22px; background: currentColor;
  border-radius: 2px; margin: 4.5px auto; transition: transform .28s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Le menu complet tient jusqu'à 860 px : un portable ne doit jamais tomber
   sur le menu au doigt. Entre 860 et 1140 px il se resserre plutôt que de
   basculer, et le bouton d'appel se réduit à son icône. */
@media (min-width: 860px) and (max-width: 1140px) {
  .nav { gap: 0; }
  .nav a { padding: .48em .56em; font-size: .92rem; }
  .header__in { gap: 8px; }
  .header__cta span.cta__texte { display: none; }
  .header__cta { padding: .6em .85em; }
  .brand img { height: 46px; }
}

@media (max-width: 859px) {
  .burger { display: grid; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: var(--head-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--surface); padding: 16px 20px 30px;
    border-bottom: 1px solid var(--border);
    transform: translateY(-115%); transition: transform .34s var(--ease);
    max-height: calc(100dvh - var(--head-h)); overflow-y: auto;
    box-shadow: var(--sh-lg);
  }
  .nav[data-open="true"] { transform: translateY(0); }
  .nav a { padding: .85em 1em; font-size: 1.1rem; }
  /* Sur téléphone le menu est déjà une colonne dépliée : les sous-entrées y
     restent visibles, simplement en retrait. Rien à ouvrir, rien à deviner. */
  .nav__groupe { position: static; }
  .nav__sous {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: 2px 0 6px; padding: 0 0 0 14px;
    background: none; border: 0; border-left: 2px solid var(--border-strong);
    border-radius: 0; box-shadow: none;
  }
  .nav__sous::before { content: none; }
  .nav__sous a { font-size: 1rem; padding: .6em 1em; }
  .nav .btn { margin-top: 12px; justify-content: center; }
}
@media (min-width: 860px) { .nav .btn { display: none; } }

/* Barre d'actions mobile, fixée en bas de l'écran. */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, .1);
}
.actionbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 10px 4px 9px; text-decoration: none;
  font-family: var(--f-head); font-weight: 600; font-size: .78rem;
  color: var(--ink-2); border-right: 1px solid var(--border);
}
.actionbar a:last-child { border-right: 0; }
.actionbar a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actionbar a.is-primary { color: var(--brand-text); }
@media (max-width: 800px) {
  .actionbar { display: grid; }
  body { padding-bottom: 68px; }
  .actionbar + * { scroll-margin-bottom: 70px; }
}

/*
 * Le bouton d'accessibilité vit dans l'en-tête, à côté de la bascule de thème.
 *
 * Il flottait auparavant contre le bord droit, à mi-hauteur : personne ne
 * s'attend à trouver un réglage là, et il passait devant le contenu. Les deux
 * réglages d'affichage sont désormais au même endroit, celui où l'on va les
 * chercher.
 */
.icon-btn[aria-expanded="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* Trois boutons dans l'en-tête tiennent sur un téléphone, à condition de les
   resserrer un peu sous 420 px. */
@media (max-width: 420px) {
  .header__tools { gap: 5px; }
  .icon-btn { width: 38px; height: 38px; }
}

@media print { .header__tools { display: none !important; } }

/* ------------------------------------------------------------- Sections */

.section { padding: clamp(58px, 7vw, 108px) 0; position: relative; }
.section--tight { padding: clamp(40px, 4.5vw, 66px) 0; }
.section--alt { background: var(--bg-alt); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--night); color: var(--on-night); }

/*
 * Décor de saison.
 *
 * L'illustration du thème, la même que la bannière, revient en fond des
 * sections sombres : très floutée et très assombrie, elle ne se lit pas comme
 * une image, elle donne une couleur et une matière à la section. C'est ce qui
 * fait qu'un thème de fête habille la page entière et pas seulement son haut.
 * Sans illustration, la variable n'existe pas et rien ne s'affiche.
 */
.section--dark {
  position: relative; isolation: isolate;
  /* Le décor est agrandi pour que son flou ne laisse pas de liseré sur les
     bords : sans découpe, ce débordement élargissait la page de 6 % et créait
     une barre de défilement horizontale sur tout le site. `clip` découpe sans
     créer de conteneur de défilement, ce qui laisse les éléments collants
     collants. */
  overflow: clip;
}
@supports not (overflow: clip) { .section--dark { overflow: hidden; } }
.section--dark::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: var(--saison-decor, none);
  background-size: cover; background-position: center;
  /* L'assombrissement n'est pas une question de goût, c'est ce qui garantit la
     lisibilité. Une illustration claire posée telle quelle derrière du texte
     blanc ferait perdre dix points de contraste d'un coup. Ramenée au tiers de
     sa luminosité et sursaturée, elle ne peut plus éclaircir le fond que d'une
     fraction de point, tout en gardant sa couleur. */
  filter: blur(26px) saturate(1.7) brightness(.32);
  opacity: .6; transform: scale(1.12);
  pointer-events: none;
}
/* Sur les petits écrans, un fond flouté plein cadre coûte cher pour ce qu'il
   apporte : on l'allège plutôt que de le faire porter à la batterie. */
@media (max-width: 700px) {
  .section--dark::after { filter: blur(18px) saturate(1.7) brightness(.32); }
}

/*
 * Bandeau de saison : la phrase qui annonce le thème en cours.
 * Il se referme d'un clic, et le choix tient une saison entière.
 */
.bandeau-saison {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand) 16%, var(--bg-alt)),
    color-mix(in srgb, var(--brand) 6%, var(--bg-alt)));
  border-bottom: 1px solid var(--border);
  z-index: 3;
}
.bandeau-saison .wrap {
  display: flex; align-items: center; gap: 14px;
  padding-block: 9px; min-height: 42px;
}
.bandeau-saison p {
  margin: 0; flex: 1; font-size: .93rem; font-weight: 700;
  color: var(--ink); line-height: 1.45;
}
.bandeau-saison__fermer {
  /* 34 px visibles, mais la zone cliquable déborde jusqu'à 44 : au pouce, un
     petit rond posé au bord de l'écran se rate une fois sur deux. */
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; position: relative;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  transition: background .15s, color .15s, border-color .15s;
}
.bandeau-saison__fermer::before { content: ''; position: absolute; inset: -5px; }
.bandeau-saison__fermer:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.bandeau-saison__fermer:focus-visible { box-shadow: var(--ring); outline: none; }
@media (max-width: 560px) {
  .bandeau-saison p { font-size: .86rem; }
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark .lead { color: var(--on-night-muted); }
/* Le bloc « or » est vert lime, la couleur soleil de la marque : c'est elle
   qui porte le texte nuit (plus de 7:1), en clair comme en sombre. Il
   tranche aussi avec le pied de page, sombre, au lieu de s'y fondre. */
.section--gold {
  background: linear-gradient(155deg, #CFE65F 0%, #A9CB2E 100%);
  color: var(--night);
}
.section--gold h2, .section--gold h3 { color: var(--night); }
.section--gold .lead { color: rgba(17, 48, 44, .80); }
.section--curve { border-radius: clamp(30px, 4vw, 64px) clamp(30px, 4vw, 64px) 0 0; margin-top: -1px; }
.section--curve-b { border-radius: 0 0 clamp(30px, 4vw, 64px) clamp(30px, 4vw, 64px); margin-bottom: -1px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--f-head); font-weight: 600; font-size: .83rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--brand-text); margin-bottom: .9em;
}
.section--dark .eyebrow { color: var(--brand-sur-nuit); }
.section--gold .eyebrow { color: var(--night); opacity: .7; }

.head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 58px); }
.head--c { margin-inline: auto; text-align: center; }
.head > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- Hero */

/*
 * Bannière : l'illustration est une scène complète, mascotte incluse. Elle est
 * donc posée en fond, le texte par-dessus à gauche, adouci par un voile qui
 * garantit la lisibilité. Sur un téléphone, la scène repasse au-dessus du
 * texte à son format d'origine : la recadrer couperait le personnage.
 */
.hero {
  position: relative; overflow: hidden; color: var(--ink);
  background:
    radial-gradient(980px 560px at 78% 6%, var(--ban-lueur-1), transparent 62%),
    radial-gradient(760px 520px at 4% 92%, var(--ban-lueur-2), transparent 60%),
    linear-gradient(168deg, var(--ban-1) 0%, var(--ban-2) 56%, var(--ban-3) 100%);
  border-bottom: 1px solid var(--ban-bord);
  padding: clamp(46px, 6vw, 84px) 0 0;
}

/*
 * La scène du héros.
 *
 * Le personnage occupe presque toute la hauteur de l'illustration : la moindre
 * bande plus large que l'image lui coupait la tête ou les pieds. On ne recadre
 * donc plus rien. Les illustrations ont été rallongées en 26/9, décor étendu
 * couture par couture, et la bande prend exactement leur format : pleine
 * largeur, sans rognage, sans remplissage, à n'importe quelle taille d'écran.
 *
 * Scène, voile et texte partagent la même case de grille. La hauteur vient de
 * l'image, le texte se pose dessus, et la bande fait la même hauteur sur
 * toutes les pages puisqu'elle ne dépend plus de la longueur du texte.
 */
.hero--scene {
  padding: 0; background: var(--ban-2);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.hero--scene > * { grid-area: 1 / 1; min-width: 0; }
/*
 * La scène ne porte que la hauteur minimale de la bande : c'est une case vide
 * au format de l'illustration. L'image, elle, est posée sur toute la section.
 * Quand le texte demande plus de place que la bande, celle-ci grandit et
 * l'image se resserre sur sa droite : on perd du décor à gauche, derrière le
 * panneau de texte, jamais le personnage, qui se tient à droite.
 */
.hero__scene { z-index: 0; width: 100%; aspect-ratio: var(--bandeau, 26 / 9); }
.hero__scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}
/* Un large voile mangeait toute la moitié gauche de l'illustration. À la
   place, un simple assombrissement d'ensemble très léger, et un panneau
   translucide posé derrière le texte seul : l'image reste visible partout,
   le texte garde son contraste. */
.hero__voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg,
    color-mix(in srgb, var(--ban-2) 42%, transparent) 0%,
    color-mix(in srgb, var(--ban-2) 22%, transparent) 34%,
    transparent 58%);
}
.hero--scene .hero__in {
  align-self: center;
  grid-template-columns: minmax(0, 580px);
  align-items: center;
  padding: clamp(30px, 3.5vw, 54px) 0;
}

/* Panneau de lecture : du verre dépoli posé sur la scène, pas un aplat. */
.hero--scene .hero__txt {
  position: relative;
  padding: clamp(24px, 2.6vw, 38px) clamp(22px, 2.4vw, 36px);
  border-radius: var(--r-lg);
  /* 88 % et non 84 : mesuré au pixel, le doré du titre sur l'illustration
     tombait à 4,49 pour 1, juste sous le seuil lisible. */
  background: color-mix(in srgb, var(--ban-2) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ban-bord) 70%, transparent);
  backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 18px 44px rgba(24, 14, 8, .18);
}
/* Sans verre dépoli, le panneau doit être franchement plus opaque. */
@supports not (backdrop-filter: blur(4px)) {
  .hero--scene .hero__txt { background: color-mix(in srgb, var(--ban-2) 94%, transparent); }
}

.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; z-index: 1;
  background-image: radial-gradient(var(--ban-points) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}
.hero--scene::after { display: none; }

.hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(22px, 4vw, 56px); align-items: center;
  padding-bottom: clamp(40px, 5vw, 74px);
}
.hero h1 { color: var(--ink); margin-bottom: .32em; }
.hero h1 em { font-style: normal; color: var(--brand-text); display: block; }
.hero p { color: var(--ink-2); font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem); max-width: 33em; }
.hero .eyebrow { color: var(--brand-text); }

/* Ancienne composition, conservée pour les pages qui montrent la mascotte
   découpée à côté du texte. */
.hero__art { position: relative; justify-self: center; align-self: end; max-width: 440px; }
.hero__art::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 76%; height: 32px; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(17, 48, 44, .34), transparent 70%);
  filter: blur(8px);
}
.hero__art img { filter: drop-shadow(0 22px 38px rgba(17, 48, 44, .28)); animation: float 6.5s ease-in-out infinite; }
.hero__art::before {
  content: ""; position: absolute; inset: 6% 4% 12%; border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 224, 78, .40), transparent 66%);
  filter: blur(30px); z-index: -1;
}
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

@media (max-width: 920px) {
  .hero__in { grid-template-columns: 1fr; text-align: center; }
  .hero p { margin-inline: auto; }
  .hero .btn-row, .hero .tags { justify-content: center; }
  .hero__art { max-width: 300px; order: 1; margin-top: 8px; }

  .hero--scene .hero__in { grid-template-columns: 1fr; }
  /* Sous la scène, plus rien à rendre lisible : le panneau disparaît. */
  .hero--scene .hero__txt {
    padding: 0; background: none; border: 0; backdrop-filter: none; box-shadow: none;
  }
}
@media (max-width: 480px) {
  .hero__art { max-width: 230px; }
}

.tags { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 1.5em; }
.tag {
  display: inline-flex; align-items: center; gap: .45em;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border-strong);
  color: var(--ink-2); font-size: .9rem; font-weight: 700;
  padding: .44em 1.05em; border-radius: 100px; backdrop-filter: blur(6px);
}

/* Entête de page interne */
.pagehero {
  color: var(--ink);
  background:
    radial-gradient(820px 380px at 50% -10%, var(--ban-lueur-1), transparent 66%),
    linear-gradient(180deg, var(--ban-1) 0%, var(--ban-2) 100%);
  border-bottom: 1px solid var(--ban-bord);
  padding: clamp(42px, 5vw, 76px) 0 clamp(52px, 6vw, 88px);
  text-align: center; position: relative; overflow: hidden;
}
.pagehero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: radial-gradient(var(--ban-points) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent);
  mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent);
}
.pagehero > * { position: relative; z-index: 2; }

/* Avec une image, l'entête reprend le traitement de la bannière d'accueil :
   scène pleine, texte sur un panneau de verre dépoli. */
.pagehero--scene {
  padding: 0; background: var(--ban-2);
  display: grid; grid-template-columns: minmax(0, 1fr);
}
.pagehero--scene > * { grid-area: 1 / 1; min-width: 0; }
.pagehero--scene::after { display: none; }
/* Même traitement que la bannière d'accueil : la bande prend le format de
   l'illustration élargie, donc la même hauteur d'une page à l'autre, et le
   personnage n'est jamais coupé. */
/*
 * Hauteur de la bande des pages intérieures.
 *
 * Deux garde-fous qui se complètent. Le format de l'illustration, d'abord :
 * en dessous de 26/9 la bande serait plus large que l'image et il faudrait
 * rogner en hauteur, donc couper le personnage. Une hauteur plancher ensuite,
 * calée sur le plus long des entêtes : c'est elle qui donne à toutes les
 * pages exactement la même bande, sur un écran large comme sur un portable.
 */
.pagehero__scene {
  /* La largeur est posée explicitement : avec une hauteur plancher et un
     format imposé, le navigateur calculait la largeur à partir de la hauteur
     et la case débordait de la page, emportant le personnage hors du cadre. */
  z-index: 0; width: 100%; aspect-ratio: var(--bandeau, 26 / 9); min-height: 590px;
}
.pagehero__scene img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
}
.pagehero__voile {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ban-2) 46%, transparent) 0%,
    color-mix(in srgb, var(--ban-2) 26%, transparent) 55%,
    color-mix(in srgb, var(--ban-2) 52%, transparent) 100%);
}
.pagehero--scene .wrap { position: relative; z-index: 2; align-self: center; }
.pagehero--scene .pagehero__txt {
  max-width: 760px; margin-inline: auto;
  /* Serré volontairement : c'est ce qui permet au plus long des entêtes de
     tenir dans la bande, et donc à toutes les pages d'avoir la même. */
  padding: clamp(20px, 2.1vw, 34px) clamp(22px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--ban-2) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--ban-bord) 70%, transparent);
  backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 18px 44px rgba(24, 14, 8, .18);
}
@supports not (backdrop-filter: blur(4px)) {
  .pagehero--scene .pagehero__txt { background: color-mix(in srgb, var(--ban-2) 94%, transparent); }
}
.pagehero--scene .wrap { padding-block: clamp(22px, 2vw, 40px); }
/*
 * Quand le texte se pose sur la scène, il prend le côté gauche, comme sur
 * l'accueil : centré, le panneau tombait pile devant la mascotte et on ne
 * voyait plus que sa queue dépasser.
 */
@media (min-width: 1000px) {
  .pagehero--scene { text-align: left; }
  .pagehero--scene .pagehero__txt { max-width: 680px; margin-inline: 0; }
  .pagehero--scene .lead { margin-inline: 0; }
.head--c .eyebrow, .center .eyebrow, .cta .eyebrow { align-self: center; margin-inline: auto; }
  .pagehero--scene .btn-row--c { justify-content: flex-start; }
}

:root[data-contraste="fort"] .pagehero--scene .pagehero__txt {
  background: var(--ban-2); backdrop-filter: none; border-width: 2px; border-color: var(--ink);
}
@media (max-width: 700px) {
  .pagehero--scene .wrap { padding-block: clamp(30px, 6vw, 46px); }
}

/*
 * Texte sur la scène, ou texte sous la scène.
 *
 * Poser le texte par-dessus l'illustration suppose une bande assez haute pour
 * l'accueillir. En 26/9 c'est le cas à partir de mille trois cents pixels de
 * large ; en dessous, la scène passe au-dessus du texte, entière, et personne
 * n'est coupé. Sur un téléphone une bande de 26/9 ne ferait qu'un bandeau de
 * deux centimètres : là seulement, on revient au 16/9 en rognant le décor
 * ajouté, jamais le personnage, qui se tient à droite.
 */
@media (max-width: 999px) {
  .hero--scene, .pagehero--scene { grid-template-rows: auto auto; }
  /* Empilée, la scène redevient son propre cadre : l'illustration s'y range
     au lieu de courir sous le texte. */
  .hero--scene > .hero__scene, .pagehero--scene > .pagehero__scene {
    grid-area: 1 / 1; position: relative; aspect-ratio: 26 / 9; min-height: 0;
  }
  .hero--scene > .hero__in, .pagehero--scene > .wrap { grid-area: 2 / 1; align-self: auto; }
  .hero--scene .hero__voile, .pagehero--scene .pagehero__voile { display: none; }
  .hero--scene .hero__in { padding: clamp(26px, 4vw, 44px) 0 clamp(30px, 4.5vw, 50px); }
  .pagehero--scene .wrap { padding-block: clamp(26px, 4vw, 44px); }
  /* Sous la scène, plus rien à rendre lisible : le panneau de verre disparaît. */
  .hero--scene .hero__txt, .pagehero--scene .pagehero__txt {
    padding: 0; background: none; border: 0; backdrop-filter: none; box-shadow: none;
  }
}
@media (max-width: 700px) {
  .hero--scene > .hero__scene, .pagehero--scene > .pagehero__scene { aspect-ratio: 16 / 9; }
  .hero--scene > .hero__scene img, .pagehero--scene > .pagehero__scene img {
    object-position: right center;
  }
}

.pagehero h1 { color: var(--ink); }
.pagehero .eyebrow { color: var(--brand-text); }
.pagehero .lead { color: var(--muted); margin-inline: auto; max-width: 42em; }

/* Barre de statistiques, chevauchant la section suivante */
/* Le bandeau se posait à cheval sur la bannière et coupait les pieds de la
   mascotte. Il reste au contact, sans la mordre. */
.stats {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); overflow: hidden;
  margin-bottom: clamp(-18px, -1.4vw, -8px);
}
.stats > div { padding: 24px 18px; text-align: center; border-right: 1px solid var(--border); }
.stats > div:last-child { border-right: 0; }
.stats b {
  display: block; font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 1.95rem); color: var(--ink); line-height: 1.1;
}
.stats span { font-size: .87rem; color: var(--muted); font-weight: 700; }
@media (max-width: 760px) {
  .stats { grid-template-columns: 1fr 1fr; margin-bottom: -8px; }
  .stats > div:nth-child(2n) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
.after-stats { padding-top: clamp(54px, 6vw, 86px); }

/* --------------------------------------------------------------- Grilles */

.grid { display: grid; gap: clamp(18px, 2.2vw, 28px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border-radius: var(--r-lg);
  padding: clamp(24px, 2.6vw, 34px);
  box-shadow: var(--sh); position: relative; overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.card > :last-child { margin-bottom: 0; }
.card--hover:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.card__top { height: 6px; position: absolute; inset: 0 0 auto; background: var(--brand); }
.card--coral .card__top { background: var(--coral); }
.card--aqua .card__top { background: var(--aqua); }
.card--grape .card__top { background: var(--grape); }
.card--lime .card__top { background: var(--lime); }
.section--dark .card {
  background: var(--night-2); color: var(--on-night);
  border-color: rgba(255, 255, 255, .1); box-shadow: none;
}
.section--dark .card p { color: var(--on-night-muted); }

.ico {
  width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center;
  font-size: 26px; margin-bottom: 16px; background: var(--brand-soft);
}
.ico--coral { background: var(--coral-soft); }
.ico--aqua { background: var(--aqua-soft); }
.ico--grape { background: var(--grape-soft); }
.ico--lime { background: var(--lime-soft); }

/* Listes cochées */
.checks { list-style: none; padding: 0; margin: 0 0 1.1em; }
.checks li { position: relative; padding-left: 2em; margin-bottom: .6em; line-height: 1.55; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .4em;
  width: 1.3em; height: 1.3em; border-radius: 50%; background-color: var(--brand);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121A2E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 64%; background-position: center; background-repeat: no-repeat;
}
.checks--aqua li::before { background-color: var(--aqua); }
.checks--coral li::before { background-color: var(--coral); }

/* ----------------------------------------------------------- Bloc média */

.media {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 62px); align-items: center;
}
.media + .media { margin-top: clamp(48px, 6vw, 92px); }
.media--rev .media__txt { order: 2; }
.media__txt > :last-child { margin-bottom: 0; }
@media (max-width: 880px) {
  .media { grid-template-columns: 1fr; }
  .media--rev .media__txt { order: 0; }
}

.shot {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg);
  position: relative; background: var(--night-2);
}
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot--tall img { aspect-ratio: 3 / 4; }

.age-badge {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--night); color: var(--brand-sur-nuit);
  font-family: var(--f-head); font-weight: 600; font-size: 1rem;
  padding: .45em 1.15em; border-radius: 100px; margin-bottom: 1em;
}
.age-badge--aqua { background: var(--aqua-solid); color: #fff; }

/* -------------------------------------------------------------- Galerie */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery figure {
  margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
  transition: transform .22s var(--ease);
}
.gallery figure:hover { transform: scale(1.025); }
.gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery figure:first-child { grid-column: span 2; grid-row: span 2; }
@media (max-width: 880px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------- Tarifs */

.price {
  background: var(--surface); border-radius: var(--r-lg); padding: 34px 28px;
  text-align: center; box-shadow: var(--sh);
  border: 2.5px solid var(--border); position: relative;
  display: flex; flex-direction: column;
}
.price--hl { border-color: var(--brand); box-shadow: var(--sh-lg); }
.price__flag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--brand); color: var(--brand-ink);
  font-family: var(--f-head); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .09em;
  padding: .4em 1.1em; border-radius: 100px; white-space: nowrap;
}
.price h3 { margin-bottom: .15em; }
.price__age { color: var(--muted); font-size: .95rem; font-weight: 700; margin-bottom: .7em; }
.price__amount {
  font-family: var(--f-head); font-weight: 700; line-height: 1; color: var(--ink);
  font-size: clamp(2.5rem, 2rem + 2.3vw, 3.5rem); margin: .1em 0 .15em;
}
.price__amount small {
  font-size: .37em; font-weight: 600; color: var(--muted);
  display: block; margin-top: .55em; letter-spacing: .01em; line-height: 1.4;
}
.price__note { font-size: .95rem; color: var(--muted); margin: 0; }

.deals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 720px) { .deals { grid-template-columns: 1fr; } }
.deal {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 5px solid var(--brand);
  border-radius: var(--r); padding: 18px 22px; box-shadow: var(--sh-xs);
}
.deal__ico { flex-shrink: 0; line-height: 0; display: grid; place-items: center; }
.deal b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.deal span { color: var(--muted); font-size: .95rem; font-weight: 700; }

/* ------------------------------------------------------------- Encadrés */

.notice {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--coral-soft); border: 2px solid color-mix(in srgb, var(--coral) 32%, transparent);
  border-radius: var(--r-lg); padding: clamp(20px, 2.4vw, 30px);
}
.notice__ico { flex-shrink: 0; line-height: 0; display: grid; place-items: center; }
.notice h3 { color: var(--coral-ink); margin-bottom: .35em; }
.notice > div > :last-child { margin-bottom: 0; }
.notice--gold { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand-2) 40%, transparent); }
.notice--gold h3 { color: var(--brand-text); }
.notice--aqua { background: var(--aqua-soft); border-color: color-mix(in srgb, var(--aqua) 35%, transparent); }
.notice--aqua h3 { color: var(--aqua-ink); }

/* -------------------------------------------------------------- Horaires */

.hours { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 26px); }
@media (max-width: 720px) { .hours { grid-template-columns: 1fr; } }
.hours--seule { grid-template-columns: minmax(0, 560px); justify-content: center; }
.hours__card {
  background: var(--night-2); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px); color: var(--on-night);
}
.hours__card--open {
  background: linear-gradient(155deg, var(--brand), var(--brand-2));
  border: 0; color: var(--night);
}
.hours__card--open h3, .hours__card--open .eyebrow { color: var(--night); }
.hours__card--open .eyebrow { opacity: .7; }
.hours__list { list-style: none; padding: 0; margin: 0; }
.hours__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: .62em 0; border-bottom: 1px dashed rgba(255, 255, 255, .18);
}
.hours__card--open .hours__list li { border-bottom-color: rgba(17, 48, 44, .24); }
.hours__list li:last-child { border-bottom: 0; }
.hours__list b { font-family: var(--f-head); font-weight: 600; font-size: 1.04rem; }
.hours__list span { font-weight: 800; white-space: nowrap; }

.open-badge {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 800; font-size: .92rem; padding: .35em 1em;
  border-radius: 100px; margin-bottom: 1em;
}
.open-badge::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 25%, transparent);
}
.open-badge[data-open="true"] { background: var(--lime-soft); color: var(--lime-ink); }
.open-badge[data-open="false"] { background: var(--coral-soft); color: var(--coral-ink); }

/* --------------------------------------------------------------- Règles */

.rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 960px) { .rules { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rules { grid-template-columns: 1fr; } }
.rule {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r); padding: 22px; text-align: center;
}
.rule__ico {
  display: grid; place-items: center; width: 62px; height: 62px;
  margin: 0 auto 12px; border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  transition: transform .25s var(--ease);
}
.rule:hover .rule__ico { transform: rotate(-6deg) scale(1.06); }
.rule b { font-family: var(--f-head); font-weight: 600; font-size: 1.05rem; display: block; color: #fff; margin-bottom: .25em; }
.rule p { font-size: .93rem; color: var(--on-night-muted); margin: 0; line-height: 1.5; }

/* --------------------------------------------------------------- Étapes */

.steps { counter-reset: s; display: grid; gap: 18px; }
.step {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 28px 26px 86px; box-shadow: var(--sh-xs);
}
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 26px; top: 26px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--night); color: var(--brand-sur-nuit); display: grid; place-items: center;
  font-family: var(--f-head); font-weight: 700; font-size: 1.22rem;
}
.step h3 { margin-bottom: .3em; }
.step > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .step { padding: 72px 22px 24px; } }

/* ------------------------------------------------------------------ FAQ */

.faq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--sh-xs); overflow: hidden;
  transition: box-shadow .2s;
}
.faq details[open] { box-shadow: var(--sh-sm); border-color: var(--border-strong); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 24px;
  font-family: var(--f-head); font-weight: 600; font-size: 1.08rem;
  position: relative; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2.5px solid var(--brand-2); border-bottom: 2.5px solid var(--brand-2);
  transform: rotate(45deg); transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--brand-text); }
.faq__a { padding: 0 24px 22px; color: var(--ink-2); }
.faq__a > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- Article */

.prose { max-width: var(--wrap-narrow); margin-inline: auto; }
.prose > h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); margin-top: 1.8em; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.5em; }
.prose img { border-radius: var(--r); box-shadow: var(--sh); margin: 1.6em 0; }
.prose figure { margin: 1.8em 0; }
.prose figcaption { font-size: .9rem; color: var(--muted); text-align: center; margin-top: .7em; }
.prose blockquote {
  margin: 1.6em 0; padding: 1em 0 1em 1.5em;
  border-left: 4px solid var(--brand); font-size: 1.1rem; color: var(--ink-2);
  font-style: italic;
}
.prose a, .lead a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.lead a { font-weight: 700; }
.section--dark .lead a { color: var(--brand-sur-nuit); }
.prose a:hover { color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
/* Le tableau garde sa structure, c'est son enveloppe qui défile. */
.table-defile { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
.table-defile:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.table-defile table { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .97rem; }
@media (max-width: 560px) {
  .prose table { font-size: .86rem; min-width: 440px; }
}
.prose th, .prose td {
  text-align: left; padding: .75em 1em; border-bottom: 1px solid var(--border); vertical-align: top;
}
.prose th { font-family: var(--f-head); font-weight: 600; color: var(--ink); background: var(--surface-2); }
.prose mark { background: var(--brand-soft); color: inherit; padding: 0 .2em; border-radius: 3px; }

/* --------------------------------------------------------- Liste d'articles */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); }
@media (max-width: 960px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 660px) { .posts { grid-template-columns: 1fr; } }

.post {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  text-decoration: none; color: inherit;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.post:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.post__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post:hover .post__img img { transform: scale(1.05); }
.post__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: .82rem; font-weight: 800; color: var(--muted); margin-bottom: .6em;
}
.post__cat {
  background: var(--brand-soft); color: var(--brand-text);
  padding: .2em .75em; border-radius: 100px; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.post__cat[data-source="instagram"] {
  background: linear-gradient(120deg, #F58529, #DD2A7B, #8134AF); color: #fff;
}
.post h3 { font-size: 1.22rem; margin-bottom: .4em; }
.post p { color: var(--muted); font-size: .97rem; margin-bottom: 1em; }
.post__more {
  margin-top: auto; font-family: var(--f-head); font-weight: 600;
  color: var(--brand-text); display: inline-flex; align-items: center; gap: .4em;
}
.post:hover .post__more { gap: .7em; }

/* Indicateur de progression de lecture */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 110;
  background: linear-gradient(90deg, var(--brand), var(--coral));
  width: 0; transition: width .1s linear;
}

/* -------------------------------------------------------------- Contact */

.contact-grid {
  display: grid; grid-template-columns: .85fr 1.15fr;
  gap: clamp(24px, 3.5vw, 48px); align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

.infos { list-style: none; padding: 0; margin: 0 0 28px; }
.infos li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.infos li:last-child { border-bottom: 0; }
.infos .i { flex-shrink: 0; line-height: 0; display: grid; place-items: center; padding-top: 2px; }
.infos b {
  display: block; font-family: var(--f-head); font-weight: 600; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .15em;
}
.infos a { font-weight: 800; text-decoration: none; color: var(--ink); font-size: 1.12rem; }
.infos a:hover { color: var(--brand-text); }

.map-holder {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh);
  border: 1px solid var(--border); position: relative;
  aspect-ratio: 16 / 11; background: var(--surface-2);
}
.map-holder iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-ask {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 14px;
  text-align: center; padding: 28px; background: var(--surface-2);
}
.map-ask p { color: var(--muted); font-size: .94rem; margin: 0; max-width: 32ch; }

/* ----------------------------------------------------------- Formulaires */

.form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(24px, 3vw, 40px); box-shadow: var(--sh);
}
.field { margin-bottom: 18px; }
.field > label, .field__label {
  display: block; font-family: var(--f-head); font-weight: 600;
  font-size: .98rem; margin-bottom: .4em; color: var(--ink);
}
.field .req { color: var(--coral); }
.field .hint { display: block; font-weight: 400; font-size: .87rem; color: var(--muted); margin-top: .15em; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .8em 1em; border: 2px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); transition: border-color .15s, box-shadow .15s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--brand); box-shadow: var(--ring);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--coral); }
.field--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field--2 { grid-template-columns: 1fr; } }
.field__err { color: var(--coral); font-size: .88rem; font-weight: 700; margin: .35em 0 0; display: none; }
.field__err[data-show="true"] { display: block; }

/* Une case à cocher qu'on lit avant de la cocher : jamais pré-remplie, et la
   contrepartie est écrite à côté plutôt que renvoyée à une page de mentions. */
.coche {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  margin-bottom: 18px; padding: 16px 18px;
  border: 2px solid var(--border); border-radius: 14px; background: var(--surface-2);
}
.coche input[type="checkbox"] {
  width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--brand); cursor: pointer;
}
.coche label { font-weight: 700; font-size: .95rem; line-height: 1.45; cursor: pointer; }
.coche__detail { display: block; font-weight: 400; font-size: .87rem; color: var(--muted); margin-top: .25em; }
.coche:focus-within { border-color: var(--brand); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__msg {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--r-sm);
  font-weight: 700; display: none; line-height: 1.5;
}
.form__msg[data-state="ok"] { display: block; background: var(--lime-soft); color: var(--lime-ink); border: 2px solid color-mix(in srgb, var(--lime) 40%, transparent); }
.form__msg[data-state="err"] { display: block; background: var(--coral-soft); color: var(--coral-ink); border: 2px solid color-mix(in srgb, var(--coral) 40%, transparent); }
.form__note { font-size: .88rem; color: var(--muted); margin: 14px 0 0; line-height: 1.5; }
.form__note a { color: var(--brand-text); }

/* Choix visuels en cartes (formules, options) */
.choices { display: grid; gap: 12px; }
.choices--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .choices--2 { grid-template-columns: 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: block; padding: 18px 20px; border: 2.5px solid var(--border);
  border-radius: var(--r); background: var(--surface-2); cursor: pointer;
  transition: border-color .16s, background-color .16s, transform .16s var(--ease);
}
.choice span strong { display: block; font-family: var(--f-head); font-weight: 600; font-size: 1.08rem; }
.choice span small { display: block; color: var(--muted); font-size: .92rem; margin-top: .2em; line-height: 1.45; }
.choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.choice input:focus-visible + span { box-shadow: var(--ring); }
.choice span:hover { transform: translateY(-2px); }

/* Parcours par étapes */
.wizard__bar {
  display: flex; align-items: center; gap: 6px; margin-bottom: 26px;
  counter-reset: w;
}
.wizard__bar li {
  flex: 1 1 0; min-width: 0; list-style: none;
  font-size: .8rem; font-weight: 800; color: var(--muted);
  text-align: center; position: relative; padding-top: 30px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 520px) { .wizard__bar li { font-size: .7rem; white-space: normal; line-height: 1.2; overflow: visible; } }
.wizard__bar li::before {
  counter-increment: w; content: counter(w);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--surface-2); border: 2px solid var(--border);
  display: grid; place-items: center; font-size: .75rem; color: var(--muted);
}
.wizard__bar li::after {
  content: ""; position: absolute; top: 11px; left: calc(-50% + 14px); right: calc(50% + 14px);
  height: 2px; background: var(--border);
}
.wizard__bar li:first-child::after { display: none; }
.wizard__bar li[data-state="done"]::before,
.wizard__bar li[data-state="active"]::before {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.wizard__bar li[data-state="done"]::after { background: var(--brand); }
.wizard__bar li[data-state="active"] { color: var(--ink); }
.wizard__step { display: none; }
.wizard__step[data-active="true"] { display: block; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.wizard__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* min-width: sans cela, un bouton flex refuse de descendre sous la largeur de
   son texte et sort de l'écran sur un téléphone. */
.wizard__nav .btn { flex: 1 1 140px; min-width: 0; }
.recap { list-style: none; padding: 0; margin: 0 0 1.2em; }
.recap li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: .6em 0; border-bottom: 1px dashed var(--border);
}
.recap li:last-child { border-bottom: 0; }
.recap b { font-family: var(--f-head); font-weight: 600; color: var(--muted); font-size: .95rem; }
.recap span { font-weight: 800; text-align: right; }

/* ------------------------------------------------------------- Bandeaux */

.cta { text-align: center; position: relative; overflow: hidden; }
.cta__in { position: relative; z-index: 2; max-width: 700px; margin-inline: auto; }
.cta h2 { margin-bottom: .4em; }

/* ------------------------------------------------------------ Pied de page */

/* Le pied de page prenait presque un écran entier. Il est resserré, sans
   pour autant laisser les entrées légales passer sur deux lignes. */
.footer {
  background: var(--night); color: var(--on-night-muted);
  padding: clamp(32px, 3.2vw, 48px) 0 18px; font-size: .94rem;
}
.footer__grid {
  display: grid; grid-template-columns: 1.3fr repeat(3, 1fr) 1.1fr;
  gap: clamp(18px, 2.4vw, 36px);
  padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
/* Sur téléphone, les colonnes s'empilaient les unes sous les autres et le pied
   de page faisait trois écrans. Deux colonnes tiennent très bien. */
@media (max-width: 560px) {
  .footer { padding-top: 26px; padding-bottom: 14px; font-size: .9rem; }
  /* Le bloc de marque ne prend plus toute la largeur : les quatre colonnes
     tiennent en deux rangées au lieu de trois, et le pied de page ne fait
     plus un écran et demi. */
  .footer__brand { grid-column: auto; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 16px 18px; padding-bottom: 16px; }
  .footer__brand img { height: 44px; }
  .footer__brand p { font-size: .88rem; }
  .footer__title { font-size: .94rem; margin-bottom: .5em; }
  .footer li { margin-bottom: .28em; }
  /* La rangée du bas s'étalait sur six lignes : elle se resserre et se range
     en colonne unique, mentions légales groupées. */
  .footer__bot {
    font-size: .78rem; gap: 8px; padding-top: 12px;
    flex-direction: column; align-items: flex-start; text-align: left;
  }
  .footer__legal { gap: 4px 12px; }
  .footer__bot > p { margin: 0; }
  .footer__bot > p:first-child { font-size: .74rem; }
  .socials { margin-top: 10px; gap: 8px; }
  .socials a { width: 36px; height: 36px; }
}
.footer__brand img { height: 52px; width: auto; margin-bottom: 12px; }
.footer__brand p { margin: 0; }
.footer__title {
  font-family: var(--f-head); font-weight: 600; color: #fff;
  font-size: 1rem; margin: 0 0 .65em;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .35em; }
.footer p { margin-block: .35em; }
.footer a { text-decoration: none; transition: color .15s; }
.footer a:hover { color: var(--brand-sur-nuit); }
.footer strong { color: #fff; font-weight: 800; }
.footer__bot {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: space-between; align-items: center;
  padding-top: 16px; font-size: .86rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0; }
.footer__legal button {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.footer__legal button:hover { color: var(--brand-sur-nuit); }
.credit a { color: var(--brand-sur-nuit); font-weight: 800; text-decoration: none; }
.credit a:hover { text-decoration: underline; }

.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: #fff; transition: .18s var(--ease);
}
.socials a:hover { background: var(--brand); color: var(--brand-ink); transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; fill: currentColor; }

/* ----------------------------------------------------- Bandeau cookies */

.consent {
  position: fixed; inset: auto 16px 16px; z-index: 120;
  max-width: 470px; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 24px 26px;
  transform: translateY(150%); transition: transform .45s var(--ease);
}
.consent[data-open="true"] { transform: none; }
.consent h2 { font-size: 1.2rem; margin-bottom: .4em; }
.consent p { font-size: .93rem; color: var(--muted); margin-bottom: 1em; }
.consent p a { color: var(--brand-text); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.consent__actions .btn { flex: 1; min-width: 130px; }
/*
 * Sur téléphone, le bandeau reste une bande, pas un panneau.
 *
 * Il montait à 42 % de la hauteur d'écran et recouvrait le contenu qu'on
 * venait lire. Texte resserré, titre plus discret, boutons sur une seule
 * ligne : il tient sous le quart de l'écran, et le reste de la page continue
 * de se lire pendant qu'on répond.
 */
.consent__court { display: none; }
@media (max-width: 560px) {
  .consent { inset: auto 10px 10px; padding: 12px 14px; border-radius: var(--r); }
  .consent h2 { font-size: .95rem; margin-bottom: .2em; }
  .consent p { font-size: .82rem; line-height: 1.4; margin-bottom: .6em; }
  /* Une seule phrase sur téléphone : le détail est sur la page dédiée. */
  .consent__long { display: none; }
  .consent__court { display: block; }
  .consent__actions { flex-wrap: nowrap; gap: 8px; }
  .consent__actions .btn { min-width: 0; padding-inline: .6em; font-size: .85rem; }
}
@media (max-width: 800px) { .consent { bottom: 78px; } }

/* -------------------------------------------------------------- Divers */

.empty {
  text-align: center; padding: clamp(40px, 6vw, 80px) 20px;
  color: var(--muted); border: 2px dashed var(--border);
  border-radius: var(--r-lg);
}
.empty__ico { font-size: 44px; margin-bottom: .3em; }

.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
.pagination a, .pagination span {
  min-width: 42px; height: 42px; display: grid; place-items: center; padding: 0 12px;
  border-radius: 100px; text-decoration: none; font-weight: 800;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.pagination a:hover { border-color: var(--brand); color: var(--brand-text); }
.pagination [aria-current="page"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: 1em; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; padding: 0; margin: 0; }
.breadcrumb li::after { content: "›"; margin-left: .5em; opacity: .5; }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-text); text-decoration: underline; }

/* ----------------------------------------------------------- Animations */

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Transitions entre pages, là où le navigateur les gère. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .3s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

@media print {
  .header, .actionbar, .consent, .footer, .btn, .progress { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ============================================================================
   Icônes propriétaires, effets saisonniers et mascotte
   ========================================================================== */

:root { --ico-encre: #11302C; }
:root[data-theme="dark"] { --ico-encre: #A8D2C9; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --ico-encre: #A8D2C9; }
}

.ck-ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ck-ico--xl { width: 56px; height: 56px; }

/* Pastille colorée qui accueille une icône, en remplacement des emojis */
.pastille {
  width: 60px; height: 60px; border-radius: 20px;
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--brand-soft); margin-bottom: 14px;
  transition: transform .25s var(--ease);
}
.pastille--coral { background: var(--coral-soft); }
.pastille--aqua { background: var(--aqua-soft); }
.pastille--grape { background: var(--grape-soft); }
.pastille--lime { background: var(--lime-soft); }
.card--hover:hover .pastille, .rule:hover .pastille { transform: rotate(-6deg) scale(1.06); }

/*
 * La couche des effets de saison, devant la page.
 *
 * Elle était posée dessous, à z-index 1, pendant que « main » et le pied de
 * page occupent le plan 2 : la neige, les chauves-souris et les pétales
 * tombaient donc derrière tout le contenu, et ne s'apercevaient que dans la
 * bande de quelques dizaines de pixels entre l'entête et la bannière. Le
 * moteur tournait, l'effet ne se voyait pas.
 *
 * Elle passe devant le contenu, comme de la neige derrière une vitre, mais
 * reste derrière tout ce qui sert : la barre d'actions du mobile, l'entête et
 * le bandeau cookies gardent leurs plans plus hauts, et le canevas ne reçoit
 * aucun clic.
 */
.vfx {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none;
  /* Assez présent pour qu'on voie tomber la neige devant le texte, assez léger
     pour qu'on lise quand même : les particules portent leur propre ombre, la
     lisibilité ne repose pas sur ce réglage seul. */
  opacity: .8;
}
/* Ces blocs gardent leur plan propre. Seul le plan est imposé : redéclarer la
   position ici décollait l'entête du haut de l'écran et remettait le bandeau
   cookies dans le flux de la page. */
main, .footer { position: relative; z-index: 2; }
.header { z-index: 100; }
.actionbar { z-index: 95; }
.consent { z-index: 120; }
/* Les fenêtres posées par-dessus la page, panneau de réglages et visionneuse
   d'image, sont déjà à 200 et 300 : elles couvrent les flocons sans qu'on ait
   à le redire ici. */

/* La mascotte : une illustration complète par saison, pas un accessoire ajouté */
.mascotte-holder { position: relative; display: inline-block; }
.mascotte-holder img { position: relative; z-index: 1; }

/* Bandeau indiquant le thème saisonnier actif */
.saison-note {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--brand-soft); color: var(--brand-text);
  font-weight: 800; font-size: .84rem;
  padding: .35em 1em; border-radius: 100px;
}

/* Petit accès au back-office, discret dans le pied de page */
/* Volontairement discrète à l'œil, mais assez grande pour le doigt : la boîte
   fait 42 px, seul le dessin en fait 26. */
.credit__cle {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; padding: 8px; border-radius: 50%;
  margin-left: .2em; vertical-align: middle; box-sizing: border-box;
  opacity: .28; transition: opacity .2s, transform .2s var(--ease);
}
.credit__cle:hover, .credit__cle:focus-visible { opacity: 1; transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .vfx { display: none; }
}

/* ============================================================================
   Page d'atterrissage anniversaire
   ========================================================================== */

/* La navigation principale est masquée : un seul chemin, la réservation. */
.landing .nav { display: none; }
.landing .header__in { justify-content: space-between; }

.lp-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 560px at 82% 4%, var(--ban-lueur-1), transparent 62%),
    radial-gradient(700px 480px at 4% 94%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 62%),
    linear-gradient(168deg, var(--ban-1) 0%, var(--ban-2) 54%, var(--ban-3) 100%);
  border-bottom: 1px solid var(--ban-bord);
  color: var(--ink);
  padding: clamp(40px, 5vw, 76px) 0 clamp(50px, 6vw, 86px);
}
.lp-hero__deco {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(var(--ban-points) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 76%);
  mask-image: linear-gradient(to bottom, #000, transparent 76%);
}
.lp-hero__in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(22px, 4vw, 54px); align-items: center;
}
.lp-hero h1 { color: var(--ink); font-size: clamp(2.2rem, 1.3rem + 3.9vw, 4.2rem); margin-bottom: .3em; }
.lp-hero h1 em { font-style: normal; color: var(--brand-text); display: block; }
.lp-lead { color: var(--ink-2); font-size: clamp(1.06rem, 1rem + .5vw, 1.3rem); max-width: 32em; }
.lp-note { color: var(--muted); font-size: .89rem; margin: 1.1em 0 0; }

.lp-badge {
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 42%, transparent);
  color: var(--brand-text); font-weight: 800; font-size: .9rem;
  padding: .45em 1.1em; border-radius: 100px; margin-bottom: 1.2em;
}

.lp-points { list-style: none; padding: 0; margin: 1.6em 0; display: grid; gap: 14px; }
.lp-points li { display: flex; align-items: center; gap: 14px; }
.lp-points li > svg { flex-shrink: 0; }
.lp-points b { display: block; font-family: var(--f-head); font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.lp-points span { color: var(--muted); font-size: .95rem; }

.lp-hero__art { justify-self: center; max-width: 430px; }
.lp-hero__art img { filter: drop-shadow(0 22px 40px rgba(17, 48, 44, .28)); animation: float 6.5s ease-in-out infinite; }

@media (max-width: 920px) {
  .lp-hero__in { grid-template-columns: 1fr; text-align: center; }
  .lp-lead { margin-inline: auto; }
  .lp-hero .btn-row { justify-content: center; }
  .lp-points { max-width: 420px; margin-inline: auto; }
  .lp-points li { text-align: left; }
  .lp-hero__art { max-width: 260px; order: -1; }
}

.lp-preuves .card h3 { font-size: 1.12rem; }
.lp-preuves .card p { font-size: .96rem; color: var(--muted); }

/* ------------------------------------------------------------- Jeu de paires */

.memo { max-width: 780px; margin-inline: auto; }
.memo__bar {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; margin-bottom: 20px;
}
.memo__score { margin: 0; color: var(--on-night-muted); font-size: .95rem; }
.memo__score b { color: var(--brand); font-family: var(--f-head); font-size: 1.15rem; }

.memo__grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 560px) { .memo__grille { grid-template-columns: repeat(3, 1fr); gap: 9px; } }

.memo__carte {
  aspect-ratio: 1; border: 0; padding: 0; cursor: pointer;
  background: none; perspective: 700px; border-radius: var(--r);
}
.memo__carte:disabled { cursor: default; }
.memo__face {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .45s var(--ease);
  border-radius: var(--r);
}
.memo__carte[aria-pressed="true"] .memo__face,
.memo__carte[data-trouve="true"] .memo__face { transform: rotateY(180deg); }

.memo__dos, .memo__avant {
  position: absolute; inset: 0; display: grid; place-items: center;
  backface-visibility: hidden; border-radius: var(--r);
  border: 2px solid rgba(255, 255, 255, .14);
}
.memo__dos {
  background: linear-gradient(150deg, var(--night-2), var(--night-3));
  color: var(--brand-sur-nuit);
}
.memo__avant {
  transform: rotateY(180deg);
  background: var(--surface); border-color: var(--brand);
}
.memo__carte[data-trouve="true"] .memo__avant {
  background: var(--brand-soft); box-shadow: 0 0 0 3px var(--brand);
}
.memo__carte:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.memo__carte:not(:disabled):hover .memo__face { transform: translateY(-4px); }
.memo__carte[aria-pressed="true"]:hover .memo__face,
.memo__carte[data-trouve="true"]:hover .memo__face { transform: rotateY(180deg); }

.memo__gagne {
  text-align: center; margin: 22px 0 0; min-height: 1.6em;
  font-family: var(--f-head); font-weight: 600; font-size: 1.15rem; color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
  .memo__face { transition: none; }
  .lp-hero__art img { animation: none; }
}

/* ============================================================================
   Réglages d'affichage

   Une carte de bord en parchemin, ouverte depuis l'entête. Chaque choix pose
   un attribut sur <html> ; les règles qui suivent s'y accrochent.
   ========================================================================== */

.reglages {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
}
.reglages[hidden] { display: none; }
.reglages__voile {
  position: absolute; inset: 0;
  background: rgba(24, 14, 8, .62); backdrop-filter: blur(3px);
  animation: reg-voile .22s var(--ease);
}
@keyframes reg-voile { from { opacity: 0; } }

.reglages__carte {
  position: relative; z-index: 1;
  width: min(100%, 560px); max-height: min(88vh, 760px);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  border: 2px solid var(--ban-bord);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface) 94%, transparent)),
    var(--surface);
  box-shadow: var(--sh-lg), inset 0 0 0 1px color-mix(in srgb, var(--or) 30%, transparent);
  animation: reg-carte .26s var(--ease);
}
@keyframes reg-carte { from { opacity: 0; transform: translateY(14px) scale(.98); } }

/* Cordage : deux filets dorés qui courent le long du cadre. */
.reglages__carte::before {
  content: ""; position: absolute; inset: 7px; border-radius: calc(var(--r-lg) - 6px);
  border: 2px dashed color-mix(in srgb, var(--or) 52%, transparent);
  pointer-events: none;
}

.reglages__entete {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px 8px;
}
.reglages__entete h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); color: var(--ink);
}
.reglages__entete h2 svg { flex-shrink: 0; }
.reglages__fermer {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-2); cursor: pointer; padding: 0;
  transition: background-color .16s, transform .16s var(--ease);
}
.reglages__fermer:hover { background: var(--brand-soft); color: var(--brand-text); transform: rotate(90deg); }
.reglages__fermer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.reglages__intro { margin: 0; padding: 0 24px 4px; color: var(--muted); font-size: .92rem; }
.reglages__corps { padding: 12px 24px 8px; overflow-y: auto; display: grid; gap: 4px; }
.reglages__pied {
  display: flex; gap: 12px; justify-content: space-between; align-items: center;
  padding: 14px 24px 20px; border-top: 1px solid var(--border);
  margin-top: 6px; flex-wrap: wrap;
}

.reg-groupe { border: 0; padding: 12px 0; margin: 0; border-bottom: 1px dashed var(--border); }
.reg-groupe:last-child { border-bottom: 0; }
.reg-groupe legend {
  padding: 0; font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.reg-aide { margin: .2em 0 .7em; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.reg-choix { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .5em; }
.reg-opt { position: relative; }
.reg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.reg-opt span {
  display: block; cursor: pointer; padding: .48em 1.05em; border-radius: 100px;
  border: 2px solid var(--border-strong); background: var(--surface);
  font-weight: 700; font-size: .92rem; color: var(--ink-2);
  transition: background-color .15s, border-color .15s, color .15s;
}
.reg-opt span:hover { border-color: var(--brand); color: var(--brand-text); }
.reg-opt input:checked + span {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.reg-opt input:focus-visible + span { box-shadow: var(--ring); }

@media (max-width: 560px) {
  .reglages { padding: 0; place-items: end stretch; }
  .reglages__carte { max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; }
}

/* --------------------------------------------- Effets des réglages */

:root[data-taille="grande"] { font-size: 112.5%; }
:root[data-taille="xl"] { font-size: 125%; }

:root[data-lecture="aere"] body {
  letter-spacing: .02em; word-spacing: .08em; line-height: 1.85;
}
:root[data-lecture="aere"] p, :root[data-lecture="aere"] li { max-width: 62ch; }

:root[data-densite="compacte"] .section { padding-block: clamp(30px, 3.4vw, 52px); }
:root[data-densite="compacte"] .head { margin-bottom: clamp(20px, 2.2vw, 32px); }
:root[data-densite="compacte"] .grid { gap: clamp(12px, 1.4vw, 18px); }
:root[data-densite="compacte"] .card { padding: 20px; }

/* Contraste renforcé : plus de bordure, moins de gris, et le voile de la
   bannière devient franc pour que le texte ne repose plus sur une photo. */
:root[data-contraste="fort"] {
  --muted: var(--ink-2);
  --border: var(--border-strong);
  --ban-lueur-1: transparent;
  --ban-lueur-2: transparent;
}
:root[data-contraste="fort"] .hero--scene .hero__txt {
  background: var(--ban-2); backdrop-filter: none; border-width: 2px; border-color: var(--ink);
}
:root[data-contraste="fort"] .card,
:root[data-contraste="fort"] .price,
:root[data-contraste="fort"] .faq details { border-width: 2px; }
:root[data-contraste="fort"] a:not(.btn):not(.nav a) { text-decoration: underline; text-underline-offset: 3px; }
:root[data-contraste="fort"] .btn { box-shadow: 0 0 0 2px var(--ink) inset, 0 4px 0 rgba(0, 0, 0, .2); }

:root[data-anim="non"] *,
:root[data-anim="non"] *::before,
:root[data-anim="non"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
:root[data-anim="non"] .vfx { display: none !important; }

/* ----------------------------------------------------- Agrandissement d'image */

.zoomable { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.loupe__declencheur {
  position: absolute; inset: 0; z-index: 2;
  border: 0; background: none; cursor: zoom-in; padding: 0;
}
.loupe__declencheur:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; border-radius: inherit; }

.loupe {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: clamp(14px, 3vw, 44px);
  background: rgba(20, 12, 7, .88); backdrop-filter: blur(6px);
  animation: loupe-entree .2s var(--ease);
}
@keyframes loupe-entree { from { opacity: 0; } }
.loupe__cadre {
  margin: 0; max-width: min(100%, 1400px); max-height: 100%;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.loupe__cadre img {
  max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto;
  border-radius: var(--r); box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
  animation: loupe-image .26s var(--ease);
}
@keyframes loupe-image { from { opacity: 0; transform: scale(.96); } }
.loupe__cadre figcaption {
  color: #F6EAE0; font-size: .92rem; text-align: center; max-width: 60ch; line-height: 1.5;
}
.loupe__fermer {
  position: absolute; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px);
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35);
  background: rgba(20, 12, 7, .7); color: #fff; cursor: pointer; padding: 0;
  transition: background-color .16s, transform .16s var(--ease);
}
.loupe__fermer:hover { background: var(--brand); border-color: var(--brand); transform: rotate(90deg); }
.loupe__fermer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ------------------------------------------------------------------ Vidéos */

.video {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--night) var(--video-affiche, none) center / cover;
  box-shadow: var(--sh-lg); max-width: 1000px; margin-inline: auto;
}
/* L'affiche d'une vidéo est un fond : le navigateur ne peut pas en choisir la
   taille. Sous 700 pixels, on lui désigne la petite version. */
@media (max-width: 700px) {
  .video { background-image: var(--video-affiche-petite, var(--video-affiche, none)); }
}

.video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 7, .28), rgba(20, 12, 7, .62));
}
.video[data-lu="true"]::after { display: none; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__lire {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 0; background: none; cursor: pointer; color: #fff; padding: 20px;
  font-family: inherit; text-align: center;
}
.video__rond {
  width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  transition: transform .2s var(--ease);
}
.video__lire:hover .video__rond { transform: scale(1.08); }
.video__lire:focus-visible { outline: 3px solid var(--brand); outline-offset: -6px; }
.video__libelle { font-family: var(--f-head); font-weight: 600; font-size: 1.22rem; }
.video__lire small { font-size: .8rem; color: rgba(255, 255, 255, .84); max-width: 34ch; line-height: 1.45; }
.video__legende { text-align: center; color: var(--muted); font-size: .9rem; margin: 14px 0 0; }

.boucle {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(320px, 42vw, 520px);
  display: grid; align-items: center; text-align: center; color: #fff;
}
.boucle__video {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.boucle__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20, 12, 7, .58), rgba(20, 12, 7, .72));
}
.boucle__in { padding-block: clamp(46px, 5vw, 80px); position: relative; z-index: 1; }
.boucle h2 { color: #fff; }
.boucle .lead { color: rgba(255, 255, 255, .88); margin-inline: auto; max-width: 46ch; }
.boucle .eyebrow { color: var(--brand-sur-nuit); }
.boucle__pause {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .45); background: rgba(20, 12, 7, .6);
  color: #fff; font-size: .9rem; display: grid; place-items: center; padding: 0;
}
.boucle__pause:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.boucle__pause-off { display: none; }
.boucle[data-pause="true"] .boucle__pause-on { display: none; }
.boucle[data-pause="true"] .boucle__pause-off { display: block; }


/* --------------------------------------------------- Filtres d'actualités
 *
 * Des liens, pas des boutons : chaque catégorie a sa propre adresse, on peut
 * la partager, l'ouvrir dans un onglet et revenir en arrière. La catégorie
 * affichée se signale par aria-current, lu par les lecteurs d'écran.
 */
.filtres {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin: 0 0 clamp(26px, 3.5vw, 40px);
}
.filtres a {
  font-family: var(--f-head); font-weight: 600; font-size: .92rem;
  color: var(--ink-2); text-decoration: none;
  padding: .46em .95em; border-radius: 100px;
  border: 1px solid var(--border); background: var(--surface);
  transition: background-color .16s, color .16s, border-color .16s;
}
.filtres a:hover { border-color: var(--brand); color: var(--brand-text); }
.filtres a[aria-current] {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.filtres a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------ Contenu extérieur
 *
 * Un cadre inséré vient d'ailleurs et ne connaît pas la mise en page du site :
 * on lui donne une largeur pleine, une hauteur explicite et les arrondis de la
 * maison, pour qu'il ne fasse pas tache.
 */
.integration {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
  max-width: var(--wrap-narrow); margin-inline: auto;
}
.integration iframe { display: block; width: 100%; border: 0; }
.integration__legende {
  max-width: var(--wrap-narrow); margin: 12px auto 0;
  font-size: .88rem; color: var(--muted); text-align: center;
}
.integration__refus {
  margin: 0; padding: 20px 22px; font-size: .92rem; color: var(--ink-2);
}
.integration__refus code {
  background: var(--surface); padding: .1em .4em; border-radius: 5px;
  border: 1px solid var(--border);
}

/* ======================================================= État du parc
 *
 * La première question de tout parent, réglée avant qu'il ait fait défiler.
 * Un point vert et une phrase : « Ouvert, ferme à 18h00 ». Trois quarts d'heure
 * avant la fermeture, on le dit : c'est loyal, et cela évite une famille qui
 * arrive pour dix minutes de jeu.
 *
 * Le point n'est jamais seul à porter l'information : la phrase dit tout, et
 * la couleur ne fait que la confirmer.
 */
.etat {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0; padding: 7px clamp(16px, 4vw, 32px);
  font-size: .92rem; line-height: 1.4;
  background: var(--lime-soft, #ECFDF3);
  color: var(--lime-ink, #067647);
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.etat[data-ouvert="false"] {
  background: var(--surface-2);
  color: var(--ink-2);
}
.etat[data-urgent="true"] {
  background: #FFFAEB;
  color: #B54708;
}
:root[data-theme="dark"] .etat { background: #0E2E23; color: #75E0A7; }
:root[data-theme="dark"] .etat[data-ouvert="false"] { background: var(--surface-2); color: var(--ink-2); }
:root[data-theme="dark"] .etat[data-urgent="true"] { background: #3A2A0B; color: #FEC84B; }

.etat__point {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  flex-shrink: 0;
}
.etat[data-ouvert="true"] .etat__point { animation: etat-pouls 2.4s ease-in-out infinite; }
@keyframes etat-pouls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .etat__point { animation: none !important; } }

.etat b { font-weight: 700; }
/*
 * Le détail se distingue par sa graisse, pas par une opacité.
 *
 * À 85 %, le texte tombait à 4,01 pour 1 sur le fond d'alerte, sous le seuil
 * de 4,5 : la mention « Plus que 20 minutes » devenait difficile à lire
 * précisément dans les vingt dernières minutes, c'est-à-dire au moment où
 * elle est la seule chose qui compte. Troisième fois qu'une opacité coûte du
 * contraste dans ce projet : on ne s'en sert plus pour atténuer du texte.
 */
.etat__detail { font-weight: 400; }
.etat__lien { margin-left: auto; color: inherit; font-size: .84rem; text-decoration: underline; text-underline-offset: 3px; }
.etat__lien:hover { text-decoration-thickness: 2px; }

@media (max-width: 560px) {
  .etat { font-size: .86rem; padding-block: 6px; }
  .etat__lien { margin-left: 0; }
}

/* Une fermeture annoncée à l'avance, en bandeau discret sous l'entête. */
.fermeture-avis {
  padding: 10px clamp(16px, 4vw, 32px);
  background: #FFFAEB; color: #B54708;
  font-size: .9rem; line-height: 1.45;
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
:root[data-theme="dark"] .fermeture-avis { background: #3A2A0B; color: #FEC84B; }
@media print { .etat, .fermeture-avis { display: none !important; } }

/* ====================================================== L'annonce du moment
 *
 * Les horaires d'une semaine de vacances, une soirée, un jour particulier :
 * une ligne posée sous l'en-tête de chaque page, dans les couleurs de la
 * marque pour qu'on la voie du premier coup d'oeil, assez sobre pour ne pas
 * couvrir la page. Elle s'efface seule à la date de fin réglée au parc.
 */
.annonce {
  background: var(--brand-soft); color: var(--brand-text);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.annonce__in {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-block: 11px;
}
.annonce__ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--sh-xs);
}
.annonce__texte {
  flex: 1 1 240px; margin: 0;
  font-size: .95rem; line-height: 1.45;
}
.annonce__texte b { font-family: var(--f-head); font-weight: 600; }
.annonce__lien {
  flex: none; color: inherit; font-weight: 700; font-size: .9rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.annonce__lien:hover { text-decoration-thickness: 2px; }
/* Sur un téléphone, la phrase prend déjà trois lignes : le lien passe
   dessous plutôt que de la serrer contre le bord. */
@media (max-width: 560px) {
  .annonce__in { gap: 6px 12px; }
  .annonce__ico { display: none; }
  .annonce__texte { font-size: .9rem; }
  .annonce__lien { flex: 1 1 100%; }
}
@media print { .annonce { display: none !important; } }

/* Le bandeau d'état dans le pied de page du menu mobile n'a pas à s'afficher
   deux fois quand la barre d'actions est déjà là. */
@media (max-width: 800px) { .etat__lien { font-size: .8rem; } }

/* ==================================================== Formules côte à côte
 *
 * C'est ce que les parents comparent, et c'est la page où ils décident.
 * Chaque formule porte son prix en gros, sa durée, son minimum d'enfants et
 * ce qui est compris. Le minimum est annoncé ici, pas découvert au moment de
 * payer : c'est la première cause de malentendu sur un anniversaire.
 */
.formules {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.formule { position: relative; cursor: pointer; display: block; }
.formule input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
.formule__corps {
  display: grid; gap: 4px; align-content: start; height: 100%;
  padding: 20px 18px 18px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color .16s, transform .16s var(--ease), box-shadow .16s;
}
.formule:hover .formule__corps { border-color: var(--brand); transform: translateY(-2px); }
.formule input:checked + .formule__corps {
  border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.formule input:focus-visible + .formule__corps { outline: 3px solid var(--brand); outline-offset: 3px; }

.formule--phare .formule__corps { border-color: var(--brand-2); }
.formule__ruban {
  position: absolute; top: -11px; left: 18px;
  background: var(--brand); color: var(--brand-ink);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 100px;
}
.formule__nom { font-family: var(--f-head); font-size: 1.12rem; font-weight: 700; }
.formule__prix {
  font-family: var(--f-head); font-size: 1.7rem; font-weight: 800;
  color: var(--brand-text); line-height: 1.1; letter-spacing: -.02em;
}
.formule__duree { font-size: .82rem; color: var(--muted); font-weight: 600; }
.formule__accroche { font-size: .88rem; color: var(--ink-2); margin-top: 4px; line-height: 1.45; }
.formule__inclus {
  margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px;
  font-size: .86rem; color: var(--ink-2);
}
.formule__inclus li { position: relative; padding-left: 20px; line-height: 1.4; }
.formule__inclus li::before {
  content: ""; position: absolute; left: 2px; top: .42em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

/* Le budget, calculé pendant qu'on règle le nombre d'enfants. */
.simulateur {
  margin: 16px 0 0; padding: 13px 16px;
  background: var(--brand-soft); color: var(--ink);
  border-radius: var(--r); font-size: .95rem; line-height: 1.5;
  border-left: 3px solid var(--brand);
}
.simulateur:empty { display: none; }
.simulateur[data-ton="attention"] {
  background: #FFFAEB; color: #B54708; border-left-color: #B54708;
}
:root[data-theme="dark"] .simulateur[data-ton="attention"] { background: #3A2A0B; color: #FEC84B; }

/* ------------------------------------------- Calendrier des vacances (zone A)

   Une liste de dates est une chose ennuyeuse à lire. Celle-ci est ordonnée,
   la période en cours est signalée, et le compte à rebours répond à la vraie
   question du parent : c'est dans combien de temps. */
.vac-etat {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center;
  max-width: 760px; margin: 0 auto clamp(28px, 4vw, 44px);
  padding: 20px 24px; border-radius: 18px;
  background: var(--surface-2); border: 2px solid var(--border);
}
.vac-etat__ico { grid-row: span 2; display: grid; place-items: center; }
.vac-etat b { font-size: 1.12rem; }
.vac-etat__detail { font-size: .93rem; color: var(--muted); line-height: 1.5; }
.vac-etat[data-etat="pendant"] { border-color: color-mix(in srgb, var(--lime) 55%, transparent); }

.vacs { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vac {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center;
  padding: 20px 24px; border-radius: 16px;
  background: var(--surface); border: 2px solid var(--border);
}
.vac__nom { margin: 0; font-weight: 800; font-size: 1.08rem; }
.vac__dates {
  grid-column: 1; margin: 0; font-size: .95rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.vac__fleche { color: var(--brand-text); font-weight: 700; }
.vac__duree {
  grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: right;
  font-size: .88rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
.vac[data-encours="true"] {
  border-color: var(--brand); background: var(--brand-soft);
}
.vac[data-encours="true"] .vac__duree { color: var(--brand-text); }
.vac-source {
  max-width: 760px; margin: clamp(24px, 3vw, 36px) auto 0;
  font-size: .87rem; color: var(--muted); line-height: 1.6;
}
@media (max-width: 620px) {
  .vac { grid-template-columns: 1fr; }
  .vac__duree { grid-column: 1; grid-row: auto; text-align: left; }
  .vac-etat { grid-template-columns: 1fr; }
  .vac-etat__ico { grid-row: auto; justify-self: start; }
}

/* Les deux grilles d'horaires, côte à côte. Un jour fermé s'efface plutôt que
   de crier : ce qu'on cherche, ce sont les jours ouverts. */
.grille {
  padding: 24px 26px; border-radius: 18px;
  background: var(--surface); border: 2px solid var(--border);
}
.grille h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.12rem; margin: 0 0 14px;
}
.grille__ico { display: inline-grid; place-items: center; }
.grille__t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.grille__t th, .grille__t td { padding: 9px 0; text-align: left; border-bottom: 1px solid var(--border); }
.grille__t th { font-weight: 700; }
.grille__t td { text-align: right; font-variant-numeric: tabular-nums; }
.grille__t tr:last-child th, .grille__t tr:last-child td { border-bottom: 0; }
.grille__ferme th, .grille__ferme td { color: var(--muted); font-weight: 400; }
/* Le calendrier couvre deux années scolaires : sans le millésime, deux
   « vacances de la Toussaint » se ressemblent au point de passer pour un doublon. */
.vac__an { font-weight: 400; color: var(--muted); margin-left: .4em; }

/* ------------------------------------------------------- Les avis publiés

   Un témoignage se lit d'un bloc : la note, le texte, le nom. L'étoile vide
   est dessinée pour que quatre sur cinq ne passe pas pour cinq sur cinq, et
   la source est dite, parce qu'un avis Google n'a pas le même poids qu'un
   compliment recueilli à l'accueil. */
.avis {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.avis__un {
  margin: 0; padding: 26px 28px; border-radius: 18px;
  background: var(--surface); border: 2px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.avis__note { margin: 0; font-size: 1.05rem; letter-spacing: 2px; color: #B4761A; }
.avis__vide { color: var(--border-strong); }
.avis__un blockquote {
  margin: 0; flex: 1; font-size: 1rem; line-height: 1.65;
  border: 0; padding: 0; quotes: '«\00a0' '\00a0»';
}
.avis__un blockquote::before { content: open-quote; }
.avis__un blockquote::after { content: close-quote; }
.avis__un figcaption {
  font-weight: 800; font-size: .93rem;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
}
.avis__ou { font-weight: 400; font-size: .85rem; color: var(--muted); }
.section--dark .avis__un {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16);
  color: var(--on-night);
}
.section--dark .avis__ou { color: var(--on-night-muted); }

/* --------------------------------------------- L'invitation d'anniversaire

   Une carte, pas une page : c'est ce qu'on regarde sur un téléphone en
   diagonale, et c'est ce qui sort de l'imprimante quand un parent préfère le
   papier. Le reste de la page l'entoure sans la concurrencer. */
.invitation { padding-block: clamp(32px, 5vw, 64px); }
.carte-invit {
  max-width: 560px; margin: 0 auto; text-align: center;
  padding: clamp(32px, 5vw, 52px) clamp(24px, 4vw, 44px);
  border-radius: 24px; background: var(--surface);
  border: 3px solid var(--brand); box-shadow: var(--sh-md, 0 18px 40px rgba(0,0,0,.08));
}
.carte-invit__sur {
  margin: 0 0 .3em; font-size: .95rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.carte-invit__qui { margin: 0; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; }
.carte-invit__age {
  margin: .4em 0 0; font-size: 1.3rem; font-weight: 800; color: var(--brand-text);
}
.carte-invit__quand {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: clamp(26px, 4vw, 38px) 0; text-align: left;
}
.carte-invit__quand dt {
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: .35em;
}
.carte-invit__quand dd { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.carte-invit__note {
  margin: 0; padding: 16px 18px; border-radius: 14px;
  background: var(--surface-2); font-size: .92rem; line-height: 1.6; text-align: left;
}
.carte-invit__pied { margin: 18px 0 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 520px) { .carte-invit__quand { grid-template-columns: 1fr; } }

.invit-outils {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: clamp(24px, 3vw, 34px) auto 0; max-width: 560px;
}
.invit-lien { max-width: 560px; margin: 18px auto 0; }
.invit-lien label {
  display: block; font-size: .85rem; color: var(--muted); margin-bottom: .4em; font-weight: 700;
}
.invit-lien input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 2px solid var(--border); background: var(--surface-2);
  font: inherit; font-size: .9rem; color: var(--ink);
}
.invit-passee {
  max-width: 560px; margin: 0 auto clamp(20px, 3vw, 30px); padding: 14px 18px;
  border-radius: 14px; background: var(--surface-2); border: 2px solid var(--border);
  text-align: center; font-size: .93rem; color: var(--muted);
}
.invit-parc {
  max-width: 560px; margin: clamp(30px, 4vw, 44px) auto 0;
  text-align: center; font-size: .9rem; color: var(--muted); line-height: 1.7;
}
.invit-parc a { color: var(--brand-text); }

/* À l'impression, la carte est seule sur sa feuille. */
@media print {
  .invitation { padding: 0; }
  .invit-outils, .invit-lien, .invit-passee, .invit-parc { display: none !important; }
  .carte-invit { border-width: 2px; box-shadow: none; max-width: none; page-break-inside: avoid; }
}
.carte-invit__capitaine {
  display: block; width: clamp(110px, 22vw, 150px); height: auto;
  margin: -12px auto 8px;
}

/* --------------------------------------------------------- La recherche du site

   Un rattrapage, pas une vitrine : elle apparaît sur la page d'erreur et sur
   sa propre page, jamais dans l'en-tête, où elle ferait croire que le menu ne
   suffit pas. */
.cherche { max-width: 620px; margin: 0 auto clamp(26px, 4vw, 40px); }
.cherche > label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .5em; }
.cherche__ligne { display: flex; gap: 10px; }
.cherche input[type="search"] {
  flex: 1; min-width: 0; padding: 14px 16px; border-radius: 14px;
  border: 2px solid var(--border); background: var(--surface);
  font: inherit; color: var(--ink);
}
.cherche input[type="search"]:focus { border-color: var(--brand); outline: none; }
.cherche--404 { margin-inline: 0; }

.cherche__aide { max-width: 620px; margin: 0 auto; color: var(--muted); line-height: 1.7; }
.cherche__aide a { color: var(--brand-text); }

.cherche__liste { list-style: none; padding: 0; margin: 0 auto; max-width: 720px; display: grid; gap: 12px; }
.cherche__liste a {
  display: grid; gap: 5px; padding: 18px 22px; border-radius: 16px;
  background: var(--surface); border: 2px solid var(--border);
  text-decoration: none; color: inherit;
}
.cherche__liste a:hover { border-color: var(--brand); }
.cherche__quoi {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.cherche__liste b { font-size: 1.08rem; }
.cherche__extrait { font-size: .9rem; color: var(--muted); line-height: 1.6; }

.cherche__vide {
  max-width: 620px; margin: 0 auto; padding: 24px 26px;
  border-radius: 16px; background: var(--surface-2); border: 2px solid var(--border);
  line-height: 1.7;
}
.cherche__vide p { margin: 0 0 .8em; }
.cherche__vide p:last-child { margin-bottom: 0; }
.cherche__vide a { color: var(--brand-text); }

/* ------------------------------------------------------- La parure des saisons

   Une guirlande sous l'en-tête et un ornement dans le coin de la bannière.
   Purement décoratif : rien ne reçoit le clic, sans quoi une guirlande de
   Noël rendrait le menu inutilisable au pire moment de l'année. */
/* z-index : la bannière qui suit peint son fond après, et recouvrirait
   l'ornement sans cela. */
.parure { position: relative; pointer-events: none; z-index: 5; }
.parure__guirlande { display: block; width: 100%; height: 60px; }
.parure__angle {
  /* Décalé du bord : à droite se trouve déjà le bouton d'accessibilité, et
     deux choses qui se touchent donnent l'impression que l'une déborde. */
  position: absolute; top: 0; right: clamp(8px, 4vw, 56px);
  width: clamp(104px, 15vw, 172px);
  height: auto; opacity: .9; z-index: 1;
  /* L'ornement déborde sur la bannière qui suit : c'est ce qui fait qu'il
     habille la page plutôt que de flotter dans une bande à lui. */
  transform: translateY(6px);
}
@media (max-width: 640px) {
  .parure__angle { width: 108px; opacity: .7; right: 6px; }
}
/* Le thème sombre avale les motifs trop sourds : on les remonte un peu. */
:root[data-theme="dark"] .parure__guirlande,
:root[data-theme="dark"] .parure__angle { filter: saturate(1.15) brightness(1.12); }

/* L'ornement d'Halloween pend du plafond : il vient de la gauche, pas du ciel. */
.parure[data-saison="halloween"] .parure__angle { opacity: .8; }
.parure[data-saison="noel"] .parure__angle { transform: translateY(2px); }

@media print { .parure { display: none; } }
@media (prefers-reduced-motion: reduce) { .parure__angle { transform: none; } }

/* ------------------------------------------------- La carte de fidélité

   Les tampons disent l'essentiel d'un regard : combien de fois on est venu,
   combien il en reste. Le nombre est écrit dans les cases vides, pour que
   la lecture ne dépende pas de la couleur ni du comptage à l'œil. */
.fidelite { padding-block: clamp(32px, 5vw, 64px); }
.carte-fid {
  max-width: 560px; margin: 0 auto; text-align: center;
  padding: clamp(30px, 5vw, 48px) clamp(22px, 4vw, 40px);
  border-radius: 24px; background: var(--surface);
  border: 3px solid var(--brand);
}
.carte-fid__sur {
  margin: 0 0 .3em; font-size: .85rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); font-weight: 700;
}
.carte-fid__qui { margin: 0; font-size: clamp(1.8rem, 5vw, 2.5rem); line-height: 1.1; }
.carte-fid__code { margin: .5em 0 0; font-size: .95rem; color: var(--muted); }
.carte-fid__code b { color: var(--ink); letter-spacing: .06em; }

.tampons {
  margin: clamp(24px, 4vw, 34px) 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
}
.tampon {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; border: 2px dashed var(--border-strong);
  font-weight: 800; font-size: 1.1rem; color: var(--muted);
}
.tampon--pris {
  border-style: solid; border-color: var(--brand);
  background: var(--brand-soft); color: var(--brand-text); font-size: 1.4rem;
}
@media (max-width: 420px) { .tampons { grid-template-columns: repeat(5, 1fr); gap: 7px; } }

.carte-fid__etat { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.carte-fid__gagnees {
  margin: 14px 0 0; font-weight: 700; color: var(--brand-text);
}
.carte-fid__total { margin: 16px 0 0; font-size: .88rem; color: var(--muted); }

/* L'affluence du moment, à côté de l'état du parc. Une pastille, pas une
   alerte : le niveau est écrit, la couleur ne fait que le confirmer. */
.etat__affluence {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 99px; font-size: .84rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border);
}
.etat__affluence::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.etat__affluence[data-niveau="calme"] { color: var(--lime-ink, #1F6B3A); }
.etat__affluence[data-niveau="forte"] { color: var(--coral-ink, #9B2C1F); }

/* La proposition de reprendre un formulaire commencé. Posée en haut du
   formulaire, elle se referme dès qu'on a choisi : une bannière qui reste
   après avoir été traitée devient du bruit. */
.reprise {
  margin: 0 0 24px; padding: 18px 20px; border-radius: 14px;
  background: var(--brand-soft); border: 2px solid var(--brand);
}
.reprise p { margin: 0 0 12px; line-height: 1.55; }
.reprise__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------- L'agenda des animations

   Un agenda se lit par mois, et dans chaque mois par date. Le bloc de date
   est à gauche comme sur un calendrier de bureau ; il est décoratif, la date
   complète étant lue par ailleurs pour les lecteurs d'écran. */
.agenda-mois { margin-bottom: clamp(36px, 5vw, 56px); }
.agenda-mois:last-child { margin-bottom: 0; }
.agenda-mois__nom {
  font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 20px;
  text-transform: capitalize;
  padding-bottom: 10px; border-bottom: 2px solid var(--border);
}
.agenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.anim {
  display: grid; gap: 4px 22px; align-items: start;
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 22px 24px; border-radius: 18px;
  background: var(--surface); border: 2px solid var(--border);
}
.anim:has(.anim__img) { grid-template-columns: 76px 180px minmax(0, 1fr); }
.anim__date {
  margin: 0; display: grid; justify-items: center; gap: 2px;
  padding: 10px 6px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text);
}
.anim__jour { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.anim__nombre { font-size: 1.7rem; line-height: 1; }
.anim__img { border-radius: 12px; overflow: hidden; }
.anim__img img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.anim__txt h3 { margin: 0 0 4px; font-size: 1.18rem; }
.anim__quand { margin: 0 0 8px; font-size: .88rem; color: var(--muted); font-weight: 700; }
.anim__accroche { margin: 0 0 6px; font-size: 1rem; line-height: 1.6; }
.anim__detail { margin: 0; font-size: .93rem; line-height: 1.65; color: var(--muted); }
.anim__places {
  margin: 12px 0 0; font-size: .88rem; font-weight: 700; color: var(--brand-text);
}
.anim__places[data-complet="true"] { color: var(--coral-ink); }
@media (max-width: 720px) {
  .anim, .anim:has(.anim__img) { grid-template-columns: 64px minmax(0, 1fr); }
  .anim__img { grid-column: 1 / -1; order: 3; }
  .anim__txt { grid-column: 2; }
}

/* ------------------------------------------------------- Les espaces du parc

   Une alternance texte/image, comme un dépliant. Les raccourcis du haut
   servent au parent qui cherche un âge précis : il saute directement à la
   bonne zone au lieu de faire défiler. */
.zones-raccourcis {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: clamp(30px, 4vw, 48px); justify-content: center;
}
.zones-raccourcis a {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--surface); border: 2px solid var(--border);
  text-decoration: none; color: inherit; font-weight: 700; font-size: .94rem;
}
.zones-raccourcis a:hover { border-color: var(--brand); }
.zones-raccourcis span { font-weight: 400; font-size: .8rem; color: var(--muted); }

.zone {
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: clamp(40px, 6vw, 72px); scroll-margin-top: 110px;
}
.zone:last-child { margin-bottom: 0; }
.zone[data-inverse="true"] .zone__img { order: 2; }
.zone__img { border-radius: 20px; overflow: hidden; }
.zone__img img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 6.4; object-fit: cover; }
.zone__ages {
  margin: 0 0 .4em; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--brand-text);
}
.zone__txt h2 { margin: 0 0 .35em; font-size: clamp(1.4rem, 3.2vw, 2rem); }
.zone__accroche { margin: 0 0 .7em; font-size: 1.08rem; line-height: 1.6; }
.zone__detail { margin: 0; color: var(--muted); line-height: 1.7; }
@media (max-width: 760px) {
  .zone { grid-template-columns: 1fr; }
  .zone[data-inverse="true"] .zone__img { order: 0; }
}

/* ------------------------------------------------------------ Paiements */

/*
 * Comment on règle.
 *
 * Deux plans : la mise en avant des Chèques-Vacances, qui est l'information
 * que personne d'autre ne donne en ville, et la liste des moyens courants,
 * qui se lit d'un coup d'œil. Le reste du bandeau reste sobre : c'est une
 * réponse à une question pratique, pas une réclame.
 */
.paie-phare {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 34px);
  background: var(--surface); border: 2px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius: var(--r-lg); padding: clamp(20px, 2.6vw, 30px);
  box-shadow: var(--sh-xs); margin-bottom: 22px;
}
@media (max-width: 620px) { .paie-phare { flex-direction: column; text-align: center; } }

.paie-phare__marque {
  flex-shrink: 0; display: grid; place-items: center;
  min-width: 108px; padding: 10px;
  background: var(--brand-soft); border-radius: var(--r);
}
.paie-phare__marque img { display: block; width: auto; max-width: 150px; height: auto; max-height: 90px; }
.paie-phare__ico { line-height: 0; }

.paie-phare__oui {
  font-family: var(--f-head); font-weight: 700; font-size: .8rem;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--lime-ink); margin: 0 0 .25em;
}
.paie-phare__txt h3 { margin: 0 0 .4em; font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
.paie-phare__txt p { margin: 0; color: var(--ink-2); max-width: 62ch; }

.paie-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.paie-liste li {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 14px 16px;
}
.paie-liste__ico { flex-shrink: 0; line-height: 0; }
.paie-liste__txt { min-width: 0; }
.paie-liste b { font-family: var(--f-head); font-weight: 600; font-size: 1rem; line-height: 1.25; }
.paie-liste small { display: block; color: var(--muted); font-size: .86rem; line-height: 1.35; }

.paie-note { margin: 16px 0 0; font-size: .92rem; color: var(--muted); }
.section--gold .paie-note { color: rgba(17, 48, 44, .78); }
.section--gold .paie-phare { border-color: rgba(17, 48, 44, .22); }

/* ------------------------------------------------------- Réputation Google */

/*
 * La note Google, en tête du bloc des avis.
 *
 * Des centaines de familles ont noté le parc sur Google, et le site n'en
 * disait rien. Le chiffre est posé en grand, sa source est nommée, et le lien
 * mène aux avis eux-mêmes : une note sans provenance ne rassure personne.
 */
.avis-google {
  display: flex; align-items: center; gap: clamp(16px, 2.6vw, 30px);
  background: var(--surface); border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px);
  box-shadow: var(--sh-xs); margin-bottom: 26px;
}
@media (max-width: 620px) { .avis-google { flex-direction: column; text-align: center; } }

.avis-google__note {
  flex-shrink: 0; display: flex; align-items: baseline; gap: .25em;
  padding: 8px 18px; border-radius: var(--r); background: var(--brand-soft);
}
.avis-google__note b {
  font-family: var(--f-head); font-weight: 700; font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1; color: var(--brand-text);
}
.avis-google__note span { font-size: .92rem; font-weight: 600; color: var(--muted); }

/* La règle porte le nom de sa classe et celui du conteneur : « .avis-google__txt p »
   plus bas est plus spécifique, et emportait la couleur des étoiles. */
.avis-google__txt p.avis-google__etoiles {
  margin: 0 0 .3em; font-size: 1.3rem; letter-spacing: .08em; color: #B4761A;
}
.avis-google__txt p { margin: 0 0 .6em; color: var(--ink-2); }
.avis-google__txt > :last-child { margin-bottom: 0; }
.section--dark .avis-google { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.section--dark .avis-google__txt p { color: var(--on-night); }

/* ==================================================== La parure, la suite
 *
 * Ce qui, au-delà de la guirlande et de l'ornement, fait qu'une page entière
 * est de saison : le sol qui la porte, les congères sur les cartes, un motif
 * discret dans les fonds, du givre aux coins de la fenêtre, un halo sur le
 * titre. Tout est conditionné à la saison posée sur <html>, et rien ne bouge
 * hors saison. Les valeurs de transparence sont basses à dessein : une
 * ambiance se sent, elle ne se lit pas par-dessus le texte.
 * ======================================================================== */

/* --- Le sol, au-dessus du pied de page ---------------------------------- */
.parure-sol {
  position: relative; height: 0; z-index: 3; pointer-events: none;
}
.parure-sol svg { position: absolute; left: 0; right: 0; bottom: -1px; display: block; }
@media (max-width: 560px) { .parure-sol svg { height: 66px; } }
@media print { .parure-sol { display: none; } }

/* --- Un trait de saison sous l'en-tête ---------------------------------- */
html[data-saison]:not([data-saison="defaut"]) .header {
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--brand) 55%, transparent);
}

/* --- Le halo du titre --------------------------------------------------- */
html[data-halo="halloween"] .hero h1 em { text-shadow: 0 0 22px rgba(255, 140, 40, .55), 0 0 2px rgba(255, 170, 80, .6); }
html[data-halo="noel"] .hero h1 em { text-shadow: 0 0 18px rgba(255, 190, 90, .5); }
html[data-halo="nouvel-an"] .hero h1 em { text-shadow: 0 0 20px rgba(255, 215, 110, .6), 0 0 3px rgba(255, 240, 200, .7); }
html[data-halo="hiver"] .hero h1 em { text-shadow: 0 0 20px rgba(140, 200, 255, .55); }
html[data-halo="ete"] .hero h1 em { text-shadow: 0 0 18px rgba(255, 220, 120, .5); }
html[data-halo="printemps"] .hero h1 em { text-shadow: 0 0 16px rgba(250, 170, 210, .5); }
html[data-halo="paques"] .hero h1 em { text-shadow: 0 0 16px rgba(250, 200, 230, .5); }
html[data-halo="automne"] .hero h1 em { text-shadow: 0 0 18px rgba(230, 140, 50, .45); }

/* --- Les congères : Noël et hiver posent de la neige sur les cartes ------- */
html[data-congeres="noel"] .card, html[data-congeres="hiver"] .card,
html[data-congeres="noel"] .price, html[data-congeres="hiver"] .price,
html[data-congeres="noel"] .deal, html[data-congeres="hiver"] .deal,
html[data-congeres="noel"] .paie-phare, html[data-congeres="hiver"] .paie-phare,
html[data-congeres="noel"] .avis-google, html[data-congeres="hiver"] .avis-google,
html[data-congeres="noel"] .hours__card, html[data-congeres="hiver"] .hours__card {
  position: relative;
}
html[data-congeres="noel"] .card::before, html[data-congeres="hiver"] .card::before,
html[data-congeres="noel"] .price::before, html[data-congeres="hiver"] .price::before,
html[data-congeres="noel"] .deal::before, html[data-congeres="hiver"] .deal::before,
html[data-congeres="noel"] .paie-phare::before, html[data-congeres="hiver"] .paie-phare::before,
html[data-congeres="noel"] .avis-google::before, html[data-congeres="hiver"] .avis-google::before,
html[data-congeres="noel"] .hours__card::before, html[data-congeres="hiver"] .hours__card::before {
  content: ''; position: absolute; left: 4px; right: 4px; top: -7px; height: 17px;
  pointer-events: none; z-index: 2;
  background-repeat: repeat-x; background-size: 72px 17px; background-position: 0 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='17' viewBox='0 0 72 17'%3E%3Cpath d='M0 10C6 4 12 2 18 6s10 6 18 2 12-6 18-2 12 6 18 2V17H0z' fill='%23FFFFFF'/%3E%3Cpath d='M0 10C6 4 12 2 18 6s10 6 18 2 12-6 18-2 12 6 18 2' fill='none' stroke='%23DCE9F2' stroke-width='1.2'/%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 1px rgba(60, 90, 120, .18));
}
html[data-theme="dark"][data-congeres="noel"] .card::before, html[data-theme="dark"][data-congeres="hiver"] .card::before,
html[data-theme="dark"][data-congeres="noel"] .price::before, html[data-theme="dark"][data-congeres="hiver"] .price::before,
html[data-theme="dark"][data-congeres="noel"] .deal::before, html[data-theme="dark"][data-congeres="hiver"] .deal::before,
html[data-theme="dark"][data-congeres="noel"] .paie-phare::before, html[data-theme="dark"][data-congeres="hiver"] .paie-phare::before,
html[data-theme="dark"][data-congeres="noel"] .avis-google::before, html[data-theme="dark"][data-congeres="hiver"] .avis-google::before,
html[data-theme="dark"][data-congeres="noel"] .hours__card::before, html[data-theme="dark"][data-congeres="hiver"] .hours__card::before {
  opacity: .92;
}

/* --- Un motif dans les fonds de section ---------------------------------
   Des icônes de la saison, très pâles, dans un gris moyen qui tient sur un
   fond clair comme sur un fond sombre. Assez présent pour qu'on sente une
   texture, trop discret pour gêner une ligne de texte. */
html[data-motif] .section--alt { background-repeat: repeat; background-size: 220px 220px; }
html[data-motif="noel"] .section--alt, html[data-motif="hiver"] .section--alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg stroke='%238A7A70' stroke-opacity='.11' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cpath d='M40 30v28M28 37l12 7 12-7M28 51l12-7 12 7'/%3E%3Cpath d='M150 120v22M141 125l9 6 9-6M141 137l9-6 9 6'/%3E%3Cpath d='M90 170v18M83 174l7 5 7-5M83 184l7-5 7 5'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-motif="automne"] .section--alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%238A7A70' fill-opacity='.10'%3E%3Cpath d='M40 30c10 4 15 12 13 24-12 2-20-5-22-15 3-4 5-6 9-9z'/%3E%3Cpath d='M160 120c-10 5-14 14-11 26 12 0 19-8 18-19-3-4-4-5-7-7z'/%3E%3Cpath d='M90 180c8 3 12 10 10 19-9 2-16-4-17-12 3-3 4-5 7-7z'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-motif="printemps"] .section--alt, html[data-motif="paques"] .section--alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%238A7A70' fill-opacity='.10'%3E%3Ccircle cx='40' cy='36' r='5'/%3E%3Ccircle cx='47' cy='42' r='5'/%3E%3Ccircle cx='40' cy='48' r='5'/%3E%3Ccircle cx='33' cy='42' r='5'/%3E%3Ccircle cx='160' cy='126' r='5'/%3E%3Ccircle cx='167' cy='132' r='5'/%3E%3Ccircle cx='160' cy='138' r='5'/%3E%3Ccircle cx='153' cy='132' r='5'/%3E%3Cellipse cx='96' cy='184' rx='6' ry='8'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-motif="ete"] .section--alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg stroke='%238A7A70' stroke-opacity='.11' stroke-width='2' fill='none' stroke-linecap='round'%3E%3Ccircle cx='44' cy='40' r='9'/%3E%3Ccircle cx='158' cy='128' r='12'/%3E%3Ccircle cx='96' cy='186' r='6'/%3E%3Cpath d='M20 100q10-8 20 0t20 0M150 40q10-8 20 0t20 0'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-motif="halloween"] .section--alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg stroke='%238A7A70' stroke-opacity='.11' stroke-width='1.6' fill='none'%3E%3Cpath d='M0 0L60 60M0 0L30 70M0 0L70 30M0 22Q18 26 22 0M0 46Q40 52 46 0'/%3E%3C/g%3E%3Cg fill='%238A7A70' fill-opacity='.10'%3E%3Cpath d='M150 130q-6-10-14-4 4 4 14 4zm0 0q6-10 14-4-4 4-14 4z'/%3E%3Cellipse cx='150' cy='131' rx='3' ry='4'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-motif="nouvel-an"] .section--alt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%238A7A70' fill-opacity='.11'%3E%3Cpath d='M40 26l3 7 7 2-7 2-3 7-3-7-7-2 7-2z'/%3E%3Cpath d='M160 116l4 9 9 3-9 3-4 9-4-9-9-3 9-3z'/%3E%3Cpath d='M96 180l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- L'atmosphère : un voile fixe, très léger, aux bords de la fenêtre -----
   Posé entre la page et la couche des effets. Les alphas sont bas pour ne
   jamais faire perdre de contraste au texte : ils n'atteignent leur pleine
   valeur qu'aux extrémités, là où il n'y a rien à lire. */
html[data-voile="halloween"] body::before,
html[data-voile="noel"] body::before,
html[data-voile="hiver"] body::before,
html[data-voile="ete"] body::before,
html[data-voile="nouvel-an"] body::before {
  content: ''; position: fixed; inset: 0; z-index: 89; pointer-events: none;
}
html[data-voile="halloween"] body::before {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(44, 12, 66, .26) 100%);
}
html[data-voile="noel"] body::before {
  background: linear-gradient(to top, rgba(255, 176, 96, .14), transparent 32%);
}
html[data-voile="hiver"] body::before {
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, .55), transparent 26%),
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, .45), transparent 24%),
    radial-gradient(circle at 0 100%, rgba(235, 245, 255, .5), transparent 22%),
    radial-gradient(circle at 100% 100%, rgba(235, 245, 255, .45), transparent 22%);
}
html[data-voile="ete"] body::before {
  background: radial-gradient(circle at 88% -10%, rgba(255, 224, 140, .30), transparent 42%);
}
html[data-voile="nouvel-an"] body::before {
  background: radial-gradient(ellipse at center, transparent 60%, rgba(30, 20, 5, .22) 100%);
}
html[data-theme="dark"][data-voile="hiver"] body::before {
  background:
    radial-gradient(circle at 0 0, rgba(200, 225, 255, .22), transparent 26%),
    radial-gradient(circle at 100% 0, rgba(200, 225, 255, .18), transparent 24%),
    radial-gradient(circle at 0 100%, rgba(200, 225, 255, .18), transparent 22%),
    radial-gradient(circle at 100% 100%, rgba(200, 225, 255, .16), transparent 22%);
}
@media print { html[data-voile] body::before { display: none; } }

/* --- Les boutons : un léger relief de saison ---------------------------- */
html[data-saison]:not([data-saison="defaut"]) .btn:not(.btn--ghost):not(.btn--dark) {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 32%, transparent);
}

/* ---------------------------------------------------------- Mascotte héros
   Le crocodile de la saison bondit dans le coin bas de la bannière d'accueil.
   Il flotte doucement, et s'arrête si le visiteur demande moins de mouvement. */
.hero__mascotte {
  position: relative; z-index: 3; pointer-events: none;
  align-self: end; justify-self: end;
  width: clamp(170px, 24vw, 360px);
  margin: 0 clamp(8px, 4vw, 64px) clamp(-26px, -2vw, -12px) 0;
  animation: croco-entree .9s var(--ease) both .2s;
}
.hero__mascotte img {
  width: 100%; height: auto;
  filter: drop-shadow(0 18px 26px rgba(4, 20, 18, .35));
  animation: croco-flotte 5.5s ease-in-out infinite 1.1s;
  transform-origin: 40% 70%;
}
@keyframes croco-entree { from { opacity: 0; transform: translate(40px, 60px) rotate(8deg) scale(.86); } }
@keyframes croco-flotte {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(-3deg); }
}
.hero:not(.hero--scene) .hero__mascotte { position: absolute; right: 0; bottom: 0; }
@media (max-width: 700px) {
  .hero__mascotte { width: 42vw; margin-bottom: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mascotte, .hero__mascotte img { animation: none; }
}

/* ============================================================================
   Identité Béarn Kids

   Le moteur du site est partagé, l'allure ne l'est pas. Cette couche donne au
   parc sa propre façon d'être : des formes de bulles et de balles (la piscine
   à balles est le cœur du parc), des boutons « gélatine » qui s'enfoncent, des
   cartes comme des autocollants, et une bannière d'accueil en deux colonnes où
   la photo vit dans une bulle et où le crocodile saute par-dessus.
   ========================================================================== */

body { font-size: 16.5px; letter-spacing: -.003em; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; line-height: 1.04; }
h1 { font-size: clamp(2.3rem, 1.4rem + 3.8vw, 4.4rem); }

/* ---- Pastille d'accroche : une bille lime devant le texte */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .32em .9em .32em .45em; border-radius: 100px;
  width: fit-content; align-self: flex-start;
  background: color-mix(in srgb, var(--or) 30%, transparent);
  color: var(--or-text); letter-spacing: .08em;
}
.eyebrow::before {
  content: ""; width: .95em; height: .95em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 30%, #fff 0 18%, transparent 20%), var(--coral);
}
.section--dark .eyebrow { background: rgba(255, 255, 255, .1); color: var(--or); }
.section--gold .eyebrow { background: rgba(17, 48, 44, .1); color: var(--night); opacity: 1; }

/* ---- Boutons gélatine : une tranche épaisse dessous, qui s'écrase au clic */
.btn {
  font-weight: 700; letter-spacing: .01em;
  border-radius: 18px 18px 18px 18px / 22px 22px 18px 18px;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--bg-btn) 62%, #000), 0 10px 18px -8px rgba(4, 20, 18, .35);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), filter .14s;
}
.btn:hover {
  transform: translateY(-2px) rotate(-.6deg);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--bg-btn) 62%, #000), 0 14px 22px -8px rgba(4, 20, 18, .38);
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--bg-btn) 62%, #000); }
.btn--ghost { box-shadow: inset 0 0 0 2.5px currentColor, 0 4px 0 color-mix(in srgb, currentColor 30%, transparent); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2.5px currentColor, 0 6px 0 color-mix(in srgb, currentColor 30%, transparent); }

/* ---- Navigation : la page en cours dans une bille lime */
.nav a[aria-current="page"] { background: var(--or); color: var(--night); }
:root[data-theme="dark"] .nav a[aria-current="page"] { color: #0B1A18; }

/* ---- Cartes autocollants : bord franc et ombre décalée colorée */
.card {
  --sticker: var(--or);
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow: 7px 7px 0 var(--sticker);
  border-radius: 26px;
}
.card--hover:hover { transform: translate(-3px, -3px) rotate(-.4deg); box-shadow: 10px 10px 0 var(--sticker); }
.card--coral { --sticker: color-mix(in srgb, var(--coral) 70%, transparent); }
.card--aqua { --sticker: color-mix(in srgb, var(--aqua) 60%, transparent); }
.card--grape { --sticker: color-mix(in srgb, var(--grape) 60%, transparent); }
.card--gold { --sticker: var(--or); }
.card__top { display: none; }
.section--dark .card { border-color: rgba(255, 255, 255, .14); }

/* ---- Prix : même langage d'autocollant */
.price { border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: 7px 7px 0 color-mix(in srgb, var(--brand) 28%, transparent); border-radius: 26px; }
.price--hl { border-color: var(--brand); box-shadow: 9px 9px 0 var(--or); }

/* ---- Bord des sections : une rangée de bulles plutôt qu'un arrondi */
.section--curve, .section--curve-b { border-radius: 0; }
.section--curve {
  -webkit-mask: radial-gradient(circle 18px at 50% 0, #0000 96%, #000 100%) 0 0 / 46px 18px repeat-x,
                linear-gradient(#000 0 0) 0 17px / 100% calc(100% - 17px) no-repeat;
  mask: radial-gradient(circle 18px at 50% 0, #0000 96%, #000 100%) 0 0 / 46px 18px repeat-x,
        linear-gradient(#000 0 0) 0 17px / 100% calc(100% - 17px) no-repeat;
  margin-top: -17px; padding-top: calc(clamp(58px, 7vw, 108px) + 10px);
}

/* ---- Photos : bulles aux coins inégaux, cadre blanc, légère inclinaison */
.shot {
  border-radius: 38% 62% 46% 54% / 44% 40% 60% 56%;
  border: 6px solid var(--surface);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--or) 70%, transparent), var(--sh-lg);
  transform: rotate(1.2deg);
}
.media--rev .shot { transform: rotate(-1.2deg); box-shadow: -10px 12px 0 color-mix(in srgb, var(--coral) 45%, transparent), var(--sh-lg); }
.shot--tall { border-radius: 46% 54% 42% 58% / 34% 34% 66% 66%; }
.gallery figure { border-radius: 24px; border: 5px solid var(--surface); box-shadow: var(--sh); }
.gallery figure:nth-child(odd) { transform: rotate(-1.2deg); }
.gallery figure:nth-child(even) { transform: rotate(1deg); }
.gallery figure:hover { transform: rotate(0) scale(1.03); }

/* ---- Chiffres clés : chacun dans sa balle de couleur */
.stats { background: transparent; box-shadow: none; overflow: visible; gap: clamp(10px, 1.6vw, 18px); }
.stats > div {
  border: 0 !important; border-radius: 28px; background: var(--surface);
  box-shadow: 0 6px 0 var(--balle, var(--or)), var(--sh);
}
.stats > div:nth-child(4n+1) { --balle: var(--or); }
.stats > div:nth-child(4n+2) { --balle: var(--coral); }
.stats > div:nth-child(4n+3) { --balle: var(--aqua); }
.stats > div:nth-child(4n+4) { --balle: var(--brand-vif); }

/* ---- Bannière d'accueil : deux colonnes, la photo dans une bulle */
.hero--scene {
  display: block; position: relative; overflow: hidden;
  background:
    radial-gradient(520px 520px at 88% 18%, color-mix(in srgb, var(--or) 38%, transparent), transparent 70%),
    radial-gradient(420px 420px at 4% 96%, color-mix(in srgb, var(--coral) 20%, transparent), transparent 70%),
    linear-gradient(170deg, var(--ban-1), var(--ban-2));
  padding: clamp(36px, 5vw, 72px) 0 clamp(64px, 7vw, 104px);
}
.hero--scene::after {
  /* Les balles qui flottent dans le décor. */
  display: block; content: ""; position: absolute; inset: 0; z-index: 0; opacity: .9; pointer-events: none;
  background:
    radial-gradient(circle at 6% 22%, var(--aqua) 0 9px, transparent 10px),
    radial-gradient(circle at 44% 10%, var(--coral) 0 7px, transparent 8px),
    radial-gradient(circle at 52% 88%, var(--or) 0 12px, transparent 13px),
    radial-gradient(circle at 36% 70%, var(--grape) 0 5px, transparent 6px),
    radial-gradient(circle at 96% 82%, var(--coral) 0 8px, transparent 9px);
  -webkit-mask-image: none; mask-image: none;
  animation: balles-flottent 9s ease-in-out infinite alternate;
}
@keyframes balles-flottent { to { transform: translateY(-14px); } }
.hero--scene > * { grid-area: auto; }
.hero--scene .hero__voile { display: none; }
.hero--scene .hero__scene {
  position: absolute; z-index: 1;
  right: max(16px, calc((100vw - var(--wrap)) / 2)); top: 50%;
  width: min(46vw, 560px); aspect-ratio: 1 / .92; transform: translateY(-50%) rotate(2deg);
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%;
  overflow: hidden; border: 8px solid var(--surface);
  box-shadow: 16px 18px 0 color-mix(in srgb, var(--brand) 55%, transparent), var(--sh-lg);
}
.hero--scene .hero__scene img { object-position: 62% center; }
.hero--scene .hero__in { position: relative; z-index: 2; display: block; padding: 0; }
.hero--scene .hero__txt {
  max-width: min(560px, 48%); padding: 0; background: none; border: 0;
  backdrop-filter: none; box-shadow: none;
}
.hero--scene h1 em { color: var(--brand-text); }
.hero--scene .hero__mascotte {
  position: absolute; z-index: 3; margin: 0;
  right: calc(max(16px, calc((100vw - var(--wrap)) / 2)) + min(30vw, 380px));
  bottom: clamp(6px, 2vw, 30px); width: clamp(150px, 17vw, 260px);
}
@media (max-width: 900px) {
  .hero--scene { padding-top: 22px; }
  .hero--scene .hero__scene {
    position: relative; right: auto; top: auto; transform: rotate(1.5deg);
    width: calc(100% - 40px); margin: 0 auto 26px; aspect-ratio: 4 / 3;
  }
  .hero--scene .hero__txt { max-width: none; }
  .hero--scene .hero__mascotte { right: 10px; bottom: auto; top: 18px; width: 38vw; }
}

/* ---- Entêtes des pages : titre à gauche, photo en bulle à droite */
.pagehero--scene {
  display: block; text-align: left;
  background:
    radial-gradient(460px 460px at 92% 0%, color-mix(in srgb, var(--or) 34%, transparent), transparent 70%),
    linear-gradient(170deg, var(--ban-1), var(--ban-2));
  padding: clamp(34px, 4vw, 64px) 0 clamp(54px, 6vw, 90px);
}
.pagehero--scene > * { grid-area: auto; }
.pagehero--scene .pagehero__voile { display: none; }
.pagehero--scene .pagehero__scene {
  position: absolute; z-index: 1; min-height: 0;
  right: max(16px, calc((100vw - var(--wrap)) / 2)); top: 50%;
  width: min(38vw, 440px); aspect-ratio: 1 / .86; transform: translateY(-50%) rotate(-2deg);
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  overflow: hidden; border: 7px solid var(--surface);
  box-shadow: -14px 16px 0 color-mix(in srgb, var(--coral) 40%, transparent), var(--sh-lg);
}
.pagehero--scene .pagehero__scene img { object-position: center; }
.pagehero--scene .wrap { padding-block: 0; }
.pagehero--scene .pagehero__txt {
  max-width: min(600px, 54%); margin: 0; padding: 0;
  background: none; border: 0; backdrop-filter: none; box-shadow: none;
  min-height: clamp(220px, 26vw, 360px); display: flex; flex-direction: column; justify-content: center;
}
.pagehero--scene .lead { margin-inline: 0; }
.head--c .eyebrow, .center .eyebrow, .cta .eyebrow { align-self: center; margin-inline: auto; }
.pagehero--scene .btn-row--c { justify-content: flex-start; }
@media (max-width: 900px) {
  .pagehero--scene .pagehero__scene {
    position: relative; right: auto; top: auto; transform: rotate(-1.5deg);
    width: calc(100% - 40px); margin: 0 auto 22px; aspect-ratio: 16 / 10;
  }
  .pagehero--scene .pagehero__txt { max-width: none; min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--scene::after { animation: none; }
}

/* ---------------------------------------------------------- Pied de page
   Compact : une rangée d'identité, une rangée de liens en pastilles, une ligne
   d'infos pratiques, une ligne légale. Tout tient sur un écran de téléphone. */
.footer--bk { padding: clamp(26px, 3vw, 38px) 0 16px; font-size: .9rem; position: relative; overflow: hidden; }
.footer--bk::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--or) 40%, transparent) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 30%, color-mix(in srgb, var(--coral) 45%, transparent) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 88%, color-mix(in srgb, var(--aqua) 45%, transparent) 0 4px, transparent 5px);
}
.footer--bk .wrap { position: relative; }
.pied__haut { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.pied__logo img { height: 44px; width: auto; }
.pied__accroche { margin: 0; flex: 1 1 260px; color: var(--on-night); }
.footer--bk .socials { display: flex; gap: 8px; }
.pied__liens { margin: 18px 0 14px; }
.pied__liens ul { display: flex; flex-wrap: wrap; gap: 6px 6px; }
.pied__liens li { margin: 0; }
.pied__liens a {
  display: inline-block; padding: .38em .85em; border-radius: 100px;
  background: rgba(255, 255, 255, .07); color: var(--on-night);
  transition: background .18s var(--ease), transform .18s var(--ease), color .18s;
}
.pied__liens a:hover { background: var(--or); color: var(--night); transform: translateY(-2px) rotate(-1deg); }
.pied__infos { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 12px 0 !important;
  border-top: 1px dashed rgba(255, 255, 255, .14); border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.pied__infos li { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--on-night); }
.pied__infos svg { flex: none; }
.footer--bk .footer__bot { padding-top: 12px; margin-top: 0; border: 0; font-size: .84rem; }
@media (max-width: 640px) {
  .footer--bk { font-size: .86rem; }
  .pied__doublon { display: none; }
  .pied__logo img { height: 36px; }
  .pied__accroche { display: none; }
  .pied__haut { justify-content: space-between; }
  .pied__haut { gap: 6px 14px; }
  .pied__liens { margin: 12px 0 10px; }
  .pied__liens ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .pied__liens a { display: block; padding: .5em 0; min-height: 44px; display: flex; align-items: center;
    background: none; border-radius: 0; line-height: 1.25; }
  .pied__liens a:hover { background: none; color: var(--or); transform: none; }
  .pied__infos { flex-direction: column; gap: 4px; padding: 10px 0 !important; }
  .footer--bk .footer__bot { gap: 4px 14px; }
}

/* ============================================================== Motion
   Le mouvement de Béarn Kids : ça rebondit, ça défile, ça pétille. Tout est
   en CSS ou presque, coupé net si le visiteur demande moins d'animations. */

/* ---- La bande qui défile sous la bannière */
.defile {
  position: relative; z-index: 4; overflow: hidden; white-space: nowrap;
  background: var(--brand); color: var(--brand-ink);
  border-block: 3px solid color-mix(in srgb, var(--brand) 70%, #000);
  transform: rotate(-1.2deg); margin: -18px -12px 0; padding: 12px 0;
  box-shadow: 0 10px 24px -14px rgba(4, 20, 18, .5);
}
.defile__piste { display: inline-flex; animation: defile 38s linear infinite; }
.defile:hover .defile__piste { animation-play-state: paused; }
.defile__item {
  display: inline-flex; align-items: center; gap: 12px; padding: 0 22px;
  font-family: var(--f-head); font-weight: 800; font-size: clamp(1.05rem, .9rem + .6vw, 1.4rem); letter-spacing: .01em;
}
.defile__balle { width: 16px; height: 16px; border-radius: 50%; flex: none;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .15), inset 3px 3px 0 rgba(255, 255, 255, .35); }
.defile__balle--0 { background: var(--or); }
.defile__balle--1 { background: var(--coral); }
.defile__balle--2 { background: #FFD34D; }
.defile__balle--3 { background: #fff; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---- Apparition en « pop » des cartes, l'une après l'autre */
.grid.reveal.is-in > *, .stats.reveal.is-in > *, .deals.reveal.is-in > *, .gallery.reveal.is-in > * {
  animation: pop-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.reveal.is-in > :nth-child(2) { animation-delay: .07s; }
.reveal.is-in > :nth-child(3) { animation-delay: .14s; }
.reveal.is-in > :nth-child(4) { animation-delay: .21s; }
.reveal.is-in > :nth-child(5) { animation-delay: .28s; }
.reveal.is-in > :nth-child(6) { animation-delay: .35s; }
@keyframes pop-in { from { opacity: 0; transform: translateY(26px) scale(.92) rotate(-1.5deg); } }

/* ---- Titres de section : une vague qui se dessine dessous */
.head h2::after {
  content: ""; display: block; height: 12px; width: 0; margin-top: .22em;
  background: var(--or);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6q5-6 10 0t10 0 10 0 10 0' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 40px 12px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 6q5-6 10 0t10 0 10 0 10 0' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") left center / 40px 12px repeat-x;
  transition: width .9s var(--ease) .25s;
}
.head--c h2::after { margin-inline: auto; }
.head.is-in h2::after { width: 120px; }
.section--dark .head h2::after { background: var(--or); }

/* ---- Boutons : un petit tremblement de gélatine au survol */
.btn:hover { animation: gelatine .5s ease; }
@keyframes gelatine {
  0%, 100% { transform: translateY(-2px) scale(1, 1); }
  30% { transform: translateY(-2px) scale(1.06, .94); }
  50% { transform: translateY(-2px) scale(.96, 1.04); }
  70% { transform: translateY(-2px) scale(1.02, .98); }
}
.confetti {
  position: fixed; z-index: 9999; width: 9px; height: 9px; border-radius: 2px; pointer-events: none;
  animation: confetti .8s cubic-bezier(.2, .7, .4, 1) forwards;
}
@keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* ---- Le crocodile saute quand on le touche */
.hero__mascotte { pointer-events: auto; cursor: pointer; }
.hero__mascotte.saute img { animation: croco-saut .9s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes croco-saut {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-60px) rotate(-14deg) scale(1.05); }
  70% { transform: translateY(0) rotate(4deg) scale(1.02, .96); }
  100% { transform: translateY(0) rotate(0); }
}

/* ---- Les balles du décor suivent le défilement, à leur rythme */
.hero--scene::after { translate: 0 calc(var(--defil, 0) * -0.18px); }
.hero--scene .hero__scene { translate: 0 calc(var(--defil, 0) * 0.06px); }

/* ---- Pastilles d'icônes : un rebond à l'apparition */
.reveal.is-in .pastille { animation: rebond .7s cubic-bezier(.34, 1.56, .64, 1) .2s both; }
@keyframes rebond { from { transform: scale(.4) rotate(-20deg); } }

/* ---- Photos de la galerie : légère inclinaison suivie au survol */
.gallery figure { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s; }
.gallery figure:hover { box-shadow: 8px 10px 0 var(--or), var(--sh-lg); }

@media (prefers-reduced-motion: reduce) {
  .defile__piste, .btn:hover, .hero__mascotte.saute img, .reveal.is-in .pastille,
  .grid.reveal.is-in > *, .stats.reveal.is-in > *, .deals.reveal.is-in > *, .gallery.reveal.is-in > * { animation: none !important; }
  .head h2::after { transition: none; }
  .hero--scene::after, .hero--scene .hero__scene { translate: none; }
  .confetti { display: none; }
}

/* ============================================== Recette : derniers réglages */

/* Les blocs d'appel à l'action sont plus ramassés : le dernier, collé au pied
   de page, faisait presque un écran à lui seul. */
.cta.section { padding: clamp(44px, 5vw, 76px) 0; }
.cta .lead { margin-bottom: 1.1em; }
/* Un liseré lime sépare le pied de page d'un bloc sombre posé juste avant. */
.footer--bk { box-shadow: inset 0 5px 0 var(--or); padding-top: clamp(30px, 3vw, 40px); }

@media (max-width: 640px) {
  .pied__infos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
  .pied__infos li { align-items: flex-start; font-size: .82rem; line-height: 1.35; }
  .pied__infos li:first-child { grid-column: 1 / -1; }
  .footer--bk .footer__bot { font-size: .78rem; }
}

/* Cibles tactiles d'au moins 24 px (WCAG 2.2, 2.5.8) sur les petits liens. */
.breadcrumb a, .footer__bot a, .footer__bot button, .pied__infos a, .etat__lien {
  display: inline-flex; align-items: center; min-height: 24px; padding-block: 3px;
}

/* Thème sombre : la pastille d'accroche passe en lime, lisible sur son fond. */
:root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] .pagehero .eyebrow { color: var(--or); }
:root[data-theme="dark"] .section--gold .eyebrow { color: var(--night); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .eyebrow, :root:not([data-theme="light"]) .pagehero .eyebrow { color: var(--or); }
  :root:not([data-theme="light"]) .section--gold .eyebrow { color: var(--night); }
}

/* Les petits points de couleur du pied de page tombaient au hasard sur le
   texte et se lisaient comme des défauts : retirés. */
.footer--bk::before { display: none; }

@media (max-width: 640px) {
  .pied__liens ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .pied__liens a {
    display: inline-flex; min-height: 34px; padding: .3em .8em; border-radius: 100px;
    background: rgba(255, 255, 255, .07); font-size: .82rem;
  }
  .footer--bk .footer__bot { flex-direction: row; align-items: center; justify-content: center; text-align: center; gap: 2px 12px; padding-top: 10px; }
  .footer__legal { justify-content: center; gap: 0 12px; }
  .footer--bk .footer__bot > p { margin: 0; }
  /* Les mentions d'abord, puis le copyright et le crédit côte à côte. */
  .footer--bk .footer__legal { flex-basis: 100%; order: -1; margin-bottom: 4px; }
}

/* Chiffres clés : une bande à eux, qui laisse respirer les cartes. Ils
   vivaient dans une section « hero » qui coupait tout ce qui dépassait :
   la rangée du bas perdait son ombre et sa base colorée sur téléphone. */
.stats-bande { position: relative; z-index: 2; padding: clamp(18px, 3vw, 34px) 0 clamp(22px, 3.4vw, 40px); }
.stats-bande .stats { margin-bottom: 0; }
.stats-bande + .after-stats { padding-top: clamp(30px, 4vw, 56px); }
/* Sur téléphone, l'en-tête de page s'arrête plus près de son texte. */
@media (max-width: 640px) {
  .pagehero, .pagehero.pagehero--scene { padding-bottom: 26px; }
  .pagehero .lead { margin-bottom: 0; }
}

/* ===================================================== Mise en forme du texte
   Posée depuis la barre de l'éditeur. Chaque couleur suit le thème clair ou
   sombre, pour rester lisible dans les deux. */
.c-sapin { color: var(--brand-text); }
.c-rose { color: var(--coral-ink); }
.c-ciel { color: var(--aqua-ink); }
.c-pomme { color: var(--lime-ink); }
.c-raisin { color: var(--grape); }
.c-nuit { color: var(--ink); }
.c-lime { color: var(--or-text); }
.s-lime, .s-rose, .s-ciel, .s-raisin {
  padding: 0 .18em; border-radius: .25em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.s-lime { background: var(--or-soft); }
.s-rose { background: var(--coral-soft); }
.s-ciel { background: var(--aqua-soft); }
.s-raisin { background: var(--grape-soft); }
.t-petit { font-size: .82em; }
.t-grand { font-size: 1.25em; }
.t-geant { font-size: 1.6em; line-height: 1.05; }
.p-titre { font-family: var(--f-head); font-weight: 700; letter-spacing: -.01em; }
.p-texte { font-family: var(--f-body); }
.section--dark .c-nuit, .ap-fond-nuit .c-nuit, .ap-fonce .c-nuit { color: #fff; }

/* ================================================== Apparence d'un bloc */
.ap-fond-clair { background: var(--bg) !important; }
.ap-fond-blanc { background: var(--surface) !important; }
.ap-fond-menthe { background: var(--brand-soft) !important; }
.ap-fond-lime { background: var(--or-soft) !important; }
.ap-fond-rose { background: var(--coral-soft) !important; }
.ap-fond-ciel { background: var(--aqua-soft) !important; }
.ap-fond-raisin { background: var(--grape-soft) !important; }
.ap-fond-perso { background: var(--ap-fond, var(--surface)) !important; }
/* Un bloc foncé d'ordinaire, posé sur un fond pâle, reprend les couleurs de
   texte des sections claires : sinon ses titres blancs disparaîtraient. */
.section.ap-clair {
  /* Les couleurs « sur fond de nuit » deviennent celles du texte courant :
     tout ce qui s'y réfère suit, sans règle à écrire pour chaque élément. */
  --on-night: var(--ink); --on-night-muted: var(--muted);
  color: var(--ink);
}
.section.ap-clair::after { display: none; }
.section.ap-clair :is(h1, h2, h3, h4), .section.ap-clair .rule b, .section.ap-clair .c-nuit { color: var(--ink); }
.section.ap-clair :is(.lead, .rule p, .card p, .avis__ou) { color: var(--muted); opacity: 1; }
:root .section.ap-clair .eyebrow { background: var(--brand-soft); color: var(--brand-text); opacity: 1; }
.section.ap-clair .btn--ghost { --fg-btn: var(--ink); }
.section.ap-clair .lead a, .section.ap-clair .avis-google__txt p { color: var(--brand-text); }
.section.ap-clair .card { background: var(--surface); color: var(--ink); border-color: color-mix(in srgb, var(--ink) 14%, transparent); }
.section.ap-clair .avis-google { background: var(--surface); border-color: var(--border); }
.section.ap-clair .head h2::after { background: var(--brand); }
.ap-fond-nuit, .ap-fonce { background-color: var(--ap-fond, var(--night)) !important; color: var(--on-night); }
/* Sur un fond foncé, les panneaux (étapes, cartes, prix, questions) prennent
   une surface translucide et tout le texte passe en clair : les couleurs du
   texte courant sont redéfinies une fois pour toute la section. */
.section:is(.ap-fond-nuit, .ap-fonce) {
  --surface: color-mix(in srgb, #fff 9%, transparent);
  --surface-2: color-mix(in srgb, #fff 9%, transparent);
  --border: rgba(255, 255, 255, .18); --border-strong: rgba(255, 255, 255, .3);
  --ink: #F4FBF8; --ink-2: #EEF7F4; --muted: #EEF7F4;
  --on-night: #F4FBF8; --on-night-muted: #EEF7F4;
  --brand-text: #9BF0E2; --brand-soft: rgba(255, 255, 255, .07);
  /* Les encadrés pastel deviennent une teinte translucide sur le fond foncé. */
  --coral-soft: color-mix(in srgb, #FF8CC0 14%, transparent);
  --aqua-soft: color-mix(in srgb, #6CC8F0 14%, transparent);
  --grape-soft: color-mix(in srgb, #C29BF0 14%, transparent);
  --lime-soft: color-mix(in srgb, #7FD86A 14%, transparent);
  --or-soft: color-mix(in srgb, #D6EE6A 14%, transparent);
}
:root .section:is(.ap-fond-nuit, .ap-fonce) .eyebrow { background: rgba(255, 255, 255, .12); color: #F4FBF8; opacity: 1; }
:root .section.ap-fond-nuit .eyebrow { color: var(--or); }
.section:is(.ap-fond-nuit, .ap-fonce) .btn--ghost { --fg-btn: #fff; }
.section:is(.ap-fond-nuit, .ap-fonce) .notice :is(h3, p, li, b) { color: #F4FBF8; }
/* Un encadré posé dans une carte ne superpose pas une seconde teinte : le texte resterait trop pâle. */
.section:is(.ap-fond-nuit, .ap-fonce) :is(.card, .price, .step) .notice { background: transparent; }
/* Une couleur claire choisie au nuancier reste claire en mode sombre : le
   texte y repasse donc en couleurs foncées, quel que soit le thème. */
.section.ap-fond-perso.ap-clair {
  --ink: #16302B; --ink-2: #24423C; --muted: #34524B;
  --brand-text: #0E5F56; --brand-soft: rgba(0, 0, 0, .06);
  --surface: color-mix(in srgb, #fff 55%, transparent); --surface-2: color-mix(in srgb, #fff 70%, transparent);
  --border: rgba(0, 0, 0, .14); --border-strong: rgba(0, 0, 0, .24);
  --coral-soft: color-mix(in srgb, #fff 55%, transparent); --aqua-soft: color-mix(in srgb, #fff 55%, transparent);
  --grape-soft: color-mix(in srgb, #fff 55%, transparent); --lime-soft: color-mix(in srgb, #fff 55%, transparent);
  --or-soft: color-mix(in srgb, #fff 55%, transparent);
}
.section.ap-fond-perso.ap-clair .notice :is(h3, p, li, b) { color: var(--ink); }
.ap-fond-nuit :is(h1, h2, h3, h4), .ap-fonce :is(h1, h2, h3, h4) { color: #fff; }
.ap-fond-nuit .lead, .ap-fonce .lead { color: var(--on-night-muted); }
.ap-fond-nuit .eyebrow, .ap-fonce .eyebrow { background: rgba(255, 255, 255, .1); color: var(--or); }
.ap-fond-nuit :is(.card, .price, .faq details) :is(h3, p, summary),
.ap-fonce :is(.card, .price, .faq details) :is(h3, p, summary) { color: var(--ink); }

.ap-align-gauche :is(.head, .wrap > h2, .cta__in) { text-align: left; margin-inline: 0; }
.ap-align-gauche .head .eyebrow, .ap-align-gauche .cta .eyebrow { margin-inline: 0; align-self: flex-start; }
.ap-align-centre :is(.head, .wrap > h2, .media__txt, .cta__in) { text-align: center; margin-inline: auto; }
.ap-align-centre .eyebrow { margin-inline: auto; }
.ap-align-droite :is(.head, .wrap > h2, .cta__in) { text-align: right; margin-left: auto; margin-right: 0; }
.ap-align-droite .eyebrow { margin-left: auto; margin-right: 0; }

.ap-espace-serre { padding-block: clamp(26px, 3vw, 44px) !important; }
.ap-espace-aere { padding-block: clamp(80px, 10vw, 150px) !important; }
.ap-espace-colle { padding-block: 0 !important; }
.ap-largeur-etroite .wrap { max-width: var(--wrap-narrow); }
.ap-largeur-large .wrap { max-width: min(1440px, 94vw); }

/* Animation d'apparition choisie pour le bloc. */
.ap-anim-aucune .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.ap-anim-fondu .reveal { transform: none; transition-duration: .9s; }
.ap-anim-zoom .reveal { transform: scale(.92); }
.ap-anim-glisse .reveal { transform: translateX(-46px); }
.ap-anim-rebond .reveal { transform: translateY(40px) scale(.96); transition: opacity .5s var(--ease), transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.ap-anim-monte .reveal { transform: translateY(54px); }
:is(.ap-anim-fondu, .ap-anim-zoom, .ap-anim-glisse, .ap-anim-rebond, .ap-anim-monte) .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [class*="ap-anim-"] .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Motion : les photos se dévoilent, les listes se cochent, les cartes suivent la souris */
@media (prefers-reduced-motion: no-preference) {
  .reveal .shot {
    clip-path: inset(0 0 100% 0 round var(--r-lg));
    transition: clip-path 1.05s cubic-bezier(.65, 0, .25, 1) .12s;
  }
  .reveal.is-in .shot { clip-path: inset(-60px round var(--r-lg)); }
  .reveal .shot img { scale: 1.16; transition: scale 1.6s var(--ease) .12s; }
  .reveal.is-in .shot img { scale: 1.06; }

  .media.reveal .checks li { opacity: 0; translate: -14px 0; transition: opacity .45s var(--ease), translate .45s var(--ease); }
  .media.reveal.is-in .checks li { opacity: 1; translate: 0 0; }
  .media.reveal.is-in .checks li:nth-child(1) { transition-delay: .35s; }
  .media.reveal.is-in .checks li:nth-child(2) { transition-delay: .43s; }
  .media.reveal.is-in .checks li:nth-child(3) { transition-delay: .51s; }
  .media.reveal.is-in .checks li:nth-child(4) { transition-delay: .59s; }
  .media.reveal.is-in .checks li:nth-child(5) { transition-delay: .67s; }
  .media.reveal.is-in .checks li:nth-child(n+6) { transition-delay: .75s; }

  /* Là où le navigateur sait lier une animation au défilement, la photo glisse doucement dans son cadre. */
  @supports (animation-timeline: view()) {
    .shot img { animation: photo-parallaxe linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes photo-parallaxe { from { translate: 0 -3%; } to { translate: 0 3%; } }
  }

  .card--hover { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s; }
  .card--hover[data-suit]:hover {
    background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      color-mix(in srgb, var(--or) 22%, transparent), transparent 70%);
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(-3px, -3px);
    transition-duration: .12s, .35s, .3s;
  }
}
:root[data-anim="non"] .reveal .shot { clip-path: none; }
:root[data-anim="non"] .shot img { animation: none; scale: 1; translate: none; }
:root[data-anim="non"] .media.reveal .checks li { opacity: 1; translate: none; }