/* =====================================================================
   EasyAdmin — FEUILLE DE MODULE de la console d'administration (.adm-*).

   POURQUOI UNE FEUILLE DE MODULE ET NON HUIT FEUILLES D'ÉCRAN
     La console compte quarante-huit écrans. Huit d'entre eux portaient encore,
     au 2026-09-08, la coquille Bootstrap d'avant la charte — card-easytech,
     DataGrid à en-tête écrit à la main, `row g-3` / `col-md-*`, badge bg-*, et
     des largeurs de colonne en dur dans le balisage. Les porter au gabarit
     demande quatre ou cinq règles que PLUSIEURS d'entre eux partagent : une
     grille de bascules, une seconde ligne de cellule, un menu flottant, une
     grille de clés/valeurs.

     Écrire ces règles dans huit feuilles d'écran en aurait fait huit copies —
     exactement ce que la règle « une classe employée par deux écrans remonte »
     existe pour empêcher (CLAUDE.md). Et les mettre dans modele-erp.css aurait
     fait payer au gabarit commun des formes qui n'appartiennent qu'à cette
     console. D'où la même réponse qu'easypaie.css et easyconso.css : UNE
     feuille de module, chargée après le gabarit et avant les feuilles d'écran.

   CE QUI N'EST PAS ICI, ET C'EST VOULU
     Ce qui existe déjà au gabarit : la pastille d'état (.mx-pastille), le
     bandeau de message (.mx-blocage), la carte (.mx-carte), la grille dense
     (.mx-form + ChampFiche), la modale (.mx-voile / .mx-modale-*), la table
     (.tbl via Tableau.razor), les boutons (.mx-btn et ses variantes). Aucune
     de ces formes n'est recopiée ici sous un nom en .adm-*.

   AUCUNE COULEUR EN DUR : tout passe par les jetons --et-*.
   AUCUNE LARGEUR DE PAGE : les paliers retenus sont ceux de
   docs/conventions-responsive.md (560 / 640 / 720 / 1024 / 1100).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. LA SECONDE LIGNE D'UNE CELLULE

   Un lieu sous un nom de dossier, un téléphone sous un contact, un code
   sous un libellé. C'était `<div class="text-muted small">` — deux classes
   Bootstrap, donc une taille (0,875em) relative à la cellule et un gris
   (--bs-secondary-color) qui ne suit aucune bascule de la charte.

   11,5 px et non 12 : l'échelle de la charte n'admet rien sous 12 px pour
   du TEXTE COURANT, et réserve les valeurs inférieures aux étiquettes.
   Celle-ci en est une — elle qualifie la valeur du dessus, elle ne se lit
   pas seule. Même rang que .abn-echeance d'ecran-abonnes.css, qui porte
   exactement le même rôle sur l'écran voisin.
   --------------------------------------------------------------------- */
.appgrid .adm-sous-ligne {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--et-muted);
    font-weight: 400;
}

/* ---------------------------------------------------------------------
   2. UNE GRILLE DE BASCULES (.adm-bascules)

   Seize modules ERP, cinq connecteurs de pointeuses, huit types d'envoi :
   des listes de cases à cocher trop longues pour la grille dense, où
   chaque case aurait pris une rangée de 158 px de libellé pour trois mots.

   C'était `d-flex flex-wrap gap-3`. La grille dit ce que le flex laissait
   au hasard : des colonnes de largeur égale, donc des cases alignées d'une
   rangée à l'autre. `auto-fill` et non `auto-fit` — on veut la colonne
   vide plutôt qu'une case étirée sur toute la largeur quand il n'en reste
   qu'une.

   240 px : mesuré sur le plus long libellé du catalogue de modules
   (« EasyPurchase (Achats) » suivi de son code). En dessous, le code passe
   à la ligne sous son nom et la liste se lit deux fois.
   --------------------------------------------------------------------- */
.appgrid .adm-bascules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px 18px;
    padding: 4px 0 12px;
}

/* Le code technique à côté du nom : mono, second rang, jamais l'égal du
   libellé — c'est la clé, pas le nom. */
