/* ==========================================================================
   PROSPEE — home.css
   Compositions PROPRES à la page d'accueil (A1) — refonte « place de marché ».
   Les composants viennent de composants.css (port du spécimen) ; les tokens de
   brand/tokens.css. Aucun hex en dur, aucune durée en dur. Motion : transform/
   opacity uniquement, accent bleu ≤ 3 %, mobile-first.
   ========================================================================== */

/* ==========================================================================
   00 · CONVENTION DE SECTION — tête centrée (assume la symétrie, pas de
   demi-page horizontale morte). Appliquée à toutes les section-tete qui
   précèdent un contenu pleine largeur (charte §5.3 : l'air = respiration
   VERTICALE, jamais une demi-page vide).
   ========================================================================== */
.section-tete--centre {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}
.section-tete--centre .section-numero { margin-inline: auto; }

/* Cadence : casser le métronome des 8 sections quasi identiques.
   --suite : une section qui CONTINUE le beat précédent (pas un reset complet) —
   on resserre le padding haut pour supprimer le grand trou vide entre deux
   sections trop aérées (défaut « ça déroule au métronome »). */
.section--suite { padding-top: var(--space-24); }
.section--avant-suite { padding-bottom: var(--space-24); }
@media (max-width: 767px) {
  .section--suite { padding-top: var(--space-16); }
  .section--avant-suite { padding-bottom: var(--space-16); }
}

/* Tête de section alignée à gauche (façon Linear) : rompt la symétrie centrée
   pour 1-2 sections-clés (le bandeau de faits, la vision/place de marché),
   créant une accélération visuelle plutôt qu'un déroulé uniforme. */
.section-tete--gauche {
  max-width: 52rem;
  text-align: left;
}
.section-tete--gauche .section-numero { margin-inline: 0; }
/* Respiration titre → lead (le titre display-l n'a pas le margin-bottom du .t-h2) :
   le lead se DÉTACHE du titre (charte §4.3 : l'air au-dessus ≥ 2× en dessous, et
   le chapeau respire). Sans ça, le lead colle au titre sur les têtes à gauche. */
.section-tete--gauche .t-display-l,
.section-tete--gauche .t-h2 { margin-bottom: var(--space-6); }
.section-tete--gauche .t-lead { max-width: 40rem; }

/* ==========================================================================
   01 · HERO — 2 colonnes (texte / carte agenda-objet)
   Padding resserré (le titre remonte) ; la trame d'agenda vit en fond.
   ========================================================================== */
.hero-acc {
  position: relative;
  padding-block: var(--space-16) var(--space-section);
}

/* Trame d'agenda en fond : plusieurs filets faibles qui traversent le hero +
   heures dans la marge. Le hero respire « agenda » (charte §6.2), plus jamais
   « page vide ». Ne s'anime jamais ; pleine largeur ; sous le contenu. */
.hero-acc-trame {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.hero-acc-filet {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
/* Les heures vivent DANS LA MARGE, à GAUCHE de la colonne de contenu : elles étaient
   calées sur la gouttière (`+ var(--space-8)`), donc au même x que tout le texte du
   hero — le « 09:00 » du filet à 8 % s'imprimait sur les premières lettres du
   surtitre. On les sort de la colonne (`− var(--space-8)`), avec un plancher à
   --space-2 pour ne jamais sortir de l'écran. */
.hero-acc-filet .trame-heure {
  bottom: var(--space-1);
  left: max(var(--space-2), calc((100% - var(--largeur-contenu)) / 2 - var(--space-8)));
}
/* Sous 1280 px il n'y a plus de marge libre à gauche du contenu (le conteneur touche
   ses gouttières) : l'étiquette retomberait sur le texte. On ne l'affiche pas. */
@media (max-width: 1279px) { .hero-acc-filet .trame-heure { display: none; } }

.hero-acc-grille {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16) var(--space-12);
  align-items: center;
}
/* Mobile : on RESSERRE l'écart texte → carte (la carte agenda remonte, sa 1re tuile
   confirmée s'approche du pli — la preuve-objet vue plus tôt). */
@media (max-width: 767px) {
  .hero-acc-grille { gap: var(--space-8) var(--space-12); }
}
/* Le palier 2 colonnes démarre à 1200 px, pas 1024 : entre les deux, la colonne
   droite tombait à ~433 px et la carte agenda 4 jours (--space-12 + 4 pistes, §01)
   rognait ses tuiles — « ✓ CONFIRMÉ » devenait « ✓ CONFIR » (mesuré : rognage nul
   à partir de 1180 px, on prend le palier rond 1200). En dessous, le hero reste
   empilé (rendu tablette) et la carte retrouve toute la largeur. */
@media (min-width: 1200px) {
  .hero-acc-grille { grid-template-columns: 1.05fr 0.95fr; }
}

.hero-acc-texte { max-width: 37rem; }
/* Surtitre en encre secondaire (pas l'accent) : sur le hero, le bleu est
   réservé au CTA et aux coches de la carte agenda — discipline « un accent par
   écran ». Le label de cadrage « place de marché » reste calme. */
.hero-acc-surtitre {
  display: block; color: var(--color-encre-2);
  margin-bottom: var(--space-6);
}
/* Le titre du hero ne s'anime jamais (§7.3) ; on évite la coupure du trait
   d'union de « rendez-vous » et on laisse le navigateur équilibrer les lignes. */
.hero-acc-texte h1 { text-wrap: balance; hyphens: none; }
.hero-acc-lead {
  color: var(--color-encre-2);
  max-width: var(--largeur-lecture);
  margin-top: var(--space-6);
}
.hero-acc-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin-top: var(--space-12);
}
.hero-acc-reassurance { color: var(--color-encre-2); margin-top: var(--space-6); }
/* L'amorce sous le CTA : le 1er pas est un échange humain (on cale la campagne)
   avant que l'agenda se remplisse — retour Silvio 17/06 (« recevoir mes RDV »
   balance sur la prise de RDV). Discrète, en encre-2, sous la réassurance. */
.hero-acc-amorce { color: var(--color-encre-2); margin-top: var(--space-3); }

/* La carte agenda-objet, posée dans la lumière. */
.hero-acc-visuel { min-width: 0; }
.hero-acc-carte {
  margin: 0; max-width: 35rem;
  padding: var(--space-6);
}
/* Même palier que la grille du hero (1200 px) : la carte ne se colle à droite que
   quand elle est réellement en 2e colonne. */
@media (min-width: 1200px) {
  .hero-acc-carte { margin-left: auto; }
}
.hero-acc-carte-tete {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6);
}

/* L'agenda du hero : semaine RESSERRÉE à 4 jours (lun→jeu, la col ven est retirée
   du markup) — la grille ne porte donc que 4 colonnes-jour + la marge d'heures.
   Moins de colonnes = des tuiles plus LARGES qui respirent et se lisent d'un coup. */
.hero-acc-carte--4j .agenda { grid-template-columns: var(--space-12) repeat(4, 1fr); }
/* 2 bandes d'heures, un peu plus hautes pour loger la tuile à 3 lignes
   (nom · heure · Confirmé) sans la rogner. */
.hero-acc-carte .agenda-col { grid-template-rows: var(--space-8) repeat(2, 7rem); }
.hero-acc-carte .carte-exclu { margin-top: var(--space-6); }
/* Mobile : 2 jours visibles (mar + jeu) — on RESSERRE les bandes (5.25 rem au lieu
   de 7) et le haut du hero pour qu'au moins UNE tuile « Confirmé » (Marc D., posée
   à 10:00 sur mar) PEEKE au-dessus du pli : la promesse-produit vue AVANT le scroll. */
@media (max-width: 767px) {
  .hero-acc-carte--4j .agenda { grid-template-columns: var(--space-12) repeat(2, 1fr); }
  .hero-acc-carte .agenda-col { grid-template-rows: var(--space-6) repeat(2, 5.25rem); }
}
/* La tuile du hero porte 3 lignes : on l'ancre en haut (pas de centrage qui
   rogne le nom) et on resserre. La qualité « — dirigeant » est masquée ici
   (elle ferait une 4e ligne) : le nom + l'heure + « Confirmé » suffisent.
   La tuile déborde de 1 px sur la gouttière (inset 0) pour gagner la chasse
   qu'exige « ✓ Confirmé » sans le coller au bord — la tuile-objet EST la
   métaphore de marque (case pleine du logo), elle doit être irréprochable. */
