/* =========================================================================
   NESS VOYAGE — feuille de style unique (v2)

   DA « travel moderne » : nuit teal profonde, braise corail, ambre doré.
   La page est UNE SEULE descente cinématique — les sections ne se séparent
   jamais par un trait net, elles se fondent par de longs dégradés.

   Sommaire
   01 Polices
   02 Jetons
   03 Reset
   04 Mise en page et fondus de section
   05 Typographie
   06 Photos et traitement golden hour
   07 Boutons, liens, puces
   08 Curseur et barre de lecture
   09 En-tête et navigation
   10 Barre mobile + pill flottante
   11 Hero A (nuit, descente cinématique)
   12 Hero B (couchant, pagination 01–05)
   13 Teasers poétiques
   14 Cartes photo (modèle A) et cartes tour (modèle B)
   15 Carte interactive Afrique de l'Ouest
   16 Éventail 3D (modèle C)
   17 Verre, badges, légendes géo
   18 Timeline du circuit
   19 Formules et tableau comparatif
   20 Builder de devis
   21 Galerie et lightbox
   22 Compteurs, marquee, citations
   23 FAQ
   24 Formulaires
   25 Modale et parcours de réservation
   26 Newsletter
   27 Carnet (blog)
   28 Pied de page
   29 Pages légales, 404, fil d'Ariane
   30 Révélations, parallaxe, mouvement réduit
   ========================================================================= */

/* ---- 01 Polices ------------------------------------------------------- */

/* Archivo variable : axe de largeur 62→125 ET de graisse 400→900.
   C'est ce qui permet des titres réellement « gras et larges ». */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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: 'Archivo';
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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;
}
/* Playfair n'est plus chargé qu'en italique : il ne sert QUE aux noms de lieux. */
@font-face {
  font-family: 'Playfair';
  src: url('../fonts/playfair-italic-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  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: 'Playfair';
  src: url('../fonts/playfair-italic-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  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;
}

/* ---- 02 Jetons -------------------------------------------------------- */

:root {
  /* ---- Charte V3 : ivoire chaud -------------------------------------- */
  /* Le site est passé d'un fond nuit teal à un fond ivoire jauné. Les noms
     de variables ont suivi : --fond pour les surfaces, --encre pour les
     textes. Le corail et l'ambre sont inchangés — ce sont des accents, pas
     des valeurs de thème.
     Toutes les paires en usage sont vérifiées AA par tools/contraste.js. */

  /* Surfaces, de la plus claire à la plus marquée */
  --fond-0: #fbf5e9;   /* surélevé : cartes, panneaux */
  --fond:   #f6ecd9;   /* base de page */
  --fond-2: #f1e4cc;   /* sections alternées */
  --fond-3: #e9d9bc;   /* survols, filets appuyés */
  --fond-4: #dfcba8;   /* le plus dense */
  --sombre: #241a10;   /* blocs de rupture : pré-footer, bandeaux de chiffres */

  /* Textes */
  --encre:       #2a1f14;   /* 13,7:1 sur le fond */
  --encre-dim:   #5c4a35;   /* 7,2:1  — texte secondaire */
  --encre-faint: #6e5b44;   /* 5,5:1  — légendes, mentions */
  --sur-sombre:  #f6ecd9;   /* texte posé sur les blocs de rupture */

  /* Braise corail — l'accent principal.
     Deux tons, et c'est nécessaire : #e8734a ne donne que 2,57:1 sur l'ivoire,
     sous le seuil même pour un grand texte. Il reste donc réservé aux APLATS
     (boutons, pins, formes), tandis que tout texte corail passe par
     --braise-texte. Sur les blocs sombres, c'est --braise-clair qui prend le
     relais : aucun ton unique ne couvre l'ivoire et le brun profond. */
  --braise:        #e8734a;   /* aplats sur clair, texte sur sombre */
  --braise-texte:  #ac3e15;   /* 5,2:1 — liens, surtitres, pictos porteurs */
  --braise-sombre: #8c3110;   /* survol */
  --braise-clair:  #f4906c;   /* accent sur bloc de rupture */

  /* Ambre doré — jamais du texte courant sur clair (2,0:1) : réservé aux
     grands aplats, aux pictos et aux blocs sombres. */
  --ambre: #f2a65a;
  --ambre-clair: #f8c48c;

  /* États : un rouge distinct du corail, sinon une erreur de formulaire se
     confond avec l'accent de marque. 6,4:1 sur l'ivoire. */
  --erreur: #a32014;
  /* Contrepartie sombre de l'ambre, pour le texte : l'ambre lui-même ne donne
     que 2,0:1 sur l'ivoire. */
  --ocre: #7a5216;

  /* Bases RVB, pour les couleurs translucides */
  --rvb-fond: 246, 236, 217;
  --rvb-encre: 42, 31, 20;
  --rvb-ombre: 36, 26, 16;
  --rvb-braise: 232, 115, 74;
  --rvb-braise-clair: 244, 144, 108;
  --rvb-braise-texte: 172, 62, 21;
  --rvb-ambre: 242, 166, 90;

  /* Verre : sur fond clair, le verre est un voile d'encre — plus dense que la
     page, et non plus clair comme sur le thème sombre. */
  --verre:   rgba(var(--rvb-encre), 0.04);
  --verre-2: rgba(var(--rvb-encre), 0.07);
  --verre-3: rgba(var(--rvb-encre), 0.11);
  --trait:      rgba(var(--rvb-encre), 0.16);
  --trait-fort: rgba(var(--rvb-encre), 0.34);
  --lueur: rgba(var(--rvb-braise), 0.35);

  /* Typographie */
  --f-sans: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-serif: 'Playfair', 'Iowan Old Style', Georgia, serif;

  --t-xs: 0.75rem;
  --t-sm: 0.8125rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --t-h2: clamp(2.125rem, 1.5rem + 2.6vw, 4rem);
  --t-h1: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  /* Borne basse calée pour que le plus long mot du site tienne à 375 px. */
  --t-colossal: clamp(2.9rem, 0.6rem + 10.5vw, 18rem);

  /* Rythme */
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --large: 1480px;
  --lisible: 62ch;
  --section: clamp(4.5rem, 9vw, 10rem);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-2xl: 48px;
  --r-pill: 999px;

  --e-doux: cubic-bezier(0.22, 1, 0.36, 1);
  --e-net: cubic-bezier(0.65, 0, 0.35, 1);
  --e-ressort: cubic-bezier(0.34, 1.56, 0.64, 1);

  --entete-h: 78px;
  color-scheme: light;
}

/* ---- 03 Reset --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* Pas de scroll-behavior global : le défilement reste natif. */
  scroll-padding-top: calc(var(--entete-h) + 1.5rem);
}

body {
  background: var(--fond);
  color: var(--encre);
  font-family: var(--f-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Trame géométrique inspirée des tissus, en filigrane sur tout le fond. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(45deg, rgba(var(--rvb-ambre), 0.035) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, rgba(var(--rvb-braise), 0.03) 0 1px, transparent 1px 16px);
}
body > * { position: relative; z-index: 1; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; }
a { color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--braise); color: var(--encre); }

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--encre);
  color: var(--fond-2);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700;
}
.saut-contenu:focus { left: 0; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- 04 Mise en page et fondus de section ----------------------------- */

.enveloppe {
  width: min(100% - var(--gouttiere) * 2, var(--large));
  margin-inline: auto;
}
.enveloppe--etroite { --large: 1000px; }
.enveloppe--texte { --large: 760px; }

.section { padding-block: var(--section); position: relative; }
.section--serree { padding-block: calc(var(--section) * 0.6); }

/* Fondu long entre une photo pleine largeur et le fond nuit : c'est ce qui
   supprime toute démarcation entre les sections. */
.fondu {
  position: relative;
  isolation: isolate;
}
.fondu::before,
.fondu::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: clamp(90px, 14vh, 170px);
  /* Derrière le contenu, devant la photo. Le contenu est remonté juste en
     dessous : aucun dégradé ne peut plus passer par-dessus un texte. */
  z-index: 0;
  pointer-events: none;
}
.fondu > * { position: relative; z-index: 1; }
.fondu::before { top: 0; background: linear-gradient(180deg, var(--fond) 0%, rgba(var(--rvb-fond), 0.55) 45%, transparent 100%); }
.fondu::after { bottom: 0; background: linear-gradient(0deg, var(--fond) 0%, rgba(var(--rvb-fond), 0.55) 45%, transparent 100%); }
.fondu--haut::after { display: none; }
.fondu--bas::before { display: none; }

.section-tete {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 48rem;
}
.section-tete--centre { margin-inline: auto; text-align: center; justify-items: center; }

/* Colonnes décalées : titre à gauche, texte court plus bas à droite */
.decale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.decale > :last-child { padding-bottom: 0.4rem; }
@media (max-width: 860px) {
  .decale { grid-template-columns: 1fr; align-items: start; gap: 1.25rem; }
}

.grille { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.pile { display: grid; gap: 1rem; }
.pile--lg { gap: 1.75rem; }
.centre-texte { text-align: center; }

hr.regle {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--trait), transparent);
  margin-block: clamp(2.5rem, 6vw, 5rem);
}

/* ---- 05 Typographie --------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.02em; }
h4 { font-size: var(--t-h4); letter-spacing: -0.01em; line-height: 1.25; }
p { text-wrap: pretty; }

/* Un élément de grille ne descend jamais sous sa largeur min-content. Un mot
   long en typo colossale — « Tamberma », « Formules » — imposait donc sa
   largeur à toute l'enveloppe, qui dépassait le viewport et faisait couper le
   titre et les métas du hero. `min-width: 0` lève cette contrainte à la source. */
.heroA > .enveloppe,
.heroB > .enveloppe,
.heroA__grille > *,
.heroB__grille > * { min-width: 0; }

/* Et le mot lui-même ne peut plus imposer de largeur : il se réduit plutôt que
   de déborder.

   `overflow-wrap: anywhere` est volontairement ABSENT de .titre-xxl : dans la
   grille à deux colonnes de .decale, il coupait « PRINCIPES » en « PRINCIPE /
   S » au milieu du mot. La taille de ces titres est désormais bornée par la
   largeur de leur colonne (voir plus bas), ce qui rend toute coupure inutile. */
.colossal,
.mot-fond,
.heroA__titre,
.heroB__titre {
  overflow-wrap: anywhere;
}
.colossal,
.titre-xxl,
.mot-fond,
.heroA__titre,
.heroB__titre {
  max-width: 100%;
}

/* Le titre-monument : large ET très gras, c'est l'axe wdth qui le permet. */
.colossal,
.titre-xxl {
  font-weight: 900;
  font-variation-settings: 'wdth' 112;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.86;
}
.colossal { font-size: var(--t-colossal); line-height: 0.8; letter-spacing: -0.05em; }

/* Le titre-monument se dimensionne sur SA COLONNE, pas sur le viewport.
   Dans .decale, la colonne vaut 1fr d'une grille à deux colonnes : elle grandit
   deux fois moins vite que le viewport, si bien que 5.6vw finissait par
   dépasser la place disponible et le mot le plus long se coupait en deux.

   `min()` retient la plus petite des deux mesures : la formule d'origine reste
   la référence — donc rien ne change en mobile ni sur une colonne pleine —
   et le plafond en `cqw` n'intervient que là où la colonne est trop étroite.
   13cqw laisse tenir « Dites-nous », le mot le plus large du site à cette
   graisse (7,19 fois la taille de police), avec de la marge. */
.decale > * { container-type: inline-size; }
/* Deux déclarations : un navigateur sans unités de conteneur ignore la seconde
   et garde la première, au lieu de perdre toute taille de police. */
.titre-xxl { font-size: clamp(2.5rem, 1.2rem + 5.6vw, 7rem); }
.titre-xxl { font-size: min(clamp(2.5rem, 1.2rem + 5.6vw, 7rem), 13cqw); }

.serif {
  font-family: var(--f-serif);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  text-transform: none;
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--braise-texte);
}
.surtitre::before {
  content: '';
  width: 1.75rem; height: 1px;
  background: currentColor;
  flex: none;
}
.surtitre--centre::after {
  content: '';
  width: 1.75rem; height: 1px;
  background: currentColor;
  flex: none;
}
.surtitre--nu::before { display: none; }

.chapo {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--encre-dim);
  max-width: var(--lisible);
}

.prose { max-width: var(--lisible); }
.prose p + p { margin-top: 1.1em; }
.prose > * + h2 { margin-top: 2.4em; }
.prose > * + h3 { margin-top: 1.9em; }
.prose ul { display: grid; gap: 0.6rem; margin-top: 1.1em; }
.prose ul li { padding-left: 1.6rem; position: relative; color: var(--encre-dim); }
.prose ul li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--braise);
}
.prose a:not(.btn) {
  color: var(--braise-texte);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):hover{ color: var(--encre); }

.attenue { color: var(--encre-dim); }
.faible { color: var(--encre-faint); }
.braise { color: var(--braise-texte); }

/* Le mot souligné d'un trait corail qui se trace */
.souligne { position: relative; white-space: nowrap; }
.souligne::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -0.06em;
  height: 0.08em;
  background: var(--braise);
  border-radius: var(--r-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--e-doux) 0.2s;
}
[data-vu='1'] .souligne::after { transform: scaleX(1); }

/* ---- 06 Photos et traitement golden hour ------------------------------ */

/* Traitement homogène : chaleur, ombres profondes, léger grain.
   Il harmonise les photos du client et les photos libres de droit. */
.photo {
  position: relative;
  overflow: hidden;
  background: var(--fond-0) center / cover no-repeat;
  isolation: isolate;
}
.photo > img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.08) brightness(0.9) sepia(0.14) hue-rotate(-6deg);
}
.photo::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--rvb-ombre), 0.1) 0%, rgba(var(--rvb-ombre), 0.04) 45%, rgba(var(--rvb-ombre), 0.75) 100%);
}
.photo--voile::after {
  background: linear-gradient(180deg, rgba(var(--rvb-ombre), 0.5) 0%, rgba(var(--rvb-ombre), 0.08) 34%, rgba(var(--rvb-ombre), 0.9) 100%);
}
.photo--braise::after {
  background:
    linear-gradient(180deg, rgba(var(--rvb-ombre), 0.35) 0%, transparent 40%, rgba(var(--rvb-ombre), 0.88) 100%),
    linear-gradient(15deg, rgba(var(--rvb-braise), 0.18), transparent 55%);
}
.photo--plat::after { background: none; }

.photo--v { aspect-ratio: 1148 / 1844; }
.photo--4x5 { aspect-ratio: 4 / 5; }
.photo--3x4 { aspect-ratio: 3 / 4; }
.photo--carre { aspect-ratio: 1; }
.photo--paysage { aspect-ratio: 16 / 9; }
.photo--large { aspect-ratio: 21 / 9; }

.photo--zoom > img { transition: transform 1.3s var(--e-doux), filter 0.7s var(--e-doux); }
.photo--zoom:hover > img,
a:hover .photo--zoom > img,
button:hover .photo--zoom > img {
  transform: scale(1.07);
  filter: saturate(1.05) contrast(1.05) brightness(1) sepia(0.05);
}

.grain::before {
  content: '';
  position: absolute; inset: -50%;
  z-index: 2; pointer-events: none;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

figure { margin: 0; }
figcaption { margin-top: 0.7rem; font-size: var(--t-sm); color: var(--encre-faint); }

/* Crédit photo discret posé sur l'image */
.credit {
  position: absolute;
  right: 0.6rem; bottom: 0.5rem;
  z-index: 3;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: rgba(var(--rvb-encre), 0.55);
  background: rgba(var(--rvb-ombre), 0.45);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  text-decoration: none;
}
.credit:hover { color: var(--encre); }

/* ---- 07 Boutons, liens, puces ----------------------------------------- */

.btn {
  /* Encre sombre sur le corail : blanc sur braise ne donne que 3,01:1,
     bien sous le seuil AA. Le nuit profond monte à 6,27:1. */
  --btn-fond: var(--braise);
  --btn-texte: var(--encre);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.7rem;
  border-radius: var(--r-pill);
  background: var(--btn-fond);
  color: var(--btn-texte);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  /* Un libellé de bouton ne se replie jamais : il rétrécit. */
  white-space: nowrap;
  transition: color 0.35s var(--e-net), transform 0.35s var(--e-doux), box-shadow 0.4s var(--e-doux);
}
.btn::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--encre);
  transform: translateY(101%);
  transition: transform 0.45s var(--e-doux);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--fond-2); box-shadow: 0 10px 30px rgba(var(--rvb-braise), 0.22); }
