/* ==========================================================================
   Calendrier — grille horaire et vue mois.

   L'échelle est fixe : **54 px pour une heure**, de 06:00 à 22:00. Un bloc est
   posé à `top = (minutesDébut − 6×60) / 60 × 54`. Changer cette hauteur sans
   changer le calcul de la vue décale tout — les deux vont ensemble.

   Trois points à ne pas casser :

   · **Largeur minimale d'une colonne : 66 px.** En dessous, les libellés
     deviennent illisibles. La vue semaine défile donc horizontalement, à
     l'intérieur de la grille seulement — jamais la page. Les vues Jour et
     3 jours lèvent ce minimum.
   · **L'en-tête défile avec la grille**, d'où `width: max-content` sur
     l'en-tête *et* sur le corps. Sans cela, les jours se désalignent des
     colonnes dès le premier défilement latéral.
   · **Rien de ce que porte le bandeau des journées entières ne doit peser sur
     sa largeur** : ces trois rangs partagent le même `width: max-content`, et
     un titre long dans le bandeau l'élargirait à lui seul. Voir la règle
     `width: 0 / min-width: 100%` plus bas.

   Aucune couleur en dur : la teinte d'un calendrier arrive par --teinte.
   ========================================================================== */

.cal-grille {
  --hauteur-heure: 54px;
  --largeur-gouttiere: 46px;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--carte);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-1);
  padding-bottom: calc(var(--pas) * 2);
}

/* --- En-tête des jours ---------------------------------------------------- */

.cal-grille__entete {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  width: max-content;
  min-width: 100%;
  background: color-mix(in srgb, var(--carte) 94%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--filet);
}
.cal-grille__gouttiere-vide { width: var(--largeur-gouttiere); flex: 0 0 var(--largeur-gouttiere); }

.cal-grille__jour {
  flex: 1;
  min-width: 66px;
  text-align: center;
  padding: calc(var(--pas) * 1.75) 2px calc(var(--pas) * 2);
}
.cal-grille--un-jour .cal-grille__jour,
.cal-grille--trois-jours .cal-grille__jour { min-width: 0; }

.cal-grille__jour span {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--encre-40);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cal-grille__jour b {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 0.84rem;
  font-weight: 700;
  margin-top: 3px;
}
.cal-grille__jour.actif b { background: var(--primaire); color: var(--sur-primaire); }
.cal-grille__jour em {
  display: block;
  font-style: normal;
  font-size: 0.54rem;
  font-weight: 700;
  color: var(--encre-40);
  margin-top: 1px;
}

/* --- Bandeau des entrées sans heure --------------------------------------- */

/* Une fête, un événement de journée entière : rien ne les pose à une heure,
   et les mettre à 00:00 serait mentir sur leur horaire. */
.cal-grille__bandeaux {
  display: flex;
  width: max-content;
  min-width: 100%;
  padding-left: var(--largeur-gouttiere);
  border-bottom: 1px solid var(--filet);
}
/* Une cellule par journée, y compris vide : c'est ce qui garde le bandeau
   aligné sur les colonnes de la grille en dessous.

   La marge intérieure appartient à la cellule, pas à son contenu : en
   `border-box`, une cellule rembourrée part de 6 px quand une cellule vide part
   de 0, et les vues Jour et 3 jours — les seules où aucun minimum ne vient
   égaliser les colonnes — se décalaient de ces 6 px. */
.cal-grille__bandeaux > * { flex: 1; min-width: 66px; padding: 3px; }
.cal-grille--un-jour .cal-grille__bandeaux > *,
.cal-grille--trois-jours .cal-grille__bandeaux > * { min-width: 0; }

.cal-grille__journee-entiere {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* `width: 0` puis `min-width: 100%` — la paire est indispensable, pas une
   précaution. Sans elle, la largeur intrinsèque du bandeau vaut celle de son
   plus long titre : le bandeau devient plus large que l'en-tête et que la
   grille, et une pastille du mardi finit dessinée au-dessus du jeudi. C'est
   visible dès que l'écran force le défilement latéral, donc sur téléphone.
   La largeur utile revient par `min-width`, à la mise en page, une fois la
   colonne connue. */
.cal-grille__journee-entiere > * { width: 0; min-width: 100%; }

.cal-fete {
  font-size: 0.62rem;
  line-height: 1.3;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--primaire-clair);
  color: var(--encre);
  font-weight: 700;
}
.cal-fete:lang(he) { font-family: var(--police-hebreu); direction: rtl; unicode-bidi: isolate; }

