/* ============================================================================
   ERP OMEX v2 — complements de charte, chargés APRÈS _omex_style.css et
   _omex_portail.css.

   POURQUOI CE FICHIER EXISTE
   Les deux feuilles precedentes sont des copies VERBATIM du systeme de design
   du cockpit DAF et du portail « Le bureau ». On n'y touche pas : toute
   modification les ferait diverger de leur source et casserait la comparaison
   d'un ecran a l'autre. Ce qui est propre a l'ERP vit donc ici, et nulle part
   ailleurs — jamais dans une balise <style>, jamais dans un attribut style="".

   REGLE DE REDACTION : on n'invente aucune classe deja definie ailleurs ; on
   ajoute uniquement ce que le HTML de l'ERP exige en plus.
   ============================================================================ */

/* --- Colonnes chiffrees : un nombre ne se coupe JAMAIS en deux lignes -------
   Constat du 11/08/2026 sur l'ecran Piloter : « 77,3 % » s'affichait sur deux
   lignes, ce qui se lit une fraction de seconde comme deux valeurs. Un tableau
   de pilotage n'a pas droit a cette ambiguite. */
.po-table th.po-num,
.po-table td.po-num { white-space: nowrap; }

/* --- Etiquettes de lecture : « sous-declare » reste d'un seul tenant -------- */
.po-flag { white-space: nowrap; }

/* La charte definit .po-flag en ok / ko / warn / aff, mais pas en « neutre ».
   L'ERP en a besoin pour dire « non comparable » ou « aucun indicateur note » :
   ce n'est ni bon ni mauvais, et le peindre en vert ou en rouge serait un mensonge. */
.po-flag.muted { color: var(--omex-ink-2); background: var(--omex-surface-2);
                 border: 1px solid var(--omex-surface-brd); }

/* --- Colonne « Domaine » : nom du module qui publie l'indicateur ------------
   Le libelle est court par construction (« Obtenir un projet ») ; le couper
   fait perdre une ligne sur chaque rangee et double la hauteur du tableau. */
td.erp-domaine { white-space: nowrap; color: var(--omex-ink-2); }

/* --- Colonnes de PROSE dans un tableau de chiffres --------------------------
   table.datat aligne tout a DROITE : c'est juste pour des montants, absurde pour
   une phrase (« Le suivi des postes existe, mais rien ne date l'embauche... »).
   Une colonne de texte se lit a gauche, sinon l'oeil doit chercher le debut de
   chaque ligne. */
table.datat td.erp-texte, table.datat th.erp-texte { text-align: left; }

/* --- Valeurs chiffrees : jamais coupees en deux lignes ---------------------- */
table.datat td.erp-num, table.datat th.erp-num { white-space: nowrap; }

/* --- Provenance du chiffre, sous le libelle de l'indicateur -----------------
   Reprend la taille de .bu-cible, mais ici c'est une ligne de TABLEAU : on lui
   donne son propre nom pour ne pas dependre d'une classe de tuile. */
.erp-source { font-size: 12px; color: var(--omex-ink-2); margin-top: 3px; line-height: 1.4; }

/* ============================================================================
   CHOIX DE LA SOCIETE — l'ecran qui suit la connexion.
   Une entite du groupe n'est pas un bouton : c'est une personne morale avec sa
   convention collective, son SIREN, sa cle d'affaire et son NAS. La carte porte
   donc ces faits, pris au referentiel. Ce qui n'est pas connu s'ecrit, il ne se
   laisse pas en blanc — un blanc se lit « oubli », un tiret se lit « il n'y en
   a pas », et les deux ne veulent pas dire la meme chose.
   ============================================================================ */
/* ⚠ minmax(min(330px, 100%), 1fr) — et surtout PAS minmax(330px, 1fr).
   Signale par Jonathan CECCARINI le 26/08/2026 depuis son telephone : l'ecran
   « Choisir une societe » debordait, la page partait en defilement horizontal
   et le contenu passait sous les cartes. La cause tenait dans ce seul minmax :
   une piste dont le minimum est fixe NE PEUT PAS retrecir sous 330px, meme
   quand l'ecran fait moins. La grille depassait donc son conteneur.
   Le `min(330px, 100%)` dit exactement ce qu'on veut : 330px tant qu'il y a la
   place, la largeur disponible sinon. Il ne depend d'AUCUNE media query - donc
   il tient a toutes les tailles, y compris celles qu'on n'a pas prevues. */
.soc-grid { display: grid;
            grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
            gap: 14px; margin-bottom: 8px; }

.soc-card { display: flex; flex-direction: column; gap: 12px;
            background: var(--omex-surface); border: 1px solid var(--omex-surface-brd);
            border-top: 3px solid var(--omex-red); border-radius: var(--r-md, 12px);
            padding: 16px 18px 14px; text-decoration: none; color: inherit;
            transition: border-color .14s ease-out, background .14s ease-out; }
.soc-card:hover { background: var(--omex-red-soft); border-color: var(--omex-red); }
.soc-card:focus-visible { outline: 2px solid var(--omex-red); outline-offset: 2px; }

.soc-head { display: flex; align-items: center; gap: 12px; }
/* Le code entite tient lieu de pastille : c'est le mot que tout le monde emploie
   a l'oral (« la SAS », « la NBVO »), il doit se voir avant le nom complet. */
.soc-code { flex: 0 0 auto; min-width: 56px; text-align: center;
            font-size: 13px; font-weight: 800; letter-spacing: .5px;
            color: var(--omex-red-deep); background: var(--omex-red-soft);
            border-radius: var(--r-xs, 4px); padding: 7px 9px; }
.soc-nom { font-size: 15px; font-weight: 800; color: var(--omex-ink); line-height: 1.25; }
.soc-nature { font-size: 12px; color: var(--omex-ink-2); margin-top: 2px; }

/* Faits d'identite : deux colonnes, libelle au-dessus de la valeur. Aligne, dense,
   lisible en diagonale — c'est la densite du cockpit DAF, pas une fiche aeree. */
.soc-faits { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px;
             align-content: start;
             margin: 0; padding: 11px 0 0; border-top: 1px solid var(--omex-hairline); }
.soc-faits > div { min-width: 0; }
.soc-faits dt { font-size: 11px; font-weight: 700; letter-spacing: .3px;
                text-transform: uppercase; color: var(--omex-ink-2); }
