/* Le mois en pâle : la date se lit en deux temps, le jour d'abord. C'est ce qui
 * permet au titre d'être énorme sans crier. */
.date-mois {
  color: var(--encre-pale);
}

/* --- La bande de temps ------------------------------------------------- */
/* Les positions viennent du bloc `<style>` généré (src/interface/bande.py) :
 * `left` et `width` en pourcentage de la fenêtre du jour, calculés à la minute.
 * Ici ne vit que ce qui ne dépend pas du jour. */

.bande-zone { display: grid; gap: 8px; }

/* Une surface, pas une grille. Elle en était une, et c'était un défaut de fond : les
 * blocs y étaient des items placés par `grid-row`, donc plusieurs blocs d'une même
 * piste tombaient dans des COLONNES implicites — dimensionnées sur leur contenu. Une
 * séance de quatre heures avait alors la largeur du texte « 08:30 », et la bande
 * suggérait une journée au lieu de la dire.
 *
 * Les bords tombent maintenant exactement sur leurs graduations : `left` et `width`
 * sont des pourcentages de la MÊME largeur que la règle d'heures — celle de la bande —,
 * donc un cours de 8 h 30 à 12 h 30 couvre un tiers d'une frise graduée de 8 à 20. */
.bande {
  position: relative;
  height: var(--bande-h);
  background: var(--bande-fond);
}

/* Chaque bloc est posé aux quatre coins : `left`/`width` pour l'heure, `top`/`height`
 * pour la piste. Les pistes se partagent la hauteur au lieu de l'additionner — la frise
 * garde donc la même épaisseur qu'il y ait un chevauchement ou trois. */
.bande-bloc {
  position: absolute;
  display: flex;
  align-items: center;
  padding: 0 5px;
  overflow: hidden;
  /* Un cours de quinze minutes fait 2 % de la bande, soit une dizaine de pixels : sans
   * plancher il deviendrait un trait qu'on ne verrait pas. */
  min-width: 4px;
}

.bande-heure {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  line-height: 1;
}

/* Deux pistes ou plus : chaque voie fait la moitié de 22 px, et une étiquette de 10 px
 * n'y tient pas. On la retire plutôt que de la tronquer au milieu d'un chiffre — une
 * heure coupée est pire qu'une heure absente, et la liste juste en dessous la porte.
 *
 * C'est le prix de la hauteur constante, et il est assumé : sur une journée sans
 * chevauchement, qui est le cas normal, les heures restent écrites. */
.bande-serree .bande-heure { display: none; }

.regle {
  position: relative;
  height: 1.2em;
  border-top: 1px solid var(--trait-moyen);
  padding-top: 7px;
}

.regle-h {
  position: absolute;
  top: 7px;
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--encre-tenue);
  transform: translateX(-50%);
}

.legende {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}

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

.bande-note {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}
.bande-bloc.f-vert   { background: var(--f-vert); }
.bande-bloc.f-rouge  { background: var(--f-rouge); }
.bande-bloc.f-jaune  { background: var(--f-jaune); }
.bande-bloc.f-neutre { background: var(--f-neutre); }

/* L'heure posée dans le bloc : encre sombre sur teinte claire, pour que le
 * contraste tienne sur les six couleurs et dans les deux thèmes. */
.bande-bloc .bande-heure { color: oklch(0.22 0.04 250); }
.cours.f-vert, .confirmer.f-vert     { border-left-color: var(--f-vert); }
.cours.f-rouge, .confirmer.f-rouge   { border-left-color: var(--f-rouge); }
.cours.f-jaune, .confirmer.f-jaune   { border-left-color: var(--f-jaune); }
.cours.f-neutre, .confirmer.f-neutre { border-left-color: var(--f-neutre); }
.etiq-formateur.f-vert   { background: var(--f-vert-pale);   color: var(--f-vert-texte); }
.etiq-formateur.f-rouge  { background: var(--f-rouge-pale);  color: var(--f-rouge-texte); }
.etiq-formateur.f-jaune  { background: var(--f-jaune-pale);  color: var(--f-jaune-texte); }
.etiq-formateur.f-neutre { background: var(--f-neutre-pale); color: var(--f-neutre-texte); }

.retard-liste {
  display: grid;
  gap: var(--e1);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.retard-carte {
  background: var(--surface-creuse);
  padding: 16px;
  display: grid;
  gap: var(--e2);
  align-content: start;
}

/* Le nombre de jours est le point d'entrée de l'œil : très gros, en accent, et
 * l'action juste dessous. C'est le parti pris du bloc. */
.retard-nombre {
  font-size: var(--t-retard);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--accent-texte);
}

.retard-unite {
  font-size: 0.32em;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-left: 6px;
}

.retard-quoi {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: 8px;
}