.btn:active { transform: translateY(1px); }

.btn > span { white-space: nowrap; }
.btn .fleche { flex: none; width: 0.95em; height: 0.95em; transition: transform 0.4s var(--e-doux); }
.btn:hover .fleche { transform: translate(0.22em, -0.22em); }

.btn--fantome {
  --btn-fond: transparent;
  --btn-texte: var(--encre);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
}
.heroA .btn--fantome,
.heroB .btn--fantome,
.appel .btn--fantome,
.pied .btn--fantome {
  --btn-texte: var(--sur-sombre);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-fond), 0.55);
}
.btn--verre {
  --btn-fond: var(--fond-0);
  --btn-texte: var(--encre);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-ombre), 0.18),
              0 6px 20px -8px rgba(20, 12, 6, 0.45);
}
/* L'état survolé du bouton fait monter un aplat d'encre : le texte doit alors
   passer en clair, sinon on obtient brun sur brun. */
.btn--verre:hover,
.btn--verre:focus-visible { color: var(--fond-0); }
.btn--ambre { --btn-fond: var(--ambre); --btn-texte: var(--encre); }
.btn--whatsapp { --btn-fond: #1f7a4d; --btn-texte: #f2fbf6; }
.btn--whatsapp::before { background: #25d366; }
.btn--whatsapp:hover { color: #06301c; }

.btn--lg { padding: 1.2rem 2.1rem; font-size: var(--t-base); }
.btn--sm { padding: 0.7rem 1.2rem; font-size: var(--t-xs); }
.btn--bloc { width: 100%; justify-content: center; }

/* Bouton flèche circulaire (modèle B) */
.rond-braise {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--braise);
  color: var(--encre);
  cursor: pointer;
  transition: transform 0.4s var(--e-ressort), background 0.3s, box-shadow 0.4s;
}
.rond-braise:hover { transform: scale(1.09); box-shadow: 0 8px 26px rgba(var(--rvb-braise), 0.4); }
.rond-braise:disabled { opacity: 0.32; cursor: default; transform: none; box-shadow: none; }
.rond-braise svg { width: 1.2rem; height: 1.2rem; }

/* Flèche dans un carré outline (modèle A) */
.carre-fleche {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  flex: none;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  color: var(--encre);
  transition: background 0.4s var(--e-doux), color 0.3s, box-shadow 0.3s, transform 0.4s var(--e-doux);
}
.carre-fleche svg { width: 1.05rem; height: 1.05rem; transition: transform 0.4s var(--e-doux); }
a:hover .carre-fleche, button:hover .carre-fleche {
  background: var(--braise);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--braise);
}
a:hover .carre-fleche svg { transform: translateX(3px); }

.lien {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--braise), var(--braise));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size 0.4s var(--e-doux), color 0.3s;
}
.lien:hover { color: var(--braise-sombre); background-size: 0% 1px; background-position: 100% 100%; }

/* Lien « En savoir plus → » souligné corail (modèle B) */
.lien-b {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.55rem;
  position: relative;
}
.lien-b::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--braise);
  transform-origin: left;
  transform: scaleX(0.38);
  transition: transform 0.5s var(--e-doux);
}
.lien-b:hover::after { transform: scaleX(1); }
.lien-b svg { width: 1rem; height: 1rem; transition: transform 0.4s var(--e-doux); }
.lien-b:hover svg { transform: translateX(4px); }

.puce {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--verre);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-dim);
  backdrop-filter: blur(10px);
}
.puce--braise {
  background: rgba(var(--rvb-braise), 0.16);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-braise), 0.5);
  color: var(--braise-sombre);
}
.puce--ambre {
  /* L'ambre clair était un texte de thème sombre : 1,35:1 sur l'ivoire.
     Sur clair, l'accent ambre passe par un ocre profond. */
  background: rgba(var(--rvb-ambre), 0.18);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-ambre), 0.6);
  color: var(--ocre);
}

/* ---- 08 Barre de progression de lecture -------------------------------- */


.lecture {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 95;
  background: transparent;
  pointer-events: none;
}
.lecture__barre {
  height: 100%;
  /* Pleine largeur, comprimée par une transformation : animer `width` force
     une mise en page à chaque image, `transform` reste sur le compositeur. */
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--braise), var(--ambre));
}

/* ---- 09 En-tête ------------------------------------------------------- */

/* L'en-tête est une capsule de verre posée sur la page, jamais une barre
   collée au bord : c'est le même vocabulaire que la pill flottante du bas,
   et cela laisse la photo du héros respirer sous elle. */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding-top: clamp(0.55rem, 1.4vh, 1rem);
  pointer-events: none;
  transition: transform 0.45s var(--e-doux), padding-top 0.4s var(--e-net);
}
.entete > * { pointer-events: auto; }
.entete[data-cache='1'] { transform: translateY(calc(-100% - 1.5rem)); }

.entete__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  height: 66px;
  padding-inline: clamp(0.9rem, 1.8vw, 1.4rem);
  border-radius: var(--r-pill);
  transition: height 0.4s var(--e-net);
}

/* Le verre est porté par un pseudo-élément, jamais par .entete__inner :
   `backdrop-filter` sur un ancêtre en ferait le bloc conteneur du panneau
   mobile en position:fixed, qui se réduirait alors à la taille de la capsule
   au lieu de couvrir l'écran. */
.entete__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(var(--rvb-fond), 0.93);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 0 0 1px var(--trait),
    inset 0 1px 0 rgba(var(--rvb-encre), 0.09),
    0 18px 44px rgba(var(--rvb-ombre), 0.34);
  transition: background 0.4s var(--e-net), box-shadow 0.4s var(--e-net), backdrop-filter 0.4s;
}

/* Au défilement la capsule se resserre et s'opacifie : elle reste lisible
   par-dessus n'importe quelle photo. */
.entete[data-teinte='1'] { padding-top: clamp(0.4rem, 0.9vh, 0.7rem); }
.entete[data-teinte='1'] .entete__inner { height: 58px; }
.entete[data-teinte='1'] .entete__inner::before {
  background: rgba(var(--rvb-fond), 0.97);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px var(--trait-fort),
    inset 0 1px 0 rgba(var(--rvb-encre), 0.12),
    0 16px 40px rgba(var(--rvb-ombre), 0.46);
}

/* Une fine braise court sous la capsule : le rappel d'accent de la DA. */
.entete__inner::after {
  content: '';
  position: absolute;
  left: 12%; right: 12%; bottom: -1px;
  height: 1px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, transparent, rgba(var(--rvb-braise), 0.55), transparent);
  opacity: 0;
  transition: opacity 0.5s var(--e-doux);
}
.entete[data-teinte='1'] .entete__inner::after { opacity: 1; }

.marque { display: flex; align-items: center; text-decoration: none; flex: none; }
.marque svg { height: 27px; width: auto; transition: height 0.4s var(--e-net); }
.entete[data-teinte='1'] .marque svg { height: 24px; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.6vw, 0.4rem);
  margin-left: auto;
}

/* Les liens deviennent des pastilles : la surface cliquable est franche et
   l'état courant se lit sans dépendre d'un simple filet. */
.nav__lien {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--encre-dim);
  padding: 0.55rem clamp(0.6rem, 1vw, 0.85rem);
  border-radius: var(--r-pill);
  transition: color 0.3s, background 0.35s var(--e-doux);
  white-space: nowrap;
}
.nav__lien::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0.28rem;
  width: 4px; height: 4px;
  margin-left: -2px;
  border-radius: var(--r-pill);
  background: var(--braise);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s var(--e-doux), transform 0.4s var(--e-ressort);
}
.nav__lien:hover { color: var(--encre); background: rgba(var(--rvb-encre), 0.07); }
.nav__lien[aria-current='page'] { color: var(--encre); background: rgba(var(--rvb-encre), 0.09); }
.nav__lien[aria-current='page']::after { opacity: 1; transform: scale(1); }

.entete__actions { display: flex; align-items: center; gap: 0.65rem; flex: none; }

.langue {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-faint);
}
.langue a { text-decoration: none; padding: 0.25rem 0.15rem; transition: color 0.25s; }
.langue a:not(.btn):hover{ color: var(--encre); }
.langue [aria-current='true'] { color: var(--braise-texte); }
.langue__sep { opacity: 0.4; }

.burger {
  display: none;
  width: 46px; height: 46px;
  place-items: center;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--trait);
  cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 1.5px;
  background: var(--encre); border-radius: 2px;
  transition: transform 0.35s var(--e-doux), opacity 0.25s;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* En-tête et pied du panneau n'existent qu'en mobile. `display: contents` fait
   remonter les liens dans la barre de nav en desktop : un seul balisage sert
   aux deux dispositions, sans duplication.
   Le CTA du panneau ne s'affiche donc que là où celui de la capsule disparaît :
   à aucune largeur les deux ne coexistent. */
.nav__tete,
.nav__pied { display: none; }
.nav__liens { display: contents; }

@media (max-width: 1180px) {
  .burger { display: grid; }
  .entete__actions .btn--reserver { display: none; }
  /* Au-dessus du panneau plein écran, sinon le burger disparaît dessous et la
     croix avec lui. */
  .entete__actions {
    position: relative;
    z-index: 2;
  }
  /* Cible de tap franche, et la croix se détache du fond clair du panneau. */
  .burger {
    width: 46px; height: 46px;
    background: rgba(var(--rvb-fond), 0.72);
  }
  .burger[aria-expanded='true'] {
    background: var(--fond-0);
    box-shadow: inset 0 0 0 1px rgba(var(--rvb-ombre), 0.22);
  }
  .burger[aria-expanded='true'] .burger__ico--croix { color: var(--encre); }
  .nav__tete { display: flex; }
  .nav__pied { display: grid; }
  .nav__liens { display: flex; }

  /* Le panneau couvre la totalité du viewport — largeur ET hauteur. `100dvh`
     suit la barre d'URL mobile qui se rétracte ; `100vh` laissait sinon une
     bande de page visible en bas. La bande de 45 px restée à gauche venait de
     l'ancienne largeur `min(88vw, 27rem)`. */
  .nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    padding: 0;
    /* Fond plein, sans transparence : rien de la page ne transparaît. */
    background: var(--fond-2);
    background-image:
      radial-gradient(120% 70% at 80% 0%, rgba(var(--rvb-braise), 0.13), transparent 62%),
      linear-gradient(168deg, var(--fond-0), var(--fond-2) 58%);
    border-left: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.5s var(--e-doux), visibility 0s linear 0.5s;
    overscroll-behavior: contain;
  }
  .nav[data-ouvert='1'] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.5s var(--e-doux), visibility 0s;
  }

  /* En-tête propre du panneau : logo à gauche, FR/EN à droite, et la croix de
     la capsule vient se poser exactement dans l'espace laissé libre. */
  .nav__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Aligné sur la capsule : même hauteur, même gouttière. */
    height: calc(66px + clamp(0.55rem, 1.4vh, 1rem));
    padding: clamp(0.55rem, 1.4vh, 1rem) var(--gouttiere) 0;
    /* La croix occupe le coin droit : on réserve sa place. */
    padding-right: calc(var(--gouttiere) + 46px + 0.65rem);
  }
  .marque--nav svg { height: 27px; width: auto; }
  .langue--nav { font-size: 0.8125rem; }
  .langue--nav a { padding: 0.5rem 0.35rem; }

  .nav__liens {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 0 var(--gouttiere);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__lien {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--trait);
    color: var(--encre);
  }
  .nav__lien::after { display: none; }

  /* Bloc d'action épinglé : visible sans défiler, au-dessus de la barre
     système de l'iPhone grâce à `env(safe-area-inset-bottom)`. */
  .nav__pied {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.1rem var(--gouttiere);
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--trait);
    background: rgba(var(--rvb-fond), 0.72);
  }
  /* Assez de place pour les deux côte à côte : on les met côte à côte. */
  @media (min-height: 620px) and (min-width: 340px) {
    .nav__pied { grid-template-columns: 1.35fr 1fr; }
  }
  .nav__pied .btn {
    margin-top: 0;
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: 1rem;
  }
  .nav__cta {
    /* Corail plein : c'est l'action principale du panneau. */
    background: var(--braise);
    color: var(--encre);
    box-shadow: 0 10px 26px -12px rgba(var(--rvb-braise), 0.85);
  }

  /* Micro-animation d'apparition : les liens montent en cascade, le bloc
     d'action arrive en dernier — c'est sur lui que l'œil s'arrête. Le décalage
     est porté par --rang, posé au build sur chaque lien.
     Les états de départ ne s'appliquent qu'au panneau fermé : sans cela, une
     animation interrompue laisserait un lien à mi-course. */
  .nav:not([data-ouvert='1']) .nav__lien,
  .nav:not([data-ouvert='1']) .nav__pied {
    opacity: 0;
    transform: translateY(14px);
  }
  .nav[data-ouvert='1'] .nav__lien,
  .nav[data-ouvert='1'] .nav__pied {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.42s var(--e-doux) var(--retard-nav, 0s),
      transform 0.52s var(--e-doux) var(--retard-nav, 0s);
  }
  .nav[data-ouvert='1'] .nav__lien { --retard-nav: calc(0.13s + var(--rang, 0) * 0.045s); }
  .nav[data-ouvert='1'] .nav__pied { --retard-nav: 0.42s; }

  /* Menu ouvert : la capsule ne laisse plus dépasser ni logo ni « / » — seule
     la croix reste, exactement à la place qu'occupait le burger.
     Ces trois règles DOIVENT rester dans cette média-requête : glissées dans le
     bloc `prefers-reduced-motion`, elles ne s'appliquaient plus qu'à une
     minorité de visiteurs et le « / » de la bascule de langue réapparaissait
     par-dessus le panneau ouvert. */
  .entete[data-menu-ouvert='1'] .entete__inner::before,
  .entete[data-menu-ouvert='1'] .marque:not(.marque--nav),
  .entete[data-menu-ouvert='1'] .entete__actions > .langue {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Réduction du mouvement : le panneau s'affiche, il ne se met pas en scène. */
  .nav .nav__lien,
  .nav .nav__pied {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Croix et burger : deux tracés qui se relaient, jamais de forme partielle. */
.burger__ico {
  grid-area: 1 / 1;
  width: 22px; height: 22px;
  color: var(--encre);
  transition: opacity 0.22s var(--e-doux), transform 0.32s var(--e-doux);
}
.burger__ico--croix { opacity: 0; transform: rotate(-45deg) scale(0.7); }
.burger[aria-expanded='true'] .burger__ico--menu { opacity: 0; transform: rotate(45deg) scale(0.7); }
.burger[aria-expanded='true'] .burger__ico--croix { opacity: 1; transform: none; }
.burger[aria-expanded='true'] {
  background: rgba(var(--rvb-encre), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-encre), 0.28);
}

.voile-nav {
  position: fixed; inset: 0; z-index: 89;
  background: rgba(var(--rvb-ombre), 0.68);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.voile-nav[data-ouvert='1'] { opacity: 1; visibility: visible; }

/* ---- 10 Barre mobile + pill flottante --------------------------------- */

.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 88;
  display: none;
  gap: 0.5rem;
  padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(var(--rvb-ombre), 0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--trait);
  transform: translateY(110%);
  transition: transform 0.45s var(--e-doux);
}
.barre-mobile[data-visible='1'] { transform: translateY(0); }
.barre-mobile .btn { flex: 1; justify-content: center; padding-inline: 0.5rem; }
@media (max-width: 820px) {
  .barre-mobile { display: flex; }
  body { padding-bottom: 4.6rem; }
}

/* Pill de navigation flottante (modèle C) */
.pill {
  position: fixed;
  left: 50%; bottom: clamp(1rem, 3vh, 2rem);
  transform: translate(-50%, 150%);
  z-index: 87;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-fond), 0.72);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--trait), 0 20px 50px rgba(var(--rvb-ombre), 0.5);
  transition: transform 0.55s var(--e-doux);
  max-width: calc(100% - var(--gouttiere) * 2);
}
.pill[data-visible='1'] { transform: translate(-50%, 0); }
.pill__vignette {
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  overflow: hidden;
  flex: none;
}
.pill__vignette img { width: 100%; height: 100%; object-fit: cover; }
.pill__texte { min-width: 0; padding-right: 0.35rem; }
.pill__titre {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill__sous {
  display: block;
  font-size: 0.6875rem;
  color: var(--encre-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill__nav { display: flex; gap: 0.3rem; flex: none; }
.pill__btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--encre-dim);
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}
.pill__btn:hover { background: var(--verre-2); color: var(--encre); }
.pill__btn svg { width: 1.05rem; height: 1.05rem; }
.pill__btn[aria-pressed='true'] { color: var(--braise-texte); }
.pill__btn[data-inactif='1'] { opacity: 0.28; pointer-events: none; }
@media (max-width: 820px) { .pill { display: none; } }

/* ---- 11 Hero A (nuit, descente cinématique) --------------------------- */

.heroA {
  position: relative;
  min-height: min(100svh, 940px);
  display: grid;
  align-items: end;
  padding-top: calc(var(--entete-h) + 2rem);
  padding-bottom: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}
.heroA__scenes { position: absolute; inset: 0; z-index: -2; background: var(--fond-2); }
.heroA__scene {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--e-net);
}
.heroA__scene[data-actif='1'] { opacity: 1; }
.heroA__scene img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.92) contrast(1.1) brightness(0.66) sepia(0.16) hue-rotate(-8deg);
  transform: scale(1.05);
}
.heroA__scene[data-actif='1'] img { animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to { transform: scale(1.16) translate3d(-1.2%, -1.6%, 0); }
}

