: .xp-tete-titre habille un
partout
ailleurs dans le gabarit, mais une fenêtre qui s'ouvre doit s'annoncer avec un
niveau à un lecteur d'écran. Seules les marges du
sont à reprendre — la
graisse et le corps viennent déjà de la classe. */
.usr-modale h2.xp-tete-titre { margin: 0; }
/* L'identifiant en chasse fixe : c'est une clé technique, pas un nom. La
famille .mx-input ne porte pas de variante mono. */
.usr-modale .mx-input.est-mono { font-family: var(--et-font-mono); }
/* « VOTRE COMPTE », SUR L'APLAT BLEU DE L'EN-TÊTE. La pastille Bootstrap
(bg-primary-subtle) y était un bleu pâle sur un bleu franc : elle ne se
voyait plus. Sur une surface de marque, l'encre est --et-sur-aplat et le fond
--et-fond-marine — le couple que .xp-tete pose déjà sur son icône de tête. */
.usr-tete-tag {
flex: none;
padding: 2px 8px;
background: var(--et-fond-marine);
color: var(--et-sur-aplat);
font-size: 12px;
font-weight: 600;
line-height: 1.5;
}
/* LA NOTE DE PIED A ÉTÉ RETIRÉE AVEC LES NOTES (2026-09-08), et sa variante
ambrée avec elle : le seul motif qu'elle portait — quota de souscription
atteint — se lit dans l'encart de tête, qui a son propre rang d'état. Le pied
ne tient plus que ses deux boutons.
La règle vaut toujours pour les notes du corps : .eca-aide est la note du
gabarit, elle n'a pas de variante d'état — celle-ci ne sert qu'ici. */
.usr-modale .eca-aide.est-attention { color: var(--et-avertissement-ink); }
/* LE ROUET DU BOUTON D'ENGAGEMENT. Il tourne sur l'orange du .xp-btn-cta, d'où
l'encre de surface de marque plutôt qu'un gris : sur un aplat coloré, un
rouet gris disparaît à moitié. Il vit ici et non dans le gabarit parce qu'un
seul écran l'emploie — une classe que deux écrans partagent monte, jamais
l'inverse. */
.usr-spin {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid var(--et-sur-aplat-doux);
border-top-color: var(--et-sur-aplat);
border-radius: 50%;
vertical-align: -1px;
animation: usrSpin .7s linear infinite;
}
@keyframes usrSpin { to { transform: rotate(360deg); } }
/* LE MOUVEMENT SE COUPE quand le poste demande qu'on l'épargne. Un rouet est
décoratif : l'état « occupé » est déjà porté par le bouton désactivé. */
@media (prefers-reduced-motion: reduce) {
.usr-spin { animation: none; }
}
.usr-encart {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 14px;
padding: 11px 13px;
font-size: 12px;
line-height: 1.55;
}
.usr-encart > i { flex: none; margin-top: 2px; }
.usr-encart.est-critique {
background: var(--et-danger-badge-bg);
border: 1px solid var(--et-danger-bord);
color: var(--et-danger-ink);
}
.usr-encart.est-attention {
background: var(--et-avertissement-bg);
border: 1px solid var(--et-avertissement-bord);
color: var(--et-avertissement-ink);
}
/* NEUTRE — ce que la création POSE d'office (compte actif, courriel qui part ou
non, rôle qui ne se règle pas ici). Ce n'est ni une alerte ni un
avertissement : c'est ce qu'on aurait dû savoir avant de cliquer. D'où le
gris de la charte, et non une troisième teinte d'état. */
.usr-encart.est-neutre {
background: var(--et-surface-2);
border: 1px solid var(--et-hairline);
color: var(--et-muted);
}
.usr-encart.est-neutre > i { color: var(--et-form-blue); }
/* ---------------------------------------------------------------------------
7.1 CONSULTATION : LES FAITS
La consultation n'est pas une modification aux champs grisés : c'est l'état
où l'on vient LIRE. Une liste de définitions, non des champs inertes — mais
la colonne de libellés garde les 158 px du formulaire dense, sans quoi
passer en modification décalerait tout l'écran.
--------------------------------------------------------------------------- */
.usr-faits { margin: 4px 0 0; }
.usr-faits > div {
display: flex;
align-items: baseline;
gap: 14px;
padding: 8px 0;
border-bottom: 1px solid var(--et-rang);
}
.usr-faits dt {
flex: none;
width: 158px;
text-align: right;
font-size: 12px;
font-weight: 400;
color: var(--et-muted);
}
.usr-faits dd {
flex: 1;
min-width: 0;
margin: 0;
font-size: 13px;
font-weight: 500;
color: var(--et-ink);
}
.usr-faits dd.mono { font-family: var(--et-font-mono); }
.usr-faits dd.est-positif { color: var(--et-ok); }
.usr-faits dd.est-negatif { color: var(--et-danger-ink); }
.usr-faits dd.est-attention { color: var(--et-avertissement-ink); }
.usr-faits dd.est-neutre { color: var(--et-muted); }
.usr-faits dd.est-absent { color: var(--et-inerte); }
/* ---------------------------------------------------------------------------
7.2 PROVENANCE — elle ne se lit pas pour AGIR mais pour RENDRE COMPTE : bloc
à part, en pied, et non une ligne de plus dans les faits d'usage.
--------------------------------------------------------------------------- */
.usr-provenance {
margin-top: 14px;
padding: 10px 13px;
background: var(--et-surface-3);
border: 1px solid var(--et-hairline);
}
.usr-provenance .ligne { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; }
.usr-provenance .libelle { flex: none; font-size: 12px; color: var(--et-muted); }
.usr-provenance .valeur { flex: 1; min-width: 0; font-size: 12px; color: var(--et-ink); }
.usr-provenance .valeur.est-attention { color: var(--et-avertissement-ink); }
.usr-provenance .valeur.est-neutre { color: var(--et-faint); }
/* ---------------------------------------------------------------------------
7.3 LES GESTES DE LA CONSULTATION
La consultation disait l'état sans offrir d'en sortir : il fallait refermer
la fenêtre pour aller chercher l'icône correspondante dans la colonne de la
liste, à la bonne ligne. Les gestes sont ici, et la fiche a la place d'écrire
ce que chacun PRODUIT — ce qu'une colonne d'icônes ne peut mettre que dans
une infobulle.
UNE LISTE, NON UNE BARRE DE BOUTONS. Cinq boutons alignés se lisent comme
cinq mots ; une ligne par geste, avec sa conséquence en dessous, se lit comme
cinq décisions. C'est le même choix que les modes de mot de passe plus bas.
AUCUNE COULEUR ÉCRITE ICI. Le rang de danger prend l'encre qui porte ce nom,
et le motif d'un refus prend celle de l'avertissement : les deux se lisent sur
la surface, ce que les aplats d'état ne feraient pas à cette taille.
--------------------------------------------------------------------------- */
.usr-gestes {
margin-top: 4px;
border: 1px solid var(--et-hairline);
background: var(--et-surface);
}
.usr-geste {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 10px 12px;
}
.usr-geste + .usr-geste { border-top: 1px solid var(--et-rang); }
.usr-geste:hover { background: var(--et-surface-3); }
.usr-geste > i {
flex: none;
width: 16px;
margin-top: 2px;
text-align: center;
color: var(--et-muted);
}
.usr-geste.est-grave > i { color: var(--et-danger-ink); }
/* Quelque chose a expiré et attend — le lien d'invitation qui ne vaut plus. Marque
d'attention et non de danger : rien n'est cassé. Même rang que dans la colonne
de la liste, où la même icône porte déjà cette teinte. */
.usr-geste.est-attention > i { color: var(--et-avertissement-ink); }
.usr-geste.est-inerte > i { color: var(--et-inerte); }
.usr-geste .txt { flex: 1; min-width: 0; }
.usr-geste .libelle {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--et-ink);
}
.usr-geste .aide {
display: block;
margin-top: 1px;
font-size: 12px;
line-height: 1.5;
color: var(--et-muted);
}
.usr-geste.est-inerte .libelle { color: var(--et-muted); }
/* LE MOTIF D'UN REFUS N'EST PAS UNE AIDE, c'est la réponse à « pourquoi ce
bouton est-il gris ». Il prend donc l'encre de l'avertissement — et l'encre,
non la teinte de marque : douze pixels sur une surface claire. */
.usr-geste.est-inerte .aide { color: var(--et-avertissement-ink); }
/* Les boutons du gabarit de fenêtre (.xp-btn*) portent déjà leur habillage et
leur cible de 44 px sous 1024 px : rien à redire ici, seulement leur place. */
.usr-geste > .xp-btn,
.usr-geste > .xp-btn-danger { flex: none; align-self: center; }
/* LE LIEN D'INVITATION — il se transmet à la main quand le courriel n'est pas
parti, donc il doit se sélectionner en entier, y compris là où il déborde. */
.usr-lien { margin-top: 3px; }
.usr-lien code {
display: block;
font-family: var(--et-font-mono);
font-size: 12px;
line-height: 1.5;
color: var(--et-ink);
overflow-wrap: anywhere;
}
@media (max-width: 720px) {
/* Le bouton passe SOUS le texte : côte à côte, un libellé de deux mots
écrase la phrase qui dit ce qu'il fait, et c'est elle qu'on vient lire. */
.usr-geste { flex-wrap: wrap; }
.usr-geste .txt { flex: 1 1 100%; }
.usr-geste > .xp-btn,
.usr-geste > .xp-btn-danger { margin-left: 27px; }
}
/* ---------------------------------------------------------------------------
7.4 MODES DE MOT DE PASSE — deux (ou trois) modes EXCLUSIFS, exprimés comme
tels. La version précédente demandait un mot de passe ET une adresse sans
dire que le second annule le premier : l'invitation pose MustChangePwd, et
le mot de passe saisi ne sert jamais.
--------------------------------------------------------------------------- */
.usr-modes { display: flex; flex-direction: column; gap: 8px; }
.usr-mode {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
padding: 9px 11px;
border: 1px solid var(--et-hairline);
background: var(--et-surface);
cursor: pointer;
font-family: inherit;
text-align: left;
}
.usr-mode.est-actif { border-color: var(--et-form-blue); background: var(--et-tint); }
.usr-mode:disabled { background: var(--et-surface-3); cursor: not-allowed; }
.usr-mode:focus-visible { outline: 2px solid var(--et-form-blue); outline-offset: -2px; }
/* La puce est .mx-case.mx-case-radio (modele-erp.css) : trois modes EXCLUSIFS, donc
un rond et non un carré. Elle s'appelait `puce` et non `case`, et c'est à ce titre
qu'elle a échappé au relevé du lot des huit — lequel cherchait des noms contenant
« case » ou « coch ». C'est le crible par la FORME qui l'a trouvée.
L'état reste piloté par le bouton : `est-actif` sur .usr-mode commande aussi son
cadre et son fond, et le dédoubler sur la puce aurait fait deux sources pour un
seul état — même arbitrage que .rol-perm. Ces sélecteurs sont à (0,3,0) contre le
(0,2,0) du gabarit. */
.usr-mode .mx-case-radio { --mx-case-t: 15px; margin-top: 1px; }
.usr-mode.est-actif .mx-case-radio { border-color: var(--et-form-blue); }
.usr-mode.est-actif .mx-case-radio::after {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--et-form-blue);
}
.usr-mode:disabled .mx-case-radio { border-color: var(--et-hairline); }
.usr-mode .txt { flex: 1; min-width: 0; }
.usr-mode .libelle { display: block; font-size: 13px; font-weight: 600; color: var(--et-ink); }
.usr-mode .aide { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }
.usr-mode:disabled .libelle,
.usr-mode:disabled .aide { color: var(--et-inerte); }
/* ---------------------------------------------------------------------------
7.5 SAISIE DU MOT DE PASSE
LA LIGNE SOUS LE CHAMP NE DIT PLUS LA RÈGLE, elle dit le REFUS (2026-09-08) :
la longueur exigée par le dossier est passée dans le texte d'invite, et
l'aide permanente est partie avec les autres notes. Restent deux rangs — le
refus du serveur, et l'avertissement de confort au-delà, qui ne refuse
jamais : durcir ici écarterait des mots de passe que le serveur accepte. Le
rang positif est parti avec « Longueur suffisante. » — un champ qui va bien
n'a rien à dire, et la ligne n'est alors pas rendue.
--------------------------------------------------------------------------- */
.usr-mdp { margin-top: 10px; max-width: 320px; }
.usr-mdp .mx-input.est-vide { border-color: var(--et-danger); }
.usr-mdp .aide { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--et-faint); }
.usr-mdp .aide.est-attention { color: var(--et-avertissement-ink); }
.usr-mdp .aide.est-negatif { color: var(--et-danger-ink); }
/* ---------------------------------------------------------------------------
7.6 MODULES ACCESSIBLES
La PORTE d'un module, pas les droits à l'intérieur — ceux-ci sont sur
l'écran des rôles. D'où une grille de cases sobre, sans hiérarchie : aucun
module n'est plus important qu'un autre, et les ordonner par importance
supposée ferait chercher longtemps celui qu'on veut.
Deux colonnes à partir de 560 px : la liste tient de six à vingt entrées,
et une colonne unique obligerait à faire défiler une modale déjà longue.
Géométrie seulement — aucune couleur qui ne vienne d'un jeton.
--------------------------------------------------------------------------- */
.usr-modules {
display: grid;
grid-template-columns: 1fr;
gap: 6px 18px;
max-width: 420px;
}
@media (min-width: 560px) {
.usr-modules { grid-template-columns: 1fr 1fr; }
}
/* Les modules d'un compte restreint, en consultation : des étiquettes qui se
lisent d'un regard, non une liste à parcourir. */
.usr-modules-lus {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 4px 0 6px;
}
/* ---------------------------------------------------------------------------
7.7 SOCIÉTÉS RATTACHÉES (USR-02)
Une ligne par société, et sur cette ligne TROIS choses de nature différente :
y travailler (la case), avec quel rôle (la liste), et laquelle s'ouvre à la
connexion (le radio). Elles ne sont pas au même rang — le rôle et le défaut
n'existent QUE si la case est cochée —, d'où une grille qui laisse ses deux
dernières colonnes vides plutôt qu'une pile de contrôles également offerts.
Ce n'est pas une grille de cases comme 7.6 : la liste compte rarement plus de
quelques sociétés, et chaque entrée porte assez d'information pour tenir une
ligne à elle. Géométrie seulement — aucune couleur qui ne vienne d'un jeton.
--------------------------------------------------------------------------- */
.usr-societes {
display: flex;
flex-direction: column;
gap: 0;
max-width: 520px;
border-top: 1px solid var(--et-hairline);
}
.usr-societe {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 8px 14px;
padding: 7px 0;
border-bottom: 1px solid var(--et-hairline);
}
/* Une société où le compte ne travaille pas reste LISIBLE — elle se lit pour
décider de la cocher. Atténuée, jamais effacée. */
.usr-societe:not(.est-liee) .usr-societe-nom { color: var(--et-muted); }
.usr-societe-nom { min-width: 0; display: flex; align-items: center; gap: 8px; }
.usr-societe-nom > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* « origine » : la société du jeton, verrouillée. L'étiquette dit POURQUOI la
case ne se décoche pas — sans elle, le contrôle grisé passe pour une panne. */
.usr-societe-tag {
flex: none;
padding: 0 6px;
border-radius: var(--et-r-pill);
background: var(--et-neutre-bg);
color: var(--et-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.usr-societe-role { min-width: 150px; }
/* LE RÔLE QUI SE LIT ET NE SE RÈGLE PAS — la société d'origine en saisie (son
rôle est celui du compte, et l'enregistrement le force), et toutes les
lignes en consultation. Sans cadre ni fond, à la différence d'un sélecteur
désactivé : un contrôle grisé se lit « saisissable plus tard », alors que
cette valeur ne se saisira jamais ici. Même arbitrage que .mx-valeur-inerte
du gabarit, à la taille d'une ligne de rattachement. */
.usr-societe-lu {
flex: none;
font-size: 12px;
color: var(--et-muted);
white-space: nowrap;
}
.usr-societe-defaut { flex: none; font-size: 12px; color: var(--et-muted); }
/* Sous 560 px les trois colonnes ne tiennent plus : le rôle et le défaut
passent sous le nom, dans cet ordre — on choisit d'abord la société. */
@media (max-width: 559px) {
.usr-societe { grid-template-columns: 1fr; }
.usr-societe-role { min-width: 0; width: 100%; }
}