/* ==========================================================================
   B18 V2 — La fiche dossier (lot 2)

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

   RÈGLE STRUCTURANTE DE CET ÉCRAN
   La couleur identifie l'ÉVÉNEMENT — filet sur l'en-tête, teinte de fond sur le
   module d'identité, et nulle part ailleurs. Tout le reste dit son état par la
   FORME et par le mot : un
   repère de pastille, une barre remplie, un texte. Conséquence à vérifier avant
   toute retouche : cet écran reste lisible en noir et blanc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Retour vers le tableau de bord

   Le bouton retour du navigateur existe, mais il n'existe que sur téléphone :
   sur poste bureau, une page ouverte depuis une carte n'a aucune sortie
   visible. D'où ce lien, qui ne remplace pas l'historique — il le double.
   -------------------------------------------------------------------------- */

.retour {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  margin-bottom: var(--e-3);
  padding: 0 var(--e-3) 0 var(--e-2);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre2);
  font-size: var(--t-appui);
  cursor: pointer;
}

.retour:hover {
  background: var(--surface2);
  color: var(--encre);
}

.retour-fleche {
  font-size: var(--t-titre-s);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   En-tête du dossier
   -------------------------------------------------------------------------- */

/* LA BARRE D'ONGLETS NE TOUCHE PAS L'EN-TÊTE.
 *
 * « Décale légèrement la barre de menu avec les 3 onglets de celui du dessous,
 * il est tout collé » — Stéphanie, 31/08. La barre `.so` n'a pas de marge : sur
 * les autres écrans elle est suivie d'un bloc espacé, ici elle était suivie
 * d'une carte au filet de couleur, qui commençait à un pixel de la pilule
 * active. La marge est posée sur le voisinage, pas sur `.so` — les autres
 * écrans n'ont rien demandé. */
.so + .dossier-tete {
  margin-top: var(--e-3);
}

.dossier-tete {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--trait);
  /* Le filet de couleur d'événement, comme sur les cartes du tableau de bord :
     jamais un fond plein, qui donnerait une page de couleur. */
  border-top-width: 3px;
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--ombre-basse);
  margin-bottom: var(--e-4);
}

.dossier-tete[data-evenement="1"] { border-top-color: var(--ev1); }
.dossier-tete[data-evenement="2"] { border-top-color: var(--ev2); }
.dossier-tete[data-evenement="3"] { border-top-color: var(--ev3); }
.dossier-tete[data-evenement="4"] { border-top-color: var(--ev4); }
.dossier-tete[data-evenement="5"] { border-top-color: var(--ev5); }

/* --------------------------------------------------------------------------
   Le module d'identité

   « La ligne de la date jusqu'au nombre d'enfants est petite alors que ce sont
   des infos importantes, ça pourrait être un module seul d'une couleur
   différente » — Stéphanie, 31/08/2026.

   C'était une ligne de mentions : gris d'appui, points de séparation, aucun
   libellé. Ce sont maintenant quatre cases libellées sur fond teinté.

   LA TEINTE EST CELLE DE L'ÉVÉNEMENT, et le §7 n'en autorise aucune autre — la
   couleur identifie l'événement, jamais son statut. C'est aussi son usage :
   cinq anniversaires peuvent coexister le même jour, et deux fiches ouvertes
   côte à côte se distinguent au premier coup d'œil.
   -------------------------------------------------------------------------- */

.dossier-identite {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-s);
  /* Le repli quand le rang d'événement est inconnu : la teinte neutre, jamais
     l'absence de fond, qui ferait un module invisible. */
  background: var(--surface2);
}

.dossier-identite[data-evenement="1"] { background: var(--ev1f); }
.dossier-identite[data-evenement="2"] { background: var(--ev2f); }
.dossier-identite[data-evenement="3"] { background: var(--ev3f); }
.dossier-identite[data-evenement="4"] { background: var(--ev4f); }
.dossier-identite[data-evenement="5"] { background: var(--ev5f); }

