/* ============================================================
   LE CALENDRIER — un panneau posé, une grille qui raconte le mois
   NOUVEAU COMPOSANT (bloc T6b-R8, 13/08, maquettes des écrans événements).

   MOTIF DE SA NAISSANCE : le gate design du 13/08. Verdict de Julien sur la
   version 0.7.2 — « le calendrier est mieux, mais il est trop petit et il a
   l'air posé sur la page ; il faut l'encadrer dans une section à fond
   distinct ». La grille vivait dans la couche de page du module
   (`lcdi-core/assets/evenements.css`), en règles nues sur le fond de page.
   Elle monte au registre parce qu'elle cesse d'être une mise en page et
   devient un OBJET du système : un panneau, sa barre d'outils, sa grille, son
   pied de légende — la même langue que `plaque.css` et `cards.css` parlent
   déjà (surface haute, filet, ombre des objets posés).

   TROIS MESURES COMMANDENT LA GÉOMÉTRIE, et aucune n'est un goût :

   | | 0.7.2 (mesuré au gate) | ici (mesuré au navigateur, 1440) |
   |---|---|---|
   | largeur du bloc | 992 px (plafond 1040) | **1242 px** (`--container` − 2 × `--page-edge`) |
   | case | 138 × 73 | **171,42 × 104** |
   | gouttière | 4 px | **1 px de filet continu** |

   LA LARGEUR EST CELLE DU SITE, pas une valeur intermédiaire. Le raisonnement
   de 0.7.2 (« 1290 donne des cases de 177 px, c'est trop gros ») partait d'une
   case à UNE pastille d'une ligne ; à 104 px de haut la case porte deux
   rendez-vous et leur date, et 171 px de large est alors la mesure juste — le
   titre le plus fréquent du club, « Sortie du samedi », y tient entier
   (105 px de texte pour 105 px de place, mesuré). Le gate a tranché dans
   l'autre sens : le calendrier reprend la ligne de contenu du site.

   LA GOUTTIÈRE DEVIENT UN FILET CONTINU, et c'est ce qui fait « un vrai
   calendrier » plutôt que trente tuiles : `gap: 1px` sur un fond de filet
   laisse voir le fond ENTRE les cases. Une seule ligne peinte par frontière —
   jamais deux bordures qui s'additionnent — et aucun élément n'a besoin d'un
   `overflow: hidden` qui couperait un anneau de focus.

   ACQUIS 0.7.2 CONSERVÉS, un par un : pastille = heure + titre, le reste dans
   l'intitulé du lien · « Aujourd'hui » reste un bouton cliquable sur le mois
   courant, son état porté par `aria-current="date"` · l'annulé se dit barré,
   au ton d'alerte, et en toutes lettres dans l'intitulé · la légende ne nomme
   que les types du mois affiché · sous 640 px la grille se replie en LISTE DES
   JOURS OCCUPÉS · aucun ton de type ne porte jamais de texte.

   TROIS PALIERS, TROIS OBJETS (mesurés le 13/08) :
     ≥ 1024 px .... grille, case 171,42 × 104, pastille heure + titre
     640-1023 ..... grille, case 96,84 × 89,59, pastille à l'heure seule (le
                    titre passe hors écran SANS sortir de l'arbre
                    d'accessibilité)
     < 640 px ..... liste des jours occupés, cases de 84 à 99 px de haut,
                    médaillon de date et titres entiers

   MOBILE D'ABORD : les règles de base sont celles du téléphone, les
   élargissements arrivent aux points de rupture.
   ============================================================ */

/* ============================================================
   1 · LE PANNEAU
   ============================================================ */
.lcdi-calendrier {
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-l);          /* 20 px, la borne douce du galet */
  box-shadow: var(--shadow-soft);          /* l'ombre des objets posés */
  /* Les coins arrondis du pied et de la tête sont posés à la main plus bas :
     un `overflow: hidden` sur un panneau qui contient des liens couperait leur
     anneau de focus (règle d'usage de `tokens.css`). */
  isolation: isolate;
  min-width: 0;
  /* LE PANNEAU PREND SON PROPRE CRAN — retouche R11-3 (14/08), et c'est un
     CONSTAT, pas une précaution. Le filtre par type est devenu un menu
     déroulant, et un menu se pose PAR-DESSUS ce qui le suit. Or l'isolation
     ci-dessus confine le `z-index` du menu DANS ce panneau : sans cran sur le
     panneau lui-même, les cartes de la liste qui viennent après — positionnées
     et à `z-index: 1` pour leur calque de clic (`event-card.css`) — repeignent
     par-dessus le menu ouvert. MESURÉ à 390 avant correction : menu ouvert de
     308 × 215 px, visible sur ses 85 premiers pixels seulement. */
  position: relative;
  z-index: 2;
}