/* Les tuiles plus LARGES (4 jours) respirent : padding plus généreux, les 3 lignes
   (nom · heure · Confirmé) se lisent sans loucher — la tuile-objet EST la métaphore
   de marque (case pleine du logo), elle doit être irréprochable. */
.hero-acc-carte .tuile {
  inset: 0;
  justify-content: flex-start;
  padding: var(--space-3) var(--space-3);
  gap: var(--space-1);
}
.hero-acc-carte .tuile-qualite { display: none; }
.hero-acc-carte .tuile-nom { line-height: 1.2; font-size: var(--text-base); }
.hero-acc-carte .tuile-heure { line-height: 1.2; }
/* « ✓ Confirmé » : la colonne est plus large (4 jours), on peut afficher l'état au
   registre caption MAJUSCULES plein (charte §8.4) sans le rogner — la coche bleue
   et le mot pèsent enfin, lisibles d'un coup d'œil. */
.hero-acc-carte .tuile-etat {
  white-space: nowrap;
  letter-spacing: var(--tracking-xs);
  font-size: var(--text-xs);
  gap: var(--space-1); min-width: 0;
  margin-top: var(--space-1);
}
.hero-acc-carte .tuile-etat .coche-svg { width: var(--space-4); height: var(--space-4); flex: none; }
/* Sur mobile (bandes resserrées), on revient à un padding compact pour que la
   tuile ne déborde pas de sa bande de 5.25 rem. */
@media (max-width: 767px) {
  .hero-acc-carte .tuile { padding: var(--space-2) var(--space-3); }
  .hero-acc-carte .tuile-nom { font-size: var(--text-sm); }
}

/* Créneaux libres : l'agenda se remplit (un agenda vivant, pas un lit vide).
   Tuile pointillée discrète, heure seule en encre-2 — registre « état libre »
   de la charte §8.3. Jamais de fausse donnée : juste l'heure. */
.hero-acc-carte .tuile-libre {
  inset: 0;
  display: flex; align-items: flex-start; justify-content: flex-start;
  gap: 0; padding: var(--space-3);
  border-radius: var(--rayon-xs);
  border: var(--filet-epaisseur) dashed var(--color-bordure);
  background: transparent;
  box-shadow: none;
  color: var(--color-encre-2);
  font-size: var(--text-sm); line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   02 · BANDEAU DE FAITS — la PREMIÈRE preuve d'autorité, monumentale.
   Posée sur --ivoire entre deux filets pleins (trame d'agenda). Padding vertical
   RESSERRÉ (≈ 56 → 88 px, pas le --space-section plein) : le relevé doit REMPLIR
   sa bande, dense et imposant — pas 4 chiffres posés dans du blanc. Le 1er chiffre
   (×5 à ×7) en chiffre-héros monumental. Un palier narratif, pas un sous-titre.
   ========================================================================== */
.bandeau-faits {
  border-block: var(--filet-epaisseur) solid var(--color-bordure);
  /* Resserré (56 → 88 px) au lieu du --space-section plein (64 → 128 px) : la
     bande colle au relevé, plus de grand vide au-dessus/dessous. */
  padding-block: clamp(3.5rem, 2.4rem + 3vw, 5.5rem);
}
/* La tête, posée comme un en-tête de relevé : caption, filet dessous, à gauche
   sur desktop (rompt la symétrie centrée du reste de la page, façon Linear).
   Marge RESSERRÉE sous le titre (le titre ne flotte plus isolé tout en haut,
   loin du contenu) : le relevé démarre juste sous son en-tête. */
.bandeau-faits-tete {
  color: var(--color-encre-2);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
  border-bottom: var(--filet-epaisseur) solid var(--color-bordure);
}
/* Layout asymétrique « 1 gain + 3 preuves » : colonne héros LARGE à gauche
   (le résultat), filet vertical fort de séparation, bloc 3 preuves à droite.
   Mobile/tablette : on retombe sur l'empilement géré plus bas (media queries). */
.bandeau-faits-inner {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr);
  align-items: stretch;
  gap: var(--space-12);
}
.fait {
  display: flex; flex-direction: column; gap: var(--space-4);
}
/* Le chiffre-fait : sous display-num — 3 chiffres-ancres alignés, posés. */
.fait-chiffre {
  display: block; color: var(--color-encre);
  font-family: var(--font-titres); font-weight: var(--graisse-display-num);
  letter-spacing: var(--tracking-display-num);
  font-size: clamp(2.125rem, 1.3rem + 2.9vw, 3.25rem);
  line-height: 1.05; text-wrap: balance;
}
.fait-corps { line-height: var(--leading-sm); max-width: 17rem; }

/* — La colonne HÉROS (le gain) : pleine hauteur, séparée des preuves par un filet
   vertical FORT (résultat | preuves). Le label « Votre gain » la pose comme un
   relevé ; le chiffre ne wrappe JAMAIS (×5 à ×7 sur une ligne). */
.fait--gain {
  justify-content: center;
  gap: var(--space-3);
  padding-right: var(--space-16);
  border-right: var(--filet-epaisseur) solid var(--color-bordure-forte);
}
.fait-gain-label { display: block; }
/* Le chiffre-héros pèse d'un cran de plus (jusqu'à 6 rem) pour REMPLIR sa colonne
   et dominer le relevé — la borne basse remonte aussi (3.5 rem) pour qu'il garde
   du poids sur tablette/petit desktop. Ne wrappe jamais (×5 à ×7 sur une ligne). */
.fait--gain .fait-chiffre--heros {
  white-space: nowrap;
  font-size: clamp(3.5rem, 1.4rem + 6.4vw, 6rem);
  line-height: 0.98;
}
.fait--gain .fait-corps { max-width: 20rem; }

/* — Le bloc des 3 PREUVES : grille 3 colonnes, chiffres alignés EN HAUT sur une
   ligne commune (align-items:start) — le chiffre est l'élément dominant, c'est
   lui qui doit s'aligner ; les légendes (longueurs variables) tombent dessous,
   bords hauts alignés. Filets verticaux entre preuves. « 1 géant + 3 preuves
   alignées », plus de chiffres en escalier. */
/* minmax(0, 1fr) et non 1fr : `1fr` = `minmax(auto, 1fr)`, donc la piste du chiffre
   nowrap le plus large (« 15 à 30 % ») gonflait au-delà de sa part et les 3 colonnes
   prenaient des largeurs inégales — les deux filets verticaux n'étaient plus
   équidistants. Pistes strictement égales, plus de blowout min-content. */
.bandeau-faits-preuves {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.bandeau-faits-preuves .fait {
  display: grid; grid-template-rows: auto 1fr;
  gap: var(--space-4);
  padding-inline: var(--space-6);
}
.bandeau-faits-preuves .fait:first-child { padding-left: 0; }
.bandeau-faits-preuves .fait:last-child { padding-right: 0; }
.bandeau-faits-preuves .fait + .fait { border-left: var(--filet-epaisseur) solid var(--color-bordure); }
/* Chiffres-preuves alignés en HAUT sur une rangée commune ; chacun tient sur UNE
   ligne (nowrap) à une taille un cran sous le héros, pour que les 3 partagent la
   même hauteur et la même ligne — fini les chiffres en escalier. */
.bandeau-faits-preuves .fait-chiffre {
  align-self: start;
  white-space: nowrap;
  font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.625rem);
}
/* Micro-sources sous le bandeau : registre factuel, jamais de chiffre non sourcé.
   Espace au-dessus RESSERRÉ (le relevé reste dense, la ligne de sources ne flotte
   plus dans du vide en bas de bande). */
.bandeau-faits-source {
  padding-top: var(--space-6); margin-top: var(--space-8);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
  text-transform: none; letter-spacing: 0;
  font-weight: var(--graisse-texte);
}
/* Palier d'empilement remonté à 1199 px (même bande de largeurs que le hero) : de
   1024 à 1199 px, le bloc des 3 preuves n'avait plus la place en 2e colonne et ses
   pistes se déformaient — empilé, il retrouve la pleine largeur. */
@media (max-width: 1199px) {
  .bandeau-faits-tete { margin-bottom: var(--space-8); }
  /* Tablette : le gain passe AU-DESSUS (relevé empilé), séparé des 3 preuves par
     un filet fort HORIZONTAL, puis les 3 preuves en ligne dessous. Gap resserré
     pour garder un relevé compact. */
  .bandeau-faits-inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .fait--gain {
    padding-right: 0; padding-bottom: var(--space-8);
    border-right: 0;
    border-bottom: var(--filet-epaisseur) solid var(--color-bordure-forte);
    align-items: flex-start; text-align: left;
  }
  .fait--gain .fait-chiffre--heros { font-size: clamp(3rem, 1.3rem + 5.6vw, 4.75rem); }
}
@media (max-width: 479px) {
  .bandeau-faits-preuves { grid-template-columns: 1fr; align-items: start; }
  .bandeau-faits-preuves .fait { grid-template-rows: auto auto; padding: var(--space-6) 0; }
  .bandeau-faits-preuves .fait:first-child { padding-top: 0; }
  .bandeau-faits-preuves .fait + .fait {
    border-left: 0;
    border-top: var(--filet-epaisseur) solid var(--color-bordure);
  }
  .fait-corps, .fait--gain .fait-corps { max-width: none; }
}

/* ==========================================================================
   03 · LE PROBLÈME — chiffre-preuve en tête de chaque carte
   ========================================================================== */
.carte-probleme .carte-chiffre {
  display: block; color: var(--color-encre);
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 3.25rem); /* sous display-num : 3 chiffres par carte */
  line-height: 1.0; margin-bottom: var(--space-2);
}
.carte-probleme h3 { color: var(--color-encre); }
.carte-probleme p { color: var(--color-encre-2); }
/* Le vécu du prospect harcelé (verbatim Silvio) : posé en bas de carte, séparé
   par un filet, registre factuel sobre — le fait, pas le cri. */
