/* ==========================================================================
   Neventia : feuille de style unique

   Direction artistique : composition « Atelier », palette « Cabinet ».
   . Composition : hero asymetrique, ecrins a double cadre, cartes sans
     filet definies par la lumiere, compositions plutot que rangees de trois,
     boutons en pilule a pastille imbriquee.
   . Palette : papier chaud, encre chaude, bleu d'encre desature. Plus de
     noir pur, plus de bleu de lien.

   Typographie : Bricolage Grotesque (charte, coupe optique 96 pt) pour
   l'affichage ; Schibsted Grotesk pour le texte courant. Un essai en Fraunces a ete
   fait le 11/08/2026 puis annule, le fichier fraunces-latin.woff2 reste
   dans assets/fonts, mais rien ne l'appelle.

   Motif breton : Gwenn ha Du, rayures et mouchetures d'hermine. Il tombe
   dans la palette sans couleur ajoutee.

   Sauvegarde de l'etat precedent : _sauvegarde-avant-refonte/
   ========================================================================== */

/* Schibsted Grotesk remplace l'ancienne police de texte le 13/08/2026.
   Grotesque humaniste dessine pour la presse norvegienne, donc taille pour le
   petit corps : fûts plus fermes et formes moins circulaires, la ou la
   precedente donnait au site un air d'application plutot que de cabinet.

   Fichier reduit ici meme : axe de graisse coupe a 400-700, jeu de caracteres
   francais, et seules les fonctions OpenType employees conservees, dont tnum
   pour les chiffres a chasse fixe du simulateur. 45,8 Ko a l'origine, 35,1 Ko
   apres. Le fichier figtree-latin.woff2 reste dans le dossier mais n'est plus
   appele par personne. */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* --- Palette ------------------------------------------------------- */
  --encre: #14120f;          /* remplace le noir pur : encre chaude */
  --encre-fond: #191713;     /* fond des sections sombres */
  --papier: #fbfaf7;
  --papier-2: #f3f0ea;
  --bleu: #1a4e7f;           /* bleu d'encre, sature a 65 % */
  --bleu-fonce: #123a60;
  --bleu-clair: #8fb6da;     /* accent lisible sur fond sombre */
  --blanc: #ffffff;
  /* Assombris le 13/08/2026. L'ancien --gris-clair #8c877d ne donnait que 3,42
     de contraste sur le papier, pour un seuil requis de 4,5 sur du texte de
     moins de 18,5 px, et il servait a quatre endroits tous en petit : la
     preuve des agents, les bornes des curseurs, l'etiquette du resultat. */
  --gris: #4a463f;
  --gris-clair: #6e6960;
  --filet: #dfdad0;

  /* Voile bleu des sections alternees. Il remplace le second creme, qui n'etait
     qu'a 1,09 de rapport avec le papier : l'alternance ne se voyait pas. Le
     bleu n'apporte pas plus de LUMINOSITE (1,11, c'est identique), il apporte
     un changement de FAMILLE de couleur, et c'est cela que l'oeil lit. La page
     gagne donc une alternance nette sans durcir d'un cran.
     Volontairement leger et tiede plutot que froid : un bleu plus franc
     tiraillerait avec l'encre chaude. */
  --voile: #e8eff7;

  /* Alias conserves : d'anciens gabarits s'y referent encore. */
  --noir: var(--encre);
  --gris-fond: var(--papier-2);
  --gris-filet: var(--filet);

  /* --- Mesures -------------------------------------------------------- */
  --largeur: 1160px;
  --gouttiere: 24px;
  --pas: 8px;
  --rythme: clamp(78px, 9.5vw, 140px);

  /* Un seul rayon partout donnait un objet unique repete. Trois niveaux
     hierarchisent : ecrin, carte, detail. */
  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pilule: 999px;

  /* Ombres teintees a l'encre chaude, jamais au noir pur. */
  --ombre-1: 0 1px 2px rgba(20, 18, 15, .05);
  --ombre-2: 0 1px 2px rgba(20, 18, 15, .05), 0 14px 34px -14px rgba(20, 18, 15, .16);
  --ombre-3: 0 1px 2px rgba(20, 18, 15, .05), 0 26px 50px -16px rgba(20, 18, 15, .24);

  /* Deceleration longue : l'objet a une masse, il ne saute pas. */
  --elan: cubic-bezier(.32, .72, 0, 1);
  --vite: .28s var(--elan);
  --lent: .55s var(--elan);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  /* 400 et non 500 : Schibsted porte deja plus de matiere a graisse egale, la
     compensation qu'il fallait sur la police precedente n'a plus lieu d'etre. */
  font-weight: 400;
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.62;
  color: var(--encre);
  background: var(--papier);
  /* Plus de -webkit-font-smoothing: antialiased ici. Sur Mac, cette propriete
     rend le texte plus MAIGRE que le lissage normal. Elle sert a affiner les
     gros titres clairs sur fond sombre, et elle affaiblit tout le reste. Elle
     est donc conservee uniquement sur les sections sombres, plus bas. */
}

/* Grain fixe : casse le plat de l'aplat numerique. Pose sur un pseudo-element
   fixe et transparent aux clics, il ne repeint jamais pendant le defilement. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-underline-offset: 3px; }
a:hover { color: var(--bleu-fonce); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; border-radius: 3px; }

.enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: var(--rythme); }
/* Renomme depuis .section--gris le 13/08/2026 : une classe nommee « gris » qui
   peint du bleu induit en erreur au premier coup d'oeil dans le balisage. */
.section--voile { background: var(--voile); }

/* Section sombre : encre chaude plutot que noir pur, et un halo radial tres
   pale qui evite l'aplat mort. La coupure se lit comme une respiration. */
.section--noir {
  background: var(--encre-fond); color: var(--papier);
  background-image: radial-gradient(72% 100% at 50% 0%, rgba(26, 78, 127, .5), transparent 66%);
}
.section--noir a { color: var(--papier); }
/* Le seul endroit ou l'affinage a du sens : du papier sur de l'encre, que le
   lissage normal alourdit. */
.section--noir { -webkit-font-smoothing: antialiased; }

.evitement { position: absolute; left: -9999px; top: 0; background: var(--encre); color: var(--papier); padding: 12px 20px; z-index: 100; border-radius: var(--r-sm); }
.evitement:focus { left: 8px; top: 8px; }

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

/* L'interlettrage se resserre a mesure que le corps grandit : un titre de
   80 px et un intertitre de 22 px n'ont pas les memes besoins optiques. */
h1, h2, h3 {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-weight: 800; line-height: 1.02; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 6.8vw, 5.05rem); letter-spacing: -0.045em; line-height: .99; }
h2 { font-size: clamp(2.1rem, 4.5vw, 3.35rem); letter-spacing: -0.036em; }
h3 { font-size: clamp(1.22rem, 1.9vw, 1.48rem); font-weight: 700; letter-spacing: -0.022em; line-height: 1.14; }

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

.plomb { font-size: clamp(1.1rem, 1.7vw, 1.33rem); color: var(--gris); line-height: 1.55; }
.gris { color: var(--gris); }
.mesure { max-width: 62ch; }

/* Chiffres en chasse fixe : sans cela, trois colonnes de nombres ne
   s'alignent jamais tout a fait, le 1 etant plus etroit que le 3. */
.chiffre__valeur, .cas__chiffre, .parcours__pastille, .lecteur__duree { font-variant-numeric: tabular-nums; }

.litanie { list-style: none; margin: calc(var(--pas) * 3) 0; padding: 0; }
.litanie li {
  position: relative; padding-left: 26px;
  margin-bottom: calc(var(--pas) * 1.2);
  color: var(--gris); line-height: 1.5;
}
.litanie li::before {
  content: ''; position: absolute; left: 2px; top: .62em;
  width: 9px; height: 2px; background: var(--bleu);
}

.chute {
  margin-top: calc(var(--pas) * 3);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.3;
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
}

.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 calc(var(--pas) * 2);
}
.surtitre svg { width: 15px; height: 15px; fill: var(--bleu); flex: none; }
.section--noir .surtitre { color: rgba(251, 250, 247, .58); }
.section--noir .surtitre svg { fill: var(--bleu-clair); }

/* --- Le jalon : l'ossature de lecture ---------------------------------- */

/* Sept blocs s'ouvraient tous de la meme facon, surtitre, titre, paragraphe,
   sans jamais dire ou on en etait. Le jalon numerote les etapes du raisonnement
   et leur donne une colonne vertebrale : le lecteur sait a chaque instant
   combien il en reste. Les blocs NON numerotes (chiffres, temoignage, appel
   final) sont les respirations : l'absence de numero est leur signal. */
.jalon {
  display: flex; align-items: baseline; gap: 18px;
  border-top: 2px solid var(--encre);
  padding-top: 13px;
  margin-bottom: calc(var(--pas) * 4);
}
.jalon__num {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 800; font-size: .92rem; letter-spacing: 0; color: var(--bleu);
  flex: none;
}
.jalon__nom {
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris);
}
.jalon svg { width: 14px; height: 14px; fill: var(--bleu); flex: none; margin-left: auto; align-self: center; }
.section--noir .jalon { border-top-color: var(--papier); }
.section--noir .jalon__num, .section--noir .jalon svg { color: var(--bleu-clair); fill: var(--bleu-clair); }
.section--noir .jalon__nom { color: rgba(251, 250, 247, .6); }

/* Une seule entree par bloc : le titre tient la ligne, l'argument vient
   dessous. Cote a cote, les deux se disputaient le regard. */
