/*
 * Feuille de style UNIQUE du site vitrine SyndicRadar (site/).
 *
 * Reprend telle quelle la charte de l'app (src/styles/global.css) : memes
 * jetons de couleur, meme police (Poppins, seule famille), memes rayons et
 * ombres. Le site doit se lire comme la meme marque que l'app, en plus
 * editorial (plus de respiration, des sections qui racontent, un hero).
 *
 * Contraintes du plan SEO fondateur : un seul fichier CSS partage, pas de
 * framework, police en font-display: swap, une seule famille (Poppins).
 *
 * Contrastes WCAG mesures, identiques a l'app (voir global.css) :
 *   Bleu nuit #0b2018 sur blanc            : 17,39:1
 *   Bleu nuit #0b2018 sur fond page        : 16,06:1
 *   Blanc sur vert #15803d (boutons)       :  5,02:1
 *   Gris doux #556377 sur fond page        :  5,64:1
 *   Blanc sur bleu nuit (bande/hero)       : 17,2:1
 *   Vert clair #22c55e sur bleu nuit       :  7,6:1 (jamais sur blanc)
 */

/* ===== Polices : Poppins auto-hebergee, aucune requete externe =====
 *
 * Le sous-ensemble "latin" seul suffit : verifie glyphe par glyphe (script
 * fontTools, cmap de poppins-latin-400-normal.woff2) que TOUS les caracteres
 * du francais y sont presents (accents, œ, «guillemets», ’apostrophe
 * typographique, tiret demi-cadratin/cadratin, symbole €). Le sous-ensemble
 * "latin-ext" (langues d'Europe centrale) ne contient AUCUN de ces glyphes et
 * n'est donc jamais utilise pour du contenu francais : on ne le charge pas,
 * ca economise la moitie du poids des polices sans rien perdre a l'affichage.
 * L'app (main.tsx), elle, importe les deux par prudence ; ce choix plus
 * etroit est propre au site vitrine, verifie pour son contenu 100% francais.
 */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-latin-700.woff2") format("woff2");
}

/* ===== Jetons de design (identiques a l'app) ===== */

:root {
  --couleur-fond: #f6f8fa;
  --couleur-carte: #ffffff;
  --couleur-bordure: #e2e8f0;

  --couleur-marque-fond: #0b2018;
  --couleur-marque-texte: #ffffff;
  --couleur-marque-doux: #94a3b8;

  --couleur-texte: #0b2018;
  --couleur-primaire: #0b2018;
  --couleur-primaire-contraste: #ffffff;
  --couleur-texte-doux: #556377;

  --couleur-action: #15803d;
  --couleur-action-hover: #0f6b31;
  --couleur-action-contraste: #ffffff;

  --couleur-accent-vert: #22c55e;
  --couleur-fond-doux: #dcfce7;

  /* Bande "confiance" (V4) : seul aplat colore marque du coeur clair, isole
     la preuve comme un moment a part. Couples verifies (voir table de
     contrastes du brief V4) : navy #0b2018 sur #f0fdf4 = 16,46:1, gris doux
     #556377 sur #f0fdf4 = 5,84:1, etiquette verte #15803d sur #f0fdf4 =
     4,80:1. */
  --vert-brume: #f0fdf4;
  --vert-brume-bordure: #bbf7d0;

  /* ===== Monde sombre (accueil V3 « Radar nocturne ») =====
     Le cadre de marque (nav, pied) et l'accueil passent en bleu nuit profond ;
     les pages de lecture restent claires. Tous les couples ci-dessous sont
     mesures WCAG (voir en-tete du fichier) : aucun n'est sous 4,5:1 pour du
     texte normal, ni sous 3:1 pour du grand texte (H1). */
  --nuit-fond: #081711;
  --nuit-fond-bas: #0b2018;
  --nuit-carte: #0f281e;
  --nuit-pied: #06120d;
  --nuit-bordure: rgba(255, 255, 255, 0.06);
  --nuit-bordure-forte: rgba(255, 255, 255, 0.12);
  --nuit-bordure-verte: rgba(34, 197, 94, 0.4);
  --nuit-texte: #b7c2d0; /* corps sur sombre : 9,3 a 10,3:1 */
  --nuit-meta: #8494a7; /* meta sur sombre : 5,4 a 6,3:1 */
  --vert-signal: #22c55e; /* phrase choc du H1 (grand texte) et halos */
  --vert-clair: #4ade80; /* petits textes verts sur sombre : 9,7 a 10,6:1 */
  --nuit-tuile-verte: rgba(34, 197, 94, 0.1);
  --nuit-marqueur: rgba(34, 197, 94, 0.35);

  /* Rappel/urgent : memes jetons que l'app (badge de contrat proche de sa
     fenetre de denonciation), repris ici pour l'aperçu du hero. */
  --couleur-rappel: #92400e;
  --couleur-rappel-fond: #fef3c7;

  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 0.75rem;
  --espace-l: 1rem;
  --espace-xl: 1.5rem;
  --espace-xxl: 2.5rem;
  --espace-xxxl: 4rem;
  /* Rythme vertical du coeur clair (V4) : 64 px mobile, 104 px desktop,
     nettement plus aere que l'ancien padding de section (40 px). */
  --espace-section: clamp(4rem, 8vw, 6.5rem);

  --rayon: 0.875rem;
  --rayon-grand: 1.375rem;
  --rayon-pastille: 999px;

  --cible-tap: 2.75rem;

  /* Ombres a deux niveaux (contact rapproche, puis diffusion large), derivees
     de --couleur-texte #0b2018 : une surface posee se distingue enfin du fond,
     la ou l'ancienne ombre a un seul niveau etait quasi invisible. Une ombre ne
     recouvre aucune glyphe : aucun ratio de contraste n'est modifie. */
  --ombre-carte: 0 1px 2px rgba(11, 32, 24, 0.06), 0 8px 20px -12px rgba(11, 32, 24, 0.18);
  --ombre-elevee: 0 2px 4px rgba(11, 32, 24, 0.07), 0 18px 36px -16px rgba(11, 32, 24, 0.28);
  --ombre-action: 0 4px 14px rgba(21, 128, 61, 0.3);

  --largeur-contenu: 1120px;
  --largeur-lecture: 42rem;

  color-scheme: light;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html,
body {
  margin: 0;
  padding: 0;
}

/* Pied de page toujours en bas du viewport, meme sur une page courte
   (404, mentions legales courtes) : colonne flex, le contenu principal
   pousse le pied de page vers le bas au lieu de laisser un vide en dessous. */
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

body > main {
  flex: 1 0 auto;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--couleur-action);
}

a:hover {
  color: var(--couleur-action-hover);
}

/* Anneau de focus a deux tons : verifie au clavier, un anneau bleu nuit
   seul (l'ancien reglage) devient invisible sur les fonds bleu nuit du
   site (en-tete, hero, pied de page) ou sur la bande CTA verte. L'anneau
   blanc se voit sur les fonds sombres, l'anneau bleu nuit se voit sur les
   fonds clairs : au moins un des deux tranche, quel que soit le fond. */
:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--couleur-primaire);
}

/* ===== Lien d'evitement (accessibilite clavier) ===== */

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--couleur-carte);
  color: var(--couleur-texte);
  padding: var(--espace-m) var(--espace-l);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-elevee);
}

.lien-evitement:focus {
  left: var(--espace-l);
  top: var(--espace-l);
}

/* ===== Typographie ===== */

/* Echelle d'affiche fluide : un seul palier par niveau, du plancher mobile au
   plafond grand ecran, sans marche d'escalier a 640 px ni a 960 px. Le tracking
   negatif serre les grands corps (Poppins s'ouvre trop a partir de 28 px) et
   redonne aux H2 le poids qui manquait pour structurer une page longue.
   Rendu mesure, racine 16 px : h1 32 px a 390 px et 48 px a 1440 px, h2 28 px
   et 39 px, h3 20 px et 24 px. */
