/* ============================================================
   PAGES : hero, blocs d'accueil, gabarit de page d'offre
   ============================================================ */

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.hero {
  --hero-gradient-x: 72%;
  --hero-gradient-y: 30%;
  position: relative;
  background: linear-gradient(135deg, var(--encre) 0%, var(--encre-profond) 100%);
  color: var(--mineral);
  overflow: hidden;
  padding-block: clamp(var(--e6), 9vw, 148px);
  isolation: isolate;
}

/* Halo bleu reactif : sa position est pilotee par la souris avec une inertie
   legere dans site.js. Sans souris, il reste naturellement pose a droite. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    circle 820px at var(--hero-gradient-x) var(--hero-gradient-y),
    rgba(59, 130, 246, 0.52) 0%,
    rgba(37, 99, 235, 0.3) 34%,
    rgba(30, 64, 175, 0.16) 52%,
    transparent 76%
  );
  pointer-events: none;
}

/* Voile calme derrière le texte. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(23, 33, 62, 0.96) 0%,
    rgba(23, 33, 62, 0.94) 40%,
    rgba(23, 33, 62, 0.55) 58%,
    rgba(23, 33, 62, 0.1) 78%,
    transparent 90%
  );
  pointer-events: none;
}

/* Tout le contenu du hero passe devant le voile .hero::after. */
.hero > .conteneur {
  position: relative;
  z-index: 2;
}

.hero-inner {
  max-width: 620px;
}

/* Hero reseau : la scene plein ecran de la page d'accueil. Le canvas du
   reseau synaptique (js/animations.js, data-anim="synapse") couvre tout le
   fond ; sans JavaScript ou en mouvement reduit, il reste transparent et
   le degrade du .hero fait le travail. */
.hero-reseau {
  display: grid;
  align-items: center;
  text-align: center;
  min-height: calc(100vh - 72px);
  min-height: clamp(560px, calc(100svh - 72px), 880px);
}

.reseau-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--sortie);
}

.reseau-canvas.est-pret {
  opacity: 1;
}

/* Le voile lateral n'a plus de sens sur une composition centree. */
.hero-reseau::after {
  content: none;
}

.hero-reseau .hero-inner {
  max-width: 760px;
  margin-inline: auto;
}

.hero-reseau h1,
.hero-reseau .hero-texte {
  margin-inline: auto;
}

.hero-reseau .actions {
  justify-content: center;
}

.hero-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--e2) 8px 10px;
  border-radius: var(--rayon-plein);
  background: var(--mineral-tenu);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--mineral);
  margin-bottom: var(--e3);
}

.hero-etiquette::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--elan);
  flex-shrink: 0;
}

.hero h1 {
  max-width: 16ch;
}

.hero-slogan {
  font-family: var(--titres);
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 600;
  color: var(--elan);
  margin-top: var(--e3);
  letter-spacing: -0.01em;
}

/* 48ch et non 60 : au-dela, la ligne sort de la zone protegee par le
   voile et les traits du champ remontent derriere la fin du texte. */
.hero-texte {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  color: var(--mineral-voile);
  max-width: 48ch;
  margin-top: var(--e3);
}


/* Hero raccourci pour les pages interieures : pas de canvas, moins haut. */
.hero-page {
  padding-block: clamp(var(--e6), 7vw, 108px);
}

.hero-page h1 {
  max-width: 20ch;
}

/* Fil de navigation. Sert au visiteur qui arrive directement sur une page
   d'offre depuis un lien de prospection. */
.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--mineral-voile);
  margin-bottom: var(--e3);
}

.fil a {
  text-decoration: none;
  transition: color var(--vite);
}

.fil a:hover {
  color: var(--elan);
}

.fil span[aria-hidden] {
  opacity: 0.4;
}

/* Bandeau de metadonnees d'une offre : format, prix, phase. */
.meta-offre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: var(--e3);
  margin-top: var(--e5);
  padding-top: var(--e4);
}