/* Le voile fusionne la photo avec le fond nuit, sans démarcation. */
.heroA__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--rvb-ombre), 0.78) 0%, rgba(var(--rvb-ombre), 0.22) 30%, rgba(var(--rvb-ombre), 0.5) 62%, rgba(var(--rvb-ombre), 0.6) 86%, var(--fond) 100%),
    linear-gradient(90deg, rgba(var(--rvb-ombre), 0.82) 0%, rgba(var(--rvb-ombre), 0.12) 55%, rgba(var(--rvb-ombre), 0.5) 100%);
}

.heroA__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem;
}
.heroA__texte { max-width: 56rem; }
.heroA__titre {
  font-size: clamp(2.35rem, 1rem + 5.5vw, 6.75rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 108;
  line-height: 0.94;
  letter-spacing: -0.038em;
  text-transform: uppercase;
  margin-block: 1.1rem 1.35rem;
}
.heroA__titre .serif {
  display: block;
  font-weight: 500;
  font-variation-settings: normal;
  letter-spacing: -0.02em;
  text-transform: none;
}
.heroA__chapo {
  font-size: var(--t-lead);
  color: rgba(var(--rvb-encre), 0.87);
  /* Calée pour que l'accroche tienne sur deux lignes en desktop : à 34rem
     elle en prenait trois. */
  max-width: 41rem;
  margin-bottom: 1.75rem;
}
.heroA__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.heroA__preuve {
  margin-top: 1.75rem;
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--t-sm);
  color: var(--encre-dim);
}
.heroA__preuve li { display: flex; align-items: center; gap: 0.45rem; }
.heroA__preuve svg { width: 1rem; height: 1rem; color: var(--braise-texte); flex: none; }

/* Colonne de vignettes circulaires flottantes */
.vignettes {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  align-items: flex-end;
  padding-right: 2.25rem;
}
.vignette {
  --taille: clamp(64px, min(8vw, 8.4svh), 118px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem;
  cursor: pointer;
  text-align: right;
  text-decoration: none;
  padding: 0;
  animation: flotte var(--duree, 7s) ease-in-out var(--retard, 0s) infinite alternate;
}
@keyframes flotte { from { transform: translateY(0); } to { transform: translateY(-11px); } }

.vignette__legende {
  opacity: 0;
  transform: translateX(0.6rem);
  transition: opacity 0.45s var(--e-doux), transform 0.45s var(--e-doux);
  pointer-events: none;
}
.vignette[data-actif='1'] .vignette__legende,
.vignette:hover .vignette__legende,
.vignette:focus-visible .vignette__legende { opacity: 1; transform: translateX(0); }

.vignette__nom {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.3rem);
  line-height: 1.15;
  color: var(--sur-sombre);
  /* Double ombre : une serrée pour détacher la lettre de n'importe quelle
     photo, une large pour asseoir le bloc. La photo derrière est imprévisible,
     la couleur du texte ne peut donc pas dépendre d'elle. */
  text-shadow: 0 1px 3px rgba(20, 12, 6, 0.95), 0 4px 18px rgba(20, 12, 6, 0.7);
}
.vignette__pays {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--rvb-fond), 0.92);
  text-shadow: 0 1px 3px rgba(20, 12, 6, 0.95);
  margin-top: 0.15rem;
}
.vignette__rond {
  position: relative;
  flex: none;
  width: var(--taille); height: var(--taille);
  border-radius: var(--r-pill);
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(var(--rvb-ombre), 0.5), inset 0 0 0 1px rgba(var(--rvb-encre), 0.2);
  transition: transform 0.55s var(--e-doux), box-shadow 0.55s var(--e-doux);
}
.vignette__rond img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.06) brightness(0.84) sepia(0.12);
  transition: filter 0.5s, transform 0.9s var(--e-doux);
}
.vignette:hover .vignette__rond, .vignette:focus-visible .vignette__rond { transform: scale(1.07); }
.vignette:hover .vignette__rond img { transform: scale(1.09); }
.vignette[data-actif='1'] .vignette__rond {
  box-shadow: 0 16px 40px rgba(var(--rvb-ombre), 0.55), inset 0 0 0 2px var(--braise);
}
.vignette[data-actif='1'] .vignette__rond img { filter: saturate(1.05) contrast(1.05) brightness(1); }

.heroA__points {
  position: absolute;
  right: calc(var(--gouttiere) * 0.35);
  top: 50%;
  transform: translateY(-50%);
  display: grid; gap: 0.7rem;
}
.heroA__point {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-encre), 0.3);
  cursor: pointer; padding: 0;
  transition: background 0.35s, transform 0.35s var(--e-doux);
}
.heroA__point[data-actif='1'] { background: var(--braise); transform: scale(1.7); }

@media (max-width: 1000px) {
  .heroA__grille { grid-template-columns: 1fr; }
  .vignettes {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding-right: 0;
    margin-top: 2.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .vignettes::-webkit-scrollbar { display: none; }
  /* Dès que la rangée passe sous la photo, plus rien ne doit lui faire de
     cadre : ni fond, ni ombre, ni contour. */
  .vignettes,
  .vignette,
  .vignette__rond,
  .vignette__legende {
    background: none;
    box-shadow: none;
    outline: none;
  }
  /* Et le voile devient franchement opaque avant d'atteindre la rangée : sans
     cela, la photo transparaît sous les bulles et fait le rectangle. */
  .heroA__voile {
    background:
      linear-gradient(180deg,
        rgba(var(--rvb-ombre), 0.72) 0%,
        rgba(var(--rvb-ombre), 0.2) 26%,
        rgba(var(--rvb-ombre), 0.42) 52%,
        var(--fond) 68%,
        var(--fond) 100%);
  }
  /* La rangée quitte la photo pour le fond ivoire : les noms suivent. */
  .vignette__nom {
    color: var(--encre);
    text-shadow: none;
  }
  .vignette__pays {
    color: var(--encre-dim);
    text-shadow: none;
  }
  /* Sur mobile la légende est toujours visible : il n'y a pas de survol. */
  .vignette__legende { opacity: 1; transform: none; }
  .vignette {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    scroll-snap-align: center;
    animation: none;
  }
  .vignette__legende { opacity: 1; transform: none; }
  .vignette__nom { font-size: 0.9rem; }
  .vignette__pays { font-size: 0.65rem; }
  .heroA__points { display: none; }
}
@media (min-width: 1001px) {
  .vignettes .vignette:nth-child(1) { margin-right: 3.5rem; }
  .vignettes .vignette:nth-child(2) { margin-right: 0.75rem; }
  .vignettes .vignette:nth-child(3) { margin-right: -1rem; }
  .vignettes .vignette:nth-child(4) { margin-right: -1rem; }
  .vignettes .vignette:nth-child(5) { margin-right: 0.75rem; }
  .vignettes .vignette:nth-child(6) { margin-right: 3.5rem; }
}

/* ---- 12 Hero B (couchant, pagination 01–05) --------------------------- */

.heroB {
  position: relative;
  min-height: min(100svh, 980px);
  display: grid;
  align-content: center;
  padding-top: calc(var(--entete-h) + 3rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.heroB__scenes { position: absolute; inset: 0; z-index: -2; background: var(--fond-2); }
.heroB__scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--e-net); }
.heroB__scene[data-actif='1'] { opacity: 1; }
.heroB__scene img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Ciel ardent : on pousse la chaleur et on écrase les ombres. */
  filter: saturate(1.15) contrast(1.14) brightness(0.72) sepia(0.2) hue-rotate(-12deg);
  transform: scale(1.04);
}
.heroB__scene[data-actif='1'] img { animation: kenburns 34s ease-in-out infinite alternate; }
.heroB__voile {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--rvb-ombre), 0.72) 0%, rgba(var(--rvb-ombre), 0.2) 30%, rgba(var(--rvb-ombre), 0.55) 70%, rgba(var(--rvb-ombre), 0.6) 88%, var(--fond) 100%),
    linear-gradient(75deg, rgba(var(--rvb-braise-texte), 0.28) 0%, transparent 48%);
}

.heroB__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: center;
}
.heroB__titre {
  font-size: clamp(2.75rem, 1rem + 7.4vw, 8.5rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 116;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-block: 1rem 1.5rem;
}
.heroB__chapo {
  font-size: var(--t-lead);
  color: rgba(var(--rvb-encre), 0.88);
  max-width: 33rem;
  margin-bottom: 1.75rem;
}

/* Pagination verticale 01–05 */
.pagination-v {
  display: grid;
  gap: 0.35rem;
  align-content: center;
  justify-items: end;
}
.pagination-v__item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem 0;
  cursor: pointer;
  color: var(--encre-faint);
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color 0.35s;
  background: none;
}
.pagination-v__item::after {
  content: '';
  width: 0; height: 2px;
  background: var(--braise);
  border-radius: 2px;
  transition: width 0.5s var(--e-doux);
}
.pagination-v__item:hover { color: var(--encre-dim); }
.pagination-v__item[aria-current='true'] { color: var(--encre); }
.pagination-v__item[aria-current='true']::after { width: clamp(28px, 4vw, 56px); }
@media (max-width: 900px) {
  .heroB__grille { grid-template-columns: 1fr; }
  .pagination-v {
    grid-auto-flow: column;
    justify-content: start;
    justify-items: start;
    gap: 1.1rem;
    margin-top: 1.5rem;
  }
  .pagination-v__item { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .pagination-v__item::after { height: 2px; }
}

/* ---- 13 Teasers poétiques (modèle B) ---------------------------------- */

.teasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-top: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--trait);
}
.teaser { display: grid; gap: 0.7rem; align-content: start; }
.teaser__tete { display: flex; align-items: flex-start; gap: 0.75rem; }
.teaser__ico { flex: none; color: var(--braise-texte); margin-top: 0.1rem; }
.teaser__ico svg { width: 1.5rem; height: 1.5rem; }
.teaser__texte {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--encre);
  max-width: 26ch;
}

/* ---- 14 Cartes photo et cartes tour ----------------------------------- */

/* Modèle A : carte photo sombre, titre uppercase + carré-flèche */
.carte-photo {
  position: relative;
  display: block;
  text-decoration: none;
  isolation: isolate;
}
.carte-photo__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.carte-photo__pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.1rem;
}
.carte-photo__nom {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 800;
  font-variation-settings: 'wdth' 105;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.carte-photo__lieu {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-sm);
  color: var(--encre-faint);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0.2rem;
  font-weight: 500;
}

/* Modèle B : carte tour verticale, photo dans un cadre fin décalé */
.carte-tour {
  position: relative;
  display: block;
  text-decoration: none;
  padding: 0.5rem 0.5rem 0 0;
}
.carte-tour::before {
  content: '';
  position: absolute;
  inset: 0 0 2.5rem 0.75rem;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-md);
  transition: border-color 0.4s, transform 0.5s var(--e-doux);
}
.carte-tour:hover::before { border-color: var(--braise-texte); transform: translate(-4px, 4px); }
.carte-tour__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  transform: translate(-0.5rem, 0);
  transition: transform 0.5s var(--e-doux);
}
.carte-tour:hover .carte-tour__media { transform: translate(0, 0); }
.carte-tour__corps {
  position: relative;
  padding: 1.1rem 0 0 0;
}
.carte-tour__num {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-faint);
}
.carte-tour__nom {
  display: block;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 106;
  text-transform: uppercase;
  line-height: 1.1;
  margin-top: 0.3rem;
}
.carte-tour__sous {
  display: block;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 106;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--braise-texte);
}

/* Vignette vidéo avec bouton play (poster = photo réelle) */
.video-vignette {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 16 / 10;
}
.video-vignette__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
}
.play-rond {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-encre), 0.92);
  color: var(--fond-2);
  box-shadow: 0 10px 30px rgba(var(--rvb-ombre), 0.4);
  transition: transform 0.4s var(--e-ressort), background 0.3s;
}
.video-vignette:hover .play-rond { transform: scale(1.12); background: var(--braise); color: var(--encre); }
.play-rond svg { width: 1.2rem; height: 1.2rem; margin-left: 2px; }

/* ---- 15 Carte interactive Afrique de l'Ouest -------------------------- */

.carte-ao {
  position: relative;
  width: 100%;
}

/* Sur grand écran la carte déborde de la colonne de texte : elle cesse d'être
   un encart posé dans la grille pour devenir un paysage traversant la page.
   La largeur reste bornée au viewport, jamais de défilement latéral. */
@media (min-width: 1100px) {
  .carte-ao {
    width: min(118%, calc(100vw - 3rem));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
.carte-ao__svg { width: 100%; height: auto; display: block; overflow: visible; }

/* La lueur ambrée posée derrière le Bénin et le Togo : c'est elle qui les
   décolle du fond. Aucun cadre, aucun aplat de section. */
.carte-ao__lueur {
  fill: var(--braise);
  opacity: 0.3;
  filter: blur(22px);
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: respire-lueur 9s var(--e-doux) infinite;
}
@keyframes respire-lueur {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.38; }
}

.carte-ao__pays {
  stroke-width: 0.9;
  transition: fill 0.5s var(--e-doux);
  /* Le contour se dessine à l'entrée dans le viewport. `pathLength="1"` posé
     dans le SVG rend la longueur indépendante de la géométrie réelle. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-vu='1'] .carte-ao__pays {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.2s var(--e-doux), fill 0.8s var(--e-doux);
  transition-delay: calc(var(--ordre, 0) * 0.09s);
}

/* Les deux pays du voyage : matière pleine, en dégradé de terre. */
.carte-ao__pays--actif {
  fill: url(#ao-terre);
  stroke: rgba(var(--rvb-encre), 0.34);
  fill-opacity: 0;
}
[data-vu='1'] .carte-ao__pays--actif {
  fill-opacity: 1;
  transition: stroke-dashoffset 2.2s var(--e-doux), fill-opacity 1.1s var(--e-doux) 0.7s;
}

/* Les voisins ne sont plus des aplats : de simples traits, qui situent sans
   fabriquer un bloc rectangulaire. */
.carte-ao__pays--voisin {
  fill: none;
  stroke: rgba(var(--rvb-encre), 0.14);
  stroke-width: 0.8;
  stroke-dasharray: 1;
}
[data-vu='1'] .carte-ao__pays--voisin { stroke-dashoffset: 0; }

/* Sans script, rien ne se dessine : on montre la carte telle quelle. */
html:not([data-js]) .carte-ao__pays { stroke-dashoffset: 0; }
html:not([data-js]) .carte-ao__pays--actif { fill-opacity: 1; }

.carte-ao__etiquette {
  fill: var(--encre-faint);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Sable plein et non atténué : sur --fond-4 le ton atténué tombait à 4,40:1. */
.carte-ao__etiquette--actif { fill: var(--encre); }

.carte-ao__pin { cursor: pointer; }
.carte-ao__halo {
  fill: var(--braise-texte);
  opacity: 0.32;
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-pin 3s var(--e-doux) infinite;
  animation-delay: var(--retard-pin, 0s);
}
@keyframes pulse-pin {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(2.5); opacity: 0; }
}
.carte-ao__point {
  /* Corail de texte et non corail d'aplat : sur la terre sable, #e8734a
     tombe à 1,72:1, sous le seuil de 3 exigé pour un composant d'interface. */
  fill: var(--braise-texte);
  stroke: var(--fond-0);
  stroke-width: 1.2;
  transition: transform 0.4s var(--e-ressort), fill 0.3s;
  transform-box: fill-box;
  transform-origin: center;
}
.carte-ao__pin:hover .carte-ao__point,
.carte-ao__pin[data-actif='1'] .carte-ao__point { transform: scale(1.5); fill: var(--braise-sombre); }
/* Filet reliant un pin à son étiquette déportée (littoral encombré) */
.carte-ao__fil {
  stroke: var(--encre-dim);
  stroke-width: 0.9;
  opacity: 0.75;
  fill: none;
}
.carte-ao__nom {
  fill: var(--encre);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  dominant-baseline: middle;
  pointer-events: none;
}
/* La pastille remplace le halo au contour : à petite taille, un contour épais
   remplit l'intérieur des lettres au lieu de les détacher — c'est ce qui
   rendait les noms flous en mobile. */
.carte-ao__pastille {
  fill: var(--fond-0);
  stroke: rgba(var(--rvb-ombre), 0.16);
  stroke-width: 1;
  pointer-events: none;
}

/* Mini-carte photo au survol d'un pin */
.carte-ao__bulle {
  position: absolute;
  z-index: 5;
  width: 190px;
  padding: 0.5rem;
  border-radius: var(--r-md);
  background: rgba(var(--rvb-fond), 0.82);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--trait-fort), 0 20px 45px rgba(var(--rvb-ombre), 0.55);
  opacity: 0;
  transform: translate(-50%, -6px) scale(0.94);
  transform-origin: bottom center;
  transition: opacity 0.3s var(--e-doux), transform 0.35s var(--e-doux);
  pointer-events: none;
  text-decoration: none;
}
.carte-ao__bulle[data-visible='1'] { opacity: 1; transform: translate(-50%, -12px) scale(1); }
.carte-ao__bulle img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-sm);
  filter: saturate(1) contrast(1.05) brightness(0.95) sepia(0.08);
}
.carte-ao__bulle-nom {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  margin-top: 0.5rem;
  padding-inline: 0.2rem;
}
.carte-ao__bulle-pays {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--encre-faint);
  padding-inline: 0.2rem;
  padding-bottom: 0.2rem;
}

