/* ---------------------------------------------------------------
   Feuille EXCLUSIVE du couloir « coach » (brief Olivier du 22/09/2026).
   Un seul couloir écrit ici : pas de conflit d'intégration.

   Règle tenue partout ci-dessous : Olivier travaille sur son téléphone,
   au bord du terrain. Toute cible tapable fait au moins 44 px de haut, et
   aucun bloc ne pousse la page au-delà de 375 px de large.
   --------------------------------------------------------------- */

/* ============ #31 · le « ⋯ » d'un inscrit (fiche séance) ============
   Il vient APRÈS les deux boutons de pointage, sur une ligne déjà chargée :
   étroit (36 px) mais haut de 44 px, et `flex-shrink:0` pour qu'il ne soit
   jamais écrasé par un nom long — c'est le nom qui passe à la ligne. */
.participant .p-menu {
  flex-shrink: 0; width: 36px; min-height: 44px; margin-left: -4px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--muted); font-size: 1.1rem; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.participant .p-menu:active { background: var(--card-soft); }

/* ============ #32 · états d'une séance passée ============
   `.badge-type` ne connaît que les types de journée (high/low/modere/repos) :
   les statuts de séance ont leurs propres teintes, ici et nulle part ailleurs. */
.badge-type.sta-ok { background: var(--vert-soft); color: var(--vert); }
.badge-type.sta-absente { background: #fdecec; color: #d43a3a; }
.badge-type.sta-annulee { background: var(--line); color: var(--muted); }

/* ============ #32 · « Ses séances », datées ============ */
.histo-seances { margin-top: 10px; }
.histo-seance {
  background: var(--card-soft); border: 1px solid var(--line); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 8px;
}
.histo-seance .histo-haut { display: flex; align-items: center; gap: 10px; }
/* Le badge d'état porte `margin-left:auto` (esya.css) : la date occupe le reste
   de la ligne et passe à la ligne plutôt que d'être tronquée. */
.histo-seance .histo-date { font-weight: 800; font-size: 0.92rem; line-height: 1.25;
  overflow-wrap: anywhere; min-width: 0; }
.histo-seance .histo-sous { color: var(--muted); font-size: 0.79rem; font-weight: 600;
  margin-top: 3px; line-height: 1.35; overflow-wrap: anywhere; }

/* ============ #6 · « Ses ressentis » ============
   Optimisé pour la relecture d'une semaine : la date en gras, le texte entier
   (elle écrit court), et les non-lus repérables sans lire une ligne. */
.ressentis-liste { margin-top: 10px; }
.ressenti {
  background: var(--card-soft); border: 1px solid var(--line); border-radius: 16px;
  padding: 11px 13px; margin-bottom: 8px;
}
.ressenti.non-lu { border-color: var(--accent); background: var(--accent-soft); }
.ressenti .ressenti-entete { display: flex; align-items: center; gap: 8px; }
.ressenti .ressenti-date { font-weight: 800; font-size: 0.9rem; line-height: 1.25;
  overflow-wrap: anywhere; min-width: 0; }
.ressenti .ressenti-entete .pastille-nb { margin-left: auto; height: auto; min-height: 20px;
  padding: 2px 9px; text-transform: none; letter-spacing: 0; }
.ressenti .ressenti-texte { margin-top: 5px; font-size: 0.92rem; line-height: 1.45;
  overflow-wrap: anywhere; }
/* Bouton pleine largeur dans une carte déjà étroite : on le ramène à la taille
   d'une action secondaire, sans descendre sous 44 px de haut. */
.ressenti .btn-ressenti-lu {
  width: auto; margin-top: 9px; min-height: 44px; padding: 10px 16px;
  font-size: 0.82rem;
}

/* ============ #8 · l'éditeur de la méthode ESYA ============
   Même vocabulaire visuel que l'éditeur de phases (.phase-ligne / .phase-btn) :
   c'est le même geste, il ne doit pas s'apprendre deux fois. */
.mth-carte .phases-liste { margin-top: 12px; }
/* Un point de méthode est une PHRASE (« enlever le soda des placards ») : le
   champ prend toute la largeur laissée par les trois boutons, et le texte y
   reste lisible en 375 px. */
.mth-point .phase-nom { font-weight: 500; font-size: 0.9rem; }
.mth-carte .zone-danger { margin-top: 18px; padding-top: 14px; }
/* `.btn-danger` est pleine largeur ailleurs : ici il reste dans la carte. */
.mth-carte .zone-danger .btn-danger { min-height: 44px; }

/* ============ #18 · l'écran du bandeau ============
   La note qui explique la date de fin est suivie d'un autre champ : sans cette
   respiration, « tu n'as rien à éteindre » colle à l'étiquette « LIEN ». */
.pr-note { margin-bottom: 16px; }

/* ============ #33 · lire ses phases sur un téléphone ============
   Constaté à la capture, en 375 px : la ligne d'une phase tient sur UNE ligne
   (rang + nom + durée + ↑ ↓ ✕), et il ne restait au nom que ~55 px — « Adaptation »
   s'affichait « Ada », « Sèche » « Sècl ». Olivier ne peut pas choisir la phase
   qu'il veut échanger s'il ne peut pas la lire. On laisse donc la ligne PASSER À
   LA LIGNE : le nom garde toute la largeur, la durée et les trois boutons
   descendent en dessous. Aucun bouton ne rétrécit — les cibles restent entières.
   Vaut aussi pour les points de la méthode, qui sont des phrases. */
.phase-ligne { flex-wrap: wrap; row-gap: 8px; }
.phase-ligne .phase-nom { flex: 1 1 150px; min-width: 150px; }
/* Un POINT de méthode est une phrase entière (« enlever le soda, l'alcool, les
   céréales et le chocolat des placards ») : il prend la ligne pour lui, et son
   numéro repart avec les trois boutons en dessous. Sans `order`, le champ large
   poussait le seul ✕ sur une troisième ligne — les trois commandes d'une même
   ligne doivent rester ensemble. */
.mth-point .phase-nom { order: -1; flex: 1 1 100%; min-width: 0; }

/* ============ ARBITRAGE #20 · l'interrupteur du rappel « mensurations » ============
   `.chip-etat` (admin.css) n'a pas de variante « allumé » : les trois existantes
   disent toutes un incident (annulée, rouverte, en pause). Celle-ci dit qu'un
   message PART — elle est donc verte, comme les états réussis de l'agenda, et
   ne se confond pas avec `.neutre`, qui reste la couleur de « rien ne part ».
   Elle vit ici parce que ce couloir n'écrit pas dans admin.css. */
.chip-etat.allume { background: var(--vert-soft); color: var(--vert); }

/* Les trois réglages du rappel sont lus l'un après l'autre par quelqu'un debout,
   téléphone en main : la case et les deux champs restent des cibles pleines de
   44 px, et la note qui explique ce qui part ne colle pas au champ suivant. */
#bloc-rappel-mens .case-ligne { min-height: 44px; }
#bloc-rappel-mens .neat-note + .champ-bloc { margin-top: 14px; }

/* ============ ARBITRAGE #33 · les macros d'une PHASE ============
   Quatre nombres sous la ligne de la phase, jamais dedans : la ligne du haut
   porte déjà le nom, la durée et trois boutons, et elle passe déjà à la ligne
   en 375 px (voir plus haut). Une grille de quatre colonnes ÉGALES tient dans
   la largeur d'un téléphone sans scroll horizontal — `minmax(0, 1fr)` parce
   qu'un `<input>` a une largeur intrinsèque qui, sans ça, déborde la grille.
   Les champs restent hauts de 44 px : Olivier saisit debout, au bord du terrain. */
.phase-macros {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
  margin: -2px 0 12px; padding: 0 0 0 2px;
}
.phase-macros .phase-macro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.phase-macros .phase-macro > span {
  font-size: 0.66rem; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.phase-macros .phase-macro input {
  width: 100%; min-width: 0; min-height: 44px; padding: 8px 6px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  font-size: 0.92rem; font-weight: 700; text-align: center; outline: none;
}
.phase-macros .phase-macro input:focus { border-color: var(--accent); }
/* Un champ vide n'est pas un oubli : c'est « cette phase n'impose rien ». Le
   tiret de l'attribut placeholder doit donc rester lisible, pas fantomatique. */
.phase-macros .phase-macro input::placeholder { color: var(--muted); opacity: 0.75; }

/* ============ Lot C (06/10/2026) · les quatre états d'un paiement ============
   Quatre teintes, une par état : payé (vert), en attente (bleu), échoué (rouge),
   sans cliente (orange). Le badge porte AUSSI son mot — la couleur seule ne
   dit rien à un daltonien. Pas de margin-left:auto ici (hérité de .badge-type) :
   le badge ouvre sa ligne. */
.badge-paiement { margin-left: 0; }
.badge-type.pay-paye { background: var(--vert-soft); color: var(--vert); }
.badge-type.pay-attente { background: #e9f0fd; color: #4a72d4; }
.badge-type.pay-echoue { background: #fdecec; color: #d43a3a; }
.badge-type.pay-orphelin { background: #fdf3e7; color: #b5701f; }