/* =========================================================================
   ARDENNES EVENTS — Design system
   Extrait des maquettes Claude Design (Eau Rouge). Feuille de style externe
   (mise en cache navigateur) plutôt qu'inline → meilleure performance & SEO.
   ========================================================================= */

/* ---- Polices auto-hébergées (SIL Open Font License) -------------------- *
 * Copiées depuis Google Fonts le 2026-09-23 (sous-ensembles latin +
 * latin-ext) : plus aucune requête vers fonts.googleapis.com — une connexion
 * tierce de moins au chargement, et aucune adresse IP de visiteur transmise
 * à Google (RGPD). Bricolage et Hanken sont des polices variables.
 * ---------------------------------------------------------------------- */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/bricolage-grotesque-500-800-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url("../fonts/bricolage-grotesque-500-800-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/hanken-grotesk-400-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/hanken-grotesk-400-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/space-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-mono-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-mono-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Palette « Nature fraîche » : blanc + menthe. L'accent est le BLEU DU LOGO
     (charte Weventures) pour les CTA et les prix ; le vert feuille porte la
     nature / l'outdoor. Claire, colorée, cohérente avec l'esprit Ardennes. */
  /* Contraste (2026-09-23) : le bleu du logo #2ea6d8 ne donne que 2,78:1 avec
     du blanc — insuffisant pour un texte (WCAG AA : 4,5:1). --accent, qui porte
     les boutons, les prix et les liens, passe donc à une nuance plus profonde
     de la même teinte (5,05:1 sur blanc, 4,66:1 sur le fond menthe). Le bleu
     du logo reste disponible en --accent-bright pour ce qui est purement
     décoratif (bandeau, traits animés, barres de progression). */
  --accent: #1b76a2;        /* bleu marque accessible — CTA, prix, liens */
  --accent-bright: #2ea6d8; /* bleu du logo — décor uniquement, jamais du texte */
  --accent-2: #6dc1e4;      /* bleu clair (sur fonds sombres) */
  --accent-dk: #155e82;     /* bleu foncé (survol) */
  --green: #3fa66a;         /* vert feuille — nature / outdoor (décor) */
  --green-dk: #2a7d4c;      /* vert lisible sur blanc (5,08:1) — textes, pastilles */
  --green-soft: #eaf5ee;
  --blue: #1b76a2;          /* alias : même bleu de marque (indoor, liens) */
  --blue-dk: #155e82;
  --blue-soft: #e8f4fb;
  --accent-soft: #e7f4fb;   /* aplat bleu très clair */
  --bg: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f2f7f3;          /* menthe très clair — sections alternées */
  --ink: #223028;           /* vert sombre adouci (texte) */
  --ink-2: #33463a;
  --muted: #5f6b62;
  --muted-2: #78847a;
  --line: #e4e8e2;          /* bordures neutres claires */
  --line-2: #e9efe9;
  --dark: #10190f;
  --dark-2: #1c2a20;        /* vert profond */
  --dark-3: #17241c;        /* vert profond — hero / footer / bandes */
  --cream-dim: rgba(238, 244, 240, 0.86);  /* blanc-menthe sur fond sombre */
  --maxw: 1320px;
  --pad: clamp(20px, 5vw, 48px);
  --radius: 16px;
  --radius-lg: 20px;
  --tex: 0.9;
  --marquee-dur: 32s;
  --anim: running;
  --font-head: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

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

/* Le `[hidden] { display:none }` du navigateur est une règle « user agent » :
   n'importe quel `display` posé ici la neutralise, et masquer un élément
   depuis JS ne fait plus rien. On le réaffirme donc côté auteur. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` et non `hidden` : `overflow:hidden` sur <body> fait de celui-ci un
     conteneur de défilement, ce qui neutralisait le `position: sticky` de
     l'en-tête (elle disparaissait au défilement). `clip` rogne pareil sans
     créer ce conteneur. */
  overflow-x: clip;
}

::selection { background: var(--accent); color: var(--bg); }

img { max-width: 100%; height: auto; display: block; }
.celebration-icon { display: block; max-width: none; height: auto; pointer-events: none; user-select: none; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-head); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 0 0 8px 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

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

/* ---- Layout ---------------------------------------------------------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); }
.section--sm { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.bg-cream-2 { background: var(--bg-3); }
.kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 16px; }
.kicker--light { color: var(--accent-2); }
.text-balance { text-wrap: balance; }

/* ---- Header / Nav ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31, 42, 33, 0.1);
}
.nav-bar {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: 0 1 auto; min-width: 0; }
.brand__logo { height: 38px; width: auto; flex: 0 0 auto; display: block; }
.brand__text { display: flex; flex-direction: column; justify-content: center; line-height: 1; min-width: 0; }
.brand__name { font-family: var(--font-head); font-weight: 800; font-size: 16px; letter-spacing: 0.02em; line-height: 1.05; white-space: nowrap; }
.brand__sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.26em; color: var(--muted); margin-top: 3px; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a, .nav__trigger {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration: none; padding: 9px 13px; border-radius: 8px; background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav a:hover, .nav__trigger:hover { background: rgba(31, 42, 33, 0.06); }
.nav a.is-active { color: var(--accent); font-weight: 700; }
.nav__caret { font-size: 9px; color: var(--muted); }

.nav-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.btn-book {
  font-family: var(--font-body); font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--bg); background: var(--accent); padding: 11px 18px; border-radius: 10px; white-space: nowrap;
  transition: background .2s ease;
}
.btn-book:hover { background: var(--accent-dk); }

/* Language switcher */
.lang { position: relative; font-family: var(--font-mono); font-size: 12px; }
.lang__toggle { display: flex; gap: 7px; align-items: center; background: none; border: none; cursor: pointer; color: var(--ink); font-family: inherit; font-size: inherit; padding: 4px; }
.lang__current { font-weight: 700; }
.lang__list { position: absolute; right: 0; top: calc(100% + 8px); background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px rgba(31,42,33,0.14); padding: 6px; display: none; min-width: 140px; z-index: 60; }
.lang.is-open .lang__list { display: block; }
.lang__list a { display: block; padding: 8px 12px; border-radius: 7px; text-decoration: none; color: var(--ink); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.lang__list a:hover { background: rgba(31,42,33,0.06); }
.lang__list a[aria-current="true"] { color: var(--accent); }

/* Mega menu — positionné sur toute la largeur du header (sticky = bloc englobant) */
.nav__trigger-wrap { position: static; }
.megamenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg-2); border-bottom: 1px solid rgba(31, 42, 33, 0.1);
  box-shadow: 0 22px 40px rgba(31, 42, 33, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-has-mega:hover .megamenu, .megamenu:hover, .megamenu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.megamenu__inner { max-width: var(--maxw); margin: 0 auto; padding: 30px var(--pad); display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 30px; }
/* Un menu déroulant par famille : le nombre de colonnes suit le contenu. */
.megamenu--activities .megamenu__inner { grid-template-columns: 2.2fr 1fr 1.2fr; }
.megamenu--packages .megamenu__inner { grid-template-columns: 2fr 1.2fr; }
.megamenu--food .megamenu__inner { grid-template-columns: 1.6fr 1fr 1.2fr; }
.megamenu__col-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 14px; }
.megamenu__links { display: grid; gap: 9px; }
.megamenu__links--2col { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }
.megamenu__links a { text-decoration: none; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.megamenu__links a:hover { color: var(--accent); }
.megamenu__promo { background: var(--ink); border-radius: var(--radius); padding: 24px; color: var(--bg); display: flex; flex-direction: column; }
.megamenu__promo h3 { font-weight: 700; font-size: 20px; line-height: 1.15; margin: 0 0 8px; }
.megamenu__promo p { font-size: 12.5px; line-height: 1.5; color: #cdd3c7; margin: 0 0 14px; }
.megamenu__promo .cta { font-size: 13px; font-weight: 700; text-decoration: none; color: var(--ink); background: var(--accent); padding: 10px 15px; border-radius: 8px; text-align: center; }
.megamenu__extra { display: grid; gap: 8px; font-size: 13px; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 14px; margin-top: auto; }
/* Le méga-menu vit dans .nav : `.nav a:hover` (0,2,1) l'emporte sur
   `.megamenu__promo .cta` (0,2,0) et remplaçait le fond corail par un voile
   clair — texte sombre sur carte sombre, le bouton « disparaissait ». */
.megamenu__promo .cta:hover { background: var(--accent-dk); color: var(--bg); }
.megamenu__extra a { color: rgba(255,255,255,0.82); text-decoration: none; }
.megamenu__extra a:hover { color: #fff; background: none; }

/* Burger / mobile */
.burger { display: none; background: none; border: none; cursor: pointer; font-size: 24px; color: var(--ink); padding: 4px 8px; line-height: 1; }

/* ---- Buttons --------------------------------------------------------- */
.btn { font-family: var(--font-body); font-weight: 700; text-decoration: none; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.btn--lg { font-size: 16px; padding: 16px 28px; }
.btn--md { font-size: 14px; padding: 12px 18px; border-radius: 10px; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dk); }
.btn--ghost-dark { background: rgba(255, 255, 255, 0.08); color: var(--bg); border: 1px solid rgba(255, 255, 255, 0.3); }
.btn--ghost-dark:hover { background: rgba(255, 255, 255, 0.16); }
.btn--outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Hero ------------------------------------------------------------ */
.hero {
  position: relative; min-height: clamp(560px, 90vh, 920px);
  display: flex; align-items: center; overflow: hidden; background: var(--dark-3);
}
.hero__tex { position: absolute; inset: 0; z-index: 0; background-image: repeating-linear-gradient(135deg, #1c271e 0px, #1c271e 22px, #212d22 22px, #212d22 44px); opacity: var(--tex); }
.hero__photo { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; opacity: 0.5; }
.hero__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 72% 8%, rgba(46, 166, 216, 0.18), transparent 52%), linear-gradient(180deg, rgba(15, 20, 16, 0.28) 0%, rgba(15, 20, 16, 0.12) 38%, rgba(15, 20, 16, 0.86) 100%); }
/* Illustrations flottantes : le lien porte l'animation de flottaison, l'image
   le survol — sinon les deux transforms se marchent dessus. */
/* z-index 4 = AU-DESSUS de .hero__inner (3) : sinon le bloc de contenu, qui
   couvre toute la largeur du conteneur, avale les clics des illustrations qui
   le chevauchent (seul le paintball, hors conteneur, restait cliquable).
   La couche laisse passer les clics (pointer-events: none) ; seuls les liens
   les captent, ils ne masquent donc rien du contenu du hero. */
.hero__floaters { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.hero__floater { position: absolute; display: block; pointer-events: auto; text-decoration: none; opacity: 0.8; filter: drop-shadow(0 12px 16px rgba(3, 12, 7, 0.34)); animation: hero-floater 6s ease-in-out infinite; transition: opacity .2s ease; }
.hero__floater:hover, .hero__floater:focus-visible { opacity: 1; }
.hero__floater-img { width: 100%; height: auto; transition: transform .25s cubic-bezier(0.34, 1.4, 0.64, 1); }
.hero__floater:hover .hero__floater-img, .hero__floater:focus-visible .hero__floater-img { transform: scale(1.12) rotate(-3deg); }
.hero__floater-label {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, 4px);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, 0.95); color: var(--ink);
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.hero__floater:hover .hero__floater-label, .hero__floater:focus-visible .hero__floater-label { opacity: 1; transform: translate(-50%, 0); }
/* Illustrations basses : sous elles, l'étiquette tombait dans les 44 px que
   recouvre la carte « devis express » (z-index supérieur) et disparaissait.
   On la sort donc à DROITE de l'icône, à mi-hauteur. */
.hero__floater--paintball .hero__floater-label,
.hero__floater--mystery .hero__floater-label {
  left: calc(100% + 10px); top: 50%; transform: translate(-4px, -50%);
}
.hero__floater--paintball:hover .hero__floater-label,
.hero__floater--paintball:focus-visible .hero__floater-label,
.hero__floater--mystery:hover .hero__floater-label,
.hero__floater--mystery:focus-visible .hero__floater-label { transform: translate(0, -50%); }
/* Collée au bord droit : l'étiquette part vers la gauche, sinon elle sort
   de l'écran. */
.hero__floater--western .hero__floater-label { left: auto; right: calc(100% + 10px); top: 50%; transform: translate(4px, -50%); }
.hero__floater--western:hover .hero__floater-label,
.hero__floater--western:focus-visible .hero__floater-label { transform: translate(0, -50%); }
/* Contrepartie : les vrais CTA repassent au-dessus des illustrations, qui ne
   peuvent donc jamais leur voler un clic si les positions se croisent. */
.hero__main .btn-row, .hero__pop { position: relative; z-index: 5; }
/* Illustrations dispersées volontairement — cinq zones, cinq tailles, cinq
   inclinaisons, aucune ligne commune : l'effet doit rester joueur, pas rangé.
   Décalages ancrés en PIXELS et jamais en pourcentage : un `bottom: 11%`
   grandit avec la hauteur du hero et finissait par recouvrir les boutons.
   Deux règles pour toute nouvelle position :
     • au-dessus de la colonne de contenu, `bottom + hauteur` ≤ 104 px
       (c'est tout ce que `padding-bottom` réserve sous les boutons) ;
     • `bottom` ≥ 44 px, sinon la carte « devis express » la recouvre.
   La colonne de DROITE échappe à la 1re règle sous le panneau : la caisse à
   savon peut donc y monter bien plus haut.
   Les positions ne se devinent pas : elles sont validées par le test
   d'intersection automatique sur 12 formats d'écran (boutons, panneau, titre,
   accroche, rotateur, carte devis, en-tête). Toute modification doit repasser
   ce test — le contenu ne doit jamais être recouvert. */
.hero__floater--archery   { left: 4.5%;  top: 4px;     width: clamp(40px, 4.4vw, 64px); --floater-r: -13deg; animation-delay: -2.6s; }
.hero__floater--explore   { right: 5%;   top: 26px;    width: clamp(46px, 5vw, 78px);   --floater-r: 10deg;  animation-delay: -3.6s; }
.hero__floater--soapbox   { right: 17%;  bottom: 92px; width: clamp(42px, 4.8vw, 72px); --floater-r: 7deg;   animation-delay: -5.4s; }
.hero__floater--mystery   { left: 46%;   bottom: 50px; width: clamp(36px, 4vw, 52px);   --floater-r: -8deg;  animation-delay: -4.6s; }
.hero__floater--paintball { left: 2.5%;  bottom: 46px; width: clamp(40px, 4.4vw, 56px); --floater-r: -17deg; animation-delay: -1.7s; }
/* Western Games : à droite, à mi-hauteur (demande client). */
.hero__floater--western   { right: 2.5%; top: 46%;     width: clamp(42px, 4.6vw, 68px); --floater-r: -6deg;  animation-delay: -4.1s; }
@keyframes hero-floater { 0%, 100% { transform: translateY(0) rotate(var(--floater-r)); } 50% { transform: translateY(-12px) rotate(calc(var(--floater-r) + 5deg)); } }
.hero__inner { position: relative; z-index: 3; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--pad) clamp(48px, 7vh, 84px); }
/* Variante « split » : phrase catchy + titre à gauche, activités populaires à droite. */
/* Le dégagement bas doit rester supérieur au chevauchement de .quickbar-wrap,
   sinon la carte de recherche vient coller aux boutons du hero. */
.hero__inner--split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(min(280px, 100%), 400px); gap: clamp(32px, 5vw, 88px); align-items: center; justify-content: space-between; padding-top: clamp(84px, 11vh, 130px); padding-bottom: clamp(104px, 13vh, 160px); }
.hero__inner--split h1 { font-size: clamp(40px, 5.8vw, 92px); margin-bottom: 20px; }
.hero__inner--split .hero__rotator { margin-bottom: 20px; }

/* Colonne « Les plus demandées » : liste aérée sur verre dépoli */
.hero__pop { width: 100%; background: rgba(16, 25, 15, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; padding: 20px 20px 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55); }
.hero__pop-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent-2); padding: 0 2px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.hero__pop-rows { display: flex; flex-direction: column; }
.hero__pop-row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; text-decoration: none; color: var(--bg); transition: background 0.15s ease, padding 0.2s ease; }
.hero__pop-row + .hero__pop-row { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hero__pop-row:hover { padding-left: 8px; }
.hero__pop-thumb { position: relative; width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; background: var(--dark-2); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.1); }
.hero__pop-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__pop-emoji { font-size: 26px; }
.hero__pop-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero__pop-name { font-family: var(--font-head); font-weight: 700; font-size: 15.5px; line-height: 1.2; }
.hero__pop-price { font-family: var(--font-mono); font-size: 11px; color: var(--accent-2); }
.hero__pop-arrow { margin-left: auto; color: rgba(255, 255, 255, 0.45); font-size: 17px; transition: transform 0.15s ease, color 0.15s ease; }
.hero__pop-row:hover .hero__pop-arrow { transform: translateX(4px); color: var(--bg); }
.hero__pop-all { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--cream-dim); text-decoration: none; padding: 13px 2px 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); transition: color 0.15s ease; }
.hero__pop-all:hover { color: var(--bg); }
.hero__coords { position: absolute; top: 92px; right: var(--pad); z-index: 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.5); text-align: right; line-height: 1.9; }
.hero__coords span { color: rgba(255, 255, 255, 0.72); }
.hero__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; width: 26px; height: 42px; border: 1.5px solid rgba(255, 255, 255, 0.38); border-radius: 14px; display: flex; justify-content: center; text-decoration: none; }
.hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--accent-2); margin-top: 7px; animation: scrolldot 1.9s ease-in-out infinite; }
@keyframes scrolldot { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
/* Le titre s'est allongé (« … au cœur des Ardennes, ou ailleurs ! ») : on
   desserre un peu la taille maxi pour qu'il tienne en trois lignes et ne
   comprime plus le panneau « Les plus demandées » à côté. */
.hero h1 { font-weight: 800; font-size: clamp(38px, 6.2vw, 86px); line-height: 0.96; letter-spacing: -0.02em; color: var(--bg); margin: 0 0 22px; max-width: 17ch; overflow-wrap: break-word; }
.hero h1 .accent { color: var(--accent-2); }
.hero p { font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: var(--cream-dim); max-width: 54ch; margin: 0 0 34px; }
.hero__tag { position: absolute; top: 96px; right: var(--pad); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: rgba(255,255,255,0.5); text-align: right; line-height: 1.7; }

/* Page hero (inner pages) */
.page-hero { position: relative; background: var(--dark-3); color: var(--bg); overflow: hidden; }
.page-hero__tex { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, #1c271e 0px, #1c271e 22px, #212d22 22px, #212d22 44px); opacity: 0.85; }
.page-hero__overlay { position: absolute; inset: 0; background: radial-gradient(120% 100% at 80% 0%, rgba(46, 166, 216, 0.18), transparent 55%); }
.page-hero__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 7vw, 86px) var(--pad) clamp(40px, 5vw, 64px); }
.page-hero--split .page-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 4vw, 56px); align-items: center; }
.page-hero h1 { font-weight: 800; font-size: clamp(36px, 6vw, 84px); line-height: 0.96; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 16ch; overflow-wrap: break-word; }
.page-hero h1 .accent { color: var(--accent-2); }
.page-hero p { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--cream-dim); max-width: 58ch; margin: 0; }
.breadcrumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); margin-bottom: 18px; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--bg); }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--bg); background: var(--accent); padding: 5px 11px; border-radius: 6px; margin-bottom: 18px; }

