/* ==========================================================================
   LE VILLAGE — LA DERNIÈRE RENTRÉE
   Landing page de conversion · Fabuleuses au Foyer
   --------------------------------------------------------------------------
   Sommaire
   01. Tokens & reset
   02. Typographie
   03. Utilitaires & animations
   04. Boutons & CTA
   05. Chrome de page (barre d'annonce, progression, sommaire, CTA sticky)
   06. Composants transverses (cartes, accordéons, tableaux, citations)
   07. Sections 1 → 20
   08. Responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS & RESET
   ========================================================================== */

:root {
  /* Vert Trustpilot : #00B67A est la couleur de marque — elle ne passe qu'en
     graphique (étoiles). Pour du texte sur clair, 2,63:1 est illisible : on
     utilise --tp-vert-texte, 4,53:1 sur blanc. Sur fond nuit c'est l'inverse,
     la couleur de marque passe à 5,64:1 : --tp-vert-nuit. */
  --tp-vert:        #00B67A;
  --tp-vert-texte:  #00875F;
  --tp-vert-nuit:   #6FE3A8;

  /* — Couleurs de marque — */
  --jaune:        #FFC529;   /* primaire */
  --jaune-vif:    #FFB300;
  --jaune-doux:   #FFE9A8;
  --jaune-wash:   #FFF7E2;

  --rose:         #FDEEF2;   /* secondaire — rose pâle */
  --rose-wash:    #FEF7F9;
  --rose-vif:     #FF3D8F;   /* rose signature du hero actuel */

  --magenta:      #D6006E;   /* accent CTA — contraste AA sur clair */
  --magenta-fonce:#A80057;
  --magenta-wash: #FFF0F6;

  /* Surfaces sombres : bleu nuit, jamais noir. Tous les textes de la charte
     y passent AAA (blanc 14,85 · jaune 9,38 · gris bleuté 8,58). Seule
     exception : le magenta CTA tombe à 2,89 — sur nuit, bouton JAUNE. */
  --nuit:         #152842;
  --nuit-clair:   #1D3456;   /* cartes et reliefs posés sur le nuit */
  --nuit-profond: #0F1E33;
  --sur-nuit:     #E8EEF6;   /* corps de texte sur nuit */
  --sur-nuit-doux:#B9C6D8;   /* texte secondaire sur nuit */
  --nuit-trait:   rgba(255,255,255,.14);

  --encre:        #16121A;   /* texte principal */
  --encre-doux:   #57505E;   /* texte secondaire */
  --encre-clair:  #6F6776;   /* AA sur crème, rose et jaune pâle */
  --creme:        #FFFCF7;   /* fond de page */
  --blanc:        #FFFFFF;
  --trait:        #EDE6E9;

  --vert:         #0B6B43;   /* recharge, validations */
  --vert-clair:   #0F7B4F;
  --vert-wash:    #EAF6F0;
  --vert-bord:    #BFE3CF;

  /* — Mur à selfies —
   Mosaïque en colonnes : les selfies ont tous des formats différents, une
   grille régulière les recadrerait et ferait mentir le « sans mise en scène ».
   Chacun garde donc ses proportions, et le mur se referme tout seul. */
.mur-selfies {
  columns: 4 200px;
  column-gap: clamp(.55rem, 1.4vw, .9rem);
}
.selfie {
  break-inside: avoid;
  margin: 0 0 clamp(.55rem, 1.4vw, .9rem);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--rose);
  box-shadow: 0 10px 24px -14px rgba(22,18,26,.4);
  transition: transform .3s var(--easing), box-shadow .3s var(--easing);
}
/* Un portrait très allongé mangeait toute une colonne : on plafonne la
   hauteur, en gardant le cadrage centré sur le visage. */
.selfie img {
  width: 100%; display: block;
  max-height: clamp(260px, 30vw, 380px);
  object-fit: cover; object-position: center 35%;
}
.selfie:hover {
  transform: translateY(-4px) rotate(-.8deg);
  box-shadow: 0 18px 34px -14px rgba(22,18,26,.45);
  z-index: 2; position: relative;
}
/* Une légère inclinaison alternée : l'album punaisé, pas la planche contact. */
.selfie:nth-child(3n)   { transform: rotate(.9deg); }
.selfie:nth-child(4n+1) { transform: rotate(-.7deg); }
@media (prefers-reduced-motion: reduce) {
  .selfie, .selfie:hover { transform: none; }
}
@media (max-width: 700px) { .mur-selfies { columns: 2 140px; } }

/* Preuve photo du diplôme, dans la carte du même nom */
.diplome__preuve {
  margin: 1rem 0 0;
  border-radius: var(--r-m);
  overflow: hidden;
  position: relative;
}
.diplome__preuve img { width: 100%; display: block; }
.diplome__preuve figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .8rem .6rem;
  background: linear-gradient(transparent, rgba(22,18,26,.75));
  color: #fff; font-size: .78rem; text-align: center;
}

/* Section de respiration : moins de hauteur qu'une section de contenu. */
.section--mince { padding-block: clamp(2rem, 5vw, 3.2rem); }

/* — Carrousel —
   Une piste qui défile avec accroche (scroll-snap) et des points en dessous.
   Le défilement automatique est piloté par le JS et s'arrête dès que la
   visiteuse touche la piste : on ne lui reprend jamais la main. */
.carrousel { position: relative; }
.carrousel__piste {
  display: flex;
  gap: clamp(.6rem, 2vw, 1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-inline: calc(var(--pad) * -1);
  padding: .3rem var(--pad) .6rem;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__vue {
  flex: 0 0 var(--vue, min(78%, 320px));
  scroll-snap-align: center;
  margin: 0;
}
.carrousel__vue img { width: 100%; display: block; }

/* Vignettes encadrées (mosaïque du hero) */
.carrousel--cadre .carrousel__vue {
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombre-m);
}
.carrousel--cadre .carrousel__vue img { aspect-ratio: 16 / 10; object-fit: cover; }

/* Polaroïds détourés : ils portent déjà leur cadre, on ne leur en ajoute pas */
.carrousel--polaroid .carrousel__piste { align-items: center; padding-block: 1rem; }
.carrousel--polaroid .carrousel__vue {
  flex: 0 0 var(--vue, min(70%, 300px));
  filter: drop-shadow(0 14px 26px rgba(22,18,26,.18));
}
.carrousel--polaroid .carrousel__vue img { height: auto; }

/* Vraies photos, hauteurs libres, coins arrondis comme le reste de la page.
   (L'ancienne variante polaroïd supposait des PNG détourés portant déjà
   leur cadre : sur de vraies photos elle laissait des angles vifs.) */
.carrousel--photos .carrousel__piste { align-items: center; padding-block: 1rem; }
.carrousel--photos .carrousel__vue {
  flex: 0 0 var(--vue, min(72%, 330px));
  border-radius: var(--r-l);
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 32px -14px rgba(22,18,26,.32);
}
.carrousel--photos .carrousel__vue img { width: 100%; height: auto; display: block; }

/* Carrousel large, pour les transitions entre deux blocs de texte */
.carrousel--large .carrousel__vue {
  flex: 0 0 var(--vue, min(80%, 380px));
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombre-m);
}
.carrousel--large .carrousel__vue img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Le visuel de chaque ligne du planning */
.planning__visuel {
  margin: 0; width: 100%;
  border-radius: var(--r-m); overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--rose);
}
.planning__visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Visuel détouré (PNG transparent, composition déjà cadrée avec ses ombres) :
   `cover` le rognerait n'importe comment. On le laisse entier, posé sur le
   rose de la marque, avec un peu d'air autour. */
.planning__visuel--detoure { background: var(--rose-wash); }
.planning__visuel--detoure img { object-fit: contain; padding: .45rem; }

/* — Emplacement photo encore vide —
   Gris, en pointillés, avec le sujet attendu écrit dessus. Volontairement
   visible : c'est un rappel de production, pas un élément de la page finie.
   Il ne doit PAS partir en ligne tel quel. */
.planning__visuel.sans-photo {
  display: grid; place-content: center; justify-items: center;
  gap: .15rem; padding: .6rem;
  background: #F1EFF2;
  border: 2px dashed #C9C3CE;
  text-align: center;
}
.sans-photo span { font-size: 1.5rem; line-height: 1; opacity: .55; }
.sans-photo b {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8B8392;
}
.sans-photo small { font-size: .64rem; line-height: 1.25; color: #9A93A1; }
/* Les trois dessins « où écouter » occupent la colonne visuelle : en
   grille serrée, ils tiennent dans la même largeur qu'une photo. */
.planning__ou {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem;
  align-items: end;
}
.planning__ou img { width: 100%; height: auto; border-radius: var(--r-s); }
@media (max-width: 820px) {
  .planning__ou { max-width: 260px; }
}
/* Vignette avant/après glissée dans une carte de mois */
.mois--illustre { position: relative; overflow: hidden; }
.mois--illustre img {
  display: block; width: 100%; margin-top: .7rem;
  border-radius: var(--r-s);
}

.carrousel__points {
  display: flex; justify-content: center; gap: .4rem;
  margin-top: .5rem;
}
.carrousel__point {
  width: 7px; height: 7px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--trait);
  cursor: pointer;
  transition: background .25s var(--easing), transform .25s var(--easing);
}
.carrousel__point.est-actif { background: var(--magenta); transform: scale(1.5); }
/* Zone de clic confortable au doigt, sans grossir la pastille */
.carrousel__point::after { content: ''; position: absolute; inset: -10px; }
.carrousel__point { position: relative; }

/* Le carrousel du hero ne sert que sur petit écran : au-dessus, les
   mosaïques latérales font déjà le travail. */
.carrousel--hero { display: none; }
@media (max-width: 900px) {
  .carrousel--hero { display: block; margin: 1.6rem 0 .4rem; }
}

/* — Bulles de messages —
     Trois teintes prises dans la DA, toutes validées à ≥ 4,5:1 avec du blanc :
     turquoise 4,87 · magenta 5,14 · ambre 5,08. Ne pas les éclaircir. */
  --bulle-turquoise: #0E7C91;   /* blanc dessus : 4,87 */
  --bulle-magenta:   #D6006E;   /* blanc dessus : 5,14 */
  --bulle-ambre:     #FFA43D;   /* ENCRE dessus : 9,36 — un ambre foncé virait
                                   au brun et sortait de la DA */

  --rouge:        #A81F16;   /* décharge */
  --rouge-clair:  #C0392B;
  --rouge-wash:   #FFF1EF;
  --rouge-bord:   #F6CFC9;

  /* — Typo — */
  --serif:  'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --manu:   'Caveat', 'Bradley Hand', cursive;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* — Rythme — */
  --pad: clamp(1.25rem, 5vw, 2rem);
  --gap: clamp(1rem, 2.5vw, 1.75rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --max: 1160px;
  --max-texte: 46rem;

  /* — Rayons & ombres — */
  --r-s:  10px;
  --r-m:  18px;
  --r-l:  28px;
  --r-xl: 40px;
  --ombre-s: 0 2px 8px rgba(22,18,26,.05);
  --ombre-m: 0 12px 32px -12px rgba(22,18,26,.16);
  --ombre-l: 0 28px 64px -24px rgba(22,18,26,.24);
  --ombre-cta: 0 10px 26px -8px rgba(214,0,110,.5);

  /* — Chrome — */
  --h-annonce: 44px;
  --easing: cubic-bezier(.22,1,.36,1);
}

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

html {
  scroll-behavior: smooth;
  /* décalage pour la barre d'annonce sticky lors des ancres */
  scroll-padding-top: calc(var(--h-annonce) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--jaune-doux); color: var(--encre); }

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

/* Lien d'évitement */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre); color: var(--blanc);
  padding: .75rem 1.25rem; z-index: 999; border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

/* ==========================================================================
   02. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 1, 'opsz' 40;
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 6.2vw, 4.25rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 4.3vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 20; }
h4 { font-size: 1.1rem; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 650; }

/* Sur-titres — petites capitales espacées */
.surtitre {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-clair);
  margin: 0 0 1.1rem;
}
.surtitre::before {
  content: ''; width: 26px; height: 2px; background: var(--jaune-vif); border-radius: 2px;
}
.surtitre--centre { justify-content: center; }
/* L'émoji du sur-titre est plus gros que le texte : à .74rem en majuscules
   il devient illisible. Il reste décoratif (aria-hidden dans le HTML). */
.surtitre > span[aria-hidden="true"] { font-size: 1.45em; line-height: 1; }
.surtitre--magenta { color: var(--magenta); }
/* Sur fond sombre, le magenta tombe à 2,89 : on passe au jaune. */
.surtitre--jaune { color: var(--jaune); }
.surtitre--jaune::before { background: var(--jaune); }
.surtitre--magenta::before { background: var(--magenta); }

/* Accent manuscrit */
.manu {
  font-family: var(--manu);
  font-weight: 700;
  font-size: 1.42em;
  line-height: .9;
  letter-spacing: .005em;
}
.manu--magenta { color: var(--magenta); }
/* ⚠️ Le jaune manuscrit ne tient QUE sur fond sombre : sur le crème il
   tombe à 1,55:1, illisible. Sur fond clair, utiliser .manu--magenta. */
.manu--jaune   { color: var(--jaune-vif); }
/* Une manuscrite en aparté : elle commente le titre, elle ne le concurrence
   pas. Plus petite que le corps du H2, et détachée sur sa propre ligne. */
.manu--aparte {
  display: block; font-size: .72em; line-height: 1.15;
  margin-top: .55rem; opacity: .92;
}

/* Soulignement dessiné à la main (SVG animé) */
.souligne { position: relative; display: inline-block; white-space: nowrap; }
.souligne svg {
  position: absolute; left: -2%; bottom: -.28em; width: 104%; height: .42em;
  overflow: visible; pointer-events: none;
}
.souligne svg path {
  fill: none; stroke: var(--magenta); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 400; stroke-dashoffset: 400;
  transition: stroke-dashoffset 1.1s var(--easing) .15s;
}
.is-visible .souligne svg path { stroke-dashoffset: 0; }