h1,
h2,
h3 {
  font-weight: 700;
  margin: 0;
  /* Amelioration progressive : les moteurs qui ne connaissent pas la propriete
     l'ignorent, le titre se coupe alors comme avant. */
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 1.8vw + 1.4rem, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.75rem, 1.4vw + 1.2rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h3 {
  font-size: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

.texte-doux {
  color: var(--couleur-texte-doux);
}

.majuscule-etiquette {
  /* Plancher 14 px (principe 10 ans / 80 ans) : jamais de texte sous ce seuil,
     meme pour une etiquette secondaire. */
  font-size: 0.875rem;
  font-weight: 700;
  /* Tracking editorial : 0,14em au lieu de 0,05em. La reference de gout descend
     l'etiquette a 11 px pour tenir un tracking encore plus large ; exclu ici,
     la regle produit 10 ans / 80 ans (aucun texte sous 14 px) prime. */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--couleur-action);
}

/* Les deux anciens paliers de titres (640 px puis 960 px) sont supprimes : les
   clamp ci-dessus couvrent toute la plage en continu, les garder creerait un
   conflit de cascade. */

/* ===== Conteneur commun ===== */

.conteneur {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: 0 var(--espace-l);
}

.conteneur-lecture {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: 0 var(--espace-l);
}

/* ===== En-tete / navigation, commun a toutes les pages ===== */

.entete-site {
  /* Cadre de marque sombre, commun a l'accueil et aux pages de lecture
     claires : la nav est le point de continuite entre les deux mondes.
     Collee en haut : sur des pages de 300 a 540 lignes, le cadre de marque et
     le bouton Se connecter quittaient l'ecran des le premier defilement.
     APLAT OPAQUE, decision fondateur du 27/07. Une barre translucide se
     compose sur ce qu'il y a DERRIERE elle, et l'en-tete est hors de main :
     au repos, elle se posait donc sur le fond de page clair #f6f8fa et virait
     en permanence a #2a3732, une bande nettement plus claire que le fil
     d'Ariane #081711 juste dessous. L'effet verre supposait un site entierement
     sombre ; ici le coeur est clair par choix (V4), donc l'aplat gagne.
     Le collage et la marge de defilement des ancres, eux, sont conserves :
     c'est le vrai gain, la tenue de la barre de marque. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nuit-fond);
  padding: var(--espace-m) 0;
}

/* Obligatoire, pas cosmetique : le pied de page pointe vers #fonctionnement,
   #registre-des-dossiers, #relances, #radar-des-contrats et #securite, et
   suivi-syndic vers #exemple-dossier. Sans cette marge, l'en-tete colle
   (68 px mesures) recouvre la cible a l'arrivee. 5,5rem = 88 px, soit 20 px de
   respiration. Le :where() garde une specificite nulle : toute regle plus
   precise pourra la surcharger. */
:where([id]) {
  scroll-margin-top: 5.5rem;
}

.entete-site .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-l);
  /* Filet de securite, pas un choix de mise en page : depuis que l'en-tete
     porte "Demander un acces" (libelle plus long que l'ancien "Se connecter"),
     les tres petites largeurs ne tiennent plus sur une ligne. Mesure : rien ne
     se replie de 360 px a 1440 px, la barre reste sur une ligne partout ; a
     320 px (vieil iPhone SE, ou un fort zoom navigateur) le bouton passe
     dessous au lieu de deborder et de creer un defilement horizontal. */
  flex-wrap: wrap;
}

.marque-lien {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  text-decoration: none;
  min-height: var(--cible-tap);
}

.marque-lien:hover {
  color: inherit;
}

.marque-lien .embleme {
  width: 30px;
  height: 30px;
}

/* Sur telephone, l'embleme de l'en-tete s'efface au profit du NOM de la
   marque. Ce n'est pas un gout, c'est une contrainte mesuree : depuis que
   l'en-tete porte "Demander un acces" (bouton de 186 px, contre 133 px pour
   l'ancien "Se connecter"), la marque complete (162 px) plus le bouton plus
   les gouttieres demandent 396 px, soit 6 px de trop sur un ecran de 390 px,
   et 36 px de trop sur un 360 px. Trois sorties etaient possibles : replier
   la barre sur deux lignes (elle passait de 68 a 128 px de haut, ce qui
   invalidait aussi la marge de defilement des ancres calee sur 68 px),
   effacer le NOM (le visiteur venu de Google n'aurait plus lu la marque nulle
   part sur mobile), ou effacer l'embleme. C'est la troisieme : l'embleme est
   la seule des trois pieces que le balisage declare deja decorative
   (alt vide, aria-hidden), le nom porte la marque, et la barre garde ses
   68 px. Le lien vers l'accueil reste entier, c'est le nom qui le porte.
   Mesures apres coup : aucune ligne repliee, aucun debordement, de 360 px a
   1440 px. */
.entete-site .marque-lien .embleme {
  display: none;
}

@media (min-width: 420px) {
  .entete-site .marque-lien .embleme {
    display: block;
  }
}

.marque-nom {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--couleur-marque-texte);
}

.marque-nom .accent {
  color: var(--couleur-accent-vert);
}

.nav-site {
  display: none;
  align-items: center;
  gap: var(--espace-xl);
}

.nav-site a {
  color: var(--nuit-texte);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}

.nav-site a:hover,
.nav-site a:focus-visible {
  color: var(--couleur-accent-vert);
}

@media (min-width: 800px) {
  .nav-site {
    display: flex;
  }
}

/* DEUX actions dans l'en-tete depuis le 27/07/2026, et dans cet ordre de
   lecture : le lien discret d'abord, le bouton plein ensuite (l'action
   principale ferme la ligne, cote droit, la ou l'oeil termine).
   Pourquoi : jusqu'ici le seul bouton de TOUTES les pages etait "Se
   connecter", c'est-a-dire un mur pour un prospect, puisque l'app est en
   allowlist et qu'un visiteur ne peut pas creer de compte. Le prospect a
   maintenant sa porte ("Demander un acces"), le membre garde la sienne. */
.actions-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-xl);
}

/* "Se connecter" en lien discret : exactement le traitement des liens du menu
   (meme couleur, meme graisse, meme taille, meme survol vert), avec la hauteur
   de cible tactile en plus puisqu'il vit hors du menu.
   MOBILE : masque, comme le sont deja Guides, Outils, Tarifs et
   Confidentialite sous 800 px depuis l'origine du site. Mesures faites dans
   Chrome avant de trancher : a 390 px, la marque (162 px) et les deux actions
   (325 px) demandent 489 px de large, soit 99 px de trop. L'en-tete ne peut
   porter qu'UNE action a cette largeur, et elle revient au prospect : c'est
   tout l'objet de ce chantier, et le membre retrouve "Se connecter" dans le
   pied de page de chacune des 26 pages.
   Le lien revient a 900 px et non a 800 px comme le menu : a 800 px, marque
   (162) + menu (321) + les deux actions (325) + les ecarts et la gouttiere
   (64) demandent 872 px, soit 72 px de trop. 900 px laisse 28 px de marge. */
.lien-connexion-entete {
  display: none;
  align-items: center;
  min-height: var(--cible-tap);
  color: var(--nuit-texte);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.lien-connexion-entete:hover,
.lien-connexion-entete:focus-visible {
  color: var(--couleur-accent-vert);
}

@media (min-width: 900px) {
  .lien-connexion-entete {
    display: inline-flex;
  }
}

/* Bouton CTA "Ouvrir l'app" version bande (fond fonce) */
/* Le rembourrage part de espace-l et passe a espace-xl des 420 px (mesure :
   "Demander un acces" est un libelle nettement plus long que l'ancien
   "Se connecter", et a 390 px la marque plus le bouton pleinement rembourre
   demandent 396 px, 6 px de trop). Rien ne bouge donc a partir de 420 px :
   le bouton d'en-tete garde exactement sa taille de dessin. */
.bouton-cta-entete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cible-tap);
  padding: 0 var(--espace-l);
  background: var(--couleur-action);
  color: var(--couleur-action-contraste);
  border-radius: var(--rayon-pastille);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  box-shadow: var(--ombre-action);
  white-space: nowrap;
}