/* Liste de secours : la carte reste utilisable au clavier et sans SVG */
.carte-ao__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2rem;
}

@media (max-width: 720px) {
  .carte-ao__nom { font-size: 15px; }
  .carte-ao__etiquette { display: none; }
}

/* ---- 16 Éventail 3D (modèle C) ---------------------------------------- */

.eventail {
  position: relative;
  perspective: 1600px;
  perspective-origin: 50% 45%;
  height: clamp(400px, 52vh, 560px);
  touch-action: pan-y;
  user-select: none;
}
.eventail__piste {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
}
.eventail__carte {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(230px, 27vw, 320px);
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  padding: 0;
  /* La position 3D est posée en variables par le script. */
  transform:
    translate(-50%, -50%)
    translateX(var(--dx, 0px))
    translateZ(var(--dz, 0px))
    rotateY(var(--ry, 0deg))
    scale(var(--sc, 1));
  opacity: var(--op, 1);
  z-index: var(--z, 1);
  transition: transform 0.7s var(--e-doux), opacity 0.6s var(--e-doux), box-shadow 0.6s;
  background: rgba(var(--rvb-encre), 0.07);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--trait), 0 30px 60px rgba(var(--rvb-ombre), 0.5);
  will-change: transform;
}
.eventail__carte[data-centre='1'] {
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-encre), 0.35), 0 40px 90px rgba(var(--rvb-ombre), 0.6);
}
.eventail__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.eventail__media img { width: 100%; height: 100%; object-fit: cover; }
.eventail__corps {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.1rem 1.15rem 1.2rem;
  background: linear-gradient(180deg, transparent, rgba(var(--rvb-ombre), 0.92) 42%);
}
.eventail__nom {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.eventail__desc {
  display: block;
  font-size: var(--t-sm);
  color: var(--encre-dim);
  margin-top: 0.35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eventail__geo {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--encre-faint);
  margin-top: 0.5rem;
}
.eventail__geo svg { width: 0.85rem; height: 0.85rem; flex: none; }

.badge-expand {
  position: absolute;
  top: 0.75rem; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-ombre), 0.6);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--encre-dim);
  opacity: 0;
  transition: opacity 0.35s;
}
.eventail__carte[data-centre='1'] .badge-expand { opacity: 1; }
.badge-expand svg { width: 0.75rem; height: 0.75rem; }

.eventail__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.eventail__compte {
  font-size: var(--t-sm);
  color: var(--encre-faint);
  font-variant-numeric: tabular-nums;
  min-width: 4.5rem;
  text-align: center;
}

/* ---- 17 Verre, badges, légendes géo ----------------------------------- */

.verre {
  background: rgba(var(--rvb-encre), 0.06);
  backdrop-filter: blur(22px) saturate(1.25);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--trait), 0 30px 70px rgba(var(--rvb-ombre), 0.4);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
}
.verre--fort {
  background: rgba(var(--rvb-fond), 0.62);
  box-shadow: inset 0 0 0 1px var(--trait-fort), 0 30px 70px rgba(var(--rvb-ombre), 0.5);
}

.carte {
  position: relative;
  background: var(--fond-0);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--trait);
  padding: clamp(1.35rem, 2.6vw, 2rem);
  overflow: hidden;
  /* La carte devient sa propre référence de taille : voir le titre ci-dessous. */
  container-type: inline-size;
  transition: transform 0.5s var(--e-doux), box-shadow 0.5s var(--e-doux), background 0.5s;
}

/* La carte est en `overflow: hidden` : un titre trop large n'y déborde pas, il
   y est rogné — « Accompagnement 24/7 » perdait la fin de son premier mot entre
   940 et 1050 px, là où la grille à trois colonnes est au plus serré.
   Comme pour .titre-xxl, on borne la taille par la largeur de la carte plutôt
   que par celle du viewport ; `min()` garde la valeur d'origine partout où la
   place suffit. */
.carte h3 { font-size: var(--t-h3); }
.carte h3 { font-size: min(var(--t-h3), 11cqw); }
.carte--survol:hover {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 1px var(--trait-fort), 0 24px 50px rgba(var(--rvb-ombre), 0.4);
}
.carte--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--trait); }

.carte__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--braise-texte);
  margin-bottom: 0.85rem;
}
.carte__ico {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: rgba(var(--rvb-braise), 0.14);
  color: var(--braise-texte);
  margin-bottom: 1.1rem;
}
.carte__ico svg { width: 1.35rem; height: 1.35rem; }

.geo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: var(--t-xs);
  color: var(--encre-faint);
}
.geo svg { width: 0.85rem; height: 0.85rem; flex: none; }

/* ---- 18 Timeline du circuit ------------------------------------------- */

.bande-etapes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.4rem, 1vw, 0.85rem);
}
.bande-etapes__item {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 3 / 5;
  transition: transform 0.5s var(--e-doux);
}
.bande-etapes__item:hover { transform: translateY(-8px); }
.bande-etapes__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(1.1) brightness(0.7) sepia(0.16);
  transition: filter 0.5s, transform 0.9s var(--e-doux);
}
.bande-etapes__item:hover img { filter: saturate(1.05) contrast(1.05) brightness(0.94) sepia(0.04); transform: scale(1.06); }
.bande-etapes__lab {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem 0.75rem 0.85rem;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(20, 12, 6, 0.45) 45%,
    rgba(20, 12, 6, 0.88) 100%);
}
.bande-etapes__j {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--braise-clair);
  text-shadow: 0 1px 3px rgba(20, 12, 6, 0.9);
}
.bande-etapes__n {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  color: var(--sur-sombre);
  text-shadow: 0 1px 4px rgba(20, 12, 6, 0.95);
  line-height: 1.2;
  margin-top: 0.2rem;
}
@media (max-width: 720px) {
  .bande-etapes {
    grid-template-columns: repeat(5, 42vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }
  .bande-etapes::-webkit-scrollbar { display: none; }
  .bande-etapes__item { scroll-snap-align: center; }
}

.timeline {
  position: relative;
  display: grid;
  gap: clamp(3rem, 8vw, 7rem);
  padding-left: 2.75rem;
}
.timeline::before, .timeline__trace {
  content: '';
  position: absolute;
  left: 7px; top: 0.6rem; bottom: 0.6rem;
  width: 2px;
  border-radius: 2px;
}
.timeline::before { background: var(--trait); }
.timeline__trace {
  background: linear-gradient(180deg, var(--braise), var(--ambre));
  transform-origin: top;
  transform: scaleY(var(--avance, 0));
  transition: transform 0.15s linear;
}

.etape { position: relative; }
.etape__point {
  position: absolute;
  left: -2.75rem; top: 0.4rem;
  width: 16px; height: 16px;
  border-radius: var(--r-pill);
  background: var(--fond);
  box-shadow: inset 0 0 0 2px var(--trait-fort);
  transition: box-shadow 0.5s var(--e-doux), background 0.5s;
}
.etape[data-vu='1'] .etape__point {
  background: var(--braise);
  box-shadow: inset 0 0 0 2px var(--braise), 0 0 0 6px rgba(var(--rvb-braise), 0.18);
  animation: pulse-point 2.6s var(--e-doux) infinite;
}
@keyframes pulse-point {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--braise), 0 0 0 5px rgba(var(--rvb-braise), 0.18); }
  50% { box-shadow: inset 0 0 0 2px var(--braise), 0 0 0 11px rgba(var(--rvb-braise), 0.04); }
}

.etape__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.etape:nth-child(even) .etape__grille > .etape__media { order: -1; }
.etape__jours {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--braise-texte);
  margin-bottom: 0.7rem;
}
.etape__titre { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); margin-bottom: 0.9rem; }
.etape__lieux { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.35rem; }
.etape__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateX(2.5rem);
  transition: opacity 0.8s var(--e-doux), transform 0.9s var(--e-doux);
}
.etape:nth-child(even) .etape__media { transform: translateX(-2.5rem); }
.etape[data-vu='1'] .etape__media { opacity: 1; transform: translateX(0); }

@media (max-width: 800px) {
  .timeline { padding-left: 2.1rem; }
  .etape__point { left: -2.1rem; }
  .etape__grille { grid-template-columns: 1fr; }
  .etape:nth-child(even) .etape__grille > .etape__media { order: 0; }
  .etape__media, .etape:nth-child(even) .etape__media { transform: translateY(2rem); }
  .etape[data-vu='1'] .etape__media { transform: translateY(0); }
}

.jauge-jours {
  position: sticky;
  top: calc(var(--entete-h) + 1rem);
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-fond), 0.82);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: var(--t-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-faint);
  margin-bottom: 2rem;
}
.jauge-jours b {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--braise-texte);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---- 19 Formules et tableau comparatif -------------------------------- */

.formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: start;
}
.formule {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-xl);
  background: rgba(var(--rvb-encre), 0.05);
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--trait);
  transition: transform 0.5s var(--e-doux), box-shadow 0.5s var(--e-doux);
}
.formule:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px var(--trait-fort), 0 26px 60px rgba(var(--rvb-ombre), 0.4); }
.formule--vedette {
  background: linear-gradient(170deg, rgba(var(--rvb-braise), 0.16), rgba(var(--rvb-encre), 0.05) 62%);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-braise), 0.5), 0 0 60px rgba(var(--rvb-braise), 0.13);
}
@media (min-width: 900px) {
  .formule--vedette { transform: translateY(-1.5rem); }
  .formule--vedette:hover { transform: translateY(-2.1rem); }
}
.formule__ruban { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.formule__nom {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
}
.formule__duree {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--braise-texte);
  margin-top: 0.4rem;
}
.formule__prix { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.formule__prefixe { font-size: var(--t-sm); color: var(--encre-faint); }
.formule__montant {
  font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.formule__unite { font-size: var(--t-sm); color: var(--encre-faint); }
.formule--vedette .formule__montant { color: var(--braise-texte); }
.formule__liste { display: grid; gap: 0.7rem; font-size: var(--t-sm); color: var(--encre-dim); flex: 1; }
.formule__liste li { display: flex; gap: 0.65rem; align-items: flex-start; }
.formule__liste svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.28em; color: var(--braise-texte); }
.formule__devis { text-align: center; font-size: var(--t-sm); }

/* --- Tableau comparatif : desktop en colonnes de verre --- */

.comparo { display: grid; gap: 0.75rem; }

.comparo__tete {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  position: sticky;
  top: calc(var(--entete-h) - 2px);
  z-index: 4;
  padding-block: 0.75rem;
  background: linear-gradient(180deg, var(--fond) 72%, transparent);
}
.comparo__col {
  border-radius: var(--r-md);
  padding: 0.9rem 1rem;
  text-align: center;
  background: rgba(var(--rvb-encre), 0.05);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--trait);
  transition: transform 0.4s var(--e-doux), box-shadow 0.4s;
}
.comparo__col--vedette {
  background: linear-gradient(165deg, rgba(var(--rvb-braise), 0.2), rgba(var(--rvb-encre), 0.05));
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-braise), 0.55), 0 0 40px rgba(var(--rvb-braise), 0.14);
}
.comparo__col-nom {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.15;
  display: block;
}
.comparo__col-prix {
  display: block;
  font-size: var(--t-sm);
  color: var(--encre-faint);
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.comparo__col-badge { margin-bottom: 0.5rem; }

/* Une colonne survolée s'élève : le survol est capté sur les cellules. */
.comparo__groupe[data-colonne='0'] .comparo__cell:nth-child(2),
.comparo__groupe[data-colonne='1'] .comparo__cell:nth-child(3),
.comparo__groupe[data-colonne='2'] .comparo__cell:nth-child(4) { background: var(--verre-2); }

.comparo__famille {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--trait);
  background: rgba(var(--rvb-encre), 0.025);
}
.comparo__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem clamp(1rem, 2vw, 1.4rem);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s;
}
.comparo__bouton:hover { background: var(--verre); }
.comparo__bouton-ico { color: var(--braise-texte); flex: none; display: grid; place-items: center; }
.comparo__bouton-ico svg { width: 1.25rem; height: 1.25rem; }
.comparo__bouton-nom { font-size: var(--t-h4); font-weight: 700; letter-spacing: -0.01em; flex: 1; }
.comparo__chevron {
  flex: none; color: var(--encre-faint);
  transition: transform 0.45s var(--e-doux);
}
.comparo__chevron svg { width: 1.1rem; height: 1.1rem; }
.comparo__bouton[aria-expanded='true'] .comparo__chevron { transform: rotate(180deg); }

.comparo__contenu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--e-doux);
}
.comparo__contenu[data-ouvert='1'] { grid-template-rows: 1fr; }
.comparo__contenu > div { overflow: hidden; }

.comparo__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.85rem clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--trait);
  align-items: center;
}
.comparo__critere { font-size: var(--t-sm); color: var(--encre-dim); }
.comparo__cell {
  text-align: center;
  font-size: var(--t-sm);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.2rem;
  transition: background 0.3s;
}
.comparo__cell--vedette { background: rgba(var(--rvb-braise), 0.08); color: var(--encre); }

/* Coche qui se dessine à l'entrée dans le viewport */
.coche { width: 1.15rem; height: 1.15rem; display: inline-block; color: var(--braise-texte); }
.coche path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.55s var(--e-doux);
  transition-delay: var(--retard-coche, 0s);
}
[data-vu='1'] .coche path { stroke-dashoffset: 0; }
.croix-abs { color: var(--encre-faint); opacity: 0.55; font-size: 1rem; }

/* Sélecteur segmenté (mobile) */
.segments {
  display: none;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--verre);
  box-shadow: inset 0 0 0 1px var(--trait);
  position: relative;
  margin-bottom: 1.25rem;
}
.segment {
  flex: 1;
  position: relative;
  z-index: 1;
  padding: 0.6rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--encre-dim);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.35s;
}
.segment[aria-pressed='true'] { color: var(--encre); }
.segments__curseur {
  position: absolute;
  z-index: 0;
  top: 0.3rem; bottom: 0.3rem;
  border-radius: var(--r-pill);
  background: var(--braise);
  transition: transform 0.5s var(--e-doux), width 0.5s var(--e-doux);
}

@media (max-width: 860px) {
  /* Jamais de scroll horizontal : on bascule en cartes empilées. */
  .segments { display: flex; }
  .comparo__tete { display: none; }
  .comparo__ligne { grid-template-columns: minmax(0, 1fr) auto; }
  .comparo__cell { display: none; text-align: right; }
  .comparo__cell[data-actif='1'] { display: block; }
}

/* ---- 20 Builder de devis ---------------------------------------------- */