.appgrid .adm-bascule-code {
    font-family: var(--et-font-mono);
    font-size: 11.5px;
    color: var(--et-muted);
}

/* Sous 560 px la grille tombe à une colonne d'elle-même (240 px de
   minimum), mais les cases se resserrent : on rend l'écart vertical, une
   case cochée par erreur ici activant un module facturé. */
@media (max-width: 560px) {
    .appgrid .adm-bascules { gap: 14px 0; }
}

/* ---------------------------------------------------------------------
   3. UN MENU PLACÉ EN FIXE (.adm-menu-flottant)

   Modificateur de .tbl-menu-liste, le menu du gabarit de liste. Celui-ci
   s'ancre en ABSOLU sur son .tbl-menu ; il faut ici du FIXE, parce que le
   menu s'ouvre depuis une cellule de fin de ligne — donc à l'intérieur du
   conteneur à défilement horizontal de la table, qui le rognerait.

   Les COORDONNÉES restent en style dans la page : une position calculée au
   clic est une donnée, pas une décision de charte (docs/couleurs-en-dur.md
   raisonne de même sur les arguments de calcul). Ce qui est ici, c'est le
   mode de placement et le défilement interne — deux choix de charte.

   Il remplace `dropdown-menu show` de Bootstrap, qui apportait son arrondi
   et son ombre à un menu que la charte veut carré.
   --------------------------------------------------------------------- */
.appgrid .adm-menu-flottant {
    position: fixed;
    top: auto;
    overflow-y: auto;
    margin: 0;
    list-style: none;
}

/* L'intitulé du menu : mono, capitales, même rang que .mx-groupe-lbl —
   c'est un en-tête de groupe, pas une entrée cliquable. Il remplace
   `dropdown-header`. */
.appgrid .adm-menu-tete {
    padding: 7px 14px 5px;
    font-family: var(--et-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--et-muted);
}

/* ---------------------------------------------------------------------
   4. UNE PAIRE CLÉ / VALEUR ÉDITABLE (.adm-eav)

   Le référentiel de localisation (PAR-02) règle des paramètres par pays
   sous forme de paires libres : la clé est un identifiant technique, la
   valeur un texte court. C'était un `table table-sm` avec deux largeurs en
   dur (40 % et 120 px) et un `form-control form-control-sm` par cellule.

   Une grille et non une table : il n'y a ni tri, ni total, ni export à
   attendre de trois paires — et une table de deux colonnes dont l'une est
   un champ de saisie est un formulaire qui s'est déguisé.

   Les gouttières de 8/12 px sont celles du gabarit dense (§5 de
   modele-erp.css : 12 à 18 px dans les formulaires) prises au bas de leur
   plage : ces rangées se lisent en pile, pas en fiche.
   --------------------------------------------------------------------- */
.appgrid .adm-eav {
    display: grid;
    grid-template-columns: minmax(160px, 2fr) minmax(160px, 3fr) auto;
    gap: 8px 12px;
    align-items: center;
}

/* La clé est un identifiant : mono, et en lecture seule une fois posée —
   renommer une clé serait en créer une autre et perdre la première. */
.appgrid .adm-eav-cle {
    font-family: var(--et-font-mono);
    font-size: 12.5px;
    color: var(--et-ink);
    overflow-wrap: anywhere;
}

.appgrid .adm-eav-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

/* L'en-tête des trois colonnes, au rang des en-têtes de table du gabarit. */
.appgrid .adm-eav-tete {
    font-family: var(--et-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--et-muted);
}

/* Sous 720 px les trois colonnes s'empilent : à cette largeur, un champ de
   valeur de 160 px et deux boutons ne tiennent plus sur la même ligne que
   la clé, et c'est la clé qui se coupait. Palier retenu de
   docs/conventions-responsive.md, celui que les fiches utilisent déjà pour
   rendre la colonne de libellés. */
@media (max-width: 720px) {
    .appgrid .adm-eav { grid-template-columns: 1fr; gap: 4px; }
    .appgrid .adm-eav-tete { display: none; }
    .appgrid .adm-eav-actions { justify-content: flex-start; padding-bottom: 10px; }
}

