/* ============================================================================
   CINDY PIROTH — Feuille de style
   Palette reprise de la carte de visite : crème, framboise, terracotta,
   soleil, mer, prairie.
   ========================================================================= */

/* --------------------------------------------------------------------------
   1. VARIABLES
   ----------------------------------------------------------------------- */
:root {
  --creme:        #FDF4EC;
  --creme-2:      #F9E8DA;
  --creme-3:      #F2D9C6;
  --framboise:    #BE2F5A;
  --framboise-cl: #E0658A;
  --terracotta:   #C15840;
  --soleil:       #F0A32F;
  --soleil-cl:    #FBD284;
  --mer:          #5690A9;
  --mer-fonce:    #33697F;
  --prairie:      #8CA765;
  --encre:        #3A2B27;
  --encre-doux:   #63504A;   /* assombri : contraste AAA pour le public senior */
  --blanc:        #FFFCF9;

  --r-s: 10px;
  --r-m: 20px;
  --r-l: 32px;
  --r-xl: 48px;

  /* --- Ombres ---------------------------------------------------------
     Trois couches, comme une vraie ombre : le contact net juste sous
     l'objet, l'ombre portée diffuse, puis l'ambiante très large.
     Teintées de brun chaud (jamais de gris : il n'existe pas dans cette
     palette et donne un rendu terne). */
  --ombre-s:
    0 1px 2px rgba(74, 48, 38, .05),
    0 3px 8px rgba(74, 48, 38, .045);
  --ombre-m:
    0 1px 2px rgba(74, 48, 38, .05),
    0 6px 14px rgba(74, 48, 38, .06),
    0 16px 34px rgba(74, 48, 38, .07);
  --ombre-l:
    0 1px 3px rgba(74, 48, 38, .06),
    0 10px 24px rgba(74, 48, 38, .07),
    0 30px 64px rgba(74, 48, 38, .09),
    0 60px 110px rgba(74, 48, 38, .05);

  /* Ombres colorées, pour les éléments qui portent déjà une couleur forte.
     Une ombre framboise sous un bouton framboise : l'objet paraît
     lumineux plutôt que posé sur une tache grise. */
  --ombre-framboise:
    0 2px 4px rgba(150, 32, 74, .16),
    0 8px 18px rgba(150, 32, 74, .20),
    0 18px 38px rgba(150, 32, 74, .14);
  --ombre-framboise-forte:
    0 3px 6px rgba(150, 32, 74, .18),
    0 12px 26px rgba(150, 32, 74, .26),
    0 26px 52px rgba(150, 32, 74, .18);
  --ombre-soleil:
    0 2px 4px rgba(178, 108, 12, .16),
    0 8px 18px rgba(178, 108, 12, .22),
    0 18px 38px rgba(178, 108, 12, .14);

  /* Courbes d'animation.
     --ressort donne le petit dépassement qui rend un mouvement vivant ;
     --doux sert aux transitions qui ne doivent pas se remarquer. */
  --ressort: cubic-bezier(.34, 1.42, .48, 1);
  --doux:    cubic-bezier(.22, .68, .32, 1);

  --titre: "Fraunces", "Georgia", "Times New Roman", serif;
  --texte: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Piloté par le panneau « Confort de lecture » */
  --echelle: 1;
  --max: 1180px;
  --gouttiere: clamp(20px, 5vw, 56px);
}

/* --------------------------------------------------------------------------
   2. BASE
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Décalage pour que les ancres ne passent pas sous la barre de navigation */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-size: calc(18px * var(--echelle));
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

h1 { font-size: calc(clamp(2.6rem, 7vw, 4.6rem) * var(--echelle)); }
h2 { font-size: calc(clamp(2rem, 4.6vw, 3.1rem) * var(--echelle)); }
h3 { font-size: calc(clamp(1.3rem, 2.4vw, 1.7rem) * var(--echelle)); }

p { margin: 0 0 1em; }
a { color: inherit; }
img, svg { max-width: 100%; }

.conteneur {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

section { position: relative; }

.section-pad { padding-block: clamp(72px, 11vw, 140px); }

/* Petit sur-titre au-dessus des grands titres */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--framboise);
  margin-bottom: 18px;
}
.surtitre::before {
  content: "";
  width: 32px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.chapo {
  font-size: calc(1.15rem * var(--echelle));
  color: var(--encre-doux);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   3. BOUTONS
   ----------------------------------------------------------------------- */
.btn {
  --bg: var(--framboise);
  --fg: var(--blanc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 58px;              /* grande cible : public senior */
  padding: 16px 30px;
  border: none;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--texte);
  font-size: calc(1.02rem * var(--echelle));
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ombre-framboise);
  transition: transform .3s var(--ressort),
              box-shadow .3s var(--doux), background .3s var(--doux);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--ombre-framboise-forte); }
.btn:active { transform: translateY(-1px); }

.btn--fantome {
  --bg: transparent;
  --fg: var(--encre);
  border: 2px solid rgba(58, 43, 39, .18);
  box-shadow: none;
}
.btn--fantome:hover { background: var(--blanc); border-color: var(--framboise); box-shadow: var(--ombre-m); }

.btn--soleil { --bg: var(--soleil); --fg: #4A2E05; box-shadow: var(--ombre-soleil); }
.btn--soleil:hover { box-shadow: var(--ombre-soleil), 0 26px 54px rgba(178, 108, 12, .18); }

/* Accessibilité clavier — visible partout */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--mer-fonce);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   4. BARRE DE NAVIGATION
   ----------------------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px var(--gouttiere);
  transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav.est-collee {
  background: rgba(253, 244, 236, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(58,43,39,.08), 0 8px 30px rgba(58,43,39,.06);
  padding-block: 8px;
}

.nav__marque {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.nav__logo { width: 46px; height: 46px; flex: none; }
.nav__nom {
  font-family: var(--titre);
  font-size: calc(1.22rem * var(--echelle));
  font-weight: 600;
  color: var(--framboise);
  line-height: 1.05;
}
.nav__role {
  display: block;
  font-family: var(--texte);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--encre-doux);
}

.nav__liens { display: flex; align-items: center; gap: 4px; }
.nav__lien {
  padding: 10px 15px;
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(.96rem * var(--echelle));
  text-decoration: none;
  color: var(--encre);
  transition: background .2s ease, color .2s ease;
}
.nav__lien:hover { background: var(--creme-2); color: var(--framboise); }

.nav__tel {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--framboise);
  color: var(--blanc);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--ombre-framboise);
  transition: transform .28s var(--ressort), box-shadow .28s var(--doux);
}
.nav__tel:hover { transform: translateY(-2px); }

/* Bouton hamburger (mobile) */
.nav__burger {
  display: none;
  width: 52px; height: 52px;
  border: 2px solid rgba(58,43,39,.16);
  border-radius: 16px;
  background: var(--blanc);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav__burger span {
  display: block; width: 22px; height: 2.5px;
  background: var(--encre); border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. HERO — scène illustrée animée
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-top: 110px;
  padding-bottom: 60px;
  overflow: hidden;
}

.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero__scene svg { width: 100%; height: 100%; display: block; }

.hero__grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 12px;
  border-radius: 999px;
  background: rgba(255, 252, 249, .82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(190, 47, 90, .18);
  font-size: calc(.88rem * var(--echelle));
  font-weight: 800;
  color: var(--framboise);
  margin-bottom: 26px;
  box-shadow: var(--ombre-s);
}
.hero__badge .pastille {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--prairie);
  box-shadow: 0 0 0 0 rgba(140,167,101,.7);
  animation: pouls 2.6s infinite;
}
@keyframes pouls {
  0%   { box-shadow: 0 0 0 0 rgba(140,167,101,.65); }
  70%  { box-shadow: 0 0 0 12px rgba(140,167,101,0); }
  100% { box-shadow: 0 0 0 0 rgba(140,167,101,0); }
}

