@charset "utf-8";
/* ============================================================
   DESIGN V5 — LE KIT DU LOT « MODULES · LINK BUILDING · ZANALYTICS »

   Les composants que les trois maquettes partagent, mesurés à 1680 px dans les deux
   thèmes (inventaire : KIT.md §2). Chargée par template.php JUSTE APRÈS
   v5-components.css et AVANT les feuilles de page, sous `$designV5` — donc iso 1
   seulement. Chaque règle est scopée `body.chrome_v2` : un gabarit projet servi au
   Client Center ou au Partner porte les mêmes classes, qui y sont inertes.

   Les modificateurs du chapeau (`.v5_chapeau_34`) et du segmenté (`.v5_seg_l/_s/_m`)
   vivent dans v5-components.css, à côté de leur base. Les valeurs zDataTable de la
   maquette Modules (`body.chrome_v2.v5_module`) aussi (§4d).

   QUATRE RÈGLES, TOUTES TIRÉES DES PIÈGES DU DÉPÔT :

   1. `common.css` pose `* { font-size: 13px; color: var(--text) }` sur CHAQUE élément.
      Un descendant n'hérite donc jamais de la taille ni de l'encre de son parent. Le
      bloc 0 ci-dessous reprend l'héritage pour les descendants d'un composant — avec
      `:where()`, donc à spécificité nulle : il bat `*` (feuille chargée après) et perd
      contre n'importe quelle vraie règle, y compris celle d'une page. Chaque PARTIE
      nommée d'un composant pose ensuite sa propre taille et sa propre encre.
   2. Couleurs : uniquement des jetons de v5-tokens.css, 0 littéral. Un `var()` ne passe
      pas dans un attribut SVG de présentation (`fill=`) : le style est en ligne.
   3. Ombres : au SURVOL seulement (au repos : le filet `--line`), teintées marine.
   4. `font-size: inherit` explicite sur les <span> d'un composant : sans lui ils
      retombent à 13 px.

   LES TONS. `.t_aqua` · `.t_accent` · `.t_violet` · `.t_neutral` · `.t_amber` · `.t_chip`
   colorent une pastille, une valeur ou un delta (fond + encre pour une pastille, encre
   seule pour une valeur). `.c_*` posent `--c` (la couleur d'une série : barre, point,
   liseré) et `--c-ink` (la même, en encre de texte).
   ============================================================ */

/* ---------- 0. Héritage des descendants d'un composant ---------- */

:where(body.chrome_v2 .v5_chapeau_34, body.chrome_v2 .v5_carte, body.chrome_v2 .v5_kpi,
       body.chrome_v2 .v5_barres, body.chrome_v2 .v5_barre_liste, body.chrome_v2 .v5_barre_src,
       body.chrome_v2 .v5_legende, body.chrome_v2 .v5_legende_graphe, body.chrome_v2 .v5_puces,
       body.chrome_v2 .v5_puce, body.chrome_v2 .v5_pastille, body.chrome_v2 .v5_tableau,
       body.chrome_v2 .v5_vide, body.chrome_v2 .v5_cta, body.chrome_v2 .v5_cta_sec,
       body.chrome_v2 .v5_scopes, body.chrome_v2 .v5_lib, body.chrome_v2 .v5_cartes,
       body.chrome_v2 .v5_conns, body.chrome_v2 .v5_people, body.chrome_v2 .v5_months,
       body.chrome_v2 .v5_tree, body.chrome_v2 .v5_rights, body.chrome_v2 .v5_teams,
       body.chrome_v2 .v5_vault, body.chrome_v2 .v5_editor, body.chrome_v2 .v5_cell,
       body.chrome_v2 .v5_act, body.chrome_v2 .v5_avs, body.chrome_v2 .v5_t) * {
    font-size: inherit;
    color: inherit;
}

/* ---------- Tons ---------- */

body.chrome_v2 .v5_pastille.t_aqua    { background: var(--aqua-soft);    color: var(--aqua-ink); }
body.chrome_v2 .v5_pastille.t_accent  { background: var(--accent-soft);  color: var(--accent-ink); }
body.chrome_v2 .v5_pastille.t_violet  { background: var(--violet-soft);  color: var(--violet-ink); }
body.chrome_v2 .v5_pastille.t_neutral { background: var(--neutral-soft); color: var(--text-mid); }
body.chrome_v2 .v5_pastille.t_amber   { background: var(--prio-soft);    color: var(--prio); }
body.chrome_v2 .v5_pastille.t_chip    { background: var(--chip);         color: var(--text-mid); }

/* Couleur de série : `--c` (peint) et `--c-ink` (texte, plus contrasté en clair). */
body.chrome_v2 .c_accent  { --c: var(--accent);   --c-ink: var(--accent); }
body.chrome_v2 .c_aqua    { --c: var(--aqua);     --c-ink: var(--aqua-ink); }
body.chrome_v2 .c_violet  { --c: var(--violet);   --c-ink: var(--violet-ink); }
body.chrome_v2 .c_neutral { --c: var(--neutral);  --c-ink: var(--neutral-ink); }
body.chrome_v2 .c_amber   { --c: var(--amber);    --c-ink: var(--amber); }
body.chrome_v2 .c_teal    { --c: var(--teal);     --c-ink: var(--teal); }
body.chrome_v2 .c_prio    { --c: var(--prio);     --c-ink: var(--prio); }
body.chrome_v2 .c_serie17 { --c: var(--serie-17); --c-ink: var(--serie-17); }

/* ---------- 2.1 La pile de page ---------- */
/* Les blocs d'une page : colonne, 18 px entre deux blocs. Remplace les marges ad hoc. */

