/* ==============================================
   REPORTING_SAISIE.CSS — formulaire de saisie d'un
   reporting EMG (pages.php?mp=emg&ms=saisie),
   et, au lot 8, son jumeau de modification.

   Rendu par les fragments de BC de modules/fx/reporting_bc.php.
   Mise en page : PAGE UNIQUE LONGUE, comme le formulaire EPS-PA
   que les EMG connaissent déjà.

   ⚠️ Pas de <fieldset><legend> autour des sections (décision
   utilisateur, 2026-08-06) : le CADRE qui enfermait les champs
   alourdissait l'écran sans rien apprendre. Ce qui a été écarté,
   c'est la boîte — pas le badge : depuis le 2026-08-07, le titre
   `.rep-section` se rend en PASTILLE posée sur un filet, sans rien
   entourer. Sur une page unique longue, le repère doit se voir au
   balayage sans ajouter un cadre de plus autour des champs.
   ============================================== */

/* ── Titre de section : une pastille sur un filet ────────────────────────────
   Le filet fait la coupure, la pastille la nomme. Les deux segments de filet
   sont des pseudo-éléments — court à gauche (le titre reste près du bord de
   lecture), jusqu'au bout à droite.

   ⚠️ Le libellé DOIT être dans un <span> (posé par reporting_bc_titre_section()) :
   en flex, un nœud de texte nu devient une boîte anonyme, qu'aucun sélecteur
   n'atteint — donc pas de cadre arrondi possible. */
.rep-form .rep-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2.2rem 0 0.6rem 0; /* l'air se garde au-DESSUS : le titre colle à sa
                                  première question, pas à la section d'avant */
  padding: 0;
  border: 0;
  font-size: 1.5rem;
  font-weight: normal;
}

