/* ============================================================ PIED — bande de transition au picto vélo, 3 colonnes sur bitume, crédits Relevé § 4.3 : il n'existe AUCUN `#colophon` dans le DOM — le pied du thème est remplacé par un Kadence Element (#1379). Le complément § 7 lève le STOP du temps 1 : le pied est servi à TOUT LE MONDE (`role: public` ne veut pas dire « déconnectés seulement »), constaté sur deux sessions. Structure relevée, reproduite ici : 1. bande de transition 76 px, fond de page, picto vélo 192 × 116 (100 × 60,4 en mobile) — seul motif de marque hors logo ; 2. rangée principale sur #111111, 3 colonnes de 414 px, gouttière verticale 32 px, hauteur 345,5 px, padding 28,8 / 24 px ; 3. barre de crédits 68,6 px, texte blanc, « Création : Treize Cent Treize » et « Mentions légales » en accent souligné. Icônes sociales : SVG 35 px en `fill: #68a1b0` (6,58:1 sur bitume : conforme). MARQUE BLANCHE 13i : le crédit du pied porte « Treize Cent Treize », et aucun autre nom d'agence (règle de l'AGENTS.md de l'atelier). ------------------------------------------------------------ AMENDEMENTS DU BLOC 2 (É4, 05/08) — chacun adossé à une MESURE reprise sur le site live le 05/08 (`_constats/bloc2/resultats-live-mesures.json`) : 1. `.lcdi-footer__contact` passait pour une grille verticale d'icônes 20 px avec libellé. MESURÉ sur le live : une RANGÉE de 3 icônes de 35 px, sans libellé (repère, téléphone, e-mail), même gabarit que les icônes sociales. Le composant suit la mesure et garde le libellé optionnel. 2. `.lcdi-footer__actions` — les deux boutons pleine largeur de la 3e colonne (« Adhérer à l'association », « Inscrivez-vous à la Newsletters ») n'existaient nulle part dans le registre. Ils consomment les DEUX voix de `buttons.css` ; ce bloc ne pose qu'un rythme vertical. 3. Les liens du pied gravent leurs QUATRE états (repos / survol / focus / focus visible) : le parent Kadence repeint `a:hover, a:focus, a:active` en (0,1,1). `.lcdi-footer__links a:hover` pèse (0,2,1) : il passe devant sans `!important`. ============================================================ */ /* ============================================================ DÉGAGEMENT DE PIED — retouche 9 du bloc 3c (06/08, verdict de gate) « Le vélo percute le bouton ». Constaté par Julien sur la home vivante, puis chiffré : à 1440, le haut du picto passait 38 px AU-DESSUS du bas du bouton « Voir tous nos événements passés », quand le live lui laisse 62 px d'air. LA CAUSE N'EST PAS LE PIED, elle est AU-DESSUS de lui. La bande (76 px) et la remontée (110 px) sont justes, mesurées, conformes au live — c'est l'air que la dernière section réserve en bas qui manquait : 72 px chez nous (le padding de section), 172 px sur le live. La remontée de 110 px se faisait donc dans 38 px d'espace, et le picto sortait par le haut. POURQUOI LA RÈGLE VIT ICI, ET PAS DANS UNE PAGE. Le motif du vélo à cheval revient sur quasi toutes les pages du plan de site : une règle vraie pour toutes les pages se grave dans le système de rendu, jamais page par page. Elle s'applique donc au DERNIER BLOC de la zone de contenu, quel qu'il soit, sur toute page servie par le chrome du child — sans qu'aucun gabarit n'ait un geste à faire. POURQUOI SUR LE DERNIER BLOC ET PAS SUR LE PIED : le dégagement doit vivre DANS le décor de la dernière section, pour que son fond (photo, aplat) coure jusqu'au noir. Posé sur le pied — transparent depuis la retouche 4 — il rendrait le fond de PAGE et rouvrirait la bande blanche qu'on vient de fermer. POURQUOI DANS CE FICHIER : `footer.css` ferme la cascade des sections (voir l'ordre dans `inc/sections.php`). À poids égal, une règle posée ici passe devant celles des composants de contenu — ce qui est exactement ce qu'on veut d'un dégagement qui doit s'imposer au dernier bloc, quel qu'il soit. Poids (0,1,1) : au-dessus du `.lcdi-section` (0,1,0) qui pose le padding courant. Le dégagement REMPLACE la marge basse du dernier bloc, il ne s'y ajoute pas : la marge basse d'une section et l'air avant le pied sont la même chose, la déclarer deux fois la rendrait imprévisible. EXCEPTION DÉCLARÉE : `.lcdi-sans-degagement` sur le dernier bloc, pour une page dont la dernière bande doit toucher le pied (une image à fond perdu pensée pour couler dans le noir). C'est la seule sortie prévue, et elle se voit dans le markup. POURQUOI DEUX SÉLECTEURS ET PAS UN — constat de terrain, mesuré le 06/08 : `main > :last-child` seul N'A RIEN FAIT. Kadence Conversions glisse en fin de zone de contenu un marqueur vide, ``, qui est donc le vrai dernier enfant de `
` ; le dégagement se posait sur un span vide et en ligne, où un padding ne déplace rien. Le second sélecteur dit ce qu'on veut vraiment : « le bloc qui n'est suivi que par un élément VIDE ». Il est générique — il ne nomme aucune extension, et couvrira le prochain marqueur du même genre. `:not(:empty)` sur le premier évite au passage de peindre un padding inerte sur le marqueur lui-même. Repli si `:has()` n'était pas compris : le dégagement ne s'applique pas, la page revient au comportement d'avant — rien ne casse. ============================================================ */ main > :last-child:not(:empty), main > :has(+ :last-child:empty) { padding-bottom: var(--footer-clearance); } main > .lcdi-sans-degagement:last-child, main > .lcdi-sans-degagement:has(+ :last-child:empty) { padding-bottom: 0; } /* ============================================================ LE PIED EST UN CALQUE — retouche 9bis du bloc 3c (06/08, verdict de gate) « Le vélo n'est toujours pas à cheval sur le noir, à aucune largeur. » DEUX MESURES AVAIENT MENTI, et pour la même raison : `getBoundingClientRect` donnait 40 px de morsure des deux côtés, `elementFromPoint` confirmait que l'image était au premier plan. Les pixels rendus, eux, comptaient 37 lignes de morsure sur le live et 3 chez nous (`preuves/pixels-png.mjs`, capture décodée). Une boîte d'image inclut ses pixels transparents, et « être au premier plan » ne dit rien de ce qui a été peint DESSOUS. LA CAUSE, mesurée des deux côtés : nos sections sont `position: relative` — elles portent leurs coutures — et le pied était `static`. Un élément POSITIONNÉ se peint après les blocs en flux, même s'il vient AVANT lui dans le document : la dernière section, qui descend 34 px sous le haut de la rangée sombre (c'est la retouche 4, et elle est juste), repeignait son décor par-dessus le noir. Le live fait l'inverse — SA rangée sombre est `position: relative` (mesuré) — et son noir se voit dès le haut. CE N'EST DONC PAS UNE INVENTION : on rejoint la mécanique du live. PORTÉE : le calque est posé sur le PIED, pas sur la section. `.lcdi-band` est positionnée elle aussi ; une page finissant par une bande aurait eu le même défaut. Une seule règle règle la classe entière, pour toutes les pages. CE QUE ÇA NE CASSE PAS, et c'est vérifié à la mesure : - le contexte d'empilement créé ici est INTERNE au pied — la bande du picto (`relative`, z-index 1) y reste au-dessus des deux rangées sombres, qui sont en flux. Le vélo à cheval du pied est intact ; - la bande du picto reste TRANSPARENTE : le décor de la section continue de se voir au travers, puisque rien n'y est peint. La retouche 4 est entière ; - les vélos à cheval INTER-SECTIONS (chiffres clés sur le héros) ne passent pas par ici : ils vivent au niveau de la page, sous le calque 3. ============================================================ */ .lcdi-footer { position: relative; z-index: var(--layer-footer, 3); } /* LE PIED NE PEINT PLUS DE FOND — retouche 4 du bloc 3c (06/08). Il portait `background: var(--surface-page)`, ce qui donnait à sa bande de transition un aplat clair OPAQUE. Sur le live, cette bande est TRANSPARENTE (mesurée `rgba(0,0,0,0)`) et laisse voir le décor de la section qu'elle recouvre. Les deux rangées du pied portent déjà leur propre fond sombre : personne n'a besoin de celui-ci. */ /* --- 1. Bande de transition au picto vélo ------------------------------ */ /* AMENDÉ AU BLOC 3c (06/08, verdict Julien : « plus aucune bande blanche avant le pied »). Le bloc 3b avait rendu le picto à cheval sur la rangée sombre, mais laissait 100 px de blanc mesurés entre la dernière section et le pied. Le live n'en a AUCUN, et sa mécanique est mesurée (06/08, sonde `probe-3c-live-pied.js`, aux deux largeurs 1440 et 1600) : bande de transition hauteur 76 px, fond transparent, `margin-top: -110px` rangée sombre démarre 34 px AU-DESSUS du bas de la dernière section picto 192 × 116, part du HAUT de la bande et la déborde de 40 px vers le bas : c'est lui, le chevauchement. D'où les deux leviers ci-dessous, qui remplacent `--footer-crest-overlap` du bloc 3b (le chevauchement n'est plus une marge, c'est le débord du picto) : --footer-crest-band hauteur de la bande (76 px au relevé, 57 depuis le 17/08) --footer-crest-pull de combien elle remonte (110 px au relevé, 83 depuis le 17/08) Arithmétique, et elle se vérifie à la mesure : blanc = bande − remontée, soit 76 − 110 = −34 px. Le pied MORD la dernière section, il ne la suit pas. ============================================================ LE PICTO PASSE DE 192 À 144 px — DÉCISION DE JULIEN DU 17/08, ÉCART ASSUMÉ AU « À L'IDENTIQUE ». Le relevé live ci-dessus reste vrai, il ne commande plus. Les DEUX figures au picto vélo du site descendent ensemble et à la même valeur : celle-ci et la couture des pages internes (`crest.css`). Le motif est celui qui fixait déjà le repli téléphone à 100 px des deux côtés — deux figures du même dessin sur le même site ne peuvent pas avoir deux tailles. CE QUI EST RECALCULÉ, ET POURQUOI CES NOMBRES-LÀ. −25 % sur la largeur, donc −25 % sur les deux leviers, et les deux quantités qui FONT la figure gardent leurs proportions : picto 192 × 116 → **144 × 87** (144 × 116/192 = 87 exactement) bande 76 → **57** (76 × 0,75) remontée 110 → **83** (110 × 0,75 = 82,5, arrondi au pixel) Ce que ça produit : chevauchement du picto sur le bitume = hauteur − bande 116 − 76 = 40 px → 87 − 57 = **30 px** (soit 40 × 0,75, exact) morsure du pied sur la dernière section = remontée − bande 110 − 76 = 34 px → 83 − 57 = **26 px** (proportionnel : 25,5) L'ARRONDI SE FAIT VERS LE HAUT, ET C'EST UN CHOIX MOTIVÉ. 82,5 aurait été exact, mais deux choses le déconseillent : une remontée à demi-pixel pose la rangée sombre sur une demi-ligne, d'où un liseré d'un pixel selon l'arrondi du moteur ; et une morsure qui RÉTRÉCIT sous sa valeur proportionnelle est la direction qui ouvre un jour entre le pied et la dernière section — le défaut payé deux fois sur ce chantier (C2 du 13/08, C1 du 14/08). 83 garde la morsure à 26 px, au-dessus des 25,5 attendus : le pied mord, il ne flotte pas. LE REPLI TÉLÉPHONE NE BOUGE PAS (picto 100 px, bande 40, remontée 74) : il était déjà sous la taille décidée. ============================================================ `align-items: flex-start` : le picto part du haut de la bande, il ne se centre pas — sinon il déborderait aussi PAR LE HAUT, ce que le live ne fait pas. `position: relative` + `z-index` : sans eux le picto serait PEINT sous la rangée sombre (elle vient après lui dans le document, avec un fond opaque). */ .lcdi-footer__crest { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; height: var(--footer-crest-band, 57px); margin-top: calc(var(--footer-crest-pull, 83px) * -1); } /* 192 au relevé live, 144 par décision du 17/08 (voir l'en-tête). */ .lcdi-footer__crest img { width: 144px; height: auto; display: block; } /* --- 2. Rangée principale ---------------------------------------------- */ .lcdi-footer__main { background: var(--surface-structure); color: var(--text-on-night); } /* GOUTTIÈRE LATÉRALE — retouche 10 du bloc 3c (06/08, verdict de gate) « Il manque du padding dans le pied, le logo est collé au rebord » (constaté vers 1340-1400 de largeur). La mesure dit pourquoi : la grille est bornée à 1290 px et centrée, donc entre 1290 et ~1400 la marge automatique ne vaut presque rien et il ne reste que les 24 px de padding. largeur | premier contenu du pied, avant | live rendu | 1340 | 49 px du bord | 96 px | 1440 | 99 px | 146 px | 1920 | 339 px | 386 px | ATTENTION, ÉCART DE LECTURE À SIGNALER : le gate annonçait « le live fait ~49 px à 1340, jugé trop juste, c'est une amélioration assumée ». 49 px est la boîte de contenu du live — mais son PREMIER CONTENU RENDU est à 96 px, parce que ses colonnes Kadence ajoutent leur propre marge intérieure. Mesuré, donc : ce n'est PAS une amélioration vis-à-vis du live, c'est un RETOUR AU LIVE. Notre grille n'avait simplement pas l'équivalent de cette marge de colonne. `--space-8` (72 px) est le cran d'échelle qui la reconstitue : 24 (le padding relevé) + 48 de marge de colonne ≈ 72. Résultat attendu à ±1 px du live aux trois largeurs. En téléphone, la gouttière redescend au bord de page : 72 px de chaque côté sur 390 px de large ne laisseraient rien au contenu. */ .lcdi-footer__grid { max-width: var(--container); margin-inline: auto; padding: 1.8rem var(--footer-gutter, var(--space-8)); /* 28,8 px relevé / gouttière */ display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 0; row-gap: var(--space-6); /* 32 px, relevé */ } .lcdi-footer__logo img { width: 200px; height: auto; display: block; } /* relevé : rendu 200 × 146 */ .lcdi-footer__baseline { font-family: var(--font-display); font-size: var(--type-h6); /* 18 px, relevé */ color: var(--text-on-night); margin-top: var(--space-4); } .lcdi-footer__title { font-family: var(--font-display); font-size: var(--type-subtitle); /* 24,96 px relevé → cran H4 de l'échelle */ font-weight: var(--weight-strong); color: var(--text-on-night); margin-bottom: var(--space-4); } /* Liens du pied : blancs à puce chevron accent (relevé) */ .lcdi-footer__links { list-style: none; margin: 0; padding: 0; } .lcdi-footer__links li { margin-bottom: var(--space-2); } .lcdi-footer__links a { color: var(--text-on-night); display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; } .lcdi-footer__links a::before { content: ""; width: .45em; height: .45em; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); flex: none; } .lcdi-footer__links a:hover, .lcdi-footer__links a:focus { color: var(--accent); text-decoration: underline; } .lcdi-footer__links a:focus-visible { box-shadow: var(--focus-ring-night); border-radius: var(--radius-s); } /* Icônes sociales : INTERACTIVES, donc elles consomment le rôle de lien du contexte nuit (le teal d'origine, 6,58:1 sur bitume), jamais `--icon`. */ .lcdi-footer__social { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); } /* `text-decoration: none` explicite : le parent souligne les liens de contenu (`link-style-*`), et un soulignement hérité sur un lien-icône trace un filet sous le SVG. Mesuré au computed le 05/08 (`textDecoration: underline` au repos) avant correction. */ .lcdi-footer__social a { display: inline-flex; color: var(--accent); text-decoration: none; } .lcdi-footer__social a:hover, .lcdi-footer__social a:focus { color: var(--link-hover); } .lcdi-footer__social svg { width: 35px; /* relevé */ height: 35px; fill: currentColor; display: block; transition: fill var(--t-quick) var(--ease-brand), transform var(--t-quick) var(--ease-brand); } .lcdi-footer__social a:hover svg { transform: translateY(var(--lift-btn)); } .lcdi-footer__social a:focus-visible { box-shadow: var(--focus-ring-night); border-radius: var(--radius-s); } /* Coordonnées — AMENDEMENT 1 : une RANGÉE d'icônes de 35 px, mesurée sur le live le 05/08 (le libellé reste possible, il ne l'est simplement pas ici). (Le clone porte 3 coordonnées de plus que le live : écart de contenu à revoir à la resynchronisation depuis la prod, complément § 7.) */ .lcdi-footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-5); } .lcdi-footer__contact a { color: var(--accent); display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; } .lcdi-footer__contact a:hover, .lcdi-footer__contact a:focus { color: var(--link-hover); } .lcdi-footer__contact svg { width: 35px; /* relevé live 05/08 : 35 × 35 */ height: 35px; fill: currentColor; flex: none; display: block; transition: fill var(--t-quick) var(--ease-brand), transform var(--t-quick) var(--ease-brand); } .lcdi-footer__contact a:hover svg { transform: translateY(var(--lift-btn)); } .lcdi-footer__contact a:focus-visible { box-shadow: var(--focus-ring-night); border-radius: var(--radius-s); } /* AMENDEMENT 2 — la pile d'actions de la 3e colonne. Les boutons eux-mêmes viennent de `buttons.css` (voix 1 puis voix 2) : ici, rien d'autre que le rythme vertical. */ .lcdi-footer__actions { display: flex; flex-direction: column; gap: var(--space-4); } /* --- 3. Barre de crédits ------------------------------------------------ */ /* AMENDÉE AU BLOC 3c (retouche 14, 06/08, verdict de gate) — « trop grosse et mal intégrée ». Elle rendait du corps de texte (18 px) en BLANC PUR sur le bitume : la même encre que les titres du pied, pour une mention de bas de page. Elle attirait l'œil plus que le contenu qu'elle suit. RELEVÉ LIVE (1440) : 16 px, blanc pur lui aussi, lien teal souligné en gras. Le live est donc à peine plus discret que nous. Le verdict demande « iso live ou légèrement mieux » : on descend d'un cran de plus et on atténue l'encre. taille `--type-fine` (14 px) — le cran bas de l'échelle ; en dessous il n'y a que `--type-badge`, réservé aux pastilles encre `--text-soft` — en contexte nuit il vaut rgba(255,255,255,.72), soit **9,94:1** sur le bitume (calculé sur la composition réelle) : largement AA, même en petit texte liens inchangés, `--accent` sur bitume = **6,58:1**, AA conservé — c'est la condition posée par le gate `strong` garde l'encre pleine : le nom de l'association et celui du créateur restent les deux points d'appui de la ligne rythme la marge intérieure passe à `--rythme-titre` (16 px) en haut comme en bas, au lieu du 4/16 dissymétrique d'avant */ .lcdi-footer__credits { background: var(--surface-structure); color: var(--text-soft); text-align: center; padding: var(--rythme-titre) var(--page-edge); font-size: var(--type-fine); line-height: var(--lh-body); } .lcdi-footer__credits p { margin: 0; } /* --- Informations légales (verdict Julien du 20/08, gate de recette) ------- Cinq liens dans la bande de crédits, en une ligne qui se replie d'elle-même : `flex-wrap` plutôt qu'une grille, parce que les libellés n'ont pas la même longueur et qu'une grille laisserait des trous. Les séparateurs sont dessinés (`::before` sur les items suivants) et non écrits : un caractère « | » dans le balisage serait lu à voix haute par un lecteur d'écran, cinq fois. Tokens seuls, aucune valeur en dur : espacements de l'échelle, encre douce du bandeau, `--accent` sur les liens comme le reste de la bande (contraste 6,58:1 sur bitume, l'acquis du gate). */ .lcdi-footer__legal { margin-bottom: var(--rythme-titre); } .lcdi-footer__legal-titre { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: var(--weight-strong); color: var(--text-on-night); } .lcdi-footer__legal-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-2) var(--space-4); } /* Le séparateur appartient à l'espace entre deux liens : il se pose dans la gouttière, à mi-distance, et disparaît avec elle quand la ligne se replie. */ .lcdi-footer__legal-liens li { position: relative; } .lcdi-footer__legal-liens li + li::before { content: ""; position: absolute; inset-block: 0.15em 0.05em; inset-inline-start: calc( var(--space-4) / -2 ); border-inline-start: 1px solid currentColor; opacity: 0.45; } @media (max-width: 767px) { /* En colonne, les traits verticaux n'ont plus de gouttière où vivre. Et l'axe change de sens : `justify-content` ne centre plus rien horizontalement, c'est `align-items` qui prend le relais — sans lui, les cinq liens se collaient au bord gauche sous un titre centré (constat au navigateur, 390 px, 21/08). */ .lcdi-footer__legal-liens { flex-direction: column; align-items: center; gap: var(--space-2); } .lcdi-footer__legal-liens li + li::before { content: none; } } .lcdi-footer__credits a { color: var(--accent); text-decoration: underline; } .lcdi-footer__credits a:hover, .lcdi-footer__credits a:focus { color: var(--link-hover); } .lcdi-footer__credits a:focus-visible { box-shadow: var(--focus-ring-night); border-radius: var(--radius-s); } .lcdi-footer__credits strong { color: var(--text-on-night); font-weight: var(--weight-strong); } @media (max-width: 767px) { /* La gouttière du pied redescend au bord de page : sur 390 px de large, 72 px de chaque côté ne laisseraient que 246 px au contenu. */ .lcdi-footer__grid { --footer-gutter: var(--page-edge); } } @media (max-width: 1024px) { .lcdi-footer__grid { grid-template-columns: 1fr; } .lcdi-footer__crest img { width: 100px; } /* relevé mobile : 100 × 60,4 */ /* Le picto rétrécit (100 × 60,4) : la bande doit rétrécir avec lui, sinon il flotte au milieu sans plus rien déborder. Les deux valeurs sont DÉDUITES, pas relevées — le live n'a pas été mesuré sous 1025 px au bloc 3c — et elles conservent les deux acquis du bloc 3b : chevauchement de 20 px du picto sur le bitume (60,4 − 40 ≈ 20) et morsure de 34 px du pied sur la section (40 − 74 = −34), la même qu'en desktop. Signalé au rapport. */ .lcdi-footer__crest { --footer-crest-band: 40px; --footer-crest-pull: 74px; } }