body.chrome_v2 .v5_pile {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
body.chrome_v2 .v5_pile > * { min-width: 0; }

/* ---------- 2.2b Les boutons d'action (chapeau, panneau, état vide) ---------- */
/* Primaire : h38 · pad 0 16 (Modules) / 15 (projet) · r11 · accent · 600 12,5.
   Secondaire : h38 + filet de 1 = 40 (boîte de CONTENU, comme la maquette) · filet
   `--line` · survol filet + encre `--accent` (déclaré par la maquette : famille A).
   Le primaire n'a pas de survol dans la maquette : il garde celui de la charte. */

body.chrome_v2 .v5_cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 11px;
    background: var(--accent);
    color: var(--on-accent);
    font: 600 12.5px var(--font);
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
body.chrome_v2 .v5_cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
    color: var(--on-accent);
}
body.chrome_v2 .v5_chapeau_34:not(.v5_chapeau_module) .v5_cta { padding: 0 15px; }
body.chrome_v2 .v5_cta_plus {
    font-size: 15px;
    line-height: 1;
    color: inherit;
}
body.chrome_v2 .v5_cta_sec {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 15px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: transparent;
    color: var(--text-mid);
    font: 600 12.5px var(--font);
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    /* Les maquettes écrivent le survol du secondaire (`style-hover` : filet + encre `--accent`) SANS
       durée — « Voir les publications », « Exporter en CSV », « Nouveau dossier », « Actualiser »,
       « Réessayer », « Aperçu », « Modifier »… : tous instantanés. Seules les pastilles rondes de 26 px
       (.16s) et la zone de dépôt (.14s) déclarent une durée : autre composant. */
    transition: none;
}
body.chrome_v2 .v5_cta_sec:hover {
    border-color: var(--accent);
    color: var(--accent);
}
/* Dans un panneau (en-tête de tableau) : 34 de haut, rayon 10, 12 px, pad 0 14. */
body.chrome_v2 .v5_cta.v5_cta_s,
body.chrome_v2 .v5_cta_sec.v5_cta_s {
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    gap: 7px;
    font-size: 12px;
}
body.chrome_v2 .v5_cta_sec.v5_cta_s { box-sizing: border-box; }
/* Dans la maquette le « + » est du texte du libellé (« + Ajouter … » en 12 px) : même corps. */
body.chrome_v2 .v5_cta.v5_cta_s .v5_cta_plus { font-size: 12px; }

/* ---------- 2.3 La carte-panneau ---------- */
/* `.v5_panneau` (r18, en-tête 20/24 filet, 14/700) reste pour les écrans livrés. */

body.chrome_v2 .v5_carte {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 24px;
    min-width: 0;
}
body.chrome_v2 .v5_carte.v5_carte_large { padding: 24px 26px; }
body.chrome_v2 .v5_carte_head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}
body.chrome_v2 .v5_carte_txt { min-width: 0; }
body.chrome_v2 .v5_carte_droite { flex: none; max-width: 100%; }
body.chrome_v2 .v5_carte_titre {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text);
}
body.chrome_v2 .v5_carte_sub {
    margin-top: 4px;
    max-width: 720px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-dim);
    text-wrap: pretty;
}
/* « bars » de la maquette Modules : le titre et le sous-titre en bloc, la liste suit
   (sa propre marge haute de 18). */
body.chrome_v2 .v5_carte.v5_carte_large > .v5_carte_head { display: block; margin-bottom: 0; }
body.chrome_v2 .v5_carte.v5_carte_large .v5_carte_sub { line-height: normal; }

/* ---------- 2.4 Les cartes KPI ---------- */

