@charset "utf-8";
/* ============================================================
   DESIGN V5 — LA COQUILLE (barre du haut, onglets, bascule de thème)

   Le rail de gauche est traité par chrome-v2.css, qui existait déjà et n'a été
   que re-skinné. Cette feuille prend le reste de la coquille commune : l'en-tête
   collant à deux lignes, les onglets soulignés, les pastilles Clair/Sombre, et
   les surfaces de la zone de contenu.

   Chargée APRÈS block-top.css, qu'elle surcharge. Rien n'est renommé côté
   balisage : block-top.php garde sa structure (.menu_top > .left > .top/.tabs,
   .menu_top > .right, .menu_bottom), qui est déjà celle de la maquette.

   DEUX PIÈGES DE CE DÉPÔT, tous deux actifs ici :

   1. common.css pose `* { color: var(--color--text) }` et block-top.css pose
      `body > .block_top * { color: ... }`. Ces sélecteurs touchent CHAQUE
      élément : hériter d'un parent ne suffit jamais, il faut une règle qui les
      batte en spécificité. D'où les sélecteurs longs ci-dessous.
   2. `--color--principal--block--top` sert à LA FOIS d'encre de la barre et de
      fond des pastilles rondes. Le pont de v5-tokens.css le fait pointer sur
      `--text`, qui est le bon choix pour l'encre — mais en sombre `--text` vaut
      #FFF, et une pastille blanche à texte blanc disparaît. Les fonds sont donc
      repris explicitement sur `--rail`, comme dans la charte.
   ============================================================ */

/* ============================================================
   L'EN-TÊTE, MESURÉ SUR LA MAQUETTE RENDUE

   Toutes les valeurs qui suivent ont été relevées dans le navigateur sur les
   prototypes du handoff (`serve.mjs`), pas déduites de leur balisage : les
   .dc.html sont truffés de {{ }} et de sc-for, et la mise en page réelle ne s'y
   devine pas.

   Conteneur      padding 18 40 0 · filet bas 1px --line · PAS de fond
   Rangée 1       h 46 · gap 34 · gauche gap 16 · droite gap 12
   Titre          19px/600 · interlettrage -.01em · capitales SAUF page projet
   Avatars        30x30 · filet 2px --surface · chevauchement -8
   Boutons ronds  26x26 · filet 1px --line · --text-mid · gap 10
   Rechercher     h 38 · rayon 12 · fond --chip · 12,5px --text-mid
   Bascule thème  h 38 · marge 4 · rayon 12 · pastilles h 30 · 0 13 · rayon 9
   Avatar compte  38x38 · rond
   Rangée 2       h 34 · gap 24 · onglet 13,5px · marge basse 12 · filet 2px
   ============================================================ */

/* ---------- 1. La barre du haut ---------- */

