/* ============================================================================
   ============================================================================
   LES PLATEFORMES — panneaux latéraux de `mPlateform` (charte V5)

   Tout le CRUD de la Station passe par ces panneaux : `Plateform.js` les
   accroche à `document.body` (`#plateformList > .plateform > .content`), l'en-
   tête vient de `include-header-plateform.php`, le contenu de chaque
   `plateform-*.php`. Une centaine de fichiers, un seul habillage — ici.

   LA RÉFÉRENCE EST LE TIROIR DE LA MAQUETTE 05 (fiche d'un mot clé), le seul
   panneau que le handoff dessine : feuille pleine hauteur collée au bord
   droit, fond `--bg`, en-tête de 73 (croix 32 r10 sur `--chip`, filet 1×24,
   titre 20 / 600), voile sombre sans flou.

   HISTORIQUE : cet habillage vivait dans `pages/projet-v2-zrank.css`, scopé sous
   `.pz2_host` — une classe que seul le rapport de positions pose sur le <body>.
   Résultat : la même fiche mot clé ouverte depuis l'audit sémantique ou zRank
   Page 1 retombait sur la V4 (bandeau clair, rouge/orange/vert littéraux), et
   tous les autres panneaux de la Station gardaient leur croix de 32 px dans un
   carré de 64. La feuille est maintenant chargée par `template.php` pour toute
   la charte (`$designV5`, iso 1) et scopée `body.chrome_v2`, comme le kit.

   Les espaces client / partner / hub n'ont pas `chrome_v2` : leurs panneaux
   restent tels quels.

   CE QU'UN SKIN NE PEUT PAS FAIRE, et qu'on n'essaie donc pas : déplacer un
   élément d'un endroit du DOM à un autre.
   ============================================================================
   ============================================================================ */

/* ============================================================
   LES JETONS, REDÉCLARÉS ICI

   `projet-v2.css` les pose sur `.pv2`, c'est-à-dire sur le conteneur de la PAGE.
   Le panneau est accroché à `document.body` : il n'est pas un descendant de
   `.pv2`, donc aucune de ces variables ne lui parvient. Sans ce bloc, tous les
   `var(--pv2-…)` qui suivent sont vides — ce qui se voit à l'écran et ne se
   voit PAS en lisant la feuille. Posés sur `#plateformList` et non sur le
   <body> : aucune page ne les reçoit par ricochet.
   ============================================================ */
body.chrome_v2 #plateformList {
    --pv2-font: var(--font);
    --pv2-ink: var(--text);
    --pv2-ink-strong: var(--accent);
    --pv2-grey: var(--text-mid);
    --pv2-bg: var(--surface2);
    --pv2-card: var(--surface);
    --pv2-line: var(--line-soft);
    --pv2-sep: var(--line);
    --pv2-good: var(--aqua-ink);
    --pv2-bad: var(--neutral-ink);
    --pv2-radius: 14px;
}

/* ============================================================
   LA COQUE — voile, feuille, en-tête (maquette 05, tous les panneaux)

   LE CHEMIN COMPLET EST OBLIGATOIRE : `plateform.css` écrit tout en
   `#plateformList > .plateform > .content > …` (un identifiant, trois
   classes). Un sélecteur plus court perd, et perd SILENCIEUSEMENT — la police
   changeait, le fond non.
   ============================================================ */

/* Le voile : sombre, sans flou (le flou de 5 px de la V4 brouillait la page
   au point qu'on ne savait plus d'où le panneau était parti). */
body.chrome_v2 #plateformList > .plateform > .background {
    background: rgba(6, 10, 27, .55);
    backdrop-filter: none;
}

/* La feuille : pleine hauteur, collée au bord droit — pas une carte.
   v5-components (§ 6) lui donne un filet et un rayon de carte, faits pour
   `.popup` : on les retire ici.

   LARGEUR : DEUX TIERS DE L'ÉCRAN, pour tous les panneaux (demande du
   2026-10-08 : à 80 % — et la fiche mot clé à 100 % moins 80 px — le panneau
   couvrait presque toute la page). `mPlateform` pose 80 % en ligne, d'où le
   `!important`. Plancher de 760 px (ou toute la fenêtre si elle est plus
   étroite) pour qu'un formulaire reste lisible sur un petit écran. Le décalage
   des panneaux empilés (10 %, 20 %) passe par `right` et n'est pas touché. */
body.chrome_v2 #plateformList > .plateform > .content {
    width: max(66.667%, min(760px, 100%)) !important;
    background: var(--bg);
    border: 0;
    border-radius: 0;
    box-shadow: -14px 0 44px rgba(6, 10, 27, .5);
    color: var(--text);
}

/* En-tête de 73 (18 + 36 + 18 + filet) : croix 32 r10 sur --chip, filet
   vertical 1×24, titre 20 / 600, puis ce que le panneau pose à droite. */
body.chrome_v2 #plateformList > .plateform > .content > .header {
    box-sizing: border-box;
    height: 73px;
    padding: 0 34px;
    gap: 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
body.chrome_v2 #plateformList > .plateform > .content > .header > .left {
    gap: 18px;
    min-width: 0;
}
body.chrome_v2 #plateformList > .plateform > .content > .header > .left > .close_plateform {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: var(--chip);
    color: var(--text-mid);
    transition: background-color .15s var(--ease), color .15s var(--ease);
}
body.chrome_v2 #plateformList > .plateform > .content > .header > .left > .close_plateform:hover {
    background: var(--accent-soft);
    color: var(--accent-ink);
}
/* La maquette pose un « × » de texte 15 / 400 en --text-mid ; le <i class="fa-times">
   de l'en-tête partagé est repeint ici : glyphe texte à la place de la police
   d'icônes, et encre héritée du conteneur (sans quoi `common.css * { color }` la
   garde blanche / marine, y compris au survol). */
body.chrome_v2 #plateformList > .plateform > .content > .header > .left > .close_plateform > i {
    color: inherit;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
}
body.chrome_v2 #plateformList > .plateform > .content > .header > .left > .close_plateform > i::before {
    content: "\00d7";
    font-family: var(--font);
    font-weight: 400;
}
body.chrome_v2 #plateformList > .plateform > .content > .header > .left > .close_plateform::after {
    content: "";
    position: absolute;
    top: 4px;
    left: calc(100% + 18px);
    width: 1px;
    height: 24px;
    background: var(--line);
}
body.chrome_v2 #plateformList > .plateform > .content > .header > .left > h1 {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    margin: 0 0 0 19px;
    padding: 0;
    font-family: var(--font);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -.01em;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.chrome_v2 #plateformList > .plateform > .content > .header > .right {
    gap: 18px;
    padding: 0;
}

/* Le contenu : le fond de page de la charte, sur lequel les cartes `--surface`
   se détachent. La gouttière latérale passe des 20 % de la V4 (pensés pour une
   feuille de 80 % de l'écran) à celle de l'en-tête, 34 px : dans une feuille
   plafonnée, 20 % de chaque côté écrasaient les formulaires. La carte
   `.section` garde sa largeur de lecture (860 au plus, centrée). */
body.chrome_v2 #plateformList > .plateform > .content > .plateform_content,
body.chrome_v2 #plateformList > .plateform > .content > .plateform_content.little_border {
    box-sizing: border-box;
    height: calc(100vh - 73px);
    padding: 28px 34px 56px;
    background: var(--bg);
}
body.chrome_v2 .plateform_content {
    font-family: var(--font);
    color: var(--text);
}
body.chrome_v2 .plateform_content *:not(i) { font-family: var(--font); }
/* Les icônes de la fiche (lien externe, bouton) prennent l'encre de leur conteneur. PAS sur tous
   les panneaux : à (0,2,2) la règle battrait les couleurs de statut que leurs <style> posent. */
body.chrome_v2 .keyword_details i { color: inherit; }
body.chrome_v2 .plateform_content h1,
body.chrome_v2 .plateform_content h2,
body.chrome_v2 .plateform_content h3,
body.chrome_v2 .plateform_content h4,
body.chrome_v2 .plateform_content h5 {
    font-family: var(--font);
    color: var(--text);
    letter-spacing: -.01em;
}

/* ============================================================
   COULEURS DES GRAPHES

   Highcharts 13 n'est pas en « styled mode » ici, mais il expose sa palette par
   défaut en VARIABLES CSS (`--highcharts-color-0`…). Les deux graphes de la
   fiche ne fixent aucune couleur dans leurs options : ils prennent donc celle de
   la variable, et il suffit de la redéfinir sur un ancêtre. C'est ce qui permet
   de retinter la courbe et les colonnes sans toucher au PHP — vérifié à l'écran.
   ============================================================ */
