.periodes { display: flex; gap: var(--e1); flex-wrap: wrap; }

.periode-actif {
  background: var(--f-neutre-pale);
  color: var(--encre);
  font-weight: 600;
}

.reperes {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  align-items: center;
}

.repere {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-petit);
  color: var(--encre-douce);
}

.repere-filet {
  width: 1px;
  height: 14px;
  background: var(--trait-fort);
}

/* La coche des séances validées d'office. Discrète : elle dit que le système a
 * fait son travail, pas qu'il y a quelque chose à faire. */
.coche { color: var(--encre-tenue); }

/* --- Planning : la grille de la semaine ------------------------------- */
/* `overflow-x` sur un conteneur DÉDIÉ, jamais sur la page : une page qui défile de
 * côté sur téléphone rend le reste de l'écran inutilisable. La grille a une largeur
 * minimale et c'est elle qui défile. */

.defilant {
  overflow-x: auto;
  /* Le défilement horizontal doit rester atteignable au clavier. */
  scrollbar-gutter: stable;
}

.grille-zone {
  min-width: 820px;
  display: grid;
  gap: var(--e1);
}

.grille-entetes,
.grille-corps {
  display: grid;
  /* Rail horaire, cinq jours ouvrés, colonne de week-end. Les deux lignes partagent
   * la même définition : des colonnes qui divergeraient d'un pixel décaleraient les
   * en-têtes des créneaux, et un cours apparaîtrait le mauvais jour. */
  grid-template-columns: 52px repeat(5, minmax(0, 1fr)) 104px;
  column-gap: var(--e1);
}

/* Le corps est UNE seule grille : le rail des heures, les fonds de jour et les
 * créneaux y sont tous des items. Trois grilles distinctes aux gabarits recopiés ne
 * pouvaient s'aligner que par coïncidence — et à l'essai réel, les blocs ne tombaient
 * plus sur les graduations. Ici un créneau et son étiquette d'heure partagent le même
 * `grid-template-rows` : l'alignement est vrai par construction, pas par entretien.
 *
 * Les lignes viennent du bloc de géométrie, qui connaît la fenêtre du jour. */
.grille-corps { position: relative; }

.entete-jour {
  padding: 10px 12px;
  background: var(--surface-creuse);
  display: grid;
  gap: 3px;
}

.entete-nom {
  font-size: var(--t-mini);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.entete-numero {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.entete-heures {
  font-size: var(--t-mini);
  color: var(--encre-pale);
}

/* Aujourd'hui : un liseré accent en haut et un fond légèrement relevé. C'est le
 * repère que Chris cherche en premier sur une grille de cinq jours. */
.entete-aujourdhui {
  background: var(--surface);
  border-top: 3px solid var(--accent);
}

.entete-aujourdhui .entete-nom {
  color: var(--accent-texte);
  font-weight: 600;
}

.entete-aujourdhui .entete-heures { color: var(--encre-douce); }

/* Le week-end est en retrait : deux jours presque toujours vides ne doivent pas peser
 * autant que les cinq autres. */
.entete-weekend { background: var(--fond-creux); }
.entete-weekend .entete-nom { color: var(--encre-pale); }
.entete-weekend .entete-numero { color: var(--encre-pale); }

/* L'étiquette d'heure, posée SUR sa graduation. Elle occupe deux lignes de
 * demi-heure — une heure pleine — et son décalage vertical la centre sur le trait. */
.rail-h {
  grid-column: 1;
  /* Un cran plus petit que le reste : à 7 px la demi-heure, une heure pleine fait 14 px
   * et une étiquette de 11 px toucherait la suivante. */
  font-size: var(--t-micro);
  color: var(--encre-pale);
  text-align: right;
  padding-right: 10px;
  transform: translateY(-0.5em);
  line-height: 1;
}

/* Le fond d'un jour, sur toute la hauteur, avec sa trame horaire. Un élément plutôt
 * qu'une bordure par ligne : cinq colonnes × dix heures feraient cinquante div qui ne
 * portent rien. */
.jour-fond {
  grid-row: 1 / -1;
  background-color: var(--grille-fond);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--creux) 0 1px,
    transparent 1px calc(var(--demi-h) * 2));
}