body.chrome_v2 > .block_top {
    /* PAS DE FOND. La maquette laisse le fond de page passer sous l'en-tête —
       c'est ce qui laisse voir les halos du haut de colonne. Le README parle
       d'un fond `--surface` ; le prototype, lui, n'en pose aucun, et c'est lui
       qui fait référence ici. */
    background-color: transparent;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    height: auto;
}
body.chrome_v2 > .block_top > .menu_top {
    height: auto;
    min-height: 46px;
    padding-top: 18px;
    border-bottom: 0;
    align-items: flex-start;
}
body.chrome_v2 > .block_top > .menu_top > .left {
    height: auto;
    padding: 0 40px 0 0;
    /* 16 et non 12 : rangée de titre 18 → 64, onglets à y=80 dans les maquettes
       05/06/07/09 (et la barre des collaborateurs du 04 prend le même écart). À 12,
       la navigation projet tombait à 76 et l'en-tête finissait à 111 au lieu de 115. */
    gap: 16px;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top {
    padding-top: 0;
    min-height: 46px;
    gap: 16px;
}
body.chrome_v2 > .block_top > .menu_top > .right {
    padding: 0 40px 0 0;
    gap: 12px;
    align-items: center;
    min-height: 46px;
}
/* Le décalage à gauche vient du rail : la maquette colle le contenu à 40 px du
   bord de la colonne, pas du rail. */
body.chrome_v2 > .block_top > .menu_top {
    padding-left: calc(var(--chrome-rail, 92px) + 40px);
}

/* Titre : 19/600, capitales — SAUF sur une page projet, où c'est un domaine. */
body.chrome_v2 > .block_top > .menu_top > .left > .top > .title {
    font: 600 19px var(--font);
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--text);
    max-width: none;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > .title.title_projet {
    text-transform: none;
}
/* Le complément du titre (maquette 04) : une pastille d'étendue — « Ma vue »,
   ou le nom du collaborateur regardé — et la semaine courante en note. */
body.chrome_v2 > .block_top > .menu_top > .left > .top > .title_badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 11px;
    border-radius: 7px;
    background: var(--accent-soft);
    /* `--accent` et non `--accent-ink` : la maquette 04 peint ce badge à
       l'accent, et la décision du 2026-09-25 l'a fixé ainsi. En sombre, l'encre
       d'accent (#7FB2FF) était plus claire que #3D8BFF. En clair les deux jetons
       valent #005CF0 : rien ne change. */
    color: var(--accent);
    font: 700 11.5px var(--font);
    white-space: nowrap;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > .title_note {
    font: 400 11.5px var(--font);
    color: var(--text-dim);
    white-space: nowrap;
}

/* Les avatars d'équipe : 30 px cerclés de 2 px de la surface, soit 34 px
   HORS-TOUT (la maquette les déclare en boîte de contenu : 30 + 2 + 2), chevauchés
   de 8 px. Chaque `.image` fait donc 26 px — le pas — et son image, large de 34,
   commence 8 px AVANT lui : elle finit pile au bord droit de sa case, le dernier
   avatar ferme le groupe, et les 16 px de gouttière jusqu'aux boutons ronds se
   comptent depuis son bord (maquette : `gap: 16px` du conteneur). */
body.chrome_v2 > .block_top > .menu_top > .left > .top > .team {
    padding-left: 0;
    margin-right: 0;
    gap: 0;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > .team > .image {
    width: 26px;
    height: 34px;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > .team > .image > img {
    width: 34px;
    height: 34px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background-color: var(--surface2);
    object-fit: cover;
}

/* Les icônes d'action du projet deviennent les boutons ronds de la maquette :
   26 px + filet de 1 px `--line` = 28 HORS-TOUT (boîte de contenu du prototype),
   encre `--text-mid`, accent au survol. C'étaient deux glyphes nus de 18 px posés
   à la suite du titre. */
body.chrome_v2 > .block_top > .menu_top > .left > .top > i {
    width: 28px;
    height: 28px;
    flex: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--text-mid);
    font-size: 11px;
    font-weight: 400 !important;
    transition: border-color .16s var(--ease), color .16s var(--ease);
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > i:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* Deux icônes qui se suivent sont espacées de 10 px (maquette). */
body.chrome_v2 > .block_top > .menu_top > .left > .top > i + i { margin-left: -6px; }

/* LES PICTOS DE L'EN-TÊTE : les SVG au trait de la maquette (loupe, soleil, lune,
   infos, statistiques), à la place des glyphes Font Awesome de 12,5 à 13 px.
   Peints par MASQUE dans un aplat `currentColor` : l'encre, les états de survol et
   d'actif restent ceux du bouton, et block-top.php n'est pas touché. Le glyphe
   FA (`::before { content: "\f002" }`) est remplacé par un carré de 14 px (13 px
   dans un bouton rond) ; les jetons sont locaux à ce bloc. */
body.chrome_v2 > .block_top {
    --v5-ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5 14 14'/%3E%3C/svg%3E");
    --v5-ico-sun: 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.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='4.2'/%3E%3Cpath d='M11 1.6v2.2M11 18.2v2.2M1.6 11h2.2M18.2 11h2.2M4.3 4.3l1.6 1.6M16.1 16.1l1.6 1.6M17.7 4.3l-1.6 1.6M5.9 16.1l-1.6 1.6'/%3E%3C/svg%3E");
    --v5-ico-moon: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 13.2A7.3 7.3 0 0 1 8.8 4.5a7.3 7.3 0 1 0 8.7 8.7z'/%3E%3C/svg%3E");
    --v5-ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M8 7.2v4.4M8 4.6v.1'/%3E%3C/svg%3E");
    --v5-ico-stats: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3 12V8.4M6.3 12V5M9.7 12V9.2M13 12V6.6'/%3E%3Cpath d='M2 13.8h12'/%3E%3C/svg%3E");
    /* « Paramètres du site » (maquettes Link building / zAnalytics) : le cercle et
       ses huit rayons, viewBox 22, trait 1,9. */
    --v5-ico-cog: 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.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='3.1'/%3E%3Cpath d='M11 1.6v2.6M11 17.8v2.6M1.6 11h2.6M17.8 11h2.6M4.2 4.2l1.9 1.9M15.9 15.9l1.9 1.9M17.8 4.2l-1.9 1.9M6.1 15.9l-1.9 1.9'/%3E%3C/svg%3E");
}
body.chrome_v2 > .block_top > .menu_top > .right > .search.bubble > i,
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill > i {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
    line-height: 0;
}
body.chrome_v2 > .block_top > .menu_top > .right > .search.bubble > i::before,
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill > i::before,
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-info-circle::before,
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-analytics::before,
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-cog::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--v5-ico) center / contain no-repeat;
    mask: var(--v5-ico) center / contain no-repeat;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-info-circle::before,
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-analytics::before,
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-cog::before {
    width: 13px;
    height: 13px;
}
body.chrome_v2 > .block_top > .menu_top > .right > .search.bubble > i::before { --v5-ico: var(--v5-ico-search); }
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill > i.fa-sun::before { --v5-ico: var(--v5-ico-sun); }
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill > i.fa-moon::before { --v5-ico: var(--v5-ico-moon); }
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-info-circle::before { --v5-ico: var(--v5-ico-info); }
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-analytics::before { --v5-ico: var(--v5-ico-stats); }
body.chrome_v2 > .block_top > .menu_top > .left > .top > i.fa-cog::before { --v5-ico: var(--v5-ico-cog); }

/* ---------- 1b. La rangée d'onglets en PLEINE LARGEUR (D5) ----------
   Dans les trois maquettes la rangée d'onglets occupe toute la largeur du contenu
   (1516 px, x 124 → 1640), SOUS la recherche, la bascule et l'avatar. Le live
   l'enfermait dans `.left` (1101 px), donc elle passait à la ligne 400 px trop tôt.

   `.left` disparaît de la boîte (`display: contents`) : ses deux enfants — le titre
   et la rangée — entrent dans la grille de `.menu_top`. Titre en ligne 1 avec les
   actions de droite, rangée en ligne 2 sur les deux colonnes. L'écart de 16 px que
   `.left` posait par son `gap` devient la marge haute de la rangée ; le retrait de
   40 px que `.left` posait en padding droit est repris sur chaque enfant. Rien ne
   bouge de visible tant que la rangée tient dans 1101 px (aucune page projet, par
   exemple). `#expand_block_left` est en `position: absolute` : hors grille. */
body.chrome_v2 > .block_top > .menu_top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}
body.chrome_v2 > .block_top > .menu_top > .left {
    display: contents;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-right: 40px;
}
body.chrome_v2 > .block_top > .menu_top > .right {
    grid-column: 2;
    grid-row: 1;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 16px 40px 0 0;
}

/* ---------- 2. Les onglets ---------- */

body.chrome_v2 > .block_top > .menu_top > .left > .tabs {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 24px;
    min-height: 34px;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs .tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0 0 12px;
    border-bottom: 2px solid transparent;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 22px;
    color: var(--text-mid);
    transition: color .14s var(--ease), border-color .14s var(--ease);
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs .tab.active {
    font-weight: 600;
    color: var(--text);
    border-bottom-color: var(--accent);
}
/* Les ::after qui portaient le soulignement de 3 px n'ont plus d'objet : c'est
   la bordure basse de l'onglet qui le dessine, sur 2 px et à l'accent. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs .tab.active::after,
body.chrome_v2 > .block_top > .menu_top > .left > .tabs .tab:not(.active)::after {
    display: none;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs .tab:not(.active):hover {
    color: var(--text);
}
/* Le chevron de la maquette : 8 px, discret, à droite du libellé. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs .tab > .tab_chevron {
    font-size: 8px;
    opacity: .7;
    color: inherit;
    margin: 0;
    /* Blindage : une feuille de page qui pose `i { padding: … }` (veille.css : 7 px) ne doit
       pas gonfler le chevron (19 x 22 au lieu de 5 x 8) ni la rangée d'onglets. */
    padding: 0;
}
/* Le « ▾ » des onglets de la rangée PROJET est un glyphe de texte de 8 px dont la boîte
   naturelle mesure 6,69 (maquettes Link building / zAnalytics) ; components/projet-nav.css
   la forçait à 7 : chaque onglet dérivait de 0,3 px de plus que la maquette (Link Building
   à 804,8 au lieu de 803, « Plus » à 1154,1 au lieu de 1151,4). Station seulement (le Client
   Center, le Partner et le Hub ne portent pas `chrome_v2` et gardent leur rendu). */
body.chrome_v2 > .block_top .pv2_nav_t > .pv2_nav_chev {
    width: auto;
}
/* La pastille de compteur d'un onglet « number ». */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs .tab.number::before {
    background-color: var(--aqua);
    color: var(--on-accent);
    font-size: 10.5px;
    font-weight: 600;
}

/* ---------- 2b. La rangée de MODULE (D4) ----------
   Grammaire de la maquette Modules, mesurée : onglets de 13 px, interligne normal,
   gouttière de 22 px sur les DEUX axes, `padding-bottom` 11 (boîte de 33), marge haute
   14 (la rangée de module tombe à y 78, celle du projet à 80), retour à la ligne —
   jamais de « Plus » (block-top.php laisse `setTabsOverflow` de côté).

   `.tab_ext` est la boîte vide que la maquette réserve au marqueur « ↗ » des pages
   d'un autre fichier. Le marqueur n'est pas rendu (D8), la boîte garde ses 6 px de
   gouttière. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs.tabs_module {
    margin-top: 14px;
    gap: 22px;
    flex-wrap: wrap;
    min-height: 0;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs.tabs_module .tab {
    font-size: 13px;
    line-height: normal;
    padding: 0 0 11px;
    gap: 6px;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs.tabs_module .tab > .tab_ext {
    font-size: 10px;
    color: var(--text-dim);
}

/* Le BADGE du module (D6), à droite du titre : « Administration », « zSuite »…
   23 de haut, rayon 6, 11/700, `--accent-soft` + `--accent-ink` (la règle 7 du socle :
   l'encre d'un texte posé sur un lavis). `.title_badge`, plus haut, est un AUTRE
   composant (complément de page : « Ma vue » + semaine) et reste tel quel. */
body.chrome_v2 > .block_top > .menu_top > .left > .top > .title_module {
    display: inline-flex;
    align-items: center;
    height: 23px;
    padding: 0 10px;
    margin-left: -4px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font: 700 11px var(--font);
    white-space: nowrap;
}

/* Les volets déroulants d'onglet. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.expandable > .items,
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-menu);
    padding: 7px;
    animation: zPopIn .16s var(--ease) both;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.expandable > .items > .item {
    border-radius: 9px;
    padding: 9px 11px;
    font-size: 12.5px;
    color: var(--text-mid);
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.expandable > .items > .item:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
}
/* LA PAGE COURANTE D'UN VOLET dit la même chose que celle de la liste « Plus » (plus bas) :
   encre d'accent, 600, aucun filet. L'entrée est une `a.item.tab.active` : la règle de
   RANGÉE `.tabs .tab.active` lui posait le soulignement de 2 px de l'onglet — un trait bleu
   courbé par le rayon 9 de l'entrée — sur le fond neutre de block-top.css. La bordure basse
   reste dans la boîte (transparente) : la hauteur des entrées ne bouge pas. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.expandable > .items > .item.active {
    background: none;
    border-bottom-color: transparent;
    color: var(--accent);
    font-weight: 600;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.expandable > .items > .item.active:hover {
    background: var(--accent-soft);
}

/* ---------- 3. Les pastilles rondes de droite ---------- */

body.chrome_v2 > .block_top > .menu_top > .right .bubble {
    background: var(--chip);
    border-radius: 50%;
    transition: background .16s var(--ease);
}
body.chrome_v2 > .block_top > .menu_top > .right .bubble * { color: var(--text-mid); }
/* « Rechercher » n'a PAS d'état de survol sur la maquette (elle reste `--chip`) :
   la pastille est exclue de la règle des bulles rondes. Le `!important` de la
   seconde est le seul moyen de battre celui de block-top.css (`.bubble:hover
   { background: var(--color--principal--block--top--hover) !important }`), qui
   peignait la pastille en bleu d'accent au survol. */
body.chrome_v2 > .block_top > .menu_top > .right .bubble:not(.search):hover { background: var(--surface2) !important; opacity: 1; }
body.chrome_v2 > .block_top > .menu_top > .right .bubble.search:hover { background: var(--chip) !important; opacity: 1; }

/* « RECHERCHER » EST UNE PASTILLE, PAS UNE BULLE (maquette) : h38, rayon 12,
   fond --chip, icône puis libellé. Une bulle ronde muette ne dit pas ce
   qu'elle cherche, et sa forme n'existe nulle part ailleurs dans le lot. */
body.chrome_v2 > .block_top > .menu_top > .right > .search.bubble {
    width: auto;
    height: 38px;
    padding: 0 16px;
    gap: 9px;
    border-radius: 12px;
    background: var(--chip);
    margin-right: 0;
}
body.chrome_v2 > .block_top > .menu_top > .right > .search.bubble > i,
body.chrome_v2 > .block_top > .menu_top > .right > .search.bubble > span {
    color: var(--text-mid);
    font-size: 12.5px;
}
body.chrome_v2 > .block_top > .menu_top > .right > .search.bubble > i { font-size: 13px; }

body.chrome_v2 > .block_top > .menu_top > .left > .top > .contact-us {
    background: var(--rail);
    color: var(--on-rail);
    border-radius: 9px;
    font-size: 11.5px;
    font-weight: 600;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > .contact-us:hover {
    background: var(--rail) !important;
    opacity: .84;
}

/* ---------- 4. La bascule Clair / Sombre ---------- */
/* Deux pastilles dans un conteneur `--chip` ; l'active prend la surface. */

body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch {
    display: flex;
    align-items: center;
    gap: 4px;
    /* 46 = 38 de pastilles + 2 x 4 de rembourrage : la maquette déclare
       `height: 38px; padding: 4px` en boîte de CONTENU, donc rend 46 (relevé sur
       les écrans 02, 04, 05, 07, 08, 09 ; l'écran 03, isolé, dit 42 — voir la
       contestation). Les pastilles de 30 sont inchangées, centrées. */
    height: 46px;
    padding: 4px;
    /* Pas de marge : la gouttière de 12 px de `.right` suffit (maquette : Sombre
       finit à 1 815, l'avatar commence à 1 827). Les 15 px s'y ajoutaient — 27. */
    margin-right: 0;
    border-radius: 12px;
    background: var(--chip);
    flex: none;
}
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    /* La pastille INACTIVE est en `--text-dim` (maquette). Le commentaire d'avant
       reculait devant 2,78:1 sur `--chip` — c'était l'ancien `--text-dim`
       (#8A93AF) ; le socle l'a depuis renforcé (#697085 en clair, #7784B3 en
       sombre), donc le jeton passe maintenant le seuil et la maquette peut être
       suivie. */
    color: var(--text-dim);
    font: 600 12.5px var(--font);
    cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease);
}
/* `body > .block_top *` peint chaque descendant : sans ces deux règles, le
   libellé et l'icône des pastilles restent à l'encre principale et l'état actif
   ne se voit pas. */
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill > i,
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill > span {
    color: inherit;
    font-size: 12.5px;
}
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill.is_on {
    background: var(--surface);
    color: var(--text);
}
/* La pastille active est `--surface2` en SOMBRE (maquette : `darkPillBg:
   var(--surface2)`, README idem) et `--surface` en clair. Sur le conteneur
   `--chip` translucide, `--surface` (#0E1533) était plus sombre que prévu. */