@media (min-width: 420px) {
  .bouton-cta-entete {
    padding: 0 var(--espace-xl);
  }
}

.bouton-cta-entete:hover,
.bouton-cta-entete:focus-visible {
  background: var(--couleur-action-hover);
  color: var(--couleur-action-contraste);
}

/* ===== Boutons generiques (contenu de page) ===== */

/* Format site vitrine : 48 px de haut a 390 px, 52 px a 1440 px. Les 44 px de
   la regle produit restent un PLANCHER tactile respecte avec de la marge, pas
   une cible. Le rayon pastille ne bouge pas, il fait partie de l'identite (meme
   forme que le bouton d'en-tete et les chips) : le gain percu vient de la
   taille, de l'ombre et du soulevement. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-s);
  min-height: 3rem;
  padding: 0 var(--espace-xl);
  border-radius: var(--rayon-pastille);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

@media (min-width: 700px) {
  .bouton {
    min-height: 3.25rem;
    padding: 0 2rem;
    font-size: 1.0625rem;
  }
}

.bouton-principal {
  background: var(--couleur-action);
  color: var(--couleur-action-contraste);
  box-shadow: var(--ombre-action);
}

.bouton-principal:hover,
.bouton-principal:focus-visible {
  background: var(--couleur-action-hover);
  color: var(--couleur-action-contraste);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21, 128, 61, 0.36);
}

/* Meme correctif que .carte-lien:focus-visible plus bas : la ligne ci-dessus
   reecrit box-shadow, donc elle effacerait l'anneau navy de la bague de focus
   globale. On recompose elevation ET anneau ensemble. */
.bouton-principal:focus-visible {
  box-shadow: 0 10px 24px rgba(21, 128, 61, 0.36), 0 0 0 4px var(--couleur-primaire);
}

.bouton-principal:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bouton:hover {
    transform: none;
  }
}

.bouton-secondaire {
  /* Fond legerement teinte au repos : une bordure seule a 50% d'opacite sur
     fond sombre se voit a peine avant le survol, le bouton semblait absent. */
  background: rgba(255, 255, 255, 0.08);
  color: var(--couleur-marque-texte);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
}

.bouton-secondaire:hover,
.bouton-secondaire:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: var(--couleur-marque-texte);
}

.bouton-fantome {
  background: var(--couleur-carte);
  color: var(--couleur-primaire);
  border: 1px solid var(--couleur-bordure);
  box-shadow: var(--ombre-carte);
}

.bouton-fantome:hover,
.bouton-fantome:focus-visible {
  background: var(--couleur-fond);
  color: var(--couleur-primaire);
}

/* .bouton fixe toujours son display (inline-flex) : sans cette regle,
 * l'attribut natif [hidden] est silencieusement perdant face a cette regle
 * auteur (l'attribut [hidden] est une regle user-agent, toujours dominee par
 * une regle auteur qui cible la meme propriete, quelle que soit la
 * specificite). Meme piege deja corrige plus bas pour .resultat[hidden]. */
.bouton[hidden] {
  display: none;
}

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-l);
}

/* ===== Hero d'accueil ===== */

.hero {
  background: var(--couleur-marque-fond);
  padding: var(--espace-xxl) 0 var(--espace-xxxl);
}

.hero-grille {
  display: grid;
  gap: var(--espace-xxl);
}

.hero h1 {
  color: var(--couleur-marque-texte);
}

/* Sous-titre : la vraie accroche juste sous le H1, donc la plus marquee
   des deux (avant correction, l'intro en dessous etait plus claire que ce
   sous-titre : la hierarchie visuelle etait inversee). */
.hero-souschapo {
  margin-top: var(--espace-l);
  font-size: 1.3125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
  max-width: 40rem;
  line-height: 1.45;
}

/* Paragraphe de detail : information complementaire, donc en retrait
   (plus petit, plus doux) derriere le sous-titre ci-dessus. */
.hero-intro {
  margin-top: var(--espace-m);
  font-size: 1rem;
  color: var(--couleur-marque-doux);
  max-width: 38rem;
  line-height: 1.6;
}

.hero .groupe-boutons {
  margin-top: var(--espace-xl);
}

@media (min-width: 960px) {
  .hero-grille {
    grid-template-columns: 3fr 2fr;
    align-items: center;
  }
  .hero-souschapo {
    font-size: 1.4375rem;
  }
}

/* ===== Aperçu du produit dans le hero =====
 * Remplace l'ancienne illustration abstraite (l'icone de marque 96x96
 * agrandie a 280px, qui devenait un cercle vide a cette echelle) par un
 * apercu concret du radar des contrats : memes jetons de couleur que les
 * badges de l'app (voir src/composants/BadgeEtat.module.css), donnees
 * d'exemple plutot que promesse abstraite. Visible a toutes les largeurs :
 * sur mobile, l'ancienne illustration etait tout simplement masquee et le
 * hero n'avait plus aucun repere visuel. */
.hero-preuve {
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
  background: var(--couleur-carte);
  border-radius: var(--rayon-grand);
  padding: var(--espace-l) var(--espace-xl);
  box-shadow: var(--ombre-elevee), 0 24px 48px rgba(2, 8, 15, 0.35);
}

.hero-preuve-entete {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  padding-bottom: var(--espace-m);
  border-bottom: 1px solid var(--couleur-bordure);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
}

.hero-preuve-point {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--couleur-action);
  animation: hero-preuve-pouls 2.4s ease-in-out infinite;
}

@keyframes hero-preuve-pouls {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.hero-preuve-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
}

.hero-preuve-texte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.hero-preuve-texte strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--couleur-texte);
}

.hero-preuve-texte span {
  font-size: 0.875rem;
  color: var(--couleur-texte-doux);
}

.hero-preuve-separateur {
  border-top: 1px dashed var(--couleur-bordure);
}

.pastille {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.625rem;
  border-radius: var(--rayon-pastille);
  font-size: 0.875rem;
  font-weight: 700;
  white-space: nowrap;
}

.pastille-rappel {
  background: var(--couleur-rappel-fond);
  color: var(--couleur-rappel);
}

.pastille-ok {
  background: var(--couleur-fond-doux);
  color: var(--couleur-action);
}

/* ===== Sections generiques ===== */

section {
  padding: var(--espace-xxl) 0;
}

/* Rythme vertical des pages longues : 64 px a 390 px, 104 px a 1440 px, contre
   40 px partout avant. Scope volontairement limite aux sections de PREMIER
   niveau : les guides et les outils imbriquent 5 a 7 sections dans
   .article-corps, elles heriteraient sinon d'un espacement enorme. */
.page-accueil main > section,
.page-commerciale main > section {
  padding: var(--espace-section) 0;
}

.section-alt {
  background: var(--couleur-carte);
  border-top: 1px solid var(--couleur-bordure);
  border-bottom: 1px solid var(--couleur-bordure);
}

/* Section "constat" : une seule phrase-choc entre le hero et le radar de
   fonctionnalites, traitee comme un vrai temps de respiration (centree,
   plus courte) plutot que de reprendre le meme gabarit kicker+h2+paragraphe
   que toutes les autres sections (defaut releve au diagnostic : rythme
   plat, aucune section ne se distingue des autres). */
.section-statement {
  padding: var(--espace-xl) 0;
  text-align: center;
}