.carte-probleme-vecu {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
  color: var(--color-encre-2);
}
.carte-probleme { display: flex; flex-direction: column; }
/* Hover lift discret (§7.3). */
@media (hover: hover) {
  .carte-probleme {
    transition: transform var(--duree-ui-retour) var(--ease-sortie),
                box-shadow var(--duree-ui-retour) var(--ease-sortie);
  }
  .carte-probleme:hover {
    transform: translateY(-2px); box-shadow: var(--ombre-moyenne);
    transition-duration: var(--duree-ui); transition-timing-function: var(--ease-ui);
  }
}

/* ==========================================================================
   03bis · LE 11 AOÛT 2026 — l'acte daté (refonte double-promesse, 13/07).
   Un relevé composé comme un document : la date en colonne héros séparée par
   un filet, trois faits en regard, la source en pied. Le registre notarial
   porte la gravité seul — aucun rouge, aucune sirène (charte §6.3).
   ========================================================================== */
.loi-acte {
  max-width: 60rem; margin-inline: auto;
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  padding: var(--space-12);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .loi-acte { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-12); }
  .loi-date {
    border-right: var(--filet-epaisseur) solid var(--color-bordure);
    padding-right: var(--space-12);
  }
}
.loi-date { display: flex; flex-direction: column; gap: var(--space-2); }
/* La date, l'objet de la section : deux lignes display-num en encre pleine,
   serrées comme un tampon dateur. Corps borné pour tenir dans la colonne de
   14 rem (« 11 août » au corps display-num natif déborde sur les faits). */
.loi-date-jour, .loi-date-annee {
  color: var(--color-encre); line-height: 1.05;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.25rem);
}
.loi-faits { margin: 0; display: grid; gap: var(--space-8); }
.loi-fait dt { margin-bottom: var(--space-2); color: var(--color-encre); }
.loi-fait dd { margin: 0; }
@media (max-width: 767px) {
  .loi-acte { padding: var(--space-8); }
  /* Sur mobile la date reste une pile (le tampon dateur), fermée par un filet —
     l'en-tête horizontal mélangeait jour/année/référence au wrap. */
  .loi-date {
    padding-bottom: var(--space-6);
    border-bottom: var(--filet-epaisseur) solid var(--color-bordure);
  }
}
/* Le climax (questions → réponse) referme la section : pas de marge basse
   résiduelle sous le dernier filet. */
.loi-questions { margin-bottom: 0; }

/* ==========================================================================
   04 · LA SOLUTION — feature rows alternées texte ↔ visuel-produit
   ========================================================================== */
.feature-row {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
.feature-row + .feature-row { margin-top: var(--space-24); }
.section-tete + .feature-row { margin-top: 0; }
@media (min-width: 768px) {
  .feature-row { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
  /* L'inverse : visuel à gauche, texte à droite. Lecture préservée par l'ordre DOM. */
  .feature-row--inverse .feature-texte { order: 2; }
  .feature-row--inverse .feature-visuel { order: 1; }
}
/* Le contraste vécu (Silvio) — LE pivot du marché, composé comme un MOMENT, pas
   une légende : sorti du flux par deux filets qui traversent, la douleur posée en
   encre-2 PUIS la bascule en display-2 encre pleine qui tranche vraiment. C'est la
   phrase qui retourne tout le marché — elle respire comme un climax. */
.contraste-frais {
  max-width: 48rem; margin-inline: auto;
  margin-block: var(--space-24);
  text-align: center;
}
.contraste-filet {
  width: var(--space-12); height: 0; margin: 0 auto;
  border: 0; border-top: var(--filet-epaisseur) solid var(--color-bordure-forte);
}
.contraste-bloc {
  margin: 0;
  padding-block: var(--space-12);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4);
}
/* La douleur (le lead harcelé) : posée en encre-2, calme, elle prépare la bascule. */
.contraste-douleur { color: var(--color-encre-2); max-width: 32rem; }
/* La BASCULE : « Le vôtre, personne ne l'a dérangé. » en display-2 encre pleine,
   l'objet sacré de la section — le contraste se lit d'un trait, sans le survoler. */
.contraste-bascule {
  display: block; color: var(--color-encre);
  max-width: 36rem; text-wrap: balance;
}
/* La chute : un fait court (le créneau choisi), encre-2, qui referme le moment. */
.contraste-chute { color: var(--color-encre-2); max-width: 30rem; }
@media (max-width: 767px) {
  .contraste-frais { margin-block: var(--space-16); }
  .contraste-bloc { padding-block: var(--space-8); gap: var(--space-3); }
}

.feature-texte { max-width: var(--largeur-lecture); }
.feature-texte .badge { margin-bottom: var(--space-6); }
.feature-texte h3 { margin-bottom: var(--space-4); }
.feature-texte p { color: var(--color-encre-2); }

.feature-visuel {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-4);
}
.feature-visuel .tuile-demo { max-width: 22rem; width: 100%; padding: var(--space-6); }
.feature-visuel .tuile-nom { font-size: var(--text-base); font-weight: var(--graisse-ui); }
.feature-visuel .tuile-heure { color: var(--color-encre-2); }
.feature-visuel .tuile-etat { margin-top: var(--space-2); }
.feature-visuel .carte-exclu { margin-top: 0; }

/* Rangée 2 — exclusif vs partagé */
.exclu-compare { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 22rem; }
.exclu-mine { box-shadow: var(--ombre-carte); }
.exclu-shared { opacity: 0.7; }
.exclu-barre { text-decoration: line-through; text-decoration-color: var(--color-bordure-forte); }

/* Le tout-en-un : 3 lignes picto + libellé, posées comme des faits */
.tout-en-un {
  display: flex; flex-direction: column; gap: var(--space-4);
  width: 100%; max-width: 22rem;
}
.tout-en-un li {
  display: flex; align-items: center; gap: var(--space-4);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-m);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--ombre-douce);
  font-weight: var(--graisse-ui);
}

/* ==========================================================================
   05 · LA PLATEFORME (« tout au même endroit », refonte 13/07) — rail de cartes
   .conformite-grille--3 (défini en §10). Le bloc « récurrence » (.roi-calcul,
   carte-document) vit désormais en clôture de la section 04. Le PRIX a été
   retiré du site public (retour Silvio 17/06 : « je suis contre mettre le prix »)
   → plus de formule chiffrée (110 € × ×5 = …) ni de calcul de CAC ici. La carte
   notariale ne porte plus qu'un titre + le paragraphe de récurrence prévoyance.
   ========================================================================== */
