/* ==========================================================================
   B18 V2 — L'écran du jour (lot 4)

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

   L'ÉCRAN DU MERCREDI MATIN, SUR LE POSTE BUREAU.

   Trois conséquences qui gouvernent ce fichier :
   ce qui va bien ne prend pas de place, le rouge ne sort que sur un vrai
   problème, et la couleur identifie l'événement — le statut passe par la
   forme et par le mot.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Le choix de la journée

   UN MENU DÉROULANT, PLUS UNE RANGÉE DE PILULES. Il y avait deux barres
   empilées — les onglets, puis une pastille par date. Sur un écran du jour J,
   les autres dates n'ont pas à occuper une ligne entière : elles vivent dans
   un menu replié, à côté de la date affichée (décision du 29/08).
   -------------------------------------------------------------------------- */

.cockpit-barre-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
  margin-bottom: var(--e-4);
}

.cockpit-barre-haut > .so { margin-bottom: 0; }

.cockpit-jour-menu {
  min-height: var(--cible-secondaire);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface2);
  color: var(--encre);
  padding: 0 var(--e-3);
  /* 16 px minimum : en dessous, Safari iOS zoome au toucher et l'écran part
     de travers (B18_REGLES_AFFICHAGE §2). */
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
}

.cockpit-jour-menu:hover { border-color: var(--teal); }

/* --------------------------------------------------------------------------
   L'en-tête de journée
   -------------------------------------------------------------------------- */

.cockpit-entete {
  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);
}

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

.cockpit-resume {
  font-size: var(--t-titre);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

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

.cockpit-meteo[data-nature="indisponible"],
.cockpit-meteo[data-nature="attente"] {
  color: var(--encre3);
  font-style: italic;
}

/* Le badge « Repli barnum conseillé » vivait ici. Il a été retiré le 18/08 :
   l'en-tête porte les FAITS météo, l'arbitrage vit dans le bandeau avec son
   bouton. La même conséquence écrite aux deux endroits, c'était la même
   information deux fois sur un écran (règles §9). */

/* --------------------------------------------------------------------------
   Le bandeau d'exceptions

   CE QUI VA BIEN NE PREND PAS DE PLACE. La carte reste quand il n'y a rien —
   une carte qui disparaît fait croire à un bug — mais tombe à une phrase.
   -------------------------------------------------------------------------- */

.cockpit-exceptions-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.cockpit-exceptions-compte {
  min-width: var(--e-5);
  padding: 0 var(--e-2);
  border-radius: var(--r-p);
  background: var(--surface2);
  color: var(--encre2);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  text-align: center;
}

.cockpit-calme {
  margin: 0;
  font-size: var(--t-appui);
  color: var(--encre2);
}

.cockpit-liste-exceptions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* Une alerte porte une barre latérale en COULEUR PLEINE, et son étiquette
   reprend cette couleur (B18_REGLES_AFFICHAGE.md §1). Le rouge va plus loin —
   fond teinté en plus : c'est la seule alerte qui doit couper la lecture. */
.cockpit-exception {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-left-width: var(--e-1);
  border-radius: var(--r-s);
  background: var(--surface);
}

.cockpit-exception[data-gravite="probleme"] {
  border-left-color: var(--lave);
  background: var(--lave-f);
}

.cockpit-exception[data-gravite="attention"] {
  border-left-color: var(--ambre);
}

.cockpit-etiquette {
  flex: none;
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-p);
  font-size: var(--t-micro);
  font-weight: var(--graisse-caps);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Étiquettes en couleur pleine, jamais en transparence : sur un fond déjà
   teinté, un aplat semi-transparent donne un contraste imprévisible. */
.cockpit-etiquette[data-gravite="probleme"] {
  background: var(--lave);
  color: var(--sur-lave);
}

.cockpit-etiquette[data-gravite="attention"] {
  background: var(--ambre);
  color: var(--sur-ambre);
}

.cockpit-exception-corps {
  flex: 1 1 auto;
  min-width: 0;
}

/* LA COULEUR IDENTIFIE L'ÉVÉNEMENT. Elle ne peut pas passer par la barre
   latérale, qui appartient à la gravité de l'alerte : c'est cette pastille,
   devant le nom, qui dit de quel anniversaire on parle. */
.cockpit-exception-ou {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  color: var(--encre2);
}

.cockpit-exception-ou::before {
  content: "";
  flex: none;
  width: var(--e-2);
  height: var(--e-2);
  border-radius: 50%;
  background: var(--encre3);
}

.cockpit-exception[data-evenement="1"] .cockpit-exception-ou::before { background: var(--ev1); }
.cockpit-exception[data-evenement="2"] .cockpit-exception-ou::before { background: var(--ev2); }
.cockpit-exception[data-evenement="3"] .cockpit-exception-ou::before { background: var(--ev3); }
.cockpit-exception[data-evenement="4"] .cockpit-exception-ou::before { background: var(--ev4); }
.cockpit-exception[data-evenement="5"] .cockpit-exception-ou::before { background: var(--ev5); }

.cockpit-exception-texte {
  margin: var(--e-1) 0 0;
  font-size: var(--t-base);
  color: var(--encre);
}

.cockpit-exception[data-gravite="probleme"] .cockpit-exception-texte {
  font-weight: var(--graisse-appui);
}

.cockpit-exception-precision,
.cockpit-exception-empeche {
  margin: var(--e-1) 0 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

.cockpit-exception-empeche {
  font-style: italic;
}

/* Le bouton reste proportionné à la ligne : un bouton pleine taille dans une
   ligne d'alerte l'écrase (règle des trois dérogations documentées). */
.cockpit-geste {
  flex: none;
  align-self: center;
  min-height: var(--cible-secondaire);
}

.cockpit-attribution {
  margin-top: var(--e-2);
}

/* Les anniversaires nommés par une exception de journée. La pastille de couleur
   dit lequel — c'est la seule chose que la ligne ne peut pas porter dans sa
   bordure, qui appartient à la gravité. */
.cockpit-concernes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  margin-top: var(--e-2);
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* --------------------------------------------------------------------------
   À préparer pour la journée
   -------------------------------------------------------------------------- */

.cockpit-repli {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  width: 100%;
  min-height: var(--cible);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.cockpit-repli-marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  color: var(--teal);
}

/* Le chevron est visible en permanence, pas au survol : « on ne sait pas sur
   lequel on peut cliquer » (Cédric, 14/08 — règles §6). */
.cockpit-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.15s ease;
}

.cockpit-repli[aria-expanded="true"] .cockpit-chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .cockpit-chevron {
    transition: none;
  }
}