/* ---- Stat strip ------------------------------------------------------ */
/* Le fond clair de la grille ne doit couvrir QUE les filets inter-cellules :
   quand la marge latérale faisait partie de la grille, elle se voyait comme
   deux bandes claires aux extrémités de la bande. */
.stats { background: var(--dark-2); color: var(--bg); padding: 0 var(--pad); }
.stats__grid { max-width: calc(var(--maxw) - 2 * var(--pad)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.12); }
.stats__cell { background: var(--dark-2); padding: 30px 22px; }
.stats__cell--sm { padding: 26px 20px; }
.stats__value { font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 4vw, 46px); color: var(--accent-2); line-height: 1; }
.stats__label { font-size: 13px; color: #cdd3c7; margin-top: 7px; }
.stats__klabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent-2); margin-bottom: 8px; }
.stats__kvalue { font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.05; }

/* ---- Marquee --------------------------------------------------------- */
.marquee { background: var(--accent); color: var(--bg); padding: 14px 0; overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 0; animation: marquee var(--marquee-dur) linear infinite var(--anim); font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: 0.01em; }
.marquee__track a { padding: 0 18px; color: inherit; text-decoration: none; }
.marquee__track a:hover { opacity: 0.7; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---- Two-col / intro ------------------------------------------------- */
.split { max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--pad); display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.split--reverse { grid-template-columns: 0.85fr 1.15fr; }
.h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.015em; margin: 0 0 24px; }
.h2 .accent { color: var(--accent-2); }
.lead { font-size: 17px; line-height: 1.65; color: #445046; margin: 0 0 18px; max-width: 52ch; }
.figure { position: relative; }
.figure__main { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; background-image: repeating-linear-gradient(135deg, #eef4ef 0, #eef4ef 16px, #e2ebe4 16px, #e2ebe4 32px); border: 1px solid var(--line); display: flex; align-items: flex-end; padding: 20px; }
.figure__badge { font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: rgba(255, 255, 255, 0.9); padding: 6px 10px; border-radius: 6px; }
.figure__float { position: absolute; bottom: -22px; left: -22px; width: 54%; aspect-ratio: 1/1; border-radius: 18px; overflow: hidden; background-image: repeating-linear-gradient(135deg, #2f4233 0, #2f4233 16px, #37503a 16px, #37503a 32px); border: 5px solid var(--bg); display: flex; align-items: flex-end; padding: 14px; animation: floaty 6s ease-in-out infinite; }
.figure__float span { font-family: var(--font-mono); font-size: 10px; color: rgba(255, 255, 255, 0.85); }
.mini-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.mini-stats__n { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--ink); }
.mini-stats__s { font-size: 13px; color: var(--muted-2); }
.mini-stats__div { width: 1px; background: var(--line); }

/* ---- Image placeholder (until real photos) --------------------------- */
.ph { background-image: repeating-linear-gradient(135deg, #e8efe9 0, #e8efe9 14px, #dbe6de 14px, #dbe6de 28px); display: flex; align-items: flex-end; padding: 14px; }
.ph--food { background-image: repeating-linear-gradient(135deg, #fbe7dd 0, #fbe7dd 14px, #f6d9cb 14px, #f6d9cb 28px); }
.ph--dark { background-image: repeating-linear-gradient(135deg, #27332a 0, #27332a 16px, #2e3c30 16px, #2e3c30 32px); }
.ph span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.ph--dark span { color: rgba(255,255,255,0.7); background: rgba(15,20,16,0.6); padding: 6px 10px; border-radius: 6px; }

/* ---- Eau Rouge band -------------------------------------------------- */
.band-dark { position: relative; background: var(--dark); color: var(--bg); overflow: hidden; }
.band-dark__tex { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, #171410 0, #171410 24px, #1c1813 24px, #1c1813 48px); }
.band-dark__glow { position: absolute; inset: 0; background: radial-gradient(100% 100% at 85% 50%, rgba(46, 166, 216, 0.22), transparent 60%); }
.band-dark__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--pad); display: grid; grid-template-columns: 1fr 0.85fr; gap: 40px; align-items: center; }
.band-dark .h2 { color: var(--bg); }
.band-dark .lead { color: rgba(255, 255, 255, 0.78); }
.map-card { border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.map-card iframe { width: 100%; height: 320px; border: 0; display: block; filter: grayscale(0.2); }
.map-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--dark-2); color: var(--bg); text-decoration: none; padding: 14px 18px; font-size: 14px; font-weight: 700; }
.map-card__bar:hover { background: #26342a; }
.map-card__bar .arrow { color: var(--accent-2); }
.addr-chip { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.88); margin-top: 22px; }
.addr-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex: 0 0 auto; }

/* ---- Section heads & filters ----------------------------------------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 38px; }
.sec-head h2 { margin: 0; max-width: 16ch; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter {
  font-family: var(--font-body); font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 10px 16px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--bg-2);
  color: var(--ink); transition: all .2s ease;
}
.filter:hover { border-color: var(--ink); }
.filter.is-active { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.filter .count { opacity: 0.55; font-weight: 600; }
.filters--sticky { position: sticky; top: 84px; z-index: 10; padding: 8px 0; margin-bottom: 30px; }

/* ---- Cards / grids --------------------------------------------------- */
.grid { display: grid; gap: 18px; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.grid--cards-sm { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-2); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(31, 42, 33, 0.14); }
.card__media { position: relative; aspect-ratio: 5/4; }
.card__media--wide { aspect-ratio: 16/10; }
.card__group { position: absolute; top: 12px; left: 12px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--bg); background: var(--ink); padding: 4px 9px; border-radius: 6px; }
.card__group--accent { background: var(--accent); }

/* ---- Vraies photos (gérants) ---------------------------------------- */
.media { position: relative; overflow: hidden; background: var(--dark-2); }
.media__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__media.media .media__img,
.detail__media.media .media__img { position: absolute; inset: 0; }
.card__media.media .card__group { z-index: 2; }
.card__media.media .media__img { transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card:hover .card__media.media .media__img,
.card__link:hover .media__img { transform: scale(1.06); }

/* Filigranes d'activité : une illustration discrète, au-dessus de la photo
   mais sous les badges. La conversion blanche garde une bonne lisibilité sur
   les photos comme sur les aplats colorés. */
.activity-watermark { position: absolute; z-index: 1; right: -12%; bottom: -22%; width: 76%; height: auto; max-width: none; pointer-events: none; user-select: none; opacity: 0.26; filter: brightness(0) invert(1); mix-blend-mode: screen; transform: rotate(-5deg); transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease; }
.activity-watermark--outdoor { opacity: 0.29; }
.activity-watermark--indoor { opacity: 0.25; }
.activity-watermark--fallback { width: 82%; right: -8%; bottom: -18%; opacity: 0.54; }
.activity-watermark--detail { width: 96%; right: -16%; bottom: -25%; opacity: 0.32; }
.activity-watermark--thumb { width: 100%; right: -28%; bottom: -30%; opacity: 0.42; }
.activity-watermark--fallback.activity-watermark--detail { width: 88%; right: -9%; bottom: -17%; opacity: 0.5; }
.card:hover .activity-watermark, .card__link:hover .activity-watermark { transform: rotate(0deg) scale(1.05); opacity: 0.36; }
.card:hover .activity-watermark--fallback, .card__link:hover .activity-watermark--fallback { opacity: 0.6; }
/* Variante « corps de carte » : le filigrane n'est plus posé sur la photo mais
   en fond de la zone titre + prix. Teinte encre discrète pour rester lisible sur
   le fond clair du corps de carte. */
.activity-watermark--body { z-index: 0; right: -6%; bottom: -14%; width: 50%; opacity: 0.07; filter: brightness(0); mix-blend-mode: multiply; transform: rotate(-6deg); }
.activity-watermark--body.activity-watermark--outdoor, .activity-watermark--body.activity-watermark--indoor { opacity: 0.07; }
.card:hover .activity-watermark--body, .card__link:hover .activity-watermark--body { opacity: 0.1; transform: rotate(0deg) scale(1.04); }
/* Variante « hero détail » : filigrane sorti de la photo, en fond de l'étiquette de prix. */
.activity-watermark--fig { z-index: 0; right: -4%; bottom: -18%; width: 42%; opacity: 0.5; }
.ph--art::after { z-index: 0; }
.ph--art .activity-watermark { z-index: 1; }
.ph--art .card__group { z-index: 2; }

/* Figure « intro » avec vraie photo */
.figure__main.figure--photo,
.figure__float.figure--photo { padding: 0; }
.figure__main.figure--photo { position: relative; display: block; }
.figure--photo .media__img { position: absolute; inset: 0; }
.figure__main.figure--photo .figure__badge { position: absolute; left: 16px; bottom: 16px; z-index: 2; }

/* Galerie photo (page activité) */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.gallery__item { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--dark-2); }
.gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item { cursor: zoom-in; }

/* Visualiseur photo (lightbox) — remplace l'ouverture dans un nouvel onglet.
   Toujours sur fond sombre, quel que soit le thème du site. */
.lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 3vw, 40px); opacity: 0; transition: opacity 0.28s ease; }
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(9, 13, 10, 0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox__stage { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(4px, 2vw, 18px); max-width: 100%; max-height: 100%; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.lightbox__img { max-width: min(1200px, 84vw); max-height: 82vh; width: auto; height: auto; border-radius: 10px; background: #0b0f0c; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); transition: opacity 0.2s ease; }
.lightbox__img.is-loading { opacity: 0.35; }
.lightbox__cap { margin: 0; color: rgba(255, 255, 255, 0.82); font-family: var(--font-mono); font-size: 12.5px; text-align: center; max-width: 84vw; }
.lightbox__count { position: absolute; z-index: 3; bottom: clamp(10px, 3vw, 22px); left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.7); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; }
.lightbox__btn { display: grid; place-items: center; width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.13); color: #fff; cursor: pointer; flex: 0 0 auto; transition: background 0.2s ease, transform 0.2s ease; }
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__btn:active { transform: scale(0.94); }
.lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lightbox__close { position: absolute; z-index: 3; top: clamp(10px, 3vw, 24px); right: clamp(10px, 3vw, 24px); }
.lightbox__nav[hidden], .lightbox__count[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox__btn { width: 40px; height: 40px; }
  .lightbox__nav { position: absolute; bottom: clamp(10px, 3vw, 22px); z-index: 3; }
  .lightbox__prev { left: 14px; }
  .lightbox__next { right: 14px; }
  .lightbox__img { max-width: 92vw; max-height: 76vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img, .lightbox__btn { transition: none; }
}

.card__link { text-decoration: none; color: inherit; display: block; }
.card__body { position: relative; overflow: hidden; padding: 18px 18px 14px; display: flex; flex-direction: column; flex: 1; }
.card__body > :not(.activity-watermark) { position: relative; z-index: 1; }
.card__title { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.1; margin: 0 0 6px; }
.card__tag { font-size: 14px; color: var(--muted); line-height: 1.4; margin: 0; }
.card__price { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--accent); white-space: nowrap; }
.card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.card__actions { display: flex; gap: 8px; padding: 0 18px 18px; margin-top: auto; }
.card__actions .btn { flex: 1; }
.card__includes { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); line-height: 1.7; margin: 0 0 18px; }

/* ---- Activity detail ------------------------------------------------- */
.detail { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--pad); display: grid; grid-template-columns: 1.5fr 0.9fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.price-tag { position: absolute; bottom: -20px; right: -14px; background: var(--bg); color: var(--ink); border-radius: 14px; padding: 16px 20px; box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3); }
.price-tag__n { font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1; }
.price-tag__u { font-size: 12px; color: var(--muted); margin-top: 3px; }
.detail__media { aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); }

.steps { display: grid; gap: 4px; margin-bottom: 48px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--line); align-items: start; }
.step__n { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 3.4vw, 42px); color: var(--accent); line-height: 0.9; }
.step__t { font-family: var(--font-head); font-weight: 700; font-size: 20px; margin: 0 0 6px; }
.step p { font-size: 16px; line-height: 1.6; color: #445046; margin: 0; max-width: 52ch; }
.h2-sub { font-family: var(--font-head); font-weight: 700; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 22px; }

.highlights { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 12px; }
.highlights li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.highlights .check { color: var(--accent); font-weight: 800; flex: 0 0 auto; }

aside.sidebar { position: sticky; top: 96px; display: grid; gap: 18px; }
.info-card { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 18px; padding: 26px; }
.info-card h3 { font-family: var(--font-head); font-weight: 800; font-size: 22px; margin: 0 0 18px; }
.info-list { display: grid; gap: 14px; }
.info-list .row { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; padding-bottom: 14px; border-bottom: 1px solid #e9e0cf; }
.info-list .row span:first-child { color: var(--muted-2); }
.info-list .row span:last-child { font-weight: 700; text-align: right; }
.note-card { background: var(--dark-2); color: var(--bg); border-radius: 18px; padding: 24px; }
.note-card p { font-size: 14px; line-height: 1.6; color: #cdd3c7; margin: 0; }
.note-card a { color: var(--accent-2); text-decoration: none; font-weight: 700; }

.gallery { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) clamp(56px, 8vw, 104px); }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.gallery__cell { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }

/* ---- Pricing tiers --------------------------------------------------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-lg); padding: 32px 28px; }
.tier__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink); background: var(--accent-2); padding: 5px 14px; border-radius: 99px; }
.tier__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; margin-bottom: 14px; }
.tier__name { font-family: var(--font-head); font-weight: 800; font-size: 32px; line-height: 1; margin-bottom: 6px; }
.tier__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 24px; }
.tier__price b { font-family: var(--font-head); font-weight: 800; font-size: 44px; line-height: 1; }
.tier__price span { font-size: 13px; opacity: 0.7; }
.tier__features { display: grid; gap: 12px; margin-bottom: 28px; }
.tier__features div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.tier__features .check { font-weight: 800; flex: 0 0 auto; }

/* ---- CTA band -------------------------------------------------------- */
.cta-band { position: relative; background: var(--dark-2); color: var(--bg); overflow: hidden; }
.cta-band--black { background: var(--dark); }
.cta-band__glow { position: absolute; inset: 0; background: radial-gradient(90% 120% at 15% 0%, rgba(46, 166, 216, 0.2), transparent 55%); }
.cta-band__inner { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--pad); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.cta-band h2 { font-weight: 800; font-size: clamp(28px, 4vw, 50px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 12px; max-width: 18ch; }
.cta-band p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 48ch; margin: 0; }

/* ---- Contact / forms ------------------------------------------------- */
.contact-grid { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--pad); display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.contact-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px; padding: 30px; display: grid; gap: 22px; }
.contact-card.is-light { background: var(--bg-2); border-color: var(--line-2); }
.contact-card .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--accent-2); margin-bottom: 7px; }
.contact-card.is-light .label { color: var(--accent); }
.contact-card .val { font-size: 16px; line-height: 1.5; font-weight: 600; margin-bottom: 14px; }
.contact-card .divider { height: 1px; background: rgba(255, 255, 255, 0.14); }
.contact-card.is-light .divider { background: var(--line-2); }
.contact-card a.linkish { color: inherit; text-decoration: none; }
.contact-card a.linkish:hover { color: var(--accent-2); }

