@charset "utf-8";
/* ============================================================
   CHROME v2 — la sidebar devient un RAIL PERMANENT, et chaque section
   s'ouvre au survol dans son panneau.

   Chargée APRÈS block-left.css : elle surcharge, elle ne remplace pas. Aucune
   classe n'est renommée, aucun contenu de menu n'est touché — ni les
   permissions, ni les catégories, ni les pages des volets.

   CE QUI CHANGE, ET POURQUOI

   Le bouton de repli escamotait la sidebar à ZÉRO : la navigation disparaissait
   entièrement et il fallait retrouver le hamburger de la barre du haut pour la
   rappeler. Deux états, dont un aveugle.

   À la place, un seul état : un rail de 84 px où chaque section garde son icône
   ET son nom, et dont le survol ouvre le panneau de la section. Rien ne
   disparaît jamais, le contenu de la page ne se redimensionne plus, et on
   atteint une page en deux gestes sans jamais cliquer pour « déplier ».

   PORTÉE : les pages projet (`body.has_little_menu`) gardent leur rail de 60 px
   et leur second menu — le panneau au survol le recouvrirait. Tout est donc
   scopé `body.chrome_v2:not(.has_little_menu)`.
   ============================================================ */

/* La police du rail n'est plus déclarée ici : la charte V5 est en Poppins,
   chargée une fois par template.php et exposée en `--font` par v5-tokens.css.
   Les trois @font-face Hero New qui vivaient là appartenaient à la charte XD
   précédente. */

body.chrome_v2:not(.has_little_menu) {
    /* 84 : la largeur de la maquette, mesurée sur son rendu.
       Deux commentaires justifiaient ici un 92 « parce qu'à 84 Administration se
       coupe ». Ils datent d'une géométrie où l'icône était une pastille de 38 px :
       elle ne laissait que 56 px au libellé. À la géométrie de la maquette —
       icône de 20 px, padding de 5 — le libellé dispose de 68 px, et il DÉBORDE
       la tuile au lieu d'être rogné, exactement comme sur le prototype. */
    --chrome-rail: 84px;
    --chrome-font: var(--font);

    /* LE RAIL EST UN JETON. `--rail` vaut #0B1533 en clair et #060A1B en
       sombre : le rail suit donc le thème, alors que la charte XD le figeait à
       un bleu unique. Le panneau de section ne prend plus une seconde teinte —
       la maquette V5 le peint du MÊME fond que le rail et l'en détache par un
       filet clair et une ombre portée. */
    --chrome-fond: var(--rail);
    --chrome-panneau: var(--rail);

    /* L'état actif de la charte V5 : un fond bleu translucide sur toute
       l'entrée, l'icône en bleu clair, le nom en blanc (plus de filet à gauche). */
    --chrome-actif-fond: rgba(61, 139, 255, .20); /* v5-delibere: le rail est sombre dans les DEUX themes — valeurs sombres de la charte, elles ne suivent pas le fond de la page */
    /* L'icône active est le bleu clair DU RAIL, pas `--accent` : le rail reste
       sombre en thème clair, où `--accent` vaut #005CF0. */
    --chrome-accent: #7FB2FF; /* v5-delibere: idem */
    --chrome-icone: rgba(169, 179, 214, .72); /* v5-delibere: l'encre d'icône du rail, valeur de la maquette dans les deux thèmes */
    --chrome-accent-ink: #FFFFFF;
    /* `--text-mid` SEC, sans les 92 % d'opacité qu'il portait. L'audit pixel du
       2026-09-21 a compté 544 éléments dans cette teinte sur les seize
       écrans-thèmes, contre `rgb(169, 179, 214)` sur la maquette : la même
       couleur, délavée de 8 %. C'est le plus gros écart de couleur de tout
       l'audit, et il tenait à un `.92` posé une fois dans la coquille. */
    --chrome-item: rgb(169, 179, 214); /* v5-delibere: le --text-mid du rail, valeur sombre dans les deux themes */
    --chrome-hover: rgba(255, 255, 255, .07);
    --chrome-sep: rgba(255, 255, 255, .10);

    /* LES PICTOS DU RAIL : le jeu de SVG AU TRAIT de la maquette (viewBox 22,
       trait 1,7, bouts ronds — `RAIL[].icon` du prototype), et non les glyphes
       Font Awesome PLEINS de 17 px que la base fournit (`page_category.pca_icon`).
       Ce sont des MASQUES : la forme est découpée dans un aplat `currentColor`,
       donc l'encre (veille, actif) reste portée par `.icon`, exactement comme pour
       le glyphe, et le balisage de block-left.php — donc son cache — ne bouge pas.
       Une catégorie dont l'icône n'est pas dans cette liste garde son glyphe FA. */
    --chrome-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E");
    --chrome-ico-cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='17' height='12' rx='2'/%3E%3Cpath d='M11 2.5 19.5 6 11 9.5 2.5 6z'/%3E%3C/svg%3E");
    --chrome-ico-sitemap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.5' y='1.5' width='7' height='5' rx='1'/%3E%3Crect x='1.5' y='15' width='6' height='5' rx='1'/%3E%3Crect x='14.5' y='15' width='6' height='5' rx='1'/%3E%3Cpath d='M11 6.5v4M4.5 15v-2.5h13V15'/%3E%3C/svg%3E");
    --chrome-ico-hashtag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2.5 3 19.5M14 2.5 13 19.5M2 8h17M1 14h17'/%3E%3C/svg%3E");
    --chrome-ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='17' height='16' rx='2.5'/%3E%3Cpath d='M2.5 8.5h17M7 3.5V1.5M15 3.5V1.5'/%3E%3C/svg%3E");
    --chrome-ico-zsuite: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h12l-6 7 6 8H5l6-8z'/%3E%3C/svg%3E");
    --chrome-ico-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 2.5h9l4 4v13H5z'/%3E%3Cpath d='M8.5 11h6M8.5 15h6'/%3E%3C/svg%3E");
    --chrome-ico-zsales: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='16' height='12' rx='2.5'/%3E%3Cpath d='M7.5 7V4.5a3.5 3.5 0 0 1 7 0V7M11 11.5v3'/%3E%3C/svg%3E");
    --chrome-ico-zaacom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M7 7h8l-8 8h8'/%3E%3C/svg%3E");
    --chrome-ico-admin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='15' cy='14' r='3'/%3E%3Cpath d='M8 2v3M8 11v3M2 8h3M11 8h3M15 8v3M15 17v3M9 14h3M18 14h2'/%3E%3C/svg%3E");

    /* Le rail est un état FIXE : ces variables n'ont plus besoin d'être écrites
       en ligne par un script au chargement. Plus de bascule, donc plus de
       clignotement possible entre deux largeurs au premier rendu. */
    --dimen--width--menu--left: var(--chrome-rail);
    --dimen--width--menu--left--left: var(--chrome-rail);
    --dimen--margin--left--block--right: var(--chrome-rail);
    --dimen--padding--left--block--menu--top: var(--chrome-rail);
    --dimen--padding--left--block--menu--bottom: var(--chrome-rail);
    --dimen--right--menu--left: 0px;
}