/* ---------------------------------------------------------------------
   5. UN GROUPE REPLIABLE (.adm-repli)

   Le référentiel de localisation range ses paires sous le pays qui les
   porte, replié par défaut. C'était un `d-flex` avec un fond et un curseur
   écrits en style dans la page.

   Le bouton porte tout : c'est lui qu'on parcourt au clavier, et un <div>
   à `cursor: pointer` ne se parcourt pas. La ligne entière est donc un
   <button>, ce que le balisage de la page dit désormais.
   --------------------------------------------------------------------- */
.appgrid .adm-repli {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    border-bottom: 1px solid var(--et-hairline);
    background: var(--et-surface-2);
    color: var(--et-ink);
    font-family: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.appgrid .adm-repli:hover { background: var(--et-tint); }
.appgrid .adm-repli:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.appgrid .adm-repli-nom { font-weight: 600; }
.appgrid .adm-repli-n { margin-left: auto; font-size: 12px; color: var(--et-muted); }
.appgrid .adm-repli-corps { padding: 12px 14px 16px; border-bottom: 1px solid var(--et-hairline); }

/* Sous 640 px le chevron, le code et le nom tiennent encore, mais le
   décompte de droite pousse le nom à la ligne : il passe sous le nom. */
@media (max-width: 640px) {
    .appgrid .adm-repli { flex-wrap: wrap; }
    .appgrid .adm-repli-n { margin-left: 0; flex-basis: 100%; }
}

/* ---------------------------------------------------------------------
   6. UNE BANDE D'INDICATEURS DE PLATEFORME (.adm-tuiles)

   L'accueil de la console (PLT-01) montre des volumes — sociétés,
   utilisateurs, terminaux, pointages — puis des listes de détail. C'était
   `row g-3` avec des `col-md-3` : une grille de douze colonnes pour six
   chiffres, qui laissait un trou à droite dès que le compte n'était pas un
   diviseur de douze.

   Le gabarit a déjà .mx-ind / .mx-ind-grille pour une bande d'indicateurs,
   et c'est ce que l'écran emploie. Ce qui reste ici est la seule chose que
   le gabarit ne porte pas : la grille des CARTES de navigation en dessous,
   qui n'est pas une bande de chiffres.

   260 px : mesuré sur le plus long intitulé de la console (« Serveurs de
   notification » et sa note). En dessous, la note passe à trois lignes et
   les cartes d'une même rangée cessent d'avoir la même hauteur.
   --------------------------------------------------------------------- */
.appgrid .adm-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.appgrid .adm-tuile {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    color: var(--et-ink);
    text-decoration: none;
    transition: background .12s, border-color .12s;
}
.appgrid .adm-tuile:hover { background: var(--et-tint); border-color: var(--et-form-blue); }
.appgrid .adm-tuile:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }
.appgrid .adm-tuile > i { font-size: 18px; color: var(--et-form-blue-encre); flex: none; margin-top: 1px; }
/* `display: block` sur deux <span> : la tuile est un <a>, et son contenu ne
   peut donc pas être un <div> — un bloc dans un lien en ligne est du HTML
   invalide que les navigateurs réparent en sortant le bloc du lien. Les deux
   lignes sont des spans, et c'est le CSS qui les empile. */
.appgrid .adm-tuile-titre { display: block; font-size: 13px; font-weight: 600; }
.appgrid .adm-tuile-note {
    display: block; margin-top: 2px;
    font-size: 12px; color: var(--et-muted); line-height: 1.45;
}
/* Le conteneur des deux lignes, frère de l'icône : lui aussi un span. */
.appgrid .adm-tuile > span { min-width: 0; }

/* La règle tactile : sous 1024 px une carte de navigation est une cible, et
   une cible ne descend pas sous 44 px (docs/cibles-tactiles.md). Le
   rembourrage de 13 px et deux lignes de texte la portent déjà bien
   au-delà — le minimum est là pour la carte à une seule ligne. */
@media (max-width: 1024px) {
    .appgrid .adm-tuile { min-height: 44px; }
}