.section-statement .section-entete {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

/* Palier propre a la phrase choc, un cran AU-DESSUS du H2 courant : 32 px a
   390 px et 45,6 px a 1440 px, contre 28 px et 39,36 px pour un titre de
   section ordinaire. Sans ce palier, le nouveau clamp global des H2 depassait
   les anciennes valeurs fixes (26 px puis 32 px) et la phrase choc devenait
   plus petite qu'un titre courant, ce qui inversait la hierarchie.
   Place dans l'echelle du site a 390 px et a 1440 px :
   28/39,36 (H2 courant) < 32/45,6 (phrase choc) < 32/52 (CTA finale, borne
   sombre) < 36/60 (H1 commercial) < 40/76 (H1 accueil).
   L'ancien palier fixe a 640 px est supprime : il ecraserait le clamp. */
.section-statement h2 {
  font-size: clamp(2rem, 1.5vw + 1.5rem, 2.875rem);
}

/* L'entete de section respire proportionnellement au nouveau rythme vertical :
   32 px sous l'entete a 390 px, 43 px a 1440 px, contre 40 px fixes avant. */
.section-entete {
  max-width: 44rem;
  margin: 0 0 clamp(2rem, 3vw, 3.5rem);
}

.section-entete p {
  margin-top: var(--espace-m);
  font-size: 1.0625rem;
  color: var(--couleur-texte-doux);
}

.section-entete.centre {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Lien de suite apres le corps d'une section (ex. "Le detail complet sur
   vos donnees"). Remplace un style="margin-top:..." pose au coup par coup
   dans le HTML (defaut releve au diagnostic : espacements ad hoc melanges
   au systeme de classes). */
.section-lien {
  margin-top: var(--espace-l);
}

/* Espace un groupe de cartes du groupe suivant, quand plusieurs grilles se
   suivent dans une meme section (ex. Guides puis Outils). */
.grille-espacee {
  margin-bottom: var(--espace-xxl);
}

/* Titre de sous-section (ex. "Guides", "Outils") : distinct des titres de
   carte qu'il chapeaute (defaut releve au diagnostic : meme balise h3, meme
   taille, meme graisse que le titre d'une carte, donc aucune hierarchie
   visible entre le chapeau et son contenu). */
.sous-section-titre {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  margin: 0 0 var(--espace-l);
  padding-bottom: var(--espace-s);
  border-bottom: 2px solid var(--couleur-bordure);
  /* Palier propre entre le H2 de section et le H3 de carte : 18,6 px a 390 px,
     22 px a 1440 px, avec un tracking legerement ouvert (c'est un chapeau, pas
     un titre d'affiche). */
  font-size: clamp(1.125rem, 0.4vw + 1.05rem, 1.375rem);
  letter-spacing: 0.01em;
}

.sous-section-titre::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--couleur-action);
  flex: none;
}

/* ===== Grilles de cartes ===== */

.grille-cartes {
  display: grid;
  gap: var(--espace-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .grille-cartes {
    grid-template-columns: repeat(3, 1fr);
  }
}

.carte {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-carte);
  padding: var(--espace-xl);
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

.carte-icone {
  width: 48px;
  height: 48px;
  border-radius: var(--rayon);
  background: var(--couleur-fond-doux);
  display: flex;
  align-items: center;
  justify-content: center;
}

.carte h3 {
  margin-top: var(--espace-xs);
}

.carte p {
  color: var(--couleur-texte-doux);
  font-size: 1rem;
  line-height: 1.55;
}

/* Carte "fonctionnalite" (section radar) : traitement distinct des cartes-
   lien vers guides/outils plus bas (defaut releve au diagnostic : les 9
   cartes de la page etaient visuellement interchangeables). Repere vert en
   haut + numero, pour lire "3 promesses du produit" comme un ensemble a
   part plutot qu'une grille de plus. */
.grille-fonctionnalites {
  counter-reset: fonctionnalite;
}

.carte-fonctionnalite {
  position: relative;
  border-top: 4px solid var(--couleur-action);
  counter-increment: fonctionnalite;
}

.carte-fonctionnalite .carte-icone {
  width: 56px;
  height: 56px;
}

.carte-fonctionnalite::after {
  content: counter(fonctionnalite, decimal-leading-zero);
  position: absolute;
  top: var(--espace-l);
  right: var(--espace-l);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--couleur-bordure);
}

/* Carte lien (guides / outils) : toute la carte est cliquable */
.carte-lien {
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.carte-lien:hover,
.carte-lien:focus-visible {
  box-shadow: var(--ombre-elevee);
  transform: translateY(-2px);
  color: inherit;
}

/* Ce box-shadow d'elevation ecrase la bague de focus globale (meme regle,
   propriete box-shadow reecrite) : sans ce correctif, seul l'anneau blanc
   de :where(...):focus-visible reste, invisible sur les fonds clairs de la
   V4 (carte blanche/grise). On recompose l'elevation et l'anneau navy
   ensemble, verifie au clavier (voir direction V4, section 10). */
.carte-lien:focus-visible {
  box-shadow: var(--ombre-elevee), 0 0 0 4px var(--couleur-primaire);
}

/* Etiquette de type ("Guide" / "Outil") en tete de carte-lien : differencie
   au premier coup d'oeil une ressource a lire d'un outil a utiliser, plutot
   que de laisser des cartes visuellement identiques. */
.carte-etiquette {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--couleur-action);
  background: var(--couleur-fond-doux);
  border-radius: var(--rayon-pastille);
  padding: 0.2rem 0.625rem;
}

.carte-etiquette svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.carte-lien .carte-fleche {
  margin-top: auto;
  font-weight: 600;
  color: var(--couleur-action);
}

/* Carte "bientot disponible" : non cliquable, chantier vague 2 */
.carte-bientot {
  opacity: 0.75;
}

.etiquette-bientot {
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--couleur-texte-doux);
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-pastille);
  padding: var(--espace-xs) var(--espace-m);
}

/* ===== Liste de preuves (confiance) ===== */

.liste-preuves {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espace-l);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .liste-preuves {
    grid-template-columns: repeat(2, 1fr);
  }
}

.liste-preuves li {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-m);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.liste-preuves .puce {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--couleur-fond-doux);
  color: var(--couleur-action);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-top: 0.15rem;
}

/* ===== Bande CTA finale ===== */

/* Cloture sombre, sur TOUTES les pages (decision fondateur du 27/07). Avant,
   seul l'accueil fermait en bleu nuit ; les 12 autres pages a CTA fermaient sur
   un aplat vert de marque, ce qui rendait le surlignage .marqueur invisible
   (du vert a 20 pour cent pose sur le meme vert plein) et cassait la
   continuite avec l'ouverture sombre. Contrastes mesures sur #081711 : blanc
   18,41:1, gris de corps #b7c2d0 10,20:1, et le blanc pose sur la bande de
   surlignage (composite #11542c) 9,02:1.
   Note de cascade : les anciennes surcharges .cta-finale .bouton-principal
   (fond marine, survol #16283c, un bleu orphelin de l'ancienne charte) sont
   supprimees et NON remplacees. Les remettre en vert serait une redite exacte
   de .bouton-principal, et cette redite, a specificite egale mais posee plus
   bas dans le fichier, annulerait le soulevement de survol et la bague de
   focus recomposee du bouton principal. */
.cta-finale {
  background: var(--nuit-fond);
  color: var(--nuit-texte);
  text-align: center;
  padding: var(--espace-section) 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--nuit-bordure);
}

/* Anneaux de radar en filigrane, sous le contenu. */
.cta-finale::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    circle at 50% 42%,
    transparent 0 69px,
    rgba(255, 255, 255, 0.03) 69px 70px
  );
  pointer-events: none;
}

.cta-finale .conteneur {
  position: relative;
  z-index: 1;
}

.cta-finale h2 {
  color: var(--couleur-marque-texte);
  font-size: clamp(2rem, 2.4vw + 1.3rem, 3.25rem);
}

.cta-finale p {
  margin-top: var(--espace-m);
  font-size: 1.125rem;
  color: var(--nuit-texte);
}