.meta-item .meta-cle {
  display: block;
  font-family: var(--titres);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--elan);
  margin-bottom: 6px;
}

.meta-item .meta-valeur {
  font-family: var(--titres);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--mineral);
  line-height: 1.3;
}

/* ------------------------------------------------------------
   BLOC EN DEUX COLONNES
   ------------------------------------------------------------ */

.duo {
  display: grid;
  gap: var(--e5);
  align-items: start;
}

/* Un duo qui suit un chapeau de section a besoin de respirer, sinon la
   premiere colonne semble collee au paragraphe d'introduction. */
.intro + .duo,
.intro + .grille {
  margin-top: var(--e5);
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: 1fr 1fr;
    gap: var(--e7);
  }

  .duo-serre {
    grid-template-columns: 5fr 6fr;
  }
}

.duo-texte p + p {
  margin-top: var(--e3);
}

/* Le contenu d'une colonne de duo commence sous le titre de section, pas
   colle a lui : la grille .duo n'a pas de marge propre. */
.duo > div > h3:first-child {
  margin-bottom: var(--e2);
}

.duo-texte p {
  color: var(--encre-voile);
}

.section-sombre .duo-texte p {
  color: var(--mineral-voile);
}

/* ------------------------------------------------------------
   CITATION : ce que le client vit
   ------------------------------------------------------------ */

.citation {
  margin-top: var(--e3);
  padding: var(--e3);
  border-radius: var(--rayon-m);
  background: var(--elan-halo);
  font-family: var(--titres);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--encre);
}

.section-sombre .citation {
  background: rgba(199, 243, 107, 0.14);
  color: var(--mineral);
}

/* ------------------------------------------------------------
   CARTES DE PHASE (la methode)
   ------------------------------------------------------------ */

.phase-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
}

/* Le numero de phase est ecrit en clair dans le HTML, il ne vient pas
   d'un compteur CSS : un compteur suppose un conteneur qui le remet a
   zero, et les cartes de la methode ne sont pas une liste numerotee. */
.phase-numero {
  font-family: var(--titres);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(23, 33, 62, 0.1);
}

/* Le paragraphe pousse la citation vers le bas : sans cela, une carte au
   texte plus court remonte sa citation et les trois blocs colores ne
   s'alignent plus d'une carte a l'autre. */
.carte-phase p:not(.citation) {
  flex-grow: 1;
}

.carte-phase .citation {
  margin-top: auto;
}

/* Adaptation native du GlowCard fourni : un halo interieur et un filet
   lumineux suivent la souris, sans modifier la structure des cartes.
   S'applique a toute carte portant data-glow (site.js alimente les
   variables --glow-x / --glow-y / --glow-opacity). */
@media (hover: hover) and (pointer: fine) {
  [data-glow] {
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-opacity: 0;
    isolation: isolate;
    overflow: visible;
  }

  [data-glow]::before,
  [data-glow]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: var(--glow-opacity);
    transition: opacity 0.28s var(--sortie);
  }

  [data-glow]::before {
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(
      circle 220px at var(--glow-x) var(--glow-y),
      rgba(199, 243, 107, 0.22),
      transparent 68%
    );
  }

  [data-glow]::after {
    inset: -2px;
    z-index: 2;
    padding: 2px;
    border-radius: calc(var(--rayon-m) + 2px);
    background: radial-gradient(
      circle 180px at
        calc(var(--glow-x) + 2px)
        calc(var(--glow-y) + 2px),
      rgba(215, 250, 150, 1),
      rgba(199, 243, 107, 0.6) 38%,
      transparent 72%
    );
    filter: drop-shadow(0 0 12px rgba(199, 243, 107, 0.42));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  [data-glow] > * {
    position: relative;
    z-index: 1;
  }

  /* Le badge d'une carte d'offre reste pose au-dessus du filet. */
  [data-glow] .badge {
    z-index: 3;
  }

  /* La carte vedette est un aplat encre : son filet passe au corail,
     sinon le vert elan se confond avec ses prix deja verts. */
  .carte-offre-vedette[data-glow]::before {
    background: radial-gradient(
      circle 220px at var(--glow-x) var(--glow-y),
      rgba(255, 118, 92, 0.18),
      transparent 68%
    );
  }

  .carte-offre-vedette[data-glow]::after {
    background: radial-gradient(
      circle 180px at
        calc(var(--glow-x) + 2px)
        calc(var(--glow-y) + 2px),
      rgba(255, 158, 134, 1),
      rgba(255, 118, 92, 0.6) 38%,
      transparent 72%
    );
    filter: drop-shadow(0 0 12px rgba(255, 118, 92, 0.42));
  }
}

