/* =====================================================================
   LE CALENDRIER VISIBLE — un habillage, cinq thèmes
   =====================================================================
   Cette feuille n'est servie QUE sur un site dont le format de demande
   est « calendrier ». Un site en format libre ne la demande pas et n'en
   porte pas la balise : pas un octet ne bouge sur le parc déjà livré.

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

   ---------------------------------------------------------------------
   LES QUATRE É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 « réservé » 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 :

     libre     rien — la case ordinaire, la seule qu'on puisse choisir
     fermé     ×    hachures
     réservé   ■    plein inversé
     demandé   ?    filet pointillé

   ---------------------------------------------------------------------
   POURQUOI CETTE FEUILLE EFFACE LES DEUX CHAMPS DE DATES

   Parce que le calendrier les REMPLACE : le visiteur pose ses dates
   dedans. Les champs restent pourtant écrits dans la page, avec leurs
   noms, et c'est délibéré — sans script, calendrier-sans-js.css les
   remet et la page redevient exactement le formulaire du format libre.
   Rien ne manque à qui n'exécute pas de JavaScript.

   La bascule est faite ICI et dans <noscript>, jamais par une classe
   posée au chargement : un script différé qui déplace la mise en page
   coûtait jusqu'à 0,41 de décalage sur ce socle, quand le seuil
   « médiocre » est 0,25.
   ===================================================================== */

/* --- La place des deux moitiés ---------------------------------------
   Le cadre prend la largeur entière de la grille de champs, quelle que
   soit la façon dont le thème la compose. `grid-column: 1 / -1` sert les
   thèmes en grille ; `flex-basis: 100%` ceux en flex ; `width: 100%` le
   reste. Les trois sont inoffensives là où elles ne s'appliquent pas. */
.calendrier {
  grid-column: 1 / -1;
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 1.4em;
  /* LE PLAFOND EST CE QUI TIENT LA TAILLE DES CASES, et il ne pouvait
     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. Mesuré avant :
     41 px à 375, 90 à 768, et 140 à 1280 comme à 1920 — une case de
     jour plus large qu'un pouce, sur un calendrier qui occupait toute
     la colonne du formulaire.

     32 em plafonnent la grille à sept colonnes d'environ 70 px : la
     moitié. 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.
     Aucune de leurs tailles ne bouge — ni police, ni cible. */
  max-width: 29em;
}

/* LES CHAMPS DE DATES S'EFFACENT — et ils s'effacent VRAIMENT, pas
   seulement à l'œil : `display: none` les retire aussi de la tabulation
   et de la synthèse vocale. Deux façons d'entrer la même date dont une
   invisible serait un piège pour qui navigue au clavier. */
.champ--date { display: none; }

/* --- L'en-tête : le mois, et les deux flèches ------------------------ */
.calendrier__mois {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  margin: 0 0 0.6em;
}

.calendrier__titre {
  font-size: 1em;
  font-weight: inherit;
  margin: 0;
  text-align: center;
  flex: 1 1 auto;
}

/* Une cible de 44 px au doigt. Le carré est posé en `em` pour suivre la
   taille de texte du thème, avec un plancher en px : un thème à petite
   police ne doit pas rendre la flèche impossible à viser. */
.calendrier__pas {
  appearance: none;
  background: none;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0.15em;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-width: 2.75em;
  min-height: 2.75em;
  padding: 0 0.5em;
  line-height: 1;
}

.calendrier__pas:hover { border-color: currentColor; }

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

/* --- La grille -------------------------------------------------------
   Sept colonnes, et elles tiennent à 375 px : `minmax(0, 1fr)` autorise
   la case à se réduire sous la largeur de son contenu, ce qui est la
   seule façon d'éviter un débordement horizontal sur un petit écran. */
