/* ============================================================ MUR DE LOGOS — les niveaux de sponsors NOUVEAU COMPOSANT (bloc 3 de l'É4, 06/08). Il n'était pas au registre v1 et il aurait dû : le site le rend deux fois sur l'accueil (GOLD, SILVER) et la page « Partenaires » en vit entièrement. LA FIGURE : un cadre à filet, et son intitulé qui chevauche le filet du haut, comme la légende d'un cartouche. Relevé (sonde du 06/08) : plaque fond #e0eaec (= le fond de la section), rayon 20 px, padding 20/40, marge haute -80 px, Roboto Slab 26,88 / 600, #111111, centrée cadre rayon 8 px, filet teinté d'accent logo 230 × 87 rendu, contenu dans son cadre (jamais déformé) POURQUOI LA PLAQUE PORTE LE FOND DE LA SECTION : c'est ce qui découpe le filet du cadre. Elle ne peut donc pas décider seule de sa couleur — la page la lui passe par `--wall-plate-bg`, dont la valeur par défaut est la surface alternée. Sur une section qui n'est pas `--surface-warm`, redéclarer. ============================================================ */ .lcdi-logowall { /* HAUTEURS DE RENDU PAR NIVEAU — amendement du bloc 3c (06/08). Le bloc 3b avait donné à tous les logos la MÊME hauteur (56 px) pour leur rendre un poids optique comparable. C'était juste à l'intérieur d'un niveau, faux entre deux : un sponsor GOLD achète d'abord de la surface, et le live la lui donne — mesuré à 1600, GOLD rend 262 × 100 quand SILVER tient dans des cellules de 120 × 120. Notre mur écrasait le GOLD à 56 px, la hiérarchie des niveaux disparaissait. Les deux hauteurs sont donc des RÔLES du composant, mappés sur le rang du niveau (voir plus bas). Un mur sans rang garde la hauteur SILVER. */ --wall-h-gold: 6.25rem; /* 100 px : la hauteur de rendu du GOLD, relevée sur le live */ --wall-h-silver: 3.5rem; /* 56 px : la hauteur du bloc 3b, inchangée */ /* La marge intérieure haute est NOMMÉE parce que la plaque en dépend : c'est elle qui décide de combien la plaque sort du cadre (voir `--wall-plate-rise` plus bas). Écrite en dur à deux endroits, elle aurait dérivé au premier réglage du repli téléphone. */ --wall-pad-y: var(--space-6); /* DE COMBIEN LA PLAQUE SORT DU CADRE PAR LE HAUT, calculé et non saisi : sa remontée (56 px) moins la marge intérieure du mur, moins son filet. Rend 22 px en desktop et 30 px en téléphone (où la marge intérieure descend à `--space-5`). C'est cette hauteur que le flux doit réserver — voir « LA PLAQUE RÉCLAME SA PLACE » en fin de fichier. */ --wall-plate-rise: calc(var(--space-6) + var(--space-5) - var(--wall-pad-y) - 2px); position: relative; border: 2px solid var(--border-accent-night); border-radius: var(--radius-m); padding: var(--wall-pad-y) var(--space-4); } .lcdi-logowall__plate { position: relative; z-index: 1; width: fit-content; /* REMONTÉE INCHANGÉE PAR LA RETOUCHE R2b DU 13/08 : elle vaut 56 px à toutes les largeurs (`--space-6` + `--space-5`). Le commentaire d'origine annonçait « -80 px relevé » alors que le calcul en rend 56 — l'écart est signalé ici plutôt que corrigé, parce que c'est le 56 qui est rendu depuis le bloc 3 et que le gate a validé ce rendu-là. */ margin: calc(var(--space-6) * -1 - var(--space-5)) auto var(--space-5); padding: var(--space-5) var(--space-7); background: var(--wall-plate-bg, var(--surface-warm)); border-radius: var(--radius-l); font-family: var(--font-display); font-size: var(--type-title); font-weight: var(--weight-strong); line-height: var(--lh-flat); color: var(--text-strong); text-align: center; } /* ============================================================ AMENDEMENT DU BLOC 3b (06/08) — LE MUR DEVIENT ADAPTATIF AMÉLIORATION ACTÉE au gate, pas une reproduction : l'existant était bridé par Kadence, et la mesure du 06/08 le chiffre. Sur l'accueil à 1440, le niveau SILVER déclarait 4 colonnes pour 3 logos dans un cadre de 444 px : chaque cellule tombait à 87 px, les logos étaient rendus 87 × 38, 87 × 30 et 87 × 65 — des vignettes, plus des logos de partenaires. Et la 4e cellule était vide. TROIS RÈGLES, dans cet ordre de priorité : 1. PLANCHER. Une cellule ne descend jamais sous `--wall-logo-min`, et un logo est rendu à la hauteur `--wall-logo-h` quelle que soit sa forme : c'est elle qui donne aux logos un poids optique comparable, là où le live les laissait chacun à sa taille de fichier. 2. RANGÉES CENTRÉES. Au-delà de ce que la largeur permet, la rangée passe à la ligne et les rangées restent centrées — d'où une disposition en flux, et non en grille : une grille aligne la dernière rangée à gauche. 3. `--wall-cols` NE COMMANDE PLUS, IL PLAFONNE. Le champ « colonnes » du client reste la densité VOULUE ; la largeur disponible peut en servir moins, jamais plus. Un 4 saisi pour 3 logos ne fabrique donc plus de cellule vide ni de vignettes. CONTENU : un logo dont le fichier est plus petit que la hauteur de rendu sera AGRANDI (`contain` monte comme il descend). C'est voulu — mieux vaut un logo à la bonne échelle qu'une vignette — mais cela veut dire que la médiathèque doit servir au moins cette hauteur. Les quatre logos de l'accueil sont au-dessus (335, 150, 1264 et 390 px de large en original). ============================================================ */ .lcdi-logowall__grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gap-grid); max-width: calc( var(--wall-cols, 2) * var(--wall-logo-min, 10rem) + (var(--wall-cols, 2) - 1) * var(--gap-grid) ); margin-inline: auto; } .lcdi-logowall__item { display: flex; align-items: center; justify-content: center; flex: 1 1 var(--wall-logo-min, 10rem); max-width: 100%; /* 87 px relevé : la rangée ne saute pas quand un logo est plus plat qu'un autre. AMENDÉ AU BLOC 3c : la cellule ne peut plus être plus courte que le logo qu'elle porte, sinon le niveau GOLD (100 px) déborderait de sa rangée. `max()` fait ce calcul tout seul, quel que soit le niveau — aucune valeur à tenir à jour à deux endroits. */ min-height: max(5.5rem, var(--wall-logo-h, var(--wall-h-silver))); } .lcdi-logowall__item img { width: auto; height: var(--wall-logo-h, var(--wall-h-silver)); /* la hauteur du niveau */ max-width: 100%; object-fit: contain; /* CONTRAT : un logo ne se déforme jamais */ transition: transform var(--t-soft) var(--ease-brand), filter var(--t-soft) var(--ease-brand); } a.lcdi-logowall__item:hover img { transform: scale(1.04); } a.lcdi-logowall__item:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-s); } /* ============================================================ LE RANG DU NIVEAU COMMANDE LA HAUTEUR (bloc 3c, 06/08) La clé n'est PAS le nom du niveau — « GOLD », « Or », « Partenaire majeur » sont du contenu client, ils changent sans prévenir. C'est son RANG dans la liste : un tableau de sponsors est ordonné par niveau, c'est même sa raison d'être. La page pose donc `--rang-1`, `--rang-2`, … dans l'ordre de saisie. Un mur sans classe de rang (usage hors sponsors) garde la hauteur SILVER. POURQUOI LE REPLI TÉLÉPHONE NE TOUCHE PAS `--wall-logo-h` : il redéclare les deux hauteurs de NIVEAU (`--wall-h-gold`, `--wall-h-silver`), jamais la variable que le rang commande. Les deux familles de règles pèsent le même poids (0,1,0) ; en écrivant sur des variables différentes, elles ne peuvent pas se voler la main, et l'ordre du fichier cesse d'être un piège. S'il posait `--wall-logo-h` directement, il remettrait tous les niveaux à la même hauteur en mobile — exactement le défaut qu'on corrige ici. ============================================================ */ @media (max-width: 767px) { /* `--wall-pad-y` et non `--space-5` en dur : la remontée de la plaque se recalcule toute seule à partir de lui (retouche R2b du 13/08). */ .lcdi-logowall { --wall-pad-y: var(--space-5); padding: var(--wall-pad-y) var(--space-3); } .lcdi-logowall__plate { padding: var(--space-4) var(--space-5); font-size: var(--type-h5); } /* Sur téléphone le plancher se resserre : deux logos de front valent mieux qu'un seul perdu au milieu d'un cadre. Il se pose sur le MUR, pas sur la cellule : le plafond de rangée le lit lui aussi. Les HAUTEURS descendent d'un cran elles aussi, mais la HIÉRARCHIE reste : le GOLD garde son avance sur le SILVER. */ .lcdi-logowall { --wall-logo-min: 7rem; --wall-h-gold: 5rem; --wall-h-silver: 2.75rem; } .lcdi-logowall__grid { gap: var(--gap-grid-tight); } } .lcdi-logowall--rang-1 { --wall-logo-h: var(--wall-h-gold); } .lcdi-logowall--rang-2 { --wall-logo-h: var(--wall-h-silver); } /* ============================================================ LA PLAQUE RÉCLAME SA PLACE — retouche R2b du gate 5a (13/08, Julien) CONSTAT : « la plaque "Sponsors GOLD" recouvre le mot "Partenaires" du titre ». MESURÉ avant retouche sur « Partenaires » (sonde `probe-retouches.js`, 13/08), écart entre le bas du H2 « Nos sponsors et Partenaires » et le haut de la plaque : **14 px de recouvrement à 390**, **6 px à 1440**. MÉCANIQUE, ET ELLE TOMBE AU PIXEL PRÈS : `layout.css` colle volontairement un bloc à son titre (`.lcdi-rythme > h2 + .lcdi-logowall { margin-top: 0 }`), il ne reste alors que la gouttière du rythme — 16 px. Or la plaque sort du cadre de 22 px en desktop et de 30 px en téléphone. 22 − 16 = 6 · 30 − 16 = 14 : ce sont exactement les deux recouvrements mesurés. LE MUR RÉCLAME DONC SA RÉSERVE quand il porte une plaque, et cette règle est une EXCEPTION À L'EXCEPTION : un bloc ordinaire se colle à son titre, un mur à plaque ne le peut pas — il ne commence pas à son bord haut. Après la retouche, la plaque se pose `--rythme-titre` (16 px) sous le titre, c'est-à- dire au cran serré du rythme, comme n'importe quel bloc sous son titre. PORTÉE VOLONTAIREMENT ÉTROITE : la règle ne vise QUE le mur directement précédé de son titre. Un mur qui suit un autre mur (l'accueil, et le niveau SILVER de « Partenaires ») dispose déjà de 32 px et n'a rien à réclamer : l'accueil ne bouge pas d'un pixel, ce que le gate exige. ============================================================ */ .lcdi-rythme > :is(h2, h3, h4) + .lcdi-logowall:has(> .lcdi-logowall__plate) { margin-top: var(--wall-plate-rise); }