/* Surlignage feutre */
.marque {
  background-image: linear-gradient(transparent 58%, var(--jaune-doux) 58%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  padding: 0 .12em;
  transition: background-size .8s var(--easing) .2s;
}
.is-visible .marque { background-size: 100% 100%; }
.marque--rose { background-image: linear-gradient(transparent 58%, #FFD6E7 58%); }
.marque--vert { background-image: linear-gradient(transparent 58%, #CBEBD9 58%); }

.rature { text-decoration: line-through; text-decoration-color: var(--magenta); text-decoration-thickness: 3px; opacity: .55; }

.chapo {
  font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem);
  color: var(--encre-doux);
  max-width: var(--max-texte);
}

.petit { font-size: .875rem; line-height: 1.5; color: var(--encre-doux); }
.tres-petit { font-size: .78rem; line-height: 1.45; color: var(--encre-clair); }

/* ==========================================================================
   03. UTILITAIRES & ANIMATIONS
   ========================================================================== */

.contenu { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.contenu--etroit { max-width: 56rem; }
.contenu--texte  { max-width: 44rem; }

.section { padding-block: var(--section-y); position: relative; }
.section--rose  { background: var(--rose); }
.section--jaune { background: var(--jaune-wash); }
.section--blanc { background: var(--blanc); }
.section--encre { background: var(--encre); color: #F4F1F5; }
.section--encre h2, .section--encre h3 { color: var(--blanc); }
.section--encre .chapo { color: #BFB7C4; }

/* — Section bleu nuit —
   Réservée aux trois temps forts : la lettre d'Hélène, la communauté et la
   chute. Ailleurs, elle perdrait son effet.
   Le sélecteur double (.section.section--nuit) est volontaire : sans lui,
   des règles plus loin dans la feuille — .cercle p par exemple — repassent
   devant et remettent du texte sombre sur le fond sombre. */
.section--nuit { background: var(--nuit); color: var(--sur-nuit); }
.section.section--nuit h2,
.section.section--nuit h3 { color: var(--blanc); }
.section.section--nuit p,
.section.section--nuit li { color: var(--sur-nuit-doux); }
.section.section--nuit .chapo { color: var(--sur-nuit); }
.section.section--nuit .surtitre { color: var(--sur-nuit-doux); }
.section.section--nuit .tres-petit { color: #8FA2BC; }
.section.section--nuit strong { color: var(--blanc); }
.section.section--nuit .marque { background: var(--jaune); color: var(--nuit); }
.section.section--nuit .manu--magenta { color: var(--jaune); }
/* Le magenta ne passe pas sur le nuit (2,89:1) : les boutons y sont jaunes. */
.section.section--nuit .btn:not(.btn--jaune) { background: var(--jaune); color: var(--nuit); box-shadow: none; }

/* Les cartes claires posées sur le nuit gardent leurs couleurs d'origine :
   sinon on se retrouve avec du texte blanc sur fond blanc. */
/* Une carte claire posée sur le nuit reprend les couleurs de texte
   normales. On passe par l'héritage plutôt que par une règle sur « span » :
   celle-ci attrapait aussi l'étiquette « Recommandé » et le chiffre du prix,
   qui ont chacun leur propre couleur. */
.section.section--nuit .offre { color: var(--encre-doux); }
.section.section--nuit .offre p,
.section.section--nuit .offre li { color: inherit; }
.section.section--nuit .offre__type { color: var(--encre-clair); }
.section.section--nuit .offre b,
.section.section--nuit .offre strong { color: var(--encre); }
/* Le bouton d'une carte claire garde le magenta de marque : sur du blanc
   il passe à 5,14. La bascule en jaune ne vaut que sur le fond sombre. */
.section.section--nuit .offre .btn {
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--ombre-cta);
}
.section.section--nuit .offre .btn--fantome { background: transparent; box-shadow: none; }
.section.section--nuit .evenement h4,
.section.section--nuit .evenement strong,
.section.section--nuit .note strong,
.section.section--nuit .temoignage p,
.section.section--nuit .temoignage strong { color: var(--encre); }
.section.section--nuit .evenement p,
.section.section--nuit .note p,
.section.section--nuit .note { color: var(--encre-doux); }
/* Les cadres et les ombres doivent se voir sur le fond sombre. */
.section.section--nuit .evenement { border-color: var(--nuit-trait); }
.section.section--nuit .bande-photos figure,
.section.section--nuit .scene { box-shadow: 0 24px 50px -22px rgba(0,0,0,.7); }

.centre { text-align: center; }
.centre .chapo { margin-inline: auto; }

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

/* — Reveal au scroll — */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--easing), transform .7s var(--easing);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marque { background-size: 100% 100% !important; transition: none; }
  .souligne svg path { stroke-dashoffset: 0 !important; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@keyframes flotte    { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes pulseDoux { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.06); opacity: .85 } }
@keyframes defile    { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes apparait  { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes brille    { 0% { background-position: -180% 0 } 100% { background-position: 180% 0 } }

/* ==========================================================================
   04. BOUTONS & CTA
   ========================================================================== */

.btn {
  --btn-bg: var(--magenta);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--sans); font-weight: 650; font-size: 1.02rem;
  letter-spacing: -.005em;
  line-height: 1.25;
  text-align: center; text-decoration: none;
  padding: 1.05em 1.9em;
  min-height: 56px;
  border: 0; border-radius: 100px;
  cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: var(--ombre-cta);
  transition: transform .25s var(--easing), box-shadow .25s var(--easing), background-color .25s;
}
.btn:hover { background: var(--magenta-fonce); transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(214,0,110,.55); }
.btn:active { transform: translateY(0) scale(.99); }

/* reflet qui balaie le bouton */
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.32) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: brille 4.5s ease-in-out infinite;
  pointer-events: none;
}

.btn--grand { font-size: 1.12rem; padding: 1.2em 2.3em; min-height: 64px; }
.btn--large { width: 100%; }

.btn--jaune  { --btn-bg: var(--jaune); --btn-fg: var(--encre); box-shadow: 0 10px 26px -8px rgba(255,179,0,.55); }
.btn--jaune:hover { background: var(--jaune-vif); box-shadow: 0 16px 34px -10px rgba(255,179,0,.6); }

.btn--fantome {
  --btn-bg: transparent; --btn-fg: var(--encre);
  border: 1.5px solid var(--encre); box-shadow: none;
}
.btn--fantome::after { display: none; }
.btn--fantome:hover { background: var(--encre); color: var(--blanc); }

.lien-doux {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; font-size: .97rem;
  color: var(--magenta); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
  transition: gap .2s var(--easing), color .2s;
}
.lien-doux:hover { gap: .8em; color: var(--magenta-fonce); }

.sous-btn {
  font-size: .84rem; line-height: 1.5; color: var(--encre-doux);
  margin-top: .9rem; max-width: 30rem;
}
.centre .sous-btn { margin-inline: auto; }

/* ==========================================================================
   05. CHROME DE PAGE
   ========================================================================== */

/* — Barre d'annonce — */
.annonce {
  position: sticky; top: 0; z-index: 60;
  background: var(--nuit); color: var(--blanc);
  min-height: var(--h-annonce);
  display: flex; align-items: center;
  font-size: .85rem; font-weight: 500;
  overflow: hidden;
}
.annonce__piste { display: flex; width: 100%; justify-content: center; }
.annonce__texte { display: inline-flex; align-items: center; gap: .5em; padding: .55rem var(--pad); text-align: center; white-space: nowrap; margin: 0; }
.annonce b { color: var(--jaune); font-weight: 650; }
.annonce .flamme { animation: pulseDoux 2.4s ease-in-out infinite; display: inline-block; }

/* Défilement uniquement si le texte déborde (mobile) */
.annonce--defile .annonce__piste { width: max-content; animation: defile 22s linear infinite; }
.annonce--defile .annonce__texte { padding-inline: 1.5rem; }

/* — Barre de progression de lecture — */
.progression {
  position: fixed; top: 0; left: 0; z-index: 70;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--jaune), var(--jaune-vif), var(--magenta));
  transition: width .12s linear;
  pointer-events: none;
}

/* — Toast mi-chemin — */
.toast {
  position: fixed; z-index: 80;
  left: 50%; bottom: 100px;
  transform: translate(-50%, 20px);
  background: var(--encre); color: var(--blanc);
  padding: .8rem 1.3rem; border-radius: 100px;
  font-size: .87rem; font-weight: 550;
  box-shadow: var(--ombre-l);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--easing), transform .45s var(--easing);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* — Sommaire déroulant — */
.sommaire { position: fixed; z-index: 65; right: 16px; top: calc(var(--h-annonce) + 14px); }
.sommaire__btn {
  display: inline-flex; align-items: center; gap: .5em;
  background: rgba(255,252,247,.88); backdrop-filter: blur(12px);
  border: 1px solid var(--trait); border-radius: 100px;
  padding: .55rem 1rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--ombre-s);
  transition: background .2s, box-shadow .2s;
}
.sommaire__btn:hover { background: var(--blanc); box-shadow: var(--ombre-m); }
.sommaire__btn svg { transition: transform .3s var(--easing); }
.sommaire[open] .sommaire__btn svg { transform: rotate(180deg); }
.sommaire__liste {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 230px; padding: .5rem;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r-m); box-shadow: var(--ombre-l);
  list-style: none; margin: 0;
  animation: apparait .25s var(--easing);
}
.sommaire__liste a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem .8rem; border-radius: var(--r-s);
  font-size: .9rem; font-weight: 550; text-decoration: none;
  transition: background .18s;
}
.sommaire__liste a:hover { background: var(--rose); }
.sommaire__liste a span { color: var(--encre-clair); font-size: .82rem; }

/* — CTA sticky bas d'écran — */
.cta-sticky {
  position: fixed; z-index: 75; left: 0; right: 0; bottom: 0;
  padding: .7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,252,247,.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--trait);
  transform: translateY(110%);
  transition: transform .4s var(--easing);
}
.cta-sticky.is-on { transform: none; }
/* Sur grand écran la barre reste pleine largeur (le bandeau flouté ancre le bas
   de page), mais le bouton ne s'étire pas : il garde une largeur de bouton et
   se centre. Sur mobile il reprend toute la place disponible (règle plus bas). */
.cta-sticky { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cta-sticky .btn {
  flex: 0 1 auto;
  min-width: 300px; max-width: 460px;
  min-height: 54px; font-size: 1rem;
}

/* Raccourci WhatsApp dans la barre — mobile uniquement : sur petit écran,
   la barre fixe devient la seule zone d'action, et la pastille flottante
   disparaît pour ne pas encombrer le coin de l'écran. */
.cta-sticky__wa {
  display: none;
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  place-items: center;
  box-shadow: 0 6px 18px -6px rgba(37,211,102,.7);
  transition: transform .25s var(--easing);
}
.cta-sticky__wa:active { transform: scale(.95); }
.cta-sticky__wa svg { width: 27px; height: 27px; }
.cta-sticky__compte {
  display: none;
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.cta-sticky.a-compte .cta-sticky__compte { display: inline; }

/* — WhatsApp flottant —
   Pastille au repos, pilule au survol : le libellé se déplie et dit
   explicitement ce qui se passe si on clique. */
.whatsapp {
  position: fixed; z-index: 74; left: 16px; bottom: 88px;
  display: flex; align-items: center; gap: 0;
  padding: 6px; padding-right: 6px;
  border-radius: 100px;
  background: var(--nuit); color: #fff;
  text-decoration: none;
  box-shadow: 0 12px 30px -8px rgba(22,18,26,.5);
  transition: gap .38s var(--easing), padding-right .38s var(--easing),
              transform .25s var(--easing), box-shadow .25s;
}
.whatsapp:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -10px rgba(22,18,26,.55); }

.whatsapp__bulle {
  position: relative; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
}
.whatsapp__bulle svg { width: 27px; height: 27px; }
/* halo d'appel, discret et permanent */
.whatsapp__bulle::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366;
  animation: halo 2.8s ease-out infinite;
}
@keyframes halo {
  0%   { transform: scale(1);    opacity: .7 }
  70%  { transform: scale(1.55); opacity: 0 }
  100% { transform: scale(1.55); opacity: 0 }
}

.whatsapp__texte {
  display: grid; gap: 1px;
  max-width: 0; overflow: hidden; white-space: nowrap;
  opacity: 0;
  font-size: .76rem; line-height: 1.2; color: #BFB7C4;
  transition: max-width .42s var(--easing), opacity .3s var(--easing) .06s;
}
.whatsapp__texte b { display: block; font-size: .89rem; font-weight: 650; color: #fff; }

.whatsapp:hover, .whatsapp:focus-visible, .whatsapp.est-ouvert { gap: 12px; padding-right: 20px; }
.whatsapp:hover .whatsapp__texte,
.whatsapp:focus-visible .whatsapp__texte,
.whatsapp.est-ouvert .whatsapp__texte {
  max-width: min(260px, calc(100vw - 110px));
  opacity: 1;
}
/* Ouverture automatique : un petit sursaut pour qu'on remarque le geste,
   sinon la pilule se déplie sans qu'on ait regardé dans ce coin-là. */
.whatsapp.attire-loeil { animation: wa-sursaut .55s var(--easing); }
@keyframes wa-sursaut {
  0%, 100% { transform: translateY(0)   scale(1); }
  35%      { transform: translateY(-6px) scale(1.04); }
  65%      { transform: translateY(0)   scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp__bulle::before { animation: none; opacity: .35; }
}

/* ==========================================================================
   06. COMPOSANTS TRANSVERSES
   ========================================================================== */

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--ombre-s);
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}
.carte--survol:hover { transform: translateY(-5px); box-shadow: var(--ombre-m); }

.grille { display: grid; gap: var(--gap); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }

/* — Puce ronde numérotée / emoji — */
.pastille {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--jaune-doux);
  font-size: 1.25rem; font-weight: 700;
  font-family: var(--serif);
}
.pastille--magenta { background: var(--magenta-wash); color: var(--magenta); }
.pastille--vert { background: var(--vert-wash); color: var(--vert); }

/* — Étiquette — */
.etiquette {
  display: inline-flex; align-items: center; gap: .4em;
  background: var(--jaune); color: var(--encre);
  font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .38em .85em; border-radius: 100px;
}
.etiquette--magenta { background: var(--magenta); color: #fff; }
.etiquette--contour { background: transparent; border: 1.5px solid var(--trait); color: var(--encre-doux); }

/* — Bandeau de preuve — */
.preuve {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .7rem 1.4rem;
  font-size: .86rem; font-weight: 550; color: var(--encre-doux);
}
.preuve__item { display: inline-flex; align-items: center; gap: .45em; }
.preuve__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--trait); }
.etoiles { display: inline-flex; gap: 1px; }
.etoiles svg { width: 15px; height: 15px; }

/* — Accordéon — */
.accordeon { border-top: 1px solid var(--trait); }
.accordeon:last-of-type { border-bottom: 1px solid var(--trait); }
.accordeon > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem .25rem;
  cursor: pointer; list-style: none;
  font-weight: 600; font-size: 1.03rem;
  transition: color .2s;
}
.accordeon > summary::-webkit-details-marker { display: none; }
.accordeon > summary:hover { color: var(--magenta); }
.accordeon__signe {
  flex: none; width: 26px; height: 26px; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--rose);
  transition: transform .3s var(--easing), background .3s;
}
.accordeon[open] .accordeon__signe { transform: rotate(45deg); background: var(--magenta); color: #fff; }
.accordeon__corps { padding: 0 .25rem 1.4rem; color: var(--encre-doux); animation: apparait .35s var(--easing); }
.accordeon__corps p:last-child { margin-bottom: 0; }

/* — Tableau à deux colonnes (comparaison) — */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
}
.duo__col { border-radius: var(--r-l); padding: clamp(1.3rem, 3vw, 2rem); }
.duo__col--moins { background: #F5F1F3; }
.duo__col--plus  { background: var(--jaune-wash); border: 1.5px solid var(--jaune-doux); }
.duo__titre {
  display: flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  letter-spacing: .02em; margin-bottom: 1.1rem;
}
.duo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.duo li { font-size: .97rem; line-height: 1.45; padding-left: 1.3em; position: relative; }
.duo li::before { content: '·'; position: absolute; left: .35em; font-weight: 700; font-size: 1.3em; line-height: 1; top: .05em; }
.duo__col--moins li { color: var(--encre-doux); }
.duo__col--moins li::before { color: var(--encre-clair); }
.duo__col--plus li::before { color: var(--jaune-vif); }

/* — Bascule ❌ / ✅ — */
.bascule { display: grid; gap: 0; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--trait); background: var(--blanc); }
.bascule__ligne { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .95rem 1.2rem; }
.bascule__ligne:nth-child(odd) { background: var(--rose-wash); }
.bascule__avant { color: var(--encre-clair); text-align: right; font-size: .96rem; }
.bascule__apres { font-weight: 600; font-size: .96rem; }
.bascule__fleche { color: var(--jaune-vif); flex: none; }

/* — Une couleur par résultat ————————————————————————————————
   La colonne de droite se répète six fois en noir : on la fait chanter.
   La couleur ne code rien, elle rythme — mais elle reste lisible :
   chaque valeur est ≥ 4,5:1 sur blanc ET sur le rose-wash des lignes
   impaires (magenta de marque écarté, il reste réservé aux boutons).
     turquoise 4,61 · vert 6,22 · violet 8,12
     terracotta 5,81 · bleu 6,11 · or 6,55 (mesurés sur rose-wash) */