.builder { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.builder__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}

.etape-carte {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  background: rgba(var(--rvb-encre), 0.055);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px var(--trait);
  transition: transform 0.45s var(--e-doux), box-shadow 0.45s var(--e-doux), opacity 0.45s;
}
.etape-carte__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.etape-carte__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.06) brightness(0.85) sepia(0.1);
  transition: filter 0.5s, transform 0.7s var(--e-doux);
}
.etape-carte__corps { padding: 0.95rem 1.1rem 1.15rem; }
.etape-carte__jours {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--braise-texte);
}
.etape-carte__nom { display: block; font-size: 1.05rem; font-weight: 700; line-height: 1.2; margin-top: 0.2rem; }
.etape-carte__desc {
  display: block;
  font-size: var(--t-xs);
  color: var(--encre-faint);
  margin-top: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.etape-carte__bascule {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  z-index: 3;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-ombre), 0.62);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  color: var(--encre);
  transition: background 0.35s, color 0.35s, transform 0.45s var(--e-ressort), box-shadow 0.35s;
}
.etape-carte__bascule svg { width: 1rem; height: 1rem; transition: transform 0.4s var(--e-doux); }

.etape-carte[aria-pressed='true'] {
  box-shadow: inset 0 0 0 2px var(--braise), 0 16px 40px rgba(var(--rvb-braise), 0.16);
}
.etape-carte[aria-pressed='true'] .etape-carte__bascule {
  background: var(--braise);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--braise);
}
/* Carte retirée : grisée, et la bascule pivote — l'animation dit le retrait. */
.etape-carte[aria-pressed='false'] { opacity: 0.44; }
.etape-carte[aria-pressed='false'] .etape-carte__media img { filter: grayscale(0.85) brightness(0.6); }
.etape-carte[aria-pressed='false'] .etape-carte__bascule svg { transform: rotate(45deg); }
.etape-carte:hover { transform: translateY(-4px); }
.etape-carte[aria-pressed='false']:hover { opacity: 0.72; }

.etape-carte__fixe {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  z-index: 3;
}

/* Options cochables */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.7rem; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.option__corps {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.05rem;
  border-radius: var(--r-md);
  background: rgba(var(--rvb-encre), 0.045);
  box-shadow: inset 0 0 0 1px var(--trait);
  transition: box-shadow 0.3s, background 0.3s;
}
.option input:hover + .option__corps { box-shadow: inset 0 0 0 1px var(--trait-fort); }
.option input:checked + .option__corps {
  background: rgba(var(--rvb-braise), 0.12);
  box-shadow: inset 0 0 0 2px var(--braise);
}
.option input:focus-visible + .option__corps { outline: 2px solid var(--ambre); outline-offset: 2px; }
.option__case {
  flex: none;
  width: 1.3rem; height: 1.3rem;
  margin-top: 0.1rem;
  border-radius: 6px;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  color: transparent;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.option input:checked + .option__corps .option__case {
  background: var(--braise);
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--braise);
}
.option__case svg { width: 0.8rem; height: 0.8rem; }
.option__nom { display: block; font-size: var(--t-sm); font-weight: 700; }
.option__desc { display: block; font-size: var(--t-xs); color: var(--encre-faint); margin-top: 0.15rem; }

/* Barre récapitulative collante */
.recap-sticky {
  position: sticky;
  bottom: clamp(0.75rem, 2vh, 1.5rem);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  padding: 0.9rem clamp(1rem, 2.4vw, 1.6rem);
  border-radius: var(--r-xl);
  background: rgba(var(--rvb-fond), 0.86);
  backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--trait-fort), 0 24px 60px rgba(var(--rvb-ombre), 0.55);
  margin-top: 1rem;
}
.recap-sticky__chiffres { display: flex; gap: clamp(1rem, 3vw, 2.25rem); flex: 1; min-width: 0; }
.recap-sticky__bloc { display: grid; }
.recap-sticky__val {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--braise-texte);
  font-variant-numeric: tabular-nums;
}
.recap-sticky__lib {
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-faint);
  margin-top: 0.25rem;
}
@media (max-width: 640px) {
  .recap-sticky { flex-direction: column; align-items: stretch; }
  .recap-sticky .btn { width: 100%; justify-content: center; }
}

/* ---- 21 Galerie et lightbox ------------------------------------------- */

.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.filtre {
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--encre-dim);
  cursor: pointer;
  transition: color 0.3s, background 0.35s, box-shadow 0.3s;
}
.filtre:hover { color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.filtre[aria-pressed='true'] { background: var(--braise); color: var(--encre); box-shadow: inset 0 0 0 1px var(--braise-texte); }

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(0.6rem, 1.4vw, 1.1rem);
}
.galerie__item {
  position: relative;
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  width: 100%;
  transition: opacity 0.4s var(--e-doux), transform 0.5s var(--e-doux);
}
.galerie__item[data-masque='1'] { display: none; }
.galerie__item .photo { aspect-ratio: 3 / 4; }
.galerie__item figcaption {
  position: absolute; inset: auto 0 0 0;
  margin: 0;
  padding: 2.5rem 0.9rem 0.9rem;
  background: linear-gradient(180deg, transparent, rgba(var(--rvb-ombre), 0.9));
  font-size: var(--t-sm);
  color: var(--encre);
  text-align: left;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s var(--e-doux), transform 0.4s var(--e-doux);
}
.galerie__item:hover figcaption, .galerie__item:focus-visible figcaption { opacity: 1; transform: none; }
.galerie__item::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 0 var(--braise);
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow 0.35s var(--e-doux);
}
.galerie__item:hover::after { box-shadow: inset 0 0 0 2px var(--braise); }

.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1rem;
  background: rgba(var(--rvb-ombre), 0.95);
  backdrop-filter: blur(12px);
  border: 0;
  max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.35s var(--e-net);
}
.lightbox[open] { opacity: 1; }
.lightbox::backdrop { background: rgba(var(--rvb-ombre), 0.92); }
.lightbox__barre { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--encre-faint); font-size: var(--t-sm); }
.lightbox__scene { display: grid; place-items: center; min-height: 0; padding-block: 1rem; }
.lightbox__scene img {
  max-width: 100%; max-height: 100%;
  width: auto; object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(var(--rvb-ombre), 0.7);
}
.lightbox__pied { display: flex; align-items: center; justify-content: center; gap: 1.25rem; color: var(--encre-dim); font-size: var(--t-sm); text-align: center; }

.rond-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center; flex: none;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--trait);
  color: var(--encre);
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.rond-btn:hover { background: var(--verre-2); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.rond-btn svg { width: 1.15rem; height: 1.15rem; }

/* ---- 22 Compteurs, marquee, citations --------------------------------- */

.compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-block: 1px solid var(--trait);
}
.compteur { text-align: center; }
.compteur__val {
  display: block;
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 108;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.compteur__val sup { font-size: 0.42em; color: var(--braise-texte); vertical-align: super; margin-left: 0.08em; }
.compteur__lib {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-faint);
}

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__piste { display: flex; width: max-content; animation: defile 48s linear infinite; }
.marquee:hover .marquee__piste { animation-play-state: paused; }
.marquee__grp { display: flex; align-items: center; flex: none; }
.marquee__mot {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  color: var(--encre-dim);
  padding-inline: clamp(1rem, 2.2vw, 2rem);
  white-space: nowrap;
}
/* Le séparateur porte désormais une figure au trait, pas une pastille pleine. */
.marquee__sep {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  display: grid; place-items: center;
  color: var(--braise-texte);
  opacity: 0.75;
}
.marquee__sep .trait { width: 100%; color: inherit; }
/* Dans le défilé, les figures sont déjà dessinées : elles passent trop vite
   pour qu'un tracé progressif se voie, et l'observateur ne les suit pas. */
.marquee__sep .trait path,
.marquee__sep .trait circle { stroke-dashoffset: 0; }
@keyframes defile { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.citation {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-xl);
  background: rgba(var(--rvb-encre), 0.045);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.citation__texte { font-size: var(--t-lead); line-height: 1.5; }
.citation__pied { margin-top: 1.1rem; font-size: var(--t-sm); color: var(--encre-faint); }

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

.faq { display: grid; gap: 0.75rem; }
.faq__item {
  border-radius: var(--r-md);
  background: rgba(var(--rvb-encre), 0.035);
  box-shadow: inset 0 0 0 1px var(--trait);
  overflow: hidden;
  transition: box-shadow 0.35s;
}
.faq__item:has([aria-expanded='true']) { box-shadow: inset 0 0 0 1px rgba(var(--rvb-braise), 0.45); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem clamp(1.1rem, 2.2vw, 1.6rem);
  text-align: left;
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.3s;
}
.faq__q:hover { color: var(--braise-sombre); }
.faq__signe {
  flex: none;
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--trait);
  color: var(--braise-texte);
  transition: transform 0.45s var(--e-doux), background 0.35s;
}
.faq__q[aria-expanded='true'] .faq__signe { transform: rotate(135deg); background: rgba(var(--rvb-braise), 0.16); }
.faq__signe svg { width: 0.85rem; height: 0.85rem; }
.faq__r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--e-doux); }
.faq__r[data-ouvert='1'] { grid-template-rows: 1fr; }
.faq__r > div { overflow: hidden; }
.faq__r p { padding: 0 clamp(1.1rem, 2.2vw, 1.6rem) 1.35rem; color: var(--encre-dim); max-width: 68ch; }
.faq__r p + p { padding-top: 0.9rem; margin-top: -0.45rem; }

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

.champ { display: grid; gap: 0.45rem; }
.champ label, .legende {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-faint);
}
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.9rem 1.05rem;
  border-radius: var(--r-sm);
  background: rgba(var(--rvb-ombre), 0.5);
  box-shadow: inset 0 0 0 1px var(--trait);
  border: 0;
  color: var(--encre);
  transition: box-shadow 0.3s, background 0.3s;
}
.champ textarea { min-height: 7rem; resize: vertical; }
.champ input::placeholder, .champ textarea::placeholder { color: rgba(var(--rvb-encre), 0.8); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--braise), 0 0 0 3px rgba(var(--rvb-braise), 0.18);
  background: rgba(var(--rvb-ombre), 0.7);
}
.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4b8a8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.05rem;
  padding-right: 2.6rem;
}
.champ select option { background: var(--fond-0); color: var(--encre); }
.champ[data-erreur='1'] input, .champ[data-erreur='1'] select, .champ[data-erreur='1'] textarea {
  box-shadow: inset 0 0 0 1px var(--erreur);
}
.champ__err { font-size: var(--t-xs); color: var(--erreur); letter-spacing: 0; text-transform: none; font-weight: 600; }
.champ__err:empty { display: none; }

/* Champs en ligne posés sur une photo (modèle A) */
.champs-ligne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 0.75rem;
  align-items: end;
}
.champs-ligne .btn { height: 100%; }
.champs-ligne input, .champs-ligne select {
  background: rgba(var(--rvb-ombre), 0.6);
  backdrop-filter: blur(14px);
}

.case { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--t-sm); color: var(--encre-dim); cursor: pointer; line-height: 1.5; }
.case input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.18em; accent-color: var(--braise-texte); cursor: pointer; }
.case a:not(.btn) { color: var(--braise-texte); text-underline-offset: 3px; }

.micro-reassurance {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  color: var(--encre-faint);
  letter-spacing: 0.04em;
}
.micro-reassurance svg { width: 0.9rem; height: 0.9rem; color: var(--braise-texte); flex: none; }
/* Dans un bloc sombre, la même pastille passe en clair. */
.heroA .micro-reassurance,
.heroB .micro-reassurance,
.appel .micro-reassurance,
.form-photo .micro-reassurance,
.newsletter .micro-reassurance,
.pied .micro-reassurance { color: rgba(var(--rvb-fond), 0.88); }
/* Compte à rebours posé sur un hero : chiffres en ivoire, libellés à peine
   en retrait pour garder la hiérarchie sans perdre en lisibilité. */
.heroA .cr__val,
.heroB .cr__val { color: var(--sur-sombre); }
.heroA .cr__lib,
.heroB .cr__lib { color: rgba(var(--rvb-fond), 0.8); }
/* Le verre du boîtier était réglé pour l'ivoire : sur la photo il faut un
   voile sombre, sinon les chiffres clairs flottent sans support. */
.heroA .cr__case,
.heroB .cr__case {
  background: rgba(20, 12, 6, 0.42);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-fond), 0.2);
}

.heroA .micro-reassurance svg,
.heroB .micro-reassurance svg,
.appel .micro-reassurance svg,
.form-photo .micro-reassurance svg,
.newsletter .micro-reassurance svg,
.pied .micro-reassurance svg { color: var(--braise-clair); }

/* Stepper +/- */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-ombre), 0.5);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.stepper__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  color: var(--encre);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.stepper__btn:hover { background: var(--braise); color: var(--encre); }
.stepper__btn:disabled { opacity: 0.3; cursor: default; background: none; color: var(--encre); }
.stepper__btn svg { width: 1rem; height: 1rem; }
.stepper__val {
  min-width: 3rem;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Saisons cliquables */
.saisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.7rem; }
.saison { position: relative; }
.saison input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.saison__corps {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(var(--rvb-ombre), 0.45);
  box-shadow: inset 0 0 0 1px var(--trait);
  transition: box-shadow 0.3s, background 0.3s, transform 0.35s var(--e-doux);
}
.saison input:hover + .saison__corps { box-shadow: inset 0 0 0 1px var(--trait-fort); }
.saison input:checked + .saison__corps {
  background: rgba(var(--rvb-braise), 0.14);
  box-shadow: inset 0 0 0 2px var(--braise);
}
.saison input:focus-visible + .saison__corps { outline: 2px solid var(--ambre); outline-offset: 2px; }
.saison__nom { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em; }
.saison__mois { font-size: var(--t-xs); color: var(--encre-faint); }
.saison__note { font-size: var(--t-xs); color: var(--braise-texte); }

/* Choix en cartes radio */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.7rem; }
.choix__opt { position: relative; }
.choix__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choix__opt span {
  display: grid; gap: 0.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r-md);
  background: rgba(var(--rvb-ombre), 0.45);
  box-shadow: inset 0 0 0 1px var(--trait);
  transition: box-shadow 0.3s, background 0.3s, transform 0.3s var(--e-doux);
}
.choix__opt input:hover + span { box-shadow: inset 0 0 0 1px var(--trait-fort); }
.choix__opt input:checked + span { background: rgba(var(--rvb-braise), 0.12); box-shadow: inset 0 0 0 2px var(--braise); }
.choix__opt input:focus-visible + span { outline: 2px solid var(--ambre); outline-offset: 2px; }
.choix__opt b { font-size: var(--t-base); font-weight: 700; letter-spacing: -0.01em; }
.choix__opt small { font-size: var(--t-xs); color: var(--encre-faint); }

/* ---- 25 Modale et parcours de réservation ----------------------------- */

.modale {
  width: min(100% - 2rem, 46rem);
  max-height: min(92svh, 56rem);
  padding: 0; border: 0;
  border-radius: var(--r-2xl);
  background: rgba(var(--rvb-fond), 0.78);
  backdrop-filter: blur(34px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--trait-fort), 0 40px 100px rgba(var(--rvb-ombre), 0.65);
  color: var(--encre);
  overflow: hidden;
}
.modale::backdrop { background: rgba(var(--rvb-ombre), 0.82); backdrop-filter: blur(7px); }
.modale[open] { animation: modale-entre 0.5s var(--e-doux); }
@keyframes modale-entre {
  from { opacity: 0; transform: translateY(2rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.modale__inner { display: grid; grid-template-rows: auto auto 1fr auto; max-height: inherit; }
.modale__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: clamp(1.35rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2rem) 0.85rem; }
.modale__titre { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); letter-spacing: -0.02em; }
.modale__sous { font-size: var(--t-sm); color: var(--encre-faint); margin-top: 0.3rem; }

.progression { height: 3px; margin-inline: clamp(1.35rem, 3vw, 2rem); border-radius: var(--r-pill); background: var(--trait); overflow: hidden; }
.progression__barre {
  height: 100%;
  width: var(--avance, 33%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--braise), var(--ambre));
  transition: width 0.55s var(--e-doux);
}

.modale__corps { padding: clamp(1.35rem, 3vw, 2rem); overflow-y: auto; overscroll-behavior: contain; }
.modale__etape { display: grid; gap: 1.1rem; }
.modale__etape[hidden] { display: none; }
.modale__etape:not([hidden]) { animation: fondu-monte 0.45s var(--e-doux) both; }
@keyframes fondu-monte { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }

