/* ==========================================================================
   Planning et affectation — fiche 2, maquette references/maq-planning.png

   BUREAU : une grille. Une ligne par personne, la semaine en colonnes,
   l'effectif en pied. C'est l'outil de Charlotte : elle voit d'un coup qui
   travaille quel jour, et où il manque quelqu'un.

   MOBILE : une liste de jours. La grille ne se comprime jamais — elle
   disparaît au profit de la liste, seuil unique à 820 px
   (B18_REGLES_AFFICHAGE §4 : une grille devient une liste, jamais une
   petite grille).
   ========================================================================== */

.pl-barre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
}

.pl-fleche {
  width: var(--cible);
  height: var(--cible);
  border: 1px solid var(--trait);
  background: var(--surface2);
  border-radius: var(--r-s);
  cursor: pointer;
  font-size: var(--t-appui);
  color: var(--encre2);
  line-height: 1;
}

.pl-fleche:hover {
  border-color: var(--lagon);
  color: var(--teal);
}

/* LES TROIS BLOCS DE L'ÉCRAN SONT À LA MÊME ÉCHELLE.
   Constat de Stéphanie du 29/08 : « trop de différence de taille entre les 3
   modules ». La barre du haut écrivait en --t-appui (13 px), la grille en
   --t-petit (12 px) et --t-micro (11 px), le panneau en --t-base (15 px) : le
   même écran parlait à trois voix. Tout ce qui est un LIBELLÉ passe en
   --t-base, tout ce qui est une MENTION en --t-petit. Deux tailles, pas cinq. */
.pl-periode {
  font-weight: var(--graisse-forte);
  font-size: var(--t-base);
  padding: 0 var(--e-2);
}

.pl-num {
  font-size: var(--t-petit);
  color: var(--encre2);
  background: var(--surface2);
  border: 1px solid var(--trait);
  padding: 4px 10px;
  border-radius: var(--r-p);
}

.pl-vues { margin-left: auto; }

.pl-auj {
  min-height: var(--cible-secondaire);
  padding: 6px 14px;
  border: 1px solid var(--trait);
  background: var(--surface2);
  border-radius: var(--r-s);
  cursor: pointer;
  font-size: var(--t-petit);
  font-family: inherit;
  color: var(--teal);
}

.pl-contexte {
  color: var(--encre2);
  font-size: var(--t-petit);
  margin: 0 0 var(--e-4);
}

/* --------------------------------------------------------------------------
   La grille
   -------------------------------------------------------------------------- */

.gr {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  overflow-x: auto;
  box-shadow: var(--ombre-basse);
}

.gr-ligne {
  display: grid;
  grid-template-columns: 190px repeat(7, minmax(120px, 1fr));
  border-bottom: 1px solid var(--trait2);
  min-width: 1030px;
}

.gr-ligne:last-child { border-bottom: 0; }

.gr-cell {
  padding: var(--e-2) var(--e-3);
  border-left: 1px solid var(--trait2);
  min-height: 56px;
}

.gr-cell:first-child { border-left: 0; }

/* AUJOURD'HUI SE REPÈRE, IL NE SE PEINT PAS.
 *
 * « Pourquoi une grande barre bleue sur la date du jour en vue Semaine ? » —
 * Stéphanie, 31/08. La colonne entière était remplie de `--lagon-f`, du haut
 * de la grille jusqu'au pied : une bande de couleur sur toute la hauteur pour
 * dire une seule chose, quel jour on est.
 *
 * Elle entrait en plus en concurrence avec les teintes d'événement posées dans
 * les cases — la couleur identifie l'événement (§7), pas la date.
 *
 * Ce qui reste : l'en-tête du jour, déjà écrit en teal, et un filet vertical
 * de deux pixels. On le trouve du premier coup d'œil, il ne recouvre rien. */
.gr-auj {
  box-shadow: inset 2px 0 0 var(--teal);
}

/* Sauf dans l'en-tête, où le filet doublerait la couleur du libellé. */
.gr-tete .gr-auj { box-shadow: none; }