.form { display: grid; gap: 16px; }
.form .field { display: grid; gap: 6px; }
.form .field--2 { grid-template-columns: 1fr 1fr; gap: 16px; display: grid; }
.form label { font-size: 13px; font-weight: 600; color: var(--ink); }
.form input, .form select, .form textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--bg-2);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form textarea { min-height: 120px; resize: vertical; }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.form .consent input { width: auto; margin-top: 3px; }
.req { color: var(--accent); }
.form__success { display: none; background: #e8f0e2; border: 1px solid #b9cfaa; color: #2c4a1e; border-radius: 12px; padding: 18px 20px; }
.form__success.is-visible { display: block; }
.form__success h3 { margin: 0 0 6px; font-size: 18px; }
.form__success p { margin: 0; font-size: 14px; }

/* ---- FAQ ------------------------------------------------------------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(17px, 2vw, 21px); display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ico { color: var(--accent); font-size: 22px; transition: transform .2s ease; flex: 0 0 auto; }
.faq-item[open] summary .ico { transform: rotate(45deg); }
.faq-item__body { padding: 0 0 22px; font-size: 16px; line-height: 1.65; color: #445046; max-width: 70ch; }

/* ---- Prose (about, partner, simple) ---------------------------------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { font-size: 17px; line-height: 1.7; color: #3c473e; margin: 0 0 20px; }
.prose h2 { margin: 40px 0 16px; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; }
.note-tile { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 24px; }
.note-tile h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.note-tile p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

.banner-note { background: var(--blue-soft); border: 1px solid #bfe2f4; color: #1f6f92; font-size: 13px; padding: 10px var(--pad); text-align: center; }

/* ---- Booking --------------------------------------------------------- */
.booking-embed { max-width: 980px; margin: 0 auto; min-height: 420px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; padding: 40px; }
.booking-embed iframe { width: 100%; min-height: 700px; border: 0; }
.booking-embed__placeholder { text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
/* Placeholder « en chantier » à l'emplacement du futur widget Checkfront. */
.booking-embed--wip { min-height: 300px; border: 2px dashed var(--line-2); background: repeating-linear-gradient(-45deg, var(--bg-2) 0, var(--bg-2) 14px, var(--bg-3) 14px, var(--bg-3) 28px); }
/* Widget Checkfront réel : on ne peut pas styler l'intérieur de l'iframe
   (cross-origin) → on soigne le cadre. L'iframe gère sa propre largeur/hauteur. */
.booking-embed--live { display: block; min-height: 0; max-width: 720px; padding: clamp(8px, 1.5vw, 16px); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: 0 18px 40px rgba(31, 42, 33, 0.08); }
.booking-embed--live #CHECKFRONT_WIDGET_01 { border-radius: 12px; overflow: hidden; }
.booking-embed--live #CHECKFRONT_LOADER { margin: 0; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
.booking-wip { text-align: center; max-width: 460px; }
.booking-wip__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(20px, 3vw, 28px); color: var(--ink); }
.booking-wip__text { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--dark); color: rgba(255, 255, 255, 0.6); }
.site-footer__top { max-width: var(--maxw); margin: 0 auto; padding: 54px var(--pad) 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer__brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-logo { width: 56px; height: auto; flex: 0 0 auto; }
.site-footer__brand b { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: var(--bg); }
.site-footer p { font-size: 13px; line-height: 1.6; max-width: 38ch; margin: 0; }
.site-footer__col h4 { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.16em; color: var(--accent-2); margin: 0 0 14px; }
.site-footer__col .links { display: grid; gap: 9px; font-size: 14px; }
.site-footer__col a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer__col a:hover { color: #fff; }
.site-footer__vat { font-family: var(--font-mono); font-size: 11px; margin-top: 16px; color: rgba(255, 255, 255, 0.4); }
.site-footer__social { display: flex; gap: 12px; margin-top: 16px; }
.site-footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.72); }
.site-footer__social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.site-footer__bottom .inner { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--pad); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.4); }
/* Ces liens étaient typographiquement indiscernables du texte courant. */
.site-footer__bottom a { color: rgba(255, 255, 255, 0.62); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.25); }
.site-footer__bottom a:hover { color: var(--accent-2); text-decoration-color: currentColor; }