.soc-faits dd { margin: 2px 0 0; font-size: 13px; color: var(--omex-ink);
                font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Une valeur absente ne se peint pas en gris clair au point de disparaitre :
   elle reste lisible, et elle porte une infobulle qui dit POURQUOI elle manque. */
.soc-faits dd.vide { color: var(--omex-ink-2); font-style: italic; }

/* margin-top:auto colle le pied EN BAS de la carte : sans lui, une valeur qui passe
   a la ligne (« Metallurgie nationale · IDCC 3248 ») decale le lien « Ouvrir » d'une
   carte a l'autre, et l'oeil percoit un desalignement la ou il n'y a qu'un texte plus
   long. Les cartes d'une meme ligne finissent alors toutes a la meme hauteur. */
.soc-pied { display: flex; align-items: center; justify-content: space-between;
            gap: 10px; margin-top: auto; padding-top: 4px; }
.soc-ouvrir { font-size: 13px; font-weight: 700; color: var(--omex-red-deep); }

/* --- Sixieme dalle : Admin ERP ---------------------------------------------
   Demandee par le DDO le 13/08/2026. Elle vit dans la meme grille que les
   societes, mais elle N'EN EST PAS UNE : les cinq premieres sont des personnes
   morales, celle-ci est l'outil lui-meme.

   D'ou le seul ecart de peinture de tout l'ecran : filet superieur ENCRE au
   lieu de rouge, pastille sur fond neutre. Le rouge OMEX marque les entites du
   groupe ; le prendre ici ferait lire une sixieme societe au coin de l'oeil,
   avant meme d'avoir lu le titre. Tout le reste — grille, densite, pied de
   carte, survol — est rigoureusement identique : c'est la meme famille d'objet,
   pas un objet etranger. */
.soc-card.adm { border-top-color: var(--omex-ink); }
.soc-card.adm:hover { background: var(--omex-surface-2, var(--omex-red-soft));
                      border-color: var(--omex-ink-2); }
.soc-card.adm .soc-code { color: var(--omex-ink); background: var(--omex-hairline); }
.soc-card.adm .soc-ouvrir { color: var(--omex-ink); }

/* --- Ecran Admin ERP --------------------------------------------------------
   Des tableaux, pas des cartes : on y cherche une ligne precise (un compte, un
   port), et l'oeil balaie une colonne bien plus vite qu'une grille de vignettes. */
.adm-bloc { margin-bottom: 26px; }
.adm-bloc h2 { font-size: 15px; font-weight: 800; color: var(--omex-ink);
               margin: 0 0 4px; }
.adm-bloc .adm-sous { font-size: 12.5px; color: var(--omex-ink-2); margin: 0 0 10px; }

.adm-tab-cadre { overflow-x: auto; border: 1px solid var(--omex-surface-brd);
                 border-radius: var(--r-md, 12px); background: var(--omex-surface); }
.adm-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-tab th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .3px;
              text-transform: uppercase; color: var(--omex-ink-2);
              padding: 10px 12px; border-bottom: 1px solid var(--omex-surface-brd);
              white-space: nowrap; }
.adm-tab td { padding: 9px 12px; border-bottom: 1px solid var(--omex-hairline);
              color: var(--omex-ink); vertical-align: top;
              font-variant-numeric: tabular-nums; }
.adm-tab tr:last-child td { border-bottom: none; }

/* ⚠ CORRECTION DU 13/08/2026 — une ligne en anomalie ne se signalait que par un
   fond rose. Passe en niveaux de gris (impression, videoprojecteur, daltonisme),
   ce rose devient un gris quasi identique au blanc : l'information disparait.
   Elle porte donc un FILET LATERAL epais, non chromatique par sa forme, en plus
   du fond — et la cellule elle-meme porte le mot « anomalie ». */
.adm-tab tr.alerte td { background: var(--alert-bg); }
.adm-tab tr.alerte td:first-child { box-shadow: inset 3px 0 0 var(--alert); }

.adm-tab .mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.adm-tab .faible { color: var(--omex-ink-2); }

/* --- Lecture en diagonale d'un tableau large --------------------------------
   Le registre des ports compte 23 lignes et 6 colonnes, les comptes 7 colonnes.
   Sans en-tete fige, on defile et on ne sait plus quelle colonne on lit ; sans
   premiere colonne figee, on perd la cle de la ligne des qu'on defile a droite. */
.adm-tab-cadre { max-height: 62vh; overflow: auto; }
.adm-tab thead th { position: sticky; top: 0; z-index: 2;
                    background: var(--omex-surface); }
.adm-tab td:first-child, .adm-tab th:first-child { position: sticky; left: 0;
                    background: var(--omex-surface); }
.adm-tab thead th:first-child { z-index: 3; }
.adm-tab tr.alerte td:first-child { background: var(--alert-bg); }

/* Une pastille d'etat ne se lit JAMAIS a la seule couleur : elle porte son mot.
   Un ecran qui ne distingue le vivant du dormant que par une nuance de rouge est
   illisible pour qui percoit mal les couleurs, et sur un videoprojecteur. */
.adm-etat { display: inline-block; font-size: 11px; font-weight: 700;
            letter-spacing: .2px; padding: 3px 8px; border-radius: 999px;
            border: 1px solid var(--omex-surface-brd); color: var(--omex-ink-2);
            white-space: nowrap; }

/* ⚠ CORRECTION DU 13/08/2026 — inversion semantique corrigee.
   La classe « .adm-etat.vif » peignait « en_service » en ROUGE. Dans tout le
   reste de l'ERP le rouge signale l'alerte : ici il signifiait « tout va bien »,
   et un service en panne ressortait en gris pale. Sur un ecran qui se lit en
   diagonale, la diagonale mentait. Les etats prennent desormais les tokens
   d'etat de la charte (--ok / --warn / --alert), et jamais le rouge OMEX, qui
   reste reserve a l'action et au focus. */
.adm-etat.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.adm-etat.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.adm-etat.alert { color: var(--alert); background: var(--alert-bg); border-color: transparent; }
.adm-etat.nd { color: var(--omex-ink-2); background: var(--omex-surface-2); }

/* L'avertissement porte ce que l'ecran ne peut pas faire, et pourquoi. Sans lui,
   un administrateur cherche le bouton « creer un compte » et croit a une panne. */
.adm-avis { border: 1px solid var(--omex-surface-brd); border-left: 3px solid var(--omex-ink);
            border-radius: var(--r-md, 12px); background: var(--omex-surface);
            padding: 12px 14px; margin-bottom: 22px;
            font-size: 13px; color: var(--omex-ink); line-height: 1.5; }

/* --- Barre de vues : elle ouvre l'ecran, elle ne le termine pas -------------
   .po-actions est concu comme un pied de formulaire (trait au-dessus, marge
   haute). En tete d'ecran il faut l'inverse, sinon la barre semble appartenir
   au bloc precedent. */
.po-actions.erp-vues { margin-top: 0; padding-top: 0; border-top: none; margin-bottom: 14px; }

/* ============================================================================
   COCKPIT ADMIN ERP — la couche de SYNTHESE, posee AU-DESSUS des trois tableaux.

   Elle ne les remplace pas : les tableaux restent la preuve consultable. Ce qui
   manquait, c'est la reponse a « est-ce que ca va ? » sans avoir a defiler.

   Ordre impose, de haut en bas :
     1. bandeau de sante        (un seul des trois gabarits a la fois)
     2. quatre cartes de mesure (.kpi-grid, le composant du cockpit DAF)
     3. anomalies ordonnees par gravite
     4. ce que l'ecran NE PEUT PAS verifier, en toutes lettres
     5. le detail des controles
     6. les trois tableaux de preuve

   ⚠ AUCUNE COULEUR EN DUR ICI. Les tokens --ok / --warn / --alert / --info sont
   declines en clair ET en sombre dans _omex_style.css ; un hex ecrit ici
   casserait au premier basculement de theme. Le rouge OMEX reste reserve a
   l'action et au focus : il ne peint aucun etat.
   ============================================================================ */

/* --- Fraicheur : l'heure de CALCUL, pas l'heure qu'il est -------------------
   Un cockpit sans horodatage laisse croire au temps reel. Cette page ne se
   rafraichit pas toute seule, et c'est voulu : un setInterval sonderait les
   ports en continu dans un WebView2 ouvert pendant des jours. */