.bascule--couleurs .bascule__ligne:nth-child(6n+1) .bascule__apres { color: #0E7C91; }
.bascule--couleurs .bascule__ligne:nth-child(6n+2) .bascule__apres { color: #0B6B43; }
.bascule--couleurs .bascule__ligne:nth-child(6n+3) .bascule__apres { color: #5B3B8C; }
.bascule--couleurs .bascule__ligne:nth-child(6n+4) .bascule__apres { color: #A8410A; }
.bascule--couleurs .bascule__ligne:nth-child(6n+5) .bascule__apres { color: #1D5FA8; }
.bascule--couleurs .bascule__ligne:nth-child(6n+6) .bascule__apres { color: #7A5200; }

/* — « Dans un an » : la colonne de droite passe en jaune —————————
   Un jaune de marque en TEXTE sur blanc plafonne à 1,7:1 : illisible.
   On le met donc en fond, avec l'encre par-dessus (11,2:1) — c'est
   franchement jaune, et ça se lit. Le surlignage épouse le texte
   (justify-self) au lieu de peindre toute la cellule. */
.bascule--jaune .bascule__apres {
  justify-self: start; max-width: 100%;
  background: var(--jaune); color: var(--encre);
  padding: .3rem .6rem; border-radius: var(--r-s);
}

/* — Citation / témoignage — */
/* Les témoignages sont la preuve : ils ne doivent pas se fondre dans la page.
   Cadre en pointillés + léger décalage d'ombre, comme une note épinglée. */
.temoignage {
  background: var(--blanc);
  border: 2px dashed var(--jaune);
  border-radius: var(--r-l); padding: clamp(1.3rem, 3vw, 1.9rem);
  position: relative;
  box-shadow: 0 10px 26px -14px rgba(22,18,26,.25);
  transition: transform .3s var(--easing), box-shadow .3s var(--easing);
}
.temoignage:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -14px rgba(22,18,26,.3);
}
/* Dans le bandeau qui défile, pas d'effet au survol : ça saccade. */
.avis-defile .temoignage:hover { transform: none; }
.temoignage::before {
  content: '”'; position: absolute; top: -.05em; right: .3em;
  font-family: var(--serif); font-size: 5rem; line-height: 1;
  color: var(--jaune-doux); pointer-events: none;
}
.temoignage p { font-size: 1.02rem; line-height: 1.55; position: relative; }
.temoignage__auteur {
  display: flex; align-items: center; gap: .7rem;
  margin-top: 1.1rem; font-size: .9rem; font-weight: 600;
}
.temoignage__auteur img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.temoignage__auteur span { color: var(--encre-clair); font-weight: 500; }

/* — Liste à coches — */
.coches { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.coches li { display: flex; gap: .75rem; align-items: flex-start; font-size: 1rem; line-height: 1.5; }
.coches svg { flex: none; margin-top: .28em; color: var(--vert); }
.coches--croix svg { color: var(--encre-clair); }

/* — Note / encadré — */
.note {
  border-left: 3px solid var(--jaune);
  background: var(--jaune-wash);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  padding: 1.15rem 1.4rem;
  font-size: .98rem; line-height: 1.55;
}
.note--magenta { border-left-color: var(--magenta); background: var(--magenta-wash); }

/* — Mot d'Hélène —
   Volontairement différent d'un témoignage : l'autrice est nommée AVANT
   le texte, avec son visage. Pas de gros guillemets, pas de bloc citation :
   on doit comprendre au premier coup d'œil que c'est elle qui parle,
   et non une Villageoise qui la cite. */
.mot-helene {
  max-width: 42rem; margin: 2.6rem auto 0;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--ombre-s);
}
.mot-helene__qui {
  display: flex; align-items: center; gap: .8rem;
  margin: 0 0 .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--trait);
}
.mot-helene__qui img {
  width: 48px; height: 48px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 20%;
  background: var(--rose);
}
.mot-helene__qui span { display: flex; flex-direction: column; line-height: 1.25; }
.mot-helene__qui b { font-size: 1rem; }
.mot-helene__qui small { color: var(--encre-clair); font-size: .82rem; }
.mot-helene__texte {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.45;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.mot-helene__texte strong { color: var(--magenta); font-weight: 600; }

/* — Bulles de messages —
   Reprend le principe de la capture de référence : de petites bulles de
   messagerie disposées autour d'un titre, avec la queue orientée vers le
   texte. Décoratives : le sens reste dans le titre, jamais dans les bulles. */
.bulles {
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(.5rem, 2vw, 1.2rem) 0;
}
.bulle {
  position: relative;
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em .95em;
  border-radius: 16px;
  color: #fff;
  font-size: clamp(.78rem, 1.7vw, .92rem);
  font-weight: 550; line-height: 1.3;
  box-shadow: 0 8px 18px -8px rgba(22,18,26,.35);
  /* petite entrée quand la section arrive à l'écran */
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .5s var(--easing), transform .5s var(--easing);
}
.reveal.is-visible .bulle,
.bulles.is-visible .bulle { opacity: 1; transform: none; }
.bulles .bulle:nth-child(2) { transition-delay: .12s; }
.bulles .bulle:nth-child(3) { transition-delay: .24s; }
.bulles .bulle:nth-child(4) { transition-delay: .36s; }

.bulle--turquoise { background: var(--bulle-turquoise); }
.bulle--magenta   { background: var(--bulle-magenta); }
.bulle--ambre     { background: var(--bulle-ambre); color: var(--encre); }
.bulle--encre     { background: var(--nuit); }

/* La queue, dessinée en triangle, du côté indiqué */
.bulle::after {
  content: ''; position: absolute; width: 0; height: 0;
  border: 9px solid transparent;
}
.bulle--bas-g::after  { top: 100%; left: 18px;  border-top-color: currentColor; border-bottom: 0; }
.bulle--bas-d::after  { top: 100%; right: 18px; border-top-color: currentColor; border-bottom: 0; }
.bulle--haut-g::after { bottom: 100%; left: 18px;  border-bottom-color: currentColor; border-top: 0; }
.bulle--haut-d::after { bottom: 100%; right: 18px; border-bottom-color: currentColor; border-top: 0; }
/* currentColor vaut #fff sur la bulle : on repasse la teinte du fond sur la queue */
.bulle--turquoise::after { color: var(--bulle-turquoise); }
.bulle--magenta::after   { color: var(--bulle-magenta); }
.bulle--ambre::after     { color: var(--bulle-ambre); }
.bulle--encre::after     { color: var(--nuit); }

/* Disposition en « nuage » autour du titre, sur grand écran.
   Le rembourrage vertical réserve la place des bulles : sans lui, elles
   se posent sur le texte. */
.bulles--nuage {
  display: grid;
  padding: clamp(3rem, 7vw, 4.6rem) 0 clamp(3.4rem, 8vw, 5rem);
}
.bulles--nuage .bulle { position: absolute; z-index: 2; max-width: 20rem; }
.bulles--nuage .bulles__titre { position: relative; z-index: 1; text-align: center; }
.bulles__pos-1 { top: 1.9rem;  left: 0; }
.bulles__pos-2 { top: 0;       left: 39%; }
.bulles__pos-3 { bottom: 0;    right: 0; max-width: 18rem; }

/* Sur écran étroit le nuage se range en file : les bulles gardent leur rôle
   d'illustration sans écraser le titre. */
@media (max-width: 900px) {
  .bulles--nuage .bulle { position: static; max-width: none; }
  .bulles--nuage {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .5rem; padding: .5rem 0;
  }
  /* On ordonne par les classes de position, pas par nth-of-type : le titre
     est lui aussi un <p>, il fausserait le comptage. */
  .bulles--nuage .bulles__titre { flex: 1 0 100%; order: 2; margin: .8rem 0; }
  .bulles__pos-1 { order: 1; }
  .bulles__pos-2 { order: 1; }
  .bulles__pos-3 { order: 3; }
  .bulles--nuage .bulle::after { display: none; }
}

/* Variante en file simple, pour les transitions entre sections */
.bulles--file {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .55rem;
}

/* — La scène : une photo pleine largeur qui porte à elle seule la preuve —
   Elle ouvre la section communauté. Légende posée dessus, en bas à gauche. */
.scene {
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-l);
}
.scene img {
  width: 100%; display: block;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%;
}
.scene figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(3rem, 8vw, 5rem) clamp(1.1rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.6rem);
  background: linear-gradient(transparent, rgba(8,6,10,.82));
  color: #fff;
}
.scene figcaption b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  line-height: 1.2;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.scene figcaption span {
  display: block; margin-top: .2rem;
  font-size: clamp(.84rem, 1.8vw, .98rem);
  color: rgba(255,255,255,.82);
}
@media (max-width: 620px) {
  .scene img { aspect-ratio: 4 / 3; object-position: center 40%; }
}

/* — Carte du défi Reset, dessinée en CSS —
   Tient lieu de visuel tant que la bonne image n'est pas arrêtée. Dix jours,
   trois rituels par jour : sept jours cochés, trois à faire. */
.reset-carte {
  background: var(--blanc);
  border-radius: var(--r-xl);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: var(--ombre-l);
  max-width: 24rem; margin-inline: auto;
  transform: rotate(-1.2deg);
}
.reset-carte__titre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem; margin: 0 0 1rem;
  font-family: var(--manu); font-size: 1.75rem; line-height: 1;
  color: var(--magenta);
}
.reset-carte__titre span {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-clair);
}
.reset-carte__jours { list-style: none; margin: 0; padding: 0; display: grid; gap: .42rem; }
.reset-carte__jours li {
  display: grid; grid-template-columns: 2.1rem repeat(3, 1fr);
  align-items: center; gap: .42rem;
}
.reset-carte__num {
  font-size: .72rem; font-weight: 700; color: var(--encre-clair);
  font-variant-numeric: tabular-nums;
}
.reset-carte__jours i {
  height: 1.35rem; border-radius: 7px;
  border: 1.5px solid var(--trait); background: var(--creme);
}
/* Une case cochée : fond jaune et une coche dessinée en deux traits. */
.reset-carte__jours .est-coche i {
  background: var(--jaune); border-color: var(--jaune);
  position: relative;
}
.reset-carte__jours .est-coche i::after {
  /* taille fixe : en pourcentage, la coche s'étirait avec la case */
  content: ''; position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 10px; margin: -6px 0 0 -3px;
  border: solid var(--encre); border-width: 0 2.4px 2.4px 0;
  transform: rotate(42deg);
}
.reset-carte__pied {
  display: flex; justify-content: space-between; gap: .4rem;
  margin: 1rem 0 0; padding-top: .8rem;
  border-top: 1px dashed var(--trait);
  font-size: .76rem; color: var(--encre-doux);
}

/* — Bande de photos de communauté —
   Une grande à gauche, deux hautes à droite, toutes à la même hauteur de
   rangée : c'est la preuve visuelle que « la communauté » n'est pas un mot. */
.bande-photos {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  /* la rangée de photos a une hauteur fixe, la légende prend ce qu'il lui faut */
  grid-template-rows: clamp(190px, 24vw, 300px) auto;
  gap: clamp(.6rem, 1.4vw, 1rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.bande-photos figure {
  margin: 0; height: 100%;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--rose);
  box-shadow: var(--ombre-s);
}
.bande-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le badge prénom et le câlin se jouent au centre du cadre. */
.bande-photos figure:nth-child(2) img { object-position: center 30%; }
.bande-photos__legende {
  grid-column: 1 / -1;
  margin-top: .3rem;
  text-align: center;
  font-size: .92rem; color: var(--encre-doux);
}
.bande-photos__legende span { display: block; font-size: .8rem; color: var(--encre-clair); }

@media (max-width: 720px) {
  .bande-photos {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: clamp(150px, 38vw, 210px) clamp(150px, 38vw, 210px) auto;
  }
  .bande-photos__grande { grid-column: 1 / -1; }
}

/* — Photo en bandeau, avec légende — */
.photo-bandeau {
  margin: 0 0 clamp(2rem, 4vw, 2.8rem);
  border-radius: var(--r-l);
  overflow: hidden;
  position: relative;
  box-shadow: var(--ombre-m);
}
.photo-bandeau img {
  width: 100%; display: block;
  aspect-ratio: 2 / 1; object-fit: cover; object-position: center 62%;
}
/* Variante large : la photo compte autant que le texte, on lui laisse son
   cadrage paysage naturel au lieu de la rogner en bandeau 2:1. */
.photo-bandeau--large {
  max-width: 58rem;
  margin-inline: auto;
  width: min(100%, 58rem);
}
.photo-bandeau--large img { aspect-ratio: 3 / 2; object-position: center 45%; }

/* Variante moyenne : assez grande pour qu'on voie les visages, assez
   petite pour ne pas concurrencer les cartes de prix juste au-dessus. */
.photo-bandeau--moyen {
  max-width: 40rem; width: min(100%, 40rem);
  margin: 2.8rem auto 0;
}
.photo-bandeau--moyen img { aspect-ratio: 3 / 2; object-position: center 38%; }

/* Une tuile large dans le mur à selfies : pour une photo de groupe qui
   perdrait tout son sens réduite à une vignette. */
.selfie--large { break-inside: avoid; }
.photo-bandeau figcaption,
.photo-legendee figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.2rem .9rem;
  background: linear-gradient(transparent, rgba(22,18,26,.72));
  color: #fff; font-size: .92rem; font-weight: 500;
  text-align: center;
}
@media (max-width: 620px) {
  .photo-bandeau img { aspect-ratio: 3 / 2; }
}

/* — Photo légendée (portrait, format libre) — */
.photo-legendee {
  margin: 0; position: relative;
  border-radius: var(--r-l); overflow: hidden;
  box-shadow: var(--ombre-m);
}
.photo-legendee img { width: 100%; display: block; }
.photo-legendee figcaption { font-family: var(--serif); font-size: 1.02rem; }

/* — Photo — */
.photo { border-radius: var(--r-l); overflow: hidden; background: var(--rose); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--ronde { border-radius: 50%; }

/* ==========================================================================
   07. SECTIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  background:
    radial-gradient(120% 90% at 12% 0%,  var(--jaune-wash) 0%, transparent 55%),
    radial-gradient(110% 85% at 92% 8%,  var(--rose) 0%, transparent 58%),
    var(--creme);
  overflow: hidden;
}

.hero__grille {
  display: grid;
  grid-template-columns: 1fr minmax(0, 34rem) 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.hero__centre { text-align: center; }

/* Le logo est un pur lettrage (278×107) : il lui faut un peu plus de largeur
   qu'un bloc logo+baseline pour peser autant à l'œil. */
.hero__logo { width: clamp(158px, 21vw, 224px); height: auto; margin: 0 auto .4rem; }

/* Hélène veut de l'air entre la punchline et le texte : la promesse doit
   respirer avant qu'on entre dans le détail. */
.hero__h1 { margin-bottom: clamp(1.5rem, 3.4vw, 2.3rem); }
.hero__h1 .ligne2 { display: block; }

.hero__chapo {
  font-size: clamp(1.02rem, .4vw + .95rem, 1.16rem);
  line-height: 1.65;
  color: var(--encre-doux);
  max-width: 34rem; margin: 0 auto 1.8rem;
}

.hero__preuve { margin-bottom: 1.7rem; }

/* --------------------------------------------------------------------------
   PREUVES EN CARTES — hero
   Deux cartes blanches plutôt qu'une ligne de texte : sur un fond chargé,
   une ligne se noie, une carte tient toute seule.
   -------------------------------------------------------------------------- */
.preuves-cartes {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem;
}
.preuve-carte {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: .8rem 1.15rem;
  box-shadow: 0 8px 22px -12px rgba(22,18,26,.22);
  min-width: 10.5rem;
}
.preuve-carte b {
  font-family: var(--serif); font-size: 1.62rem; line-height: 1;
  color: var(--magenta); font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
/* La note Trustpilot est toujours verte, jamais magenta : c'est la couleur
   qui la rend crédible d'un coup d'œil. */
.preuve-carte--trustpilot b { color: var(--tp-vert-texte); }
.preuve-carte--trustpilot a:hover { color: var(--tp-vert-texte); }
/* Le sélecteur enfant direct est indispensable : sans lui, cette règle
   redescend dans les <span> qui sont À L'INTÉRIEUR du <b> et rapetisse
   « 13 000 » et « 4,9 » au milieu du grand chiffre. */
.preuve-carte > span,
.preuve-carte > a > span {
  font-size: .78rem; line-height: 1.32; color: var(--encre-doux);
  text-align: center; font-weight: 550;
}
.preuve-carte b span { font: inherit; color: inherit; }
.preuve-carte .etoiles { display: inline-flex; gap: 1px; margin-bottom: .1rem; }
.preuve-carte .etoiles svg { width: 13px; height: 13px; }
.preuve-carte a { color: var(--encre-doux); text-decoration: none; border-bottom: 1px solid var(--trait); }
.preuve-carte a:hover { color: var(--magenta); border-color: currentColor; }

@media (max-width: 420px) {
  /* Deux cartes côte à côte sur un petit écran : on réduit plutôt que d'empiler,
     la paire se lit comme un bloc de preuve. */
  .preuves-cartes { gap: .5rem; }
  .preuve-carte { min-width: 0; flex: 1 1 8rem; padding: .7rem .6rem; }
  .preuve-carte b { font-size: 1.35rem; }
  .preuve-carte span { font-size: .72rem; }
}

.hero__cta { display: grid; gap: .8rem; justify-items: center; }

/* Le raccourci vidéo est une vraie porte d'entrée pour celles qui ne liront
   pas : il lui faut le poids d'un bouton, pas d'un lien discret. */
.hero__video-lien {
  display: inline-flex; align-items: center; gap: .7em;
  margin-top: 1.6rem;
  font-size: 1rem; font-weight: 650;
  text-decoration: none; color: var(--encre);
  background: var(--blanc);
  border: 2px solid var(--encre);
  padding: .8rem 1.5rem .8rem .8rem; border-radius: 100px;
  box-shadow: 0 6px 0 -1px var(--encre), var(--ombre-m);
  transition: transform .25s var(--easing), box-shadow .25s var(--easing);
}
.hero__video-lien:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 -1px var(--encre), var(--ombre-l);
}
.hero__video-lien:active { transform: translateY(2px); box-shadow: 0 3px 0 -1px var(--encre); }
/* La pastille de lecture pulse doucement : c'est elle qui dit « ça se joue ». */
.hero__video-lien .play {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--magenta); color: #fff; display: grid; place-items: center;
  animation: video-pulse 2.6s ease-out infinite;
}
.hero__video-lien .play svg { width: 14px; height: 14px; }
@keyframes video-pulse {
  0%        { box-shadow: 0 0 0 0   rgba(214,0,110,.55); }
  70%, 100% { box-shadow: 0 0 0 12px rgba(214,0,110,0); }
}
.hero__video-lien small {
  display: block; font-size: .76rem; font-weight: 500; color: var(--encre-clair);
}

/* — Mosaïque de photos avant/après — */
.hero__cote { display: grid; gap: clamp(.8rem, 2vw, 1.5rem); }
.hero__cote--g { justify-items: end; }
.hero__cote--d { justify-items: start; }

.hero__vignette {
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--ombre-m);
  width: min(100%, 290px);
  animation: flotte 7s ease-in-out infinite;
}
.hero__vignette:nth-child(2) { animation-delay: -2.3s; width: min(100%, 250px); }
.hero__vignette:nth-child(3) { animation-delay: -4.6s; }
.hero__vignette img { width: 100%; }

/* --------------------------------------------------------------------------
   02 · LA DERNIÈRE RENTRÉE
   -------------------------------------------------------------------------- */

/* — L'extrait vidéo, à la charnière de deux sections —
   La carte descend sur la section sombre qui suit : elle relie le hero et
   la lettre au lieu de créer une section de plus. Le décalage est repris
   par le rembourrage haut de .rentree--sous-video, sinon le titre passe
   dessous. */