.ouverture { max-width: 62ch; }
.ouverture h2 { margin-bottom: calc(var(--pas) * 3); }

/* --- Les jetons : ce qui se parcourt, pas ce qui se lit ---------------- */

/* Cette liste-la n'est pas du texte : c'est un inventaire. En puces grises
   dans la meme graisse que le paragraphe voisin, l'oeil la lisait ligne a
   ligne comme un paragraphe de plus. Posee en jetons, elle se balaie, et
   l'amas qu'ils forment dit deja quelque chose du probleme. */
/* L'annonce pose ce que le lecteur va parcourir. Sans elle, il arrivait sur
   l'inventaire sans savoir s'il devait le lire ou le survoler. */
.annonce {
  margin: calc(var(--pas) * 6) 0 calc(var(--pas) * 2.5);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris);
}

/* Grille de trois plutot que retour a la ligne libre : les neuf situations
   n'ont pas la meme longueur, et au fil de l'eau elles tombaient en cinq
   rangees de deux, la derniere orpheline. Trois colonnes egales donnent le
   3 x 3 attendu et lisent comme un inventaire pose.

   Deux colonnes des 360 px, et non des 620 : sur un telephone, neuf jetons
   empiles devenaient neuf lignes de liste, exactement ce que la mise en jetons
   cherchait a eviter. L'amas ne se voit que s'il y a un amas. */
.jetons {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
@media (min-width: 360px) { .jetons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .jetons { grid-template-columns: repeat(3, 1fr); } }
/* Neuf situations en deux colonnes laissent la neuvieme seule sur sa rangee.
   Etalee sur les deux colonnes, elle ferme l'inventaire au lieu de pendre.
   A partir de 980 px, trois colonnes tombent juste et la regle ne sert plus. */
@media (min-width: 360px) and (max-width: 979px) {
  .jetons li:last-child { grid-column: 1 / -1; }
}
.jetons li {
  background: var(--blanc); border-radius: var(--r-md);
  padding: 13px 20px; font-size: .92rem; line-height: 1.35; color: var(--encre);
  box-shadow: var(--ombre-1);
  display: flex; align-items: center;
}
/* En deux colonnes etroites, le rembourrage lateral de 20 px mangeait un tiers
   de la mesure : la phrase tombait en quatre lignes. On le resserre tant que
   la colonne est etroite, on le rend a partir de 620 px. */
@media (max-width: 619px) {
  .jetons { gap: 8px; }
  .jetons li { padding: 11px 13px; font-size: .87rem; line-height: 1.32; }
}

/* --- Le calcul --------------------------------------------------------- */

/* Le texte disait « faites le calcul » sans jamais le montrer. Le montrer est
   plus court que le decrire, et plus convaincant. En heures et non en euros :
   le lecteur applique son propre cout horaire, ce qui est exactement le geste
   qu'on cherche a declencher. */
.calcul {
  background: var(--blanc); border-radius: var(--r-md);
  padding: calc(var(--pas) * 5); box-shadow: var(--ombre-2);
  margin-top: calc(var(--pas) * 6);
  display: grid; gap: calc(var(--pas) * 4);
}
@media (min-width: 880px) { .calcul { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.calcul__titre {
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris); margin: 0 0 calc(var(--pas) * 3);
}
.calcul__operation { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--pas) * 1.5); align-items: end; }
.calcul__terme { position: relative; }
.calcul__terme + .calcul__terme { padding-left: 22px; }
.calcul__terme + .calcul__terme::before {
  content: '×'; position: absolute; left: 0; top: 2px;
  color: var(--bleu); font-size: 1.1rem; font-weight: 700;
}
.calcul__terme b {
  display: block;
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.calcul__terme span { display: block; margin-top: 7px; font-size: .8rem; color: var(--gris); line-height: 1.35; }

/* Sous 620 px, trois termes cote a cote deviennent illisibles, « 45 min »
   se coupait en deux lignes. L'operation se pose alors verticalement. */
@media (max-width: 619px) {
  .calcul__operation { grid-template-columns: 1fr; gap: calc(var(--pas) * 2); }
  .calcul__terme { display: flex; align-items: baseline; gap: 10px; }
  .calcul__terme b { font-size: 1.6rem; }
  .calcul__terme span { margin-top: 0; }
}

.calcul__resultat { padding-left: calc(var(--pas) * 4); border-left: 2px solid var(--encre); }
@media (max-width: 879px) {
  .calcul__resultat { padding: calc(var(--pas) * 3) 0 0; border-left: 0; border-top: 2px solid var(--encre); }
}
.calcul__resultat b {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.1rem, 4.6vw, 2.8rem); font-weight: 800;
  letter-spacing: -0.045em; line-height: 1; color: var(--bleu);
}
.calcul__equivalent { display: block; margin-top: 8px; font-weight: 600; font-size: 1.02rem; }
.calcul__note { margin-top: calc(var(--pas) * 2); font-size: .82rem; color: var(--gris-clair); line-height: 1.5; }

/* --- Bande Gwenn ha Du : rayures du drapeau breton --------------------- */

.gwenn {
  height: 8px;
  background: repeating-linear-gradient(
    to right, var(--encre) 0 28px, transparent 28px 56px);
}
.section--noir .gwenn { background: repeating-linear-gradient(to right, var(--papier) 0 28px, transparent 28px 56px); }

/* --- En-tete ---------------------------------------------------------- */

/* Le filet du bas n'apparait qu'une fois la page defilee : en haut, l'en-tete
   flotte sur le halo du hero au lieu de le couper. Une sentinelle invisible
   pilote la bascule, sans ecouter l'evenement de defilement. */
.entete {
  position: sticky; top: 0; z-index: 50;
  /* Au repos, l'en-tete prend la couleur du hero : elle occupe sa propre bande
     dans le flux, au-dessus de lui, et une bande creme sur un hero colore
     dessinait une couture nette en haut de page. La transparence ne reglait
     rien, elle laissait passer le creme du corps de page. Le flou n'est utile
     qu'a l'etat pose, ou l'en-tete passe reellement devant du contenu. */
  background: var(--voile);
  border-bottom: 1px solid transparent;
  transition: border-color var(--vite), background-color var(--vite), box-shadow var(--vite);
}
.entete--pose {
  background: rgba(251, 250, 247, .9);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--filet);
  box-shadow: var(--ombre-1);
}
/* 64 px de haut plutot qu'un seul pixel : une cible d'un pixel collee au bord
   superieur est trop fragile pour l'observateur, et le filet apparaissait des
   le chargement. Positionnee en absolu et sans z-index positif, elle
   n'affecte ni la mise en page ni les clics. */
.sentinelle { position: absolute; top: 0; left: 0; width: 100%; height: 64px; pointer-events: none; z-index: -1; }

.entete__interieur { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--pas) * 3); min-height: 74px; }
.entete__logo img { width: 148px; }
.navigation { display: none; gap: calc(var(--pas) * 4); }
.navigation a {
  color: var(--encre); text-decoration: none; font-size: .96rem; font-weight: 600;
  position: relative; padding-block: 4px;
}
/* Le soulignement se deploie depuis la gauche plutot que d'apparaitre. */
.navigation a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--bleu); transform: scaleX(0); transform-origin: left;
  transition: transform var(--vite);
}
.navigation a:hover { color: var(--bleu); }
.navigation a:hover::after { transform: scaleX(1); }
@media (min-width: 940px) { .navigation { display: flex; } }

/* --- Bouton ----------------------------------------------------------- */

/* Pilule, avec une pastille de fleche imbriquee dans le rembourrage droit.
   Au survol la fleche glisse en diagonale et grandit un peu ; au clic le
   bouton s'enfonce. La mecanique se sent sous le doigt. */
.bouton {
  display: inline-flex; align-items: center; gap: 14px;
  background: var(--bleu); color: var(--papier);
  font-family: inherit; font-size: 1.02rem; font-weight: 700; line-height: 1.2;
  padding: 9px 9px 9px 26px; border: 0; border-radius: var(--r-pilule);
  text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: var(--ombre-1), 0 14px 30px -14px rgba(26, 78, 127, .55);
  transition: background-color var(--vite), transform var(--vite), box-shadow var(--vite);
}
.bouton::after {
  content: '→'; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(251, 250, 247, .18);
  display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1;
  transition: transform var(--vite), background-color var(--vite);
}
.bouton:hover {
  background: var(--bleu-fonce); color: var(--papier);
  box-shadow: var(--ombre-1), 0 22px 42px -16px rgba(26, 78, 127, .62);
}
.bouton:hover::after { transform: translate(4px, -1px) scale(1.06); background: rgba(251, 250, 247, .26); }
.bouton:active { transform: scale(.978); }

/* 32 px de pastille et non 30 : avec 2 x 6 px de rembourrage, le bouton fait
   exactement les 44 px de cote minimum sous le doigt. A 30, il tombait a 42,
   ce qui ne se voit pas mais se rate. */
.bouton--compact { padding: 6px 6px 6px 19px; font-size: .93rem; gap: 10px; }
.bouton--compact::after { width: 32px; height: 32px; font-size: .92rem; }
.bouton--grand { font-size: 1.15rem; padding: 12px 12px 12px 34px; gap: 18px; }
.bouton--grand::after { width: 44px; height: 44px; font-size: 1.2rem; }

/* Sur fond sombre, le bleu d'encre manque de detachement : on inverse. */
.section--noir .bouton { background: var(--papier); color: var(--encre); box-shadow: none; }
.section--noir .bouton::after { background: rgba(20, 18, 15, .12); }
.section--noir .bouton:hover { background: var(--bleu-clair); color: var(--encre); }