.identite-case {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

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

/* LA VALEUR EST LA RAISON D'ÊTRE DU MODULE : elle se lit à la taille d'un
   titre, pas à celle d'une mention. */
.identite-val {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  line-height: 1.25;
}

.identite-precision {
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* --------------------------------------------------------------------------
   Indicateurs

   Des cartes individuelles côte à côte, jamais un grand bloc pleine largeur
   qui empile tout — règle standing KAIROZ sur les vues aérées.
   -------------------------------------------------------------------------- */

/* QUATRE CARTES, ET ELLES SONT COMPACTES.
 *
 * « Je trouve ces 4 modules trop gros » — Stéphanie, 31/08. Ils occupaient
 * autant de hauteur qu'un bloc de contenu pour porter quatre chiffres. Le
 * chiffre reste lisible ; c'est le vide autour qui a maigri — moins de marge
 * intérieure, moins d'écart entre les lignes, et une largeur minimale plus
 * basse pour que quatre cartes tiennent sur un rang plus serré. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e-2);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface2);
}

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

.kpi-valeur {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.kpi-precision {
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* LE SUFFIXE D'INCERTITUDE DU §4, ET IL DOIT SE LIRE COMME UN MARQUEUR.
 *
 * Collé au texte, il donnait « Acompte reçu? » — une question, pas une
 * réserve. La marque est donc détachée et posée dans une pastille : le statut
 * reste affirmé, et le fait qu'il n'est pas vérifié se voit du premier coup
 * d'œil. C'est exactement ce que la V1 fait déjà sur ses pastilles de
 * paiement ; ici la valeur n'est pas dans une `.pastille`, d'où cette règle
 * propre à l'indicateur. */
.kpi-valeur .incertain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: var(--e-2);
  border-radius: 50%;
  background: var(--ambre-f);
  color: var(--ambre);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  vertical-align: middle;
  cursor: help;
}

/* Le ton colore le TRAIT DE GAUCHE, pas le fond : quatre cartes en aplat
   teinté côte à côte donneraient une rangée de couleur, et la couleur est
   réservée à l'identification de l'événement. */
.kpi[data-ton="ok"] { border-left: 3px solid var(--pousse); }
.kpi[data-ton="attention"] { border-left: 3px solid var(--ambre); }
/* Le rouge, et lui seul, pour un vrai problème : retard, effectif
   insuffisant. Pas pour un chevauchement d'animateurs. */
.kpi[data-ton="probleme"] { border-left: 3px solid var(--lave); }
.kpi[data-ton="probleme"] .kpi-valeur { color: var(--lave); }

/* --------------------------------------------------------------------------
   Puce de compte sur un sous-onglet

   Ce qui demande une décision se voit sans avoir à ouvrir l'onglet.
   -------------------------------------------------------------------------- */

.so-puce {
  display: inline-block;
  min-width: 18px;
  margin-left: var(--e-2);
  padding: 0 5px;
  border-radius: var(--r-p);
  background: var(--lave-f);
  color: var(--lave);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Corps et blocs
   -------------------------------------------------------------------------- */

.dossier-corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  margin-top: var(--e-4);
}

.bloc {
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: var(--ombre-basse);
}

.bloc-titre {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  margin-bottom: var(--e-3);
}

/* Un bloc qui n'a pas lieu d'être pour ce niveau d'accès : il n'occupe pas de
   place et ne laisse pas de trou dans la mise en page. */
.sans-objet {
  display: none;
}

.note {
  font-size: var(--t-petit);
  color: var(--encre2);
  line-height: 1.5;
}

.bloc-titre + .note {
  margin-top: calc(var(--e-3) * -1);
  margin-bottom: var(--e-3);
}

.dossier-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
  align-items: start;
}

/* Une colonne qui empile plusieurs blocs. Le `gap` reprend celui des blocs
   entre eux : rien ne doit distinguer deux blocs empilés dans une colonne de
   deux blocs empilés dans la page. */
