/* =========================================================================
   BARRE LATÉRALE « B » — rail + panneau (SG, 22/10/2026)
   Prototype validé : docs/composants/planches/sidebar-B4-prototype.html.
   · Rail bleu roi, 88 px : LBAC (→ accueil), Notifications, précédent · suivant ·
     actualiser, puis Cabinet · Rendez-vous · Clients · les services, Administration
     en bas, la pastille de la personne et « masquer le menu ».
   · Panneau blanc REPLIÉ : carte flottante qui s'ouvre au survol (0,2 s d'arrêt),
     se rétracte quand la souris s'en va ; l'épingle le garde ouvert (html.nav-epingle).
   · Rythme mesuré (optique) : 6 px entre deux icônes d'un groupe ; un point de 4 px
     entre les groupes, un peu plus d'air sous le libellé que devant l'icône (« B »).
   Comportement : static/js/nav_rail.js. Jetons de portail.css uniquement.
   ========================================================================= */

@media (min-width: 901px) {
    .sidebar.sidebar--rail {
        width: 88px; padding: 0; margin: 0; border-right: 0; background: none;
        position: sticky; top: 0; height: 100vh; display: block; overflow: visible; z-index: 60;
    }
    html.nav-epingle .sidebar.sidebar--rail { width: calc(88px + 232px); }
    /* Le bandeau LOCAL (fixe, 26 px) pousse la page : le rail tient dans ce qui reste. */
    /* Les bandeaux FIXES (LOCAL ambre, « voir comme » indigo, 26 px chacun) poussent la page : le rail tient
       dans ce qui reste — SG 23/10 en « voir comme » : « on voit pas jusqu'en bas ». Même grille que portail.css. */
    body:has(.local-banner) .sidebar.sidebar--rail,
    body:has(.impersonation-banner) .sidebar.sidebar--rail { height: calc(100vh - 26px); top: 26px; }
    body:has(.local-banner):has(.impersonation-banner) .sidebar.sidebar--rail { height: calc(100vh - 52px); top: 52px; }

    /* ---------- Le rail ---------- */
    .sidebar--rail .rail {
        position: absolute; top: 0; bottom: 0; left: 0; width: 88px; z-index: 3;
        display: flex; flex-direction: column; align-items: center; padding: calc(12px + var(--chrome-top)) 0 10px;
        background: linear-gradient(180deg, var(--bleu-roy-soft) 0%, var(--bleu-roy) 60%);
        color: var(--blanc);
    }
    .sidebar--rail .rail-marque {
        color: var(--blanc); font: var(--fw-bold) 17px/1 var(--font-title); letter-spacing: .06em;  /* SG 23/10 : « à peine plus gros » (15 → 17) */
        text-align: center; text-decoration: none; flex: none; transition: opacity .12s;
    }
    .sidebar--rail .rail-marque small { display: block; margin-top: 3px; font: var(--fw-medium) 10px var(--font-body);
        letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
    .sidebar--rail .rail-marque:hover { opacity: .85; }
    .sidebar--rail .rail-marque:focus-visible { outline: 2px solid var(--blanc); outline-offset: 4px; border-radius: 6px; }
    .sidebar--rail .rail-haut { margin-top: 8px; display: flex; flex-direction: column; align-items: center; }
    /* SG 26/10/2026 : des POINTS, comme les autres séparations (le trait du 25/10 est retiré), à égale
       distance de leurs voisins — mesuré sur 900 px : 13-14 px sous la marque, 22 et 20 autour de ‹ › ; 768 px : voir plus bas. */
    .sidebar--rail .rail-point.rail-point--sous-marque { margin: 11px 0 0; }
    .sidebar--rail .rail-point.rail-point--avant-nav,
    .sidebar--rail .rail-point.rail-point--apres-nav { margin: 18px 0 0; }

    /* Précédent · suivant · actualiser : une seule barre. */
    .sidebar--rail .rail-nav {
        /* SG 23/10 : « il doit être centré, il sert de séparateur visuel » — autant d'air au-dessus
           (depuis la ligne de base de « Tâches ») qu'en dessous (jusqu'au haut de l'icône Cabinet). */
        flex: none; display: flex; align-items: center; gap: 2px; height: 30px; padding: 2px; margin: 20px 0 0;
        border-radius: 9px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    }
    .sidebar--rail .rail-trait { width: 1px; height: 14px; background: rgba(255, 255, 255, .18); }
    .sidebar--rail .rail-outil {
        width: 24px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; box-shadow: none;
        color: rgba(255, 255, 255, .8); cursor: pointer; display: flex; align-items: center; justify-content: center;
    }
    .sidebar--rail .rail-outil svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2;
        stroke-linecap: round; stroke-linejoin: round; }
    .sidebar--rail .rail-outil:hover { background: rgba(255, 255, 255, .16); color: var(--blanc); }
    .sidebar--rail .rail-outil:disabled { opacity: .3; cursor: default; background: none; }
    .sidebar--rail .rail-outil:focus-visible { outline: 2px solid var(--blanc); outline-offset: -2px; }

    /* Le milieu défile si l'écran est bas ; le haut et le bas ne bougent jamais. */
    .sidebar--rail .rail-milieu {
        /* `0 1 auto` (et non `1 1 auto`) : le milieu garde sa hauteur naturelle et ne rétrécit (en défilant) que
           faute de place ; le VIDE restant va à `.rail-poignee` (poignée de fenêtre, SG 23/10). */
        flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; align-self: stretch;
        /* 16 px et non 6 : le raccord concave du haut de l'onglet (12 px au-dessus, cf. .ri.is-page::before)
           doit tenir DANS ce conteneur qui défile, sinon il est rogné quand la page est Cabinet (revue 23/10). */
        display: flex; flex-direction: column; align-items: center; padding: 16px 0 0; margin: 0;
    }
    .sidebar--rail .rail-milieu::-webkit-scrollbar { display: none; }
    .sidebar--rail .rail-poignee { flex: 1 1 auto; min-height: 0; align-self: stretch; }

    /* Une partie : une pastille d'icône, le libellé dessous. */
    .sidebar--rail .ri {
        position: relative; width: 80px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 10px;
        background: none; color: rgba(255, 255, 255, .74); cursor: pointer; text-decoration: none;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        font: var(--fw-medium) var(--fs-xs)/1 var(--font-body); letter-spacing: -.015em; white-space: nowrap;
    }
    .sidebar--rail .ri + .ri { margin-top: 6px; }
    .sidebar--rail .ri-ic { width: 36px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
        transition: background .12s, color .12s, box-shadow .12s; }
    .sidebar--rail .ri-ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.75;
        stroke-linecap: round; stroke-linejoin: round; }
    .sidebar--rail .ri:hover { color: var(--blanc); }
    .sidebar--rail .ri:hover .ri-ic { background: rgba(255, 255, 255, .12); }
    .sidebar--rail .ri.is-vu:not(.is-page) { color: var(--blanc); }
    .sidebar--rail .ri.is-vu:not(.is-page) .ri-ic { background: rgba(255, 255, 255, .10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
    .sidebar--rail .ri:focus-visible { outline: none; }
    .sidebar--rail .ri:focus-visible .ri-ic { box-shadow: 0 0 0 2px var(--blanc); }
    /* La page en cours : un ONGLET couleur de la page, raccordé au bord du rail. */
    .sidebar--rail .ri.is-page { width: 84px; margin-left: 4px; border-radius: 12px 0 0 12px; background: var(--bg); color: var(--bleu-roy); }
    .sidebar--rail .ri.is-page::before, .sidebar--rail .ri.is-page::after {
        content: ""; position: absolute; right: 0; width: 12px; height: 12px; pointer-events: none; }
    .sidebar--rail .ri.is-page::before { top: -12px; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--bg) 12px); }
    .sidebar--rail .ri.is-page::after { bottom: -12px; background: radial-gradient(circle at 0 100%, transparent 11.5px, var(--bg) 12px); }
    .sidebar--rail .ri.is-page .ri-lab { font-weight: var(--fw-bold); }
    .sidebar--rail .ri.is-page:hover .ri-ic { background: rgba(7, 39, 94, .06); }
    .sidebar--rail .ri .notif-badge {
        position: absolute; top: 2px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
        background: var(--ruby); color: var(--blanc); font: var(--fw-bold) var(--fs-xs)/18px var(--font-body); text-align: center;
        box-shadow: 0 0 0 2px var(--bleu-roy);
    }
    .sidebar--rail .ri .notif-badge[hidden] { display: none; }
    /* ⭐ 23/10/2026 — compteur des tâches : même place que celui de la cloche, mais NEUTRE
       (blanc, chiffre bleu) — la couleur rouge reste à « nouveau » (charte). */
    .sidebar--rail .ri .taches-badge {
        position: absolute; top: 2px; left: calc(50% + 7px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
        background: var(--blanc); color: var(--bleu-roy); font: var(--fw-bold) var(--fs-xs)/18px var(--font-body); text-align: center;
        box-shadow: 0 0 0 2px var(--bleu-roy);
    }
    .sidebar--rail .ri.is-page .taches-badge { background: var(--bleu-roy); color: var(--blanc); box-shadow: 0 0 0 2px var(--bg); }

    /* Les points entre les groupes (4 px), à la position « B ». */
    .sidebar--rail .rail-point { flex: none; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .7); margin: 12px 0 6px; }
    .sidebar--rail .rail-point + .rail-point, .sidebar--rail .rail-point:first-child { display: none; }

    /* Le bas : Administration, la personne, « masquer le menu ». */
    .sidebar--rail .rail-bas { flex: none; align-self: stretch; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
    /* SG 23/10 : « le logo Administration est vraiment trop collé » — 14 px au lieu de 4 au-dessus de la pastille. */
    .sidebar--rail .rail-moi { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 14px; }
    .sidebar--rail .rail-av {
        width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
        /* SG 23/10 : variante C « verre dépoli » (planche rail-pastille-personne.png) — se fond dans le rail
           comme les icônes ; la teinte par personne (--h) n'est plus utilisée ici. */
        /* `text-indent` = `letter-spacing` : l'espacement s'ajoute aussi APRÈS la dernière lettre, ce qui décalait
           « SG » de 0,3 px vers la gauche (mesuré à l'encre, SG 23/10 « est-ce bien centré ? »). */
        background: rgba(255, 255, 255, .14); color: var(--blanc); letter-spacing: .02em; text-indent: .02em;
        /* SG 23/10 : contour « à peine plus épais, à l'intérieur » (1,5 → 2 px, en `inset` : le cercle garde 36 px). */
        font: var(--fw-bold) var(--fs-sm)/1 var(--font-title); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
    }
    .sidebar--rail .rail-av:hover { background: rgba(255, 255, 255, .22); }
    .sidebar--rail .rail-av:focus-visible { outline: 2px solid var(--blanc); outline-offset: 3px; }
    .sidebar--rail .rail-prenom { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        color: rgba(255, 255, 255, .7); font: var(--fw-medium) var(--fs-xs)/1.2 var(--font-body); }
    .sidebar--rail .rail-masquer { width: 32px; height: 24px; margin-top: 8px; color: rgba(255, 255, 255, .55); }

    /* ---------- Le panneau : une carte flottante ---------- */
    .sidebar--rail .nav-panneau {
        position: absolute; left: 94px; top: 8px; bottom: 8px; width: 232px; z-index: 2;
        display: none; flex-direction: column; padding: 12px 10px 10px;
        background: var(--surface); border: 1px solid var(--gris-2); border-radius: 14px;
        box-shadow: 0 18px 48px rgba(7, 39, 94, .20), 0 2px 6px rgba(7, 39, 94, .08);
    }
    .sidebar--rail .nav-panneau.est-ouvert { display: flex; animation: navRailGlisse .14s ease-out; }
    html.nav-epingle .sidebar--rail .nav-panneau {
        display: flex; left: 88px; top: 0; bottom: 0; border-radius: 0; border-width: 0 1px 0 0; box-shadow: none; animation: none;
    }
    @keyframes navRailGlisse { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .sidebar--rail .nav-panneau.est-ouvert { animation: none; } }

    .sidebar--rail .pan-cherche { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin: 0 0 10px;
        border: 1px solid var(--gris-2); border-radius: 10px; background: var(--gris-1); color: var(--gris-4); }
    .sidebar--rail .pan-cherche svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
    .sidebar--rail .pan-cherche input { border: 0; background: none; outline: none; width: 100%; min-width: 0; padding: 0;
        font: var(--fs-md) var(--font-body); color: var(--gris-6); }
    .sidebar--rail .pan-cherche:focus-within { border-color: var(--bleu-roy); background: var(--surface); }
    .sidebar--rail .pan-tete { display: flex; align-items: center; gap: 10px; height: 36px; margin: 2px 0 8px; padding: 0 4px; }
    .sidebar--rail .pan-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--bleu-roy); color: var(--blanc);
        display: flex; align-items: center; justify-content: center; }
    .sidebar--rail .pan-ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .sidebar--rail .pan-titre { margin: 0; min-width: 0; font: var(--fw-bold) var(--fs-base) var(--font-title); color: var(--gris-7);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar--rail .pan-epingle { margin-left: auto; flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px;
        background: none; color: var(--gris-4); cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .sidebar--rail .pan-epingle:hover, .sidebar--rail .pan-epingle:focus-visible { background: var(--gris-1); color: var(--bleu-roy); outline: none; }
    .sidebar--rail .pan-epingle svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .sidebar--rail .pan-liens { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .sidebar--rail .pan-partie { display: none; flex-direction: column; gap: 1px; }
    .sidebar--rail .pan-partie--mobile { display: none !important; }   /* Rendez-vous : lien direct du rail en desktop */
    .sidebar--rail .pan-partie.est-vue { display: flex; }
    /* Les pages : l'icône dans une petite pastille, le nom, une phrase d'aide (tirée de l'infobulle). */
    .sidebar--rail .nav-panneau .nav-item {
        display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 10px; align-items: center; height: auto; min-height: 42px;
        padding: 6px; border-radius: 10px; color: var(--gris-6); font-size: var(--fs-md); font-weight: var(--fw-medium); text-decoration: none;
    }
    .sidebar--rail .nav-panneau .nav-item .icon { grid-row: span 2; align-self: start; width: 30px; height: 30px; padding: 7px; box-sizing: border-box;
        border-radius: 8px; background: var(--gris-1); color: var(--gris-5); }
    .sidebar--rail .nav-panneau .nav-item .nav-label { align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sidebar--rail .nav-panneau .nav-item .pan-aide { align-self: start; font-size: var(--fs-sm); font-weight: var(--fw-normal); line-height: 1.3; color: var(--gris-4);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .sidebar--rail .nav-panneau .nav-item:not(:has(.pan-aide)) .icon { grid-row: auto; align-self: center; }
    .sidebar--rail .nav-panneau .nav-item:not(:has(.pan-aide)) .nav-label { align-self: center; }
    .sidebar--rail .nav-panneau .nav-item:hover { background: var(--gris-1); color: var(--bleu-roy); }
    .sidebar--rail .nav-panneau .nav-item:hover .icon { background: var(--surface); box-shadow: inset 0 0 0 1px var(--gris-2); color: var(--bleu-roy); }
    .sidebar--rail .nav-panneau .nav-item.active { background: rgba(7, 39, 94, .06); color: var(--bleu-roy); font-weight: var(--fw-bold); }
    .sidebar--rail .nav-panneau .nav-item.active .icon { background: var(--bleu-roy); color: var(--blanc); }
    .sidebar--rail .nav-panneau .nav-item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--bleu-roy); }

    /* ---------- Le menu de la personne ---------- */
    .sidebar--rail .menu-perso {
        position: absolute; left: 96px; bottom: 10px; width: 270px; z-index: 5; display: none; padding: 6px;
        background: var(--surface); border: 1px solid var(--gris-2); border-radius: 10px; box-shadow: 0 14px 34px rgba(7, 39, 94, .18);
    }
    .sidebar--rail .menu-perso.ouvert { display: block; }
    .sidebar--rail .menu-qui { padding: 8px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--gris-2); }
    .sidebar--rail .menu-qui b { display: block; color: var(--gris-7); font-size: var(--fs-md); }
    .sidebar--rail .menu-qui small { color: var(--gris-4); font-size: var(--fs-sm); }
    .sidebar--rail .menu-perso .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px;
        color: var(--gris-6); font-size: var(--fs-md); font-weight: var(--fw-normal); text-decoration: none; }
    .sidebar--rail .menu-perso .nav-item:hover, .sidebar--rail .menu-perso .nav-item:focus-visible { background: var(--gris-1); color: var(--bleu-roy); outline: none; }
    .sidebar--rail .menu-perso .nav-item .icon { width: 16px; height: 16px; color: var(--gris-4); }
    .sidebar--rail .menu-perso .sidebar-mock-switcher { margin: 4px 0; }

    /* Bulle immédiate (le `title` natif met plus d'une seconde). */
    .sidebar--rail .rail-bulle { position: fixed; z-index: 70; display: none; padding: 5px 9px; border-radius: 7px; pointer-events: none;
        background: var(--gris-7); color: var(--blanc); font: var(--fw-medium) var(--fs-sm) var(--font-body); white-space: nowrap; }
    .sidebar--rail .rail-bulle.vue { display: block; }
}