.rappel-action { margin-top: calc(var(--pas) * 5); }
.rappel-action .reassurance { display: block; margin-top: calc(var(--pas) * 2.5); font-size: .93rem; color: var(--gris); }
.section--noir .rappel-action .reassurance { color: rgba(251, 250, 247, .66); }

@media (max-width: 560px) {
  .entete__logo img { width: 104px; }
  .entete__interieur { gap: calc(var(--pas) * 1.5); }
  /* 32 px de pastille et non 26 : 32 + 2 x 6 de rembourrage font les 44 px de
     cote minimum sous le doigt. A 26, le bouton tombait a 38. */
  .bouton--compact { padding: 6px 6px 6px 15px; font-size: .81rem; white-space: nowrap; gap: 8px; }
  .bouton--compact::after { width: 32px; height: 32px; font-size: .84rem; }
}

/* Le mot-symbole ne fait que 18 px de haut : c'est l'image qui donne sa taille
   au lien. On lui rend une zone de 44 px sans agrandir le dessin. */
.entete__logo { display: flex; align-items: center; min-height: 44px; }

/* --- Ecrin : le double cadre ------------------------------------------ */

/* Une image posee a plat sur le fond n'a pas d'assise. Sertie dans un cadre
   qui reprend la teinte du fond, elle prend une epaisseur physique. Le rayon
   interieur est calcule pour que les deux courbes restent concentriques. */
.ecrin {
  background: rgba(20, 18, 15, .055);
  border-radius: var(--r-lg); padding: 9px;
  box-shadow: var(--ombre-3);
}
.ecrin > * {
  border-radius: calc(var(--r-lg) - 9px); overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .5);
}
.ecrin img { width: 100%; }

/* --- Heros ------------------------------------------------------------ */

/* Composition asymetrique : le discours tient la gauche, la preuve occupe
   la droite. C'est ce qui distingue une page composee d'une page empilee. */
.heros {
  padding-block: clamp(48px, 6vw, 84px) clamp(48px, 6vw, 88px);
  position: relative; overflow: hidden;
  /* Le voile sert de fond de base sous les deux halos : le hero ouvre la
     serie des sections alternees, il en porte donc la premiere couleur.
     La couleur se met en derniere position de la propriete raccourcie,
     sinon la forme raccourcie remet le fond a transparent. */
  background:
    radial-gradient(58% 68% at 82% 6%, rgba(26, 78, 127, .13), transparent 62%),
    radial-gradient(46% 56% at 6% 0%, rgba(20, 18, 15, .05), transparent 60%),
    var(--voile);
}
.heros__grille { display: grid; gap: calc(var(--pas) * 6); align-items: center; }
@media (min-width: 940px) {
  .heros__grille { grid-template-columns: 1.12fr .88fr; gap: calc(var(--pas) * 7); }
}
/* Le titre du hero descend d'un cran par rapport a l'echelle generale : dans
   une composition a deux colonnes, la colonne de texte est plus etroite, et
   l'accroche se cassait en quatre lignes au lieu de trois. */
.heros h1 { font-size: clamp(2.7rem, 5.5vw, 4.3rem); margin-bottom: calc(var(--pas) * 3); }
.heros .plomb { max-width: 46ch; }

/* La pastille de situation : metier, ville, cible. Elle sert le lecteur qui
   arrive de LinkedIn autant que le referencement local. */
.situation {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: calc(var(--pas) * 3);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre); background: rgba(255, 255, 255, .72);
  border-radius: var(--r-pilule); padding: 7px 16px 7px 9px;
  box-shadow: var(--ombre-2);
}
.situation svg { width: 15px; height: 15px; fill: var(--bleu); flex: none; }

/* --- Grilles ---------------------------------------------------------- */

.grille { display: grid; gap: calc(var(--pas) * 3); }
@media (min-width: 780px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }

/* Avec un quatrieme agent, la carte « Et le votre » devient la cinquieme d'une
   grille de quatre : seule sur son rang, elle avait l'air d'un oubli. Etalee sur
   toute la largeur, elle redevient ce qu'elle est, la phrase qui ferme la serie.
   Sous 780 px la piste prend le relais et la regle ne s'applique plus. */
@media (min-width: 780px) {
  .grille--4 > .agent--surmesure,
  .grille--3 > .agent--surmesure { grid-column: 1 / -1; }
}

/* Quatre portes en deux rangs de deux, jamais en rangee de quatre : dans la
   largeur de page, quatre colonnes tomberaient a deux cents pixels de texte
   utile et les puces se hacheraient. A deux colonnes des 780 px, chaque carte
   retrouve les 354 px qui fonctionnaient deja. En dessous, empilement. */
.portes { grid-template-columns: 1fr; }
@media (min-width: 780px) { .portes { grid-template-columns: repeat(2, 1fr); } }

/* --- Cartes ----------------------------------------------------------- */

/* Plus de filet gris : la carte est definie par la lumiere. */
.carte {
  background: var(--blanc); border: 0; border-radius: var(--r-md);
  padding: calc(var(--pas) * 4.5); display: flex; flex-direction: column;
  box-shadow: var(--ombre-2);
  transition: transform var(--lent), box-shadow var(--lent);
}
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); }
.carte h3 { margin-bottom: calc(var(--pas) * 1.5); }
.carte__resultat { margin-top: auto; padding-top: calc(var(--pas) * 2.5); font-size: .95rem; font-weight: 700; color: var(--bleu); }

/* --- Relief des trois portes ------------------------------------------
   Une carte blanche posee a plat sur un aplat crème est une surface morte :
   rien n'y accroche la lumiere. Trois corrections, aucune decorative.

   1. Un anneau exterieur de la couleur du fond, en plus dense, sertit la
      carte au lieu de la poser dessus. C'est ce qui donne l'epaisseur.
   2. Un filet d'accent en amorce sur le bord haut, qui court sur toute la
      largeur au survol : il signale que l'objet entier est cliquable, ce que
      le seul lien souligne ne disait pas.
   3. Le numero passe en filigrane. A 45 % d'opacite et 12 px il etait
      illisible sans etre discret, donc inutile ; en grand et tres pale il
      devient une texture qui creuse le coin superieur. */
.carte--porte {
  position: relative; overflow: hidden;
  box-shadow: 0 0 0 6px rgba(20, 18, 15, .028), var(--ombre-2);
}
.carte--porte::before {
  content: ''; position: absolute; top: 0; left: 0;
  height: 3px; width: 46px; background: var(--bleu);
  transition: width var(--lent);
}
.carte--porte:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 6px rgba(20, 18, 15, .045), var(--ombre-3);
}
.carte--porte:hover::before { width: 100%; }
.carte--porte:hover .carte__lien { color: var(--bleu); text-underline-offset: 8px; }

/* Semis de mouchetures d'hermine : la carte n'avait aucune matiere, juste du
   texte sur du blanc. Le motif du Gwenn ha Du en tient lieu, et il dit d'ou
   vient l'agence sans qu'aucune ligne n'ait a l'ecrire. Le degrade l'eteint
   vers le haut a gauche, la ou se lit le texte : il n'habille que le vide du
   coin bas droit. */