/* L'en-tête de la colonne de quantités. */
.cockpit-articles-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: var(--e-3);
  padding: 0 var(--e-3);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--graisse-caps);
  color: var(--encre2);
}

.cockpit-articles-tete + .cockpit-articles {
  margin-top: var(--e-2);
}

.cockpit-articles {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* UNE LISTE, PAS UN TABLEAU. La V1 mettait ici un tableau à largeur minimale,
   qui a fait refaire trois écrans (règles d'affichage §4). */
.cockpit-article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--e-1) var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--trait2);
  border-radius: var(--r-s);
  background: var(--surface);
}

.cockpit-article-nom {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-base);
  color: var(--encre);
}

.cockpit-article-qte {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.cockpit-article-detail {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-3);
  font-size: var(--t-micro);
  color: var(--encre2);
}

.cockpit-part {
  display: flex;
  align-items: center;
  gap: var(--e-1);
}

.cockpit-part::before {
  content: "";
  flex: none;
  width: var(--e-1);
  height: var(--e-1);
  border-radius: 50%;
  background: var(--encre3);
}

.cockpit-part[data-evenement="1"]::before { background: var(--ev1); }
.cockpit-part[data-evenement="2"]::before { background: var(--ev2); }
.cockpit-part[data-evenement="3"]::before { background: var(--ev3); }
.cockpit-part[data-evenement="4"]::before { background: var(--ev4); }
.cockpit-part[data-evenement="5"]::before { background: var(--ev5); }

/* --------------------------------------------------------------------------
   Les colonnes par événement
   -------------------------------------------------------------------------- */