.hero h1 { margin-bottom: .35em; }
.hero h1 .mot { display: inline-block; }
/* Le mot mis en avant, souligné d'un trait peint */
.hero h1 .peint {
  position: relative;
  color: var(--framboise);
  white-space: nowrap;
}
.hero h1 .peint svg {
  position: absolute;
  left: -2%; bottom: -.16em;
  width: 104%; height: .34em;
  overflow: visible;
}
.hero h1 .peint path {
  fill: none;
  stroke: var(--soleil);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  opacity: .85;
}
.est-visible .hero h1 .peint path,
.hero.est-visible h1 .peint path { animation: trace 1.1s .9s cubic-bezier(.6,.1,.3,1) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }

.hero__intro {
  font-size: calc(1.2rem * var(--echelle));
  color: var(--encre-doux);
  max-width: 52ch;
  margin-bottom: 34px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero__rassurance {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  font-size: calc(.94rem * var(--echelle));
  font-weight: 700;
  color: var(--encre-doux);
}
.hero__rassurance span { display: inline-flex; align-items: center; gap: 8px; }
.hero__rassurance svg { width: 18px; height: 18px; color: var(--prairie); flex: none; }

/* La « carte de visite » flottante à droite */
.carte-visite {
  position: relative;
  background: linear-gradient(150deg, var(--blanc), var(--creme-2));
  border-radius: var(--r-l);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: var(--ombre-l);
  border: 1px solid rgba(255,255,255,.9);
  transform: rotate(-1.6deg);
  transition: transform .5s cubic-bezier(.34,1.3,.5,1);
}
.carte-visite:hover { transform: rotate(0deg) translateY(-6px); }
.carte-visite__ruban {
  /* petit ruban en haut à droite */
  position: absolute;
  top: 20px; right: -8px;
  background: var(--soleil);
  color: #4A2E05;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .04em;
  padding: 7px 16px;
  border-radius: 999px 4px 4px 999px;
  box-shadow: 0 6px 16px rgba(240,163,47,.4);
}
.carte-visite__logo { width: 96px; height: 96px; margin-bottom: 18px; }
.carte-visite h2 {
  font-size: calc(1.9rem * var(--echelle));
  color: var(--framboise);
  margin-bottom: .1em;
}
.carte-visite__metier {
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .78rem;
  color: var(--encre-doux);
  padding-bottom: 18px;
  border-bottom: 2px dotted rgba(58,43,39,.18);
  margin-bottom: 18px;
}
.carte-visite__ligne {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 0;
  font-size: calc(1rem * var(--echelle));
}
.carte-visite__ligne svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--terracotta); }
.carte-visite__ligne strong { display: block; font-weight: 800; }
.carte-visite__ligne small { color: var(--encre-doux); font-size: .88em; }

/* Indicateur de défilement */
.defiler {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-doux);
  opacity: .75;
}
.defiler i {
  width: 2px; height: 42px;
  background: linear-gradient(var(--framboise), transparent);
  border-radius: 2px;
  animation: coule 2.2s ease-in-out infinite;
}
@keyframes coule {
  0%, 100% { transform: scaleY(.35); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* --------------------------------------------------------------------------
   6. BANDEAU DE CHIFFRES
   ----------------------------------------------------------------------- */
.chiffres {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(58,43,39,.1);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--ombre-m);
  margin-top: -46px;
}
.chiffres div {
  background: var(--blanc);
  padding: 26px 18px;
  text-align: center;
}
.chiffres b {
  display: block;
  font-family: var(--titre);
  font-size: calc(2rem * var(--echelle));
  color: var(--framboise);
  line-height: 1;
  margin-bottom: 6px;
}
.chiffres small {
  font-size: calc(.88rem * var(--echelle));
  color: var(--encre-doux);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. PUBLICS — les « portes » à ouvrir
   ----------------------------------------------------------------------- */
.publics { background: var(--blanc); }

.portes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.porte {
  position: relative;
  border: none;
  text-align: left;
  border-radius: var(--r-l);
  padding: 30px 26px;
  min-height: 300px;
  cursor: pointer;
  font-family: var(--texte);
  color: var(--encre);
  background: var(--creme);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.34,1.25,.5,1), box-shadow .4s ease, background .4s ease;
}
.porte::after {
  /* halo coloré qui monte au survol */
  content: "";
  position: absolute;
  inset: auto -30% -70% -30%;
  height: 120%;
  background: radial-gradient(60% 60% at 50% 100%, var(--teinte, var(--soleil-cl)) 0%, transparent 72%);
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
  transform: translateY(28px);
  pointer-events: none;
}
.porte:hover, .porte[aria-expanded="true"] { transform: translateY(-6px); box-shadow: var(--ombre-m); background: var(--blanc); }
.porte:hover::after, .porte[aria-expanded="true"]::after { opacity: .5; transform: translateY(0); }

.porte > * { position: relative; z-index: 1; }
.porte__icone {
  width: 68px; height: 68px;
  border-radius: 20px;
  display: grid; place-items: center;
  background: var(--teinte, var(--soleil-cl));
  margin-bottom: 20px;
  transition: transform .4s cubic-bezier(.34,1.4,.5,1);
}
.porte:hover .porte__icone { transform: rotate(-6deg) scale(1.06); }
.porte__icone svg { width: 36px; height: 36px; color: var(--encre); }
.porte h3 { margin-bottom: .3em; }
.porte__accroche { color: var(--encre-doux); font-size: calc(.98rem * var(--echelle)); margin: 0; }
.porte__plus {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: .92rem;
  color: var(--framboise);
}
.porte__plus svg { width: 16px; height: 16px; transition: transform .3s ease; }
.porte[aria-expanded="true"] .porte__plus svg { transform: rotate(45deg); }

/* Le panneau qui se déplie sous les portes */
.porte-panneau {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.5,0,.2,1);
}
.porte-panneau[data-ouvert="true"] { grid-template-rows: 1fr; }
.porte-panneau > div { overflow: hidden; }
.porte-panneau__interieur {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  background: var(--creme-2);
  border-radius: var(--r-l);
  padding: clamp(28px, 4vw, 46px);
  margin-top: 16px;
}
.porte-panneau__interieur p { font-size: calc(1.08rem * var(--echelle)); }
.porte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.porte-liste li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--blanc);
  padding: 14px 18px;
  border-radius: var(--r-s);
  font-weight: 600;
  box-shadow: var(--ombre-s);
}
.porte-liste svg { width: 20px; height: 20px; flex: none; color: var(--prairie); margin-top: 2px; }

/* --------------------------------------------------------------------------
   8. FORMULES — le chemin sinueux
   ----------------------------------------------------------------------- */
.formules { background: var(--creme); }

.chemin { position: relative; margin-top: 70px; }

