@charset "utf-8";
/* ============================================================
   DESIGN V5 — COMPOSANTS GLOBAUX
   Boutons, champs, cartes, tableaux, pastilles.

   Chargée en DERNIER parmi les composants, et scopée `body.chrome_v2` — donc
   iso 1 seulement. Les espaces client, partner et hub gardent les composants
   historiques tels quels.

   TROIS CONTRAINTES DE CE DÉPÔT ONT DICTÉ L'ÉCRITURE :

   1. `formulaire.css` reprend TOUS les `<input>` en (0,1,1) et termine ses
      déclarations par `!important`. Une surcharge sans `!important` ne passe
      pas, quelle que soit sa spécificité — d'où les `!important` ci-dessous,
      posés uniquement là où l'original en a un.
   2. `common.css` pose `* { color: var(--color--text) }`. Un descendant ne
      reçoit jamais la couleur de son parent par héritage : il faut le viser.
   3. `.card` faisait 350 px de LARGE en dur, ce qui en fait une vignette et non
      une carte de la charte. On garde la largeur pour ne pas décaler les
      grilles existantes, mais les cartes de la V5 (rayon 18-20, filet, ombre au
      survol) sont disponibles via `.card` dans une grille fluide.
   ============================================================ */

/* ---------- 1. Boutons ---------- */
/* Charte : hauteurs 30 / 38 / 50, rayons 9-12.
   Le bouton principal était en rayon 3 px et `color:#fff !important` — blanc
   sur l'accent clair du thème sombre (#3D8BFF), soit 2,4:1. `--on-accent`
   bascule sur une encre sombre en thème sombre. */

body.chrome_v2 .btn {
    height: 30px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: var(--accent);
    color: var(--on-accent) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .14s var(--ease);
}
body.chrome_v2 .btn:hover {
    background: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}
body.chrome_v2 .btn.transparent {
    background: none;
    border-color: var(--line);
    color: var(--text-mid) !important;
    font-weight: 500;
}
body.chrome_v2 .btn.transparent:hover {
    background: none;
    border-color: var(--accent);
    color: var(--accent) !important;
    transform: none;
    box-shadow: none;
}
/* Bouton discret de la charte : fond d'accent atténué, texte d'accent. */
body.chrome_v2 .btn.light,
body.chrome_v2 .btn.soft {
    background: var(--accent-soft);
    color: var(--accent-ink) !important;
}
/* LA HAUTEUR DU BOUTON PRINCIPAL N'EST PAS LA MÊME D'UNE MAQUETTE À L'AUTRE :
   42 px dans la charte (§03) et sur le tableau de bord projet (03, « Exporter le
   rapport »), 38 px sur le rapport de positions (05, « Export comparatif »). Les
   deux écrans portent la leur en dur, et `.pv2_acc_btn` fait bien 42 : le bouton
   de la charte a donc son porteur. Cette règle-ci n'en a AUCUN — `class="btn big"`
   ne paraît nulle part dans le dépôt (les `btn-big` que l'on croise sont une autre
   classe, à trait d'union) — on ne la touche pas.
   `.btn` reste à 30 px : c'est la taille des boutons de barre d'outils des
   maquettes (05 : « Simplifié / Détaillé » à 30, « Rechercher » à 28), et 584
   boutons du dépôt la portent. */
body.chrome_v2 .btn.big {
    height: 38px;
    padding: 0 20px;
    border-radius: 11px;
    font-size: 13px;
}

/* ---------- 2. Champs ---------- */
/* Charte : hauteur 38-40, rayon 11, fond `--surface2`, filet `--line`, et
   `--accent` au focus. L'original posait un filet `rgba(34,36,38,.15)` —
   invisible sur un fond sombre — et le durcissait au survol, en `!important`. */

/* LA FORME DE LA LISTE COMPTE AUTANT QUE SON CONTENU.
   Enchaînée — `:not(a):not(b):not(c)` — elle ADDITIONNE les spécificités : huit
   sélecteurs d'attribut portaient la règle à (0,9,2), assez pour écraser
   n'importe quelle feuille de PAGE qui rhabille un champ. L'écran de connexion
   V5, qui pose la bordure sur le conteneur et veut l'input transparent dedans,
   n'y arrivait pas même en `!important`. La forme en LISTE ne prend que la
   spécificité de son argument le plus fort : (0,2,2), soit juste ce qu'il faut.

   LA LISTE D'EXCLUSIONS ELLE-MÊME N'EST PAS DÉCORATIVE. `input:not([type=submit])`
   attrape aussi les cases à cocher, les boutons radio, les sélecteurs de
   fichier, les curseurs et les nuanciers : leur poser 38 px de haut, 13 px de
   marge intérieure et un filet en `!important` déforme chaque case à cocher de
   la Station. L'original avait déjà ce défaut, mais sans padding ni bordure il
   ne se voyait pas. */
body.chrome_v2 textarea,
body.chrome_v2 .select,
body.chrome_v2 input:not([type=submit], [type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=button], [type=reset]) {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-field);
    background-color: var(--surface2) !important;
    color: var(--text) !important;
    font-size: 13px;
    transition: border-color .16s var(--ease);
}
body.chrome_v2 textarea {
    padding: 10px 13px;
    line-height: 1.55;
}
/* PAS DE SURVOL DE CHAMP. Ni la charte 00 ni aucune maquette d'écran n'en
   dessinent : le filet reste `--line` au survol, seul le focus passe à
   `--accent`. (Une règle `:hover { border: --neutral }` existait ici.) */
body.chrome_v2 textarea:focus,
body.chrome_v2 .select:focus,
body.chrome_v2 .select:focus > .menu,
body.chrome_v2 input:not([type=submit], [type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=button], [type=reset]):focus {
    border: 1px solid var(--accent) !important;
}
/* EXCEPTION OPT-IN : un champ posé SUR le fond de page (et non dans un panneau)
   prend `--surface`. Le `!important` du fond ci-dessus interdit toute surcharge
   depuis une feuille de page, et il a de bonnes raisons d'exister (les feuilles de
   l'ère XD repeignent les champs) : plutôt que de le retirer pour tout le dépôt,
   on offre une classe. Maquette 02 : le champ de recherche des cartes est en
   `--surface`, la maquette d'écran l'emportant sur la charte (§ Champs).
   (0,3,2) bat le (0,2,2) de la règle générale, `!important` contre `!important`. */
body.chrome_v2 input.v5_field_surface:not([type=submit]) {
    background-color: var(--surface) !important;
}
/* Les cases et les boutons radio prennent l'accent, sans être redimensionnés. */
body.chrome_v2 input[type=checkbox],
body.chrome_v2 input[type=radio] {
    accent-color: var(--accent);
}
/* Le texte d'invite. Sans règle propre il hérite de `--text` via le sélecteur
   universel et devient indistinguable d'une valeur saisie. */
body.chrome_v2 input::placeholder,
body.chrome_v2 textarea::placeholder {
    color: var(--text-dim);
    opacity: 1;
}
/* Les listes déroulantes natives : sans `color-scheme`, leur panneau reste
   peint en clair par le système. Le jeton est posé sur :root par v5-tokens.css,
   mais un `<select>` stylé ne l'hérite pas toujours. */
body.chrome_v2 select,
body.chrome_v2 option {
    background-color: var(--surface2);
    color: var(--text);
}
/* Le filet du `<select>` natif. Sans lui, le navigateur pose son gris système
   (#858585, relevé sur Rapports et Sémantique avancée) — le seul champ de la page
   qui ne suit pas `--line`. Pas de hauteur imposée : certains sélecteurs vivent
   dans des barres d'outils de 30 px. */
