/* ============================================================
BANDE — la composition à panneaux de l'accueil
NOUVEAU COMPOSANT (bloc 3 de l'É4, 06/08). Motif de sa naissance : le registre
v1 portait les cartes, les médias et la mosaïque, mais aucune COMPOSITION de
section. Or trois sections de l'accueil sont la même figure — des colonnes
pleine hauteur dont certaines sont des photos à fond perdu et une seule porte
le texte — et la page ne peut pas se monter sans elle. Règle K4 (3+ occurrences
avant extraction) : satisfaite dès l'accueil, avant même les pages internes.
PROPORTIONS MESURÉES SUR LE LIVE (1440, sonde `probe-home-mesures.js`,
06/08). Elles ne sont pas choisies, elles sont relevées :
« À propos » 216 / 432 / 792 = 15 / 30 / 55
« Avantages » 216 / 792 / 432 = 15 / 55 / 30
« Sponsors » 216 / 432 / 576 / 216 = 15 / 30 / 40 / 15
« Bureau » 402 / 958 = 28 / reste
Les colonnes se touchent : la somme fait exactement 1440, il n'y a pas de
gouttière entre les panneaux (c'est ce qui donne le bord à bord des photos).
LE PANNEAU N'EST PAS UNE IMAGE DE CONTENU : c'est un décor de colonne. Il
porte donc son média en fond (`background-image`), pas en `![]()
` — une photo
qui remplit une colonne de hauteur inconnue n'a pas de ratio à respecter, et
son texte alternatif serait vide de toute façon.
============================================================ */
.lcdi-band {
display: grid;
grid-template-columns: var(--band-cols, 1fr);
align-items: stretch;
position: relative;
isolation: isolate; /* les séparateurs de section vivent dans CE
contexte d'empilement */
background: var(--surface-page);
}
/* Les compositions relevées. Nommées par leur RÔLE dans la page, jamais par leur
géométrie : une bande « récit » reste une bande récit si ses proportions
bougent d'un cran. */
.lcdi-band--recit { --band-cols: 15% 30% 55%; }
.lcdi-band--offre { --band-cols: 15% 55% 30%; }
.lcdi-band--soutien { --band-cols: 15% 30% 40% 15%; }
/* ============================================================
DEUX COMPOSITIONS DE PLUS (bloc 5a de l'É4, 10/08), mesurées comme les
trois premières, sur les pages internes du live à 1440 (sonde
`probe-5a-struct.js`) :
« Nos partenaires » (Partenaires) 216 / 576 / 648 = 15 / 40 / 45
« Un défi sportif » (Caritatif) 960 / 480 = 2 / 1
L'ALLIANCE est la bande du récit à deux voix : la photo y prend autant de
place que le texte, parce que c'est une poignée de main qu'elle raconte.
Le DUO n'a qu'un panneau, à droite, et le texte occupe les deux tiers : il
sert les pages où le contenu est un dossier, pas une accroche.
Les colonnes se touchent, comme les autres : 15 + 40 + 45 = 100. */
.lcdi-band--alliance { --band-cols: 15% 40% 45%; }
.lcdi-band--duo { --band-cols: 2fr 1fr; }
/* ============================================================
LA BANDE PLEINE (bloc 5b, 13/08) — une bande SANS colonne latérale.
Les cinq compositions ci-dessus décrivent toutes un partage : du décor
photographique d'un côté, du texte de l'autre. La section « Paris-MIPIM » de
la page Vélo n'a pas ce partage — le client la décrit en trois pièces, « une
vidéo, une phrase, un bouton », et la vidéo EST son décor. Servie en `duo`,
elle laissait une colonne de panneau vide à droite ; servie en `récit`, elle
coinçait son texte dans 55 % de bande pour deux colonnes vides.
La bande pleine ne redéfinit donc rien : elle laisse `--band-cols` à son
défaut (`1fr`) et se contente de RAMENER SA COLONNE À UNE LARGEUR DE LECTURE.
POURQUOI LA COLONNE ÉTROITE (`--container-narrow`, 842 px) ET NON LE
CONTENEUR DE PAGE (1290 px) : c'est une mesure de TEXTE, pas de mise en page.
La colonne pose 48 px de marge intérieure de chaque côté ; au conteneur de
page elle rendrait une ligne de 1194 px, soit près de 150 signes — le double
de ce qui se lit. À 842 px la ligne fait 746 px, dans la même famille que les
colonnes de contenu des quatre autres compositions (484 à 732 px mesurés).
La façade vidéo, plafonnée à 768 px, tient exactement dedans.
============================================================ */
.lcdi-band--pleine > .lcdi-band__content {
width: 100%;
max-width: var(--container-narrow);
margin-inline: auto;
}
/* L'aparté n'a pas de panneau à fond perdu : il respire, là où les trois autres
compositions collent leurs photos au bord. Mesuré sur le live : la bande
« Bureau » fait 735 px de haut pour 562 px de contenu. */
.lcdi-band--aparte {
--band-cols: 28% 1fr;
gap: var(--space-8);
/* Le bas dégage la hauteur d'une couture (160 px relevés) : sans ça, la crête
de montagnes passe au travers de la rangée d'icônes des cartes de personne
— constat navigateur du 06/08. */
padding-block: var(--space-8) calc(var(--space-8) + var(--space-9));
/* MARGE DROITE — retouche 3 du bloc 3c (06/08). La rangée du bureau est
full-bleed sur le live, mais la ZONE DES CARTES s'y arrête à 24 px du bord
droit du viewport, aux deux largeurs mesurées (1600 : right 1576/1600 ·
1440 : right 1416/1440). Notre piste affleurait le bord (marge 0 mesurée),
et la 4e carte semblait coupée par l'écran.
La valeur COLLE à un token existant : `--page-edge` vaut 24 px (relevé).
Aucun levier nouveau n'est donc inventé — seulement nommé, pour que le gate
puisse le rouvrir d'une ligne. */
padding-inline-end: var(--band-aparte-edge, var(--page-edge));
}
/* Bande posée sur la surface alternée (relevé : la bande « Sponsors » est en
#e0eaec, pas sur le fond de page). C'est aussi ce fond que la plaque des
niveaux de sponsors doit reprendre pour découper le filet de son cadre. */
.lcdi-band--chaud { background: var(--surface-warm); }
/* Les colonnes passent DEVANT les coutures de section (z-index 1) : sur le live,
la silhouette d'un séparateur ne traverse jamais une photo, elle s'arrête à
son bord. C'est l'empilement qui produit ça, pas un découpage.
La règle porte sur TOUS les enfants sauf la couture — au premier jet elle
nommait quatre classes, et le carrousel du bureau, qui n'en était pas, se
faisait recouvrir par la crête de montagnes (constat navigateur du 06/08). */
.lcdi-band > *:not(.lcdi-sep) { position: relative; z-index: 2; }
/* --- Le panneau photo : décor de colonne, à fond perdu ------------------ */
.lcdi-band__panel {
overflow: hidden;
min-height: 20rem;
background: var(--surface-warm) center / cover no-repeat;
}
/* DEUX SOURCES POUR UN MÊME PANNEAU (correctif netteté du 21/08).
Un fond CSS n'a ni `srcset` ni `sizes` : le navigateur prend ce qu'on lui
donne. Or ce panneau rend 432 × 1057 px en 1440 — recadré en `cover`, il
réclame ~1 600 px de source quand le thème lui en servait 1 024 (densité
0,65 mesurée sur l'accueil) — et seulement 390 × 293 px sur un téléphone, où
1 024 px suffisent largement.
Le gabarit pose donc les deux URL en variables (`lcdi_style_panneau()`) et
c'est ici que le palier choisit. En dessous de 1025 px, la source servie est
EXACTEMENT celle d'avant ce correctif : aucun octet supplémentaire n'arrive
sur un téléphone.
Le repli en cascade (`var(--panneau-s, var(--panneau-l, none))`) garantit
qu'un panneau ne perd jamais son image, même si une seule variable est posée. */
.lcdi-band__panel { background-image: var(--panneau-l, var(--panneau-s, none)); }
@media (max-width: 1024px) {
.lcdi-band__panel { background-image: var(--panneau-s, var(--panneau-l, none)); }
}
/* Le galet, appliqué aux panneaux. CONTRAT DU GATE 1 (tokens.css § FORMES) :
« rayons rationalisés — 15, 30 et 50 px disparaissent, absorbés par le galet ».
Le live pose ici 0/30/0/0, 0/0/0/30 et 0/20/0/0 : trois rayons ponctuels que
le système ramenait à un seul geste, dans ses deux orientations.
LEVIER DE RETOUR : `--band-panel-radius` ramène le panneau au rayon relevé
sans toucher au composant. */
.lcdi-band__panel--galet { border-radius: var(--band-panel-radius, var(--signature-galet)); }
.lcdi-band__panel--galet-miroir { border-radius: var(--band-panel-radius, var(--signature-galet-miroir)); }
/* ============================================================
VERDICT DU GATE DU BLOC 3 (06/08, Julien) — LE GALET REDESCEND DES PANNEAUX
« Le galet est inversé » : sur les trois panneaux photo, le rayon de
signature 20/20/90 tirait l'œil du mauvais côté. Retour aux rayons RELEVÉS
sur le live, par le levier prévu pour ça — le composant ne change pas, seule
la valeur qu'on lui passe change.
VALEURS RELEVÉES le 06/08 dans le CSS servi par le live (règles
`.kadence-column9_… > .kt-inside-inner-col`), un coin arrondi par panneau :
« À propos » 0 / 30 / 0 / 0 (haut-droit)
« Avantages » 0 / 0 / 0 / 30 (bas-gauche, le miroir)
« Sponsors » 0 / 20 / 0 / 0 (haut-droit, plus court)
Ce sont des px BRUTS, et c'est assumé : ce sont des mesures, pas des choix.
Elles sont nommées, sourcées, et tenues en un seul endroit — le jour où le
gate rebascule sur le galet, ces trois lignes disparaissent et la valeur par
défaut du levier reprend la main.
La signature `--signature-galet` reste au système : elle sert les panneaux
qui n'ont pas de rayon relevé, et les compositions à naître.
============================================================ */
.lcdi-band--recit { --band-panel-radius: 0 30px 0 0; }
.lcdi-band--offre { --band-panel-radius: 0 0 0 30px; }
.lcdi-band--soutien { --band-panel-radius: 0 20px 0 0; }
/* Mêmes valeurs relevées pour les deux compositions du bloc 5a, dans le CSS
servi par le live (règles `.kadence-column863_8b5bf2-85` et
`.kadence-column1503_c782b7-aa`) : le panneau du MILIEU arrondit son coin
haut-droit, celui de DROITE son coin bas-gauche. La règle du site n'est pas
la composition, c'est la POSITION du panneau — et les cinq compositions la
respectent déjà. */
.lcdi-band--alliance { --band-panel-radius: 0 30px 0 0; }
.lcdi-band--duo { --band-panel-radius: 0 0 0 30px; }
/* --- L'aparté : la colonne en aplat d'accent (« Suivez-nous ») ----------
Elle porte `data-theme="nuit"` en HTML : son texte et ses icônes basculent
alors sur les rôles du monde sombre, au lieu d'être peints à la main. */
.lcdi-band__aside {
display: flex;
flex-direction: column;
background: var(--accent);
color: var(--text-on-night);
/* APLAT D'ACCENT, PAS SURFACE DE NUIT — et la nuance coûte cher si on
l'oublie. L'encart porte `data-theme="nuit"` pour que son TEXTE bascule au
clair ; or ce contexte remappe aussi `--icon` et `--link` sur l'accent, qui
est justement la couleur du fond. Constat navigateur du 06/08 : les quatre
icônes de réseaux étaient rendues en #68a1b0 sur #68a1b0, donc invisibles.
Sur un aplat d'accent, l'encre d'icône et de lien est celle du monde
sombre. */
--icon: var(--text-on-night);
--link: var(--text-on-night);
--link-hover: var(--brand-givre);
--signature-initiale: var(--text-on-night);
}
/* VERDICT DU GATE DU BLOC 3 (06/08, Julien) — L'INITIALE DE « Suivez-nous »
REDEVIENT MONOCHROME. Ce n'était pas un choix de DA, c'était un vol du
parent, et la mesure le dit : le titre rendait `rgb(17,17,17)` pendant que sa
lettrine rendait `rgb(255,255,255)` — une lettrine blanche sur un mot presque
noir, posés tous les deux sur l'aplat de teal.
CAUSE : le parent Kadence peint les titres au niveau de la CLASSE
(`.entry-content h3`, (0,1,1)) ; l'encre déclarée par l'encart (0,1,0) est
une simple hérédité, elle perd. Le socle de neutralisation, lui, ne reprend
que la FAMILLE des titres, pas leur couleur (choix du bloc 1 : repeindre les
titres aurait touché les 31 pages encore rendues par le parent).
RÈGLE : dans l'encart, les titres consomment l'encre de l'encart, à (0,2,1).
La lettrine consomme `--signature-initiale`, que l'encart remappe déjà sur
cette même encre — les deux ne peuvent donc plus diverger. */
.lcdi-band__aside .lcdi-band__aside-body :is(h1, h2, h3, h4, h5, h6) { color: var(--text-on-night); }
.lcdi-band__aside-media { display: block; }
.lcdi-band__aside-media img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.lcdi-band__aside-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-5);
padding: var(--space-6) var(--space-4);
text-align: center;
}
/* --- La colonne de contenu --------------------------------------------- */
.lcdi-band__content {
display: flex;
flex-direction: column;
justify-content: center;
/* La gouttière est celle du RYTHME SERRÉ (bloc 3c) : même valeur qu'avant
(16 px), mais elle porte désormais son rôle. La colonne de contenu prend en
plus la classe `.lcdi-rythme` (`layout.css`), qui détache les blocs à
32 px — sans elle, les quatre relations de la colonne étaient à égale
distance et la hiérarchie ne se lisait plus. */
gap: var(--rythme-titre);
padding: var(--space-7); /* 48 px, mesuré */
min-width: 0; /* sans lui, un enfant en grille refuse de
rétrécir et fait déborder la bande */
}
.lcdi-band__content > * { margin-block: 0; }
/* L'en-tête d'une bande : le bloc de titre, et le picto qui l'accompagne à
droite (relevé sur « Les avantages à adhérer »). */
.lcdi-band__entete {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.lcdi-band__entete-texte { min-width: 0; }
.lcdi-band__entete-texte > * { margin-block: 0 var(--space-3); }
.lcdi-band__entete-texte > *:last-child { margin-bottom: 0; }
.lcdi-band__entete-picto { flex: none; }
/* LARGEUR RÉSOLUE, JAMAIS `auto` — retouche 16 du bloc 3c (06/08). Ce picto
portait `width: auto`, ce qui écrase l'indication de présentation des
attributs de la balise : avant chargement, l'image rendait **0 × 0** et
l'en-tête d'« Avantages » gagnait **49 px** à l'arrivée du fichier (mesuré à
390 : bande 1901 → 1950, en-tête 173 → 222, picto 0 → 75). Le chargement
paresseux se déclenchant au défilement, le symptôme imitait un bug
d'animation — c'est le même défaut que la couture des chiffres clés, dont
`stats.css` porte le motif complet.
124 px est la largeur RELEVÉE du picto (attributs 124 × 75, rendu identique
en desktop comme en mobile) : la déclarer ne change rien à l'écran, elle
réserve simplement la place avant que l'image n'arrive. Le levier reste
ouvert pour un picto d'une autre taille. */
.lcdi-band__entete-picto img { width: var(--band-picto-w, 124px); height: auto; }
.lcdi-band__accroche { color: var(--text-body); }
/* Colonne de contenu centrée (relevé sur « Le Bureau LCDI »). */
.lcdi-band__content--centre { text-align: center; align-items: stretch; }
/* L'EN-TÊTE SUIT LA COLONNE — ajout du bloc 5c (15/08).
CONSTAT (Julien, section « Paris-MIPIM ») : « je pense que tous les éléments
de cette section pourraient être centrés. »
POURQUOI `text-align` NE SUFFISAIT PAS, et c'est mesuré (sonde `probe-5c.js`,
1440) : l'en-tête d'une bande est une rangée `flex` en `space-between`, et son
bloc de texte est un élément de rangée — il se dimensionne donc à son
CONTENU, pas à la colonne. Surtitre et titre rendaient 241,7 px de large
collés au bord gauche, à 252 px du centre de la colonne. Centrer le texte
DANS un bloc de 241,7 px posé à gauche ne déplace rien.
INERTE SUR L'EXISTANT, ET PROUVÉ : les deux seuls consommateurs actuels du
modificateur — la section « Équipe » et le bandeau de bas de boutique — ne
posent AUCUN `.lcdi-band__entete` (ils écrivent surtitre et titre en enfants
directs de la colonne). Cette règle ne peut donc rien changer chez eux ;
contrôlé au rendu, page par page, au bloc 5c. */
.lcdi-band__content--centre > .lcdi-band__entete { justify-content: center; }
/* Colonne de contenu accrochée EN HAUT (bloc 5a, 10/08). Relevé sur les bandes
d'association de « Caritatif » : le texte y démarre à la même hauteur que la
photo de la colonne voisine, il ne se centre pas sur elle. Un contenu long
centré dans une colonne haute laisse un vide en haut qui n'existe pas sur le
live. */
.lcdi-band__content--haut { justify-content: flex-start; }
/* --- L'écusson d'une association (bloc 5a, 10/08) -----------------------
Relevé sur les trois bandes de « Caritatif » : le logo de l'association est
posé AU-DESSUS de son nom, aligné à gauche, à sa taille de fichier bornée en
hauteur. Ce n'est ni un logo de mur (qui se normalise à la hauteur de son
niveau) ni une image de contenu (qui remplit sa colonne) : c'est une
signature. DIMENSION RÉSOLUE, règle systémique du bloc 3c. */
.lcdi-band__logo { display: block; }
.lcdi-band__logo img {
display: block;
width: auto;
height: var(--band-logo-h, 5.5rem); /* 88 px : la hauteur rendue sur le live */
max-width: 100%;
object-fit: contain;
}
/* L'ÉCUSSON DE VEDETTE (bloc 5b, 13/08). 88 px est la hauteur RELEVÉE sur les
trois bandes d'association de « Caritatif », où l'écusson accompagne un nom.
La bande vedette de la page Vélo lui demande autre chose : le gate 1 y décide
un « grand logo », parce que la cyclosportive partenaire majeure est le sujet
de la section, pas sa signature. Constat navigateur du 13/08 : à 88 px, le
carré du Colnago GF Mont Ventoux rendait moins haut que son propre titre —
il se lisait comme une vignette. 144 px le remet au rang de sujet.
VARIANTE, PAS NOUVEAU DÉFAUT : les bandes déjà gatées n'ont pas la classe. */
.lcdi-band__logo--grand img { height: var(--band-logo-h-grand, 9rem); }
@media (max-width: 767px) {
.lcdi-band__logo--grand img { height: var(--band-logo-h-grand-mobile, 6.5rem); }
}
a.lcdi-band__logo:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-s); }
/* Le seul bloc de texte riche de la page : le paragraphe de présentation.
Il vient d'un champ éditeur, on ne maîtrise donc pas ses marges internes —
d'où ce cadrage, qui ne peint rien et ne fait que rythmer. */
.lcdi-band__texte > *:first-child { margin-top: 0; }
.lcdi-band__texte > *:last-child { margin-bottom: 0; }
/* ============================================================
UN TITRE DANS LE TEXTE D'UNE BANDE (bloc 5b, 13/08)
La bande vedette de la page Vélo porte DEUX niveaux : le nom de la
cyclosportive (le H2 du champ « titre ») et, dans son texte, le titre de
l'encart GF Series fourni par le client. C'est le premier titre à vivre dans
un champ WYSIWYG de bande — vérifié : aucune des sept pages déjà versées n'en
contient un (0 champ `sections_%_texte` avec un `` en base). Cette règle
ne change donc RIEN à ce qui est déjà rendu.
Sans elle, le titre ne recevrait du système que sa FAMILLE (le socle de
neutralisation, qui reprend `font-family` et rien d'autre) : sa taille, sa
graisse et sa couleur viendraient encore du thème parent. Les valeurs sont
celles du H3 du document de prose — deux titres de même niveau sur le même
site n'ont pas deux tailles.
PAS DE RÈGLE SUR LES PARAGRAPHES ICI, et c'est délibéré : les trois pages
internes déjà gatées en posent, et leur rythme actuel est celui que le gate a
validé.
============================================================ */
.lcdi-band__texte :is(h2, h3, h4) {
margin: var(--space-5) 0 var(--space-3);
font-family: var(--font-display);
font-size: var(--type-title);
font-weight: var(--weight-strong);
line-height: var(--lh-snug);
color: var(--text-strong);
}
/* ============================================================
LA VIDÉO DANS UNE BANDE (bloc 5b, 13/08)
La façade de vidéo (`video.css`) est née à la vague A2 pour les articles
d'événement, où elle remplit la largeur de son onglet. La page Vélo la pose
dans une COLONNE DE BANDE, et la contrainte s'inverse : sans plafond, une
façade 16/9 posée dans une bande pleine rendrait 810 px de haut à 1440 —
elle mangerait la fenêtre entière et pousserait le bouton d'adhésion sous la
ligne de flottaison.
Le plafond est donc un fait de composition, pas de composant : `video.css`
ne change pas d'un octet, c'est la bande qui borne ce qu'elle accueille.
48 rem = 768 px, soit une façade de 432 px de haut : la hauteur d'une photo
de contenu, pas d'un écran.
============================================================ */
.lcdi-band__video { width: 100%; max-width: var(--band-video-max, 48rem); }
/* Dans une bande pleine, le contenu est une colonne unique et centrée : la
façade se centre avec lui. Dans les autres compositions elle reste alignée
sur le texte de sa colonne. */
.lcdi-band--pleine .lcdi-band__video { margin-inline: auto; }
/* --- Une image posée dans une colonne (pas un panneau) ------------------
Relevé : les photos d'appoint des bandes « Avantages » et « Sponsors » ne
remplissent pas leur colonne, elles s'y accrochent en haut ou en bas. */
/* --- LE COIN ARRONDI DES FICHES D'ASSOCIATION -------------------------
Verdict Julien du 20/08 (gate de recette) sur le visuel Boomforest, constaté
au navigateur des deux côtés le 21/08 : le live arrondit UN coin de la
première figure de chaque fiche, la refonte n'en arrondissait aucun.
Mesures relevées à 1440 (live vs recette, avant correctif) :
Boomforest · telechargement-1.jpeg 0/0/0/30 vs 0/0/0/0
Un pas vers la vie · baf507…avif 30/0/0/0 vs 0/0/0/0
Tandem Réfugiés · tandem2…jpg 0/0/0/30 vs 0/0/0/0
Les panneaux, eux, étaient déjà conformes (0/30/0/0 et 0/0/0/30).
ÉCART ASSUMÉ AU CONTRAT DU GATE 1 (tokens.css § FORMES, « rayons
rationalisés — 15, 30 et 50 px disparaissent, absorbés par le galet ») : ce
contrat avait absorbé ces rayons ponctuels, un verdict de gate plus récent
les redemande. Le geste reste UNE règle de composant, pas trois réglages
d'image : le coin est toujours à GAUCHE, en haut quand la figure est en
portrait, en bas sinon — ce qui redonne exactement les trois relevés.
Levier de retour : `--band-figure-radius`, comme pour les panneaux.
La SECONDE figure d'une fiche n'est pas arrondie : sur le live, la grande
photo qui suit la vignette de Boomforest est bien à angles droits. */
.lcdi-band--fiche .lcdi-band__figure img {
border-radius: var(--band-figure-radius, 0 0 0 30px);
}
.lcdi-band--fiche .lcdi-band__figure--portrait img { --band-figure-radius: 30px 0 0 0; }
.lcdi-band--fiche .lcdi-band__figure + .lcdi-band__figure img { --band-figure-radius: 0; }
.lcdi-band__figure { display: block; align-self: center; }
.lcdi-band__figure--haut { align-self: start; }
.lcdi-band__figure--bas { align-self: end; }
.lcdi-band__figure img { width: 100%; object-fit: cover; }
.lcdi-band__figure--portrait img { aspect-ratio: 2 / 3; }
/* ============================================================
PALIER LAPTOP (1280 → 1439) — verdict du gate du bloc 3b
Les proportions relevées sont justes À 1440. En dessous, le pourcentage
rétrécit tout en même temps et ce sont les colonnes ÉTROITES qui paient :
elles portent du texte, pas du décor. Mesuré à 1280 (avant) :
encart « Suivez-nous » 192 px, dont 160 de texte pour un titre de 159 —
il tenait à un pixel près, ce n'est pas une marge
intro du Bureau 358 px, « Le Bureau LCDI » cassé en deux lignes
contenu des Sponsors 512 px, titre sur deux lignes et mur de logos
réduit à deux logos de front
Trois gestes, et un seul est un vrai choix :
1. les colonnes étroites reçoivent un PLANCHER (`minmax`) : elles ne
descendent plus sous leur largeur de texte, les larges absorbent l'écart ;
2. le Bureau passe de 28 % à un plancher de 22 rem : son titre tient sur une
ligne ;
3. SPONSORS — LE CHOIX : une image latérale SAUTE (autorisation gravée au
gate). La bande passe de quatre colonnes à trois ; la colonne de contenu
gagne près de 40 % et le mur de logos retrouve trois logos de front. Le
champ « photo droite » reste en base, il n'est simplement plus rendu sous
1440. À juger sur pièce au gate — dont la question qu'il ouvre : faut-il
la faire sauter à 1440 aussi, pour que la densité du mur ne s'inverse pas
entre 1439 et 1440 ?
→ RÉPONDU AU GATE DU BLOC 3b, 2e passe (06/08) : les DEUX photos
latérales sautent, et au seuil grand écran commun (1500 px), pas à
1440. Le bloc « SPONSORS AU SEUIL GRAND ÉCRAN » plus bas porte la règle ;
il ne reste donc plus rien de Sponsors dans le palier laptop ci-dessous.
============================================================ */
@media (max-width: 1439px) {
.lcdi-band--recit { --band-cols: minmax(13rem, 15%) 30% 1fr; }
.lcdi-band--offre { --band-cols: minmax(13rem, 15%) 1fr 30%; }
/* Même geste pour les deux compositions du bloc 5a : la colonne étroite
reçoit son plancher, la colonne de contenu absorbe l'écart. Le DUO n'a pas
de colonne étroite — c'est son panneau qui plancherait, et un panneau
photo n'a pas de ligne de texte à protéger : il garde ses proportions. */
.lcdi-band--alliance { --band-cols: minmax(13rem, 15%) 40% 1fr; }
/* Le Bureau : plancher de colonne ET marge intérieure resserrée. Les deux,
parce que ce qui compte n'est pas la colonne mais la LIGNE DE TEXTE — à
1440 elle fait 307 px et « Les cycles de l'immobilier » y tient tout juste
(307 px mesurés, interlettrage compris). Sous 1440 elle tombait à 262 et
cassait le surtitre ET le titre en deux. 368 px de colonne moins 2 × 24 de
marge rendent 320 px de texte : la ligne repasse au-dessus du besoin sans
prendre 40 px au carrousel, ce qu'un plancher seul aurait coûté. */
.lcdi-band--aparte { --band-cols: minmax(23rem, 28%) 1fr; }
.lcdi-band--aparte .lcdi-band__content { padding-inline: var(--space-5); }
}
/* ============================================================
SPONSORS AU SEUIL GRAND ÉCRAN — verdict du gate du bloc 3b, 2e passe
(06/08, Julien). C'est un ÉCART VOULU au live, et il est assumé comme tel :
le site live sert encore ses deux photos latérales MIPIM à 1440 (mesurées
216 × 324, collées aux bords, x = 0 et x = 1224). Le verdict demande qu'elles
n'apparaissent qu'au MÊME seuil que les quatre cartes du bureau — sous ce
seuil, la composition respire sans elles et la colonne de contenu récupère
les deux colonnes de 15 %.
CONSÉQUENCE DE CONTENU, signalée : les champs « photo gauche » et « photo
droite » restent en base et se saisissent toujours, mais ils ne sont rendus
qu'au-dessus de 1500 px — y compris en pile sur téléphone, ce qui REVIENT sur
la nuance du bloc 3b (« en pile, une photo de plus enrichit, elle reste
servie »).
============================================================ */
/* seuil grand écran commun : 1500px, relevé live 06/08 */
@media (max-width: 1499px) {
.lcdi-band--soutien { --band-cols: 30% 1fr; }
.lcdi-band--soutien > .lcdi-band__figure { display: none; }
}
/* --- Repli : sous la tablette, la bande devient une pile ---------------
L'ordre du DOM est l'ordre de lecture : le contenu vient après ses panneaux,
comme à l'écran large. Les panneaux gardent une hauteur lisible plutôt que de
s'écraser à la hauteur de rien. */
@media (max-width: 1024px) {
.lcdi-band,
.lcdi-band--recit,
.lcdi-band--offre,
.lcdi-band--soutien,
.lcdi-band--alliance,
.lcdi-band--duo,
.lcdi-band--aparte { grid-template-columns: 1fr; gap: 0; }
/* La marge droite de la retouche 3 est BORNÉE au desktop : en pile, la
colonne de contenu pose déjà sa propre marge de page, et les deux
s'additionneraient en un bord droit deux fois plus large que le gauche. */
.lcdi-band--aparte { padding-inline-end: 0; }
/* MÊME RAISON EN HAUT — retouche 18 du bloc 3c (06/08, verdict de gate).
Constat de Julien : trop de blanc entre la fin d'« Avantages » et le titre
« Le Bureau LCDI » en mobile. Mesuré à 390, et décomposé :
blanc total **104 px**
après le dernier élément peint d'Avantages 0
écart entre les deux sections 0
avant le premier texte du Bureau 104 ← tout est là
Ces 104 px sont DEUX CRANS EMPILÉS : les 72 px de la bande (`--space-8`,
posés pour dégager la couture en desktop) plus les 32 px de la colonne de
contenu. L'aparté est la SEULE bande à cumuler ainsi — « À propos » et
« Sponsors » n'ont que les 32 px de leur colonne. C'est exactement
l'incohérence que la retouche 7 corrige ailleurs : deux sections sœurs à
des crans différents sans raison.
Référence live mobile : son Bureau ouvre à **31 px**. La colonne de contenu
seule en donne 32 : le cran juste est donc celui des sœurs, et il tombe sur
le live. Le dégagement du bas, lui, reste au service de la couture. */
.lcdi-band--aparte { padding-block-start: 0; }
/* LA PISTE DU BUREAU REPREND UNE MARGE DE PAGE — retouche 13 du bloc 3c
(06/08, verdict de gate). En pile, elle courait d'un bord à l'autre : les
cartes touchaient l'écran et prenaient 100 % de sa largeur. Relevé live
mobile (390) : la piste s'arrête à **24 px** de chaque bord et sa carte
fait **342 px, soit 87,7 % du viewport**. La marge de page (24 px relevés)
redonne exactement ces deux chiffres — la carte n'a pas de taille propre à
régler, elle suit la piste. */
.lcdi-band--aparte .lcdi-carousel { padding-inline: var(--page-edge); }
.lcdi-band__panel { min-height: 16rem; aspect-ratio: 4 / 3; }
.lcdi-band__content { padding: var(--space-7) var(--page-edge); }
.lcdi-band__aside-media img { aspect-ratio: 16 / 9; }
.lcdi-band__figure--portrait img { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
.lcdi-band__content { padding: var(--space-6) var(--page-edge-mobile); }
.lcdi-band__panel { min-height: 12rem; }
/* LA RÉSERVE BASSE SUIT LA COUTURE, ET LA COUTURE RÉTRÉCIT ICI — retouche 19
du bloc 3c (06/08, verdict de gate). Jumelle de la retouche 18 : celle-là
ouvrait la bande, celle-ci la ferme.
Le `padding-block-end` de la bande (176 px) dégage la crête de montagnes
pour qu'elle ne traverse pas la rangée d'icônes des cartes de personne. Or
`section-separator.css` resserre la couture à 45 % SOUS 768 px : elle n'y
fait plus 160 px mais 72. La réserve, elle, ne bougeait pas.
Mesuré (sonde `probe-3c-reserve-bureau.js`, `offsetTop` pur) :
largeur réserve couture blanc NU au-dessus de la couture
390 176 **72** **104** ← tout l'excédent est là
768 176 160 16
1440 176 160 16
1600 176 160 16
1920 176 160 16
Les 176 px sont un CUMUL de deux crans (`--space-8` + `--space-9`) hérité du
desktop, où il couvre les 160 px de la couture avec 16 px de rab. En
mobile, le cran juste est le PREMIER TERME seul : `--space-8` vaut 72 px,
exactement la couture mobile (160 × .45 = 72). Le cumul disparaît, le
dégagement reste entier.
LE SEUIL EST CELUI DE LA COUTURE, pas celui de la pile (1024) : entre 768 et
1024 la bande est déjà empilée mais sa couture fait toujours 160 px, et la
réserve de 176 y reste juste. */
.lcdi-band--aparte { padding-block-end: var(--space-8); }
}
/* ============================================================
EN PILE, LES IMAGES LATÉRALES DÉCORATIVES SORTENT — retouche 12 du bloc 3c
(06/08, verdict de gate). Constat de Julien en comparant son téléphone au
live : la prod ne sert pas ces petites images en mobile ; nous si.
RELEVÉ LIVE, section par section (UA mobile réel, sonde
`probe-3c-credits-panneaux.js`) — le live rend ces images en **0 × 0**, à
390 px COMME à 1024 px, c'est-à-dire dans toute la pile :
route1.jpg la photo de l'encart « Suivez-nous »
Corentin-Guillerm-…Paris-MIPIM la latérale d'« Avantages »
LCDI-x-CG…-26-00534 et -00719 les deux latérales de « Sponsors »
Et il GARDE, pleine largeur : les trois panneaux photo de colonne (À propos,
Avantages, Sponsors) et le décor d'« Événements passés ». C'est exactement la
frontière du verdict : les grandes figures restent, les latérales sautent.
RÈGLE DE COMPOSANT, PAS CAS PAR CAS : elle porte sur les DEUX familles
d'images d'appoint d'une bande — la photo de l'aparté et les figures de
colonne — donc sur toute page montée en bandes, sans geste de gabarit.
ELLE GÉNÉRALISE ET REMPLACE la nuance du bloc 3b (« en pile, une photo de
plus n'écrase personne, elle enrichit — elle reste donc servie »), qui ne
valait déjà plus pour Sponsors depuis la retouche 2. Les champs restent en
base et se saisissent toujours ; ils ne sont plus rendus sous 1025 px.
============================================================ */
@media (max-width: 1024px) {
.lcdi-band__figure,
.lcdi-band__aside-media { display: none; }
}
/* ============================================================
UNE FIGURE PEUT ÊTRE DU CONTENU, PAS DU DÉCOR — retouche 17 du bloc 3c
(06/08, verdict de gate). La retouche 12 a sorti de la pile TOUTES les images
latérales, la photo de cycliste d'« Avantages » comprise : la pile mobile y a
perdu sa respiration entre « À propos » et « Les avantages à adhérer ».
VERDICT : celle-ci n'est pas décorative. Elle SE REQUALIFIE en panneau pleine
largeur dans la pile, comme les trois panneaux que la prod garde. C'est la
frontière décoratif / contenu qui bouge d'un cran, pour cette image.
ÉCART AU LIVE, ASSUMÉ ET DOCUMENTÉ : le live la rend `0 × 0` en pile — mesuré
à 390 comme à 1024. Julien tranche autrement, pour la respiration de la pile.
MODIFICATEUR DE COMPOSANT, PAS CAS PARTICULIER DE PAGE : toute figure marquée
`--panneau` traverse la pile et y prend la forme d'un panneau ; celles qui ne
le sont pas en sortent. La règle se lit dans le markup, page par page, sans
qu'aucune page n'ait de CSS à elle.
Ce bloc vient APRÈS celui de la retouche 12 : à poids égal (0,1,0), c'est
l'ordre qui doit laisser l'exception l'emporter sur la règle.
============================================================ */
@media (max-width: 1024px) {
.lcdi-band__figure--panneau { display: block; }
/* la forme des panneaux en pile, reprise telle quelle (`.lcdi-band__panel`) */
.lcdi-band__figure--panneau img { aspect-ratio: 4 / 3; }
}
/* ============================================================
LE PICTO D'EN-TÊTE SORT EN TÉLÉPHONE — correction C1c du 13/08 (Julien)
VERDICT, verbatim : « 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 ce picto-ci : le vélo décoratif posé à droite du titre dans
l'en-tête d'une bande, jamais le picto de couture (`crest.css`).
CE QUI A ÉTÉ MESURÉ À 390 avant retouche (sonde `probe-retouches2.js`) — le
picto est en `flex: none` à 124 px, il se sert AVANT le titre :
page en-tête largeur du titre lignes
Partenaires « Pourquoi devenir sponsor ? » 210 px sur 358 **3**
Accueil « Les avantages à adhérer » 210 px sur 358 **2**
Le titre travaille donc dans 58 % de sa colonne pour laisser passer 124 px de
décor, et se replie d'autant. Rendu au titre, le même en-tête tient sur une
ligne de moins.
RÈGLE DE COMPOSANT, PAS CAS DE PAGE : c'est le picto D'EN-TÊTE qui sort, sur
toute bande qui en porte un. Deux en-têtes du site sont dans ce cas, et les
deux sont touchés — « Pourquoi devenir sponsor ? » (Partenaires) et « Les
avantages à adhérer » (accueil) ; c'est écrit au rapport du gate.
LE SEUIL EST 767 px, celui du téléphone (`--page-edge-mobile` s'y applique
déjà), et NON 1024, celui de la pile — et c'est une MESURE, prise à 768 px, le
premier cran au-dessus : le titre y tient sur UNE ligne, picto en place
(427 px de titre sur Partenaires, 456 sur l'accueil). Le décor n'y vole rien,
la règle n'a donc rien à y faire. Le desktop ne bouge pas.
============================================================ */
@media (max-width: 767px) {
.lcdi-band__entete-picto { display: none; }
}
/* ============================================================
LA BANDE-FICHE GARDE SES IMAGES AVEC SON NOM — retouche R6 du gate 5a
(13/08, verdict de Julien) : « en pile mobile, on ne comprend plus quelle
image illustre quelle association ».
CE QUI A ÉTÉ CONSTATÉ à 390 sur « Caritatif » (sonde `probe-retouches.js`,
13/08) — la pile réelle, dans son ordre de lecture :
texte « Un défi sportif » (bande duo)
photo du peloton ← le panneau de « Un défi sportif »
photo route ┐ les deux figures de BOOMFOREST,
photo plantation ┘ AVANT que son nom soit prononcé
logo + titre + texte Boomforest
logo + titre + texte Margo
photo Margo
photo Tandem ← avant son nom, encore
logo + titre + texte Tandem
Trois photos d'affilée ouvrent la série, et l'ordre s'inverse d'une
association à l'autre : le lecteur ne peut PAS rattacher une image à son
association. Ce n'est pas un défaut de valeur, c'est un défaut d'ORDRE.
LA RÈGLE : dans la pile, une bande qui NOMME UNE ORGANISATION passe son
contenu en premier ; ses images suivent, collées à lui. On lit le nom, puis
ce qu'il illustre.
CE QUI DÉCLENCHE LA RÈGLE — le LOGO, et c'est du sens, pas un crochet : une
bande qui porte le logo d'une organisation est une FICHE sur cette
organisation ; ses images lui appartiennent. Le gabarit pose donc
`--fiche` quand le champ « logo » est rempli (`bande-contenu.php`). Trois
bandes du site sont dans ce cas aujourd'hui, les trois associations de
« Caritatif » ; aucune autre page n'en porte, ce qui est exactement ce que
le gate demande — accueil et Boutique intactes.
LA PROXIMITÉ FAIT PARTIE DU VERDICT (« ordre ET proximité visuelle ») : la
respiration passe AU-DESSUS du texte, où elle sépare deux fiches, au lieu de
rester sous lui, où elle décollait les images de leur nom.
============================================================ */
@media (max-width: 1024px) {
.lcdi-band--fiche > .lcdi-band__content {
order: -1;
padding-block: var(--space-8) var(--space-5); /* 72 px au-dessus, 24 en dessous */
}
}
@media (max-width: 767px) {
.lcdi-band--fiche > .lcdi-band__content {
padding-block: var(--space-7) var(--space-4); /* 48 px au-dessus, 16 en dessous */
}
}
/* ============================================================
ET ELLE LES GARDE TOUTES — correction 1 du lot 8 (25/08, constat de Julien
sur son téléphone) : « sur Caritatif, Boomforest affiche ses 2 images, "Un
pas vers la vie" et "Tandem" non ».
CE QUI A ÉTÉ MESURÉ à 375 px sur la recette avant correctif (sonde
`_constats/lot8/diag-caritatif.mjs`, opacité et `checkVisibility` compris) —
les six médias des trois fiches existent, chargent et rendent leurs pixels,
ce n'est donc ni un fichier manquant, ni un `srcset`, ni un chargement
différé :
Boomforest figure `--panneau` 375 × 281 + panneau libre 375 × 281
Un pas vers la vie figure **display: none** + panneau de fond 375 × 281
Tandem Réfugiés figure **display: none** + panneau de fond 375 × 281
LA CAUSE EST LA RETOUCHE 12 DU BLOC 3c (« en pile, les images latérales
décoratives sortent ») : elle éteint TOUTE `.lcdi-band__figure` sous 1025 px.
Boomforest y échappe par accident de saisie — ses deux images portent
`figure_en_pile` et `panneau_libre`, donc la classe `--panneau` qui rouvre
l'exception. Autrement dit, la règle décidait « décor ou contenu » sur une
CASE À COCHER de la page, pas sur ce que l'image est.
LA RÈGLE : dans une bande-fiche, une figure n'est jamais du décor. C'est le
portrait de l'organisation nommée juste au-dessus — le même argument qui a
fait naître `--fiche` (l'ordre et la proximité) dit aussi qu'elle doit être
là pour être rapprochée de son nom. Elle prend la forme d'un panneau dans la
pile, exactement comme la figure requalifiée de la retouche 17.
PORTÉE, ET ELLE EST BORNÉE : `--fiche` est posée par le gabarit quand le
champ « logo » est rempli. Trois bandes du site sont dans ce cas, les trois
associations de « Caritatif ». Aucune autre page n'en porte : accueil,
Adhérer, Partenaires et Boutique ne voient pas cette règle.
============================================================ */
@media (max-width: 1024px) {
.lcdi-band--fiche > .lcdi-band__figure { display: block; }
/* la forme des panneaux en pile, reprise telle quelle (`.lcdi-band__panel`) —
elle gagne sur `--portrait` (0,2,1 contre 0,1,1), et c'est voulu : une
colonne d'images de hauteurs différentes ne se lit pas comme une fiche. */
.lcdi-band--fiche > .lcdi-band__figure img { aspect-ratio: 4 / 3; }
}
/* ============================================================
LA BANDE D'UN SEUL MESSAGE — variante `--ligne` (retouche R7, 08/08)
Emploi : le rappel « votre maillot est offert » qui ferme la boutique.
CE QUI A ÉTÉ MESURÉ, à 1440, avant retouche (sonde `probe-bande.js`) :
bande 331 px de haut · message 58 px
contenu 154 px (48 px de marge en haut, 48 px en bas)
dégagement 177 px sous le contenu (`--footer-clearance`, l'air du vélo)
couture 160 px, EN ABSOLU depuis le haut de la bande
Deux défauts en découlent, et ils se voient à l'œil :
1. le message commençait à 48 px du haut, donc DANS la crête de montagnes
(la silhouette du plan avant descend jusqu'à ~108 px) : il traversait la
couture au lieu de venir après elle ;
2. sa marge basse de 48 px S'AJOUTAIT au dégagement de pied : deux fois le
même air, 225 px entre le message et le pied, dont ~115 px de vide franc.
Et surtout : l'encart `--ligne` porte le fond `--surface-warm`, c'est-à-dire
EXACTEMENT celui de la bande chaude qui l'accueille — mesuré `#e0eaec` des
deux côtés, filet compris. L'encart n'existait pas : il ne restait qu'une
icône et une phrase flottant dans un aplat pâle. Sur une bande chaude, il
reprend donc la surface haute — même inversion de contexte que le monde
sombre applique déjà (`notice.css`, `[data-theme="nuit"]`).
============================================================ */
.lcdi-band--ligne .lcdi-band__content {
/* Le message passe SOUS la crête (var(--space-9) = 104 px, le premier cran
au-delà de la silhouette du plan avant) et ne réclame plus d'air en bas :
le dégagement de pied en donne déjà. */
padding-block: var(--space-9) 0;
}
/* L'encart reprend la surface haute et son filet : sur givre, un encart givre
n'est pas un encart. */
.lcdi-band--chaud .lcdi-notice--ligne {
background: var(--surface-raised);
border-color: var(--border-soft);
/* Un peu plus de présence : la respiration d'un encart de contenu
(`.lcdi-notice`, 16 px) plutôt que celle d'une mention (12 px). */
padding: var(--space-4) var(--space-6);
}