.modale__pied {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.35rem, 3vw, 2rem) clamp(1.35rem, 3vw, 2rem);
  border-top: 1px solid var(--trait);
  flex-wrap: wrap;
}
.modale__pied .micro-reassurance { flex: 1 1 100%; order: 3; justify-content: flex-start; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0.85rem; }

.confirme { display: grid; gap: 1.25rem; justify-items: center; text-align: center; padding-block: 1rem; }
.confirme__ico {
  width: 4.5rem; height: 4.5rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-braise), 0.16);
  color: var(--braise-texte);
  animation: pop 0.6s var(--e-ressort) both;
}
.confirme__ico svg { width: 2rem; height: 2rem; }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.confirme__recap {
  width: 100%; text-align: left;
  display: grid; gap: 0.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-md);
  background: rgba(var(--rvb-ombre), 0.45);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: var(--t-sm);
}
.confirme__recap div { display: flex; justify-content: space-between; gap: 1rem; }
.confirme__recap dt { color: var(--encre-faint); }
.confirme__recap dd { margin: 0; text-align: right; font-weight: 600; }

/* Parcours de réservation en pleine page */
.parcours { position: relative; }
.parcours__etape {
  min-height: calc(100svh - var(--entete-h));
  display: grid;
  align-content: center;
  padding-block: clamp(2rem, 6vh, 5rem);
  position: relative;
}
.parcours__etape[hidden] { display: none; }
.parcours__etape:not([hidden]) { animation: fondu-monte 0.55s var(--e-doux) both; }
.parcours__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 900px) { .parcours__grille { grid-template-columns: 1fr; } }

/* Récapitulatif vivant */
.recap-vivant { position: sticky; top: calc(var(--entete-h) + 1.5rem); }
.recap-vivant__ligne {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm);
}
.recap-vivant__ligne:last-child { border-bottom: 0; }
.recap-vivant__cle { color: var(--encre-faint); }
.recap-vivant__val { font-weight: 700; text-align: right; }
.recap-vivant__val:empty::after { content: '—'; color: var(--encre-faint); font-weight: 400; }
.recap-vivant__val[data-neuf='1'] { animation: flash-val 0.7s var(--e-doux); }
@keyframes flash-val {
  0% { color: var(--braise-texte); transform: translateX(4px); }
  100% { color: inherit; transform: none; }
}

@media (max-width: 900px) {
  .recap-vivant { position: static; }
}

/* ---- 26 Newsletter ----------------------------------------------------- */

.newsletter {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  isolation: isolate;
}
.newsletter__fond { position: absolute; inset: 0; z-index: -2; }
.newsletter__fond img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.08) brightness(0.55) sepia(0.2); }
.newsletter__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(var(--rvb-ombre), 0.9) 0%, rgba(var(--rvb-ombre), 0.55) 55%, rgba(var(--rvb-braise-texte), 0.35) 100%);
}
.newsletter__corps {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4.5vw, 3.5rem);
}
.newsletter__form {
  background: rgba(var(--rvb-fond), 0.6);
  backdrop-filter: blur(22px) saturate(1.3);
  border-radius: var(--r-xl);
  box-shadow: inset 0 0 0 1px var(--trait-fort);
  padding: clamp(1.25rem, 3vw, 1.85rem);
  display: grid;
  gap: 0.85rem;
}
@media (max-width: 860px) { .newsletter__corps { grid-template-columns: 1fr; } }

.newsletter__ok {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  text-align: center;
  padding-block: 1rem;
  animation: fondu-monte 0.5s var(--e-doux) both;
}
.newsletter__ok-ico {
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(var(--rvb-braise), 0.18);
  color: var(--braise-texte);
  animation: pop 0.55s var(--e-ressort) both;
}
.newsletter__ok-ico svg { width: 1.4rem; height: 1.4rem; }

.sortie {
  width: min(100% - 2rem, 31rem);
  padding: 0; border: 0;
  border-radius: var(--r-xl);
  background: rgba(var(--rvb-fond), 0.86);
  backdrop-filter: blur(28px);
  box-shadow: inset 0 0 0 1px var(--trait-fort), 0 30px 80px rgba(var(--rvb-ombre), 0.6);
  color: var(--encre);
  overflow: hidden;
}
.sortie::backdrop { background: rgba(var(--rvb-ombre), 0.75); }
.sortie[open] { animation: modale-entre 0.45s var(--e-doux); }
.sortie__corps { display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2rem); }

/* ---- 27 Carnet (blog) -------------------------------------------------- */

/* Filtres par thème : une rangée de pastilles qui défile latéralement en
   mobile plutôt que de passer à la ligne — la grille reste alors visible sans
   avoir à faire défiler la page. */
.carnet-filtres {
  display: flex;
  gap: 0.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
}
.carnet-filtres::-webkit-scrollbar { display: none; }
.carnet-filtre {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--encre-dim);
  background: rgba(var(--rvb-encre), 0.05);
  box-shadow: inset 0 0 0 1px var(--trait);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color 0.28s, background 0.28s, box-shadow 0.28s;
}
.carnet-filtre:hover { color: var(--encre); background: rgba(var(--rvb-encre), 0.09); }
.carnet-filtre[aria-pressed='true'] {
  color: var(--fond-2);
  background: var(--encre);
  box-shadow: inset 0 0 0 1px var(--encre);
}
.carnet-filtre__n {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  opacity: 0.65;
}

.article-carte__theme { color: var(--braise-sombre); }

.carnet-vide {
  padding: 3rem 0;
  text-align: center;
  color: var(--encre-faint);
}

.carnet-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.carnet-pages__fleche {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: var(--encre);
  box-shadow: inset 0 0 0 1px var(--trait);
  cursor: pointer;
  transition: background 0.28s, color 0.28s, opacity 0.28s;
}
.carnet-pages__fleche:hover { background: rgba(var(--rvb-encre), 0.09); }
/* `aria-disabled` plutôt que `disabled` : le bouton reste focusable, donc le
   focus ne retombe pas sur le corps du document en fin de pagination. */
.carnet-pages__fleche[aria-disabled='true'] { opacity: 0.32; cursor: default; }
.carnet-pages__fleche[aria-disabled='true']:hover { background: none; }
.carnet-pages__fleche svg { width: 1.05rem; height: 1.05rem; }
.carnet-pages__compte {
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--encre-dim);
  min-width: 3.5rem;
  text-align: center;
}

.carnet-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
}
.article-carte { display: grid; gap: 1rem; text-decoration: none; align-content: start; }
.article-carte__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 10; }
.article-carte__meta {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-faint);
}
.article-carte__meta span + span::before { content: '· '; }
.article-carte__titre {
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: color 0.3s;
}
.article-carte:hover .article-carte__titre { color: var(--braise-sombre); }
.article-carte__chapo { font-size: var(--t-sm); color: var(--encre-dim); }

.article { --large: 780px; }
.article h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  margin-top: 2.5em;
  margin-bottom: 0.7em;
}
.article h2:first-of-type { margin-top: 0; }
.article h3 { font-size: var(--t-h4); margin-top: 2em; margin-bottom: 0.5em; color: var(--encre); }
.article p { color: var(--encre-dim); }
.article p + p { margin-top: 1.1em; }
.article ul { display: grid; gap: 0.6rem; margin-block: 1.2em; }
.article ul li { padding-left: 1.6rem; position: relative; color: var(--encre-dim); }
.article ul li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--braise);
}
.article a:not(.btn) { color: var(--braise-texte); text-underline-offset: 3px; }
.article figure { margin-block: 2.25em; }
.article figure .photo { border-radius: var(--r-lg); }

.encadre {
  margin-block: 2.25em;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--r-lg);
  background: rgba(var(--rvb-braise), 0.09);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-braise), 0.28);
  display: grid;
  gap: 0.6rem;
}
.encadre__titre {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-h4);
  font-weight: 700;
  color: var(--braise-sombre);
}
.encadre__titre svg { width: 1.2rem; height: 1.2rem; flex: none; }
.encadre p { color: var(--encre-dim); margin: 0; }

.article-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.article-nav__item {
  display: grid;
  gap: 0.35rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--trait);
  text-decoration: none;
  transition: box-shadow 0.35s, background 0.35s;
}
.article-nav__item:hover { background: var(--verre); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.article-nav__sens { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--braise-texte); }
.article-nav__titre { font-weight: 700; line-height: 1.25; }

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

.pied {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: 2rem;
  background: linear-gradient(180deg,
    var(--fond) 0%,
    #3a2a19 0.6%,
    #2c1f12 40%,
    var(--sombre) 100%);
  isolation: isolate;
}
/* Wordmark géant tronqué, révélé au scroll */
.pied__wordmark {
  position: absolute;
  left: 50%; bottom: -0.14em;
  transform: translateX(-50%);
  z-index: -1;
  font-size: clamp(7rem, 26vw, 30rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 122;
  line-height: 0.75;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--rvb-encre), 0.09);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s var(--e-doux), transform 1.2s var(--e-doux);
}
.pied[data-vu='1'] .pied__wordmark { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Ligne d'horizon animée : un soleil qui se couche, en boucle très lente */
/* Le « soleil couchant » décoratif a été retiré : sur le brun profond du pied
   il formait une tache claire au milieu des colonnes de liens, lue comme un
   défaut de rendu plutôt que comme un ornement. */

.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* En dessous, la place manque pour cinq colonnes : on empile. */
@media (max-width: 900px) {
  .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .pied__haut { grid-template-columns: minmax(0, 1fr); }
}
.pied__marque svg { height: 34px; width: auto; }
.pied__pitch { margin-top: 1.1rem; max-width: 26rem; color: var(--encre-dim); font-size: var(--t-sm); }

.pied__col h3 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--rvb-fond), 0.72);
  margin-bottom: 1.1rem;
}
.pied__col ul { display: grid; gap: 0.6rem; }
.pied__col a:not(.btn) {
  position: relative;
  display: inline-block;
  font-size: var(--t-sm);
  color: rgba(var(--rvb-fond), 0.94);
  text-decoration: none;
  transition: color 0.25s;
}
.pied__col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 1px; width: 100%;
  background: var(--braise);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--e-doux);
}
.pied__col a:not(.btn):hover{ color: var(--sur-sombre); }
.pied__col a:hover::after { transform: scaleX(1); transform-origin: left; }

.pied__bas {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--trait);
  font-size: var(--t-xs);
  color: var(--encre-faint);
}
.pied__bas ul { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.pied__bas a { text-decoration: none; transition: color 0.25s; }
.pied__bas a:not(.btn):hover{ color: var(--encre); }

.reseaux { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.reseaux a:not(.btn) {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--trait);
  color: var(--encre-dim);
  transition: color 0.3s, background 0.3s, transform 0.35s var(--e-doux);
}
.reseaux a:not(.btn):hover{ color: var(--encre); background: var(--braise); transform: translateY(-3px); }
.reseaux svg { width: 1.1rem; height: 1.1rem; }

/* ---- 29 Pages légales, 404, fil d'Ariane ------------------------------- */

.fil {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-faint);
}
.fil a { text-decoration: none; transition: color 0.25s; }
.fil a:not(.btn):hover{ color: var(--braise-texte); }
.fil li { display: flex; align-items: center; }
.fil li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }

.legal h2 { font-size: var(--t-h3); margin-top: 2.75rem; margin-bottom: 0.85rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { font-size: var(--t-h4); margin-top: 1.75rem; margin-bottom: 0.6rem; }
.legal p, .legal li { color: var(--encre-dim); }
.legal p + p { margin-top: 0.9rem; }
.legal ul { display: grid; gap: 0.5rem; margin-top: 0.9rem; }
.legal ul li { padding-left: 1.4rem; position: relative; }
.legal ul li::before {
  content: '';
  position: absolute; left: 0; top: 0.66em;
  width: 5px; height: 5px;
  border-radius: var(--r-pill);
  background: var(--braise);
}
.legal a:not(.btn) { color: var(--braise-texte); text-underline-offset: 3px; }
.legal__maj { font-size: var(--t-sm); color: var(--encre-faint); margin-bottom: 2.5rem; }

/* Le tableau des crédits ne rentre pas dans un écran de téléphone : il défile
   dans sa propre boîte plutôt que de déborder de la page. Le `min-width` lui
   évite de s'écraser en colonnes d'un mot par ligne. */
.tableau-defilant {
  margin-top: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.tableau-defilant:focus-visible { outline: 2px solid var(--braise); outline-offset: 3px; }
.legal table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: var(--t-sm); }
.legal th, .legal td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
.legal th { color: var(--encre); font-weight: 700; }
.legal td { color: var(--encre-dim); }

.placeholder {
  display: inline;
  padding: 0.05em 0.4em;
  border-radius: 5px;
  background: rgba(var(--rvb-braise), 0.16);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-braise-texte), 0.45);
  color: var(--braise-sombre);
  font-style: italic;
}

.p404 { min-height: 82svh; display: grid; place-items: center; text-align: center; padding-top: var(--entete-h); }
.p404__code {
  font-size: clamp(6rem, 3rem + 16vw, 15rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 118;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--trait-fort);
}

/* ---- 29a Mises en page de contenu -------------------------------------- */

/* Page destination : récit + encart d'action qui suit le défilement */
.dest-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.dest-aside { position: sticky; top: calc(var(--entete-h) + 1.5rem); }
@media (max-width: 900px) {
  .dest-corps { grid-template-columns: 1fr; }
  .dest-aside { position: static; }
}

/* Page contact : formulaire + colonne latérale */
.contact-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  align-items: start;
}
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }

/* Portrait + texte */
.duo-photo {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}
.duo-photo__media { border-radius: var(--r-xl); overflow: hidden; }
@media (max-width: 900px) { .duo-photo { grid-template-columns: 1fr; } }

/* Compte à rebours (Vodun Days) */
.compte-rebours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.4vw, 1rem);
  max-width: 34rem;
}
.cr__case {
  padding: clamp(0.85rem, 2vw, 1.35rem) 0.5rem;
  border-radius: var(--r-md);
  background: var(--verre);
  box-shadow: inset 0 0 0 1px var(--trait);
  text-align: center;
  backdrop-filter: blur(12px);
}
.cr__val {
  display: block;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.cr__lib {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-faint);
}

/* ---- 29b Appel à l'action sur photo pleine largeur --------------------- */

.appel-fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.appel-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.1) brightness(0.5) sepia(0.2) hue-rotate(-8deg);
}
.appel-contenu { position: relative; z-index: 3; }

/* Bloc éventail : la scène 3D plus sa navigation */
.eventail-bloc { display: grid; }

/* Formulaire posé directement sur une photo pleine largeur (modèle A) */
.form-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.form-photo__fond { position: absolute; inset: 0; z-index: -2; }
.form-photo__fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1) contrast(1.1) brightness(0.42) sepia(0.18);
}
.form-photo__voile {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    var(--fond) 0%,
    rgba(var(--rvb-ombre), 0.55) 8%,
    rgba(var(--rvb-ombre), 0.82) 14%,
    rgba(var(--rvb-ombre), 0.82) 86%,
    rgba(var(--rvb-ombre), 0.55) 93%,
    var(--fond) 100%);
}

/* ---- 29bis Avis voyageurs ---------------------------------------------- */

.avis-tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.avis-note { display: flex; align-items: center; gap: 1rem; }
.avis-note__val {
  font-size: clamp(3rem, 2rem + 3.5vw, 4.75rem);
  font-weight: 900;
  font-variation-settings: 'wdth' 108;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.avis-note__detail { display: grid; gap: 0.3rem; }
.avis-note__compte { font-size: var(--t-sm); color: var(--encre-faint); }

/* Étoiles : elles se remplissent en cascade à l'entrée dans le viewport. */
.etoiles { display: inline-flex; gap: 0.15rem; }
.etoile {
  width: 1.05rem; height: 1.05rem;
  fill: var(--trait-fort);
  transition: fill 0.4s var(--e-doux), transform 0.5s var(--e-ressort);
  transition-delay: calc(var(--i, 1) * 0.07s);
  transform: scale(0.7);
}
.etoiles--grand .etoile { width: 1.4rem; height: 1.4rem; }
[data-vu='1'] .etoile { transform: scale(1); }
[data-vu='1'] .etoile[data-pleine='1'] { fill: var(--braise); }
/* Sans révélation au scroll (JS absent), les étoiles restent lisibles. */
html:not([data-js]) .etoile { transform: none; }
html:not([data-js]) .etoile[data-pleine='1'] { fill: var(--braise); }

/* Défilé horizontal doux, au drag comme au doigt. */
.avis-piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(84vw, 21rem), 21rem);
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  scrollbar-width: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 97%, transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 97%, transparent);
}
.avis-piste[data-glisse='1'] { cursor: grabbing; scroll-snap-type: none; }
.avis-piste::-webkit-scrollbar { display: none; }