.cockpit-colonnes {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.cockpit-colonne {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.cockpit-colonne-tete {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.cockpit-faits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  font-size: var(--t-appui);
  color: var(--encre);
}

.cockpit-heure {
  font-weight: var(--graisse-appui);
}

.cockpit-formule,
.cockpit-enfants {
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-p);
  background: var(--surface2);
  color: var(--encre2);
  font-size: var(--t-petit);
}

/* Le comptage réel prime sur le devis — et l'écran dit lequel il montre. */
.cockpit-enfants[data-source="comptage"] {
  background: var(--lagon-f);
  color: var(--teal);
  font-weight: var(--graisse-forte);
}

.cockpit-enfants[data-source="inconnu"] {
  font-style: italic;
}

.cockpit-responsable {
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* La marque d'allergie est PERMANENTE : elle reste après le « vu » du bandeau.
   C'est un fait de sécurité, pas une notification à écouler. */
.cockpit-allergie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  padding: var(--e-2);
  border-left: var(--e-1) solid var(--ambre);
  border-radius: var(--r-s);
  background: var(--ambre-f);
  font-size: var(--t-petit);
  color: var(--encre);
}

.cockpit-allergie-mot {
  padding: 0 var(--e-1);
  border-radius: var(--r-p);
  background: var(--ambre);
  color: var(--sur-ambre);
  font-size: var(--t-micro);
  font-weight: var(--graisse-caps);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* L'équipe. Une même personne peut figurer dans deux colonnes du même jour :
   c'est normal, et rien ne le signale (S4.4). */
.cockpit-equipe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
}

.cockpit-membre {
  padding: var(--e-1) var(--e-2);
  border-radius: var(--r-p);
  background: var(--surface2);
  color: var(--encre2);
  font-size: var(--t-petit);
}

/* La pastille du responsable n'a plus de teinte propre : elle encodait un rôle
   par la couleur, et répétait la ligne « Responsable : … » juste au-dessus. */

.cockpit-equipe-vide {
  font-size: var(--t-petit);
  font-style: italic;
  color: var(--encre3);
}

.cockpit-postes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding-top: var(--e-2);
  border-top: 1px solid var(--trait2);
  font-size: var(--t-petit);
  color: var(--encre2);
}

.cockpit-postes-compte {
  font-weight: var(--graisse-forte);
}

/* La marque du poste obligatoire.
   Le mot est une étiquette, le prénom est un prénom : le composant `.badge`
   mettrait les deux en capitales et crierait le nom de la personne. */
.cockpit-poste-marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 2px var(--e-2);
  border-radius: var(--r-p);
  font-size: var(--t-micro);
  white-space: nowrap;
}

.cockpit-poste-mot {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--graisse-caps);
}

.cockpit-poste-qui {
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
}

/* Deux tons seulement. Le vert de confirmation a été retiré le 18/08 : il
   faisait porter un STATUT par la couleur (CLAUDE.md §7), et consommait de la
   couleur pour dire que tout va bien. Un poste tenu est l'état normal, il se
   lit sans être signalé. */
.cockpit-poste-marque[data-ton="probleme"] { background: var(--lave-f); color: var(--lave); }
.cockpit-poste-marque[data-ton="neutre"] { background: var(--surface2); color: var(--encre2); }

.cockpit-progression {
  padding-top: var(--e-2);
  border-top: 1px solid var(--trait2);
}