/* ------------------------------------------------------------
   CARTES D'OFFRE
   ------------------------------------------------------------ */

.etage {
  margin-top: var(--e6);
}

.etage-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e3);
  margin-bottom: var(--e4);
}

.etage-titre h3 {
  font-size: 1.375rem;
}

.etage-note {
  font-size: 0.9375rem;
  color: var(--ardoise);
}

.section-sombre .etage-note {
  color: var(--mineral-voile);
}

.carte-offre {
  --pointer-shift-x: 0px;
  --pointer-shift-y: 0px;
  --pointer-tilt: 0deg;
  --card-scale: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  background: #fff;
  border-radius: var(--rayon-m);
  padding: var(--e4);
  box-shadow: var(--ombre-carte);
  text-decoration: none;
  color: inherit;
  transition: transform var(--moyen), box-shadow var(--moyen);
  transform: translate3d(
      var(--pointer-shift-x),
      var(--pointer-shift-y),
      0
    )
    rotate(var(--pointer-tilt))
    scale(var(--card-scale));
}

.carte-offre-etiquette {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ardoise);
}

.carte-offre h4 {
  font-size: 1.375rem;
  font-weight: 700;
}

.carte-offre p:not(.carte-offre-prix) {
  color: var(--encre-voile);
  font-size: 0.9875rem;
  flex-grow: 1;
}

.carte-offre-prix {
  /* Le prix est un <p> : seul le paragraphe de description doit grandir
     (regle .carte-offre p:not(.carte-offre-prix)), sinon le prix gonflerait a
     une hauteur variable et les prix se desaligneraient d'une carte a l'autre. */
  flex: 0 0 auto;
  font-family: var(--titres);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin-top: var(--e2);
}

.carte-offre-prix small {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ardoise);
}

.carte-offre-lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--titres);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--encre);
  margin-top: var(--e1);
}

.carte-offre-lien svg {
  transition: transform var(--moyen);
}

/* La carte en vedette : l'atelier a demeure, moteur economique. */
.carte-offre-vedette {
  background: var(--encre);
  color: var(--mineral);
  box-shadow: var(--ombre-flottante);
}

/* :not aligne la specificite sur la regle generale .carte-offre p:not(...)
   plus haut : a egalite, celle-ci gagne car elle vient apres. Sans cela, le
   texte passe en encre sur fond encre, donc illisible. */
.carte-offre-vedette p:not(.carte-offre-prix) {
  color: var(--mineral-voile);
}

.carte-offre-vedette .carte-offre-etiquette {
  color: var(--mineral-voile);
}

.carte-offre-vedette .carte-offre-prix,
.carte-offre-vedette .carte-offre-lien {
  color: var(--elan);
}

.carte-offre-vedette .carte-offre-prix small {
  color: var(--mineral-voile);
}

.badge {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  padding: 5px 12px;
  border-radius: var(--rayon-plein);
  background: var(--elan);
  color: var(--encre);
  font-family: var(--titres);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   PARCOURS DE LA METHODE
   Un seul point actif parcourt un trace horizontal sur grand ecran,
   vertical sur mobile. Le contenu reste complet sans JavaScript.
   ------------------------------------------------------------ */

.parcours-methode {
  --progression-ratio: 1;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--e3);
  margin-top: var(--e5);
}