.cta-finale .groupe-boutons {
  margin-top: var(--espace-xl);
  justify-content: center;
}

.cta-finale .marqueur {
  background-image: linear-gradient(transparent 58%, var(--nuit-marqueur) 58%);
}

/* ===== Pied de page ===== */

.pied-site {
  background: var(--nuit-pied);
  color: var(--nuit-meta);
  /* Meme rythme que les sections de premier niveau, plus un filet vert qui
     annonce la borne basse. position/overflow portent le grain (voir plus bas). */
  border-top: 1px solid var(--nuit-bordure-verte);
  padding: var(--espace-section) 0 var(--espace-xl);
  position: relative;
  overflow: hidden;
}

.pied-grille {
  display: grid;
  gap: var(--espace-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .pied-grille {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

/* Titres de colonne : des etiquettes, pas des titres d'affiche. En blanc, ils
   ecrasaient les liens qu'ils chapeautent (gris #8494a7) et inversaient la
   lecture. #8494a7 sur --nuit-pied #06120d vaut 6,16:1, conforme.
   Cette regle doit rester APRES le clamp global de h2, sinon celui-ci
   l'emporterait sur les 14 px voulus ici. */
.pied-site h2 {
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nuit-meta);
  margin-bottom: var(--espace-l);
}

.pied-site ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.pied-site a {
  color: var(--nuit-meta);
  text-decoration: none;
  font-size: 0.9375rem;
}

.pied-site a:hover,
.pied-site a:focus-visible {
  color: var(--couleur-marque-texte);
}

.pied-marque {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  margin-bottom: var(--espace-m);
}

.pied-marque .embleme {
  width: 28px;
  height: 28px;
}

.pied-site .marque-nom {
  color: var(--couleur-marque-texte);
}

.pied-bas {
  margin-top: var(--espace-xxl);
  padding-top: var(--espace-xl);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-l);
  justify-content: space-between;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ===== Fil d'Ariane ===== */

.fil-ariane {
  padding: var(--espace-l) 0 0;
}

.fil-ariane ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-xs);
  font-size: 0.875rem;
  color: var(--couleur-texte-doux);
}

.fil-ariane a {
  color: var(--couleur-texte-doux);
  text-decoration: underline;
}

.fil-ariane li:not(:last-child)::after {
  content: "›";
  margin-left: var(--espace-xs);
  color: var(--couleur-texte-doux);
}

.fil-ariane li[aria-current="page"] {
  color: var(--couleur-texte);
  font-weight: 600;
}

/* Le fil d'Ariane coupait l'ouverture cinematique : entre l'en-tete sombre et
   le hero sombre, il posait une bande claire d'environ 38 px. Il porte a la
   fois .fil-ariane ET .conteneur, donc il est borne a 1120 px : lui donner un
   simple fond laisserait deux gouttieres claires sur grand ecran. Le pleine
   largeur s'obtient par une ombre portee etalee de 100vmax, recoupee
   verticalement par clip-path mais laissee libre lateralement. Verifie aux deux
   viewports : a 390 px vmax vaut 844 (etalement 2078 px), a 1440 px vmax vaut
   1440 (etalement 4000 px). Aucune gouttiere possible, hauteur toujours celle
   du contenu (y compris sur deux lignes en mobile).
   Contrastes sur #081711 : meta #8494a7 5,94:1, corps #b7c2d0 10,20:1, blanc au
   survol 18,41:1. */
.page-commerciale main > .fil-ariane {
  background: var(--nuit-fond);
  box-shadow: 0 0 0 100vmax var(--nuit-fond);
  clip-path: inset(0 -100vmax);
  padding: var(--espace-l) var(--espace-l) var(--espace-s);
}

.page-commerciale main > .fil-ariane ol,
.page-commerciale main > .fil-ariane a,
.page-commerciale main > .fil-ariane li:not(:last-child)::after {
  color: var(--nuit-meta);
}

.page-commerciale main > .fil-ariane a {
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.2em;
}

.page-commerciale main > .fil-ariane a:hover,
.page-commerciale main > .fil-ariane a:focus-visible {
  color: var(--couleur-marque-texte);
}

.page-commerciale main > .fil-ariane li[aria-current="page"] {
  color: var(--nuit-texte);
}

/* ===== Pages legales (mentions, confidentialite, cgu) ===== */

.page-legale {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-l) var(--espace-xxxl);
  display: flex;
  flex-direction: column;
  gap: var(--espace-xl);
}

.page-legale .page-date {
  margin: 0;
  color: var(--couleur-texte-doux);
}