/* ---- Related --------------------------------------------------------- */
.related { background: var(--bg-3); }
.related__inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--pad); }
.related__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-bottom: 32px; }
.related__head h2 { font-weight: 700; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -0.015em; margin: 0; }
.link-underline { font-size: 14px; font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.center { text-align: center; }
.mt-lg { margin-top: 34px; }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
  .megamenu__inner { grid-template-columns: repeat(2, 1fr); }
  .megamenu__links--2col { grid-template-columns: 1fr; }
  .split, .venue__intro, .band-dark__inner, .detail, .contact-grid, .page-hero--split .page-hero__inner { grid-template-columns: 1fr; }
  .split--reverse { grid-template-columns: 1fr; }
  aside.sidebar { position: static; }
  .figure__float { position: static; width: 60%; margin-top: 16px; }
}

@media (max-width: 860px) {
  .nav, .nav-right .lang { display: none; }
  .burger { display: block; }
  .nav-bar { gap: 12px; }
  .nav-right { gap: 10px; }
  .btn-book { padding: 10px 14px; font-size: 13px; }
  .brand__logo { height: 34px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { grid-template-columns: 1fr; gap: 28px; }
  .hero__tag, .hero__coords, .hero__scroll { display: none; }
  .hero { min-height: 74vh; }

  /* Hero mobile : contenu centré, panneau « populaires » compact en grille 2×2 */
  .hero__inner--split { grid-template-columns: 1fr; gap: 26px; padding-top: 92px; padding-bottom: 76px; }
  .hero__main { text-align: center; }
  .hero__main h1, .hero__main p { margin-left: auto; margin-right: auto; }
  .hero__main .btn-row, .hero__main .hero__rotator { justify-content: center; }
  .hero__pop { padding: 14px 14px 4px; }
  .hero__pop-head { padding-bottom: 12px; margin-bottom: 10px; }
  .hero__pop-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero__pop-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
  .hero__pop-row + .hero__pop-row { border-top: none; }
  .hero__pop-row:hover { padding-left: 8px; }
  .hero__pop-thumb { width: 100%; height: 72px; border-radius: 8px; }
  .hero__pop-name { font-size: 13.5px; }
  .hero__pop-price { font-size: 10.5px; }
  .hero__pop-arrow { display: none; }
  .hero__pop-all { margin-top: 10px; text-align: center; }

  /* Mobile menu drawer */
  .mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--bg); transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; padding: 20px var(--pad); overflow-y: auto; }
  body.menu-open .mobile-menu { transform: translateX(0); }
  body.menu-open { overflow: hidden; }
  .mobile-menu__head { display: flex; justify-content: space-between; align-items: center; height: 54px; }
  .mobile-menu nav { display: grid; gap: 4px; margin-top: 24px; }
  .mobile-menu nav a { font-family: var(--font-head); font-weight: 700; font-size: 22px; text-decoration: none; color: var(--ink); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mobile-menu__langs { display: flex; gap: 14px; margin-top: 24px; font-family: var(--font-mono); font-size: 14px; }
  .mobile-menu__langs a { text-decoration: none; color: var(--muted); }
  .mobile-menu__langs a[aria-current="true"] { color: var(--accent); font-weight: 700; }
}
.mobile-menu { display: none; }
@media (max-width: 860px) { .mobile-menu { display: flex; } }

@media (max-width: 520px) {
  .stats__grid { grid-template-columns: 1fr 1fr; }
  .form .field--2 { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__bottom .inner { flex-direction: column; }
  .hero h1 { font-size: clamp(28px, 7.6vw, 40px); }
  .page-hero h1 { font-size: clamp(26px, 7vw, 40px); }
  .hero p, .page-hero p { font-size: 15px; }
  .btn--lg { font-size: 15px; padding: 14px 22px; }
  /* text-wrap:balance peut déborder avec un mot long sur très petit écran */
  .text-balance, .hero h1, .page-hero h1 { text-wrap: wrap; hyphens: auto; }
  /* …mais pas dans le H1 de l'accueil : « grandeur na-ture » coupé en deux
     fait négligé. `overflow-wrap: break-word` reste le filet de sécurité. */
  .hero h1 { hyphens: manual; font-size: clamp(26px, 7.2vw, 38px); }
  /* brand compact : on masque la baseline pour libérer la place du burger */
  .brand__sub { display: none; }
  .brand { gap: 8px; }
  .brand__name { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
  .brand__text { overflow: hidden; }
  .brand__logo { height: 30px; }
  .nav-bar { padding-left: 14px; padding-right: 14px; }
  .nav-right { gap: 8px; }
  .btn-book { padding: 9px 13px; font-size: 13px; }
  .burger { font-size: 27px; padding: 2px 5px; }
}

/* ====================================================================== *
 *  Animations GSAP — états initiaux (anti-FOUC)
 *  Posés uniquement quand .anim est présent (JS actif + mouvement autorisé).
 *  Si GSAP échoue, anim.js retire .anim et tout redevient visible.
 * ====================================================================== */
/* NB : cible les enfants de .hero__main + le panneau (mêmes cibles que anim.js) —
   ne pas masquer .hero__main lui-même, sinon le titre reste invisible.
   Le H1 et le paragraphe restent visibles d'emblée (LCP), et le bandeau des
   pages intérieures n'est plus masqué du tout : anim.js ne l'anime plus. */
.anim .hero .hero__main > :not(h1):not(p),
.anim .hero .hero__pop,
.anim .hero__scroll { opacity: 0; }

/* En-tête : élévation douce dès qu'on quitte le haut de page. */
.site-header { transition: box-shadow 0.4s ease, background-color 0.4s ease, backdrop-filter 0.4s ease; }
body.is-scrolled .site-header { box-shadow: 0 10px 34px -18px rgba(19, 17, 15, 0.5); }
/* L'en-tête reste visible en permanence (demande client) : pas d'escamotage
   au défilement. Ne pas réintroduire de `transform` ici. */
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.001ms !important; }
  .anim .hero .hero__main > *, .anim .hero .hero__pop, .anim .hero__scroll { opacity: 1 !important; }
  .booking-burst { display: none; }
}

/* ====================================================================== *
 *  P0/P1 — Conversion & clarté (profils, process, rappel, canaux)
 * ====================================================================== */
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.hide-sm { }

/* Bouton icône (en-tête : appeler) */
.nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink); border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.nav-icon-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Têtes de section centrées + sous-titre */
.sec-head--center { flex-direction: column; align-items: center; text-align: center; justify-content: center; }
.sec-sub { color: var(--muted); font-size: clamp(15px, 1.4vw, 17px); max-width: 56ch; margin: 0; }

/* Réassurance sous les CTA */
.cta-reassurance { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); margin: 12px 0 0; }
.cta-reassurance--hero { color: var(--cream-dim); margin-top: 16px; }

/* Section « Pour qui ? » */
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 38px; }
.aud-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 24px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.aud-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(31, 42, 33, 0.45); border-color: var(--accent); }
.aud-card__ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; background: rgba(46, 166, 216, 0.1); color: var(--accent); }
.aud-card__ic svg { width: 26px; height: 26px; }
.aud-card__t { margin: 0; font-size: 19px; font-weight: 800; }
.aud-card__d { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); flex: 1 1 auto; }
.aud-card__cta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); font-weight: 700; }

/* Section « Comment ça marche » */
.proc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.proc-step { position: relative; padding: 30px 26px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); }
.proc-step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--bg); font-family: var(--font-head); font-weight: 800; font-size: 20px; margin-bottom: 16px; }
.proc-step h3 { margin: 0 0 8px; font-size: 20px; }
.proc-step p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
/* Étape 1 : liens cliquables (titre → activités, phrase → formulaire de contact) */
.proc-step__link { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color .15s ease, text-decoration-color .15s ease; }
.proc-step__link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.proc-step__link--accent { color: var(--accent); text-decoration-color: rgba(46, 166, 216, 0.45); font-weight: 600; }
.proc-step__link--accent:hover { color: var(--accent-dk); text-decoration-color: var(--accent-dk); }