/* --- La tête : le mois, la navigation, la bascule de vue ---------------- */
.lcdi-calendrier__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.lcdi-calendrier__filtres {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}

/* LA MARGE LATÉRALE DU CORPS EST D'UN CRAN SOUS CELLE DE LA TÊTE, et c'est une
   MESURE : à `--space-5` (24 px), la case rendait 161 px et « Sortie du samedi »
   se coupait à l'ellipse ; à `--space-4` (16 px), elle rend 172 px et le titre
   le plus fréquent du club tient entier. Seize pixels gagnés sur la marge en
   valent quatorze sur chacune des sept colonnes. */
.lcdi-calendrier__corps { padding: var(--space-5) var(--space-4); min-width: 0; }

/* Le pied prend la surface de page : c'est le seul cran de valeur du panneau,
   et il sépare la légende (ce que la grille contient) de la grille elle-même
   sans y ajouter un filet de plus. */
.lcdi-calendrier__pied {
  padding: var(--space-4) var(--space-5);
  background: var(--surface-page);
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 var(--radius-l) var(--radius-l);
  min-width: 0;
}

/* ============================================================
   2 · LA BARRE D'OUTILS
   Le mois en VRAIE typographie de titre : c'est ce qu'on cherche des yeux en
   arrivant, et 0.7.2 l'écrivait au cran `--type-h5` (20 px fixes), c'est-à-dire
   plus petit qu'un titre de section de la page.
   ============================================================ */
.lcdi-cal__titre { min-width: 0; }

/* (0,2,0) — voir la note de poids en tête d'`event-page.css` : la balise `h2`
   est déjà adressée par `layout.css` à (0,1,2), une classe seule ne suffit pas. */
.lcdi-calendrier__tete .lcdi-cal__mois {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-display);          /* 29,6 → 39 px, l'échelle des H2 */
  font-weight: var(--weight-strong);
  line-height: var(--lh-title);
  color: var(--text-strong);
  text-transform: capitalize;
}
/* La même tête sert la vue LISTE, où le titre n'est pas un nom de mois mais une
   phrase (« Les prochains rendez-vous ») : `capitalize` y mettrait une majuscule
   à chaque mot. Un modificateur, pas un second composant. */
.lcdi-calendrier__tete .lcdi-cal__mois--libre { text-transform: none; }
.lcdi-cal__compte {
  margin: 0;
  font-size: var(--type-caption);
  color: var(--text-body);
}
.lcdi-cal__compte b { font-variant-numeric: var(--numeric-data); }

/* --- Le groupe de navigation : trois commandes, un seul objet ----------- */
.lcdi-cal__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--surface-page);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-arc);
}

.lcdi-cal__fleche,
.lcdi-cal__aujourdhui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-arc);
  color: var(--text-body);
  font-size: var(--type-fine);
  font-weight: var(--weight-medium);
  line-height: var(--lh-flat);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--t-quick) var(--ease-brand),
    color            var(--t-quick) var(--ease-brand);
}
.lcdi-cal__fleche { width: var(--cal-jeton, var(--space-6)); height: var(--cal-jeton, var(--space-6)); }
.lcdi-cal__fleche svg { width: 1.25em; height: 1.25em; fill: currentColor; }
.lcdi-cal__aujourdhui { padding: var(--space-2) var(--space-4); }

/* ÉTATS POSSÉDÉS (leçon R1) : le thème peint `a:hover, a:focus` à (0,1,1) ;
   ces deux-là pèsent (0,2,0) et gardent leur encre au clavier. */
.lcdi-cal__fleche:hover,
.lcdi-cal__fleche:focus,
.lcdi-cal__aujourdhui:hover,
.lcdi-cal__aujourdhui:focus { background: var(--veil-accent); color: var(--accent-ink); }
.lcdi-cal__fleche:focus-visible,
.lcdi-cal__aujourdhui:focus-visible { box-shadow: var(--focus-ring); outline: none; }