.adm-frais { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
             font-size: 12.5px; color: var(--omex-ink-2); margin: 0 0 14px; }
.adm-frais b { color: var(--omex-ink); font-variant-numeric: tabular-nums; }

/* --- Bandeau de sante ------------------------------------------------------
   TROIS gabarits distincts dans le HTML, jamais un seul gabarit avec une
   variable vide : « 0 anomalie », « impossible de verifier » et « N anomalies »
   sont trois reponses differentes. Confondre les deux premieres fait passer une
   panne de lecture pour une bonne nouvelle. */
.adm-bandeau { display: flex; align-items: flex-start; gap: 14px;
               border: 1px solid var(--omex-surface-brd);
               border-left: 4px solid var(--omex-ink-2);
               border-radius: var(--r-md, 12px);
               background: var(--omex-surface); padding: 15px 18px;
               margin-bottom: 16px; }
.adm-bandeau-ico { flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
                   color: var(--omex-ink-2); }
.adm-bandeau-ico svg { width: 26px; height: 26px; }
.adm-bandeau-corps { flex: 1 1 auto; min-width: 0; }
.adm-bandeau-titre { font-size: var(--fs-md, 17px); font-weight: 800;
                     color: var(--omex-ink); line-height: 1.25; }
.adm-bandeau-sous { font-size: 13px; color: var(--omex-ink-2); margin-top: 5px;
                    line-height: 1.5; }
.adm-bandeau-sous b { color: var(--omex-ink); font-variant-numeric: tabular-nums; }
.adm-bandeau-badge { flex: 0 0 auto; }

.adm-bandeau--ok { border-left-color: var(--ok); }
.adm-bandeau--ok .adm-bandeau-ico { color: var(--ok); }
.adm-bandeau--nd { border-left-color: var(--omex-ink-2); }
.adm-bandeau--alerte { border-left-color: var(--alert); background: var(--alert-bg); }
.adm-bandeau--alerte .adm-bandeau-ico { color: var(--alert); }

/* Une carte de mesure qui ne PEUT PAS conclure ne se peint ni en vert ni en
   rouge : elle prend le gris de .status-badge.nd, qui dit deja « non determine ». */
.kpi.nd .val { color: var(--omex-ink-2); }
.kpi .val { font-variant-numeric: tabular-nums; }

/* --- Anomalies -------------------------------------------------------------
   Une liste ORDONNEE : la gravite se lit dans l'ordre, pas seulement dans la
   couleur. Chaque ligne porte une FORME differente (triangle / cercle / carre)
   ET un prefixe en toutes lettres — un ecran passe en niveaux de gris doit
   rester lisible. */
.adm-anomalies { list-style: none; margin: 0 0 8px; padding: 0;
                 display: flex; flex-direction: column; gap: 10px; }
.adm-anomalie { display: flex; gap: 12px; align-items: flex-start;
                border: 1px solid var(--omex-surface-brd);
                border-left: 4px solid var(--omex-ink-2);
                border-radius: var(--r-md, 12px);
                background: var(--omex-surface); padding: 12px 14px; }
.adm-anomalie-ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px;
                    color: var(--omex-ink-2); }
.adm-anomalie-ico svg { width: 18px; height: 18px; }
.adm-anomalie-corps { flex: 1 1 auto; min-width: 0; }
.adm-anomalie-titre { font-size: 14px; font-weight: 800; color: var(--omex-ink);
                      line-height: 1.35; }
.adm-anomalie-rang { font-weight: 800; letter-spacing: .4px; margin-right: 6px; }
.adm-anomalie-preuve { font-size: 12.5px; color: var(--omex-ink-2);
                       margin-top: 4px; line-height: 1.5; }
.adm-anomalie-action { font-size: 12.5px; color: var(--omex-ink); margin-top: 6px;
                       line-height: 1.5; }
.adm-anomalie-action b { font-weight: 700; }
.adm-anomalie-tags { flex: 0 0 auto; display: flex; flex-direction: column;
                     align-items: flex-end; gap: 5px; }
.adm-anomalie-code { font-family: ui-monospace, Consolas, monospace; font-size: 11px;
                     color: var(--omex-ink-2); }

.adm-anomalie.critique { border-left-color: var(--alert); background: var(--alert-bg); }
.adm-anomalie.critique .adm-anomalie-ico,
.adm-anomalie.critique .adm-anomalie-rang { color: var(--alert); }
.adm-anomalie.majeure { border-left-color: var(--warn); }
.adm-anomalie.majeure .adm-anomalie-ico,
.adm-anomalie.majeure .adm-anomalie-rang { color: var(--warn); }
.adm-anomalie.info { border-left-color: var(--info); }
.adm-anomalie.info .adm-anomalie-ico,
.adm-anomalie.info .adm-anomalie-rang { color: var(--info); }

/* --- Ce que l'ecran ne peut PAS verifier ------------------------------------
   Bloc a part entiere, jamais melange aux anomalies et jamais compte dans leur
   nombre : une question sans reponse n'est pas un probleme constate, et un
   probleme constate n'est pas une question sans reponse. */
.adm-limites { border: 1px solid var(--omex-surface-brd);
               border-left: 4px solid var(--omex-ink-2);
               border-radius: var(--r-md, 12px); background: var(--omex-surface-2);
               padding: 13px 16px; margin-bottom: 22px; }
.adm-limites h3 { font-size: 13px; font-weight: 800; color: var(--omex-ink);
                  margin: 0 0 8px; }
.adm-limites ul { list-style: none; margin: 0; padding: 0;
                  display: flex; flex-direction: column; gap: 9px; }
.adm-limites li { font-size: 12.5px; color: var(--omex-ink-2); line-height: 1.5; }
.adm-limites b { color: var(--omex-ink); }

/* Detail des observations d'un controle qui n'a pas pu conclure : on nomme les
   lignes concernees, on ne les cache pas derriere un compteur. */
.adm-obs { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px;
           border-left: 1px solid var(--omex-hairline);
           display: flex; flex-direction: column; gap: 3px; }
.adm-obs li { font-size: 12px; color: var(--omex-ink-2);
              font-family: ui-monospace, Consolas, monospace; }

/* --- Tableau des controles -------------------------------------------------
   Onze lignes : chaque famille de controle dit son etat, son perimetre et sa
   reserve. C'est la regle 5 rendue mecanique — aucune famille ne peut disparaitre
   de l'ecran faute de resultat. */
.adm-tab td.adm-col-etat { white-space: nowrap; }
.adm-tab td.adm-col-res { max-width: 640px; }
.adm-reserve { display: block; font-size: 12px; color: var(--omex-ink-2);
               margin-top: 4px; line-height: 1.45; }

/* Sobriete de mouvement : aucune animation propre a ce cockpit. Les blocs
   herites de la charte respectent deja prefers-reduced-motion ; on n'ajoute
   rien qui bouge sur un ecran de securite. */
@media (prefers-reduced-motion: reduce) {
  .adm-bandeau, .adm-anomalie { transition: none; }
}

@media (max-width: 860px) {
  .adm-bandeau { flex-wrap: wrap; }
  .adm-anomalie { flex-wrap: wrap; }
  .adm-anomalie-tags { flex-direction: row; align-items: center; }
}