body.chrome_v2 .plateform_content {
    --highcharts-color-0: var(--serie-1);
    --highcharts-color-1: var(--serie-8);
    --highcharts-color-2: var(--serie-2);
}

/* ============================================================================
   FICHE D'UN MOT CLÉ
   ============================================================================ */

body.chrome_v2 .keyword_details { padding: 22px !important; }

/* Les deux colonnes : le visuel large à gauche, la lecture chiffrée à droite —
   la géométrie d'origine, qui est bonne. Seules l'aération et la séparation
   changent. */
body.chrome_v2 .keyword_details > .content_all {
    gap: 22px;
    align-items: flex-start;
}
/* `flex: 1 1 0` et non `auto` : la base d'un élément flexible en `auto` est la
   largeur de son CONTENU. Ici le contenu de droite est une liste d'URL de 90
   caractères — en base auto, elle réclamait toute la place et écrasait la colonne
   des graphes à une trentaine de pixels. Vu à l'écran. La proportion est donc
   imposée, et les deux colonnes peuvent rétrécir (`min-width: 0`, sans quoi un
   élément flexible refuse de passer sous la largeur de son contenu). */
body.chrome_v2 .keyword_details > .content_all > .left { flex: 1 1 0; min-width: 0; }
body.chrome_v2 .keyword_details > .content_all > .right {
    flex: 0 0 34%;
    min-width: 320px;
    max-width: 520px;
}
body.chrome_v2 .keyword_details > .content_all > .right > * { min-width: 0; }

/* Chaque bloc devient une carte de la charte. `.item.statistics` porte un
   `max-height: 200px` en style en ligne qui tronquait la liste d'URL dès qu'il y
   en avait quatre : on le relève et on lui donne son propre défilement, ce qui
   rend atteignable ce qui était simplement coupé. */
body.chrome_v2 .keyword_details .item.statistics,
body.chrome_v2 .keyword_details > .content_all > .right > .statistics {
    background: var(--pv2-card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 24px;
    margin: 0 0 20px;
    box-sizing: border-box;
}
body.chrome_v2 .keyword_details .item.statistics {
    /* La maquette déroule toutes les URL dans la carte, sans défilement interne : le plafond
       en ligne (200 px) et celui d'avant (260 px) coupaient la quatrième. */
    max-height: none !important;
    /* `max-width: 100%` et surtout PAS `none` : le style en ligne pose 800 px, ce
       qui est plus large que la colonne. En le levant tout à fait, la carte se
       dimensionnait sur ses URL de 90 caractères. */
    max-width: 100% !important;
    overflow: visible;
}
body.chrome_v2 .keyword_details > .content_all > .right > .statistics {
    width: 100% !important;
    margin-top: 0 !important;
}

/* Titres de bloc — même échelle que les sections de la page. */
body.chrome_v2 .keyword_details h2,
body.chrome_v2 .keyword_details h3 {
    margin: 0 0 14px !important;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: normal;
}
body.chrome_v2 .keyword_details h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
/* Statistiques : le titre à gauche, la note « Métriques du mot clé … » à droite, alignée sur la ligne
   de base (maquette 05). */
body.chrome_v2 .keyword_details .kd_stats_h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
body.chrome_v2 .keyword_details .kd_stats_h > h2 { margin: 0 !important; }
body.chrome_v2 .keyword_details .kd_stats_note {
    font-size: 11.5px;
    color: var(--text-dim);
    text-align: right;
}

/* Le bouton « Voir l'historique complet » : une action secondaire, donc claire.
   Il était en aplat bleu vif, aussi lourd que le titre à côté duquel il se pose. */
body.chrome_v2 .keyword_details .btn.btn-icon {
    height: 30px;
    /* La maquette n'a que le titre dans l'en-tête (23 de haut) : le bouton, plus haut de 7, déborde de
       3,5 en haut et en bas au lieu d'étirer la ligne — la première URL reste à y = 162. */
    margin: -3.5px 0;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 15px;
    background: var(--pv2-bg);
    color: var(--pv2-ink-strong) !important;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
body.chrome_v2 .keyword_details .btn.btn-icon * { color: inherit !important; }
body.chrome_v2 .keyword_details .btn.btn-icon:hover { background: var(--surface2); }

/* ---------- Les URL positionnées ----------
   C'était une suite de liens bruts et de sous-lignes grises, sans rien qui sépare
   une URL de la suivante. Chacune devient une entrée. */
body.chrome_v2 .keyword_details .kd_urls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.chrome_v2 .keyword_details .url_wrapper { padding: 0; border: 0; }
/* L'URL (12,5 / 400, coupée où il faut), puis l'icône qui l'ouvre dans un nouvel onglet, puis la
   période en italique (maquette 05). Celle d'aujourd'hui est en --accent, les anciennes en retrait :
   la teinte seule la désigne, sans filet ni graisse. */
body.chrome_v2 .keyword_details .url_ligne { display: flex; align-items: flex-start; gap: 7px; }
body.chrome_v2 .keyword_details .url_wrapper .postion_url,
body.chrome_v2 .keyword_details .url_wrapper .url {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-all;
}
body.chrome_v2 .keyword_details .url_wrapper .postion_url { color: var(--accent-ink); }
body.chrome_v2 .keyword_details .url_wrapper .url { color: var(--text-dim); }
body.chrome_v2 .keyword_details .url_wrapper .url_ext {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: -1px;
    border-radius: 6px;
    color: var(--text-dim);
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 .keyword_details .url_wrapper .url_ext:hover { background: var(--accent-soft); color: var(--accent-ink); }
/* `common.css * { color }` pose l'encre sur le <svg> lui-même : sans `inherit`, le tracé
   (`currentColor`) reste blanc / marine au repos comme au survol. */
body.chrome_v2 .keyword_details .url_wrapper .url_ext svg { width: 11px; height: 11px; color: inherit; }
body.chrome_v2 .keyword_details .url_wrapper .url_ext svg * { color: inherit; }
body.chrome_v2 .keyword_details .url_wrapper .libelle,
body.chrome_v2 .keyword_details .url_wrapper .old_libelle {
    margin-top: 3px;
    font-size: 11.5px;
    font-style: italic;
    color: var(--text-dim);
}

/* ---------- Le tableau de statistiques ---------- */
body.chrome_v2 .keyword_details .table_stats { border-collapse: collapse; }
/* `common.css` filète le haut de chaque ligne de tableau : la 1re ligne ne porte aucun filet sous
   l'en-tête « Statistiques » (maquette 05). */
body.chrome_v2 .keyword_details .table_stats tbody tr { border-top: 0; }
body.chrome_v2 .keyword_details .table_stats tr > * {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: transparent;
    vertical-align: middle;
}
/* Libellé 12,5 / 400 en casse normale (--text-mid), valeur 14 / 600 à droite : une ligne de la
   maquette, sans colonne de libellés teintée ni capitales. */
body.chrome_v2 .keyword_details .table_stats tr > *:first-child {
    width: auto;
    text-align: left;
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: normal;
    text-transform: none;
    color: var(--text-mid);
}
/* Les valeurs forment une colonne de nombres : chasse tabulaire, elles s'alignent. */
body.chrome_v2 .keyword_details .table_stats tr > *:last-child {
    width: auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.chrome_v2 .keyword_details .table_stats td > span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
/* Le niveau de concurrence ferme la carte : pas de filet dessous, 16 px d'air au-dessus. */
body.chrome_v2 .keyword_details .table_stats tr.kd_conc > * { padding: 16px 0 0; border-bottom: 0; }

/* ---------- Le niveau de concurrence ----------
   Une pastille ronde de 60 px, filet de 2 px teinté par niveau (violet, accent, aqua, ou le filet
   neutre pour « aucun »), libellé 11 / 700 interlettré .04em : la forme de la maquette 05, avec les
   jetons de la charte à la place des trois rouge / orange / vert littéraux d'avant. Le gabarit vit
   dans le style du fragment (`--col` bordure, `--fg` encre, posés par le PHP). */

/* ---------- Le gabarit de la fiche (maquette 05) ----------
   La coque (voile, feuille, en-tête, largeur des deux tiers) est celle de tous les panneaux, plus
   haut. La maquette 05 dessinait la fiche sur tout le contenu moins 80 px de voile — à l'usage elle
   masquait la page entière (retour du 2026-10-08) : elle suit maintenant la règle commune. Les trois
   fiches portent `.keyword_details` : zRank (rapport de positions), zRank Page 1, audit sémantique. */
body.chrome_v2 #plateformList > .plateform:has(.keyword_details) > .content > .plateform_content.keyword_details {
    padding: 26px 34px 56px !important;
}
/* Deux colonnes 1,35 fr / 1 fr à 20 px d'écart, collées en haut de la grille : les marges propres du
   fragment (24 px de rembourrage haut et latéral, 16 / 32 px à droite) s'y ajoutaient. */
body.chrome_v2 .keyword_details.plateform_content > .content_all {
    display: flex;
    height: auto;
    padding: 0;
    gap: 20px;
    background: transparent;
}
body.chrome_v2 .keyword_details > .content_all > .left { flex: 1.35 1 0; min-width: 0; }
body.chrome_v2 .keyword_details.plateform_content > .content_all > .right {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    height: auto;
    padding: 0;
}

/* Fiche CONCURRENT : pas de pilule de période (36) — l'en-tête est celui de la croix de 32 :
   18 + 32 + 18 + filet = 69 (maquette 05). Même contenu `.keyword_details`, d'où l'exception. */
body.chrome_v2 #plateformList > .plateform:has(.cc_kpis) > .content > .header {
    height: 69px;
}
body.chrome_v2 .kd_moteur {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 26px;
    padding: 0 11px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: normal;
    white-space: nowrap;
}
body.chrome_v2 .kd_periode {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-mid);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
body.chrome_v2 .kd_zooms {
    display: flex;
    gap: 3px;
    padding: 3px;
    border-radius: 9px;
    background: var(--chip);
}
body.chrome_v2 .kd_zoom {
    height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-mid);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 .kd_zoom.is_on { background: var(--surface); color: var(--text); }


/* ============================================================================
   LES FORMULAIRES DES PANNEAUX

   74 panneaux rangent leurs champs dans un `.section` posé directement dans
   `.plateform_content` : il devient une carte de la charte (fond `--surface`,
   filet, rayon de carte) sur le fond de page du panneau. Les règles à
   identifiant qui suivent (`#keywords`, `#reload_providers`, les moteurs, la
   verticale, le quota) ne concernent que « Suivre des mots-clés ».
   ============================================================================ */

body.chrome_v2 .plateform_content > .section,
body.chrome_v2 .plateform_content > form.section {
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    padding: 32px 38px 26px;
    margin: 22px auto;
    /* Un formulaire de saisie ne gagne rien à faire 1 500 px de large : la ligne
       de lecture d'un libellé et de son champ se casse. */
    max-width: 860px;
}

/* Les libellés prennent la forme de ceux de la barre d'outils : capitales
   espacées, gris de la charte. Ils cessent d'avoir le même poids que les valeurs
   qu'ils annoncent. Le `<label>` est posé soit dans le `.section`, soit dans le
   `<form>` qu'il contient (les deux formes coexistent). Un libellé qui ENVELOPPE
   sa case à cocher nomme une option, pas un champ : il garde la casse normale. */
body.chrome_v2 .plateform_content .section > label:not(:has(input)),
body.chrome_v2 .plateform_content .section > form > label:not(:has(input)),
body.chrome_v2 .plateform_content #reload_providers label {
    display: block;
    margin: 22px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    line-height: normal;
    text-transform: uppercase;
    color: var(--text-mid);
}
body.chrome_v2 .plateform_content .section > label:first-of-type,
body.chrome_v2 .plateform_content .section > form > label:first-of-type { margin-top: 0; }

/* ---------- La liste des mots clés sélectionnés ----------
   Sept panneaux (arrêt du suivi, catégorie, groupe, intention, suppression…)
   récapitulent la sélection dans le même `<table id="keywords_to_follow">`, que
   leur style en ligne transforme en flex / grille. Elle devient un champ de la
   charte en lecture seule : un intitulé de champ, puis une liste filetée dans un
   cadre `--surface2`. */
body.chrome_v2 .plateform_content #keywords_to_follow {
    width: 100%;
    margin: 22px 0 0;
    border: 0;
    background: transparent;
}
body.chrome_v2 .plateform_content #keywords_to_follow > thead > tr { display: flex; }
body.chrome_v2 .plateform_content #keywords_to_follow > thead > tr > th {
    padding: 0 0 8px;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-mid);
}
body.chrome_v2 .plateform_content #keywords_to_follow > thead > tr > th:empty { display: none; }
body.chrome_v2 .plateform_content #keywords_to_follow > tbody {
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--surface2);
}
body.chrome_v2 .plateform_content #keywords_to_follow > tbody > tr {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--line-soft);
    background: transparent;
}
body.chrome_v2 .plateform_content #keywords_to_follow > tbody > tr:first-child { border-top: 0; }
body.chrome_v2 .plateform_content #keywords_to_follow > tbody > tr > td {
    padding: 10px 13px;
    border: 0;
    background: transparent;
    font-size: 13px;
    color: var(--text);
}
body.chrome_v2 .plateform_content #keywords_to_follow .suppr {
    font-size: 16px;
    color: var(--text-dim);
}
body.chrome_v2 .plateform_content #keywords_to_follow .suppr:hover { color: var(--neutral-ink); }
/* Un bouton posé à côté d'un menu déroulant (« Ajouter une catégorie / un groupe / une
   intention ») : action secondaire, donc discrète (`--accent-soft`), et à la hauteur du champ
   (38) au lieu des 30 d'un bouton de barre d'outils, avec un écart au lieu d'être collé. */