.roi-calcul {
  max-width: 44rem; margin-inline: auto;
  margin-top: var(--space-16);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  padding: var(--space-12);
}
.roi-calcul-tete { margin-bottom: var(--space-8); }
.roi-calcul-tete .section-numero { margin-bottom: var(--space-3); }
.roi-calcul-tete h3 { color: var(--color-encre); }
.roi-calcul-face {
  margin-top: var(--space-8); color: var(--color-encre-2);
}
.roi-calcul-face strong { color: var(--color-encre); font-weight: var(--graisse-ui); }
@media (max-width: 767px) {
  .roi-calcul { padding: var(--space-8); }
}

/* ==========================================================================
   06 · COMPARATIF — deux colonnes notariales (desktop) → 2 cartes (mobile)
   ========================================================================== */
/* Le bornage/centrage est porté par le BLOC (tableau + sa note), pas par le tableau
   seul : sinon la note reste calée sur le bord du .conteneur et démarre ~108 px à
   gauche du tableau qu'elle annote (à 1440 px : tableau à 240, note à 132). */
.compare-bloc { max-width: 60rem; margin-inline: auto; }
.compare {
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  /* PAS d'overflow:hidden : il confinerait l'en-tête sticky. On arrondit les
     coins via la tête (haut) et la dernière ligne (bas). */
}
.compare-lignes > .compare-ligne:last-child {
  overflow: hidden;
  border-bottom-left-radius: var(--rayon-l);
  border-bottom-right-radius: var(--rayon-l);
}
/* En-tête de colonnes STICKY : il reste sous la nav (72 px) pendant qu'on
   parcourt les 6 lignes — on ne lit jamais une valeur sans savoir sa colonne.
   100 % CSS, zéro JS, zéro motion. */
.compare-tete {
  display: grid; grid-template-columns: 12rem 1fr 1fr;
  border-bottom: var(--filet-epaisseur) solid var(--color-bordure);
  position: sticky; top: var(--nav-h); z-index: 1;
  background: var(--color-surface);
  border-top-left-radius: var(--rayon-l);
  border-top-right-radius: var(--rayon-l);
}
.compare-th {
  padding: var(--space-6); color: var(--color-encre-2);
}
.compare-th--lead { background: var(--color-surface); }
.compare-th--prospee {
  color: var(--color-accent); background: var(--color-surface-accent);
  border-top-right-radius: var(--rayon-l);
}
.compare-lignes { display: block; }
.compare-ligne {
  display: grid; grid-template-columns: 12rem 1fr 1fr;
  align-items: stretch;
}
.compare-ligne + .compare-ligne { border-top: var(--filet-epaisseur) solid var(--color-bordure); }
.compare-cle {
  padding: var(--space-6); color: var(--color-encre);
  background: var(--color-surface-2);
  display: flex; align-items: center;
}
.compare-lead, .compare-prospee {
  margin: 0; padding: var(--space-6);
  font-size: var(--text-sm); line-height: var(--leading-sm);
  display: flex; align-items: center; gap: var(--space-2);
}
.compare-lead { color: var(--color-encre-2); }
.compare-prospee { color: var(--color-encre); background: var(--color-surface-accent); }
.compare-prospee .coche-svg {
  width: var(--space-4); height: var(--space-4); flex: none;
  color: var(--color-accent);
}
.compare-note { margin-top: var(--space-6); max-width: var(--largeur-lecture); }

@media (max-width: 767px) {
  /* Les 2 colonnes deviennent 2 cartes empilées : on masque l'entête, et chaque
     ligne montre la clé + les 2 valeurs étiquetées par data-attr générés en CSS. */
  .compare { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
  .compare-tete { display: none; }
  .compare-lignes { display: flex; flex-direction: column; gap: var(--space-4); }
  .compare-ligne {
    grid-template-columns: 1fr;
    background: var(--color-surface);
    border: var(--filet-epaisseur) solid var(--color-bordure);
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre-douce);
    overflow: hidden;
  }
  .compare-ligne + .compare-ligne { border-top: var(--filet-epaisseur) solid var(--color-bordure); }
  .compare-cle {
    background: transparent; padding: var(--space-4) var(--space-6) 0;
    color: var(--color-encre-2);
  }
  .compare-lead, .compare-prospee { padding: var(--space-3) var(--space-6); background: transparent; }
  .compare-lead::before, .compare-prospee::before {
    content: attr(data-r); flex: none;
    font-weight: var(--graisse-ui); font-size: var(--text-xs);
    letter-spacing: var(--tracking-xs); text-transform: uppercase;
    color: var(--color-encre-2); width: 5.5rem;
  }
  .compare-prospee { border-top: var(--filet-epaisseur) solid var(--color-bordure); padding-block: var(--space-4); }
  /* La coche (présente sur la seule ligne PROSPEE) est tirée dans la gouttière du
     label pour que le TEXTE des deux lignes (LEAD / PROSPEE) parte du même bord
     gauche — sinon la valeur PROSPEE est décalée de (coche + gap) vers la droite. */
  .compare-prospee .coche-svg { margin-left: calc(-1 * (var(--space-4) + var(--space-2))); }
}

/* ==========================================================================
   07a · COMMENT ÇA MARCHE — timeline horizontale (3 colonnes) reliée par un
   filet-fort, registre « trame d'agenda ». Remplit la largeur + accélère la
   lecture du process (vs 3 lignes dans la colonne gauche, demi-page morte).
   ========================================================================== */
@media (min-width: 768px) {
  /* La section porte QUATRE étapes : la grille en compte quatre (elle était restée
     à 3, la 4e — la conclusion de la promesse — tombait orpheline sur une 2e rangée,
     hors du filet de continuité). */
  .etapes--timeline {
    max-width: none;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-12);
    margin-top: var(--space-4);
    position: relative;
  }
  /* Le filet-fort qui relie 1-2-3-4 : du centre de la 1re pastille au centre de la
     4e. Les pastilles (largeur --space-12) sont calées À GAUCHE de leur colonne
     (align-items:flex-start) et il y a un gap --space-12 entre colonnes : le
     centre n'est donc PAS à 1/8 de la largeur. Pour N colonnes, gap g et pastille p :
     left = p/2 ; right = 100%/N − (N−1)·g/N − p/2. */
  .etapes--timeline::before {
    content: ""; position: absolute;
    top: calc(var(--space-3) + var(--space-12) / 2);
    left: calc(var(--space-12) / 2);
    right: calc(100% / 4 - var(--space-12) * 3 / 4 - var(--space-12) / 2);
    height: var(--filet-epaisseur);
    background: var(--color-bordure-forte);
    z-index: 0;
  }
  /* Réserve de lignes sur le titre : sans elle, les titres n'occupent pas le même
     nombre de lignes d'une colonne à l'autre et les corps de texte démarrent à des
     hauteurs différentes (le rang de lecture horizontal est cassé). Même recette que
     .preuve-etape-titre (§10). La réserve suit la largeur de piste : 2 lignes en
     2 colonnes (768-1023), 4 lignes en 4 colonnes serrées (1024-1199), 3 lignes
     au-delà — mesuré sur les 4 titres réels. */
  .etapes--timeline .etape-corps h3 { min-height: calc(var(--leading-h3) * 2em); }
  .etapes--timeline .etape {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--space-6); position: relative; z-index: 1;
    padding-top: var(--space-3);
  }
  /* Pastille numérotée — opaque pour masquer le filet derrière elle. */
  .etapes--timeline .etape-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--space-12); height: var(--space-12); min-width: 0;
    border-radius: 50%;
    background: var(--color-surface);
    border: var(--filet-epaisseur) solid var(--color-bordure-forte);
    color: var(--color-encre);
    font-size: var(--text-h3); line-height: 1;
  }
  .etapes--timeline .etape-corps { gap: var(--space-2); }
}
/* 768 → 1023 px : 4 colonnes serreraient trop le texte. On compose en 2 × 2 et on
   retire le filet (il ne relierait plus une seule rangée). Les 4 colonnes reprennent
   à partir de 1024 px, où la place existe. */
