/* =============================================================================
   trust.css — bande de chiffres cles sur fond noir
   =============================================================================
   Repris de la maquette figee : style.css l. 1339-1348, plus la grille 2 x 2 de
   mobile.css l. 1901-1921. Les commentaires d'origine sont conserves : ils
   portent des retours client qu'aucune autre source ne documente.

   ⚠️ TOUT le CSS de ce type de bloc vit ici — y compris ses @media. Rien dans
   le CSS d'une page : un bloc duplique vers une page vierge doit rester correct.

   ⚠️ FOND SOMBRE : `.trust` est declare dans `BLOCS_SOMBRES` de `common.js`, qui
   bascule l'en-tete en blanc au-dessus. Renommer la classe sans toucher a cette
   liste rendrait le menu illisible sur cette section — sans la moindre erreur.

   ⚠️⚠️ CE PARAGRAPHE DISAIT « LE COMPTEUR N'EST PAS PORTE ». C'ETAIT VRAI LE
   2026-09-30, C'EST FAUX DEPUIS LE 2026-10-01 — corrige le 2026-10-06, apres
   verification par `grep` et par rendu. **CINQUIEME commentaire perime releve dans
   le projet**, et le premier dans NOTRE code et non dans la maquette.

   L'etat reel : `js/blocs/trust.js` EXISTE, il est mappe dans `blocJSMap`, il est
   charge, et c'est bien lui qui AJOUTE `.is-lit` (l. 66) puis la retire apres le
   halo (l. 82). La regle ci-dessous a donc un ecrivain.

   ✅ Ce qui reste vrai, c'est la CONSEQUENCE, obtenue autrement : le compteur est
   conditionne a l'attribut `data-compteur`, un drapeau EXPLICITE pose par la vue
   depuis un champ du bloc (`trust.php:53`). La page Presentation ne le pose pas —
   mesure du 2026-10-06, ses trois chiffres sont rendus FIGES (`35`, `100+`, `30+`),
   exactement l'arbitrage d'Alexandre du 2026-09-30. Ce n'est plus une absence de
   code, c'est un reglage au backoffice.
   ⚠️ Ne pas conclure de ce drapeau eteint que le composant manque : le confondre
   ferait reecrire un compteur qui existe.
   ============================================================================= */

/* ---- BLOC 35 ANS ---- */
.trust{ background:var(--noir); color:var(--creme); text-align:center; }
.trust__stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(30px,5vw,80px); margin-bottom:34px; }
.trust__stat{ display:flex; flex-direction:column; gap:4px; }
.trust__num{ font-size:clamp(44px,6vw,76px); color:var(--jaune); line-height:1;
  transition:text-shadow .6s ease; }
/* ALLUMAGE : glow jaune au moment où le chiffre compte, puis il s'estompe (classe retirée par JS). */
.trust__num.is-lit{ text-shadow:0 0 22px rgba(244,183,33,.65), 0 0 6px rgba(244,183,33,.5); }
.trust__lbl{ font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.trust__txt{ max-width:620px; margin:0 auto; font-size:var(--fs-body); line-height:1.6; color:rgba(255,255,255,.8); }

/* ==========================================================================
   CHIFFRES CLÉS (.trust) — GRILLE 2 x 2 — LOT 11 (24/07)
   Retour Nicolas : « tu peux passer "Associations soutenues" sur 2 lignes pour
   aligner plus les chiffres clés entre eux ? ». Les 4 chiffres vivaient dans un
   flex-wrap centré : chaque colonne prenait la largeur de SON libellé, et le plus
   long (« associations soutenues », 208px mesurés à 375px) ne tenait à côté
   d'aucun autre -> répartition 2 / 1 / 1, chiffres décalés d'une ligne à l'autre.
   On passe en grille 2 colonnes ÉGALES : les 4 chiffres s'alignent 2 par 2, et le
   libellé le plus long passe de lui-même sur 2 lignes (163px de colonne) - sans
   valeur de coupure écrite en dur, donc juste aussi si le texte change.

   ⚠️ CETTE REGLE A ETE ECRITE POUR LES QUATRE CHIFFRES DE L'ACCUEIL. La page
   Presentation n'en porte que TROIS : la grille rend alors 2 + 1, donc une
   derniere ligne a moitie vide. C'est ce que fait la maquette, on s'y conforme —
   mais c'est un point a regarder a l'oeil sur telephone, et a signaler si la
   cliente le trouve bancal.
   ========================================================================== */
@media (max-width:640px){
  .trust__stats{
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(20px,5vw,30px) clamp(12px,4vw,20px);
    align-items:start;
  }
}