/* ==============================================================================
COUCHE COMPOSANTS COMMUNE — préfixe `ui-` (relifting, depuis 2026-09-18)
------------------------------------------------------------------------------
Chargée GLOBALEMENT par x-head.php, après fields.css. Elle ne dessine que les
éléments qui portent une classe `ui-*` : aucune règle sur une balise nue, donc
aucune page n'est touchée tant qu'elle n'adopte pas ces classes.
Règle du chantier (cf. Obsidian magic-plateform/design-system.md) : un composant
commun (en-tête de page, bouton, carte, tuile KPI, tableau, badge, alerte…) se
dessine ICI et nulle part ailleurs. La CSS d'un module ne garde que son layout.
Les champs restent la propriété de fields.css : rien ici ne vise input/select.
Tout est écrit en jetons `--w-*` (design-system.css) → le thème nuit (.ac-dark
sur l'enveloppe) suit sans une ligne de plus, sauf les deux jetons de série de
graphique, validés au contraste et à la vision des couleurs (dataviz) ci-dessous.
============================================================================ */
:root, .ac-page {
--ui-card-r: 14px;
--ui-btn-h: 40px;
/* Halo des cartes (cible) : ombre diffuse légèrement cobalt, bord à peine visible — les cartes
« flottent » sur le fond au lieu de trancher dessus. En nuit, l'ombre redevient neutre. */
--ui-card-sh: 0 6px 22px -6px rgba(37, 62, 214, .16), 0 1px 2px rgba(37, 62, 214, .05);
--ui-card-line: #eaebf6;
}
.ac-dark { --ui-card-sh: var(--w-sh); --ui-card-line: var(--w-line); }
/* ── En-tête de page ─────────────────────────────────────────────────────────── */
/* Barre COMPACTE (choix du fondateur 19/09 05h, maquettes ChatGPT) : bandeau blanc pleine largeur sous la
barre haute, tuile 32, titre 16 / 700, sous-titre 12,5, actions 36 px. Le bandeau déborde du padding
28 px de .ac-body par des marges négatives pour toucher les bords. */
.ui-page-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 -28px 16px; padding:12px 28px; background:var(--w-panel); border-bottom:1px solid var(--w-line); }
.ui-page-icon { width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ui-page-icon svg { width:17px; height:17px; }
.ui-page-title { font-family:var(--w-display); font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.2; color:var(--w-ink); margin:0; }
.ui-page-sub { font-size:12.5px; color:var(--w-soft); margin:2px 0 0; }
.ui-page-actions { --ui-btn-h:36px; --w-field-h:36px; margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ui-page-actions .ui-btn { padding:0 14px; font-size:13px; }
.ui-page-actions .ui-btn svg { width:15px; height:15px; }
/* ── Boutons ─────────────────────────────────────────────────────────────────── */
.ui-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--ui-btn-h); padding:0 16px;
border-radius:var(--w-r-md); font-family:inherit; font-size:14px; font-weight:600; line-height:1; white-space:nowrap; cursor:pointer;
text-decoration:none; border:1px solid transparent; transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.ui-btn svg { width:16px; height:16px; flex-shrink:0; }
/* Focus : anneau `--w-ring` (16 %) seul = 1,3:1, invisible sur un aplat. Un outline accent 2 px (6,3:1) le complète. */
.ui-btn:focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; box-shadow:var(--w-ring); }
.ui-btn:active { transform:translateY(1px); }
.ui-btn[disabled], .ui-btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; pointer-events:none; }
.ui-btn--primary { background:var(--w-accent-solid, var(--w-accent)); color:#fff; }
.ui-btn--primary:hover { background:var(--w-accent-deep); color:#fff; }
.ui-btn--secondary { background:var(--w-panel); color:var(--w-ink); border-color:var(--w-line-strong); }
.ui-btn--secondary:hover { border-color:var(--w-ink-2); color:var(--w-ink); }
.ui-btn--secondary svg { color:var(--btn-ico, var(--w-accent-deep)); } /* icône colorée sur bouton blanc : accent par défaut, teinte par fonction via --btn-ico */
.ui-btn--danger { background:var(--w-c-red-bg); color:var(--w-c-red); border-color:transparent; }
.ui-btn--danger:hover { background:var(--w-c-red); color:#fff; }
.ui-btn--sm { --ui-btn-h:32px; padding:0 12px; font-size:13px; border-radius:var(--w-r-sm); }
.ui-btn--ghost { background:transparent; color:var(--w-accent-deep); }
.ui-btn--ghost:hover { background:var(--w-accent-soft); }
/* Lien d'action discret (« Voir tous → ») */
.ui-link { font-size:13px; font-weight:600; color:var(--w-accent-deep); text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
.ui-link:hover { text-decoration:underline; color:var(--w-accent-deep); }
.ui-link:focus-visible, .ui-icon-btn:focus-visible, .ui-table td.is-main a:focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; border-radius:var(--w-r-xs); }
.ui-link svg { width:14px; height:14px; }
/* ── Carte ───────────────────────────────────────────────────────────────────── */
.ui-card { background:var(--w-panel); border:1px solid var(--ui-card-line); border-radius:var(--ui-card-r); box-shadow:var(--ui-card-sh); padding:20px; min-width:0; }
.ui-card--flush { padding:0; overflow:hidden; }
.ui-card--flush > .ui-card-head { padding:16px 20px 10px; }
.ui-card-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.ui-card-head > .ui-link, .ui-card-head > .ui-badge, .ui-card-head > .ui-legend, .ui-card-head > .ui-btn, .ui-card-head > .ui-card-note { margin-left:auto; }
.ui-card-note { font-size:12px; color:var(--w-soft); }
.ui-card-title { font-family:var(--w-display); font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--w-ink); margin:0; display:flex; align-items:center; gap:10px; }
.ui-card-sub { font-size:12.5px; color:var(--w-soft); margin:-8px 0 14px; }
/* ── Tuile d'icône (teintée) ─────────────────────────────────────────────────── */
.ui-tile { --tile-bg:var(--w-accent-soft); --tile-ink:var(--w-accent-deep);
width:36px; height:36px; border-radius:var(--w-r-md); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
background:var(--tile-bg); color:var(--tile-ink); }
.ui-tile svg { width:18px; height:18px; }
.ui-tile--sm { width:30px; height:30px; border-radius:var(--w-r-sm); }
.ui-tile--sm svg { width:15px; height:15px; }
.ui-tile--lg { width:44px; height:44px; border-radius:var(--w-r-lg); }
.ui-tile--lg svg { width:22px; height:22px; }
.ui-tile--pos { --tile-bg:var(--w-pos-bg); --tile-ink:var(--w-pos); }
.ui-tile--neg { --tile-bg:var(--w-neg-bg); --tile-ink:var(--w-neg); }
.ui-tile--warn { --tile-bg:var(--w-eeat-bg); --tile-ink:var(--w-eeat-ink); }
.ui-tile--info { --tile-bg:var(--w-seo-bg); --tile-ink:var(--w-seo-ink); }
.ui-tile--ink { --tile-bg:var(--w-line-soft); --tile-ink:var(--w-ink-2); }
/* Teintes de la cible (design-system.css, --w-c-*) : l'icône, la mini-courbe et la légende partagent la teinte. */
.ui-tile--green { --tile-bg:var(--w-c-green-bg); --tile-ink:var(--w-c-green); }
.ui-tile--blue { --tile-bg:var(--w-c-blue-bg); --tile-ink:var(--w-c-blue); }
.ui-tile--violet { --tile-bg:var(--w-c-violet-bg); --tile-ink:var(--w-c-violet); }
.ui-tile--amber { --tile-bg:var(--w-c-amber-bg); --tile-ink:var(--w-c-amber); }
.ui-tile--cyan { --tile-bg:var(--w-c-cyan-bg); --tile-ink:var(--w-c-cyan); }
.ui-tile--red { --tile-bg:var(--w-c-red-bg); --tile-ink:var(--w-c-red); }
.ui-tile--pink { --tile-bg:var(--w-c-pink-bg); --tile-ink:var(--w-c-pink); }
/* ── Tuile KPI (cible : tuile 44 + grand chiffre, libellé dessous ; en pied la variation à gauche, la
mini-courbe à droite, TEINTÉE comme la tuile — la teinte se pose sur la carte : .ui-kpi--green…) ── */
.ui-kpi { --kpi-ink:var(--w-accent); display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"tile value" "foot foot"; column-gap:14px; row-gap:12px; align-items:start; padding:16px 20px; }
.ui-kpi--green { --kpi-ink:var(--w-c-green); }
.ui-kpi--blue { --kpi-ink:var(--w-c-blue); }
.ui-kpi--violet { --kpi-ink:var(--w-c-violet); }
.ui-kpi--amber { --kpi-ink:var(--w-c-amber); }
.ui-kpi > .ui-tile { grid-area:tile; }
.ui-kpi-body { grid-area:value; min-width:0; }
.ui-kpi-value { font-family:var(--w-display); font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.05; color:var(--w-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-kpi-label { font-size:14px; color:var(--w-soft); margin-top:4px; }
.ui-kpi-foot { grid-area:foot; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; min-height:30px; }
.ui-kpi-delta { display:flex; flex-direction:column; gap:2px; font-size:11.5px; line-height:1.25; color:var(--w-soft); white-space:nowrap; }
.ui-kpi-delta b { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--w-ink-2); }
.ui-kpi-delta b svg { width:13px; height:13px; }
.ui-kpi-delta--pos b { color:var(--w-c-green-text); }
.ui-kpi-delta--neg b { color:var(--w-c-red); }
.ui-spark { width:100px; height:30px; flex-shrink:0; overflow:visible; }
.ui-spark path { fill:none; stroke:var(--kpi-ink); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ui-spark .ui-spark-fill { fill:var(--kpi-ink); opacity:.14; stroke:none; }
/* ── Alerte (bandeau) ────────────────────────────────────────────────────────── */
.ui-alert { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--ui-card-r);
background:var(--w-panel); border:1px solid var(--ui-card-line); border-left:4px solid var(--w-accent); box-shadow:var(--ui-card-sh); min-width:0; }
.ui-alert--neg { background:var(--w-c-red-tint); border-color:var(--w-c-red-line); border-left-color:var(--w-c-red); }
.ui-alert--warn { border-left-color:var(--w-eeat-ink); }
.ui-alert--pos { border-left-color:var(--w-pos); }
.ui-alert--info { border-left-color:var(--w-seo-ink); }
.ui-alert-body { flex:1 1 auto; min-width:0; }
.ui-alert > .ui-btn { margin-left:auto; flex-shrink:0; }
.ui-alert-title { font-size:14px; font-weight:700; color:var(--w-ink); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-alert-title b { font-variant-numeric:tabular-nums; }
.ui-alert--neg .ui-alert-title b { color:var(--w-c-red); }
.ui-alert--warn .ui-alert-title b { color:var(--w-eeat-ink); }
.ui-alert--pos .ui-alert-title b { color:var(--w-pos); }
.ui-alert-text { font-size:11px; color:var(--w-soft); margin-top:3px; line-height:1.35; }
/* ── Carte d'action rapide ───────────────────────────────────────────────────── */
.ui-action { display:flex; align-items:center; gap:10px; padding:12px 12px; min-width:0;
background:var(--w-panel); border:1px solid var(--ui-card-line); border-radius:var(--ui-card-r); box-shadow:var(--ui-card-sh);
color:var(--w-ink); text-decoration:none; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.ui-action:hover { border-color:var(--w-accent-line); transform:translateY(-1px); box-shadow:var(--w-sh-md); color:var(--w-ink); }
.ui-action:focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; box-shadow:var(--w-ring); }
.ui-action-body { min-width:0; }
.ui-action-title { display:block; font-size:13px; font-weight:700; line-height:1.25; white-space:nowrap; }
.ui-action > .ui-tile { width:34px; height:34px; }
.ui-action-sub { display:block; font-size:11.5px; color:var(--w-soft); margin-top:2px; }
/* ── Tableau ─────────────────────────────────────────────────────────────────── */
.ui-table-wrap { overflow-x:auto; }
.ui-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.ui-table th { text-align:left; padding:8px 14px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--w-soft); border-bottom:1px solid var(--w-line); white-space:nowrap; }
.ui-table td { padding:8px 14px; font-size:13px; color:var(--w-ink-2); border-top:1px solid var(--w-line-soft); vertical-align:middle; }
.ui-table tbody tr:first-child td { border-top:0; }
.ui-table tbody tr:hover td { background:var(--w-panel-2); }
.ui-table td.is-num, .ui-table th.is-num { font-variant-numeric:tabular-nums; }
.ui-table td.is-main { color:var(--w-ink); font-weight:400; }
.ui-card--flush .ui-table th:first-child, .ui-card--flush .ui-table td:first-child { padding-left:20px; }
.ui-card--flush .ui-table th:last-child, .ui-card--flush .ui-table td:last-child { padding-right:16px; }
.ui-table td.is-main a { color:inherit; text-decoration:none; }
.ui-table td.is-main a:hover { color:var(--w-accent-deep); }
.ui-table td.is-soft { color:var(--w-soft); }
.ui-table td.is-actions, .ui-table th.is-actions { text-align:right; width:1%; white-space:nowrap; }
.ui-table .ui-cell-truncate { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:var(--w-r-sm); color:var(--w-soft); border:1px solid transparent; background:transparent; text-decoration:none; }
.ui-icon-btn:hover { color:var(--w-accent-deep); background:var(--w-accent-soft); }
.ui-icon-btn svg { width:16px; height:16px; }
.ui-empty { padding:28px 16px; text-align:center; font-size:13.5px; color:var(--w-soft); }
.ui-empty a { color:var(--w-accent-deep); font-weight:600; }
/* Texte pour lecteurs d'écran uniquement (le projet n'a pas de .sr-only global). */
.ui-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; border:0; overflow:hidden; white-space:nowrap; clip:rect(0,0,0,0); clip-path:inset(50%); }
/* ── Badge ───────────────────────────────────────────────────────────────────── */
.ui-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--w-r-full); font-size:11.5px; font-weight:600; line-height:1.4; white-space:nowrap;
background:var(--w-line-soft); color:var(--w-ink-2); border:1px solid transparent; }
.ui-badge::before { display:none; content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.ui-badge--dot::before { display:inline-block; }
.ui-badge--pos { background:var(--w-c-green-bg); color:#15803d; }
.ac-dark .ui-badge--pos { color:var(--w-c-green); }
.ui-badge--neg { background:var(--w-c-red-bg); color:var(--w-c-red-text, var(--w-c-red)); }
.ui-badge--warn { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border-color:var(--w-eeat-line); }
.ui-badge--info { background:var(--w-seo-bg); color:var(--w-seo-ink); border-color:var(--w-seo-line); }
/* ── Liste clé / valeur ──────────────────────────────────────────────────────── */
.ui-kv { list-style:none; margin:0; padding:0; }
.ui-kv li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0; font-size:13.5px; line-height:1.3; }
.ui-kv-k { display:inline-flex; align-items:center; gap:8px; color:var(--w-soft); min-width:0; }
.ui-kv-k svg { width:15px; height:15px; color:var(--w-soft); flex-shrink:0; }
.ui-kv-v { font-weight:600; color:var(--w-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-kv-v.is-pos { color:var(--w-c-green-text); }
.ui-kv-note { font-size:11.5px; color:var(--w-soft); margin-top:6px; padding-top:8px; border-top:1px solid var(--w-line-soft); } /* --w-faint (2,65:1) ne porte JAMAIS de texte */
.ui-kv-v .is-soft { font-weight:500; color:var(--w-soft); }
/* ── Légende de graphique ────────────────────────────────────────────────────── */
.ui-legend { display:flex; align-items:center; gap:14px; font-size:12px; color:var(--w-soft); flex-wrap:wrap; }
.ui-legend span { display:inline-flex; align-items:center; gap:6px; }
.ui-legend i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.ui-legend .is-line i { width:14px; height:0; border-radius:0; border-top:2px solid var(--w-chart-line); }
.ui-legend .is-1 i { background:var(--w-chart-1-dot); }
.ui-legend .is-2 i { background:var(--w-chart-2-dot); }
/* ── Chiffre-clé (solde, total) ──────────────────────────────────────────────── */
.ui-figure { font-family:var(--w-display); font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1.05; color:var(--w-accent); font-variant-numeric:tabular-nums; }
.ui-figure small, .ui-figure-unit { font-size:14px; font-weight:700; color:var(--w-accent); margin-left:4px; }
.ui-figure--pos { color:var(--w-c-green); }
@media (prefers-reduced-motion: reduce) {
.ui-btn, .ui-action { transition:none; }
.ui-action:hover { transform:none; }
}
/* ── Onglets de page (soulignés) ───────────────────────────────────────────── */
.ui-tabs { display:flex; gap:4px; border-bottom:1px solid var(--w-line); margin:0 0 16px; }
.ui-tab { display:inline-flex; align-items:center; gap:8px; padding:10px 14px 12px; margin-bottom:-1px; font-size:13.5px; font-weight:600; color:var(--w-soft); border:0; border-bottom:2px solid transparent; cursor:pointer; background:none; font-family:inherit; text-decoration:none; }
.ui-tab svg { width:16px; height:16px; }
.ui-tab:hover { color:var(--w-ink); }
.ui-tab[aria-selected="true"], .ui-tab.is-active { color:var(--w-accent); border-bottom-color:var(--w-accent); }
.ui-tab:focus-visible { outline:2px solid var(--w-accent); outline-offset:-2px; border-radius:6px 6px 0 0; }
/* ── Contrôle segmenté ─────────────────────────────────────────────────────── */
.ui-seg { display:inline-flex; padding:3px; background:var(--w-line-soft); border-radius:var(--w-r-md); gap:2px; }
.ui-seg button { height:calc(var(--ui-btn-h) - 6px); padding:0 14px; border:0; border-radius:var(--w-r-sm); background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--w-soft); cursor:pointer; white-space:nowrap; }
.ui-seg button[aria-pressed="true"], .ui-seg button.is-active { background:var(--w-panel); color:var(--w-ink); box-shadow:0 1px 2px rgba(25,25,51,.08); }
.ui-seg button:focus-visible { outline:2px solid var(--w-accent); outline-offset:-2px; }
.ui-seg button[disabled] { opacity:.5; cursor:not-allowed; }
.ui-seg--sm { padding:2px; border-radius:var(--w-r-sm); }
.ui-seg--sm button { height:26px; padding:0 10px; font-size:12px; }
/* Segmenté porté par des RADIOS (handlers onchange conservés, aucun contrôle recréé — Maillage 20/09) : même dessin que les boutons ; l'état = :has(:checked) */
.ui-seg label { position:relative; display:inline-flex; align-items:center; height:calc(var(--ui-btn-h) - 6px); padding:0 14px; border-radius:var(--w-r-sm); font-size:13px; font-weight:600; color:var(--w-ink-2); cursor:pointer; white-space:nowrap; user-select:none; }
.ui-seg label:hover { color:var(--w-ink); }
.ui-seg label input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.ui-seg label:has(:checked) { background:var(--w-panel); color:var(--w-ink); box-shadow:0 1px 2px rgba(25,25,51,.08); }
.ui-seg label:has(:focus-visible) { outline:2px solid var(--w-accent); outline-offset:-2px; }
.ui-seg--sm label { height:26px; padding:0 10px; font-size:12px; }
/* ── Champs : label, aide, rangée (les champs eux-mêmes restent à fields.css) ── */
.ui-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.ui-label { font-size:12.5px; font-weight:600; color:var(--w-ink-2); display:flex; align-items:center; gap:8px; }
.ui-help { font-size:12px; color:var(--w-soft); margin-top:6px; line-height:1.4; }
.ui-field-row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; align-items:end; margin-top:14px; }
.ui-field-row--2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.ui-fields-inline { display:flex; gap:14px; flex-wrap:wrap; align-items:end; }
.ui-check { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--w-ink-2); cursor:pointer; }
.ui-check input { width:16px; height:16px; accent-color:var(--w-accent); margin:0; }
.ui-cb-list { display:flex; flex-wrap:wrap; gap:8px 18px; }
.ui-cb-list .ui-check { font-size:13px; }
.ui-group-label { font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--w-soft); margin:10px 0 6px; }
.ui-note { font-size:12.5px; color:var(--w-soft); background:var(--w-canvas); border-radius:var(--w-r-md); padding:10px 12px; line-height:1.45; }
.ui-note ul { margin:4px 0 0 16px; padding:0; } .ui-note b { color:var(--w-ink-2); }
/* ── Ligne dépliable (details) ─────────────────────────────────────────────── */
.ui-acc { display:flex; flex-direction:column; border-top:1px solid var(--w-line-soft); }
.ui-acc-item { border-bottom:1px solid var(--w-line-soft); }
.ui-acc-item > summary { list-style:none; } .ui-acc-item > summary::-webkit-details-marker { display:none; }
.ui-acc-head { display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; background:none; border:0; width:100%; text-align:left; font-family:inherit; }
.ui-acc-head:focus-visible { outline:2px solid var(--w-accent); outline-offset:-2px; border-radius:var(--w-r-sm); }
.ui-acc-title { font-size:13.5px; font-weight:700; color:var(--w-ink); min-width:170px; display:flex; align-items:center; gap:8px; }
.ui-acc-title svg { width:16px; height:16px; color:var(--w-soft); flex-shrink:0; }
.ui-acc-summary { flex:1; min-width:0; font-size:13px; color:var(--w-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-acc-chev { width:18px; height:18px; color:var(--w-soft); transition:transform .15s; flex-shrink:0; }
.ui-acc-item[open] > summary .ui-acc-chev { transform:rotate(180deg); }
.ui-acc-body { padding:2px 0 18px 42px; }
.ui-badge--auto { background:var(--w-accent-soft); color:var(--w-accent-deep); }
/* ── Carte de choix (radio riche : label > input.ui-sr) ────────────────────── */
.ui-choices { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.ui-choice { position:relative; display:flex; gap:12px; padding:12px 38px 12px 12px; border:1px solid var(--w-line); border-radius:var(--w-r-lg); background:var(--w-panel); cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.ui-choice:hover { border-color:var(--w-accent-line); }
.ui-choice:has(:checked), .ui-choice.is-checked { border-color:var(--w-accent); box-shadow:0 0 0 3px var(--w-accent-soft); background:#fbfbff; }
.ac-dark .ui-choice:has(:checked), .ac-dark .ui-choice.is-checked { background:var(--w-panel-2); }
.ui-choice:has(:focus-visible) { outline:2px solid var(--w-accent); outline-offset:2px; }
.ui-choice .ui-tile { --tile-bg:var(--w-line-soft); --tile-ink:var(--w-ink-2); width:32px; height:32px; border-radius:9px; }
.ui-choice .ui-tile svg { width:16px; height:16px; }
.ui-choice:has(:checked) .ui-tile, .ui-choice.is-checked .ui-tile { --tile-bg:var(--w-accent-soft); --tile-ink:var(--w-accent-deep); }
.ui-choice-title { font-size:13px; font-weight:700; color:var(--w-ink); display:flex; align-items:center; gap:8px; }
.ui-choice-desc { font-size:11.5px; color:var(--w-soft); margin-top:2px; line-height:1.45; }
.ui-choice-check { position:absolute; top:12px; right:12px; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--w-line-strong); background:var(--w-panel); display:grid; place-items:center; }
.ui-choice:has(:checked) .ui-choice-check, .ui-choice.is-checked .ui-choice-check { border-color:var(--w-accent); background:var(--w-accent); }
.ui-choice:has(:checked) .ui-choice-check::after, .ui-choice.is-checked .ui-choice-check::after { content:""; width:6px; height:6px; border-radius:50%; background:#fff; }
.ui-choice--wide { grid-column:1 / -1; }
/* ── Interrupteur (label > input[role=switch].ui-sr > i) ───────────────────── */
.ui-switch { display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--w-ink-2); cursor:pointer; }
.ui-switch i { width:34px; height:20px; border-radius:var(--w-r-full); background:var(--w-line-strong); position:relative; display:inline-block; flex-shrink:0; transition:background .15s; }
.ui-switch i::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .15s; }
.ui-switch:has(:checked) i { background:var(--w-accent); } .ui-switch:has(:checked) i::after { left:16px; }
.ui-switch:has(:focus-visible) i { outline:2px solid var(--w-accent); outline-offset:2px; }
.ui-switch:has(:disabled) { opacity:.55; cursor:not-allowed; }
.ui-switch--sm i { width:28px; height:16px; } .ui-switch--sm i::after { width:12px; height:12px; } .ui-switch--sm:has(:checked) i::after { left:14px; }
/* ── Ligne d'option avec coût ──────────────────────────────────────────────── */
.ui-opt { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--w-line-soft); }
.ui-opt:last-child { border-bottom:0; }
.ui-opt-body { flex:1; min-width:0; }
.ui-opt-title { font-size:13.5px; font-weight:600; color:var(--w-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ui-opt-desc { font-size:12px; color:var(--w-soft); margin-top:1px; }
.ui-opt-cost { font-size:12.5px; color:var(--w-soft); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ui-opt-cost b { color:var(--w-ink); font-weight:600; }
/* ── Tri-état Oui / Auto / Non ─────────────────────────────────────────────── */
.ui-tri-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 24px; }
.ui-tri-grid > .ui-group-label { grid-column:1 / -1; }
.ui-tri { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:var(--w-ink-2); min-height:30px; }
/* ── Étapes numérotées ─────────────────────────────────────────────────────── */
.ui-step-num { width:26px; height:26px; border-radius:50%; background:var(--w-accent); color:#fff; font-size:12.5px; font-weight:700; display:inline-grid; place-items:center; flex-shrink:0; }
.ui-step.is-done .ui-step-num { background:var(--w-c-green); }
.ui-step.is-done .ui-step-num svg { width:14px; height:14px; }
.ui-step-sub { font-size:12.5px; color:var(--w-soft); margin:-8px 0 14px 36px; }
.ui-alert--info { border-left-color:var(--w-seo-ink); }
.ui-alert--warn { background:#fffbeb; border-color:#fde68a; border-left-color:#f59e0b; }
.ac-dark .ui-alert--warn { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); }
@media (prefers-reduced-motion: reduce) { .ui-choice, .ui-switch i, .ui-switch i::after, .ui-acc-chev { transition:none; } }
/* ══ Modale (relifting 19/09) ═══════════════════════════════════════════════
Le voile garde la classe `.modal-overlay` (JS : classList `hidden`) et reçoit `.ui-modal-overlay`
pour le rendu ; la boîte est `.ui-modal`. Structure : .ui-modal-head / .ui-modal-body (défile) /
.ui-modal-foot. Une modale à plusieurs états (config → attente → résultats) empile des
`.ui-modal-step`, chacun avec sa propre tête/corps/pied, que le JS montre et masque.
La largeur se règle par --ui-modal-w sur la boîte. ═══════════════════════════════════════ */
.ui-modal-overlay { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;
background:rgba(25,25,51,.48); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.ui-modal-overlay.hidden { display:none; }
.ui-modal { --ui-modal-w:640px; position:relative; width:100%; max-width:var(--ui-modal-w); max-height:min(88vh, 900px); display:flex; flex-direction:column; min-height:0;
background:var(--w-panel); color:var(--w-ink); border:1px solid var(--ui-card-line); border-radius:16px; box-shadow:0 24px 64px -16px rgba(25,25,51,.35), 0 0 0 1px rgba(25,25,51,.04); overflow:hidden;
animation:uiModalIn .18s cubic-bezier(.16,1,.3,1); }
.ui-modal--lg { --ui-modal-w:860px; }
.ui-modal--tall { height:min(88vh, 900px); }
.ui-modal-close { position:absolute; top:14px; right:14px; z-index:2; width:32px; height:32px; border-radius:var(--w-r-sm); border:0; background:transparent; color:var(--w-soft); cursor:pointer; display:inline-grid; place-items:center; font:inherit; }
.ui-modal-close:hover { background:var(--w-line-soft); color:var(--w-ink); }
.ui-modal-close:focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; }
.ui-modal-close svg { width:16px; height:16px; }
.ui-modal-step { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.ui-modal-head { padding:22px 56px 14px 24px; flex-shrink:0; }
.ui-modal-title { font-family:var(--w-display); font-size:17px; font-weight:700; letter-spacing:-.01em; color:var(--w-ink); margin:0; display:flex; align-items:center; gap:10px; }
.ui-modal-title .ui-tile { width:32px; height:32px; border-radius:9px; }
.ui-modal-title .ui-tile svg { width:16px; height:16px; }
.ui-modal-sub { font-size:12.5px; color:var(--w-soft); margin:6px 0 0; line-height:1.5; }
.ui-modal-sub b, .ui-modal-sub strong { color:var(--w-ink-2); font-weight:600; }
.ui-modal-body { padding:4px 24px 20px; overflow-y:auto; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:16px; }
.ui-modal-body--list { padding-bottom:0; }
.ui-modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:14px 24px; border-top:1px solid var(--w-line-soft); background:var(--w-panel-2); flex-shrink:0; }
.ui-modal-foot > .ui-foot-left { margin-right:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--w-soft); }
.ui-modal-foot > .ui-foot-left b { color:var(--w-ink-2); font-variant-numeric:tabular-nums; }
/* Liste défilante bordée dans un corps de modale (résultats) */
.ui-modal-list { flex:1 1 auto; min-height:180px; overflow-y:auto; border:1px solid var(--w-line); border-radius:var(--w-r-md); background:var(--w-panel); }
/* Attente (spinner) et état vide : centrés dans la hauteur disponible */
.ui-modal-wait, .ui-modal-empty { flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px; gap:8px; }
.ui-modal-wait .ui-tile, .ui-modal-empty .ui-tile { width:48px; height:48px; border-radius:14px; margin-bottom:6px; }
.ui-modal-wait .ui-tile svg, .ui-modal-empty .ui-tile svg { width:22px; height:22px; }
.ui-modal-wait .ui-tile { animation:uiPulse 1.5s ease-in-out infinite; }
.ui-modal-wait-title { font-size:14px; font-weight:700; color:var(--w-ink); margin:0; }
.ui-modal-wait-steps { font-size:12.5px; color:var(--w-soft); line-height:1.8; }
.ui-modal-wait-live { font-size:12px; font-weight:600; color:var(--w-ink-2); min-height:1.2em; }
.ui-modal-empty { font-size:13.5px; color:var(--w-soft); line-height:1.5; }
.ui-modal-empty b, .ui-modal-empty strong { color:var(--w-ink-2); }
@keyframes uiModalIn { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes uiPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.6; transform:scale(.94); } }
/* ── Barre de progression ──────────────────────────────────────────────────── */
.ui-progress { width:100%; max-width:320px; height:6px; border-radius:var(--w-r-full); background:var(--w-line-soft); overflow:hidden; }
.ui-progress > div { height:100%; width:0; border-radius:var(--w-r-full); background:var(--w-accent); transition:width .5s ease; }
/* ── Puces à cocher (catégories, formats) ─────────────────────────────────── */
.ui-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ui-chips--box { max-height:230px; overflow-y:auto; padding:10px; border:1px solid var(--w-line); border-radius:var(--w-r-md); background:var(--w-canvas); resize:vertical; }
.ui-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--w-line); border-radius:var(--w-r-full); background:var(--w-panel); font-size:12.5px; color:var(--w-ink-2); cursor:pointer; user-select:none; transition:border-color .12s, background-color .12s, color .12s; }
.ui-chip input { width:14px; height:14px; margin:0; accent-color:var(--w-accent); }
.ui-chip:hover { border-color:var(--w-accent-line); }
.ui-chip:has(:checked) { background:var(--w-accent-soft); border-color:var(--w-accent-line); color:var(--w-accent-deep); font-weight:600; }
.ui-chip:has(:focus-visible) { outline:2px solid var(--w-accent); outline-offset:2px; }
.ui-chips-empty { font-size:12.5px; color:var(--w-soft); padding:4px 2px; }
/* Ligne d'actions de sélection (« Tout cocher · Tout décocher ») */
.ui-select-links { display:flex; gap:12px; align-items:center; margin-top:6px; }
.ui-select-links button, .ui-select-links .ui-link { font:inherit; font-size:12px; font-weight:600; color:var(--w-accent-deep); background:none; border:0; padding:0; cursor:pointer; }
.ui-select-links button:hover { text-decoration:underline; }
.ui-select-links button:focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; border-radius:var(--w-r-xs); }
/* ── Bloc de section dans un formulaire de modale ─────────────────────────── */
.ui-fieldset { display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--w-line-soft); }
.ui-fieldset:first-child { padding-top:0; border-top:0; }
.ui-fieldset > .ui-label { font-weight:700; }
.ui-label .ui-hint { font-weight:400; color:var(--w-soft); font-size:11.5px; }
.ui-label .ui-info { color:var(--w-soft); cursor:help; font-size:12px; }
.ui-label-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
/* ── Rangée de résultat (liste de sujets / pool) ──────────────────────────── */
.ui-row { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-bottom:1px solid var(--w-line-soft); }
.ui-row:last-child { border-bottom:0; }
.ui-row:nth-child(even) { background:var(--w-panel-2); }
.ui-row--center { align-items:center; }
.ui-row > input[type="checkbox"] { width:16px; height:16px; margin:2px 0 0; accent-color:var(--w-accent); flex-shrink:0; }
.ui-row--center > input[type="checkbox"] { margin-top:0; }
.ui-row-body { flex:1; min-width:0; }
.ui-row-title { font-size:13px; font-weight:600; color:var(--w-ink); line-height:1.35; }
.ui-row-tags { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:4px; }
.ui-row-meta { font-size:11.5px; color:var(--w-soft); margin-top:3px; line-height:1.4; }
.ui-row-meta.is-anchor { color:var(--w-c-cyan, #0891b2); cursor:help; }
.ui-score { flex-shrink:0; width:44px; text-align:center; cursor:help; }
.ui-score b { display:block; font-family:var(--w-display); font-size:17px; font-weight:800; line-height:1; color:var(--w-ink); }
.ui-score small { font-size:10px; color:var(--w-soft); } /* jamais --w-faint sur du texte (2,65:1) */
.ui-score--pos b { color:var(--w-c-green-text); } .ui-score--warn b { color:#b45309; } .ui-score--neg b { color:var(--w-c-red); }
.ac-dark .ui-score--warn b { color:var(--w-c-amber); }
/* Mini-étiquettes de résultat : plus petites qu'un badge, teintes sémantiques */
.ui-tag { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:6px; font-size:10.5px; font-weight:600; line-height:1.5; white-space:nowrap; background:var(--w-line-soft); color:var(--w-ink-2); }
.ui-tag--pos { background:var(--w-c-green-bg); color:var(--w-c-green-text); }
.ui-tag--warn { background:var(--w-eeat-bg); color:var(--w-eeat-ink); }
.ui-tag--neg { background:var(--w-c-red-bg); color:var(--w-c-red-text, var(--w-c-red)); }
.ui-tag--info { background:var(--w-c-blue-bg); color:var(--w-c-blue); }
.ui-tag--violet { background:var(--w-c-violet-bg); color:var(--w-c-violet); }
.ui-tag--amber { background:var(--w-c-amber-bg); color:#c2410c; }
.ui-tag--accent { background:var(--w-accent-soft); color:var(--w-accent-deep); }
.ui-tag--solid { background:var(--w-ink-2); color:#fff; }
.ac-dark .ui-tag--pos { color:var(--w-c-green); } .ac-dark .ui-tag--amber { color:var(--w-c-amber); } .ac-dark .ui-tag--solid { background:var(--w-line-strong); color:var(--w-ink); }
.ui-legend-tags { display:flex; gap:12px; font-size:11.5px; color:var(--w-soft); flex-wrap:wrap; }
.ui-legend-tags .is-right { margin-left:auto; font-style:italic; }
/* Tableau dans une liste défilante de modale : en-tête collant */
.ui-modal-list .ui-table thead th { position:sticky; top:0; background:var(--w-panel); z-index:1; }
.ui-table th.is-sort { cursor:pointer; user-select:none; }
.ui-table th.is-sort:hover { color:var(--w-ink); }
.ui-table td.is-num { text-align:right; } .ui-table th.is-num { text-align:right; }
.ui-table tr.is-muted td { opacity:.55; }
.ui-table--dense th { padding:8px 10px; } .ui-table--dense td { padding:7px 10px; font-size:12.5px; }
.ui-table td.is-check, .ui-table th.is-check { width:36px; padding-left:10px; padding-right:4px; text-align:center; }
.ui-table td.is-check input, .ui-table th.is-check input { width:15px; height:15px; margin:0; accent-color:var(--w-accent); vertical-align:middle; }
.ui-table td.is-truncate { max-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Pagination compacte */
.ui-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 0 0; font-size:12.5px; color:var(--w-soft); }
.ui-pager .ui-check { --w-field-h:30px; font-size:12.5px; color:var(--w-soft); }
.ui-pager-nav { display:inline-flex; align-items:center; gap:8px; }
.ui-pager-nav span { font-variant-numeric:tabular-nums; min-width:80px; text-align:center; }
/* Champ compact (barre de filtres) */
.ui-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; --w-field-h:36px; }
.ui-filters > * { flex:0 0 auto; }
.ui-filters > .is-grow { flex:1 1 100px; min-width:100px; }
/* Champ de titre éditable dans une rangée */
.ui-row .ui-inline-field { --w-field-h:32px; flex:1; min-width:0; }
.ui-row > .ui-btn--sm { --ui-btn-h:30px; font-size:12px; padding:0 10px; }
.ui-btn--soft { background:var(--w-accent-soft); color:var(--w-accent-deep); border-color:transparent; }
.ui-btn--soft:hover { background:var(--w-accent-line, #c7d2fe); color:var(--w-accent-deep); }
.ui-btn--violet { background:var(--w-c-violet-bg); color:#6d28d9; border-color:transparent; }
.ui-btn--violet:hover { background:#ddd6fe; color:#5b21b6; }
.ac-dark .ui-btn--violet { color:var(--w-c-violet); } .ac-dark .ui-btn--violet:hover { background:rgba(167,139,250,.24); color:var(--w-c-violet); }
.ui-btn--amber { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border-color:transparent; }
.ui-btn--amber:hover { background:#fde68a; color:#78350f; }
.ac-dark .ui-btn--amber:hover { background:rgba(245,158,11,.24); color:var(--w-eeat-ink); }
.ui-btn--danger-soft { background:var(--w-c-red-tint); color:var(--w-c-red); border-color:var(--w-c-red-line); }
.ui-btn--danger-soft:hover { background:var(--w-c-red); color:#fff; border-color:var(--w-c-red); }
.ac-dark .ui-btn--danger-soft { background:var(--w-c-red-bg); border-color:transparent; }
/* Encart d'option mis en avant (aiguillage « En faire des silos ») */
.ui-check--boxed { padding:6px 10px; border:1px solid var(--w-accent-line, #c7d2fe); background:var(--w-accent-soft); color:var(--w-accent-deep); border-radius:var(--w-r-sm); font-size:12.5px; }
/* Alerte compacte (notes, statut GSC, aperçu coût) */
.ui-alert--compact { padding:9px 12px; border-radius:var(--w-r-md); box-shadow:none; font-size:12.5px; line-height:1.5; color:var(--w-ink-2); display:block; }
.ui-alert--compact b, .ui-alert--compact strong { color:var(--w-ink); }
.ui-alert--compact a { color:inherit; font-weight:600; text-decoration:underline; }
.ui-alert--muted { background:var(--w-canvas); border-color:var(--w-line-soft); border-left-color:var(--w-line-strong); color:var(--w-soft); }
.ui-alert--pos.ui-alert--compact { background:var(--w-c-green-bg); border-color:transparent; border-left-color:var(--w-c-green); color:var(--w-c-green-text); }
.ac-dark .ui-alert--pos.ui-alert--compact { color:var(--w-c-green); }
.ui-alert--neg.ui-alert--compact { color:var(--w-c-red); }
.ui-alert--warn.ui-alert--compact { color:var(--w-eeat-ink); }
.ui-alert--info.ui-alert--compact { background:var(--w-seo-bg); border-color:transparent; border-left-color:var(--w-seo-ink); color:var(--w-seo-ink); }
.ui-alert--compact .ui-btn { margin-left:8px; vertical-align:middle; }
/* ══ Toasts (MagicToast, x-topbar.php) ══════════════════════════════════════════════════════════
Le conteneur vit HORS de l'enveloppe de page : les jetons --w-* n'y sont pas hérités, on pose
donc des jetons locaux jour/nuit (nuit = une enveloppe .ac-dark présente sur la page).
Canon : carte blanche à halo, pastille d'icône teintée par type, texte encre, ✕ discret. ═══ */
.toast-container { --t-panel:#ffffff; --t-ink:#191933; --t-soft:#6a6e87; --t-line:#eaebf6; --t-sh:0 12px 32px -8px rgba(37,62,214,.22), 0 1px 3px rgba(25,25,51,.08);
--t-pos:#16a34a; --t-pos-bg:#dcfce7; --t-neg:#dc2626; --t-neg-bg:#fee2e2; --t-info:#4f46e5; --t-info-bg:#eef0ff; --t-warn:#d97706; --t-warn-bg:#fef3c7;
position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column-reverse; gap:10px; pointer-events:none; max-width:min(420px, calc(100vw - 32px)); }
body:has(.ac-dark) .toast-container { --t-panel:#1a1b2b; --t-ink:#ecedf5; --t-soft:#9a9eb8; --t-line:#272941; --t-sh:0 12px 32px -8px rgba(0,0,0,.6);
--t-pos:#4ade80; --t-pos-bg:rgba(74,222,128,.16); --t-neg:#f87171; --t-neg-bg:rgba(248,113,113,.16); --t-info:#948dff; --t-info-bg:rgba(123,115,240,.18); --t-warn:#fbbf24; --t-warn-bg:rgba(251,191,36,.16); }
.toast { --t-tone:var(--t-info); --t-tone-bg:var(--t-info-bg); pointer-events:auto; display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; min-width:280px; max-width:100%;
background:var(--t-panel); color:var(--t-ink); border:1px solid var(--t-line); border-left:3px solid var(--t-tone); border-radius:var(--w-r-lg); box-shadow:var(--t-sh);
font-size:13.5px; font-weight:500; line-height:1.4; backdrop-filter:none; transform:none; animation:toastSlideIn .3s cubic-bezier(.16,1,.3,1) both; }
.toast::before { content:""; flex-shrink:0; width:28px; height:28px; border-radius:var(--w-r-sm); background-color:var(--t-tone-bg);
-webkit-mask:none; mask:none; background-image:var(--t-icon); background-repeat:no-repeat; background-position:center; background-size:16px 16px; }
.toast > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.toast > button, .toast-close { flex-shrink:0; width:28px; height:28px; border-radius:var(--w-r-sm); border:0; background:transparent; color:var(--t-soft); cursor:pointer; font:inherit; font-size:13px; display:inline-grid; place-items:center; opacity:1; padding:0; margin-left:0; }
.toast > button:hover, .toast-close:hover { background:var(--t-tone-bg); color:var(--t-ink); }
.toast > button:focus-visible { outline:2px solid var(--t-tone); outline-offset:2px; }
.toast-success { --t-tone:var(--t-pos); --t-tone-bg:var(--t-pos-bg); --t-icon:url("data:image/svg+xml;utf8,"); }
.toast-error { --t-tone:var(--t-neg); --t-tone-bg:var(--t-neg-bg); --t-icon:url("data:image/svg+xml;utf8,"); }
.toast-info { --t-tone:var(--t-info); --t-tone-bg:var(--t-info-bg); --t-icon:url("data:image/svg+xml;utf8,"); }
.toast-warning { --t-tone:var(--t-warn); --t-tone-bg:var(--t-warn-bg); --t-icon:url("data:image/svg+xml;utf8,"); }
body:has(.ac-dark) .toast-success { --t-icon:url("data:image/svg+xml;utf8,"); }
body:has(.ac-dark) .toast-error { --t-icon:url("data:image/svg+xml;utf8,"); }
body:has(.ac-dark) .toast-info { --t-icon:url("data:image/svg+xml;utf8,"); }
body:has(.ac-dark) .toast-warning { --t-icon:url("data:image/svg+xml;utf8,"); }
.toast.is-hiding { animation:toastSlideOut .25s ease-in forwards; }
@media (prefers-reduced-motion: reduce) { .toast, .toast.is-hiding, .ui-modal { animation:none; } .ui-modal-wait .ui-tile { animation:none; } }
.ui-icon-btn--danger:hover { color:var(--w-c-red); background:var(--w-c-red-bg); }
.ui-filters > * { min-width:0; }
.ui-filters .form-select, .ui-filters .form-input { padding-left:10px; padding-right:10px; }
.ui-pager .ui-check b { color:var(--w-ink-2); font-variant-numeric:tabular-nums; }
.ui-page-head .ui-page-icon.ui-tile--lg { width:34px; height:34px; border-radius:9px; }
.ui-page-head .ui-page-icon.ui-tile--lg svg { width:17px; height:17px; }
/* ══ PAGES RELIFTÉES — enveloppe `.ui-relift` (19/09 nuit) ═══════════════════════════════════════════
Une page qui adopte l'en-tête canon pose `ui-relift` sur son enveloppe de famille. Effets :
fond uni (plus d'aurora ni de mesh), gouttière commune 28 px, en-tête collé sous la barre haute,
et MISE AU CANON DES PRIMITIVES HÉRITÉES (Tailwind : .card .btn-* .badge* .data-table .stat-card
.section-title .alert-* .modal-box) — alias de transition, le temps que chaque page passe aux
classes ui-*. Ils vivent ICI (couche commune), jamais dans une feuille de module. ═══════════════ */
.ui-relift { background-image:none !important; background-color:var(--w-canvas) !important; --w-canvas:#f7f7fb; --w-line:#e9eaf4; padding-top:0 !important; }
.ui-relift.ac-dark { --w-canvas:#0e0f16; --w-line:#272941; }
.ui-relift::before, .ui-relift::after { display:none !important; }
.ui-relift > .ui-page-head { margin-top:0; }
/* Cartes */
.ui-relift .card, .ui-relift .table-card, .ui-relift .config-panel-card { background:var(--w-panel); border:1px solid var(--ui-card-line); border-radius:var(--ui-card-r); box-shadow:var(--ui-card-sh); backdrop-filter:none; color:var(--w-ink); padding:20px; transition:none; }
.ui-relift .card:hover { box-shadow:var(--ui-card-sh); transform:none; }
.ui-relift .section-title { font-family:var(--w-display); font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--w-ink); margin:0 0 4px; }
.ui-relift .section-subtitle { font-size:12.5px; color:var(--w-soft); margin:0 0 14px; }
/* Boutons */
.ui-relift .btn-primary, .ui-relift .btn-secondary, .ui-relift .btn-danger, .ui-relift .btn-warning { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--ui-btn-h); padding:0 16px; border-radius:var(--w-r-md); font-size:14px; font-weight:600; line-height:1; letter-spacing:0; box-shadow:none; transition:background-color .15s, border-color .15s, color .15s; filter:none; }
.ui-relift .btn-primary { background:var(--w-accent-solid, var(--w-accent)); color:#fff; border:1px solid transparent; }
.ui-relift .btn-primary:hover { background:var(--w-accent-deep); transform:none; box-shadow:none; }
.ui-relift .btn-secondary { background:var(--w-panel); color:var(--w-ink); border:1px solid var(--w-line-strong); }
.ui-relift .btn-secondary:hover { border-color:var(--w-ink-2); color:var(--w-ink); background:var(--w-panel); transform:none; box-shadow:none; }
.ui-relift .btn-secondary svg { color:var(--btn-ico, var(--w-accent-deep)); }
.ui-relift .btn-danger { background:var(--w-c-red-bg); color:var(--w-c-red); border:1px solid transparent; }
.ui-relift .btn-danger:hover { background:var(--w-c-red); color:#fff; transform:none; box-shadow:none; }
.ui-relift .btn-warning { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border:1px solid transparent; }
.ui-relift .btn-sm { height:32px; padding:0 12px; font-size:13px; border-radius:var(--w-r-sm); }
.ui-relift .btn-xs { height:28px; padding:0 10px; font-size:12px; border-radius:7px; }
.ui-relift .btn-primary:disabled, .ui-relift .btn-secondary:disabled, .ui-relift .btn-danger:disabled { opacity:.55; cursor:not-allowed; }
.ui-relift :is(.btn-primary, .btn-secondary, .btn-danger, .btn-warning):focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; }
/* Badges */
.ui-relift .badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--w-r-full); font-size:11.5px; font-weight:600; line-height:1.4; white-space:nowrap; background:var(--w-line-soft); color:var(--w-ink-2); border:1px solid transparent; }
.ui-relift :is(.badge-success, .badge-green) { background:var(--w-c-green-bg); color:var(--w-c-green-text); border-color:transparent; }
.ac-dark.ui-relift :is(.badge-success, .badge-green) { color:var(--w-c-green); }
.ui-relift :is(.badge-danger, .badge-red, .badge-rose) { background:var(--w-c-red-bg); color:var(--w-c-red); border-color:transparent; }
.ui-relift :is(.badge-warning, .badge-amber) { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border-color:var(--w-eeat-line); }
.ui-relift :is(.badge-info, .badge-blue) { background:var(--w-c-blue-bg); color:var(--w-c-blue); border-color:transparent; }
.ui-relift :is(.badge-purple, .badge-pink) { background:var(--w-c-violet-bg); color:var(--w-c-violet); border-color:transparent; }
.ui-relift .badge-neutral { background:var(--w-line-soft); color:var(--w-ink-2); border-color:transparent; }
/* Tableaux */
.ui-relift .data-table { width:100%; border-collapse:collapse; background:none; border:0; border-radius:0; box-shadow:none; }
.ui-relift .data-table thead tr { background:none; }
.ui-relift .data-table th { text-align:left; padding:8px 14px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--w-soft); border-bottom:1px solid var(--w-line); background:none; white-space:nowrap; }
.ui-relift .data-table td { padding:8px 14px; font-size:13px; color:var(--w-ink-2); border-top:1px solid var(--w-line-soft); border-bottom:0; vertical-align:middle; background:none; }
.ui-relift .data-table tbody tr:first-child td { border-top:0; }
.ui-relift .data-table tbody tr:hover td { background:var(--w-panel-2); }
.ui-relift .data-table tbody tr { background:none; transition:none; }
/* Tuiles de chiffres (ex « stat-card » en aplat dégradé) : carte blanche, chiffre teinté */
.ui-relift .stat-card { --stat-ink:var(--w-accent); background:var(--w-panel) !important; border:1px solid var(--ui-card-line); border-radius:var(--ui-card-r); box-shadow:var(--ui-card-sh); color:var(--w-ink); padding:16px 20px; transition:none; }
.ui-relift .stat-card::before { display:none; }
.ui-relift .stat-card:hover { box-shadow:var(--ui-card-sh) !important; transform:none; }
.ui-relift .stat-card-blue { --stat-ink:var(--w-c-blue); } .ui-relift .stat-card-green { --stat-ink:var(--w-c-green); } .ui-relift .stat-card-amber { --stat-ink:var(--w-c-amber); }
.ui-relift :is(.stat-card-pink, .stat-card-purple) { --stat-ink:var(--w-c-violet); } .ui-relift :is(.stat-card-red, .stat-card-rose) { --stat-ink:var(--w-c-red); }
.ui-relift .stat-card :is(.stat-value, .text-3xl, .text-2xl) { font-family:var(--w-display); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--stat-ink); font-variant-numeric:tabular-nums; }
.ui-relift .stat-card :is(.stat-label, .text-sm, .text-xs) { color:var(--w-soft) !important; font-size:12.5px; font-weight:500; opacity:1; }
.ui-relift .stat-card .stat-card-icon { background:var(--w-line-soft); color:var(--stat-ink); }
/* Alertes */
.ui-relift :is(.alert-info, .alert-success, .alert-warning, .alert-danger, .alert-error) { border-radius:var(--w-r-md); padding:10px 12px; font-size:12.5px; line-height:1.5; box-shadow:none; }
.ui-relift .alert-info { background:var(--w-seo-bg); color:var(--w-seo-ink); border:1px solid transparent; }
.ui-relift .alert-success { background:var(--w-c-green-bg); color:var(--w-c-green-text); border:1px solid transparent; }
.ui-relift .alert-warning { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border:1px solid var(--w-eeat-line); }
.ui-relift :is(.alert-danger, .alert-error) { background:var(--w-c-red-tint); color:var(--w-c-red); border:1px solid var(--w-c-red-line); }
/* Libellés et modales héritées */
.ui-relift .form-label { font-size:12.5px; font-weight:600; color:var(--w-ink-2); margin-bottom:6px; }
.ui-relift :is(.modal-box, .modal-box-lg) { background:var(--w-panel); color:var(--w-ink); border:1px solid var(--ui-card-line); border-radius:16px; box-shadow:0 24px 64px -16px rgba(25,25,51,.35); backdrop-filter:none; padding:24px; }
.ui-relift .modal-overlay { background:rgba(25,25,51,.48); backdrop-filter:blur(6px); }
/* Onglets magic_tabs : canon souligné sur toute page reliftée (règles portées d'autocomposer.css) */
.ui-relift .magic-tabs-wrapper { margin:0 0 16px; }
.ui-relift nav.magic-tabs { display:flex; gap:4px; padding:0; margin:0 0 16px !important; background:none !important; border:0; border-bottom:1px solid var(--w-line); border-radius:0; box-shadow:none !important; }
.ui-relift .magic-tab { display:inline-flex; align-items:center; gap:8px; padding:10px 14px 12px; margin-bottom:-1px; font-size:13.5px; font-weight:600; color:var(--w-soft); background:none; border:0; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; box-shadow:none; }
.ui-relift .magic-tab:hover { color:var(--w-ink); background:none; }
.ui-relift nav.magic-tabs .magic-tab.active, .ui-relift nav.magic-tabs .magic-tab.active:hover { color:var(--w-accent) !important; background:none !important; border-bottom-color:var(--w-accent); box-shadow:none !important; }
.ui-relift .magic-tab:focus-visible { outline:2px solid var(--w-accent); outline-offset:-2px; }
.ui-relift .magic-tabs-robot { display:none !important; }
.ui-relift .magic-tabs-wrapper { margin:0 0 16px; padding:0; background:none; border:0; box-shadow:none; }
/* Enveloppe .ac-page sans .ac-body (ex. Keyword Storage) : même gouttière que .ac-body */
.ac-page.ui-relift:not(:has(> .ac-body)) { padding:0 28px 32px !important; }
/* ══ FAMILLES (wpm- gsc- elg- phx- cluster- kw- bv-) : alias vers le canon, sous `.ui-relift` ═══════════
Même principe que les primitives Tailwind ci-dessus : la couche commune redessine les classes de
famille au canon (carte, bouton, pilule, tableau, KPI, titre de section) tant que le balisage n'a pas
migré vers ui-*. Le LAYOUT (grilles, colonnes, tiroirs) reste dans la feuille de famille. ═══════════ */
/* Cartes de famille */
.ui-relift :is(.wpm-card, .gsc-card, .elg-card, .phx-page-card, .cluster-card, .card.cluster-card, .ac-card, .cl-create-card, .phx-source-card, .phx-preset-card, .wpm-pool-card, .eeat-card) {
background:var(--w-panel); border:1px solid var(--ui-card-line); border-radius:var(--ui-card-r); box-shadow:var(--ui-card-sh); }
.ui-relift :is(.wpm-card, .gsc-card, .elg-card, .phx-page-card, .cluster-card):hover { box-shadow:var(--ui-card-sh); transform:none; }
.ui-relift :is(.cluster-card, .card.cluster-card)::before { display:none; }
/* Titres de section / de carte */
.ui-relift :is(.gsc-card-title, .wpm-section-h, .wpm-section-title, .phx-page-card-title, .mg-card-title, .elg-guide-h, .kw-toolbar h3, .cl-section-title) {
font-family:var(--w-display); font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--w-ink); }
.ui-relift :is(.gsc-card-sub, .wpm-section-hint, .phx-page-card-subtitle, .wpm-muted, .elg-muted) { font-size:12.5px; color:var(--w-soft); }
/* Boutons de famille : secondaire par défaut, primaire quand la famille le dit */
.ui-relift :is(.wpm-btn, .gsc-btn, .elg-btn, .elg-mini, .cluster-cta-btn, .phx-btn-secondary, .phx-btn-primary, .ac-btn, .ac-btn-neo, .ac-btn-ghost, .kw-mini, .gsc-mbtn) {
display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--ui-btn-h); padding:0 14px; border-radius:var(--w-r-md); font-size:13.5px; font-weight:600; line-height:1;
background:var(--w-panel); color:var(--w-ink); border:1px solid var(--w-line-strong); box-shadow:none; text-transform:none; letter-spacing:0; transition:background-color .15s, border-color .15s, color .15s; }
.ui-relift :is(.wpm-btn, .gsc-btn, .elg-btn, .elg-mini, .ac-btn, .kw-mini):hover { border-color:var(--w-ink-2); color:var(--w-ink); background:var(--w-panel); transform:none; box-shadow:none; }
.ui-relift :is(.wpm-btn-primary, .gsc-btn-primary, .elg-btn-primary, .elg-mini.is-primary, .cluster-cta-btn, .phx-btn-primary, .ac-btn-neo, .wpm-btn.wpm-btn-primary) {
background:var(--w-accent-solid, var(--w-accent)); color:#fff; border-color:transparent; }
.ui-relift :is(.wpm-btn-primary, .gsc-btn-primary, .elg-btn-primary, .cluster-cta-btn, .phx-btn-primary, .ac-btn-neo):hover { background:var(--w-accent-deep); color:#fff; border-color:transparent; }
.ui-relift :is(.cluster-cta-btn.cluster-cta-secondary, .wpm-btn-ghost, .gsc-btn-ghost, .ac-btn-ghost) { background:transparent; color:var(--w-accent-deep); border-color:transparent; }
.ui-relift :is(.cluster-cta-btn.cluster-cta-secondary, .wpm-btn-ghost, .gsc-btn-ghost, .ac-btn-ghost):hover { background:var(--w-accent-soft); color:var(--w-accent-deep); }
.ui-relift :is(.wpm-btn-xs, .gsc-btn-sm, .elg-mini, .kw-mini, .gsc-mbtn) { height:32px; padding:0 12px; font-size:13px; border-radius:var(--w-r-sm); }
.ui-relift :is(.elg-mini.is-warn) { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border-color:transparent; }
.ui-relift :is(.elg-mini.is-ok) { background:var(--w-c-green-bg); color:var(--w-c-green-text); border-color:transparent; }
.ui-relift :is(.wpm-iconbtn, .cluster-icon-btn, .gsc-icon-btn, .elg-x) { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--w-r-sm); color:var(--w-soft); border:1px solid transparent; background:transparent; }
.ui-relift :is(.wpm-iconbtn, .cluster-icon-btn, .elg-x):hover { color:var(--w-accent-deep); background:var(--w-accent-soft); }
.ui-relift :is(.wpm-btn, .gsc-btn, .elg-btn, .elg-mini, .cluster-cta-btn, .ac-btn, .kw-mini):focus-visible { outline:2px solid var(--w-accent); outline-offset:2px; }
.ui-relift :is(.wpm-btn, .gsc-btn, .elg-btn, .elg-mini, .cluster-cta-btn):disabled { opacity:.55; cursor:not-allowed; }
/* Pilules / badges de famille */
.ui-relift :is(.wpm-pill, .gsc-badge, .gsc-pill, .elg-pill, .cl-pill, .cl-status-badge, .bv-st, .wpm-drift-badge, .wpm-count-chip, .phx-price-tag, .gsc-tabbadge) {
display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--w-r-full); font-size:11.5px; font-weight:600; line-height:1.4; white-space:nowrap; background:var(--w-line-soft); color:var(--w-ink-2); border:1px solid transparent; text-transform:none; letter-spacing:0; }
.ui-relift :is(.wpm-pill.is-ok, .gsc-badge-ok, .elg-pill.is-ok, .cl-pill[data-status="published"], .cl-pill[data-status="converted"]) { background:var(--w-c-green-bg); color:var(--w-c-green-text); }
.ac-dark.ui-relift :is(.wpm-pill.is-ok, .gsc-badge-ok, .elg-pill.is-ok) { color:var(--w-c-green); }
.ui-relift :is(.wpm-pill.is-error, .gsc-badge-error, .elg-pill.is-danger, .cl-pill[data-status="failed"]) { background:var(--w-c-red-bg); color:var(--w-c-red); }
.ui-relift :is(.wpm-pill.is-warn, .gsc-badge-warn, .cl-pill[data-status="generating"], .cl-pill[data-status="pending"]) { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border-color:var(--w-eeat-line); }
.ui-relift :is(.gsc-badge-info, .cl-pill[data-status="generated"], .cl-pill[data-status="validated"]) { background:var(--w-c-blue-bg); color:var(--w-c-blue); }
.ui-relift :is(.wpm-pill.is-idle, .gsc-badge-muted, .elg-pill.is-idle, .elg-pill.is-lock, .cl-pill[data-status="draft"]) { background:var(--w-line-soft); color:var(--w-soft); }
/* Tableaux de famille */
.ui-relift :is(.wpm-table, .gsc-table, .elg-table, .kw-tbl, .phx-urls-table, table.bv-grid, .phx-estim-tbl) { width:100%; border-collapse:collapse; }
.ui-relift :is(.wpm-table, .gsc-table, .elg-table, .kw-tbl, .phx-urls-table, table.bv-grid, .phx-estim-tbl) th { text-align:left; padding:8px 14px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--w-soft); border-bottom:1px solid var(--w-line); background:var(--w-panel); white-space:nowrap; }
.ui-relift :is(.wpm-table, .gsc-table, .elg-table, .kw-tbl, .phx-urls-table, table.bv-grid, .phx-estim-tbl) td { padding:8px 14px; font-size:13px; color:var(--w-ink-2); border-top:1px solid var(--w-line-soft); border-bottom:0; vertical-align:middle; }
.ui-relift :is(.wpm-table, .gsc-table, .elg-table, .kw-tbl, .phx-urls-table) tbody tr:hover td { background:var(--w-panel-2); }
.ui-relift :is(.wpm-table-wrap, .gsc-table-wrap, .elg-table-wrap) { border:0; border-radius:0; box-shadow:none; }
/* KPI de famille : carte blanche, chiffre 26 px teinté, libellé soft — plus de barre latérale ni d'aplat */
.ui-relift :is(.wpm-kpi, .gsc-kpi, .phx-cockpit-stat, .phx-stat-card, .kw-statbox) { --stat-ink:var(--w-accent); background:var(--w-panel); border:1px solid var(--ui-card-line); border-radius:var(--ui-card-r); box-shadow:var(--ui-card-sh); padding:16px 20px; }
.ui-relift :is(.wpm-kpi, .phx-stat-card)::before { display:none; }
.ui-relift .wpm-kpi.ok { --stat-ink:var(--w-c-green); } .ui-relift .wpm-kpi.error { --stat-ink:var(--w-c-red); } .ui-relift .wpm-kpi.total { --stat-ink:var(--w-accent); }
.ui-relift :is(.wpm-kpi-val, .gsc-kpi-value, .phx-cockpit-stat-value, .kw-num) { font-family:var(--w-display); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--stat-ink, var(--w-ink)); font-variant-numeric:tabular-nums; }
.ui-relift :is(.wpm-kpi-lbl, .gsc-kpi-label, .phx-cockpit-stat-label) { font-size:12.5px; color:var(--w-soft); font-weight:500; text-transform:none; letter-spacing:0; margin-top:4px; }
/* Notes / vides / alertes de famille */
.ui-relift :is(.wpm-note, .gsc-note, .elg-alert, .gsc-guide) { background:var(--w-canvas); border:0; border-radius:var(--w-r-md); padding:10px 12px; font-size:12.5px; color:var(--w-ink-2); line-height:1.45; }
.ui-relift :is(.wpm-empty, .gsc-empty, .phx-empty, .cluster-empty-state, .bv-empty) { color:var(--w-soft); font-size:13.5px; }
.ui-relift :is(.gsc-empty-text) { color:var(--w-soft); }
/* Segmentés / sous-onglets de famille : canon .ui-seg / .ui-tab */
.ui-relift :is(.gsc-subtabs, .gsc-subnav, .phx-subtabs-nav, .wpm-dtabs) { display:flex; gap:4px; border-bottom:1px solid var(--w-line); margin:0 0 16px; background:none; padding:0; border-radius:0; box-shadow:none; }
.ui-relift :is(.gsc-subtab, .phx-subtab, .wpm-dtab) { display:inline-flex; align-items:center; gap:8px; padding:8px 12px 10px; margin-bottom:-1px; font-size:13px; font-weight:600; color:var(--w-soft); background:none; border:0; border-bottom:2px solid transparent; border-radius:0; box-shadow:none; }
.ui-relift :is(.gsc-subtab, .phx-subtab, .wpm-dtab):hover { color:var(--w-ink); background:none; }
.ui-relift :is(.gsc-subtab.active, .gsc-subtab.is-active, .gsc-subtab[aria-selected="true"], .phx-subtab.active, .phx-subtab.is-active, .phx-subtab[aria-selected="true"], .wpm-dtab.active, .wpm-dtab.is-active, .wpm-dtab[aria-selected="true"]) { color:var(--w-accent); border-bottom-color:var(--w-accent); background:none; }
/* Barres d'outils : sans carte, gap canon */
.ui-relift :is(.gsc-toolbar, .elg-toolbar, .kw-toolbar, .wpm-card-toolbar) { gap:10px; }
/* Segmenté WP Manager = canon .ui-seg ; strip de stats e-Lagage : chiffres en display, filet gauche conservé */
.ui-relift .wpm-seg { display:inline-flex; padding:3px; background:var(--w-line-soft); border-radius:var(--w-r-md); gap:2px; border:0; }
.ui-relift .wpm-seg button { height:calc(var(--ui-btn-h) - 6px); padding:0 14px; border-radius:var(--w-r-sm); font-size:13px; font-weight:600; color:var(--w-soft); }
.ui-relift .wpm-seg button.active { background:var(--w-panel); color:var(--w-ink); box-shadow:0 1px 2px rgba(25,25,51,.08); }
.ui-relift .elg-stat-n { font-family:var(--w-display); }
.ui-relift .ui-page-title { font-family:var(--w-display); font-weight:700; letter-spacing:-.01em; font-size:16px; }
.ui-relift .ui-page-sub { font-size:12.5px; }
/* Enveloppes en colonne flex (gap 20) : l'en-tête ne cumule pas sa marge avec le gap */
.ui-relift:is(.gsc-page, .elg, .prm-page) { gap:16px; }
.ui-relift:is(.gsc-page, .elg, .prm-page) > .ui-page-head { margin-bottom:0; }
.ui-relift.prm-page > .ui-page-head { animation:none; }
.ui-page-count { font-weight:500; color:var(--w-soft); font-size:13px; margin-left:4px; }
/* Nuit : encarts de famille restés en clair */
.ac-dark.ui-relift .wpm-bulkbar { background:var(--w-accent-soft); border-color:transparent; color:var(--w-ink-2); }
.ac-dark.ui-relift .wpm-cell-group .wpm-group-input { background:var(--w-panel-2); color:var(--w-ink); border-color:var(--w-line); }
.ac-dark.ui-relift .wpm-cell-group .wpm-group-input:hover, .ac-dark.ui-relift .wpm-cell-group .wpm-group-input:focus { background:var(--w-panel-2); }
/* .ac-page dont l'en-tête est HORS de .ac-body : l'enveloppe n'a pas de gouttière, donc pas de marges négatives */
.ac-page.ui-relift:has(> .ac-body) > .ui-page-head { margin-left:0; margin-right:0; }
/* MagicCluster : filtres de statut = segmenté canon ; entrées AutoComposer = boutons secondaires à icône teintée */
.ui-relift #clStatusPills { display:inline-flex; padding:3px; background:var(--w-line-soft); border-radius:var(--w-r-md); gap:2px; }
.ui-relift #clStatusPills .cl-pill { height:calc(var(--ui-btn-h) - 6px); padding:0 12px; border:0 !important; border-radius:8px !important; background:transparent !important; color:var(--w-soft) !important; font-size:13px; font-weight:600; cursor:pointer; box-shadow:none !important; }
.ui-relift #clStatusPills .cl-pill.active { background:var(--w-panel) !important; color:var(--w-ink) !important; box-shadow:0 1px 2px rgba(25,25,51,.08) !important; }
.ui-relift #clStatusPills .cl-pill-count { font-size:11px; color:var(--w-soft); margin-left:4px; }
.ui-relift #clStatusPills .cl-pill.active .cl-pill-count { color:var(--w-soft); }
.ui-relift .cl-cta { display:inline-flex; align-items:center; gap:8px; height:var(--ui-btn-h); padding:0 14px; border-radius:var(--w-r-md); font-size:13.5px; font-weight:600; background:var(--w-panel) !important; color:var(--w-ink) !important; border:1px solid var(--w-line-strong) !important; box-shadow:none !important; }
.ui-relift .cl-cta:hover { border-color:var(--w-ink-2) !important; }
.ui-relift .cl-cta--topics svg { color:var(--w-c-amber); } .ui-relift .cl-cta--kwm svg { color:var(--w-c-green); }
.ui-relift .cl-create-card { padding:16px 20px !important; border:1px solid var(--ui-card-line) !important; border-radius:var(--ui-card-r) !important; box-shadow:var(--ui-card-sh) !important; }
/* Modales et tiroirs de famille : boîte canon (panel, rayon 16, ombre profonde), voile canon */
.ui-relift :is(.gsc-modal-box, .phoenix-modal, .cl-modal-card, .card.cl-modal-card, .cl-build-modal-card, .phoenix-cats-modal) { background:var(--w-panel) !important; color:var(--w-ink); border:1px solid var(--ui-card-line) !important; border-radius:16px !important; box-shadow:0 24px 64px -16px rgba(25,25,51,.35) !important; backdrop-filter:none; }
.ui-relift :is(.gsc-modal, .phoenix-modal-backdrop, .cl-modal-backdrop, .wpm-drawer-backdrop, .elg-drawer, .elg-gd-backdrop, .phx-drawer-backdrop) { background:rgba(25,25,51,.48) !important; backdrop-filter:blur(6px); }
.ui-relift :is(.wpm-drawer-panel, .elg-drawer-panel, .phx-drawer, .elg-gd, .ac-guide-drawer) { background:var(--w-panel); color:var(--w-ink); box-shadow:-12px 0 40px -12px rgba(25,25,51,.35); }
.ui-relift :is(.gsc-modal-head, .wpm-drawer-head, .elg-drawer-head, .phx-drawer-header) { border-bottom:1px solid var(--w-line-soft); }
.ui-relift :is(.phx-drawer-header, .wpm-drawer-head)::before { display:none; }
/* Tiroirs (guide, détail) déclarés DANS l'enveloppe : l'`isolation:isolate` posée pour le mesh (retiré) les
coinçait sous la barre haute (z 30). Plus de mesh → plus de contexte d'empilement. */
.ui-relift { isolation:auto !important; }
/* ══ NUIT sur pages reliftées : les fonds clairs codés en dur (Tailwind, styles en ligne, familles) ═════
Relevé fondateur 19/09 06h : barre de filtres MagicCluster, barre d'outils Calendrier, sections
magic-forms de WP Enhancer, graphique de Stats, cartes PRM, guides RssFinder/PoolCreator… ═══════════ */
.ac-dark.ui-relift :is(.bg-white, .bg-gray-50, .bg-slate-50, .bg-slate-100, .bg-gray-100, .bg-zinc-50, .bg-neutral-50, .bg-indigo-50, .bg-violet-50, .bg-purple-50, .bg-blue-50, .bg-sky-50, .bg-emerald-50, .bg-green-50, .bg-amber-50, .bg-yellow-50, .bg-orange-50, .bg-red-50, .bg-rose-50, .bg-pink-50, .bg-white\/95, .bg-white\/90, .bg-white\/80, .bg-white\/60) { background-color:var(--w-panel-2) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.bg-indigo-50, .bg-violet-50, .bg-purple-50) { background-color:var(--w-accent-soft) !important; }
.ac-dark.ui-relift :is(.bg-amber-50, .bg-yellow-50, .bg-orange-50) { background-color:rgba(245,158,11,.10) !important; }
.ac-dark.ui-relift :is(.bg-emerald-50, .bg-green-50) { background-color:var(--w-c-green-bg) !important; }
.ac-dark.ui-relift :is(.bg-red-50, .bg-rose-50, .bg-pink-50) { background-color:var(--w-c-red-bg) !important; }
.ac-dark.ui-relift :is(.bg-blue-50, .bg-sky-50) { background-color:var(--w-c-blue-bg) !important; }
.ac-dark.ui-relift :is(.text-gray-900, .text-slate-900, .text-gray-800, .text-slate-800, .text-gray-700, .text-slate-700) { color:var(--w-ink-2) !important; }
.ac-dark.ui-relift :is(.text-gray-600, .text-slate-600, .text-gray-500, .text-slate-500) { color:var(--w-soft) !important; }
.ac-dark.ui-relift :is(.border-gray-200, .border-slate-200, .border-gray-100, .border-slate-100, .border-indigo-100, .border-indigo-200) { border-color:var(--w-line) !important; }
/* Styles en ligne blancs (graphiques, encarts) */
.ac-dark.ui-relift :is([style*="background:#fff"], [style*="background: #fff"], [style*="background:#ffffff"], [style*="background:white"], [style*="background-color:#fff"], [style*="background-color: #fff"], [style*="background-color:white"], [style*="background:#f8fafc"], [style*="background:#f9fafb"], [style*="background:#f1f5f9"], [style*="background:#fafafa"]) { background:var(--w-panel-2) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is([style*="background:#fffbeb"], [style*="background:#fef3c7"], [style*="background:#fef9c3"]) { background:rgba(245,158,11,.10) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is([style*="background:#eef2ff"], [style*="background:#ede9fe"], [style*="background:#f5f3ff"]) { background:var(--w-accent-soft) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is([style*="background:#ecfdf5"], [style*="background:#f0fdf4"], [style*="background:#dcfce7"]) { background:var(--w-c-green-bg) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is([style*="background:#fef2f2"], [style*="background:#fee2e2"]) { background:var(--w-c-red-bg) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is([style*="color:#1e293b"], [style*="color:#0f172a"], [style*="color:#374151"], [style*="color:#111827"]) { color:var(--w-ink) !important; }
.ac-dark.ui-relift :is([style*="color:#475569"], [style*="color:#64748b"], [style*="color:#6b7280"]) { color:var(--w-soft) !important; }
/* magic-forms (mg-*) : sections et cartes */
.ac-dark.ui-relift :is(.mg-section, .mg-card, .mg-card-header, .mg-inline-toggle, .mg-cb-row) { background:var(--w-panel-2) !important; border-color:var(--w-line) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.mg-section-title, .mg-card-title, .mg-label) { color:var(--w-ink) !important; }
.ac-dark.ui-relift :is(.mg-hint, .mg-label-hint) { color:var(--w-soft) !important; }
/* Familles */
.ac-dark.ui-relift .cl-filter-bar { background:var(--w-panel) !important; border-color:var(--w-line) !important; }
.ac-dark.ui-relift :is(.cluster-meta-line, .cl-warn-line, .cluster-note) { background:rgba(245,158,11,.10) !important; color:var(--w-ink-2) !important; border-color:rgba(245,158,11,.3) !important; }
.ac-dark.ui-relift :is(.cal-toolbar, .cal-viewtoggle, .cal-month, .cal-card) { background:var(--w-panel) !important; border-color:var(--w-line) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.cal-viewtoggle button, .cal-toolbar button) { color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.cal-viewtoggle button.active, .cal-viewtoggle button.is-active) { background:var(--w-accent-soft) !important; color:var(--w-accent-deep) !important; }
.ac-dark.ui-relift :is(.prm-card, .prm-onboarding, .prm-hero-card, .prm-hero-card.is-accent, .prm-step) { background:var(--w-panel) !important; background-image:none !important; border-color:var(--w-line) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.rss-guide-section, .pc-guide-section, .rss-guide-toc, .pc-guide-toc, .phx-guide-section, .ac-guide-section, .elg-guide-note) { background:var(--w-panel-2) !important; border-color:var(--w-line) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.rss-guide-callout, .pc-guide-callout, .phx-guide-callout, .ac-guide-callout, .rss-guide-tip, .pc-guide-tip, .phx-guide-tip) { background:var(--w-accent-soft) !important; border-color:transparent !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.rss-guide-callout-warn, .pc-guide-callout-warn, .phx-guide-callout-warn) { background:rgba(245,158,11,.10) !important; border-color:rgba(245,158,11,.3) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.wpm-note, .gsc-note, .gsc-guide, .elg-alert, .cu-note) { background:var(--w-panel-2) !important; color:var(--w-ink-2); }
.ac-dark.ui-relift :is(.bv-pl-lot, .bv-kcard, .bv-rcard, .bv-kcol) { background:var(--w-panel-2) !important; border-color:var(--w-line) !important; }
/* Boutons secondaires hérités restés blancs */
.ac-dark.ui-relift :is(.btn-secondary, .btn-success, label.btn-secondary) { background:var(--w-panel) !important; color:var(--w-ink) !important; border-color:var(--w-line-strong) !important; }
.ac-dark.ui-relift .btn-success { background:var(--w-c-green-bg) !important; color:var(--w-c-green) !important; border-color:transparent !important; }
.ac-dark.ui-relift :is([style*="color:#92400e"], [style*="color:#b45309"], [style*="color:#78350f"]) { color:var(--w-eeat-ink) !important; }
.ac-dark.ui-relift :is([style*="border:1px solid #fcd34d"], [style*="border:1px solid #fde68a"]) { border-color:rgba(245,158,11,.3) !important; }
.ac-dark.ui-relift .cal-viewtoggle { background:var(--w-line-soft) !important; }
.ac-dark.ui-relift .cal-viewtoggle .cal-btn.is-active { background:var(--w-panel-2) !important; color:var(--w-accent-deep) !important; }
.ac-dark.ui-relift .cal-viewtoggle .cal-btn:hover { background:var(--w-panel-2); }
.ac-dark.ui-relift :is([class*="bg-gradient-to"], .from-gray-50, .from-white, .to-white, .from-slate-50) { background-image:none !important; background-color:var(--w-panel-2) !important; }
.ui-btn--success { background:var(--w-c-green-bg); color:var(--w-c-green-text); border-color:transparent; }
.ui-btn--success:hover { background:var(--w-c-green); color:#fff; }
.ac-dark .ui-btn--success { color:var(--w-c-green); }
/* ── Suivi de génération des sujets (modale AutoBuilder — cible ChatGPT, 19/09) ── */
.tv2-wait { display:flex; flex-direction:column; gap:16px; padding:24px; overflow-y:auto; height:100%; }
.tv2-head { display:flex; align-items:center; gap:14px; }
.tv2-head .ui-tile--lg { flex-shrink:0; }
.tv2-head-txt { flex:1; min-width:0; }
.tv2-title { margin:0; font-size:18px; font-weight:700; color:var(--w-ink); }
.tv2-sub { margin:2px 0 0; font-size:13px; color:var(--w-soft); }
.tv2-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:var(--w-r-full); background:var(--w-accent-soft); color:var(--w-accent-deep); font-size:12.5px; font-weight:700; white-space:nowrap; }
.tv2-pill i { width:8px; height:8px; border-radius:50%; background:var(--w-accent); animation:tv2Pulse 1.2s ease-in-out infinite; }
.tv2-pill.is-done { background:var(--w-pos-bg); color:var(--w-pos); }
.tv2-pill.is-done i { background:var(--w-pos); animation:none; }
@keyframes tv2Pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.tv2-progress-card { background:var(--w-panel-2); border:1px solid var(--w-line); border-radius:14px; padding:16px 18px; }
.tv2-progress-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.tv2-pct { font-family:var(--w-display); font-size:32px; font-weight:700; letter-spacing:-.02em; line-height:1; color:var(--w-accent); font-variant-numeric:tabular-nums; }
.tv2-time { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12px; color:var(--w-soft); font-variant-numeric:tabular-nums; }
.tv2-time b { font-weight:700; color:var(--w-ink-2); font-size:12.5px; }
.tv2-bar { height:8px; }
.tv2-bar > div { transition:width .6s ease; }
.tv2-note { display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:12px; color:var(--w-soft); }
.tv2-note svg { width:15px; height:15px; flex-shrink:0; }
.tv2-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; align-items:start; }
.tv2-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.tv2-step { display:flex; align-items:flex-start; gap:12px; padding:10px 8px; border-radius:var(--w-r-md); position:relative; }
.tv2-step + .tv2-step::before { content:""; position:absolute; left:19px; top:-8px; height:12px; width:2px; background:var(--w-line); }
.tv2-step.is-done + .tv2-step::before { background:var(--w-accent); }
.tv2-step-dot { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--w-line-soft); color:var(--w-soft); border:2px solid transparent; position:relative; z-index:1; }
.tv2-step.is-current .tv2-step-dot { background:var(--w-accent); color:#fff; box-shadow:0 0 0 4px var(--w-accent-soft); }
.tv2-step.is-done .tv2-step-dot { background:var(--w-accent); color:transparent; font-size:0; }
.tv2-step.is-done .tv2-step-dot::after { content:""; width:9px; height:5px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px); }
.tv2-step-txt { min-width:0; }
.tv2-step-txt b { display:block; font-size:13.5px; font-weight:600; color:var(--w-soft); line-height:1.3; }
.tv2-step-txt span { display:block; font-size:12px; color:var(--w-soft); margin-top:1px; }
.tv2-step.is-current .tv2-step-txt b, .tv2-step.is-done .tv2-step-txt b { color:var(--w-ink); }
.tv2-side { display:flex; flex-direction:column; gap:12px; background:var(--w-panel-2); border:1px solid var(--w-line); border-radius:14px; padding:14px 16px; }
.tv2-side-h { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--w-ink); }
.tv2-side-h svg { width:16px; height:16px; color:var(--w-accent); }
.tv2-live { font-size:12.5px; line-height:1.45; color:var(--w-ink-2); min-height:32px; }
.tv2-cache { border-top:1px solid var(--w-line); padding-top:12px; }
.tv2-cache-h { display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--w-ink); }
.tv2-cache-h svg { width:15px; height:15px; color:var(--w-soft); }
.tv2-cache p { margin:5px 0 0; font-size:11.5px; line-height:1.45; color:var(--w-soft); }
.tv2-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; padding:14px 16px; background:var(--w-accent-soft); border-radius:var(--w-r-lg); }
.tv2-foot-msg { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--w-accent-deep); font-weight:500; min-width:0; }
.tv2-foot-msg svg { width:16px; height:16px; flex-shrink:0; }
.tv2-foot .ui-btn { flex-shrink:0; }
.tv2-foot .ui-btn svg { width:15px; height:15px; }
@media (max-width:720px) { .tv2-grid { grid-template-columns:1fr; } .tv2-foot { flex-direction:column; align-items:stretch; } }
/* ── GARDE tuiles d'icône (19/09) ────────────────────────────────────────────
Bug répété 3 fois : une règle de page qui cible `span` en vrac (ex. `.x-kpi span`,
spécificité 0,1,1) attrape AUSSI le `` de l'icône et lui écrase
sa couleur / son display → icône grise et aplatie. On réaffirme ici l'essentiel avec
une spécificité 0,2,0 : toute règle de page à classe unique perd, les variantes de
taille (.ui-tile--lg/--sm) et les surcharges scopées `.parent .ui-tile` gagnent. */
.ui-tile.ui-tile { color:var(--tile-ink); display:inline-flex; align-items:center; justify-content:center; }
/* ── Région recomposée par un script de fin de page ──────────────────────────── */
/* data-relayout (20/09) : le HTML serveur est l'ancienne mise en page, un script de fin de page la
recompose (cluster-md.js, articles-relift.js…). Sans cette règle, le navigateur peint l'ancien
design pendant le chargement puis bascule. Invisible mais en place (aucun saut) jusqu'à la classe
js-ready, posée par x-head.php à DOMContentLoaded — donc après ces scripts, même s'ils plantent. */
html:not(.js-ready) [data-relayout] { visibility: hidden; }