/* ---------------------------------------------------------------------
   7. LA MODALE ÉTROITE — .est-etroite DEPUIS LE 2026-09-10

   Le raisonnement tient toujours : le gabarit donne 660 px à une fenêtre,
   la largeur d'un formulaire dense à une colonne, et trois fenêtres de la
   console ne portent PAS un formulaire — une confirmation de suppression,
   une seconde, et un dépannage de mot de passe. À 660 px leur texte se lit
   sur une ligne trop longue, et le vide sous les deux boutons dit qu'on a
   oublié quelque chose.

   CE QUI CHANGE EST LE CHIFFRE, ET QUI L'ÉCRIT. Ce n'est plus 440 px posés
   ici, c'est le cran étroit de la charte, 480, posé dans la page par
   .est-etroite. Les 440 venaient d'un `StyleDialog="max-width:440px;"` que
   cette section avait déplacé de la page vers la feuille — bon geste, à
   ceci près qu'il produisait la plus étroite des dix-huit largeurs du
   back-office au lieu d'un cran.

   LA MÉDIA-REQUÊTE PART AVEC ELLE. Elle rendait la place sous 560 px, où un
   maximum de 440 et les 16 px de gouttière du voile laissaient l'écran plus
   étroit que la fenêtre. Le gabarit le fait de lui-même : .mx-modale-cadre
   pose « width: 100% » sous son maximum, donc à 390 px la fenêtre mesure
   358 et non 480, sans qu'aucun palier ait à le dire.
   --------------------------------------------------------------------- */

/* Le panneau de geste irréversible DANS une modale. Le gabarit le pose
   avec `margin: 18px`, calibré pour un fond de page — dans un corps de
   modale qui a déjà 18 px de rembourrage, cela fait 36 px d'encoche et le
   panneau flotte au milieu.

   Même forme que les quatre règles `.mx-modale-corps .mx-*` de la section 6
   de modele-erp.css, qui rendent au gabarit dense ses mesures de modale. Il
   reste ici et non là-bas parce qu'UN SEUL écran en a besoin aujourd'hui ;
   au deuxième, il remonte — la règle du dépôt va dans ce sens, jamais dans
   l'autre. */
.appgrid .mx-modale-corps > .mx-irreversible { margin: 12px 0 0; }

/* ---------------------------------------------------------------------
   8. DEUX FORMES DE CELLULE ET DE BARRE

   .adm-etats  — deux pastilles dans la même cellule (« Actif » + « MDP »).
                 Un simple espace les laissait se séparer sur deux lignes
                 dans une colonne étroite, la seconde passant sous la
                 première comme si elle appartenait à la ligne du dessous.
   .adm-filtre — le sélecteur de filtre métier dans la barre du tableau.
                 C'était `style="max-width:260px"` dans la page.
   .adm-lien   — un lien long affiché en clair (jeton d'invitation). Il
                 doit se couper n'importe où : une URL n'a pas d'espaces, et
                 sans cette règle elle élargit son conteneur au-delà de
                 l'écran.
   --------------------------------------------------------------------- */