.cockpit-etapes-titre {
  margin: var(--e-2) 0 var(--e-1);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  color: var(--encre2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cockpit-etapes-titre:first-of-type {
  margin-top: 0;
}

/* Le retard est un vrai problème : son titre a droit au rouge (CLAUDE.md §7). */
.cockpit-etapes-titre[data-etat="probleme"] {
  color: var(--lave);
}

/* Le total, quand toutes les lignes en retard ne sont pas montrées. */
.cockpit-etapes-reste {
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--graisse-normale);
}

/* L'avertissement se lit AVANT les heures qu'il qualifie. En pied de carte,
   personne ne descend — même correction qu'à « Ma journée ». */
.cockpit-provisoire {
  margin: 0 0 var(--e-2);
  font-size: var(--t-micro);
  font-style: italic;
  color: var(--encre3);
}

.cockpit-etapes-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.cockpit-etape {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  font-size: var(--t-base);
  color: var(--encre);
}

.cockpit-etape-heure {
  flex: none;
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
}

/* Le retard est un vrai problème : il a droit au rouge. Il ne se calcule que
   le jour même — voir `prochainesDu` dans le modèle. */
.cockpit-etape[data-etat="probleme"] .cockpit-etape-libelle,
.cockpit-etape-heure[data-etat="probleme"] {
  color: var(--lave);
  font-weight: var(--graisse-appui);
}

.cockpit-etapes-vide {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

.cockpit-ouvrir {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Mobile — 820 px

   Une grille devient une LISTE, jamais une petite grille. Le Cockpit est un
   écran de poste bureau, mais il s'ouvre depuis un téléphone quand quelque
   chose cloche : il doit rester lisible, pas seulement ne pas déborder.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Les deux replis du mobile

   Le bouton n'existe PAS sur poste bureau, et les blocs repliés y restent
   ouverts : la place ne manque pas, et comparer les anniversaires côte à côte
   est justement ce que l'écran sert à faire. Tout ce qui suit ne s'active que
   sous le seuil.
   -------------------------------------------------------------------------- */

.cockpit-plus {
  display: none;
}

@media (max-width: 820px) {
  .cockpit-colonnes {
    grid-template-columns: 1fr;
  }

  .cockpit-plus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    width: 100%;
    min-height: var(--cible);
    margin-top: var(--e-2);
    padding: 0 var(--e-2);
    border: 1px solid var(--trait);
    border-radius: var(--r-s);
    background: var(--surface);
    color: var(--teal);
    font-family: inherit;
    font-size: var(--t-petit);
    font-weight: var(--graisse-forte);
    text-align: left;
    cursor: pointer;
  }

  .cockpit-plus[aria-expanded="true"] .cockpit-chevron {
    transform: rotate(180deg);
  }

  /* Les points d'attention du bandeau, et le détail d'une colonne. */
  .cockpit-liste-exceptions[data-secondaires="oui"][data-replie="oui"],
  .cockpit-colonne-detail[data-replie="oui"] {
    display: none;
  }

  .cockpit-liste-exceptions[data-secondaires="oui"] {
    margin-top: var(--e-2);
  }

  /* L'alerte passe en deux temps : le texte, puis le geste en pleine largeur.
     Côte à côte à 375 px, le bouton tombait sous une largeur touchable. */
  .cockpit-exception {
    flex-wrap: wrap;
  }

  .cockpit-geste {
    flex: 1 1 100%;
    align-self: stretch;
    min-height: var(--cible);
  }

  .cockpit-article {
    grid-template-columns: 1fr auto;
  }
}

/* Le comptage saisi depuis le débrief — même donnée que la fiche dossier. */
.db-comptage { margin-bottom: var(--e-3); }

.db-nombre {
  /* Assez large pour que le mot « adultes » du placeholder tienne : à 9 ch il
     s'affichait « adult », ce qui laisse deviner autre chose. */
  width: 11ch;
  min-height: var(--cible);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  padding: 0 var(--e-3);
  /* 16 px minimum : en dessous, Safari iOS zoome au toucher. */
  font-size: 16px;
  font-family: inherit;
  background: var(--surface);
  color: var(--encre);
}

.db-message:empty { display: none; }

.db-message {
  margin: var(--e-2) 0 0;
  font-size: var(--t-petit);
  color: var(--lave);
}

/* --------------------------------------------------------------------------
   Le débrief : liste de portes sur mobile

   Quatre familles dépliées font près de 5 000 px de haut sur un téléphone,
   et le débrief se remplit debout, sur place. Sous le seuil, chaque famille
   devient une ligne qui s'ouvre — motif « liste de portes » du CLAUDE.md §7.
   -------------------------------------------------------------------------- */

button.db-famille-tete {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  min-height: var(--cible);
  cursor: pointer;
  font: inherit;
  color: inherit;
  align-items: center;
  flex-wrap: wrap;
}

button.db-famille-tete:hover { background: var(--surface2); }

button.db-famille-tete:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.db-reste {
  margin-left: auto;
  font-size: var(--t-petit);
  color: var(--ambre);
}

button.db-famille-tete[aria-expanded="true"] .db-reste { color: var(--encre2); }

.db-chevron {
  flex: none;
  color: var(--encre3);
  font-size: var(--t-petit);
}

/* Les champs du comptage portent leur libellé : un « 10 » à côté d'un champ
   « adultes » ne dit plus ce qu'il compte une fois rempli. */
.db-saisie {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-3);
}

.db-champ-nombre {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-champ-lbl {
  font-size: var(--t-petit);
  color: var(--encre2);
  white-space: nowrap;
}

.db-annuler {
  min-height: var(--cible);
  background: none;
  border: 0;
  color: var(--encre2);
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}