/* ==========================================================================
   B18 V2 — « Ma journée » (lot 3)

   Aucune couleur littérale : tout passe par les jetons.
   Seuil mobile unique à 820 px (--seuil-mobile).

   L'ÉCRAN QU'ON REGARDE DEBOUT, À UNE MAIN.

   Deux conséquences qui gouvernent tout ce fichier :
   la tâche en cours occupe la place que son importance mérite, et il n'y a
   qu'un bouton principal. Tout le reste est plus petit, plus bas, plus gris.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le hero
   -------------------------------------------------------------------------- */

.journee-hero {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--ombre-basse);
  margin-bottom: var(--e-4);
}

.journee-date {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--graisse-forte);
  color: var(--encre2);
}

.journee-prenom {
  font-size: var(--t-titre-l);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  margin: 0;
}

.journee-resume {
  font-size: var(--t-appui);
  color: var(--encre2);
}

.journee-meteo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--trait2);
  font-size: var(--t-appui);
  color: var(--encre);
}

/* Une météo qu'on n'a pas ne se déguise pas en météo. */
.journee-meteo[data-nature="indisponible"],
.journee-meteo[data-nature="attente"] {
  color: var(--encre3);
  font-style: italic;
}

/* Le repli barnum est la seule conséquence pratique de la météo pour l'équipe.
   Ambre : ça demande une décision, ce n'est pas un problème. */
.journee-barnum {
  padding: 2px var(--e-2);
  border-radius: var(--r-p);
  background: var(--ambre-f);
  color: var(--ambre);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
}

/* --------------------------------------------------------------------------
   Mes postes du jour
   -------------------------------------------------------------------------- */

.journee-postes-groupe + .journee-postes-groupe {
  margin-top: var(--e-4);
}

.journee-postes-ou {
  font-size: var(--t-petit);
  color: var(--encre2);
  margin-bottom: var(--e-2);
}

.journee-postes {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.journee-postes li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  min-height: var(--cible);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--trait2);
  font-size: var(--t-base);
  color: var(--encre);
}

/* Le seul poste que le client impose. Il se distingue par un trait, pas
   seulement par son badge : en noir et blanc, le trait reste. */
.journee-postes li[data-obligatoire="oui"] {
  border-left: 3px solid var(--teal);
  padding-left: var(--e-3);
  margin-left: calc(var(--e-3) * -1);
}

.journee-poste-nom {
  font-weight: var(--graisse-appui);
}

/* --------------------------------------------------------------------------
   La tâche en cours — le cœur de l'écran
   -------------------------------------------------------------------------- */

.journee-maintenant {
  border-left: 3px solid var(--teal);
}

/* En retard : le rouge est légitime, c'est l'un des trois motifs du §7. */
.journee-maintenant[data-etat="probleme"] {
  border-left-color: var(--lave);
}

.journee-maintenant-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-2);
}

.journee-maintenant-mot {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--graisse-forte);
  color: var(--teal);
}

.journee-tache-titre {
  font-size: var(--t-titre);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  margin: 0 0 var(--e-1);
}

.journee-tache-ou {
  font-size: var(--t-appui);
  color: var(--encre2);
  margin-bottom: var(--e-3);
}

/* Le discours d'accueil : du texte à lire à voix haute, donc les retours à la
   ligne de l'auteur comptent. */
.journee-tache-note {
  white-space: pre-wrap;
  padding: var(--e-3);
  border-radius: var(--r-s);
  background: var(--surface2);
  font-size: var(--t-appui);
  line-height: 1.55;
  color: var(--encre);
  margin-bottom: var(--e-3);
}

/* L'UNIQUE BOUTON PRINCIPAL DE L'ÉCRAN.
   Pleine largeur, 52 px — au-dessus du plancher de 44, parce que c'est le
   geste qu'on répète vingt fois dans la journée, souvent sans regarder. */
.btn-principal {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0 var(--e-4);
  border: 0;
  border-radius: var(--r-s);
  /* Dégradé d'amplitude faible : réservé aux surfaces actives, jamais
     clinquant (B18_REGLES_AFFICHAGE.md §1). */
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-d) 100%);
  color: var(--sur-teal);
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  cursor: pointer;
}

.btn-principal:hover {
  background: var(--teal-d);
}

.journee-secondaires {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-3);
}

.journee-secondaires .btn-secondaire {
  flex: 1;
  min-width: 12ch;
}

/* Le bouton « Bloqué » n'est pas rouge : signaler un blocage n'est pas une
   faute, et un bouton rouge se touche moins. Il se distingue par sa bordure. */
.journee-secondaires .btn-secondaire[data-etat="alerte"] {
  border-color: var(--ambre);
  color: var(--ambre);
}

/* --------------------------------------------------------------------------
   Heures attendues — provisoires, et ça se voit
   -------------------------------------------------------------------------- */

.journee-heure {
  flex: none;
  font-size: var(--t-petit);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}

.journee-heure[data-etat="probleme"] {
  color: var(--lave);
  font-weight: var(--graisse-appui);
}