.jour-aujourdhui { background-color: var(--surface-jour); }

.jour-libre {
  grid-row: 1 / -1;
  align-self: center;
  justify-self: center;
  font-size: var(--t-mini);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-pale);
}

/* Un créneau. `left` et `width` viennent du bloc de géométrie et traitent le
 * chevauchement en pistes : deux cours à la même heure se posent côte à côte au lieu
 * de se recouvrir — sans ça, celui du dessous serait purement invisible.
 *
 * `min-width: 0` n'est pas décoratif. La taille minimale automatique d'un item de
 * grille est celle de son contenu MIN-CONTENT : un titre en un seul mot long
 * l'emportait sur `width: 50%`, et la carte débordait sur le jour voisin — c'est
 * exactement ce qu'on a vu à l'essai réel, et seulement quand deux formateurs
 * partagent un créneau, puisque c'est là que la largeur tombe à la moitié. Le mot se
 * coupe désormais plutôt que de pousser la colonne. */
.creneau {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  background: var(--surface);
  border-left: 4px solid var(--f-neutre);
  padding: 4px 7px;
  margin: 0 2px;
  display: grid;
  gap: 1px;
  align-content: start;
}
.creneau.f-vert   { border-left-color: var(--f-vert); }
.creneau.f-rouge  { border-left-color: var(--f-rouge); }
.creneau.f-jaune  { border-left-color: var(--f-jaune); }

/* La séance choisie, marquée par un contour et non par une couleur : la couleur est
 * déjà prise par le formateur, et lui en superposer une seconde rendrait les deux
 * illisibles. */
.creneau-choisi {
  outline: 2px solid var(--encre-douce);
  outline-offset: -2px;
  background: var(--surface-choisie);
  z-index: 2;
}

.creneau-heure {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--encre-douce);
  white-space: nowrap;
}
.creneau.f-vert   .creneau-heure { color: var(--f-vert-texte); }
.creneau.f-rouge  .creneau-heure { color: var(--f-rouge-texte); }
.creneau.f-jaune  .creneau-heure { color: var(--f-jaune-texte); }

.creneau-titre {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.creneau-ou {
  font-size: var(--t-micro);
  color: var(--encre-tenue);
}

/* Sous une certaine largeur, la grille est compacte et un créneau ne peut plus porter
 * trois lignes sans les tronquer au milieu d'un mot. On garde l'heure et le titre, qui
 * suffisent à reconnaître le cours ; le reste est dans le panneau. */
@media (max-width: 63.99rem) {
  .creneau-ou { display: none; }
}

.weekend-zone {
  grid-column: 7;
  grid-row: 1 / -1;
  background: var(--fond-creux);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--e3);
  padding: 16px 10px;
  text-align: center;
}

.weekend-marque {
  width: 8px;
  height: 8px;
  background: var(--trait-fort);
}

.weekend-texte {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
  line-height: 1.5;
}

/* Une séance le week-end est rare, donc elle se remarque — mais la taire serait le
 * contraire de ce qu'on veut : c'est la plus facile à oublier. */
.weekend-seance {
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--surface);
  border-left: 4px solid var(--f-neutre);
  padding: 8px 10px;
  display: grid;
  gap: 3px;
  text-align: left;
}
.weekend-seance.f-vert   { border-left-color: var(--f-vert); }
.weekend-seance.f-rouge  { border-left-color: var(--f-rouge); }
.weekend-seance.f-jaune  { border-left-color: var(--f-jaune); }

/* --- Planning : la séance sélectionnée -------------------------------- */

.choisie {
  background: var(--surface);
  border-left: 6px solid var(--f-neutre);
  padding: clamp(16px, 2vw, 24px);
  display: grid;
  gap: 18px;
  /* Repère de défilement : l'ancre amène ici, et le panneau ne doit pas se coller
   * sous le bandeau collant. */
  scroll-margin-top: 5rem;
}
.choisie.f-vert   { border-left-color: var(--f-vert); }
.choisie.f-rouge  { border-left-color: var(--f-rouge); }
.choisie.f-jaune  { border-left-color: var(--f-jaune); }