body.chrome_v2 .plateform_content .section .flex:has(> .cl.dropdown) {
    align-items: center;
    gap: 10px;
}
body.chrome_v2 .plateform_content .section .flex:has(> .cl.dropdown) > .btn {
    flex: none;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--radius-field);
    background: var(--accent-soft);
    color: var(--accent-ink) !important;
    font-size: 13px;
}
body.chrome_v2 .plateform_content .section .flex:has(> .cl.dropdown) > .btn:hover {
    box-shadow: none;
    transform: none;
    background: var(--accent);
    color: var(--on-accent) !important;
}

/* Le bouton d'envoi s'aligne à droite sous le formulaire, à 22 px. */
body.chrome_v2 .plateform_content .section btn-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}
body.chrome_v2 .plateform_content #reload_providers h5 {
    margin: 26px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--pv2-line);
    font-size: 15px;
    font-weight: 700;
}

/* Le champ des mots clés est le cœur du formulaire : c'est le seul qui mérite de
   la hauteur. */
body.chrome_v2 .plateform_content #keywords {
    width: 100%;
    /* Hauteur IMPOSÉE et non plancher : l'attribut `rows` du champ lui donnait
       390 px, ce qui repoussait les moteurs et tout le ciblage sous la ligne de
       flottaison. 220 px tiennent une quinzaine de mots clés, et le champ reste
       redimensionnable pour les collages massifs. */
    height: 220px;
    min-height: 120px;
    padding: 14px 16px;
    border: 1px solid var(--pv2-sep);
    border-radius: 10px;
    background: var(--pv2-card);
    font-family: var(--pv2-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--pv2-ink);
    resize: vertical;
    box-sizing: border-box;
}
body.chrome_v2 .plateform_content #keywords:focus {
    outline: none;
    border-color: var(--pv2-ink-strong);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .10);
}
body.chrome_v2 .plateform_content #keywords::placeholder { color: var(--pv2-grey); }

body.chrome_v2 .plateform_content .cl.dropdown {
    border: 1px solid var(--pv2-sep);
    border-radius: 10px;
    background: var(--pv2-card);
}
body.chrome_v2 .plateform_content .cl.dropdown .placeholder,
body.chrome_v2 .plateform_content .cl.dropdown .option { font-size: 13.5px; }

/* ---------- Les moteurs ----------
   C'était une rangée de dix logos nus à 50 % d'opacité, sans cadre ni libellé :
   le seul indice de sélection était l'opacité, que personne ne lit. Chaque
   moteur devient une cible cadrée, et le moteur choisi porte un anneau. */
body.chrome_v2 .plateform_content .flex.providers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start !important;
    margin: 4px 0 0;
}
body.chrome_v2 .plateform_content .flex.providers > .item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--pv2-line);
    border-radius: 10px;
    background: var(--pv2-card);
    opacity: 1;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.chrome_v2 .plateform_content .flex.providers > .item > img {
    max-width: 26px;
    max-height: 26px;
    /* La désaturation dit « non sélectionné » beaucoup mieux qu'une opacité, et
       elle garde le logo net. */
    filter: grayscale(1);
    opacity: .55;
    transition: filter .15s ease, opacity .15s ease;
    pointer-events: none;
}
body.chrome_v2 .plateform_content .flex.providers > .item:hover { border-color: var(--pv2-sep); transform: translateY(-1px); }
body.chrome_v2 .plateform_content .flex.providers > .item.active {
    border-color: var(--pv2-ink-strong);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .14);
}
body.chrome_v2 .plateform_content .flex.providers > .item.active > img { filter: none; opacity: 1; }