/* « AUJOURD'HUI » NE S'ÉTEINT PAS SUR LE MOIS COURANT — acquis 0.7.2, et c'est
   une MESURE qui l'a décidé : l'état « tu y es déjà » posé en `opacity: .6`
   avait rendu 2,5:1 au libellé (contre 5,65 au repos). Une opacité fond le
   texte ET son fond. L'état se dit par `aria-current="date"`, et par le titre
   du mois écrit juste à côté. Le contrôle reste cliquable : un contrôle
   désactivé est un mort dans le parcours au clavier. */
.lcdi-cal__aujourdhui[aria-current] {
  background: var(--veil-accent);
  color: var(--accent-ink);
  font-weight: var(--weight-strong);
}

/* ============================================================
   3 · LA GRILLE — base TÉLÉPHONE : la liste des jours occupés
   Sept colonnes à 390 px ne sont pas « serrées », elles sont illisibles. La
   grille se replie en LISTE DES JOURS OCCUPÉS : les cases vides et de calage
   disparaissent, chaque jour révèle son intitulé complet, et la date prend la
   forme d'un MÉDAILLON — la même que la carte d'agenda (`event-card.css`), pour
   qu'un adhérent qui bascule de vue ne rencontre pas deux objets de date.
   Rien n'est dupliqué dans le balisage : un lien rendu deux fois serait deux
   fois dans le parcours au clavier.
   ============================================================ */
.lcdi-cal__entetes { display: none; }

.lcdi-cal__grille {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.lcdi-cal__jour {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  /* SANS `min-width: 0`, RIEN NE TIENT DANS SA COLONNE : un élément de grille a
     `min-width: auto`, donc une largeur plancher égale à celle de son contenu
     le plus large. Constat du premier rendu du calendrier 0.7.1. */
  min-width: 0;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
}

/* Les cases qui n'apprennent rien au pouce. Le jour COURANT reste visible même
   vide : c'est le repère qui dit où l'on se trouve dans le mois. */
.lcdi-cal__jour--hors { display: none; }
.lcdi-cal__jour--vide:not(.lcdi-cal__jour--aujourdhui) { display: none; }

.lcdi-cal__jour--aujourdhui { border-color: var(--accent); background: var(--veil-accent); }

/* --- Le médaillon de date (téléphone) ---------------------------------- */
.lcdi-cal__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: var(--space-8);
  margin: 0;
  padding: var(--space-2);
  background: var(--surface-page);
  border-radius: var(--radius-m);
  line-height: var(--lh-flat);
  text-align: center;
}
.lcdi-cal__jour-court,
.lcdi-cal__mois-court {
  font-size: var(--type-badge);
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--text-body);
}
.lcdi-cal__numero {
  font-family: var(--font-display);
  font-size: var(--type-h5);               /* 20 px */
  font-weight: var(--weight-title);
  color: var(--text-strong);
}
/* Le repère « aujourd'hui », écrit en toutes lettres au pouce (là où la case
   n'a pas de voisine pour situer la date). Il disparaît en grille, où le
   jeton plein et la teinte de case le disent mieux. */
.lcdi-cal__marque {
  display: inline-block;
  margin-top: var(--space-1);
  font-size: var(--type-badge);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: var(--ls-badge);
  color: var(--accent-ink);
}

.lcdi-cal__evenements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}
.lcdi-cal__evenements > li { min-width: 0; }

/* ============================================================
   4 · LA PASTILLE — une ligne, une couleur, rien de plus
   ACQUIS 0.7.2 : heure + titre ; le type, l'audience, les places et
   l'annulation vivent dans l'intitulé du lien (`title`), donc au survol, au
   clavier et au lecteur d'écran, et en clair sur la fiche.

   LE VOILE ET LE FILET DISENT LE TYPE, jamais le texte : c'est la couleur qui
   se lit en diagonale sur trente cases, et les rôles de texte du système qui
   portent l'information. Les deux voiles viennent de `event-tone.css`.
   ============================================================ */
.lcdi-cal__evt {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-1);
  background: var(--evt-voile, var(--veil-accent));
  border-left: var(--evt-filet, 3px) solid var(--evt-ton, var(--accent));
  border-radius: var(--radius-s);
  color: var(--text-strong);
  font-size: var(--type-fine);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: background-color var(--t-quick) var(--ease-brand);
}
/* LA PASTILLE GARDE SON ENCRE SUR TOUS SES ÉTATS. C'est le défaut R1 du gate,
   retrouvé un étage plus bas : le thème peint `a:hover, a:focus` en
   `--link-hover`, et la sonde avait mesuré 4,01:1 au clavier contre 18,88:1 au
   repos. Poids (0,2,0), au-dessus du (0,1,1) du thème. */