body.chrome_v2 .v5_kpis {
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    gap: 16px;
}
body.chrome_v2 .v5_kpis.v5_kpis_spark {
    grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
    gap: 14px;
}
body.chrome_v2 .v5_kpi {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
body.chrome_v2 .v5_kpi:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
}
body.chrome_v2 .v5_kpi.v5_kpi_spark {
    gap: 6px;
    padding: 18px 20px 12px;
}
body.chrome_v2 .v5_kpi_lib {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
body.chrome_v2 .v5_kpi_spark .v5_kpi_lib { letter-spacing: .07em; }
body.chrome_v2 .v5_kpi_val {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
body.chrome_v2 .v5_kpi_spark .v5_kpi_val { line-height: normal; }
body.chrome_v2 .v5_kpi_val.t_aqua   { color: var(--aqua-ink); }
body.chrome_v2 .v5_kpi_val.t_violet { color: var(--violet-ink); }
body.chrome_v2 .v5_kpi_val.t_accent { color: var(--accent); }
body.chrome_v2 .v5_kpi_val.t_neutral { color: var(--neutral-ink); }
body.chrome_v2 .v5_kpi_ligne {
    display: flex;
    align-items: baseline;
    gap: 9px;
}
body.chrome_v2 .v5_kpi_delta {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.chrome_v2 .v5_kpi_delta.t_aqua    { color: var(--aqua-ink); }
body.chrome_v2 .v5_kpi_delta.t_neutral { color: var(--neutral-ink); }
body.chrome_v2 .v5_kpi_note {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-dim);
}
/* La sparkline : 100 % x 46, trait non redimensionné. Les couleurs viennent de `--c`. */
body.chrome_v2 .v5_kpi_spark_svg {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 4px;
    overflow: visible;
    --c: var(--accent);
}
body.chrome_v2 .v5_kpi_spark_svg.t_aqua    { --c: var(--aqua); }
body.chrome_v2 .v5_kpi_spark_svg.t_violet  { --c: var(--violet); }
body.chrome_v2 .v5_kpi_spark_svg.t_neutral { --c: var(--neutral); }

/* ---------- 2.5 Les barres ---------- */

/* Maquette Modules « bars » : libellé · piste de 22 · valeur colorée. */
body.chrome_v2 .v5_barres {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 18px;
}
body.chrome_v2 .v5_barres_ligne {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) 130px;
    column-gap: 18px;
    align-items: center;
}
body.chrome_v2 .v5_barres_lib {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chrome_v2 .v5_barres_piste {
    height: 22px;
    border-radius: 6px;
    background: var(--surface2);
    overflow: hidden;
}
body.chrome_v2 .v5_barres_rempl {
    width: var(--w, 0%);
    height: 100%;
    border-radius: 6px;
    background: var(--c, var(--accent));
    opacity: .88;
}
body.chrome_v2 .v5_barres_val {
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink, var(--c, var(--text)));
}

/* Link building « Types de support » : tête (libellé · valeur + pourcentage) · piste de 10. */
body.chrome_v2 .v5_barre_liste {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.chrome_v2 .v5_barre_ligne_tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
body.chrome_v2 .v5_barre_lib {
    font-size: 12.5px;
    color: var(--text-mid);
}
body.chrome_v2 .v5_barre_val {
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
body.chrome_v2 .v5_barre_pct {
    font-weight: 400;
    color: var(--text-dim);
}
body.chrome_v2 .v5_barre_piste {
    height: 10px;
    border-radius: 6px;
    background: var(--chip);
    overflow: hidden;
}
body.chrome_v2 .v5_barre_rempl {
    width: var(--w, 0%);
    height: 100%;
    border-radius: 6px;
    background: var(--c, var(--accent));
}

/* zAnalytics « Source de trafic » : pastille + libellé · piste de 10 · valeur + sous-valeur. */
body.chrome_v2 .v5_barre_src {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 120px;
    column-gap: 14px;
    align-items: center;
}
body.chrome_v2 .v5_barre_src_lib {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-mid);
}
body.chrome_v2 .v5_barre_src_lib > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chrome_v2 .v5_barre_src_val {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
body.chrome_v2 .v5_barre_src_sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
}

/* La barre EMPILÉE (ancres / URLs, recherche) : segments à `flex: <part>`, 2 px entre. */
body.chrome_v2 .v5_barre_empilee {
    display: flex;
    gap: 2px;
    height: 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
}
body.chrome_v2 .v5_barre_empilee > * {
    min-width: 2px;
    background: var(--c, var(--accent));
}

/* La barre FINE d'une cellule (zAnalytics « pages ») : sous la valeur, 4 px. */
body.chrome_v2 .v5_barre_fine {
    height: 4px;
    max-width: 160px;
    border-radius: 3px;
    background: var(--chip);
    overflow: hidden;
}
body.chrome_v2 .v5_barre_fine > * {
    display: block;
    width: var(--w, 0%);
    height: 100%;
    border-radius: 3px;
    background: var(--c, var(--accent));
}

/* ---------- 2.6 Les légendes ---------- */

body.chrome_v2 .v5_pt {
    display: inline-block;
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--c, var(--accent));
}
/* Ligne de légende de carte : point · libellé · valeur · pourcentage. */
body.chrome_v2 .v5_legende {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
body.chrome_v2 .v5_legende_ligne {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.chrome_v2 .v5_legende_lib {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chrome_v2 .v5_legende_val {
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
body.chrome_v2 .v5_legende_pct {
    width: 52px;
    text-align: right;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-dim);
}
/* Légende de graphe, en tête de carte : point 9 + libellé 11,5 ; courbes : trait 18 x 3. */
body.chrome_v2 .v5_legende_graphe {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
}
body.chrome_v2 .v5_legende_item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-mid);
    white-space: nowrap;
}
body.chrome_v2 .v5_legende_courbe { gap: 8px 18px; }
body.chrome_v2 .v5_legende_courbe .v5_legende_item { gap: 8px; font-size: 12px; }
body.chrome_v2 .v5_leg_trait {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--c, var(--accent));
}
body.chrome_v2 .v5_leg_tirets {
    display: inline-block;
    flex: none;
    width: 18px;
    height: 0;
    border-top: 2px dashed var(--neutral);
}

/* ---------- 2.7 Les puces de filtre ---------- */

body.chrome_v2 .v5_puces {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
body.chrome_v2 .v5_puces.v5_puces_s { gap: 7px; }
body.chrome_v2 .v5_puce {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    font: 600 12px var(--font);
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s var(--ease), color .14s var(--ease), border-color .16s var(--ease);
}
body.chrome_v2 .v5_puce:hover:not(.is_on, [aria-pressed="true"]) { color: var(--text); }
body.chrome_v2 .v5_puce.is_on,
body.chrome_v2 .v5_puce[aria-pressed="true"] {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-ink);
}
/* En-tête de tableau (maquette Modules) : 11,5 px, filet d'état transparent. La maquette écrit
   `height: 28px` + `border: 1px` en boîte de CONTENU : la puce RENDUE fait 30 (28 + le filet de
   1 en haut et en bas). Le kit est en boîte de bordure : on pose donc la boîte rendue, 30. */
body.chrome_v2 .v5_puce.v5_puce_s,
body.chrome_v2 .v5_puces_s .v5_puce {
    height: 30px;
    padding: 0 11px;
    font-size: 11.5px;
}
body.chrome_v2 .v5_puce.v5_puce_s.is_on,
body.chrome_v2 .v5_puce.v5_puce_s[aria-pressed="true"],
body.chrome_v2 .v5_puces_s .v5_puce.is_on,
body.chrome_v2 .v5_puces_s .v5_puce[aria-pressed="true"] { border-color: transparent; }
body.chrome_v2 .v5_puce_point {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c, var(--text-dim));
}
body.chrome_v2 .v5_puce_compte {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-dim);
}
/* « non utilisés » : une puce qui ne se clique pas. */
body.chrome_v2 .v5_puce_inerte {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--chip);
    color: var(--text-dim);
    font: 400 11px var(--font);
    white-space: nowrap;
}
/* Type d'erreur (publications) : neutre + compteur. */
body.chrome_v2 .v5_puce_erreur {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 26px;
    padding: 0 10px;
    border-radius: 7px;
    background: var(--neutral-soft);
    color: var(--text-mid);
    font: 600 11.5px var(--font);
    white-space: nowrap;
}
body.chrome_v2 .v5_puce_nb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 5px;
    background: var(--neutral);
    color: var(--knob);
    font-size: 10.5px;
    font-weight: 700;
}

/* ---------- 2.9 Les pastilles de cellule ---------- */

body.chrome_v2 .v5_pastille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--chip);
    color: var(--text-mid);
    font-size: 11px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    /* Dans un conteneur plus étroit que son texte (colonne « Groupe » de 150 px d'un
       tableau, dont le nom le plus long en fait 161), la pastille se borne à la boîte et
       son texte (`.v5_pastille_txt`, posé par `v5_pastille()`) se coupe par une ellipse
       au lieu de déborder de la cellule. Pas de `overflow` sur la pastille elle-même (il
       déplacerait sa ligne de base). */
    max-width: 100%;
}
body.chrome_v2 .v5_pastille > .v5_pastille_txt { min-width: 0; }
/* L'ellipse n'est posée que là où une largeur est IMPOSÉE (colonne de zDataTable qui
   déclare la sienne, `zdt_w` ; cellule de tableau statique) : un `overflow` sur le texte
   fait passer son lissage de sous-pixel à niveaux de gris, inutile ailleurs. */