.page-legale section {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.page-legale section + section {
  margin-top: var(--espace-l);
}

.page-legale ul {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.encart-vert {
  padding: var(--espace-l);
  background: var(--couleur-fond-doux);
  border: 1px solid var(--couleur-accent-vert);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

/* ===== Guides (article) ===== */

.article-entete {
  max-width: var(--largeur-lecture);
  margin: 0 auto var(--espace-xl);
  padding: 0 var(--espace-l);
}

.article-entete .majuscule-etiquette {
  display: block;
  margin-bottom: var(--espace-m);
}

.article-meta {
  margin-top: var(--espace-m);
  font-size: 0.9375rem;
  color: var(--couleur-texte-doux);
}

/* Tarifs et demander-acces sont les deux pages les plus commerciales du site, et
   elles etaient habillees en document juridique : pas de hero du tout, le meme
   gabarit que mentions-legales. Elles n'ont pas besoin d'etre restructurees :
   .article-entete est enfant DIRECT de main, il suffit de le laisser prendre
   toute la largeur et de recentrer ses enfants. Rendu du H1 : 36 px a 390 px,
   56 px a 1440 px. Contrastes sur #081711 : blanc 18,41:1, corps 10,20:1,
   --vert-clair 10,56:1. */
.page-commerciale main > .article-entete {
  max-width: none;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--espace-l) clamp(3rem, 6vw, 5rem);
  background: radial-gradient(
    130% 90% at 75% 12%,
    var(--nuit-fond-bas) 0%,
    var(--nuit-fond) 55%
  );
}

.page-commerciale main > .article-entete > * {
  max-width: var(--largeur-lecture);
  margin-inline: auto;
}

/* Cas /tarifs : son corps est .page-legale, dont le max-width de 42 rem INCLUT
   ses 16 px d'espacement interne. Sa colonne visible commence donc 16 px plus a
   droite que celle de l'entete, et le H1 se decalait de la page. C'est le CORPS
   qui fait foi (arbitrage du 27/07) : on retrecit la colonne de l'entete
   d'autant, les deux tombent alors sur le meme bord.
   Le scope par :has() est necessaire : /demander-acces, l'autre page a entete
   d'article, a pour corps un formulaire .outil-carte deja aligne au pixel, et
   une correction globale l'aurait desaligne a son tour. :has() est deja utilise
   dans cette feuille (.option-radio) et, s'il n'etait pas reconnu, la regle
   serait simplement ignoree : on retomberait sur l'alignement d'avant, jamais
   sur une casse. */
.page-commerciale main:has(> .page-legale) > .article-entete > * {
  max-width: calc(var(--largeur-lecture) - 2 * var(--espace-l));
}

.page-commerciale main > .article-entete h1 {
  color: var(--couleur-marque-texte);
  font-size: clamp(2.25rem, 2.2vw + 1.5rem, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Sur fond sombre, le vert de texte est --vert-clair, jamais --couleur-action
   (voir la table de contrastes en tete de fichier). */
.page-commerciale main > .article-entete .majuscule-etiquette {
  color: var(--vert-clair);
}

.page-commerciale main > .article-entete .article-meta {
  margin-top: var(--espace-l);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  color: var(--nuit-texte);
  line-height: 1.55;
}

.article-corps {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: 0 var(--espace-l) var(--espace-xxxl);
  display: flex;
  flex-direction: column;
  /* 40 px nets entre deux sections de guide. Avant, les sections imbriquees
     cumulaient l'espacement global de 40 px ET l'espace de 24 px du conteneur
     flex, soit 104 px que personne n'avait choisis. */
  gap: var(--espace-xxl);
}

.article-corps > section {
  padding: 0;
}

/* Confort de lecture des liens dans le corps de texte (6 guides, 3 outils et
   pages legales) : le trait passe sous la ligne de base au lieu de barrer les
   jambages. Aucun impact de contraste. */
.article-corps a,
.page-legale a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 0.08em;
}

.article-corps h2 {
  margin-top: var(--espace-m);
}

.article-corps h3 {
  margin-top: var(--espace-s);
}

.article-corps p,
.article-corps li {
  font-size: 1.0625rem;
  line-height: 1.65;
}

.article-corps ul,
.article-corps ol {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  margin: 0;
}

.encadre {
  padding: var(--espace-l);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-left: 4px solid var(--couleur-action);
  border-radius: var(--rayon);
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

/* FAQ en <details>/<summary> natifs : zero JS, accessible clavier d'office */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

.faq details {
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: var(--espace-l);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Le vert n'est ici qu'une bordure decorative : l'etat ouvert reste porte par
   le signe plus ou moins, jamais par la couleur seule. */
.faq details:hover {
  border-color: var(--couleur-accent-vert);
}

.faq details[open] {
  border-color: var(--couleur-accent-vert);
  box-shadow: var(--ombre-carte);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-m);
  min-height: var(--cible-tap);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--couleur-action);
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq p {
  margin-top: var(--espace-m);
  color: var(--couleur-texte-doux);
}

/* ===== Captures produit (banc d'ecrans, mandat page demonstration) =====
 * Image reelle de l'app, jamais une donnee reelle (fixtures inventees du
 * banc). Presentee comme une carte : bordure, ombre, legende separee par un
 * filet, meme famille visuelle que .encadre et .outil-carte. */

.capture-produit {
  margin: var(--espace-xl) auto 0;
  max-width: 46rem;
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-elevee);
  overflow: hidden;
}

.capture-produit img {
  width: 100%;
  height: auto;
  display: block;
  /* Filet de separation entre la capture et sa legende (les 5 PNG portent deja
     leurs attributs width et height, aucun decalage au chargement). */
  border-bottom: 1px solid var(--couleur-bordure);
}

.capture-produit figcaption {
  padding: var(--espace-m) var(--espace-l);
  color: var(--couleur-texte-doux);
  font-size: 0.9375rem;
  text-align: center;
  border-top: 1px solid var(--couleur-bordure);
}

/* ===== Outils (calculateur) ===== */

.outil-carte {
  max-width: var(--largeur-lecture);
  margin: 0 auto;
  padding: var(--espace-l);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand);
  box-shadow: var(--ombre-elevee);
  display: flex;
  flex-direction: column;
  gap: var(--espace-l);
}

/* Formulaire de demander-acces : meme presence que les cartes produit. Les
   champs, etiquettes et messages d'aide ne bougent pas, ils sont deja conformes
   (etiquette au dessus du champ, aide en dessous, cible de 44 px, contour de
   focus de 3 px). */
.page-commerciale .outil-carte {
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--ombre-elevee);
  gap: var(--espace-xl);
}

.page-commerciale .outil-carte .bouton {
  width: 100%;
}

@media (min-width: 560px) {
  .page-commerciale .outil-carte .bouton {
    width: auto;
    min-width: 16rem;
  }
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

.champ label {
  font-weight: 600;
  font-size: 0.9375rem;
}

.champ input,
.champ select {
  font: inherit;
  font-size: 1rem;
  min-height: var(--cible-tap);
  padding: 0 var(--espace-l);
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
}

.champ input:focus-visible,
.champ select:focus-visible {
  outline: 3px solid var(--couleur-primaire);
  outline-offset: 1px;
}

.champ small {
  color: var(--couleur-texte-doux);
  font-size: 0.875rem;
}

.resultat {
  padding: var(--espace-l);
  background: var(--couleur-fond-doux);
  border: 1px solid var(--couleur-accent-vert);
  border-radius: var(--rayon);
  font-size: 1.0625rem;
  min-height: var(--cible-tap);
  display: flex;
  align-items: center;
}

.resultat[hidden] {
  display: none;
}

.resultat strong {
  font-size: 1.25rem;
}

/* ===== Outils : lettres (vague 2) =====
 * Champs supplementaires (textarea) et groupe de boutons radio pour le
 * generateur de lettre de relance, plus l'apercu de lettre (generee ou
 * statique) et son bouton de copie, partages par les deux outils lettres. */

.champ textarea {
  font: inherit;
  font-size: 1rem;
  padding: var(--espace-m) var(--espace-l);
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}

.champ textarea:focus-visible {
  outline: 3px solid var(--couleur-primaire);
  outline-offset: 1px;
}

.champ-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  border: none;
  padding: 0;
  margin: 0;
}

.champ-groupe legend {
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0;
}

.options-radio {
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
}

@media (min-width: 500px) {
  .options-radio {
    flex-direction: row;
  }
}

.option-radio {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  padding: var(--espace-m) var(--espace-l);
  border: 1.5px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  background: var(--couleur-fond);
  cursor: pointer;
  min-height: var(--cible-tap);
}

.option-radio:has(input:checked) {
  border-color: var(--couleur-action);
  background: var(--couleur-fond-doux);
}

.option-radio input {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  accent-color: var(--couleur-action);
}

.option-radio span {
  font-size: 0.9375rem;
}

.lettre-apercu {
  padding: var(--espace-l);
  background: var(--couleur-fond-doux);
  border: 1px solid var(--couleur-accent-vert);
  border-radius: var(--rayon);
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--couleur-texte);
  white-space: pre-wrap;
  width: 100%;
  min-height: 12rem;
  resize: vertical;
}

.lettre-apercu[hidden] {
  display: none;
}

.lettre-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-l);
}

.lettre-statut {
  font-size: 0.9375rem;
  color: var(--couleur-action);
  font-weight: 600;
}

.lettre-statut:empty {
  display: none;
}

.mention-honnete {
  max-width: var(--largeur-lecture);
  margin: var(--espace-l) auto 0;
  padding: 0 var(--espace-l);
  font-size: 0.9375rem;
  color: var(--couleur-texte-doux);
}

/* ===== Page 404 ===== */

.page-404 {
  padding: var(--espace-xxxl) 0;
  text-align: center;
}

.page-404 .code {
  font-size: 4.5rem;
  font-weight: 700;
  color: var(--couleur-action);
  line-height: 1;
}