.rep-form .rep-section::before,
.rep-form .rep-section::after {
  content: "";
  height: 1px;
  background-color: var(--border-color, #aeaeae);
}

.rep-form .rep-section::before {
  flex: 0 0 6rem;
}

.rep-form .rep-section::after {
  flex: 1 1 auto;
}

.rep-form .rep-section > span {
  padding: 0.4rem 1.6rem;
  border: 1px solid var(--text-color, #444);
  border-radius: 2rem;
  background-color: var(--background-light, #fff);
  line-height: 1.3;
  white-space: nowrap;
}

/* La section 1 s'ouvre juste sous la remarque d'ouverture : moins d'air au-dessus. */
.rep-form .rep-section:first-of-type {
  margin-top: 1rem;
}

/* Boutons radio : le libellé DOIT rester à côté de sa case.
   ⚠️ Correction à la source, via la classe posée par le BC ('c' => '… rep-radio') —
   pas un hack qui annulerait le foncier. Le moteur enveloppe chaque modalité dans
   un <div> (lib/bc/input_radio.php), si bien que `.bc-row > label` de
   gpage/_form.css ne l'atteint pas : le label retombe sur la règle générale
   `LABEL { display: block }` et passe sous le bouton. */
/* ── Rythme et lisibilité des questions ──────────────────────────────────────
   Libellés en gras comme sur EPS-PA : sur un formulaire long, c'est le repère
   qui permet de balayer la page sans lire chaque ligne. */
.rep-form .bc-row > label {
  font-weight: bold;
}

/* Un peu d'air entre deux questions (le foncier n'en met que 0.5rem). */
.rep-form .bc-row {
  margin-bottom: 0.9rem;
}

/* Largeurs calées sur le contenu, pas sur un pourcentage de la ligne : une date
   et un âge ont une longueur connue, un `w-25` les étirerait au gré de l'écran. */
.rep-champ-date {
  width: 16rem;
  max-width: 100%;
}

.rep-champ-court {
  width: 7rem;
  max-width: 100%;
}

/* Libellé EN LIGNE, pour les champs qui vivent dans une zone conditionnée : le
   retrait de `.rep-zone` rétrécit la ligne, et le `w-33` du reste du formulaire
   s'y calcule sur une largeur amputée — « Nouveau patient sur l'année en cours ? »
   cassait alors sur deux lignes. Ici le libellé prend la largeur de son texte, et
   le contrôle suit immédiatement.
   ⚠️ `!important` obligatoire : c'est ce que portent les utilitaires `w-*`
   (gpage/_utilities.css) auxquels cette classe se substitue. */
.rep-form .bc-row > label.rep-label-inline {
  width: auto !important;
  margin-right: 0.6rem;
}

/* Le sélecteur « en cours / terminée » est accolé au bouton par le moteur
   (lib/bc/button.php) : sans marge, les deux contrôles se touchent.
   ⚠️ Il faut aussi lui rendre de la hauteur : le reset gPage impose
   `padding: .4rem .6rem !important` à tous les contrôles (gpage/_form.css), ce
   qui rogne le bas des jambages — le « j » de « je continuerai » était coupé.
   D'où le `!important` ici, seul moyen de battre celui du foncier. */
.rep-form .gpage-form-bas select {
  margin-left: 0.8rem;
  height: auto;
  line-height: 1.5;
  padding-top: 0.6rem !important;
  padding-bottom: 0.6rem !important;
}

/* ⚠️ `.rep-radio` ne porte PLUS `inline-block` dans le BC : l'utilitaire est en
   `!important` (gpage/_utilities.css) et écrasait le `display: inline-flex`
   ci-dessous — le libellé repassait alors sous le rond, sur `type_solli` et
   `sexe` seulement (motif_principal, lui, n'a jamais porté cette classe).

   Patron repris d'EPS-PA (espa_reporting/themes/css/portail/proxi.css,
   `.professionel_concerne_item`) : chaque modalité est une boîte flex, ce qui
   centre le rond sur le libellé — y compris quand celui-ci passe sur deux
   lignes, où `vertical-align` échouerait.
   ⚠️ Le calage en haut venait de `.bc-row input { vertical-align: top }`
   (gpage/_form.css, « évite l'espace fantôme »), qui l'emporte sur
   `INPUT[type=radio] { vertical-align: middle }` de la même feuille. En flex,
   la question ne se pose plus. */
.rep-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 1.5rem;
}

.rep-radio > input[type="radio"] {
  flex: 0 0 auto;
  margin-right: 0;
}

.rep-radio > label {
  margin-bottom: 0;
  line-height: 1.4; /* libellés sur deux lignes : interligne lisible (EPS-PA) */
  cursor: pointer; /* le libellé coche la modalité — surface de clic élargie */
}

/* ── Liste longue de modalités (motif principal : 25) sur DEUX colonnes ───────
   Le moteur n'a aucune propriété de colonnes : chaque modalité est un <div>
   frère dans la ligne du champ. On fait donc de la LIGNE une grille, le libellé
   du champ et le conteneur d'erreur occupant toute la largeur.
   ⚠️ L'ordre est celui de la lecture — 1 | 2 puis 3 | 4 — là où le formulaire
   papier numérote en colonnes (1-13 à gauche, 14-25 à droite). */
.rep-liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 1.5rem;
  align-items: center;
}

.rep-liste > label,
.rep-liste > .message_erreur {
  grid-column: 1 / -1;
}

/* Variante à UNE colonne : le libellé sur sa propre ligne, les modalités empilées
   dessous. Sert aux questions courtes dont les réponses se lisent en liste
   (« Pourquoi n'y a-t-il pas eu d'intervention ? »). Sélecteur à deux classes pour
   l'emporter sur `.rep-liste` quel que soit l'ordre des règles. */
.rep-liste.rep-liste-1col {
  grid-template-columns: 1fr;
}

/* Dans la grille, chaque modalité est une cellule pleine largeur : la gouttière
   remplace la marge, et le libellé peut courir sur deux lignes — le rond reste
   centré, `.rep-radio` étant déjà en flex. */
.rep-liste-item {
  display: flex;
  margin-right: 0;
}

/* ── Cases à cocher (sous-lot 7.4) ───────────────────────────────────────────
   ⚠️ `.rep-radio` ne sert à RIEN ici : elle cible `> input[type="radio"]`. D'où
   cette jumelle, posée sur le WRAPPER de ligne (`dc`) et non sur le contrôle —
   une case à cocher est un BC entier, là où une modalité de radio n'est qu'un
   <div> dans la ligne d'un champ.

   Même patron flex que `.rep-radio` : la case reste centrée sur son libellé,
   y compris quand celui-ci court sur deux lignes (« Réunion de concertation
   pluridisciplinaire »), là où `vertical-align` échouerait.

   ⚠️ Les deux règles qui suivent battent `.rep-form .bc-row` et
   `.rep-form .bc-row > label` À SPÉCIFICITÉ ÉGALE (0,2,0 et 0,2,1) : elles ne
   l'emportent que parce qu'elles sont déclarées PLUS BAS. Ne pas les remonter
   au-dessus du bloc « Rythme et lisibilité des questions ». */
.rep-form .bc-row.rep-case {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem; /* une liste de cases se lit serrée, pas aérée comme des questions */
}

/* Un libellé de case n'est PAS une question : le gras des libellés de champ y
   perdrait son sens de repère de balayage — sur 20 cases, tout serait en gras. */
.rep-form .bc-row.rep-case > label {
  font-weight: normal;
  margin-bottom: 0;
  line-height: 1.4;
  cursor: pointer; /* le libellé coche la case — surface de clic élargie */
}

.rep-form .bc-row.rep-case > input[type="checkbox"] {
  flex: 0 0 auto;
  margin-right: 0;
}

/* Un groupe de cases sur DEUX colonnes (les 11 professionnels mobilisés, et au
   sous-lot 7.5 les 11 autres natures d'intervention et les 32 préconisations).
   ⚠️ Une grille ne doit JAMAIS englober une zone conditionnée : le moteur la rend
   comme un <div> frère, que la grille transformerait en cellule — c'est pourquoi
   les 9 modalités d'intervention, qui portent Z7 et Z8, restent empilées. Le 7.5
   contourne le mur autrement : chaque tranche de préconisations a SA grille, si
   bien que les zones naissent entre deux grilles et non dedans. */
.rep-cases-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}