/* --- Corps : gouttière des heures + colonnes ------------------------------ */

.cal-grille__corps {
  display: flex;
  width: max-content;
  min-width: 100%;
  padding-top: calc(var(--pas) * 2);
}

/* La gouttière reste collée à gauche pendant le défilement latéral : sans
   elle, on perd l'heure dès qu'on regarde le jeudi. */
.cal-grille__gouttiere {
  width: var(--largeur-gouttiere);
  flex: 0 0 var(--largeur-gouttiere);
  position: sticky;
  left: 0;
  z-index: 5;
  background: linear-gradient(to right, var(--carte) 72%, transparent);
}
.cal-grille__heure { height: var(--hauteur-heure); position: relative; }
.cal-grille__heure span {
  position: absolute;
  top: -7px; right: 9px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--encre-40);
}

.cal-grille__colonnes { display: flex; flex: 1; }

.cal-grille__colonne {
  flex: 1;
  min-width: 66px;
  position: relative;
  border-left: 1px solid var(--filet);
  background: none;
  border-top: 0; border-right: 0; border-bottom: 0;
  padding: 0;
  text-align: left;
}
.cal-grille__colonne:first-child { border-left: 0; }
.cal-grille--un-jour .cal-grille__colonne,
.cal-grille--trois-jours .cal-grille__colonne { min-width: 0; }

.cal-grille__creneau { height: var(--hauteur-heure); border-top: 1px solid var(--filet); }

/* --- Un bloc -------------------------------------------------------------- */

.cal-bloc {
  position: absolute;
  left: 3px; right: 3px;
  border-radius: 9px;
  padding: 4px 6px;
  overflow: hidden;
  /* Un bloc est tantôt un span, tantôt un bouton : sans cette ligne les deux
     ne s'écriraient pas dans la même police. */
  font-family: var(--police-corps);
  font-size: 0.62rem;
  line-height: 1.16;
  text-align: left;
  color: var(--sur-primaire);
  background: var(--teinte, var(--primaire));
  box-shadow: 0 2px 6px color-mix(in srgb, var(--encre) 14%, transparent);
  border: 0;
  word-break: break-word;
  hyphens: auto;
  transition: transform 0.16s var(--ressort);
}
button.cal-bloc { cursor: pointer; }
button.cal-bloc:active { transform: scale(0.96); }
button.cal-bloc:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.cal-bloc b { font-weight: 700; display: block; }
.cal-bloc span { opacity: 0.85; font-size: 0.59rem; display: block; margin-top: 1px; }

/* Sous vingt minutes il n'y a pas la place d'une seconde ligne : une seule,
   centrée. C'est le cas des blocs de cantine de quinze minutes. */
.cal-bloc--fin { padding: 2px 6px; font-size: 0.59rem; display: flex; align-items: center; }

/* Une échéance n'est pas un événement : le contour pointillé le dit sans mot. */
.cal-bloc--echeance { background: transparent; color: var(--texte); box-shadow: none;
  border: 1.5px dashed var(--teinte, var(--primaire)); }

/* Entrée sans heure, posée dans le bandeau : elle n'a ni position ni hauteur.

   Sur téléphone la colonne fait 66 px. Coupée sur une seule ligne,
   « 🎂 Michal Sarfati » devient « 🎂 Mic… », qui ne nomme personne. Deux
   lignes suffisent à lire un prénom, et le bandeau reste borné. À partir de
   640 px la colonne est assez large pour une ligne : on revient au bandeau bas
   du prototype. */
