/* ============================================================ RYTHME DE PAGE — conteneurs et sections NOUVEAU FICHIER (bloc 3 de l'É4, 06/08), et c'est un DÉMÉNAGEMENT, pas une invention : ces quatre règles vivaient dans `_base.css`. Elles en sortent pour une raison de production, pas d'esthétique. POURQUOI LES SÉPARER : `_base.css` est le socle d'ÉLÉMENTS (body, titres, liens, paragraphes). Le transporter dans le child theme repeindrait les 31 pages encore rendues par le thème parent — exactement ce que le gate du bloc 1 a refusé de faire (« le remap global dégradait le contraste des zones sombres héritées »). Or les gabarits du build ont besoin du CONTENEUR et de la SECTION, tout de suite. Les deux familles n'ont donc pas le même calendrier : elles n'ont plus le même fichier. Aucune valeur ne change. `_base.css` garde tout le reste. ============================================================ */ .lcdi-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--page-edge); } .lcdi-container--narrow { max-width: var(--container-narrow); } .lcdi-container--wide { max-width: var(--container-wide); } .lcdi-section { padding-block: var(--space-8); } .lcdi-section--tight { padding-block: var(--space-7); } /* Une section porte son monde : `data-theme="nuit"` remappe les rôles, il ne suffit pas de poser un fond sombre à la main (règle d'usage de la planche). */ .lcdi-section[data-theme] { background: var(--surface-page); color: var(--text-body); } /* --- Section à décor photographique (bloc 3) --------------------------- Relevé sur « Événements passés » : la bande porte une image de fond en `cover`. Le contenu passe DEVANT les coutures de section (z-index 1) et devant le décor. */ .lcdi-section--media { position: relative; background: var(--surface-page) center / cover no-repeat; } .lcdi-section--media > * { position: relative; z-index: 2; } /* --- Section qui porte une couture (bloc 5a, 10/08) --------------------- Une couture est en position absolue : sans ancêtre positionné, elle irait se coller au viewport. `.lcdi-band` et `.lcdi-section--media` le sont déjà ; une section ORDINAIRE qui porte une crête, elle, ne l'était pas — et c'est le cas de « Modalités d'inscription » comme du mur de sponsors de « Partenaires ». L'isolation est là pour la même raison que sur la bande : les coutures vivent dans CE contexte d'empilement, jamais dans celui de la page. */ .lcdi-section--couture { position: relative; isolation: isolate; } .lcdi-section--couture > *:not(.lcdi-sep) { position: relative; z-index: 2; } /* --- Surfaces d'une section (bloc 5a) ---------------------------------- Relevé : les sections du site alternent trois fonds et pas un de plus — la surface de page, la surface alternée, et rien (la page transparaît). Elles se nomment ici comme les bandes les nomment déjà (`.lcdi-band--chaud`). */ .lcdi-section--page { background: var(--surface-page); } .lcdi-section--chaud { background: var(--surface-warm); } /* --- Le dégradé de club, sur photo (bloc 5a) --------------------------- RELEVÉ tel quel dans le CSS servi par le live pour « Demande d'adhésion » (`linear-gradient(180deg, palette9 0%, palette1 59%, palette5 100%)`, voile à 30 %). Les trois arrêts sont des couleurs de la palette, reprises par leur token : blanc en haut, maillot aux deux tiers, poussière en bas. */ .lcdi-section__voile--club { background: linear-gradient(180deg, var(--brand-blanc) 0%, var(--brand-maillot) 59%, var(--brand-poussiere) 100%); opacity: .3; } .lcdi-section--centre { text-align: center; } /* --- Le voile d'une section à décor photographique (bloc 5a, 10/08) ----- Relevé sur « Demande d'adhésion » (Adhérer) : la photo de fond porte un dégradé vertical à 30 % d'opacité, blanc en haut, accent au deux tiers, gris en bas. Il vient APRÈS `.lcdi-section--media > *` dans le fichier : à poids égal (0,1,0), c'est l'ordre qui le fait redescendre sous le contenu sans qu'il ait à porter un poids de plus. */ .lcdi-section__voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--section-voile, none); opacity: var(--section-voile-opacite, 1); } /* ============================================================ COLONNES QUI EMPILENT — `.lcdi-colonnes` (bloc 5a, 10/08) NAISSANCE : deux sections du lot posent la même figure, et ce n'est ni une grille ni une liste — ce sont N COLONNES, chacune empilant SES propres éléments à SA hauteur, sans que les rangées s'alignent entre elles : « Adhérer » huit plaques de modalité en 2 × 4 « Caritatif » quatre panneaux de liste en 2 × 2, de hauteurs très inégales Une `.lcdi-grid` alignerait les rangées et laisserait des trous sous les éléments courts ; c'est exactement ce que le live ne fait pas (mesuré : la deuxième plaque de gauche démarre 76 px plus haut que celle de droite). La gouttière est celle de la grille (32 px relevés, `--gap-grid`), dans les deux sens. En pile, une seule colonne : l'ordre de lecture reste celui du DOM, colonne après colonne. ============================================================ */ .lcdi-colonnes { display: grid; grid-template-columns: repeat(var(--colonnes, 2), minmax(0, 1fr)); gap: var(--gap-grid); align-items: start; } .lcdi-colonnes__col { display: flex; flex-direction: column; gap: var(--gap-grid); min-width: 0; } @media (max-width: 767px) { .lcdi-colonnes { grid-template-columns: 1fr; gap: var(--gap-grid-tight); } .lcdi-colonnes__col { gap: var(--gap-grid-tight); } } /* ============================================================ RYTHME VERTICAL D'UNE SECTION — `.lcdi-rythme` (bloc 3c, É4, 06/08) NAISSANCE : verdict du gate du bloc 3b, 2e passe — « rythme vertical professionnel, mesuré, pas au jugé ». Le relevé du child au 06/08 (sonde `probe-3c-child.js`) montrait deux sections sœurs à deux rythmes : colonne de contenu des bandes ... 16 px partout, sans distinction — surtitre→titre, titre→texte, texte→grille, grille→bouton « Événements passés » ........... 10 px surtitre→titre (la marge propre du surtitre), 0 px titre→carrousel, 32 px carrousel→bouton Le premier n'a plus de hiérarchie, le second n'a pas de règle. Cette classe est le cran commun, et elle tient en une phrase : 16 px À L'INTÉRIEUR D'UN GROUPE — un surtitre, son titre, le bloc qu'il introduit — ET 32 px D'UN GROUPE AU SUIVANT. Elle ne pose aucune valeur : elle consomme `--rythme-titre` et `--rythme-bloc`, définis dans `tokens.css` § RYTHME VERTICAL sur des crans d'échelle existants (`--space-4`, `--space-6`). MÉCANIQUE : la gouttière du conteneur donne le rythme SERRÉ ; les blocs de contenu et les titres reprennent la DIFFÉRENCE en marge haute. Deux exceptions les ramènent au serré, et ce sont elles qui font la règle — un bloc introduit par son titre lui reste collé, un titre précédé de son surtitre aussi. ============================================================ */ .lcdi-rythme { display: flex; flex-direction: column; gap: var(--rythme-titre); } /* LE RESET DE MARGE DOIT GAGNER CONTRE LES MARGES PROPRES DES ENFANTS, et `layout.css` est la PREMIÈRE feuille de la cascade (voir l'ordre dans `inc/sections.php`) : à poids égal (0,1,0), c'est l'enfant qui l'emporte. Le cas est réel, il a été MESURÉ après coup le 06/08 : le surtitre porte `margin-bottom: .625rem` (10 px relevés) ; dans une colonne en flux flexible cette marge S'AJOUTE à la gouttière, et « Événements passés » rendait 26 px entre le surtitre et le titre là où le rythme en demande 16. D'où la seconde ligne, à (0,2,0), qui passe devant. */ .lcdi-rythme > *, .lcdi-rythme > .lcdi-eyebrow { margin-block: 0; } /* Les blocs de contenu du bloc 5a (`.lcdi-colonnes`, la pile d'accordéons) entrent dans la MÊME liste : ils sont des groupes au même titre qu'une grille de cartes, et rien ne justifierait qu'ils respirent autrement. `.lcdi-notice` LES REJOINT AU CORRECTIF 0.9.24 (30/08), sur un défaut mesuré. Un encart posé en enfant direct d'une section rythmée n'est pas la légende du paragraphe qui le précède : c'est le GROUPE D'APRÈS, exactement le motif déjà gravé pour l'aparté du calendrier (notice.css § RETOUCHES DU GATE, point 1). Sans lui, le panneau « Vous êtes déjà membre LCDI » de `/adherer/` rendait 16 px entre le texte d'introduction et son bord haut, aux DEUX vues (1440 et 375) : le rythme serré, celui de l'intérieur d'un groupe, là où la règle en demande 32. PORTÉE DU GESTE, RELEVÉE AU NAVIGATEUR ET PAS DÉDUITE DU CODE (cinq pages témoins mesurées avant et après, 30/08) : DEUX objets sur tout le site. 1. le panneau de `/adherer/`, 16 -> 32 px sous le texte d'introduction ; 2. la mention « Offert avec votre première adhésion » de la fiche Maillot, 16 -> 32 px sous l'accordéon des tailles. Elle SUIT un groupe, elle n'en est pas la légende : le cran d'air la remet à sa place, et son icône reste collée à sa phrase (voir `notice.css`, variante `--ligne`). Les quatre autres notices mesurées ne bougent pas d'un pixel : les trois encarts de réassurance et la ligne « maillot offert » de la boutique, et l'encart de la page 404. Elles vivent sous une grille, une bande ou un conteneur nu, jamais en enfant direct d'un `.lcdi-rythme`. Le relevé de code, lui, avait raté la fiche produit : son `.lcdi-rythme` est posé par le gabarit SureCart, pas par une section du child. */ .lcdi-rythme > :is(.lcdi-grid, .lcdi-logowall, .lcdi-carousel, .lcdi-stats, .lcdi-btn-group, .lcdi-colonnes, .lcdi-volets, .lcdi-notice, h2, h3, h4) { margin-top: calc(var(--rythme-bloc) - var(--rythme-titre)); } /* L'exception vaut pour l'encart comme pour les autres blocs : un titre qui l'introduit le garde collé à lui, sinon le titre cesserait d'être le sien. */ .lcdi-rythme > :is(h2, h3, h4) + :is(.lcdi-grid, .lcdi-logowall, .lcdi-carousel, .lcdi-stats, .lcdi-colonnes, .lcdi-volets, .lcdi-notice), .lcdi-rythme > .lcdi-eyebrow + :is(h2, h3, h4) { margin-top: 0; } .lcdi-rythme > :first-child { margin-top: 0; } /* --- Registre documentaire : chiffres alignés (prix, dates, compteurs) -- */ .lcdi-data { font-family: var(--font-data); font-variant-numeric: var(--numeric-data); color: var(--data-ink); } /* ============================================================ L'ÉCHELLE DE TYPE REPREND SES DROITS DANS NOS SECTIONS (bloc 3b, 06/08) Verdict du gate : « adaptation laptop 1280-1440 en fluide ». Le premier constat n'était pas une affaire de colonnes, c'était une affaire de titres : MESURÉ à 1280, 1366 et 1440, le titre de l'encart « Suivez-nous » rendait 26,88 px aux TROIS largeurs. Rien ne bougeait. CAUSE : les tokens portent bien une échelle fluide (`--type-display` et ses sœurs sont des `clamp()`), mais rien ne l'appliquait aux balises de titre — `_base.css`, qui le fait, n'est volontairement PAS transporté (il repeindrait les 31 pages encore rendues par le thème parent, refus du gate du bloc 1). Les titres héritaient donc des tailles FIXES du parent Kadence. PORTÉE : `body.lcdi-page-sections`, c'est-à-dire les seules pages montées en sections. Le parent garde les siennes. Poids (0,1,2) : au-dessus du (0,1,1) avec lequel Kadence adresse ses titres. ============================================================ */ body.lcdi-page-sections h1 { font-size: var(--type-hero); line-height: var(--lh-tight); } body.lcdi-page-sections h2 { font-size: var(--type-display); line-height: var(--lh-title); } body.lcdi-page-sections h3 { font-size: var(--type-title); line-height: var(--lh-snug); } body.lcdi-page-sections h4 { font-size: var(--type-subtitle); line-height: var(--lh-snug); } body.lcdi-page-sections h5 { font-size: var(--type-h5); line-height: var(--lh-snug); } body.lcdi-page-sections h6 { font-size: var(--type-h6); line-height: var(--lh-snug); } @media (max-width: 767px) { .lcdi-container { padding-inline: var(--page-edge-mobile); } .lcdi-section { padding-block: var(--space-7); } }