:root[data-zt="dark"] body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill.is_on {
    background: var(--surface2);
}
/* Pas d'encre au survol de la pastille inactive : la maquette la garde en
   `--text-dim` (08). */

/* L'avatar du menu utilisateur : 38 px, rond (charte). */
body.chrome_v2 > .block_top > .menu_top > .right > .nav_user > .image {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- 5. La zone de contenu ---------- */

body.chrome_v2 > .block_right {
    /* Transparent : --bg est porté par <body>, et le halo (.v5_glow,
       v5-station.css §3) est peint entre les deux. Opaque, ce bloc le masque. */
    background-color: transparent;
    /* Padding de page de la charte : 24 px en haut, 40 px sur les côtés, 56 en
       bas. La Station posait 25 px partout. */
    padding: 24px 40px 56px;
}

/* Les ascenseurs. Sans cette règle ils restent peints par le thème du système,
   donc clairs, et dessinent une barre blanche le long d'un fond #080D22. */
body.chrome_v2 > .block_right::-webkit-scrollbar { width: 10px; height: 10px; }
body.chrome_v2 > .block_right::-webkit-scrollbar-track { background: transparent; }
body.chrome_v2 > .block_right::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 6px;
}
body.chrome_v2 > .block_right::-webkit-scrollbar-thumb:hover { background: var(--neutral); }