.retard-contexte {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

/* --- Deux colonnes ---------------------------------------------------- */
/* `auto-fit` avec un minimum : la bascule se fait quand la place manque, pas à un
 * seuil de largeur d'écran deviné. Sur téléphone, une seule colonne. */

.deux-colonnes {
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  align-items: start;
}

.colonne {
  min-width: 0;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* La colonne droite empile trois SECTIONS distinctes — à faire, à confirmer,
 * ailleurs — là où la gauche empile les cours d'une seule liste. Au même écart de
 * 12 px, les sections se lisaient comme une seule. */
.colonne-sections {
  gap: clamp(26px, 3vw, 38px);
}

/* « À faire » contient deux sous-groupes titrés (du jour, en retard) : il respire
 * plus qu'un pavé d'une seule liste, sinon les sous-titres collent à ce qui les
 * précède. */
.pave-groupes { gap: var(--e5); }

/* --- Un cours --------------------------------------------------------- */

.cours {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 1.8vw, 22px);
  background: var(--surface);
  padding: var(--e6);
  border-left: 6px solid var(--f-neutre);
}

.cours-creneau {
  display: grid;
  align-content: start;
  gap: 3px;
}

.cours-debut {
  font-size: var(--t-heure);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.cours-fin {
  font-size: var(--t-medium);
  letter-spacing: -0.035em;
  color: var(--encre-tenue);
  line-height: 1.1;
}

/* Séance saisie sans heure : le job lui applique une heure par défaut pour la
 * poser dans l'agenda, l'écran ne la fait pas passer pour une heure voulue. */
.cours-sans-heure {
  color: var(--encre-tenue);
  font-weight: 400;
}

.cours-corps {
  min-width: 0;
  display: grid;
  gap: 9px;
  align-content: start;
}

.cours-titre {
  font-size: var(--t-titre);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.12;
  text-wrap: pretty;
}

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

.etiquettes {
  display: flex;
  gap: var(--e2);
  flex-wrap: wrap;
  margin-top: 2px;
}

.etiq {
  font-size: var(--t-mini);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  background: var(--f-neutre-pale);
  color: var(--f-neutre-texte);
}

/* --- Les creux entre deux cours -------------------------------------- */
/* Ils font partie de la lecture : c'est là que Chris déjeune, prépare, ou
 * traverse la ville. Une liste qui les tairait donnerait une journée fausse. */

.creux {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 4px 6px;
}

.creux-point {
  width: 6px;
  height: 6px;
  background: var(--f-neutre);
  flex: none;
}

.creux-libelle {
  font-size: var(--t-mini);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--creux-texte);
}

.creux-filet { flex: 1; height: 1px; background: var(--trait); }

.creux-fin .creux-point { background: var(--trait-fort); }
.creux-fin .creux-libelle { color: var(--creux-texte-fin); }

.enjeu {
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--accent-texte);
}

/* --- À confirmer ------------------------------------------------------ */

.confirmations { display: grid; gap: var(--e1); }

.confirmer {
  background: var(--surface);
  padding: clamp(15px, 1.9vw, 20px);
  display: grid;
  gap: var(--e3);
  border-left: 3px solid var(--f-neutre);
}

.confirmer-tete {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: baseline;
}

.confirmer-quand {
  font-size: var(--t-texte);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--encre-forte);
}

.confirmer-titre {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.028em;
}

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

/* --- Ailleurs -------------------------------------------------------- */
/* Compte + destination, rien d'autre. Bordure fine, pas de fond : ce ne sont pas
 * des cartes de travail mais des sorties. Chris ne traite rien depuis là. */

.ailleurs { display: grid; gap: var(--e1); }

.sortie {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid var(--trait-fort);
}

.sortie-nombre {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
}

.sortie-quoi { flex: 1; min-width: 120px; font-size: var(--t-base); }

.sortie-ou {
  font-size: var(--t-mini);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  white-space: nowrap;
}

.bouton-secondaire {
  min-height: 2.75rem;
  padding: 12px 16px;
  border: 0;
  background: var(--creux);
  color: var(--encre-douce);
  font-size: var(--t-texte);
  cursor: pointer;
}

/* Les deux actions d'un retard, côte à côte : « Marquer fait » prend la place,
 * « Demain » ce qu'il lui faut. C'est la répartition de la maquette. */
.retard-actions {
  display: flex;
  gap: var(--e1);
  margin-top: var(--e3);
}

.retard-actions form:first-child { flex: 1; }

/* Le formulaire de confirmation : le champ et le bouton sur une ligne. La saisie
 * est étroite — une durée fait trois caractères — et le bouton prend le reste. */
.confirmer-forme {
  display: flex;
  align-items: flex-end;
  gap: var(--e1);
  margin-top: var(--e2);
}

/* --- Revenir sur une validation d'office ------------------------------- */
/* Traitement délibérément discret : c'est le cas RARE. Le mode auto valide les
 * cours du jour à 19 h et Chris ne signale que l'exception — cette liste ne doit
 * pas donner l'impression qu'il y a quelque chose à faire. D'où le repli, l'absence
 * de fond, et un lien plutôt qu'un bouton. */

.revenir {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--trait);
}

.validees {
  display: grid;
  gap: var(--e1);
  margin-top: var(--e3);
}

.validee {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e2) 0;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

.validee-quand {
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--encre-douce);
  flex: none;
}

.validee-quoi { flex: 1; min-width: 140px; overflow-wrap: anywhere; }

.validee-duree { flex: none; font-weight: 600; color: var(--encre-douce); }

/* Un lien, pas un bouton : il n'a ni fond, ni bordure, ni hauteur de cible
 * tactile pleine. C'est voulu — un bouton appellerait le clic. */
.lien-discret {
  border: 0;
  background: none;
  padding: 0;
  color: var(--encre-tenue);
  font-size: var(--t-petit);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  flex: none;
}

.lien-discret:hover { color: var(--accent-texte); }

.tache-actions {
  display: flex;
  gap: var(--e3);
  flex: none;
}

.etiquette {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 0.35rem;
  background: var(--creux);
  color: var(--creux-texte);
  font-size: 0.75rem;
}

/* --- Aujourd'hui ----------------------------------------------------- */

.date-jour { font-weight: 700; }

.vide-journee {
  color: var(--encre-tenue);
  font-size: 0.92rem;
}