.dossier-pile {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

/* --------------------------------------------------------------------------
   Les cinq jalons
   -------------------------------------------------------------------------- */

/* LA FRISE COMPTE QUATRE JALONS.
 *
 * Il y en avait cinq : le premier, « Signature », ne portait pas de barre mais
 * trois constats, et faisait deux à trois fois la hauteur des autres. Retiré
 * le 29/08/2026 — sa seule information utile, la date de signature, est passée
 * dans l'en-tête du dossier. Quatre cartes datées, quatre hauteurs égales. */
.jalons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-3);
  align-items: start;
}

.jalon {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface2);
}

/* L'ÉTAT PASSE PAR LA FORME, PAS PAR LA COULEUR SEULE.
   Trait épais à gauche pour ce qui demande une action, trait fin pour le
   reste. Un écran en noir et blanc garde l'information. */
.jalon[data-etat="fait"] { border-left: 3px solid var(--pousse); }
.jalon[data-etat="encours"] { border-left: 3px solid var(--teal); }
.jalon[data-etat="probleme"] { border-left: 3px solid var(--lave); }
.jalon[data-etat="afaire"] { border-left: 3px solid var(--encre3); }
.jalon[data-etat="avenir"] { border-left: 3px solid var(--trait); }

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

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

/* Le jalon sans date porte son « quand » en dessous, en clair : « à la
   signature du devis » n'est pas une date, ça ne se met pas en surtitre
   capitales à la place d'une. */
.jalon-quand-bas {
  font-size: var(--t-petit);
  color: var(--encre2);
}

.jalon-avancement {
  font-size: var(--t-petit);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
}

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

/* --------------------------------------------------------------------------
   Montant du dossier
   -------------------------------------------------------------------------- */

.argent-total {
  font-size: var(--t-titre-l);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}

/* Un montant qu'on ne connaît pas ne se déguise pas en montant : il change de
   taille, de couleur et de mot (CLAUDE.md §4). */
.argent-total[data-niveau="a-definir"],
.argent-total[data-niveau="indisponible"] {
  font-size: var(--t-base);
  color: var(--ambre);
}

.argent-total[data-niveau="attente"] {
  font-size: var(--t-base);
  color: var(--encre3);
  font-style: italic;
  font-weight: var(--graisse-normale);
}

.lignes-devis {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin-top: var(--e-3);
}

.lignes-devis li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2);
  padding: var(--e-2) 0;
  border-top: 1px solid var(--trait2);
  font-size: var(--t-appui);
}

.ligne-nom {
  flex: 1;
  min-width: 12ch;
  color: var(--encre);
}

.ligne-quantite {
  color: var(--encre2);
  font-size: var(--t-petit);
}

.ligne-montant {
  color: var(--encre);
  font-variant-numeric: tabular-nums;
  font-weight: var(--graisse-appui);
}

.ligne-montant[data-nature="inconnu"] {
  color: var(--ambre);
  font-weight: var(--graisse-normale);
  font-size: var(--t-petit);
}

.ligne-detail {
  flex-basis: 100%;
  color: var(--encre2);
  font-size: var(--t-micro);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Fil d'activité
   -------------------------------------------------------------------------- */

.fil {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  list-style: none;
}

.fil li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: var(--e-4);
  border-left: 2px solid var(--trait);
}

.fil li[data-gravite="probleme"] {
  border-left-color: var(--lave);
}

.fil-titre {
  font-size: var(--t-appui);
  color: var(--encre);
}

.fil-quand {
  font-size: var(--t-micro);
  color: var(--encre2);
}