/* L'ENTRÉE DE LA COLONNE DE CONTENU — mouvement de famille A, déclaré par la maquette Modules
   (l.383 : `animation: zRise .3s cubic-bezier(.2,.8,.25,1) both` sur la colonne de contenu, dont
   le `@keyframes zRise` fait 10 px : `opacity 0 → 1`, `translateY(10px) → none`). Pages en MODE
   MODULE seulement (`v5_module`, posé par template.php) : les écrans hors lot (04, 02, 08) et les
   écrans projet ne l'ont pas. L'en-tête n'en fait pas partie (c'est un frère de `.block_right`).
   Les keyframes sont propres à la colonne : le `zRise` du socle (v5-tokens.css) fait 14 px et
   sert l'écran de connexion. L'animation se TERMINE (.3 s) et ne laisse RIEN : `backwards` et non
   le `both` de la maquette — en `both`, Chrome garde la valeur finale interpolée de la dernière
   image (`matrix(1, 0, 0, 1, 0, 0)` au lieu de `none`, mesuré) et `.block_right` resterait la boîte
   contenante des descendants `position: fixed` (tiroirs, fenêtres) ainsi qu'un contexte d'empilement ;
   la première image (opacité 0) n'est tenue que pendant le délai, qui est nul : rendu identique.
   Sous « réduire les animations », elle n'a pas lieu. */