.page-404 p {
  margin-top: var(--espace-l);
  font-size: 1.125rem;
  color: var(--couleur-texte-doux);
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.page-404 .groupe-boutons {
  margin-top: var(--espace-xl);
  justify-content: center;
}

/* ============================================================================
 * MONDE CINEMATIQUE « L'ouverture sombre, le contenu clair, la cloture sombre »
 * ----------------------------------------------------------------------------
 * Deux bornes sombres (en-tete + fil d'Ariane + hero, puis CTA finale + pied)
 * encadrent un coeur clair. Ce traitement, valide par le fondateur sur
 * l'accueil (V4), s'etend aux 11 pages qui portent class="page-commerciale" :
 * jusqu'ici elles heritaient du gabarit d'avant (hero en aplat plat, H1 de
 * regle generique), et passer de l'accueil a /suivi-syndic donnait l'impression
 * de changer de generation de design.
 * L'accueil garde son propre cran d'echelle (H1 jusqu'a 76 px contre 60 px) :
 * elle doit rester le point haut du site.
 * ========================================================================== */

/* Deux tons du H1 (visuel seulement, le texte reste intact) et surlignage
   marqueur des mots-cles de titres (patron leportier). Version claire par
   defaut, utilisee dans le coeur (constat) ; la CTA finale, sombre sur toutes
   les pages, recoit sa variante nuit dans son propre bloc plus haut. */
.mot-signal {
  color: var(--vert-signal);
}

.marqueur {
  background-image: linear-gradient(transparent 58%, rgba(21, 128, 61, 0.2) 58%);
  background-repeat: no-repeat;
  padding: 0 0.06em;
}

/* ===== Hero sombre (borne haute) ===== */

.page-accueil .hero,
.page-commerciale .hero {
  /* Halo tres leger vers #0b2018 autour du mock, fondu sur le fond de base :
     les bords reviennent a #081711, aucune couture horizontale. overflow
     hidden contient le halo vert et la legere rotation du mock (garantit zero
     debordement horizontal). */
  background: radial-gradient(
    130% 90% at 75% 12%,
    var(--nuit-fond-bas) 0%,
    var(--nuit-fond) 55%
  );
  position: relative;
  overflow: hidden;
}

.page-accueil .hero h1 {
  color: var(--couleur-marque-texte);
  /* 76 px de plafond en grand ecran, plancher 40 px en mobile. */
  font-size: clamp(2.5rem, 4vw + 1.5rem, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Hero des pages commerciales : un cran sous l'accueil. 48 px d'air en haut et
   56 px en bas a 390 px, 88 px et 101 px a 1440 px.
   Piege de cascade connu : les conteneurs de hero de ces pages portent un
   attribut style en ligne qui force une colonne unique et 46 rem de large. Ne
   pas chercher a le surcharger (il faudrait !important) : cette largeur
   convient a un H1 de 60 px et doit etre conservee. */
.page-commerciale .hero {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6.5rem);
}

/* 36 px a 390 px, 60 px a 1440 px, contre 32 px et 52 px avant. */
.page-commerciale .hero h1 {
  color: var(--couleur-marque-texte);
  font-size: clamp(2.25rem, 2.6vw + 1.4rem, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Le sous-chapo generique (21 px en graisse 500, blanc a 94 pour cent) reprenait
   exactement la hierarchie inversee que la V4 avait corrigee sur l'accueil :
   il concurrencait le H1. 17,6 px a 390 px, 20 px a 1440 px, en graisse 400.
   #b7c2d0 vaut 10,20:1 sur #081711 et 9,43:1 sur #0b2018, le point le plus
   clair du degrade. */
.page-commerciale .hero-souschapo {
  margin-top: var(--espace-l);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  font-weight: 400;
  color: var(--nuit-texte);
  max-width: 36rem;
  line-height: 1.55;
}

/* Poppins ne monte qu'a 700 dans les 4 fichiers auto-heberges. A 60 px, ce
   contour de 0,012em ajoute 0,72 px de graisse optique et rapproche du 800 de
   la reference, pour 0 octet telecharge. Reserve aux tres grands corps :
   applique a du texte courant, il fermerait les contreformes. */
.page-accueil .hero h1,
.page-commerciale .hero h1,
.cta-finale h2 {
  -webkit-text-stroke: 0.012em currentColor;
}

/* ===== Matiere sur les aplats sombres =====
   Un grain SVG genere en data URI (une tuile de 160 sur 160 px, environ
   250 octets de CSS, zero requete reseau) empeche les grands aplats sombres de
   paraitre morts. Il reste au niveau 0, SOUS le contenu passe au niveau 1 :
   aucun pixel de grain ne se superpose a une glyphe, donc aucun ratio de
   contraste du site n'est modifie. C'est la condition d'acceptabilite de
   l'effet. */
.page-accueil .hero::after,
.page-commerciale .hero::after,
.cta-finale::after,
.pied-site::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

.page-accueil .hero > .conteneur,
.page-commerciale .hero > .conteneur,
.pied-site > .conteneur {
  position: relative;
  z-index: 1;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-s);
  margin-bottom: var(--espace-l);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--nuit-bordure-forte);
  border-radius: var(--rayon-pastille);
  background: rgba(255, 255, 255, 0.03);
  color: var(--nuit-texte);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}

.hero-badge-point {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert-signal);
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
  /* Point pulsant en CSS pur ; la regle globale prefers-reduced-motion
     ci-dessus neutralise l'animation (duree ramenee a 0,01 ms). */
  animation: pouls-point 2.4s ease-in-out infinite;
}

@keyframes pouls-point {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.page-accueil .hero-souschapo {
  margin-top: var(--espace-l);
  font-size: 1.1875rem;
  font-weight: 400;
  color: var(--nuit-texte);
  max-width: 34rem;
  line-height: 1.55;
}

/* Ajout mineur (brief fondateur v1.0) : microcopie de reassurance sous les
   CTA du hero ("le syndic n'a rien a installer..."). Meme couleur douce que
   le sous-chapo, plus petite et plus discrete qu'un paragraphe normal. */
.hero-microcopie {
  margin-top: var(--espace-l);
  font-size: 0.9375rem;
  color: var(--nuit-meta);
  max-width: 34rem;
}

/* Visuel produit : le mock reste une carte BLANCHE qui claque sur le sombre
   (patron leportier), pose sur un halo vert, legerement tourne, avec une
   seconde carte "registre" decalee derriere. */
.hero-visuel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  justify-self: center;
  align-self: center;
  margin: 0 auto;
}

.hero-visuel::before {
  content: "";
  position: absolute;
  inset: -12% -8%;
  /* Halo densifie de 0,18 a 0,22 : il assombrit legerement les bords du hero,
     ce qui ne peut qu'ameliorer le contraste du texte blanc. La regle mobile
     plus bas continue de le reduire sous 960 px, le rendu a 390 px est donc
     inchange. */
  background: radial-gradient(closest-side, rgba(34, 197, 94, 0.22), transparent);
  z-index: 0;
  pointer-events: none;
}

.page-accueil .hero-preuve {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  transform: rotate(-1.5deg);
  box-shadow: 0 0 120px rgba(34, 197, 94, 0.15), 0 32px 64px rgba(0, 0, 0, 0.5);
}

/* Carte secondaire (registre) decalee derriere la carte radar. Reprend le
   gabarit de carte blanche ; ses classes internes (.hero-preuve-entete,
   .hero-preuve-ligne, .pastille) sont deja stylees plus haut. */
.hero-preuve-fond {
  position: absolute;
  top: -1.5rem;
  right: -0.75rem;
  width: 82%;
  z-index: 1;
  transform: rotate(4deg);
  opacity: 0.9;
  background: var(--couleur-carte);
  border-radius: var(--rayon-grand);
  padding: var(--espace-l) var(--espace-xl);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: var(--espace-m);
}

/* ===== Coeur clair : alignement a gauche, air vertical =====
   Le fondateur : "apres le constat c'est centre, le reste c'est a gauche".
   Decision V4 : tout le contenu s'aligne sur le bord gauche du conteneur,
   sauf la CTA finale (borne sombre, centree par convention, exception unique
   et assumee). Le constat, premiere section du coeur clair, respire plus que
   les autres (espace-section). */
.page-accueil .section-statement {
  text-align: left;
  padding: var(--espace-section) 0;
}

.page-accueil .section-statement .section-entete {
  max-width: 46rem;
  margin-left: 0;
  margin-right: 0;
}

/* Ajout mineur (brief fondateur v1.0, section 06) : les 5 symptomes du
   constat sont des problemes, pas des preuves : puce neutre (jamais la
   coche verte de .liste-preuves, qui signifierait a tort une reussite).
   Meme gabarit typographique que .section-entete p pour rester dans le
   meme ton que le reste de la section. */
.liste-constat {
  max-width: 46rem;
  margin: 0 0 var(--espace-l);
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--espace-s);
  color: var(--couleur-texte-doux);
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* Filet haut sur les sections a fond gris page (radar, guides/outils) :
   .section-alt porte deja sa propre bordure (haut + bas), ces sections-la
   n'en ont pas d'autre pour marquer la frontiere avec leur voisine. */
.page-accueil .section-gris {
  border-top: 1px solid var(--couleur-bordure);
}

/* ===== Rangee de contrats couverts : grille alignee, chips claires =====
   Le fondateur : "le guide et outil on fait pas la diff" ne s'applique pas
   ici, mais le meme souci d'alignement si : les chips passent du drapeau en
   flex a une grille a cellules egales, toutes alignees en colonnes. */

.section-chips .majuscule-etiquette {
  display: block;
  margin-bottom: var(--espace-l);
}

.chips-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-m);
}