@media (min-width: 768px) and (max-width: 1023px) {
  .etapes--timeline { grid-template-columns: repeat(2, 1fr); }
  .etapes--timeline::before { display: none; }
}
/* 4 colonnes serrées (204 → 236 px) : le titre le plus long prend 4 lignes. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .etapes--timeline .etape-corps h3 { min-height: calc(var(--leading-h3) * 4em); }
}
@media (min-width: 1200px) {
  .etapes--timeline .etape-corps h3 { min-height: calc(var(--leading-h3) * 3em); }
}
/* Mobile : un filet VERTICAL discret relie les numéros 1-2-3 (ils ne flottent
   plus isolés). Posé dans la gouttière, au centre horizontal du numéro
   (min-width --space-8 → centre ≈ --space-4), derrière le chiffre. */
@media (max-width: 767px) {
  .etapes--timeline { position: relative; }
  .etapes--timeline .etape { position: relative; }
  .etapes--timeline .etape:not(:last-child)::before {
    content: ""; position: absolute; z-index: 0;
    left: var(--space-4);
    top: var(--space-8);
    width: var(--filet-epaisseur);
    height: calc(100% - var(--space-8) + var(--space-12));
    background: var(--color-bordure);
  }
  /* Le chiffre (1 glyphe) est centré dans sa boîte min-width --space-8 pour que
     son centre coïncide avec le filet vertical posé à --space-4 (= centre boîte). */
  .etapes--timeline .etape-num { position: relative; z-index: 1; background: var(--color-fond); text-align: center; }
}

/* ==========================================================================
   07 · AMORCE place de marché (fin de « comment ça marche »)
   ========================================================================== */
/* L'amorce = un PONT vers le climax « place de marché » : phrase + CTA-contour
   discret, composée comme une transition (pas un orphelin flottant). Le filet de
   continuité au-dessus la relie à la timeline ; le CTA-contour la pose comme une
   vraie passerelle. Espace resserré dessous via .section--avant-suite. */
.amorce-marche {
  max-width: 48rem;
  margin-inline: auto;
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
  color: var(--color-encre);
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-6);
}
.amorce-marche-txt { max-width: 40rem; }
.amorce-marche-txt strong { font-weight: var(--graisse-ui); }
.amorce-marche-cta { gap: var(--space-2); }
.amorce-fleche {
  width: var(--space-4); height: var(--space-4); flex: none;
  transition: transform var(--duree-ui-retour) var(--ease-sortie);
}
@media (hover: hover) {
  .amorce-marche-cta:hover .amorce-fleche {
    transform: translateX(3px);
    transition-duration: var(--duree-ui); transition-timing-function: var(--ease-ui);
  }
}
.etapes + .amorce-marche { margin-top: var(--space-16); }

/* ==========================================================================
   08 · LA PLACE DE MARCHÉ — panneau « Arrive bientôt »
   ========================================================================== */
/* Directive Leon (15/06) : la place de marché est LE concept du produit, MONTRÉ
   ici pour qu'on comprenne le modèle — mais « Arrive bientôt » (la fonction
   choisir/réserver par zone n'est pas ouverte). Badge « Arrive bientôt », flux de
   RDV exclusifs, bouton « Réserver » DÉSACTIVÉ. La note dit la réalité du jour :
   les RDV se posent seuls dans l'agenda. JAMAIS « déjà » côté client. Registre
   document, jamais un bento multicolore hors-marque. */
.pdm {
  margin-top: var(--space-8);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-moyenne);
  padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-6);
}
.pdm-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: var(--filet-epaisseur) solid var(--color-bordure);
}
.pdm-tete-titre { display: flex; flex-direction: column; gap: var(--space-1); }

/* Badge « Arrive bientôt » du panneau : la fonction choisir/réserver n'est pas
   encore ouverte. Gabarit « En attente » (badge--attente), jamais d'orange. */
.pdm-bientot { align-self: flex-start; }

/* Filtres : la place de marché se parcourt par zone (région/département) et
   métier. Chips sobres ; la zone active surlignée en surface d'accent. */
.pdm-filtres { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pdm-chip {
  display: inline-flex; align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--rayon-xs);
  background: var(--color-surface-2); color: var(--color-encre-2);
  box-shadow: inset 0 0 0 var(--filet-epaisseur) var(--color-bordure);
  font-size: var(--text-xs); font-weight: var(--graisse-ui);
}
.pdm-chip--actif {
  background: var(--color-surface-accent); color: var(--color-encre);
  box-shadow: inset 0 0 0 var(--filet-epaisseur) var(--color-accent);
}

/* Le flux de RDV exclusifs. */
.pdm-flux { display: flex; flex-direction: column; gap: var(--space-3); }
.pdm-carte {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-m);
}
.pdm-carte-corps { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.pdm-carte-corps .badge { align-self: flex-start; margin-top: var(--space-1); }
.pdm-carte-nom { font-weight: var(--graisse-ui); }
/* align-items:baseline et non center : .pdm-action empile le bouton ET sa mention,
   donc un centrage sur la hauteur TOTALE faisait glisser le prix ~10 px sous le
   centre du bouton. La baseline le cale sur la ligne de texte du bouton, sans
   ajouter de hauteur (le prix fait face au bouton, pas à bouton+mention). */
.pdm-carte-pied { display: flex; align-items: baseline; gap: var(--space-4); }
.pdm-carte-prix { font-weight: var(--graisse-ui); }
.pdm-action { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
/* Le bouton « Réserver » est PRÉSENT mais inerte (l'achat n'est pas ouvert) :
   <button disabled> donne déjà l'état grisé ; pointer-events coupe le survol. */
.pdm-reserver { pointer-events: none; }
.pdm-auto-tag { color: var(--color-encre-2); white-space: nowrap; }

/* Ligne « à venir » : un RDV arrive dans le flux — pas d'achat, pas de faux
   live ni de compte à rebours (§11.9). Dashed, en attente. */
.pdm-carte--avenir {
  justify-content: flex-start; gap: var(--space-1);
  flex-direction: column; align-items: flex-start;
  background: var(--color-surface-2);
  border-style: dashed; border-color: var(--color-bordure-forte);
}

.pdm-note { max-width: 44rem; color: var(--color-encre-2); }
.pdm-note strong { color: var(--color-encre); font-weight: var(--graisse-ui); }

/* Mobile : la carte empile prix + action sous le corps, pleine largeur. */
@media (max-width: 600px) {
  .pdm-carte { align-items: stretch; }
  /* Très petits écrans (≤ ~340 px) : le bloc d'action « Placé automatiquement »
     (nowrap, ~178 px) + le label ne tiennent pas sur une ligne et forçaient la
     largeur minimale du document (léger débordement H). On autorise le retour à
     la ligne du pied → 320 px redevient propre, sticky bar incluse. */
  .pdm-carte-pied { width: 100%; justify-content: space-between; flex-wrap: wrap; row-gap: var(--space-2); }
}

/* Feuille de route honnête (3 jalons) — montre que c'est PENSÉ jusqu'au bout,
   registre factuel alpha. Filet-fort reliant les pastilles, comme la timeline. */
.roadmap {
  margin-top: var(--space-16);
  display: grid; grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 56rem; margin-inline: auto;
}
@media (min-width: 640px) {
  .roadmap { grid-template-columns: repeat(3, 1fr); position: relative; gap: var(--space-8); }
  /* Filet du centre de la 1re pastille au centre de la 3e. Pastilles (largeur
     --space-6) calées à gauche (align-items:flex-start), gap --space-8 : centre
     1re = moitié de pastille ; bord droit = 100%/3 − (2·gap/3) − (moitié pastille). */
  .roadmap::before {
    content: ""; position: absolute;
    top: calc(var(--space-6) / 2);
    left: calc(var(--space-6) / 2);
    right: calc(100% / 3 - var(--space-8) * 2 / 3 - var(--space-6) / 2);
    height: var(--filet-epaisseur);
    background: var(--color-bordure);
    z-index: 0;
  }
  /* Les 3 titres n'ont pas le même nombre de lignes (2 · 2 · 1) : sans cette règle
     l'état du 3e jalon remontait d'une interligne et cassait la ligne de base
     commune. Le jalon étant étiré à la hauteur de la rangée (grid), l'état est
     poussé en pied de jalon — aligné quel que soit le nombre de lignes du titre. */
  .roadmap-etat { margin-top: auto; }
}
/* Mobile : le filet de continuité devient VERTICAL — chaque jalon (sauf le
   dernier) tire un filet du centre de SA pastille vers la pastille suivante
   (hauteur du jalon + l'écart de grille). Les jalons ne flottent plus isolés ;
   la métaphore de continuité tient sur le device principal de la cible. */
@media (max-width: 639px) {
  .roadmap-jalon:not(:last-child)::before {
    content: ""; position: absolute; z-index: 0;
    left: calc(var(--space-6) / 2);
    top: calc(var(--space-6) / 2);
    width: var(--filet-epaisseur);
    height: calc(100% - var(--space-6) / 2 + var(--space-6));
    background: var(--color-bordure);
  }
  /* Le contenu est INDENTÉ à droite du rail (comme .etapes--timeline, la référence
     qui marche) : titre et état démarraient à 0, donc le filet vertical posé au
     centre de la pastille (12 px) était tracé PAR-DESSUS les lettres. */
  .roadmap-titre, .roadmap-etat { padding-left: calc(var(--space-6) + var(--space-3)); }
  /* La pastille repasse au-dessus du rail : il ne la traverse plus. */
  .roadmap-pastille { position: relative; z-index: 2; }
}
.roadmap-jalon {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); position: relative; z-index: 1;
}
.roadmap-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-6); height: var(--space-6); flex: none;
  border-radius: 50%;
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure-forte);
}
.roadmap-pastille .coche-svg { width: var(--space-4); height: var(--space-4); color: var(--color-accent); }
.roadmap-jalon--actif .roadmap-pastille {
  background: var(--color-succes-surface);
  border-color: var(--color-accent);
}
.roadmap-titre { color: var(--color-encre); font-weight: var(--graisse-ui); margin-top: var(--space-1); }
.roadmap-etat { display: block; }
.roadmap-jalon--actif .roadmap-etat { color: var(--color-accent); }