.lcdi-cal__evt:hover,
.lcdi-cal__evt:focus,
.lcdi-cal__evt:focus-visible { color: var(--text-strong); }
.lcdi-cal__evt:hover { background: var(--evt-voile-fort, var(--veil-accent-night)); }
.lcdi-cal__evt:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.lcdi-cal__evt-heure {
  flex: none;
  font-size: var(--type-badge);            /* 11 px : l'heure cède la place au titre */
  font-weight: var(--weight-strong);
  font-variant-numeric: var(--numeric-data);
  color: var(--text-body);
}
.lcdi-cal__evt-titre { min-width: 0; overflow-wrap: anywhere; }

/* UN ÉVÉNEMENT ANNULÉ SE VOIT, ET AUTREMENT QUE PAR LA COULEUR (WCAG 1.4.1) :
   titre barré, teinte d'alerte, et le mot « annulé » dans l'intitulé du lien.
   Il PERD son ton de type — ce qu'on doit savoir d'un rendez-vous annulé passe
   avant sa famille. */
.lcdi-cal__evt--annule {
  background: var(--state-danger-veil);
  border-left-color: var(--state-danger);
}
.lcdi-cal__evt--annule:hover { background: var(--state-danger-veil); }
.lcdi-cal__evt--annule .lcdi-cal__evt-titre { text-decoration: line-through; }
/* L'HEURE EST BARRÉE ELLE AUSSI, et c'est une CORRECTION D'AUTO-CRITIQUE
   (13/08, capture à 768) : entre 640 et 1023 px le titre passe hors écran, et
   la pastille annulée ne se distinguait plus que par sa TEINTE — exactement ce
   que WCAG 1.4.1 interdit. Barrer l'heure rend le marqueur non chromatique
   visible aux trois paliers. */
.lcdi-cal__evt--annule .lcdi-cal__evt-heure {
  color: var(--state-danger-text);
  text-decoration: line-through;
}

/* LE DÉBORDEMENT — « +N » quand la case ne peut plus tout porter.
   La règle est écrite ; la matière du club ne l'exerce pas (mesuré sur les 69
   événements de l'archive : deux rendez-vous le même jour au maximum, jamais
   trois). Elle existe pour le jour où le bureau posera trois rendez-vous sur
   une même date, pas pour décorer la maquette. */
.lcdi-cal__plus {
  display: none;
  padding: 0 var(--space-2);
  font-size: var(--type-badge);
  font-weight: var(--weight-strong);
  color: var(--accent-ink);
  text-decoration: none;
}
.lcdi-cal__evenements--deborde .lcdi-cal__plus { display: inline-block; }
.lcdi-cal__evenements--deborde .lcdi-cal__evt-cache { display: none; }
.lcdi-cal__plus:hover,
.lcdi-cal__plus:focus { color: var(--accent-ink); text-decoration: underline; }

/* ============================================================
   5 · LA GRILLE REPREND SES DROITS — le seuil est 640 px
   En dessous, sept colonnes donnent des cases de 45 px, où un titre ne tient
   pas et où le pouce ne vise rien. Au-dessus, la grille revient — et avec elle
   les cases vides, les cases de calage et les en-têtes de colonne, qui n'ont
   de sens que dans une grille : une case vide TIENT la grille, c'est elle qui
   met le 22 sous le samedi.
   ============================================================ */