/* Mini-formulaire « Rappel » */
.callback { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 16px 40px -24px rgba(31, 42, 33, 0.4); }
.callback__head h3 { margin: 0 0 4px; font-size: 20px; }
.callback__head p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.callback__row { display: flex; flex-wrap: wrap; gap: 10px; }
.callback__row input, .callback__row select { flex: 1 1 150px; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; }
.callback__row .btn { flex: 0 0 auto; }
.callback__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); margin-top: 12px; }
.callback__consent input { margin-top: 2px; }
.callback--dark { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.callback--dark .callback__head h3 { color: var(--bg); }
.callback--dark .callback__head p, .callback--dark .callback__consent { color: var(--cream-dim); }
.callback--dark .callback__row input, .callback--dark .callback__row select { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: var(--bg); }
.callback--dark .callback__row input::placeholder { color: rgba(255, 255, 255, 0.6); }

/* Repli réservation (Checkfront non configuré) */
.booking-fallback { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 56px); align-items: center; }

/* Champs avancés repliables du formulaire de contact */
.form__more { margin: 4px 0; border: 1px dashed var(--line); border-radius: 12px; padding: 0 16px; }
.form__more > summary { cursor: pointer; padding: 14px 0; font-weight: 700; font-size: 14px; color: var(--accent); list-style: none; }
.form__more > summary::-webkit-details-marker { display: none; }
.form__more > summary::after { content: " +"; }
.form__more[open] > summary::after { content: " –"; }
.form__more-inner { padding-bottom: 16px; display: grid; gap: 16px; }

/* Barre d'action flottante (mobile) */
.action-bar { display: none; }

@media (max-width: 860px) {
  .hide-sm { display: none !important; }
  .aud-grid { grid-template-columns: 1fr 1fr; }
  .proc-grid { grid-template-columns: 1fr; gap: 16px; }
  .booking-fallback { grid-template-columns: 1fr; }
  body { padding-bottom: 66px; }
  .action-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: 1px; background: rgba(31, 42, 33, 0.12); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -14px rgba(19, 17, 15, 0.4); }
  .action-bar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 9px 6px 8px; background: var(--bg-2); color: var(--ink); text-decoration: none; font-size: 11px; font-weight: 700; }
  .action-bar__item svg { width: 20px; height: 20px; }
  .action-bar__item--wa { color: #1f9d57; }
  .action-bar__item--book { background: var(--accent); color: var(--bg); flex: 1.3 1 0; font-size: 13px; }
  body.menu-open .action-bar { display: none; }
}

@media (max-width: 520px) {
  .aud-grid { grid-template-columns: 1fr; }
  .callback__row { flex-direction: column; }
  .callback__row .btn { width: 100%; }
}

/* ====================================================================== *
 *  Mini-jeu « Stand de tir » (effet wow)
 * ====================================================================== */
.game-sec { position: relative; background: var(--dark-2); color: var(--bg); padding: clamp(56px, 8vw, 100px) 0; overflow: hidden; }
.game-sec__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 60% at 50% 0%, rgba(46, 166, 216, 0.22), transparent 60%); }
.game-sec .container { position: relative; z-index: 1; }
.game { position: relative; width: 100%; height: clamp(360px, 52vh, 560px); margin-top: 36px; border-radius: 22px; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, #20302a, #11160f); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7); }
.game [hidden] { display: none !important; }
.game__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }

.game__hud { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; color: var(--cream-dim); pointer-events: none; background: linear-gradient(180deg, rgba(17, 22, 15, 0.7), transparent); }
.game__stat b { color: var(--bg); font-size: 18px; margin-left: 4px; }
.game__stat--time { margin-left: auto; }
.game__stat--time b { color: var(--accent-2); }
.game__combo { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--accent-2); opacity: 0; transition: opacity .15s; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }

.game__screen { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: rgba(17, 22, 15, 0.82); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.game__panel { max-width: 460px; }
.game__badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--accent-2); border: 1px solid rgba(245, 145, 115, 0.4); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }
.game__big { font-family: var(--font-head); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.04; margin: 0 0 12px; color: var(--bg); }
.game__hint { color: var(--cream-dim); font-size: 14.5px; margin: 0 0 22px; }
.game__play { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
.game__best-line { font-family: var(--font-mono); font-size: 13px; color: var(--cream-dim); margin: 18px 0 0; }
.game__best-line b, .game__final b { color: var(--accent-2); }
.game__newbest { font-family: var(--font-head); font-weight: 800; color: var(--gold, #e0a34a); color: #e0a34a; font-size: 16px; letter-spacing: 0.04em; margin-bottom: 8px; }
.game__final { font-family: var(--font-mono); font-size: 15px; color: var(--cream-dim); margin: 0 0 4px; }
.game__sep { margin: 0 10px; opacity: 0.5; }

@media (max-width: 600px) {
  .game__hud { font-size: 11px; padding: 10px 12px; }
  .game__stat b { font-size: 15px; }
  .game { height: clamp(340px, 64vh, 460px); }
}

/* Jeu 3D : viseur + curseur */
.game__canvas--3d { cursor: none; }
.game__cross { position: absolute; z-index: 3; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(0,0,0,0.2); }
.game__cross::before, .game__cross::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.9); }
.game__cross::before { left: 50%; top: -8px; width: 2px; height: 7px; margin-left: -1px; }
.game__cross::after { top: 50%; left: -8px; height: 2px; width: 7px; margin-top: -1px; }
.game__cross { box-shadow: 0 0 8px rgba(200,85,46,0.6), inset 0 0 0 1px rgba(0,0,0,0.25); }

/* ====================================================================== *
 *  « Fun & conversion » — hero vivant, devis express, vignettes designées
 * ====================================================================== */

/* Hero : halos de couleur animés (peinture dans la brume) */
.hero__blob { position: absolute; z-index: 1; border-radius: 50%; filter: blur(64px); pointer-events: none; will-change: transform; }
.hero__blob--a { width: clamp(280px, 42vw, 560px); height: clamp(280px, 42vw, 560px); right: 4%; top: -12%; background: radial-gradient(circle, rgba(46, 166, 216, 0.5), transparent 62%); animation: blobA 17s ease-in-out infinite alternate var(--anim); }
.hero__blob--b { width: clamp(240px, 34vw, 460px); height: clamp(240px, 34vw, 460px); left: -6%; bottom: -8%; background: radial-gradient(circle, rgba(88, 129, 87, 0.55), transparent 62%); animation: blobB 21s ease-in-out infinite alternate var(--anim); }
@keyframes blobA { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 50px) scale(1.15); } }
@keyframes blobB { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(70px, -40px) scale(0.95); } }

/* Hero : mot rotatif (clarifie l'offre, fun) */
.hero__rotator { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; font-family: var(--font-head); font-weight: 700; font-size: clamp(15px, 1.7vw, 21px); color: var(--cream-dim); margin-bottom: 16px; }
.rot { display: inline-block; overflow: hidden; height: 1.3em; }
.rot__list { display: block; animation: rotwords 12.5s cubic-bezier(0.76, 0, 0.24, 1) infinite var(--anim); }
.rot__w { display: block; height: 1.3em; line-height: 1.3; color: var(--accent-2); white-space: nowrap; }
@keyframes rotwords {
  0%, 16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-1.3em); }
  40%, 56% { transform: translateY(-2.6em); }
  60%, 76% { transform: translateY(-3.9em); }
  80%, 96% { transform: translateY(-5.2em); }
  100% { transform: translateY(-6.5em); }
}
.hero .hero__scroll { display: none; } /* remplacé par la barre devis express */

/* ---- Adresse du pied de page (cliquable + itinéraires + copie) -------- */
.footer-addr { font-style: normal; display: grid; gap: 10px; }
.footer-addr__text { text-decoration: none; line-height: 1.5; border-bottom: 1px solid transparent; justify-self: start; }
.footer-addr__text:hover { border-bottom-color: currentColor; }
.footer-addr__actions { display: flex; flex-wrap: wrap; gap: 7px; }
.footer-addr__btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.06);
  color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.footer-addr__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.footer-addr__btn svg { flex: 0 0 auto; }