/* common.css applique `* { font-family }` à CHAQUE élément : l'héritage depuis
   `.block_left` ne suffit pas. Les <i> sont exclus, Font Awesome doit garder sa
   famille d'icônes. */
body.chrome_v2:not(.has_little_menu) .block_left *:not(i) { font-family: var(--chrome-font); }

/* La sidebar ne se redimensionne plus : la transition de 0,5 s héritée n'a plus
   d'objet et rendait le panneau pâteux. */
body.chrome_v2:not(.has_little_menu) .block_left,
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu { transition: none; }

/* Le bleu, sur le rail et sur le volet. `.main_menu` porte le fond du chrome
   historique (`--color--background--block--left`, navy) : on le repeint ici, et
   ici seulement — la variable globale ne bouge pas, elle sert à toute la
   Station hors v2. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu { background: var(--chrome-fond); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu { background: var(--chrome-panneau); }

/* ---------- En-tête : le logo réduit, centré ---------- */
/* DÉPART DE LA PILE, AUX MESURES DE LA MAQUETTE (rail `padding: 20px 0`, plaque
   54 hors-tout, `margin-bottom: 22px`) : plaque à y = 20, première entrée à
   y = 20 + 54 + 22 = 96. L'en-tête de 75 px d'avant plaçait la plaque à 11,5 et
   remontait tout le rail de 21 px, sur les dix écrans. Les 96 px sont donc ceux
   de l'en-tête, et `.content` en retranche autant (voir plus bas). */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header {
    box-sizing: border-box;
    height: 96px;
    padding: 20px 0 22px;
    align-items: flex-start;
    justify-content: center;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header > .logo_station.normal { display: none; }
/* La marque vit dans une TUILE, pas nue sur le rail. Maquette 02, l. 40 :
   52x52, rayon 14, fond `rgba(255,255,255,.08)`, filet `rgba(255,255,255,.10)`,
   marque centrée à 30px de large. C'est une valeur de coquille, donc elle
   apparaissait sur les seize rapports d'audit à la fois — et pour cette raison
   elle était restée invisible tant qu'on regardait les écrans un par un.

   Sûr ici parce que `chrome_v2` vaut pour l'iso 1 SEULE (template.php :
   `$chromeV2 = $designV5`) et que la marque de la Station est carrée
   (`logo-little-zaacom-blanc.svg`, viewBox 385x369). Les espaces client,
   partenaire et hub gardent leur coquille et leur propre logo, qui est un
   logotype horizontal : la même tuile l'écraserait.

   Pas de `margin-bottom:22px` de la maquette : l'écart au premier groupe est le
   `padding-bottom` de `.header` (96 px = 20 + 54 + 22). L'ajouter ferait
   déborder l'en-tête.

   54 ET NON 52 : la maquette déclare 52x52 + un filet de 1 px en boîte de
   CONTENU (les <div> d'un prototype ne sont pas en border-box), donc la plaque
   rendue mesure 54x54. Ici la boîte est en border-box : on pose le rendu. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header > .logo_station.little {
    position: static;
    display: flex;
    opacity: 1;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .10);
    align-items: center;
    justify-content: center;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header > .logo_station.little > img {
    width: 30px;
    height: auto;
    display: block;
}
/* Le bouton de repli n'a plus d'état à basculer. Il reste dans le template —
   d'autres espaces s'en servent — mais il ne s'affiche plus ici. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header > #shrink_block_left { display: none; }
/* Le contenu retranche la hauteur RÉELLE de l'en-tête (96), pas les 75 px de
   block-left.css : sinon le groupe du bas déborde de 21 px sous la fenêtre.
   14 px de réserve + les 6 px de marge d'une entrée = les 20 px de padding bas
   du rail de la maquette. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content {
    height: calc(100vh - 96px);
    padding-bottom: 14px;
}

/* Les entrées se suivent en haut de leur groupe. Sans cela, `justify-content:
   stretch` hérité de block-left.css les répartit sur toute la hauteur de
   l'écran et le rail devient une échelle à barreaux très espacés. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom { justify-content: flex-start; }
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category { flex: 0 0 auto; }
/* Le groupe du haut défile si les sections débordent ; celui du bas reste collé.
   Ascenseur masqué : dans un rail de 84 px, ses 16 px se voient comme une bande
   claire le long du bord et mangent la place du libellé. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom.top {
    overflow-y: auto;
    scrollbar-width: none;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom.top::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- Une entrée du rail : icône au-dessus, nom en dessous ---------- */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    /* 2 px de marge intérieure et non 4 : mesuré dans le navigateur,
       « Administration » demande 75 px et n'en avait que 72 — il sortait rogné
       d'un caractère (« Administratior »). Les 4 px rendus suffisent, et un mot
       unique de cette longueur ne peut de toute façon pas passer à la ligne. */
    padding: 10px 5px 9px;
    margin: 0 3px 6px;
    border-radius: 12px;
    /* L'opacité globale délavait aussi les icônes ; on pose une vraie couleur. */
    opacity: 1;
    color: var(--chrome-item);
    text-align: center;
    transition: background .14s ease, color .14s ease;
}
/* Survol : le FOND seul change (maquette : `style-hover="background:
   rgba(255,255,255,.07)"`). Le libellé reste `#A9B3D6` et l'icône
   `rgba(169,179,214,.72)` — l'ancienne règle les passait au blanc. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category:hover {
    background: var(--chrome-hover);
}

/* L'icône vit dans une pastille : c'est elle qui porte l'état actif, comme sur
   la référence. En veille la pastille est transparente — donc rien ne bouge
   entre les deux états, seule la couleur change. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category > .icon {
    /* 20x20 NUE, et non une pastille de 38 : la maquette pose un SVG de 20 px
       sans fond. La pastille venait d'une lecture du balisage, pas du rendu —
       c'est elle qui faisait des tuiles de 87 px la ou la maquette en fait 61. */
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    justify-content: center;
    border-radius: 0;
    /* LA COULEUR DOIT ÊTRE POSÉE ICI, PAS SEULEMENT SUR `.category`.
       Le sélecteur universel de common.css peint CHAQUE élément, donc `.icon`
       aussi : sans règle propre elle vaut #001438 — exactement le fond de la
       sidebar. Le `color: inherit` du <i> héritait donc fidèlement de cette
       encre, et six icônes sur neuf étaient invisibles, noir sur noir. Seule
       celle de la section active se voyait, parce qu'elle a sa propre règle. */
    /* `rgba(169,179,214,.72)` : l'encre d'icône de la maquette, plus discrète que
       celle du libellé. */
    color: var(--chrome-icone);
    transition: background .14s ease, color .14s ease;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category > .icon > i {
    font-size: 17px;
    color: inherit;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category > .icon > img {
    max-width: 19px;
    max-height: 19px;
}

/* Les pictos au trait de la maquette (jetons `--chrome-ico-*`, en tête de
   fichier). Le glyphe ou l'image de la base est masqué, et un ::before de 20x20 le
   remplace, peint en `currentColor` — l'encre de veille / d'actif de `.icon`. */
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> .fa-cube) { --chrome-ico: var(--chrome-ico-cube); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> .fa-sitemap) { --chrome-ico: var(--chrome-ico-sitemap); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> .fa-hashtag) { --chrome-ico: var(--chrome-ico-hashtag); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> .fa-calendar) { --chrome-ico: var(--chrome-ico-calendar); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> img[src*="icone-zbot"]) { --chrome-ico: var(--chrome-ico-zsuite); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> .fa-book) { --chrome-ico: var(--chrome-ico-book); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> .fa-piggy-bank) { --chrome-ico: var(--chrome-ico-zsales); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> img[src*="logo_zaacom_blanc"]) { --chrome-ico: var(--chrome-ico-zaacom); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:has(> .fa-cogs) { --chrome-ico: var(--chrome-ico-admin); }
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:is(
    :has(> .fa-cube), :has(> .fa-sitemap), :has(> .fa-hashtag), :has(> .fa-calendar),
    :has(> img[src*="icone-zbot"]), :has(> .fa-book), :has(> .fa-piggy-bank),
    :has(> img[src*="logo_zaacom_blanc"]), :has(> .fa-cogs)) > :is(i, img) {
    display: none;
}
body.chrome_v2:not(.has_little_menu) .block_left .category > .icon:is(
    :has(> .fa-cube), :has(> .fa-sitemap), :has(> .fa-hashtag), :has(> .fa-calendar),
    :has(> img[src*="icone-zbot"]), :has(> .fa-book), :has(> .fa-piggy-bank),
    :has(> img[src*="logo_zaacom_blanc"]), :has(> .fa-cogs))::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--chrome-ico) center / 20px 20px no-repeat;
    mask: var(--chrome-ico) center / 20px 20px no-repeat;
}