.video-charniere {
  position: relative; z-index: 4;
  max-width: 52rem;
  /* On remonte aussi dans le hero : sans ça, le bas de page du hero et la
     marge de la carte s'additionnent et laissent un grand trou. */
  margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) auto calc(-1 * var(--chevauchement));
  padding-inline: var(--pad);
  --chevauchement: clamp(3.5rem, 8vw, 6.5rem);
}
.rentree--sous-video {
  /* Juste de quoi laisser passer la carte vidéo, pas plus : la bande
     d'archives prend le relais tout de suite après. */
  padding-top: calc(var(--section-y) * .5 + clamp(3.5rem, 8vw, 6.5rem));
}

.extrait {
  position: relative; margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--nuit);
  box-shadow: 0 30px 60px -26px rgba(22,18,26,.55);
  aspect-ratio: 16 / 9;
}
.extrait__film {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
/* Un voile léger en bas : le bouton reste lisible quel que soit le plan. */
.extrait::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(transparent 55%, rgba(8,6,10,.5));
}

.extrait__play {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center;
  gap: .7rem;
  width: 100%; border: 0; background: none;
  cursor: pointer; z-index: 2;
  color: #fff;
}
.extrait__rond {
  width: clamp(58px, 9vw, 78px); height: clamp(58px, 9vw, 78px);
  border-radius: 50%;
  background: var(--magenta); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -6px rgba(214,0,110,.65);
  transition: transform .25s var(--easing);
  animation: extrait-pulse 2.8s ease-out infinite;
}
.extrait__rond svg { margin-left: 3px; }
.extrait__play:hover .extrait__rond,
.extrait__play:focus-visible .extrait__rond { transform: scale(1.09); }
@keyframes extrait-pulse {
  0%        { box-shadow: 0 10px 30px -6px rgba(214,0,110,.65), 0 0 0 0 rgba(214,0,110,.5); }
  70%, 100% { box-shadow: 0 10px 30px -6px rgba(214,0,110,.65), 0 0 0 22px rgba(214,0,110,0); }
}
.extrait__libelle {
  font-size: clamp(.82rem, 1.8vw, .95rem); font-weight: 600;
  padding: .3em .9em; border-radius: 100px;
  background: rgba(8,6,10,.55);
  backdrop-filter: blur(8px);
}
@media (prefers-reduced-motion: reduce) {
  .extrait__rond { animation: none; }
}

/* Un aplat sombre sur toute la hauteur écrasait la section. Un dégradé
   vers le nuit clair au centre lui redonne du relief. */
.rentree {
  background:
    radial-gradient(120% 60% at 50% 38%, var(--nuit-clair), transparent 70%),
    var(--nuit);
  color: var(--sur-nuit);
}
.rentree__carte { max-width: 44rem; margin-inline: auto; text-align: center; position: relative; }

/* — La bande d'archives —
   Dix ans en une rangée, tout en haut de l'au revoir. Elle allège la
   section : sans elle, on ouvrait sur un mur de texte sur fond sombre. */
.archive {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(.4rem, 1vw, .8rem);
  margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
}
.archive figure {
  margin: 0; height: clamp(100px, 13vw, 170px);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--nuit-clair);
}
.archive img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Une inclinaison alternée : une rangée d'archives, pas une planche contact. */
.archive figure:nth-child(odd)  { transform: rotate(-1.4deg); }
.archive figure:nth-child(even) { transform: rotate(1.2deg); }
@media (max-width: 760px) {
  .archive { grid-template-columns: repeat(3, 1fr); }
  .archive figure:nth-child(n+7) { display: none; }
}

/* — Photos posées dans les marges —
   Elles n'existent qu'au-delà de 1180 px : en dessous, il n'y a pas de
   marge pour les poser sans chevaucher le texte. */
.rentree__polaroid { display: none; }
@media (min-width: 1280px) {
  .rentree__polaroid {
    display: block; position: absolute;
    width: clamp(118px, 10vw, 160px);
    border-radius: var(--r-m);
    border: 5px solid var(--blanc);
    box-shadow: 0 20px 40px -18px rgba(0,0,0,.7);
    z-index: 1;
  }
  .rentree__polaroid--g1 { left: -11.5rem; top: 12%;  transform: rotate(-5deg); }
  .rentree__polaroid--d1 { right: -11.5rem; top: 26%; transform: rotate(4deg); }
  .rentree__polaroid--g2 { left: -12rem;   top: 58%;  transform: rotate(3deg); }
  .rentree__polaroid--d2 { right: -12rem;  top: 70%;  transform: rotate(-4deg); }
}

/* ==========================================================================
   LÉGENDES DE PHOTO — bandeau commun à toute la page
   Une photo sans légende est un décor ; avec une légende, c'est une preuve.
   On nomme l'événement, jamais la personne, et jamais une date qu'on n'a pas.
   ========================================================================== */
.legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 1.7rem .8rem .58rem;
  background: linear-gradient(transparent, rgba(8, 14, 26, .84));
  color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .005em; text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
/* Toute figure qui porte une légende doit l'ancrer et rogner le dégradé. */
figure:has(> .legende) { position: relative; overflow: hidden; }
figure:has(> .legende) > img { display: block; }
/* Repli pour les moteurs sans :has() — les conteneurs connus, nommément. */
.archive figure, .rentree__duo figure, .bande-photos figure,
.carrousel__vue, .mur-selfies .selfie { position: relative; overflow: hidden; }

/* Sur une vignette de mur à selfies, le bandeau doit rester discret. */
.legende--selfie { padding: 1.4rem .6rem .5rem; font-size: .71rem; }

@media (max-width: 640px) {
  .legende { font-size: .72rem; padding: 1.4rem .6rem .5rem; }
  .legende--selfie { font-size: .66rem; }
}

/* — Les coupures photo dans le corps de la lettre — */
.rentree__coupure {
  margin: clamp(1.8rem, 4vw, 2.6rem) 0;
  border-radius: var(--r-l);
  overflow: hidden; position: relative;
}
.rentree__coupure img { width: 100%; display: block; }
.rentree__coupure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(8,14,26,.85));
  color: #fff; font-size: .8rem; text-align: center;
}
/* Une coupure qui déborde du texte : elle respire mieux et tranche
   davantage avec le corps de la lettre. */
.rentree__coupure--large {
  width: min(100vw - var(--pad) * 2, 58rem);
  margin-left: 50%; transform: translateX(-50%);
}

.rentree__duo {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(.5rem, 1.5vw, .9rem);
  margin: clamp(1.8rem, 4vw, 2.6rem) 0;
}
.rentree__duo figure { margin: 0; border-radius: var(--r-m); overflow: hidden; }
.rentree__duo img { width: 100%; height: clamp(150px, 20vw, 230px); object-fit: cover; display: block; }
.rentree h2 { color: var(--blanc); margin-bottom: 1.5rem; }
.rentree p { color: var(--sur-nuit-doux); text-align: left; }
.rentree .fort {
  display: block;
  font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 1.95rem);
  color: var(--jaune); text-align: center;
  margin: 2rem 0; line-height: 1.2;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.rentree p + p { margin-top: 1.15em; }   /* de l'air entre les paragraphes */

/* La liste des « ce qui devient possible » : une puce jaune, beaucoup d'air
   entre les lignes. C'est le passage que l'œil survole — il doit respirer. */
.rentree__liste {
  list-style: none; margin: 1.6rem 0 2rem; padding: 0;
  text-align: left; max-width: 34rem; margin-inline: auto;
}
.rentree__liste li {
  position: relative;
  padding: .55rem 0 .55rem 1.6rem;
  color: var(--sur-nuit);
  line-height: 1.55;
}
.rentree__liste li::before {
  content: ""; position: absolute; left: .1rem; top: 1.15em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--jaune);
}
.rentree__chute { text-align: center !important; margin-top: 1.4rem; }

.rentree__signature {
  font-family: var(--manu); font-size: 1.6rem; color: var(--jaune);
  margin-top: 1rem; display: block; text-align: center;
}
.rentree__bougie { font-size: 2rem; display: block; margin-bottom: .8rem; animation: pulseDoux 3s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   03 · LE MIROIR (diagnostic interactif)
   -------------------------------------------------------------------------- */

.miroir__boite {
  max-width: 40rem; margin-inline: auto;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r-xl); padding: clamp(1.3rem, 3.5vw, 2.2rem);
  box-shadow: var(--ombre-m);
}

.coche {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .78rem .9rem;
  border-radius: var(--r-m);
  cursor: pointer;
  font-size: .99rem; line-height: 1.45;
  transition: background .2s;
  user-select: none;
}
.coche:hover { background: var(--rose-wash); }
.coche input { position: absolute; opacity: 0; width: 0; height: 0; }
.coche__case {
  flex: none; width: 24px; height: 24px; margin-top: .1em;
  border: 2px solid var(--trait); border-radius: 7px;
  background: var(--blanc);
  display: grid; place-items: center;
  transition: background .2s var(--easing), border-color .2s, transform .2s var(--easing);
}
.coche__case svg { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s var(--easing); }
.coche input:checked + .coche__case { background: var(--magenta); border-color: var(--magenta); transform: scale(1.06); }
.coche input:checked + .coche__case svg { opacity: 1; transform: none; }
.coche input:focus-visible + .coche__case { outline: 3px solid var(--magenta); outline-offset: 2px; }
.coche input:checked ~ .coche__texte { color: var(--encre); font-weight: 550; }
.coche__texte { color: var(--encre-doux); transition: color .2s; }

.miroir__compteur {
  display: flex; align-items: baseline; gap: .5rem;
  margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--trait);
  font-size: .88rem; color: var(--encre-clair);
}
.miroir__compteur b { font-family: var(--serif); font-size: 1.7rem; color: var(--magenta); font-variation-settings: 'SOFT' 20; }