.calendrier__grille {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.calendrier__jour {
  text-align: center;
  font-size: 0.75em;
  opacity: 0.6;
  padding-bottom: 0.3em;
}

/* --- Une nuit --------------------------------------------------------
   `aspect-ratio` tient le carré sans hauteur écrite : la case suit la
   largeur de la colonne, donc l'écran. Le plancher de 2.75em garde la
   cible au doigt là où la colonne serait trop étroite. */
.calendrier__nuit {
  appearance: none;
  background: none;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0.15em;
  color: inherit;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 2.75em;
  padding: 0;
  line-height: 1;
}

.calendrier__vide { visibility: hidden; }

.calendrier__marque {
  font-size: 0.7em;
  line-height: 1;
  height: 1em;
}

/* --- LES QUATRE ÉTATS ------------------------------------------------ */

.calendrier__nuit--free:hover,
.calendrier__nuit--free:focus-visible {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Fermé : hachures. Le trait est en currentColor très dilué — il se lit
   sur un fond clair comme sur un fond sombre, sans qu'on sache lequel. */
.calendrier__nuit--closed {
  background: repeating-linear-gradient(
    135deg,
    transparent, transparent 3px,
    color-mix(in srgb, currentColor 22%, transparent) 3px,
    color-mix(in srgb, currentColor 22%, transparent) 5px);
}

/* Réservé : plein inversé. C'est la marque la plus lourde des quatre, et
   c'est voulu — c'est l'état le plus fermé. */
.calendrier__nuit--booked {
  background: color-mix(in srgb, currentColor 78%, transparent);
  border-color: transparent;
}

.calendrier__nuit--booked .calendrier__chiffre,
.calendrier__nuit--booked .calendrier__marque {
  /* Le texte reprend le fond de la page, quel qu'il soit : on n'écrit
     jamais une couleur, on retourne celle du thème.

     LA RÈGLE PORTE SUR LES ENFANTS, JAMAIS SUR LA CASE. Le fond de la
     case est un color-mix de `currentColor` : lui poser `color: Canvas`
     retournerait aussi son fond, et la case deviendrait blanche sur
     blanc. C'est arrivé au témoin de la légende, qui portait son signe
     en direct — il porte désormais une .calendrier__marque, comme une
     vraie case. La légende reprend ainsi la grille par sa STRUCTURE, et
     pas par une seconde règle qui aurait à rester d'accord avec elle. */
  color: Canvas;
  mix-blend-mode: normal;
}

/* Demande en cours : filet pointillé. La case reste lisible — elle n'est
   pas vendue, elle est convoitée. */
.calendrier__nuit--pending {
  border-style: dashed;
  border-width: 2px;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Les trois états fermés ne se choisissent pas, et le curseur le dit
   avant l'essai. `disabled` porte le refus ; ceci n'en est que le
   dessin. */
.calendrier__nuit[disabled] { cursor: not-allowed; }

/* --- Le séjour retenu ------------------------------------------------ */
.calendrier__nuit--retenue {
  background: color-mix(in srgb, currentColor 26%, transparent);
  border-color: currentColor;
}

.calendrier__nuit--bord {
  background: color-mix(in srgb, currentColor 45%, transparent);
  border-color: currentColor;
}

/* Aujourd'hui : un liseré intérieur, qui ne recouvre aucune des quatre
   marques puisqu'il ne touche ni au fond ni au filet. */
.calendrier__nuit--aujourdhui { box-shadow: inset 0 0 0 2px currentColor; }

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

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

.calendrier__temoin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  border: 1px solid;
  border-color: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 0.15em;
  font-size: 0.8em;
}

/* --- L'état, et la consigne ------------------------------------------ */
.calendrier__etat {
  margin: 0.6em 0 0;
  font-size: 0.85em;
  opacity: 0.8;
  min-height: 1.4em;
}

.calendrier__etat--refus {
  opacity: 1;
  font-weight: bolder;
}

/* --- 375 px ----------------------------------------------------------
   Sept colonnes de 44 px et 2 px de gouttière tiennent dans les 343 px
   utiles d'un écran de 375. On resserre la gouttière et le texte, jamais
   la cible : c'est elle qu'on vient toucher. */
@media (max-width: 480px) {
  .calendrier__grille { gap: 1px; }
  .calendrier__nuit   { font-size: 0.82em; }
  .calendrier__legende { font-size: 0.75em; }
}

/* Le seul mouvement du socle est coupé net par cette requête ; celui-ci
   n'en a aucun, mais la transition de survol en est un. */
@media (prefers-reduced-motion: reduce) {
  .calendrier__nuit, .calendrier__pas { transition: none; }
}

/* --- Les deux flèches -------------------------------------------------
   Elles sont posées ICI et non par le script, parce qu'elles sont un
   ORNEMENT : le sens du bouton est dans son aria-label, qui, lui, se
   traduit. Un signe écrit dans form.js serait un caractère de plus à ne
   pas traduire — et tools/verifier-langues.php a raison de le refuser. */
.calendrier__pas--avant::before { content: "\2039"; }
.calendrier__pas--apres::before { content: "\203A"; }