/* ---- Logements sur place (présence volontairement discrète) ----------- */
.lodging-teaser {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: clamp(36px, 5vw, 56px) 0 0; padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: 14px; color: var(--muted);
}
.lodging-teaser--center { justify-content: center; text-align: center; }
.lodging-teaser a { color: var(--green-dk); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
.lodging-teaser a:hover { color: var(--accent); }
/* Widgets Airbnb : le SDK dimensionne à partir du style en ligne (450×300) ;
   on le borne simplement pour qu'il ne déborde pas sur mobile. */
.lodging-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 450px)); justify-content: center; gap: 22px; }
.airbnb-embed-frame { max-width: 100%; }
.lodging-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: clamp(36px, 5vw, 56px); padding: 24px 26px;
  background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--radius-lg);
}
.lodging-cta__note { margin: 0; font-size: 14px; color: var(--muted); max-width: 60ch; }
.faq-item__link { color: var(--green-dk); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.faq-item__link:hover { color: var(--accent); }

/* ---- Chercheur d'activités (carte à cheval sur le bas du hero) -------- */
/* Le hero réserve assez de place en bas pour que la carte ne colle jamais
   aux boutons : le chevauchement doit rester inférieur à ce dégagement. */
.quickbar-wrap { position: relative; z-index: 5; max-width: var(--maxw); margin: -44px auto 0; padding: 0 var(--pad); }
.finder { background: var(--bg-2); border: 1px solid var(--line); border-top: 4px solid var(--accent-bright); border-radius: 18px; padding: 20px 22px 22px; box-shadow: 0 30px 70px -28px rgba(31, 42, 33, 0.5); }
.finder__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.finder__title { display: block; font-family: var(--font-head); font-size: 19px; font-weight: 800; }
.finder__sub { font-size: 13.5px; color: var(--muted); margin: 4px 0 0; max-width: 62ch; }
.finder__count { font-family: var(--font-mono); font-size: 12px; color: var(--green-dk); background: var(--green-soft); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.finder__count:empty { display: none; }
.finder__count.is-pop { animation: qb-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes qb-pop { 0% { transform: scale(0.86); } 100% { transform: scale(1); } }

/* Envie : pastilles radio (fonctionnent aussi sans JS, valeur postée telle quelle) */
.finder__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* Le radio reste dans le flux du label (position: relative) : sinon il
   s'ancre sur .quickbar-wrap et le focus clavier fait sauter la page. */
.fd-chip { position: relative; display: inline-flex; }
.fd-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.fd-chip span {
  display: inline-block; padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--muted);
  font-size: 13.5px; font-weight: 600; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fd-chip span:hover { border-color: var(--green); color: var(--ink); }
.fd-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fd-chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.finder__fields { display: flex; gap: 14px; align-items: flex-end; }
.finder__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.finder__field input, .finder__field select { height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); font: 15px var(--font-body); color: var(--ink); min-width: 0; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
.finder__field input:focus, .finder__field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
/* Champ date : rendu natif harmonisé (hauteur, police, icône calendrier) */
.finder__field input[type="date"] { -webkit-appearance: none; appearance: none; font-family: var(--font-body); color: var(--ink); }
.finder__field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; transition: opacity .15s ease; }
.finder__field input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.finder__btn { flex: 0 0 auto; white-space: nowrap; height: 48px; }

/* Résultats en direct (révélés par JS — sans JS le formulaire reste un GET) */
.finder__results { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.finder__results[hidden] { display: none; }
/* Tous les résultats sont rendus : la liste défile VERTICALEMENT dans une
   hauteur bornée (jamais horizontalement — c'était impraticable au doigt).
   `loading="lazy"` fait que seules les vignettes visibles se chargent. */
/* Colonnes larges : le titre complet de l'activité doit tenir sans coupure —
   « Promenade d'orientation à Spa-Francorchamps » a besoin de place. */
.finder__hits {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 10px;
  max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding-right: 4px; align-content: start;
}
.finder__hits[hidden] { display: none; }
.finder__hits::-webkit-scrollbar { width: 8px; }
.finder__hits::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.finder__empty { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.finder__empty[hidden] { display: none; }
.finder__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.finder__all { font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.finder__reset { border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.finder__reset:hover { color: var(--accent); }
.finder__reset[hidden] { display: none; }

.fd-hit {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px; border: 1px solid var(--line); border-radius: 13px;
  text-decoration: none; color: inherit; background: var(--bg-2);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* ⚠ Indispensable : `display:flex` ci-dessus est une règle auteur, elle bat
   toujours le `[hidden] { display:none }` du navigateur. Sans cette ligne, le
   filtre posait bien l'attribut `hidden` mais RIEN ne disparaissait. */
.fd-hit[hidden] { display: none; }
.fd-hit:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(31, 42, 33, 0.6); }
.fd-hit__media { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--green-soft); display: flex; align-items: center; justify-content: center; }
.fd-hit__media img { width: 100%; height: 100%; object-fit: cover; }
.fd-hit__emoji { font-size: 24px; line-height: 1; }
.fd-hit__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
/* Jamais de troncature : le nom passe à la ligne plutôt que de se faire couper. */
.fd-hit__name { font-family: var(--font-head); font-weight: 700; font-size: 14.5px; line-height: 1.2; overflow-wrap: anywhere; }
.fd-hit__meta { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.fd-hit__price { flex: 0 0 auto; font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--accent); white-space: nowrap; }

/* Marquee : légère inclinaison (personnalité) + pause au survol */
.marquee--tilt { transform: rotate(-1.3deg) scale(1.03); margin: 30px 0 12px; box-shadow: 0 12px 30px -18px rgba(31, 42, 33, 0.5); }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Vignettes « designées » (avant les vraies photos) */
.ph--art { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px; overflow: hidden; background: radial-gradient(130% 130% at 16% -12%, rgba(63, 166, 106, 0.5), transparent 55%), linear-gradient(160deg, #2f7d54, #17332a); }
.ph--art::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1.2px, transparent 1.7px); background-size: 16px 16px; }
.ph--art-indoor { background: radial-gradient(130% 130% at 16% -12%, rgba(46, 166, 216, 0.42), transparent 55%), linear-gradient(160deg, #1f6f92, #12303f); }
.ph--art-food { background: radial-gradient(130% 130% at 16% -12%, rgba(46, 166, 216, 0.5), transparent 55%), linear-gradient(160deg, #c2532f, #6e2c12); }
.ph--art-pack { background: radial-gradient(130% 130% at 16% -12%, rgba(46, 166, 216, 0.36), transparent 55%), linear-gradient(160deg, #2f7d6a, #163a34); }
.ph__emoji { position: relative; z-index: 1; font-size: clamp(42px, 5vw, 58px); line-height: 1; transform: rotate(-6deg); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.35)); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ph__emoji--lg { font-size: clamp(64px, 8vw, 96px); }
.card:hover .ph__emoji, .card__link:hover .ph__emoji { transform: rotate(5deg) scale(1.18); }
.ph--art .card__group { position: absolute; top: 12px; left: 12px; z-index: 2; }

/* Figure d'intro (accueil) */
.figure--art { align-items: center; justify-content: center; position: relative; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.2px, transparent 1.7px), radial-gradient(130% 130% at 16% -12%, rgba(245, 145, 115, 0.4), transparent 55%), linear-gradient(160deg, #35493c, #1c271e); background-size: 16px 16px, cover, cover; }
.figure--art .figure__badge { position: absolute; left: 16px; bottom: 16px; }
.figure__float { align-items: center; justify-content: center; }

/* Éclat de peinture devant les kickers */
.kicker::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 8px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232ea6d8' d='M12 3c1.8 0 2.6 1.6 2.4 3.1 1.5-1 3.6-.4 4 1.3.4 1.6-.8 2.6-2 3 1.7.4 2.9 1.9 2.2 3.5-.6 1.5-2.4 1.6-3.7 1 .5 1.5 0 3.3-1.7 3.7-1.6.4-2.7-.8-3-2.2-.7 1.3-2.2 2.2-3.6 1.4-1.4-.8-1.3-2.5-.5-3.7-1.5.3-3.2-.3-3.4-2-.2-1.6 1.2-2.5 2.6-2.6-1.2-.9-1.8-2.6-.6-3.8 1.1-1.1 2.7-.6 3.6.4C8.6 4.3 10.1 3 12 3z'/%3E%3C/svg%3E") no-repeat center / contain; }
.kicker--light::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f59173' d='M12 3c1.8 0 2.6 1.6 2.4 3.1 1.5-1 3.6-.4 4 1.3.4 1.6-.8 2.6-2 3 1.7.4 2.9 1.9 2.2 3.5-.6 1.5-2.4 1.6-3.7 1 .5 1.5 0 3.3-1.7 3.7-1.6.4-2.7-.8-3-2.2-.7 1.3-2.2 2.2-3.6 1.4-1.4-.8-1.3-2.5-.5-3.7-1.5.3-3.2-.3-3.4-2-.2-1.6 1.2-2.5 2.6-2.6-1.2-.9-1.8-2.6-.6-3.8 1.1-1.1 2.7-.6 3.6.4C8.6 4.3 10.1 3 12 3z'/%3E%3C/svg%3E"); }

/* ---- Accents multicolores (moins monochrome) ------------------------ */
/* Puce catégorie colorée : outdoor = vert, indoor = bleu (food/pack gardent leur teinte) */
.card[data-card-group="outdoor"] .card__group { background: var(--green-dk); }
.card[data-card-group="indoor"] .card__group { background: var(--blue); }
/* Kickers alternés par section pour casser le monochrome */
.kicker--green { color: var(--green-dk); }
.kicker--green::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233fa66a' d='M12 3c1.8 0 2.6 1.6 2.4 3.1 1.5-1 3.6-.4 4 1.3.4 1.6-.8 2.6-2 3 1.7.4 2.9 1.9 2.2 3.5-.6 1.5-2.4 1.6-3.7 1 .5 1.5 0 3.3-1.7 3.7-1.6.4-2.7-.8-3-2.2-.7 1.3-2.2 2.2-3.6 1.4-1.4-.8-1.3-2.5-.5-3.7-1.5.3-3.2-.3-3.4-2-.2-1.6 1.2-2.5 2.6-2.6-1.2-.9-1.8-2.6-.6-3.8 1.1-1.1 2.7-.6 3.6.4C8.6 4.3 10.1 3 12 3z'/%3E%3C/svg%3E"); }
.kicker--blue { color: var(--blue-dk); }
.kicker--blue::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232ea6d8' d='M12 3c1.8 0 2.6 1.6 2.4 3.1 1.5-1 3.6-.4 4 1.3.4 1.6-.8 2.6-2 3 1.7.4 2.9 1.9 2.2 3.5-.6 1.5-2.4 1.6-3.7 1 .5 1.5 0 3.3-1.7 3.7-1.6.4-2.7-.8-3-2.2-.7 1.3-2.2 2.2-3.6 1.4-1.4-.8-1.3-2.5-.5-3.7-1.5.3-3.2-.3-3.4-2-.2-1.6 1.2-2.5 2.6-2.6-1.2-.9-1.8-2.6-.6-3.8 1.1-1.1 2.7-.6 3.6.4C8.6 4.3 10.1 3 12 3z'/%3E%3C/svg%3E"); }
/* Pastilles de section pastel */
.bg-mint { background: var(--green-soft); }
.bg-sky { background: var(--blue-soft); }
.bg-accent { background: var(--accent-soft); }

/* ---- Bloc « lieu » unifié (intro + galerie domaine + installations) -- */
.venue__intro { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
/* ⚠ Cette règle arrive APRÈS la media query 1024 px du bloc « Responsive » ;
   à spécificité égale c'est la dernière qui gagne, donc la version deux
   colonnes s'appliquait aussi sur mobile (texte écrasé, photos mal placées).
   L'override doit rester ici, en aval de la déclaration de base. */
@media (max-width: 1024px) {
  .venue__intro { grid-template-columns: 1fr; }
}
.venue__sub { margin-top: clamp(52px, 7vw, 88px); }
.venue__subtitle { font-family: var(--font-head); font-weight: 800; font-size: clamp(21px, 2.4vw, 28px); margin: 0 0 22px; }
.venue .card { border-color: #dbe8de; }
.venue .gallery__item { border-color: #dbe8de; }
/* Galerie de l'accueil : complète sur grand écran, extrait + lien sur mobile
   (les 14 photos empilées faisaient ~3 500 px de haut sur un téléphone). */
.gallery__more { margin: 18px 0 0; display: none; }
.gallery__more a { font-weight: 700; text-decoration: none; color: var(--accent); border-bottom: 2px solid currentColor; padding-bottom: 2px; }
@media (max-width: 860px) {
  .gallery--domaine .gallery__item--extra { display: none; }
  .gallery__more { display: block; }
}

/* « Pour qui ? » : une couleur douce par carte (moins monochrome) */
.aud-card:nth-child(4n+1) { --c: var(--accent);  --cs: rgba(46, 166, 216, 0.12); }
.aud-card:nth-child(4n+2) { --c: var(--green-dk); --cs: var(--green-soft); }
.aud-card:nth-child(4n+3) { --c: var(--blue-dk);  --cs: var(--blue-soft); }
.aud-card:nth-child(4n+4) { --c: #d99320;         --cs: rgba(242, 177, 60, 0.16); }
.aud-card__ic { background: var(--cs, rgba(46, 166, 216, 0.1)); color: var(--c, var(--accent)); }
.aud-card__cta { color: var(--c, var(--accent)); }
.aud-card:hover { border-color: var(--c, var(--accent)); }

/* Variante avec photo d'illustration */
.aud-card__body { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.aud-card--img { padding: 0; gap: 0; overflow: hidden; }
.aud-card__img { position: relative; display: block; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: var(--dark-2); }
.aud-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.aud-card:hover .aud-card__img img { transform: scale(1.06); }
.aud-card__img .aud-card__ic { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.35); }
.aud-card--img .aud-card__body { padding: 16px 20px 20px; }

/* Numéros d'étapes colorés en alternance */
.step:nth-child(3n+2) .step__n { color: var(--green-dk); }
.step:nth-child(3n+3) .step__n { color: var(--blue-dk); }

/* Coches d'avantages en vert (positif / nature) */
.highlights .check { color: var(--green-dk); }

/* CTA flottant desktop (apparaît après le hero) */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: inline-flex; align-items: center; gap: 9px; background: var(--dark-2); color: var(--bg); padding: 13px 19px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 18px 40px -14px rgba(19, 17, 15, 0.6); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease; }
.fab svg { color: var(--accent-2); }
body.is-scrolled .fab { opacity: 1; transform: none; pointer-events: auto; }
/* Arrivé au pied de page, le bouton s'efface : il masquait les coordonnées,
   les réseaux sociaux et les liens légaux placés sous lui. */
body.at-bottom .fab { opacity: 0; transform: translateY(14px); pointer-events: none; }
.fab:hover { background: var(--accent); }
.fab:hover svg { color: var(--bg); }

/* Micro-interactions boutons */
.btn:active { transform: scale(0.96); }
.btn--primary:hover { transform: translateY(-2px); }

/* Booking: cinq petites activites s'echappent du CTA au clic. */
.booking-burst { position: fixed; z-index: 1000; width: 0; height: 0; pointer-events: none; isolation: isolate; }
.booking-burst__icon { position: absolute; top: 0; left: 0; display: block; width: clamp(50px, 7vw, 82px); max-width: none; height: auto; opacity: 0; pointer-events: none; transform-origin: center; filter: drop-shadow(0 12px 14px rgba(11, 28, 47, 0.28)); will-change: transform, opacity; animation: booking-burst 430ms cubic-bezier(0.18, 0.82, 0.28, 1) both; }
@keyframes booking-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.24) rotate(var(--burst-start-r)); }
  14% { opacity: 1; }
  26% { opacity: 1; transform: translate(-50%, -50%) scale(1.06) rotate(var(--burst-start-r)); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--burst-x), var(--burst-y)) scale(0.84) rotate(var(--burst-end-r)); }
}

/* ====================================================================== *
 *  Séparateurs de sections (SVG animés)
 *  Le bloc porte la couleur d'une section, les tracés celle de l'autre :
 *  la transition est donc invisible en haut comme en bas. Les tracés font
 *  deux tuiles de large ; les décaler d'une tuile boucle sans couture.
 * ====================================================================== */
.sep {
  position: relative; display: block; width: 100%; line-height: 0;
  background: var(--sep-bg, transparent);
  margin: -1px 0;                         /* évite le liseré au sous-pixel */
  pointer-events: none; overflow: hidden;
}
.sep__svg { display: block; width: 100%; height: var(--sep-h, clamp(46px, 6.5vw, 92px)); }
.sep--flip .sep__svg { transform: scaleX(-1); }
.sep__fg { fill: var(--sep-fg, #fff); }
.sep__tint { fill: var(--sep-tint, rgba(63, 166, 106, 0.22)); }

/* Parallaxe : la couche du fond glisse plus lentement et en sens inverse. */
.sep__lay { animation: sep-drift var(--sep-dur, 48s) linear infinite var(--anim); will-change: transform; }
.sep__lay--back { animation-name: sep-drift-rev; animation-duration: var(--sep-dur2, 76s); }
.sep__bob { animation: sep-bob 11s ease-in-out infinite var(--anim); }
@keyframes sep-drift { from { transform: translateX(0); } to { transform: translateX(-1440px); } }
@keyframes sep-drift-rev { from { transform: translateX(-1440px); } to { transform: translateX(0); } }
@keyframes sep-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Crête de sapins : plus haute, défilement très lent (horizon lointain). */
.sep--ridge .sep__svg { height: var(--sep-h, clamp(58px, 8.5vw, 128px)); }

/* Sentier : deux pointillés qui avancent en sens opposés vers les étapes. */
.sep--trail .sep__svg { height: var(--sep-h, clamp(52px, 6vw, 88px)); }
.sep__dash { fill: none; stroke-linecap: butt; }
.sep__dash--a { stroke: var(--accent-bright); stroke-width: 3; stroke-dasharray: 4 14; animation: sep-dash-a 5.5s linear infinite var(--anim); }
.sep__dash--b { stroke: var(--green); stroke-width: 2.5; stroke-dasharray: 3 17; opacity: 0.75; animation: sep-dash-b 9s linear infinite var(--anim); }
@keyframes sep-dash-a { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -36; } }
@keyframes sep-dash-b { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 40; } }

@media (prefers-reduced-motion: reduce) {
  /* La règle globale fige déjà les animations ; les deux tuiles étant
     identiques, le motif reste correct, simplement immobile. */
  .sep__lay, .sep__bob, .sep__dash { will-change: auto; }
}

@media (max-width: 960px) { .hero__floaters { display: none; } }

@media (max-width: 860px) {
  /* Le hero réserve 76px en bas : on garde un vrai espace sous les boutons. */
  .quickbar-wrap { margin-top: -20px; }
  .finder { padding: 16px 16px 18px; }
  .finder__fields { flex-wrap: wrap; }
  .finder__field { flex: 1 1 44%; }
  .finder__btn { flex: 1 1 100%; }
  /* Mobile : une colonne qui défile verticalement, au doigt, sans geste latéral.
     Hauteur volontairement contenue — la carte chevauche déjà le hero. */
  .finder__hits { grid-template-columns: 1fr; max-height: min(44vh, 320px); }
  .marquee--tilt { margin-top: 22px; }
  .fab { display: none; }
  .hero__rotator { font-size: 14.5px; }
}

/* ---- Confort tactile (≈80 % du trafic vient du mobile) ---------------- *
 * Toute cible tapotable atteint ~44 px de haut : en dessous, le doigt rate
 * une fois sur trois. On garde la taille visuelle et on ajoute du padding.  */
@media (hover: none) {
  .footer-addr__btn { padding: 11px 15px; font-size: 13.5px; }
  .fd-chip span { padding: 12px 17px; }
  .finder__reset { padding: 10px 4px; }
  .finder__all { display: inline-block; padding: 8px 0; }
  .lodging-teaser a, .faq-item__link { display: inline-block; padding: 6px 0; }
  .lang__list a, .megamenu__extra a { padding: 10px 0; display: block; }
}

/* ====================================================================== *
 *  ARBORESCENCE DE CHOIX (accueil) — retours client
 *  Une question à la fois plutôt qu'un mur de filtres : « les gens sont
 *  paresseux », il faut que choisir reste simple.
 * ====================================================================== */
.wizard {
  background: var(--bg-2); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 18px; padding: 24px 22px 22px;
  box-shadow: 0 30px 70px -28px rgba(31, 42, 33, 0.5);
}

/* Clignotement d'appel : déclenché par wizard.js quand on arrive sur
   l'arborescence depuis « on vous aide à choisir » (section « comment ça
   marche ? »). Guide l'œil vers la section, puis s'efface. */
.wizard.is-flashing { animation: wz-flash 0.85s ease-in-out 3; }
@keyframes wz-flash {
  0%, 100% { border-color: var(--line); border-top-color: var(--accent);
             box-shadow: 0 30px 70px -28px rgba(31, 42, 33, 0.5); }
  50%      { border-color: var(--accent); border-top-color: var(--accent);
             box-shadow: 0 30px 70px -28px rgba(31, 42, 33, 0.5), 0 0 0 6px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .wizard.is-flashing { animation: none; }
}
.wizard__head { text-align: center; max-width: 66ch; margin: 0 auto; }
/* Renvoi « contact humain » sous l'arborescence : present des l'intro et
   pendant tout le questionnaire (il vit hors du stage reecrit par le JS). */
.wizard__human { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.wizard__human a { margin-left: 4px; white-space: nowrap; }
.wizard__head .sec-sub { margin: 0; }
/* Questionnaire lancé : le chapeau d'intro s'efface, seul le fil des
   questions reste à l'écran (il occupait sinon la moitié de la carte). */
.wizard.is-running .wizard__head .h2, .wizard.is-running .wizard__head .sec-sub { display: none; }
.wizard.is-running .wizard__head { margin-bottom: -6px; }
.wizard__progress { display: flex; align-items: center; gap: 12px; margin: 20px auto 4px; max-width: 620px; }
.wizard__progress[hidden] { display: none; }
.wizard__step { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); white-space: nowrap; }
.wizard__bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.wizard__bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent-bright); transition: width .35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wizard__restart { border: none; background: none; padding: 6px 2px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.wizard__restart:hover { color: var(--accent); }
.wizard__stage { margin-top: 14px; }
.wizard__intro { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }

.wz-step, .wz-results { max-width: 720px; margin: 0 auto; }
.wz-q { font-family: var(--font-head); font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; text-align: center; margin: 8px 0 18px; text-wrap: balance; }
.wz-opts { display: grid; gap: 10px; }
.wz-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 54px;
  padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--bg-2); color: var(--ink); font: inherit; font-size: 15.5px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.wz-opt::before {
  content: ''; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); transition: border-color .15s ease, background .15s ease;
}
.wz-opt:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(31, 42, 33, 0.7); }
.wz-opt:hover::before, .wz-opt.is-on::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--bg-2); }
.wz-opt.is-on { border-color: var(--accent); background: var(--accent-soft); }
.wz-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wz-input { display: flex; gap: 10px; margin-top: 4px; }
.wz-input.is-hidden { display: none; }
.wz-input input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg-2);
  font: 16px var(--font-body); color: var(--ink);
}
.wz-input input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wz-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.wz-none { margin: 4px 0 0; font-size: 15px; color: var(--muted); text-align: center; }
.wz-nav { display: flex; justify-content: center; margin-top: 18px; }
.wz-link { border: none; background: none; padding: 8px 6px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--muted); }
.wz-link:hover { color: var(--accent); }
.wz-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.wz-summary { margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.wz-summary summary { cursor: pointer; }
.wz-summary ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.wz-summary b { color: var(--ink-2); font-weight: 600; }
.wz-results .finder__hits { margin-top: 16px; }

/* ====================================================================== *
 *  Bulles d'activités (formulaire de contact) — choix multiple
 * ====================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-block; padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--bg-2);
  font-size: 13.5px; font-weight: 600; color: var(--muted-2); cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip span:hover { border-color: var(--accent); color: var(--ink); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chip--pack input:checked + span { background: var(--green-dk); border-color: var(--green-dk); }
.chip--unsure span { border-style: dashed; }
.chip--unsure input:checked + span { background: var(--ink); border-color: var(--ink); }
.field__hint { margin: 2px 0 6px; font-size: 12.5px; color: var(--muted); }
/* Volet « je suis intéressé par… » : replié par défaut, les choix restent
   lisibles dans l'entête sous forme de mini-bulles. */
.chips-picker { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--bg-2); }
.chips-picker > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; list-style: none; }
.chips-picker > summary::-webkit-details-marker { display: none; }
.chips-picker > summary::after { content: '+'; margin-left: auto; font-size: 18px; color: var(--accent); font-weight: 700; }
.chips-picker[open] > summary::after { content: '−'; }
.chips-picker[open] > summary { margin-bottom: 8px; }
.chips-picker__picked { display: contents; }
.pill-mini { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dk); font-size: 12px; font-weight: 700; }
.form__error {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: #fdecec; border: 1px solid #f3c9c9; color: #8c2f2f; font-size: 14px;
}
.form__error[hidden] { display: none; }