.fil-texte {
  font-size: var(--t-petit);
  color: var(--encre2);
  line-height: 1.5;
  /* Du texte libre : les retours à la ligne de qui l'a écrit sont conservés,
     et un mot trop long ne fait pas déborder la carte. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Ce qu'une personne a écrit ne se lit pas comme ce que le serveur a constaté.
   Le trait de gauche passe à la couleur de marque et le texte à l'encre
   principale : c'est une parole, pas un événement automatique. */
.fil li[data-source="commentaire"] {
  border-left-color: var(--lagon);
}

.fil li[data-source="commentaire"] .fil-texte {
  color: var(--encre);
}

/* Le commentaire parti mais pas encore confirmé. Il est déjà là — c'est le
   point de l'écriture optimiste — et il dit qu'il n'est pas encore acquis. */
.fil li[data-envol="oui"] {
  opacity: 0.6;
}

/* 44 px, PAS 36, ET C'EST LE PIRE ENDROIT OÙ TRICHER.
 *
 * Ce bouton était à `--cible-secondaire` (36 px) avec un texte de 10,5 px.
 * B18_REGLES_AFFICHAGE.md §2 admet trois dérogations au plancher de 44 px,
 * nommément énumérées ; celle-ci en aurait été une quatrième, non documentée,
 * sur la SEULE action destructive de l'écran — suppression réelle, sans
 * corbeille, sans confirmation. Un doigt qui rate une cible de 36 px sur un
 * téléphone, ici, efface le compte rendu de quelqu'un.
 *
 * Le contrôle mobile ne l'a pas vu parce qu'il ne mesurait que la coquille :
 * c'est le scénario du §14 — la bordure du bouton « Se déconnecter » à
 * 1,32:1 — reproduit deux jours plus tard, au composant d'à côté. */
.fil-retirer {
  align-self: flex-start;
  min-height: var(--cible);
  margin-top: var(--e-1);
  padding: 0 var(--e-2);
  border: 0;
  background: transparent;
  color: var(--encre2);
  font-size: var(--t-petit);
  text-decoration: underline;
  cursor: pointer;
}

.fil-retirer:hover {
  color: var(--lave);
}

/* --------------------------------------------------------------------------
   Saisie d'un commentaire

   La seule zone de texte libre de l'application. Sa consigne est dans le
   champ, pas dans une page d'aide : la minimisation du §6 protège les champs
   qu'on maîtrise, et ici on ne maîtrise que la consigne.
   -------------------------------------------------------------------------- */

.commentaire-saisie {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}

.commentaire-saisie textarea {
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  /* 16 px minimum : en dessous, Safari iOS zoome tout seul au toucher. */
  font-size: var(--t-champ);
  line-height: 1.5;
  resize: vertical;
}

.commentaire-saisie textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.commentaire-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.commentaire-pied .note {
  flex: 1;
  min-width: 20ch;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Tâches
   -------------------------------------------------------------------------- */

.taches-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  flex-wrap: wrap;
}

.taches-compte {
  font-size: var(--t-petit);
  color: var(--encre2);
  font-variant-numeric: tabular-nums;
}

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

/* La ligne entière est cliquable, pas la seule case : une case de 16 px n'est
   pas une cible atteignable debout, à une main. `.case` porte déjà la hauteur
   de 44 px — on ne redéfinit ici que ce qui est propre à une tâche. */
.tache {
  flex-wrap: wrap;
  align-items: baseline;
  padding-top: var(--e-2);
  padding-bottom: var(--e-2);
  border-top: 1px solid var(--trait2);
  border-radius: 0;
}

.tache input {
  align-self: center;
}

.tache-libelle {
  flex: 1;
  min-width: 14ch;
  align-self: center;
}

/* La précision passe sous le libellé, alignée sur lui — jamais sous la case.
   Le retrait vaut la largeur de la case plus son écart : les deux valeurs sont
   celles de `.case input` et de son `gap`, dans ecrans.css. */
.tache-precision {
  flex-basis: 100%;
  padding-left: calc(20px + var(--e-3));
  font-size: var(--t-micro);
  line-height: 1.45;
  color: var(--encre2);
}

/* La marque d'état de fin de ligne. Elle reste sur la MÊME ligne que le
   libellé, et elle porte son sens par le mot autant que par la teinte — en noir
   et blanc, « en retard » se lit encore.

   Un retard est un vrai problème : c'est l'un des trois cas où le rouge est
   autorisé (CLAUDE.md §7). Les deux autres états n'y ont pas droit. */
.tache-marque {
  flex: none;
  align-self: center;
  padding: 2px var(--e-2);
  border-radius: var(--r-p);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  white-space: nowrap;
}

.tache-marque[data-etat="probleme"] {
  background: var(--lave-f);
  color: var(--lave);
  cursor: help;
}

.tache-marque[data-etat="fait"] {
  background: var(--pousse-f);
  color: var(--pousse);
}

.tache-marque[data-etat="afaire"] {
  background: var(--surface2);
  color: var(--encre2);
}

/* Le repère d'une tâche dérivée occupe EXACTEMENT la place d'une case à cocher.
   C'est ce qui aligne les deux sortes de lignes sur une seule verticale. Il ne
   ressemble pas à une case pour autant : rond plein ou losange, jamais un carré
   qu'on aurait envie de cliquer. */
.tache-repere {
  width: 20px;
  height: 20px;
  flex: none;
  align-self: center;
  position: relative;
}

.tache-repere::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
}