@media (min-width: 640px) {
  .lcdi-cal__entetes {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
  }
  .lcdi-cal__entete {
    padding-bottom: var(--space-1);
    font-size: var(--type-badge);
    font-weight: var(--weight-strong);
    text-transform: uppercase;
    letter-spacing: var(--ls-badge);
    color: var(--text-body);
    text-align: center;
  }

  /* LE FILET CONTINU : la gouttière d'un pixel laisse voir le fond de la
     grille. Une seule ligne peinte par frontière, aucune addition de bordures,
     et le rayon se pose sur les quatre cases d'angle plutôt que sur un
     `overflow: hidden` qui couperait les anneaux de focus. */
  .lcdi-cal__grille {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-m);
  }
  .lcdi-cal__grille > :first-child       { border-top-left-radius: var(--radius-m); }
  .lcdi-cal__grille > :nth-child(7)      { border-top-right-radius: var(--radius-m); }
  .lcdi-cal__grille > :nth-last-child(7) { border-bottom-left-radius: var(--radius-m); }
  .lcdi-cal__grille > :last-child        { border-bottom-right-radius: var(--radius-m); }

  .lcdi-cal__jour {
    display: flex;
    flex-direction: column;
    /* `align-items: start` vient du repli téléphone, où la case est une grille
       à deux colonnes. En colonne flexible il RÉTRÉCIT chaque pastille à la
       largeur de son texte : mesuré, la case de 171 px portait des pastilles de
       127 à 155 px, et leurs filets de couleur ne s'alignaient plus d'une ligne
       à l'autre. La grille a besoin de l'inverse — chaque pastille prend toute
       la case. */
    align-items: stretch;
    gap: var(--space-1);
    /* LA CASE PREND SA TAILLE, et c'est le cœur du verdict de gate : 73 px de
       haut en 0.7.2, `--space-9` (104 px) ici. Une case de calendrier doit
       pouvoir porter sa date ET deux rendez-vous sans pousser la semaine. */
    min-height: var(--cal-case-h, var(--space-9));
    padding: var(--space-2);
    border: 0;
    border-radius: 0;
  }

  .lcdi-cal__jour--hors,
  .lcdi-cal__jour--vide:not(.lcdi-cal__jour--aujourdhui) { display: flex; }

  /* LES JOURS HORS MOIS S'ESTOMPENT PAR LA SURFACE ET PAR LA GRAISSE, jamais
     par un gris pâle : `--text-soft` mesure 3,32:1 et ne porte pas du petit
     texte. Le contraste d'EMPHASE fait le travail — sol un cran plus bas,
     chiffre en corps de texte au lieu du titre — et le numéro reste à 9,13:1. */
  .lcdi-cal__jour--hors { background: var(--surface-page); }
  .lcdi-cal__jour--hors .lcdi-cal__numero {
    font-family: var(--font-body);
    font-size: var(--type-fine);
    font-weight: var(--weight-body);
    color: var(--text-body);
  }
  .lcdi-cal__jour--vide .lcdi-cal__numero { font-weight: var(--weight-medium); color: var(--text-body); }

  /* Le médaillon redevient un simple numéro, calé en haut à gauche. */
  .lcdi-cal__date {
    display: block;
    min-width: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    text-align: left;
  }
  .lcdi-cal__jour-court,
  .lcdi-cal__mois-court,
  .lcdi-cal__marque { display: none; }

  /* AUJOURD'HUI SE MARQUE FORT : un jeton plein, au calibre d'icône du site
     (le cran `--space-6`, 32 px : l'ordre du calibre d'icône du site, 30 px mesurés au bloc 3), plus la teinte de case. Contraste mesuré :
     `--brand-blanc` sur `--accent-ink` = 5,65:1. */
  .lcdi-cal__jour--aujourdhui .lcdi-cal__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cal-jeton, var(--space-6));
    height: var(--cal-jeton, var(--space-6));
    background: var(--accent-ink);
    color: var(--brand-blanc);
    border-radius: var(--radius-round);
  }

  .lcdi-cal__evenements { gap: var(--space-1); }

  /* LE TITRE SE TRONQUE, PROPREMENT : une seule ligne coupée à l'ellipse. Dans
     une case, un titre qui va à la ligne pousse la case et casse l'alignement
     des semaines. Le titre entier reste dans l'intitulé du lien et sur la
     fiche. Au pouce, où la case a toute la largeur, il reste entier. */
  .lcdi-cal__evt-titre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* ============================================================
   6 · LE PALIER INTERMÉDIAIRE — 640 à 1023 px
   La case tombe autour de 95 px de large : deux pastilles y tiennent en
   hauteur, mais leur titre n'y tient plus en largeur (trois caractères et une
   ellipse n'apprennent rien). Le titre passe donc HORS DE L'ÉCRAN SANS SORTIR
   DE L'ARBRE D'ACCESSIBILITÉ — `clip-path`, pas `display: none` : un lecteur
   d'écran continue de lire le titre complet, et l'intitulé du lien le porte
   déjà. Aucun contenu n'est perdu à cette largeur, seule la place se resserre.
   ============================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
  .lcdi-cal__evt { justify-content: center; padding-inline: var(--space-1); }
  .lcdi-cal__evt-titre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .lcdi-cal__jour { min-height: var(--cal-case-h-md, var(--space-8)); }
}