.miroir__resultat {
  margin-top: 1.2rem;
  border-radius: var(--r-l);
  padding: 1.4rem 1.5rem;
  background: var(--jaune-wash);
  border: 1.5px solid var(--jaune-doux);
  display: none;
}
.miroir__resultat.is-on { display: block; animation: apparait .5s var(--easing); }
.miroir__resultat h3 { margin-bottom: .5rem; font-size: 1.25rem; }
.miroir__resultat p { font-size: .98rem; color: var(--encre-doux); margin-bottom: 1.2rem; }
.miroir__resultat[data-niveau="haut"] { background: var(--magenta-wash); border-color: #FFD0E4; }
.miroir__resultat[data-niveau="bas"]  { background: var(--vert-wash); border-color: #CBEBD9; }

/* --------------------------------------------------------------------------
   05 · LES 3 MENSONGES
   -------------------------------------------------------------------------- */

.mensonges__piste { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }

.mensonge {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r-l); padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column;
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}
.mensonge:hover { transform: translateY(-6px); box-shadow: var(--ombre-m); }
/* L'émoji porte le mensonge d'un coup d'œil, avant même la lecture. */
.mensonge__emoji {
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  line-height: 1;
  display: block;
  margin-bottom: .7rem;
}
.mensonge__num {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--encre-clair);
  margin-bottom: .9rem;
}
.mensonge__phrase {
  font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.22; margin-bottom: 1.1rem;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.mensonge__faux {
  display: inline-flex; align-self: flex-start; align-items: center;
  background: var(--magenta); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  padding: .3em .7em; border-radius: 5px; margin-bottom: .8rem;
  transform: rotate(-1.5deg);
}
.mensonge p { font-size: .96rem; color: var(--encre-doux); }

/* --------------------------------------------------------------------------
   07 · POINT A → POINT B — jauge de marge
   -------------------------------------------------------------------------- */

.jauge { max-width: 40rem; margin-inline: auto; }
.jauge__piste {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; margin-bottom: 1rem;
}
.jauge__cran {
  border: 0; cursor: pointer;
  padding: 1rem .6rem; border-radius: var(--r-m);
  background: var(--blanc); border: 1.5px solid var(--trait);
  font-size: .84rem; font-weight: 600; line-height: 1.25;
  text-align: center;
  transition: transform .25s var(--easing), border-color .25s, background .25s;
}
.jauge__cran .point { display: block; font-size: 1.4rem; margin-bottom: .35rem; }
.jauge__cran:hover { transform: translateY(-3px); }
.jauge__cran[aria-pressed="true"] { border-color: var(--encre); background: var(--jaune-wash); transform: translateY(-3px); box-shadow: var(--ombre-m); }
.jauge__barre { height: 10px; border-radius: 10px; background: linear-gradient(90deg,#E74C3C,#F39C12,#2ECC71,var(--jaune)); position: relative; }
.jauge__curseur {
  position: absolute; top: 50%; left: 12.5%;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blanc); border: 3px solid var(--encre);
  transform: translate(-50%,-50%);
  transition: left .5s var(--easing);
  box-shadow: var(--ombre-m);
}
.jauge__legende { margin-top: 1rem; min-height: 3.2em; font-size: .94rem; color: var(--encre-doux); text-align: center; }

/* --------------------------------------------------------------------------
   09 · TON ANNÉE EN 12 HABITUDES
   -------------------------------------------------------------------------- */

.annee__chapitre { margin-bottom: 2.2rem; position: relative; }

/* Illustration de chapitre : un polaroïd détouré, dernier élément de la
   ligne de titre. Elle est DANS le flux — en absolu elle recouvrait la
   carte du dernier mois. margin-left:auto la pousse à droite, et la marge
   négative l'empêche de faire grossir la ligne plus que nécessaire. */
.annee__illu {
  margin-left: auto; margin-block: -.4rem;
  width: clamp(96px, 11vw, 150px); height: auto;
  transform: rotate(3deg);
  filter: drop-shadow(0 12px 24px rgba(22,18,26,.18));
  flex: none;
}
.annee__chapitre--2 .annee__illu { transform: rotate(-3deg); }
@media (max-width: 760px) {
  .annee__illu { width: clamp(72px, 15vw, 104px); }
}
@media (max-width: 480px) {
  /* Sous 480 px, le titre passe sur deux lignes : la vignette prendrait
     toute la largeur restante, on la retire. */
  .annee__illu { display: none; }
}
.annee__chapitre-titre {
  display: flex; align-items: center; gap: .8rem;
  font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  margin-bottom: 1rem;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.annee__chapitre-titre small {
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  color: var(--encre-clair); letter-spacing: 0;
}
.annee__mois {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem;
}
.mois {
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: var(--r-m); padding: 1.1rem 1.15rem;
  transition: transform .3s var(--easing), box-shadow .3s var(--easing), border-color .3s;
}
.mois:hover { transform: translateY(-4px); box-shadow: var(--ombre-m); border-color: var(--jaune-doux); }
.mois__nom {
  display: flex; align-items: center; gap: .4em;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-clair); margin-bottom: .5rem;
}
.mois__titre { font-size: .95rem; line-height: 1.38; font-weight: 550; }

.annee__chapitre--1 .mois:hover { border-color: #C9E0F5; }
.annee__chapitre--2 .mois:hover { border-color: var(--jaune-doux); }
.annee__chapitre--3 .mois:hover { border-color: #FFD0E4; }

/* --------------------------------------------------------------------------
   10 · UNE SEMAINE DE VILLAGEOISE — planning
   -------------------------------------------------------------------------- */

.planning { border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--trait); background: var(--blanc); }
.planning__ligne {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 168px;
  gap: clamp(.9rem, 2vw, 1.4rem);
  align-items: start;
  padding: 1.3rem clamp(1.1rem, 3vw, 1.7rem);
  border-bottom: 1px solid var(--trait);
  transition: background .25s;
}
/* Sous 820 px : le visuel passe sous le texte, la colonne « quand » reste
   en tête de ligne comme une étiquette. */
@media (max-width: 820px) {
  .planning__ligne { grid-template-columns: 1fr; gap: .5rem; }
  .planning__ligne .planning__visuel { max-width: 260px; }
}
.planning__ligne:last-child { border-bottom: 0; }
.planning__ligne:hover { background: var(--jaune-wash); }
.planning__quand {
  display: flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--magenta); padding-top: .18em;
  margin: 0;
}
/* L'émoji porte la ligne : on la reconnaît avant de la lire. */
.planning__emoji {
  font-size: 1.6rem; line-height: 1; flex: none;
  filter: drop-shadow(0 3px 6px rgba(22,18,26,.18));
}
.planning__quoi { font-size: .98rem; line-height: 1.5; }
.planning__quoi b { display: block; font-weight: 650; margin-bottom: .15rem; }
.planning__quoi span { color: var(--encre-doux); }

/* --------------------------------------------------------------------------
   11 · IL FAUT UN VILLAGE — les 4 cercles
   -------------------------------------------------------------------------- */

.cercles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.cercle { display: flex; gap: 1.1rem; align-items: flex-start; }
.cercle h3 { font-size: 1.08rem; margin-bottom: .35rem; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }
.cercle p { font-size: .95rem; color: var(--encre-doux); margin: 0; }

.evenements { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 2.5rem; }
.evenement { border-radius: var(--r-l); overflow: hidden; background: var(--blanc); border: 1px solid var(--trait); }
.evenement img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s var(--easing); }
.evenement:hover img { transform: scale(1.05); }
.evenement__texte { padding: 1.1rem 1.2rem 1.3rem; }
.evenement__texte h4 { margin-bottom: .3rem; }
.evenement__texte p { font-size: .88rem; color: var(--encre-doux); margin: 0; }

/* --------------------------------------------------------------------------
   12 · TOUT CE QUI EST INCLUS
   -------------------------------------------------------------------------- */

.inclus { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem 2rem; }
.inclus li {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: .72rem .2rem; border-bottom: 1px dashed var(--trait);
  font-size: .99rem; line-height: 1.45;
}
.inclus svg { flex: none; margin-top: .25em; color: var(--vert); }
.inclus small { display: block; color: var(--magenta); font-weight: 600; font-size: .84rem; margin-top: .15rem; }

/* --------------------------------------------------------------------------
   13 · HÉLÈNE
   -------------------------------------------------------------------------- */

.helene { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
/* Portrait + photo de famille empilés : la colonne de gauche reste pleine
   au lieu de laisser un grand vide à côté du texte. */
.helene__colonne { display: grid; gap: clamp(.9rem, 2vw, 1.3rem); position: sticky; top: 5rem; }
.helene__photo { position: relative; }
.helene__photo img { border-radius: var(--r-xl); width: 100%; }
.helene__badge {
  position: absolute; right: -12px; bottom: 18px;
  background: var(--jaune); color: var(--encre);
  font-family: var(--manu); font-size: 1.35rem; line-height: 1.1;
  padding: .7rem 1.1rem; border-radius: var(--r-m);
  box-shadow: var(--ombre-m); transform: rotate(-3deg);
  text-align: center;
}

/* --------------------------------------------------------------------------
   14 · CE QUE ÇA COÛTE VRAIMENT — ancrage
   -------------------------------------------------------------------------- */

.ancrage { max-width: 34rem; margin-inline: auto; }
.ancrage__ligne {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .85rem 0; border-bottom: 1px dotted var(--trait);
  font-size: 1rem;
}
.ancrage__ligne span:first-child { flex: 1; color: var(--encre-doux); }
.ancrage__ligne b { font-family: var(--serif); font-size: 1.25rem; font-variation-settings: 'SOFT' 20; }
.ancrage__ligne--village {
  background: var(--jaune-wash); border: 1.5px solid var(--jaune-doux); border-radius: var(--r-m);
  padding: 1rem 1.2rem; margin-top: .8rem; border-bottom: 0;
}
.ancrage__ligne--village span:first-child { color: var(--encre); font-weight: 650; }
.ancrage__ligne--village b { color: var(--magenta); font-size: 1.6rem; }

.cafe {
  text-align: center; margin-top: 2rem;
  font-family: var(--serif); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.cafe small { display: block; font-family: var(--manu); font-size: 1.5rem; color: var(--magenta); margin-top: .4rem; }

/* --------------------------------------------------------------------------
   15 · L'OFFRE
   -------------------------------------------------------------------------- */

/* Colonnes égales et cartes étirées : les deux boutons « Je réserve ma
   place » se retrouvent à la même hauteur, quel que soit le nombre de
   puces. C'est la ligne que l'œil cherche quand il compare deux offres. */
.offres { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: stretch; max-width: 58rem; margin-inline: auto; }

.offre {
  display: flex; flex-direction: column;
  background: var(--blanc); border: 1.5px solid var(--trait);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 3.5vw, 2.2rem);
  position: relative;
}
/* La liste absorbe l'écart de hauteur, le bouton reste collé en bas. */
.offre .coches { flex: 1 0 auto; }
/* — La section prix, sur bleu nuit —
   Les deux cartes restent blanches et se distinguent par leur accent :
   magenta pour l'annuel (celui qu'on recommande), turquoise pour le
   mensuel. Les deux passent AA sur blanc — magenta 5,14, turquoise 4,87. */
.section--prix .paiement { color: var(--sur-nuit-doux); }
.section--prix .lien-doux { color: var(--jaune); }
.section--prix .note { background: var(--nuit-clair); border-left-color: var(--jaune); }
.section.section--nuit .note,
.section.section--nuit .note p { color: var(--sur-nuit-doux); }
.section.section--nuit .note strong { color: var(--blanc); }
/* Sur le nuit, une carte blanche a besoin d'une ombre portée franche. */
.section--prix .offre { box-shadow: 0 28px 56px -26px rgba(0,0,0,.75); }

/* Annuel — l'offre recommandée, en magenta */
.offre--annuel {
  border-color: var(--magenta); border-width: 2px;
  box-shadow: var(--ombre-l);
}
.offre--annuel .offre__prix b { color: var(--magenta); }
.section.section--nuit .offre--annuel .offre__prix b { color: var(--magenta); }
.offre--annuel .offre__eco { color: var(--magenta); }
.offre--annuel .coches svg { color: var(--magenta); }

/* Mensuel — la seconde voie, en turquoise */
.offre--mensuel { border-color: var(--bulle-turquoise); border-width: 2px; }
.offre--mensuel .offre__prix b { color: var(--bulle-turquoise); }
.section.section--nuit .offre--mensuel .offre__prix b { color: var(--bulle-turquoise); }
.offre--mensuel .offre__eco { color: var(--bulle-turquoise); }
.offre--mensuel .coches svg { color: var(--bulle-turquoise); }
.offre--mensuel .btn--fantome {
  --btn-fg: var(--bulle-turquoise);
  border-color: var(--bulle-turquoise);
}
.offre--mensuel .btn--fantome:hover { background: var(--bulle-turquoise); color: var(--blanc); }
.offre__ruban {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
}
.offre__type { font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--encre-clair); margin-bottom: .7rem; }
.offre__prix { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.offre__prix b {
  font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.2rem); line-height: 1;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.offre__prix .unite { font-size: 1rem; font-weight: 600; color: var(--encre-doux); }

/* — Le prix au jour, en pastille jaune, à hauteur du grand chiffre —
   C'est l'argument qui rend 500 € pensable : il doit être DANS le regard
   qui lit le prix, pas deux lignes plus bas. Jaune sur les deux cartes :
   c'est la même promesse, pas un accent de carte. */
.offre__jour {
  display: inline-flex; align-items: baseline; gap: .2em;
  background: var(--jaune); color: var(--encre);
  padding: .4em .75em; border-radius: 100px;
  font-size: .82rem; font-weight: 650; line-height: 1;
  white-space: nowrap; align-self: center;
}
.offre__jour b { font-weight: 800; font-size: 1.08em; }
/* La carte est blanche : la règle nuit ne doit pas repeindre la pastille. */
.section.section--nuit .offre .offre__jour,
.section.section--nuit .offre .offre__jour b { color: var(--encre); }
.offre__barre { color: var(--encre-clair); text-decoration: line-through; font-size: 1.05rem; }
/* L'unité barrée suit le prix barré : même rayure, un cran plus petit, pour
   qu'on lise « 720 €/an » comme un ancien tarif et pas comme deux éléments. */
.offre__barre-unite { font-size: .84em; }

/* — Ancrage : prix barré + gain chiffré —
   Le gain est affiché en euros et pas en pourcentage : « 220 € » se
   visualise (une paire de chaussures, une semaine de courses), « −30 % »
   demande un calcul. */
.offre__ancrage {
  display: flex; align-items: center; flex-wrap: wrap; gap: .55rem;
  margin: 0 0 1.4rem;
}
.offre__gain {
  font-size: .82rem; font-weight: 700; line-height: 1.15;
  padding: .45em .75em; border-radius: 100px;
  background: var(--magenta-wash); color: var(--magenta);
}
.offre--mensuel .offre__gain { background: #E4F4F7; color: #0A6373; }
/* Le fond blanc de la carte prime sur la règle nuit : on le réaffirme. */
.section.section--nuit .offre__barre { color: var(--encre-clair); }
.section.section--nuit .offre--annuel  .offre__gain { color: var(--magenta); }
.section.section--nuit .offre--mensuel .offre__gain { color: #0A6373; }

.offre__eco { color: var(--magenta); font-weight: 650; font-size: .95rem; margin-bottom: 1.3rem; }
.offre .coches { margin-bottom: 1.6rem; }
.offre .coches li { font-size: .93rem; }

/* --------------------------------------------------------------------------
   Moyens de paiement, sous chaque bouton
   Des pastilles en texte, pas des logos de marque : rien à télécharger,
   rien qui pixellise, et aucune image tierce à charger juste avant le clic
   d'achat. Si tu veux les vrais logos, ils se glissent en <img> dans
   .moyens__liste li — la taille est déjà calée.
   -------------------------------------------------------------------------- */
.moyens { margin-top: .95rem; text-align: center; }
.moyens__titre {
  display: flex; align-items: center; justify-content: center; gap: .4em;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--encre-doux); margin: 0 0 .5rem;
}
.moyens__titre svg { color: var(--vert); flex: none; }
.moyens__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
}
/* Quatre cartes blanches, format carte bancaire. Tant que le fichier logo
   n'est pas déposé dans assets/paiement/, le navigateur affiche l'attribut
   alt à sa place : la case garde sa taille et reste lisible. */
.moyens__liste li {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 34px; padding: 4px 6px;
  border: 1px solid var(--trait); border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22,18,26,.06);
  font-size: .6rem; font-weight: 700; letter-spacing: .01em;
  color: var(--encre-doux); text-align: center; line-height: 1.1;
  overflow: hidden;
}
.moyens__liste li img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
}
/* Repli sans fichier logo : le nom de la marque, centré dans la même case. */
.moyens__li--texte { font-size: .62rem; letter-spacing: -.01em; }
.moyens__note { font-size: .74rem; color: var(--encre-clair); margin: .55rem 0 0; }
.section.section--nuit .offre .moyens__titre { color: var(--encre-doux); }
.section.section--nuit .offre .moyens__note,
.section.section--nuit .offre .moyens__liste li { color: var(--encre-clair); }

/* --------------------------------------------------------------------------
   Bandeau d'ancrage promo, au-dessus des deux cartes
   -------------------------------------------------------------------------- */
.promo-bandeau {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: center; gap: .55rem .9rem;
  max-width: 52rem; margin: 0 auto 1.6rem;
  padding: .8rem 1.2rem;
  border: 1px solid var(--nuit-trait); border-radius: var(--r-l);
  background: var(--nuit-clair);
  text-align: center;
}
.promo-bandeau__tag {
  flex: none;
  font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: .45em .85em; border-radius: 100px;
  background: var(--jaune); color: var(--nuit);
}
/* Le sélecteur double neutralise la règle générique .section--nuit p. */
.section.section--nuit .promo-bandeau__texte,
.promo-bandeau__texte { font-size: .94rem; line-height: 1.5; color: var(--sur-nuit); }
.promo-bandeau__texte b { color: var(--jaune); font-weight: 700; }
.promo-bandeau__texte s { color: var(--sur-nuit-doux); }

.paiement {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.5rem;
  margin-top: 1.8rem; font-size: .86rem; color: var(--encre-doux);
}
.paiement__item { display: inline-flex; align-items: center; gap: .45em; }

/* --------------------------------------------------------------------------
   16 · ZÉRO RISQUE
   -------------------------------------------------------------------------- */

.garantie {
  background: var(--jaune); color: var(--encre);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 5vw, 3.2rem);
  max-width: 48rem; margin-inline: auto;
  position: relative; overflow: hidden;
}
.garantie::before {
  content: ''; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255,255,255,.28);
}
.garantie > * { position: relative; }
.garantie h2 { margin-bottom: 1.2rem; }
.garantie__etapes { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: .8rem; counter-reset: g; }
.garantie__etapes li {
  display: flex; gap: .9rem; align-items: flex-start;
  font-size: 1rem; font-weight: 550; counter-increment: g;
}
.garantie__etapes li::before {
  content: counter(g); flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--encre); color: var(--jaune);
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 700;
}
.garantie__sceau {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--encre); color: var(--jaune);
  padding: .55rem 1.1rem; border-radius: 100px;
  font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
   LES 14 JOURS, version paysage, à l'intérieur de la section prix
   La levée de risque doit être lisible au moment où le prix l'est : on la
   pose sous les cartes, à l'horizontale, pour qu'elle tienne en un écran.
   -------------------------------------------------------------------------- */
.garantie-14 {
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  max-width: 56rem; margin: 2.6rem auto 0;
  background: var(--jaune); color: var(--encre);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 28px 56px -26px rgba(0,0,0,.55);
}
.garantie-14__photo { position: relative; margin: 0; background: var(--jaune-vif); }
.garantie-14__photo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 28%; display: block;
}
.garantie-14__corps { padding: clamp(1.3rem, 3vw, 2rem); }
/* Le sceau garde sa version d'origine : encre pleine, texte jaune — 9,38:1
   sur le fond jaune de la carte. */
.section--nuit .garantie-14 .garantie__sceau {
  background: var(--encre); color: var(--jaune); margin-bottom: .9rem;
}
/* ⚠️ Sélecteur doublé : .section.section--nuit h2 met le titre en blanc.
   Ici la carte est JAUNE — du blanc dessus tombe à 1,6:1, illisible. */
.garantie-14 h2,
.section.section--nuit .garantie-14 h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.16;
  margin: 0 0 .8rem; color: var(--encre);
}
/* La carte est jaune, pas nuit : on annule les règles de section. */
.section.section--nuit .garantie-14,
.section.section--nuit .garantie-14 p { color: var(--encre); font-size: .95rem; }
.section.section--nuit .garantie-14 strong,
.section.section--nuit .garantie-14 b { color: var(--encre); }
.garantie-14__chute { margin-bottom: 0; font-size: .9rem; }

/* La frise : trois étapes côte à côte plutôt qu'empilées.
   ⚠️ Sélecteur doublé (.jours.jours--paysage) : les règles génériques .jours
   sont déclarées PLUS BAS dans la feuille, à spécificité égale elles
   repasseraient devant et remettraient les cartes en 88px + fond clair. */