.tache-repere[data-etat="fait"]::before {
  border-radius: 50%;
  background: var(--pousse);
}

.tache-repere[data-etat="afaire"]::before {
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--encre3);
}

.tache-repere[data-etat="probleme"]::before {
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px var(--lave);
}

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

/* Une tâche dérivée n'a pas de case : elle constate. Tout le reste — retrait,
   hauteur, écarts — est identique à une tâche cochable, sinon la liste montre
   deux verticales là où elle n'en demande qu'une. */
.tache-derivee {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: var(--e-2);
  margin: 0 calc(var(--e-2) * -1);
  border-top: 1px solid var(--trait2);
  font-size: var(--t-appui);
  color: var(--encre);
}

/* --------------------------------------------------------------------------
   Équipe et postes
   -------------------------------------------------------------------------- */

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

.personnes li,
.postes 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;
  border-top: 1px solid var(--trait2);
  font-size: var(--t-appui);
}

.personne-role {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: var(--graisse-forte);
  color: var(--encre2);
  min-width: 9ch;
}

.personne-nom {
  flex: 1;
  color: var(--encre);
  font-weight: var(--graisse-appui);
}

.personne-metier {
  color: var(--encre2);
  font-size: var(--t-petit);
}

.poste-libelle {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: 1;
  min-width: 16ch;
  color: var(--encre);
}

.poste-titulaire {
  color: var(--encre2);
}

/* Le seul poste dont l'absence est un vrai problème. */
.postes li[data-etat="probleme"] {
  border-left: 3px solid var(--lave);
  padding-left: var(--e-2);
  margin-left: calc(var(--e-2) * -1);
}

.postes li[data-etat="probleme"] .poste-titulaire {
  color: var(--lave);
  font-weight: var(--graisse-appui);
}

.poste-choix {
  min-height: var(--cible);
  max-width: 100%;
  padding: 0 var(--e-3);
  /* --trait-champ, pas --trait : une liste déroulante n'a que sa bordure pour
     dire où l'on peut agir. C'est un élément d'interface porteur de sens au
     sens de WCAG 1.4.11, seuil 3:1 (B18_REGLES_AFFICHAGE.md §2). */
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  /* 16 px minimum : en dessous, Safari iOS zoome tout seul au toucher. */
  font-size: var(--t-champ);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Comptage et supplément
   -------------------------------------------------------------------------- */

.comptage,
.formulaire-famille {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: flex-end;
}

.champ {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  min-width: 150px;
  flex: 1;
}

/* UN CHAMP DIT CE QU'ON ATTEND DE LUI PAR SA TAILLE.
 *
 * Les deux champs du comptage faisaient 537 px de large sur bureau, et toute
 * la largeur sur téléphone, pour recevoir un nombre à un ou deux chiffres. Ce
 * n'est pas seulement disgracieux : une case longue appelle une phrase.
 *
 * MAIS C'EST LA CASE QUI RÉTRÉCIT, PAS LE BLOC.
 *
 * La largeur de 9 ch était posée sur le bloc entier, libellé compris. Le
 * libellé, plus long et en `nowrap`, débordait alors sur son voisin :
 * « Enfants présentsAdultes présents » sur une seule ligne, les deux mots
 * collés. Constaté par Stéphanie le 29/08.
 *
 * Le bloc prend donc la largeur de son libellé, et c'est la case qui fait
 * 9 ch. */
.comptage .champ {
  flex: none;
  min-width: 0;
  width: auto;
}

.comptage .champ label {
  white-space: nowrap;
}

.comptage .champ input {
  width: 9ch;
}

.champ label {
  font-size: var(--t-petit);
  color: var(--encre2);
}

.champ input {
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-size: var(--t-champ);
}

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

.comptage-actions,
.formulaire-actions {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-basis: 100%;
}

.lien-discret {
  min-height: var(--cible);
  padding: 0 var(--e-2);
  border: 0;
  background: transparent;
  color: var(--encre2);
  font-size: var(--t-appui);
  text-decoration: underline;
  cursor: pointer;
}

.supplement-compte {
  font-size: var(--t-appui);
  color: var(--encre2);
  margin-bottom: var(--e-3);
}

.supplement {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-4);
  padding: var(--e-3);
  border-left: 3px solid var(--ambre);
  border-radius: var(--r-s);
  background: var(--ambre-f);
}