/* Le trait qui serpente, dessiné au défilement */
.chemin__trait {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 260px; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.chemin__trait path {
  fill: none;
  stroke: var(--creme-3);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
}
.chemin__trait .trait-plein {
  stroke: var(--framboise-cl);
  stroke-dasharray: var(--long, 3000);
  stroke-dashoffset: var(--long, 3000);
  opacity: .8;
}

.halte {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 130px 1fr;
  align-items: center;
  margin-bottom: 34px;
}
.halte:last-child { margin-bottom: 0; }
.halte:nth-child(even) .halte__carte { grid-column: 3; }
.halte:nth-child(odd)  .halte__carte { grid-column: 1; }

/* La pastille numérotée au centre du chemin */
.halte__pastille {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc);
  border: 4px solid var(--couleur, var(--soleil));
  font-family: var(--titre);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--couleur, var(--soleil));
  box-shadow: var(--ombre-m);
  transition: transform .5s cubic-bezier(.34,1.4,.5,1);
}
.halte.est-vue .halte__pastille { animation: rebond .7s cubic-bezier(.34,1.5,.5,1); }
@keyframes rebond {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}

.halte__carte {
  grid-row: 1;
  background: var(--blanc);
  border-radius: var(--r-l);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--ombre-s);
  border-top: 6px solid var(--couleur, var(--soleil));
  transition: transform .4s ease, box-shadow .4s ease;
}
.halte__carte:hover { transform: translateY(-6px); box-shadow: var(--ombre-l); }

.halte__entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.halte__nom { font-size: calc(1.75rem * var(--echelle)); margin-bottom: .12em; }
.halte__nom span { color: var(--couleur, var(--soleil)); }
.halte__accroche { color: var(--encre-doux); font-weight: 700; margin-bottom: 1em; }

.etiquette-duree {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--creme-2);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: .88rem; font-weight: 800;
  white-space: nowrap;
}
.etiquette-duree svg { width: 15px; height: 15px; color: var(--encre-doux); }

.halte__prix {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 4px;
  padding-top: 22px;
  border-top: 2px dotted rgba(58,43,39,.14);
}
.halte__prix b {
  font-family: var(--titre);
  font-size: calc(2.1rem * var(--echelle));
  color: var(--encre);
  line-height: 1;
}
.halte__prix small { color: var(--encre-doux); font-weight: 700; }
.halte__note { font-size: .86rem; color: var(--encre-doux); font-style: italic; margin: 10px 0 0; }

.halte__inclus { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.halte__inclus li { display: flex; gap: 11px; align-items: flex-start; font-size: calc(.98rem * var(--echelle)); }
.halte__inclus svg { width: 19px; height: 19px; flex: none; color: var(--couleur, var(--soleil)); margin-top: 3px; }

.formules__pied {
  margin-top: 54px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.formules__frais {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--blanc);
  border: 2px dashed var(--creme-3);
  border-radius: var(--r-m);
  padding: 16px 26px;
  font-weight: 700;
  color: var(--encre-doux);
}
.formules__frais svg { width: 22px; height: 22px; color: var(--terracotta); flex: none; }

/* --------------------------------------------------------------------------
   9. LE GUIDE — petit questionnaire
   ----------------------------------------------------------------------- */
.guide {
  background: linear-gradient(165deg, var(--mer-fonce), #2A5468);
  color: var(--blanc);
  overflow: hidden;
}
.guide h2 { color: var(--blanc); }
.guide .surtitre { color: var(--soleil-cl); }
.guide .chapo { color: rgba(255,252,249,.78); }

.guide__boite {
  max-width: 780px;
  margin: 44px auto 0;
  background: rgba(255,252,249,.07);
  border: 1px solid rgba(255,252,249,.16);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 52px);
  backdrop-filter: blur(10px);
  position: relative;
  min-height: 420px;
  display: flex; flex-direction: column;
}

.guide__progression {
  display: flex; gap: 8px; margin-bottom: 34px;
}
.guide__progression i {
  height: 5px; flex: 1;
  background: rgba(255,252,249,.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.guide__progression i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--soleil);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s ease;
}
.guide__progression i.faite::after { transform: scaleX(1); }

.guide__etape { display: none; animation: apparait .5s ease both; }
.guide__etape.active { display: block; }
@keyframes apparait {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.guide__question {
  font-family: var(--titre);
  font-size: calc(clamp(1.5rem, 3vw, 2.1rem) * var(--echelle));
  margin-bottom: 28px;
}

.guide__choix { display: grid; gap: 12px; }
.choix {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  padding: 20px 24px;
  border-radius: var(--r-m);
  border: 2px solid rgba(255,252,249,.2);
  background: rgba(255,252,249,.05);
  color: var(--blanc);
  font-family: var(--texte);
  font-size: calc(1.05rem * var(--echelle));
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.choix:hover { transform: translateX(6px); background: rgba(255,252,249,.14); border-color: var(--soleil); }
.choix i {
  width: 40px; height: 40px; flex: none;
  border-radius: 12px;
  background: rgba(255,252,249,.14);
  display: grid; place-items: center;
  font-style: normal; font-weight: 800;
  font-size: .95rem;
}
.choix:hover i { background: var(--soleil); color: #4A2E05; }

.guide__retour {
  margin-top: auto; padding-top: 26px;
  background: none; border: none;
  color: rgba(255,252,249,.6);
  font-family: var(--texte); font-weight: 700;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
}
.guide__retour:hover { color: var(--blanc); }
.guide__retour svg { width: 16px; height: 16px; }

/* Résultat du questionnaire */
.guide__resultat { text-align: center; }
.guide__resultat .badge-reco {
  display: inline-block;
  background: var(--soleil);
  color: #4A2E05;
  font-weight: 800; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 999px;
  margin-bottom: 20px;
}
.guide__resultat h3 {
  font-size: calc(clamp(2rem, 4.4vw, 3rem) * var(--echelle));
  color: var(--blanc);
  margin-bottom: .2em;
}
.guide__resultat p { color: rgba(255,252,249,.82); max-width: 46ch; margin-inline: auto; }
.guide__resultat .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.guide__resultat .btn--fantome { color: var(--blanc); border-color: rgba(255,252,249,.4); }
.guide__resultat .btn--fantome:hover { background: rgba(255,252,249,.14); border-color: var(--blanc); }

/* --------------------------------------------------------------------------
   10. FRISE HORAIRE — une après-midi type
   ----------------------------------------------------------------------- */
.journee { background: var(--blanc); overflow: hidden; }

.frise {
  display: flex;
  gap: 20px;
  margin-top: 50px;
  padding-bottom: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--creme-3) transparent;
  /* débordement volontaire jusqu'au bord de l'écran */
  margin-inline: calc(var(--gouttiere) * -1);
  padding-inline: var(--gouttiere);
}
.frise::-webkit-scrollbar { height: 8px; }
.frise::-webkit-scrollbar-track { background: var(--creme-2); border-radius: 4px; }
.frise::-webkit-scrollbar-thumb { background: var(--creme-3); border-radius: 4px; }

.moment {
  scroll-snap-align: start;
  flex: 0 0 clamp(240px, 30vw, 300px);
  position: relative;
  padding-top: 44px;
}
.moment::before {
  /* la ligne du temps */
  content: "";
  position: absolute;
  top: 15px; left: 0; right: -20px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--creme-3) 0 8px, transparent 8px 16px);
}
.moment:last-child::before { right: 0; }
.moment::after {
  content: "";
  position: absolute;
  top: 8px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--blanc);
  border: 4px solid var(--framboise-cl);
  transition: transform .35s cubic-bezier(.34,1.5,.5,1), border-color .3s ease;
}
.moment:hover::after { transform: scale(1.35); border-color: var(--framboise); }

.moment__heure {
  display: inline-block;
  font-family: var(--titre);
  font-size: calc(1.5rem * var(--echelle));
  color: var(--framboise);
  margin-bottom: 6px;
}
.moment h3 { font-size: calc(1.2rem * var(--echelle)); margin-bottom: .35em; }
.moment p { color: var(--encre-doux); font-size: calc(.98rem * var(--echelle)); margin: 0; }

