/* =====================================================================
   L'AGENDA VISIBLE — un habillage, tous les thèmes
   =====================================================================
   Cette feuille n'est servie QUE sur un site dont la section « Agenda »
   est active et affiche sa grille. Un site qui n'en montre que la liste
   ne la demande pas et n'en porte pas la balise.

   ELLE NE CONNAÎT AUCUN THÈME, ET C'EST LA CONDITION POUR N'EN
   CONTREDIRE AUCUN. Pas une couleur nommée, pas une police, pas une
   mesure qui leur appartienne : `currentColor`, des `em`, de l'opacité.
   La grille vit dans le corps de la section, elle hérite donc de la voix
   du thème — sa couleur, sa police, sa graisse — sans qu'aucun thème ait
   eu à la prévoir.

   ---------------------------------------------------------------------
   LES TROIS ÉTATS SE DISTINGUENT SANS LA COULEUR, et ce n'est pas une
   politesse d'accessibilité : c'est la condition pour que la grille ne
   mente pas. Un thème qui recolorerait « un événement » en quelque chose
   d'ambigu fabriquerait le mensonge d'affichage par le dessin. Les
   marques sont donc des FORMES, et ce sont exactement celles de
   l'administration :

     rien de prévu       aucune marque — la case ordinaire
     un événement        ●   un point, et un filet autour de la case
     plusieurs           ●●  deux points, et la case pleine

   ---------------------------------------------------------------------
   ELLE NE CACHE RIEN, ET C'EST LA GRANDE DIFFÉRENCE AVEC LE CALENDRIER
   DE DISPONIBILITÉS DONT ELLE DESCEND.

   Là-bas, la grille REMPLAÇAIT deux champs de dates : la feuille devait
   les effacer, et celle de <noscript> les remettre. Ici la grille
   n'ôte rien — la liste des prochaines dates est écrite dans la page, en
   dessous, et elle y reste. Sans JavaScript, on perd la grille et on
   garde la liste. C'est tout, et c'est suffisant.
   ===================================================================== */

.calendrier {
  width: 100%;
  margin: 0 0 2em;
  /* LE PLAFOND EST CE QUI TIENT LA TAILLE DES CASES, et il ne peut pas
     se poser sur la case elle-même : la grille est en `1fr`, donc un
     carré grandit avec la place qu'on lui laisse. Sans plafond, une
     case de jour dépasse le pouce sur un écran large.

     32 em plafonnent la grille à sept colonnes d'environ 70 px. En
     dessous de cette largeur, rien ne change — à 375 px, les colonnes se
     partagent la place disponible et la case reste à 41 px, qui est le
     plancher qu'on peut viser au doigt. On ne divise pas ce qui est déjà
     au minimum.

     Le plafond est posé sur le BLOC, et non sur la seule grille : les
     intitulés de jours, le mois, ses deux flèches et la légende
     s'alignent alors sur la grille au lieu de flotter à côté d'elle. */
  max-width: 32em;
}

/* --- Le mois, encadré de ses deux pas --------------------------------- */
.calendrier__mois {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  margin-bottom: 0.8em;
}

.calendrier__titre {
  font-size: 1em;
  font-weight: inherit;
  text-align: center;
  margin: 0;
  /* La première lettre du mois vient de la table de langue, en
     minuscule : c'est ainsi qu'elle s'écrit dans une phrase. En titre,
     elle prend sa majuscule — et c'est la feuille qui la pose, jamais le
     script, qui n'a pas à connaître la casse d'une langue. */
  text-transform: capitalize;
}

.calendrier__pas {
  appearance: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  /* 44 px de cible, le plancher tenu partout dans ce socle. */
  min-width: 44px;
  min-height: 44px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.55;
  transition: opacity 180ms ease, border-color 180ms ease;
}
.calendrier__pas:hover,
.calendrier__pas:focus-visible { opacity: 1; }

.calendrier__pas[disabled] {
  opacity: 0.2;
  cursor: default;
}

/* Les deux chevrons sont posés PAR LA FEUILLE, jamais par le script :
   c'est un ornement, et le sens du bouton est déjà dans son aria-label.
   Un signe écrit dans le script serait un caractère de plus à ne pas
   traduire. */
.calendrier__pas--avant::before { content: "\2039"; }
.calendrier__pas--apres::before { content: "\203A"; }