body.chrome_v2 :is(td.zdt_w, .v5_cell) .v5_pastille > .v5_pastille_txt {
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chrome_v2 .v5_pastille_pt {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
/* Variantes de Link building : type de lien · ancre · statut cliquable. */
body.chrome_v2 .v5_pastille.v5_pastille_type { padding: 0 8px; font-size: 10.5px; font-weight: 700; }
body.chrome_v2 .v5_pastille.v5_pastille_ancre {
    height: 24px;
    padding: 0 9px;
    background: var(--chip);
    color: var(--text);
    font-size: 12px;
}
body.chrome_v2 .v5_pastille.v5_pastille_statut {
    height: 24px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
body.chrome_v2 .v5_pastille.v5_pastille_statut::after {
    content: "\25BE";
    font-size: 8px;
    opacity: .7;
}

/* ---------- 2.10 Les cellules ---------- */

body.chrome_v2 .v5_cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
body.chrome_v2 .v5_cell.r { align-items: flex-end; text-align: right; }
body.chrome_v2 .v5_cell:first-child { font-weight: 500; color: var(--text); }
body.chrome_v2 .v5_t {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
}
/* La 1re ligne d'une cellule « nom + sous-ligne » (`S()` de la maquette) est en `nowrap` +
   `overflow: hidden` + `text-overflow: ellipsis` : un nom trop long pour sa colonne se termine par
   « … » DANS la colonne (sans quoi la cellule `zdt_w` le coupe net, au milieu d'une lettre). `.v5_t`
   est une colonne flex : l'ellipse se pose sur ses enfants, pas sur lui. `.v5_sub` a la sienne. */
body.chrome_v2 .v5_t > :not(.v5_sub) {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chrome_v2 .v5_sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chrome_v2 .v5_num { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
body.chrome_v2 .v5_num.neg { color: var(--text-mid); }
/* La maquette écrit `--accent` des deux côtés : le lien est l'encre d'accent du thème (sombre #3D8BFF,
   clair #005CF0). `--accent-ink` (#7FB2FF en sombre) est l'encre d'un texte posé sur `--accent-soft`
   (pastille) : trop pâle pour un lien nu. En clair les deux jetons valent #005CF0. */
body.chrome_v2 .v5_lien { font-weight: 500; color: var(--accent); text-decoration: none; }
body.chrome_v2 .v5_lien:hover { text-decoration: underline; }
/* « — », « +1 » : la taille est celle du texte qui l'entoure (jamais les 13 px du `*` de
   common.css, même hors d'un composant du kit) ; seule l'encre change. */
body.chrome_v2 .v5_dim { font-size: inherit; color: var(--text-dim); }

/* Les avatars d'une cellule : 26 de contenu + un filet de 2 de la surface, chevauchés de 6. La
   maquette les écrit en boîte de CONTENU : l'avatar RENDU fait 30 x 30 (ligne de 53 avec avatars) ;
   le kit est en boîte de bordure, on pose la boîte rendue (26 + 2 x 2). En live ce sont des
   PHOTOS (<img>) ; les initiales de la maquette sont un substitut. */
body.chrome_v2 .v5_avs {
    display: flex;
    align-items: center;
    padding-left: 6px;
}
body.chrome_v2 .v5_avs > * {
    flex: none;
    width: 30px;
    height: 30px;
    margin-left: -6px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--chip);
    object-fit: cover;
    box-sizing: border-box;
}

/* Un NOM précédé de sa photo (cellule « Nom » d'une liste de personnes). Les deux lignes de
   texte (nom 600 + sous-ligne 11) tiennent dans les 28 px du bouton d'action de la ligne :
   le pas d'une ligne reste 28 + 22 + 1 = 51, avec ou sans sous-ligne, et la photo ne le
   grandit pas (26 de haut, avec son filet de 2 de la surface comme `.v5_avs`). */
body.chrome_v2 .v5_tav {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
body.chrome_v2 .v5_tav > img {
    flex: none;
    width: 26px;
    height: 26px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--chip);
    object-fit: cover;
    box-sizing: border-box;
}
body.chrome_v2 .v5_tav > .v5_t {
    gap: 2px;
    line-height: 15px;
    overflow: hidden;
}
body.chrome_v2 .v5_tav > .v5_t > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chrome_v2 .v5_tav > .v5_t > span:not(.v5_sub) { font-size: inherit; }
body.chrome_v2 .v5_tav > .v5_t > .v5_sub { line-height: 11px; }

/* La bascule : piste 34 x 19, bouton 15. Seulement avec un handler (voir v5_bascule). */
body.chrome_v2 .v5_tg {
    position: relative;
    flex: none;
    width: 34px;
    height: 19px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--neutral-soft);
    cursor: pointer;
    transition: background .18s var(--ease);
}
body.chrome_v2 .v5_tg.is_on { background: var(--accent); }
body.chrome_v2 .v5_tg::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--knob);
    box-shadow: 0 1px 3px rgba(11, 21, 51, .3);
    transition: left .18s var(--ease);
}
body.chrome_v2 .v5_tg.is_on::after { left: 17px; }

/* Les actions de ligne : 28 x 28, rayon 8, icône 14. Survol : fond `--chip`, encre accent. */
body.chrome_v2 .v5_acts {
    display: flex;
    align-items: center;
    gap: 5px;
}
body.chrome_v2 .v5_act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 .v5_act:hover {
    background: var(--chip);
    color: var(--accent);
}
body.chrome_v2 .v5_act svg { width: 14px; height: 14px; }

/* ---------- 2.11 Le tableau statique ---------- */
/* Mêmes valeurs que le zDataTable de la maquette Modules (v5-components.css §4d). */

body.chrome_v2 .v5_tableau {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    min-width: 0;
}
body.chrome_v2 .v5_tableau_tete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
}
body.chrome_v2 .v5_tableau_txt { min-width: 0; }
body.chrome_v2 .v5_tableau_sp { flex: 1; }
body.chrome_v2 .v5_tableau_titre {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
body.chrome_v2 .v5_tableau_compte {
    margin-top: 3px;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-dim);
}
/* « Filtrer… » : 250 x 34 (boîte à bordure), loupe 13, saisie 12. */
body.chrome_v2 .v5_tableau_filtre {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 250px;
    height: 34px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-sizing: border-box;
    color: var(--text-dim);
}
body.chrome_v2 .v5_tableau_filtre > svg { flex: none; }
body.chrome_v2 .v5_tableau_filtre > input {
    flex: 1;
    min-width: 0;
    min-height: 0 !important;
    height: 32px;
    padding: 0 !important;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    font-size: 12px;
    color: var(--text) !important;
}
body.chrome_v2 .v5_tableau_filtre > input::placeholder { color: var(--text-dim); }
/* AU FOCUS, LA MAQUETTE NE CHANGE RIEN (mesuré, deux thèmes : le champ interne reste `border: 0`,
   `outline: none`, fond transparent ; la boîte garde son filet 1 px `--line`). Le filet d'accent des
   champs de la charte (v5-components.css : `input:not(…):focus`, (0,3,2) en `!important`) battait le
   `border: 0 !important` de ci-dessus, de spécificité plus faible : un second rectangle d'accent
   apparaissait DANS la boîte. Même spécificité (0,3,2), feuille chargée après : le kit gagne.
   Le champ de recherche de la bibliothèque (`.v5_lib_recherche`) a la même grammaire. */