/* ---------- La verticale Google ---------- */
body.chrome_v2 .plateform_content .flex.zrank-vertical-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start !important;
}
body.chrome_v2 .plateform_content .vertical-option {
    height: 34px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 17px;
    background: var(--pv2-bg);
    color: var(--pv2-ink);
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
body.chrome_v2 .plateform_content .vertical-option:hover { background: var(--surface2); }
/* Le sélecteur est volontairement long, et le fond marqué `!important` : la
   verticale active est peinte en #1A81FF par une règle qui gagnait sur trois
   classes. Mesuré à l'écran, pas supposé. */
body.chrome_v2 .plateform_content .zrank-vertical-filter > .vertical-option.active {
    background: var(--pv2-ink-strong) !important;
    color: var(--on-accent);
}
body.chrome_v2 .plateform_content .zrank-vertical-filter > .vertical-option.active * { color: inherit !important; }

/* Une case à cocher n'est pas un intitulé de section : le libellé « Sans
   localisation définie » prenait les capitales espacées des titres de champ et
   se lisait comme l'annonce d'un bloc, alors qu'il nomme une option. */
body.chrome_v2 .plateform_content #reload_providers label:has(input) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pv2-ink);
    cursor: pointer;
}

/* Le couple pays + code postal de la localisation, dans la même forme que les
   autres champs du formulaire. */
body.chrome_v2 .plateform_content #reload_providers select,
body.chrome_v2 .plateform_content #reload_providers input[type="text"] {
    height: 38px;
    border: 1px solid var(--pv2-sep);
    border-radius: 10px !important;
    background: var(--pv2-card);
    font-family: var(--pv2-font);
    font-size: 13.5px;
    color: var(--pv2-ink);
}

/* ---------- Le quota ----------
   Un aplat teinté à bordure gauche épaisse. Il devient une carte comme les
   autres — l'alerte reste dans la couleur du texte et du filet, pas dans un fond
   entier. */
body.chrome_v2 .plateform_content .zrank-quota-widget {
    max-width: 860px;
    margin: 22px auto 0 !important;
    padding: 18px 22px !important;
    border-left: 0 !important;
    border: 1px solid var(--pv2-line) !important;
    border-radius: var(--pv2-radius) !important;
    background: var(--pv2-card) !important;
    font-size: 13px;
}
body.chrome_v2 .plateform_content .zrank-quota-widget strong { color: var(--pv2-ink); }

/* ---------- Le pied du formulaire ----------
   Le compteur « N suivi de mots-clés » est le seul garde-fou avant l'envoi : il
   annonce le nombre de RELEVÉS que la sélection va créer (mots × versions ×
   supports × localisations), pas le nombre de mots clés saisis. Il mérite d'être
   lisible et posé à côté du bouton, pas au ras du texte. */
body.chrome_v2 .plateform_content #numbers_of_keywords {
    align-items: center !important;
    font-size: 13px !important;
    color: var(--pv2-grey) !important;
}
body.chrome_v2 .plateform_content #value_nb {
    font-size: 22px !important;
    font-weight: 700;
    color: var(--pv2-ink-strong) !important;
    padding-right: 8px;
}
/* Le pied du formulaire « Suivre des mots-clés » (le seul `.section` qui porte le compteur) : filet
   au-dessus, compteur et bouton sur une ligne. Scopé par `:has()` — le dernier `div` d'un autre
   formulaire peut être un champ. */
body.chrome_v2 .plateform_content .section:has(#numbers_of_keywords) > div:last-child {
    align-items: center;
    gap: 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--pv2-line);
}

/* ============================================================
   LES BOUTONS D'ENVOI DES PANNEAUX

   68 panneaux posent `.btn.btn-submit` (« Enregistrer », « Ajouter »…). Le kit
   lui donne la taille d'un bouton de barre d'outils (30 px) ; en pied de
   formulaire c'est le bouton principal de la charte : 38 / r11 / 13-600
   (`.btn.big`, maquette 05). `--on-accent` bascule l'encre selon le thème.
   Les `!important` répondent à ceux de components/buttons.css (16 / 400 / 8 px).
   ============================================================ */
body.chrome_v2 .plateform_content .btn.btn-submit,
body.chrome_v2 .plateform_content .btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 20px !important;
    border: 0;
    border-radius: 11px;
    background: var(--accent);
    color: var(--on-accent) !important;
    font-family: var(--font);
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
body.chrome_v2 .plateform_content .btn.btn-submit *,
body.chrome_v2 .plateform_content .btn.btn-primary * { color: inherit !important; }

/* Le cas « pas d'audit sémantique » : un titre nu et un bouton. */
body.chrome_v2 .plateform_content .section > div > h3 {
    font-size: 17px;
    font-weight: 700;
}

/* ============================================================
   « INFORMATIONS SUR LE SITE » (search-infos-site)

   Ses grilles (`2fr 1fr`, `1fr 1fr 1fr`, platform/search-infos-project.css)
   n'ont pas de `minmax(0, …)` : une URL de back-office sans espace impose sa
   largeur à la colonne, et dans une feuille plafonnée à 1 080 la troisième
   colonne sortait du panneau. Les colonnes peuvent rétrécir, les valeurs se
   coupent.
   ============================================================ */
body.chrome_v2 #platform_site_infos .block_group.informations {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
body.chrome_v2 #platform_site_infos .block_group.informations_world {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.chrome_v2 #platform_site_infos .block,
body.chrome_v2 #platform_site_infos .block .box > .row { min-width: 0; }
body.chrome_v2 #platform_site_infos .block .box .value,
body.chrome_v2 #platform_site_infos .block .box a {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ============================================================
   ÉTROIT — la fiche passe en une colonne plutôt que d'écraser son graphe.

   Mesuré sur la FICHE et non sur la fenêtre : elle fait deux tiers de l'écran,
   donc 960 px dans une fenêtre de 1 440 — trop peu pour graphe + SERP à côté
   des statistiques, alors qu'une media query sur la fenêtre la laissait en deux
   colonnes. `container-type` sur le contenu du panneau, requête sous 1 100 px.
   ============================================================ */
body.chrome_v2 .keyword_details.plateform_content { container-type: inline-size; }
@container (max-width: 1100px) {
    body.chrome_v2 .keyword_details > .content_all { flex-direction: column; align-items: stretch; }
    body.chrome_v2 .keyword_details > .content_all > .left,
    body.chrome_v2 .keyword_details > .content_all > .right { width: 100% !important; flex: 1 1 auto; }
}

/* ── Déplacé de include/css/v5m/overview_overview_task_manager.css (feuille de la seule page
   /task-manager) : le tiroir s'ouvre aussi depuis les pages projet depuis le 2026-10-08. ── */
/* ======================================================================================
   LE TIROIR « CRÉER UNE MISSION » (include/php/plateform-ajout-mission-tiroir.php)

   Le cadre est celui de mPlateform (`#plateformList > .plateform > .content`) ; on le ramène à la maquette : 760 de large + le filet gauche
   de 1 (boîte de 761), fond `--bg`, filet gauche, voile marine flouté, et le MOUVEMENT de la maquette (famille A : `zDrawer .24s
   cubic-bezier(.2,.8,.25,1)` pour le panneau = `translateX(40px)` → rien ET opacité 0 → 1, `zFade .18s ease-out` pour le voile) au lieu
   du glissement de .3 s de mPlateform. Plateform.js écrit en ligne `right: 0%` à l'ouverture et `right: -100%` à la fermeture : sur 100 %
   de la largeur de l'écran, c'est un glissement de 1 680 px. Le panneau reste donc à sa place (`right: 0`) et ce sont les keyframes de la
   maquette qui l'amènent — à l'ouverture (il apparaît quand son HTML arrive, juste avant `show()`) comme à la fermeture (le même mouvement
   à l'envers, repéré par le `right: -100%` de `hide()` ; Plateform.js retire le panneau .3 s plus tard). Scopé par `:has(.v5_tiroir)` :
   les autres plateformes de la Station ne bougent pas.
   ====================================================================================== */
