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