/* ===========================================================================
   ÉCRAN « PARAMÈTRES D'ORGANISATION » (/app/organisation) — préfixe .reforg-*

   L'écran réunit sous quatre onglets les quatre référentiels d'organisation —
   services, fonctions, équipes, projets — qui vivaient sur quatre pages.

   SA PROPRE FEUILLE, ET NON LA QUEUE DE modele-erp.css : la règle du dépôt est
   « un écran, une feuille » (voir l'en-tête d'App.razor).

   .reforg-* ET NON .org-* : ce dernier appartient à ecran-organigramme.css, qui
   est un autre écran du même menu. Deux préfixes voisins d'une lettre sur deux
   feuilles chargées ensemble finissent par se marcher dessus le jour où l'un
   ajoute la classe que l'autre avait déjà.

   CE QUE CETTE FEUILLE POSE, ET RIEN DE PLUS : la barre d'onglets et la bascule
   d'un panneau à l'autre. Les listes elles-mêmes n'ont pas bougé — elles sont
   rendues par .ecran-filtre, .md-card et le composant Tableau, tous partagés —
   et les modales de saisie sont au gabarit (.mx-voile / .mx-modale-cadre).

   AUCUNE COULEUR EN DUR : tout par --et-*.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   LA BARRE D'ONGLETS

   C'est un .mx-seg du gabarit et non une rangée de boutons maison : le produit a
   déjà écrit ce sélecteur quatre fois avant de le ranger en section 11, et un
   cinquième exemplaire n'aurait divergé que sur ce que personne n'a décidé.

   La barre l'enveloppe pour deux raisons seulement — la gouttière qui la sépare
   de la liste, et le DÉBORDEMENT : quatre onglets porteurs d'un libellé, d'une
   icône et d'un compte ne tiennent pas sur 390 px. .mx-seg est en overflow:hidden
   et ses boutons en white-space:nowrap ; sans conteneur défilant, le quatrième
   onglet serait simplement coupé, et rien à l'écran ne dirait qu'il existe.
   --------------------------------------------------------------------------- */
.reforg-barre {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-bottom: 16px;
    max-width: 100%; overflow-x: auto;
    /* Le défilement ne doit pas rogner le focus visible du gabarit, qui déborde
       de 1 px hors du bouton (outline-offset). */
    padding: 2px;
}
/* Le segmenté ne rétrécit pas dans une barre qui déborde : c'est LUI le contenu.
   Voir docs/conventions-responsive.md §3 — dans une rangée trop pleine, ce sont
   les éléments au rétrécissement par défaut qui paient. */
.reforg-barre > .mx-seg { flex: none; }

/* ---------------------------------------------------------------------------
   LE COMPTE ACCOLÉ À CHAQUE ONGLET

   Il est là pour qu'on sache ce qu'on va trouver AVANT de cliquer : « Projets »
   sans son compte oblige à ouvrir l'onglet pour découvrir qu'il est vide, puis à
   revenir. Discret et en chasse fixe : c'est un chiffre, pas un libellé.

   Il vaut le total du RÉFÉRENTIEL et non celui du filtre courant — un onglet
   annonce ce qu'il y a derrière lui, pas ce que la recherche en cours a laissé
   passer. Il n'apparaît qu'une fois le panneau chargé : un « 0 » affiché pendant
   le chargement se lit comme un référentiel vide.
   --------------------------------------------------------------------------- */
.reforg-n {
    margin-left: 6px;
    font-family: var(--et-font-mono); font-size: 12px; font-weight: 500;
    color: var(--et-muted);
}
/* Sur l'onglet actif, l'ardoise est pleine : le gris du repos y disparaîtrait.
   L'encre est HÉRITÉE du bouton et seulement atténuée — écrire un blanc ici
   ferait une couleur en dur, et le pendant sombre du gabarit la contredirait. */
.mx-seg > button.est-actif .reforg-n { color: inherit; opacity: .72; }