.frise-aide {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 8px;
  font-size: .88rem; font-weight: 700; color: var(--encre-doux);
}
.frise-aide svg { width: 20px; height: 20px; animation: glisse 2.4s ease-in-out infinite; }
@keyframes glisse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(7px); }
}

/* --------------------------------------------------------------------------
   11. ABONNEMENTS
   ----------------------------------------------------------------------- */
.abos { background: var(--creme-2); }

.abos__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 50px;
}

.abo {
  background: var(--blanc);
  border-radius: var(--r-l);
  padding: 32px 26px;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow: var(--ombre-s);
  transition: transform .4s cubic-bezier(.34,1.25,.5,1), box-shadow .4s ease;
}
.abo:hover { transform: translateY(-8px); box-shadow: var(--ombre-l); }
.abo--populaire {
  background: linear-gradient(165deg, var(--framboise), #96204A);
  color: var(--blanc);
  transform: scale(1.035);
}
.abo--populaire:hover { transform: scale(1.035) translateY(-8px); }
.abo--populaire h3 { color: var(--blanc); }

.abo__ruban {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--soleil);
  color: #4A2E05;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(240,163,47,.4);
}

.abo h3 { margin-bottom: .2em; }
.abo__rythme { font-weight: 800; color: var(--framboise); font-size: .95rem; margin-bottom: 20px; }
.abo--populaire .abo__rythme { color: var(--soleil-cl); }

/* Le petit graphique de fréquence : des points par semaine */
.abo__frequence {
  display: flex; gap: 6px; align-items: flex-end;
  height: 46px; margin-bottom: 20px;
}
.abo__frequence i {
  flex: 1;
  background: var(--creme-2);
  border-radius: 5px;
  height: 30%;
  transition: height .5s cubic-bezier(.34,1.3,.5,1), background .3s ease;
}
.abo__frequence i.plein { background: var(--soleil); height: 100%; }
.abo--populaire .abo__frequence i { background: rgba(255,252,249,.2); }
.abo--populaire .abo__frequence i.plein { background: var(--soleil); }

.abo__detail { font-size: calc(.96rem * var(--echelle)); color: var(--encre-doux); flex: 1; }
.abo--populaire .abo__detail { color: rgba(255,252,249,.8); }

.abo__prix {
  font-family: var(--titre);
  font-size: calc(2.2rem * var(--echelle));
  line-height: 1;
  margin: 20px 0 4px;
  padding-top: 20px;
  border-top: 2px dotted rgba(58,43,39,.14);
}
.abo--populaire .abo__prix { border-top-color: rgba(255,252,249,.28); }
.abo__prix span { font-family: var(--texte); font-size: .42em; font-weight: 700; color: var(--encre-doux); }
.abo--populaire .abo__prix span { color: rgba(255,252,249,.7); }
.abo__eco { font-size: .88rem; font-weight: 700; color: var(--prairie); }
.abo--populaire .abo__eco { color: var(--soleil-cl); }

.abos__note {
  margin-top: 34px;
  text-align: center;
  font-size: .95rem;
  color: var(--encre-doux);
}

/* Encart avantage fiscal (affiché seulement si déclaration SAP) */
.encart-fiscal {
  margin-top: 34px;
  display: flex; align-items: center; gap: 20px;
  background: var(--blanc);
  border-left: 6px solid var(--prairie);
  border-radius: var(--r-m);
  padding: 24px 28px;
  box-shadow: var(--ombre-s);
}
.encart-fiscal svg { width: 40px; height: 40px; flex: none; color: var(--prairie); }
.encart-fiscal b { display: block; font-size: calc(1.1rem * var(--echelle)); }
.encart-fiscal p { margin: 4px 0 0; color: var(--encre-doux); font-size: .95rem; }

/* --------------------------------------------------------------------------
   12. ZONE D'INTERVENTION
   ----------------------------------------------------------------------- */
.zone { background: var(--creme); }
.zone__grille {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.zone__carte { position: relative; }
.zone__carte svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(58,43,39,.16)); }

.zone__communes { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0; }
.zone__communes span {
  background: var(--blanc);
  border: 1px solid var(--creme-3);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: calc(.94rem * var(--echelle));
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.zone__communes span:hover { transform: translateY(-3px); background: var(--soleil-cl); border-color: var(--soleil); }
.zone__note {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 700; color: var(--terracotta);
}
.zone__note svg { width: 22px; height: 22px; flex: none; }

/* --------------------------------------------------------------------------
   13. FAQ
   ----------------------------------------------------------------------- */
.faq { background: var(--blanc); }
.faq__liste { max-width: 860px; margin: 46px auto 0; display: grid; gap: 12px; }

.question {
  background: var(--creme);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: background .3s ease, box-shadow .3s ease;
}
.question[data-ouvert="true"] { background: var(--blanc); box-shadow: var(--ombre-m); }

.question__bouton {
  width: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 24px 28px;
  background: none; border: none;
  font-family: var(--titre);
  font-size: calc(1.18rem * var(--echelle));
  font-weight: 600;
  color: var(--encre);
  text-align: left;
  cursor: pointer;
}
.question__signe {
  margin-left: auto;
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: var(--blanc);
  display: grid; place-items: center;
  transition: transform .4s cubic-bezier(.34,1.4,.5,1), background .3s ease;
}
.question[data-ouvert="true"] .question__signe { transform: rotate(135deg); background: var(--framboise); color: var(--blanc); }
.question__signe svg { width: 17px; height: 17px; }

.question__reponse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.5,0,.2,1);
}
.question[data-ouvert="true"] .question__reponse { grid-template-rows: 1fr; }
.question__reponse > div { overflow: hidden; }
.question__reponse p {
  padding: 0 28px 28px 78px;
  color: var(--encre-doux);
  font-size: calc(1.02rem * var(--echelle));
  margin: 0;
}

/* --------------------------------------------------------------------------
   14. CONTACT
   ----------------------------------------------------------------------- */
.contact { background: var(--creme-2); }
.contact__grille {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

.contact__direct { display: grid; gap: 14px; margin-top: 30px; }
.lien-direct {
  display: flex; align-items: center; gap: 18px;
  background: var(--blanc);
  border-radius: var(--r-m);
  padding: 20px 24px;
  text-decoration: none;
  box-shadow: var(--ombre-s);
  transition: transform .3s ease, box-shadow .3s ease;
}
.lien-direct:hover { transform: translateX(6px); box-shadow: var(--ombre-m); }
.lien-direct i {
  width: 50px; height: 50px; flex: none;
  border-radius: 15px;
  background: var(--creme-2);
  display: grid; place-items: center;
}
.lien-direct i svg { width: 24px; height: 24px; color: var(--framboise); }
.lien-direct b { display: block; font-size: calc(1.12rem * var(--echelle)); }
.lien-direct small { color: var(--encre-doux); }

/* Le formulaire, écrit comme une phrase */
.formulaire {
  background: var(--blanc);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--ombre-m);
}
.champ { margin-bottom: 22px; }
.champ label {
  display: block;
  font-weight: 800;
  margin-bottom: 9px;
  font-size: calc(1rem * var(--echelle));
}
.champ .aide { display: block; font-weight: 600; color: var(--encre-doux); font-size: .88em; margin-top: -4px; margin-bottom: 9px; }