/* Un horaire d'événement illisible : on ne calcule rien plutôt qu'inventer. */
.journee-heure[data-etat="inconnu"] {
  color: var(--encre3);
  font-style: italic;
}

/* LA MARQUE QUI DIT QUE L'HEURE N'EST PAS DU CLIENT.
   Sans elle, un « 9 h 30 » affiché comme les autres devient un chiffre autour
   duquel l'équipe s'organise, sans savoir qu'il sort de nulle part. */
.journee-provisoire {
  padding: 1px var(--e-2);
  border-radius: var(--r-p);
  background: var(--ambre-f);
  color: var(--ambre);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  text-transform: lowercase;
  cursor: help;
}

/* --------------------------------------------------------------------------
   Le signalement de blocage
   -------------------------------------------------------------------------- */

.journee-blocage {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
}

.journee-blocage-titre {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  margin: 0 0 var(--e-1);
}

.journee-blocage-quoi {
  font-size: var(--t-appui);
  color: var(--encre2);
  margin-bottom: var(--e-3);
}

/* Quatre motifs empilés, pleine largeur, alignés à gauche : on les lit en
   descendant, et on en touche un. Deux touches en tout. */
.journee-motifs {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.journee-motif {
  width: 100%;
  min-height: var(--cible);
  padding: var(--e-3);
  text-align: left;
  font-size: var(--t-appui);
}

/* --------------------------------------------------------------------------
   La journée, tâche par tâche
   -------------------------------------------------------------------------- */

.journee-taches {
  display: flex;
  flex-direction: column;
}

.journee-tache {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--trait2);
  border-radius: 0;
}

/* Une tâche faite s'efface sans disparaître : elle reste vérifiable, elle
   n'occupe plus l'œil. */
.journee-tache[data-fait="oui"] .tache-libelle {
  color: var(--encre2);
  text-decoration: line-through;
}

.journee-tache[data-etat="probleme"] {
  border-left: 3px solid var(--lave);
  padding-left: var(--e-2);
  margin-left: calc(var(--e-2) * -1);
}

.journee-tache .tache-libelle {
  flex: 1;
  min-width: 12ch;
}

.journee-tache .tache-precision {
  flex-basis: 100%;
  padding-left: calc(20px + var(--e-3));
}

/* --------------------------------------------------------------------------
   Les autres anniversaires du domaine
   -------------------------------------------------------------------------- */

.journee-autres {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.journee-autres li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-3);
  min-height: var(--cible);
  padding: var(--e-2) 0 var(--e-2) var(--e-3);
  border-top: 1px solid var(--trait2);
  /* La couleur identifie l'ÉVÉNEMENT, jamais son statut. */
  border-left: 3px solid transparent;
}

.journee-autres li[data-evenement="1"] { border-left-color: var(--ev1); }
.journee-autres li[data-evenement="2"] { border-left-color: var(--ev2); }
.journee-autres li[data-evenement="3"] { border-left-color: var(--ev3); }
.journee-autres li[data-evenement="4"] { border-left-color: var(--ev4); }
.journee-autres li[data-evenement="5"] { border-left-color: var(--ev5); }

.journee-autre-heure {
  font-size: var(--t-petit);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Seuil mobile : 820 px (--seuil-mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  /* Les deux boutons secondaires se superposent plutôt que de se comprimer :
     à 375 px, « Ouvrir le dossier » et « Bloqué » côte à côte tombent chacun
     sous une largeur touchable confortablement. */
  .journee-secondaires {
    flex-direction: column;
  }

  .journee-secondaires .btn-secondaire {
    width: 100%;
  }

  .journee-autres li {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Une tâche qui revient à quelqu'un d'autre : le nom du titulaire se distingue
   du nom de la phase, sinon la ligne se lit comme si tout me revenait. */
.journee-tache .tache-precision[data-autrui="oui"] {
  color: var(--encre3);
  font-style: italic;
}

/* LE LIEN D'OUVERTURE D'UN AUTRE ANNIVERSAIRE EST UNE CIBLE TACTILE.
 *
 * Il était un bouton nu de 20 px de haut, posé dans une ligne de 44 : la ligne
 * paraissait touchable, seul le texte l'était. Même défaut que le bouton de
 * suppression d'un commentaire au lot 2, au composant d'à côté — et le contrôle
 * mobile ne le voyait pas parce qu'il excluait de sa mesure ce qu'il croyait
 * déléguer à l'enveloppe. */
.journee-autres .lien-dossier {
  min-height: var(--cible);
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Les tâches groupées par phase

   La mise à plat des dix-sept cases avait été essayée puis rejetée le 11/08
   (B18_REGLES_AFFICHAGE.md §10, « indigeste »). Le groupe rend la phase
   lisible une fois au lieu de dix-sept, et rend à chaque ligne la place que
   la répétition lui prenait.
   -------------------------------------------------------------------------- */

.journee-phase + .journee-phase {
  margin-top: var(--e-5);
}

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

.journee-phase-nom {
  font-size: var(--t-appui);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  margin: 0;
}

.journee-phase-heure {
  font-size: var(--t-petit);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
  cursor: help;
}