.vision-fil {
  max-width: 48rem; margin-inline: auto;
  margin-top: var(--space-12);
  color: var(--color-encre);
  text-align: center;
}
.vision-fil strong { font-weight: var(--graisse-ui); }

/* ==========================================================================
   09 · POUR QUI — 2 cartes segment
   ========================================================================== */
.pour-qui-grille {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6);
}
@media (min-width: 768px) { .pour-qui-grille { grid-template-columns: 1fr 1fr; } }
.carte-segment {
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  padding: var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.carte-segment .section-numero { color: var(--color-encre-2); }
.carte-segment h3 { color: var(--color-encre); }
.carte-segment > p { color: var(--color-encre-2); }
.carte-segment .liste-coches { margin-top: var(--space-2); gap: var(--space-3); }
.carte-segment .liste-coches li { font-size: var(--text-sm); }
@media (hover: hover) {
  .carte-segment {
    transition: transform var(--duree-ui-retour) var(--ease-sortie),
                box-shadow var(--duree-ui-retour) var(--ease-sortie);
  }
  .carte-segment:hover {
    transform: translateY(-2px); box-shadow: var(--ombre-moyenne);
    transition-duration: var(--duree-ui); transition-timing-function: var(--ease-ui);
  }
}
.pour-qui-marche { margin-top: var(--space-12); text-align: center; }

/* ==========================================================================
   10 · CONFORMITÉ — document de preuve (parcours d'un RDV, ORIAS) + grille de 6
   ========================================================================== */
/* Le DOCUMENT de preuve (charte §6.3) : le parcours travaillé en amont → accord →
   cabinet présenté → livré, registre notarial. Le différenciateur (ORIAS + travail
   humain en France, source jamais nommée) montré comme un FAIT, pas dilué dans la
   grille. Carte blanche sur la section ivoire, filet reliant les 4 jalons. */
.preuve-process {
  max-width: 60rem; margin-inline: auto;
  margin-bottom: var(--space-16);
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  padding: var(--space-12);
}
.preuve-process-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.preuve-process-tete .section-numero { margin-bottom: 0; }
.preuve-etapes {
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
}
@media (min-width: 768px) {
  .preuve-etapes { grid-template-columns: repeat(4, 1fr); position: relative; gap: var(--space-6); }
  /* Titre des jalons : on réserve 2 lignes pour que les 4 méta-libellés partagent
     la même ligne — « Rappelé par un humain, en France » wrappe sur 2 lignes là où
     les 3 autres tiennent sur 1, sinon sa méta tombe ~20 px plus bas. */
  .preuve-etape-titre { min-height: calc(var(--leading-sm) * 2em); }
  /* Le filet reliant les 4 jalons (registre trame d'agenda). Pastilles (largeur
     --space-6) calées à gauche, gap --space-6 : du centre de la 1re au centre de
     la 4e — centre 1re = moitié pastille ; droite = 100%/4 − 3·gap/4 − moitié pastille. */
  .preuve-etapes::before {
    content: ""; position: absolute;
    top: calc(var(--space-6) / 2);
    left: calc(var(--space-6) / 2);
    right: calc(100% / 4 - var(--space-6) * 3 / 4 - var(--space-6) / 2);
    height: var(--filet-epaisseur); background: var(--color-bordure);
    z-index: 0;
  }
}
/* Mobile : filet VERTICAL reliant les 4 jalons (gap --space-8) — même principe
   que la roadmap, la continuité du parcours d'un RDV tient sur mobile. */
@media (max-width: 767px) {
  .preuve-etape:not(:last-child)::before {
    content: ""; position: absolute; z-index: 0;
    left: calc(var(--space-6) / 2);
    top: calc(var(--space-6) / 2);
    width: var(--filet-epaisseur);
    height: calc(100% - var(--space-6) / 2 + var(--space-8));
    background: var(--color-bordure);
  }
  /* Même correction que la roadmap : le contenu s'indente à droite du rail, sinon
     le filet barre les titres et les états calés à 0. */
  .preuve-etape-titre, .preuve-etape-meta { padding-left: calc(var(--space-6) + var(--space-3)); }
  .preuve-pastille { position: relative; z-index: 2; }
}
.preuve-etape {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); position: relative; z-index: 1;
}
.preuve-pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-6); height: var(--space-6); flex: none;
  border-radius: 50%;
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure-forte);
}
.preuve-pastille .coche-svg { width: var(--space-4); height: var(--space-4); color: var(--color-accent); }
.preuve-pastille--final {
  background: var(--color-succes-surface); border-color: var(--color-accent);
}
.preuve-etape-titre { color: var(--color-encre); font-weight: var(--graisse-ui); margin-top: var(--space-1); }
.preuve-etape-meta { display: block; }
.preuve-etape-meta--accent { color: var(--color-accent); }
.preuve-process-note {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
  max-width: 48rem;
}

/* L'HUMAIN incarné (§6.4) : le travail humain en France, matérialisé en bloc-attestation.
   Médaillon à gauche (placeholder du portrait réel à venir), attestation à droite.
   Carte blanche sur la section ivoire, registre notarial. */
.humain {
  max-width: 60rem; margin-inline: auto;
  margin-bottom: var(--space-16);
  display: grid; grid-template-columns: 1fr; gap: var(--space-8);
  align-items: center;
  background: var(--color-surface);
  border: var(--filet-epaisseur) solid var(--color-bordure);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-douce);
  padding: var(--space-12);
}
@media (min-width: 640px) { .humain { grid-template-columns: auto 1fr; gap: var(--space-12); } }
/* Le médaillon : surface d'accent, picto combiné — l'emplacement EXACT de la
   future photo réelle (ronde, lumière naturelle, regard caméra, §6.4). */
.humain-portrait {
  width: var(--space-24); height: var(--space-24); flex: none;
  border-radius: 50%;
  background: var(--color-surface-accent);
  display: flex; align-items: center; justify-content: center;
  justify-self: center;
}
.humain-portrait .picto { width: var(--space-12); height: var(--space-12); color: var(--color-accent); }
.humain-corps { display: flex; flex-direction: column; gap: var(--space-4); }
.humain-corps .badge { align-self: flex-start; }
.humain-corps h3 { color: var(--color-encre); }
.humain-corps p { color: var(--color-encre-2); }
/* La signature : posée sous un filet, comme le bas d'un acte. */
.humain-signature {
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}

.conformite-grille {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12) var(--space-16);
  max-width: none;
  /* Même rythme vertical que .humain / .preuve-process : sinon la carte
     .preuve-process qui suit vient buter (et chevaucher) la dernière rangée. */
  margin-bottom: var(--space-16);
}
@media (min-width: 768px) { .conformite-grille { grid-template-columns: 1fr 1fr; } }
/* Variante 3 colonnes (section 05 « la plateforme » : recevoir → travailler →
   prouver) — APRÈS la règle de base pour gagner la cascade à spécificité égale. */