/* ====================================================================== *
 *  Logements mis en avant (accueil) + réservation en direct (page dédiée)
 * ====================================================================== */
.lodging-band { background: var(--green-soft); }
.lodging-band__inner { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.lodging-band__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(31, 42, 33, 0.7); }
.lodging-band__media img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; }
.lodging-band__media--art { display: flex; align-items: center; justify-content: center; min-height: 240px; background: var(--bg-2); font-size: 54px; }

.direct-band {
  display: grid; grid-template-columns: 1.4fr auto; gap: 24px; align-items: center;
  margin: 36px 0 8px; padding: 24px 26px;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); background: var(--accent-soft);
}
/* Fiches logements « maison » (elles ont remplacé les widgets Airbnb). */
.lodging-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); }
.lodging-card__title { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lodging-card__rating { font-size: 13px; font-weight: 700; color: var(--accent); }
.lodging-card__specs { margin: 0 0 4px; font-size: 14px; color: var(--muted); }
.lodging-card .btn { margin-top: auto; }

/* Fiche enrichie : photo, intro et équipements. Elle occupe deux colonnes de
   la grille quand la place le permet, sinon elle retombe sur une colonne —
   sans quoi la photo et la liste rendraient la carte très haute et étroite. */
.lodging-card--rich { grid-column: span 2; }
/* Le ratio se pilote depuis le conteneur, pas depuis l'image : .media lui
   donne un fond sombre, et une image à hauteur fixe dans un conteneur en
   `aspect-ratio` laissait un grand aplat vert sous la photo. */
.lodging-card__media { margin: -22px -22px 4px; aspect-ratio: 21/9; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.lodging-card__reviews { font-weight: 600; color: var(--muted); }
.lodging-card__intro { margin: 0; font-size: 15px; line-height: 1.6; }
.lodging-card__features { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); font-size: 14px; }
.lodging-card__features li { position: relative; padding-left: 18px; color: var(--muted); }
.lodging-card__features li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-bright); }
.lodging-card__shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 4px; }
.lodging-card__shots .gallery__item img { height: 76px; object-fit: cover; }

@media (max-width: 900px) {
  .lodging-card--rich { grid-column: auto; }
  .lodging-card__media { aspect-ratio: 16/10; }
}

.lodging-partners { margin-top: 8px; }
.bubbles { display: flex; flex-wrap: wrap; gap: 10px; }
.bubble {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2);
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.bubble:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(31, 42, 33, 0.7); }
.bubble__dot { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft); font-size: 15px; }

/* ====================================================================== *
 *  Événements sur mesure (liste des activités)
 * ====================================================================== */