.jours.jours--paysage { grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1.1rem 0; }
.jours.jours--paysage li {
  grid-template-columns: 1fr; align-items: start; gap: .45rem;
  background: rgba(255,255,255,.62);
  padding: .75rem .85rem;
}
.jours.jours--paysage li:last-child { background: rgba(255,255,255,.95); }
.jours.jours--paysage .jours__jour {
  justify-self: start; padding: .3em .85em;
  background: var(--encre); color: var(--jaune);
}
.jours.jours--paysage li:last-child .jours__jour { background: var(--magenta); color: #fff; }
.jours.jours--paysage .jours__quoi { font-size: .83rem; line-height: 1.35; color: var(--encre); font-weight: 550; }

@media (max-width: 860px) {
  .garantie-14 { grid-template-columns: 1fr; }
  /* Bandeau assez haut pour que le visage tienne en entier : sous 170 px on
     coupe au menton et la légende passe sur la bouche. */
  .garantie-14__photo { height: 175px; }
  .garantie-14__photo img { object-position: center 26%; }
}
@media (max-width: 560px) {
  /* Sous 560 px, trois colonnes deviennent trois colonnes de deux mots :
     on repasse à l'empilement d'origine. */
  .jours.jours--paysage { grid-template-columns: 1fr; }
  .jours.jours--paysage li { grid-template-columns: 76px 1fr; align-items: center; gap: .8rem; }
  .jours.jours--paysage .jours__jour { justify-self: stretch; text-align: center; }
}

/* --------------------------------------------------------------------------
   17 · POUR QUI / PAS POUR QUI
   -------------------------------------------------------------------------- */

.pourqui { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.pourqui__bloc { border-radius: var(--r-l); padding: clamp(1.4rem, 3vw, 2rem); }
.pourqui__bloc--oui { background: var(--vert-wash); border: 1.5px solid #CBEBD9; }
/* Carte blanche : le « pas pour toi » ne doit pas avoir l'air d'un bloc
   désactivé. Même valeur que le « oui », juste sans la teinte verte. */
.pourqui__bloc--non { background: var(--blanc); border: 1.5px solid var(--trait); }
.pourqui__bloc h3 { font-size: 1.2rem; margin-bottom: 1.1rem; }

/* --------------------------------------------------------------------------
   18 · PAROLES DE VILLAGEOISES
   -------------------------------------------------------------------------- */

.onglets {
  display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 2.2rem;
}
.onglet {
  /* ⚠️ inline-flex + gap : chaque enfant direct devient un élément flex.
     Les onglets à emoji ont donc EXACTEMENT deux <span> (pastille + libellé).
     Les onglets sans emoji n'ont qu'un nœud texte : aucun gap ne s'insère. */
  display: inline-flex; align-items: center; gap: .45em;
  border: 1.5px solid var(--trait); background: var(--blanc);
  border-radius: 100px; padding: .6rem 1.15rem;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: background .22s, color .22s, border-color .22s, transform .22s var(--easing);
  white-space: nowrap;
}
/* L'emoji reste une pastille décorative : il ne grossit pas avec le libellé
   et ne se colore jamais avec l'onglet actif. */
.onglet__emoji { font-size: 1.05em; line-height: 1; flex: none; }
.onglet:hover { transform: translateY(-2px); border-color: var(--encre-clair); }
.onglet[aria-selected="true"] { background: var(--encre); color: var(--blanc); border-color: var(--encre); }

/* --------------------------------------------------------------------------
   LES OBJECTIONS — onglets jaunes, dans la section prix
   Le premier onglet est ouvert par défaut : la question de l'engagement
   d'un an arrive toujours, autant y répondre sans faire cliquer.
   -------------------------------------------------------------------------- */
.objections {
  max-width: 50rem; margin: 2.6rem auto 0;
}
/* Quatre onglets de largeur égale : plus lisible qu'un flex qui laisse un
   orphelin seul sur la deuxième ligne. Le libellé long passe sur deux
   lignes DANS la pastille, et les quatre gardent la même hauteur. */
.onglets--jaune {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .45rem; margin-bottom: 1.3rem;
}
/* Sur le fond nuit, un onglet au repos doit rester lisible sans crier :
   translucide clair, texte E8EEF6 → 9,4:1. */
.section.section--nuit .onglets--jaune .onglet {
  background: rgba(255,255,255,.08);
  border-color: var(--nuit-trait);
  color: var(--sur-nuit);
  font-size: .85rem; padding: .62rem .9rem;
  white-space: normal; line-height: 1.25;
}
.section.section--nuit .onglets--jaune .onglet:hover {
  background: rgba(255,255,255,.15); border-color: var(--sur-nuit-doux);
}
/* L'onglet actif passe en jaune plein, texte nuit : 9,38:1. */
.section.section--nuit .onglets--jaune .onglet[aria-selected="true"] {
  background: var(--jaune); color: var(--nuit); border-color: var(--jaune);
  font-weight: 700;
}
.onglets--jaune .onglet:focus-visible {
  outline: 2px solid var(--jaune); outline-offset: 3px;
}

.objection {
  background: var(--nuit-clair);
  border: 1px solid var(--nuit-trait);
  border-radius: var(--r-l);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  animation: apparait .3s var(--easing);
}
.objection:focus-visible { outline: 2px solid var(--jaune); outline-offset: 2px; }
.section.section--nuit .objection p { color: var(--sur-nuit-doux); font-size: .96rem; }
.section.section--nuit .objection strong,
.section.section--nuit .objection b { color: var(--blanc); }
.objection p:last-child, .objection ul:last-child { margin-bottom: 0; }
.objection__chute { margin-bottom: 0; }
.section.section--nuit .objection .coches li { color: var(--sur-nuit-doux); font-size: .93rem; }
.section.section--nuit .objection .coches svg { color: var(--jaune); }
.objection .coches { margin-top: .2rem; }

@media (max-width: 880px) { .onglets--jaune { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  /* Sous 560 px, deux colonnes donnent des pastilles de quatre lignes :
     on empile, chacune sur toute la largeur, le jaune reste le repère. */
  .onglets--jaune { grid-template-columns: 1fr; gap: .35rem; }
  .onglets--jaune .onglet { text-align: left; }
}

/* — Mur de vidéos verticales —
   Les vidéos ne sont plus appariées à une citation écrite : elles forment
   leur propre rangée, chaque visage avec son prénom. Auparavant chaque
   onglet mélangeait la vidéo d'une femme et la citation d'une autre. */
.videos-temoins { margin-top: 2rem; }
.videos-temoins__intro {
  text-align: center; margin: 0 0 1.2rem;
  color: var(--encre-doux); font-size: .95rem;
}
.videos-temoins__piste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem);
  /* Quatre formats 9:16 côte à côte montent vite très haut : on borne la
     rangée pour qu'elle se lise comme une bande de stories, pas comme un mur. */
  max-width: 46rem; margin-inline: auto;
}
.videos-temoins .video-verticale { margin: 0; }
@media (max-width: 860px) {
  .videos-temoins__piste {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1);
    padding: .2rem var(--pad) 1rem;
    scrollbar-width: none;
  }
  .videos-temoins__piste::-webkit-scrollbar { display: none; }
  .videos-temoins .video-verticale {
    flex: 0 0 min(62vw, 260px);
    scroll-snap-align: center;
  }
}

.panneau { display: none; }
.panneau.is-on { display: block; animation: apparait .4s var(--easing); }

.panneau { max-width: 44rem; margin-inline: auto; }

/* Le témoignage écrit est seul dans son panneau : il peut respirer. */
.temoignage--grand { font-size: 1.06rem; padding: 1.6rem 1.7rem; }
.temoignage--grand p:first-child {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  line-height: 1.45;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}

/* Vidéo verticale 9:16 */
.video-verticale {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--nuit);
  box-shadow: var(--ombre-l);
}
.video-verticale iframe,
.video-verticale video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; object-fit: cover;
}
.video-verticale__son {
  position: absolute; z-index: 3; right: 12px; bottom: 12px;
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: rgba(22,18,26,.62); color: #fff;
  backdrop-filter: blur(8px);
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, transform .2s var(--easing);
}
.video-verticale__son:hover { background: rgba(22,18,26,.85); transform: scale(1.06); }
.video-verticale__affiche {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background-size: cover; background-position: center;
  cursor: pointer;
  transition: opacity .4s;
}
.video-verticale__affiche.is-off { opacity: 0; pointer-events: none; }
.video-verticale__affiche .play {
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--magenta);
  display: grid; place-items: center;
  box-shadow: var(--ombre-l);
  animation: pulseDoux 2.6s ease-in-out infinite;
}
.video-verticale__nom {
  position: absolute; z-index: 3; left: 14px; bottom: 16px;
  color: #fff; font-weight: 650; font-size: .95rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.avis-defile { overflow: hidden; margin-top: 3rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.avis-defile__piste { display: flex; gap: 1rem; width: max-content; animation: defile 55s linear infinite; }
.avis-defile:hover .avis-defile__piste { animation-play-state: paused; }
.avis-defile .temoignage { width: 320px; flex: none; }
.avis-defile .temoignage p { font-size: .93rem; }

/* Bloc Trustpilot */
.trustpilot {
  display: inline-flex; align-items: center; gap: .8rem; flex-wrap: wrap; justify-content: center;
  background: var(--blanc); border: 1px solid var(--trait);
  border-radius: 100px; padding: .65rem 1.3rem;
  box-shadow: var(--ombre-s);
  font-size: .92rem; font-weight: 550;
}

/* Le score renvoie vers la fiche publique : c'est ce qui le rend vérifiable. */
.trustpilot a {
  display: inline-flex; align-items: center; gap: .35rem;
  color: inherit; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--easing);
}
.trustpilot a:hover { border-bottom-color: currentColor; }
.preuve__item a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(22,18,26,.22); }
.preuve__item a:hover { border-bottom-color: currentColor; }
.trustpilot__note { font-family: var(--serif); font-size: 1.3rem; font-variation-settings: 'SOFT' 20; }
.tp-etoile { width: 22px; height: 22px; background: #00B67A; display: grid; place-items: center; border-radius: 2px; }
.tp-etoile svg { width: 15px; height: 15px; color: #fff; }
.tp-etoiles { display: inline-flex; gap: 2px; }

/* --------------------------------------------------------------------------
   20 · LA DERNIÈRE FOIS + contact
   -------------------------------------------------------------------------- */

.final { background: var(--nuit); color: var(--sur-nuit); text-align: center; }
.final h2 { color: var(--blanc); font-size: clamp(2.1rem, 5.5vw, 3.6rem); }
.final p { color: var(--sur-nuit-doux); }
.final__recit { position: relative; }
.final__citation {
  font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.85rem);
  line-height: 1.3; color: var(--jaune);
  border-left: 3px solid var(--jaune);
  padding: .3rem 0 .3rem 1.4rem; margin: 2.2rem auto; max-width: 32rem;
  text-align: left;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
/* — Avant / après ———————————————————————————————————————————————
   Trois familles à un an d'écart. Deux mises en page, un seul balisage :

   • sous 1280 px  → dans le flux, une rangée compacte sous le chapô ;
   • à partir de 1280 px → `display: contents` fait disparaître le
     conteneur, les trois figures deviennent enfants de .final__recit
     (en position:relative) et vont se poser dans les marges, autour
     du texte, comme les polaroïds de la lettre.

   ⚠️ Jamais de hauteur fixe ni d'object-fit : un avant/après recadré
   n'est plus un avant/après. Les trois gardent leurs proportions. */
.final__avant-apres {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1.4vw, .9rem);
  align-items: center;      /* trois rapports d'image différents : on centre */
  max-width: 34rem; margin: 2rem auto 2.4rem;
}
.final__ap { margin: 0; }
.final__ap img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-s);
}
/* Sur mobile, une seule photo : la famille. Trois avant/après empilés,
   c'est trois fois le même effet et un écran entier de défilement. */
@media (max-width: 700px) {
  .final__avant-apres { grid-template-columns: 1fr; max-width: 21rem; }
  .final__ap--1, .final__ap--3 { display: none; }
}

@media (min-width: 1280px) {
  .final__avant-apres { display: contents; }
  .final__ap {
    position: absolute; z-index: 1;
    width: clamp(150px, 14vw, 196px);
    border: 5px solid var(--blanc);
    border-radius: var(--r-m);
    box-shadow: 0 20px 40px -18px rgba(0,0,0,.7);
  }
  .final__ap img { border-radius: calc(var(--r-m) - 5px); }
  /* Les trois marges disponibles : (1280 − 704) / 2 = 288 px de chaque côté.
     Une figure fait au plus 196 + 10 px de cadre : elle tient. */
  .final__ap--1 { left:  -14rem; top:  4%; transform: rotate(-4deg); }
  .final__ap--2 { right: -14rem; top: 26%; transform: rotate(3deg); }
  .final__ap--3 { left:  -13.5rem; top: 56%; transform: rotate(3deg); }
}

.final__signature { font-family: var(--manu); font-size: 1.9rem; color: var(--jaune); display: block; margin-top: 1.4rem; }

.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 46rem; margin: 2.5rem auto 0; }
.contact a {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-m); padding: 1.2rem 1rem;
  text-decoration: none; font-size: .9rem; font-weight: 600; color: #fff;
  transition: background .25s, transform .25s var(--easing);
}
.contact a:hover { background: rgba(255,255,255,.12); transform: translateY(-3px); }
.contact a small { color: var(--sur-nuit-doux); font-weight: 500; font-size: .78rem; }

.pied { background: var(--nuit-profond); color: #8FA2BC; padding-block: 2rem 6rem; text-align: center; font-size: .8rem; }
.pied a { color: var(--sur-nuit-doux); }

/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .hero__grille { grid-template-columns: 1fr; }
  .hero__cote { display: none; }
  .hero__mosaique-mobile { display: grid; }
}

@media (max-width: 900px) {
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: 1fr; }
  .annee__mois { grid-template-columns: repeat(2, 1fr); }
  .evenements { grid-template-columns: 1fr; }
  .helene { grid-template-columns: 1fr; }
  .helene__colonne { position: static; max-width: 26rem; margin-inline: auto; }
  .offres { grid-template-columns: 1fr; }
  .temoignage--grand { padding: 1.3rem 1.2rem; }
  .inclus { grid-template-columns: 1fr; }
  .cercles { grid-template-columns: 1fr; }
  .sommaire { display: none; }
}

@media (max-width: 760px) {
  :root { --r-l: 22px; --r-xl: 28px; }

  .grille--2, .duo, .pourqui { grid-template-columns: 1fr; }

  /* 3 mensonges → swipe horizontal */
  .mensonges__piste {
    display: flex; gap: 1rem;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: .25rem var(--pad) 1.5rem;
    margin-inline: calc(var(--pad) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mensonges__piste::-webkit-scrollbar { display: none; }
  .mensonge { flex: 0 0 82%; scroll-snap-align: center; }

  .bascule__ligne { grid-template-columns: 1fr; gap: .35rem; text-align: center; padding: 1rem 1.1rem; }
  .bascule__avant { text-align: center; }
  .bascule__fleche { transform: rotate(90deg); margin-inline: auto; }

  .planning__ligne { grid-template-columns: 1fr; gap: .4rem; }

  .contact { grid-template-columns: 1fr; }

  .jauge__piste { grid-template-columns: repeat(2, 1fr); }

  .onglets { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .5rem; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }

  .temoignage::before { font-size: 3.5rem; }
  .helene__badge { right: 0; bottom: -14px; font-size: 1.15rem; }
  /* Sur mobile, WhatsApp vit dans la barre d'action, pas en flottant */
  .whatsapp { display: none; }
  .cta-sticky__wa { display: grid; }
  /* …et le bouton reprend toute la largeur restante à côté de la pastille */
  .cta-sticky .btn { flex: 1 1 auto; min-width: 0; max-width: none; }

  /* Le prix disparaît du bouton fixe : sur deux lignes, il faisait un bouton
     de 90 px de haut qui mangeait un quart de l'écran. Le prix reste visible
     juste au-dessus, dans les cartes, et dans le bandeau du haut. */
  .cta-sticky__prix { display: none; }
  .cta-sticky { padding: .5rem var(--pad) calc(.5rem + env(safe-area-inset-bottom)); gap: 8px; }
  .cta-sticky .btn { min-height: 48px; font-size: .95rem; padding: .7em 1.2em; }
  .cta-sticky__wa { width: 48px; height: 48px; }
  .cta-sticky__wa svg { width: 24px; height: 24px; }
}

@media (max-width: 420px) {
  .annee__mois { grid-template-columns: 1fr; }
  .grille--4 { grid-template-columns: 1fr; }
}

/* Impression : version « brief » lisible */
@media print {
  .annonce, .progression, .cta-sticky, .whatsapp, .sommaire, .toast { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
}

/* ==========================================================================
   09. COMPLÉMENTS — vidéo, lightbox, détails
   ========================================================================== */

/* Les témoignages sources sont filmés en 16:9. On les présente dans un cadre
   vertical façon « story » : le cadre impose le ratio, l'iframe est agrandie
   pour le remplir (recadrage centré). Change --ratio-video pour ajuster. */
:root { --ratio-video: 9 / 16; }

.video-verticale { aspect-ratio: var(--ratio-video); }

.video-verticale iframe {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 100%; width: auto;
  min-width: 100%; min-height: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  pointer-events: none;      /* le clic passe à nos propres contrôles */
}
.video-verticale.est-active iframe { pointer-events: auto; }

/* Voile bas pour lisibilité du prénom */
.video-verticale::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 38%;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  pointer-events: none; z-index: 2;
}

/* Squelette de chargement */
.video-verticale:not(.est-chargee) {
  background: linear-gradient(110deg, #2A2430 30%, #3A3241 50%, #2A2430 70%);
  background-size: 220% 100%;
  animation: brille 1.8s ease-in-out infinite;
}

/* Astuce swipe — mobile uniquement */
[data-swipe-hint] { display: none; }
@media (max-width: 760px) { [data-swipe-hint] { display: block; } }

/* Lightbox vidéo */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12,9,15,.9);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  padding: var(--pad);
  animation: apparait .3s var(--easing);
}
.lightbox[hidden] { display: none; }
.lightbox__cadre {
  width: min(100%, 960px);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-l);
  overflow: hidden;
  background: #000;
  box-shadow: var(--ombre-l);
}
.lightbox__cadre iframe { width: 100%; height: 100%; border: 0; }
.lightbox__fermer {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s, transform .2s var(--easing);
}
.lightbox__fermer:hover { background: rgba(255,255,255,.28); transform: scale(1.06); }

/* Le hero garde une place stable pendant le chargement des polices */
.hero__h1 { min-height: 1.02em; }

/* Ruban de l'offre recommandée */
.offre__ruban { box-shadow: var(--ombre-m); }

/* Ancrage : la ligne Village ne doit pas hériter du pointillé */
.ancrage__ligne--village { border-bottom: 1.5px solid var(--jaune-doux); }

/* — Correctifs mobile — */
@media (max-width: 640px) {
  :root { --h-annonce: 38px; }
  .annonce { font-size: .78rem; }
  .surtitre { flex-wrap: wrap; letter-spacing: .1em; font-size: .68rem; justify-content: center; }
  .hero__video-lien { text-align: left; line-height: 1.3; }
  .final__citation { margin-inline: 0; }
  .offre__eco:empty, .offre__eco { min-height: 0; }
}

/* Ligne de réassurance paiement : évite les retours à la ligne hasardeux
   dus au flex (chaque span devenait un élément flex indépendant). */
.paiement__item { display: inline; }
.paiement__item svg { display: inline-block; vertical-align: -3px; margin-right: .4em; }
.paiement { display: block; text-align: center; }
.paiement__item + .paiement__item { display: block; margin-top: .5rem; }
@media (min-width: 761px) {
  .paiement__item + .paiement__item { display: inline; margin: 0 0 0 1.5rem; }
}

