/* ============================================================
LA FICHE D'ÉVÉNEMENT — bandeau, repères en panneau, geste d'inscription
NOUVEAU COMPOSANT (bloc T6b-R8, 13/08, maquettes des écrans événements).
MOTIF DE SA NAISSANCE : le gate design du 13/08 — « même remarque pour la
fiche événement », c'est-à-dire un contenu posé sous un titre, sans sol et
sans hiérarchie. La fiche 0.7.2 empilait dans une colonne de 842 px : carte
de repères, description, bloc d'inscription, retours. Tout au même niveau,
dans le même ordre qu'un document Word.
CE QUE CE COMPOSANT POSE, ET POURQUOI :
1. DEUX COLONNES. La description à gauche, le PANNEAU DE DÉCISION à droite —
repères et inscription réunis. « Sans chasse au trésor » veut dire : le
geste est visible à l'arrivée, pas trois écrans plus bas. La colonne de
décision vient EN PREMIER dans le document : au clavier comme au lecteur
d'écran, on rencontre le quand / où / pour qui / places avant la prose.
2. LE BANDEAU DE TYPE, pour une fiche sans photo. Le sol prend le ton de la
famille, TOUJOURS ramené vers le bleu nuit du système : la teinte se voit,
le fond reste sombre, et le titre clair tient quel que soit le ton
(mesuré : le plus clair des huit rend #21212f, soit 15,6:1 sous du blanc).
Poser une photo générique à la place aurait menti sur le contenu.
3. LES RETOURS EN CARTES du registre, jamais en liste de liens : un compte
rendu de sortie est un contenu du site, montré partout ailleurs en carte.
LA CLASSE `--type` EST UNE GARDE, pas une commodité : `var(--evt-ton)` écrit
sans elle sur un bandeau sans ton ne serait pas « ignoré » mais INVALIDE AU
CALCUL, ce qui pour un fond veut dire transparent — l'écran y perdrait son
sol. La règle qui peint n'existe donc que là où un ton existe.
============================================================ */
/* ============================================================
1 · LE BANDEAU
============================================================ */
/* Sur une scène photographique, le surtitre quitte l'accent pour le blanc, et
c'est une conclusion de mesure : sous une photo le fond n'est pas plat, et le
teal du club tombe à 1,4:1 sur le pire pixel (une façade blanche sous le
voile de scène à .40). Le système a déjà sa réponse pour du texte posé sur un
média — le blanc du monde de nuit et `--shadow-text`. */
.lcdi-evt-bandeau--scene .lcdi-eyebrow {
color: var(--text-on-night);
text-shadow: var(--shadow-text);
}
.lcdi-evt-bandeau .lcdi-eyebrow { margin-bottom: var(--space-3); }
/* L'ÉMOJI DU TYPE SUR LE SURTITRE — retouche R8b (14/08, décision de gate).
Même règle que sur le chip (`agenda-toolbar.css` § L'ÉMOJI DU TYPE) : il
revient là où il y a la place, il est `aria-hidden` parce que le nom du type
est écrit juste devant.
Le surtitre est en capitales avec interlettrage ; l'espace de l'interlettrage
suffit à détacher le glyphe, la marge n'a donc qu'à annuler ce que
`--ls-eyebrow` ajoute APRÈS lui, sans quoi l'émoji flotte en fin de ligne.
`line-height: 1` pour le même motif que sur le chip : un glyphe d'émoji est
plus haut que la police et pousserait la ligne du surtitre. */
.lcdi-evt-bandeau .lcdi-eyebrow .lcdi-evt-bandeau__emoji {
display: inline-block;
margin-left: var(--space-1);
margin-right: calc(var(--ls-eyebrow, 0) * -1);
font-size: 1em;
line-height: 1;
letter-spacing: normal;
vertical-align: baseline;
}
/* LE VISUEL DE TYPE — le sol prend la famille, ramené vers le bleu nuit.
LE FILET DU BAS PREND LE TON ÉCLAIRCI, et c'est une MESURE, pas un goût : le
sol EST fait du ton, donc le ton nu posé dessus ne peut pas s'en détacher.
Mesuré le 13/08 sur le teal du club : 2,44:1 avec le ton nu, 7,3:1 avec le
ton éclairci. Sur le bleu nuit, le ton nu tombe à 1,00:1 — le filet
disparaissait purement et simplement. */
.lcdi-hero--type {
background-color: color-mix(in srgb, var(--evt-ton) 40%, var(--brand-nuit));
border-bottom: 4px solid var(--evt-ton-clair);
}
/* Le bandeau plein porte autre chose qu'un titre seul : le registre écrase la
marge basse du titre en `--plain`, on la rend aux blocs qui suivent. */
.lcdi-evt-bandeau--uni .lcdi-hero__title { margin-bottom: 0; }
/* ============================================================
LE CHROME PASSE SOUS LE BANDEAU — AMENDEMENT DU BLOC T5 (15/08)
DÉCISION JULIEN (15/08, gate de fusion) : « header transparent sur toute page
ouvrant sur un bandeau coloré, le bandeau glisse sous le chrome ; le chrome
reste noir partout ailleurs ». La règle se dérive du CONTENU (scène
d'ouverture ou bandeau coloré), jamais d'une liste de slugs — c'est
précisément ce que cette classe désigne : le bandeau de type, qui est un
aplat de couleur par construction.
LA SCÈNE PHOTOGRAPHIQUE N'A RIEN À FAIRE ICI : `.lcdi-hero` porte déjà la
compensation dans son bloc de base (`calc(142px + var(--space-8))`), depuis
la DA. C'est le bandeau PLEIN qui ne l'a pas — `--plain` a été relevé sur
`/tableau-de-bord/` et `/boutique/`, deux pages à chrome opaque, et son
commentaire d'origine le dit en toutes lettres (« le header n'est PAS
transparent sur ces pages, la compensation disparaît »). Elle revient donc
ici, portée par le modificateur qui rend le chrome transparent, et pas par
`--plain` — les pages légales, elles, gardent leur chrome noir et leur
bandeau court.
`--evt-header-h` reprend `--header-h` de `header.css` : la variable est
déclarée sur `.lcdi-header`, elle ne descend pas jusqu'ici par héritage.
============================================================ */
.lcdi-evt-bandeau--uni {
--evt-header-h: 142px;
padding-block: calc(var(--evt-header-h) + var(--space-6)) var(--space-7);
}
/* LE SEUIL EST 1024, ET C'EST UNE MESURE (sonde du 15/08) : `header.css`
change de gabarit à `max-width: 1024px` (marge `--space-2`, logo 140 px) et
le chrome rendu passe de 142 à 119 px. `.lcdi-hero` du registre, lui, ne
bascule qu'à 767 — écart connu, porté au rapport du bloc T5, non corrigé ici
pour ne pas déplacer des héros déjà gatés. */
@media (max-width: 1024px) {
.lcdi-evt-bandeau--uni {
--evt-header-h: 119px;
padding-block: calc(var(--evt-header-h) + var(--space-5)) var(--space-6);
}
}
.lcdi-evt-bandeau__badges,
.lcdi-evt-bandeau__gestes {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-4);
}
/* LA LIGNE DE REPÈRES DU BANDEAU — la date et le lieu, tout de suite, sur la
scène. C'est ce qu'un visiteur cherche en arrivant sur une page événement ;
la carte de repères plus bas les redit en entier, pour qui lit la page.
Texte du monde de nuit + ombre de texte : la même recette que le titre. */
.lcdi-evt-bandeau__reperes {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2) var(--space-5);
margin: var(--space-4) 0 0;
font-size: var(--type-lead);
color: var(--text-on-night);
text-shadow: var(--shadow-text);
}
.lcdi-evt-bandeau__repere {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.lcdi-evt-bandeau__repere svg {
width: 1.1em;
height: 1.1em;
flex: none;
fill: var(--icon-inverse); /* sur nuit, l'accent d'origine passe (7,02:1) */
}
.lcdi-evt-bandeau__repere time { font-variant-numeric: var(--numeric-data); }
/* ============================================================
2 · LE CORPS — DEUX PANNEAUX CÔTE À CÔTE, et la description en dessous
REFONTE R8b R-b (14/08, décision de gate). Ce qui vient d'être défait :
une mise en page à DEUX COLONNES, la description à gauche, le panneau de
décision à droite.
POURQUOI ELLE TOMBE, et ce n'est pas un revirement de goût : elle présumait
une description riche, et LA PLUPART DES RENDEZ-VOUS DU CLUB N'EN ONT PAS.
L'archive EventPrime le prouve — les Sorties du samedi, le rendez-vous le
plus fréquent (une par semaine), n'ont aucun texte. Une colonne gauche vide
en face d'un rail de 384 px ne « respire » pas, elle penche. La maquette R8
le montrait déjà avec sa description LA PLUS riche : la colonne gauche
s'arrêtait ~400 px avant la droite.
CE QUI LA REMPLACE : ce qui existe TOUJOURS passe en premier et occupe toute
la largeur de lecture — « Les repères » (quand / où / pour qui / places) et
« S'inscrire à ce rendez-vous », ou son équivalent d'état (passé, complet,
réservé). Deux panneaux frères, à égalité, dans une bande à sol.
La description devient une CARTE optionnelle, sous les deux panneaux :
présente, elle a sa place et sa mesure de lecture ; absente, il ne reste rien
à cacher. Une page ne se construit pas sur ce qui manque.
------------------------------------------------------------
L'ÉGALITÉ DE HAUTEUR TOMBE — correction C3 du gate final (14/08).
CONSTAT (Julien) : « le panneau repères s'étire sur toute la hauteur du
formulaire invité (700 px de vide interne) ». MESURÉ avant correction, à 1280,
sur la fiche qui porte le formulaire de six champs
(`_constats/t6b-r10/mesures-avant.json`, `/agenda/demo-t6a-sortie-samedi/`) :
panneau de décision .. 600 × 920,03 (dont 682,78 px de formulaire)
panneau de repères ... 600 × **920,03** pour **217,07 px de contenu**
(4 lignes : 75,5 + 47,19 × 3)
écart entre lignes ... **206,45 px** au lieu de `--space-4` (16)
le même panneau, sans formulaire en face : 600 × 348,66, écarts à 16.
L'égalité de hauteur lui faisait donc porter **571,37 px** qui n'étaient pas
les siens, et les répartissait entre quatre lignes.
CE QUI S'EST PASSÉ, ET C'EST UNE CAUSE DE MÉTHODE : `align-items: stretch`
était juste tant que les deux panneaux étaient courts — la maquette gatée ne
montrait que le panneau du membre connecté (trois lignes). Face à un
formulaire de six champs, l'égalité de hauteur ne fait plus tenir deux
panneaux ensemble : elle fait mentir le plus court.
LA RÈGLE QUI LA REMPLACE : `align-items: start`. Les deux panneaux
s'alignent EN HAUT, chacun à sa hauteur naturelle. Un panneau court est un
panneau court ; il n'y a rien à distribuer, donc plus rien qui se distribue
(§ 3 et § 4 en portaient chacun leur mécanique, toutes deux retirées).
============================================================ */
/* ------------------------------------------------------------
LA FICHE EST UNE PILE, SA RANGÉE EST LA GRILLE — correction R11-2b (14/08).
CE QUI L'A DÉCIDÉ, ET C'EST UNE MESURE : le panneau collant (§ 2 de la requête
média) ne s'arrêtait pas au bas de sa rangée. Un élément `sticky` est contraint
par SON CONTENEUR, et les trois blocs vivaient dans le même : le panneau collait
donc jusqu'en bas de la fiche entière — c'est-à-dire PAR-DESSUS la carte
« À propos ». MESURÉ à 1280 sur la fiche à description, avant correction
(`preuves/sticky-reperes.mjs`, balayage de 25 paliers) :
chevauchement maximal .... 600 × 131 px = **78 888 px²**, au défilement 738
à 390 (panneau `static`) . 0 px²
CE QUI CHANGE, ET RIEN D'AUTRE : les deux panneaux entrent dans leur propre
rangée. La fiche devient une PILE (une colonne, même gouttière), la rangée
porte la grille à deux colonnes. La course du collant se borne alors d'elle-même
au bas de la rangée — sans `bottom`, sans hauteur écrite, sans seuil neuf.
LE RENDU HORS DÉFILEMENT NE BOUGE PAS D'UN PIXEL : même gouttière
(`--gap-grid`) entre les panneaux et sous eux, même alignement en haut, mêmes
largeurs. La carte « À propos » n'a d'ailleurs plus besoin de traverser la
grille (`grid-column: 1 / -1`, § 5) : elle est désormais SŒUR de la rangée,
dans une pile d'une seule colonne.
------------------------------------------------------------ */
.lcdi-evt-fiche {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-grid);
min-width: 0;
}
.lcdi-evt-fiche__rangee {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gap-grid);
align-items: start;
min-width: 0;
}
/* Le seuil reste celui du bureau (`--bp-desktop`). Sous 1025 px, les deux
panneaux s'empilent : côte à côte ils tomberaient à ~340 px chacun, où la
ligne « Adhérents et partenaires » d'un repère passe sur deux lignes et où
les deux boutons d'inscription se serrent. */
@media (min-width: 1025px) {
.lcdi-evt-fiche__rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* ------------------------------------------------------------
LES REPÈRES SUIVENT LE DÉFILEMENT — retouche R11-2 (14/08, gate).
CE QU'ELLE RÈGLE : le vide laissé par la correction C3 (§ 8.4 du rapport
R10). Depuis que les panneaux ont chacun leur hauteur naturelle, un
formulaire invité de six champs (920 px mesurés à 1280) laisse ~490 px de
vide sous le panneau de repères. Le collant en fait autre chose qu'un vide :
la date, le lieu, l'audience et les places restent en face du geste pendant
qu'on remplit ses coordonnées — c'est exactement ce qu'on relit à ce
moment-là.
LE SEUIL EST CELUI DU LAYOUT, PAS UN SEUIL NEUF : le collant n'a de sens
que là où il y a deux colonnes. En pile (< 1025), un panneau collant
recouvrirait le suivant — la règle vit donc DANS la requête média qui pose
les deux colonnes, et nulle part ailleurs.
LE DÉCALAGE HAUT EST DÉRIVÉ, PAS CHOISI. `--header-h` est déclaré SUR
`.lcdi-header` et reste hors de portée d'un panneau de fiche (même
empêchement que pour l'ancre du calendrier). La valeur reprend donc la
MESURE DÉJÀ FAITE au chantier et son calcul, à l'identique de
`--cal-ancre-marge` (`calendar.css` § L'ANCRE ARRIVE SOUS L'EN-TÊTE) :
`--space-9 + --space-5` = 128 px, quand le bas de l'en-tête collant en
mesure 105 — 23 px de dégagement, constatés à 390 comme à 1440 le 14/08.
Une source, deux emplois : si l'en-tête change de hauteur, les deux se
corrigent au même endroit.
LA CARTE « À PROPOS » NE BOUGE PAS : elle reste sous les deux panneaux
(verdict maintenu au gate). Le collant ne déplace rien, il retient.
ET SA COURSE S'ARRÊTE AU BAS DE SA RANGÉE (correction R11-2b) : c'est le
conteneur `.lcdi-evt-fiche__rangee` qui la borne, pas une valeur écrite ici.
Sans cette rangée, le panneau collait jusqu'en bas de la fiche entière et
recouvrait la carte « À propos » de 78 888 px² (voir § 2). Un collant se
juge à sa FIN DE COURSE autant qu'à son décalage : `preuves/sticky-reperes.mjs`
balaie désormais toute la hauteur de la page et mesure l'intersection des
deux boîtes à chaque palier.
------------------------------------------------------------ */
.lcdi-evt-meta {
position: sticky;
top: var(--evt-sticky-top, calc(var(--space-9) + var(--space-5)));
}
}
/* ============================================================
3 · LA CARTE DE REPÈRES — quand / où / pour qui / places
Le panneau posé du système : surface haute, filet, ombre des objets posés.
C'était un cadre plat collé sous le titre.
============================================================ */
.lcdi-evt-meta {
margin: 0;
padding: var(--space-5);
background: var(--surface-raised);
border: 1px solid var(--border-soft);
border-radius: var(--radius-l);
box-shadow: var(--shadow-soft);
min-width: 0;
}
.lcdi-evt-meta__titre {
margin: 0 0 var(--space-4);
font-size: var(--type-badge);
font-weight: var(--weight-strong);
text-transform: uppercase;
letter-spacing: var(--ls-badge);
color: var(--text-body);
}
/* LES REPÈRES SE COMPOSENT DEPUIS LE HAUT, À ÉCART FIXE — correction C3.
La liste prenait le reliquat de hauteur du panneau et le distribuait entre
ses lignes (`flex: 1` + `align-content: space-between`) : c'était la
conséquence de l'égalité de hauteur (§ 2), et c'est ce qui donnait quatre
repères espacés de 200 px en face d'un formulaire. L'écart est désormais
`--space-4`, quoi qu'il arrive — un plancher qui est aussi le plafond. */
.lcdi-evt-meta__liste {
margin: 0;
display: grid;
gap: var(--space-4);
}
.lcdi-evt-meta__ligne {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--space-3);
min-width: 0;
}
/* L'icône est INFORMATIVE, jamais interactive : elle consomme `--icon`
(l'encre du teal, 5,30:1). L'accent d'origine n'atteint pas 3:1 sur clair. */
.lcdi-evt-meta__icone {
width: var(--space-5);
height: var(--space-5);
flex: none;
margin-top: var(--space-1);
color: var(--icon);
fill: var(--icon);
}
.lcdi-evt-meta__icone svg { width: 100%; height: 100%; fill: currentColor; }
.lcdi-evt-meta dt {
margin: 0 0 var(--space-1);
font-size: var(--type-badge);
text-transform: uppercase;
letter-spacing: var(--ls-badge);
color: var(--text-body);
}
.lcdi-evt-meta dd {
margin: 0;
font-weight: var(--weight-strong);
color: var(--text-strong);
}
.lcdi-evt-meta dd time { font-variant-numeric: var(--numeric-data); }
.lcdi-evt-meta__aparte {
margin: var(--space-1) 0 0;
font-size: var(--type-caption);
font-weight: var(--weight-body);
color: var(--text-body); /* jamais `--text-soft` : 3,32:1 ne porte
pas du petit texte */
}
/* ============================================================
4 · LE BLOC D'INSCRIPTION — là où l'on agit
Il porte le FILET TEINTÉ de la plaque et une tête en voile d'accent : c'est
le seul objet de la page qu'on doit retrouver du pouce sans relire un mot.
============================================================ */
.lcdi-evt-inscription {
background: var(--surface-raised);
border: 1px solid var(--border-accent);
border-radius: var(--radius-l);
box-shadow: var(--shadow-soft);
min-width: 0;
}
/* LES ÉTATS SANS GESTE SONT LE MÊME PANNEAU, PAS UN AUTRE OBJET — nés en R8b.
La fiche d'un rendez-vous passé posait à cette place un encart (`.lcdi-notice`)
suivi d'un bouton nu : deux objets de formes différentes en face du panneau
de repères, donc deux panneaux qui ne pouvaient PAS avoir la même hauteur ni
le même poids. Un état n'est pas un composant : la place de la décision garde
sa forme quoi qu'il arrive, seul son contenu change.
DEUX ÉTATS, UNE SEULE PEINTURE, et ils ne se confondent pas dans le texte :
`--passe` .... le rendez-vous a eu lieu ;
`--libre` .... il n'y a rien à réserver. Cet état-là vient de l'ARCHIVE :
les Sorties du samedi — le rendez-vous le plus fréquent du
club — y sont en `bookings_off`, sans billet par compte.
Les deux perdent le filet et la tête d'accent : le teal du club est réservé à
ce sur quoi on peut agir, et ici il n'y a rien à décider. */
.lcdi-evt-inscription--passe,
.lcdi-evt-inscription--libre { border-color: var(--border-soft); }
.lcdi-evt-inscription--passe .lcdi-evt-inscription__tete,
.lcdi-evt-inscription--libre .lcdi-evt-inscription__tete { background: var(--surface-page); }
.lcdi-evt-inscription__tete {
padding: var(--space-4) var(--space-5);
background: var(--veil-accent);
border-bottom: 1px solid var(--border-soft);
border-radius: var(--radius-l) var(--radius-l) 0 0;
}
/* ============================================================
POURQUOI CES SÉLECTEURS PÈSENT (0,2,0) ET NON (0,1,0)
`layout.css` remet l'échelle de type du système sur les balises de titre des
pages en sections : `body.lcdi-page-sections h2` pèse (0,1,2). Une classe
seule pèse (0,1,0) et se fait donc écraser — CONSTATÉ au navigateur le 13/08,
le titre du bloc d'inscription rendait 39 px au lieu de 20 et passait sur deux
lignes. Le composant nomme donc son titre DEUX fois (parent + élément) pour
reprendre la main sans inventer de poids artificiel.
============================================================ */
.lcdi-evt-inscription__tete .lcdi-evt-inscription__titre {
margin: 0;
font-family: var(--font-display);
font-size: var(--type-h5);
font-weight: var(--weight-title);
color: var(--text-strong);
}
/* Le corps empile ses objets à écart constant. IL N'Y A PLUS DE RELIQUAT À
PLACER depuis la correction C3 (§ 2) : le panneau fait sa hauteur, le geste
suit la liste, la mention suit le geste. La colonne flexible reste pour son
`gap` — un écart de pile, pas une distribution. */
.lcdi-evt-inscription__corps {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.lcdi-evt-inscription__mention {
margin: 0;
font-size: var(--type-caption);
color: var(--text-body);
}
/* LA DESTINATION EXTERNE, SOUS SON BOUTON (lot 9, 25/08).
ELLE APPARTIENT AU BOUTON, PAS À LA PILE. Le corps empile ses objets à
`--space-4` (16 px) : servie telle quelle, la phrase « Inscription sur
spond.com » flotterait à la même distance du bouton que le bouton du bloc
précédent, et se lirait comme un objet de plus. Elle est la LÉGENDE du geste
— elle dit où il mène — donc elle se resserre à `--space-2` (8 px). La
compensation passe par la marge parce que le `gap` du parent ne se retire pas
d'un seul enfant.
ELLE VIT ICI ET PAS DANS LA COUCHE DE PAGE DU MODULE, et c'est la garde
`S-t3-transports` qui a tranché au premier jeu : `.lcdi-evt-inscription` est
une famille TRANSPORTÉE du registre, et une variante d'un composant appartient
au composant. Écrite dans `lcdi-core/assets/evenements.css`, elle redéfinissait
la famille depuis l'extérieur — la façon exacte dont deux feuilles finissent
par se contredire.
PAS DE `--text-soft` : 3,32:1 ne porte pas du petit texte (§ 3). La couleur
reste celle de la base ; c'est la taille et la place qui disent « discret ». */
.lcdi-evt-inscription__mention--externe {
margin-top: calc(var(--space-2) - var(--space-4));
text-align: center;
}
.lcdi-evt-inscription__liste {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: var(--space-2);
font-size: var(--type-caption);
color: var(--text-body);
}
.lcdi-evt-inscription__liste li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--space-2);
}
.lcdi-evt-inscription__liste svg {
width: 1.1em;
height: 1.1em;
margin-top: .25em;
flex: none;
fill: var(--icon);
}
/* ------------------------------------------------------------
LA CARTE DE CONFIRMATION DU MEMBRE — retouche R11-4 (14/08, gate).
CE QU'ELLE REMPLACE : six champs pré-remplis en gris. CONSTAT DE JULIEN — un
formulaire pré-rempli en gris se lit comme un formulaire VIDE, et il laisse
croire qu'on peut y éditer son profil. Or l'inscription n'écrit jamais la
fiche adhérent : l'identité vit dans la ligne d'inscription.
ELLE NE RESSEMBLE DONC PAS À UN CHAMP, et c'est toute la règle de forme : pas
de filet de contrôle, pas de fond blanc de saisie, pas de hauteur de champ.
C'est un ENCART DE LECTURE — la surface de page dans un panneau en surface
haute, le cran de valeur du système, exactement comme la tête d'un panneau
sans accent. Un lecteur doit voir « voici ce qui va être enregistré », jamais
« remplis-moi ».
LE NOM PORTE LE POIDS, l'e-mail et le téléphone suivent en mention : c'est
l'ordre de lecture d'une confirmation — qui, puis comment on vous joint.
------------------------------------------------------------ */
.lcdi-evt-identite {
padding: var(--space-4);
background: var(--surface-page);
border: 1px solid var(--border-soft);
border-radius: var(--radius-m);
}
.lcdi-evt-identite__intro {
margin: 0 0 var(--space-1);
font-size: var(--type-caption);
color: var(--text-body);
}
.lcdi-evt-identite__nom {
margin: 0;
font-family: var(--font-display);
font-size: var(--type-h6);
font-weight: var(--weight-title);
line-height: var(--lh-snug);
color: var(--text-strong);
}
.lcdi-evt-identite__ligne {
margin: var(--space-1) 0 0;
font-size: var(--type-fine);
/* Jamais `--text-soft` : 3,32:1 ne porte pas du petit texte (même règle que
l'aparté des repères, § 3). */
color: var(--text-body);
overflow-wrap: anywhere; /* une adresse longue ne déborde pas du panneau */
}
/* ============================================================
5 · « À PROPOS DE CE RENDEZ-VOUS » — la description, en carte
NÉE DE LA CORRECTION C3 (14/08, gate final). CONSTAT (Julien) : « la
description d'une ligne flotte "posée là" dans sa bande avant le pied ».
CE QU'ELLE REMPLACE : une BANDE entière (sol alterné, crête de changement de
sol, 72 px de réserve haute) dont tout le contenu était une ligne de texte
nue. Une bande est ce qui sépare deux mondes de la page ; une phrase n'en est
pas un. MESURÉ à 1280 avant correction
(`_constats/t6b-r10/mesures-avant.json`) : une bande de **300,22 px** au
milieu d'une fiche — **385,66** quand elle en est la dernière — pour une
prose de 794 × **25,59**, c'est-à-dire une ligne.
CE QUE CETTE CARTE POSE À LA PLACE : le troisième panneau de la fiche, dans
la MÊME bande que les deux autres, sous eux, sur toute leur largeur. C'est le
panneau posé du système, exactement celui des repères — même surface, même
filet, même rayon, même ombre — parce que c'est le même genre d'objet : un
bloc de la fiche, pas une section du site. Absente, il n'y a rien, pas même
une carte vide : le gabarit ne la rend que si le texte existe.
LA MESURE DE LECTURE EST GARDÉE, ET C'EST TOUT CE QUI RESTE DE LA BANDE : la
prose se plafonne à la colonne de lecture du site moins les réserves de la
carte (842 − 2 × 24 = 794 px, la ligne de lecture du chantier). Sans ce
plafond, la carte rendrait la description sur 1232 px — au-delà de la mesure,
une ligne de prose devient un balayage de tête.
============================================================ */
/* `grid-column: 1 / -1` est parti à la correction R11-2b : la carte n'a plus de
grille à traverser. Elle est SŒUR de la rangée des deux panneaux, dans une
pile d'une seule colonne (§ 2) — et c'est ce qui borne la course du collant. */
.lcdi-evt-apropos {
margin: 0;
padding: var(--space-5);
background: var(--surface-raised);
border: 1px solid var(--border-soft);
border-radius: var(--radius-l);
box-shadow: var(--shadow-soft);
min-width: 0;
}
/* (0,2,0) — même motif que partout dans ce lot : `body.lcdi-page-sections h2`
pèse (0,1,2) et rendrait ce titre à 39 px. Le surtitre du panneau frère
(« LES REPÈRES ») est un `` et n'a pas ce problème ; celui-ci est un titre
de vraie section de la fiche, il doit rester un `
` dans le document. */
.lcdi-evt-apropos .lcdi-evt-apropos__titre {
margin: 0 0 var(--space-4);
font-family: var(--font-body);
font-size: var(--type-badge);
font-weight: var(--weight-strong);
line-height: var(--lh-snug);
text-transform: uppercase;
letter-spacing: var(--ls-badge);
color: var(--text-body);
}
.lcdi-evt-apropos .lcdi-evt-prose {
max-width: calc(var(--container-narrow) - var(--space-5) * 2);
}
/* ============================================================
6 · LA DESCRIPTION
Socle d'ÉLÉMENTS, pas un composant : `.lcdi-prose` du registre est le panneau
de document, taillé pour les pages légales ; la description d'un événement
est deux paragraphes dans une fiche.
============================================================ */
.lcdi-evt-prose > :first-child { margin-top: 0; }
.lcdi-evt-prose > :last-child { margin-bottom: 0; }
.lcdi-evt-prose .lcdi-evt-prose__titre {
margin: var(--rythme-bloc) 0 var(--rythme-titre);
font-size: var(--type-title);
line-height: var(--lh-snug);
}
.lcdi-evt-prose .lcdi-evt-prose__titre:first-child { margin-top: 0; }
.lcdi-evt-prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.lcdi-evt-prose li { margin: 0 0 var(--space-2); }
/* ============================================================
7 · LES RETOURS D'ÉVÉNEMENT
La carte et la grille viennent du registre (`cards.css`, variante média) ; il
ne reste ici que le surtitre et la date, qui sont à nous.
============================================================ */
.lcdi-evt-retour__surtitre {
margin: 0;
font-size: var(--type-fine);
letter-spacing: normal; /* l'interlettrage du surtitre ne convient
pas à une étiquette de carte */
}
/* LE TITRE D'UNE CARTE DE RETOUR NE PREND PAS `.lcdi-card__title--event`, et
c'est une mesure qui l'a décidé. Cette variante du registre peint le titre en
`--accent-strong` (#4f8796) et se justifie par « à 24 px c'est du grand texte,
seuil 3:1 ». Or `--type-subtitle` est FLUIDE (18 → 24 px) : sous ~1100 px de
fenêtre le titre descend à 18 px, redevient du texte courant, et 4,01:1 passe
sous le plancher de 4,5. Mesuré le 13/08 à 768 (21,2 px) et à 390 (18 px).
Le titre prend donc `--accent-ink`, le SEUL teal qui porte du texte sur fond
clair (5,65:1) : le rendu reste teal, la mesure passe à toutes les largeurs.
Le défaut de `cards.css` est SIGNALÉ AU RAPPORT, pas corrigé ici — il porte
sur des pages déjà gatées. */
.lcdi-evt-retour__titre { color: var(--accent-ink); }
.lcdi-evt-retour__date {
margin: 0;
font-size: var(--type-fine);
font-variant-numeric: var(--numeric-data);
color: var(--text-body);
}
/* ============================================================
8 · LE RETOUR À L'AGENDA — retouche R11-1 (14/08, retour de gate)
CONSTAT (Julien) : depuis une fiche, rien ne ramène à l'agenda. On y arrive
par une carte, on en repart par le bouton du navigateur — ou par le menu du
site, qui ne connaît ni la vue ni le filtre qu'on avait posés.
LE LIEN EST UN LIEN, PAS UN BOUTON, et c'est une décision de hiérarchie : la
fiche a UN geste principal (s'inscrire), porté par un bouton plein cadre dans
la place de la décision. Un second bouton en tête de page se disputerait le
même rang de lecture. Le retour est une sortie, elle se propose ; elle ne
réclame pas.
IL SE RÉPÈTE EN PIED, à la même adresse : une fiche fait deux à trois écrans
de haut, et remonter chercher le lien qu'on a vu en arrivant est précisément
le geste que la retouche supprime. La variante `--pied` se centre parce que
ce qui la précède est centré (l'aparté), et qu'une ligne de clôture calée à
gauche sous une phrase centrée se lit comme un reste.
LA FLÈCHE EST DÉCORATIVE : `Icones::rendre()` la rend `aria-hidden`, et le
mot « Retour » dit déjà le sens. Elle est dimensionnée en `em` — un
pictogramme qui ne suit pas la taille de son texte se décale au premier
changement d'échelle.
ÉTATS POSSÉDÉS (leçon R1 du gate T6b) : le thème peint `a:hover, a:focus` au
poids (0,1,1). Le lien écrit donc les siens au même poids, servis après —
sans quoi le survol le repeindrait en `--link-hover`.
============================================================ */
.lcdi-evt-retour {
margin: 0 0 var(--space-4);
font-size: var(--type-fine);
line-height: var(--lh-snug);
}
.lcdi-evt-retour--pied {
margin: var(--rythme-bloc) 0 0;
text-align: center;
}
.lcdi-evt-retour__lien {
display: inline-flex;
align-items: center;
gap: var(--space-2);
border-radius: var(--radius-s);
color: var(--accent-ink); /* le SEUL teal qui porte du texte sur clair (5,65:1) */
font-weight: var(--weight-medium);
text-decoration: none;
transition: color var(--t-quick) var(--ease-brand);
}
.lcdi-evt-retour__lien svg {
width: .7em;
height: .7em;
flex: none;
fill: currentColor;
}
.lcdi-evt-retour__lien:hover,
.lcdi-evt-retour__lien:focus {
color: var(--text-strong);
text-decoration: underline;
}
.lcdi-evt-retour__lien:focus-visible { box-shadow: var(--focus-ring); outline: none; }