.choisie-quoi { display: grid; gap: var(--e2); }

.choisie-sur-titre {
  font-size: var(--t-mini);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.choisie-titre {
  font-size: var(--t-titre);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.choisie-meta {
  font-size: var(--t-texte);
  color: var(--encre-douce);
}

.choisie-etat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

/* Dit AVANT le clic ce que `src/outils.py` refuserait après : proposer une action
 * qui sera refusée est pire que ne rien proposer. */
.choisie-verrou {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--accent-texte);
}

.choisie-formes {
  display: flex;
  gap: var(--e4);
  flex-wrap: wrap;
  align-items: flex-end;
}

.forme-duree,
.forme-deplacer {
  display: flex;
  gap: var(--e1);
  align-items: flex-end;
  flex-wrap: wrap;
}

/* Assez large pour la date et l'heure natives du navigateur, qui portent leur propre
 * icône de calendrier. */
.champ-date { min-width: 9.5rem; }
.champ-heure { min-width: 6.5rem; }

.bouton-etroit { width: auto; }

/* --- Planning : le mois ---------------------------------------------- */

.mois-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--trait);
  padding-bottom: 14px;
}

.mois-quoi { display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; }

.mois-titre {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.mois-detail {
  font-size: var(--t-texte);
  color: var(--encre-tenue);
}

.mois-grille {
  min-width: 760px;
  display: grid;
  /* Sept jours plus une colonne de total. Le total est à droite, où l'œil finit sa
   * ligne — le mettre à gauche demanderait de le lire avant de savoir de quoi il est
   * le total. */
  grid-template-columns: repeat(7, minmax(0, 1fr)) 84px;
  gap: var(--e1);
}

.mois-jour {
  font-size: var(--t-mini);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-pale);
  padding: 0 0 6px 2px;
}

.mois-jour-weekend { color: var(--creux-texte-fin); }
.mois-jour-total { text-align: right; }

.case {
  background: var(--surface-creuse);
  padding: 9px;
  min-height: 92px;
  display: grid;
  gap: 7px;
  align-content: start;
}

/* Les jours des mois voisins restent PRÉSENTS, en retrait. Une grille qui
 * commencerait au 1er décalerait les colonnes, et « mardi » ne serait plus au-dessus
 * des mardis. */
.case-hors { background: var(--fond-creux); }
.case-hors .case-numero { color: var(--f-neutre); }
.case-weekend { background: var(--fond-creux); }

.case-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e2);
}

.case-numero { font-size: var(--t-texte); font-weight: 600; }

.case-heures {
  font-size: var(--t-micro);
  color: var(--encre-pale);
}

.case-barres { display: grid; gap: 3px; }

/* Une barre par séance, largeur proportionnelle à la durée. C'est un lien : cliquer
 * une barre ouvre la séance, comme cliquer un créneau de la semaine. */
.barre {
  height: 5px;
  background: var(--f-neutre);
  /* Cible tactile élargie sans grossir la barre : cinq pixels de haut se ratent au
   * pouce, mais une barre épaisse ferait perdre la lecture de la durée. */
  box-sizing: content-box;
  padding: 4px 0;
  background-clip: content-box;
}
.barre.f-vert   { background-color: var(--f-vert); }
.barre.f-rouge  { background-color: var(--f-rouge); }
.barre.f-jaune  { background-color: var(--f-jaune); }

.case-total {
  padding: 9px 2px;
  text-align: right;
  font-size: var(--t-texte);
  font-weight: 600;
  color: var(--encre-douce);
}

/* Le titre de la séance, pour un lecteur d'écran : une barre sans texte est une
 * information perdue pour qui n'y voit pas. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Planning -------------------------------------------------------- */

.grille-coin { background: var(--surface-creuse); }

.choisie-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}