@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) {
    /* 92 et non 84 : à 84, une entrée n'avait que 56 px pour son libellé, et
       « Administration » se coupait en « Administra / tion ». Les huit
       caractères gagnés suffisent aux étiquettes de la Station. */
    /* La charte V5 dessine un rail de 84 px. On garde 92, pour la raison qui
       avait déjà fait passer de 84 à 92 : à 84, une entrée n'a que 56 px pour
       son libellé et « Administration » se coupe en « Administra / tion ». Les
       étiquettes de la maquette sont plus courtes que celles de la Station. */
    --chrome-rail: 92px;
    --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, un filet de 3 px à gauche, l'icône en bleu clair, le nom en
       blanc. */
    --chrome-actif-fond: rgba(61, 139, 255, .20);
    --chrome-actif-barre: var(--accent);
    --chrome-accent: #7FB2FF;
    --chrome-accent-ink: #FFFFFF;
    --chrome-item: rgba(169, 179, 214, .92);       /* --text-mid du rail */
    --chrome-hover: rgba(255, 255, 255, .07);
    --chrome-sep: rgba(255, 255, 255, .10);

    /* 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é ---------- */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header {
    height: 75px;
    padding: 0;
    justify-content: center;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header > .logo_station.normal { display: none; }
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .header > .logo_station.little {
    position: static;
    display: flex;
    opacity: 1;
    width: 44px;
}
/* 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; }

/* 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: 6px;
    height: auto;
    min-height: 64px;
    /* 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: 9px 2px;
    margin: 2px 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;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category:hover {
    background: var(--chrome-hover);
    color: #fff;
}

/* 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 {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    justify-content: center;
    border-radius: 13px;
    /* 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. */
    color: var(--chrome-item);
    transition: background .14s ease, color .14s ease;
}
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category:hover > .icon { color: #fff; }
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;
}

/* 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 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* block-left.css met `white-space: nowrap` : sans cette remise à zéro le nom
       ne va jamais à la ligne, et « Base de connaissance » sort rogné au premier
       mot au lieu de tenir sur deux lignes. */
    white-space: normal;
    /* PAS de `word-break: break-word` : il coupait « Administration » au milieu
       du mot. Un libellé trop long pour deux lignes est tronqué par le clamp
       avec des points de suspension — une coupure propre, à un endroit qui se
       lit —, et le nom complet reste dans l'attribut `title`. */
    hyphens: none;
    margin: 0;
    /* 10 px, et non les 11,5 de la charte — qui reste au-dessus de son propre
       plancher de 10 px. Essayé à 11 : « Administration » et « Base de
       connaissance » sont des mots trop longs pour 80 px utiles, et comme un
       mot unique ne se coupe pas, le clamp ne les met pas sur deux lignes — il
       les ROGNE (« Administratic »). Les étiquettes de la maquette sont plus
       courtes que celles de la Station. */
    font-size: 10px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
    max-width: 100%;
}

/* Actif (charte V5) : fond bleu translucide sur TOUTE l'entrée, filet de 3 px
   à gauche, icône en bleu clair, nom en blanc.
   La charte XD posait une pastille pleine sur la seule icône et masquait le
   filet ; la V5 fait l'inverse. On rétablit donc le ::before, que block-left.css
   dessine déjà, en le recalant sur le bord de l'entrée et non sur celui de
   l'écran. */
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:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom > .container_category > .category.active::before {
    content: "";
    display: block;
    position: absolute;
    left: -6px;
    top: 12px;
    bottom: 12px;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
    background: var(--chrome-actif-barre);
}

/* Un filet sépare le bloc du bas (Administration) du reste, comme la référence
   sépare son premier groupe. */
body.chrome_v2:not(.has_little_menu) .block_left > .main_menu > .content > .topOrBottom.bottom {
    border-top: 1px solid var(--chrome-sep);
    padding-top: 6px;
}

/* 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); color: #fff; }

/* ============================================================
   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 {
    /* 302 px : la largeur de la maquette V5. */
    width: 302px;
    box-shadow: 14px 0 40px rgba(11, 21, 51, .22);
    border-left: 1px solid rgba(255, 255, 255, .12);
    padding-top: 6px;
    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. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 69px;
    padding: 0 24px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--chrome-sep);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head i { font-size: 15px; color: var(--chrome-accent); }
/* 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. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .menu_head span { color: inherit; }

body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .name {
    padding: 14px 24px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .55);
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 14px;
    padding: 13px 10px;
    border-bottom: 1px solid var(--chrome-sep);
    font-size: 13.5px;
    color: var(--chrome-item);
    border-radius: 0;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection:last-child > .pages > .page:last-child { border-bottom: 0; }
/* Le chevron de la référence. « › » et pas « ▸ » : Hero New n'a pas le glyphe
   U+25B8, il sortirait en caractère de remplacement. */
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page::after {
    content: '›';
    font-size: 17px;
    line-height: 1;
    color: rgba(255, 255, 255, .42);
    transition: transform .14s ease, color .14s ease;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page:hover {
    background: transparent;
    color: #fff;
}
body.chrome_v2:not(.has_little_menu) .block_left > .others_menu > .menu > .psection > .pages > .page:hover::after {
    color: var(--chrome-accent);
    transform: translateX(3px);
}

/* 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);
    font-weight: 700;
    letter-spacing: -.01em;
}