/* — Calendrier des 14 jours (section 16) — */
.jours { list-style: none; margin: 1.8rem 0; padding: 0; display: grid; gap: .7rem; }
.jours li {
  display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.55);
  border-radius: var(--r-m);
  padding: .85rem 1.1rem;
}
.jours__jour {
  display: inline-grid; place-items: center;
  background: var(--encre); color: var(--jaune);
  border-radius: 100px; padding: .3em .2em;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
}
.jours__quoi { font-size: .98rem; line-height: 1.4; font-weight: 550; }
.jours li:last-child { background: rgba(255,255,255,.9); }
.jours li:last-child .jours__jour { background: var(--magenta); color: #fff; }
@media (max-width: 520px) {
  .jours li { grid-template-columns: 1fr; gap: .35rem; }
  .jours__jour { justify-self: start; padding-inline: .9em; }
}

/* ==========================================================================
   10. LE CAMEMBERT DES DÉPENSES (section 14)
   --------------------------------------------------------------------------
   Palette validée : trois pas d'une rampe chaude pour le contexte
   (#8F3E14 → #BE7020 → #DCA83A, ordonnés par montant) + le magenta de marque
   pour le Village, qui est le sujet. Écarts CVD ≥ 9,8 ΔE sur toutes les paires,
   chroma ≥ 0,1, lightness dans la bande. Le pas le plus clair passe sous 3:1
   de contraste avec le fond : c'est pourquoi chaque part porte une étiquette
   directe (pion émoji) ET une légende chiffrée.
   ========================================================================== */

.camembert {
  margin: 0 auto;
  max-width: 54rem;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--r-xl);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
  box-shadow: var(--ombre-s);
}

.camembert__disque { position: relative; width: 100%; }
.camembert__disque svg { width: 100%; height: auto; overflow: visible; }

/* Les parts se dessinent au scroll, dans l'ordre des montants */
.camembert__part {
  stroke-dasharray: 0px 600px;
  stroke-dashoffset: var(--off);
  transition: stroke-dasharray 1s var(--easing);
}
.reveal.is-visible .camembert__part { stroke-dasharray: var(--len) 600px; }
.reveal.is-visible .camembert__part:nth-child(2) { transition-delay: .18s; }
.reveal.is-visible .camembert__part:nth-child(3) { transition-delay: .32s; }
.reveal.is-visible .camembert__part:nth-child(4) { transition-delay: .44s; }

/* Pions émoji posés au milieu de chaque part */
.camembert__pion {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1;
  background: var(--blanc);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(22,18,26,.18);
  opacity: 0; transition: opacity .4s var(--easing) .7s, transform .4s var(--easing) .7s;
}
.reveal.is-visible .camembert__pion { opacity: 1; }
.camembert__pion--village {
  width: 46px; height: 46px; font-size: 1.4rem;
  box-shadow: 0 0 0 3px var(--magenta), 0 4px 14px rgba(214,0,110,.35);
}

.camembert__coeur {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
  pointer-events: none;
}
.camembert__coeur b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1;
  color: var(--magenta);
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.camembert__coeur span {
  display: block; margin-top: .25rem;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-clair);
}

/* Légende — c'est elle qui porte les chiffres exacts */
.camembert__legende { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.camembert__legende li {
  display: grid;
  grid-template-columns: 10px 26px 1fr auto 46px;
  align-items: center; gap: .65rem;
  padding: .7rem .2rem;
  border-bottom: 1px dashed var(--trait);
  font-size: .96rem;
}
.camembert__legende li:last-child { border-bottom: 0; }
.camembert__puce { width: 10px; height: 10px; border-radius: 3px; }
.camembert__emoji { font-size: 1.05rem; line-height: 1; }
.camembert__quoi { color: var(--encre-doux); line-height: 1.3; }
.camembert__montant { font-family: var(--serif); font-size: 1.2rem; font-variation-settings: 'SOFT' 20; white-space: nowrap; }
.camembert__part-txt { text-align: right; font-size: .82rem; color: var(--encre-clair); font-variant-numeric: tabular-nums; }

.camembert__legende .est-village {
  background: var(--magenta-wash);
  border-radius: var(--r-s);
  padding-inline: .7rem;
  border-bottom: 0;
  margin-top: .3rem;
}
.est-village .camembert__quoi { color: var(--encre); font-weight: 650; }
.est-village .camembert__montant { color: var(--magenta); font-size: 1.45rem; font-weight: 700; }
.est-village .camembert__part-txt { color: var(--magenta); font-weight: 700; }

.camembert__note { grid-column: 1 / -1; margin: .6rem 0 0; text-align: center; }

/* Le prix en gras dans la phrase du café */
.cafe__prix {
  color: var(--magenta);
  font-weight: 700;
  font-size: 1.22em;
}

@media (max-width: 760px) {
  .camembert { grid-template-columns: 1fr; }
  .camembert__disque { max-width: 280px; margin-inline: auto; }
  .camembert__legende li { grid-template-columns: 10px 24px 1fr auto; gap: .55rem; font-size: .92rem; }
  .camembert__part-txt { grid-column: 3 / -1; text-align: left; margin-top: -.2rem; }
}

/* Camembert — liaison au survol entre les parts et la légende.
   Tous les chiffres sont déjà visibles (étiquettes directes + légende),
   le survol sert donc à relier les deux, pas à révéler une infobulle. */
.camembert__part, .camembert__pion { transition: opacity .25s var(--easing), stroke-width .25s var(--easing); }
.camembert.a-survol .camembert__part { opacity: .28; }
.camembert.a-survol .camembert__part.est-survolee { opacity: 1; stroke-width: 40; }
.camembert.a-survol .camembert__pion { opacity: .35; }
.camembert.a-survol .camembert__pion.est-survolee { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
.camembert.a-survol .camembert__legende li { opacity: .45; transition: opacity .25s; }
.camembert.a-survol .camembert__legende li.est-survolee { opacity: 1; }
.camembert__legende li { cursor: default; }

/* Resserrage de la carte */
.camembert { align-items: start; }
.camembert__disque { align-self: center; }
.camembert__legende { align-self: center; }
.camembert__note { margin-top: .2rem; }

/* ==========================================================================
   11. L'ÉCOLE : CHIFFRES CLÉS & DIPLÔME
   ========================================================================== */

/* Bandeau de chiffres (section 2, fond sombre) */
.chiffres {
  list-style: none; margin: 2.6rem 0 0; padding: 1.8rem 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  text-align: center;
}
.chiffres li { display: flex; flex-direction: column; gap: .25rem; }
.chiffres b {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.2vw, 2.5rem);
  line-height: 1;
  color: var(--jaune);
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.chiffres b small { font-size: .5em; font-weight: 600; }

/* Une couleur par chiffre : c'est le palmarès de dix ans, il doit chanter.
   Les quatre teintes sont validées sur le nuit — de 6,30 à 9,69 pour 1. */
/* Les cartes closent la lettre d'Hélène : elles doivent peser autant que
   le texte qu'elles résument, pas ressembler à un pied de page. */
.chiffres--couleurs li {
  background: var(--nuit-clair);
  border-radius: var(--r-l);
  padding: 1.5rem 1rem 1.35rem;
  border-top: 4px solid currentColor;
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.6);
  gap: .45rem;
}
.chiffres--couleurs b { color: currentColor; font-size: clamp(2.1rem, 5vw, 3rem); }
.chiffres--couleurs li > span { font-size: .84rem; }
.chiffre--jaune     { color: #FFC529; }
.chiffre--turquoise { color: #7ADFF5; }
.chiffre--rose      { color: #FF9ECB; }
.chiffre--vert      { color: #6FE3A8; }
.chiffres--couleurs li > span { color: var(--sur-nuit-doux); }
@media (max-width: 620px) {
  .chiffres--couleurs { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .chiffres--couleurs li { padding: 1.1rem .7rem 1rem; }
}
/* (remplacé par .chiffres li > span, voir plus bas) */

/* Carte diplôme (section 9) */
.diplome {
  background: var(--jaune-wash);
  border: 1.5px dashed var(--jaune-vif);
  border-radius: var(--r-l);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  position: relative;
}
.diplome__sceau {
  position: absolute; top: -16px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--jaune); font-size: 1.3rem;
  box-shadow: var(--ombre-m);
}
.diplome h3 { font-size: 1.22rem; margin-bottom: .6rem; padding-right: 2.5rem; }
.diplome p { font-size: .97rem; color: var(--encre-doux); }
.diplome p strong { color: var(--encre); }

/* Les exposants ordinaux (19ᵉ) */
sup { font-size: .62em; vertical-align: super; line-height: 0; }

@media (max-width: 760px) {
  .chiffres { grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
}

/* — Correctifs liés aux conteneurs inline-flex —
   .chiffres span ciblait aussi les <span data-cfg> imbriqués dans les <b>,
   ce qui écrasait la taille du chiffre. On ne vise que les enfants directs. */
.chiffres li > span { font-size: .78rem; line-height: 1.3; font-weight: 550; letter-spacing: .04em; color: var(--sur-nuit-doux); }
.chiffres b span { font: inherit; color: inherit; letter-spacing: inherit; }

/* Diplôme — version compacte (un simple encadré, pas une carte-titre) */
.diplome { align-self: stretch; }
.diplome p { margin: 0; font-size: .97rem; }
.diplome p strong { color: var(--encre); }
.diplome__sceau { top: -14px; right: 16px; width: 38px; height: 38px; font-size: 1.1rem; }

/* Monogramme Fabuleuses au Foyer, au-dessus du logo du Village */
.hero__ff {
  display: block;
  width: auto;
  height: clamp(30px, 4vw, 40px);
  margin: 0 auto .55rem;
}

/* ==========================================================================
   12. VIDÉO DE PRÉSENTATION — bloc intégré
   --------------------------------------------------------------------------
   Façade cliquable : seule la vignette est chargée au départ. Le lecteur
   (et le script de la plateforme) n'arrivent qu'au clic — la page reste
   légère et aucun cookie n'est déposé avant que la visiteuse le décide.
   ========================================================================== */

.videobloc {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--encre);
  box-shadow: var(--ombre-m);
  margin: 1.6rem 0;
}
.videobloc iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.videobloc__lancer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  display: grid; place-items: center;
}
.videobloc__affiche {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--easing), filter .35s;
}
.videobloc__lancer:hover .videobloc__affiche { transform: scale(1.03); filter: brightness(.92); }

.videobloc__play {
  position: relative; z-index: 2;
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--magenta); color: #fff;
  padding-left: 4px;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,.45);
  transition: transform .3s var(--easing), background .25s;
}
.videobloc__lancer:hover .videobloc__play { transform: scale(1.09); background: var(--magenta-fonce); }

.videobloc__legende {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem .9rem;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  color: #fff; font-size: .88rem; font-weight: 600; text-align: left;
}

/* Repli sans JavaScript, et message d'erreur si le fichier ne charge pas */
.videobloc__replis, .videobloc__erreur {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  color: #fff; font-weight: 600; text-decoration: none;
  padding: 1rem; text-align: center; font-size: .92rem;
}

/* Le lecteur natif occupe tout le cadre, comme l'iframe avant lui. */
.videobloc video { width: 100%; height: 100%; display: block; background: #000; }
#lightbox-cadre video { width: 100%; max-height: 82vh; display: block; background: #000; border-radius: var(--r-l); }

@media (prefers-reduced-motion: reduce) {
  .videobloc__affiche, .videobloc__play { transition: none; }
}

/* ==========================================================================
   13. LES DEUX COLONNES BATTERIES — version contrastée
   --------------------------------------------------------------------------
   Chaque habitude devient une pastille avec son émoji : la section se lit
   d'un coup d'œil au lieu de se lire ligne à ligne.
   Contrastes vérifiés : rouge #A81F16 sur #FFF1EF = 6,6:1 ·
   vert #0B6B43 sur #EAF6F0 = 5,9:1 · blanc sur les pleins ≥ 5,3:1.
   ========================================================================== */

.batteries { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); align-items: start; }

.batterie {
  border-radius: var(--r-l);
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 2px solid;
  position: relative;
  transition: transform .4s var(--easing), box-shadow .4s var(--easing);
}
.batterie:hover { transform: translateY(-4px); }

.batterie--moins { background: var(--rouge-wash); border-color: var(--rouge-bord); }
.batterie--plus  { background: var(--vert-wash);  border-color: var(--vert-bord); }

.batterie__titre {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  line-height: 1.15;
  margin: 0 0 1.3rem;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.batterie--moins .batterie__titre { color: var(--rouge); }
.batterie--plus  .batterie__titre { color: var(--vert); }

.batterie__pile {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.4rem;
  box-shadow: 0 4px 14px -4px rgba(22,18,26,.22);
}
.batterie--moins .batterie__pile { background: var(--rouge); }
.batterie--plus  .batterie__pile { background: var(--vert); }

/* Les pastilles */
.batterie__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.batterie__liste li {
  display: inline-flex; align-items: center; gap: .45em;
  background: var(--blanc);
  border: 1.5px solid;
  border-radius: 100px;
  padding: .46em .9em .46em .7em;
  font-size: clamp(.92rem, 1.6vw, 1.02rem);
  font-weight: 550;
  line-height: 1.2;
  opacity: 0; transform: translateY(10px) scale(.96);
  transition: opacity .45s var(--easing), transform .45s var(--easing), border-color .2s;
}
.batterie--moins .batterie__liste li { border-color: var(--rouge-bord); color: var(--rouge); }
.batterie--plus  .batterie__liste li { border-color: var(--vert-bord);  color: var(--vert); }
.batterie__liste li:hover { border-color: currentColor; }
.batterie__liste li em { font-style: normal; font-size: 1.05em; line-height: 1; }

/* Les pastilles arrivent en cascade au scroll */
.reveal.is-visible .batterie__liste li { opacity: 1; transform: none; }
.batterie__liste li:nth-child(1)  { transition-delay: .02s }
.batterie__liste li:nth-child(2)  { transition-delay: .06s }
.batterie__liste li:nth-child(3)  { transition-delay: .10s }
.batterie__liste li:nth-child(4)  { transition-delay: .14s }
.batterie__liste li:nth-child(5)  { transition-delay: .18s }
.batterie__liste li:nth-child(6)  { transition-delay: .22s }
.batterie__liste li:nth-child(7)  { transition-delay: .26s }
.batterie__liste li:nth-child(8)  { transition-delay: .30s }
.batterie__liste li:nth-child(9)  { transition-delay: .34s }
.batterie__liste li:nth-child(10) { transition-delay: .38s }
.batterie__liste li:nth-child(11) { transition-delay: .42s }
.batterie__liste li:nth-child(12) { transition-delay: .46s }
.batterie__liste li:nth-child(13) { transition-delay: .50s }
.batterie__liste li:nth-child(14) { transition-delay: .54s }
.batterie__liste li:nth-child(15) { transition-delay: .58s }

/* La bascule entre les deux colonnes */
.batteries__flip {
  grid-column: 1 / -1;
  display: grid; place-items: center;
  margin: .4rem 0 -.4rem;
}
.batteries__flip span {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--encre); color: var(--jaune);
  padding: .5rem 1.2rem; border-radius: 100px;
  font-size: .82rem; font-weight: 650; letter-spacing: .03em;
}

@media (max-width: 760px) {
  .batteries { grid-template-columns: 1fr; }
  .batterie__liste li { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .batterie__liste li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Le mot clé, souligné à la main dans les titres batteries */
.souligne-rouge, .souligne-vert { position: relative; white-space: nowrap; }
.souligne-rouge { color: var(--rouge); }
.souligne-vert  { color: var(--vert); }
.souligne-rouge::after, .souligne-vert::after {
  content: ''; position: absolute; left: -2px; right: -2px; bottom: -.12em;
  height: .16em; border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--easing) .25s;
}
.souligne-rouge::after { background: var(--rouge-clair); }
.souligne-vert::after  { background: var(--vert-clair); }
.reveal.is-visible .souligne-rouge::after,
.reveal.is-visible .souligne-vert::after { transform: scaleX(1); }

/* ==========================================================================
   14. IMAGES FLOTTANTES & PARALLAXE
   --------------------------------------------------------------------------
   Les visuels décoratifs se déposent dans /img avec les noms indiqués dans le
   README. S'ils n'existent pas, ils disparaissent sans laisser de trou.
   ========================================================================== */

.section { overflow: clip; }          /* les décors ne débordent pas de la page */

.flottant {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  /* La photo ne dépasse jamais la gouttière disponible (sauf si celle-ci est
     si étroite qu'il vaut mieux laisser dépasser un bout de photo hors cadre
     qu'afficher un timbre-poste). */
  width: min(
    clamp(110px, 14vw, 210px),
    max(110px, calc((100% - var(--colonne, 1160px)) / 2 - 12px))
  );
  filter: drop-shadow(0 18px 34px rgba(22,18,26,.16));
  /* --decalage est piloté par le scroll (script.js) */
  transform: translate3d(0, var(--decalage, 0px), 0) rotate(var(--angle, 0deg));
  transition: opacity .6s var(--easing);
  opacity: 0;
}
.flottant.est-visible { opacity: 1; }

/* Une vraie photo, pas un détourage : il lui faut un cadre arrondi et une
   ombre portée classique — le drop-shadow des PNG détourés ne lui va pas. */
.flottant--photo {
  border-radius: var(--r-l);
  filter: none;
  box-shadow: 0 22px 44px -18px rgba(22,18,26,.42);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
/* ——— Le décor vit DANS la gouttière, jamais sur le texte ———————————————
   Ancienne version : left/right calés sur le bord de l'écran. Dès que la
   colonne de texte touchait les bords (tablette, mobile, mais aussi les
   grands titres sur un 1024), la photo se posait par-dessus les lettres —
   et un z-index ne sauve rien quand le texte n'a pas de fond opaque.

   Nouvelle règle : le bord INTÉRIEUR de la photo est calé sur le bord de la
   colonne de contenu. Ce qui reste d'espace libre, c'est là qu'elle vit.
   Quand l'écran rétrécit, la gouttière se referme et la photo glisse
   d'elle-même hors cadre (la section est en overflow:clip). Aucun
   chevauchement possible, à aucune largeur, sans media query. */
.section                          { --colonne: min(var(--max), 100%); }
.section:has(> .contenu--etroit)  { --colonne: min(56rem, 100%); }
.section:has(> .contenu--texte)   { --colonne: min(44rem, 100%); }

.flottant--g  { right: calc(50% + var(--colonne) / 2); left: auto; }
.flottant--d  { left:  calc(50% + var(--colonne) / 2); right: auto; }
.flottant--haut { top: 6%; }
.flottant--milieu { top: 38%; }
.flottant--bas { bottom: 8%; }

/* le contenu passe toujours devant le décor */
.section > .contenu { position: relative; z-index: 1; }

/* Sous 900 px il n'y a plus de gouttière du tout : on ne se contente pas de
   les faire sortir du cadre, on ne les charge pas. */
@media (max-width: 899px) {
  .flottant { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flottant { transform: none !important; }
}

/* Illustration d'accompagnement, dans le flux (pas un décor) */
.illustration {
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--ombre-m);
  margin: 1.8rem 0 0;
}
.illustration img { width: 100%; display: block; }
.illustration--ronde { border-radius: var(--r-xl); }

/* ==========================================================================
   15. LE MUR D'AVIS TRUSTPILOT
   --------------------------------------------------------------------------
   Mosaïque en colonnes : les captures n'ont pas toutes la même hauteur, et
   `columns` les empile sans laisser de trou, sans JavaScript de calcul.
   Largeur de colonne calée sur la résolution native des captures (~215 px)
   pour qu'elles ne soient jamais agrandies, donc jamais floues.
   ========================================================================== */

.mur { position: relative; }

.mur__grille {
  columns: 230px;
  column-gap: clamp(.7rem, 1.6vw, 1.1rem);
}

.mur__avis {
  break-inside: avoid;
  margin: 0 0 clamp(.7rem, 1.6vw, 1.1rem);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--blanc);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre-s);
  transition: transform .35s var(--easing), box-shadow .35s var(--easing);
}
.mur__avis:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--ombre-m); }
.mur__avis img { width: 100%; display: block; }

