/* ===========================================================================
   ÉCRAN POLITIQUE DE SÉCURITÉ (/admin/securite) — maquette « Module Admin »,
   2026-09-25 : vignettes d'exposition, réglages à pas (− / +), colonne
   « Ce que vivront les comptes ».

   Famille .psec-* (vérifiée libre avant ouverture : les feuilles partagent un
   espace de noms plat, et deux blocs homonymes fusionnent sans rien signaler).
   Jetons --et-* uniquement. Le <link> est dans App.razor, après modele-erp.css.

   LA VIGNETTE N'EMPRUNTE PAS .vei-vig de l'accueil : elle vit dans la feuille
   d'un autre écran, et en dépendre ferait tenir celui-ci à celui-là. Si une
   troisième page la veut, elle monte dans le gabarit (section 11 de
   modele-erp.css) pour les trois.
   =========================================================================== */

/* 2. CORPS : réglages + colonne d'effets ----------------------------------- */
.appgrid .psec-corps { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) {
    .appgrid .psec-corps { grid-template-columns: minmax(0, 1fr); }
}

/* 3. UNE LIGNE DE RÉGLAGE -------------------------------------------------- */
.appgrid .psec-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 32px; }
/* LE LIBELLÉ SE CENTRE SUR LE SÉLECTEUR (2026-10-01). La règle d'alignement du gabarit ne
   reconnaît que ses propres contrôles (.mx-input, .mx-select, …) en enfant direct de la valeur ;
   la rangée −/valeur/+ est propre à cet écran, si bien que ses libellés gardaient le retrait
   d'une valeur EN LECTURE : 6 px sous le haut d'un sélecteur de 34, le centre décalé de 11. La
   même correction, posée ici : une classe d'écran n'a pas sa place dans la liste du gabarit. */
.appgrid .mx-champ:has(> .mx-champ-val > .psec-ligne) > .mx-champ-lbl {
    padding-top: 0; min-height: var(--mx-champ-h);
    display: flex; align-items: center; justify-content: flex-end;
}
.appgrid .mx-champ-val:has(> .psec-ligne) { padding-top: 0; }
/* … ET LE DÉFAIT AU-DESSOUS DE 720 PX (2026-10-02), comme le gabarit le fait pour ses propres
   contrôles : le libellé y repasse au-dessus du sélecteur, et le centrage le laissait calé à
   DROITE au-dessus d'un sélecteur calé à gauche, haut de 34 px de blanc — relevé à 390 px sur
   les dix réglages de l'écran. */
@media (max-width: 720px) {
    .appgrid .mx-champ:has(> .mx-champ-val > .psec-ligne) > .mx-champ-lbl { display: block; min-height: 0; }
}
/* Le filet bleu à gauche dit « modifié, pas encore enregistré » — la même
   marque que la maquette, portée par la ligne et non par un fond qui se
   confondrait avec la sélection. */
.appgrid .psec-ligne.est-modifie { box-shadow: -8px 0 0 -5px var(--et-form-blue); }

.appgrid .psec-pas { display: inline-flex; border: 1px solid var(--et-filet-fort); background: var(--et-surface); }
.appgrid .psec-pas button {
    width: 32px; height: 32px; border: 0; background: transparent;
    font: inherit; font-size: 16px; font-weight: 700; color: var(--et-form-blue-encre);
    cursor: pointer;
}
.appgrid .psec-pas button:hover:enabled { background: var(--et-tint); }
.appgrid .psec-pas button:disabled { color: var(--et-inerte); cursor: default; }
.appgrid .psec-pas button:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
.appgrid .psec-valeur {
    min-width: 64px; height: 32px; box-sizing: border-box; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center;
    border-left: 1px solid var(--et-filet-fort); border-right: 1px solid var(--et-filet-fort);
    font-family: var(--et-font-mono); font-weight: 600; font-variant-numeric: tabular-nums;
}
.appgrid .psec-unite { color: var(--et-muted); }
.appgrid .psec-bornes { font-size: 12px; color: var(--et-faint); }
.appgrid .psec-espace { flex-grow: 1; }
.appgrid .psec-modifie { font-size: 12px; font-weight: 600; color: var(--et-form-blue-encre); }
.appgrid .psec-retablir { font-size: 12px; font-weight: 600; padding: 0 4px; white-space: nowrap; }

