/* ==========================================================================
   Toranout : grille des tâches, équité, absences du Tsevet (§9.3).

   Aucune couleur en dur : tout vient de tokens.css. Deux mises en page
   coexistent pour un même contenu — le tableau au-dessus de 900 px, une liste
   par jour en dessous. Le §7 interdit le défilement horizontal, et dix tâches
   sur cinq jours ne tiennent pas dans 375 px : ce n'est pas une dégradation,
   c'est la forme que prend cette information sur un téléphone.
   ========================================================================== */

/* --- Barre de période ------------------------------------------------------ */

.toranout__navigation {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  flex-wrap: wrap;
}
.toranout__periode {
  font-family: var(--police-titre);
  font-weight: 600;
  min-width: 10rem;
  text-align: center;
  /* La première lettre du mois vient d'une date localisée, qui la rend en
     minuscule : « septembre 2026 ». */
  text-transform: capitalize;
}
.icone--retournee { transform: rotate(180deg); }

/* Le choix « Semaine / Mois », posé dans la barre à côté des flèches. L'écart
   est plus serré que celui des chips en tête de carte : ces deux-là forment un
   choix, pas deux commandes indépendantes. La barre verticale les détache du
   bouton « Cette semaine », qui n'en fait pas partie. */
/* Un jour de vacances. Il ne se confond pas avec une case non pourvue : celle-ci
   attend quelqu'un, celui-là n'attend personne. La teinte vient du fond calme du
   thème — aucune couleur n'est écrite ici (§14). */
.toranout__case--suspendue { background: var(--carte-douce); }
.toranout__vacances {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--texte-doux);
}
.toranout__table th.est-suspendu { color: var(--texte-doux); }
.toranout__bloc--suspendu { opacity: 0.72; }

.toranout__portees {
  gap: var(--pas);
  margin-inline-start: calc(var(--pas) * 2);
  padding-inline-start: calc(var(--pas) * 3);
  border-inline-start: 1px solid var(--bordure);
}

/* --- Grille large ---------------------------------------------------------- */

/* Conteneur des deux mises en page : c'est lui qui les empile sans marge. */
.toranout__grille { display: grid; }

.toranout__enveloppe { display: none; }
.toranout__jours { display: grid; gap: calc(var(--pas) * 4); }

@media (min-width: 900px) {
  .toranout__enveloppe { display: block; overflow-x: auto; }
  .toranout__jours { display: none; }
}

.toranout__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
}
.toranout__table th,
.toranout__table td {
  padding: calc(var(--pas) * 2);
  border-bottom: 1px solid var(--bordure);
  text-align: left;
  vertical-align: top;
}
.toranout__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--carte);
  border-bottom: 2px solid var(--bordure);
  white-space: nowrap;
}
.toranout__jour { display: block; font-family: var(--police-titre); font-weight: 600; }
.toranout__date { display: block; font-size: 0.75rem; color: var(--texte-tenu); font-weight: 400; }

.toranout__tache { background: var(--carte-douce); min-width: 12rem; }
.toranout__libelle { display: block; font-weight: 500; }
.toranout__meta { display: block; font-size: 0.75rem; color: var(--texte-tenu); font-weight: 400; }

.toranout__case { min-width: 8.5rem; }

/* Une case qui couvre plusieurs jours porte un tour de service entier. Elle
   n'est pas décorée : c'est sa largeur qui dit ce qu'elle couvre, et une
   bordure de plus dans un tableau qui en a déjà six ne se lirait pas. */
.toranout__case--tour { min-width: 0; }

/* Les noms d'une même corvée : le couloir en compte deux, le heder ohel trois.
   Empilés plutôt qu'en ligne — deux noms côte à côte dans une colonne de
   8,5 rem se couperaient tous les deux. */
.toranout__noms { display: grid; gap: calc(var(--pas) * 1); }