.champ input,
.champ textarea,
.champ select {
  width: 100%;
  min-height: 58px;
  padding: 16px 20px;
  border: 2px solid var(--creme-3);
  border-radius: var(--r-s);
  background: var(--creme);
  font-family: var(--texte);
  font-size: calc(1.02rem * var(--echelle));
  color: var(--encre);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.champ textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-color: var(--framboise);
  background: var(--blanc);
  box-shadow: 0 0 0 4px rgba(190,47,90,.12);
}
.champ input::placeholder, .champ textarea::placeholder { color: #B8A49D; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Les motifs, sous forme de pastilles cliquables */
.motifs { display: flex; flex-wrap: wrap; gap: 10px; }
.motifs label {
  margin: 0;
  cursor: pointer;
}
.motifs input {
  /* masqué visuellement, mais toujours accessible au clavier et aux lecteurs d'écran */
  position: absolute;
  width: 1px; height: 1px;
  min-height: 0;
  margin: 0; padding: 0; border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.motifs span {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 999px;
  border: 2px solid var(--creme-3);
  background: var(--creme);
  font-weight: 700;
  font-size: calc(.96rem * var(--echelle));
  transition: all .25s ease;
}
.motifs label:hover span { border-color: var(--framboise-cl); }
.motifs input:checked + span {
  background: var(--framboise);
  border-color: var(--framboise);
  color: var(--blanc);
  box-shadow: 0 5px 16px rgba(190,47,90,.28);
}
.motifs input:focus-visible + span { outline: 3px solid var(--mer-fonce); outline-offset: 3px; }

/* La case du rappel SMS, mise en valeur */
.case-sms {
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(140deg, var(--creme-2), var(--creme));
  border: 2px solid var(--soleil-cl);
  border-radius: var(--r-m);
  padding: 20px 22px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.case-sms:hover { border-color: var(--soleil); box-shadow: 0 6px 20px rgba(240,163,47,.2); }
.case-sms input { width: 26px; height: 26px; flex: none; margin: 2px 0 0; accent-color: var(--framboise); cursor: pointer; }
.case-sms b { display: block; font-size: calc(1rem * var(--echelle)); }
.case-sms small { color: var(--encre-doux); display: block; margin-top: 3px; }

.formulaire .btn { width: 100%; }
.formulaire__mention {
  margin: 16px 0 0;
  text-align: center;
  font-size: .85rem;
  color: var(--encre-doux);
}

/* Message de confirmation */
.merci {
  display: none;
  text-align: center;
  padding: 30px 10px;
}
.merci.visible { display: block; animation: apparait .5s ease both; }
.merci svg { width: 74px; height: 74px; color: var(--prairie); margin-bottom: 18px; }
.merci h3 { font-size: calc(1.7rem * var(--echelle)); }
.merci p { color: var(--encre-doux); max-width: 40ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   15. PIED DE PAGE
   ----------------------------------------------------------------------- */
.pied {
  background: var(--encre);
  color: var(--creme);
  padding-block: 70px 34px;
}
.pied__haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(253,244,236,.14);
}
.pied__marque { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pied__marque svg { width: 56px; height: 56px; }
.pied__marque b { font-family: var(--titre); font-size: 1.5rem; color: var(--blanc); }
.pied__phrase { font-family: var(--titre); font-size: 1.35rem; color: var(--soleil-cl); max-width: 22ch; }
.pied h4 {
  font-family: var(--texte);
  font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(253,244,236,.5);
  margin-bottom: 16px;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied a { color: rgba(253,244,236,.86); text-decoration: none; transition: color .2s ease; }
.pied a:hover { color: var(--soleil-cl); }
.pied__bas {
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: .85rem;
  color: rgba(253,244,236,.5);
}

/* --------------------------------------------------------------------------
   16. PANNEAU « CONFORT DE LECTURE »
   ----------------------------------------------------------------------- */
.confort-bouton {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 120;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  background: var(--framboise);
  color: var(--blanc);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: var(--ombre-framboise-forte);
  transition: transform .34s var(--ressort), box-shadow .34s var(--doux);
}
.confort-bouton:hover { transform: scale(1.08) rotate(8deg); }
.confort-bouton svg { width: 28px; height: 28px; }

.confort-panneau {
  position: fixed;
  right: 20px; bottom: 96px;
  z-index: 120;
  width: min(330px, calc(100vw - 40px));
  background: var(--blanc);
  border-radius: var(--r-l);
  padding: 26px;
  box-shadow: var(--ombre-l);
  border: 1px solid var(--creme-3);
  transform: translateY(16px) scale(.94);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.34,1.3,.5,1), opacity .3s ease;
  transform-origin: bottom right;
}
.confort-panneau[data-ouvert="true"] { transform: none; opacity: 1; pointer-events: auto; }
.confort-panneau h4 { font-family: var(--titre); font-size: 1.25rem; margin-bottom: 4px; }
.confort-panneau > p { font-size: .9rem; color: var(--encre-doux); margin-bottom: 20px; }

.confort-ligne { margin-bottom: 18px; }
.confort-ligne > span {
  display: block; font-weight: 800; font-size: .88rem; margin-bottom: 9px;
}
.confort-boutons { display: flex; gap: 7px; }
.confort-boutons button {
  flex: 1;
  min-height: 48px;
  border: 2px solid var(--creme-3);
  border-radius: var(--r-s);
  background: var(--creme);
  font-family: var(--texte);
  font-weight: 800;
  color: var(--encre);
  cursor: pointer;
  transition: all .2s ease;
}
.confort-boutons button:hover { border-color: var(--framboise-cl); }
.confort-boutons button[aria-pressed="true"] {
  background: var(--framboise); border-color: var(--framboise); color: var(--blanc);
}

/* Modes de confort appliqués au document */
html.contraste-fort {
  --creme: #FFFFFF;
  --creme-2: #F4F4F4;
  --creme-3: #C9C9C9;
  --blanc: #FFFFFF;
  --encre: #101010;
  --encre-doux: #3A3A3A;
  --framboise: #97103D;
  --mer-fonce: #14465C;
}
html.contraste-fort .porte::after,
html.contraste-fort .hero__scene { display: none; }
html.contraste-fort .halte__carte,
html.contraste-fort .abo,
html.contraste-fort .porte { border: 2px solid var(--encre); }

html.sans-animation *,
html.sans-animation *::before,
html.sans-animation *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   17. APPARITION AU DÉFILEMENT
   ----------------------------------------------------------------------- */
[data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
  transition-delay: var(--retard, 0ms);
}
[data-anim="gauche"] { transform: translateX(-34px); }
[data-anim="droite"] { transform: translateX(34px); }
[data-anim="zoom"]   { transform: scale(.94); }
[data-anim].est-vue  { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-anim] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE
   ----------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .portes       { grid-template-columns: repeat(2, 1fr); }
  .abos__grille { grid-template-columns: repeat(2, 1fr); }
  .abo--populaire { transform: none; }
  .abo--populaire:hover { transform: translateY(-8px); }
  .pied__haut   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav__liens {
    position: absolute;
    top: 100%; left: var(--gouttiere); right: var(--gouttiere);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--blanc);
    border-radius: var(--r-m);
    padding: 12px;
    box-shadow: var(--ombre-l);
    transform: translateY(-10px) scale(.98);
    opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .25s ease;
  }
  .nav__liens[data-ouvert="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav__lien { padding: 15px 18px; font-size: 1.05rem; }
  .nav__burger { display: flex; }
  .nav__tel span { display: none; }
  .nav__tel { padding: 13px; }

  .hero { min-height: auto; padding-top: 130px; }
  .hero__grille { grid-template-columns: 1fr; }
  .carte-visite { transform: none; max-width: 460px; }
  .defiler { display: none; }

  .chiffres { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }

  .porte-panneau__interieur { grid-template-columns: 1fr; }

  /* Le chemin devient une simple colonne */
  .chemin__trait { display: none; }
  .halte { grid-template-columns: 1fr; margin-bottom: 22px; }
  .halte:nth-child(even) .halte__carte,
  .halte:nth-child(odd)  .halte__carte { grid-column: 1; }
  .halte__pastille {
    grid-column: 1; grid-row: 1;
    justify-self: start;
    width: 56px; height: 56px;
    font-size: 1.15rem;
    margin-bottom: -28px;
    margin-left: 22px;
    position: relative; z-index: 2;
  }
  .halte__carte { grid-row: 2; padding-top: 44px; }

  .zone__grille    { grid-template-columns: 1fr; }
  .contact__grille { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --gouttiere: 20px; }
  body { font-size: calc(17px * var(--echelle)); }
  .portes       { grid-template-columns: 1fr; }
  .porte        { min-height: auto; }
  .abos__grille { grid-template-columns: 1fr; }
  .chiffres     { grid-template-columns: repeat(2, 1fr); }
  .duo          { grid-template-columns: 1fr; }
  .pied__haut   { grid-template-columns: 1fr; gap: 30px; }
  .question__reponse p { padding-left: 28px; }
  .encart-fiscal { flex-direction: column; text-align: center; }
  .hero__actions .btn { width: 100%; }
  .confort-bouton { width: 56px; height: 56px; right: 14px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   19. IMPRESSION
   ----------------------------------------------------------------------- */
@media print {
  .nav, .confort-bouton, .confort-panneau, .defiler, .guide, .hero__scene { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .section-pad { padding-block: 24px; }
  .halte__carte, .abo { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   20. ANIMATIONS DE LA SCÈNE DU HERO
   ----------------------------------------------------------------------- */
.scene-soleil, .scene-nuages, .scene-bateau-a { will-change: transform; }

/* Le soleil respire très lentement */
.scene-soleil circle:last-child { animation: respire 7s ease-in-out infinite; transform-origin: 1090px 470px; }
@keyframes respire {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* Dérive des nuages, à trois vitesses différentes */
.nuage-a { animation: derive 46s linear infinite; }
.nuage-b { animation: derive 62s linear infinite reverse; }
.nuage-c { animation: derive 78s linear infinite; }
@keyframes derive {
  from { transform: translateX(-140px); }
  to   { transform: translateX(1580px); }
}

/* Vaguelettes */
.vague-a { animation: ondule 9s ease-in-out infinite; }
.vague-b { animation: ondule 13s ease-in-out infinite reverse; }
@keyframes ondule {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-118px); }
}

/* Le reflet du soleil scintille */
.scene-reflet rect { animation: scintille 4.5s ease-in-out infinite; }
.scene-reflet rect:nth-child(2) { animation-delay: .5s; }
.scene-reflet rect:nth-child(3) { animation-delay: 1s; }
.scene-reflet rect:nth-child(4) { animation-delay: 1.5s; }
.scene-reflet rect:nth-child(5) { animation-delay: 2s; }
.scene-reflet rect:nth-child(6) { animation-delay: 2.5s; }
@keyframes scintille {
  0%, 100% { opacity: .35; transform: scaleX(.9); }
  50%      { opacity: .85; transform: scaleX(1.06); }
}

/* Les bateaux tanguent doucement */
.scene-bateau-a, .scene-bateau-b { animation: tangue 6.5s ease-in-out infinite; transform-origin: center bottom; }
.scene-bateau-b { animation-duration: 8.5s; animation-delay: -2s; }
@keyframes tangue {
  0%, 100% { rotate: -1.4deg; translate: 0 0; }
  50%      { rotate: 1.4deg;  translate: 0 -4px; }
}

/* Les oiseaux traversent le ciel */
.scene-oiseaux { animation: vole 34s linear infinite; }
@keyframes vole {
  0%   { transform: translate(-180px, 30px); opacity: 0; }
  12%  { opacity: .65; }
  88%  { opacity: .65; }
  100% { transform: translate(1180px, -70px); opacity: 0; }
}

/* La zone d'intervention sur la carte de Corse */
.zone-halo   { animation: souffle 6s ease-in-out infinite; transform-origin: 193px 262px; }
.zone-anneau { animation: tourne 60s linear infinite; transform-origin: 193px 262px; }
.zone-pin    { animation: pointe 3.4s ease-in-out infinite; transform-origin: 193px 262px; }
@keyframes souffle { 0%, 100% { transform: scale(.97); opacity: .85; } 50% { transform: scale(1.03); opacity: 1; } }
@keyframes tourne  { to { transform: rotate(360deg); } }
@keyframes pointe  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* --------------------------------------------------------------------------
   21. QUI JE SUIS
   ----------------------------------------------------------------------- */
.apropos { background: var(--creme-2); }

.apropos__grille {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}

.portrait { position: relative; }

/* Le cadre en arche : ni un rond, ni un carré */
.portrait__cadre {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% 22px 22px / 34% 34% 22px 22px;
  overflow: hidden;
  background: linear-gradient(165deg, var(--soleil-cl), var(--terracotta));
  box-shadow: var(--ombre-l);
  transform: rotate(-1.8deg);
  transition: transform .6s cubic-bezier(.34,1.25,.5,1);
}
.portrait:hover .portrait__cadre { transform: rotate(0deg); }
.portrait__cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait__cadre svg { width: 100%; height: 100%; display: block; }

/* Le tampon rond « monitrice éducatrice », posé en bas à droite */
.portrait__tampon {
  position: absolute;
  right: -22px; bottom: -18px;
  width: clamp(96px, 12vw, 132px);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(58,43,39,.3));
  animation: tampon-tourne 26s linear infinite;
}
@keyframes tampon-tourne { to { transform: rotate(360deg); } }

.portrait__legende {
  display: block;
  margin-top: 16px;
  padding-left: 6px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--encre-doux);
  font-style: italic;
}

.apropos p {
  font-size: calc(1.1rem * var(--echelle));
  color: var(--encre-doux);
  max-width: 58ch;
}
.apropos p:first-of-type { font-size: calc(1.24rem * var(--echelle)); color: var(--encre); }

/* La signature, façon manuscrite */
.signature {
  font-family: var(--titre);
  font-size: calc(2.4rem * var(--echelle)) !important;
  font-style: italic;
  font-weight: 400;
  color: var(--framboise) !important;
  margin-top: .5em !important;
  transform: rotate(-4deg);
  transform-origin: left center;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   22. MA CHARTE — les engagements
   ----------------------------------------------------------------------- */
.charte { background: var(--blanc); }

.engagements {
  list-style: none;
  counter-reset: engagement;
  margin: 50px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--creme-3);
  border-radius: var(--r-l);
  overflow: hidden;
}

.engagement {
  counter-increment: engagement;
  background: var(--blanc);
  padding: 34px 30px 30px;
  position: relative;
  transition: background .35s ease;
}
.engagement:hover { background: var(--creme); }

/* Le grand chiffre en filigrane */
.engagement::before {
  content: counter(engagement, decimal-leading-zero);
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--titre);
  font-size: 3.4rem;
  font-weight: 700;
  color: var(--creme-3);
  line-height: 1;
  transition: color .35s ease;
  pointer-events: none;
}
.engagement:hover::before { color: var(--soleil-cl); }

/* La coche dessinée, qui se trace à l'apparition */
.engagement__coche { width: 34px; height: 34px; margin-bottom: 16px; display: block; overflow: visible; }
.engagement__coche path {
  fill: none;
  stroke: var(--prairie);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
}
.engagement.est-vue .engagement__coche path {
  animation: trace-coche .55s var(--retard, 0ms) cubic-bezier(.5,0,.2,1) forwards;
}
@keyframes trace-coche { to { stroke-dashoffset: 0; } }

.engagement h3 { font-size: calc(1.22rem * var(--echelle)); margin-bottom: .35em; padding-right: 40px; }
.engagement p { color: var(--encre-doux); font-size: calc(.99rem * var(--echelle)); margin: 0; }

@media (max-width: 1080px) {
  .engagements { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .apropos__grille { grid-template-columns: 1fr; }
  .portrait { max-width: 380px; }
  .portrait__cadre { transform: none; }
}
@media (max-width: 620px) {
  .engagements { grid-template-columns: 1fr; border-radius: var(--r-m); }
  .engagement { padding: 26px 24px; }
  .engagement::before { font-size: 2.6rem; }
}

/* --------------------------------------------------------------------------
   23. BARRE DE NAVIGATION — bascule en menu déroulant plus tôt
   Avec six entrées, la barre ne tient plus en dessous de 1040 px.
   ----------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .nav__liens {
    position: absolute;
    top: 100%; left: var(--gouttiere); right: var(--gouttiere);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--blanc);
    border-radius: var(--r-m);
    padding: 12px;
    box-shadow: var(--ombre-l);
    transform: translateY(-10px) scale(.98);
    opacity: 0; pointer-events: none;
    transition: transform .3s ease, opacity .25s ease;
  }
  .nav__liens[data-ouvert="true"] { transform: none; opacity: 1; pointer-events: auto; }
  .nav__lien { padding: 15px 18px; font-size: calc(1.05rem * var(--echelle)); }
  .nav__burger { display: flex; }
}
@media (max-width: 760px) {
  .nav__tel span { display: none; }
  .nav__tel { padding: 13px; }
}

/* --------------------------------------------------------------------------
   24. LIEN D'ÉVITEMENT (accessibilité clavier)
   Invisible à la souris, il apparaît à la première tabulation.
   ----------------------------------------------------------------------- */
.evitement {
  position: fixed;
  top: 12px; left: 50%;
  z-index: 200;
  transform: translate(-50%, -160%);
  background: var(--framboise);
  color: var(--blanc);
  font-weight: 800;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  box-shadow: var(--ombre-l);
  transition: transform .28s cubic-bezier(.34,1.4,.5,1);
}
.evitement:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   25. SÉCURITÉ DU FORMULAIRE
   ----------------------------------------------------------------------- */

/* Le piège à robots : invisible et inaccessible, mais présent dans le HTML.
   On n'utilise pas display:none, que certains robots savent détecter. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Les messages d'erreur sous les champs */
.erreur {
  display: none;
  margin-top: 8px;
  font-size: calc(.92rem * var(--echelle));
  font-weight: 700;
  color: #A3123C;
}
.erreur.visible { display: flex; align-items: center; gap: 8px; animation: erreur-entre .3s ease both; }
.erreur.visible::before {
  content: "";
  width: 18px; height: 18px; flex: none;
  border-radius: 50%;
  background: #A3123C;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes erreur-entre {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* Le champ fautif se signale aussi par sa bordure */
.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: #A3123C;
  background: #FDF0F3;
}
html.contraste-fort .erreur { color: #8A0026; }

/* ==========================================================================
   26. MATIÈRE ET FINITION
   ==========================================================================
   Trois détails qui séparent un site « propre » d'un site « soigné » :
   un grain de papier, des respirations colorées, et des transitions de
   section qui ne sont pas des lignes droites.
   ======================================================================= */

/* --- 26.1  LE GRAIN ------------------------------------------------------
   Un aplat de couleur numérique est parfaitement lisse : l'œil le lit comme
   « fait par une machine ». Un très léger bruit lui rend une texture de
   papier. C'est invisible consciemment, mais ça change tout le ressenti.
   Le voile est fixe, non cliquable, et posé sous les menus. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23b)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
/* En contraste renforcé, on retire le grain : la lisibilité prime. */
html.contraste-fort body::after { display: none; }

/* --- 26.2  RESPIRATIONS COLORÉES ----------------------------------------
   De larges halos très pâles, posés derrière le contenu. Ils empêchent les
   grands aplats de paraître plats, sans jamais se remarquer. */
.publics::before,
.formules::before,
.charte::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.publics::before {
  background:
    radial-gradient(48% 42% at 88% 8%,  rgba(240, 163, 47, .10), transparent 70%),
    radial-gradient(42% 38% at 4% 92%,  rgba(86, 144, 169, .08), transparent 70%);
}
.formules::before {
  background:
    radial-gradient(46% 34% at 6% 6%,   rgba(190, 47, 90, .07), transparent 72%),
    radial-gradient(52% 40% at 96% 62%, rgba(140, 167, 101, .09), transparent 72%);
}
.charte::before {
  background:
    radial-gradient(50% 40% at 50% -6%, rgba(240, 163, 47, .09), transparent 70%);
}
.publics > .conteneur,
.formules > .conteneur,
.charte  > .conteneur { position: relative; z-index: 1; }

/* Les sections qui portent une courbe doivent la rogner : la courbe est
   volontairement plus large que l'écran pour rester très ample, et sans
   cela elle allongerait la page vers la droite. */
.publics, .apropos, .journee, .contact { overflow: hidden; }

/* --- 26.3  TRANSITIONS DE SECTION ---------------------------------------
   Une bordure horizontale nette entre deux couleurs fait « gabarit ».
   Une courbe très ample fait « dessiné ». On la crée avec un dégradé
   radial démesuré : aucune image, aucun SVG, rien à charger. */
.vague {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 90px;
  pointer-events: none;
  z-index: 2;
}
.vague--haut   { top: -1px;    border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.vague--bas    { bottom: -1px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }

@media (max-width: 700px) { .vague { height: 48px; } }

/* --- 26.4  BARRE DE PROGRESSION DE LECTURE ------------------------------
   Un fil fin en haut de l'écran qui indique où l'on en est dans la page.
   Sur un site long, c'est un repère qui rassure. */
.progression-lecture {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 110;
  background: transparent;
  pointer-events: none;
}
.progression-lecture i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--soleil), var(--framboise) 60%, var(--terracotta));
  box-shadow: 0 0 12px rgba(190, 47, 90, .4);
}

/* --- 26.5  RÉVÉLATION DU TITRE, MOT À MOT -------------------------------
   Chaque mot monte depuis sous une ligne invisible. Beaucoup plus soigné
   qu'un fondu global, et ça donne le rythme de lecture. */
.mot-masque { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mot-masque > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform .85s var(--doux);
  transition-delay: var(--retard, 0ms);
}
.hero.est-visible .mot-masque > span { transform: none; }

/* --- 26.6  BOUTONS MAGNÉTIQUES ------------------------------------------
   Le bouton se décale de quelques pixels vers le curseur qui l'approche.
   Le mouvement est minuscule, mais l'interface paraît réactive. */
.btn, .nav__tel { will-change: transform; }
.btn > * { position: relative; z-index: 1; }

/* Reflet qui balaie le bouton au survol */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .75s var(--doux);
  pointer-events: none;
}
.btn { position: relative; overflow: hidden; }
.btn:hover::after { transform: translateX(120%); }
.btn--fantome::after { display: none; }

/* --- 26.7  CARTES DES FORMULES : LÉGER RELIEF AU SURVOL -----------------  */
.halte__carte {
  transform-style: preserve-3d;
  transition: transform .45s var(--doux), box-shadow .45s var(--doux);
}
.halte__carte:hover { box-shadow: var(--ombre-l); }

/* Filet lumineux sur le bord supérieur coloré */
.halte__carte::before {
  content: "";
  position: absolute;
  inset: -6px 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, var(--couleur, var(--soleil)), transparent);
  opacity: 0;
  transition: opacity .4s var(--doux);
}
.halte__carte { position: relative; }
.halte__carte:hover::before { opacity: .9; }

/* --- 26.8  LES CHIFFRES CLÉS EN DÉGRADÉ ---------------------------------  */
.chiffres b {
  background: linear-gradient(140deg, var(--framboise), var(--terracotta) 70%, var(--soleil));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* Repli : si le navigateur ne sait pas découper le fond sur le texte,
   la couleur pleine reste affichée. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .chiffres b { background: none; color: var(--framboise); }
}
html.contraste-fort .chiffres b { background: none; color: var(--framboise); }

/* --- 26.9  LE SURTITRE, TRAIT ANIMÉ -------------------------------------  */
.surtitre::before { transition: width .7s var(--doux); }
.surtitre.est-vue::before { width: 32px; }
[data-anim].surtitre:not(.est-vue)::before { width: 0; }

/* --- 26.10  LIENS DU PIED DE PAGE, SOULIGNÉ QUI SE DÉPLIE ---------------  */
.pied a {
  background-image: linear-gradient(var(--soleil-cl), var(--soleil-cl));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size .35s var(--doux), color .2s ease;
}
.pied a:hover { background-size: 100% 1.5px; }

/* ==========================================================================
   27. LES DERNIERS DÉTAILS
   ==========================================================================
   Aucun de ces réglages ne se remarque isolément. Ensemble, ils font la
   différence entre un site « correct » et un site fini.
   ======================================================================= */

/* --- 27.1  LA SÉLECTION DE TEXTE ----------------------------------------
   Le bleu par défaut du navigateur n'appartient à aucune palette. */
::selection      { background: var(--soleil-cl); color: var(--encre); }
::-moz-selection { background: var(--soleil-cl); color: var(--encre); }

/* --- 27.2  LA BARRE DE DÉFILEMENT --------------------------------------- */
@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--creme-3) var(--creme); scrollbar-width: thin; }
}
::-webkit-scrollbar        { width: 12px; height: 12px; }
::-webkit-scrollbar-track  { background: var(--creme); }
::-webkit-scrollbar-thumb  {
  background: var(--creme-3);
  border-radius: 99px;
  border: 3px solid var(--creme);
}
::-webkit-scrollbar-thumb:hover { background: var(--framboise-cl); }