body.chrome_v2 .v5_tableau_filtre > input:focus,
body.chrome_v2 .v5_lib_recherche > input:focus { border: 0 !important; }
/* Repère de FOCUS AU CLAVIER seulement. Un champ texte répond à `:focus-visible` aussi à la souris :
   aucun sélecteur ne sépare les deux. `html.v5_clavier` est posé par chrome-v2.js à la première
   touche Tab et retiré au premier clic : la souris ne voit donc RIEN de plus que la maquette. */
html.v5_clavier body.chrome_v2 .v5_tableau_filtre:focus-within,
html.v5_clavier body.chrome_v2 .v5_lib_recherche:focus-within { border-color: var(--accent); }
body.chrome_v2 .v5_tableau_defile { overflow-x: auto; }
body.chrome_v2 .v5_tableau_in { min-width: var(--minw, 900px); }
body.chrome_v2 .v5_tableau_titres {
    display: grid;
    grid-template-columns: var(--tpl);
    column-gap: 14px;
    padding: 12px 22px;
    background: var(--surface2);
    border-bottom: 1px solid var(--line);
}
body.chrome_v2 .v5_th {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
    white-space: nowrap;
}
body.chrome_v2 .v5_th.r { justify-content: flex-end; }
body.chrome_v2 .v5_tableau_ligne {
    display: grid;
    grid-template-columns: var(--tpl);
    column-gap: 14px;
    align-items: center;
    padding: 11px 22px;
    border-bottom: 1px solid var(--line-soft);
    transition: background .14s var(--ease);
}
body.chrome_v2 .v5_tableau_ligne:hover { background: var(--surface2); }
body.chrome_v2 .v5_tableau_ligne[hidden] { display: none; }
body.chrome_v2 .v5_tableau_pied {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 13px 22px;
    font-size: 11.5px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
/* Variante zAnalytics / Link building : en-tête pad 20 24 16 sans filet, titres 11 px
   encadrés de `--line-soft`, lignes pad 11 24, pied 12 px. */
body.chrome_v2 .v5_tableau.v5_tableau_projet > .v5_tableau_tete {
    padding: 20px 24px 16px;
    border-bottom: 0;
}
body.chrome_v2 .v5_tableau_projet .v5_tableau_titres {
    padding: 11px 24px;
    background: transparent;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}
body.chrome_v2 .v5_tableau_projet .v5_th { font-size: 11px; }
body.chrome_v2 .v5_tableau_projet .v5_tableau_ligne { padding: 11px 24px; }
/* Survol d'une ligne : la maquette zAnalytics DÉCLARE `transition: background .12s` (5 lignes de
   tableau, famille A) ; Modules déclare .14s et Link building est muette. Le .12 est donc celui
   de la variante projet seule (ici et sur `zdt_projet`, v5-components.css) ; Modules garde .14. */
body.chrome_v2 .v5_tableau_projet .v5_tableau_ligne,
body.chrome_v2 .v5_tableau_projet table.v5tc_t tbody > tr > td { transition-duration: .12s; }
body.chrome_v2 .v5_tableau_projet .v5_tableau_pied { padding: 13px 24px; font-size: 12px; }

/* ---------- 2.12 L'état vide ---------- */

body.chrome_v2 .v5_vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 56px 30px;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: 20px;
    text-align: center;
}
body.chrome_v2 .v5_vide_ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--accent-soft);
    color: var(--accent);
}
body.chrome_v2 .v5_vide_ico > svg { width: 22px; height: 22px; }
body.chrome_v2 .v5_vide_titre {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
}
body.chrome_v2 .v5_vide_texte {
    max-width: 520px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-mid);
    text-wrap: pretty;
}
body.chrome_v2 .v5_vide > .v5_cta,
body.chrome_v2 .v5_vide > .v5_chapeau_actions { margin-top: 8px; }
body.chrome_v2 .v5_vide > .v5_cta { padding: 0 18px; }
/* Encart (crawler) : dans un panneau, fond `--surface2`, pictogramme rond neutre. */
body.chrome_v2 .v5_vide.v5_vide_encart {
    margin: 0 22px 22px;
    padding: 46px 24px;
    gap: 10px;
    border-radius: 16px;
    background: var(--surface2);
}
body.chrome_v2 .v5_vide_encart .v5_vide_ico {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--neutral-soft);
    color: var(--neutral);
}
body.chrome_v2 .v5_vide_encart .v5_vide_ico > svg { width: 20px; height: 20px; }
body.chrome_v2 .v5_vide_encart .v5_vide_titre { font-size: 15px; }
body.chrome_v2 .v5_vide_encart .v5_vide_texte { max-width: 440px; line-height: 1.55; }
body.chrome_v2 .v5_vide_encart > .v5_chapeau_actions,
body.chrome_v2 .v5_vide_encart > .v5_cta { margin-top: 6px; }
/* Les deux boutons de l'encart font 38 (la maquette Link building le dit) : le secondaire
   n'est pas en boîte de contenu ici, contrairement au chapeau où il fait 40. */
