/* ============================================================ COUTURE AU PICTO VÉLO — la bande de transition d'une page interne NOUVEAU COMPOSANT (bloc 5a de l'É4, 10/08). Motif de sa naissance : les pages internes du site posent TOUTES la même figure entre leur héros photo et la première bande de contenu — le picto vélo à cheval sur la frontière. Le registre ne la portait qu'à un seul endroit, dans `footer.css`, soudée au pied (`.lcdi-footer__crest`) : la première page interne l'aurait dupliquée. RELEVÉ LIVE (sonde `probe-5a-detail.js`, 10/08, 1440 × 900), identique sur les trois pages du bloc — Adhérer, Partenaires, Caritatif : picto 192 × 116, centré colonne marge haute **-60 px** bande **56 px** de haut (116 − 60) : le picto déborde vers le bas de 56 px et mord le héros de 60 px vers le haut Le héros mesure exactement 900 px dans une fenêtre de 900 (100vh) et le picto commence à 840 : la moitié basse du motif est donc posée sur la section suivante, la moitié haute sur la photo. C'est ce chevauchement qui fait la couture — pas une image décorative posée entre deux blocs. DEUX LEVIERS, MÊME GRAMMAIRE QUE LE PIED : --crest-band hauteur de la bande (56 px au relevé, 42 depuis le 17/08) --crest-pull de combien elle remonte (60 px au relevé, 45 depuis le 17/08) Arithmétique vérifiable : débord bas = hauteur du picto − remontée. ============================================================ LE PICTO PASSE DE 192 À 144 px — DÉCISION DE JULIEN DU 17/08, ET C'EST UN ÉCART ASSUMÉ AU « À L'IDENTIQUE ». Le relevé live ci-dessus reste vrai ; il ne commande plus. Verdict de gate : les deux figures au picto vélo (celle-ci et celle du pied, `footer.css`) sont trop grosses. Elles descendent ENSEMBLE et à la MÊME valeur — deux figures du même dessin sur le même site ne peuvent pas avoir deux tailles, c'est déjà la règle qui fixe le repli téléphone à 100 px des deux côtés. LA COUTURE RESTE COUSUE, et c'est l'arithmétique qui le dit. −25 % sur la largeur, donc −25 % sur tout ce qui en dépend : picto 192 × 116 → **144 × 87** (144 × 116/192 = 87 exactement) remontée 60 → **45** (60 × 0,75) bande 56 → **42** (56 × 0,75, ET 87 − 45 = 42 : la règle « bande = hauteur du picto − remontée » tient toujours) Ce que ces trois nombres produisent, et qui est la figure elle-même : morsure du héros vers le haut 60 → **45 px** débord sous la couture 56 → **42 px** démarrage de la section qui suit, par rapport au bas du héros : −60 + 56 = −4 px → −45 + 42 = **−3 px** Le signe ne change pas : la section MORD toujours la photo, il n'y a donc aucun jour à peindre au bureau — c'est exactement l'invariant que la correction C2 du 13/08 a payé cher côté téléphone. LE REPLI TÉLÉPHONE NE BOUGE PAS (100 px, bloc ci-dessous) : il était déjà sous la taille décidée, et le rendu à 390 est gaté depuis le 13/08. ============================================================ JUMEAU CONNU, ET SIGNALÉ : `footer.css` porte la même figure avec ses propres valeurs mesurées (bande 76, remontée 110). Les fusionner ferait de `.lcdi-footer__crest` une instance de `.lcdi-crest` ; c'est une retouche du pied, hors périmètre de ce bloc — PARQUÉE au rapport, pas improvisée ici. DIMENSION RÉSOLUE, RÈGLE SYSTÉMIQUE DU BLOC 3c : le picto porte une largeur déclarée (jamais `width: auto`), sinon il rend 0 × 0 avant chargement et la page saute de 116 px à l'arrivée du fichier. ============================================================ */ .lcdi-crest { /* Le picto passe DEVANT le héros comme devant la section suivante : sans contexte d'empilement propre, la bande photo du héros (qui vient avant lui dans le document, avec un fond opaque et son propre `isolation`) le laisserait passer, mais la première bande de contenu, elle, le couvrirait. */ position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-start; /* le picto part du HAUT : il ne déborde que vers le bas */ height: var(--crest-band, 42px); margin-top: calc(var(--crest-pull, 45px) * -1); /* Décor pur : il ne doit jamais voler un clic au contenu qu'il chevauche. */ pointer-events: none; } .lcdi-crest img { display: block; width: var(--crest-w, 144px); /* 192 au relevé live, 144 par décision du 17/08 */ height: auto; } /* ============================================================ REPLI TÉLÉPHONE — AMÉLIORATION SOUSTRACTIVE, DÉCIDÉE PAR JULIEN LE 13/08 Ce bloc REMPLACE la règle « PAS DE REPLI TÉLÉPHONE, ET C'EST UNE MESURE » posée le 10/08. Le relevé qui la fondait n'est pas effacé, il est ici, entier : RELEVÉ LIVE 390 × 844 (sonde `probe-5a-mobile.js`, 10/08), sur les trois pages du lot : picto **192 × 116**, centré à x = 99 ((390 − 192) / 2), colonne **56 px** de haut, marge haute **-60 px** — exactement les valeurs du desktop. Le live ne replie donc PAS son picto sur téléphone, là où le picto du PIED, lui, tombe à 100 px sous 1025 px (`footer.css`, bloc 3c). VERDICT DU GATE (13/08, retouche R1, décision de Julien) : « le vélo sous le héros est bien trop gros et chevauche le surtitre/titre de la section suivante ; même plus petit, il faut du padding/margin pour qu'il se cale bien ». La décision PRIME sur le relevé, et le défaut qu'elle vise a été MESURÉ avant retouche, à 390 (sonde `probe-retouches.js`, 13/08) — écart en pixels entre le bas du picto et le haut du premier texte suivant : Adhérer ..... 28 px de chevauchement (surtitre « Les cycles de… ») Caritatif ... 28 px (même surtitre) Partenaires . 42 px (plaque « Sponsors GOLD ») → R2a Article ..... 12 px (H2 « Les étapes ») Contact / Événements passés : aucun (rien de peint sous le picto) CE QUI CHANGE, ET POURQUOI CES VALEURS-LÀ : largeur 192 → **100 px** (soit 100 × 60,4), la MÊME que le pied replié : deux figures du même picto sur le même écran ne peuvent pas avoir deux tailles. remontée 60 → **`--space-6` (32 px)** : le picto mord toujours la photo, d'à peu près la moitié de sa hauteur — la figure de couture est conservée, à l'échelle du nouveau picto. bande 56 → **`--space-7` (48 px)** : c'est elle le « padding » demandé. La bande vaut la remontée PLUS un cran (32 + 16) : la section suivante démarre donc 16 px plus bas que le héros, et le débord du picto (60,4 − 32 = 28,4 px sous la couture) tombe dans cet air-là au lieu de tomber sur le texte. Arithmétique du dégagement, vérifiable : bande − débord + marge haute de ce qui suit = 48 − 60,4 + 32 = **19,6 px** sous une bande de contenu, 35,6 px sous une section. Positif dans les deux cas : le chevauchement disparaît par construction, quelle que soit la section qui suit. LE SEUIL EST 1024 px, celui du pied et celui de la pile (`band.css`) : le picto se replie au moment où la page se replie. ============================================================ */ @media (max-width: 1024px) { /* Les trois leviers ensemble, sur le MÊME sélecteur : le composant n'a qu'un jeu de variables, la règle de largeur du picto n'est écrite qu'une fois. */ .lcdi-crest { --crest-w: 100px; /* 100 × 60,4, la largeur du pied replié */ --crest-band: var(--space-7); /* 48 px */ --crest-pull: var(--space-6); /* 32 px */ } } /* ============================================================ RETRAIT DÉFAIT — LE PICTO DE COUTURE RESTE SUR TOUTES LES PAGES (13/08) La première passe du gate faisait sortir ce picto de la pile quand un mur de logos suivait le héros (`.lcdi-crest--sans-pile`, posé par `heros-page.php` au moyen d'un `lcdi_disposition_suivante()`). C'ÉTAIT UNE LECTURE FAUSSE DU VERDICT. Julien, verbatim du 13/08 : « je n'ai pas demandé à supprimer le vélo qui se trouve sous la hero section mais celui qui se trouve à côté de "Pourquoi devenir sponsor" » — c'est-à-dire le picto d'EN-TÊTE DE BANDE, une autre figure, traitée dans `band.css` § LE PICTO D'EN-TÊTE SORT EN TÉLÉPHONE. La règle, son modificateur et la fonction PHP qui le posait sont RETIRÉS et non commentés : du code mort « au cas où » est un défaut, et plus rien n'appelle cette lecture de la disposition suivante. ET LA RENCONTRE QUI L'AVAIT MOTIVÉE N'EXISTE PLUS : elle valait 42 px de recouvrement avec la plaque « Sponsors GOLD » du temps du picto de 192 px. Depuis le repli ci-dessus (picto de 100) et la réserve du mur (R2b), le picto passe AU-DESSUS de la plaque — mesuré à 390 après remise en place, sonde `probe-retouches2.js` : bas du picto 872,4 · haut de la plaque 878, soit 5,6 px de dégagement. ============================================================ */ /* ============================================================ LA BANDE QUI SUIT REMONTE PRENDRE LE JOUR — correction C2 du 13/08 (Julien) CONSTAT, sur « Caritatif » en téléphone : « sous la photo du héros, une bande blanche s'est glissée au niveau du picto ; la photo s'arrête net, le vélo flotte sur du blanc ». CAUSE MESURÉE AU NAVIGATEUR (390, sonde `probe-retouches2.js`, balayage de ce qui est PEINT ligne à ligne, pas de ce que les boîtes racontent) : le repli ci-dessus donne à la bande 48 px pour une remontée de 32. Elle rend donc **16 px de flux** entre le bas de la photo (y 844) et le haut de la section (y 860). Ces 16 px ne sont peints ni par le héros ni par la section, mais par le conteneur de contenu du thème PARENT (`main.wrap`, Kadence), qui est BLANC — rgb(255,255,255) relevé — quand la bande qui suit peint la surface de page, rgb(245,248,249). Le liseré est cet écart-là. Sur le live, la bande valait 56 pour une remontée de 60 : elle ne rendait aucun jour, la section mordait la photo de 4 px. Le repli de la première passe a inversé le signe. POURQUOI LES DEUX LEVIERS NE BOUGENT PAS : ramener la bande à la remontée supprimerait le jour, mais ferait démarrer la section 16 px plus haut sur les CINQ pages qui portent une couture — Adhérer, Contact, les articles et « Événements passés » sont gatées, elles ne se décalent pas pour un liseré. Le jour reste ; c'est la SURFACE qui vient le prendre. LA RÈGLE PORTE SUR LA SUCCESSION, jamais sur la page : une bande qui suit immédiatement une couture remonte de la hauteur du jour et le rend à son contenu par une réserve égale. Sa boîte peinte touche alors la photo ; son contenu, lui, ne bouge pas d'un pixel — mesuré des deux côtés. ELLE NE SE DÉCLENCHE QUE LÀ OÙ LE LISERÉ SE VOIT : une BANDE peint la surface de page, donc le blanc s'y détache. Les sections ordinaires (« Contact », les articles, le mur de « Partenaires ») sont transparentes : leur jour est blanc sur blanc, il ne se voit pas, et rien ne les touche. ============================================================ */ @media (max-width: 1024px) { .lcdi-crest + .lcdi-band { /* le jour vaut bande − remontée, soit 48 − 32 : c'est `--space-4`. */ margin-top: calc(var(--space-4) * -1); padding-top: var(--space-4); } } /* ============================================================ LA MÊME COUTURE, DEVANT UNE SECTION — correction C1 du gate final (14/08) CONSTAT (Julien, récidive) : « à 390 px, une bande blanche apparaît au niveau du picto vélo entre le héros et la bande suivante », sur les écrans de l'agenda. LA CAUSE, MESURÉE AU PIXEL RENDU AVANT D'ÊTRE CORRIGÉE (`preuves/couture-au-pixel.mjs`, passe « avant » du 14/08, 8 écrans × 2 largeurs). Le jour de 16 px existe sur les HUIT écrans du module, exactement comme le décrit le bloc ci-dessus (bande 48, remontée 32) : agenda (2 vues) ... jour y = 844→859, peint **rgb(245,248,249)**, devant une bande qui peint rgb(224,234,236) → LE LISERÉ SE VOIT les 6 autres ...... même jour, même peinture, devant une bande qui peint elle aussi rgb(245,248,249) → invisible bureau (1280) ..... jour = **-4 px** : la bande mord la photo, rien à peindre ET CE N'EST PAS LA CAUSE PARQUÉE LE 13/08. Le liseré n'est pas peint par `main.wrap` du thème parent — relevé transparent sur ces écrans — mais par le ``, à qui le child theme donne `--surface-page` (#f5f8f9). Le liseré n'est donc pas blanc : il est de la surface de page, ce qui à côté d'une bande givre se lit exactement comme du blanc. AUCUN FICHIER DU CHILD THEME N'EST EN CAUSE ICI : ce qui manquait est dans ce composant. CE QUI MANQUAIT : la règle de succession ci-dessus ne connaît que `.lcdi-band`. Les écrans montés en SECTIONS (`.lcdi-section`, tout le module événements) n'étaient couvertes par personne. POURQUOI DEUX MÉCANIQUES ET NON UNE. `.lcdi-band` n'a pas de réserve haute à elle (sa réserve vit sur `.lcdi-band__content`) : on peut donc la remonter de 16 px et lui en rendre 16 en réserve. `.lcdi-section`, elle, PORTE sa réserve (`padding-block`), et cette réserve change avec la largeur (48 px sous 768, 72 px au-dessus) : lui écrire une réserve en dur écraserait la sienne et remonterait son contenu d'un cran. La bordure transparente n'a pas ce défaut — le fond d'un élément est peint SOUS sa bordure (`background-clip: border-box`, le défaut), donc une bordure haute transparente de 16 px étend le sol de la bande de 16 px vers le haut ET lui rend les 16 px que la remontée lui a pris. Le contenu ne bouge pas d'un pixel, et rien n'a eu à connaître sa réserve. LE PICTO RESTE DEVANT : il porte `z-index: 3` (voir plus haut), la bordure de la bande peint dans le flux ordinaire. ============================================================ */ @media (max-width: 1024px) { .lcdi-crest + .lcdi-section { margin-top: calc(var(--space-4) * -1); border-top: var(--space-4) solid transparent; } }