@keyframes v5ContenuEntree {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
    body.chrome_v2.v5_module > .block_right { animation: v5ContenuEntree .3s var(--ease) backwards; }
}

/* ---------- 5b. L'en-tête défile avec la page ---------- */
/* Ni fixe ni sticky : la maquette le fait partir avec le contenu. Le mécanisme
   (et pourquoi on ne fait pas défiler <body>) est décrit dans
   include/js/v5-entete-defile.js, qui pose `v5_entete_defile` une fois
   `.block_right` remonté en y = 0.

   L'en-tête et le halo sont décalés de la quantité défilée par `.block_right` :
   la plage 0 → 4000 px est parcourue linéairement de 0 → -4000 px, soit 1 px
   par pixel défilé. Au-delà, l'en-tête est hors écran depuis longtemps.
   `timeline-scope` sur <body> : l'en-tête n'est pas un descendant du
   conteneur qui défile, la timeline doit être remontée à leur ancêtre commun. */
body.chrome_v2.v5_entete_defile { timeline-scope: --v5-page; }
body.chrome_v2.v5_entete_defile > .block_right { scroll-timeline: --v5-page block; }

@keyframes v5EnteteDefile {
    from { transform: translateY(0); }
    to   { transform: translateY(-4000px); }
}
@supports (animation-timeline: scroll()) {
    body.chrome_v2.v5_entete_defile > .block_top,
    body.chrome_v2.v5_entete_defile > .v5_glow {
        animation: v5EnteteDefile linear both;
        animation-timeline: --v5-page;
        animation-range: 0px 4000px;
    }
}