/* --- Colonne de selection du cockpit Admin ---------------------------------
   Le DDO a demande « une barre de selection A GAUCHE comme le DAF ». Premiere
   tentative : une barre HORIZONTALE (.seg). Mauvais composant — .seg est la
   bascule de simulation du DAF, pas sa navigation. Sa navigation, c'est la
   colonne de gauche : .shell / .nav-col / .nav-block / .navitem, deja dans la
   charte partagee. On la reprend TELLE QUELLE ; on n'ajoute ici que le compteur
   porte par chaque entree et le mecanisme d'affichage des vues.

   POURQUOI UN COMPTEUR PAR ENTREE : sans lui, il faut ouvrir les cinq vues pour
   savoir laquelle merite un regard. Une navigation qui cache l'information
   qu'elle organise coute plus de temps que la liste qu'elle remplace. */

/* .shell porte sa propre largeur et son propre padding : imbrique dans .po-wrap,
   il en ajouterait une seconde couche et decalerait la colonne. */
.po-wrap .adm-shell { padding: 0; max-width: none; }

.adm-compte { margin-left: auto; padding: 1px 8px; border-radius: 999px;
              font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
              background: var(--omex-hairline); color: var(--omex-ink-2); }
.navitem[aria-selected="true"] .adm-compte { background: var(--omex-red); color: #fff; }

/* Une entree qui porte une anomalie se voit AVANT d'etre ouverte — par sa
   couleur ET par son chiffre, jamais par la couleur seule. */
.adm-compte.adm-compte-alerte { background: var(--alert-bg); color: var(--alert); }
.navitem[aria-selected="true"] .adm-compte.adm-compte-alerte { background: #fff; color: var(--alert); }

/* Les cinq vues coexistent dans la page : la bascule est locale, sans appel
   reseau. Un ecran qui repart chercher ses donnees a chaque entree se vide
   quand le serveur tousse. */
.adm-vue { display: none; }
.adm-vue.on { display: block; }

/* ============================================================================
   LARGEUR ET POLICE DU COCKPIT ADMIN — corrections du 13/08/2026, sur remarque
   du DDO : « je dois faire glisser le tableau » et « c'est quoi cette police ».
   Les deux avaient la meme origine : j'ai pose l'ecran sans regarder ce qu'il
   devenait une fois rempli de vraies donnees.
   ============================================================================ */

/* 1. LA LARGEUR. .po-wrap plafonne a 1180 px — bon pour une page de lecture,
   trop etroit des qu'on lui retire les 300 px de la colonne de navigation : il
   restait environ 840 px pour huit colonnes. Le tableau debordait, et il fallait
   le faire glisser pour lire l'etat d'un compte.

   Un tableau qu'on fait glisser perd sa premiere colonne du regard : on ne sait
   plus de quelle ligne on lit la valeur. C'est precisement ce qu'un ecran de
   controle ne doit jamais imposer.

   :has() cible le seul ecran concerne, sans rien changer aux autres et sans
   drapeau a poser puis a retirer en JavaScript — un etat qu'on oublie de nettoyer
   laisse un ecran de lecture affiche en pleine largeur. */
.po-wrap:has(.adm-shell) { max-width: 1720px; }

/* 2. LA POLICE. Les identifiants etaient en chasse fixe (Consolas). C'est la
   police d'un terminal, pas d'un ecran de gestion : elle jure avec le reste de
   la charte et se lit moins bien en tableau. « brabant.sebastien » n'est pas du
   code, c'est un nom.
   Ce qui reste en chasse fixe : uniquement les codes de controle (CPT_ESSAI) et
   les chemins de fichiers — la, l'alignement caractere par caractere sert. */
.adm-tab .mono { font-family: inherit; font-size: 13px;
                 font-variant-numeric: tabular-nums; }

/* 3. CE QUI NE SE COUPE PAS EN DEUX LIGNES. Un identifiant coupe se lit comme
   deux valeurs, une liste de societes coupee double la hauteur de chaque ligne. */
.adm-tab td:first-child { white-space: nowrap; }
.adm-tab .adm-col-soc { white-space: nowrap; }

/* La marque « anomalie » / « point connu » se pose A COTE de l'identifiant, pas
   dessous : en dessous, elle ajoute une ligne a chaque rangee concernee et
   desaligne tout le tableau. */
.adm-tab td:first-child .adm-etat,
.adm-tab td:first-child .status-badge { margin-left: 8px; vertical-align: middle; }

/* --- Sous-chapitres par societe, sous « Comptes » ---------------------------
   Demandes par le DDO le 13/08/2026. Le composant .nav-subitems / .navsubitem
   vient de la charte partagee — c'est la sous-navigation du cockpit DAF.

   Un seul ecart, et c'est le meme que pour les onglets : la charte peint l'etat
   actif en INDIGO, couleur reservee au monde « simulation » du DAF. Sur un ecran
   d'administration en rouge et encre, elle poserait une tache bleue sans
   signification. On surcharge ici, jamais dans _omex_style.css. */
.adm-shell .navsubitem:hover { background: var(--omex-red-soft); color: var(--omex-red-deep); }
.adm-shell .navsubitem:focus-visible { outline-color: var(--omex-red); }
.adm-shell .navsubitem[aria-selected="true"] { color: var(--omex-red-deep); }
.adm-shell .navsubitem[aria-selected="true"]::before { background: var(--omex-red); }

/* Le compteur d'un sous-chapitre est plus discret que celui d'un chapitre : il
   ne doit pas peser autant que le total de la vue. */
.adm-shell .navsubitem .adm-compte { font-size: 10.5px; padding: 0 6px; }

/* Une ligne filtree se CACHE, elle ne se supprime pas : le tableau reste
   intact en memoire, revenir a « Toutes » n'a rien a reconstruire, et le
   filtre ne peut pas perdre une ligne en route. */
.adm-tab tr.adm-masque { display: none; }
/* La meme classe, mais pour N'IMPORTE QUEL element : un tableau, un titre,
   un bloc. Posee le 16/10/2026 — la regle ci-dessus ne vise que les <tr>,
   donc masquer un tableau entier ne faisait rien, et en silence. */
.adm-masque { display: none !important; }

/* ============================================================================
   PERSONNEL:CSS — personnel d'une société, puis droits d'une personne.
   Ajout du 17/08/2026.

   Demande du DDO du 13/08/2026 à 16h48 : cliquer une société, voir son
   personnel EN ACTIVITÉ, cliquer une personne, ouvrir et modifier ses droits.

   TROIS RÈGLES TENUES ICI, et aucune n'est décorative :
     1. AUCUNE COULEUR EN DUR. Uniquement les jetons déjà déclinés en clair et
        en sombre : --omex-red / --omex-red-deep / --omex-red-soft, --omex-ink,
        --omex-ink-2, --omex-surface, --omex-surface-2, --omex-surface-brd,
        --omex-hairline, et --ok / --warn / --alert pour les états. Le rouge
        OMEX reste réservé à l'action, au focus et à la sélection : il ne peint
        aucun état. Aucune couleur indigo : c'est celle du monde « simulation »
        du cockpit DAF, elle n'a rien à faire sur un écran d'administration.
     2. AUCUNE CLASSE NEUVE QUAND L'EXISTANT FAIT LE TRAVAIL. Les blocs
        reprennent .adm-bloc, les états .adm-etat.ok|warn|alert|nd, les motifs
        de non-lecture .adm-limites, les avis .adm-avis, les boutons .po-btn.
        Ce qui suit ne couvre QUE la liste de personnes et le formulaire de
        droits, qui n'existaient pas.
     3. TOUT CE QUI SE CLIQUE A UN FOCUS VISIBLE. Les boutons héritent de
        .po-btn, qui porte déjà son contour ; les champs du formulaire prennent
        le même contour rouge que le reste de la charte. Un composant neuf sans
        focus clavier serait une régression sur un écran qui ouvre et retire des
        droits.

   Les commentaires de ce bloc sont accentués, comme ceux des deux autres
   feuilles de la charte : ils ne sont jamais rendus à l'écran, et un
   commentaire français sans accents se relit mal.
   ============================================================================ */

/* État de CHARGEMENT — obligatoire, et non cosmétique. La lecture passe par
   l'application du personnel et peut durer jusqu'à cinq secondes : sans cette
   phrase, on clique, rien ne bouge, on reclique, et deux lectures partent. */
.adm-attente { font-size: 13px; color: var(--omex-ink-2); line-height: 1.5;
               margin: 0; padding: 10px 0; }
.adm-attente b { color: var(--omex-ink); }

/* Le filtre appliqué se DIT, sous le constat qu'il produit : « aucun salarié »
   ne veut rien dire tant qu'on ignore ce qui a été retiré de la liste. */
.adm-pers-filtre { display: block; margin-top: 6px; font-size: 12.5px;
                   color: var(--omex-ink-2); line-height: 1.5; }

/* --- La liste des personnes ------------------------------------------------
   Une LISTE, pas un tableau : trois informations par personne (qui, quelle
   fonction, quel accès) et une action au bout. Un tableau imposerait des
   colonnes vides pour la majorité des lignes, qui n'ont pas de compte ERP. */
.adm-pers-liste { list-style: none; margin: 0; padding: 0;
                  border: 1px solid var(--omex-surface-brd);
                  border-radius: var(--r-md, 12px);
                  background: var(--omex-surface); overflow: hidden; }
.adm-pers-ligne { display: flex; align-items: flex-start; gap: 14px;
                  padding: 11px 14px;
                  border-bottom: 1px solid var(--omex-hairline); }
.adm-pers-ligne:last-child { border-bottom: none; }
.adm-pers-corps { flex: 1 1 auto; min-width: 0; }
.adm-pers-nom { font-size: 14px; font-weight: 800; color: var(--omex-ink);
                line-height: 1.3; }
/* La fonction vient telle quelle du classeur du personnel : c'est du texte
   libre, jamais une classification conventionnelle. On l'affiche sans la
   retoucher. */
.adm-pers-fonction { font-size: 12.5px; color: var(--omex-ink-2); margin-top: 2px;
                     line-height: 1.45; }
.adm-pers-acces { font-size: 12.5px; color: var(--omex-ink-2); margin-top: 6px;
                  line-height: 1.5; display: flex; flex-wrap: wrap;
                  align-items: center; gap: 6px; }
.adm-pers-etiquettes { flex: 0 0 auto; display: flex; flex-direction: column;
                       align-items: flex-end; gap: 7px; }
/* Le bouton n'existe QUE sur un rapprochement certain. Une personne sans compte
   ERP, ou dont deux comptes portent le nom, n'a pas de bouton grisé : elle a
   une phrase qui dit quoi faire. Un bouton éteint se lit comme une promesse. */
.adm-pers-lien { white-space: nowrap; }

/* --- Le formulaire des droits ---------------------------------------------- */
.adm-droits { border: 1px solid var(--omex-surface-brd);
              border-left: 4px solid var(--omex-red);
              border-radius: var(--r-md, 12px);
              background: var(--omex-surface); padding: 14px 16px; }
.adm-droits-tete { padding-bottom: 10px; margin-bottom: 12px;
                   border-bottom: 1px solid var(--omex-hairline); }
.adm-droits-champ { margin-bottom: 14px; }
.adm-droits-champ > label,
.adm-droits-titre { display: block; font-size: 11px; font-weight: 700;
                    letter-spacing: .3px; text-transform: uppercase;
                    color: var(--omex-ink-2); margin-bottom: 6px; }
.adm-droits-champ select { all: unset; cursor: pointer; box-sizing: border-box;
                           font-size: 13px; font-weight: 600; color: var(--omex-ink);
                           background: var(--omex-surface);
                           border: 1px solid var(--omex-surface-brd);
                           border-radius: 8px; padding: 7px 11px; min-width: 240px; }
.adm-droits-champ select:hover { border-color: var(--omex-red); }
.adm-droits-champ select:focus-visible { outline: 2px solid var(--omex-red);
                                         outline-offset: 2px; }

/* Le périmètre en CASES À COCHER, et en CODES société. Une liste à sélection
   multiple cache ce qui n'est pas coché ; ici, tout le périmètre possible est
   visible d'un coup, et l'on voit ce qu'on retire autant que ce qu'on ajoute. */
.adm-droits-choix { display: flex; align-items: baseline; gap: 8px;
                    font-size: 13px; color: var(--omex-ink-2);
                    padding: 5px 8px; border-radius: 8px; cursor: pointer; }
.adm-droits-choix:hover { background: var(--omex-red-soft); }
.adm-droits-choix b { color: var(--omex-ink); font-weight: 800;
                      min-width: 56px; display: inline-block; }
.adm-droits-choix input { accent-color: var(--omex-red); cursor: pointer; }
.adm-droits-choix input:focus-visible { outline: 2px solid var(--omex-red);
                                        outline-offset: 2px; }

/* Le pied DIT ce que l'enregistrement va faire AVANT de le faire : la personne
   modifiée est déconnectée sur-le-champ. Sans cette phrase, elle se retrouve
   dehors sans que l'administrateur sache qu'il l'a provoqué. */
.adm-droits-pied { padding-top: 12px; border-top: 1px solid var(--omex-hairline);
                   display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.adm-droits-pied p { flex: 1 1 100%; margin: 0 0 4px; font-size: 12.5px;
                     color: var(--omex-ink-2); line-height: 1.5; }
.adm-droits-pied p b { color: var(--omex-ink); }
.adm-droits-retour { white-space: nowrap; }

/* L'AVANT et l'APRÈS s'affichent après coup, en CODES société : « rôle
   direction, périmètre SAS · MAINT » se relit, « [1, 2] » se déchiffre. */
.adm-droits-diff { display: block; margin-top: 6px; font-size: 12.5px;
                   color: var(--omex-ink-2); line-height: 1.5; }
.adm-droits-diff b { color: var(--omex-ink); }

@media (max-width: 860px) {
  .adm-pers-ligne { flex-wrap: wrap; }
  .adm-pers-etiquettes { flex-direction: row; align-items: center; }
  .adm-droits-champ select { min-width: 0; width: 100%; }
}

/* --- Septieme dalle : Mon espace --------------------------------------------
   Ni une societe (les cinq premieres), ni l'outil (Admin ERP) : la personne.
   Troisieme signature visuelle, et elle doit se lire SANS la couleur — filet
   superieur en pointilles. Un ecran de gestion se consulte aussi sur un
   videoprojecteur et s'imprime parfois en noir et blanc. */
.soc-card.moi { border-top-style: dashed; border-top-color: var(--omex-ink-2); }
.soc-card.moi:hover { background: var(--omex-surface-2, var(--omex-red-soft));
                      border-color: var(--omex-ink-2); }
.soc-card.moi .soc-code { color: var(--omex-ink-2); background: var(--omex-hairline); }
.soc-card.moi .soc-ouvrir { color: var(--omex-ink-2); }

/* Le secret du second facteur s'affiche UNE FOIS, a l'enrolement. Il se recopie
   a la main quand la camera ne lit pas le code graphique : il doit donc se
   couper proprement et rester lisible caractere par caractere. */
/* Le carre a viser (19/08/2026). Taille CHOISIE, pas subie : en dessous de
   160 px, les appareils photo d'entree de gamme peinent sur un ecran qui
   reflete ; au-dessus de 200 px, il pousse le champ des six chiffres hors
   de l'ecran d'un telephone, et on ne voit plus ou taper. */
.adm-qr { margin: .8rem 0; line-height: 0; }
.adm-qr svg { width: 190px; height: 190px; display: block;
              background: var(--omex-surface); border: 1px solid var(--omex-hairline);
              border-radius: var(--r-xs, 4px); padding: 6px; }
@media (max-width: 520px) { .adm-qr svg { width: 160px; height: 160px; } }

.adm-secret { word-break: break-all; font-size: 15px; letter-spacing: 1px;
              background: var(--omex-surface-2); border: 1px solid var(--omex-hairline);
              border-radius: var(--r-xs, 4px); padding: 10px 12px; margin: 8px 0; }

/* --- Grille des modules, dans le panneau des droits -------------------------
   Demandee par le DDO le 18/08/2026, capture de la grille de permissions du NAS
   a l'appui : une ligne par module, une case a cocher, et c'est lui qui decide.

   TROIS ETATS DOIVENT SE LIRE D'UN COUP D'OEIL, et le troisieme est le plus
   important : ce qui vient du ROLE, et ce qui a ete decide A LA MAIN pour cette
   personne. Sans cette distinction, on ne sait plus au bout d'un mois ce qui
   releve du metier et ce qui releve d'une exception ponctuelle.

   L'exception ne se signale PAS que par la couleur : elle porte aussi un filet
   epais a gauche et un libelle en toutes lettres (« ouvert par exception »). Un
   ecran de droits se relit sur un videoprojecteur, parfois s'imprime, et se
   consulte par des gens qui distinguent mal le rouge du gris. */
.adm-mod-ligne { display: flex; align-items: center; gap: 10px;
                 padding: 8px 10px; border-radius: var(--r-xs, 4px);
                 border-left: 3px solid transparent; }
.adm-mod-ligne:hover { background: var(--omex-surface-2); }
.adm-mod-nom { flex: 1 1 auto; font-size: 13px; color: var(--omex-ink); }
.adm-mod-source { flex: 0 0 auto; font-size: 12px; color: var(--omex-ink-2); }

/* L'EXCEPTION — ce que le DDO a decide lui-meme, contre le socle du role. */
.adm-mod-ligne.exception { border-left-color: var(--omex-red);
                           background: var(--omex-red-soft); }
.adm-mod-ligne.exception .adm-mod-source { color: var(--omex-red-deep);
                                           font-weight: 700; }

/* --- Intertitre de categorie dans la grille des modules ---------------------
   Demande du DDO le 18/08/2026 : neuf modules a plat se lisent mal. Le
   groupement suit les PROCESSUS et les dossiers du NAS — pas une classification
   inventee pour l'ecran, qui divergerait du reste au premier changement.

   Discret par construction : c'est un reperage, pas un titre. Il ne doit pas
   peser plus lourd que les modules qu'il annonce, sinon l'oeil lit les
   intertitres au lieu des cases a cocher. */
.adm-mod-bloc { border-top: 1px solid var(--omex-hairline); }
.adm-mod-bloc:first-child { border-top: 0; }

/* Le titre est un BOUTON, pas un texte cliquable : au clavier il se traverse
   avec Tab et s'active avec Entree, sans qu'on ait rien a ajouter. Un div muni
   d'un gestionnaire de clic n'existe pas pour qui n'a pas de souris. */
.adm-mod-groupe { display: flex; align-items: center; gap: 8px; width: 100%;
                  background: none; border: 0; text-align: left; cursor: pointer;
                  font-size: 11px; font-weight: 700; letter-spacing: .4px;
                  text-transform: uppercase; color: var(--omex-ink-2);
                  padding: 12px 4px 8px; font-family: inherit; }
.adm-mod-groupe:hover { color: var(--omex-ink); }
.adm-mod-groupe:focus-visible { outline: 2px solid var(--omex-red); outline-offset: 2px; }

/* Le chevron tourne : c'est le seul indice qui dit qu'un titre se clique.
   Dessine en CSS plutot qu'en caractere, pour ne pas dependre d'une police. */
.adm-mod-chevron { flex: 0 0 auto; width: 7px; height: 7px;
                   border-right: 2px solid currentColor;
                   border-bottom: 2px solid currentColor;
                   transform: rotate(45deg); margin-left: 2px;
                   transition: transform .12s ease-out; }
.adm-mod-bloc.replie .adm-mod-chevron { transform: rotate(-45deg); }

/* ⚠ LE COMPTEUR N'EST PAS DECORATIF. Un groupe replie sans lui CACHE
   l'information au lieu de la ranger : on ne sait plus s'il y a quelque chose
   dedans, et on finit par tout deplier a chaque fois. */
.adm-mod-compte { margin-left: auto; font-weight: 400; letter-spacing: 0;
                  text-transform: none; font-size: 12px; color: var(--omex-ink-2); }

.adm-mod-bloc.replie .adm-mod-corps { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   CHAPITRE 16. ASSURANCE — tableau de bord des assurances (module Piloter).
   Réutilise les tokens OMEX de la charte : rien de nouveau côté couleurs, on
   se pose sur --omex-red / --ok / --warn / --alert et les surfaces claires.
   Aucune règle ici n'assombrit l'écran : on reste sur le fond clair d'ERP v2.
   ═══════════════════════════════════════════════════════════════════════ */

/* Badges d'entités couvertes — pastilles sobres, sur la même grammaire que
   .badge-neutral. GROUPE (couvre tout) prend l'accent rouge de la maison. */
.assur-ent { display:inline-block; font-size:11px; font-weight:700; line-height:1;
  padding:3px 7px; margin:2px 4px 2px 0; border-radius:999px;
  color:var(--omex-ink-2); background:var(--omex-surface-2);
  border:1px solid var(--omex-surface-brd); white-space:nowrap; }
.assur-ent.tous { color:var(--omex-red-deep); background:var(--omex-red-soft);
  border-color:transparent; }

/* Zone de dépôt d'un contrat PDF. */
.assur-depot { display:flex; align-items:center; gap:14px; cursor:pointer;
  margin:14px 0 6px; padding:16px 18px; border:2px dashed var(--omex-surface-brd);
  border-radius:var(--r-md,12px); background:var(--omex-surface-2);
  transition:border-color .15s ease-out, background .15s ease-out; }
.assur-depot:hover { border-color:var(--omex-red); background:var(--omex-red-soft); }
.assur-depot.survol { border-color:var(--omex-red); background:var(--omex-red-soft);
  box-shadow:0 0 0 3px var(--omex-red-soft); }
.assur-depot:focus-visible { outline:2px solid var(--omex-red); outline-offset:2px; }
.assur-depot::before { content:"⬇"; font-size:26px; color:var(--omex-red); line-height:1; }
.assur-depot-txt { display:flex; flex-direction:column; gap:2px; }
.assur-depot-txt b { font-size:15px; color:var(--omex-ink); }
.assur-depot-txt span { font-size:12.5px; color:var(--omex-ink-2); }
.assur-input { display:none; }

/* Message de retour après dépôt. */
.assur-msg { margin:8px 0 4px; padding:9px 13px; border-radius:var(--r-xs,4px);
  font-size:13px; background:var(--omex-surface-2); color:var(--omex-ink);
  border:1px solid var(--omex-surface-brd); }
.assur-msg.ok { background:var(--ok-bg); color:var(--ok); border-color:transparent; }
.assur-msg.warn { background:var(--warn-bg); color:var(--warn); border-color:transparent; }
.assur-msg.alert { background:var(--alert-bg); color:var(--alert); border-color:transparent; }

/* Lignes remarquables du tableau : à vérifier (import non validé), trou de couverture. */
table.datat tr.assur-averif td { background:var(--warn-bg); }
table.datat tr.assur-averif td:first-child { box-shadow:inset 3px 0 0 var(--warn); }
table.datat tr.assur-trou td:first-child { box-shadow:inset 3px 0 0 var(--alert); }
.assur-tagverif { display:inline-block; font-size:10px; font-weight:700;
  color:var(--warn); background:var(--warn-bg); border-radius:999px; padding:1px 7px;
  margin-left:4px; white-space:nowrap; }
/* « unique » qualifie un montant : c'est une PRÉCISION, pas une alerte.
   L'indigo qui était ici est la couleur du monde « simulation » du cockpit DAF,
   et la charte l'interdit sur les écrans de gestion — le fichier le dit
   lui-même deux fois plus haut (lignes 429 et 459) avant de l'employer ici.
   La règle voisine du 13/08 avait déjà fait ce geste sur .navsubitem.
   `--omex-ink-2` est une encre secondaire, déclinée en clair ET en sombre :
   un code écrit en dur casserait au premier basculement de thème. */
.assur-unique { font-size:11px; font-weight:700; color:var(--omex-ink-2); }
.assur-pdf { color:var(--omex-red-deep); font-weight:700; text-decoration:none;
  white-space:nowrap; }
.assur-pdf:hover { text-decoration:underline; }
.assur-edit { white-space:nowrap; }

/* Modale d'édition / validation d'une police. */
.assur-fond { position:fixed; inset:0; z-index:80; display:flex;
  align-items:flex-start; justify-content:center; padding:36px 16px; overflow:auto;
  background:rgba(13,43,78,.45); }
.assur-modale { width:min(760px,96vw); background:var(--omex-surface);
  border:1px solid var(--omex-surface-brd); border-top:3px solid var(--omex-red);
  border-radius:var(--r-md,12px); box-shadow:var(--omex-shadow); overflow:hidden; }
.assur-modale-tete { display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--omex-hairline); }
.assur-modale-tete b { font-size:16px; color:var(--omex-ink); }
.assur-modale-corps { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px;
  padding:16px 18px; }
.assur-f { display:flex; flex-direction:column; gap:4px; }
.assur-f.assur-f-large { grid-column:1 / -1; }
.assur-f > span, .assur-f span { font-size:11px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--omex-ink-2); }
.assur-f input, .assur-f select { font-family:var(--font); font-size:14px;
  padding:8px 10px; border:1px solid var(--omex-surface-brd); border-radius:var(--r-xs,4px);
  background:var(--omex-surface); color:var(--omex-ink); }
.assur-f input:focus, .assur-f select:focus { outline:2px solid var(--omex-red);
  outline-offset:1px; border-color:var(--omex-red); }
.assur-ents-edit { display:flex; flex-wrap:wrap; gap:6px 16px; padding-top:2px; }
.assur-chk { display:inline-flex; align-items:center; gap:5px; font-size:13px;
  font-weight:600; text-transform:none; letter-spacing:0; color:var(--omex-ink);
  cursor:pointer; }
.assur-modale-pied { display:flex; align-items:center; gap:10px;
  padding:13px 18px; border-top:1px solid var(--omex-hairline);
  background:var(--omex-surface-2); }
.assur-pied-espace { flex:1; }
.assur-danger { color:var(--alert); border-color:var(--alert-bg); }
.assur-danger:hover { background:var(--alert-bg); border-color:var(--alert); }

/* Tableau assurances compact : 12 colonnes tiennent dans la colonne de contenu
   (~1040 px) sans défilement horizontal. Le « assuré sur quoi » passe en
   sous-titre .erp-source sous le risque, à la manière des indicateurs. */
table.datat.assur-table { font-size:12.5px; }
table.datat.assur-table th, table.datat.assur-table td { padding:6px 8px; vertical-align:top; }
table.datat.assur-table td.erp-num, table.datat.assur-table th.erp-num { padding-right:10px; }
table.datat.assur-table .erp-source { margin-top:2px; }
table.datat.assur-table .assur-ent { font-size:10px; padding:2px 6px; margin:1px 3px 1px 0; }
table.datat.assur-table .po-flag { font-size:11.5px; }
table.datat.assur-table .assur-pdf { font-size:12px; }
/* Resserrage final pour tenir sans défilement horizontal. */
table.datat.assur-table { font-size:12px; }
table.datat.assur-table th, table.datat.assur-table td { padding:5px 6px; }
table.datat.assur-table .po-flag { white-space:nowrap; }
/* --- « MON ESPACE » : L'ECRAN D'ACCUEIL ET SES PAGES ---------------- */
/* Demande du DDO, repetee quatre fois : UN ECRAN D'ACCUEIL D'IPHONE.
   Pas une interpretation sobre, pas une grille de cartes : un ecran
   d'accueil de telephone. Le COMPORTEMENT n'est pas touche : .moi-panneau
   et body.moi-en-service restent ce qu'ils etaient.

   CE QUI FAIT UN ECRAN D'IPHONE, point par point, et ce que les versions
   precedentes rataient :
     · le CARRE ARRONDI continu, rayon a ~23 % du cote — ni 12 px (carte
       d'application de bureau), ni 50 % (pastille) ;
     · une icone PLEINE et COLOREE, glyphe blanc epais et large dans la
       tuile — pas un trait fin sur un fond clair ;
     · AUCUNE OMBRE PORTEE : sur un telephone les icones sont posees a plat
       sur le fond. Les ombres, c'est du bureau des annees 2010 ;
     · une grille SERREE et reguliere, les icones respirent par le vide
       entre elles, pas par des marges de page ;
     · un LIBELLE leger, petit, sur une ligne — jamais en gras ;
     · l'appui qui enfonce l'icone, et rien d'autre au survol.

   Les teintes sont des couleurs d'IDENTITE, pas de theme : sur un
   telephone l'agenda est rouge en clair comme en sombre. Elles ne suivent
   donc pas le basculement, et c'est voulu. Elles sont ecrites en hsl(),
   l'epreuve de l'ERP refusant les codes en diese. Le texte et les fonds,
   eux, restent sur les jetons du groupe. */

/* TROIS COLONNES, QUATRE RANGEES, AU MILIEU DE LA PAGE — douze services,
   la grille d'un telephone. Demande du DDO le 13/10 a 16 h 17. */
.moi-tuiles{display:grid;gap:26px 18px;margin:22px auto 10px;
  grid-template-columns:repeat(3,112px);justify-content:center;
  width:max-content;max-width:100%}
.moi-tuile{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:0;border:0;background:none;font:inherit;color:inherit;
  text-decoration:none;cursor:pointer;text-align:center}

/* --- INTER, EMBARQUEE DANS L'ERP ----------------------------------- */
/* Jumelle libre de San Francisco, la police des ecrans Apple. Licence SIL
   Open Font 1.1 : embarquement libre, y compris en entreprise.
   UN SEUL FICHIER : Inter v20 est une fonte VARIABLE — les telechargements
   de la graisse 400 et de la 600 rendaient le MEME octet, meme empreinte.
   Declarer deux faces aurait fait charger deux fois le meme fichier.
   SOUS-ENSEMBLE LATIN SEUL : ni cyrillique, ni grec, ni vietnamien, 48 256
   octets. Servie par l'ERP depuis /design/ : AUCUN appel sortant a
   l'affichage, comme les 24 fontes du site public. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;
  font-display:swap;src:url('/design/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
  U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
  U+2212,U+2215,U+FEFF,U+FFFD}

/* --- LE TITRE DE L'ECRAN -------------------------------------------- */
/* Centre au-dessus de la grille, et dans une police plus avenante que la
   police de corps : la pile de caracteres du systeme, qui donne Segoe UI
   Variable sur Windows — dessin plus actuel, chasses plus serrees. Aucune
   police n'est telechargee : l'ERP ne fait aucun appel sortant.
   :has() limite la regle a la page qui porte la grille, donc le titre des
   autres ecrans n'est pas touche et le HTML n'est pas modifie. */
body:has(.moi-tuiles) .po-h1{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
              "Inter","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  font-weight:600;font-size:32px;line-height:1.1;letter-spacing:-.035em;
  text-align:center;margin:26px 0 6px}
body:has(.moi-tuiles) .po-sub{text-align:center;max-width:46ch;
  margin-left:auto;margin-right:auto}
@media(max-width:560px){
  body:has(.moi-tuiles) .po-h1{font-size:25px;margin-top:18px}
}

/* --- l'icone : carre arrondi plein, glyphe blanc -------------------- */
.moi-tuile .moi-ic{display:flex;align-items:center;justify-content:center;
  width:78px;height:78px;border-radius:23%;
  transition:transform .12s ease,filter .12s ease}
.moi-tuile .moi-ic svg{width:42px;height:42px;color:hsl(0 0% 100%);
  stroke-width:1.7}
.moi-tuile .moi-t{font-weight:400;font-size:12.5px;line-height:1.2;
  letter-spacing:-.005em;max-width:96px;color:var(--omex-ink)}
/* le sous-titre n'a pas sa place sous une icone : il allonge la grille et
   personne ne le lit. Il reste dans le HTML pour les lecteurs d'ecran. */
.moi-tuile .moi-s{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* --- les etats ------------------------------------------------------ */
/* sur un telephone, l'icone s'enfonce sous le doigt. C'est tout. */
.moi-tuile:active .moi-ic{transform:scale(.9)}
.moi-tuile:hover .moi-ic{filter:brightness(1.06)}
.moi-tuile:focus{outline:none}
.moi-tuile:focus-visible .moi-ic{outline:2px solid var(--omex-red);
  outline-offset:3px}

/* --- les teintes, une par service ---------------------------------- */
.moi-ic-fourn{background:linear-gradient(165deg,hsl(28 95% 60%),hsl(20 90% 50%))}
.moi-ic-form {background:linear-gradient(165deg,hsl(266 72% 64%),hsl(258 66% 52%))}
.moi-ic-rh   {background:linear-gradient(165deg,hsl(199 92% 56%),hsl(208 88% 46%))}
.moi-ic-plan {background:linear-gradient(165deg,hsl(4 84% 62%),hsl(355 76% 50%))}
.moi-ic-doc  {background:linear-gradient(165deg,hsl(215 18% 64%),hsl(215 16% 50%))}
.moi-ic-cx   {background:linear-gradient(165deg,hsl(173 64% 48%),hsl(176 62% 38%))}
.moi-ic-msg  {background:linear-gradient(165deg,hsl(142 64% 52%),hsl(146 60% 40%))}
.moi-ic-mdp  {background:linear-gradient(165deg,hsl(212 80% 54%),hsl(220 74% 42%))}
.moi-ic-cong {background:linear-gradient(165deg,hsl(45 98% 60%),hsl(36 94% 52%))}
.moi-ic-point{background:linear-gradient(165deg,hsl(340 74% 60%),hsl(334 68% 48%))}
.moi-ic-soc  {background:linear-gradient(165deg,hsl(96 50% 48%),hsl(100 48% 37%))}
.moi-ic-mod  {background:linear-gradient(165deg,hsl(188 70% 50%),hsl(196 68% 40%))}

/* --- une tuile sans ecran : l'icone s'efface ------------------------ */
/* C'est le geste du telephone quand une application est dechargee :
   l'icone palit, elle ne change pas de forme. Le creux ET la paleur :
   deux signaux, donc lisible aussi en niveaux de gris. */
.moi-tuile.fermee{cursor:not-allowed}
.moi-tuile.fermee .moi-ic{filter:grayscale(1);opacity:.32}
.moi-tuile.fermee:hover .moi-ic{filter:grayscale(1);opacity:.32}
.moi-tuile.fermee .moi-t{color:var(--omex-ink-2)}
.moi-tuile.fermee:focus-visible .moi-ic{outline:2px solid var(--omex-ink-2);
  outline-offset:3px}

/* --- LA PAGE D'UN SERVICE ------------------------------------------- */
/* Un clic REMPLACE l'ecran : la grille s'efface, le service occupe la
   page. C'est ce qui distingue une navigation d'un depliant. */
.moi-barre{display:none;align-items:center;gap:12px;margin:0 0 14px}
.moi-barre.vue{display:flex}
.moi-titre-srv{font-weight:700;font-size:15px;letter-spacing:-.01em}
body.moi-en-service .moi-tuiles{display:none}
body.moi-en-service .adm-bloc:not(.moi-panneau){display:none}
body.moi-en-service .po-h1,body.moi-en-service .po-sub{display:none}
body.moi-en-service .erp-vues{display:none}
.adm-bloc.moi-panneau{display:none}
.adm-bloc.moi-panneau.ouvert{display:block}

/* --- mouvement sobre, et qui se coupe ------------------------------- */
@media (prefers-reduced-motion:reduce){
  .moi-tuile .moi-ic{transition:none}
  .moi-tuile:active .moi-ic{transform:none}
}

/* --- petit ecran : quatre colonnes, comme un telephone -------------- */
@media(max-width:560px){
  .moi-tuiles{grid-template-columns:repeat(3,1fr);gap:20px 10px;
    width:auto;max-width:360px}
  .moi-tuile .moi-ic{width:62px;height:62px}
  .moi-tuile .moi-ic svg{width:34px;height:34px}
  .moi-tuile .moi-t{font-size:11px;max-width:82px}
}