/* Le nom. Deux lignes au maximum : « Base de connaissance » ne tient pas sur
   une, et la couper à un mot vaut mieux que d'étirer le rail pour la plus
   longue étiquette de la Station. Le nom complet reste en `title`. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category > .name {
    /* NI CLAMP NI ROGNAGE — c'est ce que fait la maquette, verifie sur son rendu :
       ses libelles sont en `overflow: visible`, sans `-webkit-line-clamp`, et la
       boite prend la largeur du texte. « Base de connaissance » y mesure 82 px et
       « Administration » 86, dans une tuile de 78 : ils DEBORDENT, et le designer
       l'a vu — ce sont nos vrais libelles, pas des donnees fictives.
       Le clamp precedent, lui, les coupait avec des points de suspension. */
    /* `auto` et non `max-content` : enfant d'un flex en colonne avec
       `align-items: center`, la boite vaut fit-content — 68 px pour « Tableau de
       bord » (qui passe donc sur deux lignes), mais 82 pour « Base de
       connaissance » et 86 pour « Administration », dont le mot le plus long
       depasse. C'est exactement ce que mesure la maquette. */
    display: block;
    width: auto;
    max-width: none;
    overflow: visible;
    /* block-left.css met `white-space: nowrap` : sans cette remise a zero
       « Base de connaissance » ne passerait pas sur deux lignes. */
    white-space: normal;
    hyphens: none;
    margin: 0;
    /* 11,5 px, la valeur de la charte, relevee sur la maquette rendue avec sa
       hauteur de ligne de 14,375 px. Une passe anterieure l'avait baissee a
       10 px pour que « Administration » ne soit pas rogne — mais elle le
       calculait avec l'ancienne geometrie (pastille d'icone de 38 px, padding
       de 2 px). A la geometrie de la maquette le libelle dispose de 68 px, et
       la coupe se verifie au navigateur, pas au raisonnement. */
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
}