.avis {
  scroll-snap-align: start;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--r-xl);
  background: var(--fond-0);
  box-shadow: inset 0 0 0 1px var(--trait), 0 2px 8px rgba(var(--rvb-ombre), 0.07);
  transition: transform 0.5s var(--e-doux), box-shadow 0.5s var(--e-doux);
}
.avis:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--trait-fort), 0 8px 20px rgba(var(--rvb-ombre), 0.12); }
.avis__tete { display: flex; align-items: center; gap: 0.75rem; }
.avis__portrait {
  flex: none;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: rgba(var(--rvb-braise), 0.18);
  color: var(--braise-sombre);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.avis__portrait img { width: 100%; height: 100%; object-fit: cover; }
.avis__qui { display: grid; min-width: 0; flex: 1; }
.avis__nom { font-weight: 700; line-height: 1.2; }
.avis__lieu { font-size: var(--t-sm); color: var(--encre-faint); }
.avis__source { flex: none; }
.avis__source svg { width: 1.1rem; height: 1.1rem; }
.avis__texte { color: var(--encre-dim); font-size: var(--t-sm); line-height: 1.6; }
.avis__date { font-size: var(--t-xs); color: var(--encre-faint); }

.avis-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Saisie de la note : étoiles interactives au survol comme au doigt. */
.note-saisie { display: flex; gap: 0.2rem; }
.note-saisie__btn {
  padding: 0.25rem;
  cursor: pointer;
  color: var(--trait-fort);
  transition: transform 0.3s var(--e-ressort), color 0.25s;
  /* Cible tactile confortable sans grossir le dessin. */
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
}
.note-saisie__btn svg { width: 1.75rem; height: 1.75rem; fill: currentColor; }
.note-saisie__btn[data-allumee='1'] { color: var(--braise-texte); }
.note-saisie__btn:hover { transform: scale(1.12); }

.avis-apercu {
  position: relative;
  margin-top: 0.6rem;
  width: fit-content;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--trait);
}
.avis-apercu img { max-height: 9rem; width: auto; display: block; }
.avis-apercu .rond-btn {
  position: absolute; top: 0.4rem; right: 0.4rem;
  width: 34px; height: 34px;
  background: rgba(var(--rvb-fond), 0.72);
  backdrop-filter: blur(8px);
}

/* Piège à robots : hors écran et hors parcours clavier, jamais display:none
   (certains robots ignorent les champs masqués de cette façon). */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (max-width: 640px) {
  .avis-tete { align-items: flex-start; }
  .avis-note__val { font-size: 3rem; }
}

/* ---- 29c Comportement tactile et petits écrans -------------------------
   Tout ce qui doit changer sous 640 px est regroupé ici, à la source, pour
   que la correction porte sur toutes les pages sans rustine locale. */

@media (max-width: 640px) {
  /* --- Boutons : un libellé tient toujours sur une ligne ---------------
     `nowrap` seul ferait déborder ; on réduit donc l'échelle du bouton et
     on laisse les groupes d'actions passer en pleine largeur, ce qui donne
     au pouce une cible franche. */
  .btn { font-size: 0.78rem; padding: 0.9rem 1.3rem; letter-spacing: 0.05em; }
  .btn--lg { font-size: 0.8125rem; padding: 1rem 1.45rem; }
  .btn--sm { font-size: 0.7rem; padding: 0.7rem 1rem; }

  .heroA__actions { gap: 0.6rem; }
  .heroA__actions > .btn { flex: 1 1 100%; justify-content: center; }

  /* Les libellés courts restent sur une ligne eux aussi. */
  .lien-b, .filtre, .segment, .puce, .onglet { white-space: nowrap; }
  .filtre { font-size: 0.78rem; padding: 0.65rem 1rem; }

  /* --- Hero d'accueil : composition mobile dédiée ---------------------- */
  .heroA {
    min-height: 100svh;
    align-items: end;
    padding-top: calc(var(--entete-h) + 1.25rem);
    padding-bottom: 2rem;
  }
  /* Le sujet des photos est au centre-bas : on recadre pour ne pas le perdre. */
  .heroA__scene img { object-position: center 58%; }
  .heroA__voile {
    /* Opaque dès 70 % : en dessous, plus aucune photo derrière les vignettes,
       donc plus de bloc plus clair qui les encadre. */
    background:
      linear-gradient(180deg, rgba(var(--rvb-fond), 0.86) 0%, rgba(var(--rvb-fond), 0.18) 24%, rgba(var(--rvb-fond), 0.78) 56%, var(--fond) 70%, var(--fond) 100%);
  }
  /* Rien ne doit apporter de fond sous la rangée de bulles. */
  .vignettes, .vignette, .vignette__legende {
    background: none;
    box-shadow: none;
  }
  .vignettes { scrollbar-width: none; }
  .vignettes::-webkit-scrollbar { display: none; }
  .heroA__grille { gap: 1.5rem; }
  .heroA__titre { font-size: clamp(2.1rem, 9.6vw, 3rem); line-height: 1.0; margin-block: 0.85rem 1rem; }
  .heroA__chapo { font-size: 1rem; line-height: 1.55; margin-bottom: 1.5rem; }
  .heroA__preuve {
    margin-top: 1.25rem;
    gap: 0.5rem;
    font-size: 0.8125rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .heroA__preuve li { max-width: 100%; }
  .heroA__preuve li span { overflow-wrap: anywhere; }
  .surtitre { letter-spacing: 0.18em; }

  /* --- Éventail 3D : dégradé en cartes centrées, sans perspective -------

     Les cartes étaient permutées en `display: none` / `block`. La hauteur du
     conteneur suivait donc celle de la seule carte affichée, et l'écart entre
     la plus courte et la plus longue (301 px mesurés) faisait sauter toute la
     page verticalement au clic sur une flèche.

     Ici les cartes sont empilées dans une même cellule de grille : la hauteur
     du conteneur est celle de la PLUS HAUTE, une fois pour toutes. Elle ne
     bouge plus jamais d'une carte à l'autre. `visibility: hidden` sort les
     cartes masquées de l'ordre de tabulation et de l'arbre d'accessibilité —
     ce que `opacity: 0` seul n'aurait pas fait. */
  .eventail { perspective: none; height: auto; }
  .eventail__piste {
    transform-style: flat;
    height: auto;
    display: grid;
    grid-template-columns: minmax(0, 22rem);
    justify-content: center;
    align-items: start;
  }
  .eventail__carte {
    grid-area: 1 / 1;
    position: relative;
    top: auto; left: auto;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
    transform: none !important;
    z-index: auto !important;
    display: block;
    visibility: hidden;
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 0.32s var(--e-doux);
  }
  /* Une seule carte à la fois : la navigation par flèches reste la commande. */
  .eventail__carte[data-centre='1'] {
    visibility: visible;
    opacity: 1 !important;
    pointer-events: auto;
  }
  .eventail__carte .badge-expand { opacity: 1; }
  .eventail__nav { margin-top: 1.25rem; }

  /* --- Corps de texte : jamais sous 16 px ------------------------------- */
  body { font-size: 1rem; }
  .chapo { font-size: 1.0625rem; }
}

/* --- Carte interactive : lisibilité et manipulation au doigt ------------ */

/* Le halo des pins grossit jusqu'à 2,5× : sans confinement il débordait du
   cadre et venait mordre sur le texte des sections voisines. On garde donc la
   coupe — mais le masque efface les bords bien avant, si bien qu'aucune arête
   n'est jamais visible : la carte se dissout dans la page. */
.carte-ao__svg { overflow: hidden; }
/* Le fondu des bords ne concerne QUE le terrain : appliqué au SVG entier, il
   rongeait aussi les pastilles des libellés proches du bord — c'est ce qui
   coupait « Kpalimé » et « La Rivière Noire » en mobile. */
.carte-ao__terrain {
  -webkit-mask-image: radial-gradient(125% 108% at 50% 48%, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 97%);
  mask-image: radial-gradient(125% 108% at 50% 48%, #000 58%, rgba(0, 0, 0, 0.55) 82%, transparent 97%);
}

/* Le tampon de tap est un disque transparent bien plus large que le point
   dessiné : la cible tactile n'est pas la taille du graphisme. */
.carte-ao__tampon { fill: transparent; }

@media (max-width: 900px) {
  /* Le script recadre la vue sur le Bénin et le Togo : à cette échelle les
     libellés et les points redeviennent lisibles et atteignables. */
  .carte-ao__nom { font-size: 15px; }
  .carte-ao__point { r: 7; }
  .carte-ao__halo { r: 8; }
  .carte-ao__etiquette { font-size: 11px; letter-spacing: 0.1em; }

  /* La liste sous la carte est la vraie surface tactile : le littoral
     regroupe trois destinations à quelques pixels, aucun pin ne peut y
     offrir 44 px isolés. */
  .carte-ao__liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.6rem;
    margin-top: 1.5rem;
  }
  .carte-ao__liste .puce {
    min-height: 48px;
    justify-content: center;
    font-size: 0.8125rem;
    background: var(--verre-2);
    box-shadow: inset 0 0 0 1px var(--trait-fort);
    color: var(--encre);
    text-decoration: none;
  }
  .carte-ao__liste .puce:active { background: var(--braise); color: var(--encre); }
  /* La bulle de survol n'a pas de sens au doigt : le tap suit le lien. */
  .carte-ao__bulle { display: none; }
}

/* ---- 30 Révélations, parallaxe, mouvement réduit ---------------------- */

[data-js] [data-anim] {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.85s var(--e-doux), transform 0.95s var(--e-doux);
  transition-delay: var(--retard-anim, 0s);
}
[data-js] [data-anim='gauche'] { transform: translateX(-2rem); }
[data-js] [data-anim='droite'] { transform: translateX(2rem); }
[data-js] [data-anim='zoom'] { transform: scale(0.94); }
[data-js] [data-anim][data-vu='1'] { opacity: 1; transform: none; }

.lignes { display: grid; }
.ligne-masque { overflow: hidden; display: block; }
.ligne-masque > span { display: block; }
.heroA .ligne-masque > span,
.heroB .ligne-masque > span {
  animation: monte-ligne 1s var(--e-doux) both;
  animation-delay: calc(0.15s + var(--i, 0) * 0.09s);
}
@keyframes monte-ligne { from { transform: translateY(105%); } to { transform: none; } }

/* Parallaxe multi-couches : la profondeur est portée par --p */
[data-parallaxe] { will-change: transform; }

.mot-fond {
  position: relative;
  z-index: 0;
  color: rgba(var(--rvb-encre), 0.09);
  margin-bottom: -0.14em;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-js] [data-anim] { opacity: 1 !important; transform: none !important; }
  .heroA .ligne-masque > span,
  .heroB .ligne-masque > span { animation: none !important; transform: none !important; }
  .etape__media { opacity: 1 !important; transform: none !important; }
  .vignette, .pied__soleil, .carte-ao__halo, .carte-ao__lueur { animation: none !important; }
  /* Les contours sont montrés tracés, jamais en cours de tracé. */
  .carte-ao__pays { stroke-dashoffset: 0 !important; }
  .carte-ao__pays--actif { fill-opacity: 1 !important; }
  .heroA__scene[data-actif='1'] img,
  .heroB__scene[data-actif='1'] img { animation: none !important; }
  .marquee__piste { animation: none !important; }
  .coche path { stroke-dashoffset: 0 !important; }
}

/* ---- 31 Entrée cinématique --------------------------------------------- */

/* Rideau d'arrivée sur la page d'accueil. Il n'accapare PAS le défilement :
   la page défile normalement dessous, et le rideau se dissipe à mesure. Toute
   l'animation est pilotée par une seule variable, --p (0 → 1), que le script
   met à jour au défilement. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow: hidden;
  background: var(--fond-2);
  --p: 0;
  /* Le rideau s'efface sur les 25 derniers pour cent de la course. */
  opacity: clamp(0, calc((1 - var(--p)) * 4), 1);
}
.intro[hidden] { display: none; }
.intro[data-fini='1'] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro__scene {
  position: absolute;
  inset: 0;
  /* Léger zoom sortant : l'image s'éloigne pendant que le titre monte. */
  transform: scale(calc(1.08 - var(--p) * 0.08));
  transition: transform 0.1s linear;
}
.intro__scene img { width: 100%; height: 100%; object-fit: cover; }

.intro__voile {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 0%, rgba(var(--rvb-fond), 0.55) 62%, rgba(var(--rvb-fond), 0.92) 100%),
    linear-gradient(180deg, rgba(var(--rvb-fond), 0.72) 0%, rgba(var(--rvb-fond), 0.35) 38%, rgba(var(--rvb-fond), 0.88) 100%);
}

.intro__contenu {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.1rem, 2.4vw, 1.9rem);
  padding: var(--gouttiere);
  text-align: center;
  /* Le bloc monte et s'estompe plus vite que le fond. */
  transform: translateY(calc(var(--p) * -8vh));
  opacity: clamp(0, calc(1 - var(--p) * 1.6), 1);
}

.intro__lieu,
.intro__ligne {
  font-size: var(--t-xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--encre-dim);
}
.intro__lieu { color: var(--braise); }

.intro__marque svg {
  width: min(58vw, 27rem);
  height: auto;
  color: var(--encre);
  filter: drop-shadow(0 18px 44px rgba(var(--rvb-ombre), 0.55));
}

/* Un filet qui s'ouvre depuis le centre : le seul mouvement d'entrée. */
.intro__ligne { position: relative; padding-top: clamp(1rem, 2.4vw, 1.6rem); }
.intro__ligne::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: clamp(4rem, 18vw, 11rem);
  height: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, var(--braise), transparent);
  transform: translateX(-50%) scaleX(1);
}
.intro[data-anime='1'] .intro__ligne::before {
  transform: translateX(-50%) scaleX(0);
  animation: intro-filet 1.5s var(--e-doux) 0.5s forwards;
}
@keyframes intro-filet { to { transform: translateX(-50%) scaleX(1); } }

/* Entrée en cascade. Ces animations partent d'opacity 0 : elles ne sont donc
   posées QUE si le script a confirmé que requestAnimationFrame tourne
   (attribut data-anime). Dans un environnement qui ne peut pas animer, le
   contenu reste simplement visible plutôt que de rester invisible. */
.intro[data-anime='1'] .intro__lieu,
.intro[data-anime='1'] .intro__marque,
.intro[data-anime='1'] .intro__ligne {
  animation: intro-monte 1.1s var(--e-doux) both;
}
.intro[data-anime='1'] .intro__lieu { animation-delay: 0.15s; }
.intro[data-anime='1'] .intro__marque { animation-delay: 0.32s; }
.intro[data-anime='1'] .intro__ligne { animation-delay: 0.55s; }
@keyframes intro-monte {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: none; }
}

.intro__indice {
  position: absolute;
  left: 50%;
  bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--encre-faint);
  /* L'indice disparaît dès que la descente commence : il a fait son travail. */
  opacity: clamp(0, calc(1 - var(--p) * 5), 1);
}
.intro[data-anime='1'] .intro__indice { animation: intro-monte 1.1s var(--e-doux) 0.9s both; }
.intro__fleche {
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(180deg, var(--encre-faint), transparent);
  animation: intro-descend 2.4s ease-in-out infinite;
}
@keyframes intro-descend {
  0%, 100% { transform: scaleY(0.5); transform-origin: 50% 0; opacity: 0.35; }
  50% { transform: scaleY(1); transform-origin: 50% 0; opacity: 1; }
}

.intro__passer {
  position: absolute;
  top: calc(1.1rem + env(safe-area-inset-top, 0px));
  right: var(--gouttiere);
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-dim);
  background: rgba(var(--rvb-fond), 0.5);
  box-shadow: inset 0 0 0 1px var(--trait);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: color 0.3s, box-shadow 0.3s;
}
.intro__passer:hover { color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait-fort); }

@media (prefers-reduced-motion: reduce) {
  /* Le script ne montre déjà pas le rideau dans ce cas ; ces règles ne servent
     que de garde-fou si l'état est activé après coup. */
  .intro__lieu,
  .intro__marque,
  .intro__ligne,
  .intro__indice,
  .intro__ligne::before,
  .intro__fleche { animation: none; opacity: 1; transform: none; }
  .intro__ligne::before { transform: translateX(-50%) scaleX(1); }
  .intro__scene { transform: none; }
}

