/* ===========================================================================
RÔLES ET PERMISSIONS — ce que l'écran des rôles ajoute au gabarit, et rien
d'autre.
CE QUI VIT ICI, ET RIEN D'AUTRE
Les classes .rol-* que ce seul écran emploie. La passation d'origine
(« design_handoff_roles », Design 33) demandait de concaténer sa feuille à
modele-erp.css ; c'est précisément ce que la convention du dépôt interdit —
chaque branche ajoutant un écran collidait sur la dernière ligne du gabarit
et sur sa clé de cache, jamais sur le fond. Une feuille par écran, un
après modele-erp.css.
LA FEUILLE A FONDU LE 2026-09-09, ET C'EST L'OBJET DU LOT
L'écran et sa fenêtre sont passés au gabarit. Six blocs disparaissent, non
parce qu'on y a renoncé mais parce que le gabarit les portait déjà :
.rol-alerte → .mx-blocage (§11.x) — le bandeau d'état
.rol-indicateurs → .mx-ind-grille / .mx-ind (§7) — la couche analytique
.rol-jauge .piste → .mx-barre / .mx-barre-jauge (§7) — les barres
.rol-perm-tete → GroupeChamps (.mx-groupe, §5)
.rol-alerte-modale → .mx-blocage est-erreur
.rol-domaine(s) → le rail d'onglets (§4) logé par .mx-modale-fiche (§6)
.rol-case → retirée : la case tri-état disait l'état d'un
domaine REPLIÉ ; le rail porte ce compte maintenant.
Les deux jauges de l'écran écrivaient en prime leur couleur dans un
attribut `style` — `background:var(--et-...)` recopié dans la page, ce que
docs/couleurs-en-dur.md proscrit au même titre qu'un hexadécimal. Elles
prennent les modificateurs du gabarit ; ne reste en ligne que la LARGEUR,
qui est une géométrie.
LES COULEURS SONT DES JETONS. Aucune valeur en dur dans la page ni ici.
=========================================================================== */
/* --- Colonne Rôle -------------------------------------------------------- */
.rol-nom { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; row-gap: 3px; }
.rol-desc {
display: block;
margin-top: 2px;
font-size: 12px;
color: var(--et-faint);
max-width: 420px;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Jauge de permissions, en cellule de tableau --------------------------
« 40 / 44 » se lit ; une barre pleine en rouge dit « ce rôle peut tout
faire » sans qu'on ait à calculer.
LA BARRE EST CELLE DU GABARIT (.mx-barre / .mx-barre-jauge, §7), teintes
d'état comprises. Ne reste ici que la GÉOMÉTRIE d'une cellule de liste : la
piste du gabarit fait 17 px de haut et prend toute la largeur disponible,
ce qui est juste pour une barre de répartition d'un tableau de bord et faux
pour une colonne qui doit rester dense. */
.rol-jauge { display: flex; align-items: center; gap: 9px; }
.rol-jauge .mx-barre { flex: none; width: 92px; height: 6px; }
/* ET LE REMPLISSAGE DOIT ÊTRE UN BLOC. Le gabarit lui donne `height: 100%` en
comptant sur un
; ici la cellule est rendue par un fragment `` —
Col.Perso ne peut pas ouvrir un bloc dans un sans produire un balisage
faux —, et sur un élément EN LIGNE la hauteur comme la largeur sont ignorées :
la barre restait vide à tous les taux, y compris à 100 %. C'est le seul point
où la piste du gabarit demande un mot de plus que sa reprise directe. */
.rol-jauge .mx-barre-jauge { display: block; }
/* --- Ce que le rôle commande --------------------------------------------- */
.rol-effets .ligne {
display: flex;
align-items: baseline;
gap: 11px;
padding: 9px 14px;
border-bottom: 1px solid var(--et-rang);
}
.rol-effets .ligne:last-child { border-bottom: none; }
.rol-effets .puce {
flex: none;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--et-form-blue);
}
.rol-effets .titre { font-size: 13px; font-weight: 600; }
.rol-effets .detail {
margin-top: 2px;
font-size: 12px;
line-height: 1.55;
color: var(--et-muted);
}
/* ===========================================================================
LA FENÊTRE — au gabarit (.mx-voile > .mx-modale-cadre > .mx-modale-tete /
-faits / -corps > .mx-modale-fiche / -pied), rail d'onglets par domaine.
RIEN ICI NE REDÉFINIT LE GABARIT. Le voile, le cadre, la tête, la bande de
faits saillants, le rail, les panneaux, la grille dense et la mise en boîte
du rail dans une modale viennent tous de modele-erp.css.
=========================================================================== */
/* LA LARGEUR EST CELLE DU CRAN TRÈS LARGE (2026-09-10) — .est-tres-large, posée
dans la page. 660 px est la largeur d'un formulaire d'UNE colonne : le rail en
prend 232 et la colonne de libellés du gabarit 158, il resterait 270 px pour
une grille de permissions qui en demande deux de 300. */
/* UN BANDEAU FRÈRE DU CORPS. .mx-modale-corps passe en display:flex dès qu'il
porte une fiche : un bandeau posé DEDANS se rangerait à côté du rail. Il est
donc son frère, et reprend la gouttière de la tête. Même motif que
.bar-modale-erreur (barèmes fiscaux) ; il n'y a pas encore de troisième
demandeur, sans quoi il monterait au gabarit. */
.mx-modale-cadre > .rol-bandeau { flex: none; margin: 12px 18px 0; }
/* La mention du pied passe en ambre quand l'enregistrement AURA un effet
immédiat sur des sessions ouvertes. --et-avertissement-ink et non
--et-avertissement : une couleur d'état ne s'écrit jamais en `color:`, c'est
son rang d'encre qui s'y pose (docs/couleurs-en-dur.md). */
.rol-modale .mx-modale-mention.est-alerte { color: var(--et-avertissement-ink); }
/* --- En-tête de domaine : le compte, et le geste de masse -----------------
Posés en fin de la rangée .mx-groupe (GroupeChamps.ChildContent), calés à
droite : l'intitulé du domaine et sa note gardent le bord gauche. */
.rol-groupe-fin { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rol-compte {
font-family: var(--et-font-mono);
font-size: 12px;
color: var(--et-muted);
}
.rol-compte.est-vide { color: var(--et-inerte); }
.rol-compte.est-plein { color: var(--et-succes-ink); }
/* --- Onglet « Identité » : les deux champs, l'étendue, les gestes de masse -
Les bornes suivent la longueur maximale saisissable (60 et 160 caractères) :
la fenêtre est large parce qu'elle loge un rail et une grille de permissions,
pas parce qu'un nom de rôle a besoin de mille pixels. */
.rol-champ-nom { max-width: 420px; }
.rol-champ-desc { max-width: 640px; }
/* --- Onglet « Identité » : étendue et gestes de masse --------------------- */
.rol-etendue { padding: 0; }
.rol-etendue .mx-barre { max-width: 260px; }
.rol-gestes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* --- La grille des permissions d'un domaine -------------------------------
Deux colonnes dès que le panneau les porte : un domaine en compte de une à
seize, et seize lignes d'une colonne rendent le panneau plus haut que la
fenêtre alors que la place est à côté. */
.rol-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2px 18px;
}
/* --- Une permission ------------------------------------------------------ */
.rol-perm {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
padding: 6px 0;
border: none;
background: transparent;
cursor: pointer;
font-family: inherit;
text-align: left;
}
.rol-perm:disabled { cursor: default; }
.rol-perm:disabled .mx-case { cursor: default; }
/* La ligne EST le bouton : sans ce contour, parcourir un domaine au clavier ne montre
rien. Même règle que .mx-case:focus-visible du gabarit, pour la même raison. */
.rol-perm:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: 1px; }
/* La case de permission est .mx-case (modele-erp.css) — taille, bordure, fond, bleu
coché et curseur inerte compris. Son état reste piloté par le bouton et non par
elle-même : `est-coche` sur .rol-perm commande aussi le gras de l'intitulé, et le
dédoubler sur la case aurait fait deux sources pour un seul état. (0,3,0) contre le
(0,2,0) du gabarit : ce sélecteur passe devant. */
.rol-perm.est-coche .mx-case { border-color: var(--et-form-blue); background: var(--et-form-blue); }
.rol-perm .txt { flex: 1; min-width: 0; }
.rol-perm .txt .libelle {
display: block;
font-size: 13px;
font-weight: 400;
color: var(--et-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rol-perm.est-coche .txt .libelle { font-weight: 600; color: var(--et-ink); }
/* Le code sous le libellé, non à sa place : il sert à retrouver la permission
dans le code, pas à la comprendre. */
.rol-perm .txt .code {
display: block;
margin-top: 1px;
font-family: var(--et-font-mono);
font-size: 12px;
color: var(--et-inerte);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Deux marques, deux sens : « plateforme » borne la portée hors société,
« sensible » désigne un droit qui en distribue d'autres. */
.rol-perm .marque {
flex: none;
padding: 1px 7px;
font-family: var(--et-font-mono);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
}
.rol-perm .marque.est-plateforme { background: var(--et-surface-2); color: var(--et-table-head-encre); }
.rol-perm .marque.est-sensible { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); }
/* ---------------------------------------------------------------------------
PALIERS — docs/conventions-responsive.md, recette à 390 / 768 / 1280 / 1600.
Paliers pris dans l'échelle retenue (560 / 640 / 720 / 1024 / 1100).
LA RÈGLE TACTILE (docs/cibles-tactiles.md) S'APPLIQUE À LA LIGNE DE
PERMISSION comme le gabarit l'applique aux onglets et aux champs d'une fiche
en modale : sous 1024 px, la fenêtre s'ouvre sur la tablette d'un
administrateur, et une ligne de 30 px se manque. Elle ne rétrécit pas
au-dessus — elle n'y était déjà pas sous 44 px de haut par accident.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
.rol-perm { min-height: 44px; }
}
/* Une seule colonne : à 720 px le panneau ne porte plus deux fois 300 px, et
la grille se replierait de toute façon — l'écrire évite qu'une permission de
libellé long force un débordement horizontal avant le repli. */
@media (max-width: 720px) {
.rol-grille { grid-template-columns: 1fr; }
}