/* Actif (charte V5) : fond bleu translucide sur TOUTE l'entrée, icône en bleu
   clair, nom en blanc. PAS DE FILET À GAUCHE : le trait de 3 px que block-left.css
   dessine (et que cette feuille recalait sur le bord de l'entrée) est retiré à la
   demande du 2026-10-08 — la tuile pleine suffit à désigner l'entrée active. Retiré
   aussi sur le rail des pages projet (`has_little_menu`), qui hérite du même trait. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category.active {
    position: relative;
    background: var(--chrome-actif-fond);
    color: #fff;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category.active > .icon {
    background: transparent;
    color: var(--chrome-accent);
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category.active > .name { font-weight: 600; color: #fff; }
body.chrome_v2 .block_left > .main_menu > .content > .topOrBottom > .container_category > .category.active::before {
    content: none;
    display: none;
}

/* Un filet sépare le bloc du bas (Administration) du reste, comme la référence
   sépare son premier groupe. */
/* Le filet est porté par l'ENTRÉE elle-même (maquette : `border-top` sur la tuile
   Administration, 78 px de large, `padding-top: 16px`, `margin-top: 8px`), pas par
   le groupe qui la contient : ce dernier le faisait courir bord à bord (84 px).
   Le rayon de 12 est CONSERVÉ : la tuile de la maquette le porte aussi, donc son
   filet s'effile aux deux bouts. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom.bottom > .container_category > .category {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--chrome-sep);
}

/* La section dont le panneau est ouvert reste allumée pendant la lecture. */
body.chrome_v2:not(.has_little_menu) .block_left .category.chrome_ouvert { background: var(--chrome-hover); }

