/* ============================================================
LA CARTE D'AGENDA — un rendez-vous, son médaillon de date, son état
NOUVEAU COMPOSANT (bloc T6b-R8, 13/08, maquettes des écrans événements).
MOTIF DE SA NAISSANCE : le gate design du 13/08 demande « une UX/UI digne
d'un vrai site qui a un calendrier et des évènements ». La vue liste de
0.7.2 était une suite de lignes posées sur le fond de page : une pastille de
date en aplat d'accent, un titre, deux lignes de méta. Le registre a
`cards.css` — la carte du site, filet 2 px givre, rayon 8, surface haute —
mais aucune de ses variantes n'est HORIZONTALE ni ne porte une date en
colonne. La variante événement naît donc ici, et elle COMPOSE la carte du
registre plutôt que d'en réécrire une : le balisage porte
`lcdi-card lcdi-card--link lcdi-evt-carte`.
LE MÉDAILLON PREND LE TON DE SON TYPE, et c'est ce qui fait la lecture en
diagonale : sur douze cartes, l'œil retrouve les samedis à leur vert et les
cyclosportives à leur brique sans lire un mot. LA LOI DE LA PALETTE TIENT —
le ton peint un VOILE à 16 % et un filet, jamais le texte. Le jour et le mois
restent sur `--text-strong` et `--text-body` ; mesuré sur le plus chargé des
huit voiles : 12,17:1.
LA CARTE ENTIÈRE EST CLIQUABLE SANS IMBRIQUER DEUX LIENS. Le lien du titre
étend sa zone de clic à toute la carte par un `::after` absolu. Un `` dans
un `` serait invalide, et deux liens superposés mettraient deux entrées
dans le parcours au clavier pour une seule destination.
------------------------------------------------------------
CE QUE LE CALQUE COÛTE, ET COMMENT ON LE PAIE (retouche C4 du gate final,
14/08). Le calque couvre TOUTE la carte : tout ce qui se trouve dessous perd
son clic, et tout ce qui remonte au-dessus le lui prend. Les deux erreurs ont
été commises ici, et mesurées avant d'être corrigées (`preuves/clic-liste.mjs`,
passe rouge du 14/08, un vrai clic de souris à des coordonnées réelles) :
« Voir le détail » ... un LIBELLÉ (``, pas un lien) qui
remontait au-dessus du calque : il recevait le clic
et n'en faisait rien. Constaté aux deux largeurs :
le point du bouton était reçu par le `span`, l'URL
ne bougeait pas.
le compte rendu ...... un VRAI lien, qui mène ailleurs que la carte, et qui
restait SOUS le calque : son clic partait à la fiche.
Le gabarit annonçait pourtant « la feuille lui donne
son cran de z-index » — la règle n'existait pas.
LA RÈGLE QUI EN SORT, et elle se lit sur l'intention et non sur la balise :
ce qui MÈNE AILLEURS passe au-dessus du calque et garde son clic ;
ce qui ne mène nulle part (un libellé décoratif) devient transparent au
clic et le laisse au calque — la carte entière reste une seule destination.
============================================================ */
/* --- La liste et ses groupes de mois ------------------------------------ */
.lcdi-agenda-liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--gap-grid-tight); /* 16 px, la gouttière serrée du site */
min-width: 0;
}
/* La liste qui SUIT la barre d'outils prend l'écart d'un groupe au suivant.
Écrit ici plutôt qu'en style de page : une maquette qui pose son propre
`margin-top` en attribut `style` est un CSS de page déguisé. */
.lcdi-calendrier + .lcdi-agenda-liste { margin-top: var(--rythme-bloc); }
/* LE REGROUPEMENT PAR MOIS EST LA COLONNE VERTÉBRALE DE LA LISTE : un agenda
se lit dans l'ordre du temps, et sans repère de mois une liste de douze
rendez-vous devient une suite de dates qu'il faut décoder une par une. */
.lcdi-agenda-mois {
display: flex;
align-items: baseline;
gap: var(--space-4);
margin: 0;
min-width: 0;
}
.lcdi-agenda-mois:not(:first-child) { margin-top: var(--rythme-bloc); }
/* (0,2,0) — même motif de poids que partout ailleurs dans ce lot : la balise
`h2` est adressée par `layout.css` à (0,1,2). Le titre de mois doit rester
SOUS le titre du panneau (39 px) : il prend le cran des H3, 26,88 px. */
.lcdi-agenda-mois .lcdi-agenda-mois__titre {
margin: 0;
font-family: var(--font-display);
font-size: var(--type-title);
font-weight: var(--weight-strong);
line-height: var(--lh-snug);
color: var(--text-strong);
text-transform: capitalize;
white-space: nowrap;
}
/* Le filet prolonge le titre jusqu'au bord : c'est la règle de section du
site, pas un ornement — il dit où finit le groupe. */
.lcdi-agenda-mois__filet {
flex: 1 1 auto;
height: 1px;
min-width: var(--space-6);
background: var(--border-soft);
}
.lcdi-agenda-mois__compte {
flex: none;
font-size: var(--type-caption);
font-variant-numeric: var(--numeric-data);
color: var(--text-body);
}
/* ============================================================
LA CARTE
============================================================ */
.lcdi-evt-carte {
position: relative; /* ancre le lien étendu du titre */
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: stretch;
height: auto; /* `.lcdi-card` impose 100 % : une carte
d'agenda n'est pas dans une grille de
rangées à hauteur égale */
/* `.lcdi-card` pose `overflow: hidden` pour ses photos ; ici il couperait
l'anneau de focus du lien de titre (double bague, 5 px). Les seuls coins à
protéger sont ceux du médaillon, qui les porte lui-même. */
overflow: visible;
isolation: isolate;
min-width: 0;
}
/* --- Le médaillon de date ---------------------------------------------- */
.lcdi-evt-carte__medaillon {
/* LE TON DU FILET PASSE PAR UNE VARIABLE, et c'est ce qui permet au repli
téléphone de tourner le filet d'un quart de tour sans réécrire les deux
variantes qui le repeignent (`--annule`, `--passe`). Sans elle, chaque
variante devrait redire sa couleur une seconde fois dans la requête de
média — et la troisième variante qu'on ajouterait un jour l'oublierait. */
--evt-filet-ton: var(--evt-ton, var(--accent));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
flex: none;
min-width: var(--space-9); /* 104 px */
margin: 0;
padding: var(--space-4) var(--space-3);
background: var(--evt-voile, var(--veil-accent));
/* Le filet du ton, à la frontière du médaillon et du corps : c'est la même
figure que le filet gauche de la pastille du calendrier, tournée. */
border-right: var(--evt-filet, 3px) solid var(--evt-filet-ton);
/* Le rayon intérieur de la carte : son rayon système moins l'épaisseur de
son filet (8 − 2). Sans lui, le médaillon dépasserait du coin arrondi
depuis que la carte ne coupe plus ce qui déborde. */
border-radius: calc(var(--radius-m) - 2px) 0 0 calc(var(--radius-m) - 2px);
line-height: var(--lh-flat);
text-align: center;
}
.lcdi-evt-carte__semaine,
.lcdi-evt-carte__mois {
font-size: var(--type-badge);
font-weight: var(--weight-strong);
text-transform: uppercase;
letter-spacing: var(--ls-badge);
color: var(--text-body);
}
.lcdi-evt-carte__jour {
display: block;
margin: var(--space-1) 0;
font-family: var(--font-display);
font-size: var(--type-title); /* 18 → 26,88 px */
font-weight: var(--weight-title);
font-variant-numeric: var(--numeric-data);
color: var(--text-strong);
}
/* --- Le corps ----------------------------------------------------------- */
.lcdi-evt-carte__corps {
display: flex;
flex-direction: column;
gap: var(--space-2);
justify-content: center;
min-width: 0;
padding: var(--space-4) var(--space-5);
}
.lcdi-evt-carte__type {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--type-fine);
font-weight: var(--weight-strong);
color: var(--text-body);
}
.lcdi-evt-carte__type::before {
content: "";
width: var(--space-3);
height: var(--space-3);
flex: none;
border-radius: var(--radius-round);
background: var(--evt-ton, var(--accent));
}
/* (0,2,0) — `body.lcdi-page-sections h3` pèse (0,1,2). */
.lcdi-evt-carte .lcdi-evt-carte__titre {
margin: 0;
font-family: var(--font-display);
font-size: var(--type-subtitle); /* 18 → 24 px */
font-weight: var(--weight-strong);
line-height: var(--lh-snug);
color: var(--text-strong);
}
/* LE LIEN DU TITRE PORTE SA CLASSE, il n'est pas atteint par celle de son
parent : `.lcdi-evt-carte__titre a` pèserait (0,1,1) et se ferait repeindre
par le `a:hover` du thème — c'est le défaut R1 du gate. */
.lcdi-evt-carte__lien { color: var(--text-strong); text-decoration: none; }
.lcdi-evt-carte__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lcdi-evt-carte__lien:hover,
.lcdi-evt-carte__lien:focus { color: var(--accent-strong); text-decoration: none; }
.lcdi-evt-carte__lien:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: var(--radius-s); }
.lcdi-evt-carte__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-1) var(--space-3);
margin: 0;
font-size: var(--type-caption);
color: var(--text-body);
}
.lcdi-evt-carte__meta > * + *::before {
content: "·";
margin-right: var(--space-3);
color: var(--text-soft); /* séparateur DÉCORATIF : jamais porteur */
}
.lcdi-evt-carte__horaire { font-variant-numeric: var(--numeric-data); }
.lcdi-evt-carte__etats {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
}
/* --- L'action : un LIBELLÉ, et il laisse le clic à la carte -------------- */
/* Il reste DEVANT le calque au regard (z-index) et TRANSPARENT au doigt
(`pointer-events`) : il se voit posé sur la carte, il ne lui prend rien.
`pointer-events: none` est la seule façon d'obtenir les deux — un libellé qui
passerait sous le calque disparaîtrait derrière un rectangle invisible dès
qu'il aurait un fond. */
.lcdi-evt-carte__action {
position: relative;
z-index: 1;
pointer-events: none;
display: flex;
align-items: center;
flex: none;
padding: var(--space-4) var(--space-5) var(--space-4) 0;
}
/* LE SURVOL VIENT DE LA CARTE, PUISQUE LE CLIC VIENT D'ELLE. Sans cette règle,
le libellé ne réagirait plus jamais (il ne reçoit plus le pointeur) et la
carte perdrait l'affordance qu'elle avait : c'est la contrepartie exacte de
`pointer-events: none`, pas un ornement. Mêmes tokens que `.lcdi-btn--ghost:hover`
dans `buttons.css` : une seule voix 2, deux porteurs. */
.lcdi-evt-carte:hover .lcdi-evt-carte__action > .lcdi-btn--ghost {
background: var(--btn-secondary-bg-hover);
color: var(--btn-secondary-text-hover);
border-color: var(--btn-secondary-bg-hover);
transform: translateY(var(--lift-btn));
}
/* CE QUI MÈNE AILLEURS QUE LA CARTE GARDE SON CLIC. Un lien du corps qui n'est
pas le lien de la carte a sa propre destination : il passe au-dessus du
calque. La règle est écrite sur l'INTENTION (« un autre lien ») et non sur une
classe de module, pour que le prochain lien ajouté au corps l'hérite. */
.lcdi-evt-carte__corps a:not(.lcdi-evt-carte__lien) {
position: relative;
z-index: 1;
}
/* --- Un rendez-vous annulé --------------------------------------------- */
/* Il perd son ton de type : ce qu'on doit savoir d'un rendez-vous annulé passe
avant sa famille. Et il ne se dit jamais QUE par la couleur — le titre est
barré et la pastille d'état l'écrit en toutes lettres (WCAG 1.4.1). */
.lcdi-evt-carte--annule .lcdi-evt-carte__medaillon {
background: var(--state-danger-veil);
--evt-filet-ton: var(--state-danger);
}
.lcdi-evt-carte--annule .lcdi-evt-carte__type::before { background: var(--state-danger); }
.lcdi-evt-carte--annule .lcdi-evt-carte__titre { text-decoration: line-through; }
/* --- Un rendez-vous passé : la carte recule d'un cran ------------------- */
/* Le fond descend à la surface de page (variante `--doux` du registre) et le
médaillon perd sa saturation. AUCUNE OPACITÉ : elle fondrait le texte ET son
fond, et c'est exactement le défaut de contraste mesuré au bloc T6b. */
.lcdi-evt-carte--passe { background: var(--surface-page); }
.lcdi-evt-carte--passe .lcdi-evt-carte__medaillon {
background: var(--state-neutral-veil);
--evt-filet-ton: var(--border-strong);
}
/* TROIS COLONNES DÈS LA TABLETTE : médaillon, corps, action. Sans cette règle,
l'action tombe dans une rangée implicite sous le médaillon — constat navigateur
du 13/08, la carte gagnait 60 px de haut et le bouton se retrouvait calé à
gauche, sous la date. */
@media (min-width: 768px) {
.lcdi-evt-carte { grid-template-columns: auto minmax(0, 1fr) auto; }
}
/* ============================================================
AU POUCE, LA CARTE A SON ANATOMIE PROPRE — retouche C2 du gate final (14/08).
CE QU'ELLE REMPLACE, ET LE DÉFAUT QUE JULIEN A NOMMÉ : « la barre colorée du
médaillon s'arrête et se colle au bouton ». La carte téléphone était le
plan de bureau écrasé — deux colonnes (médaillon | corps) puis l'action
poussée dans une rangée en dessous, sur toute la largeur. Le médaillon, lui,
ne s'étirait que sur la PREMIÈRE rangée : sa colonne de couleur s'arrêtait
net au-dessus du bouton, et son filet vertical mourait contre lui. MESURÉ
avant retouche, à 390 (`_constats/t6b-r10/mesures-avant.json`) : carte
358 × 355,27, médaillon **72 × 297,27** — soit une barre de couleur qui
s'arrête **58 px** avant le bas de la carte, juste au-dessus du bouton.
CE QUE CETTE ANATOMIE POSE À LA PLACE — trois étages, pas deux colonnes :
1. LE MÉDAILLON DEVIENT LA BANDE D'EN-TÊTE de la carte, sur toute sa
largeur : « SAM 23 AOÛT » sur une ligne. Il garde son voile de ton et
son filet, qui tourne d'un quart de tour (de droite en bas) et redevient
ce qu'il est : la frontière entre l'en-tête et le corps.
2. LE CORPS suit, à la largeur pleine — le titre n'a plus à partager sa
ligne avec une colonne de date.
3. LE BOUTON EST DANS LE CORPS, sous la méta, à la même réserve latérale :
il n'est plus une rangée de grille collée au médaillon, il est le
dernier objet du corps.
Le ton du type reste ce qui donne la lecture en diagonale : c'est la seule
chose qui ne bouge pas d'un repli à l'autre.
============================================================ */
@media (max-width: 767px) {
.lcdi-evt-carte { grid-template-columns: minmax(0, 1fr); }
.lcdi-evt-carte__medaillon {
flex-direction: row;
align-items: baseline;
justify-content: flex-start;
gap: var(--space-2);
min-width: 0;
padding: var(--space-2) var(--space-4);
text-align: left;
/* Le filet tourne : il n'y a plus de colonne à border, il y a un en-tête à
poser. Le TON vient de `--evt-filet-ton`, donc les variantes `--annule`
et `--passe` suivent sans une ligne de plus. */
border-right: 0;
border-bottom: var(--evt-filet, 3px) solid var(--evt-filet-ton);
border-radius: calc(var(--radius-m) - 2px) calc(var(--radius-m) - 2px) 0 0;
}
/* Le jour perd sa marge de colonne : sur une ligne, l'écart est le `gap`. */
.lcdi-evt-carte__jour { margin: 0; }
/* LE CORPS ET L'ACTION FONT UN SEUL BLOC : le corps ne referme pas sa réserve
basse, l'action la reprend. Le bouton est ainsi DANS le corps (même
réserve latérale, même respiration) sans quitter la grille — au bureau il
doit rester une troisième colonne, ce qu'un enfant du corps ne peut pas
être. */
.lcdi-evt-carte__corps { padding: var(--space-4) var(--space-4) 0; }
.lcdi-evt-carte__action {
grid-column: 1 / -1;
padding: var(--space-4);
}
.lcdi-evt-carte__action > .lcdi-btn { width: 100%; justify-content: center; }
}