/* ============================================================ CARTES ET GRILLES — l'infobox, la carte d'actualité, la grille du site Relevé § 5.3 : la carte type du site est l'infobox Kadence — `border: 2px solid palette7` sur les 4 côtés, `height: 100%`, fond blanc, rayon 8 px, icône teal centrée, titre Roboto Slab 24/600 #111111, texte 16 px. Elle porte les grilles « valeurs », « avantages à adhérer », « coordonnées ». Les cartes de post-grid (actualités, événements passés) ont le même rayon, une image en `cover`, un titre H4 en teal foncé, et le zoom au survol. Grilles rendues (relevé § 4.4) : 340 ×2 (gap 16) · 209,5 ×4 (gap 16/32) · 392,66 ×3 (gap 32) · 414 ×3 (pied). Gouttières du site : 32 et 16 px. ATTENTION MESURE : la bordure `#e0eaec` sur fond clair est à 1,15:1. C'est un filet DÉCORATIF : il ne doit jamais être le seul signal d'un état ou d'une limite fonctionnelle (règle d'usage de la planche). ============================================================ */ /* --- La grille ---------------------------------------------------------- */ .lcdi-grid { display: grid; gap: var(--gap-grid); /* 32 px, la gouttière du site */ grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } .lcdi-grid--2 { --cols: 2; } .lcdi-grid--3 { --cols: 3; } .lcdi-grid--4 { --cols: 4; } .lcdi-grid--tight { gap: var(--gap-grid-tight); } /* 16 px */ /* Enveloppe d'une cellule — AJOUTÉE AU BLOC 3b (06/08), et pour une raison de cascade, pas de mise en page : c'est ELLE qui porte l'animation d'entrée de la carte, comme la colonne la porte sur le site live. Le motif est mesurable : la feuille d'AOS pose `[data-aos^="fade"][data-aos^="fade"].aos-animate { transform: translateZ(0) }`, de poids (0,3,0). Le soulèvement au survol de la carte, `.lcdi-card--link:hover`, ne pèse que (0,2,0) : animer la carte elle-même lui coûterait son survol. L'enveloppe ne peint rien ; elle transmet la hauteur de la rangée. */ .lcdi-grid__item { display: flex; min-width: 0; } .lcdi-grid__item > .lcdi-card { width: 100%; } @media (max-width: 1024px) { .lcdi-grid { --cols: 2; } } @media (max-width: 767px) { .lcdi-grid { --cols: 1; } } /* --- La carte ----------------------------------------------------------- */ .lcdi-card { display: flex; flex-direction: column; height: 100%; background: var(--surface-raised); border: 2px solid var(--border-soft); /* 2 px, relevé */ border-radius: var(--radius-m); /* 8 px */ overflow: hidden; isolation: isolate; transition: border-color var(--t-soft) var(--ease-brand), box-shadow var(--t-soft) var(--ease-brand), transform var(--t-soft) var(--ease-brand); } .lcdi-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .lcdi-card__title { font-family: var(--font-display); font-size: var(--type-subtitle); /* 24 px, relevé */ font-weight: var(--weight-strong); color: var(--text-strong); margin: 0; } .lcdi-card__text { margin: 0; color: var(--text-body); } .lcdi-card__foot { margin-top: auto; padding-top: var(--space-3); } /* Icône informative de l'infobox : teal, alignée COMME LE TEXTE de sa carte. Sur fond clair elle consomme `--icon` (l'encre du teal, 5,30:1) — l'accent d'origine n'atteint pas le seuil non-texte de 3:1 (2,69:1). */ .lcdi-card__icon { display: flex; align-items: center; justify-content: center; width: var(--card-icon, 30px); /* AMENDÉ AU BLOC 3 (06/08) : la planche montrait 48 px, valeur de travail ; la MESURE du live donne 30 px. C'est la mesure qui fait foi. */ height: var(--card-icon, 30px); fill: var(--icon); color: var(--icon); /* LA BOÎTE DE L'ICÔNE ÉPOUSE SON DESSIN, ELLE NE S'ÉTIRE PAS — lot 8 (25/08, constat de Julien sur « Événements d'exception », Adhérer). `.lcdi-card__body` est une colonne `flex` sans `align-items` : ses enfants sont donc en `stretch`. La variante SVG ne le voit pas (elle a une largeur définie, 30 px) ; la variante IMAGE est en `width: auto` et s'étirait à TOUTE la largeur du corps — son `justify-content: center` recentrait alors le dessin au milieu de la carte. MESURÉ à 1280 sur /adherer/, avant correctif (`diag-cartes.mjs`) : les trois cartes à icône SVG posent leur dessin à x = 26, comme leur titre ; « Événements d'exception » le posait à x = 119 dans une boîte de 236 px. La déclaration est sur la BASE et non sur la variante image : une icône ne s'étire jamais, quelle que soit sa matière. Le centrage d'une carte centrée passe, lui, par `margin-inline: auto` plus bas — des marges automatiques l'emportent sur `align-self` en flexbox, la variante centrée ne bouge donc pas d'un pixel. */ align-self: start; } .lcdi-card__icon svg { width: 100%; height: 100%; fill: currentColor; } /* Variante IMAGE de l'icône : le picto du club, servi depuis la médiathèque. Il n'est pas carré (124 × 75 relevé) : il se contient, il ne se déforme pas. */ .lcdi-card__icon--image { width: auto; height: var(--card-icon, 30px); } .lcdi-card__icon--image img { width: auto; height: 100%; object-fit: contain; } .lcdi-card--center { text-align: center; } .lcdi-card--center .lcdi-card__body { align-items: center; } /* LE CENTRAGE DE L'ICÔNE SUIT LA CARTE, IL NE LA PRÉCÈDE PLUS (recette É4, 22/08, décision Julien). `margin-inline: auto` vivait sur `.lcdi-card__icon` SANS CONDITION : sur une carte alignée à gauche, l'icône restait au milieu pendant que le titre et le texte partaient à gauche — le défaut retoqué au design de la 404, et déjà visible sur la bande « Pourquoi rejoindre LCDI ? » d'Adhérer. La déclaration descend donc dans la variante qui la justifie. Elle y est REDONDANTE (`.lcdi-card--center .lcdi-card__body` pose déjà `align-items: center`) et c'est voulu : le centrage d'une carte centrée ne doit pas dépendre du seul mode d'affichage de son corps. */ .lcdi-card--center .lcdi-card__icon { margin-inline: auto; } /* --- Carte cliquable : elle se soulève, comme les boutons (gate 1) ------ */ .lcdi-card--link:hover { border-color: var(--border-accent); box-shadow: var(--shadow-float); transform: translateY(var(--lift-card)); } a.lcdi-card--link { text-decoration: none; color: inherit; } /* Une carte d'accent qui est AUSSI un lien : `color: inherit` ci-dessus pèse (0,1,1) et reprendrait l'encre du monde clair à la variante d'aplat, qui ne pèse que (0,1,0). Même poids, plus loin dans le fichier : l'aplat gagne. Sans visée aujourd'hui (titre et texte posent leur couleur), mais tout texte ajouté demain en direct dans la carte serait rendu en gris sur teal. */ a.lcdi-card--accent { color: var(--text-on-night); } a.lcdi-card--link:focus-visible { box-shadow: var(--focus-ring); } /* --- Variante ACCENT (la carte « Découvrir » teal de l'accueil) --------- Aplat d'accent : le texte y est BLANC et de grande taille uniquement (blanc sur teal = 2,87:1). Cette carte ne porte jamais de corps de texte. */ .lcdi-card--accent { background: var(--accent); border-color: var(--accent); color: var(--text-on-night); } .lcdi-card--accent .lcdi-card__title, .lcdi-card--accent .lcdi-card__text { color: var(--text-on-night); } .lcdi-card--accent .lcdi-card__text { font-size: var(--type-lead); } .lcdi-card--accent .lcdi-card__icon { fill: var(--text-on-night); color: var(--text-on-night); } /* --- Variante MÉDIA (carte d'actualité / événement passé) --------------- */ .lcdi-card__media { aspect-ratio: 16 / 9; } .lcdi-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-scene) var(--ease-brand); } .lcdi-card--link:hover .lcdi-card__media img { transform: scale(var(--zoom-media)); } /* Titre de carte d'événement : H4 en teal foncé (relevé). Sur blanc il mesure 4,01:1 ; à 24 px il est du GRAND TEXTE (seuil 3:1) et reste conforme. */ .lcdi-card__title--event { color: var(--accent-strong); } /* ============================================================ VARIANTE DOUCE — la carte sur la surface de page (bloc 5a, 10/08) RELEVÉ, pas choix : les quatre cartes d'« Adhérer » et les quatre panneaux de « Caritatif » ALTERNENT leur fond entre #ffffff et #f5f8f9 (mesuré sur le live : cartes 1 et 4 en aube, 2 et 3 en blanc). L'écart est d'un cheveu à l'œil, mais il existe, il est régulier, et il est du contenu — c'est un réglage posé carte par carte dans l'éditeur, pas un accident. Reproduire une alternance coûte une classe ; l'ignorer coûterait une question au gate. La page passe donc le fond, la carte l'applique. ============================================================ */ .lcdi-card--doux { background: var(--surface-page); } /* --- Variante PANNEAU (posé sur nuit) ---------------------------------- */ .lcdi-card--panel { background: var(--surface-night-raised); border-color: var(--border-night); box-shadow: var(--shadow-deep); } /* ============================================================ AMENDEMENT DU BLOC 3 (É4, 06/08) — LA CARTE D'ÉVÉNEMENT ET SA PLAQUE Mesuré sur le live : la carte du carrousel « Événements passés » n'a ni fond ni filet ; c'est une photo CARRÉE (ratio 100 %) sur laquelle une plaque claire remonte de 45 px et porte le titre. La v1 supposait une carte à corps ; ici le titre EST la carte. carte 394 × 439, rayon 8 photo 394 × 394 (1:1) plaque 344 de large (25 px de retrait de chaque côté), fond #f5f8f9, marge haute -45 px, titre Roboto Slab 24/600 #4f8796 centré ============================================================ */ .lcdi-card--event { background: transparent; border: 0; border-radius: var(--radius-m); overflow: visible; /* la plaque remonte HORS de la photo : un `overflow: hidden` la couperait */ } .lcdi-card--event .lcdi-card__media { aspect-ratio: 1; border-radius: var(--radius-m); overflow: hidden; } /* ============================================================ AMENDEMENT DU BLOC 3c (06/08) — LA PLAQUE REPASSE AUX VALEURS DU LIVE Constat du gate : « titre plus gros → 3 lignes, débords inégaux ». La MESURE au pixel (sonde `probe-3c-plaque.js`, live à 1600, carte de 394 px) dit d'où ça venait — trois écarts, pas un : | | live | child (bloc 3b) | |---|---|---| | à cheval sur l'image | **30 px** | 48 px | | marge latérale | 25 px/côté (plaque = carte − 50) | 24 px/côté | | marge intérieure | **0 px** à gauche et à droite | 16 px | | interligne du titre | **25 px** pour 24 px de corps | 31,2 px (1,3) | C'est la marge intérieure qui coûtait le plus cher : elle amputait la ligne de texte de 32 px, et c'est cette largeur perdue — pas la taille du titre, mesurée à 24 px des deux côtés — qui poussait les titres longs sur une troisième ligne. Le live laisse le texte occuper toute la plaque ; la respiration vient du retrait de 25 px de la plaque dans la carte. MAPPAGE SUR L'ÉCHELLE, cran le plus proche à chaque fois (les écarts sont consignés au rapport, ils valent 1 px) : 25 px de retrait → `--space-5` (24 px) 10 px de padding → `--space-3` (12 px) 15 px de padding → `--space-4` (16 px) 25 px d'interligne → `--lh-flat` (1 → 24 px), le cran plat de l'échelle Seul le CHEVAUCHEMENT n'a pas de cran : 30 px n'est pas sur l'échelle d'espacement, et l'arrondir au cran voisin (32) déplacerait la plaque de la valeur exacte que le gate a demandé de reproduire. Il passe donc par un levier NOMMÉ et SOURCÉ, comme les rayons de panneau du bloc 3b. ============================================================ */ .lcdi-card__plate { /* BLOC : elle est rendue par un ``, et sans cette ligne elle reste en ligne — le fond ne peint alors que derrière chaque LIGNE de texte, les marges latérales ne s'appliquent pas et un titre sur deux lignes se découpe en deux étiquettes décalées. Constat du gate du bloc 3 (« cartes événements à l'identique du live ») : mesuré `display: inline`. */ display: block; position: relative; z-index: 1; margin: calc(var(--event-plate-overlap, 30px) * -1) var(--space-5) 0; padding: var(--space-3) 0 var(--space-4); background: var(--surface-page); text-align: center; /* L'INTERLIGNE SE POSE SUR LA PLAQUE, PAS SEULEMENT SUR LE TITRE — mesuré le 06/08 après le premier jet de cette retouche. Le titre est rendu par un ``, donc en ligne : sa hauteur de ligne ne commande QUE ses propres boîtes de ligne, jamais le « strut » de la boîte de bloc qui l'accueille. La plaque héritait donc l'interligne du corps (1,6 × 18 px = 28,8 px) et chaque ligne de titre en prenait 28,8 au lieu de 24 : deux lignes rendaient 57,6 px de contenu, contre 50 sur le live. Posé ici, le strut descend à 24 px et la plaque retrouve la hauteur du live. */ line-height: var(--lh-flat); } .lcdi-card__plate .lcdi-card__title { font-size: var(--type-subtitle); line-height: var(--lh-flat); } a.lcdi-card--event { display: block; color: inherit; text-decoration: none; } a.lcdi-card--event:hover { transform: none; box-shadow: none; } a.lcdi-card--event:hover .lcdi-card__media img { transform: scale(var(--zoom-media)); } a.lcdi-card--event:focus-visible { box-shadow: var(--focus-ring); } /* ============================================================ CARTE ÉVÉNEMENT, PLAQUE INCRUSTÉE — la grille d'« Événements passés » NOUVELLE VARIANTE (bloc 5a, vague A2, 10/08). MÊME FIGURE, AUTRE POSE. La carte du carrousel d'accueil laisse sa plaque DESCENDRE hors de la photo (30 px à cheval, le reste sous l'image) ; celle de la page « Événements passés » la pose DEDANS, calée en bas. C'est le même objet — photo carrée, plaque claire, titre teal centré — donc un modificateur, pas un second composant : deux fichiers divergeraient au premier correctif de plaque, et la retouche du bloc 3c (interligne, retraits) a déjà montré ce que coûte une plaque mal réglée. RELEVÉ (live 1440, sonde `probe-5a2-live.js` du 10/08, carte de 350 px) : carte 350 × 350, rayon 8, `overflow: hidden` plaque calée en bas, retrait 24 px sur les trois côtés largeur au contenu, plafonnée à carte − 48 (301 px mesurés sur le titre le plus long, pour 302 disponibles) fond #f5f8f9 · texte 20 px/600 centré · marge intérieure 5 / 15 MAPPAGE SUR L'ÉCHELLE (cran le plus proche, écarts consignés au rapport) : 24 px de retrait → `--space-5` (24 px), exact 15 px de padding → `--space-4` (16 px), 1 px 5 px de padding → `--space-1` (4 px), 1 px 20 px de titre → `--type-h5` (20 px), exact ============================================================ */ .lcdi-card--event-inset { overflow: hidden; } .lcdi-card--event-inset .lcdi-card__media { position: relative; } /* La plaque quitte le flux : sans ça, la carte grandirait de sa hauteur et la grille ne rendrait plus des carrés. */ .lcdi-card--event-inset .lcdi-card__plate { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); /* `margin: auto` sur une boîte absolue calée à gauche ET à droite la centre sur sa largeur de contenu : c'est ce qui donne la plaque au contenu, sans jamais dépasser le retrait de 24 px. */ width: fit-content; max-width: 100%; margin: 0 auto; padding: var(--space-1) var(--space-4); /* AUCUN RAYON, et c'est un relevé : le live arrondit le CONTENEUR du message (8 px), jamais la plaque elle-même, qui reste à angles vifs. */ } /* LE TITRE DE CETTE PLAQUE EST PLUS PETIT QUE CELUI DE L'AUTRE, et c'est mesuré : 24 px sur la carte du carrousel d'accueil, 20 px sur la carte de la grille d'« Événements passés ». La plaque incrustée vit dans la photo, elle ne peut pas prendre la même place. `--type-h5` vaut exactement les 20 px du relevé, et ne varie pas avec la largeur — le live non plus. */ .lcdi-card--event-inset .lcdi-card__plate .lcdi-card__title { font-size: var(--type-h5); }