.appgrid .adm-etats { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

.appgrid .adm-filtre { max-width: 240px; }

@media (max-width: 720px) {
    .appgrid .adm-filtre { max-width: 100%; }
}

.appgrid .adm-lien {
    display: block;
    margin-top: 2px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    overflow-wrap: anywhere;
    color: var(--et-form-blue-encre);
}

/* ---------------------------------------------------------------------
   9. FORMULAIRE + ENCART D'AIDE (.adm-deux-colonnes)

   Le gabarit de FORMULAIRE de la passation : « deux colonnes — sections de
   champs à gauche, encart d'aide à droite ». PORTEE-ET-DECISIONS.md le
   recense comme le reste à faire du gabarit formulaire (section B, ligne
   « Gabarit formulaire (section + encart d'aide) ») ; il n'existait dans
   aucune feuille, et les deux écrans qui le voulaient le refaisaient en
   `row g-3` + `col-12 col-xl-8` / `col-12 col-xl-4`.

   CE QUI VA À DROITE, ET CE QUI N'Y VA PAS. Un encart d'aide ESSAIE ou
   EXPLIQUE ce que les champs règlent — un test d'envoi, un état de
   connexion, un rappel de règle. Un champ de plus n'y va jamais : la
   colonne de droite ne défile pas au même rythme que le formulaire, et
   un champ qu'on y pose sort du parcours de saisie.

   360 px : mesuré sur l'encart de test d'envoi — un champ courriel, son
   bouton pleine largeur et un bandeau de résultat de deux lignes. En
   dessous, le bouton « Envoyer un e-mail de test » se replie.

   LE PALIER EST 1100 px, retenu de docs/conventions-responsive.md, et
   c'est celui que le gabarit emploie déjà pour la même raison (§9 de
   modele-erp.css : « sous 1100 px le rail passe au-dessus des panneaux »).
   L'encart passe alors SOUS le formulaire, jamais en colonne étroite : à
   300 px de large, un bandeau de résultat SMTP se lit sur huit lignes.
   --------------------------------------------------------------------- */
.appgrid .adm-deux-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .appgrid .adm-deux-colonnes { grid-template-columns: minmax(0, 1fr); }
}

/* Un bouton qui prend toute la largeur de son encart. Il remplace le
   `w-100` de Bootstrap : la largeur d'un bouton est une décision de
   charte, et `w-100` la posait en !important, donc hors de portée du
   palier tactile du §12 de modele-erp.css. */
.appgrid .adm-btn-large {
    display: flex;
    width: 100%;
    margin-top: 10px;
}

/* ---------------------------------------------------------------------
   10. UN PIED DE CARTE QUI PORTE DES ACTIONS (.adm-carte-pied-actions)

   .mx-carte-pied du gabarit est une bande de MENTION : un rembourrage, un
   filet supérieur, une encre atténuée — pas une rangée. Deux écrans de
   ce lot y posent une mention À GAUCHE et le bouton d'enregistrement à
   DROITE (la souscription et le nouveau pays), ce que la charte demande
   pour un formulaire de page : « les actions vont en bas à droite ».

   La classe ne redéfinit donc que la mise en rangée, et laisse au gabarit
   le fond, le filet et l'encre. `align-items: center` et non `baseline` :
   la mention peut tenir deux lignes, et un bouton aligné sur la première
   ligne d'un texte de deux paraît décalé vers le haut.
   --------------------------------------------------------------------- */
.appgrid .adm-carte-pied-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.appgrid .adm-carte-pied-actions > .mx-methode { flex: 1; min-width: 200px; margin-top: 0; }

/* Sous 640 px la mention passe au-dessus du bouton, qui prend la largeur :
   à cette largeur, « Enregistrer » et une phrase de deux lignes côte à
   côte laissent au bouton moins que sa cible tactile. */
@media (max-width: 640px) {
    .appgrid .adm-carte-pied-actions > .mx-methode { flex-basis: 100%; }
    .appgrid .adm-carte-pied-actions .mx-modale-actions { margin-left: 0; width: 100%; }
    .appgrid .adm-carte-pied-actions .mx-modale-actions > .mx-btn { flex: 1; }
}

/* ---------------------------------------------------------------------
   11. L'ATTENTE D'UN FORMULAIRE (.adm-chargement)

   Trois écrans de ce lot attendent une réponse avant d'avoir un
   formulaire à montrer. Ils affichaient un `spinner-border` de Bootstrap
   centré dans un `py-5`, c'est-à-dire un tourniquet et rien d'autre.

   LE GABARIT DE LISTE A DÉJÀ SON ÉTAT DE CHARGEMENT (Tableau le rend) ;
   un formulaire n'en avait pas. Une ligne de texte plutôt qu'un
   tourniquet : elle dit ce qu'on attend, et elle ne tourne pas — un
   tourniquet qui reste affiché ne se distingue pas d'un tourniquet
   bloqué.
   --------------------------------------------------------------------- */
.appgrid .adm-chargement {
    padding: 28px 16px;
    background: var(--et-surface);
    border: 1px solid var(--et-hairline);
    color: var(--et-muted);
    font-size: 13px;
    text-align: center;
}