body.chrome_v2 #plateformList > .plateform:has(.v5_tiroir) > .background {
    background-color: color-mix(in srgb, var(--rail) 55%, transparent);
    backdrop-filter: blur(3px);
    transition: opacity .18s ease-out;
}
body.chrome_v2 #plateformList > .plateform:has(.v5_tiroir) > .content {
    width: 761px !important;
    right: 0 !important;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 0;
    border-left: 1px solid var(--line);
    border-radius: 0;
    box-shadow: -18px 0 50px color-mix(in srgb, var(--rail) 40%, transparent);
    transition: none;
    animation: v5_tiroir_entree .24s cubic-bezier(.2, .8, .25, 1) both;
}
body.chrome_v2 #plateformList > .plateform:has(.v5_tiroir) > .content[style*="right: -100%"] {
    animation-name: v5_tiroir_sortie;
}
@keyframes v5_tiroir_entree { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v5_tiroir_sortie { from { transform: none; opacity: 1; } to { transform: translateX(40px); opacity: 0; } }

/* L'en-tête (760 × 134) : badge 23 (0 10, r6, 11 / 700, .06em), titre 24 / 600 (-.02em, interlignage normal), aide 12,5 à 4 du titre,
   bouton de fermeture de 36 + filet = 38. Le badge est posé 3 px sous le haut de la rangée : la ligne de la maquette (son badge est un
   `inline-flex` sur une ligne de 16 px) le descend de 3 ; sans eux l'en-tête ferait 131 et tout le corps du tiroir remonterait. */
body.chrome_v2 #plateformList > .plateform > .content > .v5_tiroir_tete {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    height: auto;
    padding: 22px 28px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
body.chrome_v2 #plateformList .v5_tiroir_titres { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
body.chrome_v2 #plateformList .v5_tiroir_badge {
    display: inline-flex;
    align-items: center;
    height: 23px;
    margin-top: 3px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 11px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
}
body.chrome_v2 #plateformList .v5_tiroir_titres h1 { margin: 10px 0 0; padding: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: normal; color: var(--text); }
body.chrome_v2 #plateformList .v5_tiroir_titres p { margin: 4px 0 0; font-size: 12.5px; line-height: normal; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_tiroir_fermer {
    box-sizing: content-box;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: transparent;
    color: var(--text-mid);
    cursor: pointer;
    transition: border-color .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_tiroir_fermer:hover { border-color: var(--accent); color: var(--accent); }

/* Les glyphes au trait (fermer, loupes, calendrier, corbeille) : `common.css` pose `color: var(--text)` sur TOUT élément, y compris les
   <path> — leur trait (`currentColor`) restait blanc au lieu de l'encre du bouton. Ils héritent. */
body.chrome_v2 #plateformList .v5_tiroir_tete :is(svg, svg *),
body.chrome_v2 #plateformList .v5_tiroir :is(svg, svg *),
body.chrome_v2 #plateformList .v5_tiroir_pied :is(svg, svg *) { color: inherit; }

/* Le corps défile entre l'en-tête et le pied. */
body.chrome_v2 #plateformList .plateform_content.v5_tiroir {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    padding: 22px 28px 28px;
    overflow-y: auto;
    background: var(--bg);
}
body.chrome_v2 #plateformList .v5_tiroir_form { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
/* Les cartes : écart 16 entre leurs blocs (14 pour l'attribution, 12 pour les budgets — la maquette). */
body.chrome_v2 #plateformList .v5_tiroir_carte {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}
body.chrome_v2 #plateformList .v5_tiroir_carte.v5_carte_attrib { gap: 14px; }
body.chrome_v2 #plateformList .v5_tiroir_carte.v5_carte_budgets { gap: 12px; }
body.chrome_v2 #plateformList .v5_tiroir_carte > h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
body.chrome_v2 #plateformList .v5_tiroir_ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.chrome_v2 #plateformList .v5_tiroir_ligne.v5_tiroir_ligne_seule { grid-template-columns: minmax(0, 1fr); }
body.chrome_v2 #plateformList .v5_champ_bloc { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* Les étiquettes : 11 / 600, .07em (0,77 px), capitales, interlignage normal ; le point d'accent (5 × 5, à 6 du texte) dit « obligatoire ». */
body.chrome_v2 #plateformList .v5_etiq {
    display: block;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
}
body.chrome_v2 #plateformList .v5_etiq em { font-size: inherit; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; color: inherit; }
body.chrome_v2 #plateformList .v5_etiq_req { display: flex; align-items: center; gap: 6px; }
body.chrome_v2 #plateformList .v5_etiq_req::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
}
/* La note sous un champ d'heures (« Saisie libre : 3,5 ou 3h30 » · « Soit 3 h 30 · 1 demi-journée ») : 11 `--text-dim`, à 6 du champ. */
body.chrome_v2 #plateformList .v5_aide { margin: -1px 0 0; font-size: 11px; line-height: normal; color: var(--text-dim); }

/* Les champs : 44 de haut, rayon 11, fond --surface2, filet --line (accent au focus). */
body.chrome_v2 #plateformList .v5_tiroir input[type="text"],
body.chrome_v2 #plateformList .v5_tiroir input[type="number"] {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface2);
    box-shadow: none;
    outline: none;
    font: 400 13.5px var(--font);
    color: var(--text);
    transition: border-color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_tiroir input[type="text"]:focus,
body.chrome_v2 #plateformList .v5_tiroir input[type="number"]:focus { border-color: var(--accent); }
/* Un champ NU, posé dans un conteneur qui porte lui-même le filet et le fond (heures, recherches) : v5-components.css §2
   peint filet, fond et encre de TOUS les champs en `!important` — sans `!important` ici le conteneur et le champ avaient
   chacun leur cadre (double cadre). */
body.chrome_v2 #plateformList .v5_tiroir input.v5_nu,
body.chrome_v2 #plateformList .v5_tiroir input.v5_nu:focus {
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background-color: transparent !important;
    box-shadow: none;
    outline: none;
}

/* Les heures vendues : un champ de 44 + le filet = 46 (r11, `--surface2`, filet `--line`), −/+ de 42 + le filet = 43 de large séparés par un
   filet `--line-soft`, la valeur en 15 / 700 et l'unité « h » (13 / 600 `--text-dim`). */
body.chrome_v2 #plateformList .v5_pas {
    box-sizing: content-box;
    display: flex;
    align-items: center;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface2);
    overflow: hidden;
    transition: border-color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_pas:focus-within { border-color: var(--accent); }
body.chrome_v2 #plateformList .v5_pas_b {
    box-sizing: content-box;
    flex: none;
    width: 42px;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-mid);
    font: 400 16px var(--font);
    cursor: pointer;
    transition: color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_pas_b:first-child { border-right: 1px solid var(--line-soft); }
body.chrome_v2 #plateformList .v5_pas_b:last-child { border-left: 1px solid var(--line-soft); }
body.chrome_v2 #plateformList .v5_pas_b:hover { color: var(--accent); }
body.chrome_v2 #plateformList .v5_pas_val { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
body.chrome_v2 #plateformList .v5_tiroir .v5_pas_val > input.v5_pas_champ {
    box-sizing: content-box;
    width: 70px;
    padding: 1px 2px;
    text-align: right;
    font: 700 15px var(--font);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
body.chrome_v2 #plateformList .v5_pas_unite { font: 600 13px var(--font); color: var(--text-dim); }

/* Les segmentés : écart 3, options SANS marge latérale (elles se partagent le groupe) ; Facturation sur toute la colonne (options de 30),
   Type de prestation de 320 + 2 × 3 de marge intérieure = 326 (options de 158,5 × 32 / 12,5). */
body.chrome_v2 #plateformList .v5_tiroir .v5_tiroir_seg { gap: 3px; }
body.chrome_v2 #plateformList .v5_tiroir .v5_tiroir_seg > button { flex: 1 1 0; padding: 0; justify-content: center; cursor: pointer; font-family: inherit; }
body.chrome_v2 #plateformList .v5_tiroir .v5_tiroir_seg_type { align-self: flex-start; width: 326px; max-width: 100%; }
body.chrome_v2 #plateformList .v5_tiroir .v5_tiroir_seg_type > button { height: 32px; font-size: 12.5px; }

/* L'intitulé : le champ (44, r11 — la règle générale des champs du tiroir) et sa liste de prestations (r13, ombre
   des menus, 280 de haut au plus, lignes de 8 / 10 en r9 — la maquette). */
body.chrome_v2 #plateformList .v5_sugg { position: relative; }
body.chrome_v2 #plateformList .v5_sugg_menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    box-sizing: content-box;
    max-height: 280px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
    animation: v5_tiroir_fondu .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_sugg_menu[hidden] { display: none; }