/* --- 27.3  L'ANNEAU DE FOCUS -------------------------------------------
   Un double anneau : un liseré clair contre l'élément, puis la couleur.
   Il reste visible sur n'importe quel fond, clair ou sombre. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--mer-fonce);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--blanc);
  border-radius: 8px;
}
.guide :where(a, button):focus-visible {
  outline-color: var(--soleil);
  box-shadow: 0 0 0 3px rgba(42, 84, 104, .9);
}

/* --- 27.4  LA SECTION SOMBRE : de la matière ---------------------------
   Un aplat sombre paraît vite « trou noir ». Deux halos très pâles et un
   quadrillage à peine perceptible lui donnent de la profondeur. */
.guide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 12% 8%,  rgba(240, 163, 47, .16), transparent 68%),
    radial-gradient(52% 46% at 92% 88%, rgba(190, 47, 90, .16), transparent 68%);
}
.guide::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(255, 252, 249, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 252, 249, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  /* le quadrillage s'efface sur les bords */
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 50%, #000, transparent 100%);
}
.guide > .conteneur { position: relative; z-index: 1; }

/* --- 27.5  L'ABONNEMENT MIS EN AVANT ------------------------------------ */
.abo--populaire {
  background:
    radial-gradient(120% 100% at 0% 0%, #D14570 0%, transparent 55%),
    linear-gradient(165deg, var(--framboise), #8E1C46);
  box-shadow: var(--ombre-framboise-forte);
}
.abo--populaire::after {
  /* fine lumière sur l'arête haute, comme un objet éclairé par le dessus */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 42%);
}
.abo--populaire > * { position: relative; z-index: 1; }

/* --- 27.6  LA BARRE DE NAVIGATION --------------------------------------
   Un filet dégradé plutôt qu'un trait plein : la séparation se devine
   au centre et disparaît sur les bords. */
.nav.est-collee {
  box-shadow: none;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(58,43,39,.16) 20%, rgba(58,43,39,.16) 80%, transparent) 1;
}