/* ---------- Le tiroir mobile (≤ 900 px) : la liste complète, partie par partie ---------- */
@media (max-width: 900px) {
    .sidebar.sidebar--rail { padding: 0; background: var(--surface); }
    .sidebar--rail .rail { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bleu-roy); color: var(--blanc); }
    .sidebar--rail .rail-marque { color: var(--blanc); font: var(--fw-bold) 15px/1 var(--font-title); text-decoration: none; }
    .sidebar--rail .rail-marque small { margin-left: 4px; font-size: 10px; opacity: .7; }
    .sidebar--rail .rail-nav, .sidebar--rail .rail-milieu, .sidebar--rail .rail-bas > .ri, .sidebar--rail .rail-masquer,
    .sidebar--rail .rail-prenom, .sidebar--rail .ri-lab, .sidebar--rail .pan-tete, .sidebar--rail .rail-bulle { display: none; }
    .sidebar--rail .rail-haut { margin-left: auto; }
    .sidebar--rail .rail-haut .ri { position: relative; color: var(--blanc); display: flex; }
    .sidebar--rail .ri-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
    .sidebar--rail .notif-badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
        background: var(--ruby); color: var(--blanc); font: var(--fw-bold) 10px/16px var(--font-body); text-align: center; }
    .sidebar--rail .notif-badge[hidden] { display: none; }
    .sidebar--rail .taches-badge { position: absolute; top: -6px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
        background: var(--blanc); color: var(--bleu-roy); font: var(--fw-bold) 10px/16px var(--font-body); text-align: center; }
    .sidebar--rail .rail-haut { display: flex; gap: 14px; }
    .sidebar--rail .rail-bas { display: block; }
    .sidebar--rail .rail-av { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--blanc); color: var(--bleu-roy); font-weight: var(--fw-bold); }
    .sidebar--rail .nav-panneau { display: block; padding: 8px 12px; }
    .sidebar--rail .pan-cherche { display: flex; gap: 8px; align-items: center; height: 38px; padding: 0 10px; border: 1px solid var(--gris-2); border-radius: 10px; margin-bottom: 8px; }
    .sidebar--rail .pan-cherche svg { width: 15px; height: 15px; stroke: var(--gris-4); fill: none; stroke-width: 2; }
    .sidebar--rail .pan-cherche input { border: 0; outline: none; width: 100%; font-size: var(--fs-base); }
    .sidebar--rail .pan-partie { display: block; padding: 6px 0; }
    .sidebar--rail .pan-partie::before { content: attr(data-titre); display: block; margin: 8px 4px 4px; font: var(--fw-bold) var(--fs-sm) var(--font-title); color: var(--gris-5); }
    .sidebar--rail .menu-perso { display: block; padding: 8px 12px 16px; border-top: 1px solid var(--gris-2); }
    .sidebar--rail .menu-qui b { display: block; } .sidebar--rail .menu-qui small { color: var(--gris-4); }
}

