@import url('/fonts/fonts.css');

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

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

   Le parc a pour héros un tigre pirate au pelage doré. La couleur principale
   du site est donc une terre cuite chaude, tirée de son costume, et non le
   doré du pelage : celui-ci reste un accent, sinon la page devient un aplat
   jaune. Les fonds profonds sont un cacao, pas un bleu nuit : le bleu tirait
   l'ensemble vers le froid et écrasait la mascotte.

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

:root {
  color-scheme: light;

  /* Fonds et surfaces */
  --bg: #FFF8F3;
  --bg-alt: #FBEDE4;
  --surface: #FFFFFF;
  --surface-2: #FDF4EE;
  --border: #F0DFD3;
  --border-strong: #DDC4B3;

  /* Texte */
  --ink: #2A1A15;
  --ink-2: #4B342C;
  --muted: #6E5A53;

  /* Marque : terre cuite */
  --brand: #D2461F;
  --brand-2: #A8331A;
  /* Version claire, décorative : ne porte jamais de texte. */
  --brand-vif: #F2683A;
  /* La marque posée sur les fonds profonds : 6,9:1 sur --night. */
  --brand-sur-nuit: #FF8A5C;
  --brand-ink: #FFFFFF;
  --brand-soft: #FDEAE2;
  /* Terre cuite assombrie pour le texte : 6,4:1 sur blanc, 5,5:1 sur --brand-soft. */
  --brand-text: #A83A17;

  /* Or : le pelage de la mascotte, en touches */
  --or: #F0A52E;
  --or-2: #D88A12;
  --or-soft: #FDF1DC;
  --or-text: #8A5A00;

  /* Profond : fond des sections sombres, dans les deux thèmes */
  --night: #2E1D18;
  --night-2: #3E2922;
  --night-3: #52382F;
  --on-night: #FAF1EB;
  --on-night-muted: #C6AB9F;

  /* Accents, utilisés avec parcimonie */
  --coral: #E14C7E;
  --coral-soft: #FDE7EE;
  --aqua: #10A585;
  --aqua-soft: #E2F6F0;
  --grape: #9A55C9;
  --grape-soft: #F3E9FB;
  --lime: #2FA85C;
  --lime-soft: #E4F6EA;

  /* Aplats portant du texte blanc : contraste vérifié à 4,5:1 minimum. */
  --aqua-solid: #0A7A62;
  --coral-solid: #B0265A;
  --lime-solid: #157A43;

  /* Texte posé sur les fonds pastel correspondants. */
  --aqua-ink: #0A7A62;
  --coral-ink: #B0265A;
  --lime-ink: #157A43;

  /* Formes */
  --r-xs: 10px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --sh-xs: 0 1px 3px rgba(42, 26, 21, .07);
  --sh-sm: 0 3px 10px rgba(42, 26, 21, .08);
  --sh: 0 10px 28px rgba(42, 26, 21, .10);
  --sh-lg: 0 24px 60px rgba(42, 26, 21, .16);
  --ring: 0 0 0 4px rgba(210, 70, 31, .30);

  /* Bannière : claire et ensoleillée en thème clair, chaude et sourde en sombre. */
  --ban-1: #FFF4E6;
  --ban-2: #FFF8F3;
  --ban-3: #FFE6D2;
  --ban-lueur-1: rgba(255, 196, 104, .58);
  --ban-lueur-2: rgba(255, 158, 116, .34);
  --ban-points: rgba(42, 26, 21, .16);
  --ban-bord: var(--border);

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

  --f-head: 'Fredoka', system-ui, sans-serif;
  --f-body: 'Nunito', 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: #17100E;
  --bg-alt: #1E1512;
  --surface: #241A16;
  --surface-2: #2E211C;
  --border: #3D2C25;
  --border-strong: #573F35;

  --ink: #FAF0EA;
  --ink-2: #E2CFC4;
  --muted: #AE968B;

  --brand: #FF7A4D;
  --brand-2: #E2552D;
  --brand-vif: #FF9770;
  --brand-sur-nuit: #FF9A70;
  --brand-ink: #26130C;
  --brand-soft: #3A211A;
  --brand-text: #FF9A70;

  --or: #FFC061;
  --or-2: #F0A52E;
  --or-soft: #332616;
  --or-text: #FFC061;

  --night: #140D0B;
  --night-2: #201713;
  --night-3: #2E211C;
  --on-night: #FAF1EB;
  --on-night-muted: #C6AB9F;

  --coral: #FF85AC;
  --coral-soft: #351A24;
  --aqua: #3FD4B0;
  --aqua-soft: #12302A;
  --grape: #C08BE8;
  --grape-soft: #2A1E36;
  --lime: #55CC82;
  --lime-soft: #15301F;

  --aqua-solid: #0A7A62;
  --coral-solid: #B0265A;
  --lime-solid: #157A43;

  /* Sur fond pastel sombre, le texte reprend la version claire de l'accent. */
  --aqua-ink: #3FD4B0;
  --coral-ink: #FF85AC;
  --lime-ink: #55CC82;

  --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(255, 122, 77, .34);
  --ban-1: #2A1A14;
  --ban-2: #1B1310;
  --ban-3: #32201A;
  --ban-lueur-1: rgba(255, 150, 80, .22);
  --ban-lueur-2: rgba(240, 165, 46, .16);
  --ban-points: rgba(255, 255, 255, .13);
  --ban-bord: var(--border-strong);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
      --bg: #17100E;
      --bg-alt: #1E1512;
      --surface: #241A16;
      --surface-2: #2E211C;
      --border: #3D2C25;
      --border-strong: #573F35;

      --ink: #FAF0EA;
      --ink-2: #E2CFC4;
      --muted: #AE968B;

      --brand: #FF7A4D;
      --brand-2: #E2552D;
      --brand-vif: #FF9770;
      --brand-sur-nuit: #FF9A70;
      --brand-ink: #26130C;
      --brand-soft: #3A211A;
      --brand-text: #FF9A70;

      --or: #FFC061;
      --or-2: #F0A52E;
      --or-soft: #332616;
      --or-text: #FFC061;

      --night: #140D0B;
      --night-2: #201713;
      --night-3: #2E211C;
      --on-night: #FAF1EB;
      --on-night-muted: #C6AB9F;

      --coral: #FF85AC;
      --coral-soft: #351A24;
      --aqua: #3FD4B0;
      --aqua-soft: #12302A;
      --grape: #C08BE8;
      --grape-soft: #2A1E36;
      --lime: #55CC82;
      --lime-soft: #15301F;

      --aqua-solid: #0A7A62;
      --coral-solid: #B0265A;
      --lime-solid: #157A43;

      /* Sur fond pastel sombre, le texte reprend la version claire de l'accent. */
      --aqua-ink: #3FD4B0;
      --coral-ink: #FF85AC;
      --lime-ink: #55CC82;

      --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(255, 122, 77, .34);
      --ban-1: #2A1A14;
      --ban-2: #1B1310;
      --ban-3: #32201A;
      --ban-lueur-1: rgba(255, 150, 80, .22);
      --ban-lueur-2: rgba(240, 165, 46, .16);
      --ban-points: rgba(255, 255, 255, .13);
      --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%;
}

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;
  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 { 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: 48px; width: auto; transition: transform .2s var(--ease); }
