@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;
    gap: 12px;
}
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/34px 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;
}

/* Les avatars d'équipe : 30 px cerclés de la surface, chevauchés de 8 px. */
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: 22px;
    height: 30px;
}
body.chrome_v2 > .block_top > .menu_top > .left > .top > .team > .image > img {
    width: 30px;
    height: 30px;
    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 `--line`, 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: 26px;
    height: 26px;
    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; }

/* ---------- 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;
}
/* 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;
}

/* 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);
}

/* ---------- 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); }
body.chrome_v2 > .block_top > .menu_top > .right .bubble:hover { background: var(--surface2) !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;
    height: 38px;
    padding: 4px;
    margin-right: 15px;
    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 reste un libellé cliquable, pas une métadonnée :
       `--text-dim` sur `--chip` tombait à 2,78:1 en clair. */
    color: var(--text-mid);
    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);
}
body.chrome_v2 > .block_top > .menu_top > .right > .theme_switch > .pill:not(.is_on):hover {
    color: var(--text);
}

/* 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 {
    background-color: var(--bg);
    /* 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); }

/* ---------- 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;
    padding-bottom: 4px;
}
body.chrome_v2 > .block_top > .menu_bottom:not(:has(.item)):not(:has(a)):not(:has(button)) {
    display: none;
}
/* 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 {
    font-size: 12.5px;
    color: var(--text-mid);
    border-bottom: 2px solid transparent;
    padding-bottom: 6px;
}
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;
    color: var(--text);
}
body.chrome_v2 > .block_top > .menu_bottom .side.left .item.active {
    font-weight: 600;
    border-bottom-color: var(--accent);
}
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. */
body.chrome_v2 > .block_top .menu_bottom .side.left .item > .ov_avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -6px;
    margin-right: 7px;
    border: 1px solid var(--line);
}

/* ---------- 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);
}
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 » garde son propre volet : on le
   rouvre à DROITE, sinon il s'ouvrirait par-dessus la liste qui le contient. */
body.chrome_v2 > .block_top > .menu_top > .left > .tabs > .tab.more > .list > .tab.expandable > .items {
    top: 0;
    left: 100%;
    margin-left: 6px;
}