.js .parcours-methode {
  --progression-ratio: 0;
}

.parcours-trace {
  position: relative;
  width: 7px;
  min-height: 100%;
  margin-inline: auto;
  border-radius: var(--rayon-plein);
  background: rgba(23, 33, 62, 0.1);
}

.parcours-trace-rempli {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--elan);
  transform: scaleY(var(--progression-ratio, 1));
  transform-origin: top;
  transition: transform 0.12s linear;
}

.phases-parcours {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.carte-phase-parcours {
  opacity: 0.72;
  box-shadow: var(--ombre-posee);
  transition: opacity var(--moyen), transform var(--moyen), box-shadow var(--moyen);
}

.carte-phase-parcours.est-active {
  opacity: 1;
  box-shadow: var(--ombre-levee);
}

html:not(.js) .carte-phase-parcours {
  opacity: 1;
}

@media (min-width: 900px) {
  .parcours-methode {
    display: block;
    margin-top: var(--e6);
  }

  .parcours-trace {
    width: calc(100% - 160px);
    height: 7px;
    min-height: 0;
    margin: 0 auto var(--e4);
  }

  .parcours-trace-rempli {
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--elan);
    transform: scaleX(var(--progression-ratio, 1));
    transform-origin: left;
  }

  .phases-parcours {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------
   PARCOURS DES OFFRES
   Deux voies liees, sans suggerer un achat obligatoire de la suite.
   ------------------------------------------------------------ */

.parcours-offres {
  margin-top: var(--e6);
}

.parcours-offres .etage {
  margin-top: 0;
}

.parcours-offres .etage + .etage {
  margin-top: 0;
}

.voie-trace {
  position: relative;
  height: 7px;
  margin: 0 var(--e4) var(--e4);
  border-radius: var(--rayon-plein);
  background: rgba(23, 33, 62, 0.1);
  overflow: hidden;
}

.voie-trace::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--elan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--sortie);
}

.visible .voie-trace::after,
.voie-trace.visible::after,
html:not(.js) .voie-trace::after {
  transform: scaleX(1);
}

.liaison-offres {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--e2);
  max-width: 720px;
  margin: var(--e5) auto;
  padding: var(--e3) var(--e4);
  border-radius: var(--rayon-l);
  background: var(--elan-pastel);
  color: var(--encre);
  box-shadow: var(--ombre-posee);
}

.liaison-offres-point {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--corail);
  box-shadow: 0 0 0 7px var(--corail-halo);
}

.liaison-offres p {
  font-size: 0.9375rem;
}