.cal-bloc--plat {
  position: static;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  font-size: 0.62rem;
  font-weight: 700;
  overflow: hidden;
  box-shadow: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: break-word;
}
@media (min-width: 640px) {
  .cal-bloc--plat {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.cal-grille__maintenant {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--danger);
  z-index: 6;
}
.cal-grille__maintenant::before {
  content: '';
  position: absolute;
  left: -4px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

/* ==========================================================================
   Vue mois
   ========================================================================== */

.cal-mois { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }

.cal-mois__entete {
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--encre-40);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: calc(var(--pas) * 1.5) 0;
}

.cal-mois__case {
  aspect-ratio: 1 / 1.06;
  border-radius: 12px;
  background: var(--carte);
  box-shadow: var(--ombre-1);
  padding: 5px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  cursor: pointer;
  color: inherit;
  transition: transform 0.16s var(--ressort);
}
.cal-mois__case:active { transform: scale(0.94); }
.cal-mois__case b { font-size: 0.78rem; font-weight: 700; }

/* Les jours du mois voisin qui complètent la première et la dernière semaine :
   présents parce que la grille doit être entière, en retrait parce qu'ils ne
   sont pas le sujet. */
.cal-mois__case--voisin { background: transparent; box-shadow: none; }
.cal-mois__case--voisin b { color: var(--encre-40); font-weight: 600; }

.cal-mois__case.actif b {
  background: var(--primaire);
  color: var(--sur-primaire);
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
}

.cal-mois__hebreu { font-size: 0.5rem; color: var(--encre-40); font-weight: 700; margin-top: -2px; }
.cal-mois__points { display: flex; gap: 2.5px; margin-top: auto; padding-bottom: 1px; }
.cal-mois__points i { width: 4.5px; height: 4.5px; border-radius: 50%; background: var(--teinte); }

/* La case carrée convient au téléphone : la grille y fait la largeur de
   l'écran, donc six rangées de carrés tiennent dans la hauteur. Sur un écran
   d'ordinateur la même règle donne des cases de plus de deux cents pixels de
   côté, et le mois déborde — ce qu'une vue « mois » doit précisément éviter.
   Au-delà du téléphone la case prend donc une hauteur fixe, calée sur ce
   qu'elle porte : un numéro, une date hébraïque, une rangée de pastilles.
   `grid-template-rows: auto` est indispensable — sans lui, la rangée des
   initiales de jours prendrait elle aussi la hauteur d'une case. */
@media (min-width: 768px) {
  .cal-mois { grid-template-rows: auto; grid-auto-rows: 4.75rem; gap: 5px; }
  .cal-mois__case { aspect-ratio: auto; height: 100%; justify-content: flex-start; }
  .cal-mois__case b { font-size: 0.9rem; }
  .cal-mois__hebreu { font-size: 0.62rem; }
}

/* ==========================================================================
   En-tête rétractable
   ========================================================================== */

/* Les filtres occupent le haut de l'écran en permanence alors qu'on les
   touche rarement. Repliés, ils rendent une centaine de pixels à la grille —
   soit deux heures de journée en plus, sur un écran de téléphone. */
.cal-reglages { display: flex; flex-direction: column; gap: calc(var(--pas) * 2.5); }
.cal-reglages[hidden] { display: none; }

.cal-replier {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 1.5);
  min-height: var(--cible-tactile);
  padding: 0 calc(var(--pas) * 2);
  border: 0;
  background: none;
  color: var(--primaire-profond);
  font-size: 0.81rem;
  font-weight: 600;
  cursor: pointer;
}
.cal-replier svg {
  width: 1rem; height: 1rem;
  transform: rotate(90deg);
  transition: transform var(--duree-anim) var(--sortie);
}
.cal-replier[aria-expanded='false'] svg { transform: rotate(0deg); }

.cal-bandeau-fete {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 2.25) calc(var(--pas) * 3);
  background: var(--primaire-clair);
  color: var(--encre);
  border-radius: var(--r-md);
  font-size: 0.78rem;
  font-weight: 600;
}
.cal-bandeau-fete__hebreu { font-family: var(--police-hebreu); direction: rtl; unicode-bidi: isolate; }
.cal-bandeau-fete__liste { margin-left: auto; display: flex; gap: calc(var(--pas) * 1.5); flex-wrap: wrap; }