.carte--porte::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' width='100' height='100'%3E%3Cg fill='%231a4e7f'%3E%3Ccircle cx='50' cy='12' r='6'/%3E%3Ccircle cx='32' cy='24' r='6'/%3E%3Ccircle cx='68' cy='24' r='6'/%3E%3Cpath d='M50 32c-5 11-14 24-21 36-5 9-7 17-4 24l11-7 6 11 8-17 8 17 6-11 11 7c3-7 1-15-4-24-7-12-16-25-21-36Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 74px 74px;
  opacity: .055;
  -webkit-mask-image: linear-gradient(305deg, #000 0%, transparent 38%);
  mask-image: linear-gradient(305deg, #000 0%, transparent 38%);
  transition: opacity var(--lent);
}
.carte--porte:hover::after { opacity: .085; }
/* Le contenu repasse devant le semis : un pseudo-element absolu se peint
   apres les enfants restes statiques. */
.carte--porte > * { position: relative; z-index: 1; }

/* Tete de carte : une icone donne un point d'accroche la ou il n'y avait que
   du titre. Elles viennent de Phosphor, pas d'un trace maison : meme graisse,
   memes jonctions, meme grille de 256. */
.carte__tete {
  display: flex; align-items: center; gap: calc(var(--pas) * 1.5);
  margin: 0 0 calc(var(--pas) * 2.5);
}
.carte__ico {
  flex: none; width: 44px; height: 44px; padding: 11px;
  border-radius: var(--r-sm);
  background: rgba(26, 78, 127, .07); color: var(--bleu);
  transition: background-color var(--lent), transform var(--lent);
}
.carte--porte:hover .carte__ico {
  background: rgba(26, 78, 127, .13); transform: translateY(-2px);
}
.carte__rang {
  margin: 0 0 0 auto;
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: .82rem; font-weight: 700; letter-spacing: .14em;
  color: var(--bleu); opacity: .38; font-variant-numeric: tabular-nums;
}

/* Les puces respirent moins que dans le corps de page : dans une carte, elles
   servent au balayage, pas a la lecture suivie. */
.carte .litanie { margin: calc(var(--pas) * 2.5) 0 0; }
.carte .litanie li { font-size: .92rem; margin-bottom: calc(var(--pas) * 1.1); }
.carte .litanie li:last-child { margin-bottom: 0; }

/* Le lien de carte est souligne plutot que mis en bouton : trois boutons pleins
   cote a cote entreraient en concurrence avec l'appel principal du bloc. Le
   padding vertical porte la cible tactile a 44 px sans decoller le trait du
   texte, que text-underline-offset garde attache. */
.carte__lien {
  align-self: flex-start; margin-top: calc(var(--pas) * 3);
  padding: 12px 0; font-weight: 700; font-size: .95rem;
  color: var(--encre); text-decoration: underline;
  text-decoration-color: var(--bleu); text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: color var(--lent), text-underline-offset var(--lent);
}
.carte__lien:hover { color: var(--bleu); text-underline-offset: 8px; }

/* Emplacement encore vide : trait pointille, pas d'ombre, il ne doit pas
   avoir l'air d'un contenu. */
.carte--reservee {
  border: 1px dashed var(--filet); background: transparent; color: var(--gris);
  box-shadow: none; justify-content: center; text-align: center; min-height: 190px;
}
.carte--reservee:hover { transform: none; box-shadow: none; }
/* Sur bureau, les 190 px de hauteur tiennent la rangee : les trois emplacements
   prolongent visuellement la grille des cas. Sur telephone, ou ils s'empilent,
   c'est un ecran entier de vide pour une information qui ne s'adresse qu'a
   nous. Ils se resserrent sans disparaitre. */
@media (max-width: 779px) {
  .carte--reservee { min-height: 0; padding: calc(var(--pas) * 2.2) calc(var(--pas) * 3); font-size: .87rem; }
}

/* --- Bandeau de chiffres ---------------------------------------------- */

.chiffres { display: grid; gap: calc(var(--pas) * 2.5); }
@media (min-width: 780px) { .chiffres { grid-template-columns: repeat(3, 1fr); } }
.chiffres > * {
  padding: calc(var(--pas) * 4); border-radius: var(--r-md);
  background: rgba(251, 250, 247, .05);
  box-shadow: inset 0 1px 0 rgba(251, 250, 247, .12);
}
.chiffre__valeur {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: clamp(2.9rem, 6.2vw, 4.3rem); font-weight: 800; line-height: .93;
  letter-spacing: -0.05em; display: block;
}
.chiffre__valeur span { color: var(--bleu-clair); }
.chiffre__libelle { margin-top: calc(var(--pas) * 2); color: rgba(251, 250, 247, .76); font-size: 1rem; line-height: 1.45; }
/* .54 et non .48 : sur le fond eclairci de la carte, l'opacite plus faible
   tombait a 4,6 de contraste, juste au-dessus du seuil, donc trop juste. */
.chiffre__note { margin-top: calc(var(--pas) * 1.5); font-size: .82rem; color: rgba(251, 250, 247, .54); }

/* --- La methode : parcours en cinq temps ------------------------------ */

.parcours { margin-top: calc(var(--pas) * 7); position: relative; }
.parcours__etape { position: relative; padding-left: 78px; padding-bottom: calc(var(--pas) * 6); }
.parcours__etape:last-child { padding-bottom: 0; }
.parcours__etape::before {
  content: ''; position: absolute; left: 25px; top: 54px; bottom: 0;
  width: 2px; background: var(--filet);
}
.parcours__etape:last-child::before { display: none; }

.parcours__pastille {
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--blanc); color: var(--encre);
  display: grid; place-items: center;
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em;
  box-shadow: var(--ombre-2);
}
.parcours__etape--final .parcours__pastille { background: var(--encre); color: var(--papier); }

.parcours__duree {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gris);
  background: var(--papier-2); border-radius: var(--r-pilule); padding: 5px 13px;
  margin-bottom: calc(var(--pas) * 1.5);
}
/* « ½ journée à plusieurs sessions » est le plus long des cinq libelles et il
   cassait la pastille en deux lignes sous 620 px : un rayon en pilule sur deux
   lignes donne une forme batarde, et des capitales espacees se lisent mal
   coupees. On resserre le corps et l'interlettrage plutot que d'abreger le
   libelle, qui porte une information commerciale. */
@media (max-width: 619px) {
  .parcours__duree {
    font-size: .68rem; letter-spacing: .05em; padding: 5px 11px;
    white-space: nowrap;
  }
}
/* En dessous de 400 px, l'etape est deja en retrait pour laisser place a sa
   pastille numerotee : il ne reste pas assez de largeur pour le libelle le plus
   long. Dernier cran, verifie jusqu'a 320 px. */
@media (max-width: 400px) {
  .parcours__duree { font-size: .61rem; letter-spacing: .03em; padding: 5px 9px; }
}
.parcours h3 { margin-bottom: calc(var(--pas) * 1.5); }
.parcours p { color: var(--gris); max-width: 58ch; }
.parcours__sortie {
  margin-top: calc(var(--pas) * 2); padding-left: calc(var(--pas) * 2);
  border-left: 3px solid var(--bleu);
  font-size: .95rem; font-weight: 600; color: var(--encre);
}

/* Sur deux colonnes, une sequence de cinq etapes se lisait aussi bien 1-3-5
   en descendant que 1-2 en travers : l'ordre devenait une devinette. Une seule
   colonne, avec le fil qui relie les pastilles, dessine l'ordre au lieu de le
   supposer. Le texte s'elargit pour compenser la hauteur gagnee. */
@media (min-width: 900px) {
  .parcours__etape { padding-left: 96px; padding-bottom: calc(var(--pas) * 5); }
  .parcours p { max-width: 64ch; }
}

/* --- Les agents ------------------------------------------------------- */

.agent {
  border: 0; border-radius: var(--r-md); background: var(--blanc);
  padding: calc(var(--pas) * 4); display: flex; flex-direction: column;
  box-shadow: var(--ombre-2);
  transition: transform var(--lent), box-shadow var(--lent);
}
.agent:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); }
/* Hauteur commune plutot que largeur commune : les avatars photographies et les
   figurines dessinees n'ont pas le meme rapport de forme, et une largeur fixe
   les faisait arriver a des hauteurs differentes. En calant la hauteur, tous
   les personnages sont a la meme echelle et posent sur la meme ligne. */
.agent__figurine {
  height: 134px; width: auto; margin-bottom: calc(var(--pas) * 2);
  align-self: flex-start;
}
.agent__nom { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: calc(var(--pas)); }
.agent__nom h3 { margin: 0; }
.agent__etat {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pilule); white-space: nowrap;
}
.agent__etat--vif { background: var(--bleu); color: var(--papier); }
.agent__etat--pret { background: var(--papier-2); color: var(--gris); }
.agent__role { font-size: .84rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--gris); margin-bottom: calc(var(--pas) * 2); }
.agent__accroche { font-weight: 600; margin-bottom: calc(var(--pas) * 2); }
/* Deux registres sous le nom : l'accroche porte la promesse, le contexte
   explique ce que l'agent prend en charge. Le second est plus discret, sinon
   les deux se concurrencent et la carte n'a plus de point d'entree. */
.agent__contexte {
  color: var(--gris); font-size: .93rem; line-height: 1.5;
  margin: calc(var(--pas) * 1.5) 0 calc(var(--pas) * 2);
}
/* Mention de deploiement : une note de bas de fiche, pas une promesse. Elle se
   distingue du resultat en bleu juste au-dessus. */
.agent__preuve {
  margin: calc(var(--pas) * 1.2) 0 0; padding-top: calc(var(--pas) * 1.2);
  border-top: 1px solid var(--filet);
  font-size: .82rem; color: var(--gris-clair); line-height: 1.4;
}
/* Le resultat ne se colle plus en bas de fiche. Aligner les trois resultats
   entre eux obligeait a pousser un vide au milieu de la carte la moins fournie,
   et un trou au milieu se voit toujours plus qu'un peu d'air en bas. Le contenu
   se tasse donc en haut, et le surplus retombe sous la derniere ligne. */
.agent .carte__resultat { margin-top: calc(var(--pas) * 1.5); }

.agent ul { list-style: none; margin: 0 0 calc(var(--pas) * 2); padding: 0; }
.agent li { position: relative; padding-left: 22px; color: var(--gris); font-size: .96rem; margin-bottom: 6px; line-height: 1.45; }
.agent li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); }

.agent--surmesure {
  border: 1px dashed var(--filet); background: transparent; box-shadow: none;
  justify-content: center; text-align: center;
}
.agent--surmesure:hover { transform: none; box-shadow: none; }

/* --- La piste : defilement lateral sous 780 px ------------------------- */

/* Quatre cartes d'agent empilees faisaient 2 180 px, deux ecrans et demi pour
   un seul bloc, et le lecteur decrochait avant la quatrieme. En piste, elles
   tiennent en un ecran et se parcourent au pouce.

   La carte suivante depasse volontairement du bord droit : c'est ce
   debordement qui annonce la suite. Une barre de defilement ne le dirait pas,
   elle est masquee sur telephone. */