.custom-band {
  display: grid; grid-template-columns: 1.5fr auto; gap: 28px; align-items: center;
  padding: clamp(26px, 4vw, 40px); border-radius: var(--radius-lg);
  background: var(--dark-3); color: var(--bg);
}
.custom-band p { margin: 0; color: var(--cream-dim); max-width: 62ch; }

/* ====================================================================== *
 *  Avis clients (Google)
 * ====================================================================== */
.reviews__badge { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size: 14px; }
.reviews__score { font-family: var(--font-head); font-weight: 800; font-size: 18px; }
.reviews__stars { color: #f5a623; letter-spacing: 1px; }
.reviews__badge a { color: var(--accent); font-weight: 700; text-decoration: none; }
.reviews__badge a:hover { text-decoration: underline; }
.reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
.review { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; }
.review__stars { color: #f5a623; letter-spacing: 2px; font-size: 15px; }
.review blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.review figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review__author { font-weight: 700; font-size: 14px; }
.review__src { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); }

/* ====================================================================== *
 *  Correctifs signalés par le client
 * ====================================================================== */
/* Menu « Vous êtes… » du rappel : sur fond sombre, le texte des <option> est
   blanc alors que la liste native s'ouvre sur fond blanc → illisible. On
   force donc les couleurs de la liste déroulante elle-même. */
.callback--dark .callback__row select option { color: var(--ink); background: var(--bg-2); }

/* Six entrées dans la navigation : on resserre avant le passage au burger. */
@media (max-width: 1100px) {
  .nav a, .nav__trigger { padding: 9px 9px; font-size: 13.5px; }
  .nav-right { gap: 10px; }
}

@media (max-width: 900px) {
  .lodging-band__inner, .direct-band, .custom-band { grid-template-columns: 1fr; }
  .lodging-band__media img { max-height: 260px; }
}

@media (max-width: 600px) {
  .wizard { padding: 20px 16px 18px; }
  .wz-opt { font-size: 15px; padding: 13px 15px; }
  .wz-input { flex-direction: column; }
  .wz-input .btn { width: 100%; }
  .wizard__progress { flex-wrap: wrap; }
}

@media (hover: none) {
  .chip span { padding: 12px 17px; }
  .wizard__restart, .wz-link { padding: 11px 6px; }
}

/* ====================================================================== *
 *  Passe de corrections — revue du 2026-09-23
 *  Bloc placé en fin de fichier à dessein : une media query n'ajoute aucune
 *  spécificité, une règle de base déclarée plus bas l'écraserait.
 * ====================================================================== */

/* ---- Titres sémantiques restylés (plus de h3 avant le H1, ni h4 après h2) */
.megamenu__promo-title { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.15; margin: 0 0 8px; }
.site-footer__col h2.site-footer__h { font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.16em; color: var(--accent-2); margin: 0 0 14px; line-height: 1.5; }

/* ---- Bande de chiffres clés : autant de colonnes que de cases ---------- */
.stats__grid--n1 { grid-template-columns: 1fr; }
.stats__grid--n2 { grid-template-columns: repeat(2, 1fr); }
.stats__grid--n3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) {
  .stats__grid--n3 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid--n3 .stats__cell:last-child { grid-column: 1 / -1; }
}

/* ---- Filtres du catalogue : fond propre quand ils restent collés en haut */
.filters--sticky {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad));
  padding: 10px var(--pad);
}
@media (max-width: 860px) {
  /* Une seule rangée qui défile : deux rangées de pastilles couvraient la
     moitié de la carte sous l'en-tête. */
  .filters--sticky { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; top: 70px; }
  .filters--sticky::-webkit-scrollbar { display: none; }
  .filters--sticky .filter { flex: 0 0 auto; }
}

/* ---- Cartes : prix par personne, nom long, un seul bouton -------------- */
/* Le titre rétrécit (et passe à la ligne) avant que le prix ne déborde :
   « dès 74,75 € » touchait le bord de la carte sur les noms longs. */
.card__title { min-width: 0; flex: 1 1 0; overflow-wrap: break-word; }
.card__price { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.card__per { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.card__actions:empty { display: none; }

/* ---- Galeries : alignées sur la colonne de texte ------------------------ *
 * La règle `.gallery { padding: 0 var(--pad) … }` ajoutait une seconde marge
 * à l'intérieur d'un .container : la grille du domaine était décalée de
 * 48 px par rapport à son titre. */
.container .gallery { max-width: none; padding: 0; }
.gallery--team { max-width: 920px; margin: 20px auto 0; }
/* L'accueil ne montre plus que 10 des 28 photos, y compris sur grand écran :
   le lien vers la galerie complète doit donc s'afficher partout. */
.venue .gallery__more { display: block; margin-top: 18px; }

/* ---- Lien souligné sur fond sombre ------------------------------------- */
.link-underline--light { color: var(--bg); border-bottom-color: var(--accent-2); }

/* ---- Carte Google Maps à la demande ------------------------------------ */
.map-facade {
  position: relative; height: 320px; display: grid; place-items: center; text-align: center;
  background-color: #1d2b22;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 62% 40%, rgba(109, 193, 228, 0.22), transparent 42%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  color: var(--bg);
}
.map-facade--light {
  background-color: var(--bg-3); color: var(--ink);
  background-image:
    linear-gradient(rgba(34, 48, 40, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 48, 40, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 62% 40%, rgba(27, 118, 162, 0.14), transparent 42%);
}
.map-facade__inner { display: grid; justify-items: center; gap: 10px; padding: 18px; max-width: 360px; }
.map-facade__pin { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; }
.map-facade__pin svg { width: 22px; height: 22px; }
.map-facade__link { font-size: 13.5px; font-weight: 700; color: inherit; }
.map-facade__note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; opacity: 0.8; }
.map-facade.is-live { display: block; padding: 0; background: none; }
.map-facade.is-live iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---- Formulaires : mention d'information (remplace la case à cocher) --- */
.form-privacy { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }
.form-privacy a { color: var(--accent); font-weight: 600; }
.form-privacy--dark { color: var(--cream-dim); }
.form-privacy--dark a { color: var(--accent-2); }

/* ---- Page contact : numéros étiquetés, encart qui ne s'étire plus ------ */
.contact-card__num { display: block; margin-bottom: 10px; }
.contact-card__num small { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; font-weight: 400; color: var(--muted); text-transform: uppercase; }
.contact-grid > aside.contact-card { align-self: start; position: sticky; top: 100px; }
@media (max-width: 1024px) { .contact-grid > aside.contact-card { position: static; } }

/* ---- Réservation : bouton de chargement, note, place réservée ---------- */
.booking-facade { text-align: center; padding: clamp(28px, 5vw, 48px) 18px; display: grid; justify-items: center; gap: 12px; }
.booking-facade__note { max-width: 460px; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.booking-loading { margin: 0; padding: 40px 12px; text-align: center; color: var(--muted); font-family: var(--font-mono); font-size: 13px; }
/* Hauteur réservée pendant et après le chargement : l'iframe se redimensionne
   seule et poussait le pied de page (CLS 0,34 mesuré sur la page générale). */
.booking-embed--live.is-loading, .booking-embed--live.is-live { min-height: 700px; }
.booking-embed--general.is-loading, .booking-embed--general.is-live { min-height: 1000px; }
.booking-note { max-width: 720px; margin: 16px auto 0; font-size: 13px; line-height: 1.55; color: var(--muted); text-align: center; }

.two-ways { max-width: 980px; margin: 0 auto 34px; }
.two-ways__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.two-ways__card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.two-ways__card h3 { font-family: var(--font-head); font-size: 20px; margin: 0; }
.two-ways__card p { margin: 0 0 6px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.two-ways__n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 800; }
.two-ways__n--green { background: var(--green-dk); }

/* ---- Fiches : barème dégressif, photo d'abord sur mobile --------------- */
.info-degressive { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); display: grid; gap: 10px; }
.info-degressive__t { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.info-degressive .row { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.info-degressive .row span:first-child { color: var(--muted-2); }
.info-degressive .row span:last-child { font-weight: 700; text-align: right; }
@media (max-width: 1024px) {
  /* La photo passait sous une dizaine de lignes d'introduction, hors du
     premier écran : elle remonte au-dessus du texte. */
  .page-hero--split .page-hero__inner > .figure { order: -1; margin-bottom: 22px; }
}

/* ---- Pages légales et thématiques -------------------------------------- */
.legal h2.h2-sub { font-size: clamp(20px, 2.4vw, 26px); margin: 34px 0 12px; }
.legal__version { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; }
.legal__note { background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 8px; padding: 14px 18px; font-size: 15px; }
.legal__list { margin: 0 0 20px; padding-left: 22px; display: grid; gap: 8px; }
.legal__list li { font-size: 16px; line-height: 1.6; color: #3c473e; }
.prose--left { max-width: none; margin: 0; }
.prose--left h2.h2-sub { margin-top: 0; }
.prose--left p + h2.h2-sub { margin-top: 36px; }

/* ---- Animations en boucle en pause hors écran (main.js pose .is-idle) --- */
.is-idle { --anim: paused; }
.is-idle .hero__blob, .is-idle .hero__floater, .is-idle .hero__scroll span { animation-play-state: paused; }

/* ---- Vignettes dessinées : la règle générique « .ph span » (10 px, gris)
   l'emportait en spécificité — pastille de catégorie grise sur fond vert,
   illisible, et emoji réduit à 10 px au centre d'un aplat : l'effet
   « image cassée » relevé à la revue. */
.ph--art span.card__group { color: #fff; font-size: 10px; }
.ph--art span.ph__emoji { font-size: clamp(42px, 5vw, 58px); color: inherit; }
.ph--art span.ph__emoji--lg { font-size: clamp(64px, 8vw, 96px); }

/* Césure automatique retirée des titres : elle coupait « acti-vités » ou
   « Spa-Francor-champs » sans nécessité. Un mot trop long pour la ligne
   passe encore à la ligne grâce à overflow-wrap. */
@media (max-width: 520px) {
  .page-hero h1, .text-balance { hyphens: manual; overflow-wrap: break-word; }
}

/* Titre de section pour les lecteurs d'écran et la hiérarchie H1 → H2 → H3,
   sans changer le visuel. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
h2.kicker { margin-top: 0; font-weight: 400; line-height: 1.5; }

/* Respiration entre sections légèrement réduite : l'accueil faisait plus de
   10 000 px de haut sur grand écran, avec de larges bandes vides. */
.section { padding-top: clamp(56px, 7.5vw, 100px); padding-bottom: clamp(56px, 7.5vw, 100px); }
.section--sm { padding-top: clamp(44px, 6vw, 76px); padding-bottom: clamp(44px, 6vw, 76px); }

/* Crédit « Réalisé par … » du pied de page : au survol (ou au focus clavier),
   le nom se couvre d'un reflet arc-en-ciel qui glisse, avec un halo coloré.
   Demande du 2026-09-28. Sans animation si l'utilisateur la refuse. */
.site-footer__bottom a.site-footer__dev {
  background-image: linear-gradient(100deg, #ff4d6d, #ff9f1c, #ffe14d, #3ddc84, #2ec5ff, #7b61ff, #ff4d9d, #ff4d6d);
  background-size: 300% 100%;
  background-position: 0 50%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color .25s ease, filter .25s ease;
}
.site-footer__bottom a.site-footer__dev:hover,
.site-footer__bottom a.site-footer__dev:focus-visible {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-decoration-color: #ffe14d;
  filter: drop-shadow(0 0 3px rgba(255, 77, 109, .55)) drop-shadow(0 0 7px rgba(46, 197, 255, .45));
  animation: dev-rainbow 2.2s linear infinite;
}
@keyframes dev-rainbow { to { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .site-footer__bottom a.site-footer__dev:hover,
  .site-footer__bottom a.site-footer__dev:focus-visible { animation: none; background-position: 50% 50%; }
}