/* ---------- 6. Le menu bas de l'en-tête ---------- */

/* LE SECOND BANDEAU EST MASQUÉ QUAND IL EST VIDE.
   Depuis que les pages du groupe courant ne sont plus recopiées sous les
   onglets (block-top.php), il ne reste sur la plupart des pages qu'un bandeau
   SANS AUCUN LIEN — 36 px d'aplat entre l'en-tête et le contenu. `:has()`
   permet de ne le rendre que s'il porte quelque chose, sans rien changer côté
   PHP ni ajouter de classe à maintenir. */
body.chrome_v2 > .block_top > .menu_bottom {
    background-color: transparent;
    border-top: 0;
    /* UN SEUL FILET SOUS L'EN-TÊTE. `block-top.css` pose un filet bas sur
       `.menu_bottom`, juste au-dessus de celui de `.block_top` : deux traits de 1 px
       collés, une ligne de 2 px sous la barre des collaborateurs (relevé le
       2026-09-23, « la barre en dessous est trop épaisse »). */
    border-bottom: 0;
    /* ALIGNÉ SUR LE TITRE, x=124 dans la maquette 04 : même retrait que
       `.menu_top` (rail + 40). `block-top.css` posait `3px 15px 3px (rail + 15)` —
       la rangée commençait à x=99 et à y=83 au lieu de 80. Pas de padding bas non
       plus : dans la maquette, le filet de l'en-tête tombe sous l'entrée (33 px). */
    padding: 0 40px 0 calc(var(--chrome-rail, 92px) + 40px);
    /* HAUTEUR LIBRE. `block-top.css` la fige à `--dimen--height--block--menu--bottom`
       (36 px) : une seule ligne, quoi qu'il y ait dedans. C'est ce qui obligeait la
       rangée à défiler au lieu de passer à la ligne. */
    height: auto;
}
body.chrome_v2 > .block_top > .menu_bottom:not(:has(.item)):not(:has(a)):not(:has(button)) {
    display: none;
}

/* JAMAIS DE DÉFILEMENT HORIZONTAL — la règle de la charte pour les rangées
   d'onglets (« en flex-wrap — jamais de défilement horizontal »), que ce bandeau
   n'appliquait pas.

   Constaté le 2026-09-22 sur `/` : la barre des collaborateurs y aligne 31 entrées
   sur UNE ligne de 4 580 px dans une fenêtre de 1 920. Les vingt derniers noms
   n'étaient joignables qu'en faisant défiler une barre dont rien ne signalait
   qu'elle défilait. La maquette 04, elle, les met sur deux lignes.

   `gap: 2px 20px` : les valeurs mesurées dans le prototype. Il remplace le
   `margin-left: 6px` de `block-top.css`, qui ne gère pas l'espace entre DEUX
   LIGNES — sans lui les rangées se touchent. */
body.chrome_v2 > .block_top > .menu_bottom > .side {
    flex-wrap: wrap;
    overflow: visible;
    gap: 2px 20px;
}
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item:not(:first-child) {
    margin-left: 0;
}
body.chrome_v2 > .block_top > .menu_bottom > .side.right > .item:not(:last-child) {
    margin-right: 0;
}
/* La moitié droite porte les actions de page : elle ne doit pas se laisser
   comprimer par une moitié gauche devenue multi-lignes. */