.supplement-ecart {
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.supplement-montant {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}

/* Un supplément dont on ignore le prix : le nombre d'enfants reste affiché,
   le montant dit qu'il manque. Jamais « 0 € ». */
.supplement-montant[data-nature="a-definir"] {
  font-size: var(--t-appui);
  font-weight: var(--graisse-normale);
  color: var(--ambre);
}

/* --------------------------------------------------------------------------
   Fiche famille
   -------------------------------------------------------------------------- */

.fiche {
  display: grid;
  grid-template-columns: minmax(9ch, max-content) 1fr;
  gap: var(--e-2) var(--e-4);
  font-size: var(--t-appui);
  margin-bottom: var(--e-4);
}

.fiche dt {
  color: var(--encre2);
  font-size: var(--t-petit);
}

/* `margin-inline-start: 40px` est le style par défaut du navigateur sur `dd`.
   Sur bureau il ne se voyait pas — la grille place la valeur dans sa propre
   colonne. Sur téléphone, où les deux se retrouvent l'une sous l'autre, la
   valeur apparaissait indentée de 40 px sous son libellé, alignée sur rien. */
.fiche dd {
  margin: 0;
  color: var(--encre);
}

/* « Non renseigné » n'est pas une valeur, et ne doit pas se lire comme telle. */
.fiche dd[data-nature="absent"] {
  color: var(--encre3);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Le titre d'une carte du tableau de bord, devenu bouton d'ouverture
   -------------------------------------------------------------------------- */

.lien-dossier {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--encre);
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

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

/* --------------------------------------------------------------------------
   Seuil mobile : 820 px (--seuil-mobile)

   Responsive par TRANSFORMATION, pas par compression : les deux colonnes
   deviennent une pile, les jalons une liste. Jamais une petite grille.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .dossier-colonnes {
    grid-template-columns: 1fr;
  }

  .jalons {
    grid-template-columns: 1fr;
  }

  .kpis {
    grid-template-columns: 1fr 1fr;
  }

  /* Quatre cases empilées font deux cents pixels de haut et mangent le premier
     écran. Elles passent donc à deux colonnes — sauf « Quand », qui garde la
     largeur entière : elle porte la date écrite en toutes lettres et le bouton
     de correction, qui ne tiennent pas sur 150 px. */
  .dossier-identite {
    grid-template-columns: 1fr 1fr;
  }

  .identite-case:first-child {
    grid-column: 1 / -1;
  }

  /* Un poste et sa liste déroulante ne tiennent pas sur une ligne de 375 px :
     ils se superposent plutôt que de se comprimer. */
  .postes li {
    flex-direction: column;
    align-items: stretch;
  }

  /* L'action unique d'un écran de saisie tactile prend toute la largeur : sur
     375 px, un bouton à mi-largeur aligné à gauche se cherche. */
  .comptage-actions .btn-secondaire,
  .formulaire-actions .btn-secondaire {
    flex: 1;
  }

  .poste-choix {
    width: 100%;
  }

  .fiche {
    grid-template-columns: 1fr;
    gap: var(--e-1) 0;
  }

  .fiche dd {
    margin-bottom: var(--e-2);
  }
}

/* --------------------------------------------------------------------------
   La vérification du comptage contre le devis

   LE SEUL ENDROIT OÙ LA COULEUR PORTE UN STATUT, ET C'EST VOULU.
   Ce bloc ne dit rien d'autre que « ça concorde ou non » : le vert et le rouge
   y sont la réponse. Le mot est écrit à côté — un écran en noir et blanc, ou
   un daltonien, gardent l'information (demande de Stéphanie du 29/08).
   -------------------------------------------------------------------------- */

.verif-comptage {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--r-s);
  margin-bottom: var(--e-3);
}