/* ---- 32 Îlots sombres du thème clair ----------------------------------- */

/* Les heroes gardent un voile brun profond sur la photo : c'est ce qui laisse
   la matière photographique respirer, et c'est le contrepoint de rythme prévu
   par la charte. Leur texte est donc en ivoire, pas en encre — après la bascule
   du thème, l'encre brune se retrouvait posée sur le voile brun, illisible.
   Un seul endroit, une seule règle : tous les textes de hero en héritent. */
.heroA,
.heroB,
.appel,
.pied,
.form-photo,
.newsletter {
  color: var(--sur-sombre);
}

/* Ces deux blocs posent leurs titres et paragraphes avec les classes
   génériques du site, qui portent l'encre brune. On les rebascule ici plutôt
   que dans chaque gabarit. */
.form-photo h2,
.form-photo .chapo,
.form-photo label,
.newsletter h2,
.newsletter .attenue,
.newsletter label { color: var(--sur-sombre); }
.form-photo .chapo,
.newsletter .attenue { color: rgba(var(--rvb-fond), 0.9); }

/* Les classes de texte génériques posées à l'intérieur d'un îlot sombre.
   Elles portent l'encre brune par défaut, pensée pour le fond ivoire. */
.heroA .chapo,
.heroB .chapo,
.appel .chapo,
.form-photo .chapo { color: rgba(var(--rvb-fond), 0.92); }
.heroA .attenue,
.heroB .attenue,
.appel .attenue,
.form-photo .attenue,
.newsletter .attenue { color: rgba(var(--rvb-fond), 0.86); }
.heroA .faible,
.heroB .faible,
.appel .faible {
  display: inline-block;
  color: var(--sur-sombre);
  background: rgba(20, 12, 6, 0.66);
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-fond), 0.14);
}
.heroA strong,
.heroB strong,
.appel strong { color: var(--sur-sombre); }
.form-photo .surtitre,
.newsletter .surtitre { color: var(--braise-clair); }
.form-photo .champ input,
.form-photo .champ textarea,
.newsletter .champ input {
  background: rgba(20, 12, 6, 0.55);
  color: var(--sur-sombre);
  border-color: rgba(var(--rvb-fond), 0.34);
}
.form-photo .champ input::placeholder,
.newsletter .champ input::placeholder { color: rgba(var(--rvb-fond), 0.62); }
.newsletter .credit,
.form-photo .credit { color: rgba(var(--rvb-fond), 0.7); }

.heroA__titre,
.heroB__titre,
.heroA__chapo,
.heroB__chapo,
.heroA__texte,
.heroB__texte { color: var(--sur-sombre); }

.heroA__chapo,
.heroB__chapo { color: rgba(var(--rvb-fond), 0.9); }

.heroA__preuve,
.heroB__preuve { color: var(--sur-sombre); }
/* Chaque gage devient une pastille : le fond ne dépend plus de la photo, donc
   le contraste non plus. */
.heroA__preuve li,
.heroB__preuve li {
  padding: 0.42rem 0.85rem;
  border-radius: var(--r-pill);
  background: rgba(20, 12, 6, 0.62);
  box-shadow: inset 0 0 0 1px rgba(var(--rvb-fond), 0.16);
}
@supports (backdrop-filter: blur(1px)) {
  .heroA__preuve li,
  .heroB__preuve li { backdrop-filter: blur(10px); }
}

/* Sur fond sombre, c'est le corail CLAIR qui porte l'accent : le corail de
   texte (#ac3e15) n'y donne que 2,8:1. */
.heroA .surtitre,
.heroB .surtitre,
.appel .surtitre,
.heroA__preuve svg,
.heroB__preuve svg { color: var(--braise-clair); }

.heroA .fil,
.heroB .fil,
.heroA .fil a,
.heroB .fil a:not(.btn) { color: rgba(var(--rvb-fond), 0.75); }
.heroA .fil a:hover,
.heroB .fil a:not(.btn):hover{ color: var(--sur-sombre); }

/* Le pied de page descend vers le brun profond : ses textes suivent. */
.pied a,
.pied p,
.pied li { color: rgba(var(--rvb-fond), 0.94); }
/* Les intitulés de colonne restent des surtitres : plus petits et espacés,
   ils ont besoin de tout le contraste disponible. */
.pied h3 { color: var(--sur-sombre); }
.pied a:not(.btn):hover{ color: var(--sur-sombre); }
.pied h3 { color: var(--sur-sombre); }

/* ---- 33 Figures au trait ------------------------------------------------ */

/* Encre brune, tracé seul. La couleur vient de `currentColor` : une figure
   posée dans un bloc sombre passe à l'ivoire sans règle supplémentaire. */
.trait {
  display: block;
  width: 100%;
  height: auto;
  color: var(--encre-faint);
  overflow: visible;
}
.trait path,
.trait circle {
  /* `pathLength="1"` posé dans le SVG : la longueur vaut 1 quelle que soit la
     géométrie, une seule règle suffit donc pour toutes les figures. */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* Le dessin se déclenche à l'entrée dans le viewport. `--i` est le rang du
   tracé, `--n` le nombre total : la figure se construit trait après trait,
   dans l'ordre où un carnettiste la dessinerait. */
[data-vu='1'] .trait path,
[data-vu='1'] .trait circle,
.trait[data-vu='1'] path,
.trait[data-vu='1'] circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--e-doux);
  transition-delay: calc(var(--i, 0) * 0.11s);
}

/* Sans script, les figures sont simplement là, dessinées. Un ornement ne doit
   jamais dépendre d'un observateur pour exister. */
html:not([data-js]) .trait path,
html:not([data-js]) .trait circle { stroke-dashoffset: 0; }

/* Tailles d'usage */
.trait--petit { width: 2.25rem; }
.trait--moyen { width: 4.5rem; }
.trait--grand { width: 8rem; }

/* Ornement de coin de carte : discret, il ne doit pas concurrencer le contenu. */
.carte > .trait,
.formule > .trait {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 2.75rem;
  color: rgba(var(--rvb-braise-texte), 0.28);
  pointer-events: none;
}

/* Souligné à main levée sous un titre : deux passes légèrement décalées, comme
   un trait repassé à l'encre. */
.souligne-main {
  position: relative;
  display: inline-block;
}
.souligne-main::after {
  content: '';
  position: absolute;
  left: -0.1em; right: -0.1em; bottom: -0.24em;
  height: 0.42em;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' fill='none' stroke='%23ac3e15' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 15 C 44 7, 92 20, 196 9' opacity='.85'/%3E%3Cpath d='M10 20 C 56 13, 104 23, 190 15' opacity='.5'/%3E%3C/svg%3E");
  /* Le trait se révèle de gauche à droite en même temps que le titre. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--e-doux) 0.2s;
  pointer-events: none;
}
[data-vu='1'] .souligne-main::after { clip-path: inset(0 0 0 0); }
html:not([data-js]) .souligne-main::after { clip-path: inset(0 0 0 0); }

/* ---- 34 Tampons de passeport -------------------------------------------- */

.tampon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 9rem; height: 9rem;
  color: var(--braise-sombre);
  /* Léger dévers, comme un tampon posé à la main. */
  transform: rotate(-4deg) scale(0.82);
  opacity: 0;
  transition: transform 0.55s var(--e-ressort), opacity 0.3s ease-out;
}
[data-vu='1'] .tampon,
.tampon[data-vu='1'] { transform: rotate(-4deg) scale(1); opacity: 1; }
html:not([data-js]) .tampon { transform: rotate(-4deg); opacity: 1; }

/* Le tracé du tampon est plus épais que celui des figures décoratives : il
   encadre un mot, il doit donc tenir le même poids visuel que lui. */
.tampon .trait { position: absolute; inset: 0; width: 100%; color: inherit; }
.tampon .trait path,
.tampon .trait circle { stroke-width: 2.6; }
.tampon__texte {
  position: relative;
  /* Large : l'anneau fait 9 rem, le mot peut en prendre 6. */
  max-width: 6rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.03em;
  line-height: 1.12;
  text-transform: uppercase;
  text-align: center;
  color: var(--braise-sombre);
}

/* Timbre-poste autour d'une photo : la dentelure est un dégradé radial répété,
   pas une image — net à toutes les tailles, et zéro requête. */
.timbre {
  position: relative;
  padding: 0.7rem;
  background: var(--fond-0);
  filter: drop-shadow(0 10px 24px rgba(var(--rvb-ombre), 0.18));
  --dent: 9px;
  -webkit-mask:
    radial-gradient(var(--dent) at var(--dent) var(--dent), #0000 98%, #000) -12px -12px,
    linear-gradient(#000 0 0) padding-box;
  mask:
    radial-gradient(var(--dent) at var(--dent) var(--dent), #0000 98%, #000) -12px -12px,
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-size: 24px 24px, auto;
  mask-size: 24px 24px, auto;
}
.timbre img { display: block; width: 100%; height: auto; }

/* ---- 35 Fil d'itinéraire ------------------------------------------------ */

/* Ligne pointillée qui descend la page et se trace au fil du défilement.
   `--avance` va de 0 à 1, posé par le script. Elle est décorative : masquée
   aux lecteurs d'écran, et absente sous 1100 px où la place manque. */
main { position: relative; }

.fil-route {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--gouttiere) * 0.5);
  width: 4px;
  z-index: 1;
  color: rgba(var(--rvb-braise-texte), 0.4);
  pointer-events: none;
  --avance: 0;
}
.fil-route__ligne {
  width: 4px; height: 100%;
  stroke-dasharray: 0.012 0.014;
}
.fil-route__ligne path {
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--avance));
}
.fil-route__jalon {
  position: absolute;
  left: 50%;
  top: calc((var(--rang) + 0.5) * 25%);
  width: 1.75rem;
  margin-left: -0.875rem;
  padding: 0.28rem;
  border-radius: 50%;
  background: var(--fond);
  color: var(--braise-texte);
  transform: scale(calc(0.4 + var(--avance) * 0.6));
  opacity: var(--avance);
  transition: transform 0.3s var(--e-doux), opacity 0.3s;
}
.fil-route__jalon .trait { color: inherit; }

@media (max-width: 1099px) { .fil-route { display: none; } }

/* ---- 36 Micro-interactions ---------------------------------------------- */

/* Photos qui se redressent au survol, comme un polaroïd qu'on remet droit. */
.polaroid {
  transform: rotate(var(--dever, -1.6deg));
  transition: transform 0.5s var(--e-doux), box-shadow 0.5s var(--e-doux);
}
@media (hover: hover) {
  .polaroid:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 22px 44px -18px rgba(var(--rvb-ombre), 0.3);
  }
}


@media (prefers-reduced-motion: reduce) {
  /* Les figures restent DESSINÉES, jamais absentes : c'est l'exigence du
     cahier des charges. Seul le mouvement disparaît. */
  .trait path,
  .trait circle { stroke-dashoffset: 0 !important; transition: none !important; }
  .souligne-main::after { clip-path: inset(0 0 0 0) !important; transition: none !important; }
  .tampon { transform: rotate(-7deg) !important; opacity: 1 !important; transition: none !important; }
  .fil-route__ligne path { stroke-dashoffset: 0 !important; }
  .fil-route__jalon { transform: none !important; opacity: 1 !important; }
  .polaroid { transform: none !important; }
}

/* Rangée de tampons : ils se posent l'un après l'autre, avec des déports
   différents pour éviter l'alignement mécanique. */
.tampons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 2.25rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.tampons { gap: clamp(1.5rem, 4vw, 3rem); }
.tampons .tampon:nth-child(1) { transform: rotate(-5deg) scale(0.82); }
.tampons .tampon:nth-child(2) { transform: rotate(3deg) scale(0.82); }
.tampons .tampon:nth-child(3) { transform: rotate(-2deg) scale(0.82); }
[data-vu='1'] .tampons .tampon:nth-child(1) { transform: rotate(-4deg) scale(1); transition-delay: 0.05s; }
[data-vu='1'] .tampons .tampon:nth-child(2) { transform: rotate(5deg) scale(1); transition-delay: 0.22s; }
[data-vu='1'] .tampons .tampon:nth-child(3) { transform: rotate(-3deg) scale(1); transition-delay: 0.39s; }
@media (max-width: 520px) {
  .tampons .tampon { width: 5.25rem; height: 5.25rem; }
  .tampons .tampon__texte { font-size: 0.625rem; max-width: 3.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tampons .tampon { transform: rotate(-4deg) !important; }
}

/* Signature d'auteur en fin d'article. Le playbook en fait un signal
   d'autorité : l'auteur nommé, sa qualification, un lien vers sa page, et des
   dates sincères. Elle doit se lire, pas se cacher dans le balisage. */
.signature {
  display: grid;
  gap: 0.3rem;
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--braise-texte);
  background: var(--fond-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.signature__qui { font-size: var(--t-base); color: var(--encre); }
.signature__qui a:not(.btn) { color: var(--braise-texte); }
.signature__dates { font-size: var(--t-sm); color: var(--encre-dim); }

/* Tableau comparatif d'article. */
.tableau-enrobe { overflow-x: auto; margin-block: clamp(1.5rem, 3vw, 2.25rem); }
.tableau {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: var(--t-sm);
  text-align: left;
}
.tableau caption {
  caption-side: bottom;
  padding-top: 0.7rem;
  font-size: var(--t-xs);
  color: var(--encre-faint);
  text-align: left;
}
.tableau th, .tableau td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--fond-3);
  vertical-align: top;
}
.tableau thead th {
  background: var(--fond-2);
  color: var(--encre);
  font-weight: 600;
  border-bottom: 2px solid var(--fond-4);
}
.tableau tbody th { font-weight: 600; color: var(--encre); }
.tableau td { color: var(--encre-dim); }

/* WhatsApp dans la capsule du header. Zone de tap de 44 px pleine — le glyphe
   fait 22 px, c'est le padding qui porte la cible, pas l'icône. Le header est
   translucide en haut de page puis opaque au scroll : la couleur doit tenir
   dans les deux états, on prend donc le vert de la marque WhatsApp, qui se
   détache aussi bien sur l'ivoire que sur une photo. */
.entete__wa {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-inline: -0.25rem;
  flex: none;
  border-radius: var(--r-pill);
  color: #1f7a4d;
  transition: color 0.25s var(--e-doux), background-color 0.25s var(--e-doux);
}
.entete__wa svg { width: 22px; height: 22px; }
.entete__wa:hover,
.entete__wa:focus-visible {
  color: #14603a;
  background: rgba(37, 211, 102, 0.14);
}

/* Figure au trait posée dans la gouttière d'une section. Elle vit dans la
   marge : sur les écrans trop étroits pour avoir une gouttière, elle
   disparaît plutôt que de venir chevaucher le texte — le brief est explicite
   là-dessus, un ornement ne doit jamais gêner la lecture. */
.trait-marge {
  position: absolute;
  right: clamp(0.5rem, 2vw, 2.5rem);
  top: clamp(1rem, 4vw, 3rem);
  width: clamp(2.75rem, 4.5vw, 4.5rem);
  color: var(--braise-texte);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}
.section { position: relative; }
@media (max-width: 1180px) { .trait-marge { display: none; } }

/* ---- 37 Allègement du rendu au défilement ------------------------------- */

/* Le flou d'arrière-plan est le poste le plus cher du premier écran sur
   mobile : le navigateur doit relire ce qu'il y a sous l'élément à chaque
   image, et l'en-tête est fixe, donc traversé par toute la page. La capsule
   est désormais opaque à 97 % : elle se lit très bien sans lui. */
@media (max-width: 1000px) {
  .entete__inner::before,
  .entete[data-teinte='1'] .entete__inner::before {
    backdrop-filter: none;
    background: rgba(var(--rvb-fond), 0.97);
  }
  .heroA__preuve li,
  .heroB__preuve li { backdrop-filter: none; }
}

/* Essai écarté : `content-visibility: auto` sur les sections supprimait bien
   des petites saccades, mais provoquait une image de 330 à 350 ms à l'entrée
   d'une grande section — la hauteur réservée ne peut pas coïncider avec la
   hauteur réelle, et le recalcul se paie d'un coup. Mesuré, puis retiré. */

/* `will-change` réserve une couche en mémoire : posé à demeure sur beaucoup
   d'éléments, il coûte plus qu'il ne rapporte. On ne le laisse que sur ce qui
   bouge réellement pendant un défilement. */
.photo--zoom img,
.carte-photo img,
.carte-tour img { will-change: auto; }