@media (min-width: 768px) { .conformite-grille--3 { grid-template-columns: repeat(3, 1fr); } }
.conformite-grille .reassurance-corps p { color: var(--color-encre-2); }
/* La carte légale (.preuve-process qui suit la grille) FERME la section : le
   témoignage placé après est masqué tant qu'il n'est pas réel, donc sa marge
   basse ne fait que s'ajouter au padding-block de section — un grand vide mort
   sous la carte. On la retire : le tail retombe sur le rythme inter-sections
   standard. Le gap revient de lui-même si .temoignage--reel apparaît (il porte
   déjà son propre margin-top). */
.conformite-grille + .preuve-process { margin-bottom: 0; }

/* ==========================================================================
   11 · FAQ — 2 colonnes (tête sticky à gauche · accordéon à droite),
   remplit la moitié droite (vide auparavant) façon Stripe/Linear.
   ========================================================================== */
.faq-grille {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1024px) {
  .faq-grille { grid-template-columns: 22rem 1fr; gap: var(--space-24); }
  .faq-aside { position: sticky; top: calc(var(--nav-h) + var(--space-12)); }
}
.faq-aside .t-h2 { margin-top: var(--space-4); }
.faq-intro { color: var(--color-encre-2); margin-top: var(--space-6); max-width: 28rem; }
.faq-contact { display: inline-block; margin-top: var(--space-4); }

/* Rappel persistant dans l'aside sticky : la colonne gauche ne reste jamais une
   demi-page morte (le défaut desktop restant). Prix + clause canonique, posés
   comme un fait — registre notarial, encre, sans criard. Caché sous 1024 px
   (le rappel vit alors dans la barre sticky mobile). */
.faq-rappel {
  display: none;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
@media (min-width: 1024px) {
  .faq-rappel { display: flex; flex-direction: column; gap: var(--space-2); }
}
.faq-rappel-prix { color: var(--color-encre); line-height: 1; }
.faq-rappel-leg { color: var(--color-encre); }
.faq-rappel-clause { margin-top: var(--space-1); }
/* Mini-récap des 3 garanties : étoffe l'aside (équilibre de hauteur face à
   l'accordéon) et réaffirme la promesse — registre relevé, coches bleues sobres. */
.faq-rappel-garanties {
  display: flex; flex-direction: column; gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
.faq-rappel-garanties li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm); line-height: var(--leading-sm);
  color: var(--color-encre);
}
.faq-rappel-garanties .coche-svg {
  width: var(--space-4); height: var(--space-4); flex: none;
  color: var(--color-accent); margin-top: calc(var(--space-1) / 2);
}

.faq-acc {
  max-width: var(--largeur-lecture);
  display: flex; flex-direction: column;
}
/* La borne de lecture (40 rem) est levée dès que la section n'a plus qu'une seule
   colonne large : entre 768 et 1023 px l'accordéon restait bloqué à 640 px, aligné à
   gauche, et ses filets pleine largeur s'arrêtaient au milieu de la section (lu comme
   un bug de rendu). La mesure de lecture reste portée par .faq-q > p (38 rem). */
@media (min-width: 768px) { .faq-acc { max-width: none; } }
.faq-q {
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
}
.faq-q:last-child { border-bottom: var(--filet-epaisseur) solid var(--color-bordure); }
.faq-q > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-6);
  min-height: var(--bouton-h); /* cible tactile ≥ 44 px */
}
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q summary .t-h3 { color: var(--color-encre); }
@media (hover: hover) {
  .faq-q > summary { transition: color var(--duree-ui) var(--ease-ui); }
  .faq-q > summary:hover .t-h3 { color: var(--color-accent); }
}
/* Signe +/− : deux traits, le vertical disparaît à l'ouverture (pas de rotation). */
.faq-signe {
  position: relative; flex: none;
  width: var(--space-6); height: var(--space-6);
}
.faq-signe::before, .faq-signe::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: var(--space-4); height: var(--filet-epaisseur);
  background: var(--color-encre-2);
  transform: translate(-50%, -50%);
  transition: opacity var(--duree-ui) var(--ease-ui);
}
.faq-signe::after { width: var(--filet-epaisseur); height: var(--space-4); }
.faq-q[open] .faq-signe::after { opacity: 0; }
.faq-q[open] .faq-signe::before { background: var(--color-accent); }
.faq-q > p {
  color: var(--color-encre-2);
  padding-bottom: var(--space-6);
  max-width: 38rem;
}
/* Ouverture : le contenu arrive en fondu + léger translate (jamais de bounce). */
@media (prefers-reduced-motion: no-preference) {
  .js .faq-q[open] > p { animation: ks-pose 220ms var(--ease-ui) both; }
}

/* ==========================================================================
   12 · SECTION NUIT / CTA FINAL — LE climax. Composé comme un acte : la clause
   datée occupe la pleine largeur de lecture (filets --papier-nuit 30 % qui
   TRAVERSENT, §8.5) ; dessous, un corps 2 colonnes (la scène de la livraison qui se
   rejoue 1× · le titre d'appel + CTA + double réassurance) densifie le bloc et
   supprime le noir vide latéral. Clause LISIBLE ET imposante à l'arrivée.
   ========================================================================== */
.garantie-inner { max-width: 56rem; margin-inline: auto; }

/* L'acte : la clause en pleine largeur, filets qui traversent toute la colonne. */
.garantie-acte { text-align: center; }
/* Sur-titre en papier-nuit 70 % (PAS l'accent) : composants.css force
   `.garantie-inner .t-caption` en bleu — on neutralise ici pour réserver le bleu
   au SEUL CTA + à la coche de la livraison (charte §3.1/§11.2 : un accent par écran).
   Idem pour les captions de la mini-trame d'agenda (entête, jour). */
.garantie-inner .garantie-sur,
.garantie-inner .garantie-trame-tete .t-caption { color: var(--color-encre-nuit-2); }
.garantie-nuit .clause-filet {
  margin-block: var(--space-8);
  border: 0; border-top: var(--filet-epaisseur) solid;
  border-color: color-mix(in srgb, var(--papier-nuit) 30%, transparent);
}
.garantie-acte .clause { max-width: none; text-wrap: balance; }
/* Sur très petit écran, on borne la clause display-l pour qu'aucun mot (ni le
   guillemet fermant «&nbsp;» ») ne touche le bord — la clause reste l'objet sacré,
   irréprochable jusqu'au pixel. */
@media (max-width: 479px) {
  /* Borne basse abaissée : à 360 px, la clause de garantie (sur plusieurs lignes)
     ne doit JAMAIS dépasser la colonne (sinon scroll latéral parasite). */
  .garantie-acte .clause { font-size: clamp(1.5rem, 0.85rem + 3.4vw, 2.125rem); }
}

/* Le corps : la mini-trame de la livraison ↔ l'appel. 1 colonne mobile, 2 desktop.
   Resserré (clause→corps : --space-12, pas --space-16) et ANCRÉ EN HAUT
   (align-items:start) : la trame d'agenda aligne son sommet sur le titre d'appel,
   supprimant le grand vide noir latéral. Un acte dense, qui se lit en un écran. */
.garantie-corps {
  margin-top: var(--space-12);
  display: grid; grid-template-columns: 1fr; gap: var(--space-12);
  align-items: start;
}
@media (min-width: 768px) {
  .garantie-corps { grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: stretch; }
}
.garantie-scene { display: flex; justify-content: center; }
@media (min-width: 768px) { .garantie-scene { justify-content: flex-start; } }

/* La mini-trame d'agenda nuit : un panneau sobre (filet --papier-nuit, fond très
   légèrement levé) qui DONNE DU CORPS à la scène — entête, deux formats (rendez-vous
   posé + contact livré), note. La tuile n'est plus une vignette perdue : c'est un
   moment de pack concret. Halo bleu-eau TRÈS discret sous la tuile livrée. */
