/* ==========================================================================
LE MENU DE COMPTE, ET LE REPLI DES EXPLICATIONS — bureau-b1, 12/09/2026
La feuille de « reglages.js ». Elle ne repeint rien de l'application : elle
masque trois commandes devenues redondantes, et habille le menu que le
script pose à leur place.
CE QUI DISPARAÎT DE L'ÉCRAN, et où ça se retrouve :
la roue du coin haut GAUCHE (#ouvrir-preferences) → dans le menu
l'étiquette « Utilisateur » → le rond et le nom
le menu déroulant des noms (#sel-utilisateur) → gardé, mais caché :
app.js le reconstruit à chaque rendu et c'est son gestionnaire qui sait
sortir. On s'en sert sans le montrer.
RIEN N'EST SUPPRIMÉ. Les deux lignes de chargement de ce chantier
commentées, tout revient exactement où c'était.
⚠️ LE MENU SORT DE SA BOÎTE, et la barre du haut est étroite (75 px). Il est
en « position: absolute » sous le bouton, avec un z-index au-dessus de la
barre. Un conteneur en « overflow: hidden » sur ce chemin le rognerait sans
rien signaler — c'est le piège qui a rendu les épaules de l'encoche
invisibles pendant des heures, ailleurs. Vérifié : ni « .lateral », ni
« .bas », ni « .bloc-lateral » ne coupent.
========================================================================== */
/* --- 1. Ce qui s'efface --------------------------------------------------- */
#ouvrir-preferences { display: none; }
.lateral .bas .bloc-lateral > label.etiquette[for="sel-utilisateur"] { display: none; }
/* ⚠️ « display: none » ET NON UN MASQUAGE PAR LA TAILLE. Première écriture :
je l'avais réduit à 1 × 1 px par clip-path, la recette habituelle pour
garder un élément lisible par les technologies d'assistance. L'audit a
compté 38 OCCULTATIONS NOUVELLES, toutes celle-ci : un élément de 1 px n'est
ni « display: none » ni rognée, donc il est compté VISIBLE, et son centre
tombe sous mon bouton. C'est exactement ce que le LISEZ-MOI de l'audit
décrit — une commande écrasée reste comptée visible.
Trente-huit fausses alertes dans un relevé que d'autres sessions lisent, ça
ne se garde pas. Et « display: none » est plus honnête : cette liste N'EST
PLUS une commande, c'est un rouage. Ce qu'elle offrait est repris par le
bouton et le menu, qui portent leurs rôles ARIA.
Le rouage, lui, marche toujours : on y pose une valeur et on déclenche
« change », ce qui ne demande aucune mise en page. */
.lateral .bas .bloc-lateral > #sel-utilisateur { display: none; }
/* --- 1 bis. LA PILULE BLANCHE DU BLOC DE COMPTE S'EN VA ----------------------
🔥 C'EST ELLE, LA « BANDE BLANCHE » — demande de Kentin, 12/09 : « quand je
descends il y a une bande blanche autour de la nav barre et du logo Larry ».
Deux fausses pistes ont été suivies avant de la trouver, et elles valent
d'être écrites parce qu'elles se ressemblent :
— j'ai d'abord cru à un liseré de la capsule. Il y en avait un, à trois
sources, et je l'ai retiré : ce n'était pas ça non plus ;
— puis à du contenu clair passant SOUS la barre, celle-ci étant
transparente. Mesuré : « .lateral » finit à 118 px, « .principal »
commence à 118 px, RECOUVREMENT NUL, et le conteneur clippe
(overflow: hidden auto). Rien ne peut passer dessous. L'hypothèse était
plausible et fausse.
Ce qui restait, relevé par elementsFromPoint sous la barre à droite :
« DIV.bloc-lateral | rgb(255,255,255) ». Une pilule blanche pleine, dessinée
par app.css autour du bloc du compte — et que mon rapprochement de 32 px a
amenée contre la capsule, ce qui l'a rendue voyante alors qu'elle était là
depuis toujours.
Elle n'a plus lieu d'être : ce qu'elle encadrait — l'étiquette « Utilisateur »
et un menu déroulant — a disparu dans le menu de compte, et le bouton porte
son propre fond au survol. Le bloc se pose donc sur la page comme la marque
« L A R R Y » en face, et la capsule reste seule à flotter.
⚠️ « !important », ET C'EST ASSUMÉ. La règle qui peint ce blanc ne se laisse
pas trouver : aucune règle visant « .bloc-lateral » et portant un
« background » ne correspond à l'élément, et le fond calculé vaut pourtant
rgb(255,255,255). Elle vient donc d'un sélecteur qui ne nomme pas cette
classe — dans app.css, un fichier que trois autres sessions écrivent et où
je n'ai pas à aller fouiller pour retirer une pilule.
Passer outre explicitement vaut mieux qu'une surenchère de sélecteurs qui
se casserait au premier remaniement du voisin. Trois propriétés, bornées à
la barre du haut, dans MON fichier — et tout revient en commentant mes deux
lignes de chargement. */
@media (min-width: 981px) {
:root:not([data-barre="gauche"]) .lateral .bas .bloc-lateral {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
}
/* --- 2. Le bouton de compte ------------------------------------------------
Il remplace, au même endroit, ce qui était une étiquette et une liste. Il
porte ce qu'on veut savoir d'un coup d'œil — qui, et à quel titre — et dit
par son chevron qu'il y a autre chose dessous. */
.cm { position: relative; min-width: 0; }
.cm-bouton {
display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
padding: 6px 10px 6px 6px;
border: 1px solid transparent; border-radius: 999px;
background: transparent; color: var(--txt);
font: inherit; text-align: left; cursor: pointer;
}
.cm-bouton:hover { background: var(--surf-2); border-color: var(--bord); }
.cm-bouton.ouvert { background: var(--surf-2); border-color: var(--bord-fort); }
.cm-bouton:focus-visible { outline: 2px solid var(--acc-vif); outline-offset: 2px; }
.cm-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.cm-nom { font-size: 13.5px; font-weight: 650; line-height: 1.2; }
.cm-role { font-size: 11px; color: var(--txt-3); line-height: 1.2; }
.cm-chev { display: grid; place-items: center; flex: none; color: var(--txt-3); }
.cm-chev svg { width: 15px; height: 15px; }
.cm-bouton.ouvert .cm-chev { rotate: 180deg; }
.cm-chev { transition: rotate calc(.18s * var(--anim-vit, 1)) ease; }
/* Le rond des initiales. C'est la seule marque d'identité de l'écran depuis
que le vieux logo a laissé la place au mot : il prend l'accent. */
.cm-rond {
display: grid; place-items: center; flex: none;
width: 32px; height: 32px; border-radius: 50%;
background: var(--acc); color: #ffffff;
font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.cm-rond.grand { width: 40px; height: 40px; font-size: 14px; }
.cm-rond.mini { width: 24px; height: 24px; font-size: 10px; background: var(--surf-3); color: var(--txt); }
/* --- 3. Le menu ------------------------------------------------------------ */
.cm-menu[hidden] { display: none; }
.cm-menu {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
display: flex; flex-direction: column; gap: 2px;
min-width: 248px; max-width: 300px; padding: 8px;
border: 1px solid var(--bord); border-radius: 18px;
background: var(--surf-1);
box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .45), 0 2px 8px -2px rgba(0, 0, 0, .25);
}
.cm-tete {
display: flex; align-items: center; gap: 11px; min-width: 0;
padding: 8px 10px 12px;
}
.cm-tete .cm-nom { font-size: 14.5px; }
.cm-tete .cm-role { font-size: 11.5px; }
.cm-trait { height: 1px; margin: 5px 6px; background: var(--bord); }
.cm-comptes[hidden] { display: none; }
.cm-comptes { display: flex; flex-direction: column; gap: 2px; padding-bottom: 5px; }
/* Une entrée de menu. « #ouvrir-preferences-lateral » est DÉPLACÉ ici par le
script et reçoit cette classe : il garde son attribut « data-preferences »
et son gestionnaire, il ne change que d'habit et de place. */
.cm .cm-item {
display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0;
min-height: 38px; height: auto; padding: 0 12px;
border: 0; border-radius: 11px;
background: transparent; color: var(--txt);
font: inherit; font-size: 13.5px; font-weight: 600;
text-align: left; justify-content: flex-start; cursor: pointer;
}
.cm .cm-item:hover { background: var(--surf-2); }
.cm .cm-item:focus-visible { outline: 2px solid var(--acc-vif); outline-offset: -2px; }
.cm .cm-item svg { width: 16px; height: 16px; flex: none; color: var(--txt-3); }
.cm .cm-item:hover svg { color: var(--txt); }
/* LA SORTIE EST DÉTACHÉE, ET ELLE EST ROUGE. Elle était une option au milieu
d'une liste de noms, après un séparateur inerte — au même rang qu'un
collègue. Ce n'est pas un compte : c'est la porte. */
.cm .cm-item.sortie { color: var(--danger-txt); font-weight: 650; }
.cm .cm-item.sortie::before {
content: ""; flex: none; width: 16px; height: 16px;
background: currentColor;
-webkit-mask: no-repeat center / 16px url('data:image/svg+xml;utf8,');
mask: no-repeat center / 16px url('data:image/svg+xml;utf8,');
}
.cm .cm-item.sortie:hover { background: color-mix(in srgb, var(--mauvais) 13%, transparent); }
/* La ligne du rôle d'origine (#zone-admin) entre dans le menu. Le rôle est
déjà écrit deux fois au-dessus : elle ne garde que son cadenas, c'est-à-dire
le seul geste qu'elle porte. */
.cm-outils { display: flex; flex-direction: column; gap: 2px; }
/* ⚠️ LE RÔLE ÉTAIT ÉCRIT TROIS FOIS — vu à l'image, pas à la mesure : dans le
bouton, dans l'en-tête du menu, et une troisième dans la ligne d'origine.
Cette ligne ne se garde donc QUE quand elle porte un geste, c'est-à-dire
quand la configuration est verrouillée et qu'elle ouvre la saisie du code.
Déverrouillée, elle ne dit rien que les deux autres n'aient déjà dit. */
.cm-outils #zone-admin:empty,
.cm-outils #zone-admin:not(:has(#b-saisir-code)) { display: none; }
.cm-outils #zone-admin .rangee { margin-top: 0 !important; padding: 0 12px; min-height: 34px; }
.cm-outils #zone-admin .petit { font-size: 12px; }
.cm-outils #zone-admin #b-saisir-code { display: inline-flex; align-items: center; gap: 7px; }
/* --- 4. Le repli des explications ------------------------------------------
Le panneau faisait cinq écrans de haut : chaque réglage traînait un
paragraphe de quatre à six lignes, et il se coupait à « Taille de
l'interface ». Le texte reste — il est bon, et il explique des choix qui ne
vont pas de soi — mais il attend qu'on le demande. */
.cm-aide {
align-self: flex-start;
margin-top: 7px; padding: 0;
border: 0; background: none;
font: inherit; font-size: 11.5px; font-weight: 600;
color: var(--acc-vif); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px;
}
.cm-aide:hover { text-decoration-thickness: 2px; }
.cm-aide:focus-visible { outline: 2px solid var(--acc-vif); outline-offset: 2px; border-radius: 4px; }
.champ > p.petit.muet[data-cm-replie] { margin-top: 6px; }
/* --- 4 bis. LA BARRE À GAUCHE : LE MENU S'OUVRE VERS LE HAUT ------------------
🔥 DÉFAUT BLOQUANT, signalé par Kentin le 12/09 : « quand je mets la nav bar
sur la gauche et que je clique sur se déconnecter, je peux pas me déconnecter
ni aller dans les paramètres, l'affichage va trop bas ».
Relevé à 1440 × 880, barre à gauche : bouton de compte à (14, 743), menu à
(−195, 801) — 195 px hors écran à gauche, 106 px en bas — et l'entrée
« Se déconnecter » entièrement hors champ, donc INATTEIGNABLE. Il n'y avait
plus de porte de sortie ni d'accès aux préférences.
La cause : j'ai écrit ce menu pour la barre du HAUT, où le bloc de compte est
en haut à droite et où il n'y a que de la place dessous. Dans le rail de
gauche, ce bloc est ancré EN BAS : le menu continuait de s'ouvrir vers le
bas et sortait par deux côtés à la fois. Je n'avais éprouvé qu'une des deux
dispositions — et c'est un réglage que les Préférences offrent en un clic.
⚠️ PAS DE NOMBRE MAGIQUE. « bottom: calc(100% + 8px) » ancre le menu sur le
HAUT DU BOUTON, quelle que soit la hauteur du bloc : une valeur en dur se
décalerait le jour où le rôle passe sur deux lignes, ou si un compte de plus
apparaît dans la liste. « left: 0 » l'ouvre vers la droite, dans la page —
le rail est trop étroit pour le contenir, et c'est très bien ainsi.
Un correctif provisoire a été posé dans navigation.css par bureau-9a, parce
que le défaut empêchait de se déconnecter et qu'un usager bloqué n'attend pas
un arbitrage de propriété. Il le retire dès que celui-ci est en place : deux
positionnements concurrents sur le même menu seraient l'énigme du suivant. */
:root[data-barre="gauche"] .cm-menu {
left: 0;
right: auto;
top: auto;
bottom: calc(100% + 8px);
max-height: calc(100vh - 140px);
overflow-y: auto;
overscroll-behavior: contain;
}
/* --- 5. Écrans étroits ------------------------------------------------------
Sur téléphone, la barre du haut n'existe pas et le bloc du compte vit dans
le tiroir latéral : le menu n'a plus à s'ancrer à droite, il prend la
largeur du tiroir et s'ouvre sous le bouton. */
@media (max-width: 980px) {
.cm-menu { right: auto; left: 0; min-width: 0; width: 100%; max-width: none; }
.cm-bouton { border-color: var(--bord); background: var(--surf-1); }
}
/* --- 6. Mouvement réduit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.cm-chev { transition: none; }
}