@media (max-width: 779px) {
  .piste {
    grid-auto-flow: column;
    grid-template-columns: none;
    /* 82 % de la colonne, mais jamais plus de 330 px : sur une tablette en
       portrait, une carte a 82 % ferait 590 px et la piste n'aurait plus de
       sens. Bornee, elle montre deux cartes et l'amorce d'une troisieme. */
    grid-auto-columns: clamp(240px, 82%, 330px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* On sort des gouttieres pour que la piste file jusqu'aux deux bords, puis
       on les rend en rembourrage : la premiere carte reste alignee sur la
       colonne de texte, la derniere respire a droite. */
    margin-inline: calc(var(--gouttiere) * -1);
    padding-inline: var(--gouttiere);
    scroll-padding-inline: var(--gouttiere);
    /* overflow-x cree un rognage vertical : sans ce rembourrage, l'ombre
       portee des cartes serait coupee net en haut et en bas. */
    padding-block: 6px 16px;
    scrollbar-width: none;
  }
  .piste::-webkit-scrollbar { display: none; }
  .piste > * { scroll-snap-align: start; }
  .piste:focus-visible { outline-offset: -3px; }

  /* Une carte hors champ a droite n'entre jamais dans la fenetre : l'observateur
     ne la revele donc pas, et le debordement cense annoncer la suite resterait
     invisible. Dans la piste, les cartes sont posees ; c'est le bloc au-dessus
     qui porte le mouvement. */
  .anime .piste > .apparait { opacity: 1; transform: none; filter: none; transition: none; }

  /* A 280 px de large, 32 px de rembourrage laissaient 216 px de texte. */
  .piste .agent { padding: calc(var(--pas) * 3); }
  .piste .agent__figurine { height: 104px; width: auto; }

  /* Etiree comme les autres, la carte ouverte devenait 670 px de pointilles
     presque vides. Ramenee a sa hauteur de contenu et centree, elle se lit
     comme la note qu'elle est, pas comme une carte qu'on aurait oublie de
     remplir. Sur bureau elle garde sa hauteur pleine : elle y tient la
     rangee. */
  .piste .agent--surmesure { align-self: center; padding-block: calc(var(--pas) * 5); }
}

/* --- Lecteur video ----------------------------------------------------- */

/* Facade : tant que le visiteur n'a pas clique, seule l'affiche est chargee.
   La video ne part qu'au clic, c'est ce qui evite de payer plusieurs mega-
   octets sur le plus gros indicateur de vitesse de la page. */
.demonstration { margin-top: calc(var(--pas) * 7); }
.demonstration__texte { max-width: 56ch; margin-bottom: calc(var(--pas) * 4); }

.lecteur { position: relative; }
.lecteur__declencheur {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; position: relative; border-radius: inherit;
}
.lecteur__affiche { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--papier-2); }
.lecteur__declencheur::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 18, 15, .42), transparent 46%);
  transition: opacity var(--lent);
}
.lecteur__declencheur:hover::before { opacity: .72; }

.lecteur__jouer {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 82px; height: 82px; border-radius: 50%;
  background: rgba(251, 250, 247, .92); color: var(--encre);
  display: grid; place-items: center;
  box-shadow: var(--ombre-3);
  transition: transform var(--lent), background-color var(--lent);
}
/* Le triangle est decale de 3 px : mathematiquement centre, il parait a
   gauche. C'est l'oeil qui a raison, pas le calcul. */
.lecteur__jouer svg { width: 26px; height: 26px; fill: currentColor; margin-left: 3px; }
.lecteur__declencheur:hover .lecteur__jouer { transform: translate(-50%, -50%) scale(1.07); background: var(--papier); }
.lecteur__declencheur:active .lecteur__jouer { transform: translate(-50%, -50%) scale(.97); }

.lecteur__duree {
  position: absolute; right: calc(var(--pas) * 2.5); bottom: calc(var(--pas) * 2.5);
  background: rgba(20, 18, 15, .62); color: var(--papier);
  font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: var(--r-pilule);
  backdrop-filter: blur(6px);
}
.lecteur video { width: 100%; display: block; aspect-ratio: 16 / 9; background: var(--encre); }
.demonstration figcaption { margin-top: calc(var(--pas) * 2.5); font-size: .88rem; color: var(--gris); }

/* --- Cas clients ------------------------------------------------------ */

.cas {
  border: 0; border-radius: var(--r-md); overflow: hidden;
  background: var(--blanc); display: flex; flex-direction: column;
  box-shadow: var(--ombre-2);
  transition: transform var(--lent), box-shadow var(--lent);
}
.cas:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); }
/* 4/3 plutot que 16/10 : la photo de l'audit est un portrait 3/4 a la prise de
   vue, le cadre en 16/10 n'en gardait qu'une tranche. Le 4/3 est en plus le
   format natif de la seconde photo, qui n'est donc plus recadree du tout. */
.cas__image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cas__corps { padding: calc(var(--pas) * 4.5); display: flex; flex-direction: column; flex: 1; position: relative; }
/* 36 px de rembourrage sur une colonne de 342 px ne laissaient que 270 px de
   texte : les deux paragraphes du cas tombaient a 32 signes par ligne, bien
   sous la mesure confortable. */
@media (max-width: 619px) { .cas__corps { padding: calc(var(--pas) * 3); } }
.cas__figurine { position: absolute; right: calc(var(--pas) * 3); top: calc(var(--pas) * -6); width: 62px; }
.cas__etiquette {
  display: inline-block; align-self: flex-start;
  font-size: .74rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--bleu); background: var(--papier-2);
  padding: 5px 13px; border-radius: var(--r-pilule);
  margin-bottom: calc(var(--pas) * 2);
}
.cas h3 { margin-bottom: calc(var(--pas) * 2); max-width: 24ch; }
.cas__chiffre {
  margin-top: auto; padding-top: calc(var(--pas) * 3); border-top: 1px solid var(--filet);
  font-size: 1.14rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.015em;
}
.cas__note { margin-top: calc(var(--pas) * 1.5); font-size: .84rem; color: var(--gris); font-style: italic; }

/* --- Temoignage ------------------------------------------------------- */

.temoignage {
  max-width: 46rem; margin-inline: auto; text-align: center;
  background: var(--blanc); border-radius: var(--r-lg);
  padding: calc(var(--pas) * 7) calc(var(--pas) * 6);
  box-shadow: var(--ombre-2);
}
.temoignage blockquote {
  margin: 0 0 calc(var(--pas) * 4);
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 700; line-height: 1.24; letter-spacing: -0.028em;
}
.temoignage figcaption { color: var(--gris); font-size: .97rem; }
.temoignage__figurine { width: 84px; margin: 0 auto calc(var(--pas) * 3); }
.a-remplir { border: 1px dashed var(--filet); border-radius: var(--r-sm); padding: calc(var(--pas) * 2) calc(var(--pas) * 3); color: var(--gris); font-size: .9rem; font-weight: 400; font-family: 'Schibsted Grotesk', sans-serif; letter-spacing: 0; line-height: 1.6; }

/* --- Qui sommes-nous --------------------------------------------------- */

.conviction {
  margin-top: calc(var(--pas) * 5);
  max-width: 66ch;
  border-left: 3px solid var(--bleu);
  padding-left: calc(var(--pas) * 3);
}
.conviction p { color: var(--gris); font-size: .99rem; line-height: 1.66; }
.conviction p + p { margin-top: calc(var(--pas) * 2); }
.conviction strong { color: var(--encre); }

.fondateurs { display: grid; gap: calc(var(--pas) * 5); margin-top: calc(var(--pas) * 6); }
@media (min-width: 880px) { .fondateurs { grid-template-columns: 1fr 1fr; gap: calc(var(--pas) * 6); } }

.fondateur { display: grid; grid-template-columns: 170px 1fr; gap: calc(var(--pas) * 3); align-items: start; }
/* Sur un telephone, 170 px de portrait ne laissaient que 133 px au texte :
   la colonne devenait illisible. Le portrait cede la place. */
@media (max-width: 620px) { .fondateur { grid-template-columns: 104px 1fr; gap: calc(var(--pas) * 2); } }
.fondateur__portrait img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-md); background: var(--papier-2);
  box-shadow: var(--ombre-2);
}
.fondateur h3 { margin: 0 0 2px; font-size: 1.12rem; }
.fondateur .role { font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--bleu); margin: 0 0 calc(var(--pas) * 1.2); }
.fondateur p { font-size: .94rem; line-height: 1.58; }
/* Le parcours se distingue de la phrase d'accroche par un filet, pas par une
   couleur : c'est une seconde information sur la meme personne, pas une note
   de bas de page. */
.fondateur__parcours { margin-top: calc(var(--pas) * 1.6); padding-top: calc(var(--pas) * 1.6); border-top: 1px solid var(--filet); font-size: .9rem; color: var(--gris); }

/* La scene reste bornee a 840 px : la source fait 1678 px de large, soit
   exactement ce qu'un ecran en densite 2 reclame a cette taille. */
.scene { max-width: 840px; margin: calc(var(--pas) * 6) auto 0; }

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

/* Alignee a gauche, sur le meme axe que tous les autres blocs. Centree, elle
   creait un troisieme axe de lecture dans la page et l'oeil devait se
   repositionner. Seuls le temoignage et l'appel final restent centres :
   ce sont des pauses, et leur centrage est justement le signal. */
.faq { max-width: 46rem; }
.faq details {
  background: var(--blanc); border-radius: var(--r-md);
  margin-bottom: calc(var(--pas) * 1.5);
  box-shadow: var(--ombre-1);
  transition: box-shadow var(--lent);
}
.faq details[open] { box-shadow: var(--ombre-2); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: calc(var(--pas) * 2.8) 56px calc(var(--pas) * 2.8) calc(var(--pas) * 3.5);
  font-size: 1.18rem; font-weight: 700; letter-spacing: -0.015em; position: relative;
  border-radius: var(--r-md);
}
.faq summary::-webkit-details-marker { display: none; }
/* Croix qui pivote plutot que caractere qui change : le signe reste le meme
   objet, il tourne. */
