/* ============================================================ CHIFFRES CLÉS — les compteurs animés de l'accueil Relevé § 5.1 et § 5.3 : 4 blocs `kadence/countup` dans la section « **N**os chiffres clés », en colonnes à rayon 8 px. Valeurs RÉELLES lues dans le contenu de la page #9 (jamais inventées) : +1370 K€ « Dons cumulés » · 330 K€ « Collecte 2025 » · +350 « membres » · 9 « saisons depuis 2017 ». MOUVEMENT : le compteur s'anime. `--countup-duration` passe à 0 sous `prefers-reduced-motion` (tokens.css) : la valeur s'affiche directement, sans compte à rebours. Le composant lit le token, il ne décide pas. ============================================================ */ .lcdi-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); } .lcdi-stat { text-align: center; padding: var(--space-5) var(--space-4); border-radius: var(--radius-m); /* 8 px, relevé */ background: var(--surface-raised); border: 2px solid var(--border-soft); } .lcdi-stat__value { display: block; font-family: var(--font-display); font-size: var(--type-hero); font-weight: var(--weight-title); line-height: var(--lh-tight); color: var(--accent-ink); /* le chiffre est une donnée : il consomme l'encre du teal (5,30:1), pas l'accent brut */ font-variant-numeric: var(--numeric-data); } .lcdi-stat__label { display: block; margin-top: var(--space-2); font-size: var(--type-body); color: var(--text-body); } /* Variante posée sur nuit (héros de l'accueil, pied) */ [data-theme="nuit"] .lcdi-stat { background: var(--surface-night-raised); border-color: var(--border-night); } [data-theme="nuit"] .lcdi-stat__value { color: var(--accent); } /* 7,02:1 */ /* ============================================================ AMENDEMENT DU BLOC 3 (É4, 06/08) — LA VARIANTE « BOÎTE » Le composant v1 supposait QUATRE CARTES séparées. La mesure du live du 06/08 dit autre chose, et c'est elle qui fait foi : les quatre chiffres vivent dans UNE SEULE boîte de 1000 px de large (rayon 8, filet 2 px givre), et ce sont les colonnes intérieures qui n'ont ni fond ni bordure. Deux autres écarts mesurés, corrigés ici : - le nombre est rendu à 39,04 px (= `--type-display`), pas à l'échelle du héros ; - il est rendu en `#68a1b0` (l'accent brut), pas en encre de teal. Le second est un ÉCART VOULU DU DS : à 39 px en graisse 800, le chiffre est du GRAND TEXTE (seuil AA 3:1) et l'accent brut y passe (2,69:1 ne suffirait pas en corps, il suffit ici — mesure à l'appui, voir le rapport du bloc 3). La variante ne remplace pas la v1 : les deux coexistent. ============================================================ */ /* La section entière : le picto, le titre, puis la boîte. Le picto CHEVAUCHE la section précédente — c'est un fait relevé (`margin-top: -60px` sur le live) et c'est ce qui coud le héros à la suite de la page. AMENDÉ AU BLOC 3b (06/08, verdict Julien : « les vélos chevauchent la frontière de leur section, marges négatives comme le live »). Deux choses étaient fausses, et la seconde annulait la première : 1. la marge avait été ramenée à -48 px (un cran d'échelle) au lieu des -60 px relevés ; 2. surtout, elle NE CHEVAUCHAIT RIEN. La section n'a pas de padding haut : la marge négative du picto se FUSIONNAIT avec celle de la section (fusion des marges), et c'est la section entière — son fond compris — qui remontait de 48 px sur le héros. Mesuré avant : le fond de page mangeait les 48 derniers pixels de la vidéo, et le picto restait sagement sous la frontière. `display: flow-root` ouvre un contexte de formatage : la marge du picto ne fusionne plus, elle le déplace lui seul. Le fond de section reste à sa place, le picto passe devant le héros. C'est ça, chevaucher. */ .lcdi-stats-section { position: relative; display: flow-root; padding-block: 0 var(--space-8); text-align: center; background: var(--surface-page); } .lcdi-stats-section__crest { position: relative; /* il doit PEINDRE au-dessus du héros, pas seulement se déplacer au-dessus de lui */ z-index: 2; margin-top: calc(var(--stats-crest-overlap, 60px) * -1); /* relevé live */ } /* ============================================================ UNE IMAGE DOIT RÉSERVER SA PLACE AVANT D'ÊTRE CHARGÉE — retouche 16 du bloc 3c (06/08, verdict de gate). BUG, et il est de moi. CE QUE JULIEN A VU : tant que le vélo de cette couture n'est pas apparu, la section « Nos chiffres clés » remonte sous le héros ; au défilement, tout rentre dans l'ordre. Le coupable avait l'air d'être l'animation. Il ne l'est pas. CE QUE LA MESURE DIT (sonde `probe-3c-images-reserve.js`, mise en page pure — `offsetTop`/`offsetHeight`, jamais un rectangle client, qui serait mesuré APRÈS transformation) : état chargé sans défilement crest hauteur **0**, image 0 × 0, `width: 0px` après déclenchement crest hauteur 116, image 192 × 116 conséquence les 5 sections suivantes remontaient de **116 px**, et le document avec elles L'animation n'y est pour rien : AOS ne touche qu'`opacity`, `visibility` et `transform`, aucun n'entre dans le flux. C'est le CHARGEMENT PARESSEUX de l'image qui déplaçait la page — et comme il se déclenche au défilement, il imitait trait pour trait un bug d'animation. LA CAUSE EXACTE : la retouche 11 avait posé `width: var(--stats-crest-w, auto)`. Une déclaration d'auteur `width: auto` **écrase l'indication de présentation** que portent les attributs `width`/`height` de la balise — et une image pas encore chargée, sans largeur résolue, n'a aucune dimension intrinsèque : elle rend 0 × 0. Avant la retouche 11, aucune règle CSS ne touchait cette image et les attributs réservaient la place. **La retouche 11 a créé ce bug**, la 16 le referme. LA RÈGLE, et elle est systémique : dans ce système, une image décorative porte TOUJOURS une dimension résolue — une largeur en clair, ou une hauteur explicite. Jamais `width: auto` seul. Les deux autres cas du registre sont déjà sains par leur hauteur (`.lcdi-card__icon--image`, `.lcdi-logowall__item`), vérifié à la mesure ; le picto d'en-tête de bande ne l'était pas, il est corrigé dans `band.css`. ============================================================ */ .lcdi-stats-section__crest img { margin-inline: auto; width: var(--stats-crest-w, 192px); /* la largeur du fichier, relevée — jamais `auto` */ height: auto; } .lcdi-stats-section__title { margin-block: var(--space-5) var(--space-6); } /* ============================================================ LES TROIS CALQUES DE LA SECTION — nommés, parce que le gate du bloc 3 a trouvé la couture EN TRAVERS de l'encart (06/08, verdict Julien : « la silhouette passe SOUS l'encart »). calque 0 le fond de section (`--surface-page`), sans z-index calque 1 la COUTURE (`.lcdi-sep`, z-index 1) : la courbe qui plonge vers « À propos ». Elle monte de 225 px, donc elle passe DERRIÈRE l'encart, pas à côté de lui. calque 2 le CONTENU (`__inner`, z-index 2) : titre et encart. Un z-index supérieur ne suffisait pas : l'encart était transparent, la silhouette se lisait AU TRAVERS. C'est le fond opaque qui fait le calque, l'empilement ne fait que décider de l'ordre. ============================================================ */ .lcdi-stats-section__inner { position: relative; z-index: 2; } .lcdi-stats--boite { max-width: var(--stats-max, 1000px); margin-inline: auto; padding: var(--space-6) var(--space-4); border: 2px solid var(--border-soft); border-radius: var(--radius-m); /* OPAQUE, et c'est le point : l'encart est un calque, pas un cadre posé sur un décor. Le levier reste ouvert si une page veut l'encart transparent sur un fond qui n'est pas la surface de page. */ background: var(--stats-boite-bg, var(--surface-page)); } .lcdi-stats--boite .lcdi-stat { padding: var(--space-3) var(--space-2); border: 0; border-radius: 0; background: transparent; } .lcdi-stats--boite .lcdi-stat__value { font-family: var(--font-body); /* relevé : Roboto, pas le display */ font-size: var(--type-display); /* 39,04 px mesuré */ font-weight: 800; /* relevé */ color: var(--accent); } .lcdi-stats--boite .lcdi-stat__label { margin-top: 0; font-size: var(--type-body); color: var(--text-strong); /* #111111 mesuré */ } [data-theme="nuit"] .lcdi-stats--boite { border-color: var(--border-night); } /* ============================================================ LE VÉLO DE COUTURE RÉTRÉCIT AVEC LA PAGE — retouche 11 du bloc 3c (06/08, verdict de gate). Constat de Julien sur son téléphone : le vélo de la couture héros → chiffres clés est trop gros et son espacement est déséquilibré. RELEVÉ LIVE MOBILE (390, UA mobile réel) : le live rend ce picto en **192 × 116**, c'est-à-dire sa taille de fichier, exactement comme nous — il a donc le MÊME défaut. Son vélo de PIED, lui, descend à **100 × 60**. L'étalon retenu par Julien est ce vélo de pied : c'est un ÉCART VOULU au live, assumé et signalé. LES DEUX LEVIERS, et le second se déduit du premier : --stats-crest-w 100 px, la largeur du vélo de pied en mobile --stats-crest-overlap le chevauchement suit la hauteur du picto. En desktop il vaut 60 px pour 116 px de haut, soit 51,7 % ; à 60 px de haut cela fait 31 px, ramené au cran d'échelle le plus proche : `--space-6` (32 px). C'est ce qui rééquilibre l'espacement — 32 px au-dessus, 24 px sous le picto avant le titre, au lieu de 60 contre 24. MÊME SEUIL QUE SON JUMEAU : le vélo du pied rétrécit à 1024 px (`footer.css`). Les deux motifs sont le même geste, ils changent d'échelle ensemble — sinon la page servirait deux vélos de tailles différentes entre 768 et 1024. ============================================================ */ @media (max-width: 1024px) { .lcdi-stats-section__crest { --stats-crest-w: 100px; --stats-crest-overlap: var(--space-6); } } @media (max-width: 1024px) { .lcdi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .lcdi-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid-tight); } }