body.chrome_v2 #plateformList .v5_sugg_item {
    padding: 8px 10px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: normal;
    color: var(--text);
    cursor: pointer;
    transition: background .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_sugg_item[hidden] { display: none; }
body.chrome_v2 #plateformList .v5_sugg_item:hover,
body.chrome_v2 #plateformList .v5_sugg_item.is_cur { background: var(--surface2); }
body.chrome_v2 #plateformList .v5_sugg_item.is_on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
body.chrome_v2 #plateformList .v5_sugg_vide { padding: 14px 10px; font-size: 12px; text-align: center; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_sugg_vide[hidden] { display: none; }

/* La description : un cadre (r11, `--surface2`, filet `--line`) ; en haut la barre B I S H2 • 1. Lien (boutons de 26 de haut et de 26
   au moins de large + 2 × 7 de marge intérieure — 40 pour une lettre, pas de 44 —, r6, survol `--chip` / `--accent`) sur un filet
   `--line-soft` ; dessous la zone — 110 de zone de saisie + les 7 px que la maquette laisse sous son <textarea> (cadre de 160), 13 / 1,6. */
body.chrome_v2 #plateformList .v5_edit {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface2);
    overflow: hidden;
    transition: border-color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_edit:focus-within { border-color: var(--accent); }
body.chrome_v2 #plateformList .v5_edit_barre { display: flex; align-items: center; gap: 4px; padding: 7px 9px; border-bottom: 1px solid var(--line-soft); }
body.chrome_v2 #plateformList .v5_edit_o {
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    min-width: 26px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-mid);
    font: 700 11.5px var(--font);
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_edit_o > b,
body.chrome_v2 #plateformList .v5_edit_o > i,
body.chrome_v2 #plateformList .v5_edit_o > s { font-size: inherit; color: inherit; }
body.chrome_v2 #plateformList .v5_edit_o > b { font-weight: 700; }
/* Le « I » est droit, comme tous les outils de la barre (la maquette rend ses libellés en texte simple : B I S H2 • 1. Lien). */
body.chrome_v2 #plateformList .v5_edit_o > i { font-family: inherit; font-weight: 700; font-style: normal; }
/* Le « S » est une lettre simple, sans trait barré (le `<s>` du navigateur barre son contenu). */
body.chrome_v2 #plateformList .v5_edit_o > s { font-weight: 700; text-decoration: none; }
body.chrome_v2 #plateformList .v5_edit_o:hover,
body.chrome_v2 #plateformList .v5_edit_o.is_on { background: var(--chip); color: var(--accent); }
body.chrome_v2 #plateformList .v5_edit_zone {
    box-sizing: border-box;
    min-height: 117px;
    padding: 12px 14px;
    overflow: auto;
    resize: vertical;
    outline: none;
    font: 400 13px/1.6 var(--font);
    color: var(--text);
    overflow-wrap: anywhere;
}
body.chrome_v2 #plateformList .v5_edit_zone:empty::before { content: attr(data-placeholder); color: var(--text-dim); pointer-events: none; }
body.chrome_v2 #plateformList .v5_edit_zone > *,
body.chrome_v2 #plateformList .v5_edit_zone p,
body.chrome_v2 #plateformList .v5_edit_zone li,
body.chrome_v2 #plateformList .v5_edit_zone b,
body.chrome_v2 #plateformList .v5_edit_zone strong,
body.chrome_v2 #plateformList .v5_edit_zone i,
body.chrome_v2 #plateformList .v5_edit_zone em,
body.chrome_v2 #plateformList .v5_edit_zone s,
body.chrome_v2 #plateformList .v5_edit_zone strike { font-size: inherit; line-height: inherit; color: inherit; }
body.chrome_v2 #plateformList .v5_edit_zone p { margin: 0 0 .5em; }
body.chrome_v2 #plateformList .v5_edit_zone h2 { margin: .4em 0 .3em; font-size: 15px; font-weight: 600; line-height: 1.4; }
body.chrome_v2 #plateformList .v5_edit_zone ul,
body.chrome_v2 #plateformList .v5_edit_zone ol { margin: 0 0 .5em; padding-left: 1.4em; }
body.chrome_v2 #plateformList .v5_edit_zone ul { list-style: disc; }
body.chrome_v2 #plateformList .v5_edit_zone ol { list-style: decimal; }
body.chrome_v2 #plateformList .v5_edit_zone a { color: var(--accent-ink); text-decoration: underline; }
body.chrome_v2 #plateformList .v5_edit_zone > :last-child { margin-bottom: 0; }

/* Le projet : un champ-bouton, sa liste à recherche. */
body.chrome_v2 #plateformList .v5_combo { position: relative; }
body.chrome_v2 #plateformList .v5_combo_btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface2);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_combo.is_open .v5_combo_btn,
body.chrome_v2 #plateformList .v5_combo_btn:focus-visible { border-color: var(--accent); outline: none; }
body.chrome_v2 #plateformList .v5_combo_val { flex: 1 1 auto; display: flex; flex-direction: column; gap: 0; min-width: 0; }
/* La tuile d'initiale (une fois le projet choisi) : 24 × 24, r7, fond `--aqua-soft`, 10,5 / 700 — celle de la liste, en teinte aqua. Posée
   avant le libellé, 10 d'écart (le `gap` du bouton). L'encre est `--aqua-ink` : la teinte nue ne tient pas 4,5:1 sur son lavis en clair
   (v5-tokens.css : « dès qu'une teinte porte du TEXTE, c'est son -ink » ; en sombre les deux valent la même chose). */
body.chrome_v2 #plateformList .v5_combo_ini { display: none; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--aqua-soft); color: var(--aqua-ink); font-size: 10.5px; font-weight: 700; line-height: normal; }
body.chrome_v2 #plateformList .v5_combo.a_choisi .v5_combo_ini { display: inline-flex; }
/* Rien de choisi : « Choisir un projet » en 13 / 500 `--text-dim` ; une fois le projet choisi (`a_choisi`) : 600 `--text`. */
body.chrome_v2 #plateformList .v5_combo_t { font-size: 13px; font-weight: 500; line-height: normal; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.chrome_v2 #plateformList .v5_combo.a_choisi .v5_combo_t { font-weight: 600; color: var(--text); }
body.chrome_v2 #plateformList .v5_combo_s { font-size: 10.5px; line-height: normal; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le ▾ de la maquette : le glyphe de texte, 9 px `--text-dim`, qui se retourne ouvert (.18s). */
body.chrome_v2 #plateformList .v5_combo_btn .v5_chev { flex: none; font-size: 9px; line-height: normal; color: var(--text-dim); transition: transform .18s; }
body.chrome_v2 #plateformList .v5_combo.is_open .v5_chev { transform: rotate(180deg); }
body.chrome_v2 #plateformList .v5_combo_menu {
    position: absolute;
    z-index: 5;
    top: 50px;
    left: 0;
    right: 0;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
    animation: v5_tiroir_fondu .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_combo_menu[hidden] { display: none; }
@keyframes v5_tiroir_fondu { from { opacity: 0; } to { opacity: 1; } }
body.chrome_v2 #plateformList .v5_combo_rech {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin: 8px;
    padding: 0 11px;
    border-radius: 9px;
    background: var(--surface2);
    color: var(--text-dim);
}
/* Les recherches (projet, collaborateur) : le CONTENEUR porte le cadre, le champ est nu. Le filet et le fond des champs sont
   en `!important` dans v5-components.css §2 : sans lui, un second cadre (le filet intérieur du champ, deux traits verticaux
   dans le conteneur) se dessinait dans le conteneur. */