.faq summary::after, .faq summary::before {
  content: ''; position: absolute; right: 26px; top: 50%;
  width: 14px; height: 2px; background: var(--bleu); border-radius: 2px;
  transition: transform var(--lent), opacity var(--lent);
}
.faq summary::after { transform: translateY(-50%) rotate(90deg); }
.faq summary::before { transform: translateY(-50%); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
/* Une reponse peut tenir en deux paragraphes : seul le dernier porte la marge
   basse, sinon la carte se termine par un blanc trop large. */
.faq details p { padding-inline: calc(var(--pas) * 3.5); color: var(--gris); max-width: 62ch; margin-bottom: calc(var(--pas) * 2); font-size: 1.07em; line-height: 1.66; }
/* En « em » et non en « rem » : la racine est a 16 px, le corps de texte a
   clamp(17px, 1.15vw, 19px). Un 1.06rem valait 16,96 px, soit un cran de MOINS
   que le texte courant. Le em part du corps reel et grandit avec lui. */
.faq details p:last-of-type { padding-bottom: calc(var(--pas) * 3.5); margin-bottom: 0; }

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

.pied {
  background: var(--encre-fond); color: rgba(251, 250, 247, .7);
  padding-block: calc(var(--pas) * 9); font-size: .94rem;
  background-image: radial-gradient(60% 100% at 50% 0%, rgba(26, 78, 127, .3), transparent 70%);
}
.pied__logo img { width: 156px; margin-bottom: calc(var(--pas) * 5); }
.pied a { color: rgba(251, 250, 247, .7); text-decoration: none; }
.pied a:hover { color: var(--papier); text-decoration: underline; }
.pied ul { list-style: none; margin: 0; padding: 0; }
/* Le rembourrage remplace une partie de la marge : la zone cliquable passe de
   18 a 26 px, au-dessus du minimum de 24 px, sans que l'espacement bouge. */
.pied li { margin-bottom: 2px; }
.pied li a { display: inline-block; padding-block: 4px; }

/* Ces liens-la sont les plus touches sur telephone : l'adresse, le telephone,
   les mentions legales. En texte simple ils ne faisaient que 18 px de haut,
   moins de la moitie du minimum. Le rembourrage remplace la marge, la zone
   passe a 44 px sans que l'espacement visuel bouge beaucoup. En regard, les
   trois groupes passent sur deux colonnes : c'est ce qui paie la hauteur
   gagnee par les cibles. */
@media (max-width: 779px) {
  .pied .grille--3 { grid-template-columns: 1fr 1fr; gap: calc(var(--pas) * 4) calc(var(--pas) * 3); }
  .pied li { margin-bottom: 0; }
  .pied li a { display: inline-block; padding-block: 13px; }
  .pied li:not(:has(a)) { padding-block: 13px; }
  /* Trois groupes dans deux colonnes laissaient le troisieme seul, avec un
     vide a sa droite. Etale sur la largeur, il range ses quatre liens sur
     deux colonnes : le pied se ferme droit. */
  .pied .grille--3 > :last-child { grid-column: 1 / -1; }
  .pied .grille--3 > :last-child ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--pas) * 3); }
}
/* .45 ne donnait que 4,36 de contraste sur le fond du pied, pour un seuil de
   4,5 sur du texte de 12,5 px. Releve a .52, soit 5,40. Defaut anterieur. */
.pied .surtitre { color: rgba(251, 250, 247, .52); }
.pied__bas { margin-top: calc(var(--pas) * 6); padding-top: calc(var(--pas) * 3); border-top: 1px solid rgba(251, 250, 247, .14); font-size: .87rem; color: rgba(251, 250, 247, .52); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.pied__hermine { width: 20px; fill: rgba(251, 250, 247, .35); }

/* --- Reperes de maquette ---------------------------------------------- */

.repere {
  border: 1px dashed var(--bleu); border-radius: var(--r-sm);
  padding: calc(var(--pas) * 2) calc(var(--pas) * 3);
  color: var(--bleu); font-size: .86rem; text-align: center; background: rgba(26, 78, 127, .05);
}

/* --- Apparition au defilement ----------------------------------------- */

/* Le contenu est visible par defaut. C'est le script qui pose .anime sur
   <html> et donc qui masque, puis revele au defilement. Sans JavaScript
   panne, blocage, robot d'indexation, la page reste entierement lisible.

   Le contenu arrive legerement flou et se met au point : la mise au point
   attire l'oeil plus surement qu'un glissement seul. */
/* Les blocs entrent sobrement. Le flou a saute : il coutait cher a la carte
   graphique et il donnait a chaque bloc le meme fondu mou, celui qu'on voit
   partout. Sans lui, l'arrivee est nette, et le mouvement se lit. */
.anime .apparait {
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s var(--elan), transform .7s var(--elan);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.anime .apparait.vu { opacity: 1; transform: none; }

/* -- Revelation des titres, mot a mot ---------------------------------------
   Un fondu montre un bloc deja en place a qui on rend sa couleur. Un masque
   fait entrer le mot par le bas, derriere un bord qui le coupe net : on voit
   une phrase se construire. C'est le seul vrai ecart de mouvement entre un
   site ordinaire et un site qu'on trouve cher, et il ne coute aucune
   bibliotheque.

   Le rembourrage bas compense les jambages : sans lui, le masque tranche le
   pied des « g » et des « p » une fois le mot arrive. */
.mot {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.mot__i { display: inline-block; }

/* Le titre garde .apparait pour etre observe, mais son propre fondu de bloc
   est neutralise : ce sont ses mots qui portent le mouvement, pas lui. */
.anime .apparait.revele { opacity: 1; transform: none; transition: none; }
.anime .revele .mot__i {
  transform: translateY(105%);
  transition: transform .85s var(--elan);
  transition-delay: calc(var(--m, 0) * 55ms);
}
.anime .revele.vu .mot__i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anime .apparait { opacity: 1; transform: none; filter: none; transition: none; }
  .anime .revele .mot__i { transform: none; transition: none; }
  .bouton:hover, .carte:hover, .agent:hover, .cas:hover, .offre:hover { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* =========================================================================
   Le simulateur du bloc 01
   -------------------------------------------------------------------------
   Le calcul fige (45 min x 20 personnes x 220 jours = 3 300 h) est devenu
   manipulable. Les valeurs de depart sont exactement celles du texte qu'il
   remplace : la page s'ouvre donc sur le meme chiffre qu'avant, et c'est le
   visiteur qui le deplace vers sa propre situation.

   Tout ce qui concerne le montant en euros porte data-cout, dans le style
   comme dans le balisage, pour pouvoir etre retire d'un seul tenant.
   ========================================================================= */

/* -- Le plateau -----------------------------------------------------------
   Un seul ecrin tient tout le bloc, et les cartes vivent dedans. C'est ce
   qui donne l'impression d'un instrument pose sur la page plutot que d'une
   suite de paragraphes. */
.simu {
  background: var(--papier-2);
  border-radius: var(--r-lg);
  padding: clamp(20px, 3.4vw, 42px);
  margin-top: calc(var(--pas) * 6);
  box-shadow: inset 0 0 0 1px rgba(20, 18, 15, .045);
}
.simu__grille { display: grid; gap: calc(var(--pas) * 2); }
@media (min-width: 900px) { .simu__grille { grid-template-columns: 1.1fr .9fr; } }

.simu__carte {
  background: var(--blanc);
  border-radius: var(--r-md);
  padding: clamp(18px, 2.4vw, 30px);
  box-shadow: var(--ombre-1);
}

/* -- Les curseurs ---------------------------------------------------------
   La valeur est repetee en clair a droite de son intitule : un curseur seul
   se manipule a l'aveugle, et c'est le chiffre qui porte l'argument. */
.champ + .champ { margin-top: calc(var(--pas) * 3.5); }
.champ__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.champ__nom { font-size: .93rem; color: var(--gris); line-height: 1.35; }
.champ__valeur {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: 1.3rem; font-weight: 700; color: var(--encre);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Piste dessinee a la main : la partie parcourue prend le bleu d'encre, le
   reste garde le filet. La proportion arrive de JS par --p.

   Le trait visible ne fait que 6 px, mais l'element, lui, en fait 30 : c'est
   la zone que le doigt doit trouver. On dessine donc la piste sur la
   pseudo-classe de rail, pas sur l'element, sinon les deux hauteurs seraient
   forcement la meme et le curseur serait injouable sur telephone. */
.curseur {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; display: block;
  background: transparent; outline: none; cursor: pointer;
}
.piste-fond { background: linear-gradient(to right, var(--bleu) var(--p, 50%), var(--filet) var(--p, 50%)); }

.curseur::-webkit-slider-runnable-track {
  height: 6px; border-radius: var(--r-pilule);
  background: linear-gradient(to right, var(--bleu) var(--p, 50%), var(--filet) var(--p, 50%));
}
.curseur::-moz-range-track {
  height: 6px; border-radius: var(--r-pilule);
  background: linear-gradient(to right, var(--bleu) var(--p, 50%), var(--filet) var(--p, 50%));
}

.curseur::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--blanc); border: 2px solid var(--bleu);
  box-shadow: var(--ombre-2); cursor: grab;
  margin-top: -9px;                 /* centre le pouce sur un rail de 6 px */
  transition: transform var(--vite);
}
.curseur::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(.92); }
.curseur::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--blanc); border: 2px solid var(--bleu);
  box-shadow: var(--ombre-2); cursor: grab;
}
.curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--bleu-clair); }
.curseur:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--bleu-clair); }

/* Au doigt, on vise plus large : la cible passe a 44 px, le seuil au-dessous
   duquel un curseur devient penible a attraper. */