body.chrome_v2 > .block_top > .menu_bottom > .side.right {
    flex: none;
}

/* LE BANDEAU EST LA SECONDE RANGÉE QUAND IL N'Y A PAS D'ONGLETS.
   Sur les deux écrans « Tableau de bord », la rangée de section a disparu : c'est
   la barre des collaborateurs qui tient le rôle de seconde rangée, et la maquette
   04 la pose à 16 px sous la rangée de titre — le même écart que les onglets
   ailleurs. Collée, elle remontait à y=64 au lieu de 80. */
body.chrome_v2 > .block_top:not(:has(> .menu_top > .left > .tabs)) > .menu_bottom {
    margin-top: 16px;
}
/* Les entrées du second bandeau, quand il y en a (la barre de consultants du
   tableau de bord, maquette 04) : même forme d'onglet que la rangée du dessus. */
body.chrome_v2 > .block_top > .menu_bottom .side.left .item {
    /* Mesuré dans le prototype 04 : 13 px, entrée de 33 px de haut, `padding:
       0 0 11px` (le filet d'accent tombe donc bien sous le libellé), gouttière
       interne de 8 px entre la vignette et le nom. `block-top.css` posait
       `padding: 3px 5px 6px` et un `border-radius`, hérités de la pilule qu'on
       ne veut plus : l'entrée mesurait 25 px et le filet remontait sur le texte. */
    font-size: 13px;
    color: var(--text-mid);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    height: 33px;
    padding: 0 0 11px;
    gap: 8px;
}
body.chrome_v2 > .block_top > .menu_bottom .side.left .item.active,
body.chrome_v2 > .block_top > .menu_bottom .side.left .item:hover {
    /* PAS D'APLAT SOUS L'ENTRÉE ACTIVE. block-top.css lui posait un fond clair
       (`--color--background--block--top--menu--bottom`) : sur le thème sombre,
       une pastille pâle au milieu d'une rangée de noms. L'état se dit ici comme
       partout ailleurs dans le lot — encre pleine et filet d'accent. */
    background-color: transparent;
}
/* L'ENCRE PLEINE EST CELLE DE L'ENTRÉE ACTIVE SEULEMENT : la maquette 04 ne donne
   aucun état de survol aux entrées non actives, qui restent `--text-mid`. */
body.chrome_v2 > .block_top > .menu_bottom .side.left .item.active {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--accent);
}
/* LES ACTIONS DE DROITE (« Ajouter une mission »…) PRENNENT LA MÊME BOÎTE que les
   onglets de gauche. Elles gardaient la pilule de block-top.css — 12 px, `padding:
   3px 5px` — dans un bandeau réglé sur 13 px et 33 px de haut : leur libellé
   tombait 7 px plus bas que « Toutes les tâches » (relevé du 2026-09-25 sur le
   Task Manager). Pas de filet d'état : ce sont des actions, pas des onglets. */
body.chrome_v2 > .block_top > .menu_bottom .side.right .item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-mid);
    border-radius: 0;
    background-color: transparent;
    height: 33px;
    padding: 0 0 11px;
    gap: 6px;
}
body.chrome_v2 > .block_top > .menu_bottom .side.right .item:hover {
    background-color: transparent;
    color: var(--text);
}
body.chrome_v2 > .block_top > .menu_bottom .side .item,
body.chrome_v2 > .block_top > .menu_bottom .side .item * {
    color: inherit;
}

/* ---------- 7. Les vignettes de la barre d'onglets ---------- */
/* Le tableau de bord consultant pose une photo devant chaque nom (maquette 04).
   `block-top.css` ne prévoit pas d'image dans un onglet : sans taille imposée,
   elle s'affiche à sa dimension native et fait une ligne de 300 px de haut. */
/* 20 px et sans bordure : les valeurs du prototype. La marge droite a laissé la
   place au `gap: 8px` de l'entrée — avec `display:flex`, les deux s'additionnaient. */
body.chrome_v2 > .block_top .menu_bottom .side.left .item > .ov_avatar {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -6px;
    margin-right: 0;
    border: 0;
}