.gr-tete { background: var(--surface2); }

.gr-tete .gr-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 0;
  padding-top: var(--e-3);
  padding-bottom: var(--e-3);
}

.gr-jour-nom {
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: var(--graisse-caps);
  color: var(--encre3);
}

.gr-jour-num {
  font-size: var(--t-base);
  color: var(--encre2);
}

.gr-auj .gr-jour-nom,
.gr-auj .gr-jour-num { color: var(--teal); }

/* La colonne des personnes reste visible quand on fait défiler la semaine. */
.gr-personne {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  background: var(--surface);
  position: sticky;
  left: 0;
  z-index: 1;
}

.gr-tete .gr-personne,
.gr-pied .gr-personne { background: var(--surface2); }

.gr-ini {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-p);
  background: var(--lagon-f);
  color: var(--teal);
  display: grid;
  place-items: center;
  font-weight: var(--graisse-forte);
  font-size: var(--t-micro);
}

.gr-qui-txt { min-width: 0; }

.gr-qui-nom {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
}

.gr-qui-role {
  display: block;
  font-size: var(--t-micro);
  color: var(--encre2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Une barre par affectation. La couleur identifie l'événement, jamais son
   état (CLAUDE.md §7) : la même teinte suit l'anniversaire partout. */
.gr-barre {
  border-radius: var(--r-s);
  padding: 5px 8px;
  margin-bottom: 4px;
  border-left: 3px solid;
}

.gr-barre:last-child { margin-bottom: 0; }

.gr-barre-h {
  display: block;
  font-size: var(--t-micro);
  opacity: .85;
}

.gr-barre-n {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gr-barre-resp {
  display: block;
  font-size: var(--t-micro);
  opacity: .85;
}

/* LA BARRE D'UN SERVICE N'A PAS DE COULEUR D'ÉVÉNEMENT.
 *
 * Depuis le 31/08, la ligne d'une personne porte une barre par CRÉNEAU et non
 * par anniversaire. Un créneau en couvre jusqu'à cinq : lui donner la teinte
 * de l'un d'eux désignerait le mauvais. Elle prend donc le gris de service, et
 * la couleur reste ce qu'elle est — l'identité d'un événement (§7). */
.gr-barre-creneau {
  background: var(--surface2);
  border-left-color: var(--encre3);
  color: var(--encre);
}

/* Le nombre d'anniversaires du service : un appui, pas un titre. La règle qui
   suit ce bloc rend `.gr-barre-n` à la taille de base — ici c'est un
   complément, pas le nom d'une famille. */
.gr-barre-creneau .gr-barre-n {
  font-size: var(--t-petit);
  font-weight: var(--graisse-normale);
  color: var(--encre2);
}

.gr-ev1 { background: var(--ev1f); border-left-color: var(--ev1); color: var(--ev1); }
.gr-ev2 { background: var(--ev2f); border-left-color: var(--ev2); color: var(--ev2); }
.gr-ev3 { background: var(--ev3f); border-left-color: var(--ev3); color: var(--ev3); }
.gr-ev4 { background: var(--ev4f); border-left-color: var(--ev4); color: var(--ev4); }
.gr-ev5 { background: var(--ev5f); border-left-color: var(--ev5); color: var(--ev5); }

/* Le pied : effectif requis contre affecté, PAR CRÉNEAU. La maquette
   d'origine comptait par jour avec la règle « 2 par anniversaire + options »,
   périmée depuis le 21/08 — ne pas la restaurer. */
.gr-pied {
  background: var(--surface2);
  border-top: 1px solid var(--trait);
}

.gr-pied-lbl {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
}

.gr-pied-aide {
  display: block;
  font-size: var(--t-micro);
  color: var(--encre2);
}

.gr-eff {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.gr-eff:hover .gr-eff-chiffre { text-decoration: underline; }

.gr-eff-quand {
  display: block;
  font-size: var(--t-micro);
  color: var(--encre3);
}

.gr-eff-chiffre {
  display: block;
  font-size: var(--t-base);
  font-weight: var(--graisse-forte);
  color: var(--teal);
}

/* Le rouge est réservé aux vrais problèmes : ici, l'effectif insuffisant. */
.gr-manque .gr-eff-chiffre { color: var(--lave); }

.gr-eff-manque {
  display: block;
  font-size: var(--t-micro);
  color: var(--lave);
}

.gr-rien { color: var(--encre3); }

.gr-aucune {
  padding: var(--e-5);
  color: var(--encre2);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Le panneau d'affectation, ouvert par un clic sur un créneau
   -------------------------------------------------------------------------- */

.pl-panneau {
  margin-top: var(--e-4);
  border-color: var(--teal);
}

.pl-panneau-tete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--e-3);
}

.pl-fermer {
  width: var(--cible-secondaire);
  height: var(--cible-secondaire);
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--encre2);
  font-size: var(--t-appui);
}

.pl-rappel {
  display: flex;
  gap: var(--e-3);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--trait2);
}

.pl-rappel-h {
  flex: none;
  min-width: 9em;
  font-size: var(--t-petit);
  color: var(--encre3);
}

.pl-rappel-m { flex: 1; min-width: 0; }
.pl-rappel-nom { display: block; font-size: var(--t-base); }

.pl-rappel-meta {
  display: block;
  font-size: var(--t-petit);
  color: var(--encre2);
}

.pl-panneau-eff {
  margin: var(--e-3) 0;
  font-weight: var(--graisse-appui);
  color: var(--teal);
}

.pl-panneau-eff.manque { color: var(--lave); }

.pl-panneau-sous {
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--graisse-caps);
  color: var(--encre3);
  margin-top: var(--e-3);
}