@media (pointer: coarse) {
  .curseur { height: 44px; }
  .curseur::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .curseur::-moz-range-thumb { width: 26px; height: 26px; }
}

.champ__bornes { display: flex; justify-content: space-between; margin-top: 0; font-size: .76rem; color: var(--gris-clair); }

/* -- Le resultat ----------------------------------------------------------
   Il occupe sa propre carte et rien d'autre : c'est le seul chiffre que le
   visiteur doit emporter. */
.resultat { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.resultat__etiquette {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gris-clair); margin-bottom: calc(var(--pas) * 2);
}
.resultat__chiffre {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: clamp(3.2rem, 7.4vw, 5.1rem); font-weight: 800;
  line-height: .95; letter-spacing: -.035em; color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.resultat__unite { font-size: .34em; font-weight: 700; letter-spacing: -.01em; margin-left: .18em; color: var(--bleu); }
.resultat__legende { margin-top: calc(var(--pas) * 2); font-size: 1rem; color: var(--gris); line-height: 1.5; max-width: 30ch; }

/* -- Le cout en euros -----------------------------------------------------
   Bloc autonome. Tout ce qui le compose porte data-cout, dans le style comme
   dans le balisage : le retirer se fait d'un seul tenant, sans toucher au
   reste du simulateur.

   Il vient sous les heures et jamais a leur place : l'heure est un fait
   mesurable, l'euro depend d'une hypothese de cout horaire. C'est l'heure qui
   porte l'argument, l'euro ne fait que le rendre audible. */
.resultat__cout {
  margin-top: calc(var(--pas) * 3);
  padding-top: calc(var(--pas) * 2.5);
  border-top: 1px solid var(--filet);
}
.resultat__cout-valeur {
  display: block;
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: clamp(1.55rem, 2.9vw, 2.15rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -.03em; color: var(--bleu);
  font-variant-numeric: tabular-nums;
}
.resultat__cout-mention {
  display: block; margin-top: 7px;
  font-size: .85rem; color: var(--gris); line-height: 1.45; max-width: 32ch;
}

/* -- Le bandeau des equivalences -----------------------------------------
   Fond sombre : il coupe le plateau en deux et fait respirer le chiffre du
   dessus. C'est aussi la seule zone du bloc qui traduit les heures en
   quelque chose qu'un dirigeant se represente. */
.equiv {
  background: var(--encre-fond); color: var(--papier);
  border-radius: var(--r-md);
  padding: clamp(20px, 2.8vw, 34px);
  margin-top: calc(var(--pas) * 2);
}
.equiv__titre { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(251, 250, 247, .5); }
.equiv__grille { display: grid; gap: calc(var(--pas) * 3); margin-top: calc(var(--pas) * 2.5); }
@media (min-width: 720px) { .equiv__grille { grid-template-columns: repeat(3, 1fr); gap: calc(var(--pas) * 4); } }
.equiv__item b {
  display: block;
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: clamp(1.85rem, 3.1vw, 2.5rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--blanc); font-variant-numeric: tabular-nums;
}
/* La legende sous chaque chiffre remonte a la taille du texte courant. Elle
   etait a 14,9 px sous des nombres de 40 px : l'ecart de corps la reduisait a
   une note de bas de page alors qu'elle porte le sens du chiffre. Le contraste
   n'etait pas en cause, il etait deja a 8,4 pour 1 ; c'est bien la taille qui
   manquait. L'opacite gagne quand meme quelques points, gratuitement. */
.equiv__item span { display: block; margin-top: 10px; font-size: 1.06rem; color: rgba(251, 250, 247, .76); line-height: 1.5; }
@media (min-width: 720px) {
  .equiv__item + .equiv__item { border-left: 1px solid rgba(251, 250, 247, .13); padding-left: calc(var(--pas) * 4); }
}

/* -- Le pied du plateau --------------------------------------------------- */
.simu__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: calc(var(--pas) * 2); margin-top: calc(var(--pas) * 3);
}
.simu__note { font-size: .88rem; color: var(--gris); max-width: 52ch; line-height: 1.5; }

/* Le chiffre change sous les doigts : sans transition il clignote, avec une
   transition longue il ment sur la valeur en cours. Un souffle court suffit. */
.chiffre-anime { transition: opacity .12s linear; }


/* =========================================================================
   Section 04 : les quatre portes d'entree, en cartes de couleur
   -------------------------------------------------------------------------
   Le changement de fond n'est pas l'essentiel. L'essentiel est la hierarchie :
   la promesse deja ecrite dans chaque carte est passee en grand titre, et le
   nom de l'offre est descendu en etiquette a cote du numero. Avant, les quatre
   cartes commencaient toutes par un nom d'offre, donc rien ne depassait et la
   rangee ne se balayait pas.

   Blanc et bleu en haut, bleu et blanc en bas : les deux bleus se repondent en
   diagonale et aucune carte ne touche une carte de sa propre couleur.
   ========================================================================= */

.offres { display: grid; gap: calc(var(--pas) * 2.5); margin-top: calc(var(--pas) * 6); }
.offres__course { display: none; }

.offre {
  display: flex; flex-direction: column;
  background: var(--fond);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 44px);
  min-height: 420px;
  box-shadow: var(--ombre-2);
  transition: transform var(--lent), box-shadow var(--lent);
}
.offre:hover { transform: translateY(-4px); box-shadow: var(--ombre-3); }

.offre__etiquette {
  display: flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sourdine); margin-bottom: calc(var(--pas) * 3);
}
.offre__etiquette::before {
  content: attr(data-rang);
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
  padding: 3px 9px; border-radius: var(--r-pilule);
  background: var(--pastille); color: var(--titre);
}

.offre__promesse {
  font-family: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;
  font-size: clamp(1.62rem, 3.1vw, 2.35rem);
  font-weight: 800; line-height: 1.06; letter-spacing: -.032em;
  color: var(--titre); margin: 0 0 calc(var(--pas) * 3); text-wrap: balance;
}

.offre__intro { font-size: .98rem; line-height: 1.55; color: var(--corps); margin: 0 0 calc(var(--pas) * 3); }

.offre__liste { list-style: none; margin: 0 0 calc(var(--pas) * 3); padding: 0; display: grid; gap: 11px; }
.offre__liste li { position: relative; padding-left: 20px; font-size: .95rem; line-height: 1.45; color: var(--corps); }
.offre__liste li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--titre);
}

/* Le lien reprend le bouton du site, pastille de fleche comprise, plutot qu'une
   pilule inventee pour l'occasion : c'est le meme geste que « Reserver mon
   audit » ailleurs, donc il doit avoir la meme forme. Cette regle ne fait plus
   que l'accrocher en bas, parce que les quatre cartes n'ont pas la meme
   longueur de texte et que sans cela les boutons arriveraient a quatre hauteurs
   differentes. */
.offre__lien { margin-top: auto; align-self: flex-start; }

/* Sur petit ecran, la carte ne laisse que 275 px et « J'ai un quotidien a
   alleger » passait sur deux lignes. On reprend les mesures compactes de la
   charte : 32 px de pastille plus 2 x 6 px de rembourrage, soit exactement les
   44 px de cote minimum sous le doigt. */
@media (max-width: 560px) {
  .offre__lien { padding: 6px 6px 6px 19px; font-size: .93rem; gap: 10px; }
  .offre__lien::after { width: 32px; height: 32px; font-size: .92rem; }
}

/* Sous 400 px il ne reste que 220 px dans la carte, et meme en compact trois
   libelles sur quatre repassaient a la ligne. Le bouton prend alors toute la
   largeur, texte cale a gauche et fleche a droite : c'est une forme voulue,
   pas un bouton qui deborde. */
@media (max-width: 400px) {
  /* gap a zero : la repartition par les extremites ecarte deja le texte de la
     fleche, et les 10 px herites mangeaient le dernier pixel du libelle le
     plus long, qui repassait a la ligne pour rien. */
  .offre__lien { align-self: stretch; justify-content: space-between; font-size: .85rem; padding-left: 14px; gap: 0; }
}

/* Sur les cartes bleues, le bouton bleu disparaitrait dans le fond : on inverse,
   exactement comme la charte le fait deja sur les sections sombres. */
.offre--2 .bouton, .offre--3 .bouton {
  background: var(--blanc); color: var(--bleu);
  box-shadow: var(--ombre-1), 0 14px 30px -14px rgba(9, 26, 43, .5);
}
.offre--2 .bouton::after, .offre--3 .bouton::after { background: rgba(26, 78, 127, .13); }
.offre--2 .bouton:hover, .offre--3 .bouton:hover { background: var(--papier); color: var(--bleu-fonce); }
.offre--2 .bouton:hover::after, .offre--3 .bouton:hover::after { background: rgba(26, 78, 127, .2); }
/* -- Empilement au defilement, bureau seulement ----------------------------
   Les quatre cartes ne sont plus cote a cote : elles se suivent en pleine
   largeur et se collent l'une apres l'autre sous l'en-tete, chacune 20 px plus
   bas que la precedente. En descendant, la suivante remonte et recouvre la
   precedente, dont il ne reste qu'un liseré. On lit une pile qui se construit.

   Aucune bibliotheque : c'est du position: sticky. Le site de reference le fait
   avec GSAP ScrollTrigger et son epinglage, mais ce mecanisme-la ne demande ni
   JavaScript, ni 110 Ko de dependance, et il ne casse pas si le script tombe.

   Deux conditions a ne pas defaire : aucun ancetre de .offres ne doit passer en
   overflow autre que visible, sinon le collage s'annule sans erreur ; et les
   cartes doivent rester opaques, sans quoi la pile devient illisible.

   Sur telephone, rien de tout cela : les cartes se suivent simplement, ce qui
   est le bon comportement sur un ecran ou l'empilement n'aurait pas la place
   de se lire. */