/* Intitulé d'un groupe de cases, quand le groupe prolonge la question qui le
   précède au lieu d'ouvrir une section (les 11 « autre(s) intervention(s)
   réalisée(s) », qui déclinent la nature principale). Le poids du libellé de
   champ — c'est bien une question —, mais aucune pastille : une seule strate de
   titres sur la page (demande utilisateur, 2026-08-07). */
.rep-form .rep-groupe-label {
  margin: 1.4rem 0 0.5rem 0;
  font-weight: bold;
}

@media (max-width: 640px) {
  .rep-liste {
    grid-template-columns: 1fr;
  }

  .rep-cases-2col {
    grid-template-columns: 1fr;
  }

  /* Sur un écran étroit, la précision ne tient plus à côté de son libellé : la
     modalité passe en colonne, le champ vient dessous, aligné sur sa case. */
  .rep-liste-item.rep-modalite-precisee {
    flex-wrap: wrap;
  }

  .rep-form .rep-zone.rep-zone-inline:not(.sr-only) {
    flex-basis: 100%;
    margin: 0.3rem 0 0 1.6rem;
  }
}

/* ── Zone conditionnée de premier niveau ─────────────────────────────────────
   ⚠️ `:not(.sr-only)` est indispensable dès qu'on peint quoi que ce soit : le
   moteur masque une zone en lui ajoutant `sr-only` (Bootstrap 4 : position
   absolue, 1×1 px, `padding: 0`), et sans cette garde le décor serait peint sur
   la boîte résiduelle — notre `padding` l'emportant sur celui de `.sr-only`, à
   spécificité égale mais déclaré plus tard.

   🔑 **Une zone de premier niveau ne porte AUCUN encart** (demande utilisateur,
   2026-08-07) : ni retrait, ni filet, ni fond. Ses champs se lisent au même
   niveau que le reste du formulaire — l'encart, répété six fois sur une page
   longue, hachait la lecture plus qu'il n'informait. Ce qui dit qu'un bloc est
   conditionnel, c'est son APPARITION, pas un cadre permanent : d'où l'animation
   ci-dessous, qui remplace le décor par le mouvement.
   ⚠️ Le niveau 2, lui, garde son encart (voir plus bas) : là, le retrait n'est
   pas décoratif, il rattache la sous-question à la modalité qui l'ouvre. */
.rep-zone:not(.sr-only) {
  display: block;
  animation: rep-zone-apparait 220ms ease-out;
}

/* L'apparition se fait au fondu, avec un flou qui se lève : sur un formulaire
   long, un bloc qui surgit d'un coup se remarque moins qu'un bloc qui arrive.
   ⚠️ Rien de symétrique à la disparition : le moteur masque en posant `sr-only`,
   ce qui retire l'élément du flux immédiatement — animer la sortie demanderait
   du JS, donc du code partagé à toucher. */