/* Sous 1024 px, la règle des 44 px vaut ici aussi (docs/cibles-tactiles.md). */
@media (max-width: 1024px) {
    .appgrid .psec-pas button { width: 44px; height: 44px; }
    .appgrid .psec-valeur { height: 44px; }
}

/* 4. EN-TÊTE : compteur de modifications ----------------------------------- */
.appgrid .psec-compteur { align-self: center; font-size: 12px; font-weight: 600; color: var(--et-muted); white-space: nowrap; }
.appgrid .psec-compteur.est-modifie { color: var(--et-form-blue-encre); }

/* 5. COLONNE « CE QUE VIVRONT LES COMPTES » -------------------------------- */
.appgrid .psec-effets { background: var(--et-surface); border: 1px solid var(--et-hairline); padding: 0 14px 14px; }
.appgrid .psec-effets-liste { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; }
.appgrid .psec-effets-liste li {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 0 10px 12px; border-bottom: 1px solid var(--et-hairline);
    box-shadow: inset 3px 0 0 var(--et-form-blue);
    font-size: 13px; line-height: 1.45;
}
.appgrid .psec-effets-liste li span { color: var(--et-muted); }
.appgrid .psec-frise { position: relative; height: 18px; background: var(--et-tint); border: 1px solid var(--et-hairline); }
.appgrid .psec-frise span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--et-form-blue); }
.appgrid .psec-frise-legende { display: flex; justify-content: space-between; gap: 8px; margin-top: var(--et-legende-ecart); font-size: 12px; color: var(--et-muted); }

/* 6. DOUBLE AUTHENTIFICATION EXIGÉE PAR RÔLE (2026-09-25) ------------------ */
.appgrid .psec-roles { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.appgrid .psec-roles th { text-align: left; font-size: 12px; font-weight: 600; color: var(--et-muted); padding: var(--et-cellule-tete-y) 8px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .psec-roles td { padding: var(--et-cellule-y) 8px; border-bottom: 1px solid var(--et-hairline); }
.appgrid .psec-roles .psec-nb { text-align: right; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; width: 110px; }
.appgrid .psec-roles .psec-nb.est-attention { color: var(--et-avertissement-ink); font-weight: 700; }
.appgrid .psec-roles tr.est-modifie td:first-child { box-shadow: inset 3px 0 0 var(--et-form-blue); }
.appgrid .psec-bascule { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; font-size: 13px; }   /* un <label> héritait des .8rem de Bootstrap : 12,8 px */
.appgrid .psec-bascule input { width: 18px; height: 18px; accent-color: var(--et-form-blue); }
.appgrid .psec-vide { padding: 8px 0 12px; color: var(--et-muted); font-size: 13px; }
.appgrid .psec-impact {
    display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px;
    background: var(--et-avertissement-bg); border-left: 4px solid var(--et-avertissement-mark);
    font-size: 13px;
}
.appgrid .psec-impact i { color: var(--et-avertissement-ink); margin-top: 2px; }
.appgrid .psec-impact strong { display: block; color: var(--et-avertissement-ink); }
.appgrid .psec-impact span { color: var(--et-muted); }
@media (max-width: 1024px) {
    .appgrid .psec-bascule input { width: 24px; height: 24px; }
    /* LA CASE « AU CHOIX DU COMPTE », PAR SA ZONE (2026-10-02) : le libellé faisait 24 px de haut,
       la case aussi. Zone étendue à 44 px par ::after, sur la largeur du libellé — un <label> n'est
       pas un élément remplacé, et le pas de la rangée (46 px) la contient sans chevaucher la
       suivante. La rangée ne bouge pas. */
    .appgrid .psec-bascule { position: relative; }
    .appgrid .psec-bascule::after {
        content: ""; position: absolute; left: 0; right: 0; top: 50%;
        height: 44px; transform: translateY(-50%);
    }
}