/* Replié par défaut : deux « rangées » visibles, le reste sous un voile */
.mur { max-height: 620px; overflow: hidden; transition: max-height .7s var(--easing); }
.mur.est-deplie { max-height: 6000px; }

.mur__voile {
  position: absolute; left: 0; right: 0; bottom: 0; height: 190px;
  background: linear-gradient(transparent, var(--blanc) 78%);
  pointer-events: none;
  transition: opacity .4s var(--easing);
}
.mur.est-deplie .mur__voile { opacity: 0; }

/* Les cartes se posent une par une à l'arrivée dans l'écran */
.mur__avis { opacity: 0; transform: translateY(14px); }
.reveal.is-visible .mur__avis { opacity: 1; transform: none; }
.mur__avis:nth-child(1) { transition-delay: .00s }
.mur__avis:nth-child(2) { transition-delay: .05s }
.mur__avis:nth-child(3) { transition-delay: .10s }
.mur__avis:nth-child(4) { transition-delay: .15s }
.mur__avis:nth-child(5) { transition-delay: .20s }
.mur__avis:nth-child(6) { transition-delay: .25s }
.mur__avis:nth-child(7) { transition-delay: .30s }
.mur__avis:nth-child(8) { transition-delay: .35s }
.mur__avis:nth-child(9) { transition-delay: .40s }
.mur__avis:nth-child(10){ transition-delay: .45s }

@media (max-width: 520px) {
  .mur__grille { columns: 160px; }
  .mur { max-height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .mur__avis { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mur { transition: none; }
}

/* La pop-up sert aussi à agrandir une capture d'avis : les captures font
   215 px de large, donc illisibles en mosaïque sur petit écran. */
.lightbox--image .lightbox__cadre {
  aspect-ratio: auto;
  width: auto; max-width: min(94vw, 560px);
  max-height: 88vh;
  background: transparent;
  overflow: auto;
}
.lightbox--image .lightbox__cadre img { width: 100%; display: block; border-radius: var(--r-m); }
.mur__avis img { cursor: zoom-in; }

/* ==========================================================================
   17. POP-UP DE SORTIE — « Reste en contact »
   --------------------------------------------------------------------------
   Une pop-up de sortie a mauvaise réputation, et souvent à raison. Celle-ci
   est construite à l'envers des pratiques habituelles : trois façons de la
   fermer, aucune minuterie qui bloque la croix, un « non merci » écrit en
   toutes lettres, et une promesse qui tient en trois lignes.
   ========================================================================== */

.popup {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(.8rem, 3vw, 2rem);
}
.popup[hidden] { display: none; }

.popup__voile {
  position: absolute; inset: 0;
  background: rgba(12, 20, 34, .62);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity .38s var(--easing);
}
.popup.est-ouverte .popup__voile { opacity: 1; }

/* — La boîte —
   Deux colonnes sur large écran : une photo à gauche, le formulaire à
   droite. Sous 720 px la photo devient un bandeau au-dessus. */
.popup__boite {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  width: min(100%, 720px);
  max-height: min(90dvh, 680px);
  background: var(--blanc);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(12, 20, 34, .6);
  /* Apparition douce : on monte de 14 px en s'agrandissant à peine. */
  opacity: 0;
  transform: translateY(14px) scale(.975);
  transition: opacity .42s var(--easing), transform .42s var(--easing);
}
.popup.est-ouverte .popup__boite { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .popup__voile, .popup__boite { transition: none; }
  .popup__boite { transform: none; }
}

/* — Colonne image — */
.popup__visuel { position: relative; background: var(--rose); }
.popup__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.popup__legende {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 2.4rem 1.1rem 1rem;
  background: linear-gradient(transparent, rgba(12, 20, 34, .82));
  color: #fff; font-family: var(--serif); font-size: 1.05rem; line-height: 1.25;
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
}
.popup__legende span { display: block; font-size: 1.3rem; margin-bottom: .1rem; }

/* — Colonne formulaire — */
.popup__corps {
  padding: clamp(1.3rem, 3vw, 1.9rem);
  overflow-y: auto;
}
.popup__pastille {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--jaune-wash); font-size: 1.3rem;
  margin-bottom: .8rem;
}
.popup__corps h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  line-height: 1.15; margin-bottom: .5rem;
}
.popup__chapo {
  font-size: .97rem; line-height: 1.55; color: var(--encre-doux);
  margin-bottom: 1.2rem;
}
.popup__chapo strong { color: var(--encre); }

/* — Le choix entre mail et téléphone — */
.popup__voies {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem;
  background: var(--creme); border: 1px solid var(--trait);
  border-radius: 100px; padding: .3rem;
  margin-bottom: 1.1rem;
}
.popup__voie {
  border: 0; background: none; cursor: pointer;
  padding: .6rem .5rem; border-radius: 100px;
  font-size: .88rem; font-weight: 600; color: var(--encre-doux);
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  transition: background .25s var(--easing), color .25s var(--easing);
}
.popup__voie.est-active { background: var(--encre); color: #fff; }

/* — Les champs — */
.popup__aide {
  font-size: .85rem; color: var(--encre-clair);
  margin-bottom: .9rem;
}
.popup__champ { display: block; margin-bottom: .8rem; }
.popup__label {
  display: block; margin-bottom: .3rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; color: var(--encre-doux);
}
.popup__label em {
  font-style: normal; font-weight: 600;
  color: var(--magenta); font-size: .92em;
}
.popup__champ input {
  width: 100%; padding: .85rem 1rem;
  border: 1.5px solid var(--trait); border-radius: var(--r-m);
  background: var(--blanc); font-size: 1rem;
  transition: border-color .2s var(--easing), box-shadow .2s var(--easing);
}
.popup__champ input::placeholder { color: #B7B0BD; }
.popup__champ input:focus {
  outline: 0;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(214, 0, 110, .14);
}
.popup__champ input[aria-invalid="true"] { border-color: var(--rouge); }
.popup__erreur {
  display: block; margin-top: .3rem;
  font-size: .8rem; color: var(--rouge); font-weight: 550;
}
.popup__envoyer { width: 100%; margin-top: .3rem; }

/* — Le choix « juste les nouvelles » / « qu'on m'appelle » —
   Deux cartes-radio plutôt que deux boutons radio nus : la zone cliquable
   est large, et chacune porte sa propre promesse. */
.popup__choix { border: 0; margin: 0 0 .8rem; padding: 0; }
.popup__choix legend {
  padding: 0; margin-bottom: .45rem;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; color: var(--encre-doux);
}
.popup__option {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .7rem .8rem;
  border: 1.5px solid var(--trait); border-radius: var(--r-m);
  cursor: pointer;
  transition: border-color .2s var(--easing), background .2s var(--easing);
}
.popup__option + .popup__option { margin-top: .4rem; }
.popup__option:hover { border-color: var(--encre-clair); }
.popup__option input { margin: .2rem 0 0; accent-color: var(--magenta); flex: none; }
.popup__option:has(input:checked) {
  border-color: var(--magenta);
  background: var(--magenta-wash);
}
.popup__option:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 2px; }
.popup__option-corps { display: grid; gap: .1rem; }
.popup__option-corps b { font-size: .92rem; font-weight: 650; }
.popup__option-corps small { font-size: .79rem; color: var(--encre-clair); line-height: 1.3; }

/* Le champ téléphone apparaît en glissant : il ne doit pas surgir sèchement. */
.popup__champ--tel[hidden] { display: none; }
.popup__champ--tel { animation: tel-entre .3s var(--easing); }
@keyframes tel-entre {
  from { opacity: 0; transform: translateY(-6px) }
  to   { opacity: 1; transform: none }
}
.popup__champ--tel .popup__aide { display: block; margin: .35rem 0 0; }

/* — Les promesses : ce qu'on ne fera pas — */
.popup__promesses {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; gap: .35rem;
}
.popup__promesses li {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .8rem; line-height: 1.35; color: var(--encre-clair);
}
.popup__promesses svg { flex: none; margin-top: .22em; color: var(--vert); }

/* — La sortie, écrite noir sur blanc — */
.popup__non {
  display: block; width: 100%;
  margin-top: 1rem; padding: .5rem;
  border: 0; background: none; cursor: pointer;
  font-size: .85rem; color: var(--encre-clair);
  text-decoration: underline; text-underline-offset: 3px;
}
.popup__non:hover { color: var(--encre); }

/* — La croix — */
.popup__fermer {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92);
  color: var(--encre);
  box-shadow: var(--ombre-s);
  transition: transform .2s var(--easing), background .2s;
}
.popup__fermer:hover { transform: rotate(90deg); background: #fff; }

/* — L'écran de remerciement — */
.popup__merci {
  grid-column: 1 / -1;
  display: grid; place-items: center; text-align: center;
  gap: .5rem; padding: clamp(2.2rem, 6vw, 3.4rem);
}
.popup__merci[hidden] { display: none; }
.popup__coche {
  display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--vert-wash); color: var(--vert);
  margin-bottom: .4rem;
  animation: coche-entre .5s var(--easing);
}
@keyframes coche-entre {
  from { transform: scale(.6); opacity: 0 }
  to   { transform: none;      opacity: 1 }
}
.popup__merci h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.popup__merci p { color: var(--encre-doux); max-width: 26rem; }
.popup__merci .btn { margin-top: .8rem; }

/* — Petit écran — */
@media (max-width: 720px) {
  /* La photo devient un bandeau de hauteur fixe, et le formulaire prend
     tout le reste — c'est lui qui défile, pas la boîte entière. */
  .popup__boite {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 92dvh;
  }
  .popup__visuel { height: 88px; }
  /* Bandeau court : on vise le câlin (~45 % de la hauteur source), sinon
     on ne voit que le plafond et l'écran du fond. */
  .popup__visuel img { object-position: center 45%; }
  .popup__legende { padding: 1.1rem .8rem .5rem; font-size: .86rem; }
  .popup__legende span { display: inline; font-size: 1em; }
  .popup__corps { padding: 1rem 1rem 1.2rem; }
  /* Sur petit écran la pastille fait doublon avec la photo : on la retire. */
  .popup__pastille { display: none; }
  .popup__corps h2 { font-size: 1.3rem; }
  .popup__chapo { font-size: .88rem; margin-bottom: .8rem; }
  .popup__label { font-size: .74rem; }
  .popup__champ input { padding: .72rem .9rem; font-size: .95rem; }
  .popup__option { padding: .55rem .65rem; }
  .popup__option-corps b { font-size: .87rem; }
  .popup__option-corps small { font-size: .75rem; }
  .popup__choix { margin-bottom: .7rem; }
  .popup__envoyer { min-height: 50px; font-size: .96rem; }
  .popup__non { margin-top: .7rem; font-size: .8rem; }
  .popup__voie { font-size: .82rem; padding: .55rem .4rem; }
  .popup__aide { margin-bottom: .7rem; }
  .popup__champ { margin-bottom: .65rem; }
  .popup__promesses { margin-top: .9rem; }
  .popup__promesses li { font-size: .76rem; }
  .popup__fermer { width: 34px; height: 34px; top: 10px; right: 10px; }
}
/* Écran très bas : la photo mangerait toute la hauteur utile. */
@media (max-height: 620px) {
  .popup__visuel { display: none; }
  .popup__boite { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   LES QUATRE DÉPENSES, EN BÂTONS
   Remplace le camembert : on compare des hauteurs, pas des angles. Les
   hauteurs sont STRICTEMENT proportionnelles aux montants (250 € = 100 %),
   sans quoi la démonstration ne vaudrait rien. Aucun pourcentage affiché —
   la seule chose à comprendre, c'est que le Village est la plus petite.
   -------------------------------------------------------------------------- */
.batons { margin: 0 auto; max-width: 50rem; }
.batons__grille {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.5rem, 2vw, 1.4rem);
  align-items: end;
}
.baton { display: flex; flex-direction: column; justify-content: flex-end; }

/* L'étiquette de prix, posée au-dessus de la colonne comme une pancarte. */
.baton__prix {
  margin: 0 0 .5rem; text-align: center;
  background: var(--blanc); color: var(--encre);
  border-radius: 7px; padding: .32rem .2rem;
  font-size: .76rem; font-weight: 600; line-height: 1.1;
  box-shadow: 0 4px 12px -5px rgba(22,18,26,.3);
  transform: rotate(-1.6deg);
}
.baton:nth-child(2n) .baton__prix { transform: rotate(1.6deg); }
.baton__prix b { display: block; font-family: var(--manu); font-size: 1.55rem; line-height: 1; font-weight: 700; }

.baton__barre {
  /* --h porte le MONTANT en euros ; 1 € = 1,45 px. Les quatre hauteurs
     sont donc exactement proportionnelles : 250 € → 362 px, 50 € → 72 px.
     (Un pourcentage ne se multiplierait pas : calc(100% * 3.7) reste un
     pourcentage du parent et écrase la proportion.) */
  height: calc(var(--h) * 1.45px);
  min-height: 72px;
  border-radius: 12px 12px 4px 4px;
  background: var(--nuit);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; padding: .7rem .6rem; overflow: hidden;
}
.baton--village .baton__barre { background: var(--magenta); }
.baton__emoji { font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1; }
/* Blanc sur nuit : 14,85. Blanc sur magenta : 5,14. Les deux passent. */
.baton__quoi {
  margin: 0; text-align: center; color: #fff;
  font-size: clamp(.68rem, 1.35vw, .8rem); line-height: 1.28; font-weight: 600;
}
.baton--village .baton__barre { gap: 0; }
.baton__marque {
  font-family: var(--manu); font-size: clamp(1rem, 2.4vw, 1.4rem);
  font-weight: 700; color: #fff; line-height: 1; text-align: center;
}
.batons__note { text-align: center; margin-top: 1.2rem; color: var(--encre-clair); }

@media (max-width: 560px) {
  /* Sur téléphone, quatre colonnes de 80 px ne tiennent pas un libellé.
     On garde la comparaison — c'est tout l'intérêt du graphique — mais
     seuls l'émoji et le prix restent dans la colonne ; le libellé passe
     dessous, où il a toute la largeur de la colonne pour respirer. */
  .batons__grille { gap: .35rem; }
  .baton__barre { height: calc(var(--h) * 1.05px); min-height: 56px; padding: .45rem .25rem; gap: .2rem; }
  .baton__prix { font-size: .62rem; padding: .22rem .1rem; }
  .baton__prix b { font-size: 1.05rem; }
  .baton__quoi { position: static; font-size: .6rem; line-height: 1.2; }
  .baton__emoji { font-size: 1rem; }
  .baton__marque { font-size: .9rem; }
}
  .baton__barre { height: calc(var(--h) * 1.05px); min-height: 52px; }
  .baton__prix { font-size: .66rem; padding: .25rem .1rem; }
  .baton__prix b { font-size: 1.15rem; }
  .baton__quoi { font-size: .66rem; }
  .baton__quoi span { font-size: 1.05rem; }
}