.garantie-trame {
  width: 100%; max-width: 25rem;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--rayon-l);
  background: color-mix(in srgb, var(--papier-nuit) 4%, transparent);
  box-shadow: inset 0 0 0 var(--filet-epaisseur) color-mix(in srgb, var(--papier-nuit) 14%, transparent);
}
@media (min-width: 768px) { .garantie-trame { max-width: none; } }
.garantie-trame-tete {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: var(--filet-epaisseur) solid color-mix(in srgb, var(--papier-nuit) 14%, transparent);
}
.garantie-trame-jour { color: var(--color-encre-nuit); }
/* La tuile livrée, posée dans la lumière sur le sombre — la case pleine du
   logo vue de près, rejouée une fois (la coche se trace). Ombre portée encre
   pour la détacher du noir : une vraie tuile, pas un aplat.
   ⚠️ Les tuiles sont des SURFACES CLAIRES posées sur la section nuit : leur texte
   doit repasser en encre FONCÉE (sinon il hérite du papier-nuit clair → illisible
   sur la tuile claire). C'était le « texte délavé » de la tuile livrée. */
.garantie-tuile { width: 100%; max-width: none; box-shadow: var(--ombre-carte); }
.garantie-tuile .tuile-nom { color: var(--color-encre); }
.garantie-tuile .tuile-heure { color: var(--color-encre-2); }
/* Le rendez-vous POSÉ : sobre, fond ivoire neutre (pas l'accent), il contextualise
   sans voler la vedette au contact livré — le pack vit, les deux formats se comptent. */
.garantie-tuile--tenu { background: var(--color-surface-2); box-shadow: var(--ombre-douce); }
.garantie-tuile--tenu .tuile-fond { display: none; }
.garantie-tuile--tenu .tuile-etat { color: var(--color-encre-2); }
.garantie-tuile--tenu .tuile-etat .coche-svg { color: var(--color-encre-2); }
/* Le contact LIVRÉ : c'est LUI qui porte l'accent (fond bleu-eau, coche bleue)
   — halo bleu-eau diffus dessous pour signer le climax sans clinquant. */
.garantie-tuile--livre {
  box-shadow: var(--ombre-carte),
              0 0 0 var(--filet-epaisseur) color-mix(in srgb, var(--bleu-eau) 60%, transparent),
              0 8px 32px color-mix(in srgb, var(--bleu-confirme) 28%, transparent);
}
.garantie-trame-note {
  color: var(--color-encre-nuit-2);
  padding-top: var(--space-2);
}

.garantie-appel {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
@media (min-width: 768px) {
  /* Sur desktop la colonne d'appel est centrée verticalement face à la trame,
     et alignée à gauche — l'appel « répond » à la trame, à même hauteur. */
  .garantie-appel { text-align: left; align-items: flex-start; justify-content: center; }
}
.garantie-titre {
  color: var(--color-encre-nuit);
  max-width: 26rem; margin-inline: auto;
}
@media (min-width: 768px) { .garantie-titre { margin-inline: 0; } }
.garantie-appel .btn { margin-top: var(--space-8); }
.garantie-reassurance {
  margin-top: var(--space-6);
  color: var(--color-encre-nuit-2);
}
.garantie-reassurance--2 { margin-top: var(--space-2); }

/* ==========================================================================
   12b · BARRE STICKY (mobile) — prix + garantie + CTA toujours sous les yeux
   du courtier pressé (charte §8.5, doc §C). Ultra-sobre : surface blanche,
   filet, encre + 1 lien bleu (le CTA). Apparaît après un peu de scroll, se
   retire sur la section nuit finale (où le CTA est déjà là). Desktop : jamais
   (le rappel vit dans l'aside FAQ + le hero affiche déjà le prix).
   ========================================================================== */
.barre-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--color-surface);
  border-top: var(--filet-epaisseur) solid var(--color-bordure);
  box-shadow: 0 -2px 16px rgba(16, 22, 18, 0.06);
  padding-block: var(--space-3);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform var(--duree-reveal) var(--ease-pose);
}
.barre-sticky.est-visible { transform: translateY(0); }
.barre-sticky-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.barre-sticky-txt { color: var(--color-encre-2); margin: 0; min-width: 0; }
.barre-sticky-txt strong { color: var(--color-encre); font-weight: var(--graisse-ui); }
.barre-sticky .btn { flex: none; }
/* Sous 480 px, le CTA prend ~200 px des 288-448 px disponibles : la baseline n'a
   plus que 79 px à 320 px et se composait sur 5 lignes (barre de 160 px de haut).
   On passe la barre sur DEUX rangs — la phrase en pleine largeur, le CTA dessous —
   plutôt que d'écraser le texte contre le bouton. */
@media (max-width: 479px) {
  .barre-sticky-inner { flex-wrap: wrap; gap: var(--space-3); }
  .barre-sticky-txt { flex: 1 1 100%; }
  .barre-sticky .btn { flex: 1 1 100%; }
}
/* La barre sticky est une aide MOBILE : au-delà de 768 px, le prix vit déjà dans
   le hero, la réassurance finale et l'aside FAQ — pas de bandeau bas d'écran. */
@media (min-width: 768px) { .barre-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .barre-sticky { transition: none; }
}

/* ==========================================================================
   MOTION — hover-lift discret sur les cartes-objets (tout-en-un)
   + cascade reveal étendue (compare 6 lignes, conformité 6 faits) pour que la
   page reste vivante après le hero (charte §7.3 : listes signifiantes).
   ========================================================================== */
@media (hover: hover) {
  .tout-en-un li {
    transition: transform var(--duree-ui-retour) var(--ease-sortie),
                box-shadow var(--duree-ui-retour) var(--ease-sortie);
  }
  .tout-en-un li:hover {
    transform: translateY(-2px); box-shadow: var(--ombre-moyenne);
    transition-duration: var(--duree-ui); transition-timing-function: var(--ease-ui);
  }
}
/* Cascade au-delà de 3 items (compare 6 lignes, conformité 6 faits) : non
   prévue par marketing.js (qui ne cale que jusqu'au 3e item). Pas de bounce,
   une seule fois, pas de 60 ms — le face-à-face / la grille se « construit ». */
@media (prefers-reduced-motion: no-preference) {
  /* Comparatif : les 6 lignes se posent QUASI-ensemble (délais courts) pour ne
     jamais laisser un grand pavé blanc « inachevé » sous 3 lignes le temps du
     reveal — la finition pro se joue sur ces micro-états (40 ms entre lignes). */
  .js .compare-lignes.cascade.est-visible > :nth-child(4) { transition-delay: 80ms; }
  .js .compare-lignes.cascade.est-visible > :nth-child(5) { transition-delay: 120ms; }
  .js .compare-lignes.cascade.est-visible > :nth-child(6) { transition-delay: 160ms; }
  .js .conformite-grille.cascade.est-visible > :nth-child(4) { transition-delay: 180ms; }
  .js .conformite-grille.cascade.est-visible > :nth-child(5) { transition-delay: 240ms; }
  .js .conformite-grille.cascade.est-visible > :nth-child(6) { transition-delay: 300ms; }
  /* Bandeau : 2 enfants directs (gain · bloc preuves). Le gain pose d'abord, le
     bloc preuves suit (80 ms via la cascade de base) — un relevé qui se construit
     « résultat puis preuves », sans reveal en escalier sur 4 colonnes. */
}

/* ==========================================================================
   Scène signature autonome (rangée 1 de la solution + carte de zone) :
   composants.css gère .scene-mini.joue ; ici on cale l'état de repos correct.
   On laisse le moteur de marketing.js poser .joue via [data-scene].
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE FIN — petits réglages 360 → 1600
   ========================================================================== */
@media (max-width: 767px) {
  /* Top resserré (64 px au lieu de 96) : tout le hero remonte, la carte agenda et
     sa 1re tuile confirmée s'approchent du premier écran. */
  .hero-acc { padding-block: var(--space-16) var(--space-16); }
  .hero-acc-carte { padding: var(--space-4); }
  .carte-segment { padding: var(--space-8); }
}
@media (min-width: 1600px) {
  /* À très grande largeur, on garde le conteneur centré (déjà 1240 px max). */
  .hero-acc-carte { max-width: 34rem; }
}

/* Note migration sous « la plateforme » (Leon 20/07) : l'import de l'existant,
   une ligne sobre et centrée — même registre que .compare-note. */
.migration-note { margin: var(--space-6) auto 0; max-width: var(--largeur-lecture); text-align: center; }