.pl-panneau-val { margin: 2px 0 0; font-size: var(--t-base); }

.pl-panneau-liste {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   La liste de jours : vue mobile de la semaine, vues Jour et Mois du bureau
   -------------------------------------------------------------------------- */

.pl-jours { display: grid; gap: var(--e-4); }
.pl-titre-auj { color: var(--teal); }

.pl-creneau {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface2);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-3);
}

.pl-creneau:last-child { margin-bottom: 0; }

.pl-creneau-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-2);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--trait2);
}

.pl-creneau-nom {
  font-weight: var(--graisse-forte);
  font-size: var(--t-base);
}

.pl-creneau-resp {
  font-size: var(--t-petit);
  color: var(--encre2);
}

.pl-ev {
  display: flex;
  gap: var(--e-3);
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--trait2);
  flex-wrap: wrap;
}

.pl-ev:last-of-type { border-bottom: 0; }

.pl-ev-heure {
  flex: none;
  min-width: 9em;
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
  color: var(--encre3);
}

.pl-ev-milieu { flex: 1; min-width: 0; }
.pl-ev-nom { display: block; font-size: var(--t-base); }

.pl-ev-meta {
  display: block;
  font-size: var(--t-petit);
  color: var(--encre2);
}

.pl-ev-equipe {
  flex: none;
  font-size: var(--t-petit);
  color: var(--encre2);
  text-align: right;
}