/* ---------------------------------------------------------------------------
   LES PANNEAUX

   UN PANNEAU VISITÉ RESTE MONTÉ, ET C'EST DÉLIBÉRÉ. Chaque onglet charge son
   référentiel et, pour trois d'entre eux, un ou deux référentiels annexes qui
   alimentent sa modale (les salariés, les cycles, les postes horaires). Démonter
   le panneau à chaque changement d'onglet rejouerait ces appels à chaque
   aller-retour — or l'aller-retour est précisément ce que cet écran existe pour
   rendre facile : on rattache une équipe à un service, on va vérifier le
   service, on revient. Le panneau masqué garde aussi son filtre latéral, son tri
   et sa colonne dépliée, qu'une remise à zéro ferait resaisir.

   La bascule se fait donc en CSS et non en démontant le composant. `display:none`
   et non `visibility`/`position` : un panneau masqué ne doit occuper aucune
   hauteur, sans quoi la page garderait le blanc du plus grand des quatre.
   --------------------------------------------------------------------------- */
.reforg-panneau.est-masque { display: none; }

/* ---------------------------------------------------------------------------
   LES QUATRE MODALES DE SAISIE

   Elles sont au gabarit (.mx-voile > .mx-modale-cadre > .mx-modale-tete/-corps/
   -pied), et non plus sur le modèle de fiche hérité (.fx-modale) : ce sont
   quatre fiches d'un écran neuf, et la règle est « les nouveaux écrans écrivent
   en .mx-* ». Ce que cette feuille pose n'est que de la GÉOMÉTRIE — elles
   n'inventent aucun objet.

   UNE SEULE LARGEUR POUR LES QUATRE. Elles portaient 620, 660, 680 et 680 px,
   sans que rien ne le justifie : le formulaire dense est le même, sa colonne de
   libellés fait 158 px dans les quatre, et une largeur qui change d'un onglet à
   l'autre fait sauter la fenêtre sous la souris quand on enchaîne deux saisies.

   ET CETTE LARGEUR UNIQUE EST DEVENUE UN CRAN (2026-09-10). Elle valait 700 px,
   posée ici ; c'est maintenant le cran courant du gabarit, 660, et cette feuille
   n'en écrit plus rien. Le geste d'alors unifiait quatre fenêtres entre elles ;
   celui-ci les unifie avec les cent vingt autres — même raisonnement, un cran
   plus haut.
   --------------------------------------------------------------------------- */

/* .reforg-confirm A ÉTÉ RETIRÉE (2026-09-10). Elle posait 480 px pour la
   confirmation de suppression — une phrase, et le cas échéant le bandeau qui dit
   ce que la suppression emporte —, ce qui est très exactement .est-etroite du
   gabarit, à la valeur près : la même. Le gabarit le disait déjà de lui-même,
   à l'endroit où il déclare .est-etroite : « .reforg-confirm est donc un DOUBLON
   de cette ligne, à retirer quand on repassera sur les quatre fiches des
   paramètres d'organisation. » C'est ce passage-ci. */

/* La bande de faits est collée à la tête : c'est le filet de 3 px de l'en-tête
   de modale qui sépare, celui de la bande ferait double. */
.reforg-modale .mx-faits { border-top: 0; }

/* LES DEUX RÈGLES DU BANDEAU D'ÉTAT EN CORPS DE MODALE SONT MONTÉES AU GABARIT
   (modele-erp.css §6, le 2026-09-08) : ecran-periodes.css portait la même paire,
   et les constantes d'export étaient le troisième demandeur. Rien ne reste ici. */

/* .mx-note porte la gouttière de 18 px des rangées de fiche, pour aligner son
   bord gauche sur celui des libellés. Dans un corps de modale, cette gouttière
   est déjà celle du conteneur : posée en plus, la note rentrait de 18 px et
   cassait la seule verticale que la fiche donne à suivre. */
.reforg-modale .mx-modale-corps > .mx-note { padding-left: 0; padding-right: 0; }

/* L'unité posée à droite d'un champ court — « heures » après le budget. C'est une
   .mx-sous du gabarit, qui porte une gouttière haute pour se ranger SOUS son champ ;
   à côté de lui, cette gouttière la décale d'une ligne de base. */
.reforg-unite { margin-top: 0; }