@media (min-width: 560px) {
  .chips-liste {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .chips-liste {
    grid-template-columns: repeat(6, 1fr);
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-s);
  min-height: var(--cible-tap);
  padding: 0 var(--espace-l);
  background: var(--couleur-fond);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-pastille);
  color: var(--couleur-texte);
  font-size: 1rem;
  font-weight: 500;
}

.chip svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--couleur-action);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chips-note {
  margin-top: var(--espace-l);
  color: var(--couleur-texte-doux);
  font-size: 0.9375rem;
}

/* ===== Bande de confiance : vert pale, preuves en cartes blanches =====
   Le "ton sur ton" venait du fond sombre sous des preuves sombres. Ici, le
   vert pale isole la confiance comme un moment a part, et chaque preuve est
   une carte blanche a bordure verte (contraste franc, jamais ton sur ton). */

.page-accueil .bande-confiance {
  background: var(--vert-brume);
  border-top: 1px solid var(--vert-brume-bordure);
}

.page-accueil .liste-preuves li {
  background: var(--couleur-carte);
  border: 1px solid var(--vert-brume-bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-carte);
  padding: var(--espace-l);
  color: var(--couleur-texte);
}

.page-accueil .liste-preuves .puce {
  background: var(--couleur-fond-doux);
  color: var(--couleur-action);
}

.page-accueil .section-lien a {
  color: var(--couleur-action);
}

/* ===== Guides vs outils : codage double, jamais la couleur seule =====
   Le fondateur : "le guide et outil on fait pas la diff". Quatre signaux,
   dont trois non chromatiques : barre laterale (navy / verte), pastille
   pleine (navy / verte) avec icone (livre / outil), et le mot lui-meme
   ("Guide" / "Outil"). La fleche reste verte pour les deux (affordance
   commune "c'est cliquable"), la difference se lit ailleurs. */

.carte-guide {
  border-left: 4px solid var(--couleur-primaire);
}

.carte-outil {
  border-left: 4px solid var(--couleur-action);
}

.carte-etiquette-guide {
  background: var(--couleur-primaire);
  color: #fff;
}

.carte-etiquette-outil {
  background: var(--couleur-action);
  color: #fff;
}

/* La CTA finale n'est plus prefixee .page-accueil : son traitement sombre est
   devenu celui de tout le site (voir le bloc .cta-finale plus haut). */

/* ===== Mobile : mock droit sous le texte, halo reduit, seconde carte
   masquee (evite tout debordement sur petit ecran). Aligne sur le point de
   bascule de la grille du hero (960 px). ===== */
@media (max-width: 959px) {
  .page-accueil .hero-preuve {
    transform: none;
  }
  .hero-preuve-fond {
    display: none;
  }
  .hero-visuel::before {
    inset: -6% 0;
    opacity: 0.6;
  }
}

/* ===== Perspective du mock produit (accueil, desktop seulement) =====
   Le scope a 960 px est obligatoire : le bloc max-width 959 ci-dessus remet une
   transformation nulle sur mobile et se trouve plus haut dans le fichier, donc
   une regle non scopee posee ici gagnerait contre lui. Scoper au desktop
   supprime toute dependance a l'ordre d'insertion.
   L'inclinaison au repos n'est PAS un mouvement : elle reste donc sous
   prefers-reduced-motion. Seule la transition est neutralisee (regle globale
   qui ramene toutes les durees a 0,01 ms), plus le figeage de l'etat de survol
   ci-dessous. Ce dernier est lui aussi scope a 960 px, sinon il rendrait au
   mock son inclinaison sur mobile au moindre survol remanent. */
@media (min-width: 960px) {
  .page-accueil .hero-visuel {
    perspective: 1200px;
  }

  .page-accueil .hero-preuve {
    transform: rotate(-1.5deg) rotateY(-6deg) rotateX(2deg);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .page-accueil .hero-visuel:hover .hero-preuve {
    transform: rotate(0deg) rotateY(0deg) rotateX(0deg);
  }
}

@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
  .page-accueil .hero-visuel:hover .hero-preuve {
    transform: rotate(-1.5deg) rotateY(-6deg) rotateX(2deg);
  }
}

/* Retouches revue fondateur du 24/07 : les messages de cloture de section
   (les encadres sous les relances et les contrats) respirent et se centrent,
   c'est la phrase finale de la section, pas une note collee a la liste. */
.encadre {
  margin-top: var(--espace-xxl);
  margin-inline: auto;
  max-width: 46rem;
  text-align: center;
  border-left: 1px solid var(--couleur-bordure);
  border-top: 4px solid var(--couleur-action);
}

/* Le bloc des contrats surveilles devient un vrai panneau autonome :
   fond carte, bordure, titre centre, chips alignees en grille. */
.bloc-chips {
  margin-top: var(--espace-xxl);
  padding: var(--espace-xl);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon-grand, 1.375rem);
  box-shadow: var(--ombre-carte);
}
.bloc-chips .sous-section-titre {
  justify-content: center;
  margin-bottom: var(--espace-xl);
}
.bloc-chips .chips-note {
  text-align: center;
  margin-top: var(--espace-l);
}

/* Revue live fondateur : le H1 du hero se lit en deux lignes voulues. */
.hero-ligne {
  display: block;
}
.hero-texte .mot-signal {
  display: block;
}

/* Sur-titre du hero (contenu v3) : texte reel au-dessus du H1, pas un
   element decoratif. Reprend .majuscule-etiquette (taille, graisse,
   tracking) ; seule la couleur change pour rester lisible sur le fond nuit
   (meme jeton --vert-clair que les autres petits textes verts sur sombre,
   deja verifie WCAG en en-tete de fichier). Zero nouvelle couleur. */
.hero-surtitre {
  display: block;
  margin-bottom: var(--espace-s);
  color: var(--vert-clair);
}

/* Les trois fonctions principales (contenu v3, section 4) : un seul H2
   d'entete, puis trois blocs condenses (dossier / relances / contrats)
   qui reprennent les classes existantes (section-entete, liste-preuves,
   encadre, section-lien). Seul ajout : le rythme vertical et un filet de
   separation entre les trois, mêmes jetons que .bloc-chips. */
.bloc-fonction {
  margin-top: var(--espace-xxl);
  padding-top: var(--espace-xxl);
  border-top: 1px solid var(--couleur-bordure);
}
.bloc-fonction:first-of-type {
  margin-top: var(--espace-xl);
  padding-top: 0;
  border-top: none;
}
.bloc-fonction h3 {
  margin-bottom: var(--espace-m);
}
.bloc-fonction > p {
  color: var(--couleur-texte-doux);
  margin-bottom: var(--espace-l);
}

/* Les 4 mini-cartes "autres fonctions" (contenu v3, section 6) : au-dela de
   960px, 4 colonnes egales plutot que le 3+1 orphelin que donnerait la
   grille par defaut (.grille-cartes reste a 3 colonnes partout ailleurs sur
   le site, ce modificateur est local a cette grille-la). */
@media (min-width: 960px) {
  .grille-cartes--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Revue live fondateur : la reassurance de la CTA finale se centre avec sa
   section au lieu de flotter a gauche avec le style du hero. */
.cta-finale .hero-microcopie {
  margin-inline: auto;
  text-align: center;
}