body.chrome_v2 select {
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
}
body.chrome_v2 select:focus {
    border-color: var(--accent);
    outline: none;
}

/* ---------- 3. Cartes ---------- */

body.chrome_v2 .card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    transition: box-shadow .16s var(--ease), border-color .16s var(--ease);
}
body.chrome_v2 .card:hover {
    box-shadow: var(--shadow-card);
}
body.chrome_v2 .card > .content {
    padding: 20px;
}
body.chrome_v2 .card > .content > .title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text);
}
body.chrome_v2 .card.image > .image {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

/* ---------- 3b. Chapeau et panneau de page ----------
   La grammaire des écrans SANS maquette : un chapeau (famille en pastille,
   note, titre en 42/300 qui porte LE chiffre de la page) puis des panneaux —
   surface, filet --line, rayon carte, pas d'ombre — dont l'en-tête est un
   bandeau 20/24 fermé par un filet. Les valeurs sont celles du planning de
   production (planning-production.css : .ppr_chapeau, .ppr_card), qui les
   tenait de la maquette 05 ; elles montent ici pour ne plus être recopiées
   page par page.

   TOUT EST SCOPÉ `body.chrome_v2`, ET LE CHAPEAU EST GARDÉ CÔTÉ PHP. Cette
   feuille n'est servie qu'à la Station, mais les templates projet qui posent
   ces classes (link-building, fichiers partagés) sont aussi servis au Client
   Center et à Zaacom Partner : les classes de panneau y sont inertes et
   `.section` garde son habillage d'aujourd'hui. Le chapeau, lui, est un
   balisage NOUVEAU — un <h1> nu sortirait hors Station — donc les templates
   ne le rendent que sous `Constants::isoId() === 1`.

   Pas d'`overflow: hidden` sur le panneau (un `.cl.dropdown` ouvert dedans
   serait rogné) : les coins descendent aux premier et dernier enfants. */
body.chrome_v2 .v5_chapeau {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
body.chrome_v2 .v5_chapeau_txt { min-width: 0; }
body.chrome_v2 .v5_chapeau_haut {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
body.chrome_v2 .v5_fam {
    height: 26px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
body.chrome_v2 .v5_chapeau_note { font-size: 12.5px; color: var(--text-dim); }
body.chrome_v2 .v5_titre {
    margin: 0;
    font-size: 42px;
    font-weight: 300;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--text);
}
/* Le sélecteur universel de common.css repeint les enfants : l'héritage ne
   gagne jamais contre `*`, un descendant explicite si. */
body.chrome_v2 .v5_titre * { color: inherit; }
body.chrome_v2 .v5_titre strong { font-weight: 700; font-size: inherit; }
body.chrome_v2 .v5_chapeau_actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* LE CHAPEAU DU LOT « MODULES · LINK BUILDING · ZANALYTICS » — modificateurs.
   Les trois maquettes du lot posent le titre à 34/300 (la maquette 05, elle, à 42 : la
   base ne bouge pas, planning, leads, budgets et rapports la consomment). Mesuré à
   1680 px sur Link building : pastille 26 de haut (rayon 7, 11,5/700), titre 34/1,2/
   -.02em, écart pastille → titre 13, actions à 9 px l'une de l'autre.

   `.v5_chapeau_module` : la variante de la maquette Modules, un cran plus serrée —
   gap 30 (au lieu de 36), pastille 25 de haut en 11 px, écart 12. Le marqueur est
   posé par `v5_hero()` (include/php/v5-kit.php) quand la page est rendue en mode module.
   Les boutons d'action du chapeau (`.v5_cta`, `.v5_cta_sec`) sont dans v5-modules.css. */
body.chrome_v2 .v5_chapeau.v5_chapeau_34 {
    gap: 36px;
    margin-bottom: 0;
}
body.chrome_v2 .v5_chapeau_34 .v5_chapeau_txt { max-width: 820px; }
body.chrome_v2 .v5_chapeau_34 .v5_chapeau_haut { margin-bottom: 13px; }
body.chrome_v2 .v5_chapeau_34 .v5_fam { border-radius: 7px; }
body.chrome_v2 .v5_chapeau_34 .v5_chapeau_note { font-size: 12.5px; font-weight: 400; }
body.chrome_v2 .v5_chapeau_34 .v5_titre {
    font-size: 34px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: pretty;
}
body.chrome_v2 .v5_chapeau_34 .v5_chapeau_actions { gap: 9px; }
body.chrome_v2 .v5_chapeau_34.v5_chapeau_module { gap: 30px; }
body.chrome_v2 .v5_chapeau_34.v5_chapeau_module .v5_chapeau_haut { margin-bottom: 12px; }
body.chrome_v2 .v5_chapeau_34.v5_chapeau_module .v5_fam {
    height: 25px;
    font-size: 11px;
}

body.chrome_v2 .v5_panneau {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}
body.chrome_v2 .v5_panneau > :first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
body.chrome_v2 .v5_panneau > :last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
body.chrome_v2 .v5_panneau_head {
    margin: 0;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: transparent;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}
body.chrome_v2 .v5_panneau_head * { color: inherit; }
body.chrome_v2 .v5_panneau_titre { font-size: 14px; font-weight: 700; color: var(--text); }
body.chrome_v2 .v5_panneau_sub { font-size: 12px; font-weight: 400; color: var(--text-dim); margin-top: 3px; }
/* Le compteur du bandeau (« 12 liens », « 3 ancres ») : la voix basse, en
   chiffres tabulaires pour que deux panneaux côte à côte s'alignent. */
body.chrome_v2 .v5_panneau_compte {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
body.chrome_v2 .v5_panneau_corps { padding: 20px 24px; }

/* ---------- 4. Tableaux ---------- */
/* C'est le composant le plus exposé : ~80 vues `search-*` en vivent, et c'est
   le grand aplat blanc qui reste quand tout le reste a basculé. */

body.chrome_v2 table {
    border-collapse: collapse;
    background: var(--surface);
    color: var(--text);
}
/* En-tête de colonne en `--text-mid` et non `--text-dim` : c'est du texte que
   l'on LIT pour trier et comparer, pas une métadonnée en marge. */
body.chrome_v2 table th {
    background: var(--surface2);
    border-bottom: 1px solid var(--line);
    color: var(--text-mid);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: left;
}
body.chrome_v2 table td {
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-mid);
    font-size: 13px;
}
/* Les tableaux de DONNÉES seulement. La grille du planning (`.pl2_days`, maquette
   08) est une grille de cellules, pas une liste de lignes : aucun survol de rangée
   (la page gère elle-même l'éclairage de l'identité du consultant). */
body.chrome_v2 table:not(.pl2_days) tbody tr:hover > td {
    background: var(--surface2);
}
/* Le survol se fond en .14s (README : « .14s pour un fond »), entrée comme sortie :
   la transition vit donc sur la cellule au repos, pas sur l'état :hover. */
body.chrome_v2 table:not(.pl2_days) tbody td {
    transition: background .14s var(--ease);
}
/* Dernière rangée (PM) de la grille du planning : la maquette 08 laisse 1 px de
   --surface entre le fond --surface2 de la colonne AM/PM et le filet --line de la
   carte. En border-collapse, la moitié `transparent` du filet laisse voir le fond
   de la cellule (--surface2 pour AM/PM) : on la peint en --surface, comme les
   cellules normales. */
body.chrome_v2 .pl2_days tbody tr:last-child > td {
    border-bottom-color: var(--surface);
}

/* Les conteneurs de tableau de la Station. Ils portaient un fond blanc en dur,
   désormais jetonnisé — ce qui reste à poser ici, c'est la forme de la charte :
   filet, rayon 18, et pas d'ombre au repos. */
body.chrome_v2 .dataTable,
body.chrome_v2 .data_table,
body.chrome_v2 .table_container,
body.chrome_v2 .block_table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* ---------- 4b. Le composant zDataTable, en panneau de la charte ----------
   C'est LUI qui porte le tableau sur 45 vues (28 pages servies). Il rendait
   jusqu'ici un cadre à rayon 4, un bandeau de 52 px à 14 px des bords, des
   en-têtes de colonne 14/600 et des cellules à 6 px — l'ancienne charte, posée
   nue sur le fond de page.

   Le composant expose maintenant des crochets `--zdt-*` (dataTable.css et sa
   source Sass), chacun avec la valeur d'AUJOURD'HUI en repli. Les valeurs
   ci-dessous ne s'appliquent qu'à la Station : le Client Center, le Partner et
   le Hub ne portent pas `chrome_v2` et gardent le rendu d'avant. Une page qui
   a déjà sa lecture du composant (`.pz2` sur le rapport de positions) garde la
   sienne, ses sélecteurs étant plus spécifiques.

   Les valeurs viennent de la maquette 05, la seule à montrer un tableau :
     panneau    surface, filet --line, rayon 20
     bandeau    18 24, filet bas
     en-tête    13 24 sur --surface2, libellés 11,5/700 capitales .08em --text-dim
     ligne      12 24, filet --line-soft, survol --surface2, sans zébrage
   Le zébrage de station.css (`tr:nth-child(2n)`) n'a plus prise : la ligne
   pose son fond. */
body.chrome_v2 .zdatatable {
    --zdt-radius: 20px;
    --zdt-head-h: 60px;
    --zdt-head-pad: 0 24px;
    --zdt-title-size: 15px;
    --zdt-title-weight: 700;
    --zdt-title-track: -.01em;
    --zdt-title-ink: var(--text);
    --zdt-icon-size: 15px;
    --zdt-icon-opacity: 1;
    --zdt-popup-shadow: var(--shadow-menu);
    --zdt-popup-radius: 12px;
    --zdt-search-h: 48px;
    --zdt-search-pad: 0 24px;
    --zdt-search-size: 13px;
    --zdt-search-bg: var(--surface2);
    --zdt-search-ink: var(--text);
    --zdt-th-h: 44px;
    --zdt-th-pad: 13px 24px;
    --zdt-th-size: 11.5px;
    --zdt-th-weight: 700;
    --zdt-th-track: .08em;
    --zdt-th-case: uppercase;
    --zdt-th-bg: var(--surface2);
    --zdt-th-ink: var(--text-dim);
    --zdt-td-pad: 12px 24px;
    /* Les cellules « html » (pastilles, boutons, liens) avaient leur propre
       padding, plus serré ; posées dans un panneau à gouttière 24, elles
       prennent la même. Sans ce crochet, la première mesure rendait encore
       `6px 8px` sur la colonne des supports. */
    --zdt-td-pad-html: 12px 24px;
    --zdt-td-h: 48px;
    --zdt-td-size: 13px;
    --zdt-td-ink: var(--text);
    --zdt-row-line: var(--line-soft);
    --zdt-row-bg: var(--surface);
    /* Le fond de la rangée reste celui du repos au survol : l'état :hover de
       dataTable.css (tr:hover) devient neutre et la cellule (td, transition .14s
       en §4, l. 335) porte seule le survol — sinon la tr se peint instantanément
       en --surface2 et masque le fondu de la cellule en entrée. */
    --zdt-row-hover: var(--zdt-row-bg);
    --zdt-foot-h: 56px;
    --zdt-foot-pad: 0 24px;
    --zdt-foot-size: 12.5px;
    --zdt-foot-ink: var(--text-mid);
    --zdt-tip-bg: var(--rail);
    --zdt-tip-ink: var(--on-rail);
}
/* Les outils du bandeau (recherche, colonnes, export, filtres) et les flèches
   de pagination : l'encre moyenne, pleine, à la place d'une encre héritée
   passée à 54 % d'opacité — qui tombait sous le seuil en thème sombre. */
body.chrome_v2 .zdatatable > .zdatatable_header > .top > .icons > i,
body.chrome_v2 .zdatatable > .zdatatable_header > .top > .filters > i,
body.chrome_v2 .zdatatable > .zdatatable_header > .top > .filter > i,
body.chrome_v2 .zdatatable > .zdatatable_footer > .right > .arrows > i {
    color: var(--text-mid);
}
/* Survol : seuls les outils du bandeau le portent. Les flèches de pagination
   n'ont AUCUN survol dans les maquettes (05, 06 : « Suivant » reste accent-ink,
   « Précédent » reste text-mid) ; l'ancienne règle `.arrows > i.active:hover`
   les passait en --accent et battait la page par sa spécificité. */
body.chrome_v2 .zdatatable > .zdatatable_header > .top > .icons > i:hover {
    color: var(--accent);
}
/* La `th` triée porte un chiffre de priorité : il prend la pastille de la
   charte au lieu d'un rond sans fond. */
body.chrome_v2 .zdatatable.zdatatable_multi_sorted_column > .zdatatable_table > table > thead > tr > th.zdatatable_sorted:not([zdatatable-sorted="undefined"])::after {
    background: var(--accent-soft);
    color: var(--accent-ink);
}

/* Le pied : `common.css` pose `* { font-size: 13px }` et une encre pleine sur
   CHAQUE élément, donc les `.text` du pied (« Lignes par page », « De 1 à 50 sur
   259 ») sortaient en 13 px `--text` quand les crochets `--zdt-foot-size` /
   `--zdt-foot-ink` disaient 12,5 px `--text-mid`. Ils reprennent ce que dit le
   crochet. `inherit` ne suffit pas : le parent (`.left`, `.right`) porte lui aussi
   le 13 px du `*` ; on lit donc le crochet directement. */
body.chrome_v2 .zdatatable > .zdatatable_footer .text {
    font-size: var(--zdt-foot-size, inherit);
    color: var(--zdt-foot-ink, inherit);
}

/* ---------- 4c. Écran 06 : la carte « Détail par mot clé » ----------
   La maquette d'écran l'emporte sur la charte 00 là où elle est explicite, et
   celle-ci n'est pas celle du panneau 05 : en-têtes 10,5/600 à .07em, nombres en
   12,5, pied de 11,5 en `--text-dim`. Tout est scopé à `.keywords-section`, la
   carte de cet écran : les autres tableaux gardent les valeurs de 4b.
   Ce bloc vit ICI et non dans le gabarit de la page : le `!important` du fond des
   champs (section 3) et la spécificité de la règle des champs interdisent à la
   feuille de page de les reprendre. */
body.chrome_v2 .keywords-section .zdatatable {
    --zdt-head-h: 36px;
    --zdt-th-size: 10.5px;
    --zdt-th-weight: 600;
    --zdt-th-track: .07em;
    --zdt-foot-size: 11.5px;
    --zdt-foot-ink: var(--text-dim);
}
/* La barre d'outils du composant (recherche, colonnes, export) n'existe pas sur la
   maquette, mais ce sont des fonctions réelles : elle est conservée, ramenée de
   61 à 36 px et calée à droite, au ras du tableau. */
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_header > .top {
    justify-content: flex-end;
}
/* Les champs « Volume min » / « YoY % min » : 34 de haut, rayon 8, 7 10, 12 px,
   92 de large ; au focus le fond passe à `--surface` (le `!important` du fond de
   la section 3 se reprend, `!important` contre `!important`, à spécificité
   supérieure). */
body.chrome_v2 .keywords-filters input[type=number] {
    box-sizing: border-box;
    width: 92px;
    min-height: 0;
    height: 34px;
    margin: 0;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
}
body.chrome_v2 .keywords-filters input[type=number]:focus {
    background-color: var(--surface) !important;
}
/* Les nombres : 12,5 (le nom du mot clé reste à 13). Les `<span>` colorés du
   gabarit (`.zt_up`, `.zt_proj`) retombaient à 13 par le `*` de common.css. */
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > tbody > tr > td[zdatatable-column-type="number"] {
    font-size: 12.5px;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > tbody > tr > td[zdatatable-column-type="number"] > span {
    font-size: inherit;
}
/* Les en-têtes de colonne numérique s'alignent à droite, comme leurs cellules. La
   colonne triée passe en `--accent` et son tri se lit par un « ▼ » / « ▲ » de
   9 px qui SUIT le libellé (la maquette le réserve, invisible, sur les colonnes
   non triées : chaque libellé numérique s'arrête donc un cran avant le bord).
   Les 48 px de marge droite du composant étaient la place de l'icône FA posée en
   absolu ; elle n'existe plus ici. */
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th[zdatatable-column-index][zdatatable-column-type="number"] {
    text-align: right;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index] {
    padding-right: 24px;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index]::before {
    content: none;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index]::after {
    content: "\25BC";
    display: inline-block;
    margin-left: 6px;
    font-family: var(--font);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index][zdatatable-sorted="asc"]::after {
    content: "\25B2";
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index][zdatatable-sorted="asc"],
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index][zdatatable-sorted="desc"] {
    color: var(--accent);
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index][zdatatable-sorted="asc"]::after,
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-index][zdatatable-sorted="desc"]::after {
    opacity: 1;
}
/* Le pied : « Précédent » (`--chip` / `--text-mid`) et « Suivant » (`--accent-soft`
   / `--accent` / 600), 30 de haut, rayon 8, 12 px. Les flèches du composant sont
   deux `<i>` FA : leur glyphe est retiré, le libellé vient du pseudo-élément, la
   fonction (clic, état actif) reste celle du composant. */
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows {
    display: flex;
    gap: 8px;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border-radius: 8px;
    font-style: normal;
    font-size: 0;
    line-height: 0;
    opacity: .45;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i.active {
    opacity: 1;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i::before {
    content: none;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i::after {
    font-family: var(--font);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i.fa-chevron-left {
    background: var(--chip);
    color: var(--text-mid);
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i.fa-chevron-left::after {
    content: "Précédent";
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i.fa-chevron-right {
    background: var(--accent-soft);
    color: var(--accent);
}
body.chrome_v2 .keywords-section .zdatatable > .zdatatable_footer > .right > .arrows > i.fa-chevron-right::after {
    content: "Suivant";
    font-weight: 600;
}

/* ---------- 4d. Le zDataTable de la maquette MODULES (et de Link building / zAnalytics) ----------
   Les 50 vues du composant passent à la grammaire de panneau de la maquette Modules :
   en-tête (titre, « N lignes affichées », champ « Filtrer… » TOUJOURS visible, outils,
   actions), rangée de titres 41 de haut en 10,5/600, lignes 11 / 7, pied de 52.

   PORTÉE RESTREINTE, ET C'EST LE POINT BLOQUANT. Ces valeurs ne vont PAS dans le bloc
   global de 4b : `.keywords-section` et `.pz2` (zRank, maquette 05, hors lot) ne
   redéclarent qu'une PARTIE des crochets et hériteraient en silence des autres. Elles
   vivent donc sous `body.chrome_v2.v5_module` — classe posée par template.php quand la
   page est rendue en mode module (include/php/v5-nav-modules.php) — ou, pour un tableau
   isolé, sous `.zdt_v5` ; la variante des écrans projet est l'opt-in `.zdt_projet`
   (posé par la page sur le conteneur de SES tableaux). Les pages hors lot, les écrans
   projet livrés et zRank ne bougent pas d'un pixel.

   La STRUCTURE (en-tête à plat, champ de recherche, actions) se tient à `.zdt_kit`,
   classe que dataTable.js pose sur le composant dans ces deux cas seulement. Les VALEURS
   sont des crochets `--zdt-*` : le composant les lit déjà. `--zdt-edge` est la marge de
   la première et de la dernière colonne VISIBLES (classes `zdt_bord_g` / `zdt_bord_d`
   posées par le JS : `:first-child` se tromperait avec une colonne masquée). */
body.chrome_v2.v5_module .zdatatable,
body.chrome_v2 .zdt_v5 .zdatatable {
    --zdt-radius: 20px;
    --zdt-head-h: auto;
    --zdt-head-pad: 16px 22px;
    --zdt-edge: 22px;
    --zdt-title-size: 15px;
    --zdt-title-weight: 600;
    --zdt-title-track: normal;
    --zdt-th-h: 41px;
    --zdt-th-pad: 12px 7px;
    --zdt-th-size: 10.5px;
    --zdt-th-weight: 600;
    --zdt-th-track: .07em;
    --zdt-td-pad: 11px 7px;
    --zdt-td-pad-html: 11px 7px;
    --zdt-td-h: auto;
    --zdt-td-size: 12.5px;
    --zdt-td-ink: var(--text-mid);
    --zdt-foot-h: 52px;
    --zdt-foot-pad: 13px 22px;
    --zdt-foot-size: 11.5px;
    --zdt-foot-ink: var(--text-dim);
}
/* Variante des écrans projet (zAnalytics, Link building) : marge de 24, en-tête sans
   filet bas, rangée de titres de 11 px encadrée de `--line-soft`, pied de 12 px. */
body.chrome_v2 .zdt_projet .zdatatable {
    --zdt-radius: 20px;
    --zdt-head-h: auto;
    --zdt-head-pad: 20px 24px 16px;
    --zdt-edge: 24px;
    --zdt-title-size: 15.5px;
    --zdt-title-weight: 600;
    --zdt-title-track: normal;
    --zdt-th-h: 40px;
    --zdt-th-pad: 11px 7px;
    --zdt-th-size: 11px;
    --zdt-th-weight: 600;
    --zdt-th-track: .07em;
    --zdt-th-bg: transparent;
    --zdt-td-pad: 11px 7px;
    --zdt-td-pad-html: 11px 7px;
    --zdt-td-h: auto;
    --zdt-td-size: 12.5px;
    --zdt-td-ink: var(--text-mid);
    /* Pas de hauteur plancher : le pied suit son contenu (13 + 18 + 13 = 44, la maquette) ; il
       monte à 56 de lui-même quand la pagination (30 x 30) est là (voir `generateFooter`). */
    --zdt-foot-h: 0px;
    --zdt-foot-pad: 13px 24px;
    --zdt-foot-size: 12px;
    --zdt-foot-ink: var(--text-dim);
    --zdt-search-w: 280px;
    /* 36 + le filet de 1 de chaque côté, la maquette étant en boîte de contenu. */
    --zdt-search-h2: 38px;
}

/* --- L'enveloppe : le panneau retombe sur la grille de la page (x 124, 1516 de large) ---
   `<div class="section"><table id=…></table><script>…</script></div>` : le `.section` est
   réduit à rien quand le tableau est son seul enfant visible (le <script> d'init ne
   compte pas). `:only-child` échouerait à cause de ce script. */
body.chrome_v2.v5_module .section:has(> .zdatatable):not(:has(> :not(.zdatatable, script))),
body.chrome_v2 .zdt_v5 .section:has(> .zdatatable):not(:has(> :not(.zdatatable, script))),
body.chrome_v2 .zdt_projet .section:has(> .zdatatable):not(:has(> :not(.zdatatable, script))) {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* --- Le chargement ---
   Le voile du composant (dataTable.css : `rgba(0, 0, 0, .35)` littéral, coins carrés) débordait
   des coins arrondis du panneau — visible en clair. En grammaire V5 : il épouse le rayon du
   panneau (20, hérité de `--zdt-radius`, DANS le panneau : `overflow: hidden` coupe le flou) et
   se peint en jeton, marine (`--rail`) à .35 comme avant — jamais de noir. */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_loader {
    border-radius: inherit;
    overflow: hidden;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_loader > .background {
    border-radius: inherit;
    background-color: color-mix(in srgb, var(--rail) 35%, transparent);
}

/* --- Une colonne qui déclare sa largeur la tient ---
   La grille de la maquette (`1fr · 1fr · 120 · 150 · 1fr · 70 · 80`) est posée par l'endpoint,
   en `style="width: …"` sur l'en-tête de colonne. Le tableau est en `table-layout: auto`
   (`!important` dans dataTable.css) et `white-space: nowrap` : le texte entier d'une cellule
   était sa largeur MINIMALE, donc « Team Social Media et Influence Marketing » écartait la
   colonne Team de 134 à 274 px quelle que soit la largeur demandée. `max-width: 0` retire
   la cellule du calcul du contenu — la colonne prend sa largeur déclarée — et l'ellipse
   (déjà posée sur `td`) coupe le texte, comme le `cell()` de la maquette. Le JS (`zdt_w`,
   dataTable.js) ne marque que les colonnes qui déclarent une largeur : sans elle, un tableau
   garde le calcul d'avant. L'en-tête n'est pas borné : son libellé reste entier. */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > tbody > tr > td.zdt_w { max-width: 0; }

/* --- Le filet de ligne est DANS la boîte de la ligne ---
   La maquette Modules pose le filet en `border-bottom` de la ligne (grille) : panneau =
   1 + 76 + 41 + n x 51 + 52 + 1, contenu des cellules à « haut de ligne + 11 », pied collé à la
   dernière ligne. En `border-collapse: collapse` le filet est à cheval sur deux cellules : la table
   dépasse de 0,5 px, le pied tombe 0,5 px plus bas (513,5 au lieu de 513), tout le contenu d'une
   cellule est à +11,5 (arrondi tantôt à 11, tantôt à 12 selon que la cellule porte un texte nu ou un
   `<span>`/`<a>`). En `separate` + `border-spacing: 0` chaque `td` porte son filet dans sa boîte.
   `common.css` impose `collapse !important` à tout <table> : même moyen que `.v5tc`. Modules seulement :
   les tableaux projet (Link building, zAnalytics) ont été relevés dans l'autre modèle. */
body.chrome_v2.v5_module .zdatatable.zdt_kit > .zdatatable_table > table {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* --- Les descendants d'une cellule héritent de la cellule ---
   `common.css` pose `* { font-size: 13px; color: var(--text) }` : un `<span>` rendu par
   un endpoint (« Team A », « — », « +1 ») retombait à 13 px / `--text` dans une cellule
   de 12,5 px / `--text-mid` — plus gros et plus contrasté que ses voisines. Même
   mécanique que le bloc 0 de v5-modules.css : `:where()` → spécificité NULLE, donc la
   règle bat `*` (feuille chargée après) et perd contre n'importe quelle vraie règle
   (`.v5_pastille`, `.v5_t`, `.v5_sub`, `.v5_dim`, un `a`…) qui garde son propre corps
   et sa propre encre. Les glyphes (`<i>`, `<svg>`) restent à leur taille d'icône. */
:where(body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > tbody > tr > td) :where(*:not(i, svg, svg *)) {
    font-size: inherit;
    color: inherit;
}

/* --- L'en-tête de panneau ---
   Une rangée qui passe à la ligne : titres · filtres · champ « Filtrer… » · outils ·
   actions. `.top` n'est plus une boîte (`display: contents`) : ses enfants entrent dans
   la rangée, et `order` les range comme la maquette (le champ juste avant les outils). */
body.chrome_v2 .zdatatable.zdt_kit {
    --zdt-ico-loupe: 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");
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-height: 0;
    padding: var(--zdt-head-pad);
    margin-bottom: 0;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_header { border-bottom: 0; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top { display: contents; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .zdt_titres {
    order: 0;
    margin-right: auto;
    min-width: 0;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .zdt_titres > .title {
    font-size: var(--zdt-title-size);
    font-weight: var(--zdt-title-weight);
    letter-spacing: var(--zdt-title-track);
    color: var(--zdt-title-ink, var(--text));
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .zdt_titres > .title:empty { display: none; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .zdt_titres > .zdt_compte {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .zdt_titres > .title:empty + .zdt_compte { margin-top: 0; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .zdt_chips { order: 1; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters {
    display: flex;
    align-items: center;
    column-gap: 4px;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter > .filter_display,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters > .filters_display { top: 34px; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .zdt_chips { margin: 0; }

/* Le champ « Filtrer… » : TOUJOURS visible (plus de loupe qui déplie une rangée de 48),
   250 x 34, filet, rayon 10, loupe de 13 px, saisie de 12. Le `.bottom` du composant
   (une rangée repliée à `max-height: 0`) devient cette boîte ; son animation de
   dépliement n'a plus lieu d'être. La loupe du bandeau d'outils est masquée : redondante. */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .bottom {
    order: 2;
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    width: var(--zdt-search-w, 250px);
    height: var(--zdt-search-h2, 34px);
    max-height: none;
    overflow: visible;
    padding: 0 12px !important;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    box-sizing: border-box;
    transition: border-color .16s var(--ease);
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_header > .bottom { background: var(--surface2); }
/* Au focus la maquette ne change RIEN (mesuré : la boîte garde son filet `--line`). Le filet
   d'accent n'existe qu'au CLAVIER : `html.v5_clavier` (chrome-v2.js, posé à la touche Tab). */
html.v5_clavier body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .bottom:focus-within { border-color: var(--accent); }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .bottom::before {
    content: "";
    flex: none;
    width: 13px;
    height: 13px;
    background-color: var(--text-dim);
    -webkit-mask: var(--zdt-ico-loupe) center / contain no-repeat;
    mask: var(--zdt-ico-loupe) center / contain no-repeat;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .bottom > input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 32px;
    min-height: 0 !important;
    margin: 0 !important;
    /* Le `padding: 1px 2px` natif d'un champ de la maquette (Modules comme Link building) : la saisie
       et le placeholder partent 2 px à droite de la boîte du champ (hauteur fixée à 32 : seul
       l'horizontal compte). */
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0;
    outline: none !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 12px;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_header > .bottom > input { font-size: 12.5px; }
body.chrome_v2 .zdatatable.zdt_kit.zdatatable_no_search > .zdatatable_header > .bottom { display: none; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > i.fa-search { display: none; }

/* Les outils (colonnes, export) et les entonnoirs : 28 x 28, rayon 8, glyphe de 13 px,
   encre `--text-dim`, survol `--chip` + `--accent` — la grammaire d'une action de ligne.
   Les volets déroulants restent ceux du composant (rayon 12, ombre de menu). */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons {
    order: 3;
    display: flex;
    align-items: center;
    gap: 4px;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > i,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter > i,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 13px;
    opacity: 1;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > i:hover,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter > i:hover,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters > i:hover {
    background: var(--chip);
    color: var(--accent);
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .column_display,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .export_display {
    top: 34px;
    right: 0;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .column_display::before,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .export_display::before { right: 12px; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .column_display::after,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .export_display::after { right: 8px; }
/* Les volets (roue des colonnes, export, entonnoirs) sont des CARTES de la charte : fond
   `--surface`, filet 1 px `--line`, rayon 12, `--shadow-menu`, au-dessus des lignes. Sans filet
   le volet se confondait avec le panneau (même `--surface`, ombre invisible en sombre) : les
   cases et les noms de colonnes semblaient s'imprimer sur les avatars et les e-mails de la
   1re ligne. Le petit losange du composant (`::before` / `::after`, ombre et fond de 12 px) est
   retiré : il déborderait de la carte bordée. */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .column_display,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .export_display,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter > .filter_display,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters > .filters_display {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-menu);
    z-index: 10;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .column_display::before,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .column_display::after,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .export_display::before,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .icons > .export_display::after,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter > .filter_display::before,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filter > .filter_display::after,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters > .filters_display::before,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .top > .filters > .filters_display::after { display: none; }
/* Les actions du panneau (« + Ajouter … ») : au bord droit, après les outils. */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_header > .zdt_actions {
    order: 4;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- La rangée de titres, les cellules, le tri --- */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th {
    line-height: 16px;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th {
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
/* Survol d'une ligne : la maquette zAnalytics DÉCLARE `transition: background .12s` sur ses lignes
   de tableau (famille A) ; Modules déclare .14s (la règle générale, §4, reste inchangée). */
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_table > table > tbody > tr > td { transition-duration: .12s; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdt_bord_g,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > tbody > tr > td.zdt_bord_g { padding-left: var(--zdt-edge, 22px); }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdt_bord_d,
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > tbody > tr > td.zdt_bord_d { padding-right: var(--zdt-edge, 22px); }
/* La première colonne est la lecture : 500 en encre pleine (les pastilles, avatars et
   liens qui y vivent gardent leurs propres règles). */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > tbody > tr > td.zdt_bord_g {
    font-weight: 500;
    color: var(--text);
}
/* Un chiffre se lit à droite : l'en-tête suit sa colonne (les cellules y étaient déjà). */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th[zdatatable-column-type="number"] { text-align: right; }
/* Le TRI : plus d'icône Font Awesome à droite (48 px réservés), une flèche de 9 px qui
   SUIT le libellé — « ▼ » invisible au repos (la place est gardée, le libellé ne saute
   pas au premier clic), « ▼ » / « ▲ » visible sur la colonne triée, qui passe en accent.
   Le badge de priorité du multi-tri, plus spécifique, l'emporte (rare : Maj + clic). */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted { padding-right: 7px; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted.zdt_bord_d { padding-right: var(--zdt-edge, 22px); }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted::before { content: none !important; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted::after {
    content: "\25BC";
    display: inline-block;
    margin-left: 6px;
    font-family: var(--font);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0;
}
/* Modules : la flèche est un `<span>` de la maquette qui HÉRITE de l'en-tête (600, interlettrage .07em) :
   sa boîte fait 8,5 px (7,77 sans interlettrage) et le libellé d'une colonne alignée à droite finit
   0,74 px plus à gauche. Les écrans projet gardent leur flèche d'avant (aucun relevé ne l'a contestée). */
body.chrome_v2.v5_module .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted::after {
    font-weight: inherit;
    letter-spacing: inherit;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-sorted="asc"]::after { content: "\25B2"; }
/* `:not(.zdt_tri_defaut)` : sous `body.v5_module`, le tri PAR DÉFAUT d'un tableau (`columns` de sa
   configuration) ne se dit pas — la maquette, au repos, n'a aucune colonne triée (têtes en `--text-dim`,
   flèche à 0). L'ordre des lignes ne change pas ; l'encre d'accent et la flèche arrivent au premier
   clic de tri (dataTable.js retire la classe). */
body.chrome_v2 .zdatatable.zdt_kit:not(.zdt_tri_defaut) > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-sorted="asc"],
body.chrome_v2 .zdatatable.zdt_kit:not(.zdt_tri_defaut) > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-sorted="desc"] { color: var(--accent); }
body.chrome_v2 .zdatatable.zdt_kit:not(.zdt_tri_defaut) > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-sorted="asc"]::after,
body.chrome_v2 .zdatatable.zdt_kit:not(.zdt_tri_defaut) > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-sorted="desc"]::after { opacity: 1; }
/* Variante PROJET, colonne numérique : le libellé finit au MÊME bord que les chiffres. La flèche
   (invisible au repos) gardait sa place APRÈS le libellé : 15 px (9 + marge 6) entre le bord du
   texte et celui des chiffres. Elle passe AVANT le libellé : dans une colonne alignée à droite
   la place qu'elle garde est du côté vide, le libellé reste collé à droite, et la flèche
   n'ajoute aucun saut quand la colonne devient triée. (Modules garde la grammaire de sa
   maquette : flèche après le libellé, place réservée — `.v5_th.r` de la maquette fait de même.
   La maquette zAnalytics n'a aucune colonne alignée à droite.) Le badge de priorité du
   multi-tri (`::after`) n'est pas touché. */
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit:not(.zdatatable_multi_sorted_column) > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-type="number"]::after { content: none; }
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-type="number"]::before {
    content: "\25BC" !important;
    position: static;
    display: inline-block;
    margin-right: 6px;
    transform: none;
    font-family: var(--font);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: 0;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-type="number"][zdatatable-sorted="asc"]::before { content: "\25B2" !important; }
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-type="number"][zdatatable-sorted="asc"]::before,
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_table > table > thead > tr > th.zdatatable_sorted[zdatatable-column-type="number"][zdatatable-sorted="desc"]::before { opacity: 1; }
/* Une ligne dont l'endpoint dit lui-même l'état (pastille « Inactif », classe `v5_etat` posée
   avec `notActive`) garde sa pleine opacité : la maquette n'éteint jamais une ligne, et à .2
   (common.css `tr.notActive`) le texte et la pastille devenaient illisibles. Les endpoints
   qui n'ont pas migré leur colonne « Actif » (pas de `v5_etat`) gardent l'atténuation. */
body.chrome_v2 .zdatatable.zdt_kit tr.notActive.v5_etat { opacity: 1; }
/* Le crayon d'édition des endpoints (`.btn.btn-icon-solo`) prend la grammaire d'une
   action de ligne (`.v5_act`) : 28 x 28 (components/buttons.css le fixe à 20 en largeur ET
   en min/max, et peint `background: unset !important` : d'où les `!important` du fond),
   rayon 8, glyphe de 14 à pleine opacité en `--text-dim` ; au survol fond `--chip` et encre
   `--accent` (.14s, famille A), sans ombre ni élévation. */
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo {
    width: 28px;
    min-width: 28px;
    max-width: 28px;
    height: 28px;
    margin: 0;          /* components/buttons.css pose `.btn { margin: 0 0 0 10px }` : l'action se décale de 10 px */
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none;
    transform: none;
    color: var(--text-dim) !important;
    transition: background .14s var(--ease), color .14s var(--ease);
}
/* Groupe d'actions de M (ACT) : gap 5 entre deux boutons voisins. */
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo + .btn.btn-icon-solo { margin-left: 5px; }
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo:hover {
    background: var(--chip) !important;
    box-shadow: none;
    transform: none;
    color: var(--accent) !important;
}
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo > i,
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo:hover > i { color: inherit; font-size: 12px; opacity: 1; }
/* Les trois glyphes d'action de la maquette (crayon, œil, corbeille) sont dessinés comme
   elle les dessine : un masque de 14 x 14 (tracé de `v5_icone()`, trait 1,8) peint à
   l'encre du bouton, à la place de la police d'icônes — dont l'encre, plus large, ne
   tombe pas dans la même boîte. Un autre glyphe garde sa police d'icônes. */
body.chrome_v2 .zdatatable.zdt_kit {
    --zdt-ico-crayon: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5 18.5 7.5 8 18H4v-4z'/%3E%3C/svg%3E");
    --zdt-ico-oeil: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 11c1.4-3.3 5-5.6 9.2-5.6s7.8 2.3 9.2 5.6c-1.4 3.3-5 5.6-9.2 5.6S3.2 14.3 1.8 11z'/%3E%3Ccircle cx='11' cy='11' r='3.2'/%3E%3C/svg%3E");
    --zdt-ico-corbeille: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h14M8.5 6V4h5v2M6 6l1 13h8l1-13'/%3E%3C/svg%3E");
}
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo > i:is(.fa-pencil, .fa-pen, .fa-edit, .fa-eye, .fa-trash) {
    display: block;
    width: 14px;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
}
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo > i:is(.fa-pencil, .fa-pen, .fa-edit, .fa-eye, .fa-trash)::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--zdt-ico-crayon) center / contain no-repeat;
    mask: var(--zdt-ico-crayon) center / contain no-repeat;
}
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo > i.fa-eye::before {
    -webkit-mask-image: var(--zdt-ico-oeil);
    mask-image: var(--zdt-ico-oeil);
}
body.chrome_v2 .zdatatable.zdt_kit td .btn.btn-icon-solo > i.fa-trash::before {
    -webkit-mask-image: var(--zdt-ico-corbeille);
    mask-image: var(--zdt-ico-corbeille);
}

/* --- Le pied ---
   « Lignes par page » en `--text-dim`, le sélecteur en pastille `--chip` de 26 (rayon 7,
   600 11,5, sans filet), « De 1 à 5 sur 5 » à droite. Les flèches de page, absentes de la
   maquette (pas de pagination dans le prototype), sont gardées : 26 x 26. */
/* Un SEUL filet entre la dernière ligne et le pied : c'est le `border-bottom` 1 px
   `--line-soft` de la dernière ligne (maquette : le pied n'a pas de filet et mesure 52).
   Le filet haut du composant (1 px `--line`) doublait ce trait et ajoutait 1 px au pied. */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer { border-top: 0; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .text { margin-right: 9px; opacity: 1; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .right > .text { font-variant-numeric: tabular-nums; }
/* Le sélecteur de longueur — le `.cl.dropdown` de mComponents, restylé UNIQUEMENT ici
   (il est partagé par tous les formulaires de la Station) : pastille `--chip` de 26,
   « 50 » en 600 11,5 et un ▾ de 8 px à 60 % d'opacité, sans filet. Le chevron du
   composant est tourné de 90° au repos : on le remet droit (il pointe vers le bas). */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown {
    width: auto;
    min-width: 0;
    height: 26px;
    margin: 0;
    padding: 0 9px;
    gap: 6px;
    border: 0;
    border-radius: 7px;
    background-color: var(--chip);
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .placeholder {
    font-size: 11.5px;
    font-weight: 600;
    line-height: normal;
}
/* Le ▾ de la maquette est un GLYPHE DE TEXTE de 8 px (600, `--text`, 60 % d'opacité ; boîte
   de 6,9 de large sur 12 de haut) : le svg de 8 x 8 du composant, dans une boîte de 11,
   ajoutait 4,1 à la pastille et pesait deux fois plus d'encre. On le remplace par le même
   glyphe : la pastille retombe à 45,7 et l'encre au pixel. Ouvert, il se retourne. */
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .icons {
    position: static;
    padding: 0;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .icons > .icon.dropdown {
    width: auto;
    height: auto;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .icons > .icon.dropdown > svg { display: none; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .icons > .icon.dropdown::before {
    content: "\25BE";
    display: block;
    font: 600 8px/normal var(--font);
    color: var(--text);
    opacity: .6;
    transition: transform .2s;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown.show > .icons > .icon.dropdown::before { transform: rotate(180deg); }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .options {
    top: calc(100% + 4px);
    left: 0;
    width: max-content !important;
    min-width: 72px;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-menu);
    overflow: hidden;
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .options > .option { padding: 8px 14px; font-size: 12px; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .right > .arrows { grid-gap: 4px; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .right > .arrows > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 10px;
    color: var(--text-dim);
    opacity: .5;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .right > .arrows > i.active { color: var(--text-mid); opacity: 1; }
body.chrome_v2 .zdatatable.zdt_kit > .zdatatable_footer > .right > .arrows > i.active:hover { background: var(--chip); }
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .right > .arrows > i { width: 30px; height: 30px; border-radius: 8px; }
/* Variante PROJET (maquettes Link building / zAnalytics) : à gauche l'état de la liste
   (« 1 brief · page 1 sur 1 », 12 px `--text-dim`), à droite « 50 lignes par page » et, s'il y a
   plusieurs pages seulement, les flèches (30 x 30). Le DOM reste celui du composant — `.left`
   (« lignes par page » + sélecteur), `.right` (l'état + les flèches) — : `.left` et `.right`
   deviennent transparents (`display: contents`) et `order` range leurs enfants. Le sélecteur de
   longueur perd sa pastille et se lit dans la phrase : « 50 ▾ lignes par page ». */
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer { gap: 0; }
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left,
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .right { display: contents; }
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .right > .text {
    order: 0;
    margin: 0 auto 0 0;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown { order: 1; }
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left > .text {
    order: 2;
    margin: 0;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .right > .arrows {
    order: 3;
    margin-left: 14px;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown {
    height: auto;
    padding: 0;
    gap: 4px;
    margin-right: 4px;
    background-color: transparent;
    color: var(--text-dim);
}
/* `!important` : `.cl.dropdown.elementSelected > .placeholder { color: var(--text) !important }`
   (objects-js/components.css) peint la valeur choisie en `--text` ; ici elle se lit comme le reste
   de la phrase, en `--text-dim`. */
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .placeholder {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-dim) !important;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown > .icons > .icon.dropdown::before {
    color: var(--text-dim);
    opacity: 1;
}
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown:hover > .placeholder,
body.chrome_v2 .zdt_projet .zdatatable.zdt_kit > .zdatatable_footer > .left > .cl.dropdown:hover > .icons > .icon.dropdown::before { color: var(--text-mid) !important; }

/* ---------- 5. Pastilles et étiquettes ---------- */
/* Le code couleur sémantique de la charte, à respecter partout :
   vert = ça progresse / c'est validé · gris = ça recule (JAMAIS de rouge,
   choix délibéré pour ne pas dramatiser une baisse devant un client) ·
   violet = ça stagne, anomalie, SEA ou zIA · bleu = action, sélection. */

/* PAS DE `.label` ICI. Dans ce dépôt `.label` est la classe du LIBELLÉ de
   champ de formulaire — 98 usages dans les templates —, pas une pastille d'état.
   Lui donner 29 px de haut, un fond et un rayon déformerait chaque formulaire.
   Les variantes de couleur plus bas visent `.tag` seul pour la même raison. */
body.chrome_v2 .tag,
body.chrome_v2 .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 29px;
    padding: 0 13px;
    border-radius: var(--radius-pill);
    background: var(--chip);
    color: var(--text-mid);
    font-size: 12px;
    font-weight: 600;
}
body.chrome_v2 .tag.green  { background: var(--aqua-soft);    color: var(--aqua-ink); }
body.chrome_v2 .tag.grey   { background: var(--neutral-soft); color: var(--neutral-ink); }
body.chrome_v2 .tag.purple { background: var(--violet-soft);  color: var(--violet-ink); }
body.chrome_v2 .tag.blue   { background: var(--accent-soft);  color: var(--accent-ink); }

/* ---------- 5b. Le segmenté de la charte (§03) ----------
   « Sur un an · 6 mois · 3 mois » : un groupe creusé en `--chip`, une seule
   pastille pleine. Mesure sur le prototype : groupe 36 de haut, marge intérieure
   3, écart 4, rayon 11 ; pastille 30, 0 14, rayon 9, 12 px ; la pastille active
   passe en demi-gras sur `--surface`, l'inactive reste en `--text-mid`.

   LE DÉPÔT EN A QUATRE ÉCRITURES, ET TROIS SONT LÉGITIMES. `.pz2_seg` (05),
   `.pv2_ranges` (03) et `.ov5_seg` (04) tiennent leurs valeurs de LEUR maquette
   d'écran, qui ne dit pas tout à fait la même chose que la charte : 05 met son
   groupe à 38 et ses pastilles en 0 13 / 12,5 ; 04 descend à 26 / 0 11 / 11,5 ;
   03 écarte de 6. La maquette d'écran l'emporte là où elle est explicite — c'est
   elle qu'on compare à l'écran. Cette classe-ci est la référence pour les
   segmentés SANS maquette (`.lds_seg` la suit) et pour les nouveaux. */
body.chrome_v2 .v5_seg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 3px;
    border-radius: 11px;
    background: var(--chip);
}
body.chrome_v2 .v5_seg > * {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-mid);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 .v5_seg > :hover { color: var(--text); }
body.chrome_v2 .v5_seg > .is_on,
body.chrome_v2 .v5_seg > [aria-current="page"],
body.chrome_v2 .v5_seg > [aria-current="true"] {
    background: var(--surface);
    color: var(--text);
}
/* TROIS TAILLES DE PLUS (lot « Modules · Link building · zAnalytics »). La base (36 /
   3 / 11, item 30 / 14 / 12) ne bouge pas : ces modificateurs prennent la hauteur du
   contenu (le groupe vaut item + 2 x marge intérieure) et le rayon de leur maquette.
     _l  zAnalytics, périodes : marge 4, rayon 12, item 32 · 0 14 · rayon 9 · 12,5 ;
         500 au repos, 600 sur l'actif                                     → groupe 40
     _s  Link building, vues   : marge 3, rayon 10, item 28 · 0 13 · rayon 8 · 12 → 34
     _m  Modules, niveaux de la bibliothèque : marge 3, rayon 10, item 30 · 0 12 ·
         rayon 8 · 12 / 600                                                → groupe 36 */
body.chrome_v2 .v5_seg.v5_seg_l { height: auto; padding: 4px; border-radius: 12px; }
body.chrome_v2 .v5_seg.v5_seg_l > * { height: 32px; padding: 0 14px; border-radius: 9px; font-size: 12.5px; font-weight: 500; }
body.chrome_v2 .v5_seg.v5_seg_l > .is_on,
body.chrome_v2 .v5_seg.v5_seg_l > [aria-current="page"],
body.chrome_v2 .v5_seg.v5_seg_l > [aria-current="true"] { font-weight: 600; }
body.chrome_v2 .v5_seg.v5_seg_s { height: auto; padding: 3px; border-radius: 10px; }
body.chrome_v2 .v5_seg.v5_seg_s > * { height: 28px; padding: 0 13px; border-radius: 8px; font-size: 12px; }
body.chrome_v2 .v5_seg.v5_seg_m { height: auto; padding: 3px; border-radius: 10px; }
body.chrome_v2 .v5_seg.v5_seg_m > * { height: 30px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 600; }

/* ---------- 6. Fenêtres modales et infobulles ---------- */

/* PAS DE `.modal` ICI NON PLUS. Dans ce dépôt `.modal` est le VOILE plein
   écran posé derrière un panneau (menu-fixed.css : `position:fixed; inset:0;
   background:#00000077`), pas le panneau lui-même. Lui donner `--surface`
   l'aurait rendu opaque et il aurait recouvert la page entière.

   Le panneau, c'est `#plateformList > .plateform > .content` — celui que
   mPlateform ouvre pour tout le CRUD de la Station. Il a sa propre feuille,
   v5-plateformes.css (le tiroir de la maquette 05 : feuille pleine hauteur,
   sans rayon ni filet). Reste ici la fenêtre `.popup`. */
body.chrome_v2 .popup {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-menu);
    color: var(--text);
}

/* ---------- 7. Séparateurs ---------- */

body.chrome_v2 hr,
body.chrome_v2 .cl.divider {
    background-color: var(--line-soft);
    border: 0;
    height: 1px;
}

/* ---------- 8. Graphiques ---------- */
/* `common.css` force `.highcharts-container { color-scheme: light !important }` :
   la Station était « une app claire », et depuis sa v11 Highcharts choisit sa
   palette avec `light-dark()`. Ce forçage neutralise donc tout thème sombre.
   On le reprend, thème par thème — le `!important` est obligatoire, l'original
   en a un et Highcharts pose lui-même `color-scheme: light dark` sur ce
   conteneur depuis la v13.

   Les couleurs de série, d'axe et d'infobulle, elles, viennent des jetons via
   include/js/v5-charts.js ; ceci ne règle que la palette de repli. */
:root[data-zt="dark"] body.chrome_v2 .highcharts-container {
    color-scheme: dark !important;
}
/* Le fond du graphique est transparent (cf. v5-charts.js) : c'est la carte qui
   porte la surface. Reste le rectangle de tracé, que certaines pages peignent. */
body.chrome_v2 .highcharts-background,
body.chrome_v2 .apexcharts-canvas .apexcharts-inner > rect {
    fill: transparent;
}

/* ---------- La pastille « Récurrente » ---------- */
/* Écrite en style INLINE (vert #00cc33, 8 px, 2 px de marge intérieure, aucune
   marge) par SiteMission::getRecurringLabel() et cinq autres gabarits : collée au
   nom de la mission (« …niveau 2Récurrente »), illisible à 8 px, et d'un vert
   étranger à la charte. On l'habille ici en puce, d'où les `!important` : seuls
   ils battent un attribut `style`. */
body.chrome_v2 .recurring {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background-color: var(--aqua-soft) !important;
    color: var(--aqua-ink) !important;
    font-size: 10.5px !important;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}