/* --- 27.7  LES « PORTES » : liseré coloré au survol --------------------- */
.porte {
  box-shadow: inset 0 0 0 1px transparent;
}
.porte:hover, .porte[aria-expanded="true"] {
  box-shadow: var(--ombre-m), inset 0 0 0 2px var(--teinte, var(--soleil-cl));
}

/* --- 27.8  LE PORTRAIT : cerclage lumineux ------------------------------ */
.portrait__cadre {
  box-shadow: var(--ombre-l), inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* --- 27.9  ÉQUILIBRE DES TITRES ----------------------------------------
   Évite qu'un titre sur deux lignes laisse un mot seul sur la seconde. */
h1, h2, h3, .chapo { text-wrap: balance; }
p { text-wrap: pretty; }

/* --- 27.10  LES IMAGES NE SAUTENT PLUS AU CHARGEMENT -------------------- */
img { height: auto; }

/* --- 27.11  RESPECT DU MODE ÉCONOMIE DE DONNÉES ------------------------- */
@media (prefers-reduced-data: reduce) {
  body::after { display: none; }        /* le grain est une image */
  .hero__scene { opacity: .5; }
}


/* ==========================================================================
   28. LA PHRASE D'EN-TÊTE
   ==========================================================================
   Posée au-dessus du titre, en italique, comme une phrase écrite à la main.
   Elle donne le ton avant même que l'on lise le reste.
   ======================================================================= */
.tagline {
  font-family: var(--titre);
  font-style: italic;
  font-weight: 400;
  font-size: calc(clamp(1.5rem, 3.4vw, 2.3rem) * var(--echelle));
  line-height: 1.15;
  color: var(--terracotta);
  margin: 0 0 .55em;
  max-width: 16ch;
  /* Le léger pivot évite l'effet « ligne de formulaire » et rappelle
     l'écriture manuscrite de la signature. */
  transform: rotate(-1.4deg);
  transform-origin: left center;
}
@media (max-width: 900px) { .tagline { max-width: none; } }

/* ==========================================================================
   29. LES FORFAITS : cinq cartes au lieu de quatre
   ======================================================================= */
.abos__grille {
  /* La grille s'ajuste d'elle-même : cinq colonnes sur un grand écran,
     puis trois, deux, une. Aucune carte ne reste orpheline. */
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  align-items: stretch;
}
@media (min-width: 1081px) {
  .abo { padding: 30px 20px; }
  .abo h3 { font-size: calc(1.32rem * var(--echelle)); }
  .abo__prix { font-size: calc(1.85rem * var(--echelle)); }
  .abo__ruban { font-size: .68rem; padding: 6px 12px; }
}
/* Huit barres au lieu de quatre : on resserre l'écart. */
.abo__frequence { gap: 3px; height: 40px; }