/* Cadre de l'espace client (vue 00) : compléments de l'AppShell de la bibliothèque (brand/components.css) pour les
   pièces propres à l'espace : volet d'organisation en tête du menu, bloc de la personne connectée, avatar de la barre
   du haut. Le menu, la barre du haut, la barre mobile et la barre d'onglets sont dessinés par components.css. */
.hl-shell__brand .org-switch{position:relative}
.hl-shell__brand .org{display:flex;gap:var(--space-3);align-items:center;min-height:var(--control-large);padding:var(--space-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);margin:0 0 var(--space-2)}
.hl-shell__brand .org:hover{background:var(--bg-2)}
.hl-shell .org-avatar{display:grid;place-items:center;flex:none;width:var(--space-8);height:var(--space-8);border-radius:var(--radius-inner);
  background:var(--blue);color:var(--lime);font-size:var(--fs-12);font-weight:800}
.hl-shell__brand .org-info strong{color:var(--text);font-size:var(--fs-14)}
.hl-shell__brand .org-info small{color:var(--text-2)}
.hl-shell__brand .org-caret{color:var(--text-2)}
.hl-shell__brand .org-switch-menu{z-index:30}
.hl-shell__brand summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Personne connectée, sous Assistance et Mon compte. */
.hl-shell__foot .user{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-2);padding:var(--space-2) var(--space-1) 0;
  border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.hl-shell__foot .user strong{color:var(--text);font-size:var(--fs-14)}
.hl-shell__foot .user small{color:var(--text-2)}
.hl-shell__foot .user .hl-icon-btn{margin-left:auto}
/* Rail (menu replié, AppShell) : organisation et personne réduites à leur avatar, centré ; le nom reste lu
   (data-hl-rail="sr") et s'affiche en infobulle (data-hl-tip). Ouvrir le volet d'organisation déplie le menu. */
.hl-shell--rail .hl-shell__brand .org{justify-content:center;gap:0;padding:var(--space-1) 0;border-color:transparent}
/* D77 : replié, « Se déconnecter » reste accessible, en bouton icône sous l'avatar (infobulle data-hl-tip). */
.hl-shell--rail .hl-shell__foot .user{flex-direction:column;justify-content:center;gap:var(--space-1);padding-inline:0}
.hl-shell--rail .hl-shell__foot .user .hl-icon-btn{margin-left:0;min-width:var(--control);min-height:var(--control)}
.hl-topbar .avatar,.hl-mtop .avatar{text-decoration:none}
.hl-topbar .avatar:focus-visible{outline-offset:3px}
/* Les écrans de l'espace sont mis en page par leurs propres marges : le contenu principal reste un bloc. */
#main.hl-shell__main{display:block}
/* Changement d'écran : le titre reçoit le focus par programme (tabindex="-1", hors de l'ordre de tabulation)
   pour les lecteurs d'écran ; ce focus-là n'est pas une commande et ne dessine pas d'anneau. */
:is(.page-heading h1,.hl-screenhead__title)[tabindex="-1"]:focus{outline:none}
/* AV-012 : la liste du menu défile sans barre (components.css) ; une ombre en haut et en bas dit qu'il en reste à voir.
   Ombres « scroll » posées sur le cadre, caches « local » qui défilent avec le contenu et les effacent aux extrémités. */
.hl-shell__scroll{
  background:
    linear-gradient(var(--surface) 30%,transparent) top/100% var(--space-8) no-repeat local,
    linear-gradient(transparent,var(--surface) 70%) bottom/100% var(--space-8) no-repeat local,
    radial-gradient(farthest-side at 50% 0,color-mix(in srgb,var(--text) 22%,transparent),transparent) top/100% var(--space-3) no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%,color-mix(in srgb,var(--text) 22%,transparent),transparent) bottom/100% var(--space-3) no-repeat scroll;
  background-color:var(--surface)}