body.chrome_v2 #plateformList .v5_combo_rech > input[type="text"],
body.chrome_v2 #plateformList .v5_combo_rech > input[type="text"]:focus,
body.chrome_v2 #plateformList .v5_attrib_rech > input[type="text"],
body.chrome_v2 #plateformList .v5_attrib_rech > input[type="text"]:focus {
    height: 34px; min-height: 0; margin: 0; padding: 0 2px; border: 0 !important; border-radius: 0; background-color: transparent !important; box-shadow: none; outline: none; font-size: 12.5px; flex: 1 1 auto; min-width: 0;
}
body.chrome_v2 #plateformList .v5_combo_n { flex: none; font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La liste : filet haut `--line-soft` (celui du bloc de recherche de la maquette), marge intérieure 5, 264 de haut au plus (+ 10 de marge, le filet : 275). */
body.chrome_v2 #plateformList .v5_combo_liste { box-sizing: border-box; max-height: 275px; margin: 0; padding: 5px; overflow-y: auto; list-style: none; border-top: 1px solid var(--line-soft); }
body.chrome_v2 #plateformList .v5_combo_liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background .14s var(--ease); }
body.chrome_v2 #plateformList .v5_combo_liste li[hidden] { display: none; }
body.chrome_v2 #plateformList .v5_combo_liste li:hover { background: var(--surface2); }
body.chrome_v2 #plateformList .v5_combo_liste li.is_on { background: var(--accent-soft); }
body.chrome_v2 #plateformList .v5_combo_av { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--chip); font-size: 10.5px; font-weight: 700; color: var(--text-mid); }
body.chrome_v2 #plateformList .v5_combo_txt { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
body.chrome_v2 #plateformList .v5_combo_txt > b { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.chrome_v2 #plateformList .v5_combo_txt > i { font-family: inherit; font-style: normal; font-size: 10.5px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.chrome_v2 #plateformList .v5_combo_liste li.is_on .v5_combo_txt > b { color: var(--accent-ink); }
/* Le projet choisi : le « ✓ » de 11 px tout à droite de la ligne (la maquette l.114 : `display` à `block` pour la ligne choisie, `none` sinon).
   Même encre que le libellé de la ligne (`--accent-ink`, le jeton de contraste de `--accent`). */
body.chrome_v2 #plateformList .v5_combo_ok { display: none; flex: none; font-size: 11px; line-height: normal; color: var(--accent-ink); }
body.chrome_v2 #plateformList .v5_combo_liste li.is_on .v5_combo_ok { display: block; }
/* Aucun projet : le bloc de la maquette (l.117) — marge intérieure 18, texte centré, 12 / `--text-dim`, sans survol ni rayon. Il est un `li` de la
   liste : il bat la règle des lignes (`li`, flex, 8 10, r9) par son nom de classe ; `:not([hidden])` pour ne pas rouvrir un bloc caché. */
body.chrome_v2 #plateformList .v5_combo_liste li.v5_combo_vide:not([hidden]) { display: block; }
body.chrome_v2 #plateformList .v5_combo_liste li.v5_combo_vide,
body.chrome_v2 #plateformList .v5_combo_liste li.v5_combo_vide:hover { padding: 18px; border-radius: 0; background: transparent; text-align: center; font-size: 12px; line-height: normal; color: var(--text-dim); cursor: default; }

/* Sans projet : le bandeau violet de la maquette (fond et filet violets, encre du texte courant — `--text`). */
body.chrome_v2 #plateformList .v5_tiroir_erreur {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--violet);
    border-radius: 12px;
    background: var(--violet-soft);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text);
}
body.chrome_v2 #plateformList .v5_tiroir_erreur[hidden] { display: none; }

/* Suivi : l'avancement (une colonne de boutons) à gauche ; à droite la facturation et les deux interrupteurs. */
body.chrome_v2 #plateformList .v5_suivi { align-items: start; }
body.chrome_v2 #plateformList .v5_suivi_col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.chrome_v2 #plateformList .v5_options { display: flex; flex-direction: column; gap: 6px; }
/* Une option d'avancement : 36 de haut + le filet = 38, r9, point de 8 de la teinte du statut ; l'active prend le fond doux et le filet de la teinte. */
body.chrome_v2 #plateformList .v5_option {
    --ton: var(--accent);
    --ton-doux: var(--accent-soft);
    --ton-encre: var(--accent-ink);
    box-sizing: content-box;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--text-mid);
    font: 600 12.5px var(--font);
    text-align: left;
    cursor: pointer;
    transition: background .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_option.t_violet { --ton: var(--violet); --ton-doux: var(--violet-soft); --ton-encre: var(--violet-ink); }
body.chrome_v2 #plateformList .v5_option.t_accent { --ton: var(--accent); --ton-doux: var(--accent-soft); --ton-encre: var(--accent-ink); }
body.chrome_v2 #plateformList .v5_option.t_aqua { --ton: var(--aqua); --ton-doux: var(--aqua-soft); --ton-encre: var(--aqua-ink); }
body.chrome_v2 #plateformList .v5_option.t_neutral { --ton: var(--neutral); --ton-doux: var(--neutral-soft); --ton-encre: var(--text-mid); }
body.chrome_v2 #plateformList .v5_option_pt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ton); }
body.chrome_v2 #plateformList .v5_option:hover { color: var(--text); }
body.chrome_v2 #plateformList .v5_option.is_on { background: var(--ton-doux); border-color: var(--ton); color: var(--ton-encre); }

/* Les interrupteurs (« Le client peut créer des étapes », « Messages activés ») : la bascule de 36 × 20 (bouton de 16), puis le
   libellé 12,5 / 600 et sa note de 11 `--text-dim` ; toute la ligne se clique. */
body.chrome_v2 #plateformList .v5_interrupteur { display: flex; align-items: center; gap: 11px; cursor: pointer; }
body.chrome_v2 #plateformList .v5_interrupteur .v5_tg { display: block; width: 36px; height: 20px; border-radius: 11px; cursor: pointer; }
body.chrome_v2 #plateformList .v5_interrupteur .v5_tg::after { width: 16px; height: 16px; }
body.chrome_v2 #plateformList .v5_interrupteur .v5_tg.is_on::after { left: 18px; }
body.chrome_v2 #plateformList .v5_interrupteur_txt { display: flex; flex-direction: column; gap: 0; min-width: 0; }
body.chrome_v2 #plateformList .v5_interrupteur_txt > b { font-size: 12.5px; font-weight: 600; line-height: normal; color: var(--text); }
body.chrome_v2 #plateformList .v5_interrupteur_txt > i { font-family: inherit; font-size: 11px; font-style: normal; line-height: normal; color: var(--text-dim); }

/* Les dates : deux champs de 44 + le filet = 46 (r11, `--surface2`, filet `--line`, `--accent` ouvert) — l'icône calendrier, la date en 13 / 600
   (500 `--text-dim` tant que rien n'est choisi), à droite « aujourd'hui » ou « N jours » en 11 — et un calendrier de 300 de large + 2 × 14
   de marge intérieure + le filet = 330, posé 6 px sous le champ. */
body.chrome_v2 #plateformList .v5_dates { align-items: start; }
body.chrome_v2 #plateformList .v5_date_aide { font-size: inherit; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: inherit; }
body.chrome_v2 #plateformList .v5_date_ancre { position: relative; }
body.chrome_v2 #plateformList .v5_date_champ {
    box-sizing: content-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 30px);
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface2);
    color: var(--text-dim);
    text-align: left;
    cursor: pointer;
    transition: border-color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_date.is_open .v5_date_champ,
body.chrome_v2 #plateformList .v5_date_champ:focus-visible { border-color: var(--accent); outline: none; }
body.chrome_v2 #plateformList .v5_date.is_open .v5_date_ico { color: var(--accent); }
body.chrome_v2 #plateformList .v5_date_ico { flex: none; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_date_val { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_date_val.a_valeur { font-weight: 600; color: var(--text); }
body.chrome_v2 #plateformList .v5_date_rel { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
body.chrome_v2 #plateformList .v5_cal {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    box-sizing: border-box;
    width: 330px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-menu);
    animation: v5_tiroir_fondu .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_cal[hidden] { display: none; }
body.chrome_v2 #plateformList .v5_cal_tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
body.chrome_v2 #plateformList .v5_cal_nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    font: 400 16px/1 var(--font);
    cursor: pointer;
    transition: background .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_cal_nav:hover { background: var(--chip); }
body.chrome_v2 #plateformList .v5_cal_mois { font-size: 13px; font-weight: 600; text-transform: capitalize; color: var(--text); }
body.chrome_v2 #plateformList .v5_cal_sem,
body.chrome_v2 #plateformList .v5_cal_jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
body.chrome_v2 #plateformList .v5_cal_sem { margin-bottom: 4px; }
body.chrome_v2 #plateformList .v5_cal_sem > span { display: flex; align-items: center; justify-content: center; height: 22px; font-size: 10.5px; font-weight: 600; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_cal_j {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: 400 12px var(--font);
    cursor: pointer;
    transition: background .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_cal_j.is_vide { visibility: hidden; cursor: default; }
body.chrome_v2 #plateformList .v5_cal_j:not(.is_sel):not(.is_plage):not(.is_off):not(.is_vide):hover { background: var(--chip); }
body.chrome_v2 #plateformList .v5_cal_j.is_plage { border-radius: 4px; background: var(--accent-soft); color: var(--accent-ink); }
body.chrome_v2 #plateformList .v5_cal_j.is_auj { font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); }
body.chrome_v2 #plateformList .v5_cal_j.is_sel { background: var(--accent); color: var(--on-accent); font-weight: 700; }
body.chrome_v2 #plateformList .v5_cal_j.is_off { opacity: .35; color: var(--text-dim); cursor: not-allowed; }
body.chrome_v2 #plateformList .v5_cal_raccourcis { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
body.chrome_v2 #plateformList .v5_cal_q {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: var(--chip);
    color: var(--text-mid);
    font: 600 11.5px var(--font);
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_cal_q:hover { background: var(--accent-soft); color: var(--accent); }