.pl-effectif {
  margin: var(--e-2) 0 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

.pl-effectif.manque {
  color: var(--lave);
  font-weight: var(--graisse-appui);
}

.pl-creneau-douteux {
  border-color: var(--ambre);
  background: var(--ambre-f);
}

.pl-creneau-douteux .pl-creneau-tete {
  color: var(--ambre);
  font-weight: var(--graisse-forte);
}

/* La liste ne sert qu'au mobile quand la vue affichée est « Semaine ». */
.pl-mobile { display: none; }

@media (max-width: 820px) {
  .gr { display: none; }
  .pl-mobile { display: grid; margin-top: var(--e-4); }
  .pl-vues { margin-left: 0; width: 100%; }
  .pl-ev { flex-direction: column; gap: 2px; }
  .pl-ev-heure { min-width: 0; }
  .pl-ev-equipe { text-align: left; }
}

/* La ligne des anniversaires : ce qu'il y a à couvrir, avant qui le couvre. */
.gr-ligne-ev {
  background: var(--surface2);
  border-bottom: 2px solid var(--trait);
}

/* --------------------------------------------------------------------------
   L'attribution, dans le panneau du créneau

   Une case par personne, et le responsable en menu. L'affectation porte sur le
   créneau entier : cocher quelqu'un l'affecte à tous ses anniversaires.
   -------------------------------------------------------------------------- */

/* Une personne par ligne : le rôle se choisit à droite du nom, et deux
   colonnes de cases mettraient les deux boutons de rôle à l'étroit. */
.pl-affectation {
  display: grid;
  gap: 2px;
  margin-top: var(--e-2);
}

.pl-coche {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  padding: 0 var(--e-2);
  border-radius: var(--r-s);
  cursor: pointer;
}

.pl-coche:hover { background: var(--surface2); }

.pl-coche input {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: var(--teal);
  cursor: pointer;
}

.pl-coche-nom { font-size: var(--t-base); }

.pl-coche-niveau {
  font-size: var(--t-micro);
  color: var(--encre3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pl-menu {
  min-height: var(--cible);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  padding: 0 var(--e-3);
  /* 16 px minimum : en dessous, Safari iOS zoome au toucher. */
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  margin-top: var(--e-2);
}

.pl-menu:hover:enabled { border-color: var(--teal); }
.pl-menu:disabled { color: var(--encre3); cursor: default; }

.pl-echec {
  margin: var(--e-3) 0 0;
  font-size: var(--t-petit);
  color: var(--lave);
}

/* Un anniversaire s'ouvre depuis le planning : la barre est une porte. */
.pl-ouvrable {
  cursor: pointer;
  text-align: left;
}

.pl-ouvrable:hover { filter: brightness(0.97); }

.pl-ouvrable:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* LE MOT QUI OUVRE L'AFFECTATION EST UN BOUTON, PAS UNE NOTE DE BAS DE PAGE.
   Il était en --t-micro souligné : 11 px pour la porte principale de l'écran
   de Charlotte. Stéphanie le 29/08 : « le bouton affecter est trop petit ».
   Il passe à la taille de base, dans un cadre, avec la cible tactile qui va
   avec. */
.gr-eff-action {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 10px;
  min-height: var(--cible-secondaire);
  border: 1px solid var(--teal);
  border-radius: var(--r-s);
  background: var(--lagon-f);
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
  color: var(--teal);
}

.gr-eff:hover .gr-eff-action {
  background: var(--lagon-survol);
}

.gr-manque .gr-eff-action {
  color: var(--lave);
  border-color: var(--lave);
  background: var(--lave-f);
}

/* Une date se clique pour y aller (29/08). */
.pl-date-lien { cursor: pointer; }

.pl-date-lien:hover .gr-jour-nom,
.pl-date-lien:hover .gr-jour-num { color: var(--teal); }

h3.pl-date-lien:hover { color: var(--teal); text-decoration: underline; }

.pl-date-lien:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Le rôle se choisit sur la ligne de la personne
   -------------------------------------------------------------------------- */

.pl-personne {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding: 4px var(--e-2);
  border-radius: var(--r-s);
}

.pl-personne[data-affectee="oui"] { background: var(--surface2); }

.pl-personne .pl-coche { flex: 1; min-width: 160px; }

.pl-roles {
  display: flex;
  gap: 4px;
  flex: none;
}

.pl-role {
  min-height: var(--cible-secondaire);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-p);
  background: var(--surface);
  color: var(--encre2);
  font: inherit;
  font-size: var(--t-petit);
  cursor: pointer;
  white-space: nowrap;
}

.pl-role[aria-pressed="true"] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--sur-teal);
  font-weight: var(--graisse-appui);
}