/* Dans le tableau, les noms sont centrés sous leur jour. C'est la mise en page
   de la feuille affichée au mur, et c'est aussi ce qui rend une case large
   lisible : un nom collé à gauche d'une case de six jours paraît appartenir au
   dimanche. La vue par jour, elle, reste alignée à gauche comme une liste. */
.toranout__table .toranout__jeton { justify-content: center; text-align: center; }
.toranout__table .toranout__personne { flex: 0 1 auto; }

/* --- Jeton d'affectation --------------------------------------------------- */

.toranout__jeton {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 1);
  width: 100%;
  min-height: var(--cible-tactile);
  padding: calc(var(--pas) * 1) calc(var(--pas) * 2);
  font: inherit;
  text-align: left;
  color: inherit;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
}
.toranout__jeton--actif {
  cursor: pointer;
  border-color: var(--bordure);
  background: var(--carte);
  transition: background var(--duree-anim) ease, border-color var(--duree-anim) ease;
}
.toranout__jeton--actif:hover { background: var(--survol); border-color: var(--primaire); }
.toranout__jeton--actif.est-verrouille {
  background: var(--primaire-clair);
  border-color: var(--primaire-moyen);
}

.toranout__personne { flex: 1; font-size: 0.85rem; line-height: 1.3; }
.toranout__personne--absente { color: var(--texte-tenu); }
.toranout__verrou { flex: none; display: grid; place-items: center; width: 1rem; color: var(--primaire-profond); }
.toranout__verrou svg { width: 1rem; height: 1rem; }

/* --- Grille étroite : un bloc par jour ------------------------------------- */

.toranout__bloc {
  padding: calc(var(--pas) * 3);
  border: 1px solid var(--bordure);
  border-radius: var(--r-md);
  background: var(--carte-douce);
}
.toranout__bloc-titre {
  font-family: var(--police-titre);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: calc(var(--pas) * 2);
}
/* Seule la première lettre : « capitalize » écrivait « Dimanche 26 Juil. ». */
.toranout__bloc-titre::first-letter { text-transform: uppercase; }

.toranout__liste { display: grid; gap: calc(var(--pas) * 1); }
.toranout__ligne {
  display: grid;
  grid-template-columns: 1fr minmax(8rem, 45%);
  align-items: center;
  gap: calc(var(--pas) * 2);
  padding: calc(var(--pas) * 1) 0;
  border-bottom: 1px solid var(--bordure);
}
.toranout__ligne:last-child { border-bottom: 0; }
.toranout__ligne-tache { min-width: 0; }

/* --- Équité ---------------------------------------------------------------- */

.equite__precision { font-size: 0.72rem; color: var(--texte-tenu); line-height: 1.35; }
.equite__case--attention { border-color: var(--alerte); background: var(--alerte-doux); }

/* --- Absences du Tsevet ---------------------------------------------------- */

.absences { display: grid; gap: calc(var(--pas) * 1); }
.absences__ligne {
  display: grid;
  grid-template-columns: 1fr auto var(--cible-tactile);
  align-items: center;
  gap: calc(var(--pas) * 3);
  min-height: var(--cible-tactile);
  padding: calc(var(--pas) * 2);
  border-bottom: 1px solid var(--bordure);
}
.absences__ligne:last-child { border-bottom: 0; }
.absences__qui { display: grid; min-width: 0; }
.absences__nom { font-weight: 500; }
.absences__role { font-size: 0.75rem; color: var(--texte-tenu); }
.absences__quand { display: grid; text-align: right; font-size: 0.85rem; }
.absences__motif { font-size: 0.75rem; color: var(--texte-tenu); }

@media (max-width: 560px) {
  .absences__ligne { grid-template-columns: 1fr var(--cible-tactile); }
  .absences__quand { grid-column: 1; text-align: left; }
}

/* --- Impression : la grille au mur ---------------------------------------- */

@media print {
  .toranout__enveloppe { display: block; }
  .toranout__jours { display: none; }
  .toranout__navigation,
  .barre-outils__actions { display: none; }
  .toranout__jeton--actif { border-color: var(--bordure); background: transparent; }
}