/* ---------- 7 bis. La barre des collaborateurs tient sur UNE rangée ----------
   Le 2026-09-23, le patron : « la barre est trop épaisse ». 32 collaborateurs
   passaient sur TROIS rangées (111 px de bandeau) ; la maquette 04 n'en montre
   deux que parce qu'elle n'a que 13 noms. On ne défile toujours pas (#451) : ce
   qui ne tient pas sur la première rangée est replié dans un « Plus » — le même
   onglet que celui de la rangée des sections, posé par `setCollabOverflow()` de
   block-top.php. Sans script, la rangée repasse à la ligne (règle plus haut). */
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more {
    position: relative;
    cursor: pointer;
    outline: none;
}
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more > .more_count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
}
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more > .tab_chevron {
    font-size: 8px;
    opacity: .7;
}
/* Le volet : celui des onglets déroulants de la rangée du dessus (surface,
   filet, rayon 14, ombre de menu), en DEUX colonnes — une seule, à 37 px la
   ligne, ferait près de 900 px de haut pour une vingtaine de noms. Calé à
   DROITE : « Plus » est la dernière entrée de la rangée, au bord de l'écran. */
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more > .list {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    grid-template-columns: repeat(2, minmax(190px, auto));
    gap: 1px 4px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 7px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-menu);
    animation: zPopIn .16s var(--ease) both;
    cursor: default;
}
/* Pont de survol : 4 px séparent l onglet du volet, et le curseur qui les
   traverse quitte `.more` — le volet se refermait sous la souris. */
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more > .list::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 6px;
}
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more:hover > .list,
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more:focus-within > .list {
    display: grid;
}
/* Les entrées repliées quittent la forme d'onglet (hauteur 33, filet bas) pour
   celle d'une ligne de menu. */
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more > .list > .item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0;
    padding: 8px 11px;
    border-bottom: 0;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-mid);
    white-space: nowrap;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 > .block_top > .menu_bottom > .side.left > .item.more > .list > .item:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* ---------- L'onglet « Plus » ---------- */
/* Même forme que les autres onglets — c'en est un. Il n'est créé que lorsque la
   rangée déborde, par le `setTabsOverflow()` de block-top.php, qui existait
   déjà et qui l'appelait « ... ». */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more {
    cursor: pointer;
}
/* Le menu reprend le volet des onglets déroulants, et empile ses entrées : ce
   sont des onglets entiers qu'on y déplace, pas des libellés. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list {
    flex-direction: column;
    gap: 1px;
    min-width: 230px;
    max-height: 60vh;
    overflow-y: auto;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 9px 11px;
    border-bottom: 0;
    border-radius: 9px;
    font-size: 12.5px;
    white-space: nowrap;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.active {
    color: var(--accent);
    font-weight: 600;
}
/* UN ONGLET DÉROULANT DÉPLACÉ DANS « PLUS » DEVIENT UN INTERTITRE, PAS UN SECOND
   VOLET.

   LE BOGUE. Toutes les règles du volet d'un onglet déroulant sont écrites sur un
   ENFANT DIRECT de `.tabs` (`.tabs > .tab.expandable > .items`). Quand
   `setTabsOverflow()` pousse cet onglet dans « Plus », il devient
   `.tabs > .tab.more > .list > .tab.expandable`, et plus AUCUNE de ces règles ne
   le touche : son volet perd son `position: absolute` et son `display: none`, et
   se rend donc en ligne, ouvert en permanence, à côté du libellé du groupe.
   Relevé le 2026-09-22 sur `/projets/rapports/budget-media-seo` : la ligne disait
   « Rapports ⌄ Budget Media SEO Budget Media SEA Budget Media Sous-traitant »,
   les trois entrées collées les unes aux autres. Les trois lignes qui vivaient
   ici ne posaient qu'un `top/left/margin-left` — elles supposaient un volet
   flottant qui n'existait plus.

   POURQUOI UN INTERTITRE ET PAS UN VOLET EN CASCADE. « Plus » porte
   `max-height: 60vh; overflow-y: auto` : un volet en `position: absolute` qui
   sort à droite serait CLIPPÉ par ce conteneur défilant. Et un menu vertical n'a
   pas besoin d'une seconde cascade — le panneau du rail range déjà ses pages sous
   le nom de leur section, exactement de cette façon. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable {
    display: block;
    padding: 9px 11px 2px;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: default;
}
/* Ce n'est plus une destination : ni survol, ni état actif sur l'intertitre —
   c'est l'entrée du dessous qui porte la page courante. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable:hover,
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable.active {
    background: none;
    color: var(--text-dim);
    font-weight: 600;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable > .tab_chevron {
    display: none;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable > .items {
    /* Remise à plat de tout ce qui faisait un volet flottant. */
    position: static;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 2px 0 4px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable > .items > .item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    border-radius: 9px;
    /* Le filet d'accent de l'onglet actif n'a pas de sens sur une entrée de menu
       vertical : il barrait toute la largeur du volet sous « Budget Media SEO ».
       Les entrées directes de « Plus » le remettent déjà à zéro plus haut. */
    border-bottom: 0;
    /* L'intertitre est en petites capitales espacées : sans remise à zéro, ses
       entrées le seraient aussi. */
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text-mid);
    white-space: nowrap;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable > .items > .item:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
}
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable > .items > .item.active {
    color: var(--accent);
    font-weight: 600;
}