@media (min-width: 900px) {
  /* flow-root et non block : il faut que la marge basse de la derniere carte
     reste a l'interieur de la boite de contenu. Un rembourrage bas ne servirait
     a rien ici, une carte collante est bornee par la boite de contenu de son
     parent et ignore son rembourrage. Essaye et verifie, c'est ce qui m'a
     coute un tour. */
  .offres { display: flow-root; margin-top: calc(var(--pas) * 8); }

  .offre {
    position: sticky;
    /* 75 px d'en-tete collant, plus une respiration, plus le decalage de rang. */
    top: calc(99px + (var(--i) - 1) * 20px);
    min-height: 460px;
    padding: calc(var(--pas) * 7);
    /* Une carte posee sur la pile est plus haute qu'une carte au repos : c'est
       aussi ce qui dessine son bord quand elle en recouvre une de meme teinte. */
    box-shadow: var(--ombre-3);

    display: grid;
    grid-template-columns: 45% 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: calc(var(--pas) * 8);
  }
  /* 80 px entre deux cartes : c'est la course que le lecteur parcourt avant que
     la suivante ne vienne recouvrir la precedente. Trop court, l'empilement
     defile sans se voir ; trop long, la section devient un tunnel. */
  .offre + .offre { margin-top: calc(var(--pas) * 10); }

  /* La course de fin est un element a part, jamais une marge sur la derniere
     carte : la zone de collage d'une boite est son bloc conteneur RETRECI DE
     SES PROPRES MARGES. Une marge basse de 34 vh sur la carte 4 lui retirait
     donc exactement la course qu'elle etait censee lui donner, et la carte ne
     se collait plus du tout. Verifie a la mesure, ce n'est pas une intuition. */
  .offres__course { display: block; height: 48vh; }

  /* Une carte deja collee qui se souleve de 4 px sous la souris tremble : le
     survol ne garde que l'ombre. */
  .offre:hover { transform: none; }

  .offre__etiquette { grid-column: 1; grid-row: 1; margin-bottom: calc(var(--pas) * 4); }
  .offre__promesse  { grid-column: 1; grid-row: 2 / 4; align-self: start; margin: 0; }
  .offre__intro     { grid-column: 2; grid-row: 1; margin: 0 0 calc(var(--pas) * 3); }
  .offre__liste     { grid-column: 2; grid-row: 2; margin: 0 0 calc(var(--pas) * 4); align-self: start; }
  .offre__lien      { grid-column: 2; grid-row: 3; align-self: end; margin-top: 0; }
}

/* La pile est un mouvement lie au defilement : qui demande moins d'animations
   retrouve quatre cartes qui se suivent, sans collage. */
@media (prefers-reduced-motion: reduce) {
  .offre { position: static; }
}

/* Les teintes sourdes sont calees pour tenir 4,5:1 sur leur fond : l'etiquette
   est petite et en capitales, c'est le texte le plus fragile de la carte. */
/* Le creme fonce de la charte, celui qui sert deja de fond a cette section.
   Les cartes claires ont donc exactement la couleur de ce qui les entoure : ce
   n'est plus la teinte qui les detache, c'est l'ombre teintee a l'encre, seule.
   La pastille du numero passe en teinte d'encre, le papier-2 y disparaitrait. */
.offre--1, .offre--4 { --fond: var(--papier-2); --titre: var(--encre); --corps: var(--gris);          --sourdine: var(--gris);           --pastille: rgba(20, 18, 15, .07); }
.offre--2, .offre--3 { --fond: var(--bleu);  --titre: #dce9f4;      --corps: rgba(251,250,247,.8); --sourdine: rgba(251,250,247,.78); --pastille: rgba(251,250,247,.13); }

/* Emplacement encore provisoire : liseré d'alerte, pour qu'il ne passe pas
   inaperçu au moment de la mise en ligne. À retirer avec l'attribut. */
[data-provisoire] { position: relative; outline: 3px dashed var(--bleu); outline-offset: 3px; border-radius: var(--r-md); }
[data-provisoire]::after {
  content: 'provisoire'; position: absolute; left: 0; bottom: -26px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bleu);
}

/* ==========================================================================
   ESSAI, non valide : carte d'offre a deux etages

   Une carte ou tout est au meme niveau visuel (petite icone, titre moyen,
   texte, tirets) se lit comme une page de traitement de texte. On la coupe
   en deux : une vitrine en haut qui donne a voir et porte la promesse, du
   texte en bas qui explique. Le cadre imbrique, un plateau creme dans lequel
   est serti un plateau blanc, donne l'epaisseur qui manquait.
   ========================================================================== */

.carte--vitree { padding: calc(var(--pas) * 2); }

/* Plateau exterieur : c'est lui qui creuse. Le rayon interieur est calcule
   pour rester concentrique avec l'exterieur, sinon les deux arrondis se
   contrarient et l'objet a l'air mal monte. */
.carte__vitrine {
  background: var(--papier-2);
  border-radius: calc(var(--r-md) - var(--pas) * 0.5);
  padding: calc(var(--pas) * 2);
  margin-bottom: calc(var(--pas) * 3);
}
.carte__scene {
  background: var(--blanc);
  border-radius: calc(var(--r-md) - var(--pas) * 1.5);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 2) calc(var(--pas) * 2.5);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--pas) * 2.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--ombre-1);
}
.carte__scene img { width: 108px; height: auto; }
.carte--porte:hover .carte__scene img { transform: translateY(-3px); }
.carte__scene img { transition: transform var(--lent); }

/* La promesse quitte le bas de la carte pour venir dans la vitrine : c'est
   la premiere chose lue, pas la derniere. */
.carte__promesse {
  margin: 0; width: 100%;
  display: flex; align-items: center; gap: calc(var(--pas) * 1.5);
  background: var(--papier); border-radius: var(--r-pilule);
  padding: calc(var(--pas) * 1.2) calc(var(--pas) * 2);
  font-size: .84rem; font-weight: 700; line-height: 1.35; color: var(--bleu);
}
.carte__promesse::before {
  content: ''; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M232.49%2C80.49l-128%2C128a12%2C12%2C0%2C0%2C1-17%2C0l-56-56a12%2C12%2C0%2C1%2C1%2C17-17L96%2C183%2C215.51%2C63.51a12%2C12%2C0%2C0%2C1%2C17%2C17Z'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* Titre plus present : c'est lui qui doit accrocher apres la vitrine. */
.carte--vitree h3 { font-size: clamp(1.35rem, 2.1vw, 1.62rem); padding-right: 0; margin-bottom: calc(var(--pas) * 1.5); }
.carte--vitree .carte__rang { position: static; margin: 0 0 calc(var(--pas) * 1.2); opacity: .32; }

/* Coches pleines a la place des tirets : le tiret enumere, la coche valide. */
.carte--vitree .litanie li { padding-left: 30px; }
.carte--vitree .litanie li::before {
  content: ''; left: 0; top: .28em; width: 19px; height: 19px; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231a4e7f'%3E%3Cpath d='M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm45.66%2C85.66-56%2C56a8%2C8%2C0%2C0%2C1-11.32%2C0l-24-24a8%2C8%2C0%2C0%2C1%2C11.32-11.32L112%2C148.69l50.34-50.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; opacity: .85;
}

/* Le texte reprend le retrait de la vitrine pour ne pas coller au bord. */
.carte--vitree > :not(.carte__vitrine) { padding-inline: calc(var(--pas) * 2.2); }
.carte--vitree > .carte__lien { margin-left: calc(var(--pas) * 2.2); }

/* --- Maquette de rapport : ce que la vitrine montre reellement -----------
   Un objet illustre (montre a gousset, loupe) reste un symbole decoratif :
   c'est ce qui a fait « vieillot ». Ce que montre une reference logicielle
   moderne, c'est un extrait de vrai livrable, document, ecran, graphique.
   Neventia ne vend pas de logiciel, donc l'extrait honnete est celui d'un
   rapport, pas une fausse capture d'ecran d'un outil qui n'existe pas.
   Construit en CSS : net a toute taille, aucune generation d'image requise,
   couleurs exactes de la palette sans arbitrage colorimetrique. */
.maquette--rapport { width: 100%; }
.maquette__entete {
  display: flex; align-items: center; gap: 8px; margin: 0 0 calc(var(--pas) * 2);
  font-size: .8rem; font-weight: 700; color: var(--encre);
}
.maquette__puce { width: 7px; height: 7px; border-radius: 50%; background: var(--bleu); flex: none; }

/* Histogramme des heures identifiees : le sujet reel de l'audit plutot qu'un
   graphique generique. La barre la plus haute est mise en avant en bleu
   plein, exactement ce que l'audit fait ressortir en premier. */
.maquette__graphique {
  display: flex; align-items: flex-end; gap: 7px;
  height: 62px; margin-bottom: calc(var(--pas) * 2.5);
}
.maquette__graphique span {
  flex: 1; height: var(--h); border-radius: 4px 4px 0 0;
  background: var(--filet);
}
.maquette__graphique .maquette__barre--accent { background: var(--bleu); }

.maquette__ligne {
  height: 8px; border-radius: var(--r-pilule); background: var(--papier-2);
  margin: 0 0 calc(var(--pas) * 1.2);
}
.maquette__ligne--large { width: 100%; }
.maquette__ligne--moyenne { width: 68%; margin-bottom: 0; }