@media (hover: hover) and (pointer: fine) {
  .carte-offre:hover {
    --pointer-shift-y: -5px;
    /* La carte grandit legerement et se detache. L'ombre habituelle, plus une
       lueur vert elan qui deborde de la carte : un box-shadow n'est pas rogne
       par overflow, contrairement au lisere. */
    --card-scale: 1.03;
    box-shadow: var(--ombre-levee), 0 0 48px -4px rgba(199, 243, 107, 0.68);
  }

  .carte-offre:hover .carte-offre-lien svg {
    transform: translateX(4px);
  }

  /* Lisere lumineux qui suit la souris, comme sur les cartes de la methode
     mais en vert elan. Le halo interieur, lui, vient du bloc
     [data-pointer="spotlight"] de composants.css. La position en pixels
     (--glow-x / --glow-y) est fournie par le moteur de pointeur. Le masque
     ne laisse voir le degrade que sur l'anneau de 1,5px du bord. */
  .carte-offre[data-pointer="spotlight"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    padding: 2.5px;
    border-radius: inherit;
    background: radial-gradient(
      circle 210px at var(--glow-x, 50%) var(--glow-y, 50%),
      rgba(199, 243, 107, 1),
      rgba(199, 243, 107, 0.7) 45%,
      transparent 74%
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: var(--spotlight-opacity, 0);
    transition: opacity var(--moyen);
    pointer-events: none;
  }
}

@media (max-width: 719px) {
  .voie-trace {
    margin-inline: 0;
  }

  .liaison-offres {
    padding-inline: var(--e3);
  }
}

/* ------------------------------------------------------------
   BENEFICES
   ------------------------------------------------------------ */

.benefice {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.benefice-titre {
  font-family: var(--titres);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--encre);
}

.section-sombre .benefice-titre {
  color: var(--mineral);
}

.benefice p {
  color: var(--encre-voile);
  font-size: 0.9875rem;
}

.section-sombre .benefice p {
  color: var(--mineral-voile);
}

/* ------------------------------------------------------------
   FICHES DES BENEFICES : une pile de fiches a faire glisser
   Adaptation native du carrousel de cartes fourni (React + Framer
   Motion), moteur GSAP dans js/animations.js (data-anim="fiches").
   Sans JavaScript ou en mouvement reduit, les fiches s'affichent en
   liste verticale et les commandes restent cachees : tout le contenu
   reste lisible.
   ------------------------------------------------------------ */

.fiches {
  max-width: 460px;
  margin-top: var(--e5);
  margin-inline: auto;
}

.fiches-pile {
  display: grid;
  gap: var(--e3);
}

.fiche {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  padding: var(--e4);
  border-radius: var(--rayon-l);
  background: var(--mineral);
  color: var(--encre);
  box-shadow: 0 24px 64px rgba(7, 13, 32, 0.35);
}

/* La fiche est claire sur section sombre : ses textes repassent en encre,
   plus fort que les regles .section-sombre au-dessus. */
.fiches .benefice-titre {
  color: var(--encre);
}

.fiches .fiche p:not(.benefice-titre) {
  color: var(--encre-voile);
  font-size: 0.9875rem;
}

/* Une fois le moteur en place : les fiches se superposent en pile,
   GSAP pilote leurs transformations. */
.fiches.est-pret .fiches-pile {
  position: relative;
  display: block;
  height: 344px;
}

.fiches.est-pret .fiche {
  position: absolute;
  inset: 0;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform, opacity;
}

.fiches.est-pret .fiche.est-dessus:active {
  cursor: grabbing;
}

.fiches-controles {
  display: none;
}

.fiches.est-pret .fiches-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e4);
}

.fiches-fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--rayon-plein);
  background: var(--mineral-tenu);
  color: var(--mineral);
  cursor: pointer;
  transition: transform var(--vite), background var(--vite);
}

.fiches-fleche:hover {
  background: rgba(248, 248, 244, 0.22);
  transform: translateY(-2px);
}

.fiches-points {
  display: flex;
  gap: 8px;
}

.fiches-point {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(248, 248, 244, 0.25);
  transition: background var(--vite), transform var(--vite);
}

.fiches-point.est-actif {
  background: var(--elan);
  transform: scale(1.25);
}

.fiches-indice {
  display: none;
  margin-top: var(--e2);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--mineral-voile);
}

.fiches.est-pret .fiches-indice {
  display: block;
}

/* ------------------------------------------------------------
   BLOC FONDATEUR
   L'emplacement photo tient debout sans photo : c'est un aplat encre
   avec le monogramme, pas un cadre vide en attente.
   ------------------------------------------------------------ */

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 420px;
  border-radius: var(--rayon-l);
  background: var(--encre);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombre-levee);
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      420px 320px at 30% 20%,
      rgba(199, 243, 107, 0.16),
      transparent 70%
    ),
    radial-gradient(
      360px 300px at 80% 90%,
      rgba(255, 118, 92, 0.14),
      transparent 68%
    );
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-monogramme {
  position: relative;
  z-index: 1;
  width: 26%;
  opacity: 0.5;
}

.signature-fondateur {
  margin-top: var(--e4);
  font-family: var(--titres);
  font-weight: 700;
  color: var(--encre);
}