/* --- La grille --------------------------------------------------------- */
.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendrier__jour {
  text-align: center;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  padding-bottom: 0.4em;
}

.calendrier__nuit {
  appearance: none;
  background: none;
  color: inherit;
  font: inherit;
  border: 0;
  padding: 0;
  /* Le carré : la case suit la colonne, la hauteur suit la largeur. */
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  line-height: 1;
  border-radius: 0.35em;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

button.calendrier__nuit { cursor: pointer; }

/* Les cases de comblement du début de mois : présentes pour la grille,
   invisibles et hors de toute lecture. */
.calendrier__vide { visibility: hidden; }

.calendrier__marque {
  font-size: 0.5em;
  line-height: 1;
  min-height: 1em;
  letter-spacing: -0.08em;
}

/* --- Les trois états ---------------------------------------------------- */

/* Rien de prévu : la case ordinaire. Pâle, non cliquable, et ce n'est
   pas un manque — c'est ce qu'un jour vide doit être. */
.calendrier__nuit--vide {
  opacity: 0.38;
}

/* Un événement : un filet autour de la case. */
.calendrier__nuit--evenement {
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.calendrier__nuit--evenement:hover,
.calendrier__nuit--evenement:focus-visible {
  background-color: rgb(from currentColor r g b / 0.1);
}

/* Plusieurs : la case pleine, en inversion. C'est la marque la plus
   forte de la grille, et c'est voulu — un jour qui porte trois choses
   est celui qu'on cherche. */
.calendrier__nuit--plusieurs {
  background-color: currentColor;
}
.calendrier__nuit--plusieurs .calendrier__chiffre,
.calendrier__nuit--plusieurs .calendrier__marque {
  /* Le fond de la page derrière un aplat d'encre : c'est la seule façon
     d'inverser sans nommer une couleur de thème. */
  color: Canvas;
  mix-blend-mode: screen;
}
@supports not (color: Canvas) {
  .calendrier__nuit--plusieurs .calendrier__chiffre,
  .calendrier__nuit--plusieurs .calendrier__marque { opacity: 0.25; }
}

/* Le jour ouvert : un anneau franc, qui ne dépend d'aucune couleur. */
.calendrier__nuit--retenue {
  box-shadow: inset 0 0 0 2px currentColor, 0 0 0 2px rgb(from currentColor r g b / 0.35);
}

/* Aujourd'hui : un pointillé, distinct de l'anneau du jour ouvert. */
.calendrier__nuit--aujourdhui .calendrier__chiffre {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1.5px;
}

/* --- Le jour déplié ---------------------------------------------------- */
.calendrier__jour-detail {
  margin-top: 1em;
  padding: 0.9em 1em;
  border: 1px solid rgb(from currentColor r g b / 0.25);
  border-radius: 0.6em;
}
.calendrier__jour-detail:focus { outline: none; }

.calendrier__jour-date {
  font-size: 0.8em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
  margin: 0 0 0.5em;
}

.calendrier__jour-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6em;
}
.calendrier__jour-liste li {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.calendrier__jour-faits {
  font-size: 0.85em;
  opacity: 0.7;
}

/* --- La légende, permanente -------------------------------------------
   Le survol n'existe pas au doigt, et c'est sur un téléphone que la
   grille est la plus dure à lire. */
.calendrier__legende {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.1em;
  font-size: 0.8em;
  opacity: 0.8;
}

.calendrier__item {
  display: flex;
  align-items: center;
  gap: 0.45em;
}

/* Le témoin porte la MÊME structure qu'une case de la grille — une
   .calendrier__marque à l'intérieur, pas un signe posé en direct. C'est
   ce qui lui vaut les mêmes règles, et ce qui empêche la légende de
   dériver du dessin qu'elle explique. */
.calendrier__temoin {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.calendrier__etat {
  margin: 0.8em 0 0;
  font-size: 0.9em;
  opacity: 0.8;
}

@media (max-width: 420px) {
  .calendrier__grille  { gap: 1px; }
  .calendrier__nuit    { font-size: 0.85em; }
  .calendrier__legende { font-size: 0.75em; }
}

@media (prefers-reduced-motion: reduce) {
  .calendrier__nuit, .calendrier__pas { transition: none; }
}