.brand:hover img { transform: scale(1.04) rotate(-1deg); }

.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; }

.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: 40px; }
}

@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; }
  .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; }
}

/* ------------------------------------------- Bouton d'accessibilité flottant
 *
 * Les réglages de confort (contraste, taille du texte, aération, animations)
 * servent à qui en a besoin, tous les jours, sur toutes les pages. Ils ont donc
 * un accès permanent, mais hors de l'entête : celle-ci reste au contenu et à la
 * bascule claire / sombre. Le bouton se pose contre le bord droit, à mi-hauteur :
 * il ne prend de place à personne, et il ne rencontre jamais le bandeau cookies
 * ni la barre d'actions du mobile, qui vivent tous les deux en bas.
 */
.acces-ouvrir {
  position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 96;
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  color: var(--brand-text);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: 50%; cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
  transition: background-color .16s, color .16s, box-shadow .16s;
}
.acces-ouvrir:hover {
  background: var(--brand); color: var(--brand-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.acces-ouvrir:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.acces-ouvrir[aria-expanded="true"] { background: var(--brand); color: var(--brand-ink); }

@media (max-width: 800px) {
  .acces-ouvrir { right: 8px; width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .acces-ouvrir, .acces-ouvrir:hover { transition: none; }
}

@media print { .acces-ouvrir { 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); }
.section--gold {
  background: linear-gradient(155deg, var(--brand) 0%, var(--brand-2) 100%);
  color: var(--night);
}
.section--gold h2, .section--gold h3 { color: var(--night); }
.section--gold .lead { color: rgba(46, 29, 24, .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(42, 26, 21, .34), transparent 70%);
  filter: blur(8px);
}
.hero__art img { filter: drop-shadow(0 22px 38px rgba(42, 26, 21, .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(240, 165, 46, .38), 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 le Captain et on ne
 * voyait plus que son chapeau 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; }
  .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__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(46, 29, 24, .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; }

.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: .72rem; } }
.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.4fr 1fr 1fr 1.2fr;
  gap: clamp(18px, 2.4vw, 36px);
  padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
/* 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; }
@media (max-width: 560px) { .consent { inset: auto 10px 10px; padding: 20px; } }
@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: #3A2620; }
:root[data-theme="dark"] { --ico-encre: #C6AB9F; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --ico-encre: #C6AB9F; }
}

.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); }

/* Couche d'effets saisonniers, purement décorative */
.vfx {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; opacity: .85;
}
/* Ces blocs passent devant le canevas des effets de saison. 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; }

/* 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; }
}

/* --------------------------------------------------------- Scène 3D */

.scene3d {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(170deg, #3E2820, #150E0B);
  box-shadow: var(--sh-lg);
  cursor: grab;
}
.scene3d[data-actif="true"] { cursor: crosshair; }
.scene3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene3d__repli {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
  transition: opacity .8s var(--ease);
}
.scene3d[data-actif="true"] .scene3d__repli { opacity: 0; pointer-events: none; }

.scene3d__jeu {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 18px 22px;
  background: linear-gradient(to top, rgba(8, 14, 26, .85), transparent);
  color: #fff; text-align: center; pointer-events: none;
}
.scene3d__score {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); margin: 0 0 .2em; color: var(--brand-sur-nuit);
}
.scene3d__aide { margin: 0; font-size: .92rem; color: #C6D2E6; }
.scene3d__score[data-anime="true"] { animation: score-pop .4s var(--ease); }
@keyframes score-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }

@media (max-width: 720px) { .scene3d { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: reduce) {
  .scene3d__repli { opacity: 1 !important; }
  .scene3d__score[data-anime="true"] { animation: 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(42, 26, 21, .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)),
    url('/img/texture/carte-vierge.webp') center / cover;
  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);
}