body.chrome_v2 .v5_vide_encart .v5_chapeau_actions { gap: 8px; }
body.chrome_v2 .v5_vide_encart .v5_cta_sec { box-sizing: border-box; }
/* Dépôt de fichiers : filet de 1,5, 120 de haut, survol filet + encre d'accent. */
body.chrome_v2 .v5_vide.v5_vide_depot {
    min-height: 120px;
    padding: 28px 24px;
    justify-content: center;
    border-width: 1.5px;
    border-radius: 16px;
    transition: border-color .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 .v5_vide.v5_vide_depot:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ---------- 2.13 Les autres blocs de la maquette Modules ---------- */

/* scopes — la barre de portée (task manager) : puces à avatar + compteur. */
body.chrome_v2 .v5_scopes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}
body.chrome_v2 .v5_scope {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    /* Maquette (`padL`, l.1559) : retrait gauche 6 quand la pastille porte un avatar, 14 sans ;
       12 à droite dans les deux cas. */
    padding: 0 12px 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-mid);
    font: 500 12.5px var(--font);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: background .14s var(--ease);
}
body.chrome_v2 .v5_scope.has_av { padding-left: 6px; }
body.chrome_v2 .v5_scope:hover { background: var(--surface2); }
body.chrome_v2 .v5_scope.is_on {
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-weight: 600;
}
body.chrome_v2 .v5_scope_av {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c, var(--accent));
    color: var(--on-accent);
    font-size: 9.5px;
    font-weight: 600;
    object-fit: cover;
}
body.chrome_v2 .v5_scope_n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 19px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--chip);
    color: var(--text-mid);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
body.chrome_v2 .v5_scope.is_on .v5_scope_n { background: var(--accent); color: var(--on-accent); }
body.chrome_v2 .v5_scope_n.t_violet { background: var(--violet-soft); color: var(--violet-ink); }
body.chrome_v2 .v5_scope_sep {
    flex: none;
    width: 1px;
    height: 22px;
    margin: 0 4px;
    background: var(--line);
}