.verif-comptage[data-verif="conforme"] {
  background: var(--pousse-f);
  border-color: var(--pousse);
}

.verif-comptage[data-verif="ecart"] {
  background: var(--lave-f);
  border-color: var(--lave);
}

.verif-titre {
  font-size: var(--t-base);
  font-weight: var(--graisse-forte);
}

.verif-comptage[data-verif="conforme"] .verif-titre { color: var(--pousse); }
.verif-comptage[data-verif="ecart"] .verif-titre { color: var(--lave); }

.verif-detail {
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* Le comptage lu, plus saisi : il vient du débrief (décision du 29/08). */
.comptage-lu {
  display: flex;
  gap: var(--e-5);
  flex-wrap: wrap;
  margin-bottom: var(--e-2);
}

.comptage-lu-bloc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.comptage-lu-lbl {
  font-size: var(--t-petit);
  color: var(--encre2);
}

.comptage-lu-val {
  font-size: var(--t-titre);
  font-weight: var(--graisse-forte);
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   Le panneau « Modifier la date ou l'horaire »

   « Les formats des cases à modifier (date, heure, enregistrer, annuler) sont
   très carrés alors que le reste est arrondi » — Stéphanie, 31/08.

   Elle décrivait une absence : ce panneau n'avait AUCUNE règle, à l'exception
   de la largeur du champ de date. Champs et boutons tombaient donc sur
   l'apparence par défaut du navigateur — angles droits, bordure grise, police
   du système — au milieu d'un écran entièrement arrondi. C'est le défaut que
   `B18_REGLES_AFFICHAGE.md` §2 décrit pour la V1, reproduit ici.
   -------------------------------------------------------------------------- */

.horaire-fix {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}

.horaire-fix-champ {
  min-height: var(--cible-secondaire);
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font-family: inherit;
  font-size: var(--t-appui);
}

.horaire-fix-champ:hover { border-color: var(--encre3); }

.horaire-fix-champ:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* Le champ de date est plus etroit que le champ d'horaire : une date tient en
   dix caracteres, l'horaire en dix-sept. */
.horaire-fix-date { width: 10em; flex: none; }

.horaire-fix-choix { padding-right: var(--e-2); }

.horaire-fix-libre[hidden] { display: none; }

/* Les deux boutons reprennent la forme des boutons de l'application :
   l'action principale pleine, la sortie en contour. */
.horaire-fix-ouvrir,
.horaire-fix-ok,
.horaire-fix-annuler {
  min-height: var(--cible-secondaire);
  padding: 0 var(--e-3);
  border-radius: var(--r-s);
  font-family: inherit;
  font-size: var(--t-appui);
  cursor: pointer;
}

.horaire-fix-ouvrir,
.horaire-fix-annuler {
  border: 1px solid var(--trait);
  background: var(--surface2);
  color: var(--encre2);
}

.horaire-fix-ouvrir:hover,
.horaire-fix-annuler:hover {
  border-color: var(--lagon);
  color: var(--encre);
}

.horaire-fix-ok {
  border: 1px solid var(--teal);
  background: var(--teal);
  color: var(--sur-teal);
  font-weight: var(--graisse-appui);
}

.horaire-fix-msg {
  flex-basis: 100%;
  font-size: var(--t-petit);
  color: var(--lave);
}