.pl-role:hover:not([aria-pressed="true"]) { border-color: var(--teal); color: var(--teal); }

.pl-role:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* L'admin affecte aussi depuis le téléphone (décision du 29/08). Le bouton
   ouvre le même panneau que le chiffre d'effectif de la grille. */
.pl-affecter {
  display: block;
  width: 100%;
  min-height: var(--cible);
  margin-top: var(--e-3);
  border: 1px solid var(--teal);
  border-radius: var(--r-s);
  background: var(--lagon-f);
  color: var(--teal);
  font: inherit;
  font-size: var(--t-base);
  cursor: pointer;
}

.pl-affecter:hover { background: var(--lagon-survol); }

.pl-affecter:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.pl-coche-resp {
  font-size: var(--t-micro);
  color: var(--teal);
  background: var(--lagon-f);
  border-radius: var(--r-p);
  padding: 2px 8px;
  white-space: nowrap;
}

.pl-aide {
  margin: var(--e-2) 0 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* --------------------------------------------------------------------------
   Trois blocs, trois échelles — et c'était le défaut

   Constat de Stéphanie du 29/08 : « trop de différence de taille entre les 3
   modules ». La ligne « Anniversaires à couvrir » empilait six barres de trois
   lignes chacune : 750 px de haut pour la seule ligne de rappel, au-dessus
   d'une grille de personnes à 56 px la ligne. Le rappel écrasait l'outil.

   Ses barres passent donc sur une ligne : horaire, prénom, effectif côte à
   côte. Elles disent la même chose et tiennent en 30 px.
   -------------------------------------------------------------------------- */

.gr-ligne-ev .gr-barre {
  padding: 5px 8px;
}

/* Le prénom d'abord, en entier : c'est ce qu'on cherche du regard. L'horaire
   et l'effectif tiennent sur la ligne du dessous, en petit — le premier jet
   les mettait devant, et le prénom se retrouvait tronqué en « f… ». */
.gr-ligne-ev .gr-barre-n {
  order: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gr-ligne-ev .gr-barre-h {
  order: 1;
  display: inline;
}

.gr-ligne-ev .gr-barre-resp {
  order: 2;
  display: inline;
}

.gr-ligne-ev .gr-barre-h::after {
  content: " · ";
}

/* Sur mobile, le sélecteur de vue ne prend pas une ligne entière à lui seul :
   les pilules restent compactes (règle standing KAIROZ sur les sous-onglets). */
@media (max-width: 820px) {
  .pl-barre { gap: var(--e-2); }
  .pl-vues { width: auto; margin-left: auto; }
  .pl-periode { font-size: var(--t-petit); }
}

.pl-role-non {
  font-size: var(--t-micro);
  color: var(--encre3);
  align-self: center;
  white-space: nowrap;
}

/* Les barres des lignes de personne ne portent que l'horaire : compactes. */
.gr-ligne:not(.gr-ligne-ev) .gr-barre {
  padding: 4px 8px;
}

/* ==========================================================================
   Vue Jour — qui travaille, quand, à quel poste

   Elle répond à une seule question, et c'est la référence Skello : l'horaire
   et le poste, pas la liste des anniversaires (décision du 29/08).
   ========================================================================== */

.pl-postes { display: grid; gap: 2px; margin-top: var(--e-2); }

.pl-poste {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-2);
  border-radius: var(--r-s);
  background: var(--surface);
  border: 1px solid var(--trait2);
}

.pl-poste-ini {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--r-p);
  background: var(--lagon-f);
  color: var(--teal);
  display: grid;
  place-items: center;
  font-weight: var(--graisse-forte);
  font-size: var(--t-micro);
}

.pl-poste-milieu { flex: 1; min-width: 0; }
.pl-poste-nom { display: block; font-size: var(--t-base); font-weight: var(--graisse-appui); }
.pl-poste-role { display: block; font-size: var(--t-petit); color: var(--encre2); }

.pl-poste-h {
  flex: none;
  font-size: var(--t-base);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
}