/* lib — la bibliothèque (base de connaissance) : catégories à gauche, sections à droite. */
body.chrome_v2 .v5_lib {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
/* La maquette colle la colonne à 130 px sous un en-tête collant ; le nôtre défile avec la
   page : on la colle au bord du contenu. */
body.chrome_v2 .v5_lib_cats {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
body.chrome_v2 .v5_lib_cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background .14s var(--ease);
}
body.chrome_v2 .v5_lib_cat:hover { background: var(--chip); }
body.chrome_v2 .v5_lib_cat.is_on { background: var(--accent-soft); }
body.chrome_v2 .v5_lib_cat_lib {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chrome_v2 .v5_lib_cat.is_on .v5_lib_cat_lib { font-weight: 600; color: var(--accent-ink); }
/* Les trois boîtes ci-dessous (compteur du rail, champ de recherche, compteur de section) sont
   écrites par la maquette en boîte de CONTENU : `min-width: 22px` + `padding: 0 6px` font un compteur
   de 34 RENDUS, `height: 36px` + filet de 1 un champ de 38. Le kit les pose donc en `content-box`
   avec les valeurs déclarées de la maquette : la boîte rendue est celle de la maquette, sans
   surcharge de page. */
body.chrome_v2 .v5_lib_cat_n {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 19px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--chip);
    color: var(--text-mid);
    font-size: 10.5px;
    font-weight: 700;
}
body.chrome_v2 .v5_lib_main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
body.chrome_v2 .v5_lib_outils { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
body.chrome_v2 .v5_lib_recherche {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 260px;
    height: 36px;
    padding: 0 13px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-sizing: content-box;
    color: var(--text-dim);
}
body.chrome_v2 .v5_lib_recherche > input {
    flex: 1;
    min-width: 0;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: none;
    background: transparent !important;
    font-size: 12.5px;
    color: var(--text) !important;
}
body.chrome_v2 .v5_lib_section_tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
body.chrome_v2 .v5_lib_section_titre { font-size: 15px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_lib_section_n {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
}
body.chrome_v2 .v5_lib_grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.chrome_v2 .v5_lib_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s var(--ease), transform .16s var(--ease);
}
body.chrome_v2 .v5_lib_item:hover { border-color: var(--accent); transform: translateY(-1px); }
body.chrome_v2 .v5_lib_item_txt { flex: 1; min-width: 0; }
body.chrome_v2 .v5_lib_item_t {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chrome_v2 .v5_lib_item_s {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.chrome_v2 .v5_lib_niveau {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    background: var(--chip);
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
body.chrome_v2 .v5_lib_niveau.t_aqua   { background: var(--aqua-soft);   color: var(--aqua-ink); }
body.chrome_v2 .v5_lib_niveau.t_accent { background: var(--accent-soft); color: var(--accent-ink); }
body.chrome_v2 .v5_lib_niveau.t_violet { background: var(--violet-soft); color: var(--violet-ink); }
body.chrome_v2 .v5_lib_date { font-size: 11.5px; color: var(--text-mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.chrome_v2 .v5_lib_fleche { flex: none; color: var(--text-dim); }

/* cartes — grille de cartes à couverture (base de connaissance, veille). `--cols`, `--cover`. */
body.chrome_v2 .v5_cartes {
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    gap: 16px;
}
body.chrome_v2 .v5_cartec {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
body.chrome_v2 .v5_cartec:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift-2); }
/* La couverture est de la DONNÉE : dégradé de la maquette → l'image réelle en live, ou un
   aplat `--surface2`. */
body.chrome_v2 .v5_cartec_cover {
    display: flex;
    align-items: flex-end;
    height: var(--cover, 130px);
    padding: 16px 18px;
    background: var(--surface2) center / cover no-repeat;
    box-sizing: border-box;
}
body.chrome_v2 .v5_cartec_tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 6px;
    /* Maquette : rgba(6,10,27,.55) dans les DEUX thèmes. `--nuit` est le #060A1B fixe (le `--rail`
       clair est #0B1533, une autre teinte) ; .55 et non .78. */
    background: color-mix(in srgb, var(--nuit) 55%, transparent);
    color: var(--knob);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
body.chrome_v2 .v5_cartec_corps { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; }
body.chrome_v2 .v5_cartec_titre { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text); text-wrap: pretty; }
body.chrome_v2 .v5_cartec_sub { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); text-wrap: pretty; }
body.chrome_v2 .v5_cartec_pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
body.chrome_v2 .v5_cartec_meta { font-size: 11px; color: var(--text-dim); }
body.chrome_v2 .v5_cartec_lien { font-size: 11px; font-weight: 600; color: var(--accent-ink); }

/* conns — cartes de connexion (régies). Une indisponible : filet `--line-soft`, opacité .62. */
body.chrome_v2 .v5_conns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.chrome_v2 .v5_conn {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
body.chrome_v2 .v5_conn.is_off { border-color: var(--line-soft); opacity: .62; }
body.chrome_v2 .v5_conn_tete { display: flex; align-items: center; gap: 11px; }
body.chrome_v2 .v5_conn_ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 700;
}
body.chrome_v2 .v5_conn_nom { font-size: 13.5px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_conn_note { margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
body.chrome_v2 .v5_conn_pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.chrome_v2 .v5_conn_btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: var(--accent);
    color: var(--on-accent);
    font: 600 11.5px var(--font);
    cursor: pointer;
    text-decoration: none;
}
body.chrome_v2 .v5_conn_btn.is_sec { background: transparent; border-color: var(--line); color: var(--text-mid); }

/* people — une ligne par personne : identité, 4 statistiques, anneau. */
body.chrome_v2 .v5_people { display: flex; flex-direction: column; gap: 10px; }
body.chrome_v2 .v5_person {
    display: grid;
    grid-template-columns: 220px repeat(4, minmax(0, 1fr)) 86px;
    column-gap: 16px;
    align-items: center;
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
}
body.chrome_v2 .v5_person_id { display: flex; align-items: center; gap: 11px; min-width: 0; }
body.chrome_v2 .v5_person_av {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--c, var(--accent));
    color: var(--on-accent);
    font-size: 11.5px;
    font-weight: 600;
    object-fit: cover;
}
body.chrome_v2 .v5_person_nom { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.chrome_v2 .v5_person_role { margin-top: 2px; font-size: 11px; color: var(--text-dim); }
body.chrome_v2 .v5_stat { padding: 9px 12px; border-radius: 11px; background: var(--surface2); }
body.chrome_v2 .v5_stat_lib { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
body.chrome_v2 .v5_stat_ligne { display: flex; align-items: baseline; gap: 7px; margin-top: 4px; }
body.chrome_v2 .v5_stat_val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--c-ink, var(--text)); }
body.chrome_v2 .v5_stat_sub { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
/* L'anneau : 58, trait 4,5, piste `--line-soft` EN STYLE (attribut SVG sans var()). */
body.chrome_v2 .v5_anneau { position: relative; width: 58px; height: 58px; justify-self: end; }
body.chrome_v2 .v5_anneau > svg { display: block; width: 58px; height: 58px; }
body.chrome_v2 .v5_anneau_piste { fill: none; stroke: var(--line-soft); stroke-width: 4.5; }
body.chrome_v2 .v5_anneau_arc { fill: none; stroke: var(--c, var(--aqua)); stroke-width: 4.5; stroke-linecap: round; }
body.chrome_v2 .v5_anneau_pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* months — une carte par mois : 3 tuiles, puis une ligne par série. */
body.chrome_v2 .v5_months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
body.chrome_v2 .v5_month {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}
body.chrome_v2 .v5_month.is_now { border-color: var(--accent); }
body.chrome_v2 .v5_month_tete { padding: 14px 16px; border-bottom: 1px solid var(--line); }
body.chrome_v2 .v5_month_nom { font-size: 13.5px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_month_tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
body.chrome_v2 .v5_tuile { padding: 7px 9px; border-radius: 9px; background: var(--surface2); }
body.chrome_v2 .v5_tuile_lib { font-size: 9.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
body.chrome_v2 .v5_tuile_val { margin-top: 2px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
body.chrome_v2 .v5_tuile.is_total { background: var(--accent); }
body.chrome_v2 .v5_tuile.is_total .v5_tuile_lib { color: color-mix(in srgb, var(--on-accent) 75%, transparent); }
body.chrome_v2 .v5_tuile.is_total .v5_tuile_val { color: var(--on-accent); }
body.chrome_v2 .v5_month_lignes { padding: 6px 16px 12px; }
body.chrome_v2 .v5_month_ligne {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
}
body.chrome_v2 .v5_month_sq { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--accent)); }
body.chrome_v2 .v5_month_lib { flex: 1; min-width: 0; font-size: 12px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.chrome_v2 .v5_month_val { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
body.chrome_v2 .v5_month_tend { width: 12px; font-size: 11px; font-weight: 700; color: var(--neutral-ink); }
body.chrome_v2 .v5_month_tend.t_aqua { color: var(--aqua-ink); }

/* tree — catégories › sections › pages (menus). */
body.chrome_v2 .v5_tree { display: flex; flex-direction: column; gap: 14px; }
body.chrome_v2 .v5_tree_cat { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
body.chrome_v2 .v5_tree_cat_tete {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: var(--surface2);
    border-bottom: 1px solid var(--line);
}
body.chrome_v2 .v5_tree_etiq { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
body.chrome_v2 .v5_tree_cat_nom { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_tree_cat_n { font-size: 11.5px; color: var(--text-dim); }
body.chrome_v2 .v5_tree_sec { display: grid; grid-template-columns: 220px minmax(0, 1fr); border-bottom: 1px solid var(--line-soft); }
body.chrome_v2 .v5_tree_sec_id { padding: 14px 20px; border-right: 1px solid var(--line-soft); }
body.chrome_v2 .v5_tree_sec_lib { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
body.chrome_v2 .v5_tree_sec_nom { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_tree_pages { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 10px 14px; }
body.chrome_v2 .v5_tree_page {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
    cursor: grab;
}
body.chrome_v2 .v5_tree_page.has_actions { background: var(--surface2); font-weight: 600; }
body.chrome_v2 .v5_tree_page_n {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 5px;
    background: var(--chip);
    color: var(--text-dim);
    font-size: 10.5px;
    font-weight: 600;
}

/* rights — deux colonnes de lignes, un bouton « Droits » par ligne. */
body.chrome_v2 .v5_rights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
body.chrome_v2 .v5_rights_col { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
body.chrome_v2 .v5_rights_tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
body.chrome_v2 .v5_rights_titre { font-size: 15px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_rights_n { font-size: 11.5px; color: var(--text-dim); }
body.chrome_v2 .v5_rights_ligne {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--line-soft);
    transition: background .14s var(--ease);
}
body.chrome_v2 .v5_rights_ligne:hover { background: var(--surface2); }
body.chrome_v2 .v5_rights_lib { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.chrome_v2 .v5_rights_meta { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
body.chrome_v2 .v5_rights_btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    font: 600 11.5px var(--font);
    cursor: pointer;
    text-decoration: none;
    transition: border-color .16s var(--ease), color .16s var(--ease);
}
body.chrome_v2 .v5_rights_btn:hover { border-color: var(--accent); color: var(--accent); }

/* teams — une carte par personne et par équipe. */
body.chrome_v2 .v5_teams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.chrome_v2 .v5_team {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}
body.chrome_v2 .v5_team_tete { display: flex; align-items: center; gap: 10px; }
body.chrome_v2 .v5_team_nom { font-size: 15px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_team_equipe {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--chip);
    color: var(--text-mid);
    font-size: 11px;
    font-weight: 600;
}
body.chrome_v2 .v5_team_taches {
    display: inline-flex;
    align-items: center;
    height: 22px;
    margin-left: auto;
    padding: 0 9px;
    border-radius: 6px;
    background: var(--chip);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
body.chrome_v2 .v5_team_taches.is_on { background: var(--accent-soft); color: var(--accent-ink); }
body.chrome_v2 .v5_team_membres { display: flex; flex-wrap: wrap; gap: 8px; }
body.chrome_v2 .v5_membre {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 10px;
    background: var(--surface2);
}
body.chrome_v2 .v5_membre_av {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--c, var(--accent));
    color: var(--on-accent);
    font-size: 9.5px;
    font-weight: 600;
    object-fit: cover;
}
body.chrome_v2 .v5_membre_nom { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
body.chrome_v2 .v5_membre_role { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
body.chrome_v2 .v5_team_pied { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
body.chrome_v2 .v5_team_btn {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border-radius: 8px;
    background: var(--chip);
    color: var(--text-mid);
    font: 600 11.5px var(--font);
    cursor: pointer;
    text-decoration: none;
}
body.chrome_v2 .v5_team_btn:first-child { background: var(--accent-soft); color: var(--accent-ink); }

/* vault — les accès (identifiant, mot de passe masqué, copie). Le masquage visuel n'est
   PAS une protection : voir l'arbitrage A9, le comportement de la page ne change pas. */
body.chrome_v2 .v5_vault { display: flex; flex-direction: column; gap: 16px; }
body.chrome_v2 .v5_vault_bandeau {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid var(--violet);
    border-radius: 14px;
    background: var(--violet-soft);
    color: var(--text);
    font-size: 12.5px;
    line-height: 1.5;
}
body.chrome_v2 .v5_vault_bandeau > svg { flex: none; width: 16px; height: 16px; color: var(--violet); }
body.chrome_v2 .v5_vault_groupe { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
body.chrome_v2 .v5_vault_titre { padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_vault_ligne {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 230px 96px;
    column-gap: 14px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--line-soft);
}
body.chrome_v2 .v5_vault_nom { font-size: 13px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_vault_url { margin-top: 2px; font-size: 11px; color: var(--text-dim); }
body.chrome_v2 .v5_vault_login { font-size: 12.5px; color: var(--text-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.chrome_v2 .v5_vault_mdp {
    display: flex;
    align-items: center;
    gap: 9px;
    /* Maquette : `height: 32px` + filet de 1 en boîte de CONTENU = 34 RENDUS (le kit est en
       boîte de bordure : on pose la boîte rendue). */
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface2);
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
}
body.chrome_v2 .v5_vault_mdp.is_masque { letter-spacing: .12em; }
body.chrome_v2 .v5_vault_mdp > svg { flex: none; width: 14px; height: 14px; color: var(--text-dim); }
body.chrome_v2 .v5_vault_copier {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 11px;
    border: 0;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font: 600 11.5px var(--font);
    cursor: pointer;
}

/* editor — deux panneaux : texte riche et HTML généré. */
body.chrome_v2 .v5_editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
body.chrome_v2 .v5_editor_panneau { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
body.chrome_v2 .v5_editor_barre { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
body.chrome_v2 .v5_editor_titre { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text); }
body.chrome_v2 .v5_editor_outil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 7px;
    background: var(--chip);
    color: var(--text-mid);
    font: 700 11.5px var(--font);
    cursor: pointer;
}
body.chrome_v2 .v5_editor_copier {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font: 600 11.5px var(--font);
    cursor: pointer;
}
body.chrome_v2 .v5_editor_zone { flex: 1; min-height: 320px; padding: 16px; font-size: 13px; line-height: 1.65; color: var(--text); }
body.chrome_v2 .v5_editor_sortie {
    flex: 1;
    padding: 16px;
    font: 400 12px/1.65 ui-monospace, Menlo, monospace;
    color: var(--text-mid);
    white-space: pre-wrap;
    word-break: break-word;
}