.section-sombre .signature-fondateur {
  color: var(--mineral);
}

.signature-fondateur span {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ardoise);
}

.section-sombre .signature-fondateur span {
  color: var(--mineral-voile);
}

/* ------------------------------------------------------------
   CHIFFRES
   ------------------------------------------------------------ */

/* Corail et non vert elan : ces chiffres sont un constat de marche, pas
   un signal d'action. Le corail les detache du reste des elements verts
   de la page, qui appellent tous a cliquer. */
.chiffre-valeur {
  font-family: var(--titres);
  font-size: clamp(2.5rem, 2rem + 2.4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--corail);
}

/* La valeur est exclue : sans cette exception, « .chiffre p » (specificite
   plus forte que « .chiffre-valeur ») ramene le pourcentage a la taille
   du texte de legende et lui reprend sa couleur. */
.chiffre p:not(.chiffre-valeur) {
  margin-top: var(--e2);
  color: var(--mineral-voile);
  font-size: 0.9375rem;
}

/* 0.6 et non 0.45 : en dessous, cette ligne de sources tombe sous le
   seuil de lisibilite exige pour un texte de cette taille. */
.chiffre-source {
  margin-top: var(--e5);
  font-size: 0.8125rem;
  color: rgba(248, 248, 244, 0.6);
}

/* ------------------------------------------------------------
   BANDEAU FINAL ET CONTACT
   ------------------------------------------------------------ */

.bandeau-final {
  background: var(--encre);
  color: var(--mineral);
  position: relative;
  overflow: hidden;
}

.bandeau-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    720px 400px at 78% 20%,
    rgba(199, 243, 107, 0.1),
    transparent 68%
  );
  pointer-events: none;
}

.bandeau-final .conteneur {
  position: relative;
}

.bandeau-duo {
  display: grid;
  gap: var(--e6);
  align-items: start;
}

@media (min-width: 940px) {
  .bandeau-duo {
    grid-template-columns: 5fr 6fr;
    gap: var(--e7);
  }
}

/* ------------------------------------------------------------
   PAGE DE TEXTE LEGAL
   ------------------------------------------------------------ */

.texte-legal {
  max-width: 74ch;
}

.texte-legal h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  margin-top: var(--e6);
  margin-bottom: var(--e3);
}

.texte-legal h2:first-child {
  margin-top: 0;
}

.texte-legal h3 {
  font-size: 1.1875rem;
  margin-top: var(--e4);
  margin-bottom: var(--e2);
}

.texte-legal p {
  color: var(--encre-voile);
  margin-bottom: var(--e2);
}

.texte-legal p strong {
  color: var(--encre);
}

.texte-legal a {
  color: var(--encre);
  text-decoration-color: var(--ardoise);
  text-underline-offset: 3px;
}

.texte-legal a:hover {
  text-decoration-color: var(--encre);
}

.texte-legal .bloc-identite {
  background: #fff;
  border-radius: var(--rayon-m);
  padding: var(--e4);
  box-shadow: var(--ombre-posee);
  margin-bottom: var(--e3);
}

.texte-legal .bloc-identite p {
  margin-bottom: 4px;
}

.date-maj {
  font-size: 0.875rem;
  color: var(--ardoise);
  margin-bottom: var(--e5);
}

/* ------------------------------------------------------------
   PAGE DE REMERCIEMENT
   ------------------------------------------------------------ */

.centre {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.centre .intro,
.centre .actions {
  margin-inline: auto;
}

.centre .actions {
  justify-content: center;
}

/* ------------------------------------------------------------
   PARALLAXE
   Applique par JavaScript uniquement. Sans JavaScript, les formes
   restent a leur place et ne manquent a personne.
   ------------------------------------------------------------ */

.parallaxe-active {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .parallaxe {
    transform: none !important;
  }

  .parcours-methode {
    --progression-ratio: 1 !important;
  }

  .carte-phase-parcours {
    opacity: 1;
  }
}