.pl-personne-vide {
  margin: var(--e-2) 0 0;
  font-size: var(--t-base);
  color: var(--encre2);
}

/* Ce qu'il y a à couvrir, en rappel sous l'équipe. */
.pl-couvrir {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-top: var(--e-3);
  padding-top: var(--e-2);
  border-top: 1px solid var(--trait2);
}

.pl-couvrir-lbl {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: var(--graisse-caps);
  color: var(--encre3);
}

.pl-couvrir-puce {
  border: 0;
  border-left: 3px solid;
  border-radius: var(--r-s);
  padding: 4px 10px;
  font: inherit;
  font-size: var(--t-petit);
  cursor: pointer;
}

/* ==========================================================================
   Vue Mois — un agenda, pas une liste

   Sept colonnes, une ligne par semaine, les jours voisins en grisé : la forme
   qu'on reconnaît sans l'apprendre (décision du 29/08). Elle sert à repérer ;
   un clic sur un jour ouvre sa vue Jour, où l'affectation se fait.
   ========================================================================== */

.ag {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--ombre-basse);
}

.ag-ligne {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--trait2);
}

.ag-ligne:last-child { border-bottom: 0; }

.ag-cell {
  border-left: 1px solid var(--trait2);
  padding: var(--e-2);
  min-height: 104px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ag-cell:first-child { border-left: 0; }

.ag-tete { background: var(--surface2); }

.ag-tete .ag-cell {
  min-height: 0;
  padding: var(--e-2) var(--e-3);
}

.ag-jour-nom {
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: var(--graisse-caps);
  color: var(--encre3);
}

.ag-num {
  font-size: var(--t-base);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
}

/* Un jour du mois voisin reste lisible mais s'efface : il est là pour tenir
   la colonne, pas pour être lu. */
.ag-hors { background: var(--surface2); }
.ag-hors .ag-num { color: var(--encre3); }

.ag-auj { background: var(--lagon-f); }
.ag-auj .ag-num { color: var(--teal); font-weight: var(--graisse-forte); }

.ag-pastilles { display: grid; gap: 2px; }

.ag-pastille {
  display: flex;
  align-items: baseline;
  gap: 5px;
  border-left: 3px solid;
  border-radius: var(--r-s);
  padding: 2px 6px;
  font-size: var(--t-petit);
  overflow: hidden;
}

.ag-pastille-h { flex: none; font-size: var(--t-micro); opacity: .85; }

.ag-pastille-n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le rouge reste réservé aux vrais problèmes : ici, l'effectif qui manque. */
.ag-manque {
  margin-top: auto;
  font-size: var(--t-micro);
  color: var(--lave);
  font-weight: var(--graisse-appui);
}

/* Sur téléphone, un agenda à sept colonnes n'est plus lisible : les cases
   perdent leur contenu et il faut zoomer. Les pastilles se réduisent à un
   point coloré, et le détail vit derrière le jour — motif « liste de portes »
   du CLAUDE.md §7. */
@media (max-width: 820px) {
  .ag-cell { min-height: 64px; padding: 4px; }
  .ag-pastille { padding: 2px 4px; }
  .ag-pastille-h, .ag-pastille-n { display: none; }
  .ag-pastille { height: 6px; border-left-width: 0; }
  .ag-manque { font-size: 10px; }
}

/* --------------------------------------------------------------------------
   La sortie du panneau d'affectation (31/08/2026)

   La croix en haut à droite était la seule sortie, et rien ne disait que le
   travail était déjà enregistré. Il n'y a toujours PAS de bouton
   « Enregistrer » — le §4 l'interdit, chaque coche part au serveur au moment
   du geste — mais il y a maintenant une phrase qui le dit et un bouton qui
   ferme.
   -------------------------------------------------------------------------- */

.pl-auto {
  margin: 0 0 var(--e-3);
  font-size: var(--t-petit);
  color: var(--encre2);
}

.pl-termine {
  margin-top: var(--e-4);
}