/* ============================================================
   LE PANNEAU DE SECTION
   Réutilise `.others_menu > .menu`, déjà positionné et animé par la Station :
   on ne recrée pas un second système de volets, on l'habille et on lui ajoute
   l'ouverture au survol.
   ============================================================ */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu {
    /* 303 px hors tout : 302 de contenu (maquette V5) + le filet gauche de 1 px.
       La Station est en `border-box` (common.css) : 302 englobait le filet et
       rognait les entrées à 301, chevrons 1 px trop à gauche. */
    width: 303px;
    /* Ombre MARINE, jamais noire (maquette : `14px 0 40px rgba(11,21,51,.22)`). */
    box-shadow: 14px 0 40px rgba(11, 21, 51, .22);
    border-left: 1px solid rgba(255, 255, 255, .12);
    /* Pas de rembourrage haut : l'en-tête du panneau commence à y = 0 et porte
       lui-même ses 26 px (maquette : titre à y = 26). Les 6 px d'avant le
       décalaient à 32. */
    padding-top: 0;
    overflow-y: auto;
}
/* En-tête du panneau : l'icône et le nom de la section, comme sur la référence.
   Rendu par block-left.php ; absent, rien ne casse. */
/* AUX MESURES DE LA MAQUETTE 02, PAS DE CELLES DE LA CHARTE §07. Les deux
   décrivent ce panneau et ne disent pas la même chose — la charte pose 22/22/18
   et 13,5 px, l'écran 26 et 14. La règle du chantier tranche : la maquette
   d'ÉCRAN l'emporte là où elle est explicite, c'est elle qu'on ouvre à côté du
   live (prototype 02, l. 58-60). J'avais d'abord appliqué la charte ici — la
   même erreur qu'au lot précédent, où trois segmentés avaient été « corrigés »
   vers la charte alors qu'ils tenaient leurs valeurs de leur écran.

   Relevé par l'audit pixel du 2026-09-21, qui voyait ces cinq valeurs sur les
   SEIZE écrans-thèmes : c'est la coquille, elle est partout. Le filet du bas
   disparaît — la maquette sépare l'en-tête de la liste par le filet HAUT de la
   première ligne, pas par deux traits. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head {
    display: flex;
    align-items: center;
    gap: 12px;
    height: auto;
    /* 26 sur les quatre côtés : consensus des maquettes 02 et 04-10 (en-tête h 73,
       titre de groupe y 73, 1re entrée y 118). La 03 (26 26 22) est périmée pour la coquille. */
    padding: 26px;
    margin-bottom: 0;
    border-bottom: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head i { font-size: 19px; color: #fff; }
/* Le picto de section est un SVG AU TRAIT de 19x19 sur la maquette (02), pas un
   glyphe Font Awesome plein : `fa-sitemap` pesait 25,4 px de large et repoussait
   le titre à x = 148,4 au lieu de 142. Même masque que les pictos du rail
   (`--chrome-ico-*`), peint en `currentColor` (blanc, hérité de `.menu_head`),
   à 19 px. Le glyphe ou l'image de la base est masqué, un ::before le remplace. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> .fa-cube) { --chrome-ico: var(--chrome-ico-cube); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> .fa-sitemap) { --chrome-ico: var(--chrome-ico-sitemap); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> .fa-hashtag) { --chrome-ico: var(--chrome-ico-hashtag); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> .fa-calendar) { --chrome-ico: var(--chrome-ico-calendar); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> img[src*="icone-zbot"]) { --chrome-ico: var(--chrome-ico-zsuite); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> .fa-book) { --chrome-ico: var(--chrome-ico-book); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> .fa-piggy-bank) { --chrome-ico: var(--chrome-ico-zsales); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> img[src*="logo_zaacom_blanc"]) { --chrome-ico: var(--chrome-ico-zaacom); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:has(> .fa-cogs) { --chrome-ico: var(--chrome-ico-admin); }
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:is(
    :has(> .fa-cube), :has(> .fa-sitemap), :has(> .fa-hashtag), :has(> .fa-calendar),
    :has(> img[src*="icone-zbot"]), :has(> .fa-book), :has(> .fa-piggy-bank),
    :has(> img[src*="logo_zaacom_blanc"]), :has(> .fa-cogs)) > :is(i, img) {
    display: none;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head:is(
    :has(> .fa-cube), :has(> .fa-sitemap), :has(> .fa-hashtag), :has(> .fa-calendar),
    :has(> img[src*="icone-zbot"]), :has(> .fa-book), :has(> .fa-piggy-bank),
    :has(> img[src*="logo_zaacom_blanc"]), :has(> .fa-cogs))::before {
    content: "";
    display: block;
    flex: none;
    width: 19px;
    height: 19px;
    background-color: currentColor;
    -webkit-mask: var(--chrome-ico) center / 19px 19px no-repeat;
    mask: var(--chrome-ico) center / 19px 19px no-repeat;
}
/* Toutes les catégories n'ont pas une icône de police : certaines portent une
   IMAGE (le logo Zaacom, celui de zSuite). Sans contrainte de taille, elle
   s'affichait à sa taille native et recouvrait le haut du panneau. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head img {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}
/* Le `<span>` du titre est touché DIRECTEMENT par le sélecteur universel de
   common.css : la couleur de son parent ne lui parvient jamais. Sans cette
   ligne, le titre du panneau sort en encre foncée sur le navy — invisible.
   Même piège pour le CORPS : `* { font-size: 13px }` de common.css prend ce
   <span> sans classe, et le 14 px posé sur `.menu_head` ne lui parvenait jamais
   (13/700 mesuré au lieu de 14/700). */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head span {
    color: inherit;
    font-size: inherit;
}

/* Le titre de groupe du panneau, aux mesures de la MAQUETTE 02 (l. 64) :
   18/26/10, 11,5 px en gras, .14em, blanc à 42 %. Il était en 14/24/4, 10 px,
   demi-gras, .16em, blanc à 55 % — cinq valeurs, sur toutes les pages. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .name {
    padding: 18px 26px 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .42);
}
/* LA LIGNE DU PANNEAU, AUX MESURES DE LA MAQUETTE 02 (l. 66-67).
   Elle est apparue à l'audit pixel du 2026-09-21 : 47 px de haut contre 44 sur la
   maquette, sur 48 entrées, et sur TOUTES les pages — c'est la coquille. Cinq
   valeurs étaient à côté :
     rembourrage 13/10 + marge 14  →  13/26, sans marge (le filet va d'un bord à
                                      l'autre, comme sur la maquette)
     filet EN BAS                  →  EN HAUT (le premier élément n'a donc pas de
                                      trait au-dessus du titre de section)
     13,5 px conservé, mais le chevron passe de 17 à 13 (SVG de la maquette)
     `--chrome-item`               →  blanc en demi-gras : c'est une entrée de
                                      navigation, pas une légende. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 13px 26px;
    border-top: 1px solid var(--chrome-sep);
    border-bottom: 0;
    font-size: 13.5px;
    /* L'INTERLIGNE EST POSÉ, sinon le chevron — un glyphe de 17 px — impose sa
       boîte de ligne à toute la rangée. 20 px est la boîte naturelle d'un texte
       de 13,5 : la rangée fait alors 13 + 20 + 13 + 1 = 47, comme la maquette. */
    line-height: 20px;
    font-weight: 600;
    color: #fff;
    border-radius: 0;
    /* Maquettes 02-10 : le style-hover n'a AUCUNE transition. block-left.css (l. 236)
       pose `transition: all .2s ease` sur `.page` : on la coupe. L'animation
       `zItemIn` (propriété `animation`) n'est pas concernée. */
    transition: none;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page:hover {
    background: rgba(255, 255, 255, .08);
}
/* Le filet est désormais EN HAUT : c est la PREMIÈRE ligne de la PREMIÈRE section
   qui n en veut pas, elle suit immédiatement le titre du panneau. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection:first-child > .pages > .page:first-child { border-top: 0; }
/* Le chevron de la référence : un SVG de 13 px, trait de 2, `rgba(255,255,255,.55)`
   (maquette 02, l. 71). Un glyphe texte « › » ne rendait qu'une virgule à côté.
   Peint par masque pour suivre `color`, comme les icônes du rail (voir plus bas),
   sans toucher au balisage de block-left.php. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page::after {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: var(--chrome-chevron) center / 13px 13px no-repeat;
    mask: var(--chrome-chevron) center / 13px 13px no-repeat;
    color: rgba(255, 255, 255, .55);
}
/* Au survol seul le FOND de la ligne change (maquettes 02-09 : `style-hover =
   background:rgba(255,255,255,.08)`) : le chevron reste immobile, en
   rgba(255,255,255,.55). L'ancien rail l'allumait en accent et le décalait de 3 px. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* OUVERTURE DU PANNEAU — maquette : le panneau reste en place (left:84) et joue
   `zMenuIn .2s cubic-bezier(.2,.8,.25,1) both` ; chaque entrée joue `zItemIn .26s`
   en cascade de 22 ms. Le gestionnaire (chrome-v2.js) pose `style="left: 84px"` à
   l'ouverture et `left: -300px` à la fermeture : on s'accroche à cet état inline
   (pas de classe à poser), l'animation repart donc à chaque ouverture. Les
   keyframes sont dans v5-tokens.css. La transition de `left` de block-left.css
   (0.2s, qui faisait glisser le panneau depuis -300) est coupée ici. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu {
    transition: none;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu[style*="left"]:not([style*="left: -"]) {
    animation: zMenuIn .2s cubic-bezier(.2, .8, .25, 1) both;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu[style*="left"]:not([style*="left: -"]) > .psection > .pages > .page {
    animation: zItemIn .26s cubic-bezier(.2, .8, .25, 1) both;
}
/* Délai = .03 s + n × .022 s, n = rang de l'entrée dans TOUT le panneau (`--i`,
   posé par block-left.php, compteur partagé entre groupes), sans plafond. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu[style*="left"]:not([style*="left: -"]) > .psection > .pages > .page {
    animation-delay: calc(.03s + var(--i, 0) * .022s);
}

/* Plus de voile sombre : le panneau s'ouvre au survol, un fond assombri qui
   apparaît et disparaît au passage de la souris clignoterait. */
body.chrome_v2:not(.has_little_menu) .block_left > .modal { display: none !important; }

/* ---------- Barre du haut : même famille ---------- */
body.chrome_v2:not(.has_little_menu) .block_top .menu_top .left .top .title {
    font-family: var(--chrome-font);
    /* 600, la valeur relevee sur la maquette. Le 700 venait d'ici et battait le
       `font: 600 19px/34px` de v5-shell.css — selecteur plus specifique, donc la
       charte perdait sur TOUS les ecrans a coquille v2, pas seulement le 02. */
    font-weight: 600;
    letter-spacing: -.01em;
}