/* ============================================================
   7 · LA MINI-GRILLE DU MOIS — le calendrier redevient un calendrier au pouce
   RETOUCHE R8b R-d (14/08, décision de gate).

   CE QU'ELLE CORRIGE. Le repli du § 3 remplaçait la grille par la seule LISTE
   des jours occupés. La lisibilité y gagnait — c'est l'acquis — mais la vue
   perdait sa FORME : sous 640 px, le bouton « Calendrier » restait allumé
   au-dessus de ce qui était une liste, c'est-à-dire exactement l'autre vue.
   Constat de gate sur le live de juillet 2026 : le site actuel, lui, MONTRE
   ses événements dans sa grille mobile, en blocs colorés — mais avec des
   libellés coupés à « L… », « LC… ». La restitution du live n'est donc pas de
   supprimer la grille, c'est de la rendre proprement : la couleur reste dans
   la grille, le texte descend dans la liste.

   LE PARTAGE DU TRAVAIL, en une ligne : la mini-grille dit QUAND, la liste dit
   QUOI. Aucune case ne porte de texte d'événement — il n'y a pas la place, et
   c'est précisément ce que le live rate.

   AUCUN LIEN D'ÉVÉNEMENT N'EST DUPLIQUÉ. Une case occupée est UNE ancre vers la
   ligne du jour dans la liste (`#jour-13`), pas un second jeu de liens vers les
   fiches : un lien rendu deux fois serait deux fois dans le parcours au clavier
   (règle posée au § 3, tenue ici). Les points de couleur sont `aria-hidden` ;
   l'intitulé du lien porte le compte, et la ligne visée écrit tout en clair.

   LA COULEUR N'EST JAMAIS SEULE (WCAG 1.4.1) : un point ne dit pas ce qu'est le
   rendez-vous, il dit qu'il y en a un — et la ligne de liste, deux écrans plus
   bas dans le même document, le nomme. Les tons restent NON TEXTUELS (seuil
   3:1, acquis R8) : ils peignent un point, jamais une lettre.

   MOBILE D'ABORD, comme tout ce fichier : la mini-grille est la règle de base,
   et c'est le palier 640 px qui la retire — là où la vraie grille reprend, une
   seconde grille miniature serait un doublon.
   ============================================================ */
.lcdi-cal__mini {
  display: block;
  margin-bottom: var(--space-5);
  /* Le jeton d'« aujourd'hui » descend d'un cran : 32 px dans une case de 45
     ne laisserait pas de place au point sous le numéro. Le levier existe déjà
     (`--cal-jeton`, § 5), on le règle, on n'en invente pas un second. */
  --cal-jeton: var(--space-5);
}

.lcdi-cal__mini-entetes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--type-badge);
  font-weight: var(--weight-strong);
  letter-spacing: var(--ls-badge);
  color: var(--text-body);
  text-align: center;
}

/* Le MÊME filet continu que la grande grille (§ 5) : une gouttière d'un pixel
   sur un fond de filet. C'est ce qui fait « un calendrier » et pas quarante
   pastilles — et c'est la même recette, pas une seconde. */
.lcdi-cal__mini-grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-m);
  min-width: 0;
}
.lcdi-cal__mini-grille > :first-child       { border-top-left-radius: var(--radius-m); }
.lcdi-cal__mini-grille > :nth-child(7)      { border-top-right-radius: var(--radius-m); }
.lcdi-cal__mini-grille > :nth-last-child(7) { border-bottom-left-radius: var(--radius-m); }
.lcdi-cal__mini-grille > :last-child        { border-bottom-right-radius: var(--radius-m); }

.lcdi-cal__mini-jour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* 44 px : la cible du pouce. À 390 px la colonne rend ~45 px de large, la
     case est donc carrée et visable sans zoom. */
  min-height: var(--space-7);
  min-width: 0;
  padding: var(--space-1) 0;
  background: var(--surface-raised);
  font-size: var(--type-fine);
  color: var(--text-body);
  border-radius: inherit;
}

/* Les jours hors mois s'estompent PAR LA SURFACE, jamais par un gris pâle :
   même recette qu'au § 5, `--text-soft` (3,32:1) ne porte pas du petit texte. */
.lcdi-cal__mini-jour--hors { background: var(--surface-page); }