@keyframes rep-zone-apparait {
  from {
    opacity: 0;
    filter: blur(4px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rep-zone:not(.sr-only) {
    animation: none;
  }
}

/* ── Zone DANS une zone : le niveau 2 (sous-lot 7.3) ─────────────────────────
   Les sous-services de `intra_service` (Urgences, Hospit. Complète, HDJ,
   Consultation) et la précision de « Autre lieu » sont les SEULES zones
   imbriquées du formulaire. Le CDV les place en regard de leur modalité ; le
   moteur ne le permet pas (il rend les modalités d'un champ, PUIS les zones
   comme blocs frères) — c'est donc cet encart qui porte le rattachement, et
   c'est pour cela qu'il survit là où celui du premier niveau a été retiré. */
.rep-zone .rep-zone:not(.sr-only) {
  margin: 0.4rem 0 0.6rem 0;
  padding: 0.6rem 0.9rem 0.2rem 0.9rem;
  border-left: 2px solid var(--border-color, #aeaeae);
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.05);
}

/* Un titre de section OUVRE sa zone (« Activité intra/extra hospitalière »).
   Il garde la marge haute des autres titres : la zone n'ayant plus de padding,
   c'est elle seule qui sépare le titre de la question précédente — sans quoi
   « Activité extra hospitalière » collait à l'aide de `nouv_patient`.
   ⚠️ `:first-of-type` est ici plus spécifique que la règle générale du même nom,
   qui viserait ce titre aussi (il est le premier <h2> DE SA ZONE). */
.rep-form .rep-zone > .rep-section:first-of-type {
  margin-top: 2.2rem;
}

/* ── « Autre lieu, à préciser » ACCOLÉ à la modalité « Autre » ────────────────
   Patron du portail CRT (`<div class="d-flex flex-row">` autour de la modalité
   et de sa zone), transposé : là-bas chaque modalité est un BC de case à cocher,
   donc « Autre » s'enveloppe seule ; ici les 10 modalités sortent d'un SEUL
   radio, alors le wrapper prend la ligne entière du champ **et** la zone.

   🪤 **Ce qu'aucun réglage CSS ne pouvait faire.** Le moteur rend TOUTES les
   modalités d'un radio, PUIS les zones, comme blocs frères : la zone ne peut donc
   commencer qu'après la grille entière. Elle se collait à la fin de la COLONNE —
   calée sur « Hôpital / service de Psychiatrie » — et non au mot « Autre ». Deux
   montages sont tombés là-dessus (flux `inline-grid` + `max-width`, puis flex
   avec colonnes resserrées) avant que la cause soit la bonne : ce n'est pas une
   question de place, c'est une question de STRUCTURE.

   🔑 C'est `precisionAccoleeAsaModalite()` (modules/emg/saisie.js) qui déplace le
   nœud de la zone DANS la boîte de la modalité, et y pose la classe ci-dessous —
   l'équivalent exact du `d-flex flex-row` de CRT, obtenu par le DOM puisque le
   moteur ne sait pas l'écrire. Le CSS ne fait plus que la mise en ligne.
   ⚠️ Sans JavaScript, la zone reste sous la liste : moins bien placée, mais
   pleinement fonctionnelle — et la donnée, elle, ne dépend d'aucun de ces deux
   plans (cf. reporting_post_cdv, côté serveur). */
.rep-liste-item.rep-modalite-precisee {
  align-items: center;
}

/* Le champ prend la largeur qui reste dans la cellule de sa modalité. */
.rep-form .rep-zone.rep-zone-inline:not(.sr-only) {
  flex: 1 1 8rem;
  min-width: 0;
  margin: 0 0 0 0.6rem;
  padding: 0;
  border: 0;
  background: none;
}

.rep-zone-inline .bc-row {
  margin-bottom: 0;
}

.rep-champ-precision {
  width: 100%;
}

/* Aide de saisie accolée à un champ (`br5`) : présente sans peser. Formulée en
   langage courant — le portail s'adresse à des soignants, pas à des informaticiens. */
.rep-aide {
  display: inline-block;
  margin-left: 0.4rem;
  color: #6b6b6b;
  font-size: 1.3rem;
}

/* L'aide de la date part à la ligne : la phrase est longue, la coller au champ
   pousserait le contrôle hors de la colonne sur un écran étroit. */
.bc-row .rep-aide {
  vertical-align: middle;
}

/* Remarque d'ouverture du CDV : même discrétion que les aides de champ, mais en
   bloc — elle porte sur le formulaire entier, pas sur une case. */
.rep-remarque {
  display: block;
  margin: 0 0 1.2rem 0;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .rep-aide {
    display: block;
    margin-left: 0;
  }
}

/* ── Consultation administrateur (lecture seule) ────────────────────────────
   Le <fieldset disabled> de modules/admin/emg/reporting/modif.php. Il porte
   TOUT le corps de la fiche : sans remise à zéro, la bordure et les marges que
   les navigateurs donnent nativement aux fieldset encadreraient les 95 champs
   d'un liseré parasite. */
.rep-lecture {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0; /* un fieldset ne rétrécit pas sous son contenu sans ceci */
}

/* Le grisé natif des contrôles désactivés est trop pâle pour un formulaire qu'on
   vient LIRE : on rend aux valeurs un contraste de texte normal, en gardant le
   fond neutre qui dit « non modifiable ». Le curseur, lui, doit rester explicite —
   c'est le seul signal qui subsiste au survol. */
.rep-lecture input,
.rep-lecture select,
.rep-lecture textarea {
  color: inherit;
  opacity: 1;
  cursor: not-allowed;
}

/* Les libellés des radios et cases restent pleinement lisibles : ce sont EUX qui
   portent la réponse à l'écran, la case n'en est que la marque. */
.rep-lecture label {
  color: inherit;
  opacity: 1;
}