/* SG 23/10/2026 — présentation « C » du panneau (planche docs/composants/planches/panneau-variantes-ABC.png) :
   grand titre en bleu roi, une ligne par page, sans descriptif (« ça charge pour rien »). */
@media (min-width: 901px) {
    .sidebar--rail .pan-tete { margin: 4px 0 10px; }
    .sidebar--rail .pan-titre { font-size: var(--fs-base); color: var(--bleu-roy); }
    .sidebar--rail .pan-liens .pan-partie { gap: 3px; }
    .sidebar--rail .nav-panneau .nav-item { min-height: 44px; padding: 7px 8px; font-size: var(--fs-md); }
    .sidebar--rail .nav-panneau .nav-item .icon { grid-row: auto; align-self: center; }
    .sidebar--rail .nav-panneau .nav-item .nav-label { align-self: center; }
}

/* SG 23/10/2026 : « trouver un moyen pour éviter les … » — un nom trop long passe sur deux lignes, jamais coupé. */
@media (min-width: 901px) {
    .sidebar--rail .nav-panneau .nav-item .nav-label { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
    .sidebar--rail .pan-tete { height: auto; min-height: 36px; }
    .sidebar--rail .pan-titre { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
}

/* SG 23/10/2026 : « que le blanc déborde un peu plus en haut et en bas, que ça fasse moins kiki comme
   intercalaire » — l'onglet gagne 4 px de chaque côté, pris sur l'espace entre les icônes (rien ne bouge). */
@media (min-width: 901px) {
    .sidebar--rail .ri.is-page { height: 52px; margin-top: -4px; margin-bottom: -4px; }
    .sidebar--rail .ri + .ri.is-page { margin-top: 2px; }
    /* SG 23/10/2026 : « les points restent au même endroit » quelle que soit la page — aucune marge ne change
       autour de l'onglet ; ceux qui le touchent sont seulement rendus invisibles (leur place est gardée). */
    .sidebar--rail .rail-point:has(+ .ri.is-page), .sidebar--rail .ri.is-page + .rail-point { visibility: hidden; }
}

/* Portable 1366 × 768 : le milieu débordait de 10 px. On reprend 12 px dans le haut du rail
   (marque, cloche, barre de navigation) ; l'espacement des icônes validé par SG ne bouge pas. */
@media (min-width: 901px) and (max-height: 800px) {
    .sidebar--rail .rail { padding-top: calc(4px + var(--chrome-top)); }
    .sidebar--rail .rail-haut { margin-top: 0; }
    .sidebar--rail .rail-nav { margin-top: 20px; }
    .sidebar--rail .rail-moi { padding-top: 8px; }
    .sidebar--rail .rail-masquer { margin-top: 4px; }
}

/* SG 23/10/2026 : sous-catégories du panneau — titre bleu, filet bleu pâle à la suite (variante C2).
   Un intertitre seul dans sa partie (droits restreints) ne sert à rien : on le masque. */
.sidebar--rail .pan-sous { display: flex; align-items: center; gap: 10px; margin: 12px 8px 4px;
    font: var(--fw-medium) 12.5px var(--font-title); color: var(--bleu-roy); }
/* Centré sur le milieu des MINUSCULES (3,5 px au-dessus de la ligne de base), pas sur celui des capitales :
   SG 23/10 « le trait est-il vraiment centré ? » — il l'était sur les capitales, 1 px trop haut à l'œil. */
.sidebar--rail .pan-sous::after { content: ""; flex: 1; height: 1px; background: var(--bleu-roy-liseret); transform: translateY(1px); }
.sidebar--rail .pan-partie > .pan-sous:first-child { margin-top: 0; }
.sidebar--rail .pan-partie > div.pan-sous:only-of-type { display: none; }

/* ⭐ 23/10/2026 — l'icône « Tâches » ajoute 50 px au haut du rail : sur un écran de 800 px de
   haut ou moins, les icônes se resserrent un peu (40 px au lieu de 44, 4 px d'écart au lieu de 6,
   points un peu moins aérés) pour que tout tienne sans faire défiler le milieu. */
@media (min-width: 901px) and (max-height: 800px) {
    .sidebar--rail .ri { height: 40px; }
    .sidebar--rail .ri + .ri { margin-top: 4px; }
    .sidebar--rail .ri.is-page { height: 48px; }
    .sidebar--rail .ri + .ri.is-page { margin-top: 0; }
    .sidebar--rail .rail-point { margin: 9px 0 5px; }
    .sidebar--rail .rail-point.rail-point--sous-marque { margin: 5px 0 4px; }
    .sidebar--rail .rail-point.rail-point--avant-nav { margin: 14px 0 -6px; }
    .sidebar--rail .rail-point.rail-point--apres-nav { margin: 12px 0 -4px; }
}

/* SG 23/10/2026 (soir), planche rail-nav-etoile.png — variante A « deux ronds discrets, un peu moins
   translucides » pour ‹ ›, seuls et centrés ; Actualiser à cheval sur l'arête droite du rail, à la
   hauteur de LBAC Link, en rond blanc (comme le bouton de l'ancienne barre). */
@media (min-width: 901px) {
    .sidebar--rail .rail-nav { gap: 10px; height: 30px; padding: 0; background: none; box-shadow: none; }
    .sidebar--rail .rail-nav .rail-outil { width: 30px; height: 30px; border-radius: 50%; color: var(--blanc);
        background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
    .sidebar--rail .rail-nav .rail-outil svg { width: 17px; height: 17px; stroke-width: 2.4; }
    .sidebar--rail .rail-nav .rail-outil:hover:not(:disabled) { background: rgba(255, 255, 255, .30); }
    .sidebar--rail .rail-nav .rail-outil:disabled { opacity: .4; background: rgba(255, 255, 255, .10); }
    .sidebar--rail .rail-actualiser {
        position: absolute; z-index: 6; left: 77px; top: calc(17px + var(--chrome-top)); width: 22px; height: 22px;  /* SG : « à peine plus petit » (26 → 22) */
        border-radius: 50%; border: 1px solid var(--gris-2); background: var(--surface); color: var(--bleu-roy);
        box-shadow: 0 2px 6px rgba(7, 39, 94, .18);
    }
    .sidebar--rail .rail-actualiser svg { width: 12px; height: 12px; }
    .sidebar--rail .rail-actualiser:hover { background: var(--gris-1); color: var(--bleu-roy); }
    .sidebar--rail .rail-actualiser:focus-visible { outline: 2px solid var(--bleu-roy); outline-offset: 2px; }
}
@media (max-width: 900px) { .sidebar--rail .rail-actualiser { display: none; } }

/* L'étoile du favori de chaque partie (SG 23/10/2026) : bleu roy (décision SG), pleine sur le
   favori, creuse au survol des autres pages ; absente du tiroir mobile. */
@media (min-width: 901px) {
    .sidebar--rail .nav-panneau .pan-partie .nav-item { grid-template-columns: 30px minmax(0, 1fr) 22px; }
    .sidebar--rail .pan-etoile { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
        border-radius: 6px; color: var(--gris-3); opacity: 0; cursor: pointer; }
    .sidebar--rail .pan-etoile svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linejoin: round; }
    .sidebar--rail .nav-item:hover .pan-etoile, .sidebar--rail .nav-item:focus-visible .pan-etoile { opacity: 1; }
    .sidebar--rail .pan-etoile:hover { color: var(--bleu-roy); background: var(--surface); }
    .sidebar--rail .pan-etoile.is-on { opacity: 1; color: var(--bleu-roy); }
    .sidebar--rail .pan-etoile.is-on svg { fill: currentColor; }
}
@media (max-width: 900px) { .sidebar--rail .pan-etoile { display: none; } }

/* ⭐ SG 03/11/2026 — un OUTIL CLAUDE dans le panneau (décision B6, planche artefacts-claude-variantes-B2.html) :
   le logo de Claude dans une pastille blanche, comme les logiciels des accès rapides ; une flèche ↗ au bout
   (à la place de l'étoile du favori : un lien externe n'est jamais favori) ; la bulle « Ouvre Claude ·
   nouvel onglet » vient de `data-bulle` (nav_rail.js). Aucune étiquette, aucun mot ajouté sur la ligne. */
.sidebar--rail .nav-item .icon.icon-logo { display: flex; align-items: center; justify-content: center; padding: 0;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--gris-2); }
.sidebar--rail .nav-item .icon.icon-logo img { width: 17px; height: 17px; display: block; }
.sidebar--rail .nav-item .nav-ext { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--gris-4); }
.sidebar--rail .nav-item .nav-ext svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar--rail .nav-item--ext:hover .nav-ext, .sidebar--rail .nav-item--ext:focus-visible .nav-ext { color: var(--bleu-roy); }
.sidebar--rail .nav-item--ext:hover .icon.icon-logo { box-shadow: inset 0 0 0 1px var(--gris-3); }
@media (max-width: 900px) {
    .sidebar--rail .nav-item--ext { display: flex; align-items: center; gap: 10px; }
    .sidebar--rail .nav-item--ext .icon.icon-logo { width: 26px; height: 26px; border-radius: 7px; flex: none; }
    .sidebar--rail .nav-item--ext .nav-ext { margin-left: auto; }
}