/* Un jour occupé est un lien : il prend TOUTE la case, pour que la cible du
   pouce soit la case et pas le numéro. */
.lcdi-cal__mini-lien {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: inherit;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
  text-decoration: none;
  border-radius: var(--radius-s);
}
/* ÉTATS POSSÉDÉS (leçon R1) : le thème peint `a:hover, a:focus` à (0,1,1) et
   emporterait l'encre du numéro au clavier. Ces sélecteurs pèsent (0,2,0). */
.lcdi-cal__mini-lien:hover,
.lcdi-cal__mini-lien:focus,
.lcdi-cal__mini-lien:focus-visible { color: var(--text-strong); }
.lcdi-cal__mini-lien:hover { background: var(--veil-accent); }
.lcdi-cal__mini-lien:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.lcdi-cal__mini-num { line-height: var(--lh-flat); }

/* AUJOURD'HUI SE MARQUE COMME DANS LA GRANDE GRILLE : un jeton plein,
   `--brand-blanc` sur `--accent-ink` (5,65:1 mesuré au bloc R8). */
.lcdi-cal__mini-jour--aujourdhui .lcdi-cal__mini-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cal-jeton, var(--space-5));
  height: var(--cal-jeton, var(--space-5));
  background: var(--accent-ink);
  color: var(--brand-blanc);
  border-radius: var(--radius-round);
}

.lcdi-cal__mini-points {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* La rangée de points garde sa place même vide : sans elle, une case occupée
     serait plus haute qu'une case libre et la grille perdrait ses lignes. */
  min-height: var(--space-2);
}
.lcdi-cal__mini-point {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-round);
  background: var(--evt-ton, var(--accent));
}
/* UN ANNULÉ SE DIT PAR LA FORME, PAS PAR LA COULEUR — et c'est un CONSTAT du
   14/08, pas un principe récité. Le point annulé avait d'abord été peint en
   `--state-danger`, comme la pastille du § 4. Or `--state-danger` vaut
   `--brand-alerte`, c'est-à-dire EXACTEMENT le ton `--brique` des
   Cyclosportives : dans la grande grille la confusion n'existe pas (la pastille
   porte un titre barré et un voile), mais dans une mini-grille SANS AUCUN TEXTE
   le point rouge d'un samedi annulé était pixel pour pixel celui d'une
   cyclosportive. Une sonde de contraste ne l'aurait jamais vu — les deux
   passent 3:1, ce sont les mêmes pixels.
   Le point devient donc un ANNEAU. La forme distingue sans dépendre de la
   teinte, et l'anneau est déjà le vocabulaire du système pour « pas un ton »
   (`.lcdi-chip__puce--tous`, agenda-toolbar.css). Le mot « annulé » reste dans
   l'intitulé du lien, et barré en toutes lettres dans la liste. */
.lcdi-cal__mini-point--annule {
  background: none;
  box-shadow: inset 0 0 0 2px var(--state-danger);
}

/* L'ANCRE ARRIVE SOUS L'EN-TÊTE, PAS DERRIÈRE. `.lcdi-header` est `sticky` :
   sans marge, la ligne visée se range exactement sous le bandeau collant et le
   pouce croit que rien ne s'est passé.
   LA VALEUR EST MESURÉE, et le premier essai était court d'UN pixel : à
   `--space-9` (104 px), le haut de la ligne visée tombait à 104 px quand le bas
   de l'en-tête collant en mesure 105 — constaté à 390 comme à 1440 le 14/08, en
   ouvrant `agenda-calendrier.html#jour-13`. Un cran de plus (`--space-5`) porte
   la marge à 128 px et dégage 23 px sous l'en-tête, aux deux largeurs.
   `--header-h` ne peut pas être lu ici : il est déclaré SUR `.lcdi-header`,
   donc hors de portée d'une case de calendrier. */
.lcdi-cal__jour[id] {
  scroll-margin-top: var(--cal-ancre-marge, calc(var(--space-9) + var(--space-5)));
}
/* Le repère de destination, en ombre INTÉRIEURE : posée en dehors, elle
   mordrait la case voisine du filet continu. */
.lcdi-cal__jour:target { box-shadow: inset 0 0 0 2px var(--accent-ink); }

@media (min-width: 640px) {
  /* La vraie grille reprend : la miniature sort du document, et donc de l'arbre
     d'accessibilité et du parcours au clavier. */
  .lcdi-cal__mini { display: none; }
}