/* L'attribution : l'en-tête (titre + note à gauche, la recherche de 220 × 34 à droite — pour les budgets, le bouton « + Ajouter un
   budget » à la place de la recherche), puis une grille de 3 colonnes de cartes de collaborateurs : photo 30, nom 12 / 600 et rôle
   10,5 `--text-dim` sur deux lignes ; cochée, la carte prend le fond et le filet d'accent et la photo la pastille ✓. */
body.chrome_v2 #plateformList .v5_attrib_tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
body.chrome_v2 #plateformList .v5_attrib_titres { min-width: 0; }
body.chrome_v2 #plateformList .v5_attrib_titres > h2 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
body.chrome_v2 #plateformList .v5_attrib_note { margin: 3px 0 0; font-size: 11.5px; line-height: normal; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_attrib_rech { box-sizing: border-box; display: flex; flex: none; align-items: center; gap: 8px; width: 220px; height: 34px; margin: 0; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_attrib_rech > svg { flex: none; }
body.chrome_v2 #plateformList .v5_attrib_rech > input[type="text"],
body.chrome_v2 #plateformList .v5_attrib_rech > input[type="text"]:focus { height: 32px; font-size: 12px; }
body.chrome_v2 #plateformList .v5_attrib { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.chrome_v2 #plateformList .v5_attrib_case { display: none; }
body.chrome_v2 #plateformList .v5_attrib_pers {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: var(--surface2);
    cursor: pointer;
    transition: background .14s var(--ease), border-color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_attrib_pers[hidden] { display: none; }
body.chrome_v2 #plateformList .v5_attrib_av { position: relative; flex: none; display: block; width: 30px; height: 30px; }
body.chrome_v2 #plateformList .v5_attrib_av > img { display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--chip); }
/* La pastille ✓ : 15 + un filet de 2 de la surface (19 de boîte), à 3 px du bord bas-droit de la photo ; visible seulement cochée. */
body.chrome_v2 #plateformList .v5_attrib_ok {
    box-sizing: content-box;
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 9px;
    font-weight: 700;
    line-height: normal;
}
body.chrome_v2 #plateformList .v5_attrib_case:checked + .v5_attrib_pers .v5_attrib_ok { display: flex; }
body.chrome_v2 #plateformList .v5_attrib_txt { display: block; min-width: 0; }
body.chrome_v2 #plateformList .v5_attrib_txt > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: normal; }
body.chrome_v2 #plateformList .v5_attrib_nom { font-size: 12px; font-weight: 600; color: var(--text); }
body.chrome_v2 #plateformList .v5_attrib_role { font-size: 10.5px; font-weight: 400; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_attrib_case:checked + .v5_attrib_pers { background: var(--accent-soft); border-color: var(--accent); }

/* Les budgets : « + Ajouter un budget » (32, 0 13, r9, `--accent-soft` / `--accent`, 12 / 600) en haut à droite de l'en-tête, puis une carte par
   budget — `--surface2`, filet `--line`, r14, 14 16, écart 12. Rangée du haut : le type en segmenté (`--chip`, marge 3, r10, options de 30 / r8 /
   12 / 600, 0 12), la récurrence en segmenté (même grammaire, collée à droite) et la corbeille de 32 × 32 (r9, survol `--chip` / violet) ;
   dessous le libellé et le montant : étiquette 10,5 / 600 .07em à 6 du champ de 40 (r10, `--surface`, filet `--line`, 13,5 / 600 + suffixe 11,5). */
body.chrome_v2 #plateformList .v5_budget_ajout {
    box-sizing: border-box;
    flex: none;
    display: flex;
    align-items: center;
    height: 32px;
    margin: 0;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    font: 600 12px var(--font);
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: background .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_budget_ajout:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
body.chrome_v2 #plateformList .v5_budgets { display: flex; flex-direction: column; gap: 12px; }
body.chrome_v2 #plateformList .v5_budgets:not(:has(.v5_budget_ligne)) { display: none; }
body.chrome_v2 #plateformList .v5_budget_ligne {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface2);
}
body.chrome_v2 #plateformList .v5_budget_haut { display: flex; align-items: center; gap: 10px; }
body.chrome_v2 #plateformList .v5_bseg { flex: none; display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--chip); }
body.chrome_v2 #plateformList .v5_bseg_rec { margin-left: auto; }
body.chrome_v2 #plateformList .v5_bseg > button {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 0;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-mid);
    font: 600 12px var(--font);
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_bseg > button:hover { color: var(--text); }
body.chrome_v2 #plateformList .v5_bseg > button.is_on { background: var(--surface); color: var(--text); }
body.chrome_v2 #plateformList .v5_budget_corbeille {
    box-sizing: border-box;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: background .14s var(--ease), color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_budget_corbeille:hover { background: var(--chip); color: var(--violet); }
body.chrome_v2 #plateformList .v5_budget_corbeille svg { width: 14px; height: 14px; }
body.chrome_v2 #plateformList .v5_budget_bloc { display: block; margin: 0; }
body.chrome_v2 #plateformList .v5_budget_lib { display: block; margin: 0 0 6px; font-size: 10.5px; font-weight: 600; line-height: normal; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_budget_champ {
    box-sizing: content-box;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    transition: border-color .14s var(--ease);
}
body.chrome_v2 #plateformList .v5_budget_champ:focus-within { border-color: var(--accent); }
body.chrome_v2 #plateformList .v5_tiroir .v5_budget_champ > input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 1px 2px;
    font: 400 13.5px var(--font);
    line-height: normal;
    color: var(--text);
}
body.chrome_v2 #plateformList .v5_tiroir .v5_budget_montant .v5_budget_champ > input { font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
body.chrome_v2 #plateformList .v5_budget_champ > input::-webkit-inner-spin-button,
body.chrome_v2 #plateformList .v5_budget_champ > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.chrome_v2 #plateformList .v5_budget_suffixe { flex: none; margin: 0; font-size: 11.5px; line-height: normal; color: var(--text-dim); white-space: nowrap; }

/* Le pied (h71) : 14 28, écart 12 ; le résumé à gauche, Annuler (0 16, 84 × 42 avec son filet) et Créer la mission (0 20, 40) à droite. */
body.chrome_v2 #plateformList .v5_tiroir_pied {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    padding: 14px 28px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}
body.chrome_v2 #plateformList .v5_tiroir_resume { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_tiroir_actions { display: flex; align-items: center; gap: 12px; }
body.chrome_v2 #plateformList .v5_tiroir_actions > button { height: 40px; border-radius: 11px; font-family: inherit; font-size: 12.5px; cursor: pointer; }
body.chrome_v2 #plateformList .v5_tiroir_actions > .v5_cta_sec { padding: 0 16px; }
body.chrome_v2 #plateformList .v5_tiroir_actions > .v5_cta { padding: 0 20px; }

/* ======================================================================================
   LINK BUILDING — « Exporter les liens achetés » (plateform-link-building-export.php).
   Le kit du tiroir fait tout ; il ne reste que la grille des périodes (3 colonnes d'options, le nombre
   d'articles de chaque période poussé à droite), la note sous le titre de carte et la liste des feuilles.
   ====================================================================================== */
body.chrome_v2 #plateformList .lbx_note { margin: -8px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--text-dim); }
body.chrome_v2 #plateformList .v5_options.lbx_periodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
body.chrome_v2 #plateformList .lbx_periodes .v5_option { min-width: 0; white-space: nowrap; }
body.chrome_v2 #plateformList .lbx_compte { margin-left: auto; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-dim); }
body.chrome_v2 #plateformList .lbx_periodes .v5_option.is_on .lbx_compte { color: inherit; }
body.chrome_v2 #plateformList .lbx_feuilles { display: flex; flex-direction: column; gap: 6px; margin: -4px 0 0; padding: 0 0 0 16px; font-size: 12px; line-height: 1.5; color: var(--text-mid); }
body.chrome_v2 #plateformList .lbx_feuilles b { font-weight: 600; color: var(--text); }
body.chrome_v2 #plateformList .v5_tiroir_actions > .v5_cta:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 760px) {
    body.chrome_v2 #plateformList .v5_options.lbx_periodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}