/* ============================================
   NEURA — PREMIUM SAAS STYLESHEET
   Charte : bleu structure / cyan micro-accent
   Typo : Inter, et rien d’autre
   ============================================ */

:root {
    --bg: #0B0E14;
    --bg2: #12161F;
    --card: #161B26;
    --inp: #0B0E14;
    --bdr: rgba(255,255,255,.06);
    --ba: rgba(0,212,255,.2);
    --t1: #EDF0F7;
    --t2: #8892A8;
    --t3: #4E576B;
    --acc: #00D1FF;
    --grad: linear-gradient(135deg, #00D1FF, #2563eb);
    --gh: linear-gradient(90deg, #00D1FF, #60A5FA);
    --gw: rgba(0,212,255,.25);
    --gw2: rgba(0,212,255,.08);
    /* Boutons primaires — monochrome premium (blanc/encre noire en sombre, inversé en clair).
       Le cyan reste un ACCENT (liens, états actifs, glow), plus une couleur de bouton. */
    --btn-p-bg: #ffffff;
    --btn-p-ink: #0a0a0a;
    --btn-p-shadow: 0 2px 14px rgba(0,0,0,.25);
    --btn-p-glow: 0 6px 24px rgba(255,255,255,.18);
    /* Primary — cyan brand */
    --primary: #00b8d4;
    --primary-hover: #00a0b8;
    --primary-soft: rgba(0,212,255,.1);
    --acc-subtle: rgba(0,212,255,.08);
    --acc-border: rgba(0,212,255,.15);
    --g: #34D399;
    --gbg: var(--subtle-bg);
    --r: #F87171;
    --rbg: rgba(248,113,113,.10);
    --o: #FBBF24;
    --obg: var(--subtle-bg);
    --p: #EC4899;
    --pbg: var(--subtle-bg);
    /* Badges : --badge-bg / -fg / -bdr / -soft-bg / -overlay-bg viennent du bloc
       genere design-boustacom (source : tokens.json). Ne PAS les redefinir ici,
       le bloc genere est plus bas dans le fichier et gagnerait de toute facon.
       Depuis les tokens v1.4.0 les SEPT tokens de badge viennent du coeur. */
    /* Design tokens — border-radius (5 niveaux) */
    --rd-xs: 4px;
    --rd-sm: 8px;
    --rd-md: 10px;
    --rd: 14px;
    --rd-lg: 16px;
    --rd-pill: 999px;
    --pl: 50px;
    /* Design tokens — box-shadow (4 niveaux) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,.15);
    --shadow-lg: 0 8px 32px rgba(0,0,0,.25);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.35);
    --sh: 0 1px 3px rgba(0,0,0,.2), 0 4px 12px rgba(0,0,0,.15);
    --tr: .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Design tokens — font-size (6 niveaux) */
    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-base: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 18px;
    --fs-2xl: 22px;
    --fs-3xl: 28px;
    /* Design tokens — spacing */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 16px;
    --sp-lg: 24px;
    --sp-xl: 32px;
    --sp-2xl: 48px;
    --sp-section: 36px;
    --mn-pad: 32px;
    --mn-pad-m: 16px;
    /* Design tokens — breakpoints (utiliser ces 4 valeurs UNIQUEMENT) */
    /* sm: 640px / md: 768px / lg: 1024px / xl: 1280px */
    /* Design tokens — danger/warning/success */
    --suc: #22c55e;
    --wrn: #f59e0b;
    --dng: #ef4444;
    --inf: #3b82f6;
    --subtle-line: rgba(255,255,255,.04);
    --subtle-bg: rgba(255,255,255,.05);
    --subtle-hover: rgba(0,212,255,.03);
    --overlay: rgba(0,0,0,.2);
    --sb-hover: rgba(0,212,255,.04);
    --card-hover: #1C2230;
    --scrollbar: rgba(255,255,255,.1);
    --glass: rgba(255,255,255,0.03);
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-hover: rgba(255,255,255,0.08);
    --glass-blur: blur(12px);
}



/* ====== LIGHT THEME — Premium SaaS 2026 ====== */
/* Design rules: 8px radius, Slate scale, no glassmorphism, subtle shadows */
[data-theme="light"] {
    --bg: #f8fafc;
    --bg2: #ffffff;
    --card: #ffffff;
    --inp: #f8fafc;
    --bdr: #e2e8f0;
    --ba: rgba(0,212,255,.12);
    --t1: #0f172a;
    --t2: #475569;
    --t3: #94a3b8;
    --acc: #00a8c7;
    --primary: #0891b2;
    --primary-hover: #0e7490;
    --primary-soft: rgba(0,212,255,.06);
    --acc-subtle: rgba(0,212,255,.05);
    --acc-border: rgba(0,212,255,.15);
    --gw: rgba(0,168,199,.18);
    --gw2: rgba(0,168,199,.06);
    --grad: linear-gradient(135deg, #00D1FF, #2563eb);
    /* Boutons primaires — inversés en clair (encre foncée, texte blanc) */
    --btn-p-bg: #0f172a;
    --btn-p-ink: #ffffff;
    --btn-p-shadow: 0 2px 14px rgba(0,0,0,.18);
    --btn-p-glow: 0 6px 24px rgba(15,23,42,.28);
    --g: #16a34a;
    --gbg: var(--subtle-bg);
    --r: #dc2626;
    --rbg: rgba(220,38,38,.06);
    --o: #d97706;
    --obg: var(--subtle-bg);
    --p: #db2777;
    --pbg: var(--subtle-bg);
    --rd: 14px;
    --rd-sm: 10px;
    --rd-lg: 16px;
    /* Shadows light mode : moins prononcées car fond clair */
    --shadow-sm: 0 1px 2px rgba(15,23,42,.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,.08);
    --shadow-lg: 0 8px 32px rgba(15,23,42,.10);
    --shadow-xl: 0 24px 64px rgba(15,23,42,.15);
    --sh: 0 1px 2px rgba(0,0,0,.05);
    --subtle-line: #f1f5f9;
    --subtle-bg: #f1f5f9;
    --subtle-hover: rgba(0,212,255,.03);
    --overlay: rgba(15,23,42,.03);
    --sb-hover: rgba(0,212,255,.04);
    --card-hover: rgba(0,212,255,.02);
    --scrollbar: rgba(15,23,42,.08);
    --glass-bg: #ffffff;
    --glass-border: #e2e8f0;
    --glass-hover: rgba(0,212,255,.03);
    --glass-blur: none;
    --grad: linear-gradient(135deg, #00D1FF, #2563eb);
    --gh: linear-gradient(90deg, #00D1FF, #60A5FA);
    --suc: #16a34a;
    --wrn: #d97706;
    --dng: #dc2626;
    --inf: #2563eb;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--t1);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.6;
    overflow-x: clip;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, .stit, .ptit, .ltxt { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: -.3px; text-transform: none; }

/* ====== LAYOUT ====== */
.lay { display: flex; min-height: 100vh; }

/* ====== SIDEBAR ====== */
.sb {
    width: 260px;
    background: var(--bg2);
    border-right: 1px solid var(--bdr);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    z-index: 100;
    overflow-y: auto;
    transition: width .25s cubic-bezier(.4,0,.2,1), padding .25s cubic-bezier(.4,0,.2,1);
}

/* Sidebar collapsed */
.sb.collapsed {
    width: 60px;
    padding: 20px 4px;
    overflow: hidden;
}
.sb.collapsed .logo { padding-bottom: 12px; margin-bottom: 12px; justify-content: center; align-items: center; }
/* Sidebar repliée : le toggle thème reste visible en icône seule (label masqué) */
.sb.collapsed .theme-toggle { gap: 0; }
.logo-full { text-decoration: none; display: inline-flex; align-items: center; }
.logo-mini { display: none; }
.sb.collapsed .logo-full { display: none; }
.sb.collapsed .logo-mini { display: block; }

/* Logo PNG officiel — switch dark/light selon le thème (data-theme sur html) */
.logo-img--light { display: none !important; }
[data-theme="light"] .logo-img--dark { display: none !important; }
[data-theme="light"] .logo-img--light { display: block !important; }

.sb.collapsed .ni {
    justify-content: center;
    padding: 10px;
    font-size: 0;
    line-height: 0;
    gap: 0;
}
.sb.collapsed .ni svg { font-size: initial; }
.sb.collapsed .ns,
.sb.collapsed .ni-desc,
.sb.collapsed .sf,
.sb.collapsed .sb-client-info,
.sb.collapsed .sb-client-selector {
    display: none;
}
/* Badges en mode collapsed : petit pastille sur l'icône */
.sb.collapsed .nb {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px !important;
    line-height: 16px;
    border-radius: 8px;
    z-index: 5;
}
/* In collapsed mode, hide group headers but show the links inside as icons */
.sb.collapsed .ns-group .ns-toggle { display: none; }
.sb.collapsed .ns-group .ns-links { display: block; }
.sb.collapsed .ns-group { display: block; }
/* Tooltips sidebar repliée : gérés par le moteur global shared/ui/tooltip.js
   (rendu dans <body>, position:fixed, ancré à droite du rail). On garde juste
   position:relative pour le positionnement des badges/pastilles dans .ni. */
.sb.collapsed .ni { position: relative; }

/* Toggle button — inside sidebar, not floating */
.sb-toggle {
    width: 100%;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 8px;
    transition: background .15s, color .15s;
    padding: 0;
    margin-bottom: 8px;
}
.sb-toggle:hover { background: rgba(255,255,255,.06); color: var(--t1); }
.sb-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sb.collapsed .sb-toggle svg { transform: rotate(180deg); }
.sb-toggle-label { font-size: 11px; }
.sb.collapsed .sb-toggle-label { display: none; }
[data-theme="light"] .sb-toggle:hover { background: rgba(0,0,0,.04); }

.logo { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 20px; border-bottom: 1px solid var(--bdr); margin-bottom: 20px; }
.logo-word { font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -1px; display: flex; }
.logo-n { background: linear-gradient(180deg, #00f4ff 0%, #1e7eff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.logo-rest { color: var(--t1); }
.logo-byline { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--t2); margin-left: 2px; }

.ns { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--t3); padding: 0 8px; margin: 18px 0 6px; }

.ni {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 10px;
    color: var(--t2);
    cursor: pointer;
    transition: all .15s ease;
    font-size: 13px;
    font-weight: 500;
    margin: 1px 0;
    text-decoration: none;
    position: relative;
}
.ni:hover { background: rgba(255,255,255,.05); color: var(--t1); }
.ni.act {
    background: rgba(255,255,255,.08);
    color: var(--t1);
    border: none;
    box-shadow: none;
    padding-left: 14px;
    font-weight: 600;
    position: relative;
}
.ni.act::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--t1);
    border-radius: 0 3px 3px 0;
}
/* ============================================================
   LIGHT THEME — Component Overrides (Premium SaaS 2026)
   Rules: 8px radius, #e2e8f0 borders, shadow-sm, no glass
   ============================================================ */

/* --- Sidebar --- */
[data-theme="light"] .sb { background: var(--card); border-right: 1px solid var(--bdr); }
[data-theme="light"] .ni { border-radius: 8px; }
[data-theme="light"] .ni:hover { background: var(--subtle-bg); color: var(--t1); }
[data-theme="light"] .ni.act { background: var(--subtle-bg); color: var(--t1); font-weight: 600; }
[data-theme="light"] .ni.act::before { background: var(--t1); }

/* --- Accent touches (cyan brand) --- */
[data-theme="light"] .ptit { color: var(--t1); }
[data-theme="light"] .psub { color: var(--t3); }
/* btn.bp: monochrome premium via --btn-p-bg/--btn-p-ink, no override needed */

/* Accent: active filter state */
[data-theme="light"] .fiches-kw-switch input:checked + .fiches-kw-switch-slider { background: var(--acc); }
[data-theme="light"] .ni svg { opacity: .65; }
[data-theme="light"] .ni.act svg { opacity: 1; }
[data-theme="light"] .ns { color: var(--t3); font-size: 10px; letter-spacing: 1.5px; }
[data-theme="light"] .sb-toggle:hover { background: var(--subtle-bg); }
[data-theme="light"] .logo { border-bottom-color: #e5e7eb; }

/* --- Sections / Cards --- */
[data-theme="light"] .sec { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
[data-theme="light"] .sh { border-bottom: 1px solid var(--subtle-bg); }

/* --- Forms --- */
[data-theme="light"] .si { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd-sm); }
[data-theme="light"] .si:focus { border-color: var(--t1); box-shadow: 0 0 0 3px rgba(0,212,255,.1); }
[data-theme="light"] select.si { border-radius: var(--rd-sm) !important; }

/* --- Buttons --- */
/* btn.bp light: inherits monochrome tokens from base */
[data-theme="light"] .btn.bs { background: var(--card); border: 1px solid var(--bdr); color: var(--t2); border-radius: var(--rd-pill); }
[data-theme="light"] .btn.bs:hover { background: var(--bg2); border-color: rgba(0,212,255,.4); color: var(--t1); }

/* --- Client KPI Cards --- */
[data-theme="light"] .kpi-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
[data-theme="light"] .kpi-card:hover { border-color: rgba(0,212,255,.35); box-shadow: 0 4px 8px rgba(0,212,255,.08); transform: translateY(-1px); }
[data-theme="light"] .kpi-label { color: var(--t3); }

[data-theme="light"] .fh-modal { background: var(--card); border-color: var(--bdr); box-shadow: 0 24px 64px rgba(0,0,0,.15); }
[data-theme="light"] .fh-header { border-color: var(--bdr); }
[data-theme="light"] .fh-close { background: var(--subtle-bg); color: var(--t3); }
[data-theme="light"] .fh-close:hover { background: var(--bdr); color: var(--t1); }
[data-theme="light"] .fh-chart-box { background: var(--bg2); border-color: var(--bdr); }
[data-theme="light"] .fh-table td { border-color: var(--subtle-bg); }
[data-theme="light"] .fh-table tr:hover td { background: rgba(0,212,255,.04); }

/* --- Badges --- */
/* Pas d'override de border-radius ici : les badges .nb gardent le pill de base
   (var(--pl)) en clair comme en sombre. L'ancien 4px les rendait carrés en clair. */

/* --- Keywords panel --- */
[data-theme="light"] .f-kw-panel { background: var(--bg2); border-color: var(--bdr); border-radius: 0 0 8px 8px; }
[data-theme="light"] .f-kw-bar { background: var(--bdr); }
[data-theme="light"] .f-kw-head { border-bottom-color: var(--bdr); }
[data-theme="light"] .f-kw-row { border-bottom-color: var(--subtle-bg); }
[data-theme="light"] .f-kw-scan { background: var(--subtle-bg); }

/* --- Toggle switch --- */
[data-theme="light"] .fiches-kw-switch-slider { background: var(--bdr); }

/* --- Scrollbar --- */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--bdr); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--t3); }

/* --- Client header --- */
[data-theme="light"] .client-city-badge { background: rgba(0,212,255,.08); color: var(--t1); border-radius: var(--rd-sm); }
[data-theme="light"] .btn-gmaps { border: 1px solid var(--bdr); border-radius: var(--rd-sm); }
[data-theme="light"] .btn-gmaps:hover { border-color: rgba(0,212,255,.4); background: rgba(0,212,255,.05); color: var(--t1); }

/* --- Health dots --- */
[data-theme="light"] .dot-g { background: var(--g); }
[data-theme="light"] .dot-o { background: #d97706; }
[data-theme="light"] .dot-r { background: var(--r); }

/* --- Reviews distribution --- */
[data-theme="light"] .reviews-dist-row .dist-bar { background: var(--bdr); }

/* --- Photos --- */
[data-theme="light"] .photos-filter-btn:hover { border-color: var(--bdr); }
/* legacy photo-badge light overrides removed — now using .ph-badge--* */

/* --- Section headers --- */
[data-theme="light"] .fch-section-header:hover { background: var(--bg2); }

/* --- Biz card overlay (map) --- */
[data-theme="light"] .biz-card-map-overlay { background: rgba(255,255,255,.95); border: 1px solid var(--bdr); border-radius: 8px; }
.ni svg { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; opacity: .8; }
.ni.act svg { opacity: 1; }
.ni .ni-icon-wrap { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.04); flex-shrink: 0; }
.ni.act .ni-icon-wrap { background: rgba(127,127,127,.16); }
.ni-desc { font-size: 10px; color: var(--t3); font-weight: 400; display: none; line-height: 1.3; white-space: normal; }
.ni:has(.ni-desc) { flex-wrap: wrap; }
.ni .ni-desc { display: block; width: 100%; margin-left: 28px; margin-top: -4px; }

/* ni-content / ni-sub — removed from sidebar v4, kept for compat */
.ni-content { display: flex; flex-direction: column; min-width: 0; }
.ni-sub { display: none; }

.nb { margin-left: auto; background: var(--r); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--pl); }
.nb.or { background: var(--r); }

.sf { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--bdr); }
.ui { display: flex; align-items: center; gap: 10px; }
.ua { width: 34px; height: 34px; background: var(--btn-p-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--btn-p-ink); font-family: 'Inter', sans-serif; }
.un { font-size: 13px; font-weight: 600; }
.up { font-size: 11px; color: var(--t3); }

/* ====== MAIN ====== */
.mn { margin-left: 260px; flex: 1; padding: var(--mn-pad); min-width: 0; max-width: calc(100vw - 260px); overflow-x: hidden; box-sizing: border-box; transition: margin-left .25s cubic-bezier(.4,0,.2,1), max-width .25s cubic-bezier(.4,0,.2,1); }
.sb.collapsed ~ .mn, .sb.collapsed + .sidebar-overlay + .mn { margin-left: 60px; max-width: calc(100vw - 60px); }

.ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-section); }
.ptit { font-size: 24px; font-weight: 700; text-transform: none; letter-spacing: -.5px; color: var(--t1); -webkit-text-fill-color: initial; background: none; line-height: 1.3; }
.psub { color: var(--t2); font-size: 14px; margin-top: 6px; }
.ha { display: flex; gap: var(--sp-sm); align-items: center; }

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
    font-size: 13px; color: var(--t3); flex-wrap: wrap;
}
.breadcrumb-item {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--t3); text-decoration: none; font-weight: 500;
    transition: color .15s;
}
.breadcrumb-item:hover { color: var(--t1); }
.breadcrumb-item svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.breadcrumb-current { color: var(--t1); font-weight: 600; cursor: default; }
.breadcrumb-current:hover { color: var(--t1); }
.breadcrumb-sep { color: var(--t3); opacity: .5; font-weight: 300; }

/* ====== HUB TABS (admin / account) ====== */
.hub-tabs-bar {
    border-bottom: 1px solid var(--bdr);
    background: var(--bg);
    margin-bottom: 8px;
}
.hub-tabs-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 24px;
}
.hub-tabs-inner::-webkit-scrollbar { display: none; }
.hub-tab-link {
    padding: 14px 18px;
    color: var(--t3);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s ease;
    flex-shrink: 0;
}
.hub-tab-link:hover { color: var(--t1); }
.hub-tab-link--active { color: var(--t1); font-weight: 700; border-bottom-color: var(--t1); }
.hub-tab-badge {
    background: var(--r);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.3;
}
@media (max-width: 640px) {
    .hub-tabs-inner { padding: 0 12px; }
    .hub-tab-link { padding: 10px 12px; font-size: 12px; }
}
/* Onglets d'un groupe de la fiche (views/client.php) : même barre que les hubs,
   posée dans le flux de la page au-dessus du contenu. */
.fiche-subtabs { margin: 0 0 12px; background: transparent; }
.fiche-subtabs[hidden] { display: none; }
.fiche-subtabs .hub-tabs-inner { max-width: none; padding: 0; }
.fiche-subtabs .hub-tab-link { padding: 10px 14px; }

/* ====== ADMIN GRILLES RESPONSIVE ====== */
.adm-grid-4,
.adm-grid-3,
.adm-grid-5,
.adm-grid-2 {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}
.adm-grid-2 { grid-template-columns: 1fr 1fr; }
.adm-grid-4 { grid-template-columns: repeat(4, 1fr); }
.adm-grid-3 { grid-template-columns: repeat(3, 1fr); }
.adm-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 1024px) {
    .adm-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .adm-grid-2 { grid-template-columns: 1fr; }
    .adm-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .adm-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .adm-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .adm-grid-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .adm-grid-3 { grid-template-columns: 1fr; gap: 10px; }
    .adm-grid-5 { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ====== BUTTONS ====== */
.btn {
    padding: 11px 20px;
    border-radius: var(--rd-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: var(--tr);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: 'Inter';
    letter-spacing: 0.01em;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.bp { background: var(--btn-p-bg); color: var(--btn-p-ink); font-weight: 700; box-shadow: var(--btn-p-shadow); border: none; }
.bp:hover { box-shadow: var(--btn-p-glow); transform: translateY(-1px); }
.bp:active { transform: translateY(0); box-shadow: var(--btn-p-shadow); }
.bs { background: transparent; color: var(--t1); border: 1px solid var(--bdr); }
.bs:hover { background: var(--subtle-bg); border-color: var(--acc-border); }
.bd { background: transparent; color: var(--r); border: 1px solid var(--r); }
.bd:hover { background: rgba(239, 68, 68, .08); border-color: var(--r); }
.bd:active { transform: translateY(0); background: rgba(239, 68, 68, .14); }
.bsm { padding: 6px 14px; font-size: 12px; }
.bok { background: transparent; color: var(--t1); border: 1px solid var(--bdr); }
.bok:hover { background: var(--subtle-bg); border-color: var(--t1); }
.bok:active { transform: translateY(0); background: var(--subtle-bg); }
.bwn { background: transparent; color: var(--t1); border: 1px solid var(--bdr); }
.bwn:hover { background: var(--subtle-bg); border-color: var(--t1); }
.bwn:active { transform: translateY(0); background: var(--subtle-bg); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }

/* ====== CLIENT SELECTOR ====== */
.cs {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 14px 20px;
    margin-bottom: 22px;
    box-shadow: var(--sh);
}
.cs label { font-size: 13px; font-weight: 600; color: var(--t2); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cs label svg { width: 16px; height: 16px; stroke: var(--t2); fill: none; stroke-width: 2; }
.csel {
    background: var(--inp);
    border: 1px solid var(--bdr);
    color: var(--t1);
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Inter';
    font-size: 13px;
    font-weight: 500;
    min-width: 280px;
    cursor: pointer;
}
.csel:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 2px var(--acc-subtle); }
.cm { display: flex; gap: 20px; margin-left: auto; font-size: 13px; color: var(--t2); }
.cm strong { color: var(--t1); font-weight: 600; }

/* ====== STAT CARDS ====== */
.sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-section); }
.sc {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--rd);
    padding: 24px;
    transition: var(--tr);
    box-shadow: var(--sh);
    animation: fu .4s ease both;
}
.sc:nth-child(1) { animation-delay: .05s; }
.sc:nth-child(2) { animation-delay: .12s; }
.sc:nth-child(3) { animation-delay: .19s; }
.sc:nth-child(4) { animation-delay: .26s; }
.sc:hover { border-color: rgba(0,212,255,.2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.sl { font-size: 11px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.sv { font-size: 28px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.sch { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; margin-top: 6px; padding: 2px 8px; border-radius: 8px; }
.sch.u { color: var(--t1); background: var(--subtle-bg); }
.sch.d { color: var(--r); background: var(--rbg); }

/* ====== SECTIONS ====== */
.sec {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    overflow: hidden;
    margin-bottom: var(--sp-section);
    box-shadow: var(--sh);
    animation: fu .4s ease both;
    animation-delay: .15s;
}
/* Full-bleed modules (photos, etc.) — no card wrapper */
.sec--naked {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: var(--sp-section);
    box-shadow: none;
    animation: fu .4s ease both;
    animation-delay: .15s;
}
.sh { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--sp-lg); border-bottom: 1px solid var(--bdr); }
.stit { font-size: 15px; text-transform: none; font-weight: 700; letter-spacing: -.2px; }

/* ====== FORMS ====== */
.si {
    background: var(--inp);
    border: 1px solid rgba(255, 255, 255, .06);
    color: var(--t1);
    padding: 10px 16px;
    border-radius: 14px;
    font-family: 'Inter';
    font-size: 13px;
    width: 240px;
    transition: border-color .2s, box-shadow .2s;
}
.si::placeholder { color: var(--t3); }
.si:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 3px rgba(0,212,255, .12); }
/* iOS : un input avec font-size < 16px déclenche un zoom automatique de Safari au focus.
   On force 16px sur TOUS les champs en mobile pour neutraliser ce zoom (règle globale). */
@media (max-width: 768px) {
    input, select, textarea, .si { font-size: 16px !important; }
    /* Le 16px anti-zoom iOS est obligatoire, mais il grossit le champ. On reprend
       la hauteur sur le padding vertical : ~38px au lieu de ~44px, toujours
       au-dessus de la cible tactile de 36px, et un formulaire moins massif. */
    .si { padding: 9px 14px; }
    textarea.si { padding: 10px 14px; }
    .field-label { margin-bottom: 4px; }
}
/* Variante pleine largeur (champ de modale/form, evite le style="width:100%" inline) */
.si--full { width: 100%; box-sizing: border-box; }
/* Largeur auto (petit select type "Afficher 20") */
.si--auto { width: auto; min-width: 0; }
/* Champ numerique etroit (numero de page, quantite) */
.si--num { width: 72px; text-align: center; }
/* Champ qui grandit dans une ligne flex (input + bouton) */
.si--grow { flex: 1; min-width: 0; width: auto; }
/* Zone de reponse auto-grandissante (la hauteur est pilotee en JS via scrollHeight) */
.si--reply { width: 100%; min-height: 150px; resize: vertical; box-sizing: border-box; }
/* Pastille de selection de couleur (input type=color) */
.si--color { width: 36px; height: 36px; padding: 2px; cursor: pointer; }
/* Champ hexadecimal a cote d'une pastille couleur */
.si--hex { width: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
/* Editeur de code (HTML signature, snippets) : police monospace */
.si--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5; tab-size: 2; }
/* Champ integre dans un groupe avec prefixe (sans bordure propre, grandit) */
.si--seamless { border: none; background: transparent; border-radius: 0; flex: 1; min-width: 0; }
/* Cases a cocher / radio : taille auto + accent brand (evite accent-color inline) */
input.si[type="checkbox"], input.si[type="radio"] { width: auto; accent-color: var(--t1); }

/* Form groups (side panels) */
.fg { margin-bottom: 18px; }
.fl { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 6px; letter-spacing: .2px; }
.fl-hint { display: block; font-size: 11px; color: var(--t3); margin-top: 4px; line-height: 1.4; }
.fi {
    width: 100%;
    background: var(--inp);
    border: 1px solid rgba(255, 255, 255, .06);
    color: var(--t1);
    padding: 10px 16px;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: border-color .2s, box-shadow .2s;
}
.fi::placeholder { color: var(--t3); }
.fi:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 3px rgba(0,212,255, .12); }
select.fi { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b98ab' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
textarea.fi { resize: vertical; min-height: 80px; }

/* ====== TABLE ====== */
table { width: 100%; border-collapse: collapse; }
/* Liste des fiches : passage en cartes empilees sur mobile (sinon les colonnes
   de droite, dont les actions, sont coupees hors ecran) */
@media (max-width: 640px) {
    .loc-table thead { display: none; }
    .loc-table, .loc-table tbody, .loc-table tr, .loc-table td { display: block; width: 100%; box-sizing: border-box; }
    .loc-table tr { border: 1px solid var(--bdr); border-radius: var(--rd-sm); margin-bottom: 12px; padding: 10px 14px; background: var(--card); }
    .loc-table td { border: none; padding: 6px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: right; }
    .loc-table td::before { content: attr(data-label); color: var(--t2); font-weight: 600; font-size: var(--fs-sm); text-align: left; flex-shrink: 0; }
    .loc-table td.loc-td-name { display: block; padding: 0 0 8px; margin-bottom: 6px; border-bottom: 1px solid var(--bdr); text-align: left; }
    .loc-table td.loc-td-name::before { content: none; }
    .loc-table td.loc-td-actions { display: block; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--bdr); text-align: left; }
    .loc-table td.loc-td-actions::before { content: attr(data-label); display: block; margin-bottom: 8px; }
    .loc-table td.loc-td-actions > div { justify-content: flex-start !important; }
    .loc-table td.loc-td-actions .btn { flex: 1; min-width: 0; justify-content: center; }
}
th { text-align: left; padding: 12px 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--t3); border-bottom: 1px solid var(--bdr); background: var(--overlay); }
td { padding: 16px 20px; font-size: 13px; border-bottom: 1px solid var(--bdr); transition: background .15s ease; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--subtle-hover); }
.kn { font-weight: 600; }
.kv { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: 12px; color: var(--t2); }

/* ====== POSITION BADGES ====== */
.pb { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: 13px; }
/* Code couleur Localo : vert 1-3, orange 4-10, rose 11-20, rouge 20+ */
.p3 { background: var(--subtle-bg); color: var(--t1); border: 1px solid var(--subtle-bg); }
.p10 { background: var(--subtle-bg); color: var(--t1); border: 1px solid var(--subtle-bg); }
.p20 { background: var(--subtle-bg); color: var(--t1); border: 1px solid var(--subtle-bg); }
.po { background: var(--rbg); color: var(--r); border: 1px solid var(--rbg); }

/* ====== TREND ARROWS ====== */
.ta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.tu { color: var(--t1); }
.td { color: var(--r); }
.ts { color: var(--t3); }

/* ====== FLASH MESSAGES ====== */
.flash {
    padding: 12px 20px;
    border-radius: var(--rd);
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    animation: fu .3s ease;
}
.flash-success { background: var(--gbg); color: var(--g); border: 1px solid var(--gbg); }
.flash-error { background: var(--rbg); color: var(--r); border: 1px solid var(--rbg); }
.flash-info { background: var(--gw2); color: var(--t1); border: 1px solid var(--ba); }

/* ====== STATUS BADGES ====== */
.ps { display: inline-block; padding: 3px 10px; border-radius: var(--pl); font-size: 11px; font-weight: 600; }
.pss { background: var(--subtle-bg); color: var(--t1); }
.psp { background: var(--subtle-bg); color: var(--t1); }
.psd { background: var(--subtle-bg); color: var(--t2); }

/* ====== ANIMATIONS ====== */
@keyframes fu { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ====== RESPONSIVE ====== */
@media (max-width: 1280px) {
    .sg { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .mn { margin-left: 0; padding: var(--mn-pad-m); }
    .sg { grid-template-columns: 1fr; }
    .ptit { font-size: 22px; }
    .cs { flex-direction: column; align-items: stretch; }
    .cm { margin-left: 0; }
}

/* ====== REVIEWS ====== */
.reviews-list { padding: 0; max-width: 100%; overflow: hidden; }
.rev-card { padding: 20px 24px; border-bottom: 1px solid var(--bdr); transition: var(--tr); overflow: hidden; word-break: break-word; overflow-wrap: break-word; max-width: 100%; box-sizing: border-box; }
.rev-card:hover { background: var(--card-hover); }
.rev-card:last-child { border-bottom: none; }
.rev-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; min-width: 0; }
.rev-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--btn-p-bg); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--btn-p-ink); font-family: 'Inter', sans-serif; flex-shrink: 0; }
.rev-author { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.rev-comment { font-size: 13px; color: var(--t2); line-height: 1.6; margin: 8px 0; padding: 0; overflow-wrap: break-word; word-break: break-word; }
.rev-reply { background: rgba(0,212,255,.05); border-left: 3px solid var(--acc); padding: 12px 16px; margin: 8px 0; border-radius: 0 8px 8px 0; overflow-wrap: break-word; word-break: break-word; }
.rev-reply-draft { border-left-color: var(--t1); background: rgba(0,212,255,.04); border-radius: 8px; }
.rev-actions { padding: 0; }
.rev-draft-text { font-size: 13px; line-height: 1.6; color: var(--t1); white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.rev-location-badge { font-size: 11px; color: var(--t3); background: var(--inp); padding: 2px 8px; border-radius: 4px; display: inline-block; }

/* ====== GOOGLE POSTS ====== */
.posts-list { padding: 0; }

.post-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 80px; padding: 6px 10px; border-radius: 8px; transition: background .15s; }
.post-stat:hover { background: rgba(0,212,255,.06); }
.post-stat-n { font-size: 22px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.post-stat-l { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; }

.post-card {
    border-bottom: 1px solid var(--bdr);
    transition: var(--tr);
}
.post-card:hover { background: var(--card-hover); }
.post-card:last-child { border-bottom: none; }

.post-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    gap: 12px;
}

.post-card-image {
    padding: 0 16px 12px;
}
.post-card-image img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--bdr);
}

.post-card-content {
    padding: 0 16px 12px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--t2);
    white-space: pre-wrap;
}

.post-card-meta {
    padding: 0 16px 12px;
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--t3);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

.post-card-error {
    margin: 0 16px 12px;
    padding: 8px 12px;
    background: var(--rbg);
    border: 1px solid var(--rbg);
    border-radius: 8px;
    font-size: 12px;
    color: var(--r);
}

/* Post status badges */
.ps-draft { background: var(--subtle-bg); color: var(--t1); }
.ps-scheduled { background: rgba(0,212,255,.1); color: var(--t1); }
.ps-published { background: var(--gbg); color: var(--g); }
.ps-failed { background: var(--rbg); color: var(--r); }

/* Post type badge */
.post-type-badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    border: 1px solid;
    letter-spacing: .3px;
}

/* Post type legend */
.post-type-legend { display:flex; gap:12px; padding:10px 20px; border-bottom:1px solid var(--bdr); flex-wrap:wrap; align-items:center; }
.post-type-legend-item { font-size:11px; color:var(--t2); display:flex; align-items:center; gap:4px; }

/* ====== AUTO LISTS ====== */
.list-card {
    padding: 20px;
    border-bottom: 1px solid var(--bdr);
    transition: var(--tr);
}
.list-card:hover { background: var(--card-hover); }
.list-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 12px;
}
.list-card-name {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    letter-spacing: -.2px;
}
.list-card-schedule {
    font-size: 12px;
    color: var(--t2);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}
.list-card-stats {
    font-size: 12px;
    color: var(--t3);
    display: flex;
    gap: 12px;
}
.list-toggle {
    width: 44px;
    height: 24px;
    border-radius: 14px;
    border: 1px solid var(--bdr);
    background: var(--inp);
    cursor: pointer;
    position: relative;
    transition: var(--tr);
    flex-shrink: 0;
}
.list-toggle.active {
    background: var(--g);
    border-color: var(--g);
}
.list-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    transition: var(--tr);
}
.list-toggle.active::after { left: 22px; }
.day-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--tr);
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
}
.day-btn.selected,
.day-btn.active {
    background: var(--primary-soft);
    color: var(--t1);
    border-color: var(--ba);
}
.day-btn:hover:not(.selected):not(.active) {
    border-color: var(--t1);
    color: var(--t1);
}
.list-post-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--subtle-line);
    font-size: 13px;
}
.list-post-row:hover { background: rgba(0,212,255,.03); }
.list-post-row.is-next {
    border-left: 3px solid var(--acc);
    background: rgba(0,212,255,.05);
}
.list-post-order {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--t3);
    width: 30px;
    text-align: center;
    flex-shrink: 0;
}
.list-post-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
}
.list-post-arrows button {
    background: none;
    border: 1px solid var(--bdr);
    color: var(--t3);
    width: 22px;
    height: 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
}
.list-post-arrows button:hover {
    border-color: var(--t1);
    color: var(--t1);
}
.ps-list_pending {
    background: rgba(0,212,255,.1);
    color: var(--t1);
}
.list-inactive { opacity: .5; }

/* ====== SIDEBAR BACK BUTTON ====== */
.sidebar-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0 0 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    cursor: pointer;
    transition: var(--tr);
    border: 1px solid transparent;
}
.sidebar-back:hover { background: var(--gw2); border-color: var(--ba); }
.sidebar-back svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

.sidebar-location-info {
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(0,212,255,.04);
    border: 1px solid var(--ba);
    border-radius: 8px;
}
.sidebar-loc-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-loc-city { font-size: 11px; color: var(--t3); }

/* ====== DASHBOARD CLIENT GRID ====== */
.client-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.client-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 0;
    cursor: pointer;
    transition: var(--tr);
    box-shadow: var(--sh);
    animation: fu .4s ease both;
    overflow: hidden;
}
.client-card:hover {
    border-color: rgba(0, 188, 212, .2);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.client-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
}
.client-card-icon {
    width: 40px;
    height: 40px;
    background: var(--btn-p-bg); color: var(--btn-p-ink);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 18px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    flex-shrink: 0;
}
.client-card-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.client-card-city {
    font-size: 12px;
    color: var(--t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-card-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--subtle-line);
}
.client-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.client-stat-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.client-stat-label {
    font-size: 10px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.client-card-reviews {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--subtle-line);
}
.client-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}
.client-rating-stars {
    font-size: 14px;
    color: var(--o);
    letter-spacing: 1px;
}
.client-rating-num {
    font-size: 14px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: var(--t1);
}
.client-card-review-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--t3);
}
.client-unanswered {
    color: var(--t1);
    font-weight: 600;
    background: var(--subtle-bg);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
}

.client-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    transition: var(--tr);
}
.client-card:hover .client-card-footer { gap: 10px; }
.client-card-footer svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: var(--tr);
}

/* ====== REVIEWS ALL: LOCATION BADGE ====== */
.rev-location-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0,212,255,.08);
    border: 1px solid var(--ba);
    color: var(--t1);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 8px;
    transition: background .2s, color .2s, border-color .2s;
}
a.rev-location-badge:hover {
    background: rgba(0,212,255,.18);
    border-color: var(--t1);
    color: #fff;
}

/* ====== FILTER BAR ====== */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
}
.filter-bar select {
    background: var(--inp);
    border: 1px solid var(--bdr);
    color: var(--t1);
    padding: 6px 12px;
    border-radius: 8px;
    font-family: 'Inter';
    font-size: 12px;
    cursor: pointer;
}
.filter-bar select:focus { outline: none; border-color: var(--t1); }
.filter-btn {
    padding: 7px 16px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    transition: var(--tr);
    font-family: 'Inter';
}
.filter-btn:hover { border-color: var(--t1); color: var(--t1); }
.filter-btn.active { background: var(--primary-soft); color: var(--t1); border-color: var(--ba); }

/* ====== REPORTS PRO UI ====== */

/* Template count badge */
.rpt-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 11px; font-size: 11px; font-weight: 700;
    background: var(--gw2); color: var(--t1);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

/* ── KPI Summary Row ── */
.rpt-kpi-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px; padding: 16px 20px; margin-bottom: 4px;
}
.rpt-kpi-card {
    background: var(--card); border: 1px solid var(--bdr);
    border-radius: 14px; padding: 18px 16px;
    display: flex; align-items: center; gap: 14px;
    transition: var(--tr);
}
.rpt-kpi-card:hover { border-color: var(--ba); }
.rpt-kpi-icon {
    width: 42px; height: 42px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,212,255,.08); flex-shrink: 0;
}
.rpt-kpi-icon svg { width: 20px; height: 20px; stroke: var(--t2); fill: none; stroke-width: 2; }
.rpt-kpi-value {
    font-size: 26px; font-weight: 800; line-height: 1;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--t1);
}
.rpt-kpi-label {
    font-size: 11px; font-weight: 600; color: var(--t3);
    text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}

/* ── Template list ── */
.rpt-list { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 20px; }

/* ── Template card ── */
.rpt-card {
    background: var(--card); border: 1px solid var(--bdr);
    border-radius: var(--rd); transition: var(--tr); overflow: hidden;
}
.rpt-card:hover { border-color: var(--ba); }
.rpt-card.expanded { border-color: var(--t1); box-shadow: 0 0 0 1px rgba(0,212,255,.15); }

/* Card top row — clickable */
.rpt-card-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; gap: 12px; cursor: pointer;
}
.rpt-card-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.rpt-card-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Card icon */
.rpt-card-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--subtle-bg); flex-shrink: 0;
}
.rpt-card-icon svg { width: 18px; height: 18px; stroke: var(--t3); fill: none; stroke-width: 2; }
.rpt-card-icon.active { background: rgba(0,212,255,.08); }
.rpt-card-icon.active svg { stroke: var(--t2); }

/* Card name + meta */
.rpt-card-name {
    font-size: 15px; font-weight: 700; letter-spacing: -.2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rpt-card-meta {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--t3); margin-top: 2px;
    flex-wrap: wrap;
}
.rpt-meta-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--t3); opacity: .5;
}

/* Section pills inline in meta */
.rpt-section-pill {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; padding: 1px 6px;
    border-radius: 4px; color: var(--t3);
    background: transparent; opacity: .4;
}
.rpt-section-pill svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }
.rpt-section-pill.on { color: var(--t1); background: rgba(0,212,255,.06); opacity: 1; }

/* Frequency badge */
.rpt-freq-badge {
    font-size: 11px; font-weight: 600; padding: 1px 8px;
    border-radius: 4px; background: var(--gw2); color: var(--t1);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Status pill */
.rpt-status-pill {
    font-size: 11px; font-weight: 600; padding: 2px 10px;
    border-radius: 10px; white-space: nowrap;
}
.rpt-status-pill.on { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.rpt-status-pill.off { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }

/* Send mode pill (card) */
.rpt-mode-pill {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 10px; white-space: nowrap; text-transform: uppercase;
    letter-spacing: .5px;
}
.rpt-mode-pill.auto { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.rpt-mode-pill.manual { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }

/* ── Kebab menu ⋮ ── */
.rpt-kebab-wrap { position: relative; }
.rpt-kebab-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: transparent; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: var(--tr);
    color: var(--t3); font-size: 18px; letter-spacing: 1px;
}
.rpt-kebab-btn:hover { background: var(--subtle-bg); color: var(--t1); }
.rpt-kebab-menu {
    display: none;
    position: absolute; right: 0; top: 100%; margin-top: 4px;
    min-width: 160px; background: var(--card); border: 1px solid var(--bdr);
    border-radius: 10px; padding: 4px; z-index: 100;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    animation: rptKebabIn .15s ease forwards;
}
.rpt-kebab-menu.open { display: block; }
/* .rpt-card a overflow:hidden (clip des coins) qui rognerait le menu, et la carte suivante
   peindrait par-dessus : on dé-clippe et on élève la carte tant que son menu est ouvert. */
.rpt-card:has(.rpt-kebab-menu.open) { overflow: visible; z-index: 100; position: relative; }
@keyframes rptKebabIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.rpt-kebab-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px; border: none;
    background: transparent; color: var(--t2); font-size: 13px;
    font-family: 'Inter', sans-serif; font-weight: 500;
    cursor: pointer; transition: var(--tr); width: 100%; text-align: left;
}
.rpt-kebab-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.rpt-kebab-item:hover { background: var(--subtle-bg); color: var(--t1); }
.rpt-kebab-item.danger { color: var(--r); }
.rpt-kebab-item.danger:hover { background: var(--rbg); }

/* ── Card detail (expandable) ── */
.rpt-card-detail {
    border-top: 1px solid var(--bdr); background: rgba(0,0,0,.08);
    animation: rptDetailIn .2s ease forwards;
}
@keyframes rptDetailIn { from { opacity: 0; } to { opacity: 1; } }

/* Detail tabs */
.rpt-detail-tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--bdr);
    padding: 0 20px; overflow-x: auto;
}
.rpt-dtab {
    padding: 10px 16px; font-size: 12px; font-weight: 600;
    color: var(--t3); border: none; background: transparent;
    cursor: pointer; transition: var(--tr); white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-family: 'Inter', sans-serif;
}
.rpt-dtab:hover { color: var(--t1); }
.rpt-dtab.active { color: var(--t1); border-bottom-color: var(--t1); }
.rpt-dtab svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -2px; margin-right: 5px; }

/* Detail body */
.rpt-detail-body { padding: 20px; min-height: 80px; }

/* Detail sticky actions bar */
.rpt-detail-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 12px 20px; border-top: 1px solid var(--bdr);
    background: rgba(0,0,0,.12);
}
.rpt-detail-actions .btn { font-size: 12px; padding: 8px 18px; }

/* ── Recipient cards ── */
.rpt-rcpt-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px; margin-top: 14px;
}
.rpt-rcpt-card {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--inp); border: 1px solid var(--bdr);
    transition: var(--tr);
}
.rpt-rcpt-card:hover { border-color: var(--ba); }
.rpt-rcpt-card-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,212,255,.1); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.rpt-rcpt-card-avatar svg { width: 15px; height: 15px; stroke: var(--t2); fill: none; stroke-width: 2; }
.rpt-rcpt-card-info { flex: 1; min-width: 0; }
.rpt-rcpt-card-info .rcpt-name {
    font-size: 13px; font-weight: 600; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.rpt-rcpt-card-info .rcpt-email {
    font-size: 11px; color: var(--t3); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.rpt-rcpt-card .rcpt-del {
    width: 28px; height: 28px; border-radius: 8px; border: none;
    background: transparent; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: var(--tr);
    flex-shrink: 0; color: var(--t3);
}
.rpt-rcpt-card .rcpt-del svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.rpt-rcpt-card .rcpt-del:hover { background: var(--rbg); color: var(--r); }

/* Recipient form (2 rows) */
.rpt-rcpt-form {
    display: flex; gap: 8px; align-items: flex-end;
    flex-wrap: wrap;
}
.rpt-rcpt-form .rpt-form-group { margin-bottom: 0; }

/* ── Timeline (history) ── */
.rpt-timeline { padding: 0 4px; }
.rpt-timeline-group { margin-bottom: 20px; }
.rpt-timeline-group:last-child { margin-bottom: 0; }
.rpt-timeline-month {
    font-size: 13px; font-weight: 700; color: var(--t1);
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.rpt-timeline-month .tl-count {
    font-size: 10px; font-weight: 600; padding: 1px 7px;
    border-radius: 10px; background: var(--subtle-bg); color: var(--t1);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.rpt-timeline-month .tl-failed {
    font-size: 10px; font-weight: 600; padding: 1px 7px;
    border-radius: 10px; background: var(--rbg); color: var(--r);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.rpt-timeline-entry {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 12px; border-radius: 8px; transition: var(--tr);
    position: relative; margin-left: 16px;
}
.rpt-timeline-entry::before {
    content: ''; position: absolute; left: -12px; top: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    transform: translateY(-50%);
}
.rpt-timeline-entry.sent::before { background: var(--t1); }
.rpt-timeline-entry.failed::before { background: var(--r); }
.rpt-timeline-entry.pending::before { background: var(--t1); }
.rpt-timeline-entry:hover { background: var(--subtle-bg); }
.rpt-timeline-entry .tl-date {
    font-size: 11px; color: var(--t3); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    white-space: nowrap; min-width: 110px;
}
.rpt-timeline-entry .tl-loc {
    font-size: 12px; font-weight: 600; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rpt-timeline-entry .tl-email {
    font-size: 11px; color: var(--t3); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Content tab ── */
.rpt-content-preview {
    background: var(--inp); border: 1px solid var(--bdr);
    border-radius: 10px; padding: 16px; margin-bottom: 16px;
}
.rpt-content-preview .cp-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--t3); margin-bottom: 6px;
}
.rpt-content-preview .cp-subject {
    font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 8px;
}
.rpt-content-preview .cp-body {
    font-size: 12px; color: var(--t2); line-height: 1.6;
    white-space: pre-wrap; word-wrap: break-word;
}
.rpt-content-sections-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px; margin-bottom: 16px;
}
.rpt-content-section {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 8px;
    background: var(--inp); border: 1px solid var(--bdr);
    font-size: 11px; font-weight: 600; color: var(--t2);
}
.rpt-content-section svg { width: 14px; height: 14px; stroke: var(--t2); fill: none; stroke-width: 2; flex-shrink: 0; }
.rpt-content-section.off { opacity: .35; }
.rpt-content-section.off svg { stroke: var(--t3); }
.rpt-content-info-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.rpt-content-info {
    padding: 10px 12px; border-radius: 8px;
    background: var(--inp); border: 1px solid var(--bdr);
}
.rpt-content-info .ci-label {
    font-size: 10px; font-weight: 600; color: var(--t3);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px;
}
.rpt-content-info .ci-value {
    font-size: 13px; font-weight: 700; color: var(--t1);
}

/* History statuses */
.rpt-st-sent, .rpt-st-failed, .rpt-st-pending {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; padding: 2px 8px;
    border-radius: 4px;
}
.rpt-st-sent svg, .rpt-st-failed svg, .rpt-st-pending svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.rpt-st-sent { color: var(--t1); background: var(--subtle-bg); }
.rpt-st-failed { color: var(--r); background: var(--rbg); }
.rpt-st-pending { color: var(--t1); background: var(--subtle-bg); }

/* ====== REPORT MODAL ====== */
.rpt-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.7); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.rpt-modal {
    background: var(--card); border: 1px solid var(--bdr);
    border-radius: 20px; width: 100%; max-width: 560px;
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,212,255,.08);
    animation: rptModalIn .25s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes rptModalIn {
    from { opacity: 0; transform: scale(.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.rpt-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 16px; border-bottom: 1px solid var(--bdr);
}
.rpt-modal-header .stit {
    font-size: 16px; color: var(--t1); -webkit-text-fill-color: initial; background: none;
}
.rpt-modal-close {
    width: 32px; height: 32px; border-radius: 8px;
    border: none; background: var(--subtle-bg); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--tr);
}
.rpt-modal-close svg { width: 15px; height: 15px; stroke: var(--t2); fill: none; stroke-width: 2; }
.rpt-modal-close:hover { background: var(--rbg); }
.rpt-modal-close:hover svg { stroke: var(--r); }
.rpt-modal-body {
    padding: 24px; overflow-y: auto; flex: 1;
}
.rpt-modal-footer {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 16px 24px; border-top: 1px solid var(--bdr);
    background: rgba(0,0,0,.15);
}
.rpt-modal-footer .btn { padding: 10px 22px; font-size: 13px; }

/* Form field group with divider lines */
.rpt-fieldset {
    background: var(--inp); border: 1px solid var(--bdr);
    border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.rpt-fieldset-title {
    font-size: 10px; font-weight: 700; color: var(--t1);
    text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.rpt-fieldset-title svg {
    width: 13px; height: 13px; stroke: var(--t2); fill: none; stroke-width: 2;
}

/* Form helpers */
.rpt-form-row { display: flex; gap: 12px; margin-bottom: 12px; }
.rpt-form-row:last-child { margin-bottom: 0; }
.rpt-form-group { margin-bottom: 12px; }
.rpt-form-group:last-child { margin-bottom: 0; }
.rpt-label {
    display: block; font-size: 11px; font-weight: 600;
    color: var(--t2); margin-bottom: 5px;
}
.rpt-label-sm {
    display: block; font-size: 10px; font-weight: 600;
    color: var(--t3); margin-bottom: 3px;
    text-transform: uppercase; letter-spacing: .5px;
}
.rpt-hint {
    font-size: 10px; color: var(--t3); margin-top: 6px;
    padding: 6px 10px; background: var(--subtle-bg); border-radius: 8px;
    line-height: 1.5;
}
.rpt-hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
    color: var(--t1); background: rgba(0,212,255,.08);
    padding: 1px 5px; border-radius: 4px;
}

/* Section checkbox icons in form */
.rpt-sec-icon { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -2px; margin-right: 2px; }

/* Report form sections (shared) */
.report-section-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.report-section-check {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; background: var(--inp);
    border: 1px solid var(--bdr); border-radius: 8px;
    cursor: pointer; transition: var(--tr);
    font-size: 12px; color: var(--t2); user-select: none;
}
.report-section-check:hover { border-color: var(--t1); background: rgba(0,212,255,.03); }
.report-section-check.checked { border-color: var(--t1); background: rgba(0,212,255,.06); color: var(--t1); }
.report-section-check input[type="checkbox"] { display: none; }
.report-section-check::before {
    content: ''; width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
    border: 2px solid var(--bdr); transition: var(--tr);
}
.report-section-check.checked::before {
    background: var(--acc); border-color: var(--t1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 5L6.5 10.5L4 8' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 12px; background-position: center; background-repeat: no-repeat;
}

/* ====== BULK ADD RECIPIENTS ====== */
.rpt-bulk-list {
    max-height: 400px; overflow-y: auto;
    border: 1px solid var(--bdr); border-radius: 8px;
}
.rpt-bulk-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--subtle-line);
    transition: var(--tr);
}
.rpt-bulk-row:last-child { border-bottom: none; }
.rpt-bulk-row:hover { background: var(--subtle-hover); }

/* Custom checkbox */
.rpt-bulk-check {
    position: relative; display: flex; align-items: center;
    cursor: pointer; flex-shrink: 0;
}
.rpt-bulk-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.rpt-bulk-checkmark {
    width: 20px; height: 20px; border-radius: 4px;
    border: 2px solid var(--bdr); background: var(--inp);
    display: flex; align-items: center; justify-content: center;
    transition: var(--tr);
}
.rpt-bulk-check input:checked + .rpt-bulk-checkmark {
    background: var(--acc); border-color: var(--t1);
}
.rpt-bulk-check input:checked + .rpt-bulk-checkmark::after {
    content: ''; display: block;
    width: 5px; height: 9px;
    border: solid #000; border-width: 0 2px 2px 0;
    transform: rotate(45deg); margin-top: -2px;
}

/* ====== RESPONSIVE DASHBOARD ====== */
@media (max-width: 1280px) {
    .client-grid { grid-template-columns: repeat(2, 1fr); }
    .report-section-grid { grid-template-columns: 1fr; }
    .rpt-kpi-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 768px) {
    .client-grid { grid-template-columns: 1fr; }
    .rpt-kpi-grid { grid-template-columns: 1fr; }
    .rpt-kpi-card { padding: 14px; }
    .rpt-kpi-value { font-size: 22px; }
    .rpt-detail-tabs { padding: 0 12px; }
    .rpt-dtab { padding: 8px 12px; font-size: 11px; }
    .rpt-detail-body { padding: 14px; }
    .rpt-rcpt-grid { grid-template-columns: 1fr; }
    .rpt-content-sections-grid { grid-template-columns: repeat(2, 1fr); }
    .rpt-content-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .rpt-card-top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .rpt-card-right { margin-left: 50px; }
    .rpt-rcpt-form { flex-direction: column; }
    .rpt-rcpt-form .rpt-form-group { width: 100%; }
    .rpt-form-row { flex-direction: column; }
    .rpt-modal { max-width: 100%; margin: 8px; border-radius: var(--rd); }
    .rpt-bulk-row { flex-wrap: wrap; }
    .rpt-bulk-row .si { width: 100% !important; }
    .rpt-list { padding: 0 14px 12px; }
    .rpt-card-top { padding: 14px; }
    .rpt-detail-actions { flex-wrap: wrap; justify-content: center; }
    .rpt-content-sections-grid { grid-template-columns: 1fr; }
}

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }

/* ====== THEME TOGGLE ====== */
.logo { position: relative; }
/* Toggle thème : rangée du bas de la sidebar (avant le profil), même
   gabarit que .sb-toggle. Auparavant en position absolute dans .logo,
   ce qui le décalait/cachait sur la sidebar mobile. */
.theme-toggle {
    width: 100%;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 8px;
    transition: background .15s, color .15s;
    padding: 0;
    margin-bottom: 8px;
}
.theme-toggle:hover { background: rgba(255,255,255,.06); color: var(--t1); }
[data-theme="light"] .theme-toggle:hover { background: rgba(0,0,0,.04); }
.theme-toggle svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.theme-toggle-label { font-size: 11px; }
.sb.collapsed .theme-toggle-label { display: none; }
/* Icône affichée = préférence choisie (sombre / clair / système), pas le thème résolu */
.theme-icon-sun, .theme-icon-moon, .theme-icon-system { display: none; }
[data-theme-pref="dark"] .theme-icon-moon { display: block; }
[data-theme-pref="light"] .theme-icon-sun { display: block; }
[data-theme-pref="system"] .theme-icon-system { display: block; }
/* Repli si data-theme-pref absent (vieux cache) : garder l'ancien comportement */
html:not([data-theme-pref]) .theme-icon-moon { display: block; }
html:not([data-theme-pref])[data-theme="light"] .theme-icon-moon { display: none; }
html:not([data-theme-pref])[data-theme="light"] .theme-icon-sun { display: block; }

/* =========================================================
   MODE CAPTURE D'ÉCRAN (html[data-privacy="1"])
   Floute UNIQUEMENT ce qui identifie un client : noms de fiches,
   logos/avatars, noms de contacts, emails, téléphone, site web,
   noms de reviewers. Les stats et le reste de l'UI restent visibles
   (demande explicite de Mathieu, 2026-07-28).
   Toggle : bouton œil de la sidebar (APP.togglePrivacy,
   src/shared/lib/privacy.js). Attribut posé dès le premier paint
   par le script anti-FOUC de index.php.
   ========================================================= */
/* Bouton sidebar : œil barré + accent quand le mode est actif */
.privacy-icon-eye-off { display: none; }
html[data-privacy="1"] .privacy-icon-eye { display: none; }
html[data-privacy="1"] .privacy-icon-eye-off { display: block; }
html[data-privacy="1"] .privacy-toggle { color: var(--t1); }

/* Noms de fiches / établissements + logos.
   .priv-name = classe utilitaire générique : à poser sur tout span/div qui
   contient un nom d'établissement/concurrent interpolé dans une phrase. */
html[data-privacy="1"] .priv-name,
html[data-privacy="1"] .ds-rows .ds-row-title,
html[data-privacy="1"] .ds-rows .ds-row-ic,
html[data-privacy="1"] .ds-rv-row .ds-row-title,
html[data-privacy="1"] .ds-rv-row .ds-row-ic,
html[data-privacy="1"] .ds-sheet-title,
html[data-privacy="1"] .ds-sheet-sub,
html[data-privacy="1"] .ds-sheet-links,
html[data-privacy="1"] .ds-client-name,
html[data-privacy="1"] .ds-client-avatar,
html[data-privacy="1"] .ds-client-maps,
html[data-privacy="1"] .breadcrumb a.breadcrumb-item[href*="view=client"],
html[data-privacy="1"] .sb-client-selector,
html[data-privacy="1"] #rv-location,
html[data-privacy="1"] .fv7-ai-text,
html[data-privacy="1"] .cp-item-title,
html[data-privacy="1"] .cp-item-sub,
html[data-privacy="1"] .kn,
html[data-privacy="1"] .dsh-pipe-fiche-name,
html[data-privacy="1"] .dsh-pipe-fiche-pending .dsh-pipe-fiche-step,
html[data-privacy="1"] .dsh-ai-item-text,
html[data-privacy="1"] .dsh-ai-text span,
html[data-privacy="1"] .dsh-act-time,
html[data-privacy="1"] .dsh-rv-loc,
html[data-privacy="1"] .ds-rv-row-fiche,
/* Contacts, emails, téléphone, site web du client */
html[data-privacy="1"] .dsh-pop-contact,
html[data-privacy="1"] .dsh-pop-email,
html[data-privacy="1"] .rmd-row-avatar,
html[data-privacy="1"] .rmd-row-name,
html[data-privacy="1"] .rmd-row-name + .rmd-row-meta,
html[data-privacy="1"] .rmd-pm-loc,
html[data-privacy="1"] .rmd-pm-rcpt,
html[data-privacy="1"] .rmd-pp-group-fiche,
html[data-privacy="1"] .rmd-pp-group-email,
html[data-privacy="1"] .rmd-pp-group-contact,
html[data-privacy="1"] .rmd-pp-recip-fiche,
html[data-privacy="1"] .rmd-pp-recip-contact,
html[data-privacy="1"] .rmd-pp-recip-head,
html[data-privacy="1"] .eml-client-meta,
html[data-privacy="1"] .ofa-card-sub,
html[data-privacy="1"] .ofa-modal-sub,
html[data-privacy="1"] .ofa-map-meta,
html[data-privacy="1"] #cs-report-email,
html[data-privacy="1"] #cs-report-contact,
html[data-privacy="1"] #gbp-title,
html[data-privacy="1"] #gbp-phone,
html[data-privacy="1"] #gbp-website,
html[data-privacy="1"] .audit-req-name-row,
html[data-privacy="1"] [id^="btn-send-req-"],
/* Nom + avatar du reviewer (le texte de l'avis reste visible) */
html[data-privacy="1"] .rev-author,
html[data-privacy="1"] .rev-avatar,
html[data-privacy="1"] .dsh-rv-name,
/* Story Instagram d'un avis : l'aperçu et le nom affiché portent le nom du client */
html[data-privacy="1"] .rvs-frame,
html[data-privacy="1"] #rvs-author {
    filter: blur(6px);
}

/* Exceptions : listes .ds-rows qui portent des libellés STATIQUES (menus hub
   Envois/Acquisition, modèles d'email), pas des noms de clients — pas de flou */
html[data-privacy="1"] .ds-hub-block .ds-row-title,
html[data-privacy="1"] .ds-hub-block .ds-row-ic,
html[data-privacy="1"] .eml-tpl-listcard .ds-row-title,
html[data-privacy="1"] .eml-tpl-listcard .ds-row-ic {
    filter: none;
}

/* Tooltips : peuvent contenir des noms (groupes, fiches), on coupe tout */
html[data-privacy="1"] .neura-tip { display: none !important; }

/* ====== LIGHT THEME FIX SIDEBAR ====== */
[data-theme="light"] .logo-rest { color: #030712; }
[data-theme="light"] .logo-byline { color: #4b5563; }
[data-theme="light"] .ua { color: #fff; }
[data-theme="light"] .client-card-icon { color: #fff; }
[data-theme="light"] .nb { color: #fff; }
[data-theme="light"] .bp { color: var(--btn-p-ink); }
[data-theme="light"] .bp:hover { color: var(--btn-p-ink); }
[data-theme="light"] .filter-btn.active { color: #fff; }
[data-theme="light"] .day-btn.selected { color: var(--t1); }
[data-theme="light"] .rev-avatar { color: #fff; }

/* ====== CREDITS DISPLAY ====== */
.credits-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--gw2);
    border: 1px solid var(--ba);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
}
.credits-badge svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ====== PROSPECT SCORE ====== */
.prospect-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 14px;
    border: 2px solid;
}
.prospect-score.high { color: var(--t1); border-color: var(--t1); background: var(--subtle-bg); }
.prospect-score.mid { color: var(--t1); border-color: var(--t1); background: var(--subtle-bg); }
.prospect-score.low { color: var(--r); border-color: var(--r); background: var(--rbg); }

/* ====== PROSPECT CARD ====== */
.prospect-card {
    padding: 16px 20px;
    border-bottom: 1px solid var(--subtle-line);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: var(--tr);
}
.prospect-card:hover { background: var(--card-hover); }
.prospect-card:last-child { border-bottom: none; }

/* ====== POSITIONS LAYOUT (Localo-style split panel) ====== */
.positions-layout {
    display: flex;
    min-height: 600px;
    border-top: 1px solid var(--bdr);
}
.positions-left {
    width: 400px;
    min-width: 340px;
    max-width: 440px;
    border-right: 1px solid var(--bdr);
    overflow-y: auto;
    max-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
}
.positions-right {
    flex: 1;
    position: relative;
    min-height: 600px;
}
.positions-right .leaflet-container {
    border-radius: 0;
}

/* ====== KEYWORD CHIPS ====== */
.kw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bdr);
}
.kw-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tr);
    background: var(--inp);
    border: 1px solid var(--bdr);
    color: var(--t2);
    white-space: nowrap;
}
.kw-chip:hover {
    border-color: var(--t1);
    color: var(--t1);
}
.kw-chip.selected {
    background: rgba(0,212,255,.1);
    border-color: var(--t1);
    color: var(--t1);
    box-shadow: 0 0 0 1px var(--ba);
}
.kw-chip .chip-pos {
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 2px;
}
.kw-chip .chip-pos.cp3 { background: var(--subtle-bg); color: var(--t1); }
.kw-chip .chip-pos.cp10 { background: var(--subtle-bg); color: var(--t1); }
.kw-chip .chip-pos.cpo { background: var(--rbg); color: var(--r); }

/* ====== BUSINESS CARD (rang + visibilite) ====== */
.biz-card {
    padding: 16px;
    border-bottom: 1px solid var(--bdr);
}
.biz-card-name {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--t1);
}
.biz-card-stats {
    display: flex;
    gap: 10px;
}
.biz-card-stat {
    flex: 1;
    text-align: center;
    padding: 10px 6px;
    background: var(--inp);
    border-radius: 8px;
    border: 1px solid var(--bdr);
}
.biz-card-stat-value {
    font-size: 22px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}
.biz-card-stat-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* ====== COMPETITORS PRO LAYOUT ====== */

/* Header */
.comp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    gap: 12px;
    flex-wrap: wrap;
}
.comp-header-left { display: flex; align-items: baseline; gap: 12px; }
.comp-header-left .stit { font-size: 16px; }
.comp-date { font-size: 12px; color: var(--t3); font-weight: 400; }
.comp-header-right { display: flex; align-items: center; gap: 10px; }
.comp-kw-sel { max-width: 280px; padding: 7px 12px; font-size: 13px; }

/* Stats bar */
.comp-stats-bar {
    display: flex;
    gap: 0;
    padding: 0 20px;
    margin-bottom: 16px;
}
.comp-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--bdr);
    margin-right: -1px;
}
.comp-stat:first-child { border-radius: 10px 0 0 10px; }
.comp-stat:last-child { border-radius: 0 10px 10px 0; margin-right: 0; }
.comp-stat-val {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--t1);
    letter-spacing: -.5px;
}
.comp-stat-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}
.comp-stat-you {
    background: rgba(0, 212, 255, .06);
    border-color: rgba(0, 212, 255, .2);
}
.comp-stat-you .comp-stat-val {
    color: var(--t1);
}

/* Empty state */
.comp-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--t2);
}
.comp-empty p { margin: 12px 0 0; font-size: 14px; }
.comp-empty-link { color: var(--t1); font-size: 13px; text-decoration: none; }
.comp-empty-link:hover { text-decoration: underline; }

/* Card list */
.comp-list {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Individual card */
.comp-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--bdr);
    background: rgba(255,255,255,.015);
    transition: all .15s ease;
}
.comp-card:hover {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
}

/* Target card (notre fiche) */
.comp-card-target {
    background: rgba(0, 212, 255, .04);
    border-color: rgba(0, 212, 255, .2);
    margin-bottom: 8px;
}
.comp-card-target:hover {
    background: rgba(0, 212, 255, .06);
    border-color: rgba(0, 212, 255, .3);
}

/* Rank badge */
.comp-rank {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comp-rank-num {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.comp-rank-top3 {
    background: var(--subtle-bg);
    border: 1px solid var(--subtle-bg);
}
.comp-rank-top3 .comp-rank-num { color: var(--t1); }
.comp-rank-top10 {
    background: rgba(0, 212, 255, .1);
    border: 1px solid rgba(0, 212, 255, .2);
}
.comp-rank-top10 .comp-rank-num { color: var(--t1); }
.comp-rank-top20 {
    background: rgba(251, 146, 60, .1);
    border: 1px solid rgba(251, 146, 60, .2);
}
.comp-rank-top20 .comp-rank-num { color: var(--t1); }
.comp-rank-out {
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .15);
}
.comp-rank-out .comp-rank-num { color: var(--r); }

/* Main content */
.comp-main { flex: 1; min-width: 0; }

/* Title row */
.comp-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.comp-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.comp-card-target .comp-name { color: var(--t1); }
.comp-cat {
    font-size: 11px;
    color: var(--t3);
    background: rgba(255,255,255,.06);
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Address */
.comp-addr {
    font-size: 12px;
    color: var(--t3);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta row */
.comp-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

/* Rating group */
.comp-rating-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.comp-star-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--o);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

/* Rating bar */
.comp-rating-bar {
    width: 60px;
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    overflow: hidden;
}
.comp-rating-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--o);
}

.comp-reviews-count {
    font-size: 12px;
    color: var(--t3);
}
.comp-no-rating {
    font-size: 12px;
    color: var(--t3);
    opacity: .6;
}

/* Maps link */
.comp-maps-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--t3);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all .15s;
    margin-left: auto;
}
.comp-maps-link:hover {
    color: var(--t1);
    border-color: rgba(0, 212, 255, .2);
    background: rgba(0, 212, 255, .06);
}

/* Responsive */
@media (max-width: 1024px) {
    .comp-header { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
    .comp-kw-sel { max-width: 100%; width: 100%; }
    .comp-stats-bar { padding: 0 16px; }
    .comp-list { padding: 0 16px 16px; }
    .comp-stat-val { font-size: 16px; }
}
@media (max-width: 480px) {
    .comp-stats-bar { flex-wrap: wrap; }
    .comp-stat { flex: 1 1 45%; }
    .comp-stat:first-child { border-radius: 10px 0 0 0; }
    .comp-stat:nth-child(2) { border-radius: 0 10px 0 0; }
    .comp-stat:nth-child(3) { border-radius: 0 0 0 10px; }
    .comp-stat:last-child { border-radius: 0 0 10px 0; }
    .comp-card { padding: 12px; gap: 10px; }
    .comp-rank { width: 40px; height: 40px; border-radius: 10px; }
    .comp-rank-num { font-size: 14px; }
    .comp-name { font-size: 13px; }
    .comp-cat { display: none; }
}

/* ====== SCAN TIMESTAMP OVERLAY ON MAP ====== */
.scan-timestamp {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 500;
    background: rgba(10,22,40,.85);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: var(--t2);
    border: 1px solid var(--bdr);
}

/* ====== SCAN HISTORY CHIPS ====== */
.scan-history-bar {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--bdr);
    overflow-x: auto;
}
.scan-history-chip {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    cursor: pointer;
    border: 1px solid var(--bdr);
    background: var(--inp);
    color: var(--t3);
    white-space: nowrap;
    transition: var(--tr);
}
.scan-history-chip:hover { border-color: var(--t1); color: var(--t2); }
.scan-history-chip.active { border-color: var(--t1); color: var(--t1); background: rgba(0,212,255,.08); }

/* ====== MAP EMPTY STATE ====== */
.map-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    color: var(--t3);
    font-size: 13px;
    gap: 12px;
}
.map-empty-icon { font-size: 48px; opacity: 0.3; }

/* ====== RESPONSIVE: POSITIONS ====== */
@media (max-width: 1024px) {
    .positions-layout {
        flex-direction: column;
    }
    .positions-left {
        width: 100%;
        max-width: none;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--bdr);
    }
    .positions-right {
        min-height: 400px;
    }
}

/* ====== SUIVI: STATS BAR (Onglet Mots-clés) ====== */
.kw-stats-bar { display: flex; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--bdr); }
.kw-stat { flex: 1; text-align: center; padding: 12px 8px; background: var(--inp); border-radius: var(--rd-sm); border: 1px solid var(--bdr); }
.kw-stat-v { display: block; font-size: 20px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.kw-stat-l { display: block; font-size: 9px; font-weight: 600; color: var(--t3); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.04em; }

/* ====== KEYWORD CARDS ====== */
.kw-card {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px; border-bottom: 1px solid var(--bdr);
    transition: background .15s;
}
.kw-card:hover { background: var(--gw2); }
.kw-card-name {
    flex: 1; min-width: 0;
}
.kw-card-name h4 {
    margin: 0; font-size: 14px; font-weight: 600; color: var(--t1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kw-card-name .kw-meta {
    margin-top: 3px; font-size: 11px; color: var(--t3); display: flex; align-items: center; gap: 8px;
}
.kw-card-metrics {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.kw-metric {
    text-align: center; min-width: 56px;
}
.kw-metric-val {
    display: block; font-size: 15px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.kw-metric-lbl {
    display: block; font-size: 9px; font-weight: 500; color: var(--t3); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px;
}
.kw-card-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.kw-btn-update {
    width: 34px; height: 34px; border-radius: var(--rd-sm); border: 1px solid var(--bdr);
    background: var(--inp); color: var(--t2); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; transition: all .2s;
}
.kw-btn-update:hover { border-color: var(--t1); color: var(--t1); background: var(--gw2); }
.kw-btn-update:disabled { opacity: .5; cursor: not-allowed; }
.kw-btn-update.rate-limited { opacity: .35; cursor: not-allowed; border-color: var(--bdr); color: var(--t3); }
.kw-btn-update.rate-limited:hover { border-color: var(--bdr); color: var(--t3); background: var(--inp); }
.kw-btn-update.scanning { animation: spin-kw .8s linear infinite; border-color: var(--t1); color: var(--t1); }
@keyframes spin-kw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spin { animation: spin .6s linear infinite; }
.kw-btn-delete {
    width: 34px; height: 34px; border-radius: var(--rd-sm); border: 1px solid transparent;
    background: none; color: var(--t3); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; transition: all .2s;
}
.kw-btn-delete:hover { color: var(--r); background: var(--rbg); border-color: var(--rbg); }

/* Trend badge */
.kw-trend-up { color: var(--g); font-size: 11px; font-weight: 600; }
.kw-trend-down { color: var(--r); font-size: 11px; font-weight: 600; }
.kw-trend-neutral { color: var(--t3); font-size: 11px; }

/* Position badge inline */
.kw-pos-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 26px; padding: 0 6px;
    border-radius: 8px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: 13px;
}
/* Code couleur Localo : vert 1-3, orange 4-10, rose 11-20, rouge 20+ */
.kw-pos-badge.top3 { background: var(--subtle-bg); color: var(--t1); border: 1px solid var(--subtle-bg); }
.kw-pos-badge.top10 { background: var(--subtle-bg); color: var(--t1); border: 1px solid var(--subtle-bg); }
.kw-pos-badge.top20 { background: var(--subtle-bg); color: var(--t1); border: 1px solid var(--subtle-bg); }
.kw-pos-badge.out { background: var(--rbg); color: var(--r); border: 1px solid var(--rbg); }
.kw-pos-badge.none { color: var(--t3); font-weight: 400; border: none; background: none; }

/* Visibility bar */
.kw-vis-bar {
    width: 48px; height: 5px; border-radius: 4px; background: var(--bdr); overflow: hidden;
    display: inline-block; vertical-align: middle; margin-right: 4px;
}
.kw-vis-fill {
    height: 100%; border-radius: 4px; transition: width .3s;
}

/* Empty state */
.kw-empty {
    padding: 60px 20px; text-align: center; color: var(--t2);
}
.kw-empty-icon { font-size: 48px; opacity: .2; margin-bottom: 16px; }

/* Header add form */
.kw-add-inline {
    display: flex; gap: 8px; align-items: center; padding: 12px 20px;
    border-bottom: 1px solid var(--bdr); background: var(--inp);
}
.kw-add-inline input {
    flex: 1; min-width: 0; padding: 8px 12px; border-radius: var(--rd-sm);
    border: 1px solid var(--bdr); background: var(--card); color: var(--t1);
    font-size: 13px; outline: none; transition: border-color .2s;
}
.kw-add-inline input:focus { border-color: var(--t1); }
.kw-add-inline input::placeholder { color: var(--t3); }

/* Autocomplete dropdown */
.ac-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-top: none;
    border-radius: 0 0 var(--rd-sm) var(--rd-sm);
    max-height: 240px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.ac-item {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--t1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background .1s;
}
.ac-item:hover {
    background: rgba(0, 212, 255, .08);
}
.ac-item b { color: var(--t1); }
.ac-city { font-weight: 600; color: var(--t1); }
.ac-dept { font-size: 11px; color: var(--t3); margin-left: 6px; }
.ac-type {
    font-size: 10px;
    color: var(--t3);
    letter-spacing: .5px;
    flex-shrink: 0;
}

/* Dropdown rayon de grille */
.select-radius {
    padding: 8px 10px; border-radius: var(--rd-sm);
    border: 1px solid var(--bdr); background: var(--card); color: var(--t1);
    font-size: 12px; outline: none; cursor: pointer; white-space: nowrap;
    transition: border-color .2s;
}
.select-radius:focus { border-color: var(--t1); }

/* ====== BARRE D'ACTIONS EN MASSE (BULK) ====== */
.bulk-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px; margin: 0 0 2px;
    background: rgba(0, 212, 255, .08); border: 1px solid rgba(0, 212, 255, .2);
    border-radius: var(--rd-sm); gap: 12px;
    animation: bulkSlide .2s ease-out;
}
@keyframes bulkSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ====== SUIVI: BIZ-CARD OVERLAY SUR CARTE ====== */
.biz-card-map-overlay {
    position: absolute; top: 12px; right: 12px; z-index: 500;
    background: rgba(10, 22, 40, .9); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    padding: 14px 18px; border-radius: var(--rd); border: 1px solid var(--bdr);
    min-width: 280px; max-width: 340px;
}
[data-theme="light"] .biz-card-map-overlay { background: rgba(255, 255, 255, .92); }

/* ====== SUIVI: CONCURRENTS TARGET ROW ====== */
.competitor-target-row { background: rgba(0, 212, 255, .04); border-left: 3px solid var(--acc); }
.competitor-target-row td:first-child { padding-left: 7px !important; }

/* ====== SUIVI: BOUTON SUPPRIMER TABLEAU ====== */
.btn-remove { background: none; border: none; color: var(--t3); cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 4px; transition: all .15s; }
.btn-remove:hover { color: var(--r); background: rgba(255, 59, 48, .1); }

/* ====== RESPONSIVE: SUIVI ====== */
@media (max-width: 768px) {
    .biz-card-map-overlay { position: relative; top: auto; right: auto; margin: 0; border-radius: 0; min-width: auto; max-width: none; }
    .kw-stats-bar { flex-wrap: wrap; }
    .kw-stat { min-width: calc(50% - 8px); }
    .kw-card { flex-wrap: wrap; gap: 10px; }
    .kw-card-metrics { width: 100%; justify-content: space-between; }
}

/* ============================================
   MODE CAPTURE — Export Story (9:16) / Post (4:5)
   ============================================ */

/* Conteneur de capture (rendu off-screen par html2canvas) */
.capture-container {
    position: fixed;
    left: -9999px;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #000000 0%, #020f27 100%);
    border: 3px solid var(--acc);
    box-shadow: 0 0 40px rgba(0,212,255,.15), inset 0 0 60px rgba(0,212,255,.03);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #fff;
}
.capture-container.format-story-9-16 {
    width: 1080px;
    height: 1920px;
    padding: 60px 48px 48px;
}
.capture-container.format-portrait-4-5 {
    width: 1080px;
    height: 1350px;
    padding: 48px 48px 40px;
}

/* Logo en-tete */
.capture-logo {
    margin-bottom: 24px;
}
.capture-logo img {
    height: 60px;
    width: auto;
    display: block;
}

/* Nom du client GBP */
.capture-client-name {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 48px;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
    line-height: 1.1;
}
.capture-keyword {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,.5);
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: .5px;
}

/* Section Rang Concurrentiel */
.capture-rank-section {
    text-align: center;
    margin-bottom: 32px;
}
.capture-rank-value {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 8rem;
    line-height: 1;
    color: var(--t1);
}
.capture-rank-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 8px;
}

/* Jauge circulaire de visibilite */
.capture-gauge-section {
    text-align: center;
    margin-bottom: 32px;
}
.capture-gauge-wrap {
    position: relative;
    display: inline-block;
    width: 160px;
    height: 160px;
}
.capture-gauge-svg {
    width: 160px;
    height: 160px;
    transform: rotate(-90deg);
}
.capture-gauge-bg {
    fill: none;
    stroke: rgba(255,255,255,.08);
    stroke-width: 10;
}
.capture-gauge-fill {
    fill: none;
    stroke: var(--t2);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease;
}
.capture-gauge-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 42px;
    color: #fff;
}
.capture-gauge-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,.45);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 12px;
}

/* Carte capturee (canvas clone) */
.capture-map-wrap {
    flex: 1;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    min-height: 300px;
    border: 1px solid rgba(0,212,255,.15);
}
.capture-map-wrap canvas,
.capture-map-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Watermark bottom */
.capture-watermark {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,.2);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Boutons d'export dans le header de la carte */
.btn-capture {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: rgba(255,255,255,.7);
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--rd-sm);
    cursor: pointer;
    transition: all .2s;
}
.btn-capture:hover {
    color: #fff;
    border-color: var(--t1);
    background: rgba(0,212,255,.06);
}
.btn-capture svg {
    width: 14px;
    height: 14px;
}
.btn-capture.exporting {
    opacity: .5;
    pointer-events: none;
}

/* ====== HAMBURGER MENU MOBILE ====== */
.hamburger-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--bdr);
    background: var(--card);
    color: var(--t1);
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    transition: all .2s;
}
.hamburger-btn:hover { background: var(--inp); }

/* Overlay sombre quand sidebar mobile ouverte */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: var(--glass-scrim-blur);
    backdrop-filter: var(--glass-scrim-blur);
}
.sidebar-overlay.active { display: block; }

/* ====== RESPONSIVE MOBILE COMPLET ====== */
@media (max-width: 1024px) {
    /* Hamburger visible — décalé sous la safe-area iPhone (encoche) pour ne pas
       chevaucher l'heure de la status bar en mode standalone PWA. */
    .hamburger-btn { display: flex; top: calc(12px + env(safe-area-inset-top, 0px)); }

    /* Sidebar cachee par defaut, slide-in */
    .sb {
        display: block !important;
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px;
        z-index: 1050;
        transition: left .3s ease;
        overflow-y: auto;
    }
    .sb.mobile-open { left: 0; }

    /* iOS PWA "Add to Home Screen" (mode standalone) : le WebView gère le viewport
       autrement et n'honore PAS overflow:clip (Safari 16+). Les garde-fous en clip
       (body, .dsh-fiches-v7) laissent alors fuir tout débordement horizontal jusqu'à
       <html>, d'où la bande vide à droite + scroll horizontal. Verrou dur au niveau
       racine avec overflow-x:hidden (supporté partout) — ceci ne casse pas le sticky de
       .fv7-fb car son conteneur de défilement reste .mn. Éviter 100vw (inclut la zone
       hors viewport visible en standalone) : préférer 100%. */
    html, body {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    /* Main content pleine largeur.
       padding-top : 60px (hauteur du hamburger fixe + respiration) + la safe-area
       iPhone (encoche / Dynamic Island). Sans env(safe-area-inset-top), en mode
       standalone PWA le contenu démarre sous la status bar et l'heure chevauche le
       premier élément (barre de recherche de l'écran Avis). env() vaut 0 hors
       standalone / sur écran sans encoche, donc aucun impact ailleurs. */
    .mn {
        margin-left: 0 !important;
        padding: var(--mn-pad-m) !important;
        padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 80px !important;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* CAUSE RÉELLE de la "bande vide à droite" en PWA standalone : la sidebar garde sa
       classe .collapsed en permanence (repli mémorisé), donc les règles DESKTOP
       ".sb.collapsed ~ .mn { margin-left:60px; max-width:calc(100vw-60px) }" et
       "html.sb-pre-collapsed .mn { ... !important }" bridaient .mn à (viewport - 60px)
       AUSSI sur mobile — le contenu ne prenait pas toute la largeur (60px vides à droite).
       Sur mobile la sidebar est fixed hors flux : .mn doit occuper 100%. On neutralise ces
       règles avec une spécificité/!important suffisants pour les battre (html.sb-pre-collapsed
       .mn = (0,2,1) bat le (0,2,0) !important de la source). */
    html.sb-pre-collapsed .mn,
    .sb.collapsed ~ .mn,
    .sb.collapsed + .sidebar-overlay + .mn {
        margin-left: 0 !important;
        max-width: 100% !important;
    }

    /* Layout */
    .lay { min-width: 0; max-width: 100%; }
    .ph { padding: 0 !important; flex-wrap: wrap !important; gap: var(--sp-sm) !important; }
    .ha { width: 100% !important; flex-wrap: wrap !important; }
    .sec { margin: 0; }   /* plus de full-bleed : la carte reste dans la gouttiere de page (coherence avec .rmd-card) */
    .breadcrumb { padding: 10px 14px; font-size: 12px; }

    /* Page title */
    .ptit { font-size: 20px; }
    .psub { font-size: 12px; }

    /* Headers modules */
    .sh { padding: 14px 16px !important; flex-wrap: wrap; gap: 8px; }
    .stit { font-size: 13px; }

    /* Grids */
    .sg { grid-template-columns: 1fr !important; gap: 10px !important; }
    .sg-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .client-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .cs { flex-direction: column !important; align-items: stretch !important; }
    .cm { margin-left: 0 !important; }

    /* Carte Google */
    #positions-map { height: 45vh !important; min-height: 280px !important; }

    /* Stats bar */
    .kw-stats-bar { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
    .kw-stat { min-width: calc(50% - 6px); flex: 0 0 calc(50% - 6px); }

    /* Tableaux */
    .ta { font-size: 12px; }
    .ta th, .ta td { padding: 8px 6px; }
    .resp-hide { display: none !important; }

    /* Biz card overlay */
    .biz-card-map-overlay {
        position: relative;
        top: auto; right: auto;
        margin: 0;
        border-radius: 0;
        min-width: auto;
        max-width: none;
    }

    /* Post stats */
    .post-stat { min-width: auto; }

    /* Reviews */
    .rev-card { padding: 14px 14px; }
    .rev-header { gap: 8px; flex-wrap: wrap; }
    .rev-location-badge { font-size: 10px; }
    .rev-comment { font-size: 13px; }
    .rev-reply { padding: 10px 14px; }
    .rev-draft-text { font-size: 12px; }
    .reviews-dashboard { flex-direction: column !important; gap: 12px !important; padding: 16px 14px !important; }
    .reviews-avg-block { flex-direction: row !important; align-items: center !important; gap: 12px !important; }
    .reviews-distribution { max-width: 100% !important; }
    .reviews-filter-bar { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 14px !important; }
    .reviews-filter-bar select.si { width: 100% !important; min-width: 0 !important; }
    .reviews-kpi-block { flex-direction: row !important; gap: 16px !important; }

    /* Dashboard controls */
    .dashboard-controls { flex-direction: column !important; gap: 8px !important; }
    .dashboard-search { width: 100% !important; }
    .dashboard-filters { width: 100% !important; flex-wrap: wrap !important; }
    .dashboard-filters select { flex: 1 !important; min-width: 120px !important; }

    /* Scan history */
    .scan-history-bar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
    .scan-history-chip { font-size: 11px; padding: 4px 10px; }

    /* Selecteurs globaux */
    .si { font-size: 14px !important; }
    select.si { max-width: 100% !important; }

    /* Boutons */
    .btn { font-size: 12px; }
    .filter-bar { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
    .filter-btn { font-size: 11px; padding: 4px 10px; }

    /* Modal */
    .modal-box { width: 95vw !important; max-width: none !important; margin: 10px !important; max-height: 90vh !important; }

    /* Positions layout */
    .positions-layout { flex-direction: column !important; }
    .positions-left { width: 100% !important; max-width: none !important; min-width: 0 !important; border-right: none !important; border-bottom: 1px solid var(--bdr); }
}

/* ====== RESPONSIVE PETIT ECRAN ====== */
@media (max-width: 480px) {
    .mn { padding: var(--mn-pad-m) !important; padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important; }
    .sg-5 { grid-template-columns: 1fr !important; }
    .rev-card { padding: 12px 14px; }
    .rev-avatar { width: 32px; height: 32px; font-size: 14px; }
    .rev-author { font-size: 13px; }
    .rev-location-badge { font-size: 10px; }
    .ptit { font-size: 18px; }
    .reviews-dashboard { padding: 12px 14px !important; }
    .reviews-avg-num { font-size: 28px !important; }
    .hamburger-btn { top: calc(8px + env(safe-area-inset-top, 0px)); left: 8px; width: 36px; height: 36px; font-size: 18px; }

}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-width: 420px;
    width: calc(100% - 48px);
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    font-size: 14px;
    line-height: 1.45;
    color: var(--t1);
    transform: translateX(120%);
    opacity: 0;
    animation: toastIn .35s cubic-bezier(.22,1,.36,1) forwards;
    will-change: transform, opacity;
}
.toast.toast-out {
    animation: toastOut .28s cubic-bezier(.55,.06,.68,.19) forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    margin-top: 1px;
}

.toast-body {
    flex: 1;
    min-width: 0;
}
.toast-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2px;
}
.toast-msg {
    color: var(--t2);
    word-break: break-word;
}

.toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--t3);
    font-size: 18px;
    cursor: pointer;
    padding: 0 0 0 8px;
    line-height: 1;
    transition: color .15s;
}
.toast-close:hover { color: var(--t1); }

/* Toast types */
.toast--success .toast-icon { background: var(--gbg); color: var(--g); }
.toast--success { border-left: 3px solid var(--g); }
.toast--error .toast-icon { background: var(--rbg); color: var(--r); }
.toast--error { border-left: 3px solid var(--r); }
.toast--warning .toast-icon { background: var(--subtle-bg); color: var(--t1); }
.toast--warning { border-left: 3px solid var(--bdr); }
.toast--info .toast-icon { background: var(--subtle-bg); color: var(--t1); }
.toast--info { border-left: 3px solid var(--bdr); }

@keyframes toastIn {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}
@keyframes toastOut {
    from { transform: translateX(0); opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

/* ============================================================
   MODAL CONFIRMATION / PROMPT
   ============================================================ */
/* ====== previewModal — aperçu email/HTML (shared/ui/preview-modal.js) ======
   Mobile-first : plein écran. Desktop (≥769px) : modale centrée. */
.pvm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    animation: pvmFade .2s ease;
}
.pvm-overlay.pvm-out { animation: pvmFadeOut .2s ease forwards; }
.pvm-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    animation: pvmSlideUp .26s cubic-bezier(.16,1,.3,1);
}
.pvm-overlay.pvm-out .pvm-card { animation: none; }
.pvm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
}
.pvm-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pvm-close {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--rd-sm, 8px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--inp, transparent);
    border: 1px solid var(--bdr);
    color: var(--t1);
    cursor: pointer;
    transition: var(--tr);
}
.pvm-close:hover { background: var(--subtle-bg); border-color: var(--acc-border, var(--acc)); }
.pvm-note {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--t1);
    background: var(--subtle-bg);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
}
.pvm-subject {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--t2);
    background: var(--bg2);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
}
.pvm-subject strong { color: var(--t1); }
.pvm-body { flex: 1; min-height: 0; background: #f4f5f7; position: relative; }
.pvm-frame { width: 100%; height: 100%; border: none; background: #fff; display: block; }

/* Actions à droite du header de l'aperçu (Modifier + Fermer). */
.pvm-header-actions { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; }
.pvm-edit-btn {
    padding: 7px 14px; border-radius: var(--rd-pill);
    background: var(--primary-soft); color: var(--t1); border: 1px solid var(--ba);
    font-size: var(--fs-sm); font-weight: 600; cursor: pointer; font-family: inherit;
    white-space: nowrap;
}
.pvm-edit-btn:hover { border-color: var(--t1); }

/* Mode édition : textarea plein + barre d'actions en bas, à la place de l'iframe. */
.pvm-edit { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--card); }
.pvm-edit[hidden] { display: none; }
.pvm-edit-ta {
    flex: 1; min-height: 0; width: 100%; resize: none;
    border: none; border-radius: 0;
    padding: var(--sp-md) var(--sp-lg);
    font-family: inherit; font-size: var(--fs-md); line-height: 1.7; color: var(--t1);
    background: var(--card);
}
.pvm-edit-ta:focus { outline: none; box-shadow: none; }
.pvm-edit-bar {
    display: flex; justify-content: flex-end; gap: var(--sp-sm);
    padding: var(--sp-sm) var(--sp-md);
    border-top: 1px solid var(--bdr); background: var(--bg2); flex-shrink: 0;
}

@keyframes pvmSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pvmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pvmFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pvmZoom { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 769px) {
    .pvm-overlay {
        background: rgba(0,0,0,.6);
        align-items: center;
        justify-content: center;
        padding: 24px;
    }
    .pvm-card {
        flex: none;
        width: 80%;
        max-width: 920px;
        height: 85%;
        border: 1px solid var(--bdr);
        border-radius: var(--rd, 14px);
        overflow: hidden;
        box-shadow: var(--shadow-xl, 0 24px 64px rgba(0,0,0,.35));
        animation: pvmZoom .2s ease;
    }
    .pvm-header { border-radius: var(--rd, 14px) var(--rd, 14px) 0 0; }
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    animation: modalFadeIn .2s ease forwards;
}
.modal-overlay.modal-out {
    animation: modalFadeOut .18s ease forwards;
}

.modal-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    width: 100%;
    max-width: 440px; /* défaut historique = sm */
    overflow: hidden;
    transform: scale(.92) translateY(12px);
    animation: modalCardIn .25s cubic-bezier(.22,1,.36,1) forwards;
}
/* Design system : tailles modale. Voir DESIGN-SYSTEM.md §Modales. */
.modal-card--sm { max-width: 440px; }
.modal-card--md { max-width: 560px; }
.modal-card--lg { max-width: 880px; }
.modal-card--xl { max-width: 1120px; }
.modal-card--sm,
.modal-card--md,
.modal-card--lg,
.modal-card--xl { width: min(var(--modal-max-width, 100%), 95vw); }
.modal-card--sm { --modal-max-width: 440px; }
.modal-card--md { --modal-max-width: 560px; }
.modal-card--lg { --modal-max-width: 880px; }
.modal-card--xl { --modal-max-width: 1120px; }
/* Scroll : max-height + overflow auto sur le body */
.modal-card--scroll {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.modal-card--scroll .modal-body {
    overflow-y: auto;
    flex: 1;
}
/* Layout 2 colonnes dans une modale (ex: formulaire + aperçu). Stack sous 768px. */
.modal-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 20px;
    align-items: stretch;
}
.modal-split > * { min-width: 0; }
@media (max-width: 768px) {
    .modal-split { grid-template-columns: 1fr; gap: 12px; }
    .modal-card--lg, .modal-card--xl { --modal-max-width: 100%; }
}
.modal-overlay.modal-out .modal-card {
    animation: modalCardOut .18s ease forwards;
}

.modal-header {
    padding: 24px 24px 0;
}
.modal-header h3 {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--t1);
}

.modal-body {
    padding: 12px 24px 24px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--t2);
}

.modal-input {
    width: 100%;
    padding: 10px 14px;
    margin-top: 12px;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: var(--bg);
    color: var(--t1);
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color .15s;
}
.modal-input:focus { border-color: var(--t1); }

.modal-footer {
    padding: 0 24px 24px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.modal-btn:active { transform: scale(.97); }

.modal-btn--cancel {
    background: var(--bg);
    color: var(--t2);
    border: 1px solid var(--bdr);
}
.modal-btn--cancel:hover { color: var(--t1); background: var(--hover); }

.modal-btn--confirm {
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
}
.modal-btn--confirm:hover { box-shadow: var(--btn-p-glow); }

.modal-btn--danger {
    background: var(--r);
    color: #fff;
}
.modal-btn--danger:hover { background: var(--r); }

/* Loading state on buttons */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: .7;
}
.btn-loading::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin .6s linear infinite;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modalFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes modalCardIn {
    from { transform: scale(.92) translateY(12px); }
    to   { transform: scale(1) translateY(0); }
}
@keyframes modalCardOut {
    from { transform: scale(1) translateY(0); }
    to   { transform: scale(.92) translateY(12px); }
}

/* ============================================================
   CLIENT CARD QUICK ACTIONS
   ============================================================ */
.client-card-actions {
    display: flex;
    gap: 6px;
    padding: 10px 16px;
    border-top: 1px solid var(--bdr);
}
.client-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg);
    color: var(--t3);
    text-decoration: none;
    transition: all .15s;
}
.client-card-link:hover {
    background: var(--acc);
    color: #fff;
}
.client-card-link svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--bdr) 25%, rgba(255,255,255,.05) 50%, var(--bdr) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}
.skeleton-line {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 4px;
}
.skeleton-line:last-child { width: 60%; }
.skeleton-card {
    padding: 20px;
    border-radius: 14px;
    border: 1px solid var(--bdr);
    background: var(--card);
}
.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    font-size: 13px;
    color: var(--t3);
    border-bottom: 1px solid var(--bdr);
    background: var(--bg);
}
.breadcrumb a {
    color: var(--t1);
    text-decoration: none;
    transition: opacity .15s;
}
.breadcrumb a:hover { opacity: .8; }
.breadcrumb-sep { opacity: .4; }
.breadcrumb-current { color: var(--t1); font-weight: 600; }

/* ============================================================
   CLIENT SELECTOR
   ============================================================ */
.client-selector {
    min-width: 220px;
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: var(--card);
    color: var(--t1);
    cursor: pointer;
}

/* ============================================================
   CLIENT TABS (HORIZONTAL)
   ============================================================ */
.client-tabs {
    display: flex;
    gap: 2px;
    padding: 0 24px;
    background: var(--card);
    border-bottom: 2px solid var(--bdr);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.client-tabs::-webkit-scrollbar { display: none; }

.client-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t3);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}
.client-tab svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.client-tab:hover {
    color: var(--t1);
}
.client-tab.active {
    color: var(--t1);
    border-bottom-color: var(--t1);
    font-weight: 600;
}
.client-tab .nb {
    font-size: 10px;
    padding: 1px 6px;
    margin-left: 2px;
}

/* ============================================================
   RESPONSIVE — TOAST & MODAL
   ============================================================ */
@media (max-width: 768px) {
    .toast-container {
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: 100%;
        width: auto;
    }
    .toast {
        font-size: 13px;
        padding: 12px 14px;
    }
    @keyframes toastIn {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }
    @keyframes toastOut {
        from { transform: translateY(0); opacity: 1; }
        to   { transform: translateY(100%); opacity: 0; }
    }
    .breadcrumb { padding: 10px 16px; font-size: 12px; }
    .client-tabs { padding: 0 12px; gap: 0; }
    .client-tab { padding: 12px 10px; font-size: 12px; }
    .client-tab svg { width: 14px; height: 14px; }
    .client-selector { min-width: 100%; }
    .modal-overlay { padding: 16px; }
    .modal-card {
        max-width: 100%;
        border-radius: 14px;
    }
    .modal-header { padding: 20px 20px 0; }
    .modal-body { padding: 10px 20px 20px; }
    .modal-footer { padding: 0 20px 20px; flex-direction: column; }
    .modal-btn { padding: 12px 18px; font-size: 14px; width: 100%; text-align: center; }

    /* Modales "feuille" (actions rapides post/photo) : pleine largeur ancrée en bas,
       robuste contre tout décalage horizontal du contenu derrière. */
    .modal-overlay--sheet { padding: 0; align-items: flex-end; }
    .modal-overlay--sheet .modal-card {
        width: 100%; max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
    }
}

/* ============================================================
   INLINE FORM VALIDATION
   ============================================================ */
.field-group {
    position: relative;
    margin-bottom: var(--sp-md);
}
.field-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.field-group .si {
    width: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.field-group .field-hint {
    font-size: 11px;
    color: var(--t3);
    margin-top: 4px;
    display: none;
}
/* Valid state */
.field-group.valid .si {
    border-color: var(--t1);
    box-shadow: 0 0 0 3px var(--gbg);
}
.field-group.valid .field-hint { display: none; }
/* Error state */
.field-group.error .si {
    border-color: var(--dng);
    box-shadow: 0 0 0 3px var(--rbg);
}
.field-group.error .field-hint {
    display: block;
    color: var(--dng);
}
.field-group.error .si::placeholder { color: var(--rbg); }
/* Warning state */
.field-group.warning .si {
    border-color: var(--t1);
    box-shadow: 0 0 0 3px var(--subtle-bg);
}
.field-group.warning .field-hint {
    display: block;
    color: var(--t1);
}
/* Character counter */
.field-counter {
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-size: 10px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: var(--t3);
    pointer-events: none;
}
.field-counter.over { color: var(--dng); font-weight: 700; }
/* Required asterisk */
.field-group.required label::after {
    content: ' *';
    color: var(--dng);
    font-weight: 400;
}

/* ============================================================
   SKELETON PLACEHOLDERS (enriched)
   ============================================================ */
.skeleton-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
}
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.skeleton-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skeleton-text {
    height: 12px;
    border-radius: 4px;
}
.skeleton-text.w-full { width: 100%; }
.skeleton-text.w-3-4 { width: 75%; }
.skeleton-text.w-1-2 { width: 50%; }
.skeleton-text.w-1-4 { width: 25%; }
.skeleton-text.h-lg { height: 20px; }
.skeleton-stat {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
}
.skeleton-stat-card {
    flex: 1;
    height: 80px;
    border-radius: var(--rd-sm);
    border: 1px solid var(--bdr);
}

/* ============================================================
   EMPTY STATE COMPONENT
   ============================================================ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sp-2xl) var(--sp-lg);
    text-align: center;
}
.empty-state-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--sp-md);
    stroke: var(--t3);
    fill: none;
    stroke-width: 1.2;
    opacity: .4;
}
.empty-state-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t2);
    margin-bottom: var(--sp-sm);
}
.empty-state-desc {
    font-size: 13px;
    color: var(--t3);
    max-width: 400px;
    line-height: 1.5;
    margin-bottom: var(--sp-lg);
}

/* ============================================================
   STATUS PILL REFINED
   ============================================================ */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.status-pill--success { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.status-pill--warning { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.status-pill--danger  { background: var(--rbg); color: var(--dng); }
.status-pill--info    { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.status-pill--neutral { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ============================================================
   SECTION CARD (semantic)
   ============================================================ */
.section-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    margin-bottom: var(--sp-md);
    overflow: hidden;
}
.section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-md) 20px;
    border-bottom: 1px solid var(--bdr);
    cursor: pointer;
    transition: background .15s;
}
.section-card-header:hover { background: var(--card-hover); }
.section-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--t1);
}
.section-card-meta {
    font-size: 12px;
    color: var(--t3);
}
.section-card-body {
    padding: var(--sp-md) 20px;
}
.section-card-body.collapsed { display: none; }

/* ============================================================
   TRANSITION & ANIMATION UTILITIES
   ============================================================ */
.fade-in {
    animation: fadeInUp .3s cubic-bezier(.22,1,.36,1) forwards;
    opacity: 0;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stagger-1 { animation-delay: .05s; }
.stagger-2 { animation-delay: .10s; }
.stagger-3 { animation-delay: .15s; }
.stagger-4 { animation-delay: .20s; }
.stagger-5 { animation-delay: .25s; }

/* ============================================================
   RESPONSIVE — NEW COMPONENTS
   ============================================================ */
@media (max-width: 768px) {
    .field-group { margin-bottom: 12px; }
    .section-card-header { padding: 12px 16px; }
    .section-card-body { padding: 12px 16px; }
    .empty-state { padding: var(--sp-lg) var(--sp-md); }
    .empty-state-icon { width: 48px; height: 48px; }
    .skeleton-stat { flex-wrap: wrap; }
    .skeleton-stat-card { min-width: calc(50% - 8px); }
}

/* ============================================================
   PHASE 1 — SIDEBAR BADGE URGENT
   ============================================================ */
.nb-urgent {
    background: var(--r);
    color: #fff;
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge {
    0%, 100% { box-shadow: 0 0 0 0 var(--rbg); }
    50% { box-shadow: 0 0 0 4px var(--rbg); }
}
[data-theme="light"] .nb-urgent { color: #fff; }

.nb-warn {
    background: var(--r);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    min-height: 16px;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Collapsible sidebar sections --- */
.ns-group { margin-bottom: 2px; }
.ns-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;
    padding: 4px 12px 4px 10px;
    border-left: 2px solid var(--acc);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--t1);
    user-select: none;
    margin: 20px 8px 6px;
    opacity: 1;
}
.ns-group:first-of-type .ns-toggle { margin-top: 8px; }
.ns-chev { display: none; }
/* Sections toujours déroulées (plus d'accordéon) */
.ns-links {
    max-height: none;
    overflow: visible;
}

/* ============================================================
   ONBOARDING V2 — Split-panel layout
   ============================================================ */

/* --- Tab bar --- */
.onb-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg2);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: var(--sp-md);
}
.onb-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--t3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.onb-tab:hover { color: var(--t1); background: rgba(255,255,255,.04); }
.onb-tab.active { background: var(--primary-soft); color: var(--t1); box-shadow: none; }

/* --- Relance checklist --- */
.onb-relance-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid var(--b1);
    margin-bottom: 6px;
    user-select: none;
}
.onb-relance-item:hover { background: rgba(255,255,255,.03); border-color: var(--t3); }
.onb-relance-item.checked { background: rgba(0,212,255,.06); border-color: var(--t1); }
.onb-relance-item input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--t1);
    pointer-events: none;
    flex-shrink: 0;
}
.onb-relance-icon { font-size: 16px; flex-shrink: 0; }
.onb-relance-label { font-size: 13px; color: var(--t1); font-weight: 500; }

/* --- History badge relance --- */
.onb-history-badge.relance {
    background: rgba(251,146,60,.15);
    color: var(--t1);
}

/* --- Suivi onboarding --- */
.onb-suivi-wrap {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
}
.onb-suivi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.onb-suivi-counter {
    font-size: 20px;
    font-weight: 800;
    color: var(--t3);
    background: var(--bg2);
    padding: 6px 14px;
    border-radius: 8px;
}
.onb-suivi-counter.done { color: var(--g); background: rgba(16,185,129,.1); }
.onb-suivi-progress {
    height: 6px;
    background: var(--bg2);
    border-radius: 4px;
    overflow: hidden;
}
.onb-suivi-progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width .4s ease;
}
.onb-suivi-progress-bar.done { background: var(--g); }
.onb-suivi-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.onb-suivi-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg2);
    border: 1px solid var(--b1);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.onb-suivi-item:hover { border-color: var(--t3); }
.onb-suivi-item.done { background: var(--subtle-bg); border-color: var(--subtle-bg); }
.onb-suivi-check {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    border: 2px solid var(--b1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.onb-suivi-item.done .onb-suivi-check {
    background: var(--g);
    border-color: var(--g);
    color: var(--btn-p-ink);
}
.onb-suivi-icon { font-size: 18px; flex-shrink: 0; }
.onb-suivi-label { font-size: 14px; color: var(--t1); font-weight: 500; flex: 1; }
.onb-suivi-item.done .onb-suivi-label { color: var(--t2); }
.onb-suivi-date {
    font-size: 11px;
    color: var(--t3);
    white-space: nowrap;
}
.onb-suivi-ready {
    text-align: center;
    padding: 24px;
    background: var(--subtle-bg);
    border: 1px solid var(--subtle-bg);
    border-radius: 14px;
}
.onb-suivi-ready-icon { font-size: 32px; margin-bottom: 8px; }
.onb-suivi-ready-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.onb-suivi-ready-desc { font-size: 13px; color: var(--t3); }
.onb-suivi-pending {
    padding: 12px 16px;
    background: var(--bg2);
    border-radius: 8px;
    text-align: center;
}

/* --- Layout split --- */
.onb-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
    align-items: start;
    min-height: calc(100vh - 160px);
}
.onb-editor {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    padding-bottom: 100px; /* room for sticky actions */
    position: relative;
}
.onb-preview-pane {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    max-height: calc(100vh - 100px);
}

/* --- Progress bar --- */
.onb-progress {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 14px 20px;
    box-shadow: var(--sh);
    animation: fu .4s ease both;
}
.onb-progress-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    position: relative;
}
.onb-progress-step:not(:last-child)::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--bdr);
    margin: 0 12px;
    border-radius: 1px;
    transition: background .3s ease;
}
.onb-progress-step.done:not(:last-child)::after {
    background: var(--t1);
}
.onb-progress-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all .3s ease;
    background: var(--bg2);
    border: 2px solid var(--bdr);
    color: var(--t3);
}
.onb-progress-step.done .onb-progress-dot {
    background: var(--btn-p-bg); color: var(--btn-p-ink); border-color: var(--btn-p-bg);
    border-color: var(--t1);
    color: #fff;
}
.onb-progress-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    white-space: nowrap;
    transition: color .3s ease;
}
.onb-progress-step.done .onb-progress-label {
    color: var(--t1);
}
.onb-progress-status {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    white-space: nowrap;
    padding-left: var(--sp-md);
}
.onb-progress-status.ready {
    color: var(--g);
}

/* --- Section cards --- */
.onb-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    box-shadow: var(--sh);
    overflow: hidden;
    animation: fu .4s ease both;
    transition: border-color .2s ease;
}
.onb-section:nth-child(2) { animation-delay: .05s; }
.onb-section:nth-child(3) { animation-delay: .1s; }
.onb-section:nth-child(4) { animation-delay: .15s; }
.onb-section:nth-child(5) { animation-delay: .2s; }
.onb-section:nth-child(6) { animation-delay: .25s; }
.onb-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
}
.onb-section-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
}
.onb-section-icon.structure { background: var(--subtle-bg); }
.onb-section-icon.dest { background: rgba(0,212,255,.1); }
.onb-section-icon.contrat { background: rgba(0,212,255,.1); }
.onb-section-icon.acces { background: var(--subtle-bg); }
.onb-section-icon.factu { background: var(--subtle-bg); }
.onb-section-icon.textes { background: var(--subtle-bg); }
.onb-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.2px;
}
.onb-section-check {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    background: var(--bg);
    border: 1.5px solid var(--bdr);
}
.onb-section-check.done {
    background: var(--g);
    border-color: var(--g);
}
.onb-section-check.done svg { stroke: #fff; }
.onb-section-check svg {
    width: 12px;
    height: 12px;
    stroke: transparent;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.onb-section-body {
    padding: 16px 20px;
}

/* --- Field rows inside sections --- */
.onb-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.onb-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 6px;
    letter-spacing: .2px;
}
.onb-field input {
    width: 100%;
    background: var(--inp);
    border: 1px solid var(--bdr);
    color: var(--t1);
    padding: 10px 14px;
    border-radius: var(--rd-sm);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.onb-field input::placeholder { color: var(--t3); }
.onb-field input:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 3px rgba(0,212,255,.12); }

/* --- Segmented control --- */
.onb-seg {
    display: flex;
    gap: 2px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    padding: 3px;
}
.onb-seg-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--t2);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
    text-align: center;
    white-space: nowrap;
}
.onb-seg-btn:hover:not(.active) {
    color: var(--t1);
    background: var(--subtle-bg);
}
.onb-seg-btn.active {
    background: var(--primary-soft);
    color: var(--t1);
    box-shadow: none;
}

/* Variant for 3-option seg */
.onb-seg--3 .onb-seg-btn {
    padding: 8px 8px;
    font-size: 11px;
}

/* Variant for 4-option seg : grille 2x2, labels longs autorisés à wrapper */
.onb-seg--4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}
.onb-seg--4 .onb-seg-btn {
    padding: 9px 8px;
    font-size: 11px;
    white-space: normal;
    line-height: 1.25;
}
/* 5 options et plus : 3 colonnes, sinon la 5e reste orpheline sur sa ligne */
.onb-seg--5 {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 640px) {
    .onb-seg--4, .onb-seg--5 { grid-template-columns: 1fr; }
}

/* --- Wizard onboarding : cartes de choix explicatives (étape Structure) --- */
.onb-step-intro {
    font-size: var(--fs-base);
    color: var(--t2);
    line-height: 1.6;
    margin: 0 0 var(--sp-md);
}
.onb-choice-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-sm);
}
@media (max-width: 640px) {
    .onb-choice-cards { grid-template-columns: 1fr; }
}
.onb-choice-card {
    text-align: left;
    padding: 14px;
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    background: var(--bg);
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease;
}
.onb-choice-card:hover { border-color: var(--t3); }
.onb-choice-card.active { background: var(--primary-soft); border-color: var(--ba); }
.onb-choice-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 4px;
}
.onb-choice-card.active .onb-choice-title { color: var(--t1); }
.onb-choice-desc {
    font-size: var(--fs-sm);
    color: var(--t3);
    line-height: 1.5;
}

/* --- Wizard onboarding : bandeau brouillon repris (reprise jamais silencieuse) --- */
.onb-draft-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    margin-bottom: var(--sp-sm);
}
.onb-draft-banner-text {
    font-size: var(--fs-sm);
    color: var(--t2);
    line-height: 1.5;
}
.onb-draft-banner-text strong { color: var(--t1); }
.onb-draft-banner-text span { color: var(--t3); }
.onb-draft-banner .btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .onb-draft-banner { flex-direction: column; align-items: stretch; }
}

/* --- Wizard onboarding : barre de navigation Retour / Suivant --- */
.onb-wiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-sm);
    margin-top: var(--sp-xs);
}
.onb-wiz-nav .btn.bp { margin-left: auto; }
.onb-wiz-nav .onb-wiz-save { flex-shrink: 0; }

/* Étape courante du stepper : anneau accent léger sur la puce, clic autorisé */
.onb-progress-step { cursor: pointer; }
.onb-progress-step.current .onb-progress-dot { box-shadow: 0 0 0 2px var(--ba); }

/* --- Option group label --- */
.onb-opt-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.onb-opt-group { margin-bottom: 14px; }
.onb-opt-group:last-child { margin-bottom: 0; }

/* --- Collapsible advanced section --- */
.onb-collapse-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-align: left;
}
.onb-collapse-trigger:hover { background: var(--subtle-hover); }
.onb-collapse-chev {
    margin-left: auto;
    width: 16px;
    height: 16px;
    stroke: var(--t3);
    stroke-width: 2;
    fill: none;
    transform: rotate(-90deg);
    transition: transform .2s ease;
}
.onb-collapse-trigger.open .onb-collapse-chev { transform: rotate(0deg); }
.onb-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.onb-collapse-body.open {
    max-height: 2000px;
}
.onb-collapse-inner {
    padding: 0 20px 20px;
}

/* --- Sélecteur de modèle (variante) --- */
.onb-variant-section {
    padding: 16px 20px;
}
.onb-variant-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--t3);
    margin-bottom: 8px;
}
.onb-variant-hint {
    font-size: 11px;
    color: var(--t3);
    margin-top: 8px;
}
.onb-variant-hint a { color: var(--t1); text-decoration: none; }
.onb-variant-hint a:hover { text-decoration: underline; }

/* --- Note "pour cet envoi uniquement" --- */
.onb-tpl-note {
    font-size: 11px;
    color: var(--t2);
    line-height: 1.5;
    background: rgba(0,212,255,.06);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.onb-tpl-note a { color: var(--t1); text-decoration: none; }
.onb-tpl-note a:hover { text-decoration: underline; }

/* --- Template editor rows --- */
.onb-tpl-row {
    margin-bottom: 12px;
}
.onb-tpl-row:last-child { margin-bottom: 0; }
.onb-tpl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.onb-tpl-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
}
.onb-tpl-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.onb-tpl-badge.modified { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.onb-tpl-badge.hidden { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.onb-tpl-toggle {
    background: none;
    border: 1px solid var(--bdr);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    color: var(--t3);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s ease;
}
.onb-tpl-toggle:hover { border-color: var(--t3); color: var(--t2); }
.onb-tpl-textarea {
    width: 100%;
    font-size: 12px;
    color: var(--t1);
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    min-height: 50px;
    transition: border-color .15s;
}
.onb-tpl-textarea:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 3px rgba(0,212,255,.08); }
.onb-tpl-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bdr);
}

/* --- Sticky action bar --- */
.onb-actions {
    position: sticky;
    bottom: 0;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px 20px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.25);
    z-index: 10;
    animation: fu .4s ease both;
    animation-delay: .3s;
}
.onb-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.onb-actions .btn-send {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--rd);
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    box-shadow: var(--btn-p-shadow);
}
.onb-actions .btn-send:hover:not(:disabled) {
    box-shadow: var(--btn-p-glow);
    transform: translateY(-1px);
}
.onb-actions .btn-send:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.onb-actions .btn-test {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--rd);
    background: transparent;
    color: var(--t1);
    border: 1px solid var(--bdr);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.onb-actions .btn-test:hover { background: var(--subtle-bg); border-color: rgba(255,255,255,.15); }
/* Bouton "Aperçu" (mobile only) : caché en desktop, l'aperçu inline à droite suffit.
   Sélecteur aussi spécifique que .onb-actions .btn-test, placé après pour gagner. */
.onb-actions .onb-preview-btn-m { display: none; }
.onb-actions-secondary {
    margin-top: 10px;
    text-align: center;
}
.onb-actions-link {
    background: none;
    border: none;
    color: var(--t3);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 4px 8px;
    transition: color .15s;
}
.onb-actions-link:hover { color: var(--t1); text-decoration: underline; }

/* --- Preview pane --- */
.onb-preview-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    box-shadow: var(--sh);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: fu .4s ease both;
    animation-delay: .1s;
}
.onb-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bdr);
}
.onb-preview-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
}
.onb-preview-header-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--t1);
    animation: onb-pulse 2s ease infinite;
    margin-left: auto;
}
@keyframes onb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}
.onb-preview-hint {
    font-size: 12px;
    color: var(--t3);
    padding: 8px 14px;
    background: var(--bg2);
    border-bottom: 1px solid var(--bdr);
    display: flex;
    align-items: center;
}
.onb-preview-frame-wrap {
    flex: 1;
    overflow-y: auto;
    background: var(--bg2);
    display: flex;
    justify-content: center;
}
.onb-preview-frame-wrap iframe {
    width: 100%;
    max-width: 620px;
    min-height: 700px;
    height: 100%;
    border: none;
    background: #f4f5f7;
}

/* --- Empty state --- */
.onb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    flex: 1;
}
.onb-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.onb-empty-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 1.5;
}
.onb-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 6px;
}
.onb-empty-desc {
    font-size: 13px;
    color: var(--t3);
    max-width: 240px;
    line-height: 1.5;
}

/* --- History section in preview pane --- */
.onb-history {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    box-shadow: var(--sh);
    overflow: hidden;
    animation: fu .4s ease both;
    animation-delay: .2s;
}
.onb-history-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bdr);
}
.onb-history-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
}
.onb-history-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
    background: rgba(0,212,255,.1);
    padding: 2px 8px;
    border-radius: 10px;
}
.onb-history-list {
    padding: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.onb-history-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--rd-sm);
    transition: background .15s ease;
}
.onb-history-entry:hover { background: var(--subtle-hover); }
.onb-history-entry-info { flex: 1; min-width: 0; }
.onb-history-entry-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.onb-history-entry-meta {
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px;
}
.onb-history-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.onb-history-badge.sent { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.onb-history-badge.manual { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.onb-history-badge.opened { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.onb-history-badge.failed { background: var(--rbg); color: var(--r); }
.onb-history-del {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all .15s;
    opacity: 0;
    flex-shrink: 0;
}
.onb-history-entry:hover .onb-history-del { opacity: 1; }
.onb-history-del:hover { color: var(--r); background: var(--rbg); }
.onb-history-del svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.onb-history-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--t3);
    font-size: 12px;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .onb-split {
        grid-template-columns: 1fr;
    }
    .onb-preview-pane {
        position: relative;
        top: 0;
        max-height: none;
    }
    /* Mobile : on masque l'aperçu inline (il finirait tout en bas) et on l'ouvre via
       le bouton "Aperçu" en overlay. L'historique reste visible. */
    .onb-preview-card { display: none; }
    .onb-actions .onb-preview-btn-m { display: inline-flex; align-items: center; gap: 7px; }
    .onb-editor {
        padding-bottom: 120px;
    }
    .onb-progress-label { display: none; }
    .onb-progress-status { font-size: 11px; }
}
@media (max-width: 640px) {
    .onb-section-body { padding: 12px 14px; }
    .onb-section-header { padding: 12px 14px; }
    .onb-field-row { grid-template-columns: 1fr; }
    .onb-actions { padding: 12px 14px; }
    .onb-actions .btn-send { padding: 10px 20px; font-size: 13px; }
    .onb-seg-btn { padding: 7px 6px; font-size: 11px; }
    .onb-progress { padding: 10px 14px; gap: 0; }
    .onb-tabs { gap: 3px; padding: 3px; }
    .onb-tab { padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 480px) {
    /* Stepper ultra-compact : dots seuls, pas de texte */
    .onb-progress-dot { width: 22px; height: 22px; font-size: 10px; }
    .onb-progress-status { padding-left: 8px; }
    /* Cache la preview sur très petit écran (trop lourde à charger) */
    .onb-preview-pane { display: none; }
    /* Sub-tab chips plus petits */
    .acq-sub-tab { padding: 6px 10px; font-size: 12px; }
    /* Section nav : icône plus petite */
    .acq-section-btn { padding: 12px 14px; gap: 10px; }
    .acq-section-btn-icon { width: 34px; height: 34px; }
    .acq-section-btn-desc { display: none; }
}

/* ============================================================
   PHASE 1 — BOTTOM NAV MOBILE · LIQUID GLASS
   ============================================================ */
.bottom-nav {
    display: none;
    position: fixed;
    z-index: 1200;
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--sp-xs);
    /* Pas de `transform: translateZ(0)` ici : cette promotion forcée en couche
       composite, combinée au backdrop-filter, faisait perdre l'ancrage viewport
       de la nav sur mobile quand la hauteur du document changeait d'un coup
       (re-render de la liste des fiches au changement de tri). La nav se figeait
       alors à son ancien offset document et apparaissait au milieu de l'écran.
       `contain: layout` isole la nav du reflow du reste de la page sans créer de
       couche composite. */
    contain: layout;
}
/* ── Liquid Glass shell ── */
.bottom-nav.glass-nav {
    bottom: 14px;
    left: 20px;
    right: 20px;
    border-radius: var(--rd-pill);
    padding: var(--sp-sm) var(--sp-sm) calc(env(safe-area-inset-bottom, 0px) + var(--sp-sm));
    /* Multi-layer translucent fill — tinted glass */
    background:
        linear-gradient(
            168deg,
            rgba(255,255,255,0.72) 0%,
            rgba(255,255,255,0.38) 40%,
            rgba(240,248,255,0.32) 100%
        );
    /* Double border: outer crisp + inner specular highlight */
    border: 1.5px solid rgba(255,255,255,0.5);
    outline: 1px solid rgba(0,0,0,0.04);
    outline-offset: -1px;
    /* Deep blur + saturation boost = true glass refraction */
    -webkit-backdrop-filter: var(--glass-heavy-blur);
    backdrop-filter: var(--glass-heavy-blur);
    /* Layered shadows for floating depth */
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.85) inset,         /* top specular line */
        0 -0.5px 0 0 rgba(0,0,0,0.03) inset,             /* bottom inner edge */
        0 2px 4px rgba(0,0,0,0.02),                       /* tight contact */
        0 8px 24px rgba(0,0,0,0.06),                      /* medium lift */
        0 20px 48px -8px rgba(0,0,0,0.08);                /* deep ambient */
    overflow: hidden;
}
/* Specular shine sweep — the "liquid" highlight */
.bottom-nav.glass-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,0.55) 0%,
            rgba(255,255,255,0.18) 25%,
            transparent 50%,
            rgba(255,255,255,0.06) 80%,
            rgba(255,255,255,0.25) 100%
        );
    pointer-events: none;
    z-index: 1;
}
/* Subtle inner caustic glow */
.bottom-nav.glass-nav::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 15%;
    right: 15%;
    height: 45%;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* ── Dark theme ── */
[data-theme="dark"] .bottom-nav.glass-nav {
    background:
        linear-gradient(
            168deg,
            rgba(30,41,59,0.72) 0%,
            rgba(15,23,42,0.55) 40%,
            rgba(15,23,42,0.48) 100%
        );
    border-color: rgba(255,255,255,0.1);
    outline-color: rgba(0,0,0,0.2);
    -webkit-backdrop-filter: var(--glass-heavy-blur);
    backdrop-filter: var(--glass-heavy-blur);
    box-shadow:
        0 1px 0 0 rgba(255,255,255,0.1) inset,
        0 -0.5px 0 0 rgba(0,0,0,0.15) inset,
        0 2px 4px rgba(0,0,0,0.08),
        0 8px 24px rgba(0,0,0,0.18),
        0 20px 48px -8px rgba(0,0,0,0.28);
}
[data-theme="dark"] .bottom-nav.glass-nav::before {
    background:
        linear-gradient(
            105deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.04) 25%,
            transparent 50%,
            rgba(255,255,255,0.02) 80%,
            rgba(255,255,255,0.06) 100%
        );
}
[data-theme="dark"] .bottom-nav.glass-nav::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
}

/* ── Nav items ── */
/* Equal touch targets keep both the four- and five-link navigation on one row. */
.bottom-nav-item {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: var(--sp-sm) var(--sp-xs);
    border-radius: var(--rd-pill);
    color: var(--t3);
    text-decoration: none;
    transition: background var(--tr), color var(--tr);
    position: relative;
    z-index: 2;
}
/* Icon-only visually; link names remain available to screen readers. */
.bottom-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.bottom-nav-item svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    filter: drop-shadow(0 0 0 transparent);
}
/* Active state — glassy pill MONOCHROME (Instagram-like : encre pleine, pas de cyan) */
.bottom-nav-item.active {
    color: var(--t1);
    background:
        linear-gradient(
            180deg,
            rgba(127,127,127,0.16) 0%,
            rgba(127,127,127,0.06) 100%
        );
    box-shadow:
        0 0 0 1px rgba(127,127,127,0.18) inset,
        0 1px 2px rgba(0,0,0,0.08);
}
.bottom-nav-item.active svg {
    filter: none;
}
/* The selected icon keeps a filled capsule in both themes. */
[data-theme="dark"] .bottom-nav-item.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0.04) 100%
        );
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10) inset,
        0 1px 2px rgba(0,0,0,0.2);
}
[data-theme="dark"] .bottom-nav-item.active svg {
    filter: none;
}

/* ── Badge ── */
/* More specific than [data-tip], which otherwise moves the badge into the row. */
.bottom-nav .bottom-nav-badge {
    position: absolute;
    top: 0;
    right: auto;
    left: calc(50% + var(--sp-xs));
    background: var(--r);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(220,38,38,0.3);
}
@media (max-width: 1024px) {
    .bottom-nav { display: flex; }
    .mn { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
    .toast-container { bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
    /* Barre d'actions sticky de l'onboarding (Envoyer/Aperçu/Tester) : la remonter
       au-dessus de la navbar flottante mobile, sinon les boutons passent dessous. */
    .onb-actions { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   PHASE 1 — DASHBOARD ALERTES
   ============================================================ */
.alerts-banner {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.alerts-banner::-webkit-scrollbar { display: none; }
.alert-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--rd);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    animation: fu .4s ease both;
    border: 1px solid;
}
.alert-card .alert-icon { font-size: 16px; flex-shrink: 0; }
.alert-card .alert-text { flex: 1; }
.alert-card .alert-action {
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 8px;
    transition: var(--tr);
    flex-shrink: 0;
}
.alert-danger {
    background: var(--rbg);
    color: var(--r);
    border-color: var(--rbg);
}
.alert-danger .alert-action { color: var(--r); background: var(--rbg); }
.alert-danger .alert-action:hover { background: var(--rbg); }

.alert-warning {
    background: var(--subtle-bg);
    color: var(--t1);
    border-color: var(--subtle-bg);
}
.alert-warning .alert-action { color: var(--t1); background: var(--subtle-bg); }
.alert-warning .alert-action:hover { background: var(--subtle-bg); }

.alert-info {
    background: var(--subtle-bg);
    color: var(--t1);
    border-color: var(--subtle-bg);
}
.alert-info .alert-action { color: var(--t1); background: var(--subtle-bg); }
.alert-info .alert-action:hover { background: var(--subtle-bg); }

.alert-success {
    background: var(--gbg);
    color: var(--g);
    border-color: var(--gbg);
}

/* ============================================================
   PHASE 1 — KPI ENRICHIS
   ============================================================ */
.sg-5 { grid-template-columns: repeat(5, 1fr); }
.sc-link {
    font-size: 11px;
    color: var(--t1);
    margin-top: 6px;
    display: block;
    font-weight: 600;
}
.sc-sub {
    font-size: 11px;
    color: var(--t3);
    margin-top: 6px;
}
@media (max-width: 1280px) {
    .sg-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .sg-5 {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .sg-5 .sc { padding: 14px 16px; }
    .sg-5 .sv { font-size: 22px; }
}
@media (max-width: 480px) {
    .sg-5 {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 8px;
        scrollbar-width: none;
    }
    .sg-5::-webkit-scrollbar { display: none; }
    .sg-5 .sc {
        min-width: 140px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* ============================================================
   PHASE 1 — DASHBOARD CONTROLS (search + sort + filter)
   ============================================================ */
.dashboard-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.dashboard-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 8px 14px;
    flex: 1;
    min-width: 200px;
}
.dashboard-search svg {
    width: 16px;
    height: 16px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.dashboard-search input {
    color: var(--t1);
    font-size: 13px;
}
.dashboard-search input::placeholder { color: var(--t3); }
.dashboard-filters {
    display: flex;
    gap: 8px;
}
@media (max-width: 640px) {
    .dashboard-controls { flex-direction: column; }
    .dashboard-search { width: 100%; }
    .dashboard-filters { width: 100%; }
    .dashboard-filters select { flex: 1; }
}

/* ============================================================
   PHASE 1 — HEALTH INDICATOR (dots)
   ============================================================ */
.health-indicator {
    display: flex;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 8px;
    flex-shrink: 0;
}
.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot-g { background: var(--g); }
.dot-o { background: var(--t1); }
.dot-r { background: var(--r); }
.dot-n { background: var(--subtle-bg); border: 1px solid var(--bdr); }

/* ============================================================
   PHASE 1 — CLIENT CARD ACTION BADGE
   ============================================================ */
.client-card-link {
    position: relative;
}
.card-action-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--r);
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============================================================
   PHASE 1 — REVIEWS ALL: ENHANCED STATS + SIDE PANEL
   ============================================================ */
.reviews-dashboard {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid var(--bdr);
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.reviews-avg-block {
    text-align: center;
}
.reviews-avg-num {
    font-size: 48px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: var(--t1);
    line-height: 1;
}
.reviews-avg-stars {
    color: var(--o);
    font-size: 20px;
    letter-spacing: 2px;
    margin-top: 4px;
}
.reviews-avg-total {
    font-size: 12px;
    color: var(--t3);
    margin-top: 4px;
}
.reviews-distribution {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.reviews-dist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.reviews-dist-row .dist-star { width: 14px; text-align: right; color: var(--t2); }
.reviews-dist-row .dist-icon { color: var(--o); }
.reviews-dist-row .dist-bar {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
}
[data-theme="light"] .reviews-dist-row .dist-bar { background: rgba(0,0,0,.06); }
.reviews-dist-row .dist-bar-fill {
    height: 100%;
    background: var(--t1);
    border-radius: 4px;
    transition: width .6s ease;
}
.reviews-dist-row .dist-count { width: 30px; color: var(--t3); text-align: right; }
.reviews-kpi-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.reviews-kpi {
    text-align: center;
    padding: 10px 16px;
    background: var(--inp);
    border-radius: 8px;
    border: 1px solid var(--bdr);
    width: 100%;
}
.reviews-kpi-num {
    font-size: 24px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.reviews-kpi-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

/* Reviews filters enhanced */
.reviews-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
    max-width: 100%;
    box-sizing: border-box;
}
.reviews-filter-bar .filter-sep {
    width: 1px;
    height: 24px;
    background: var(--bdr);
    margin: 0 4px;
}

/* Reviews state badges */
.rev-state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.rev-state-urgent { background: var(--rbg); color: var(--r); }
.rev-state-new { background: var(--subtle-bg); color: var(--t1); }
.rev-state-pending { background: var(--subtle-bg); color: var(--t1); }
.rev-state-replied { background: var(--gbg); color: var(--g); }
.rev-state-auto { background: rgba(0,212,255,.1); color: var(--t1); }
.rev-state-deleted { background: rgba(148,163,184,.08); color: var(--t3); }

/* Side panel */
.side-panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,.4);
    opacity: 0;
    transition: opacity .25s ease;
    display: none;
}
.side-panel-overlay.active {
    display: block;
    opacity: 1;
}
.side-panel {
    position: fixed;
    top: 0;
    right: -520px;
    bottom: 0;
    width: 520px;
    max-width: 100%;
    z-index: 10001;
    background: var(--bg2);
    border-left: 1px solid var(--bdr);
    overflow-y: auto;
    transition: right .3s cubic-bezier(.22,1,.36,1);
    box-shadow: -8px 0 32px rgba(0,0,0,.2);
}
.side-panel.open { right: 0; }
.side-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid var(--bdr);
    position: sticky;
    top: 0;
    background: var(--bg2);
    z-index: 1;
}
.side-panel-close {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: none;
    color: var(--t2);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tr);
}
.side-panel-close:hover { background: var(--subtle-bg); color: var(--t1); }
.side-panel-body {
    padding: 20px;
}
.side-panel-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--bdr);
    display: flex;
    gap: 10px;
    position: sticky;
    bottom: 0;
    background: var(--bg2);
}
.side-panel-links {
    padding: 16px 20px;
    border-top: 1px solid var(--bdr);
}
.side-panel-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--t1);
    text-decoration: none;
    transition: opacity .15s;
}
.side-panel-links a:hover { opacity: .8; }
.side-panel-links a svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Batch action bar */
.batch-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 260px;
    right: 0;
    z-index: 9999;
    background: var(--card);
    border-top: 2px solid var(--acc);
    padding: 12px 24px;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.2);
    animation: fu .2s ease;
}
.batch-bar.visible { display: flex; }
.batch-bar-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
}
.batch-bar-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

@media (max-width: 1024px) {
    .batch-bar { left: 0; bottom: 64px; }
    .side-panel { width: 100%; right: -100%; }
    .side-panel.open { right: 0; }

    .reviews-dashboard {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    .reviews-avg-block {
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
    }
    .reviews-kpi-block {
        flex-direction: row;
    }
    .reviews-kpi {
        flex: 1;
    }

    .alerts-banner {
        flex-direction: column;
        gap: 8px;
    }
    .alert-card {
        white-space: normal;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .reviews-filter-bar {
        padding: 10px 12px;
        gap: 6px;
    }
    .reviews-filter-bar .filter-sep { display: none; }
    .filter-btn { padding: 4px 10px; font-size: 11px; }
}

/* ============================================
   SIDEBAR v4 — Client Contextuelle (refonte 2026)
   ============================================ */

/* --- Client header compact (back + name inline) --- */
.sb-client-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 0 0 6px;
    border-radius: var(--rd-sm);
    background: rgba(0, 212, 255, .04);
    border: 1px solid rgba(0, 212, 255, .08);
}
.sb-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--t2);
    flex-shrink: 0;
    transition: all .15s;
    text-decoration: none;
}
.sb-back-btn:hover { background: rgba(255,255,255,.08); color: var(--t1); }
.sb-back-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-client-meta { min-width: 0; flex: 1; }
.sb-client-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.sb-client-city {
    font-size: 11px;
    color: var(--t1);
    opacity: .8;
    line-height: 1.2;
}
.sb-client-selector {
    width: 100%;
    margin-bottom: 6px;
    font-size: 12px;
    padding: 6px 10px;
}
[data-theme="light"] .sb-client-header { background: rgba(0,212,255,.04); border-color: rgba(0,212,255,.12); }
[data-theme="light"] .sb-back-btn:hover { background: var(--subtle-bg); }

/* --- Dividers --- */
.sb-divider {
    height: 0;
    background: transparent;
    border: 0;
    margin: 6px 0 0;
    opacity: 0;
}
[data-theme="light"] .sb-divider { background: transparent; }

/* --- Section labels (flat, not collapsible) --- */
.sb-section-label {
    margin: 20px 8px 6px;
    padding: 4px 12px 4px 10px;
    border-left: 2px solid var(--acc);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: var(--t1);
    opacity: 1;
}

/* --- CTA Checklist --- */
.sb-cta-checklist {
    margin: 2px 0 4px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.04);
    transition: all .2s;
}
.sb-cta-checklist:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
.sb-cta-checklist.act { background: var(--acc-subtle); border-color: rgba(0,212,255,.15); }
[data-theme="light"] .sb-cta-checklist { background: var(--bg2); border-color: var(--bdr); }
[data-theme="light"] .sb-cta-checklist:hover { background: var(--subtle-bg); border-color: var(--bdr); }
[data-theme="light"] .sb-cta-checklist.act { background: rgba(0,212,255,.06); border-color: rgba(0,212,255,.2); }


/* --- Footer compact --- */
.sb-logout {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--t3);
    text-decoration: none;
    transition: color .15s;
}
.sb-logout:hover { color: var(--dng); }
.sb-legal {
    margin-top: 8px;
    font-size: 10px;
    color: var(--t3);
    line-height: 1.6;
}
.sb-legal a { color: var(--t3); text-decoration: none; }
.sb-legal a:hover { color: var(--t2); }

/* --- Collapsed mode: hide new elements --- */
.sb.collapsed .sb-client-header { justify-content: center; padding: 6px; }
.sb.collapsed .sb-client-meta { display: none; }
.sb.collapsed .sb-back-btn { width: 32px; height: 32px; }
.sb.collapsed .sb-divider { margin: 6px 4px; }
.sb.collapsed .sb-section-label { display: none; }
.sb.collapsed .sb-cta-checklist { padding: 10px; justify-content: center; border: none; background: transparent; }
.sb.collapsed .sb-cta-checklist:hover { background: rgba(255,255,255,.05); }
.sb.collapsed .sb-legal { display: none; }
.sb.collapsed .sb-logout { display: none; }

/* Legacy compat */
.sb-back { opacity: .7; font-size: 13px; }
.sb-back:hover { opacity: 1; }
.sb-back svg { width: 16px; height: 16px; }

/* ============================================
   PHASE 3 — Client Header Pro
   ============================================ */
.client-header-pro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 24px;
    gap: 16px;
}
.client-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: #222;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.08);
}
.client-name-pro {
    font-size: 22px;
    font-weight: 700;
    color: var(--t1);
    margin: 0;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.client-meta-pro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.client-city-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
    background: rgba(0, 212, 255, .1);
    padding: 2px 10px;
    border-radius: 14px;
}
.client-category {
    font-size: 12px;
    color: var(--t3);
}
.client-header-right {
    flex-shrink: 0;
}
.btn-gmaps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t2);
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--rd-sm);
    text-decoration: none;
    transition: all .15s;
}
.btn-gmaps svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.btn-gmaps:hover {
    color: var(--t1);
    border-color: var(--t1);
    background: rgba(0, 212, 255, .06);
}

/* ============================================
   PHASE 3 — KPI Grid
   ============================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: var(--sp-section);
}
.kpi-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--rd);
    padding: 20px 22px;
    box-shadow: var(--sh);
    transition: var(--tr);
    animation: fu .4s ease both;
}
.kpi-card:nth-child(1) { animation-delay: .05s; }
.kpi-card:nth-child(2) { animation-delay: .12s; }
.kpi-card:nth-child(3) { animation-delay: .19s; }
.kpi-card:nth-child(4) { animation-delay: .26s; }
.kpi-card:nth-child(5) { animation-delay: .33s; }
.kpi-card:hover {
    border-color: rgba(0,212,255, .25);
    cursor: pointer;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}
.kpi-value {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--t1);
    letter-spacing: -0.5px;
}
.kpi-value.kpi-accent {
    color: var(--t1);
}
.kpi-total {
    font-size: 14px;
    color: var(--t3);
    -webkit-text-fill-color: var(--t3);
}
.kpi-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--t3);
}

@media (max-width: 1280px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .client-header-pro { flex-direction: column; align-items: flex-start; padding: 16px 0; }
    .client-header-right { align-self: flex-start; }
    .client-name-pro { font-size: 18px; }
    .client-avatar { width: 40px; height: 40px; font-size: 18px; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-card { padding: 12px 14px; }
    .kpi-value { font-size: 22px; }
    .btn-gmaps span { display: none; }
}

/* Legacy compat — kept for non-client views using .kpi-sub */
.kpi-link {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: var(--t1);
    text-decoration: none;
    opacity: .8;
    transition: opacity .15s;
}
.kpi-link:hover { opacity: 1; }
.kpi-link.kpi-urgent { color: var(--t1); font-weight: 600; }

/* Legacy tabs — hidden (moved to sidebar) */
.client-tabs-grouped { display: none !important; }
.client-tab .nb {
    font-size: 10px;
    padding: 1px 6px;
}

/* ============================================
   PHASE 2 — Posts Calendar View
   ============================================ */
.posts-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg2);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    padding: 2px;
}
.posts-view-btn {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
    border: none;
    background: none;
    color: var(--t3);
    cursor: pointer;
    transition: var(--tr);
}
.posts-view-btn.active {
    background: var(--primary-soft);
    color: var(--t1);
}

.posts-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--bdr);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 16px;
}
.cal-header {
    background: var(--bg2);
    padding: 10px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t3);
}
.cal-day {
    background: var(--card);
    min-height: 80px;
    padding: 6px;
    position: relative;
    vertical-align: top;
}
.cal-day.other-month { opacity: .35; }
.cal-day.today { background: rgba(0,212,255,.04); }
.cal-day-num {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 4px;
}
.cal-day.today .cal-day-num { color: var(--t1); }
.cal-event {
    display: block;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity .15s;
    text-decoration: none;
}
.cal-event:hover { opacity: .8; }
.cal-event.published { background: var(--gbg); color: var(--g); }
.cal-event.scheduled { background: rgba(0,212,255,.12); color: var(--t1); }
.cal-event.draft { background: rgba(148,163,184,.1); color: var(--t3); }
.cal-event.failed { background: var(--rbg); color: var(--r); }
.cal-event.list_pending { background: var(--subtle-bg); color: var(--t1); }
.cal-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.cal-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: none;
    color: var(--t2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: var(--tr);
}
.cal-nav-btn:hover { background: var(--subtle-bg); color: var(--t1); }
.cal-month-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--t1);
    min-width: 160px;
    text-align: center;
}

/* ============================================
   PHASE 2 — Fiches GBP Table Enrichie
   ============================================ */
.loc-health-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}
.loc-health-label {
    font-size: 11px;
    font-weight: 600;
}
.loc-health-label.good { color: var(--t1); }
.loc-health-label.medium { color: var(--t1); }
.loc-health-label.poor { color: var(--r); }
.loc-activity {
    display: flex;
    gap: 4px;
    align-items: center;
}
.loc-activity-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.loc-neg-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    background: var(--rbg);
    color: var(--r);
}

/* ============================================
   PHASE 2 — Responsive Additions
   ============================================ */
@media (max-width: 1024px) {
    .client-header { padding: 0 16px 12px; }
    .client-header-main { flex-direction: column; }
    .client-header-title { font-size: 18px; }
    .client-header-actions { width: 100%; }
    .client-header-actions .si { width: 100%; }

    .client-tabs-grouped { padding: 0 12px; gap: 0; }
    .tab-group-label { display: none; }
    .tab-group-sep { margin: 8px 2px; }
    .client-tabs-grouped .client-tab { padding: 12px 10px; font-size: 12px; }
    .client-tabs-grouped .client-tab svg { width: 14px; height: 14px; }

    .posts-calendar { grid-template-columns: repeat(7, 1fr); }
    .cal-day { min-height: 60px; padding: 4px; }
    .cal-day-num { font-size: 11px; }
    .cal-event { font-size: 9px; padding: 1px 3px; }
}

@media (max-width: 480px) {
    .client-tabs-grouped .client-tab span:not(.nb) { /* hide text, keep icon */ }
    .cal-day { min-height: 44px; }
    .cal-event { display: none; }
    .cal-day.has-event::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--btn-p-bg);
        margin: 4px auto 0;
    }
}

/* ============================================
   STATS PRO — Metric Cards & Table (Localo-style)
   ============================================ */
.stats-interaction-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 768px) {
    .stats-interaction-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .stats-interaction-grid { grid-template-columns: 1fr; }
}

.stats-table { width: 100%; border-collapse: collapse; }
.stats-table th {
    text-align: left;
    padding: 7px 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--t3);
    border-bottom: 1px solid var(--bdr);
    background: var(--overlay);
}
.stats-table td {
    padding: 6px 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--subtle-line);
}
.stats-table tbody tr:nth-child(even) { background: var(--subtle-bg); }
.stats-table tbody tr:hover { background: var(--subtle-hover); }
.stats-table tr:last-child td { border-bottom: none; }
.stats-row-hl { background: rgba(0,212,255,.06) !important; }
.stats-row-hl td { color: var(--t1) !important; }

/* ============================================
   ERROR MONITORING — Dashboard
   ============================================ */
.error-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
}
.sev-critical { color: #fff; background: var(--r); }
.sev-error { color: var(--r); background: var(--rbg); }
.sev-warning { color: var(--t1); background: var(--subtle-bg); }
.sev-info { color: var(--t1); background: var(--subtle-bg); }

.error-table tbody tr:hover { background: var(--subtle-hover); }
.error-row:hover td { color: var(--t1); }

/* Error detail overlay + modal */
.error-detail-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.7);
    -webkit-backdrop-filter: var(--glass-scrim-blur);
    backdrop-filter: var(--glass-scrim-blur);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .15s ease;
}
.error-detail-modal {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-lg);
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    animation: fu .25s ease both;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 640px) {
    .error-detail-modal { max-width: 100%; border-radius: var(--rd); }
    .error-table th:nth-child(4),
    .error-table td:nth-child(4) { display: none; }
}

/* ============================================================
   PREMIUM UX — Custom Scrollbar
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.2); }

/* ============================================================
   PREMIUM UX — View Transitions
   ============================================================ */
#module-content { animation: fadeSlideIn .3s ease; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   PREMIUM UX — Breadcrumbs
   ============================================================ */
.breadcrumb { font-size: 12px; color: var(--t3); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.breadcrumb a { color: var(--t2); transition: color .15s; }
.breadcrumb a:hover { color: var(--t1); }
.breadcrumb svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; }

/* ============================================================
   PREMIUM UX — Command Palette (Cmd+K)
   ============================================================ */

@media (max-width: 768px) {
}

/* ============================================================
   PREMIUM UX — Responsive Tables → Cards
   ============================================================ */
@media (max-width: 768px) {
    .modal-card {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
        overflow-y: auto;
        animation: slideUpSheet .3s ease;
    }
    @keyframes slideUpSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

    .side-panel { width: 100% !important; }
}

/* ============================================================
   PHOTOS GBP — Premium SaaS Grid
   ============================================================ */
/* Stats bar */
.photos-stats {
    display: flex;
    gap: 24px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
}
.photos-stat { display: flex; align-items: baseline; gap: 6px; }
.photos-stat-n { font-size: 20px; font-weight: 700; color: var(--t1); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.photos-stat-l { font-size: 12px; color: var(--t3); font-weight: 500; }

/* Filter pills */
.photos-filters {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
    align-items: center;
}
.photos-filter-btn {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    transition: all var(--tr);
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}
.photos-filter-btn:hover { background: var(--subtle-bg); color: var(--t1); border-color: rgba(255,255,255,.15); }
.photos-filter-btn.act { background: var(--primary-soft); color: var(--t1); border-color: var(--ba); }
[data-theme="light"] .photos-filter-btn:hover { border-color: rgba(0,0,0,.15); }

/* Bulk bar */
.photos-bulk-bar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--bdr);
    background: var(--primary-soft);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Grid */
/* ===== MEDIA GALLERY — v4 (Bento / Modern SaaS) ===== */

/* Animations */
@keyframes mgShimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes mgFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes mgSlideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* Root */
.mg { display: flex; flex-direction: column; gap: 28px; animation: mgFadeIn .3s ease; padding: 4px var(--sp-sm); }

/* ── Split-panel layout ── */
.mg-split { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.mg-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.mg-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 80px; }

/* ── Page Header (aide contextuelle enrichie) ── */
.mg-page-header {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 24px 28px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(0,212,255,.06) 0%, var(--acc-subtle) 100%);
    border: 1px solid rgba(0,212,255,.08);
}
.mg-page-header-text { flex: 1; min-width: 0; }
.mg-page-title {
    font-size: 26px; font-weight: 800; color: var(--t1); margin-bottom: 6px;
    letter-spacing: -.03em;
    background: var(--btn-p-bg);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.mg-page-desc { font-size: 13px; color: var(--t3); line-height: 1.6; max-width: 600px; }
.mg-page-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* Keyboard shortcut hint */
.mg-kbd { display: inline-flex; align-items: center; padding: 1px 5px; font-size: 10px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--subtle-bg); color: var(--t3); border-radius: 4px; border: 1px solid var(--bdr); line-height: 1.4; }

/* Banner contextuel */
.mg-banner {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 16px;
    font-size: 13px; color: var(--t2); line-height: 1.5;
    background: linear-gradient(135deg, rgba(0,212,255,.06), var(--acc-subtle));
    border: 1px solid rgba(0,212,255,.1);
    animation: mgSlideUp .4s ease;
    box-shadow: 0 0 24px rgba(0,212,255,.04);
}
.mg-banner-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: rgba(0,212,255,.1); display: flex; align-items: center; justify-content: center; }
.mg-banner-icon svg { width: 16px; height: 16px; stroke: var(--t2); fill: none; stroke-width: 2; }
.mg-banner-text { flex: 1; }
.mg-banner-close { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; background: transparent; border: none; cursor: pointer; color: var(--t3); display: flex; align-items: center; justify-content: center; transition: all .15s; }
.mg-banner-close:hover { background: var(--subtle-bg); color: var(--t1); }
.mg-banner-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── Stepper ── */
.mg-stepper {
    display: flex; align-items: center; gap: 0;
    padding: 8px 12px;
    background: var(--card);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--bdr);
    border-radius: 18px;
}
.mg-step {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: 14px;
    cursor: pointer; transition: all .25s;
    flex-shrink: 0;
}
.mg-step:hover { background: var(--subtle-bg); }
.mg-step--active { background: var(--primary-soft); }
.mg-step--done { }
.mg-step-icon {
    width: 40px; height: 40px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--subtle-bg); border: 1px solid var(--bdr);
    transition: all .25s; flex-shrink: 0;
}
.mg-step-icon svg { width: 18px; height: 18px; stroke: var(--t3); fill: none; stroke-width: 2; transition: stroke .25s; }
.mg-step--active .mg-step-icon {
    background: linear-gradient(135deg, rgba(0,212,255,.2), rgba(0,212,255,.08));
    border-color: rgba(0,212,255,.25);
    box-shadow: 0 0 16px rgba(0,212,255,.1);
}
.mg-step--active .mg-step-icon svg { stroke: var(--t2); }
.mg-step--done .mg-step-icon {
    background: var(--gbg); border-color: var(--gbg);
}
.mg-step--done .mg-step-icon svg { stroke: var(--g); }
.mg-step-info { min-width: 0; }
.mg-step-title { font-size: 13px; font-weight: 700; color: var(--t2); transition: color .25s; }
.mg-step--active .mg-step-title { color: var(--t1); }
.mg-step--done .mg-step-title { color: var(--t1); }
.mg-step-desc { font-size: 11px; color: var(--t3); margin-top: 2px; white-space: nowrap; }
.mg-step--active .mg-step-desc { color: rgba(0,212,255,.6); }
.mg-step-line {
    flex: 1; height: 2px; min-width: 20px;
    background: var(--bdr);
    margin: 0 4px; border-radius: 1px;
}
.mg-step-line--done {
    background: linear-gradient(90deg, var(--subtle-bg), rgba(0,212,255,.2));
}

/* ── Choice cards (schedule mode picker) ── */
.mg-choice-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px; border-radius: 14px;
    background: var(--subtle-bg); border: 1px solid var(--bdr);
    cursor: pointer; transition: all .25s;
}
.mg-choice-card:hover { background: var(--subtle-bg); border-color: var(--bdr); }
.mg-choice-card--active {
    background: rgba(0,212,255,.05); border-color: rgba(0,212,255,.2);
    box-shadow: 0 0 16px rgba(0,212,255,.06);
}
.mg-choice-icon {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mg-choice-icon svg { width: 20px; height: 20px; fill: none; stroke-width: 1.5; }
.mg-choice-info { flex: 1; min-width: 0; }
.mg-choice-title { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.mg-choice-desc { font-size: 12px; color: var(--t3); line-height: 1.5; }
.mg-choice-card--active .mg-choice-title { color: var(--t1); }
.mg-choice-check {
    width: 24px; height: 24px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.1); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.mg-choice-check svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.5; opacity: 0; transition: opacity .2s; }
.mg-choice-card--active .mg-choice-check {
    background: var(--acc); border-color: var(--t1);
    box-shadow: 0 0 8px rgba(0,212,255,.2);
}
.mg-choice-card--active .mg-choice-check svg { opacity: 1; }

/* Skeleton sidebar */
.mg-skel-sidebar { height: 400px; border-radius: 14px; background: linear-gradient(90deg, var(--subtle-bg) 25%, var(--bdr) 50%, var(--subtle-bg) 75%); background-size: 200% 100%; animation: mgShimmer 1.5s ease infinite; }

/* Help dot (?) */
.mg-help-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--subtle-bg); color: var(--t3);
    font-size: 9px; font-weight: 700; cursor: help;
    margin-left: 3px; vertical-align: middle;
    transition: background .15s, color .15s;
}
.mg-help-dot:hover { background: var(--acc); color: #fff; }

/* ── Empty state steps (pedagogical) ── */
.mg-empty-steps {
    display: flex; flex-direction: column; gap: 10px;
    margin: 16px auto 20px; max-width: 380px; text-align: left;
}
.mg-empty-step {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 13px; color: var(--t2); line-height: 1.5;
    padding: 10px 14px; border-radius: 10px;
    background: var(--subtle-bg); border: 1px solid transparent; transition: all .2s;
}
.mg-empty-step:hover { border-color: var(--bdr); background: var(--card); }
.mg-empty-step-n {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,212,255,.1); color: var(--t1);
    font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ── Skeleton loaders ── */
.mg-skel-bar {
    height: 56px; border-radius: 14px; width: 100%;
    background: linear-gradient(90deg, var(--subtle-bg) 25%, var(--bdr) 50%, var(--subtle-bg) 75%);
    background-size: 200% 100%; animation: mgShimmer 1.5s ease infinite;
}
.mg-skel-tabs {
    height: 44px; border-radius: 10px;
    background: linear-gradient(90deg, var(--subtle-bg) 25%, var(--bdr) 50%, var(--subtle-bg) 75%);
    background-size: 200% 100%; animation: mgShimmer 1.5s ease infinite;
}
.mg-skel-card {
    height: 260px; border-radius: 14px;
    background: linear-gradient(90deg, var(--subtle-bg) 25%, var(--bdr) 50%, var(--subtle-bg) 75%);
    background-size: 200% 100%; animation: mgShimmer 1.5s ease infinite;
}

/* ── Bento Overview ── */
.mg-bento {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 14px;
}
.mg-bento-cell {
    background: var(--card);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--bdr);
    border-radius: 18px;
    padding: 24px;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden;
}
.mg-bento-cell::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,.2), transparent);
    opacity: 0; transition: opacity .3s;
}
.mg-bento-cell:hover::before { opacity: 1; }
.mg-bento-cell:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.05);
    border-color: rgba(0,212,255,.15);
    transform: translateY(-2px);
}

/* Stats cell */
.mg-bento-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.mg-bstat { text-align: center; }
.mg-bstat-n { font-size: 32px; font-weight: 800; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; line-height: 1; transition: color .3s; }
.mg-bstat-l { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .8px; margin-top: 6px; font-weight: 600; }

/* Auto-publish cell */
.mg-bento-auto-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mg-bento-tag {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    padding: 4px 12px; border-radius: 999px;
    background: var(--subtle-bg); color: var(--t3);
    border: 1px solid var(--bdr);
}
.mg-bento-tag--on {
    background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(0,212,255,.08));
    color: var(--t1); border-color: rgba(0,212,255,.2);
    box-shadow: 0 0 12px rgba(0,212,255,.1);
}
.mg-bento-auto-title { font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 6px; }
.mg-bento-auto-cfg { font-size: 12px; color: var(--t2); line-height: 1.5; }

/* Next pub cell */
.mg-bento-next { display: flex; flex-direction: column; justify-content: center; }
.mg-bento-next-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--t3); margin-bottom: 8px; }
.mg-bento-next-date { font-size: 20px; font-weight: 800; color: var(--t1); text-transform: capitalize; }
.mg-bento-next-time { font-size: 13px; color: var(--t2); margin-top: 4px; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.mg-bento-next-cd { color: var(--t1); font-weight: 700; }

/* ── Toolbar ── */
.mg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
/* Toolbar contextuelle (multi-selection) */
.mg-toolbar--select {
    background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(0,212,255,.02));
    border: 1px solid rgba(0,212,255,.2);
    border-radius: 14px; padding: 12px 18px; animation: mgSlideUp .2s ease;
    box-shadow: 0 0 20px rgba(0,212,255,.05);
}
.mg-toolbar--select .mg-toolbar-left { color: var(--t1); font-size: 13px; font-weight: 600; }
.mg-select-count { font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; color: var(--t1); }
.mg-toolbar-left { display: flex; align-items: center; gap: 8px; }
.mg-toolbar-right { display: flex; align-items: center; gap: 8px; }
.mg-select {
    padding: 8px 32px 8px 12px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--bdr); border-radius: 8px; background: var(--card); color: var(--t1);
    font-family: 'Inter', sans-serif; cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; transition: border-color .15s;
}
.mg-select:hover { border-color: var(--t3); }
.mg-select:focus { border-color: var(--t1); outline: none; box-shadow: 0 0 0 3px rgba(0,212,255,.1); }

/* Buttons */
.mg-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
    font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid transparent;
    cursor: pointer; transition: all .15s; font-family: 'Inter', sans-serif; white-space: nowrap;
}
.mg-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.mg-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.mg-btn--primary {
    background: linear-gradient(135deg, var(--acc), #0097a7); color: #fff; border-color: transparent;
    box-shadow: 0 2px 8px rgba(0,212,255,.15);
}
.mg-btn--primary:hover {
    background: linear-gradient(135deg, #00e5ff, #00b8d4); border-color: transparent;
    box-shadow: 0 4px 16px rgba(0,212,255,.3); transform: translateY(-1px);
}
.mg-btn--success { background: transparent; color: var(--t1); border-color: var(--t1); }
.mg-btn--success:hover { background: var(--subtle-bg); }
.mg-btn--outline { background: transparent; color: var(--t2); border-color: var(--bdr); }
.mg-btn--outline:hover { background: var(--subtle-bg); color: var(--t1); border-color: var(--t3); }
.mg-btn--ghost { background: transparent; color: var(--t3); border-color: transparent; }
.mg-btn--ghost:hover { background: var(--subtle-bg); color: var(--t1); }
.mg-btn--danger:hover { background: var(--rbg); color: var(--r); }
.mg-btn--sm { padding: 6px 10px; font-size: 12px; }
.mg-btn--sm svg { width: 14px; height: 14px; }

/* Segmented Control */
.mg-segments {
    display: flex; gap: 0;
    background: var(--subtle-bg);
    border: 1px solid var(--bdr);
    border-radius: 14px; padding: 4px;
}
.mg-seg {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--t3);
    background: transparent; border: none; cursor: pointer; transition: all .25s; font-family: 'Inter', sans-serif;
}
.mg-seg:hover { color: var(--t1); background: var(--subtle-bg); }
.mg-seg--on {
    background: var(--card); color: var(--seg-c, var(--t1));
    box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.05);
}
.mg-seg-count {
    font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px;
    background: var(--subtle-bg); color: var(--t3); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; transition: all .2s;
}
.mg-seg--on .mg-seg-count { background: var(--seg-c, var(--acc)); color: #fff; box-shadow: 0 0 8px rgba(0,0,0,.15); }

/* (legacy topbar/bottom removed — now using bento) */

/* Grid */
.mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

/* Card */
.mg-card {
    display: flex; flex-direction: column;
    background: var(--card);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--bdr);
    border-radius: var(--rd); overflow: hidden; cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1); position: relative;
    animation: mgSlideUp .35s ease backwards;
}
.mg-card:nth-child(1) { animation-delay: 0s; }
.mg-card:nth-child(2) { animation-delay: .04s; }
.mg-card:nth-child(3) { animation-delay: .08s; }
.mg-card:nth-child(4) { animation-delay: .12s; }
.mg-card:nth-child(5) { animation-delay: .16s; }
.mg-card:nth-child(6) { animation-delay: .20s; }
.mg-card:nth-child(7) { animation-delay: .24s; }
.mg-card:nth-child(8) { animation-delay: .28s; }
@media (prefers-reduced-motion: reduce) { .mg-card { animation: none !important; } }
.mg-card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.2), 0 0 0 1px rgba(0,212,255,.1);
    border-color: rgba(0,212,255,.15);
    transform: translateY(-4px);
}
.mg-card:active { transform: translateY(-1px); }
/* Accent glow top */
.mg-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--card-accent, rgba(0,212,255,.4)), transparent);
    border-radius: 16px 16px 0 0; opacity: 0; transition: opacity .3s;
}
.mg-card:hover::before { opacity: 1; }
/* Selection */
.mg-card--selectable { cursor: default; }
.mg-card--selected { border-color: var(--t1) !important; box-shadow: 0 0 0 2px rgba(0,212,255,.2), 0 4px 12px rgba(0,0,0,.08); }
.mg-card-check { position: absolute; top: 10px; left: 10px; z-index: 3; width: 22px; height: 22px; border-radius: 8px; background: rgba(0,0,0,.4); -webkit-backdrop-filter: var(--glass-scrim-blur); backdrop-filter: var(--glass-scrim-blur); border: 2px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; transition: all .15s; cursor: pointer; }
.mg-card-check:hover { background: rgba(0,0,0,.6); border-color: #fff; }
.mg-card--selected .mg-card-check { background: var(--acc); border-color: var(--t1); }
.mg-card-check svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; transition: opacity .15s; }
.mg-card--selected .mg-card-check svg { opacity: 1; }
/* Queue number */
.mg-card-queue { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.5); -webkit-backdrop-filter: var(--glass-scrim-blur); backdrop-filter: var(--glass-scrim-blur); font-size: 11px; font-weight: 700; color: var(--t1); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.mg-card-thumb {
    aspect-ratio: 4/3; background: var(--inp); position: relative; overflow: hidden;
}
.mg-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.mg-card:hover .mg-card-thumb img { transform: scale(1.03); }
.mg-card-thumb::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
    background: linear-gradient(to top, rgba(0,0,0,.3), transparent); pointer-events: none;
}
.mg-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 44px; height: 44px; background: rgba(0,0,0,.45); -webkit-backdrop-filter: var(--glass-scrim-blur); backdrop-filter: var(--glass-scrim-blur); transition: all .2s;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.mg-card:hover .mg-play { background: rgba(0,0,0,.6); transform: translate(-50%,-50%) scale(1.08); }
.mg-play svg { width: 18px; height: 18px; stroke: #fff; fill: rgba(255,255,255,.15); stroke-width: 1.5; }
.mg-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mg-card-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mg-card-title { font-size: 14px; font-weight: 600; color: var(--t1); }
.mg-card-date { font-size: 12px; font-weight: 500; }
.mg-card-meta { font-size: 11px; color: var(--t3); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: 4px; }

/* Status badge (pill) */
.mg-st {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .3px;
}
.mg-st svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.mg-st--pub { background: #dcfce7; color: #166534; }
.mg-st--sched { background: var(--subtle-bg); color: var(--t1); }
.mg-st--queue { background: var(--subtle-bg); color: var(--t1); }
.mg-st--draft { background: #fef3c7; color: #92400e; }
.mg-st--err { background: #fee2e2; color: #991b1b; }
.mg-st--type { background: rgba(0,212,255,.1); color: var(--t1); font-size: 10px; }
[data-theme="dark"] .mg-st--pub { background: var(--subtle-bg); color: #4ade80; }
[data-theme="dark"] .mg-st--sched { background: var(--subtle-bg); color: var(--t1); }
[data-theme="dark"] .mg-st--queue { background: var(--subtle-bg); color: var(--t1); }
[data-theme="dark"] .mg-st--draft { background: var(--subtle-bg); color: var(--t1); }
[data-theme="dark"] .mg-st--err { background: var(--rbg); color: #f87171; }

/* Card footer (reveal on hover) */
.mg-card-foot { display: flex; gap: 6px; padding: 8px 14px 12px; border-top: 1px solid var(--bdr); opacity: 0; max-height: 0; overflow: hidden; transition: all .2s ease; }
.mg-card:hover .mg-card-foot, .mg-card:focus-within .mg-card-foot { opacity: 1; max-height: 60px; padding-top: 8px; }

/* Ghost card (CTA to add more) */
.mg-ghost {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 200px; border: 2px dashed var(--bdr); border-radius: 16px;
    background: var(--subtle-bg); cursor: pointer; transition: all .3s;
    color: var(--t3); font-size: 13px; font-weight: 600;
}
.mg-ghost svg { width: 32px; height: 32px; stroke: var(--t3); fill: none; stroke-width: 1.5; transition: all .25s; }
.mg-ghost:hover { border-color: rgba(0,212,255,.3); background: rgba(0,212,255,.04); color: var(--t1); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1), 0 0 20px rgba(0,212,255,.05); }
.mg-ghost:hover svg { stroke: var(--t2); transform: scale(1.1); }

/* Aside */
.mg-aside { display: flex; flex-direction: column; gap: 12px; }
.mg-panel {
    background: var(--card);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--bdr);
    border-radius: 16px; padding: 20px;
    transition: all .25s;
}
.mg-panel:hover { border-color: var(--bdr); box-shadow: var(--shadow-md); }
.mg-rhythm-num { width: 64px; }
.mg-panel--accent {
    border-color: rgba(0,212,255,.15);
    background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(0,212,255,.02));
    box-shadow: 0 0 20px rgba(0,212,255,.04);
}
.mg-panel-head {
    font-size: 11px; font-weight: 700; color: var(--t2);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px;
    display: flex; align-items: center; gap: 6px;
}
.mg-panel-head svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.mg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-stat { text-align: center; padding: 8px 4px; border-radius: 8px; transition: background .15s; }
.mg-stat:hover { background: var(--subtle-bg); }
.mg-stat-n { display: block; font-size: 22px; font-weight: 700; color: var(--t1); font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mg-stat-l { display: block; font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.mg-mode-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mg-mode-config { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bdr); display: flex; flex-direction: column; gap: 8px; }
.mg-cf-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.mg-cf-row span:first-child { color: var(--t3); }
.mg-cf-row span:last-child { color: var(--t1); font-weight: 600; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: 11px; }

/* Toggle */
.ph-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; }
.ph-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ph-toggle-track { position: absolute; inset: 0; background: var(--bdr); border-radius: 20px; transition: background .25s cubic-bezier(.4,0,.2,1); }
.ph-toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; transition: transform .25s cubic-bezier(.4,0,.2,1); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ph-toggle input:checked + .ph-toggle-track { background: var(--acc); }
.ph-toggle input:checked + .ph-toggle-track::after { transform: translateX(16px); }
.ph-toggle input:focus-visible + .ph-toggle-track { box-shadow: 0 0 0 3px rgba(0,212,255,.2); }

/* Empty */
.mg-empty { text-align: center; padding: 64px 24px; max-width: 440px; margin: 0 auto; animation: mgSlideUp .4s ease; }
.mg-empty-icon {
    width: 72px; height: 72px; margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(0,212,255,.12), var(--acc-subtle));
    border: 1px solid rgba(0,212,255,.1);
    border-radius: 20px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 40px rgba(0,212,255,.08);
}
.mg-empty-icon svg { width: 32px; height: 32px; stroke: var(--t2); fill: none; stroke-width: 1.5; }
.mg-empty-title { font-size: 17px; font-weight: 700; color: var(--t1); margin-bottom: 8px; }
.mg-empty-desc { font-size: 14px; color: var(--t3); line-height: 1.7; margin-bottom: 24px; }

/* Dropzone */
.photo-dropzone { border: 2px dashed var(--bdr); border-radius: 14px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all .25s; background: var(--subtle-bg); }
.photo-dropzone:hover, .photo-dropzone.dragover { border-color: var(--t1); background: var(--primary-soft); }
.photo-dropzone .dz-icon { width: 44px; height: 44px; stroke: var(--t3); fill: none; stroke-width: 1.5; margin: 0 auto 12px; transition: stroke .2s; }
.photo-dropzone.dragover .dz-icon { stroke: var(--t2); }

/* Responsive */
@media (max-width: 1280px) {
    .mg-split { grid-template-columns: 1fr; }
    .mg-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 1024px) {
    .mg-bento { grid-template-columns: 1fr 1fr; }
    .mg-bento-next { grid-column: 1 / -1; }
    .mg-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .mg { gap: 14px; }
    .mg-page-title { font-size: 18px; }
    .mg-page-header { flex-direction: column; }
    .mg-stepper { flex-wrap: wrap; padding: 8px; gap: 4px; }
    .mg-step { padding: 10px 14px; flex: 1; min-width: 0; }
    .mg-step-line { display: none; }
    .mg-step-desc { display: none; }
    .mg-bento { grid-template-columns: 1fr; }
    .mg-bento-cell { padding: 14px; }
    .mg-bento-stats { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .mg-bstat-n { font-size: 20px; }
    .mg-toolbar { flex-direction: column; align-items: stretch; }
    .mg-toolbar-left, .mg-toolbar-right { width: 100%; }
    .mg-toolbar-left .mg-btn { flex: 1; justify-content: center; }
    .mg-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .mg-card { border-radius: var(--rd); }
    .mg-card-body { padding: 10px 14px; }
    .mg-card-foot { padding: 0 14px 10px; opacity: 1; max-height: none; }
    .mg-segments { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mg-seg { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
    .mg-ghost { min-height: 150px; }
    .mg-banner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .mg-grid { grid-template-columns: 1fr; }
    .mg-bento-stats { grid-template-columns: 1fr 1fr; }
}

/* DEPRECATED — old classes kept for backward compat */
.photos-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    padding: 0;
}
.photos-main { min-width: 0; }
.photos-sidebar { display: flex; flex-direction: column; gap: 14px; }

/* KPI Bar */
.ph-kpi-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.ph-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    transition: border-color .2s, box-shadow .2s;
}
.ph-kpi:hover { border-color: rgba(0,212,255,.2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.ph-kpi-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ph-kpi-data { display: flex; flex-direction: column; gap: 2px; }
.ph-kpi-val { font-size: 20px; font-weight: 700; color: var(--t1); line-height: 1.2; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.ph-kpi-label { font-size: 11px; color: var(--t3); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }

/* Action Bar */
.ph-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ph-action-left { display: flex; align-items: center; gap: 8px; }
.ph-action-right { display: flex; align-items: center; gap: 8px; }
.ph-cat-filter {
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    min-width: 160px;
    background: var(--card) !important;
}

/* Tabs */
.ph-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--subtle-bg);
    padding: 4px;
    border-radius: 10px;
}
.ph-tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--t3);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s;
    font-family: 'Inter', sans-serif;
}
.ph-tab svg { stroke: currentColor; fill: none; stroke-width: 2; }
.ph-tab:hover { color: var(--t1); background: var(--card); }
.ph-tab.active {
    background: var(--card);
    color: var(--tab-color, var(--t1));
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.ph-tab-count {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--subtle-bg);
    color: var(--t3);
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.ph-tab-count.active { color: #fff; }

/* Photo Grid */
.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

/* Photo Card */
.photo-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s, transform .15s, box-shadow .2s;
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.photo-card:hover {
    border-color: rgba(0,212,255,.3);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-2px);
}

/* Card image */
.photo-img {
    width: 100%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-color: var(--inp);
    position: relative;
    overflow: hidden;
}
.photo-img::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(0,0,0,.4), transparent);
    pointer-events: none;
}

/* Video icon overlay */
.ph-video-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    background: rgba(0,0,0,.5);
    -webkit-backdrop-filter: var(--glass-scrim-blur);
    backdrop-filter: var(--glass-scrim-blur);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.ph-video-icon svg {
    width: 20px; height: 20px;
    stroke: #fff; fill: rgba(255,255,255,.2); stroke-width: 1.5;
}

/* Badge */
.ph-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    z-index: 2;
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}
.ph-badge--pub { background: var(--badge-overlay-bg); color: #fff; }
.ph-badge--sched { background: var(--badge-overlay-bg); color: #fff; }
.ph-badge--queue { background: var(--badge-overlay-bg); color: #fff; }
.ph-badge--draft { background: var(--badge-overlay-bg); color: #fff; }
.ph-badge--fail { background: var(--rbg); color: #fff; }
[data-theme="light"] .ph-badge--pub { background: var(--subtle-bg); }
[data-theme="light"] .ph-badge--draft { background: var(--subtle-bg); }
[data-theme="light"] .ph-badge--fail { background: var(--rbg); }

/* Card body */
.photo-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.ph-card-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.photo-cat {
    font-size: 11px;
    font-weight: 700;
    color: var(--t1);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ph-type-pill {
    font-size: 9px;
    font-weight: 700;
    color: var(--t1);
    background: rgba(0,212,255,.1);
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: .5px;
}
.ph-date {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ph-date--sched { color: var(--t1); }
.ph-date--pub { color: var(--t1); }
.photo-meta {
    font-size: 10px;
    color: var(--t3);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    margin-top: auto;
    padding-top: 4px;
}

/* Card footer actions (always visible) */
.ph-card-footer {
    display: flex;
    gap: 6px;
    padding: 0 12px 12px;
}
.ph-foot-btn {
    padding: 7px 0;
    font-size: 11px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    transition: all .15s;
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.ph-foot-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.ph-foot-btn:hover { background: var(--subtle-bg); color: var(--t1); }
.ph-foot--pub {
    flex: 2;
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border-color: transparent;
}
.ph-foot--pub:hover { background: var(--btn-p-bg); border-color: transparent; box-shadow: var(--btn-p-glow); color: var(--btn-p-ink); }
.ph-foot--edit { flex: 1; }
.ph-foot--sched { flex: 0 0 36px; color: var(--t1); border-color: rgba(0,212,255,.3); }
.ph-foot--sched:hover { background: rgba(0,212,255,.1); border-color: var(--t1); }
.ph-foot--unsched { flex: 1; color: var(--t3); }
.ph-foot--unsched:hover { background: var(--rbg); color: var(--r); border-color: var(--r); }
.ph-foot--del { flex: 0 0 36px; color: var(--t3); }
.ph-foot--del:hover { background: var(--rbg); color: var(--r); border-color: var(--r); }

/* Sidebar Cards */
.ph-sidebar-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    padding: 16px;
}
.ph-sidebar-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ph-sidebar-title svg { stroke: var(--t2); fill: none; flex-shrink: 0; }

/* Next publication card */
.ph-next-pub { border-color: rgba(0,212,255,.2); background: rgba(0,212,255,.03); }
.ph-next-date { font-size: 14px; font-weight: 600; color: var(--t1); text-transform: capitalize; }
.ph-next-time { font-size: 12px; color: var(--t2); margin-top: 4px; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.ph-countdown { color: var(--t1); font-weight: 600; }

/* Auto publish config */
.ph-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; flex-shrink: 0; }
.ph-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ph-toggle-track {
    position: absolute; inset: 0;
    background: var(--bdr); border-radius: 20px;
    transition: background .2s;
}
.ph-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: #fff; border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ph-toggle input:checked + .ph-toggle-track { background: var(--acc); }
.ph-toggle input:checked + .ph-toggle-track::after { transform: translateX(16px); }

/* Mode cards */
.ph-mode-card {
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 12px;
    transition: border-color .2s, background .2s;
    cursor: default;
}
.ph-mode-card:not(.ph-mode--active) { cursor: pointer; }
.ph-mode-card:not(.ph-mode--active):hover { border-color: rgba(0,212,255,.3); background: rgba(0,212,255,.02); }
.ph-mode--active { border-color: var(--t1); background: rgba(0,212,255,.04); }
.ph-mode-header { display: flex; align-items: center; gap: 10px; }
.ph-mode-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ph-mode-name { font-size: 13px; font-weight: 700; color: var(--t1); }
.ph-mode-desc { font-size: 11px; color: var(--t3); margin-top: 2px; line-height: 1.4; }
.ph-mode-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bdr);
    display: flex; flex-direction: column; gap: 6px;
}
.ph-auto-details { display: flex; flex-direction: column; gap: 8px; }
.ph-auto-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.ph-auto-label { color: var(--t3); }
.ph-auto-val { color: var(--t1); font-weight: 600; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; font-size: 11px; }

/* Empty state */
.ph-empty {
    text-align: center;
    padding: 60px 20px;
}
.ph-empty h3 { font-size: 16px; font-weight: 600; color: var(--t2); margin: 16px 0 8px; }
.ph-empty p { font-size: 13px; color: var(--t3); max-width: 360px; margin: 0 auto 20px; line-height: 1.6; }

/* Dropzone (side panel) */
.photo-dropzone {
    border: 2px dashed var(--bdr);
    border-radius: 14px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    background: var(--subtle-bg);
}
.photo-dropzone:hover, .photo-dropzone.dragover {
    border-color: var(--t1);
    background: var(--primary-soft);
}
.photo-dropzone .dz-icon {
    width: 44px; height: 44px;
    stroke: var(--t3); fill: none; stroke-width: 1.5;
    margin: 0 auto 12px;
    transition: stroke .2s;
}
.photo-dropzone.dragover .dz-icon { stroke: var(--t2); }

/* Responsive */
@media (max-width: 1024px) {
    .photos-layout { grid-template-columns: 1fr; }
    .photos-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
    .ph-kpi-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ph-kpi-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ph-kpi { padding: 10px 14px; gap: 8px; }
    .ph-kpi-icon { width: 32px; height: 32px; border-radius: 8px; }
    .ph-kpi-val { font-size: 16px; }
    .photos-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .photo-img { aspect-ratio: 1; }
    .photo-body { padding: 8px; }
    .ph-action-bar { flex-direction: column; align-items: stretch; }
    .ph-action-left, .ph-action-right { justify-content: stretch; }
    .ph-action-left .btn { flex: 1; justify-content: center; }
    .ph-tabs { overflow-x: auto; }
    .ph-tab { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
    .photos-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .photos-grid { grid-template-columns: 1fr; }
    .ph-kpi-bar { grid-template-columns: 1fr; }
}

/* ====================================================================
   FICHE ETABLISSEMENT — GBP Profile Editor
   ==================================================================== */

/* ===================================================================
   DASHBOARD V4 — Centre de pilotage avec sélecteur de période
   =================================================================== */

/* Period selector */
.dash-header-actions { display: flex; align-items: center; gap: 10px; }
.dash-period-selector { display: flex; gap: 3px; background: var(--overlay, rgba(255,255,255,.04)); border-radius: var(--rd-sm); padding: 3px; }
.dash-period-btn {
    padding: 6px 14px; border-radius: calc(var(--rd-sm) - 2px); border: none;
    background: transparent; color: var(--t3); cursor: pointer;
    font-size: 12px; font-weight: 600; transition: all .2s ease;
    font-family: inherit;
}
.dash-period-btn:hover { color: var(--t1); background: rgba(255,255,255,.06); }
.dash-period-btn.active { background: var(--primary-soft); color: var(--t1); box-shadow: none; }

/* Date Range Picker — compact */
#stats-drp-overlay { position: absolute; top: 100%; right: 0; z-index: 999; margin-top: 6px; }
.drp-container {
    background: var(--bg); border: 1px solid var(--bdr); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5); display: flex; flex-wrap: wrap; min-width: 500px;
    position: relative; padding-bottom: 42px;
}
.drp-presets {
    width: 130px; border-right: 1px solid var(--bdr); padding: 8px 0;
    display: flex; flex-direction: column; gap: 1px; overflow-y: auto; max-height: 300px;
}
.drp-preset {
    padding: 5px 12px; font-size: 11px; color: var(--t2); cursor: pointer;
    transition: background .12s, color .12s; white-space: nowrap;
}
.drp-preset:hover { background: rgba(0,212,255,.08); color: var(--t1); }
.drp-calendars { flex: 1; padding: 10px 12px; }
.drp-nav {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.drp-arrow {
    background: none; border: 1px solid var(--bdr); border-radius: 4px;
    color: var(--t2); cursor: pointer; padding: 2px 8px; font-size: 11px;
    transition: border-color .15s, color .15s;
}
.drp-arrow:hover { border-color: var(--t1); color: var(--t1); }
.drp-month-title { font-size: 12px; font-weight: 700; color: var(--t1); }
.drp-cals-row { display: flex; gap: 14px; }
.drp-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.drp-dow { text-align: center; font-size: 10px; font-weight: 600; color: var(--t3); padding: 3px 0; }
.drp-empty { min-height: 24px; }
.drp-day {
    text-align: center; font-size: 11px; padding: 4px 1px; border-radius: 4px;
    cursor: pointer; color: var(--t1); transition: background .1s, color .1s; min-width: 24px;
}
.drp-day:hover { background: rgba(0,212,255,.12); }
.drp-today { font-weight: 700; color: var(--t1); }
.drp-sel-start, .drp-sel-end {
    background: var(--btn-p-bg) !important; color: var(--btn-p-ink) !important; font-weight: 700; border-radius: 4px;
}
.drp-in-range { background: rgba(0,212,255,.12); color: var(--t1); border-radius: 0; }
.drp-disabled { opacity: .3; pointer-events: none; }
.drp-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-top: 1px solid var(--bdr);
    position: absolute; bottom: 0; left: 0; right: 0; background: var(--bg); border-radius: 0 0 10px 10px;
}
.drp-range-label { font-size: 11px; color: var(--t2); font-weight: 600; }
.drp-actions { display: flex; gap: 6px; }
@media (max-width: 768px) {
    .drp-container { min-width: auto; flex-direction: column; max-width: 95vw; }
    .drp-presets { width: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--bdr); padding: 6px; max-height: none; }
    .drp-preset { padding: 4px 8px; font-size: 10px; }
    .drp-cals-row { flex-direction: column; gap: 8px; }
    .drp-footer { position: static; }
}

/* Error state */
.dash-error {
    display: flex; align-items: center; gap: 10px;
    background: var(--rbg); border: 1px solid var(--r);
    color: var(--r); padding: 14px 20px; border-radius: var(--rd);
    margin-bottom: 16px; font-size: 14px; font-weight: 600;
}
.dash-error-retry {
    margin-left: auto; padding: 6px 14px; border-radius: var(--rd-sm);
    border: 1px solid var(--r); background: transparent; color: var(--r);
    font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: all .15s;
}
.dash-error-retry:hover { background: var(--r); color: #fff; }

/* Skeleton loading */
.dash-kpi-skeleton, .dash-card-skeleton { opacity: .6; }
.dash-skeleton-bar {
    background: linear-gradient(90deg, var(--bdr) 25%, rgba(255,255,255,.08) 50%, var(--bdr) 75%);
    background-size: 200% 100%;
    border-radius: 8px; height: 12px;
    animation: dashSkeletonShimmer 1.5s ease-in-out infinite;
}
.dash-skeleton-circle {
    background: linear-gradient(90deg, var(--bdr) 25%, rgba(255,255,255,.08) 50%, var(--bdr) 75%);
    background-size: 200% 100%;
    border-radius: 50%;
    animation: dashSkeletonShimmer 1.5s ease-in-out infinite;
}
@keyframes dashSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Stagger entrance animation */
@keyframes dashFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.dash-stagger { animation: dashFadeUp .4s ease both; }
.dash-stagger:nth-child(1) { animation-delay: .05s; }
.dash-stagger:nth-child(2) { animation-delay: .1s; }
.dash-stagger:nth-child(3) { animation-delay: .15s; }
.dash-stagger:nth-child(4) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
    .dash-stagger { animation: none; opacity: 1; transform: none; }
}

/* Empty state hero */
.dash-empty-hero {
    text-align: center; padding: 80px 40px;
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd);
    animation: dashFadeUp .5s ease both;
}
.dash-empty-icon { margin-bottom: 20px; opacity: .5; }
.dash-empty-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--t1); }
.dash-empty-desc { color: var(--t2); font-size: 14px; margin-bottom: 24px; max-width: 440px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.dash-empty-hint-text { display: inline-flex; align-items: center; gap: 6px; color: var(--t3); font-size: 12px; margin-top: 16px; }

/* Empty state (generic) */
.dash-empty-state {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px;
}

/* Alertes */
.dash-alerts { margin-bottom: 20px; }
.dash-section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--t1);
    text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px;
}
.dash-alert-count {
    background: var(--r); color: #fff; font-size: 11px; font-weight: 700;
    padding: 1px 7px; border-radius: 99px; min-width: 18px; text-align: center;
}
.dash-alert {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd);
    padding: 14px 18px; margin-bottom: 8px;
    transition: border-color .15s, transform .15s;
}
.dash-alert:hover { transform: translateX(2px); }
.dash-alert-danger { border-left: 3px solid var(--r); }
.dash-alert-warning { border-left: 3px solid var(--bdr); }
.dash-alert-info { border-left: 3px solid var(--acc); }
.dash-alert-icon { font-size: 20px; flex-shrink: 0; width: 28px; text-align: center; }
.dash-alert-body { flex: 1; min-width: 0; }
.dash-alert-text { font-size: 14px; font-weight: 600; color: var(--t1); }
.dash-alert-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }
.dash-alert-action {
    flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--t1);
    text-decoration: none; white-space: nowrap; padding: 6px 14px;
    border: 1px solid var(--primary); border-radius: var(--rd-sm);
    transition: all .15s;
}
.dash-alert-action:hover { background: var(--primary); color: #fff; }

/* Greeting */
.dash-greeting {
    margin-bottom: 16px; padding: 0; animation: dashFadeUp .3s ease both;
}
.dash-greeting-text {
    font-size: 15px; font-weight: 600; color: var(--t1); margin-bottom: 2px;
}
.dash-greeting-sub { font-size: 13px; color: var(--t3); }

/* KPI Grid */
.dash-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-bottom: 20px;
}
.dash-kpi {
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: var(--rd);
    padding: 24px; transition: all .25s ease; position: relative; overflow: hidden;
}
.dash-kpi::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--kpi-accent, var(--acc)); opacity: 0; transition: opacity .25s ease;
    border-radius: var(--rd) var(--rd) 0 0;
}
.dash-kpi:hover { border-color: rgba(0, 188, 212, .2); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.dash-kpi:hover::before { opacity: 1; }
.dash-kpi-link { text-decoration: none; cursor: pointer; }
.dash-kpi-link:hover { border-color: var(--t1); }
.dash-kpi-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dash-kpi-icon {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: var(--kpi-accent-bg, rgba(0,212,255,.1)); flex-shrink: 0;
}
.dash-kpi-label { font-size: 11px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: 0.04em; }
.dash-kpi-value { font-size: 32px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 6px; letter-spacing: -0.5px; }
.dash-kpi-total { font-size: 14px; font-weight: 400; color: var(--t3); }
.dash-kpi-trend { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.dash-kpi-period { font-size: 11px; color: var(--t3); }
.dash-kpi-sub { font-size: 12px; color: var(--t3); }
.dash-delta { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 3px; }
.dash-delta.up { color: var(--g); background: var(--gbg); }
.dash-delta.down { color: var(--r); background: var(--rbg); }
.dash-delta.neutral { color: var(--t3); background: rgba(255,255,255,.04); }

/* Monitoring grid */
.dash-monitor-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 20px;
}
.dash-card {
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd);
    padding: 20px; transition: border-color .2s ease, box-shadow .2s ease;
}
.dash-card:hover { border-color: rgba(255,255,255,.08); box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.dash-card-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 16px;
}
.dash-card-link-all {
    margin-left: auto; font-size: 12px; color: var(--t1); text-decoration: none;
    font-weight: 500;
}
.dash-card-link-all:hover { text-decoration: underline; }
.dash-period { font-size: 11px; color: var(--t3); font-weight: 400; margin-left: auto; }

/* Performance list */
.dash-perf-list { display: flex; flex-direction: column; gap: 8px; }
.dash-perf-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.03);
}
.dash-perf-row:last-child { border-bottom: none; }
.dash-perf-label { flex: 1; font-size: 13px; color: var(--t2); }
.dash-perf-value { font-size: 14px; font-weight: 700; color: var(--t1); min-width: 50px; text-align: right; }

/* Empty hint */
.dash-empty-hint {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 30px 20px; text-align: center; color: var(--t3); font-size: 12px;
}

/* Health breakdown */
.dash-health-summary { margin-bottom: 20px; }
.dash-health-bar {
    display: flex; height: 8px; border-radius: 99px; overflow: hidden;
    background: var(--bdr); margin-bottom: 8px;
}
.dash-health-seg { transition: width .4s; }
.dash-health-seg.good { background: var(--t1); }
.dash-health-seg.mid { background: var(--t1); }
.dash-health-seg.low { background: var(--r); }
.dash-health-legend { display: flex; gap: 14px; }
.dash-hl-item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--t2); }
.dash-hl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Position distribution */
.dash-pos-distrib { }
.dash-pos-title { font-size: 12px; font-weight: 600; color: var(--t2); margin-bottom: 10px; }
.dash-pos-bars { display: flex; flex-direction: column; gap: 6px; }
.dash-pos-bar-row { display: flex; align-items: center; gap: 8px; }
.dash-pos-label { font-size: 11px; color: var(--t3); width: 48px; text-align: right; }
.dash-pos-bar-track { flex: 1; height: 6px; background: var(--bdr); border-radius: 99px; overflow: hidden; }
.dash-pos-bar-fill { height: 100%; border-radius: 99px; transition: width .4s; }
.dash-pos-count { font-size: 12px; font-weight: 700; color: var(--t1); width: 28px; }

/* Publications stats */
.dash-pub-stats { display: flex; gap: 0; margin-bottom: 16px; }
.dash-pub-item { flex: 1; text-align: center; padding: 10px 0; }
.dash-pub-item + .dash-pub-item { border-left: 1px solid var(--bdr); }
.dash-pub-value { font-size: 24px; font-weight: 800; line-height: 1.2; }
.dash-pub-label { font-size: 11px; color: var(--t3); margin-top: 2px; }
.dash-pub-coverage { }
.dash-pub-cov-header { display: flex; justify-content: space-between; font-size: 12px; color: var(--t2); margin-bottom: 6px; }
.dash-pub-cov-bar { height: 6px; background: var(--bdr); border-radius: 99px; overflow: hidden; }
.dash-pub-cov-bar > div { height: 100%; border-radius: 99px; transition: width .4s; }
.dash-pub-cov-sub { font-size: 11px; color: var(--t3); margin-top: 4px; }

/* Recent reviews */
.dash-recent-reviews { margin-bottom: 20px; }
.dash-review-list { display: flex; flex-direction: column; gap: 0; }
.dash-review-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.03);
}
.dash-review-item:last-child { border-bottom: none; }
.dash-review-stars { flex-shrink: 0; font-size: 12px; letter-spacing: -1px; }
.dash-review-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-review-name { font-size: 13px; font-weight: 600; color: var(--t1); }
.dash-review-text { font-size: 12px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-review-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.dash-review-loc { font-size: 11px; color: var(--t3); }
.dash-review-reply {
    font-size: 11px; font-weight: 700; color: var(--t1); text-decoration: none;
    padding: 2px 8px; border: 1px solid var(--primary); border-radius: var(--rd-sm);
}
.dash-review-reply:hover { background: var(--primary); color: #fff; }
.dash-review-replied { font-size: 11px; color: var(--g); }

/* Overview bar */
.dash-overview-bar {
    display: flex; align-items: center; gap: 0; margin-bottom: 20px;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border); border-radius: var(--rd);
    padding: 0; overflow: hidden; animation: dashFadeUp .35s ease both;
}
.dash-ov-item {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 16px 20px; transition: background .15s ease;
}
.dash-ov-item:hover { background: rgba(255,255,255,.03); }
.dash-ov-icon {
    width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.dash-ov-content { display: flex; flex-direction: column; }
.dash-ov-num { font-size: 18px; font-weight: 800; color: var(--t1); line-height: 1.2; font-variant-numeric: tabular-nums; }
.dash-ov-label { font-size: 11px; color: var(--t3); margin-top: 1px; }
.dash-ov-sep { width: 1px; height: 32px; background: var(--bdr); flex-shrink: 0; }

/* Info tooltips */
.dash-info {
    position: relative; display: inline-flex; align-items: center;
    color: var(--t3); cursor: help; margin-left: 4px; vertical-align: middle;
    transition: color .15s;
}
.dash-info:hover, .dash-info:focus { color: var(--t1); outline: none; }
.dash-info-tip {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%); z-index: 100;
    background: var(--bg2, #1a1a2e); color: var(--t1); border: 1px solid var(--bdr);
    border-radius: var(--rd-sm); padding: 10px 14px;
    font-size: 12px; font-weight: 400; line-height: 1.5; letter-spacing: 0;
    text-transform: none; white-space: normal;
    width: 280px; max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    pointer-events: none;
}
.dash-info-tip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--bdr);
}
.dash-info:hover .dash-info-tip,
.dash-info:focus .dash-info-tip { display: block; }

/* Credits card */
.dash-credits-card {
    padding: 20px 24px; background: var(--card); border: 1px solid var(--bdr);
    border-radius: var(--rd); margin-top: 16px; animation: dashFadeUp .4s ease both; animation-delay: .3s;
}
.dash-credits-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.dash-credits-title { font-weight: 700; font-size: 14px; color: var(--t1); display: flex; align-items: center; gap: 8px; }
.dash-credits-help { font-size: 12px; color: var(--t3); cursor: help; }
.dash-credits-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.dash-credit-item { flex: 1; min-width: 160px; }
.dash-credit-meta { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 12px; }
.dash-credit-label { color: var(--t2); font-weight: 600; }
.dash-credit-value { color: var(--t1); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-credit-bar { height: 6px; background: rgba(255,255,255,.06); border-radius: 99px; overflow: hidden; }
.dash-credit-bar > div { height: 100%; border-radius: 99px; transition: width .5s ease; }
.dash-credit-total { min-width: 80px; text-align: right; }

/* Responsive Dashboard */
@media (max-width: 1280px) {
    .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-monitor-grid { grid-template-columns: 1fr; }
    .dash-info-tip { left: auto; right: 0; transform: none; }
    .dash-info-tip::after { left: auto; right: 12px; transform: none; }
}
@media (max-width: 640px) {
    .dash-kpi-grid { grid-template-columns: 1fr; }
    .dash-alert { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
    .dash-alert-action { align-self: flex-end; }
    .dash-overview-bar { flex-direction: column; }
    .dash-ov-sep { width: 100%; height: 1px; }
    .dash-ov-item { padding: 12px 16px; }
    .dash-review-item { flex-direction: column; align-items: flex-start; gap: 6px; }
    .dash-review-meta { flex-direction: row; align-items: center; gap: 8px; }
    .dash-pub-stats { flex-wrap: wrap; }
    .dash-pub-item { min-width: 80px; }
    .dash-info-tip { width: 220px; }
    .dash-period-selector { gap: 2px; }
    .dash-period-btn { padding: 5px 10px; font-size: 11px; }
    .ph { flex-wrap: wrap; gap: 10px; }
    .dash-empty-hero { padding: 48px 24px; }
    .dash-greeting { margin-bottom: 12px; }
}

/* ===================================================================
   GBP Profile Fiche — Redesign V2 (prefix: fch-)
   =================================================================== */

/* ---- Hero Header (sticky) ---- */
.fch-hero {
    position: sticky; top: 0; z-index: 50;
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd);
    padding: 16px 20px; margin-bottom: var(--sp-md);
    box-shadow: 0 2px 12px rgba(0,0,0,.15);
    animation: fu .4s ease both;
}
.fch-hero-top {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.fch-hero-avatar {
    width: 44px; height: 44px; border-radius: var(--rd-sm); flex-shrink: 0;
    background: var(--primary-soft, rgba(0,212,255,.1)); color: var(--t1);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700;
}
.fch-hero-info { flex: 1; min-width: 0; }
.fch-hero-name { font-size: 16px; font-weight: 700; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fch-hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.fch-hero-meta span { font-size: 12px; color: var(--t3); }
.fch-hero-meta .fch-cat { color: var(--t2); }
.fch-hero-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
}
.fch-hero-status.open { background: var(--subtle-bg); color: var(--t1); }
.fch-hero-status.closed { background: var(--rbg); color: var(--r); }
.fch-hero-actions {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.fch-hero-actions a, .fch-hero-actions button {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; font-size: 12px; font-weight: 500; border-radius: var(--rd-sm);
    background: var(--bg); border: 1px solid var(--bdr); color: var(--t2);
    text-decoration: none; cursor: pointer; transition: all .15s; white-space: nowrap;
}
.fch-hero-actions a:hover, .fch-hero-actions button:hover {
    border-color: var(--t1); color: var(--t1); background: var(--primary-soft, rgba(0,212,255,.06));
}
.fch-hero-actions svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Metrics row */
.fch-metrics {
    display: flex; gap: 16px; margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--bdr); flex-wrap: wrap;
}
.fch-metric {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; min-width: 0;
}
.fch-metric-label { font-size: 11px; color: var(--t3); text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.fch-metric-val { font-size: 15px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.fch-metric-sub { font-size: 11px; color: var(--t3); margin-left: 2px; }
.fch-metric-sep { width: 1px; background: var(--bdr); align-self: stretch; margin: 2px 0; }

/* ---- Section Cards ---- */
.fch-sections { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }

.fch-section {
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd);
    overflow: hidden; transition: border-color .2s, box-shadow .2s, overflow 0s;
    animation: fu .4s ease both;
    position: relative; z-index: 1;
}
.fch-section.open { overflow: visible; z-index: 100; }
.fch-section:nth-child(1) { animation-delay: .05s; }
.fch-section:nth-child(2) { animation-delay: .1s; }
.fch-section:nth-child(3) { animation-delay: .15s; }
.fch-section:nth-child(4) { animation-delay: .2s; }
.fch-section:nth-child(5) { animation-delay: .25s; }
.fch-section:nth-child(6) { animation-delay: .3s; }
.fch-section:nth-child(7) { animation-delay: .35s; }
.fch-section.dirty { border-left: 3px solid var(--primary); }
.fch-section.error { border-left: 3px solid var(--r); }
.fch-section.fch-alert { border-color: var(--subtle-bg); }

.fch-section-header {
    display: flex; align-items: center; gap: 12px; padding: 14px 20px;
    cursor: pointer; user-select: none; transition: background .15s;
}
.fch-section-header:hover { background: rgba(255,255,255,.02); }
[data-theme="light"] .fch-section-header:hover { background: rgba(0,0,0,.02); }

.fch-section-icon {
    width: 32px; height: 32px; border-radius: var(--rd-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--subtle-bg);
}
.fch-section-icon svg { width: 16px; height: 16px; stroke-width: 2; fill: none; stroke: var(--t2); }
/* Icônes de sections 100% monochromes (premium) : plus d'arc-en-ciel par section.
   Les modificateurs de couleur (blue/cyan/orange/green/pink/purple) sont conservés
   dans le JS mais neutralisés ici pour un rendu uniforme. */
.fch-section-icon.blue, .fch-section-icon.cyan, .fch-section-icon.orange,
.fch-section-icon.green, .fch-section-icon.pink, .fch-section-icon.purple { background: var(--subtle-bg); }
.fch-section-icon.blue svg, .fch-section-icon.cyan svg, .fch-section-icon.orange svg,
.fch-section-icon.green svg, .fch-section-icon.pink svg, .fch-section-icon.purple svg { stroke: var(--t2); }

.fch-section-title-group { flex: 1; min-width: 0; }
.fch-section-title { font-size: 14px; font-weight: 600; color: var(--t1); }
.fch-section-summary { font-size: 12px; color: var(--t3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fch-section-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fch-section-freshness { font-size: 10px; color: var(--t3); white-space: nowrap; letter-spacing: .2px; }

.fch-section-chevron {
    width: 16px; height: 16px; stroke: var(--t3); fill: none; stroke-width: 2;
    transition: transform .25s ease; flex-shrink: 0;
}
.fch-section.open .fch-section-chevron { transform: rotate(90deg); }

.fch-section-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.fch-section.open .fch-section-body { max-height: 4000px; overflow: visible; }
.fch-section-content { padding: 4px 20px 16px; }

.fch-section-footer { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--bdr); }
.fch-section-footer .bp { font-size: 13px; padding: 8px 20px; }

/* ---- Compactage mobile des cartes-sections GBP (ne touche pas le desktop) ---- */
@media (max-width: 768px) {
    .fch-sections { gap: 8px; padding-bottom: 12px; }
    .fch-section-header { gap: 10px; padding: 10px 14px; }
    .fch-section-icon { width: 28px; height: 28px; }
    .fch-section-icon svg { width: 15px; height: 15px; }
    .fch-section-title { font-size: 13px; }
    .fch-section-content { padding: 2px 14px 12px; }
    .fch-section-footer { padding: 10px 14px; }
    /* Bloc "Suivi fiche" plus compact sur mobile */
    .fsv .fsv-status { padding: 12px 14px !important; margin-bottom: 14px !important; }
    /* Statut + bouton empiles : cote a cote, le libelle du bouton ecrasait le texte
       de statut sur une colonne de ~110px (constate a 390px le 2026-08-10). */
    .fsv .fsv-status { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
    .fsv .fsv-status > svg { display: none; }
    .fsv .fsv-status .btn { width: 100%; justify-content: center; }
}

/* ---- Sync badges (reused) ---- */
.fch-badge { font-size: 11px; padding: 3px 10px; border-radius: 99px; font-weight: 500; white-space: nowrap; letter-spacing: .2px; }
.fch-badge.synced { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.fch-badge.dirty { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.fch-badge.saving { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.fch-badge.error { background: var(--rbg); color: var(--r); }

/* ---- Score Card ---- */
.fch-score-card {
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd);
    padding: 20px; margin-bottom: 12px; animation: fu .4s ease both; animation-delay: .02s;
}
.fch-score-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fch-score-title { display: flex; align-items: center; gap: 10px; }
.fch-score-title-icon {
    width: 32px; height: 32px; border-radius: var(--rd-sm); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--subtle-bg);
}
.fch-score-title-icon svg { width: 16px; height: 16px; stroke: var(--t2); fill: none; stroke-width: 2; }
.fch-score-title-text { font-size: 14px; font-weight: 600; color: var(--t1); }
.fch-score-pct { font-size: 22px; font-weight: 700; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }

.fch-score-bar { height: 8px; background: var(--bdr); border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.fch-score-fill { height: 100%; border-radius: 99px; transition: width .5s ease, background .5s ease; }

.fch-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fch-score-item {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: var(--bg); border-radius: var(--rd-sm); font-size: 12px;
    cursor: pointer; transition: background .15s;
}
.fch-score-item:hover { background: var(--primary-soft, rgba(0,212,255,.06)); }
.fch-score-item .fch-score-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.fch-score-item.ok .fch-score-icon { color: var(--g); }
.fch-score-item.warn .fch-score-icon { color: var(--r); }
.fch-score-item-label { flex: 1; color: var(--t1); font-weight: 500; }

/* ---- Form elements ---- */
.fch-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Service area chips ---- */
.fch-places-wrap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.fch-place-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(0,212,255,.08); border: 1px solid rgba(0,212,255,.15);
    border-radius: 99px; padding: 6px 10px 6px 14px; font-size: 12px;
    color: var(--t1); transition: all .15s; animation: fu .2s ease both;
}
.fch-place-chip svg { width: 12px; height: 12px; stroke: var(--t2); fill: none; stroke-width: 2; flex-shrink: 0; }
.fch-place-chip .gbp-cat-remove { font-size: 14px; color: var(--t3); }
.fch-place-chip .gbp-cat-remove:hover { color: var(--r); }

.fch-add-inline {
    display: flex; gap: 8px; align-items: stretch; margin-top: 4px;
}
.fch-add-inline .fi { flex: 1; }

/* ---- Protection compact ---- */
.fch-protection {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; background: var(--card); border: 1px solid var(--bdr);
    border-radius: var(--rd); flex-wrap: wrap; animation: fu .4s ease both; animation-delay: .4s;
}
.fch-protection-badge {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 500;
}
.fch-protection-badge.verified { color: var(--t1); }
.fch-protection-badge.verified svg { stroke: var(--t2); }
.fch-protection-badge.unverified { color: var(--t1); }
.fch-protection-badge.unverified svg { stroke: var(--t2); }
.fch-protection-badge.unknown { color: var(--t3); }
.fch-protection-badge svg { width: 16px; height: 16px; fill: none; stroke-width: 2; }

.fch-protection-actions { display: flex; align-items: center; gap: 8px; }
.fch-protection-actions a {
    font-size: 12px; color: var(--t3); text-decoration: none; transition: color .15s;
}
.fch-protection-actions a:hover { color: var(--t1); text-decoration: underline; }
.fch-protection-actions .fch-cta {
    padding: 5px 14px; background: var(--btn-p-bg); color: var(--btn-p-ink);
    border-radius: var(--rd-sm); font-weight: 600; transition: all .15s;
}
.fch-protection-actions .fch-cta:hover { background: var(--btn-p-bg); color: var(--btn-p-ink); box-shadow: var(--btn-p-glow); text-decoration: none; }

/* ---- Error state ---- */
.fch-error-state { text-align: center; padding: 60px 20px; }
.fch-error-title { font-size: 16px; font-weight: 600; color: var(--t2); margin: 16px 0 8px; }
.fch-error-sub { font-size: 13px; color: var(--t3); line-height: 1.5; }

/* ---- Reused from old gbp (keep for internal components) ---- */
.gbp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gbp-social-detected { border-color: var(--ba) !important; background: var(--subtle-bg); }
.gbp-char-counter { display: block; text-align: right; font-size: 11px; color: var(--t3); margin-top: 4px; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.gbp-char-counter.over { color: var(--r); font-weight: 600; }
.gbp-address-note { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t1); padding: 10px 14px; background: rgba(255,165,0,.06); border: 1px solid rgba(255,165,0,.12); border-radius: var(--rd-sm); margin-bottom: 16px; line-height: 1.4; }
.gbp-address-note svg { flex-shrink: 0; stroke: var(--t2); }
.gbp-cat-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--inp); border: 1px solid var(--bdr); border-radius: 99px; padding: 5px 10px 5px 14px; font-size: 12px; color: var(--t1); margin: 3px 4px 3px 0; }
.gbp-cat-remove { background: none; border: none; color: var(--t3); cursor: pointer; font-size: 16px; padding: 0 2px; line-height: 1; transition: color .15s; }
.gbp-cat-remove:hover { color: var(--r); }
.gbp-service-item, .gbp-product-item { display: flex; align-items: center; gap: 8px; border-radius: var(--rd-sm); padding: 8px 12px; }
.gbp-service-info { flex: 1; min-width: 0; }
.gbp-service-info strong { font-size: 13px; }
.gbp-autocomplete { position: relative; z-index: 10; }
.gbp-autocomplete:focus-within { z-index: 999; }
.gbp-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd-sm); max-height: 260px; overflow-y: auto; z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,.4); margin-top: 4px; }
.gbp-autocomplete-item { padding: 10px 14px; cursor: pointer; font-size: 13px; color: var(--t1); transition: background .1s; }
.gbp-autocomplete-item:hover { background: var(--primary-soft, rgba(0,212,255,.08)); color: var(--t1); }
.gbp-autocomplete-item strong { color: var(--t1); }
.gbp-hours-grid { display: flex; flex-direction: column; gap: 0; }
.gbp-hours-row { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--bdr); }
.gbp-hours-row:last-child { border-bottom: none; }
.gbp-hours-day { font-size: 13px; font-weight: 600; color: var(--t1); }
.gbp-hours-slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gbp-hours-slot { display: flex; align-items: center; gap: 6px; }
.gbp-time-input { background: var(--inp); border: 1px solid var(--bdr); color: var(--t1); padding: 6px 10px; border-radius: var(--rd-sm); font-size: 13px; font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums; width: 105px; transition: border-color .15s; }
.gbp-time-input:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 2px rgba(0,212,255,.12); }
.gbp-hours-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gbp-hours-dash { color: var(--t3); }
.gbp-hours-footer { margin-top: 12px; }
.gbp-hours-toggle { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--t2); cursor: pointer; white-space: nowrap; }
.gbp-hours-toggle input { cursor: pointer; accent-color: var(--t1); }
.gbp-hours-add-btn { background: var(--inp); border: 1px solid var(--bdr); color: var(--t2); height: 28px; padding: 0 12px; border-radius: var(--rd-pill, 999px); cursor: pointer; font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 4px; transition: all .15s; }
.gbp-hours-add-btn:hover { background: var(--primary-soft, rgba(0,212,255,.1)); border-color: var(--t1); color: var(--t1); }
.gbp-slot-remove { background: none; border: none; color: var(--t3); cursor: pointer; font-size: 16px; padding: 2px 4px; line-height: 1; transition: color .15s; border-radius: 4px; }
.gbp-slot-remove:hover { color: var(--r); background: var(--rbg); }
/* Horaires exceptionnels : meme grille que .gbp-hours-row, 1re colonne pour la date */
.gbp-special-row { grid-template-columns: 150px 1fr auto; }
/* Date affichee en TEXTE (span) strictement comme un libelle de jour ; l'input date
   transparent est superpose pour ouvrir le selecteur natif au clic. */
.gbp-special-datecell { position: relative; display: flex; align-items: center; min-width: 0; }
.gbp-special-datetext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gbp-special-datecell:hover .gbp-special-datetext { color: var(--t1); }
.gbp-special-datetext.is-empty { color: var(--t3); font-weight: 500; font-style: italic; }
.gbp-special-date { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: transparent; opacity: 0; cursor: pointer; }
/* Boutons d'action compacts (dupliquer / supprimer) — memes dimensions que les puces */
.gbp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--bdr); border-radius: var(--rd-sm, 8px); background: var(--inp); color: var(--t2); cursor: pointer; transition: all .15s; }
.gbp-icon-btn:hover { border-color: var(--t1); color: var(--t1); background: var(--primary-soft, rgba(0,212,255,.1)); }
.gbp-icon-btn--danger:hover { border-color: var(--r); color: var(--r); background: var(--rbg); }
.gbp-empty-hint { font-size: 13px; color: var(--t3); padding: 12px 0; font-style: italic; }

/* ====== Recherche d'onglet (fiche client) ====== */
.gbp-field-with-ai { display: flex; gap: 8px; align-items: stretch; }
.gbp-field-with-ai .fi { flex: 1; }
.gbp-ai-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0 14px; background: rgba(0,212,255,.12); border: 1px solid rgba(0,212,255,.25); color: var(--t1); border-radius: var(--rd-sm); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all .2s; letter-spacing: .3px; }
.gbp-ai-btn:hover { background: rgba(0,212,255,.2); border-color: rgba(0,212,255,.4); color: var(--t1); transform: translateY(-1px); }
.gbp-ai-btn svg { stroke: currentColor; }
.gbp-ai-result { margin-top: 10px; background: var(--subtle-bg); border: 1px solid var(--acc-subtle); border-radius: var(--rd-sm); padding: 14px; animation: gbpAiFadeIn .25s ease; }
.gbp-ai-result.loading { border-color: var(--acc-subtle); }
.gbp-ai-result.error { background: var(--rbg); border-color: var(--rbg); }
@keyframes gbpAiFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.gbp-ai-header { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--t1); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.gbp-ai-header svg { stroke: var(--t2); }
.gbp-ai-text { font-size: 13px; color: var(--t1); line-height: 1.6; padding: 10px 12px; background: var(--card); border-radius: var(--rd-sm); border: 1px solid var(--bdr); margin-bottom: 10px; white-space: pre-wrap; }
.gbp-ai-actions { display: flex; gap: 8px; }
.gbp-ai-loading { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--t1); }
.gbp-cat-valid { color: var(--g) !important; }
.gbp-cat-invalid { color: var(--t1) !important; }
.gbp-cat-input { transition: border-color .15s; }
.gbp-kw-section { margin-bottom: 8px; }
.gbp-kw-chips {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--rd-sm);
    padding: 6px 10px; min-height: 38px; cursor: text; transition: border-color .15s;
}
.gbp-kw-chips:focus-within { border-color: var(--t1); }
.gbp-kw-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--primary-soft, rgba(0,212,255,.12)); color: var(--t1);
    padding: 3px 8px; border-radius: 99px; font-size: 12px; font-weight: 500;
    white-space: nowrap; animation: fadeIn .2s;
}
.gbp-kw-chip button {
    background: none; border: none; color: var(--t1); cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0 2px; opacity: .7; transition: opacity .15s;
}
.gbp-kw-chip button:hover { opacity: 1; }
.gbp-kw-input {
    /* Champ de saisie "seamless" dans le conteneur de chips : il prend la place
       restante sur la ligne. min-width volontairement bas, sinon il passe seul
       sur une ligne des que deux chips sont posees (mobile). Le font-size est
       force a 16px sous 768px par la regle anti-zoom iOS : le libelle doit donc
       rester court. */
    flex: 1 1 90px; min-width: 90px; background: transparent; border: none; outline: none;
    color: var(--t1); font-size: 13px; padding: 2px 0;
}
.gbp-kw-input::placeholder { color: var(--t3); }
.gbp-score-meter {
    margin-top: 12px; background: var(--card); border: 1px solid var(--bdr);
    border-radius: var(--rd); padding: 14px 18px; animation: fadeIn .3s;
}
.gbp-score-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
.gbp-score-label { font-size: 13px; font-weight: 600; color: var(--t1); }
.gbp-score-value { font-size: 13px; font-weight: 700; }
.gbp-score-bar {
    height: 6px; background: var(--bdr); border-radius: 99px; overflow: hidden; margin-bottom: 14px;
}
.gbp-score-fill {
    height: 100%; border-radius: 99px; transition: width .4s ease, background .4s ease;
}
.gbp-score-details { display: flex; flex-direction: column; gap: 6px; }
.gbp-score-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 12px; color: var(--t2); padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,.03);
}
.gbp-score-row:last-child { border-bottom: none; }
.gbp-score-row.ok .gbp-score-icon { color: var(--g); }
.gbp-score-row.warn .gbp-score-icon { color: var(--r); }
.gbp-score-icon { font-size: 13px; font-weight: 700; width: 16px; text-align: center; }
.gbp-score-check-label { flex: 1; color: var(--t1); font-weight: 500; }
.gbp-score-pts { font-weight: 600; font-size: 11px; color: var(--t3); white-space: nowrap; }
.gbp-score-hint {
    width: 100%; margin-left: 22px; font-size: 11px; color: var(--t1);
    font-style: italic; margin-top: 2px;
}
.gbp-score-kw {
    margin-left: 22px; font-size: 11px; color: var(--t3);
    display: flex; align-items: center; gap: 4px;
}
.gbp-score-kw.ok span:first-child { color: var(--g); }
.gbp-score-kw.warn span:first-child { color: var(--r); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .fch-hero { position: relative; }
    .fch-metrics { gap: 12px; }
}
@media (max-width: 768px) {
    /* Metriques : en flex-wrap chaque metrique prenait une ligne entiere, donnant
       une colonne tres haute et tres vide (constate a 390px le 2026-08-10).
       En grille 2 colonnes, le bloc tient en 3 lignes au lieu de 5. */
    .fch-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 28px; }
    .fch-metric { justify-content: space-between; }
    .fch-metric-sep { display: none; }
    .fch-hero { padding: 12px 14px; }
    .fch-hero-actions { flex-wrap: wrap; width: 100%; }
    .fch-hero-actions a, .fch-hero-actions button { flex: 1; justify-content: center; }
    .fch-metrics { flex-direction: column; gap: 8px; }
    .fch-metric-sep { display: none; }
    .fch-score-grid { grid-template-columns: 1fr; }
    .fch-section-header { padding: 12px 14px; }
    .fch-section-content { padding: 4px 14px 14px; }
    .fch-section-footer { padding: 10px 14px; }
    .gbp-form-row, .fch-form-row { grid-template-columns: 1fr; gap: 0; }
    .gbp-hours-row { grid-template-columns: 1fr; gap: 6px; }
    .gbp-hours-day { padding-bottom: 4px; }
    .gbp-special-row { grid-template-columns: 1fr; gap: 6px; }
    .gbp-special-datecell { padding-bottom: 4px; }
    .gbp-hours-actions { flex-wrap: wrap; justify-content: flex-start; }
    .fch-protection { flex-direction: column; align-items: flex-start; gap: 8px; }
    .gbp-score-meter { padding: 12px 14px; }
    .gbp-kw-chips { padding: 5px 8px; }
}
@media (max-width: 480px) {
    .fch-section { border-radius: var(--rd-sm); }
    .gbp-time-input { width: 90px; padding: 5px 6px; font-size: 12px; }
    .fch-hero-name { font-size: 14px; }
}

/* ====== Onglet Fiche — respiration mobile (cartes empilees) ======
   Le conteneur de l'onglet Fiche n'est pas une carte : il empile plusieurs cartes.
   Il devient donc transparent, SANS gouttiere laterale a lui : la gouttiere de page
   vient de .mn (16px) et chaque carte porte son propre padding. Un padding ici
   s'additionnait aux deux autres et decalait tout l'onglet Fiche vers l'interieur
   par rapport aux autres onglets (constate le 2026-08-10, ~44px au lieu de 30px).
   Le contre-full-bleed d'origine n'a plus lieu d'etre : .sec ne l'est plus. */
@media (max-width: 1024px) {
    #module-content:has(.fch-hero) {
        margin: 0 !important;
        padding: 0 0 var(--sp-lg) !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    /* Espacement vertical genereux entre les blocs empiles */
    #module-content:has(.fch-hero) #suivi-inline-block { margin-bottom: var(--sp-lg) !important; }
    #module-content:has(.fch-hero) .fch-hero { margin-bottom: var(--sp-lg) !important; }
    #module-content:has(.fch-hero) .fch-score-card { margin-bottom: var(--sp-lg) !important; }
    #module-content:has(.fch-hero) .fch-sections { gap: var(--sp-lg) !important; padding-bottom: var(--sp-lg); }
}

/* ===== Sidebar tooltips =====
   Anciennement un ::after sur .ni[title] ; désormais gérés par le moteur global
   shared/ui/tooltip.js (data-tip + title, rendu dans <body>). */
.ni[title] { position: relative; }

/* ===== Content Overview cards ===== */
.co-post-card:hover { border-color: var(--t1) !important; }

/* ===== Report Preview Modal ===== */
/* #rpt-preview-overlay : largeur gérée par .modal-card--lg + .modal-card--scroll (design system) */

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.divider { height: 1px; background: var(--bdr); margin: var(--sp-md) 0; }
@media (max-width: 480px) {
    .ha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); width: 100%; }
    .ha-grid .btn { justify-content: center; }
}

/* ============================================================
   EMAIL MODULES V2 — Design System
   ============================================================ */

/* --- Tab bar (email sub-tabs) --- */
.eml-tabs {
    display: flex;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 4px;
    margin-bottom: var(--sp-lg);
    box-shadow: var(--sh);
    animation: fu .4s ease both;
    max-width: 100%;
    box-sizing: border-box;
}
.eml-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    background: none;
    border: none;
    border-radius: var(--rd-sm);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
    transition: all .2s ease;
}
.eml-tab:hover:not(.active) { color: var(--t2); background: var(--subtle-bg); }
.eml-tab.active {
    color: var(--t1);
    background: var(--primary-soft);
    box-shadow: none;
}
.eml-tab svg { width: 16px; height: 16px; stroke-width: 2; fill: none; flex-shrink: 0; }
.eml-tab .eml-tab-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(0,212,255,.15);
    min-width: 18px;
    text-align: center;
}
.eml-tab:not(.active) .eml-tab-count {
    background: rgba(255,255,255,.06);
    color: var(--t3);
}

/* --- Split layout (editor / preview) --- */
.eml-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
    align-items: start;
    min-height: calc(100vh - 260px);
    max-width: 100%;
    box-sizing: border-box;
}
.eml-editor {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
    padding-bottom: 100px;
    position: relative;
}
.eml-preview-pane {
    position: sticky;
    top: 20px;
    display: block;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--bdr) transparent;
    padding-bottom: 20px;
}
.eml-preview-pane > * {
    margin-bottom: var(--sp-md);
}

/* --- Section cards --- */
.eml-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    box-shadow: var(--sh);
    overflow: hidden;
    animation: fu .4s ease both;
    transition: border-color .2s ease;
    max-width: 100%;
    box-sizing: border-box;
}
.eml-section:nth-child(2) { animation-delay: .05s; }
.eml-section:nth-child(3) { animation-delay: .1s; }
.eml-section:nth-child(4) { animation-delay: .15s; }
.eml-section:nth-child(5) { animation-delay: .2s; }
.eml-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
}
.eml-section-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.eml-section-icon svg { width: 16px; height: 16px; stroke-width: 2; fill: none; }
.eml-section-icon.blue { background: rgba(0,212,255,.1); }
.eml-section-icon.blue svg { stroke: var(--t2); }
.eml-section-icon.cyan { background: rgba(0,212,255,.1); }
.eml-section-icon.cyan svg { stroke: var(--t2); }
.eml-section-icon.green { background: var(--subtle-bg); }
.eml-section-icon.green svg { stroke: var(--t2); }
.eml-section-icon.orange { background: var(--subtle-bg); }
.eml-section-icon.orange svg { stroke: var(--t2); }
.eml-section-icon.pink { background: var(--subtle-bg); }
.eml-section-icon.pink svg { stroke: var(--t2); }
.eml-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.2px;
}
.eml-section-subtitle {
    font-size: 12px;
    color: var(--t3);
    margin-left: auto;
    font-weight: 600;
}
.eml-section-body {
    padding: 16px 20px;
}

/* --- Field rows inside sections --- */
.eml-field {
    margin-bottom: 14px;
}
.eml-field:last-child { margin-bottom: 0; }
.eml-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 6px;
    letter-spacing: .2px;
}
.eml-field input,
.eml-field textarea {
    width: 100%;
    background: var(--inp);
    border: 1px solid var(--bdr);
    color: var(--t1);
    padding: 10px 14px;
    border-radius: var(--rd-sm);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.eml-field textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.7;
}
.eml-field input::placeholder,
.eml-field textarea::placeholder { color: var(--t3); }
.eml-field input:focus,
.eml-field textarea:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 3px rgba(0,212,255,.12); }

/* --- Client row (reusable) --- */
.eml-client-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.eml-client-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    user-select: none;
    transition: all .15s ease;
}
.eml-client-row--clickable { cursor: pointer; }
.eml-client-row--clickable:hover { border-color: rgba(255,255,255,.12); background: var(--subtle-hover); }
.eml-client-row--sent { opacity: .5; cursor: default; }
.eml-client-row--selected {
    border-color: var(--t1);
    background: var(--primary-soft);
}
.eml-client-info { flex: 1; min-width: 0; }
.eml-client-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eml-client-meta {
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px;
}

/* --- Checkbox --- */
.eml-check {
    width: 18px; height: 18px;
    border-radius: 4px;
    border: 2px solid var(--bdr);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s ease;
}
.eml-check.checked {
    border-color: var(--t1);
    background: var(--btn-p-bg); color: var(--btn-p-ink); border-color: var(--btn-p-bg);
}
.eml-check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- Badges --- */
.eml-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.eml-badge.sent { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.eml-badge.opened { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.eml-badge.manual { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.eml-badge.failed { background: var(--rbg); color: var(--r); }
.eml-badge.warning { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.eml-badge.info { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }

/* --- Select all bar --- */
.eml-select-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bdr);
    margin-bottom: 12px;
}
.eml-select-bar .eml-select-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    margin-right: auto;
}
.eml-select-btn {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    padding: 4px 10px;
    border-radius: var(--rd-sm);
    transition: all .15s;
}
.eml-select-btn:hover { color: var(--t1); background: var(--subtle-bg); }

/* --- Sticky action bar --- */
/* --- Barre composer partagée (insertion bouton/lien dans éditeur sectionné) --- */
.eml-composer-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.eml-composer-hint {
    font-size: var(--fs-sm);
    color: var(--t3);
    flex: 1 1 220px;
    min-width: 180px;
}

/* --- Blocs groupés de l'éditeur sectionné (hiérarchie : carte titrée) --- */
.eml-grp {
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    margin-bottom: var(--sp-md);
    overflow: hidden;
    background: var(--card);
}
.eml-grp-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    padding: var(--sp-sm) var(--sp-md);
    background: var(--bg2);
    border-bottom: 1px solid var(--bdr);
}
.eml-grp-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--t1);
}
.eml-grp-note {
    font-size: var(--fs-sm);
    color: var(--t3);
}
.eml-grp-body {
    padding: var(--sp-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}
.eml-grp-body .eml-form-section { margin-bottom: 0; }

/* --- Éditeur sectionné : formulaire + aperçu live côte à côte --- */
.eml-edit-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
    /* stretch (pas 'start') : la colonne aperçu fait toute la hauteur de la rangée,
       sinon sa cellule = hauteur du panneau (courte) et le sticky se détache dès qu'on
       scrolle dans le long formulaire (= panneau qui disparaît, vide noir à droite). */
    align-items: stretch;
}
.eml-edit-split-form { min-width: 0; }
.eml-edit-split-preview {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    overflow: hidden;
    max-height: calc(100vh - 120px);
}
.eml-live-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bdr);
    background: var(--bg2);
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
}
.eml-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--g, var(--g));
    flex-shrink: 0;
}
.eml-live-frame-wrap {
    flex: 1;
    min-height: 420px;
    background: #f4f5f7;
    position: relative;
}
.eml-live-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    color: #64748b;
    pointer-events: none;
}
.eml-live-frame-wrap iframe {
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
    display: block;
    background: #f4f5f7;
}
/* Sur tablette/mobile : empile, aperçu sous le formulaire, non sticky. */
@media (max-width: 1024px) {
    .eml-edit-split { grid-template-columns: 1fr; }
    .eml-edit-split-preview { position: static; max-height: none; }
    .eml-live-frame-wrap, .eml-live-frame-wrap iframe { min-height: 360px; }
}

.eml-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-sm);
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px 20px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.25);
    z-index: 10;
    animation: fu .4s ease both;
    animation-delay: .3s;
    max-width: 100%;
    box-sizing: border-box;
}
.eml-actions .btn { flex-shrink: 0; }

/* --- Aperçu live pleine largeur, sous le formulaire (jamais de colonne vide).
   La carte est fournie par .epv (mountEmailLivePreview) ; ici juste l'espacement. --- */
.eml-live-block { margin-top: var(--sp-lg); }
.eml-live-block .epv { min-height: 560px; }
.eml-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.eml-actions .btn-send {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--rd);
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    box-shadow: var(--btn-p-shadow);
}
.eml-actions .btn-send:hover:not(:disabled) {
    box-shadow: var(--btn-p-glow);
    transform: translateY(-1px);
}
.eml-actions .btn-send:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.eml-actions .btn-test {
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--rd);
    background: transparent;
    color: var(--t1);
    border: 1px solid var(--bdr);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.eml-actions .btn-test:hover { background: var(--subtle-bg); border-color: rgba(255,255,255,.15); }
.eml-actions-secondary {
    margin-top: 10px;
    text-align: center;
}
.eml-actions-link {
    background: none;
    border: none;
    color: var(--t3);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 4px 8px;
    transition: color .15s;
}
.eml-actions-link:hover { color: var(--t1); text-decoration: underline; }

/* --- Preview card (right pane) --- */
.eml-preview-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    box-shadow: var(--sh);
    overflow: hidden;
    animation: fu .4s ease both;
    animation-delay: .1s;
}
.eml-preview-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bdr);
}
.eml-preview-header svg { width: 16px; height: 16px; stroke: var(--t3); fill: none; stroke-width: 2; }
.eml-preview-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
}
.eml-preview-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--t1);
    animation: onb-pulse 2s ease infinite;
    margin-left: auto;
}
.eml-preview-frame {
    flex: 1;
    overflow-y: auto;
    background: var(--bg2);
    display: flex;
    justify-content: center;
}
.eml-preview-frame iframe {
    width: 100%;
    max-width: 620px;
    min-height: 500px;
    border: none;
    background: #f4f5f7;
}
/* Alternate: text-based preview inside section */
.eml-preview-text {
    padding: 20px;
    background: var(--bg2);
    border-radius: var(--rd-sm);
    border: 1px solid var(--bdr);
}
.eml-preview-text .eml-preview-subj {
    font-size: 11px;
    color: var(--t3);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.eml-preview-text .eml-preview-body {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.7;
    white-space: pre-line;
}
.eml-preview-info {
    padding: 14px;
    background: var(--bg);
    border: 2px dashed var(--bdr);
    border-radius: var(--rd-sm);
    margin-top: 14px;
}
.eml-preview-info.accent { border-color: rgba(0,212,255,.3); }
.eml-preview-info.green { border-color: var(--subtle-bg); }
.eml-preview-info-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 6px;
}
.eml-preview-info-value {
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--t1);
    word-break: break-all;
}
.eml-preview-info-hint {
    font-size: 11px;
    color: var(--t3);
    margin-top: 6px;
    text-align: center;
}

/* --- Empty state --- */
.eml-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    flex: 1;
}
.eml-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.eml-empty-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 1.5;
}
.eml-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 6px;
}
.eml-empty-desc {
    font-size: 13px;
    color: var(--t3);
    max-width: 280px;
    line-height: 1.5;
    margin-bottom: 16px;
}
.eml-empty-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
    background: var(--subtle-bg);
    border: 1px solid rgba(0,212,255,.2);
    border-radius: var(--rd-sm);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: all .15s;
}
.eml-empty-action:hover { background: rgba(0,212,255,.15); }

/* --- Collapsible sections --- */
.eml-collapse-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-align: left;
}
.eml-collapse-trigger:hover { background: var(--subtle-hover); }
.eml-collapse-chev {
    margin-left: auto;
    width: 16px;
    height: 16px;
    stroke: var(--t3);
    stroke-width: 2;
    fill: none;
    transform: rotate(-90deg);
    transition: transform .2s ease;
}
.eml-collapse-trigger.open .eml-collapse-chev { transform: rotate(0deg); }
.eml-collapse-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.eml-collapse-body.open {
    max-height: 2000px;
}
.eml-collapse-inner {
    padding: 0 20px 20px;
}

/* --- Template editor --- */
.eml-tpl-row { margin-bottom: 12px; }
.eml-tpl-row:last-child { margin-bottom: 0; }
.eml-tpl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.eml-tpl-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
}
.eml-tpl-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.eml-tpl-badge.modified { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.eml-tpl-badge.hidden { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.eml-tpl-toggle {
    background: none;
    border: 1px solid var(--bdr);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    color: var(--t3);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s ease;
}
.eml-tpl-toggle:hover { border-color: var(--t3); color: var(--t2); }
.eml-tpl-textarea {
    width: 100%;
    font-size: 12px;
    color: var(--t1);
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    padding: 8px 10px;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
    resize: vertical;
    min-height: 50px;
    transition: border-color .15s;
}
.eml-tpl-textarea:focus { outline: none; border-color: var(--t1); box-shadow: 0 0 0 3px rgba(0,212,255,.08); }
.eml-tpl-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--bdr);
}

/* --- Filter pills (for History) --- */
.eml-filter-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.eml-filter-pill {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.eml-filter-pill:hover { border-color: rgba(255,255,255,.15); color: var(--t1); }
.eml-filter-pill.active {
    background: var(--primary-soft);
    border-color: var(--ba);
    color: var(--t1);
}
.eml-filter-pill .eml-pill-count {
    font-size: 10px;
    opacity: .7;
}

/* --- History list (for Historique tab) --- */
.eml-history-group {
    margin-bottom: 20px;
}
.eml-history-group:last-child { margin-bottom: 0; }
.eml-history-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg);
    border-radius: var(--rd-sm);
    margin-bottom: 8px;
}
.eml-history-group-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.eml-history-group-label svg { width: 14px; height: 14px; stroke: var(--t3); fill: none; stroke-width: 2; }
.eml-history-group-count {
    font-size: 11px;
    color: var(--t3);
}
.eml-history-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--rd-sm);
    transition: background .15s ease;
}
.eml-history-entry:hover { background: var(--subtle-hover); }
.eml-history-entry-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.eml-history-entry-icon svg { width: 14px; height: 14px; fill: none; stroke-width: 2; }
.eml-history-entry-icon.reminder { background: rgba(0,212,255,.1); }
.eml-history-entry-icon.reminder svg { stroke: var(--t2); }
.eml-history-entry-icon.welcome { background: var(--subtle-bg); }
.eml-history-entry-icon.welcome svg { stroke: var(--t2); }
.eml-history-entry-icon.onboarding { background: rgba(0,212,255,.1); }
.eml-history-entry-icon.onboarding svg { stroke: var(--t2); }
.eml-history-entry-info { flex: 1; min-width: 0; }
.eml-history-entry-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eml-history-entry-meta {
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.eml-history-entry-type {
    font-size: 10px;
    font-weight: 600;
    color: var(--t1);
}
.eml-history-entry-status {
    text-align: right;
    flex-shrink: 0;
}
.eml-history-entry-status-label {
    font-size: 10px;
    font-weight: 600;
}
.eml-history-entry-status-label.success { color: var(--g); }
.eml-history-entry-status-label.error { color: var(--r); }
.eml-history-entry-date {
    font-size: 10px;
    color: var(--t3);
    margin-top: 2px;
}

/* --- Event timeline (review interactions) --- */
.eml-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.eml-timeline-day {
    margin-bottom: 14px;
}
.eml-timeline-day:last-child { margin-bottom: 0; }
.eml-timeline-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--bdr);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.eml-timeline-date svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; }
.eml-event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s;
}
.eml-event:hover { background: var(--subtle-hover); }
.eml-event-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.eml-event-icon svg { width: 14px; height: 14px; fill: none; stroke-width: 2; }
.eml-event-icon.visit { background: rgba(255,255,255,.05); }
.eml-event-icon.visit svg { stroke: var(--t3); }
.eml-event-icon.positive { background: var(--gbg); }
.eml-event-icon.positive svg { stroke: var(--g); }
.eml-event-icon.negative { background: var(--subtle-bg); }
.eml-event-icon.negative svg { stroke: var(--t2); }
.eml-event-icon.feedback { background: var(--rbg); }
.eml-event-icon.feedback svg { stroke: var(--r); }
.eml-event-icon.redirect { background: var(--subtle-bg); }
.eml-event-icon.redirect svg { stroke: var(--t2); }
.eml-event-body { flex: 1; min-width: 0; }
.eml-event-text {
    font-size: 13px;
    color: var(--t1);
}
.eml-event-text strong { font-weight: 600; }
.eml-event-feedback {
    font-size: 12px;
    color: var(--t2);
    margin-top: 3px;
    font-style: italic;
}
.eml-event-time {
    font-size: 11px;
    color: var(--t3);
    flex-shrink: 0;
    white-space: nowrap;
}
.eml-event-test {
    font-size: 9px;
    background: var(--subtle-bg);
    color: var(--t1);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 4px;
}

/* --- Hint box (mark as sent, SMS example) --- */
.eml-hint-box {
    padding: 14px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    margin-bottom: 14px;
}
.eml-hint-box-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 8px;
}
.eml-hint-box-desc {
    font-size: 11px;
    color: var(--t3);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* ====== FIDÉLISATION EMAIL — composants spécifiques ====== */

/* Alert bar — emails dus */
.eml-alert-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--rbg);
    border: 1px solid var(--rbg);
    border-radius: var(--rd-sm);
    color: var(--r);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    animation: eml-section-in .3s ease;
}
.eml-alert-bar svg { flex-shrink: 0; }

/* Variable chips dans l'éditeur de template */
.eml-fid-vars-hint {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.eml-fid-var {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background .15s;
    white-space: nowrap;
}
.eml-fid-var:hover { background: rgba(0,212,255,.18); }

/* Liste des clients fidélisation */
.eml-fid-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.eml-fid-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    transition: border-color .2s;
}
.eml-fid-row--due {
    border-color: var(--rbg);
    background: var(--rbg);
}
.eml-fid-row--sent {
    opacity: .7;
    border-color: var(--bdr);
}
.eml-fid-row--excluded {
    opacity: .55;
    border-color: var(--bdr);
}

/* Client info */
.eml-fid-client { min-width: 0; }
.eml-fid-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eml-fid-meta {
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dates */
.eml-fid-dates {
    display: flex;
    flex-direction: column;
    gap: 3px;
    white-space: nowrap;
}
.eml-fid-date-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.eml-fid-date-label {
    color: var(--t3);
    font-weight: 500;
    min-width: 60px;
}
.eml-fid-date-val {
    color: var(--t2);
    font-weight: 600;
}
.eml-fid-date-val.overdue {
    color: var(--r);
}

/* Status */
.eml-fid-status { white-space: nowrap; }

/* Actions */
.eml-fid-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Stepper campagne --- */
.eml-stepper {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    margin-bottom: var(--sp-md);
}
.eml-step {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 0;
}
.eml-step-num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid var(--bdr);
    color: var(--t3);
    background: var(--bg);
    transition: all .2s;
    flex-shrink: 0;
}
.eml-step--active .eml-step-num {
    border-color: var(--t1);
    color: #fff;
    background: var(--btn-p-bg); color: var(--btn-p-ink); border-color: var(--btn-p-bg);
}
.eml-step--done .eml-step-num {
    border-color: var(--t1);
    color: var(--btn-p-ink);
    background: var(--btn-p-bg);
}
.eml-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    white-space: nowrap;
}
.eml-step--active .eml-step-label { color: var(--t1); }
.eml-step--done .eml-step-label { color: var(--g); }
.eml-step-line {
    flex: 1;
    height: 2px;
    background: var(--bdr);
    margin: 0 16px;
    min-width: 20px;
}
.eml-step-line.done { background: var(--g); }

/* --- Badge exclu --- */
.eml-badge.excluded { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }

/* --- Bouton exclusion toggle --- */
.eml-exclude-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--rd-sm);
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t3);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
    font-family: 'Inter', sans-serif;
}
.eml-exclude-btn:hover { border-color: var(--t3); color: var(--t2); }
.eml-exclude-btn.active {
    background: rgba(148,163,184,.12);
    border-color: var(--t3);
    color: var(--t2);
}

/* --- Client row excluded state --- */
.eml-client-row--excluded {
    opacity: .55;
    border-color: rgba(148,163,184,.2);
}

/* --- Recap post-envoi --- */
.eml-recap {
    text-align: center;
    padding: 48px 24px;
}
.eml-recap-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    background: var(--subtle-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eml-recap-icon svg { width: 28px; height: 28px; stroke: var(--t2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eml-recap-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 8px;
}
.eml-recap-desc {
    font-size: 14px;
    color: var(--t2);
    margin-bottom: 24px;
}
.eml-recap-stats {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-top: 20px;
}
.eml-recap-stat { text-align: center; }
.eml-recap-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--t1);
}
.eml-recap-stat-value.green { color: var(--t1); }
.eml-recap-stat-value.grey { color: var(--t3); }
.eml-recap-stat-label {
    font-size: 12px;
    color: var(--t3);
    margin-top: 4px;
}

/* --- Cartes campagne (historique) --- */
.eml-campaign-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.eml-campaign-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px 20px;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 16px;
}
.eml-campaign-card:hover {
    border-color: rgba(255,255,255,.12);
    background: var(--subtle-hover);
}
.eml-campaign-month {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    min-width: 140px;
}
.eml-campaign-status {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.eml-campaign-status.draft { background: var(--subtle-bg); color: var(--t1); }
.eml-campaign-status.sent { background: var(--subtle-bg); color: var(--t1); }
.eml-campaign-status.archived { background: rgba(148,163,184,.1); color: var(--t3); }
.eml-campaign-stats {
    display: flex;
    gap: 16px;
    margin-left: auto;
    font-size: 13px;
    color: var(--t2);
}
.eml-campaign-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}
.eml-campaign-stat svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* --- Boutons navigation stepper --- */
.eml-nav-bar {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 0;
}
.eml-nav-btn {
    padding: 10px 24px;
    border-radius: var(--rd-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    font-family: 'Inter', sans-serif;
}
.eml-nav-btn:hover { border-color: var(--t3); color: var(--t1); }
.eml-nav-btn.primary {
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border-color: transparent;
    box-shadow: var(--btn-p-shadow);
}
.eml-nav-btn.primary:hover { box-shadow: var(--btn-p-glow); border-color: transparent; color: var(--btn-p-ink); }

/* --- Confirmation envoi step3 --- */
.eml-send-summary {
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 24px;
    margin-bottom: 20px;
}
.eml-send-summary-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 16px;
}
.eml-send-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.eml-send-summary-item {
    text-align: center;
    padding: 12px;
    background: var(--card);
    border-radius: var(--rd-sm);
    border: 1px solid var(--bdr);
}
.eml-send-summary-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--t1);
}
.eml-send-summary-label {
    font-size: 11px;
    color: var(--t3);
    margin-top: 4px;
}

/* --- Test confirmation toast inline --- */
.eml-test-confirm {
    background: var(--subtle-bg);
    border: 1px solid var(--subtle-bg);
    border-radius: var(--rd-sm);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--t1);
}
.eml-test-confirm svg { width: 16px; height: 16px; stroke: var(--t2); fill: none; stroke-width: 2; flex-shrink: 0; }

/* ====== RESPONSIVE: Email modules V2 ====== */

/* --- TABLET: 768px–1024px --- */
@media (max-width: 1024px) {
    /* Split panel → empilé vertical (aperçu sous la config) */
    .eml-split {
        grid-template-columns: 1fr;
    }
    .eml-preview-pane {
        position: relative;
        top: 0;
        max-height: none;
    }
    .eml-editor {
        padding-bottom: var(--sp-md);
    }
    /* Preview iframe plus petit en tablette */
    .eml-preview-frame iframe {
        min-height: 400px;
    }
    /* Sub-tabs: scroll horizontal pour éviter troncature */
    .eml-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-radius: var(--rd-sm);
    }
    .eml-tabs::-webkit-scrollbar { display: none; }
    .eml-tab {
        flex: 0 0 auto;
        min-width: 0;
    }
    /* Sections pleine largeur */
    .eml-section {
        overflow: visible;
    }
    /* Stepper responsive */
    .eml-stepper { padding: 14px 16px; }
    .eml-step-label { font-size: 12px; }
    .eml-step-line { margin: 0 10px; }
    .eml-send-summary-grid { grid-template-columns: 1fr; }
    /* Actions bar */
    .eml-actions .btn-send {
        padding: 10px 20px;
        font-size: 13px;
    }
    .eml-actions .btn-test {
        padding: 8px 14px;
        font-size: 12px;
    }
    /* Client rows - éviter overflow */
    .eml-client-row {
        flex-wrap: wrap;
    }
    .eml-client-name {
        white-space: normal;
    }
    /* History */
    .eml-history-entry {
        flex-wrap: wrap;
    }
    .eml-history-entry-name {
        white-space: normal;
    }
}

/* --- MOBILE: < 768px --- */
@media (max-width: 768px) {
    /* Sub-tabs: scroll horizontal, pas de dropdown */
    .eml-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding: 3px;
        margin-bottom: var(--sp-md);
        border-radius: var(--rd-sm);
    }
    .eml-tabs::-webkit-scrollbar { display: none; }
    .eml-tab {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 12px;
        gap: 6px;
        min-width: 0;
    }
    .eml-tab svg { width: 14px; height: 14px; }

    /* Section cards: 100% width, padding réduit */
    .eml-section-body {
        padding: 12px 14px;
    }
    .eml-section-header {
        padding: 12px 14px;
        gap: 8px;
    }
    .eml-section-icon {
        width: 28px;
        height: 28px;
    }
    .eml-section-icon svg { width: 14px; height: 14px; }
    .eml-section-title { font-size: 13px; }
    .eml-section-subtitle { font-size: 11px; }

    /* Split layout: empilé, pas de min-height */
    .eml-split {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: var(--sp-md);
    }
    .eml-preview-pane {
        position: relative;
        top: 0;
        max-height: none;
    }
    .eml-editor {
        padding-bottom: 80px;
    }

    /* Preview iframe: adapté mobile */
    .eml-preview-frame iframe {
        min-height: 350px;
        max-width: 100%;
    }
    .eml-preview-header {
        padding: 10px 14px;
    }

    /* Action bar: boutons full-width, position normale (pas fixed) */
    .eml-actions {
        position: static;
        border-radius: var(--rd-sm);
        padding: 12px 14px;
    }
    .eml-actions-row {
        flex-direction: column;
        gap: 8px;
    }
    .eml-actions .btn-send {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }
    .eml-actions .btn-test {
        width: 100%;
        justify-content: center;
        padding: 10px 16px;
    }
    .eml-actions .btn-test:disabled {
        opacity: .4;
    }

    /* Client rows: vue card empilée */
    .eml-client-row {
        padding: 10px 12px;
        gap: 8px;
        flex-wrap: wrap;
    }
    .eml-client-name {
        font-size: 12px;
    }
    .eml-client-meta {
        font-size: 10px;
    }

    /* Select bar */
    .eml-select-bar {
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px 0;
    }

    /* Filter pills: scroll horizontal */
    .eml-filter-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 4px;
        padding-bottom: 4px;
    }
    .eml-filter-bar::-webkit-scrollbar { display: none; }
    .eml-filter-pill {
        flex: 0 0 auto;
        padding: 5px 10px;
        font-size: 11px;
    }

    /* History entries: vue card empilée */
    .eml-history-entry {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
    }
    .eml-history-entry-info {
        flex: 1 1 calc(100% - 52px);
        min-width: 0;
    }
    .eml-history-entry-name {
        font-size: 12px;
        white-space: normal;
    }
    .eml-history-entry-meta {
        flex-wrap: wrap;
    }
    .eml-history-entry-status {
        margin-left: auto;
    }
    .eml-history-group-header {
        padding: 6px 10px;
        flex-wrap: wrap;
        gap: 4px;
    }
    .eml-history-group-label {
        font-size: 12px;
    }

    /* Empty states: compact */
    .eml-empty {
        padding: 40px 20px;
    }
    .eml-empty-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }
    .eml-empty-icon svg { width: 20px; height: 20px; }
    .eml-empty-title { font-size: 13px; }
    .eml-empty-desc { font-size: 12px; max-width: 240px; }

    /* Collapsible sections */
    .eml-collapse-trigger {
        padding: 12px 14px;
    }
    .eml-collapse-inner {
        padding: 0 14px 14px;
    }

    /* Template editor */
    .eml-tpl-textarea {
        font-size: 12px;
        min-height: 40px;
    }
    .eml-tpl-actions {
        flex-direction: column;
        gap: 6px;
    }
    .eml-tpl-actions .btn-send,
    .eml-tpl-actions .btn-test {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* Preview info cards */
    .eml-preview-info {
        padding: 10px;
    }
    .eml-preview-info-label { font-size: 11px; }
    .eml-preview-info-value { font-size: 11px; }

    /* Hint box */
    .eml-hint-box {
        padding: 10px;
    }

    /* Event timeline */
    .eml-event {
        padding: 6px 8px;
        gap: 8px;
    }
    .eml-event-icon {
        width: 24px;
        height: 24px;
    }
    .eml-event-icon svg { width: 12px; height: 12px; }
    .eml-event-text { font-size: 12px; }
    .eml-event-time { font-size: 10px; }

    /* Stepper responsive */
    .eml-stepper {
        padding: 12px;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .eml-stepper::-webkit-scrollbar { display: none; }
    .eml-step { flex: 0 0 auto; gap: 6px; }
    .eml-step-num { width: 24px; height: 24px; font-size: 11px; }
    .eml-step-label { font-size: 11px; }
    .eml-step-line { margin: 0 8px; min-width: 12px; }

    /* Campaign cards responsive */
    .eml-campaign-card {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 14px;
    }
    .eml-campaign-month { font-size: 13px; min-width: auto; }
    .eml-campaign-stats { margin-left: 0; gap: 10px; font-size: 12px; }
    .eml-campaign-status { font-size: 10px; padding: 2px 6px; }

    /* KPI grid responsive — 3 colonnes compactes */
    .rpt-kpi-grid { gap: 6px; }
    .rpt-kpi-card { padding: 10px 8px; gap: 6px; }
    .rpt-kpi-icon { width: 28px; height: 28px; border-radius: 8px; }
    .rpt-kpi-icon svg { width: 14px; height: 14px; }
    .rpt-kpi-value { font-size: 18px; }
    .rpt-kpi-label { font-size: 8px; letter-spacing: .3px; }

    /* Send summary responsive */
    .eml-send-summary-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .eml-send-summary-value { font-size: 18px; }

    /* Nav buttons responsive */
    .eml-nav-bar { flex-wrap: wrap; }
    .eml-nav-btn { font-size: 12px; padding: 8px 16px; }

    /* Exclude button responsive */
    .eml-exclude-btn { font-size: 10px; padding: 3px 8px; }

    /* Rapports: cartes empilées sur mobile */
    .eml-campaign-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .eml-campaign-card > div:first-child { width: 100%; }
    .eml-campaign-card > div:last-child {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .eml-campaign-card .eml-actions {
        padding: 0;
        margin: 0;
    }
    .eml-campaign-card .eml-actions .btn-test,
    .eml-campaign-card .eml-actions .btn-send { width: auto; padding: 6px 12px; font-size: 11px; }

    /* Editor: réduire le padding bottom sur mobile (plus de barre fixe) */
    .eml-editor { padding-bottom: var(--sp-md); }

    /* Recap stats: compact */
    .eml-recap-stats { gap: 16px; }
    .eml-recap-stat-value { font-size: 22px; }

}

/* ============================================================
   EMAIL MODULES — Legacy classes (used by Onboarding tab)
   ============================================================ */
.email-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0;
    min-height: 320px;
}
.email-grid--equal { grid-template-columns: 1fr 1fr; }
.email-config {
    padding: 24px;
    border-right: 1px solid var(--bdr);
    overflow-y: auto;
    max-height: 700px;
}
.email-preview {
    padding: 24px;
    display: flex;
    flex-direction: column;
}
.email-preview iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: none;
    background: #f4f5f7;
}
.email-section-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--t3);
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.email-client-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--bdr);
    border-radius: 8px;
    margin-bottom: 6px;
    user-select: none;
    transition: border-color .15s, background .15s;
}
.email-client-row--clickable { cursor: pointer; }
.email-client-row--sent { opacity: .5; cursor: default; }
.email-client-row--selected { border-color: var(--t1); background: rgba(0,212,255,.05); }
.email-client-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.email-client-meta { font-size: 11px; color: var(--t3); }
.email-send-bar {
    padding: 16px 24px;
    border-top: 1px solid var(--bdr);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}
.email-recipients {
    padding: 24px;
    overflow-y: auto;
    max-height: 500px;
}
.email-recipients-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
@media (max-width: 1024px) {
    .email-grid, .email-grid.email-grid--equal { grid-template-columns: 1fr; }
    .email-config { border-right: none; border-bottom: 1px solid var(--bdr); max-height: none; }
}

/* ============================================================
   CONTENT TABS — Professional UI (mirrors .eml-* design)
   ============================================================ */

/* --- Stat cards grid --- */
.ctn-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 0 0 16px;
    animation: fu .4s ease both;
}
.ctn-stat {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--rd);
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
}
.ctn-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity .2s ease;
}
.ctn-stat:hover { border-color: rgba(255,255,255,.12); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.ctn-stat.active { border-width: 2px; }
.ctn-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}
.ctn-stat-icon svg { width: 18px; height: 18px; stroke-width: 2; fill: none; }
.ctn-stat-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
    margin-bottom: 4px;
}
.ctn-stat-label {
    font-size: 10px;
    color: var(--t3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* --- Pipeline page wrapper --- */
.pipe-page {
    padding: var(--mn-pad);
    animation: fu .4s ease both;
}
@media (max-width: 768px) { .pipe-page { padding: var(--mn-pad-m); } }

/* --- Pipeline page header --- */
.pipe-hero {
    margin-bottom: 24px;
}
.pipe-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.pipe-hero-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--t1);
    letter-spacing: -.3px;
}
.pipe-hero-title svg { width: 22px; height: 22px; stroke-width: 2; fill: none; stroke: var(--t2); }
.pipe-hero-desc {
    font-size: 13px;
    color: var(--t3);
    line-height: 1.5;
    max-width: 560px;
}
.pipe-hero-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* --- Pipeline Kanban (bento-style status columns) --- */
.pipe-kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
    animation: fu .4s ease both;
    animation-delay: .05s;
}
.pipe-kanban-col {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--rd-lg);
    padding: 16px;
    cursor: pointer;
    transition: all var(--tr);
    position: relative;
    overflow: hidden;
}
.pipe-kanban-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--rd-lg) var(--rd-lg) 0 0;
    opacity: .8;
    transition: opacity .2s;
}
.pipe-kanban-col:hover { border-color: rgba(255,255,255,.1); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.pipe-kanban-col:hover::before { opacity: 1; }
.pipe-kanban-col.active { border-width: 2px; }
.pipe-kanban-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pipe-kanban-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.pipe-kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pipe-kanban-count {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
}
.pipe-kanban-bar {
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,.04);
    margin: 10px 0 12px;
    overflow: hidden;
}
.pipe-kanban-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.pipe-kanban-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pipe-kanban-item {
    font-size: 12px;
    color: var(--t2);
    padding: 6px 8px;
    border-radius: var(--rd-sm);
    background: rgba(255,255,255,.02);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pipe-kanban-item:hover { background: rgba(255,255,255,.05); }
.pipe-kanban-item svg { width: 12px; height: 12px; flex-shrink: 0; }
.pipe-kanban-more {
    font-size: 10px;
    color: var(--t3);
    text-align: center;
    padding: 4px 0 0;
}

/* --- Filter toolbar --- */
.pipe-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
    animation: fu .4s ease both;
    animation-delay: .1s;
}

/* --- Filter pills row --- */
.ctn-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.ctn-pill {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.ctn-pill:hover { border-color: rgba(255,255,255,.15); color: var(--t1); }
.ctn-pill.active {
    background: var(--primary-soft);
    border-color: var(--ba);
    color: var(--t1);
}
.ctn-pill-count {
    font-size: 10px;
    opacity: .7;
}
.ctn-pill-sep {
    width: 1px;
    height: 20px;
    background: var(--bdr);
    margin: 0 4px;
    flex-shrink: 0;
}

/* --- Active filter bar --- */
.ctn-active-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 20px;
    padding: 8px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    animation: fu .3s ease both;
}
.ctn-active-filter-label {
    font-size: 12px;
    color: var(--t2);
}
.ctn-active-filter-value {
    font-weight: 700;
}
.ctn-active-filter .btn { font-size: 11px; padding: 4px 10px; }

/* --- Section card (content area wrapper) --- */
.ctn-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    box-shadow: var(--sh);
    overflow: hidden;
    animation: fu .4s ease both;
    transition: border-color .2s ease;
    margin: 16px 20px;
}
.ctn-section:nth-child(2) { animation-delay: .05s; }
.ctn-section:nth-child(3) { animation-delay: .1s; }
.ctn-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
}
.ctn-section-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ctn-section-icon svg { width: 16px; height: 16px; stroke-width: 2; fill: none; }
.ctn-section-icon.blue { background: rgba(0,212,255,.1); }
.ctn-section-icon.blue svg { stroke: var(--t2); }
.ctn-section-icon.cyan { background: rgba(0,212,255,.1); }
.ctn-section-icon.cyan svg { stroke: var(--t2); }
.ctn-section-icon.green { background: var(--subtle-bg); }
.ctn-section-icon.green svg { stroke: var(--t2); }
.ctn-section-icon.orange { background: var(--subtle-bg); }
.ctn-section-icon.orange svg { stroke: var(--t2); }
.ctn-section-icon.purple { background: rgba(138,43,226,.1); }
.ctn-section-icon.purple svg { stroke: #8a2be2; }
.ctn-section-icon.pink { background: rgba(233,30,99,.1); }
.ctn-section-icon.pink svg { stroke: #e91e63; }
.ctn-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.2px;
}
.ctn-section-subtitle {
    font-size: 12px;
    color: var(--t3);
    margin-left: auto;
    font-weight: 600;
}
.ctn-section-body {
    padding: 16px 20px;
}

/* --- Post list card --- */
.pipe-list-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-lg);
    overflow: hidden;
    animation: fu .4s ease both;
    animation-delay: .15s;
}
.pipe-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bdr);
}
.pipe-list-head-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
}
.pipe-list-count {
    font-size: 11px;
    color: var(--t3);
    font-weight: 600;
    padding: 2px 8px;
    background: rgba(255,255,255,.04);
    border-radius: 10px;
}

/* --- Post row card --- */
.ctn-post-row {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bdr);
    transition: background .15s ease;
}
.ctn-post-row:last-child { border-bottom: none; }
.ctn-post-row:hover { background: var(--subtle-hover); }
.ctn-post-row-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--rd-sm);
    object-fit: cover;
    flex-shrink: 0;
}
.ctn-post-row-body { flex: 1; min-width: 0; }
.ctn-post-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.ctn-post-row-content {
    color: var(--t2);
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctn-post-row-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
}
.ctn-post-row:hover .ctn-post-row-actions { opacity: 1; }

/* --- Badge (type/status) --- */
.ctn-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ctn-badge-status {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ctn-badge-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* --- Empty state --- */
.ctn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    animation: fu .4s ease both;
}
.ctn-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--subtle-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.ctn-empty-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 1.5;
}
.ctn-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 8px;
}
.ctn-empty-desc {
    font-size: 13px;
    color: var(--t3);
    max-width: 360px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.ctn-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--btn-p-ink);
    background: var(--btn-p-bg);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .2s;
    box-shadow: var(--btn-p-shadow);
}
.ctn-empty-cta:hover { transform: translateY(-1px); box-shadow: var(--btn-p-glow); }
.ctn-empty-cta svg { width: 14px; height: 14px; stroke-width: 2; fill: none; }

/* --- Calendar --- */
.ctn-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bdr);
}
.ctn-cal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
}
.ctn-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 12px;
}
.ctn-cal-header {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    padding: 8px 0;
}
.ctn-cal-day {
    min-height: 72px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    padding: 4px;
    overflow: hidden;
    transition: border-color .15s;
}
.ctn-cal-day:hover { border-color: rgba(255,255,255,.12); }
.ctn-cal-day.today { border-color: var(--t1); }
.ctn-cal-day-num {
    font-size: 12px;
    font-weight: 500;
    color: var(--t2);
    margin-bottom: 2px;
}
.ctn-cal-day.today .ctn-cal-day-num { font-weight: 700; color: var(--t1); }
.ctn-cal-event {
    font-size: 9px;
    padding: 1px 4px;
    margin-bottom: 1px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: opacity .15s;
}
.ctn-cal-event:hover { opacity: .8; }
.ctn-cal-more {
    font-size: 9px;
    color: var(--t3);
    text-align: center;
}

/* --- View toggle --- */
.ctn-view-toggle {
    display: flex;
    gap: 0;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--rd-sm);
    padding: 3px;
    overflow: hidden;
}
.ctn-view-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
}
.ctn-view-btn:hover { color: var(--t2); }
.ctn-view-btn.active {
    color: var(--t1);
    background: var(--primary-soft);
    box-shadow: none;
}
.ctn-view-btn svg { width: 14px; height: 14px; stroke-width: 2; fill: none; }

/* --- Pipeline help tooltip --- */
.pipe-help-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-border);
    cursor: help;
    color: var(--t3);
    font-size: 11px;
    font-weight: 700;
    transition: all .15s;
}
.pipe-help-tip:hover { background: rgba(0,212,255,.08); color: var(--t1); border-color: rgba(0,212,255,.2); }
/* La bulle d'aide passe par le moteur global data-tip (shared/ui/tooltip.js). */

/* --- Keyboard shortcut hint --- */
.pipe-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--t3);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
}

/* --- Form section (create/edit post) --- */
.ctn-form {
    padding: 20px;
    border-bottom: 1px solid var(--bdr);
    background: var(--card);
    animation: fu .3s ease both;
}
.ctn-form-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ctn-form-title svg { width: 18px; height: 18px; stroke-width: 2; fill: none; }
.ctn-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.ctn-form-field {
    margin-bottom: 14px;
}
.ctn-form-field:last-child { margin-bottom: 0; }
.ctn-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 6px;
    letter-spacing: .2px;
}
.ctn-form-field label span { font-weight: 400; color: var(--t3); }
.ctn-form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--bdr);
    margin-top: 16px;
}

/* --- Bulk bar --- */
.ctn-bulk-bar {
    padding: 10px 20px;
    border-bottom: 1px solid var(--bdr);
    background: var(--primary-soft);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    animation: fu .3s ease both;
}
.ctn-bulk-count {
    font-size: 12px;
    color: var(--t1);
    font-weight: 600;
}

/* --- Info box (tips, hints) --- */
.ctn-info-box {
    padding: 14px 16px;
    border-radius: var(--rd-sm);
    border: 1px solid var(--bdr);
    margin-bottom: 16px;
    font-size: 12px;
    color: var(--t2);
    line-height: 1.7;
}
.ctn-info-box.accent {
    background: rgba(0,212,255,.03);
    border-color: rgba(0,212,255,.12);
}
.ctn-info-box.gradient {
    background: linear-gradient(135deg, rgba(0,212,255,.03), rgba(138,43,226,.03));
    border-color: rgba(0,212,255,.12);
}
.ctn-info-box strong { color: var(--t1); }

/* --- Pagination --- */
.ctn-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px;
}
.ctn-pagination-info {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--t2);
}

/* --- Header bar (title + actions) --- */
.ctn-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
    animation: fu .4s ease both;
}
.ctn-header-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ctn-header-title svg { width: 18px; height: 18px; stroke-width: 2; fill: none; }
.ctn-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

/* --- Legend bar --- */
.ctn-legend {
    display: flex;
    gap: 10px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
    align-items: center;
}
.ctn-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--t3);
}

/* ====== RESPONSIVE: Content tabs ====== */
@media (max-width: 1024px) {
    .ctn-stats {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    .ctn-form-grid { grid-template-columns: 1fr; }
    .ctn-section { margin: 12px 14px; }
    .pipe-kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ctn-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px;
    }
    .ctn-stat { padding: 12px 8px; }
    .ctn-stat-icon { width: 28px; height: 28px; margin-bottom: 6px; }
    .ctn-stat-icon svg { width: 14px; height: 14px; }
    .ctn-stat-value { font-size: 20px; }
    .ctn-stat-label { font-size: 10px; }
    .ctn-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .ctn-filters::-webkit-scrollbar { display: none; }
    .ctn-pill { flex: 0 0 auto; padding: 5px 10px; font-size: 11px; }
    .ctn-header { padding: 12px 14px; }
    .ctn-post-row { padding: 12px 14px; gap: 10px; }
    .ctn-post-row-thumb { width: 40px; height: 40px; }
    .ctn-post-row-actions { opacity: 1; }
    .ctn-section { margin: 10px; }
    .ctn-section-body { padding: 12px 14px; }
    .ctn-section-header { padding: 12px 14px; }
    .ctn-form { padding: 14px; }
    .ctn-form-grid { grid-template-columns: 1fr; gap: 10px; }
    .ctn-form-actions { flex-wrap: wrap; }
    .ctn-bulk-bar { padding: 8px 14px; }
    .ctn-empty { padding: 40px 20px; }
    .ctn-empty-icon { width: 48px; height: 48px; border-radius: 14px; }
    .ctn-empty-icon svg { width: 20px; height: 20px; }
    .ctn-cal-grid { gap: 1px; padding: 8px; }
    .ctn-cal-day { min-height: 56px; padding: 2px; }
    .ctn-cal-day-num { font-size: 11px; }
    .ctn-pagination { padding: 14px; }
    .pipe-kanban { grid-template-columns: 1fr 1fr; gap: 8px; }
    .pipe-kanban-col { padding: 12px; }
    .pipe-kanban-count { font-size: 22px; }
    .pipe-hero-top { flex-direction: column; }
    .pipe-hero-title { font-size: 18px; }
    .pipe-toolbar { gap: 6px; }
}

/* ============================================================
   COMPETITOR INTEL — Design system (.ci-*)
   ============================================================ */

/* --- Header & Tabs --- */
.ci-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.ci-tabs { display: flex; gap: 4px; }
.ci-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s ease;
    white-space: nowrap;
}
.ci-tab svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.ci-tab:hover { border-color: rgba(255,255,255,.15); color: var(--t2); }
.ci-tab.active {
    background: var(--primary-soft, rgba(0,212,255,.12));
    border-color: rgba(0,212,255,.25);
    color: var(--t1);
}

/* --- Stat Cards --- */
.ci-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    animation: fu .35s ease both;
}
.ci-stat {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px 14px;
    text-align: center;
    transition: border-color .2s ease;
}
.ci-stat:hover { border-color: rgba(255,255,255,.12); }
.ci-stat-value {
    font-size: 24px;
    font-weight: 800;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    letter-spacing: -.5px;
    line-height: 1.1;
    margin-bottom: 4px;
    color: var(--t1);
}
.ci-stat-label {
    font-size: 11px;
    color: var(--t3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.ci-stat-sub { font-size: 11px; color: var(--t3); margin-top: 3px; }

/* --- Scan Info Bar --- */
.ci-scan-info {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 12px;
}
.ci-scan-info svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 2; flex-shrink: 0; }

/* --- Competitor List --- */
.ci-list { display: flex; flex-direction: column; gap: 6px; }
.ci-row {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .2s ease;
    animation: fu .3s ease both;
}
.ci-row:hover { border-color: rgba(255,255,255,.1); }
.ci-row.target { border-color: var(--t1); border-width: 2px; background: rgba(0,212,255,.04); }
.ci-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: default;
}
.ci-row-main.clickable { cursor: pointer; }
.ci-row-main.clickable:hover { background: rgba(255,255,255,.025); }

/* Chevron + changes-count wrapper (desktop only) */
.ci-chevron-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    width: 46px;
}

/* Rank badge */
.ci-rank {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    background: rgba(255,255,255,.05);
    color: var(--t3);
}
.ci-rank.top3 { background: var(--subtle-bg); color: var(--t1); }
.ci-rank.top10 { background: var(--subtle-bg); color: var(--t1); }
.ci-rank.target { background: rgba(0,212,255,.2); color: var(--t1); }

/* Name */
.ci-name { flex: 1; min-width: 0; overflow: hidden; }
.ci-name-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ci-name-title.is-target { font-weight: 800; color: var(--t1); }
.ci-name-cat {
    font-size: 12px;
    color: var(--t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Badges */
.ci-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.ci-badge.you { background: var(--btn-p-bg); color: var(--btn-p-ink); }
.ci-badge.up { color: var(--g); font-size: 12px; background: transparent; padding: 0; }
.ci-badge.down { color: var(--r); font-size: 12px; background: transparent; padding: 0; }
.ci-changes-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--r);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    flex-shrink: 0;
}

/* Rank change column */
.ci-rank-chg {
    text-align: center;
    width: 40px;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 13px;
}

/* Meta columns (desktop) */
.ci-meta { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.ci-rating { text-align: center; min-width: 60px; color: var(--o); font-weight: 600; font-size: 13px; flex-shrink: 0; }
.ci-reviews { text-align: center; min-width: 70px; font-weight: 600; color: var(--t1); font-size: 13px; flex-shrink: 0; }
.ci-reviews-change { font-size: 11px; color: var(--t1); font-weight: 700; margin-left: 3px; }

/* Mobile meta row (hidden on desktop) */
.ci-meta-mobile {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 0 16px 10px;
    flex-wrap: wrap;
}
.ci-meta-mobile-item { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--t2); }
.ci-meta-mobile-label { font-size: 11px; color: var(--t3); }

/* Actions */
.ci-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ci-btn-spy {
    padding: 5px 12px;
    border: 1px solid var(--bdr);
    border-radius: 8px;
    background: transparent;
    color: var(--t1);
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
    white-space: nowrap;
}
.ci-btn-spy:hover { background: rgba(0,212,255,.08); border-color: rgba(0,212,255,.3); }
.ci-btn-web {
    padding: 5px 9px;
    border: 1px solid var(--bdr);
    border-radius: 8px;
    color: var(--t3);
    font-size: 13px;
    text-decoration: none;
    background: transparent;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
}
.ci-btn-web:hover { color: var(--t1); border-color: rgba(255,255,255,.15); }

/* Chevron SVG */
.ci-chevron {
    width: 14px;
    height: 14px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
    transition: transform .2s ease;
    transform: rotate(-90deg);
}
.ci-chevron.open { transform: rotate(0deg); }

/* Accordion */
.ci-accordion {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    border-top: 1px solid transparent;
}
.ci-accordion.open { max-height: 600px; border-top-color: var(--bdr); }
.ci-accordion-inner { padding: 12px 16px; background: rgba(0,0,0,.15); }
.ci-accordion-title {
    font-size: 11px;
    color: var(--t3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.ci-change-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.ci-change-badge { padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.ci-change-old { color: var(--t3); text-decoration: line-through; }
.ci-change-arrow { color: var(--t3); }
.ci-change-new { font-weight: 600; color: var(--t1); }

/* Empty State */
.ci-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; text-align: center; }
.ci-empty-icon { font-size: 40px; margin-bottom: 14px; opacity: .7; }
.ci-empty-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 6px; }
.ci-empty-desc { font-size: 13px; color: var(--t3); line-height: 1.6; max-width: 320px; margin-bottom: 20px; }

/* AI Analysis Card */
.ci-ai-card {
    background: linear-gradient(135deg, rgba(0,212,255,.05), rgba(30,126,255,.05));
    border: 1px solid rgba(0,212,255,.15);
    border-radius: 14px;
    padding: 24px;
    animation: fu .35s ease both;
}
.ci-ai-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ci-ai-header-icon { font-size: 24px; }
.ci-ai-header-title { font-weight: 700; font-size: 15px; color: var(--t1); }
.ci-ai-header-sub { font-size: 11px; color: var(--t3); margin-top: 1px; }
.ci-ai-body { font-size: 14px; color: var(--t2); line-height: 1.8; }
.ci-ai-section { border-left: 3px solid rgba(0,212,255,.3); padding-left: 12px; margin: 12px 0; }
.ci-ai-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.ci-ai-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border: 1px solid rgba(0,212,255,.2);
    border-radius: 20px;
    background: transparent;
    color: var(--t1);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
}
.ci-ai-refresh:hover { background: rgba(0,212,255,.08); }
.ci-ai-refresh svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Modal */
.ci-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.7);
    -webkit-backdrop-filter: var(--glass-scrim-blur);
    backdrop-filter: var(--glass-scrim-blur);
    animation: fu .2s ease both;
}
.ci-modal {
    background: var(--bg2, #0a1628);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow-y: auto;
    border: 1px solid var(--bdr, #1e293b);
    animation: fu .25s ease both;
}
.ci-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--bdr);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background: var(--bg2, #0a1628);
    z-index: 1;
    border-radius: 16px 16px 0 0;
}
.ci-modal-header-title { font-weight: 700; font-size: 16px; color: var(--t1); }
.ci-modal-header-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }
.ci-modal-close {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    font-size: 20px;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all .15s;
    line-height: 1;
}
.ci-modal-close:hover { background: rgba(255,255,255,.08); color: var(--t1); }
.ci-modal-body { padding: 24px; }
.ci-modal-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.ci-modal-kpi-item { background: var(--overlay); border: 1px solid var(--bdr); border-radius: 10px; padding: 14px; text-align: center; }
.ci-modal-kpi-value { font-size: 22px; font-weight: 800; color: var(--t1); line-height: 1.1; }
.ci-modal-kpi-label { font-size: 11px; color: var(--t3); margin-top: 3px; }
.ci-modal-section { margin-bottom: 20px; }
.ci-modal-section-title { font-weight: 600; font-size: 13px; color: var(--t1); margin-bottom: 8px; }
.ci-modal-desc {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.7;
    padding: 12px;
    background: var(--overlay);
    border-radius: 10px;
    border: 1px solid var(--bdr);
}
.ci-modal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ci-modal-info {
    font-size: 13px;
    color: var(--t2);
    padding: 10px 14px;
    background: var(--overlay);
    border-radius: 8px;
    border: 1px solid var(--bdr);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.ci-modal-info { color: var(--t1); text-decoration: none; display: block; }
a.ci-modal-info:hover { border-color: rgba(0,212,255,.3); }
.ci-modal-hours {
    padding: 12px;
    background: var(--overlay);
    border-radius: 10px;
    border: 1px solid var(--bdr);
    font-size: 12px;
    color: var(--t2);
    line-height: 1.8;
}
.ci-modal-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ci-modal-photos img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--bdr); }
.ci-modal-review { padding: 12px; background: var(--overlay); border-radius: 10px; border: 1px solid var(--bdr); margin-bottom: 8px; }
.ci-modal-review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.ci-modal-review-author { font-weight: 600; font-size: 13px; color: var(--t1); }
.ci-modal-review-date { font-size: 11px; color: var(--t3); }
.ci-modal-review-stars { color: var(--o); font-size: 13px; margin-bottom: 5px; }
.ci-modal-review-text { font-size: 13px; color: var(--t2); line-height: 1.6; }
.ci-modal-attrs { display: flex; gap: 8px; flex-wrap: wrap; }
.ci-modal-attr { padding: 4px 12px; background: rgba(0,212,255,.08); color: var(--t1); border-radius: 20px; font-size: 11px; font-weight: 600; }

/* Responsive */
@media (max-width: 1024px) {
    .ci-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ci-stats { grid-template-columns: repeat(2, 1fr); }
    .ci-tabs { flex-wrap: wrap; }
    .ci-chevron-wrap { display: none; }
    .ci-rank-chg { display: none; }
    .ci-meta { display: none; }
    .ci-meta-mobile { display: flex; }
    .ci-modal-overlay { align-items: flex-end; }
    .ci-modal { width: 100%; max-width: 100%; border-radius: 16px 16px 0 0; }
    .ci-modal-info-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PIPELINE / LIFECYCLE
   ============================================================ */

/* --- Pipeline dots in locations table --- */
.pipeline-dots { display: inline-flex; gap: 6px; align-items: center; }
.pipeline-step {
    width: 22px; height: 22px; font-size: 14px; text-align: center; line-height: 22px;
    cursor: default; transition: transform .15s ease;
}
.pipeline-step:hover { transform: scale(1.25); }
.pipeline-score {
    font-size: 10px; font-weight: 700; color: var(--t3); margin-left: 4px;
    white-space: nowrap;
}

/* --- Dashboard lifecycle card --- */
.lifecycle-card {
    background: var(--bg2); border: 1px solid var(--bdr); border-radius: 14px;
    padding: 16px 20px; margin-bottom: 16px;
}
.lifecycle-card h4 {
    margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--t1);
    display: flex; align-items: center; justify-content: space-between;
}
.lifecycle-card h4 span { font-size: 12px; color: var(--t3); font-weight: 400; }
.lifecycle-progress-bg {
    height: 8px; background: rgba(255,255,255,.06); border-radius: 4px;
    overflow: hidden; margin-bottom: 10px;
}
.lifecycle-progress-fill {
    height: 100%; border-radius: 4px; transition: width .6s ease;
    background: linear-gradient(90deg, var(--acc), var(--g));
}
.lifecycle-missing { font-size: 12px; color: var(--t3); display: flex; flex-wrap: wrap; gap: 8px 16px; }
.lifecycle-missing a {
    color: var(--t1); text-decoration: none; cursor: pointer;
    transition: color .15s;
}
.lifecycle-missing a:hover { color: var(--t1); text-decoration: underline; }

/* --- Lifecycle detail tab (timeline) --- */
.lifecycle-header {
    display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
    padding: 16px 20px; background: var(--bg2); border: 1px solid var(--bdr);
    border-radius: 14px;
}
.lifecycle-header .lc-ring {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; color: #fff;
}
.lifecycle-header .lc-ring.lc-full { background: linear-gradient(135deg, var(--acc), var(--g)); }
.lifecycle-header .lc-ring.lc-partial { background: var(--t1); }
.lifecycle-header .lc-ring.lc-low { background: var(--r); }
.lifecycle-header .lc-title { font-size: 16px; font-weight: 700; color: var(--t1); }
.lifecycle-header .lc-subtitle { font-size: 13px; color: var(--t3); margin-top: 2px; }

.lifecycle-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.lc-step {
    display: flex; gap: 16px; padding: 18px 20px; position: relative;
    background: var(--bg2); border: 1px solid var(--bdr); border-radius: 14px;
    margin-bottom: 12px; transition: border-color .2s;
}
.lc-step:hover { border-color: var(--t1); }
.lc-step-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.lc-step-icon.done { background: var(--subtle-bg); }
.lc-step-icon.pending { background: var(--subtle-bg); }
.lc-step-icon.missing { background: rgba(255,255,255,.04); }
.lc-step-body { flex: 1; min-width: 0; }
.lc-step-title {
    font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
}
.lc-step-title .lc-date { font-size: 11px; font-weight: 400; color: var(--t3); }
.lc-step-sub { font-size: 12px; color: var(--t3); line-height: 1.5; }
.lc-step-sub .lc-check { color: var(--g); }
.lc-step-action {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    padding: 6px 14px; background: var(--btn-p-bg); color: var(--btn-p-ink); border: none;
    border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer;
    text-decoration: none; transition: opacity .15s;
}
.lc-step-action:hover { opacity: .85; }

/* Connector line between steps */
.lc-step:not(:last-child)::after {
    content: ''; position: absolute; left: 39px; bottom: -12px;
    width: 2px; height: 12px; background: var(--bdr);
}

@media (max-width: 640px) {
    .lifecycle-header { flex-direction: column; text-align: center; }
    .lc-step { padding: 14px; gap: 12px; }
    .lc-step-icon { width: 32px; height: 32px; font-size: 16px; }
    .lc-step:not(:last-child)::after { left: 31px; }
}

/* ============================================================
   FICHES — Vue d'ensemble des fiches clients (v2 – UX dense)
   ============================================================ */

/* KPI Summary Cards */
/* ====== FICHES v2 — Modern redesign ====== */

/* Utility colors */
.f-g { color: var(--t1) !important; } .f-o { color: var(--t1) !important; } .f-r { color: var(--r) !important; } .f-t3 { color: var(--t3); }
.f-trend-up { font-size: 10px; font-weight: 700; color: var(--g); background: var(--gbg); padding: 1px 5px; border-radius: 4px; }
.f-trend-down { font-size: 10px; font-weight: 700; color: var(--r); background: var(--rbg); padding: 1px 5px; border-radius: 4px; }

/* === Mots-clés toggle switch (still used in V7) === */
.fiches-kw-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; white-space: nowrap; flex-shrink: 0; }
.fiches-kw-switch input { display: none; }
.fiches-kw-switch-slider {
    width: 38px; height: 22px; background: rgba(255,255,255,.1); border-radius: 11px;
    position: relative; transition: background .2s; flex-shrink: 0;
}
.fiches-kw-switch-slider::after {
    content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
    background: var(--t3); border-radius: 50%; transition: transform .2s, background .2s;
}
.fiches-kw-switch input:checked + .fiches-kw-switch-slider { background: var(--acc); }
.fiches-kw-switch input:checked + .fiches-kw-switch-slider::after { transform: translateX(16px); background: #fff; }
.fiches-kw-switch-label { font-size: 12px; color: var(--t2); font-weight: 500; }
[data-theme="light"] .fiches-kw-switch-slider { background: rgba(0,0,0,.1); }

/* === HISTORY MODAL === */
.fh-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.65); -webkit-backdrop-filter: var(--glass-scrim-blur); backdrop-filter: var(--glass-scrim-blur);
    display: flex; align-items: center; justify-content: center;
    animation: fu .15s ease;
}
.fh-modal {
    background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd-lg);
    width: 90vw; max-width: 820px; max-height: 85vh; display: flex; flex-direction: column;
    box-shadow: 0 24px 64px rgba(0,0,0,.4);
}
.fh-header {
    display: flex; align-items: center; gap: 12px; padding: 18px 24px;
    border-bottom: 1px solid var(--bdr);
}
.fh-header-title { font-weight: 700; font-size: 16px; color: var(--t1); flex: 1; }
.fh-close {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: rgba(255,255,255,.06); color: var(--t3); font-size: 16px;
    cursor: pointer; transition: all .15s;
}
.fh-close:hover { background: rgba(255,255,255,.1); color: var(--t1); }
.fh-body { padding: 20px 24px; overflow-y: auto; flex: 1; }
.fh-chart-row { display: flex; gap: 16px; margin-bottom: 20px; }
.fh-chart-box {
    flex: 1; background: var(--overlay, rgba(0,0,0,.15)); border: 1px solid var(--bdr);
    border-radius: 10px; padding: 14px; text-align: center;
}
.fh-chart-title { font-size: 11px; font-weight: 600; color: var(--t3); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px; }
.fh-section-title { font-weight: 600; font-size: 13px; color: var(--t1); margin-bottom: 10px; }
.fh-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fh-table th {
    text-align: left; padding: 8px 10px; font-size: 10px; font-weight: 600;
    color: var(--t3); text-transform: uppercase; letter-spacing: .3px;
    border-bottom: 1px solid var(--bdr);
}
.fh-table td { padding: 8px 10px; border-bottom: 1px solid var(--subtle-line); color: var(--t2); }
.fh-table tr:hover td { background: rgba(0,212,255,.03); }

/* === KEYWORDS PANEL === */
.f-kw-panel {
    background: var(--subtle-bg, rgba(0,0,0,.12)); border: 1px solid var(--bdr); border-top: none;
    border-radius: 0 0 var(--rd) var(--rd); padding: 0 18px 12px; animation: fu .15s ease;
}
.f-kw-loading { padding: 14px 0; color: var(--t3); font-size: 12px; }
.f-kw-dates { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 8px; flex-wrap: wrap; font-size: 11px; color: var(--t3); }
.f-kw-dates strong { color: var(--t2); font-weight: 600; }
.f-kw-late, .f-kw-late strong { color: var(--t1) !important; }

/* Keywords grid */
.f-kw-grid { display: grid; grid-template-columns: 1fr 55px 40px 140px 50px 34px; gap: 6px; align-items: center; }
.f-kw-head { padding: 8px 0 4px; font-size: 10px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .4px; border-bottom: 1px solid rgba(255,255,255,.06); }
.f-kw-row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.03); font-size: 13px; }
.f-kw-row:last-of-type { border-bottom: none; }
.f-kw-name { color: var(--t1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-kw-rank { font-weight: 700; text-align: center; }
.f-kw-change { text-align: center; font-size: 12px; font-weight: 600; }
.f-kw-vis { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.f-kw-bar { flex: 1; height: 5px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.f-kw-bar-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s; }
.f-kw-bar-fill.f-g { background: var(--t1); } .f-kw-bar-fill.f-o { background: var(--t1); } .f-kw-bar-fill.f-r { background: var(--r); }
.f-kw-vt { text-align: center; font-size: 11px; font-weight: 600; }
.f-kw-act { text-align: center; }

/* Scan button */
.f-kw-scan {
    width: 28px; height: 28px; border: none; background: rgba(255,255,255,.06); color: var(--t2);
    border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    padding: 0; transition: all .15s;
}
.f-kw-scan:hover { background: var(--primary); color: #fff; }
.f-kw-scan.disabled, .f-kw-scan:disabled { opacity: .3; cursor: not-allowed; }
.f-kw-scan.disabled:hover { background: rgba(255,255,255,.06); color: var(--t2); }
.f-kw-scan svg { width: 14px; height: 14px; }
.f-kw-scan.spin svg { animation: spin .8s linear infinite; }

.f-kw-foot { padding: 8px 0 2px; text-align: right; }
.f-kw-foot a { font-size: 12px; color: var(--t1); text-decoration: none; font-weight: 600; }
.f-kw-foot a:hover { text-decoration: underline; }

/* === RESPONSIVE (keywords panel only) === */
@media (max-width: 768px) {
    .f-kw-grid { grid-template-columns: 1fr 45px 35px 90px 40px 28px; gap: 4px; }
    .f-kw-name { font-size: 12px; }
}

/* ============================================================
   CLIENT SETTINGS — Design system (.cs-*)
   ============================================================ */
.cs-section {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    box-shadow: var(--sh);
    overflow: hidden;
    animation: fu .4s ease both;
    transition: border-color .2s ease;
    margin-bottom: 8px;
}
.cs-section:last-child { margin-bottom: 0; }
.cs-section:nth-child(2) { animation-delay: .05s; }
.cs-section:nth-child(3) { animation-delay: .1s; }
.cs-section:nth-child(4) { animation-delay: .15s; }
.cs-section:nth-child(5) { animation-delay: .2s; }
.cs-section:nth-child(6) { animation-delay: .25s; }
.cs-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    transition: background .15s;
    border-bottom: 1px solid transparent;
}
.cs-section-header:hover { background: rgba(255,255,255,.04); }
.cs-section-header.open { border-bottom-color: var(--bdr); }
.cs-section-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cs-section-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cs-section-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cs-section-icon svg { width: 18px; height: 18px; stroke-width: 2; fill: none; }
/* Charte monochrome : les modificateurs de couleur (blue/cyan/green/orange/purple/gray)
   sont neutralises, toutes les pastilles d'icone sont identiques. */
.cs-section-icon,
.cs-section-icon.blue,
.cs-section-icon.cyan,
.cs-section-icon.green,
.cs-section-icon.orange,
.cs-section-icon.purple,
.cs-section-icon.gray { background: rgba(255,255,255,.07); }
[data-theme="light"] .cs-section-icon,
[data-theme="light"] .cs-section-icon.blue,
[data-theme="light"] .cs-section-icon.cyan,
[data-theme="light"] .cs-section-icon.green,
[data-theme="light"] .cs-section-icon.orange,
[data-theme="light"] .cs-section-icon.purple,
[data-theme="light"] .cs-section-icon.gray { background: var(--subtle-bg); }
.cs-section-icon svg,
.cs-section-icon.blue svg,
.cs-section-icon.cyan svg,
.cs-section-icon.green svg,
.cs-section-icon.orange svg,
.cs-section-icon.purple svg,
.cs-section-icon.gray svg { stroke: var(--t2); }
.cs-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.2px;
}
.cs-section-subtitle {
    font-size: 12px;
    color: var(--t3);
    margin-top: 2px;
    font-weight: 500;
}
.cs-section-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.cs-section-badge.green { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.cs-section-badge.yellow { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.cs-section-badge.blue { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.cs-section-badge.gray { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.cs-chevron {
    width: 18px;
    height: 18px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
    transition: transform .25s ease;
    transform: rotate(-90deg);
}
.cs-chevron.open { transform: rotate(0deg); }
.cs-section-body {
    display: block;
    padding: 0 24px;
    box-sizing: border-box;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, padding .35s ease;
}
.cs-section-body.open {
    max-height: 2000px;
    opacity: 1;
    padding: 20px 24px;
}
.cs-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.cs-form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
.cs-form-group {
    display: flex;
    flex-direction: column;
}
.cs-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--t2);
    margin-bottom: 6px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.cs-hint {
    font-size: 11px;
    color: var(--t3);
    margin-top: 6px;
    line-height: 1.5;
}
.cs-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(0,212,255,.05);
    border: 1px solid rgba(0,212,255,.15);
    border-left-width: 3px;
    border-radius: var(--rd-sm);
    margin-bottom: 20px;
    font-size: 12px;
    color: var(--t2);
    line-height: 1.5;
}
.cs-info-box svg { width: 16px; height: 16px; stroke: var(--t2); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }
.cs-textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.6;
    width: 100%;
    box-sizing: border-box;
}
.cs-textarea-lg { min-height: 160px; }
.cs-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 8px;
}
.cs-save-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.cs-divider { height: 1px; background: var(--bdr); margin: 16px 0; }
@media (max-width: 1024px) {
    .cs-form-grid { grid-template-columns: repeat(2, 1fr); }
    .cs-form-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cs-form-grid, .cs-form-grid-4 { grid-template-columns: 1fr; }
    .cs-save-btn { width: 100%; justify-content: center; }
    .cs-section-body { padding: 16px; }
}

/* ============================================
   EMAIL TEMPLATES — Enhanced UX (2026 patterns)
   ============================================ */

/* Help banner — contextual help */
.eml-help-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 20px 16px;
    background: rgba(0,212,255,.05);
    border: 1px solid rgba(0,212,255,.12);
    border-left: 3px solid var(--acc);
    border-radius: var(--rd);
    animation: fu .4s ease both;
}
.eml-help-banner.hidden { display: none; }
.eml-help-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,212,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.eml-help-icon svg { stroke: var(--t2); }
.eml-help-text {
    flex: 1;
    font-size: 13px;
    color: var(--t2);
    line-height: 1.65;
}
.eml-help-text strong { color: var(--t1); font-weight: 600; }
.eml-help-text em { color: var(--t1); font-style: normal; font-weight: 600; }
.eml-help-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    color: var(--t3);
    transition: all .15s;
}
.eml-help-close:hover { background: rgba(255,255,255,.08); color: var(--t1); }

/* Search toolbar */
.eml-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px 16px;
}
.eml-search-wrap {
    position: relative;
    flex: 1;
    max-width: 360px;
}
.eml-search-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    stroke: var(--t3);
    pointer-events: none;
    transition: stroke .15s;
}
.eml-search-wrap:focus-within svg { stroke: var(--t2); }
.eml-search {
    width: 100%;
    padding: 10px 14px 10px 40px;
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    background: var(--bg2);
    color: var(--t1);
    font-size: 13px;
    transition: all .2s;
    box-sizing: border-box;
}
.eml-search:focus {
    outline: none;
    border-color: var(--t1);
    box-shadow: 0 0 0 3px rgba(0,212,255,.12);
    background: var(--bg);
}
.eml-search::placeholder { color: var(--t3); }
.eml-toolbar-stats {
    font-size: 12px;
    color: var(--t3);
    white-space: nowrap;
}

/* Skeleton loaders */
.eml-skeleton-list { padding: 0 20px; }
.eml-skeleton-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    margin-bottom: 8px;
    animation: eml-pulse 1.5s ease-in-out infinite;
}
.eml-skeleton-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rd-sm);
    background: rgba(255,255,255,.06);
    flex-shrink: 0;
}
.eml-skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.eml-skeleton-line {
    height: 10px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
}
.eml-skeleton-line.w30 { width: 30%; }
.eml-skeleton-line.w40 { width: 40%; }
.eml-skeleton-line.w50 { width: 50%; }
.eml-skeleton-line.w60 { width: 60%; }
.eml-skeleton-line.w70 { width: 70%; }
.eml-skeleton-badge {
    width: 72px;
    height: 22px;
    border-radius: 20px;
    background: rgba(255,255,255,.06);
    flex-shrink: 0;
}
@keyframes eml-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}

/* Active section highlight */
.cs-section.active-editing {
    border-color: rgba(0,212,255,.25);
    box-shadow: 0 0 0 1px rgba(0,212,255,.08), var(--sh);
}

/* Save button pulse on dirty */
.eml-btn-save.dirty {
    animation: eml-save-pulse 2s ease-in-out infinite;
}
@keyframes eml-save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0,212,255,.3); }
    50% { box-shadow: 0 0 0 6px rgba(0,212,255,0); }
}

/* Success check animation */
.eml-success-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--t1);
    font-size: 12px;
    font-weight: 600;
    animation: eml-check-in .3s ease both;
}
@keyframes eml-check-in {
    from { opacity: 0; transform: scale(.8) translateY(4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Form sections with toggle — improved */
.eml-form-section {
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    margin-bottom: 10px;
    overflow: hidden;
    transition: all .2s;
}
.eml-form-section:hover { border-color: rgba(255,255,255,.12); }
.eml-form-section.hidden-section { opacity: .4; }
.eml-form-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255,255,255,.02);
    cursor: default;
}
.eml-form-section-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
}
.eml-form-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
    background: none;
    border: 1px solid var(--bdr);
    transition: all .15s;
}
.eml-form-section-toggle:hover { border-color: var(--t1); color: var(--t1); }
.eml-form-section textarea {
    border: none;
    border-top: 1px solid var(--bdr);
    border-radius: 0;
    background: transparent;
}

/* Variables chip bar */
.eml-vars-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: rgba(0,212,255,.04);
    border: 1px solid rgba(0,212,255,.1);
    border-radius: var(--rd-sm);
    margin-bottom: 16px;
}
.eml-vars-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--t1);
    margin-right: 4px;
    white-space: nowrap;
}
.eml-var-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    padding: 3px 10px;
    background: var(--bg2);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    color: var(--t2);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.eml-var-chip:hover {
    border-color: var(--t1);
    color: var(--t1);
    background: rgba(0,212,255,.06);
}
.eml-var-chip:active { transform: scale(.95); }

/* ── Panneau latéral "Variables disponibles" (placeholders) ── */
.eml-form-with-vars { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; align-items: start; }
.eml-form-main { min-width: 0; }
.eml-vars-panel {
    position: sticky; top: 12px;
    background: var(--bg2);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    padding: 14px;
    max-height: calc(100vh - 80px); overflow-y: auto;
}
.eml-vars-panel-head { font-size: 12px; font-weight: 700; color: var(--t1); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.eml-vars-panel-hint { font-size: 11px; color: var(--t3); line-height: 1.5; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bdr); }
.eml-vars-panel-list { display: flex; flex-direction: column; gap: 8px; }
.eml-var-row { padding: 10px; border: 1px solid var(--bdr); border-radius: var(--rd-sm); background: var(--bg); cursor: pointer; transition: all .15s; }
.eml-var-row:hover { border-color: var(--t1); background: rgba(0,212,255,.04); }
.eml-var-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eml-var-token { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--t1); background: rgba(0,212,255,.08); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.eml-var-row-head { min-width: 0; }
.eml-var-insert { font-size: 10px; font-weight: 600; color: var(--t3); text-transform: uppercase; letter-spacing: .05em; }
.eml-var-row:hover .eml-var-insert { color: var(--t1); }
.eml-var-desc { font-size: 12px; color: var(--t2); line-height: 1.45; margin-top: 6px; }
.eml-var-example { font-size: 11px; color: var(--t3); margin-top: 4px; }
.eml-var-example span { color: var(--t2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; word-break: break-word; }
/* Sous 1024px (laptops étroits, tablettes, mobile), les variables passent SOUS le
   formulaire en pleine largeur au lieu d'une colonne latérale serrée. */
@media (max-width: 1024px) {
    .eml-form-with-vars { grid-template-columns: 1fr; }
    .eml-vars-panel { position: static; max-height: none; }
    .eml-vars-panel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; }
}
@media (max-width: 640px) {
    .eml-vars-panel-list { grid-template-columns: 1fr; }
}

/* Action buttons row */
.eml-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--bdr);
}
.eml-actions .btn { font-size: 12px; }

/* Keyboard shortcuts hint */
.eml-shortcuts-hint {
    position: fixed;
    bottom: 16px;
    right: 24px;
    padding: 8px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    font-size: 11px;
    color: var(--t3);
    z-index: 50;
    opacity: 0;
    transform: translateY(8px);
    transition: all .3s ease;
    pointer-events: none;
}
.eml-shortcuts-hint.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.eml-shortcuts-hint kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-family: inherit;
    background: var(--bg2);
    border: 1px solid var(--bdr);
    border-radius: 4px;
    color: var(--t2);
    margin: 0 1px;
}

/* No results state */
.eml-no-results {
    padding: 60px 20px;
    text-align: center;
    animation: fu .3s ease both;
}
.eml-no-results-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
}
.eml-no-results-icon svg { stroke: var(--t3); }
.eml-no-results-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 6px;
}
.eml-no-results-desc {
    font-size: 13px;
    color: var(--t3);
}

/* Split preview layout (for signature) */
.eml-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.eml-split-pane-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}

/* Character counter */
.eml-char-count {
    font-size: 11px;
    color: var(--t3);
    text-align: right;
    margin-top: 4px;
    transition: color .15s;
}
.eml-char-count.warn { color: var(--t1); }
.eml-char-count.over { color: var(--r); }

/* Group header with count */
.eml-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: rgba(0,212,255,.12);
    color: var(--t1);
    font-size: 10px;
    font-weight: 700;
    margin-left: 8px;
}

@media (max-width: 768px) {
    .eml-toolbar { flex-direction: column; align-items: stretch; }
    .eml-search-wrap { max-width: none; }
    .eml-split { grid-template-columns: 1fr; }
    .eml-shortcuts-hint { display: none; }
    .eml-help-banner { margin: 0 12px 12px; }
}

/* Grilles 2/3 colonnes (utilisées dans les panels et les anciens accordéons) */
.eml-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.eml-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* Cards de formulaire (dans les panels Profil / Paramètres) */
.eml-form-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: var(--sp-lg);
    margin-bottom: var(--sp-md);
}
.eml-form-card-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    margin-bottom: var(--sp-md);
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid var(--bdr);
}

/* Vue panel (catégorie / profil / signatures / paramètres) */
.eml-panel-view { padding-bottom: var(--sp-2xl); }

/* ── Paramètres avancés (panel Settings du widget email-settings) ──
   Cartes .rmd-card empilées, champs pleine largeur, interrupteurs expliqués. */
/* ── Barre de sous-onglets de la page Emails ──
   Scrollable horizontalement, jamais coupée à 375px (règle tabs du design system). */
.eml-subnav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--sp-xs);
    margin-bottom: var(--sp-lg);
    padding-bottom: var(--sp-sm);
    border-bottom: 1px solid var(--bdr);
}
.eml-subnav::-webkit-scrollbar { display: none; }
.eml-subnav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--rd-sm);
    background: transparent;
    color: var(--t3);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.eml-subnav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.eml-subnav-item:hover { color: var(--t1); background: var(--subtle-bg, rgba(255,255,255,.04)); }
.eml-subnav-item.active { color: var(--t1); background: rgba(0,212,255, .12); }
.eml-subnav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--rd-pill);
    background: var(--r);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
}

.eml-set-stack { display: flex; flex-direction: column; gap: var(--sp-lg); }
.eml-set-stack form { display: flex; flex-direction: column; gap: var(--sp-lg); }
.eml-set-actions { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .eml-set-actions .btn { width: 100%; justify-content: center; } }
.eml-set-intro {
    font-size: var(--fs-base);
    color: var(--t3);
    line-height: 1.55;
    margin: 0 0 var(--sp-md);
}
/* Dans une carte de réglages, un champ occupe toute la largeur disponible
   (le .si nu reste à 240px et laisse une carte à moitié vide). */
.eml-set-body .si { width: 100%; box-sizing: border-box; }
.eml-set-body .field-group:last-child { margin-bottom: var(--sp-md); }
.eml-set-sub {
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
    margin: var(--sp-lg) 0 var(--sp-md);
    padding-top: var(--sp-md);
    border-top: 1px solid var(--bdr);
}
/* Renvoi vers un réglage qui vit dans un autre onglet (pas un champ de ce form). */
.eml-set-note {
    font-size: var(--fs-sm);
    color: var(--t3);
    line-height: 1.55;
    margin: 0;
}
.eml-wf-list { display: flex; flex-direction: column; margin-bottom: var(--sp-md); }
.eml-wf-row { padding: var(--sp-md) 0; border-bottom: 1px solid var(--bdr); }
.eml-wf-row:first-child { padding-top: 0; }
.eml-wf-row:last-child { border-bottom: 0; }
.eml-wf-row .field-checkbox { align-items: flex-start; font-weight: 600; }
.eml-wf-desc {
    font-size: var(--fs-sm);
    color: var(--t3);
    line-height: 1.55;
    margin-top: var(--sp-xs);
    padding-left: 24px;
}

/* ── PAGE EMAILS (views/emails.php) — responsive ── */
@media (max-width: 640px) {
    /* Group headers : masque le texte latéral qui déborde */
    .eml-group-header { flex-wrap: wrap; gap: 6px; }
    .eml-group-sub { display: none; }

    /* Accordéons : le search descend sous le titre au lieu de tout écraser */
    details.eml-card > summary { flex-wrap: wrap; padding: 12px 14px; gap: 8px; }
    details.eml-card > summary .eml-card-actions { order: 3; width: 100%; }
    details.eml-card > summary .eml-search-wrap { max-width: none; flex: 1; }
    details.eml-card > summary #eml-search { width: 100% !important; box-sizing: border-box; }

    /* Body des accordéons : padding réduit */
    details.eml-card > .eml-card-body { padding: 14px; }

    /* Grilles 2-3 colonnes → 1 colonne */
    .eml-grid-2, .eml-grid-3 { grid-template-columns: 1fr; }

    /* Boutons d'action du template editor (Enregistrer/Aperçu/Réinitialiser) */
    .eml-actions { flex-wrap: wrap; gap: 6px; }

    /* Signatures : carte en colonne, boutons wrappés */
    .sig-card { flex-direction: column !important; gap: 10px !important; }
    .sig-card-btns { flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
    details.eml-card > summary { padding: 10px 12px; }
    details.eml-card > summary .eml-card-title { font-size: 13px; }
    details.eml-card > summary .eml-card-sub { font-size: 11px; }
    details.eml-card > .eml-card-body { padding: 12px; }
}

/* ── EMAILS DASHBOARD (nouveau layout catégories) ────────────────────────── */
/* ── Vue Modèles refondue (liste plate, lignes ds-row) ───────────────────── */
/* En-tête léger (titre + petit bouton à droite), jamais pleine largeur. */
.eml-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 16px;
    flex-wrap: wrap;
}
.eml-head-l { min-width: 0; }
.eml-head-title { font-size: var(--fs-lg); font-weight: 700; color: var(--t1); }
.eml-head-sub { font-size: var(--fs-sm); color: var(--t3); margin-top: 2px; }
.eml-head-r { flex-shrink: 0; display: flex; gap: 8px; }
@media (max-width: 640px) {
    .eml-head { margin-bottom: var(--sp-md); }
    .eml-head-r { width: 100%; }
    .eml-head-r .btn { flex: 1; justify-content: center; }
}

/* Filtres : chips scrollables (mobile-friendly). */
.eml-tpl-filter {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 16px;
}
.eml-tpl-filter::-webkit-scrollbar { display: none; }
.eml-tpl-chip {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--bdr);
    background: var(--card);
    color: var(--t2);
    border-radius: var(--rd-pill);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.eml-tpl-chip:hover { border-color: var(--t1); color: var(--t1); }
.eml-tpl-chip.active { background: var(--primary-soft); border-color: var(--ba); color: var(--t1); }
.eml-tpl-chip-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--rd-pill);
    background: var(--inp);
    color: var(--t3);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.eml-tpl-chip.active .eml-tpl-chip-n { background: rgba(0,212,255,.18); color: var(--t1); }

/* Liste = carte ds-card contenant des ds-row compactes. */
.eml-tpl-listcard { padding: 0; }
.eml-tpl-row { cursor: default; }
.eml-tpl-row .ds-row-ic, .eml-tpl-row .ds-row-body { cursor: pointer; }
.eml-tpl-titleline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.eml-tpl-name {
    font-size: var(--fs-md); font-weight: 600; color: var(--t1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.eml-tpl-titleline .ds-row-flag { flex-shrink: 0; }
.ds-row-flag.is-pink { background: var(--subtle-bg); color: var(--t1); }
.ds-row-flag.eml-flag-muted { background: rgba(255,255,255,.07); color: var(--t3); }
[data-theme="light"] .ds-row-flag.eml-flag-muted { background: var(--subtle-bg); }
.eml-tpl-acts { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Groupe (type à plusieurs variantes) : ligne principale dépliable + sous-lignes. */
.eml-tpl-grouprow { cursor: pointer; }
.eml-tpl-grouprow .ds-row-ic, .eml-tpl-grouprow .ds-row-body { cursor: pointer; }
.eml-tpl-count { font-size: var(--fs-xs); color: var(--t3); font-weight: 600; white-space: nowrap; }
.eml-tpl-chev { color: var(--t3); transition: transform .15s; flex-shrink: 0; }
.eml-tpl-grouprow.is-open .eml-tpl-chev { transform: rotate(180deg); }
.eml-tpl-subrow { background: rgba(255,255,255,.02); }
[data-theme="light"] .eml-tpl-subrow { background: rgba(15,23,42,.02); }
.eml-tpl-subrail { width: 40px; flex-shrink: 0; align-self: stretch; position: relative; }
.eml-tpl-subrail::before { content: ''; position: absolute; left: 19px; top: -10px; bottom: 50%; width: 2px; background: var(--bdr); }
.eml-tpl-subrail::after { content: ''; position: absolute; left: 19px; top: 50%; width: 12px; height: 2px; background: var(--bdr); }
.eml-tpl-subrow .ds-row-body { cursor: pointer; }
.eml-tpl-addrow { cursor: pointer; }
.eml-tpl-addvar { font-size: var(--fs-sm); font-weight: 600; color: var(--t1); }
.eml-tpl-foot-label {
    margin: 28px 0 12px;
    font-size: var(--fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--t3);
}
.eml-edit-advanced { margin-top: 20px; border-top: 1px solid var(--bdr); padding-top: 16px; }
.eml-edit-advanced > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--t2); list-style: none; }
.eml-edit-advanced > summary::-webkit-details-marker { display: none; }
.eml-edit-advanced > summary::before { content: '>'; margin-right: 6px; color: var(--t3); }
.eml-edit-advanced[open] > summary::before { content: 'v'; }
.eml-edit-advanced-body { margin-top: 12px; }
@media (max-width: 640px) {
    .eml-tpl-row { flex-wrap: wrap; }
    .eml-tpl-acts { width: 100%; justify-content: flex-start; margin-top: 8px; padding-left: 52px; }
}

.eml-db-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
.eml-db-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.eml-db-card:hover { border-color: var(--t1); box-shadow: var(--shadow-md); }
.eml-db-card-inner { padding: 20px; display: flex; flex-direction: column; gap: 14px; height: 100%; box-sizing: border-box; }
.eml-db-icon { flex-shrink: 0; }
.eml-db-body { flex: 1; min-width: 0; }
.eml-db-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 6px; }
.eml-db-desc { font-size: 12px; color: var(--t3); line-height: 1.5; }
.eml-db-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--bdr); }
.eml-db-secondary { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--bdr); margin-top: 8px; }

/* Panels (catégorie / profil / signatures / paramètres) */
.eml-panel-back { margin-bottom: 20px; }
.eml-panel-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--bdr); }
.eml-panel-header .cs-section-icon { width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0; }
.eml-panel-header .cs-section-icon svg { width: 26px; height: 26px; }
.eml-panel-section { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--bdr); }
.eml-panel-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.eml-panel-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--t3); margin-bottom: 16px; }

/* Responsive dashboard */
@media (max-width: 1024px) { .eml-db-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .eml-db-grid { grid-template-columns: 1fr; }
    .eml-db-secondary { flex-direction: column; }
    .eml-db-secondary .btn { width: 100%; justify-content: center; }
    .eml-panel-header { flex-wrap: wrap; gap: 12px; }
}

/* ============================================
   BENTO GRID — Dashboard KPIs
   ============================================ */
.dash-kpi-grid.bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
}
.dash-kpi-grid.bento .dash-kpi:first-child {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 188, 212, .06), rgba(0,212,255, .04));
    border: 1px solid rgba(0, 188, 212, .12);
}
.dash-kpi-grid.bento .dash-kpi:first-child .dash-kpi-value {
    font-size: 48px;
}
@media (max-width: 768px) {
    .dash-kpi-grid.bento {
        grid-template-columns: 1fr;
    }
    .dash-kpi-grid.bento .dash-kpi:first-child {
        grid-row: auto;
    }
    .dash-kpi-grid.bento .dash-kpi:first-child .dash-kpi-value {
        font-size: 36px;
    }
}

/* ============================================
   MOBILE FILTERS — Bottom Sheet
   ============================================ */
@keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@media (max-width: 768px) {
    .dashboard-filters {
        display: none;
    }
    .dashboard-filters.open {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg2);
        border-top: 1px solid var(--bdr);
        border-radius: 20px 20px 0 0;
        padding: 24px 20px;
        z-index: 1100;
        animation: slideUpSheet .3s ease;
        box-shadow: 0 -12px 40px rgba(0,0,0,.3);
    }
}

/* ============================================
   ACQUISITION WIZARD
   ============================================ */
.acq-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px 24px 24px;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    margin-bottom: var(--sp-md);
}
.acq-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    position: relative;
}
.acq-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition: all .3s ease;
    flex-shrink: 0;
}
.acq-step-circle.done {
    background: var(--btn-p-bg); color: var(--btn-p-ink); border-color: var(--btn-p-bg);
    color: #fff;
}
.acq-step-circle.active {
    background: var(--grad);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0,212,255,.15), 0 4px 12px rgba(0,212,255,.2);
}
.acq-step-circle.pending {
    background: var(--subtle-bg);
    color: var(--t3);
    border: 2px solid var(--bdr);
}
.acq-step-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s;
}
.acq-step-desc {
    font-size: 10px;
    color: var(--t3);
    white-space: nowrap;
    max-width: 120px;
    text-align: center;
}
.acq-step-line {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    margin: 19px 16px 0;
    max-width: 180px;
    transition: background .3s;
}
.acq-step-line.done { background: var(--acc); }
.acq-step-line.pending { background: var(--bdr); }

/* Split layout */
.acq-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
    animation: fu .3s ease both;
}
.acq-panel {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 28px 24px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}
.acq-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.acq-panel-title svg {
    width: 20px;
    height: 20px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.acq-panel-desc {
    font-size: 13px;
    color: var(--t3);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Empty state preview */
.acq-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    color: var(--t3);
    gap: 12px;
}
.acq-empty svg {
    width: 56px;
    height: 56px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 1.2;
    opacity: .35;
}
.acq-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t2);
}
.acq-empty-desc {
    font-size: 12px;
    color: var(--t3);
    max-width: 260px;
    line-height: 1.5;
}

/* Business card in preview */
.acq-biz-card {
    border: 1px solid rgba(0,212,255,.2);
    border-radius: var(--rd);
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(0,212,255,.04);
    animation: fu .3s ease both;
}
.acq-biz-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--rd-sm);
    background: var(--btn-p-bg); color: var(--btn-p-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}
.acq-biz-info { flex: 1; min-width: 0; }
.acq-biz-name { font-size: 15px; font-weight: 700; color: var(--t1); }
.acq-biz-addr { font-size: 12px; color: var(--t3); margin-top: 3px; }
.acq-biz-cat { font-size: 11px; color: var(--t2); margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; }
.acq-biz-rating { margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.acq-biz-rating-val { font-size: 14px; font-weight: 700; color: var(--o); }
.acq-biz-rating-count { font-size: 11px; color: var(--t3); }

/* Keyword tags */
.acq-kw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.acq-kw-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t1);
    animation: fu .2s ease both;
}
.acq-kw-tag button {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    transition: color .15s;
}
.acq-kw-tag button:hover { color: var(--r); }

/* Search input enhanced */
.acq-search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.acq-search-wrap svg.acq-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
    z-index: 1;
}
.acq-search-wrap input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    font-size: 14px;
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    color: var(--t1);
    transition: border-color .2s, box-shadow .2s;
}
.acq-search-wrap input:focus {
    outline: none;
    border-color: var(--t1);
    box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
.acq-search-wrap input::placeholder { color: var(--t3); }

/* Step 2 keyword input */
.acq-kw-input-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.acq-kw-input-row input {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
}
.acq-kw-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.acq-kw-suggestion {
    padding: 5px 12px;
    font-size: 11px;
    color: var(--t3);
    border: 1px dashed var(--bdr);
    border-radius: 16px;
    cursor: pointer;
    transition: all .15s;
}
.acq-kw-suggestion:hover {
    border-color: var(--t1);
    color: var(--t1);
    background: rgba(0,212,255,.05);
}

/* Responsive */
@media (max-width: 1024px) {
    .acq-split {
        grid-template-columns: 1fr;
    }
    .acq-panel { min-height: auto; }
    .acq-stepper { flex-wrap: wrap; gap: 8px; padding: 16px; }
    .acq-step-desc { display: none; }
    .acq-step-line { margin: 19px 8px 0; }
}
@media (max-width: 640px) {
    .acq-panel { padding: 20px 16px; }
    .acq-step-line { max-width: 60px; }
}

/* ============================================================
   ACQUISITION — KPI Cards (Bento micro-grid)
   ============================================================ */
.acq-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: var(--sp-md);
}
.acq-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    cursor: pointer;
    transition: border-color var(--tr), background var(--tr), transform .15s ease;
    position: relative;
    overflow: hidden;
}
.acq-kpi::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--t1);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.acq-kpi:hover {
    border-color: rgba(0,212,255,.25);
    transform: translateY(-1px);
}
.acq-kpi:hover::before { opacity: .03; }
.acq-kpi:active { transform: translateY(0); }
.acq-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--subtle-bg);
}
.acq-kpi-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 2;
}
.acq-kpi-icon.acq-kpi-new { background: rgba(0,212,255,.1); }
.acq-kpi-icon.acq-kpi-new svg { stroke: var(--t2); }
.acq-kpi-icon.acq-kpi-success { background: rgba(34,211,153,.08); }
.acq-kpi-icon.acq-kpi-success svg { stroke: var(--g); }
.acq-kpi-icon.acq-kpi-acc { background: rgba(0,212,255,.08); }
.acq-kpi-icon.acq-kpi-acc svg { stroke: var(--t2); }
.acq-kpi-icon.acq-kpi-warn { background: var(--subtle-bg); }
.acq-kpi-icon.acq-kpi-warn svg { stroke: var(--t2); }
.acq-kpi-body { flex: 1; min-width: 0; }
.acq-kpi-val {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: var(--t1);
    letter-spacing: -1px;
    line-height: 1.2;
}
.acq-kpi-label {
    font-size: 11px;
    color: var(--t3);
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* ============================================================
   ACQUISITION — Breadcrumb
   ============================================================ */
.acq-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--sp-sm);
    font-size: 12px;
    color: var(--t3);
}
.acq-bc-sep {
    width: 12px;
    height: 12px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 2;
    opacity: .5;
    flex-shrink: 0;
}
.acq-bc-root {
    color: var(--t3);
    font-weight: 500;
}
.acq-bc-current {
    color: var(--t2);
    font-weight: 600;
}
.acq-bc-sub {
    color: var(--t1);
    font-weight: 600;
}

/* ============================================================
   ACQUISITION — Section Navigation (2 main sections)
   ============================================================ */
.acq-sections-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: var(--sp-md);
}
@media (max-width: 640px) {
    .acq-sections-nav { grid-template-columns: 1fr; }
}
.acq-section-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--card);
    border: 2px solid var(--bdr);
    border-radius: var(--rd);
    cursor: pointer;
    transition: all .25s ease;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.acq-section-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--acc);
    opacity: 0;
    transition: opacity .25s ease;
}
.acq-section-btn:hover {
    border-color: rgba(0,212,255,.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.acq-section-btn:hover::before { opacity: .03; }
.acq-section-btn.active {
    border-color: var(--t1);
    background: rgba(0,212,255,.04);
    box-shadow: 0 0 0 1px rgba(0,212,255,.15), 0 4px 16px rgba(0,0,0,.08);
}
.acq-section-btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(0,212,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .25s ease;
}
.acq-section-btn.active .acq-section-btn-icon {
    background: rgba(0,212,255,.15);
}
.acq-section-btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 2;
}
.acq-section-btn-text {
    flex: 1;
    min-width: 0;
}
.acq-section-btn-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 3px;
}
.acq-section-btn.active .acq-section-btn-title { color: var(--t1); }
.acq-section-btn-desc {
    font-size: 11px;
    color: var(--t3);
    line-height: 1.4;
}
.acq-section-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    background: var(--subtle-bg);
    color: var(--t2);
    border-radius: 8px;
    flex-shrink: 0;
}
.acq-section-btn.active .acq-section-btn-count {
    background: rgba(0,212,255,.12);
    color: var(--t1);
}

/* ============================================================
   ACQUISITION — Sub-tabs (within each section)
   ============================================================ */
.acq-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--sp-md);
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
}
.acq-sub-tabs::-webkit-scrollbar { display: none; }
.acq-sub-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    background: transparent;
    border: none;
    border-radius: var(--rd-sm);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.acq-sub-tab svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.acq-sub-tab:hover {
    color: var(--t1);
    background: var(--subtle-bg);
}
.acq-sub-tab.active {
    color: var(--t1);
    background: rgba(0,212,255,.08);
}
.acq-sub-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0,212,255,.12);
    color: var(--t1);
    border-radius: 9px;
}

/* ============================================================
   ACQUISITION — Tab Navigation (legacy, kept for compat)
   ============================================================ */
.acq-tabs {
    display: none; /* Hidden — replaced by sections nav + sub-tabs */
    gap: 4px;
    margin-bottom: var(--sp-md);
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 4px;
}
.acq-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t3);
    background: transparent;
    border: none;
    border-radius: var(--rd-sm);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.acq-tab svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.acq-tab:hover {
    color: var(--t1);
    background: var(--subtle-bg);
}
.acq-tab.active {
    color: var(--t1);
    background: rgba(0,212,255,.08);
}
.acq-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(0,212,255,.12);
    color: var(--t1);
    border-radius: 10px;
}

/* ============================================================
   ACQUISITION — Credits badge enhanced
   ============================================================ */
.acq-credits {
    transition: all .2s ease;
}
.acq-credits:hover {
    border-color: rgba(0,212,255,.3);
    background: rgba(0,212,255,.06);
}
.acq-credits.low {
    border-color: var(--subtle-bg);
    color: var(--t1);
}
.acq-credits.empty {
    border-color: var(--rbg);
    color: var(--r);
}

/* ============================================================
   ACQUISITION — Keyboard shortcuts modal
   ============================================================ */

/* ============================================================
   ACQUISITION — Skeleton loaders
   ============================================================ */
.acq-skeleton { padding: 20px 0; }
.skel-bar {
    height: 16px;
    background: linear-gradient(90deg, var(--subtle-bg) 25%, rgba(255,255,255,.06) 50%, var(--subtle-bg) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.5s infinite ease-in-out;
    border-radius: 8px;
    margin-bottom: 12px;
}
.skel-w70 { width: 70%; }
.skel-w40 { width: 40%; }
.acq-skel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}
.skel-card {
    height: 300px;
    background: linear-gradient(90deg, var(--subtle-bg) 25%, rgba(255,255,255,.06) 50%, var(--subtle-bg) 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.5s infinite ease-in-out;
    border-radius: var(--rd);
}
@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   ACQUISITION — Keyboard hint button
   ============================================================ */
.acq-kbd-hint {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
}

/* ============================================================
   ACQUISITION — Prospect cards enhanced (micro-interactions)
   ============================================================ */
.acq-prospect-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px 20px;
    cursor: pointer;
    transition: all .2s ease;
    position: relative;
    overflow: hidden;
}
.acq-prospect-card:hover {
    border-color: rgba(0,212,255,.2);
    background: var(--card-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.acq-prospect-card:active { transform: translateY(0); }
.acq-prospect-card .f-chevron {
    transition: transform .2s;
}
.acq-prospect-card:hover .f-chevron {
    transform: translateX(3px);
    color: var(--t1);
}

/* Status dot indicator */
.acq-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.acq-status-dot.new { background: var(--t3); }
.acq-status-dot.scanned { background: var(--t1); }
.acq-status-dot.audited { background: var(--g); }
.acq-status-dot.contacted { background: var(--acc); box-shadow: 0 0 0 3px rgba(0,212,255,.15); }

/* ============================================================
   ACQUISITION — Empty states pédagogiques
   ============================================================ */
.acq-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    gap: 16px;
}
.acq-empty-state svg {
    width: 64px;
    height: 64px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 1;
    opacity: .3;
}
.acq-empty-state .acq-empty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
}
.acq-empty-state .acq-empty-desc {
    font-size: 13px;
    color: var(--t3);
    max-width: 380px;
    line-height: 1.6;
}
.acq-empty-state .acq-empty-action {
    margin-top: 8px;
}

/* ============================================================
   ACQUISITION — Inline helper text
   ============================================================ */
.acq-helper {
    font-size: 11px;
    color: var(--t3);
    margin-top: 4px;
    line-height: 1.4;
}
.acq-helper-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--subtle-bg);
    border: 1px solid var(--bdr);
    font-size: 9px;
    font-weight: 700;
    color: var(--t3);
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
}
.acq-helper-icon:hover {
    border-color: var(--t1);
    color: var(--t1);
}

/* ============================================================
   ACQUISITION — Toast with undo pattern
   ============================================================ */
.acq-toast-undo {
    display: inline-block;
    margin-left: 12px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
    background: rgba(0,212,255,.12);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: underline;
}

/* ============================================================
   ACQUISITION — Scan progress (optimistic UI feel)
   ============================================================ */
.acq-scan-progress {
    background: var(--card);
    border: 1px solid rgba(0,212,255,.15);
    border-radius: var(--rd);
    padding: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.acq-scan-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--t1);
    animation: acq-scan-pulse 2s ease-in-out infinite;
}
@keyframes acq-scan-pulse {
    0%, 100% { opacity: .4; }
    50% { opacity: 1; }
}
.acq-scan-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    position: relative;
}
.acq-scan-spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid rgba(0,212,255,.12);
    border-top-color: var(--t1);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
.acq-progress-bar {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
    margin: 16px 0 8px;
}
.acq-progress-fill {
    height: 100%;
    background: var(--t1);
    border-radius: 4px;
    transition: width .8s ease;
}

/* ============================================================
   ACQUISITION — Detail view sections (bento layout)
   ============================================================ */
.acq-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.acq-detail-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    padding: 16px;
    transition: border-color .2s;
}
.acq-detail-card:hover {
    border-color: rgba(0,212,255,.15);
}
.acq-detail-card-label {
    font-size: 11px;
    color: var(--t3);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.acq-detail-card-val {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

/* ============================================================
   ACQUISITION — Score ring (animated)
   ============================================================ */
.acq-score-ring {
    width: 100px;
    height: 100px;
    position: relative;
}
.acq-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.acq-score-ring circle {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
}
.acq-score-ring .ring-bg { stroke: rgba(255,255,255,.06); }
.acq-score-ring .ring-fill {
    stroke-dasharray: 283;
    transition: stroke-dashoffset 1s ease;
}
.acq-score-ring-val {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    line-height: 1;
}
.acq-score-ring-label {
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 2px;
}

/* ============================================================
   ACQUISITION — Responsive
   ============================================================ */
@media (max-width: 1280px) {
    .acq-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .acq-kpis { grid-template-columns: repeat(2, 1fr); }
    .acq-kpis .acq-kpi:first-child { grid-column: span 2; }
    .acq-tabs { overflow-x: auto; }
}
@media (max-width: 480px) {
    .acq-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
    .acq-kpis .acq-kpi:first-child { grid-column: span 2; }
    .acq-kpi { padding: 12px; }
    .acq-kpi-val { font-size: 16px; }
    .acq-tab { padding: 8px 14px; font-size: 12px; }
}

/* ============================================================
   ZONE SCAN — Prospection automatique par zone
   ============================================================ */

.zs-form {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 24px;
    max-width: 720px;
}
.zs-form-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.zs-form-desc {
    font-size: 13px;
    color: var(--t3);
    line-height: 1.5;
    margin-bottom: 20px;
}
.zs-field {
    margin-bottom: 16px;
}
.zs-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 6px;
}
.zs-cat-count {
    font-weight: 400;
    color: var(--t3);
}
.zs-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
}
.zs-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--bdr);
    border-radius: 8px;
    font-size: 13px;
    color: var(--t2);
    cursor: pointer;
    transition: all .15s;
    user-select: none;
}
.zs-cat-item:hover {
    border-color: rgba(0,212,255,.3);
    color: var(--t1);
}
.zs-cat-item.checked {
    border-color: var(--t1);
    background: rgba(0,212,255,.06);
    color: var(--t1);
}
.zs-cat-item input[type="checkbox"] {
    accent-color: var(--t1);
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.zs-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--bdr);
    margin-top: 8px;
}
.zs-cost {
    font-size: 13px;
    color: var(--t2);
}
.zs-cost-label { color: var(--t3); }
.zs-cost-val { font-weight: 700; color: var(--t1); }
.zs-cost-val.zs-cost-over { color: var(--r); }
.zs-cost-remaining { font-size: 12px; color: var(--t3); }

/* Progress */
.zs-progress-wrap {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 40px 32px;
    max-width: 520px;
    margin: 40px auto;
    text-align: center;
}
.zs-progress-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 20px;
}
.zs-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}
.zs-progress-fill {
    height: 100%;
    background: var(--t1);
    border-radius: 4px;
    transition: width .5s ease;
}
.zs-progress-status {
    font-size: 13px;
    color: var(--t2);
    margin-bottom: 6px;
}
.zs-progress-stats {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 16px;
}
.zs-spinner {
    display: flex;
    justify-content: center;
}

/* KPIs */
.zs-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.zs-kpi {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    padding: 14px;
    text-align: center;
}
.zs-kpi-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--t1);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.zs-kpi-label {
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px;
}
.zs-kpi-active {
    border-color: var(--t1);
    background: rgba(0,212,255,.05);
}
.zs-kpi:hover {
    border-color: rgba(0,212,255,.3);
}

/* Results list */
.zs-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.zs-result-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px;
    transition: border-color .15s;
}
.zs-result-card:hover {
    border-color: rgba(0,212,255,.2);
}
.zs-result-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.zs-result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--btn-p-bg); color: var(--btn-p-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}
.zs-result-info { flex: 1; min-width: 0; }
.zs-result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zs-result-meta {
    font-size: 12px;
    color: var(--t3);
}
.zs-result-rating {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
}
.zs-result-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 10px;
}
.zs-result-detail {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--t3);
}
.zs-result-detail svg {
    width: 13px;
    height: 13px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.zs-result-email {
    color: var(--t1);
    font-weight: 500;
}
.zs-result-email svg { stroke: var(--t2); }
.zs-result-actions {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--bdr);
}

/* History */
.zs-history {
    margin-top: 24px;
    max-width: 720px;
}
.zs-history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 8px;
}
.zs-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.zs-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s;
}
.zs-history-item:hover { border-color: rgba(0,212,255,.3); }
.zs-history-city {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    min-width: 80px;
}
.zs-history-meta {
    font-size: 12px;
    color: var(--t3);
    flex: 1;
}
.zs-badge-ok {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--subtle-bg);
    color: var(--t1);
    font-weight: 500;
}
.zs-badge-err {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--rbg);
    color: var(--r);
    font-weight: 500;
}
.zs-badge-run {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    background: rgba(0,212,255,.12);
    color: var(--t1);
    font-weight: 500;
}

/* Sub-tabs */
.zs-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--bdr);
    padding-bottom: 8px;
}
.zs-sub-tab {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t3);
    background: none;
    border: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    transition: all .15s;
}
.zs-sub-tab:hover { color: var(--t1); background: var(--subtle-bg); }
.zs-sub-tab.active {
    color: var(--t1);
    border-bottom: 2px solid var(--acc);
    font-weight: 600;
}

/* Action bar & selection */
.zs-result-card.zs-selected {
    border-color: var(--t1);
    background: rgba(0,212,255,.03);
}
.zs-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0 16px 16px;
    pointer-events: none;
}
.zs-action-bar-inner {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: var(--card);
    border: 1px solid var(--acc);
    border-radius: 14px;
    box-shadow: 0 -4px 24px rgba(0,0,0,.4);
    pointer-events: all;
}
.zs-action-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
}
.zs-action-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Modal */
.zs-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,.6);
    -webkit-backdrop-filter: var(--glass-scrim-blur);
    backdrop-filter: var(--glass-scrim-blur);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.zs-modal {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 16px;
    padding: 28px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.zs-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.zs-modal-desc {
    font-size: 13px;
    color: var(--t3);
    margin-bottom: 20px;
}
.zs-modal-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    display: block;
    margin-bottom: 6px;
}
.zs-modal-hint {
    font-size: 11px;
    color: var(--t3);
    line-height: 1.5;
    margin-bottom: 20px;
    padding: 10px 12px;
    background: rgba(0,212,255,.04);
    border-radius: 8px;
    border-left: 3px solid var(--acc);
}
.zs-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ============================================================
   ZONE SCAN — Filters bar
   ============================================================ */
.zs-filters-bar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
}
.zs-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.zs-filter-label {
    font-size: 11px;
    color: var(--t3);
    margin-right: 4px;
    font-weight: 600;
    min-width: 50px;
}

/* ============================================================
   ZONE SCAN — Email Preview Modal
   ============================================================ */
.zs-preview-modal {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
    overflow: hidden;
}
.zs-preview-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
}
#zs-preview-content {
    overflow-y: auto;
    flex: 1;
    padding: 20px 24px;
}
.zs-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bdr);
}
.zs-preview-email {
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    padding: 20px;
}
.zs-preview-subject {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bdr);
}
.zs-preview-body {
    margin-bottom: 16px;
}
.zs-preview-score {
    text-align: center;
    padding: 16px;
    background: var(--subtle-bg);
    border: 1px solid var(--bdr);
    border-radius: 14px;
}
.zs-preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--bdr);
    flex-shrink: 0;
    gap: 12px;
}
.zs-preview-nav {
    display: flex;
    gap: 6px;
}

/* Zone scan responsive */
@media (max-width: 768px) {
    .zs-cats-grid { grid-template-columns: repeat(2, 1fr); }
    .zs-kpis { grid-template-columns: repeat(2, 1fr); }
    .zs-footer { flex-direction: column; gap: 12px; align-items: stretch; }
    .zs-footer .btn { width: 100%; text-align: center; }
}
@media (max-width: 480px) {
    .zs-cats-grid { grid-template-columns: 1fr; }
    .zs-form { padding: 16px; }
    .zs-result-top { flex-wrap: wrap; }
}

/* ============================================================
   POSTS IA — Modern Redesign (Bento, Glass, Micro-interactions)
   ============================================================ */

/* --- Header --- */
.pia-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 20px 0;
    animation: fu .4s ease both;
}
.pia-header-left { min-width: 0; }
.pia-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.3px;
}
.pia-header-sub {
    font-size: 12px;
    color: var(--t3);
    margin-top: 2px;
}
.pia-header-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* Corps d'un panneau rendu sous panelHeader(). Meme gouttiere laterale que
   l'en-tete (20px desktop / 16px mobile), pour que titre et contenu soient
   alignes sur la meme verticale. A utiliser partout ou un widget place du
   contenu directement sous panelHeader(). */
.ui-panel-body { padding: 16px 20px 20px; }
@media (max-width: 768px) { .ui-panel-body { padding: 14px 16px 16px; } }

/* --- Barre de boutons d'action responsive (utilitaire global) --- */
/* Tout groupe de 3+ boutons d'action en ligne doit utiliser .action-bar :
   desktop = rangee (gap 8px) ; <=640px = grille 2x2 ; <=480px = colonne pleine largeur.
   Cf. CLAUDE.md (checklist UI). Les enfants directs .btn/button sont repartis automatiquement. */
.action-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    .action-bar { gap: var(--sp-xs); }
    .action-bar > .btn,
    .action-bar > button {
        flex: 1 1 calc(50% - var(--sp-xs));
        justify-content: center;
    }
}
@media (max-width: 480px) {
    .action-bar > .btn,
    .action-bar > button {
        flex: 1 1 100%;
    }
}
.pia-btn-ai {
    background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(138,43,226,.06)) !important;
    border-color: rgba(0,212,255,.2) !important;
}

/* --- Bento Stats Grid --- */
.pia-bento {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 10px;
    padding: 16px 20px;
    animation: fu .4s ease both;
    animation-delay: .05s;
}
.pia-bento-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all .25s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.pia-bento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    pointer-events: none;
}
.pia-bento-card:hover {
    border-color: rgba(255,255,255,.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 0 20px rgba(0,212,255,.05);
}
.pia-bento-active {
    border-color: var(--t1) !important;
    background: rgba(0,212,255,.04);
    box-shadow: 0 0 20px rgba(0,212,255,.08);
}
.pia-bento-total {
    background: linear-gradient(135deg, rgba(0,212,255,.06), var(--subtle-bg));
}
.pia-bento-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--rd-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
    margin-bottom: 2px;
}
.pia-bento-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    fill: none;
    stroke: var(--t2);
}
.pia-bento-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1;
    color: var(--t1);
}
.pia-bento-label {
    font-size: 10px;
    color: var(--t3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* --- Toolbar --- */
.pia-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bdr);
    flex-wrap: wrap;
    animation: fu .4s ease both;
    animation-delay: .1s;
}
.pia-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.pia-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Search */
.pia-search {
    position: relative;
    min-width: 160px;
    max-width: 260px;
    flex: 1;
}
.pia-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    stroke: var(--t3);
    fill: none;
    stroke-width: 2;
    pointer-events: none;
}
.pia-search-input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: 50px;
    color: var(--t1);
    font-size: 12px;
    font-family: 'Inter', sans-serif;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.pia-search-input:focus {
    border-color: var(--t1);
    box-shadow: 0 0 0 3px rgba(0,212,255,.08);
}
.pia-search-input::placeholder { color: var(--t3); }

/* Filter pills */
.pia-pills {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.pia-pill {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
    white-space: nowrap;
}
.pia-pill:hover { border-color: rgba(255,255,255,.15); color: var(--t1); }
.pia-pill.active {
    background: var(--primary-soft);
    border-color: var(--ba);
    color: var(--t1);
}

/* --- Post Cards Grid --- */
.pia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    animation: fu .4s ease both;
    animation-delay: .15s;
}
.pia-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px;
    transition: all .25s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pia-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    pointer-events: none;
}
.pia-card:hover {
    border-color: rgba(255,255,255,.10);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 0 16px rgba(0,212,255,.04);
}
.pia-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.pia-card-image {
    border-radius: var(--rd-sm);
    overflow: hidden;
    margin: 0 -4px;
}
.pia-card-image img {
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: var(--rd-sm);
    display: block;
}
/* La vignette est rognee : un clic ouvre l'apercu complet (visuel entier + texte) */
.pia-card-image--clickable { cursor: zoom-in; position: relative; }
.pia-card-image--clickable::after {
    content: "Voir en entier";
    position: absolute;
    right: var(--sp-sm);
    bottom: var(--sp-sm);
    padding: 4px 10px;
    border-radius: var(--rd-pill);
    background: rgba(11, 14, 20, .72);
    color: #fff;
    font-size: var(--fs-sm);
    pointer-events: none;
}
.pia-card-content {
    font-size: 13px;
    line-height: 1.65;
    color: var(--t2);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pia-card-expand {
    background: none;
    border: none;
    color: var(--t1);
    font-size: 11px;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 4px;
    font-family: inherit;
    transition: color .15s;
}
.pia-card-expand:hover { color: var(--t1); }

/* Footer: dates + actions */
.pia-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--subtle-line);
}
.pia-card-dates {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pia-card-date {
    font-size: 11px;
    color: var(--t3);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.pia-card-date--muted { font-size: 10px; opacity: .6; }

/* Action buttons */
.pia-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .2s;
}
.pia-card:hover .pia-card-actions { opacity: 1; }
.pia-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--rd-sm);
    background: rgba(255,255,255,.04);
    cursor: pointer;
    transition: all .15s;
    padding: 0;
}
.pia-action-btn svg {
    width: 13px;
    height: 13px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 2;
}
.pia-action-btn:hover {
    background: rgba(0,212,255,.08);
    transform: scale(1.1);
}
.pia-action-btn:hover svg { stroke: var(--t2); }
.pia-action-btn--publish:hover { background: var(--gbg); }
.pia-action-btn--publish:hover svg { stroke: var(--g); }
.pia-action-btn--danger:hover { background: var(--rbg); }
.pia-action-btn--danger:hover svg { stroke: var(--r); }

/* Error / Event / Offer inside card */
.pia-card-error {
    padding: 8px 12px;
    background: var(--rbg);
    border: 1px solid rgba(248,113,113,.15);
    border-radius: var(--rd-sm);
    font-size: 12px;
    color: var(--r);
}
.pia-card-event {
    font-size: 12px;
    color: var(--t1);
    padding: 6px 10px;
    background: rgba(0,212,255,.04);
    border-radius: var(--rd-sm);
}
.pia-card-offer {
    font-size: 12px;
    color: var(--t1);
    padding: 6px 10px;
    background: var(--subtle-bg);
    border-radius: var(--rd-sm);
}

/* --- Empty state --- */
.pia-empty {
    text-align: center;
    padding: 60px 20px;
    animation: fu .4s ease both;
}
.pia-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--rd);
    background: rgba(0,212,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.pia-empty-icon svg {
    width: 24px;
    height: 24px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 1.5;
}
.pia-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t2);
    margin-bottom: 6px;
}
.pia-empty-desc {
    font-size: 13px;
    color: var(--t3);
    max-width: 360px;
    margin: 0 auto;
}

/* --- Formulaire de creation / edition de post (#post-create-form) --- */
.pf-form {
    padding: var(--sp-lg);
    border-bottom: 1px solid var(--bdr);
    background: var(--overlay);
}
.pf-form-title {
    font-weight: 600;
    font-size: var(--fs-md);
    margin-bottom: var(--sp-md);
}
.pf-block { margin-bottom: var(--sp-md); }
.pf-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-md);
    margin-bottom: var(--sp-md);
}
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.pf-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-md); }
.pf-field { min-width: 0; }
.pf-label {
    display: block;
    font-size: var(--fs-base);
    color: var(--t2);
    margin-bottom: var(--sp-xs);
}
.pf-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-sm);
    margin-bottom: var(--sp-xs);
}
.pf-label-row .pf-label { margin-bottom: 0; }
.pf-char-count { font-size: var(--fs-sm); color: var(--t3); flex-shrink: 0; }
.pf-textarea { min-height: 120px; resize: vertical; }
/* Ligne sujet IA + bouton Generer */
.pf-ai-row {
    display: flex;
    gap: var(--sp-sm);
    align-items: center;
    margin-bottom: var(--sp-sm);
}
.pf-ai-row .btn { flex-shrink: 0; }
/* Ligne upload media (bouton fichier + ou + URL) */
.pf-media-row { display: flex; gap: var(--sp-sm); align-items: center; }
.pf-media-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-sm);
    padding: var(--sp-sm) 12px;
    border: 1px dashed var(--bdr);
    border-radius: var(--rd-sm);
    cursor: pointer;
    font-size: var(--fs-base);
    color: var(--t2);
    flex: 1;
    min-width: 0;
    transition: border-color .15s, background .15s, color .15s;
}
.pf-media-btn:hover { border-color: var(--ba); color: var(--t1); background: var(--primary-soft); }
.pf-media-or { font-size: var(--fs-sm); color: var(--t3); flex-shrink: 0; }
/* Bloc planification */
.pf-schedule {
    padding: var(--sp-md);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    background: var(--subtle-bg);
}
.pf-check {
    display: flex;
    align-items: center;
    gap: var(--sp-sm);
    font-size: var(--fs-base);
    color: var(--t2);
    cursor: pointer;
}
/* Visuel automatique du post (accroche -> JPG 1200x900 genere par le serveur) */
.pf-auto {
    margin-top: var(--sp-sm);
    padding: var(--sp-sm) 0 0;
    border-top: 1px solid var(--bdr);
}
.pf-auto-fields { margin-top: var(--sp-sm); }
.pf-auto-label { margin-bottom: var(--sp-md); }
.pf-auto-hint {
    font-size: var(--fs-sm);
    color: var(--t3);
    line-height: 1.5;
}
.pf-auto-preview { margin-top: var(--sp-sm); }
.pf-auto-preview img {
    display: block;
    width: 100%;
    max-width: 420px;
    border-radius: var(--rd-sm);
    border: 1px solid var(--bdr);
}
@media (max-width: 768px) {
    /* Tablette : les trios de champs (evenement, offre) passent sur deux colonnes,
       et le duo type de post / media passe sur une seule (le choix media a besoin de largeur) */
    .pf-grid3 { grid-template-columns: 1fr 1fr; }
    .pf-stack { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .pf-form { padding: var(--sp-md); }
    /* Une colonne partout : type de post, media, CTA/URL, dates evenement/offre */
    .pf-stack,
    .pf-grid2,
    .pf-grid3 { grid-template-columns: 1fr; gap: var(--sp-md); }
    /* Sujet IA au-dessus, bouton Generer pleine largeur en dessous */
    .pf-ai-row { flex-direction: column; align-items: stretch; gap: var(--sp-sm); }
    .pf-ai-row .btn { width: 100%; justify-content: center; }
    /* Choix du media : bouton fichier puis URL, empiles */
    .pf-media-row { flex-direction: column; align-items: stretch; gap: var(--sp-xs); }
    .pf-media-or { text-align: center; }
    .pf-media-row .si--grow { width: 100%; flex: none; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .pia-header {
        flex-direction: column;
        gap: 12px;
        padding: 16px 16px 0;
    }
    .pia-header-actions { width: 100%; }
    .pia-header-actions .btn { flex: 1; justify-content: center; }
}
/* Sous 480px : un bouton d'en-tete par ligne (meme regle que .action-bar),
   sinon les libelles longs passent sur deux lignes dans un bouton etroit. */
@media (max-width: 480px) {
    .pia-header-actions { flex-direction: column; }
    .pia-header-actions .btn { width: 100%; }
}
@media (max-width: 640px) {
    .pia-bento {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 12px 16px;
    }
    .pia-bento-total { grid-column: 1 / -1; }
    .pia-toolbar {
        padding: 10px 16px;
        flex-direction: column;
        align-items: stretch;
    }
    .pia-toolbar-left { flex-direction: column; }
    .pia-search { max-width: none; }
    .pia-pills { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .pia-pills::-webkit-scrollbar { display: none; }
    .pia-grid {
        grid-template-columns: 1fr;
        padding: 12px 16px;
    }
    .pia-card-actions { opacity: 1; }
    .pia-bento-card { padding: 14px 10px; }
    .pia-bento-value { font-size: 22px; }
}

/* Light theme overrides */
html.light .pia-bento-card::before,
html.light .pia-card::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
html.light .pia-bento-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 20px rgba(0,119,204,.05);
}
html.light .pia-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.06), 0 0 16px rgba(0,119,204,.04);
}
html.light .pia-search-input {
    background: rgba(0,0,0,.03);
}
html.light .pia-action-btn {
    background: rgba(0,0,0,.03);
}

/* ============================================================
   WIZARD — Stepper Component
   ============================================================ */
.wiz-container {
    position: relative;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-lg);
    margin: 16px 20px;
    overflow: hidden;
    animation: fu .3s ease both;
}
.wiz-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--t3);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all .15s;
    z-index: 2;
    line-height: 1;
}
.wiz-close:hover { background: rgba(255,255,255,.06); color: var(--t1); }

/* Stepper bar */
.wiz-stepper {
    display: flex;
    align-items: center;
    padding: 20px 24px 16px;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--bdr);
}
.wiz-step {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--rd-sm);
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.wiz-step:hover { background: rgba(255,255,255,.03); }
.wiz-step.active .wiz-step-circle {
    background: var(--btn-p-bg); color: var(--btn-p-ink); border-color: var(--btn-p-bg);
    color: #fff;
    box-shadow: 0 0 12px rgba(0,212,255,.3);
}
.wiz-step.completed .wiz-step-circle {
    background: var(--gbg);
    color: var(--g);
    border-color: var(--g);
}
.wiz-step.error .wiz-step-circle {
    background: var(--rbg);
    color: var(--r);
    border-color: var(--r);
}
.wiz-step.disabled { opacity: .4; cursor: default; }

.wiz-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--bg2);
    border: 1px solid var(--bdr);
    color: var(--t2);
    transition: all .25s;
    flex-shrink: 0;
}
.wiz-step-info { min-width: 0; }
.wiz-step-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
}
.wiz-step.disabled .wiz-step-title { color: var(--t3); }
.wiz-step-desc {
    font-size: 10px;
    color: var(--t3);
}

.wiz-connector {
    width: 24px;
    height: 2px;
    background: var(--bdr);
    flex-shrink: 0;
    border-radius: 1px;
    transition: background .3s;
}
.wiz-connector.done { background: var(--g); }
.wiz-connector.active { background: var(--acc); }

/* Body */
.wiz-body {
    padding: 24px;
    min-height: 180px;
}

/* Footer */
.wiz-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid var(--bdr);
    gap: 10px;
}
.wiz-footer-left, .wiz-footer-right {
    display: flex;
    gap: 8px;
}
.wiz-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border-radius: var(--rd-sm);
    border: 1px solid var(--bdr);
    background: transparent;
    color: var(--t2);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.wiz-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}
.wiz-btn:hover { border-color: rgba(255,255,255,.15); color: var(--t1); }
.wiz-btn-primary {
    background: var(--btn-p-bg);
    border-color: transparent;
    color: var(--btn-p-ink);
    box-shadow: var(--btn-p-shadow);
}
.wiz-btn-primary:hover { box-shadow: var(--btn-p-glow); }
.wiz-btn-success {
    background: var(--g);
    border-color: var(--g);
    color: var(--btn-p-ink);
}
.wiz-btn-success:hover { opacity: .9; }
.wiz-btn-danger { color: var(--r); border-color: transparent; }
.wiz-btn-danger:hover { background: var(--rbg); }

/* Wizard content helpers */
.wiz-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 20px;
}
.wiz-section-title svg {
    width: 20px;
    height: 20px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}
.wiz-cards-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}
/* Cartes de wizard : 1 colonne sur mobile (bat le grid-template inline) */
@media (max-width: 640px) {
    .wiz-cards-grid { grid-template-columns: 1fr !important; }
}
/* Grilles de KPI/cartes a colonnes fixes : 2 colonnes sur mobile */
@media (max-width: 640px) {
    .grid-collapse-2 { grid-template-columns: repeat(2, 1fr) !important; }
}
.wiz-card {
    background: var(--bg2);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px;
    cursor: pointer;
    transition: all .2s;
}
.wiz-card:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.wiz-card.selected {
    border-color: var(--t1);
    background: rgba(0,212,255,.04);
    box-shadow: 0 0 12px rgba(0,212,255,.06);
}
.wiz-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 4px;
}
.wiz-card-desc {
    font-size: 12px;
    color: var(--t3);
    line-height: 1.4;
}
.wiz-hint {
    font-size: 12px;
    color: var(--t3);
    line-height: 1.5;
    padding: 10px 14px;
    background: rgba(0,212,255,.03);
    border-radius: var(--rd-sm);
    border: 1px solid rgba(0,212,255,.06);
}

/* Responsive */
@media (max-width: 768px) {
    .wiz-container { margin: 12px 16px; }
    .wiz-stepper { padding: 14px 16px 12px; gap: 0; }
    .wiz-step { padding: 6px 8px; gap: 6px; }
    .wiz-step-desc { display: none; }
    .wiz-step-circle { width: 28px; height: 28px; font-size: 12px; }
    .wiz-body { padding: 16px; }
    .wiz-footer { padding: 12px 16px; }
    .wiz-connector { width: 16px; }
}

/* Light theme */
html.light .wiz-container { background: #fff; }
html.light .wiz-card { background: #f8fafc; }
html.light .wiz-card:hover { background: #f1f5f9; }
html.light .wiz-card.selected { background: rgba(0,119,204,.04); }
html.light .wiz-step-circle { background: #f1f5f9; }
html.light .wiz-close:hover { background: rgba(0,0,0,.04); }

/* ============================================================
   POST LISTS — Modern Redesign
   ============================================================ */

/* --- Contextual Help Banner --- */
.pla-help {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    margin: 12px 20px 8px;
    background: linear-gradient(135deg, rgba(0,212,255,.04), var(--subtle-bg));
    border: 1px solid rgba(0,212,255,.1);
    border-radius: var(--rd);
    animation: fu .4s ease both;
    animation-delay: .05s;
}
.pla-help-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pla-help-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 2;
}
.pla-help-text {
    font-size: 12px;
    color: var(--t2);
    line-height: 1.6;
    flex: 1;
}
.pla-help-text strong { color: var(--t1); }
.pla-help-close {
    background: none;
    border: none;
    color: var(--t3);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color .15s;
    flex-shrink: 0;
}
.pla-help-close:hover { color: var(--t1); }

/* --- List Cards Grid --- */
.pla-lists {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    animation: fu .4s ease both;
    animation-delay: .1s;
}
.pla-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 16px;
    transition: all .25s cubic-bezier(.25,.46,.45,.94);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pla-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    pointer-events: none;
}
.pla-card:hover {
    border-color: rgba(255,255,255,.10);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 0 16px rgba(0,212,255,.04);
}
.pla-card--inactive { opacity: .55; }
.pla-card--inactive:hover { opacity: .75; }

.pla-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pla-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.pla-card-info { min-width: 0; flex: 1; }
.pla-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pla-card-schedule {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.pla-card-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .2s;
    flex-shrink: 0;
}
.pla-card:hover .pla-card-actions { opacity: 1; }

/* Progress bar */
.pla-card-progress {
    height: 4px;
    background: rgba(255,255,255,.04);
    border-radius: 2px;
    overflow: hidden;
}
.pla-card-progress-bar {
    height: 100%;
    background: var(--t1);
    border-radius: 2px;
    transition: width .5s ease;
    min-width: 0;
}

/* Stats row */
.pla-card-stats {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.pla-card-stat {
    font-size: 11px;
    color: var(--t2);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.pla-card-pct {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--t1);
    font-family: 'Inter', sans-serif;
}

/* --- Detail View Header --- */
.pla-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
    animation: fu .3s ease both;
}
.pla-detail-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.pla-detail-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
}
.pla-detail-schedule {
    font-size: 11px;
    color: var(--t3);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    margin-top: 2px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .pla-lists { grid-template-columns: 1fr; padding: 12px 16px; }
    .pla-card-actions { opacity: 1; }
    .pla-help { margin: 0 16px 4px; padding: 12px 14px; }
    .pla-detail-header { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
    .pla-detail-header-left { flex-wrap: wrap; }
}

/* Light theme */
html.light .pla-card::before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}
html.light .pla-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
html.light .pla-help {
    background: linear-gradient(135deg, rgba(0,119,204,.04), var(--subtle-bg));
    border-color: rgba(0,119,204,.1);
}

/* ============================================
   REVIEWS ALL v3 — Bento dashboard, 2026 patterns
   Prefix: ra-
   ============================================ */

/* Bento grid */
.ra-bento {
    display: grid;
    grid-template-columns: 1fr 2fr repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.ra-bento > .sec {
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 0;
}

/* Score ring */
.ra-score-ring {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: 6px;
}
.ra-score-ring svg { width: 100%; height: 100%; }
.ra-score-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    color: var(--t1);
}
.ra-score-stars {
    color: var(--o);
    font-size: 16px;
    letter-spacing: 1px;
}
.ra-score-total {
    font-size: 11px;
    color: var(--t3);
    margin-top: 2px;
}

/* Distribution */
.ra-bento-dist {
    align-items: stretch !important;
    text-align: left !important;
    padding: 16px 20px !important;
}
.ra-dist-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--t3);
    margin-bottom: 8px;
}
.ra-dist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
}
.ra-dist-row:hover { background: var(--subtle-bg); }
.ra-dist-star {
    width: 28px;
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
}
.ra-dist-track {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 4px;
    overflow: hidden;
}
[data-theme="light"] .ra-dist-track { background: rgba(0,0,0,.06); }
.ra-dist-fill {
    height: 100%;
    background: var(--t1);
    border-radius: 4px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
}
.ra-dist-count {
    width: 30px;
    text-align: right;
    font-size: 11px;
    color: var(--t3);
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

/* KPI cards */
.ra-bento-kpi { gap: 6px; }
.ra-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.ra-kpi-num {
    font-size: 26px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ra-kpi-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ra-kpi-pulse { animation: ra-pulse-glow 2s infinite; }
@keyframes ra-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--subtle-bg); }
    50% { box-shadow: 0 0 12px 2px var(--subtle-bg); }
}

/* Toolbar */
.ra-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px !important;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.ra-toolbar-left { display: flex; align-items: center; gap: 8px; }
.ra-toolbar-center { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.ra-toolbar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* AI button in toolbar */
.ra-btn-ai {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    white-space: nowrap;
}
.ra-btn-ai:hover { transform: translateY(-1px); box-shadow: var(--btn-p-glow); }
.ra-btn-ai:active { transform: translateY(0); }
.ra-btn-ai:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Select styling */
.ra-select { width: auto; min-width: 160px; font-size: 12px; }

/* Segmented control */
.ra-seg {
    display: inline-flex;
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    overflow: hidden;
}
.ra-seg-btn {
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--t2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.ra-seg-btn:hover { color: var(--t1); background: var(--subtle-bg); }
.ra-seg-active {
    background: var(--primary-soft) !important;
    color: var(--t1) !important;
    font-weight: 600;
}
.ra-seg-count {
    font-size: 10px;
    background: var(--primary-soft);
    color: var(--t1);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}

/* Star filter buttons */
.ra-stars-filter { display: flex; gap: 2px; }
.ra-star-btn {
    padding: 4px 6px;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--t3);
    font-size: 11px;
    cursor: pointer;
    transition: all .15s;
    letter-spacing: -1px;
}
.ra-star-btn:hover { color: var(--o); border-color: var(--bdr); }
.ra-star-active { color: var(--o) !important; background: var(--obg); border-color: var(--obg) !important; }

/* Search */
.ra-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ra-search-icon {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--t3);
    stroke-width: 2;
    pointer-events: none;
}
.ra-search {
    padding-left: 30px !important;
    width: 160px;
    font-size: 12px !important;
}
.ra-search:focus { width: 220px; transition: width .2s ease; }

/* List card */
.ra-list-card { padding: 0 !important; overflow: hidden; }
.ra-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid var(--bdr);
    font-size: 12px;
    color: var(--t3);
}
.ra-list-hint { font-size: 11px; color: var(--t3); opacity: .6; }
.ra-list { padding: 0; }

/* Review card v3 */
.ra-card {
    padding: 16px 20px;
    border-bottom: 1px solid var(--bdr);
    transition: background .15s, box-shadow .15s;
    outline: none;
}
.ra-card:last-child { border-bottom: none; }
.ra-card:hover { background: var(--card-hover); }
.ra-card:focus-visible, .ra-card-focus {
    background: var(--primary-soft) !important;
    box-shadow: inset 3px 0 0 var(--acc);
}
.ra-card-deleted { opacity: .6; }
.ra-card-urgent { box-shadow: inset 3px 0 0 var(--r); }
.ra-card-draft { box-shadow: inset 3px 0 0 var(--acc); }

.ra-card-main { display: flex; gap: 12px; }
.ra-card-left { flex-shrink: 0; padding-top: 2px; }
.ra-card-body { flex: 1; min-width: 0; }
.ra-card-top { margin-bottom: 6px; }
.ra-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ra-card-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.ra-card-ago { font-size: 11px; color: var(--t3); }
.ra-card-comment {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.6;
    margin: 6px 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Action bar */
.ra-action-bar {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.ra-btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--bdr);
    background: none;
    color: var(--t2);
    cursor: pointer;
    transition: all .15s;
}
.ra-btn-action:hover { border-color: var(--acc-border); color: var(--t1); background: var(--primary-soft); }
.ra-btn-ai-reply { border-color: var(--acc-border); color: var(--t1); background: var(--primary-soft); }
.ra-btn-ai-reply:hover { background: rgba(0,212,255,.12); }

/* Draft zone */
.ra-draft-zone {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(0,212,255,.03);
    border: 1px solid var(--acc-border);
    border-radius: 8px;
}
.ra-draft-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 6px;
}
.ra-draft-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t1);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ra-draft-actions { display: flex; gap: 4px; }
.ra-draft-text {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Small action buttons */
.ra-btn-sm {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ra-btn-publish {
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
}
.ra-btn-publish:hover { background: var(--btn-p-bg); box-shadow: var(--btn-p-glow); }
.ra-btn-ghost {
    background: none;
    color: var(--t3);
    border: 1px solid var(--bdr);
}
.ra-btn-ghost:hover { color: var(--t1); border-color: var(--t3); }

/* Reply compose */
.ra-reply-compose {
    margin-top: 8px;
    padding: 12px;
    background: var(--inp);
    border-radius: 8px;
    border: 1px solid var(--bdr);
}
.ra-textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    font-size: 13px !important;
}

/* Edit zone & actions */
.ra-edit-zone { margin-top: 8px; }
.ra-edit-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Reply block (existing reply) */
.ra-reply-block {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(0,212,255,.04);
    border-left: 3px solid var(--acc);
    border-radius: 0 8px 8px 0;
}
.ra-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.ra-reply-label {
    font-size: 11px;
    color: var(--t1);
    font-weight: 500;
}
.ra-reply-text {
    font-size: 12px;
    color: var(--t2);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Pagination */
.ra-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 14px;
    border-top: 1px solid var(--bdr);
}
.ra-page-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: none;
    color: var(--t2);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
}
.ra-page-btn:hover { border-color: var(--acc-border); color: var(--t1); background: var(--primary-soft); }
.ra-page-active {
    background: var(--primary-soft) !important;
    color: var(--t1) !important;
    border-color: var(--ba) !important;
}
.ra-page-dots { color: var(--t3); font-size: 12px; padding: 0 4px; }

/* Empty state */
.ra-empty {
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ra-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--t3);
    opacity: .4;
    margin-bottom: 16px;
}
.ra-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
    margin-bottom: 6px;
}
.ra-empty-sub {
    font-size: 13px;
    color: var(--t3);
    max-width: 360px;
}

/* Help tooltip */
.ra-help-toggle {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: 2px;
    vertical-align: middle;
    transition: color .15s;
}
.ra-help-toggle:hover { color: var(--t1); }
.ra-help-tip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    box-shadow: var(--sh);
    font-size: 12px;
    color: var(--t2);
    line-height: 1.6;
    max-width: 360px;
    z-index: 100;
}
.ra-help-tip.ra-visible { display: block; }
.ra-help-tip-arrow {
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: var(--card);
    border-top: 1px solid var(--bdr);
    border-left: 1px solid var(--bdr);
    transform: rotate(45deg);
}

/* Keyboard shortcuts hint */
.ra-kbd-hint {
    font-size: 11px;
    color: var(--t3);
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: .6;
}
.ra-kbd-hint kbd, .ra-shortcut-row kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: 4px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--t2);
}

/* Shortcuts modal */

/* Responsive — bento grid */
@media (max-width: 1280px) {
    .ra-bento {
        grid-template-columns: 1fr 2fr;
    }
    .ra-bento-score { grid-row: 1; }
    .ra-bento-dist { grid-row: 1 / span 2; }
    .ra-bento-kpi { min-width: 0; }
}
@media (max-width: 768px) {
    .ra-bento {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .ra-bento-score { grid-column: 1 / -1; flex-direction: row !important; gap: 16px; padding: 14px !important; }
    .ra-bento-dist { grid-column: 1 / -1; }
    .ra-bento-kpi { padding: 12px 8px !important; }
    .ra-kpi-icon { width: 28px; height: 28px; border-radius: 8px; }
    .ra-kpi-icon svg { width: 14px !important; height: 14px !important; }
    .ra-kpi-num { font-size: 20px; }
    .ra-kpi-label { font-size: 9px; }
    .ra-toolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px !important; }
    .ra-toolbar-left, .ra-toolbar-center, .ra-toolbar-right { justify-content: center; }
    .ra-toolbar-left { flex-wrap: wrap; }
    .ra-toolbar-right { margin-left: 0; }
    .ra-search { width: 100% !important; }
    .ra-search:focus { width: 100% !important; }
    .ra-search-wrap { width: 100%; }
    .ra-seg { width: 100%; }
    .ra-seg-btn { flex: 1; justify-content: center; padding: 6px 8px; font-size: 11px; }
    .ra-seg-count { font-size: 9px; padding: 1px 4px; }
    .ra-stars-filter { justify-content: center; width: 100%; }
    .ra-star-btn { padding: 4px 5px; font-size: 10px; }
    .ra-select { width: 100% !important; min-width: 0 !important; }
    .ra-filter-group { width: 100%; }
    .ra-btn-ai { width: 100%; justify-content: center; }
    .ra-card { padding: 12px 14px; }
    .ra-list-hint { display: none; }
    .ra-kbd-hint { display: none; }
}
@media (max-width: 480px) {
    .ra-bento { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .ra-bento-score { flex-direction: row !important; gap: 12px; padding: 10px !important; }
    .ra-score-ring { width: 56px; height: 56px; }
    .ra-score-value { font-size: 20px; }
    .ra-score-stars { font-size: 13px; }
    .ra-score-total { font-size: 10px; }
    .ra-bento-kpi { padding: 10px 6px !important; }
    .ra-kpi-icon { width: 24px; height: 24px; border-radius: 8px; margin-bottom: 2px; }
    .ra-kpi-icon svg { width: 12px !important; height: 12px !important; }
    .ra-kpi-num { font-size: 18px; }
    .ra-kpi-label { font-size: 8px; letter-spacing: .3px; }
    .ra-dist-star { font-size: 10px; width: 24px; }
    .ra-dist-count { font-size: 10px; }
    .ra-card-main { gap: 8px; }
    .rev-avatar { width: 32px; height: 32px; font-size: 13px; }
    .ra-btn-action { padding: 4px 8px; font-size: 11px; }
    .ra-card-comment { font-size: 12px; }
    .rev-location-badge { font-size: 10px; }
    .ra-toolbar { padding: 8px 10px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ra-kpi-pulse { animation: none; }
    .ra-dist-fill { transition: none; }
    .ra-card, .ra-bento > .sec { transition: none; }
}

/* ============================================================
   REMINDERS V2 — UX/UI 2026 (sobre & dense, façon Linear/Vercel)
   Préfixe .rmd-* (Reminders Modernized) — n'écrase pas les .eml-*
   ============================================================ */

/* ====== HERO HEADER ====== */
.rmd-hero {
    background: linear-gradient(180deg, var(--card) 0%, var(--bg2) 100%);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-lg);
    padding: 22px 24px 18px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    animation: rmd-fade-in .35s ease both;
}
.rmd-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,.5), transparent);
    opacity: .6;
}
.rmd-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.rmd-hero-text { min-width: 0; }
.rmd-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.5px;
    margin: 0 0 4px;
    line-height: 1.15;
}
.rmd-hero-sub {
    font-size: 13px;
    color: var(--t3);
    line-height: 1.5;
    margin: 0;
    max-width: 640px;
}
.rmd-hero-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.rmd-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: var(--bg);
    color: var(--t3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}
.rmd-icon-btn:hover {
    color: var(--t1);
    border-color: rgba(255,255,255,.16);
    background: var(--subtle-hover);
}
.rmd-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,212,255,.4);
}

/* KPIs row dans le hero — 4 colonnes denses */
.rmd-hero-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.rmd-kpi {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    min-width: 0;
    transition: border-color .15s ease, transform .15s ease;
}
.rmd-kpi:hover {
    border-color: rgba(255,255,255,.12);
}
.rmd-kpi--ring { padding: 10px 14px; }
.rmd-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--t3);
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rmd-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.3px;
}
.rmd-kpi-value.success { color: var(--t1); }
.rmd-kpi-value.accent { color: var(--t1); }
.rmd-kpi-value.warn { color: var(--t1); }
.rmd-kpi-value.muted { color: var(--t2); }
.rmd-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    margin-left: 6px;
}
.rmd-kpi-trend.up { color: var(--g); }
.rmd-kpi-trend.down { color: var(--r); }
.rmd-kpi-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.04);
    color: var(--t2);
}
.rmd-kpi-icon svg { width: 16px; height: 16px; stroke-width: 2; fill: none; }
.rmd-kpi-icon.blue { background: rgba(0,212,255,.1); color: var(--t1); }
.rmd-kpi-icon.cyan { background: rgba(0,212,255,.1); color: var(--t1); }
.rmd-kpi-icon.green { background: var(--subtle-bg); color: var(--t1); }
.rmd-kpi-icon.orange { background: var(--subtle-bg); color: var(--t1); }
.rmd-kpi-body { min-width: 0; flex: 1; }
.rmd-kpi--skeleton {
    height: 60px;
    background: linear-gradient(90deg, var(--card) 0%, var(--subtle-bg) 50%, var(--card) 100%);
    background-size: 200% 100%;
    animation: rmd-shimmer 1.6s ease infinite;
}

/* ====== PROGRESS RING (campagne) ====== */
.rmd-ring {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    position: relative;
}
.rmd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rmd-ring-track { fill: none; stroke: var(--bdr); stroke-width: 4; }
.rmd-ring-fill {
    fill: none;
    stroke: var(--t2);
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease;
}
.rmd-ring-fill.full { stroke: var(--t2); }
.rmd-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.2px;
}

/* ====== TABS — segmented control compact ====== */
.rmd-tabs {
    position: relative;
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
.rmd-tab {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t3);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: color .18s ease;
    white-space: nowrap;
}
.rmd-tab:hover:not(.active) { color: var(--t1); }
.rmd-tab.active {
    color: var(--t1);
    background: var(--card);
    box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04);
}
.rmd-tab svg { stroke-width: 2; fill: none; flex-shrink: 0; }
.rmd-tab.active svg { stroke: var(--t2); }

/* ====== CONTRAT CARDS (onglet Contrats) ====== */
/* Raccourci "Réglages & templates" : ligne cliquable pleine largeur (une seule
   cible tactile), remplace la carte lourde avec bouton mal positionné sur mobile. */
.ctr-settings-link {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    margin: 0 0 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.ctr-settings-link:hover { border-color: var(--ba); background: var(--card-hover, var(--bg2)); }
.ctr-settings-ic {
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: var(--rd-sm);
    background: var(--subtle-bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--t2);
}
.ctr-settings-ic svg { width: 16px; height: 16px; stroke: var(--t2); }
.ctr-settings-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ctr-settings-title { font-size: var(--fs-base); font-weight: 700; color: var(--t1); letter-spacing: -.01em; }
.ctr-settings-sub { font-size: var(--fs-sm); color: var(--t3); line-height: 1.4; }
.ctr-settings-chevron { flex-shrink: 0; color: var(--t3); display: flex; }

/* Toolbar tri + filtre : conteneur de la primitive filterDropdown (bouton compact
   à gauche, dropdown desktop / bottom-sheet mobile). */
.ctr-toolbar {
    display: flex; align-items: center;
    margin: 0 0 14px;
}
@media (max-width: 640px) { .ctr-toolbar { display: block; } }

/* Sections de la vue Envois > Contrats : "A traiter" / "A venir" / "Cycles en cours" / "Archives" */
.ctr-section { margin-bottom: 14px; }
.ctr-section-header { transition: background .15s; }
.ctr-section-header:hover { background: rgba(255,255,255,.02); }
/* ══════════════════════════════════════════════════════════════════════════
   VUE ENVOIS — ICÔNES MONOCHROMES (premium). Règle globale : aucune pastille
   d'icône décorative en couleur (vert / cyan / ambre / rose). Toutes les icônes
   de la vue (rangées du hub, en-têtes de section) sont neutres. L'accent cyan est
   réservé aux vrais états actifs (onglet actif, sélection), pas à la décoration.
   Le statut passe UNIQUEMENT par le texte des badges/compteurs, pas par l'icône.
   ══════════════════════════════════════════════════════════════════════════ */
.rmd-wrap .ds-row-ic,
.rmd-wrap .eml-section-icon,
.rmd-wrap .ds-auto-ic,
.rmd-wrap .ds-hub-block-num,
.rmd-wrap .rmd-card-head-icon,
.rmd-wrap .rmd-auto-head-icon,
.rmd-wrap .rmd-help-drawer-icon,
.rmd-wrap .rmd-pm-head-icon,
.rmd-wrap .ctr-info-icon,
.rmd-wrap .eml-empty-icon {
    background: var(--subtle-bg) !important;
    color: var(--t2) !important;
    box-shadow: none !important;
}
.rmd-wrap .ds-row-ic svg,
.rmd-wrap .eml-section-icon svg,
.rmd-wrap .ds-auto-ic svg,
.rmd-wrap .ds-hub-block-num svg,
.rmd-wrap .rmd-card-head-icon svg,
.rmd-wrap .rmd-auto-head-icon svg,
.rmd-wrap .rmd-help-drawer-icon svg,
.rmd-wrap .rmd-pm-head-icon svg,
.rmd-wrap .ctr-info-icon svg,
.rmd-wrap .eml-empty-icon svg { stroke: var(--t2) !important; }
/* Les logos clients (img dans .ds-row-ic) gardent leur rendu. */
.rmd-wrap .ds-row-ic img { background: #fff !important; }
.ctr-section-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 8px;
    margin-left: 6px; border-radius: 11px;
    background: var(--subtle-bg); color: var(--t2);
    font-size: 12px; font-weight: 700; letter-spacing: .2px;
    vertical-align: middle;
}
/* Compteur "À traiter" : statut rouge discret (pas de glow ni dégradé). */
.ctr-section-count--urgent {
    background: rgba(248,113,113,.14);
    color: var(--r);
    box-shadow: none;
}
.ctr-section-chevron { color: var(--t3); flex-shrink: 0; }
.ctr-section--collapsed .ctr-section-chevron { transform: none; }

.ctr-list { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.ctr-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    padding: 16px 18px;
    transition: border-color .15s, box-shadow .15s;
    position: relative;
}
.ctr-card:hover { border-color: var(--ba); }
/* Urgent : carte neutre, aucun fond/liseré coloré. Le badge de statut porte seul
   le signal (premium = un seul point de couleur par carte). */
.ctr-card--urgent { border-color: var(--bdr); }
.ctr-card--urgent:hover { border-color: var(--ba); }
.ctr-card--muted { opacity: .75; }
.ctr-card--muted:hover { opacity: 1; }

.ctr-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.ctr-card-client { min-width: 0; flex: 1; }
.ctr-card-name {
    font-size: 15px; font-weight: 700; color: var(--t1);
    letter-spacing: -.01em; margin-bottom: 2px;
}
.ctr-card-biz {
    font-size: 12.5px; color: var(--t3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ctr-badge {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    font-size: 11.5px; font-weight: 600;
    border-radius: 20px; letter-spacing: .1px;
    flex-shrink: 0;
}
.ctr-badge--warning { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.ctr-badge--sent    { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.ctr-badge--info    { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.ctr-badge--muted   { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.ctr-badge--danger  { background: var(--rbg); color: var(--r); border: 1px solid var(--rbg); }

.ctr-card-meta {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px;
    font-size: 12.5px; color: var(--t2); line-height: 1.5;
    padding: 8px 0 2px;
    border-top: 1px solid var(--bdr);
}
/* Un point médian entre chaque segment, jamais en tête de ligne. */
.ctr-meta-item + .ctr-meta-item::before { content: "\00B7"; color: var(--t3); margin-right: 6px; }
.ctr-meta-due { color: var(--t1); font-weight: 600; }
.ctr-meta-in { color: var(--t3); font-weight: 500; }
/* Rouge seulement quand quelque chose est réellement à envoyer en retard. */
.ctr-meta-late { color: var(--r); font-weight: 600; }

.ctr-card-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bdr);
}
/* Choix du modèle et de la signature avant l'envoi : grille à deux colonnes, libellé
   au-dessus de chaque champ, select pleine largeur (une colonne sur mobile). */
.ctr-picks {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-sm) var(--sp-md);
    margin-top: var(--sp-md);
}
.ctr-pick { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ctr-pick-lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--t3); }
.ctr-pick .si { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 640px) {
    .ctr-picks { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); }
}
.ctr-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid transparent; border-radius: 8px;
    cursor: pointer; font-family: 'Inter', sans-serif;
    transition: var(--tr);
}
.ctr-btn svg { width: 14px; height: 14px; stroke-width: 2; fill: none; flex-shrink: 0; }
.ctr-btn--primary {
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border-color: transparent;
    box-shadow: var(--btn-p-shadow);
}
.ctr-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--btn-p-glow); }
.ctr-btn--ghost {
    background: var(--subtle-bg);
    color: var(--t2);
    border-color: var(--bdr);
}
.ctr-btn--ghost:hover { background: var(--bg2); color: var(--t1); border-color: rgba(0,212,255,.3); }
/* Label court du bouton primaire : masqué en desktop (le label complet s'affiche),
   révélé en mobile via la media query (voir plus bas). */
.ctr-btn-short { display: none; }

.ctr-kebab-wrap { position: relative; }
.ctr-kebab-btn {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bdr);
    background: var(--subtle-bg); cursor: pointer; display: flex;
    align-items: center; justify-content: center;
    color: var(--t2); font-size: 18px; letter-spacing: 1px;
    transition: var(--tr);
}
.ctr-kebab-btn:hover { background: var(--bg2); color: var(--t1); border-color: rgba(0,212,255,.3); }
.ctr-kebab-menu {
    position: absolute; right: 0; top: calc(100% + 4px);
    min-width: 220px; background: var(--card); border: 1px solid var(--bdr);
    border-radius: 10px; padding: 6px; z-index: 9000;
    box-shadow: 0 10px 36px rgba(0,0,0,.45);
    animation: ctrMenuIn .15s ease forwards;
}
@keyframes ctrMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ctr-kebab-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px; border: none;
    background: transparent; color: var(--t2); font-size: 12.5px;
    font-family: 'Inter', sans-serif; font-weight: 500;
    cursor: pointer; transition: var(--tr); width: 100%; text-align: left;
}
.ctr-kebab-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.ctr-kebab-item:hover { background: var(--subtle-bg); color: var(--t1); }
.ctr-kebab-item--success { color: var(--g); }
.ctr-kebab-item--success:hover { background: var(--subtle-bg); }
.ctr-kebab-item--danger { color: var(--r,var(--r)); }
.ctr-kebab-item--danger:hover { background: var(--rbg); }
.ctr-kebab-sep { height: 1px; background: var(--bdr); margin: 5px 4px; }

/* ── Info block : auto vs manuel ── */
.ctr-info-block {
    background: rgba(0,212,255,.04);
    border: 1px solid rgba(0,212,255,.18);
    border-radius: 14px;
    padding: 14px 16px;
    margin: 0 12px 12px;
    animation: fu .3s ease both;
}
.ctr-info-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ctr-info-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(0,212,255,.12);
    display: flex; align-items: center; justify-content: center;
    color: var(--t1);
    flex-shrink: 0;
}
.ctr-info-icon svg { width: 14px; height: 14px; stroke-width: 2; fill: none; stroke: var(--t2); }
.ctr-info-title { font-size: 13px; font-weight: 700; color: var(--t1); letter-spacing: -.01em; flex: 1; }
.ctr-info-close {
    background: none; border: none; cursor: pointer; color: var(--t3);
    font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: 8px;
    transition: var(--tr);
}
.ctr-info-close:hover { background: var(--subtle-bg); color: var(--t1); }
.ctr-info-body { display: flex; flex-direction: column; gap: 8px; }
.ctr-info-row {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 12.5px; color: var(--t2); line-height: 1.55;
}
.ctr-info-tag {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 52px; padding: 3px 8px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    border-radius: 4px; flex-shrink: 0; margin-top: 2px;
}
.ctr-info-tag--auto   { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
/* "Manuel" = neutre (charte : pas de violet décoratif). */
.ctr-info-tag--manual { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.ctr-info-tag--alert  { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); }
.ctr-info-txt { flex: 1; }
.ctr-info-txt strong { color: var(--t1); }

/* ── Decision client : selecteur unifie (resiliation ou renouvellement + termes) ── */
/* Décision client : encart neutre (charte — pas de fond/bordure cyan décoratif).
   Le <select> porte .si (bordure, focus cyan, dark mode fournis par le design system). */
/* Indicateur "Texte modifié pour cet envoi" + lien de retour au modèle. */
.ctr-edited-note {
    display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap;
    margin-top: var(--sp-sm);
    font-size: var(--fs-sm); color: var(--t1);
}
.ctr-edited-reset {
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
    font-size: var(--fs-sm); color: var(--t3);
    text-decoration: underline; text-underline-offset: 2px;
}
.ctr-edited-reset:hover { color: var(--t2); }

/* Retour client : lien discret par défaut, choix dépliés au clic. Remplace l'ancien gros
   select "Décision client" qui écrasait la hiérarchie de la carte. */
.ctr-decision { margin-top: var(--sp-sm); }
.ctr-decision-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: var(--fs-sm); color: var(--t3);
    text-decoration: underline; text-underline-offset: 2px;
    font-family: inherit;
}
.ctr-decision-link:hover { color: var(--t2); }
.ctr-decision-choices {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm);
    margin-top: var(--sp-sm);
}
.ctr-decision-choices[hidden] { display: none; }
.ctr-choice {
    flex: 0 0 auto; cursor: pointer;
    padding: 5px 12px;
    border-radius: var(--rd-pill);
    font-size: var(--fs-sm); font-weight: 600;
    font-family: inherit;
    background: var(--subtle-bg);
    border: 1px solid var(--bdr);
    color: var(--t2);
    transition: border-color .15s, color .15s;
}
/* Vert / rouge = STATUT (issue du choix), pas décoration. Couleur portée dès l'état de
   repos : en mobile il n'y a pas de survol, un rendu neutre priverait du repère visuel. */
.ctr-choice--ok { background: var(--gbg); border-color: var(--gbg); color: var(--g); }
.ctr-choice--ko { background: var(--rbg);  border-color: var(--rbg);  color: var(--r); }
.ctr-choice--ok:hover { border-color: var(--subtle-bg); }
.ctr-choice--ko:hover { border-color: var(--rbg); }
/* ── Billing row : tache arret prelevement / facture ── */
.ctr-billing-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--subtle-bg);
    border: 1px solid var(--subtle-bg);
    border-radius: 10px;
    padding: 10px 14px;
    margin-top: 10px;
    font-size: 12.5px;
}
.ctr-billing-row--done {
    background: var(--subtle-bg);
    border-color: var(--subtle-bg);
    color: var(--g);
}
.ctr-billing-txt { display: flex; flex-direction: column; gap: 2px; color: var(--t2); }
.ctr-billing-row--done .ctr-billing-txt { flex-direction: row; align-items: center; gap: 8px; color: var(--g); }
.ctr-billing-row--done .ctr-billing-txt svg { stroke: var(--g); }
.ctr-billing-txt strong { color: var(--t1); font-size: 13px; }
.ctr-btn--sm { padding: 6px 12px; font-size: 12px; }

/* ===== Suivi d'avis (post-satisfaction) : coche manuelle du résultat + relance ===== */
.ctr-review {
    margin-top: 10px;
    padding: 12px 14px;
    border: 1px solid var(--bdr);
    border-radius: var(--rd-md, 10px);
    background: var(--subtle-bg);
}
.ctr-review--relance { border-color: var(--ba); background: var(--subtle-bg); }
.ctr-review-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-bottom: 10px;
}
.ctr-review-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--t2);
}
.ctr-review-title svg { width: 15px; height: 15px; stroke: var(--t2); fill: none; }
.ctr-review-hint {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; color: var(--t1);
}
.ctr-review-hint svg { width: 13px; height: 13px; stroke: var(--t2); fill: none; }
.ctr-rev-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.ctr-rev-opt {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 11px; font-size: 12px; font-weight: 500;
    border-radius: var(--rd-pill, 999px);
    border: 1px solid var(--bdr); background: var(--card);
    color: var(--t2); cursor: pointer; transition: all .15s;
    white-space: nowrap;
}
.ctr-rev-opt:hover { border-color: var(--ba); color: var(--t1); }
.ctr-rev-opt.is-active { border-color: var(--t1); background: var(--primary-soft); color: var(--t1); }
.ctr-rev-opt--ok.is-active { border-color: var(--gbg); background: var(--gbg); color: var(--g); }
.ctr-rev-opt--no.is-active { border-color: var(--bdr); background: var(--subtle-bg); color: var(--t3); }
.ctr-review-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; margin-top: 10px;
}
.ctr-review-relance-meta { font-size: 11.5px; color: var(--t3); }
.ctr-review-pick { margin-bottom: 10px; }
.ctr-review-pick .ctr-picks { margin-top: 0; }
.ctr-review-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) {
    .ctr-review-foot { flex-direction: column; align-items: stretch; }
    .ctr-review-actions { width: 100%; }
    .ctr-review-actions .ctr-btn { flex: 1 1 auto; justify-content: center; }
    /* Garder les libellés (Aperçu / Test / Relancer) : sinon icône seule = ambigu ici. */
    .ctr-review-actions .ctr-btn--ghost span { display: inline; }
}

@media (max-width: 640px) {
    /* Un peu plus d'air entre les cartes et en interne (retour "tout est collé"), sans
       repartir dans l'excès : 14px compacte la carte tout en gardant de la respiration. */
    .ctr-list { gap: 12px; padding: 4px 0 0; }
    .ctr-card { padding: 14px; }

    /* Head : badge passe sous le nom */
    .ctr-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }

    /* Nom de fiche : wrapping au lieu de troncature */
    .ctr-card-biz { white-space: normal; overflow: visible; text-overflow: clip; }

    /* Métadonnées : empilement vertical, sans point médian */
    .ctr-card-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ctr-meta-item + .ctr-meta-item::before { content: none; margin: 0; }

    /* Actions : le bouton primaire prend l'espace disponible (CTA clair), l'aperçu
       en icône seule et le kebab restent compacts. Espacés (8px), jamais collés.
       Label COURT (shortLabel) + nowrap : pas de wrap sur 2 lignes (ancien bug du
       gros bloc blanc pleine largeur). */
    .ctr-card-actions { flex-wrap: nowrap; gap: 8px; align-items: stretch; }
    .ctr-card-actions .ctr-btn--ghost { flex: 0 0 auto; }
    .ctr-card-actions .ctr-btn--primary { flex: 1 1 auto; min-width: 0; white-space: nowrap; justify-content: center; }
    .ctr-card-actions .ctr-send-wrap { flex: 1 1 auto; }
    .ctr-card-actions .ctr-send-wrap .ctr-btn--primary { width: 100%; }
    .ctr-btn--ghost span { display: none; }          /* Aperçu = icône seule */
    .ctr-btn--primary .ctr-btn-full { display: none; }
    .ctr-btn--primary .ctr-btn-short { display: inline; }


    /* Billing row : empilement vertical + bouton pleine largeur */
    .ctr-billing-row { flex-direction: column; align-items: stretch; }
    .ctr-billing-row .ctr-btn { width: 100%; justify-content: center; }

    /* Bandeau alerte : autoriser le wrap, padding réduit (plus de texte tronqué) */
    .eml-alert-bar { flex-wrap: wrap; padding: 10px 14px; font-size: 12.5px; }
}

.rmd-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    margin-left: 2px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: var(--r, var(--r));
    border-radius: 8px;
    line-height: 1;
}

/* ====== HELP DRAWER ====== */
.rmd-help-drawer {
    margin-bottom: 14px;
    animation: rmd-fade-in .25s ease both;
}
.rmd-help-drawer-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0,212,255,.05);
    border: 1px solid rgba(0,212,255,.15);
    border-radius: var(--rd-sm);
}
.rmd-help-drawer-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(0,212,255,.12);
    color: var(--t1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rmd-help-drawer-text {
    flex: 1;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--t2);
}
.rmd-help-drawer-text strong { color: var(--t1); display: block; margin-bottom: 2px; font-weight: 600; }
.rmd-help-drawer-close {
    width: 24px; height: 24px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--t3);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .15s;
}
.rmd-help-drawer-close:hover { background: rgba(255,255,255,.06); color: var(--t1); }

/* ====== STEPPER — version compacte segmented ====== */
.rmd-stepper {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    padding: 4px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 10px;
    margin-bottom: 16px;
}
.rmd-stepper-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .18s ease;
}
.rmd-stepper-step:hover:not(.active) { color: var(--t1); }
.rmd-stepper-step.active {
    background: var(--card);
    color: var(--t1);
    box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04);
}
.rmd-stepper-step.done { color: var(--g); }
.rmd-stepper-num {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    background: var(--bdr);
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}
.rmd-stepper-step.active .rmd-stepper-num { background: var(--acc); color: #fff; }
.rmd-stepper-step.done .rmd-stepper-num { background: var(--btn-p-bg); color: var(--btn-p-ink); }
.rmd-stepper-step.done .rmd-stepper-num svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; }
.rmd-stepper-arrow {
    color: var(--t3);
    align-self: center;
    margin: 0 -2px;
    opacity: .5;
}
.rmd-stepper-arrow svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ====== SPLIT LAYOUT V2 ====== */
.rmd-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    gap: 14px;
    align-items: start;
    max-width: 100%;
    box-sizing: border-box;
}
.rmd-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 100px;
    min-width: 0;
}
.rmd-preview {
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--bdr) transparent;
    padding-bottom: 16px;
    min-width: 0;
}
.rmd-preview::-webkit-scrollbar { width: 6px; }
.rmd-preview::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 4px; }

/* ====== CARD V2 ====== */
.rmd-card {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    overflow: hidden;
    animation: rmd-fade-in .35s ease both;
    transition: border-color .15s ease;
    box-sizing: border-box;
}
.rmd-card:hover { border-color: rgba(255,255,255,.1); }
/* Carte qui héberge un autocomplete : elle doit passer AU-DESSUS des cartes
   suivantes (bug constaté sur mobile : la liste de résultats Google Places
   passait derrière la carte « Aperçu de la fiche » du stepper d'acquisition).
   Non reproduit sur Chromium desktop, donc probablement spécifique à WebKit ;
   le mécanisme exact n'est pas confirmé. On neutralise donc les trois causes
   possibles d'un coup, sur la carte porteuse plutôt que sur le dropdown :
     - `z-index` : élever la carte, car un z-index posé sur le dropdown reste
       prisonnier du contexte d'empilement de la carte s'il y en a un ;
     - `position:relative` : sans quoi le z-index ne s'applique pas ;
     - `overflow:visible` : `.rmd-card` est en `overflow:hidden`, qui rognerait
       la liste débordant sous le champ. */
.rmd-card:has(.rmd-ac-list) {
    position: relative;
    z-index: 30;
    overflow: visible;
}
.rmd-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--bdr);
}
.rmd-card-head-icon {
    width: 26px; height: 26px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: rgba(255,255,255,.04);
}
.rmd-card-head-icon svg { width: 14px; height: 14px; stroke-width: 2; fill: none; stroke: var(--t2); }
/* Une seule couleur d'icone de carte : les variantes blue/cyan/green/orange
   sont conservees comme alias pour ne pas casser les appels existants. */
.rmd-card-head-icon.blue,
.rmd-card-head-icon.cyan,
.rmd-card-head-icon.green,
.rmd-card-head-icon.orange { background: var(--badge-soft-bg); border: 1px solid var(--badge-soft-bdr); }
.rmd-card-head-icon.blue svg,
.rmd-card-head-icon.cyan svg,
.rmd-card-head-icon.green svg,
.rmd-card-head-icon.orange svg { stroke: var(--badge-soft-fg); }
.rmd-card-head-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    letter-spacing: -.1px;
}
.rmd-card-head-sub {
    font-size: 11.5px;
    color: var(--t3);
    margin-left: auto;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.rmd-card-body {
    padding: 16px 18px;
}
.rmd-card-body--flush { padding: 0; }

/* ====== FIELD V2 ====== */
.rmd-field { margin-bottom: 14px; }
.rmd-field:last-child { margin-bottom: 0; }
.rmd-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.rmd-field-label .rmd-help-mark {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bdr);
    color: var(--t3);
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    text-transform: none;
}
.rmd-field-label .rmd-help-mark:hover { background: var(--acc); color: #fff; }
.rmd-field-input,
.rmd-field-textarea {
    width: 100%;
    background: var(--inp);
    border: 1px solid var(--bdr);
    color: var(--t1);
    padding: 10px 12px;
    border-radius: var(--rd-sm);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.rmd-field-textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.65;
}
.rmd-field-input::placeholder,
.rmd-field-textarea::placeholder { color: var(--t3); }
.rmd-field-input:focus,
.rmd-field-textarea:focus {
    outline: none;
    border-color: var(--t1);
    box-shadow: 0 0 0 3px rgba(0,212,255,.15);
}
.rmd-field-hint {
    font-size: 11px;
    color: var(--t3);
    margin-top: 5px;
    line-height: 1.4;
}

/* Lien discret de bascule vers la recherche par lien Google Maps */
.rmd-link-alt {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    font-size: 12px;
    color: var(--t3);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color .15s ease;
}
.rmd-link-alt:hover { color: var(--t1); }
.rmd-link-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* ====== AI BUTTON inline ====== */
.rmd-ai-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(90deg, rgba(0,212,255,.07) 0%, rgba(99,102,241,.07) 100%);
    border: 1px solid rgba(0,212,255,.2);
    border-radius: var(--rd-sm);
    margin-bottom: 14px;
}
.rmd-ai-bar-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--btn-p-bg); color: var(--btn-p-ink);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,212,255,.3);
}
.rmd-ai-bar-icon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.rmd-ai-bar-text { flex: 1; min-width: 0; font-size: 12px; color: var(--t2); }
.rmd-ai-bar-text strong { color: var(--t1); font-weight: 600; }
.rmd-ai-btn {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border: none;
    box-shadow: var(--btn-p-shadow);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    transition: all .15s ease;
    box-shadow: 0 1px 3px rgba(0,212,255,.25);
}
.rmd-ai-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--btn-p-glow);
}
.rmd-ai-btn:disabled { opacity: .6; cursor: wait; }
.rmd-ai-btn kbd {
    background: rgba(255,255,255,.18);
    color: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-left: 2px;
}
.rmd-ai-btn-link {
    background: none;
    border: none;
    color: var(--t3);
    font-size: 11px;
    cursor: pointer;
    padding: 4px 6px;
    text-decoration: underline;
    transition: color .15s;
    flex-shrink: 0;
}
.rmd-ai-btn-link:hover { color: var(--t1); }

/* ====== TOOLBAR (search + filter chips) ====== */
.rmd-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.rmd-search {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--inp);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.rmd-search:focus-within {
    border-color: var(--t1);
    box-shadow: 0 0 0 3px rgba(0,212,255,.12);
}
.rmd-search svg { width: 13px; height: 13px; stroke: var(--t3); fill: none; stroke-width: 2; flex-shrink: 0; }
.rmd-search input {
    flex: 1;
    background: none;
    border: none;
    color: var(--t1);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    outline: none;
    min-width: 0;
}
.rmd-search input::placeholder { color: var(--t3); }
.rmd-search kbd {
    background: var(--bdr);
    color: var(--t3);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    flex-shrink: 0;
}
.rmd-chips {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.rmd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--bdr);
    background: var(--card);
    color: var(--t2);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
    white-space: nowrap;
}
.rmd-chip:hover { border-color: rgba(255,255,255,.18); color: var(--t1); }
.rmd-chip.active {
    background: rgba(0,212,255,.12);
    border-color: rgba(0,212,255,.4);
    color: var(--t1);
}
.rmd-chip-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bdr);
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}
.rmd-chip.active .rmd-chip-count { background: rgba(0,212,255,.25); color: var(--t1); }

/* ====== BULK ACTION BAR (sélection multiple) ====== */
.rmd-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0,212,255,.08);
    border: 1px solid rgba(0,212,255,.2);
    border-radius: var(--rd-sm);
    margin-bottom: 10px;
    animation: rmd-fade-in .15s ease both;
}
.rmd-bulk-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
    margin-right: auto;
    font-variant-numeric: tabular-nums;
}
.rmd-bulk-action {
    background: none;
    border: none;
    color: var(--t2);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all .15s;
}
.rmd-bulk-action:hover { background: rgba(255,255,255,.06); color: var(--t1); }
.rmd-bulk-action.danger { color: var(--t1); }
.rmd-bulk-action.danger:hover { background: var(--subtle-bg); }

/* ====== RECIPIENT ROW V2 (avec avatar) ====== */
.rmd-list { display: flex; flex-direction: column; gap: 3px; }
.rmd-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    user-select: none;
    transition: all .12s ease;
    position: relative;
}
.rmd-row--clickable { cursor: pointer; }
.rmd-row--clickable:hover { background: var(--subtle-hover); border-color: rgba(255,255,255,.08); }
.rmd-row--selected {
    background: rgba(0,212,255,.06);
    border-color: rgba(0,212,255,.2);
}
.rmd-row--sent { opacity: .55; }
.rmd-row--excluded { opacity: .4; }
.rmd-row-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    /* Fond neutre clair : les initiales doivent lire en couleur de texte,
       pas en blanc (invisible en theme clair). */
    color: var(--t1);
    text-transform: uppercase;
    letter-spacing: .3px;
    background: transparent;
    border: 1px solid var(--bdr);
}
.rmd-row-check {
    width: 16px; height: 16px;
    border-radius: 4px;
    border: 1.5px solid var(--bdr);
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .12s;
}
.rmd-row-check.checked {
    border-color: var(--t1);
    background: var(--acc);
}
.rmd-row-check svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rmd-row-info { flex: 1; min-width: 0; }
.rmd-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rmd-row-meta {
    font-size: 11px;
    color: var(--t3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rmd-row-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.rmd-row-tag svg { width: 10px; height: 10px; stroke-width: 2.5; fill: none; }
/* Le badge de TYPE porte l'accent. Les compteurs de tracking, eux, sont de la
   metadonnee : filet fin, texte en encre. Un seul point de couleur par ligne. */
.rmd-row-tag--type { background: var(--badge-bg); color: var(--badge-fg); border: 1px solid var(--badge-bdr); font-weight: 600; }
.rmd-row-tag.success,
.rmd-row-tag.opened,
.rmd-row-tag.clicked,
.rmd-row-tag.downloaded,
.rmd-row-tag.muted,
.rmd-row-tag.warn { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); font-weight: 500; }
.rmd-row-tag.danger { background: var(--rbg); color: var(--r); }
.rmd-row-link {
    background: none;
    border: none;
    color: var(--t3);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    transition: all .12s;
    opacity: 0;
}
.rmd-row:hover .rmd-row-link { opacity: 1; }
.rmd-row-link:hover { background: rgba(255,255,255,.06); color: var(--t1); }
.rmd-row-link.always { opacity: 1; }

/* ====== STICKY FOOTER ACTIONS ====== */
.rmd-footer {
    position: sticky;
    bottom: 0;
    margin-top: 14px;
    background: linear-gradient(180deg, transparent 0%, var(--bg) 30%);
    padding: 14px 0 8px;
    z-index: 12;
    display: flex;
    gap: 10px;
    align-items: center;
    animation: rmd-fade-in .25s ease both;
}
.rmd-footer-spacer { flex: 1; }
.rmd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s ease;
    border: 1px solid transparent;
    background: none;
    color: var(--t1);
    line-height: 1;
    white-space: nowrap;
}
.rmd-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,212,255,.4); }
.rmd-btn:disabled { opacity: .45; cursor: not-allowed; }
.rmd-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.rmd-btn--ghost {
    color: var(--t2);
    border-color: var(--bdr);
    background: transparent;
}
.rmd-btn--ghost:hover:not(:disabled) {
    color: var(--t1);
    border-color: rgba(255,255,255,.18);
    background: var(--subtle-hover);
}
/* Segmented control (ex: Regrouper / Individuel dans le choix des destinataires) */
.rmd-seg-btn {
    border: none;
    background: transparent;
    color: var(--t2);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.rmd-seg-btn:hover:not(.is-active) { color: var(--t1); }
.rmd-seg-btn.is-active {
    background: var(--primary-soft);
    color: var(--t1);
}

/* Bandeau brouillon repris du composer (reprise jamais silencieuse) */
.rmd-draft-banner {
    max-width: 880px;
    margin: 0 auto var(--sp-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-sm);
    padding: 10px 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
}
.rmd-draft-banner-text { font-size: var(--fs-sm); color: var(--t2); line-height: 1.5; }
.rmd-draft-banner-text strong { color: var(--t1); }
.rmd-draft-banner-text span { color: var(--t3); }
.rmd-draft-banner .rmd-btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .rmd-draft-banner { flex-direction: column; align-items: stretch; }
}
.rmd-btn--secondary {
    color: var(--t1);
    background: var(--card);
    border-color: var(--bdr);
}
.rmd-btn--secondary:hover:not(:disabled) {
    border-color: rgba(255,255,255,.2);
    background: var(--subtle-hover);
}
.rmd-btn--primary {
    color: var(--btn-p-ink);
    background: var(--btn-p-bg);
    border-color: transparent;
    box-shadow: var(--btn-p-shadow);
}
.rmd-btn--primary:hover:not(:disabled) {
    background: var(--btn-p-bg);
    border-color: transparent;
    box-shadow: var(--btn-p-glow);
    transform: translateY(-1px);
}
.rmd-btn--big { padding: 12px 26px; font-size: 14px; }
.rmd-btn kbd {
    background: rgba(255,255,255,.15);
    color: inherit;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-left: 4px;
    opacity: .8;
}

/* ====== READY-TO-SEND CHECKLIST (step 3) ====== */
.rmd-ready {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    overflow: hidden;
    animation: rmd-fade-in .35s ease both;
}
.rmd-ready-head {
    padding: 16px 18px 8px;
}
.rmd-ready-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
    margin: 0 0 4px;
}
.rmd-ready-sub {
    font-size: 12px;
    color: var(--t3);
    margin: 0;
}
.rmd-ready-list {
    padding: 6px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rmd-ready-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bdr);
}
.rmd-ready-item:last-child { border-bottom: none; }
.rmd-ready-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--bdr);
    color: var(--t3);
}
.rmd-ready-icon svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.rmd-ready-item.ok .rmd-ready-icon { background: var(--g); color: #fff; }
.rmd-ready-item.warn .rmd-ready-icon { background: var(--btn-p-bg); color: var(--btn-p-ink); }
.rmd-ready-text { flex: 1; min-width: 0; }
.rmd-ready-text-main {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.3;
}
.rmd-ready-text-sub {
    font-size: 11.5px;
    color: var(--t3);
    margin-top: 2px;
}
.rmd-ready-action {
    background: none;
    border: 1px solid var(--bdr);
    color: var(--t2);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.rmd-ready-action:hover { border-color: var(--t1); color: var(--t1); }
.rmd-ready-action:disabled { opacity: .55; cursor: not-allowed; }
.rmd-ready-cta {
    padding: 14px 18px;
    background: var(--bg);
    border-top: 1px solid var(--bdr);
    display: flex;
    align-items: center;
    gap: 12px;
}
.rmd-ready-cta-text {
    flex: 1;
    font-size: 12px;
    color: var(--t3);
    line-height: 1.4;
}

/* ====== EMAIL PREVIEW PANE V2 ====== */
.rmd-mail {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    overflow: hidden;
    animation: rmd-fade-in .35s ease both;
}
.rmd-mail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--bdr);
}
.rmd-mail-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--g);
    box-shadow: 0 0 0 3px var(--gbg);
    animation: rmd-pulse 2s ease infinite;
    flex-shrink: 0;
}
.rmd-mail-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--t2);
    flex: 1;
}
.rmd-mail-from {
    font-size: 11px;
    color: var(--t3);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.rmd-mail-body {
    padding: 18px 20px;
    background: var(--bg2);
}
.rmd-mail-subject-label,
.rmd-mail-body-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--t3);
    font-weight: 700;
    margin-bottom: 4px;
}
.rmd-mail-subject {
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.4;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bdr);
}
.rmd-mail-content {
    font-size: 13px;
    color: var(--t2);
    line-height: 1.7;
    white-space: pre-line;
    font-family: 'Inter', sans-serif;
}
.rmd-mail-foot {
    padding: 12px 20px;
    background: var(--card);
    border-top: 1px solid var(--bdr);
    font-size: 11px;
    color: var(--t3);
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.5;
}
.rmd-mail-foot svg { width: 12px; height: 12px; stroke: var(--t3); fill: none; stroke-width: 2; flex-shrink: 0; }

/* ====== EMPTY STATES V2 ====== */
.rmd-empty {
    padding: 56px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rmd-empty-illu {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(0,212,255,.08) 0%, rgba(99,102,241,.08) 100%);
    border: 1px solid rgba(0,212,255,.15);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.rmd-empty-illu svg {
    width: 28px; height: 28px;
    stroke: var(--t2);
    fill: none;
    stroke-width: 1.5;
}
.rmd-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 6px;
    letter-spacing: -.2px;
}
.rmd-empty-desc {
    font-size: 13px;
    color: var(--t3);
    line-height: 1.55;
    max-width: 360px;
    margin-bottom: 20px;
}
.rmd-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--btn-p-ink);
    background: var(--btn-p-bg);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    transition: all .15s;
}
.rmd-empty-cta:hover { background: #00d4eb; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,212,255,.3); }
.rmd-empty-cta svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }

/* ====== SUCCESS STATE / RECAP ====== */
.rmd-success {
    text-align: center;
    padding: 48px 32px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    animation: rmd-fade-in .4s ease both;
    position: relative;
    overflow: hidden;
}
.rmd-success::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, var(--subtle-bg), transparent 60%);
    pointer-events: none;
}
.rmd-success-icon {
    width: 64px; height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--gbg);
    border: 2px solid var(--gbg);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    z-index: 1;
    animation: rmd-pop .4s cubic-bezier(.26,1.6,.5,1) both;
}
.rmd-success-icon svg {
    width: 32px; height: 32px;
    stroke: var(--g);
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: rmd-draw .6s .15s ease forwards;
}
.rmd-success-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 8px;
    letter-spacing: -.3px;
    position: relative;
    z-index: 1;
}
.rmd-success-desc {
    font-size: 13.5px;
    color: var(--t2);
    margin-bottom: 24px;
    line-height: 1.55;
    max-width: 420px;
    margin-left: auto; margin-right: auto;
    position: relative;
    z-index: 1;
}
.rmd-success-stats {
    display: inline-flex;
    gap: 36px;
    padding: 18px 32px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    margin: 0 auto 24px;
    position: relative;
    z-index: 1;
}
.rmd-success-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--t1);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rmd-success-stat-value.success { color: var(--g); }
.rmd-success-stat-value.muted { color: var(--t3); }
.rmd-success-stat-value.danger { color: var(--r); }
.rmd-success-stat-label {
    font-size: 11px;
    color: var(--t3);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}

/* ====== KEYBOARD SHORTCUTS PANEL ====== */

/* ====== CAMPAIGN CARD V2 (historique) ====== */
.rmd-campaign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.rmd-campaign {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    cursor: pointer;
    transition: all .15s ease;
    animation: rmd-fade-in .3s ease both;
}
.rmd-campaign:hover {
    border-color: rgba(255,255,255,.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.rmd-campaign-month-block {
    text-align: center;
    flex-shrink: 0;
    padding: 6px 12px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--bdr);
    min-width: 56px;
}
.rmd-campaign-month-name {
    font-size: 10px;
    font-weight: 700;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .8px;
}
.rmd-campaign-month-year {
    font-size: 13px;
    font-weight: 800;
    color: var(--t1);
    margin-top: 2px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rmd-campaign-body { flex: 1; min-width: 0; }
.rmd-campaign-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.rmd-campaign-status::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
}
.rmd-campaign-status.sent { background: var(--subtle-bg); color: var(--t1); }
.rmd-campaign-status.draft { background: var(--subtle-bg); color: var(--t1); }
.rmd-campaign-status.archived { background: rgba(148,163,184,.12); color: var(--t3); }
.rmd-campaign-meta {
    font-size: 12px;
    color: var(--t3);
    margin-top: 4px;
}
.rmd-campaign-stats {
    display: flex;
    gap: 14px;
    flex-shrink: 0;
}
.rmd-campaign-stat {
    text-align: center;
    min-width: 36px;
}
.rmd-campaign-stat-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--t1);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rmd-campaign-stat-val.muted { color: var(--t3); }
.rmd-campaign-stat-val.success { color: var(--g); }
.rmd-campaign-stat-lbl {
    font-size: 9px;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 3px;
    font-weight: 600;
}

/* ====== HISTORY ROW V2 ====== */
.rmd-month-group {
    margin-bottom: 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    overflow: hidden;
    animation: rmd-fade-in .3s ease both;
}
.rmd-month-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--bdr);
}
.rmd-month-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--t1);
}
.rmd-month-stats {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--t3);
    font-variant-numeric: tabular-nums;
    display: flex;
    gap: 14px;
}
.rmd-month-stats span strong { color: var(--t2); font-weight: 700; }

/* ====== SKELETON LOADERS ====== */
.rmd-skeleton-stage {
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.rmd-skeleton-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.rmd-skeleton-bar,
.rmd-skeleton-card {
    background: linear-gradient(90deg, var(--card) 0%, var(--subtle-bg) 50%, var(--card) 100%);
    background-size: 200% 100%;
    animation: rmd-shimmer 1.6s ease infinite;
    border-radius: var(--rd-sm);
}
.rmd-skeleton-card {
    height: 220px;
    border-radius: var(--rd);
}
.rmd-skeleton-bar { height: 16px; border-radius: 8px; }

/* ====== TOOLTIPS data-tip="..." ======
   Rendu par le moteur JS shared/ui/tooltip.js dans <body> (position:fixed),
   ce qui évite que le tooltip soit rogné par un ancêtre overflow:hidden ou
   masqué par la carte suivante (ancien bug du pseudo-élément ::after).
   On garde uniquement la pastille flottante ; plus aucun ::after générique. */
[data-tip] { position: relative; }
.neura-tip {
    position: fixed;
    top: 0; left: 0;
    background: var(--t1);
    color: var(--bg);
    padding: 5px 9px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    white-space: normal;
    max-width: 260px;
    width: max-content;
    text-align: center;
    line-height: 1.4;
    z-index: 100000;
    pointer-events: none;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s ease, transform .12s ease;
}
.neura-tip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ====== ANIMATIONS ====== */
@keyframes rmd-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes rmd-pop {
    0% { transform: scale(.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes rmd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .5; }
}
@keyframes rmd-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes rmd-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .rmd-hero, .rmd-card, .rmd-empty, .rmd-success, .rmd-month-group, .rmd-campaign,
    .rmd-help-drawer, .rmd-bulk-bar, .rmd-footer, .rmd-mail { animation: none; }
    .rmd-success-icon { animation: none; }
    .rmd-success-icon svg { animation: none; stroke-dashoffset: 0; }
    .rmd-mail-dot { animation: none; }
    .rmd-skeleton-bar, .rmd-skeleton-card, .rmd-kpi--skeleton { animation: none; }
}

/* ====== EXTENSIONS pour Acquisition ====== */
/* Credits pill (dans le hero acquisition) */
.acq-credits-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0,212,255,.1);
    border: 1px solid rgba(0,212,255,.25);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    transition: all .15s ease;
    cursor: default;
}
.acq-credits-pill svg { stroke-width: 2; flex-shrink: 0; }
.acq-credits-pill #credits-count { font-weight: 700; }
.acq-credits-pill .acq-credits-label { color: var(--t3); font-weight: 500; font-size: 11px; }
.acq-credits-pill.low {
    background: var(--subtle-bg);
    border-color: var(--subtle-bg);
    color: var(--t1);
}
.acq-credits-pill.empty {
    background: var(--rbg);
    border-color: var(--rbg);
    color: var(--r);
}
.acq-credits-pill.empty .acq-credits-label,
.acq-credits-pill.low .acq-credits-label { color: inherit; opacity: .7; }

/* Wizard step components V2 */
.rmd-wizard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
@media (max-width: 1024px) { .rmd-wizard-grid { grid-template-columns: 1fr; } }

/* Selected business card */
.rmd-biz-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    margin-bottom: 12px;
    animation: rmd-fade-in .2s ease both;
}
.rmd-biz-card-avatar {
    width: 38px; height: 38px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--btn-p-bg); color: var(--btn-p-ink);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.rmd-biz-card-body { flex: 1; min-width: 0; }
.rmd-biz-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rmd-biz-card-addr {
    font-size: 11.5px;
    color: var(--t3);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rmd-biz-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--t1);
    font-weight: 600;
    margin-top: 4px;
}
.rmd-biz-card-clear {
    background: none;
    border: none;
    color: var(--t3);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    transition: all .15s;
    flex-shrink: 0;
}
.rmd-biz-card-clear:hover { color: var(--r); background: var(--rbg); }
.rmd-biz-card-clear svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Autocomplete dropdown */
.rmd-ac-list {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 100;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    animation: rmd-fade-in .15s ease both;
}
.rmd-ac-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--bdr);
    transition: background .12s;
}
.rmd-ac-item:last-child { border-bottom: none; }
.rmd-ac-item:hover, .rmd-ac-item.active { background: var(--subtle-hover); }
.rmd-ac-item-icon {
    width: 26px; height: 26px;
    border-radius: 8px;
    background: rgba(0,212,255,.1);
    color: var(--t1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rmd-ac-item-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.rmd-ac-item-body { flex: 1; min-width: 0; }
.rmd-ac-item-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rmd-ac-item-meta {
    font-size: 10.5px;
    color: var(--t3);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keyword tags */
.rmd-kw-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    min-height: 44px;
    align-items: center;
}
.rmd-kw-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(0,212,255,.1);
    border: 1px solid rgba(0,212,255,.25);
    color: var(--t1);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    animation: rmd-fade-in .15s ease both;
}
.rmd-kw-tag-remove {
    background: none;
    border: none;
    color: inherit;
    opacity: .7;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    display: flex;
    transition: opacity .15s;
}
.rmd-kw-tag-remove:hover { opacity: 1; }
.rmd-kw-tag-remove svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.rmd-kw-empty {
    font-size: 12px;
    color: var(--t3);
    font-style: italic;
}
.rmd-kw-suggest {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.rmd-kw-suggest-btn {
    padding: 4px 10px;
    font-size: 11.5px;
    background: var(--card);
    border: 1px dashed var(--bdr);
    color: var(--t2);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
}
.rmd-kw-suggest-btn:hover {
    color: var(--t1);
    border-color: var(--t1);
    border-style: solid;
}

/* Keyword input + button row — stacks on mobile */
.rmd-kw-add-row { display: flex; gap: 8px; }
@media (max-width: 480px) {
    .rmd-kw-add-row { flex-wrap: wrap; }
    .rmd-kw-add-row .si { flex: 1 1 100%; }
    .rmd-kw-add-row .rmd-btn { width: 100%; justify-content: center; }
}

/* Long keyword chips: prevent overflow */
.rmd-kw-tag { word-break: break-word; max-width: 100%; }

/* Biz card address: allow 2 lines on mobile instead of truncating to 1 */
@media (max-width: 640px) {
    .rmd-biz-card-addr {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Progress bar (scan en cours) */
.rmd-progress {
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    padding: 24px;
    text-align: center;
    animation: rmd-fade-in .25s ease both;
}
.rmd-progress-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--bdr);
    border-top-color: var(--t1);
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: rmd-spin 1s linear infinite;
}
@keyframes rmd-spin {
    to { transform: rotate(360deg); }
}
.rmd-progress-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--t1);
    margin-bottom: 6px;
}
.rmd-progress-status {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 14px;
    line-height: 1.5;
}
.rmd-progress-bar {
    height: 6px;
    background: var(--bdr);
    border-radius: 4px;
    overflow: hidden;
    max-width: 360px;
    margin: 0 auto 8px;
}
.rmd-progress-fill {
    height: 100%;
    background: var(--t1);
    border-radius: 4px;
    transition: width .4s ease;
}
.rmd-progress-stats {
    font-size: 11px;
    color: var(--t3);
    font-variant-numeric: tabular-nums;
}

/* Score badge (pour résultats) */
.rmd-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    flex-shrink: 0;
    border: 1.5px solid currentColor;
}
.rmd-score--good { color: var(--t1); background: var(--subtle-bg); }
.rmd-score--ok   { color: var(--t1); background: var(--subtle-bg); }
.rmd-score--bad  { color: var(--r); background: var(--rbg); }

/* Position badge (rang Google) */
.rmd-pos {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px; height: 22px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    flex-shrink: 0;
}
.rmd-pos--p3   { background: var(--subtle-bg); color: var(--t1); }
.rmd-pos--p10  { background: rgba(0,212,255,.12); color: var(--t1); }
.rmd-pos--p20  { background: var(--subtle-bg); color: var(--t1); }
.rmd-pos--po   { background: rgba(148,163,184,.12); color: var(--t3); }

/* Sticky bulk actions bar (fixed bottom) */
.rmd-bulk-fixed {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 16px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    animation: rmd-pop .25s cubic-bezier(.26,1.6,.5,1) both;
    max-width: calc(100vw - 40px);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}
.rmd-bulk-fixed-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rmd-bulk-fixed-divider {
    width: 1px; height: 22px;
    background: var(--bdr);
}
.rmd-bulk-fixed-btn {
    background: none;
    border: 1px solid var(--bdr);
    color: var(--t1);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.rmd-bulk-fixed-btn:hover { border-color: var(--t1); color: var(--t1); }
.rmd-bulk-fixed-btn.danger { color: var(--r); border-color: var(--rbg); }
.rmd-bulk-fixed-btn.danger:hover { background: var(--rbg); }
.rmd-bulk-fixed-btn.primary {
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    border-color: transparent;
}
.rmd-bulk-fixed-btn.primary:hover { background: var(--btn-p-bg); box-shadow: var(--btn-p-glow); }
.rmd-bulk-fixed-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Result card (zone scan / search results) */
.rmd-result-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    transition: all .15s;
    animation: rmd-fade-in .2s ease both;
}
.rmd-result-card:hover { border-color: rgba(255,255,255,.15); }
.rmd-result-card.selected {
    border-color: var(--t1);
    background: rgba(0,212,255,.05);
}
.rmd-result-card.target {
    border-color: var(--t1);
    background: rgba(0,212,255,.05);
    border-left: 3px solid var(--acc);
}
.rmd-result-card-info { flex: 1; min-width: 0; }
.rmd-result-card-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--t1);
    line-height: 1.3;
}
.rmd-result-card-name .rmd-target-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: var(--btn-p-bg);
    color: var(--btn-p-ink);
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.rmd-result-card-meta {
    font-size: 11.5px;
    color: var(--t3);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.rmd-result-card-meta a { color: var(--t1); text-decoration: none; }
.rmd-result-card-meta a:hover { text-decoration: underline; }
.rmd-result-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.rmd-result-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

/* Map container */
.rmd-map {
    width: 100%;
    height: 320px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    overflow: hidden;
    position: relative;
}
.rmd-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--t3);
    font-size: 12px;
    gap: 6px;
}
.rmd-map-empty svg { width: 28px; height: 28px; stroke: var(--t3); fill: none; stroke-width: 1.5; opacity: .5; }

/* Zone categories grid (cases à cocher) */
.rmd-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
    margin-bottom: 8px;
}
.rmd-cat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--t2);
    transition: all .15s;
    user-select: none;
}
.rmd-cat-item:hover { border-color: rgba(255,255,255,.15); color: var(--t1); }
.rmd-cat-item.selected {
    border-color: var(--t1);
    background: rgba(0,212,255,.08);
    color: var(--t1);
    font-weight: 600;
}
.rmd-cat-item-check {
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1.5px solid var(--bdr);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all .12s;
}
.rmd-cat-item.selected .rmd-cat-item-check {
    background: var(--acc);
    border-color: var(--t1);
}
.rmd-cat-item-check svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 3; fill: none; stroke-linecap: round; }

/* Cost summary (zone scan) */
.rmd-cost-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(90deg, rgba(0,212,255,.06), rgba(99,102,241,.06));
    border: 1px solid rgba(0,212,255,.2);
    border-radius: var(--rd-sm);
    margin-top: 12px;
}
.rmd-cost-summary-text { font-size: 12px; color: var(--t2); }
.rmd-cost-summary-text strong { color: var(--t1); font-weight: 700; }
.rmd-cost-summary-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
}

/* Detail prospect : Score ring large */
.rmd-detail-ring {
    width: 80px; height: 80px;
    flex-shrink: 0;
    position: relative;
}
.rmd-detail-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rmd-detail-ring-track { fill: none; stroke: var(--bdr); stroke-width: 6; }
.rmd-detail-ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.rmd-detail-ring-fill.good { stroke: var(--t2); }
.rmd-detail-ring-fill.ok { stroke: var(--t2); }
.rmd-detail-ring-fill.bad { stroke: var(--r); }
.rmd-detail-ring-text {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.rmd-detail-ring-val { font-size: 20px; font-weight: 800; color: var(--t1); line-height: 1; }
.rmd-detail-ring-lbl { font-size: 9px; text-transform: uppercase; color: var(--t3); margin-top: 2px; letter-spacing: .5px; font-weight: 600; }

/* ====== RESPONSIVE V2 ====== */
@media (max-width: 1280px) {
    .rmd-split { grid-template-columns: 1fr; }
    .rmd-preview { position: relative; top: 0; max-height: none; padding-bottom: 0; }
    .rmd-editor { padding-bottom: 24px; }
    .rmd-hero-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .rmd-hero { padding: 16px 16px 14px; border-radius: var(--rd); }
    .rmd-hero-title { font-size: 18px; }
    .rmd-hero-sub { font-size: 12px; }
    .rmd-hero-actions { gap: 4px; }
    .rmd-icon-btn { width: 30px; height: 30px; }
    .rmd-hero-kpis { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .rmd-kpi { padding: 9px 10px; gap: 8px; }
    .rmd-kpi-icon { width: 30px; height: 30px; border-radius: 8px; }
    .rmd-kpi-icon svg { width: 14px; height: 14px; }
    .rmd-kpi-value { font-size: 16px; }
    .rmd-kpi-label { font-size: 9px; letter-spacing: .4px; }
    .rmd-ring { width: 36px; height: 36px; }
    .rmd-ring-text { font-size: 9px; }

    .rmd-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 3px;
        border-radius: 8px;
    }
    .rmd-tabs::-webkit-scrollbar { display: none; }
    .rmd-tab { flex: 0 0 auto; font-size: 11.5px; padding: 6px 11px; }

    .rmd-stepper {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .rmd-stepper::-webkit-scrollbar { display: none; }
    .rmd-stepper-step { flex: 0 0 auto; padding: 6px 11px; font-size: 11.5px; }

    .rmd-card-head { padding: 11px 14px; }
    .rmd-card-body { padding: 14px; }
    .rmd-card-head-title { font-size: 12.5px; }
    .rmd-toolbar { padding: 8px 10px; gap: 8px; }
    .rmd-search { min-width: 140px; }
    .rmd-search input { font-size: 12px; }
    .rmd-search kbd { display: none; }
    .rmd-chips {
        display: flex;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        gap: 4px;
        padding-bottom: 2px;
    }
    .rmd-chips::-webkit-scrollbar { display: none; }
    .rmd-chip { flex: 0 0 auto; padding: 4px 8px; font-size: 11px; }

    .rmd-row { padding: 8px 10px; gap: 8px; }
    .rmd-row-avatar { width: 26px; height: 26px; font-size: 10px; }
    .rmd-row-name { font-size: 12px; }
    .rmd-row-meta { font-size: 10px; }
    .rmd-row-link { opacity: 1; padding: 3px 6px; }

    .rmd-footer {
        position: sticky;
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 6px;
        padding: 10px 0 6px;
        background: var(--bg);
    }
    .rmd-footer-spacer { display: none; }
    .rmd-btn { width: 100%; padding: 11px 16px; }

    .rmd-ready-head { padding: 14px 14px 4px; }
    .rmd-ready-list { padding: 4px 14px 12px; }
    .rmd-ready-cta { padding: 12px 14px; flex-direction: column; gap: 8px; align-items: stretch; }
    .rmd-ready-cta-text { text-align: center; }

    .rmd-success { padding: 32px 18px; }
    .rmd-success-stats { gap: 22px; padding: 14px 22px; }
    .rmd-success-stat-value { font-size: 22px; }

    .rmd-campaign-grid { grid-template-columns: 1fr; }
    .rmd-campaign { padding: 12px 14px; gap: 12px; }
    .rmd-campaign-month-block { padding: 5px 10px; min-width: 50px; }

    .rmd-month-head { padding: 10px 14px; flex-wrap: wrap; gap: 6px; }
    .rmd-month-stats { gap: 10px; font-size: 11px; }

}

/* ── Composer offre/info — étape 1 restructurée (sections aérées) ─────── */
.bcs-section { padding: var(--sp-lg) 28px; border-bottom: 1px solid var(--bdr); }
.bcs-section:last-child { border-bottom: none; }
.bcs-kicker {
    font-size: var(--fs-xs); font-weight: 700; color: var(--t1);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: var(--sp-md);
}
.bcs-field { margin-bottom: 20px; }
.bcs-field:last-child { margin-bottom: 0; }
.bcs-label { display: block; font-size: var(--fs-md); font-weight: 600; color: var(--t1); margin-bottom: 4px; }
.bcs-help { font-size: var(--fs-sm); color: var(--t3); line-height: 1.5; margin-bottom: var(--sp-sm); }
.bcs-ai-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.bcs-ai-row .rmd-btn { width: auto; }
.bcs-or {
    display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
    color: var(--t3); font-size: var(--fs-xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
}
.bcs-or::before, .bcs-or::after { content: ''; flex: 1; height: 1px; background: var(--bdr); }
.bcs-tpl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bcs-tpl-row select { flex: 1 1 220px; }
.bcs-tpl-link { font-size: var(--fs-sm); color: var(--t1); white-space: nowrap; text-decoration: none; }
.bcs-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .bcs-section { padding: 18px var(--sp-md); }
    .bcs-footer { flex-direction: column-reverse; align-items: stretch; }
    .bcs-footer .rmd-btn { width: 100%; justify-content: center; }
    .bcs-ai-row .rmd-btn { width: auto; }
}

/* ── Hub "Composer un envoi" (v3) ─────────────────────────────────────── */
.rmd-compose { max-width: 920px; margin: 0 auto; padding: 8px 0 32px; }
.rmd-compose-head { margin-bottom: 22px; }
.rmd-compose-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--t1); }
.rmd-compose-sub { margin: 0; color: var(--t3); font-size: 13px; line-height: 1.5; }
.rmd-compose-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.rmd-compose-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
    cursor: pointer;
    text-align: left;
    color: var(--t1);
    font: inherit;
    width: 100%;
    transition: border-color .15s, transform .15s, background .15s;
}
.rmd-compose-card:hover { border-color: var(--t1); background: rgba(0,212,255,.04); transform: translateY(-1px); }
.rmd-compose-card:active { transform: translateY(0); }
.rmd-compose-card-icon {
    position: relative;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,212,255,.08);
    color: var(--t1);
    border-radius: 14px;
    flex-shrink: 0;
}
/* Pastille rouge "X actions" sur la card du modele quand il reste a faire.
   Meme style que la nb.nb-urgent du sidebar : reperage immediat. */
.rmd-compose-card-notif {
    position: absolute; top: -6px; right: -6px;
    min-width: 22px; height: 22px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: var(--r);
    color: #fff; font-size: 11px; font-weight: 800;
    border: 2px solid var(--card);
    box-shadow: 0 0 0 1px var(--rbg), 0 4px 12px var(--rbg);
    animation: rmd-compose-card-notif-pulse 2s ease-in-out infinite;
}
.rmd-compose-card--has-notif {
    border-color: var(--rbg);
    background: linear-gradient(135deg, var(--card), var(--rbg));
}
.rmd-compose-card--has-notif:hover {
    border-color: var(--rbg);
    background: linear-gradient(135deg, var(--rbg), var(--rbg));
}
@keyframes rmd-compose-card-notif-pulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--rbg), 0 4px 12px var(--rbg); }
    50%      { box-shadow: 0 0 0 1px var(--rbg), 0 4px 18px var(--rbg); }
}
.rmd-compose-card-body { min-width: 0; }
.rmd-compose-card-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 3px; }
.rmd-compose-card-desc { font-size: 13px; color: var(--t3); line-height: 1.5; }
.rmd-compose-card-note { font-size: 11px; color: var(--t3); margin-top: 6px; font-style: italic; opacity: .85; }
.rmd-compose-card-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.rmd-compose-card-chev { color: var(--t3); transition: transform .15s, color .15s; }
.rmd-compose-card:hover .rmd-compose-card-chev { color: var(--t1); transform: translateX(3px); }
.rmd-compose-kpi {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.rmd-compose-kpi--attention { background: var(--subtle-bg); color: var(--t1); }
.rmd-compose-kpi--calm { background: rgba(0,212,255,.10); color: var(--t1); }
.rmd-compose-kpi--muted { background: var(--bg2); color: var(--t3); }

/* Strip "Envois manuels en attente" (table pending_manual_emails).
   Affiche les envois manuels arrivant a echeance avec actions Envoyer / Ignorer. */
.rmd-pm-strip {
    margin: 0 0 22px;
    padding: 16px 18px;
    background: rgba(255, 180, 0, .04);
    border: 1px solid rgba(255, 180, 0, .35);
    border-radius: var(--rd);
}
.rmd-pm-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rmd-pm-head-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 180, 0, .15); color: var(--t1);
    border-radius: 10px; flex-shrink: 0;
}
.rmd-pm-head-title { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.rmd-pm-head-sub { font-size: 12px; color: var(--t3); line-height: 1.5; }
.rmd-pm-rows { display: flex; flex-direction: column; gap: 8px; }
.rmd-pm-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
}
.rmd-pm-text { flex: 1; min-width: 0; }
.rmd-pm-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rmd-pm-kind {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: var(--bg2); color: var(--t2);
}
.rmd-pm-due { font-size: 11px; color: var(--t3); }
.rmd-pm-label { font-size: 13px; font-weight: 600; color: var(--t1); line-height: 1.4; }
.rmd-pm-sub { font-size: 12px; color: var(--t3); margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.rmd-pm-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rmd-pm-btn {
    padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
    display: inline-flex; align-items: center; gap: 6px;
}
.rmd-pm-btn--primary { background: var(--btn-p-bg); color: var(--btn-p-ink); border-color: transparent; }
.rmd-pm-btn--primary:hover { box-shadow: var(--btn-p-glow); }
.rmd-pm-btn--ghost { background: transparent; color: var(--t2); border-color: var(--bdr); }
.rmd-pm-btn--ghost:hover { background: var(--bg2); color: var(--t1); }
@media (max-width: 640px) {
    .rmd-pm-row { flex-direction: column; align-items: stretch; }
    .rmd-pm-actions { width: 100%; }
    .rmd-pm-btn { flex: 1; justify-content: center; }
}

/* Variante "hero" du strip (onglet Rapports > À traiter) : ton rouge urgent
   au lieu de l'orange, pour marquer une action à faire maintenant. */
.rmd-pm-strip--hero {
    background: var(--rbg, rgba(239, 68, 68, .06));
    border-color: rgba(239, 68, 68, .38);
    box-shadow: 0 4px 16px rgba(239, 68, 68, .08);
}
.rmd-pm-strip--hero .rmd-pm-head-icon {
    background: rgba(239, 68, 68, .14); color: var(--r, var(--r));
}

/* Encart proéminent "À traiter" en tête de l'onglet Contrats. Quand il y a des
   actions (--active), il encadre la section todo d'un liseré rouge + fond léger
   pour qu'elle saute aux yeux au-dessus du reste. Sinon, wrapper transparent. */
.ctr-todo-hero { margin-bottom: 18px; }
.ctr-todo-hero--active {
    padding: 6px;
    background: var(--rbg, rgba(239, 68, 68, .05));
    border: 1px solid rgba(239, 68, 68, .32);
    border-radius: var(--rd);
    box-shadow: 0 4px 18px rgba(239, 68, 68, .09);
}
.ctr-todo-hero--active .ctr-section { border: none; background: transparent; }

/* Toggles manuel/auto par fiche (carte contrat) : section dépliable <details>
   pour désencombrer la carte. Le résumé reste visible, les toggles au clic. */
.ctr-modes {
    border-top: 1px solid var(--bdr);
    margin: 12px -18px -16px;   /* colle aux bords de la carte (.ctr-card padding 16 18) */
    border-radius: 0 0 12px 12px;
    overflow: hidden;           /* clippe les coins bas du fond --bg2 sur le rayon carte */
}
.ctr-modes-summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 18px;
    font-size: var(--fs-sm); font-weight: 600; color: var(--t2);
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.ctr-modes-summary::-webkit-details-marker { display: none; }
.ctr-modes-summary:hover { background: var(--subtle-bg); }
.ctr-modes-summary-l { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ctr-modes-summary-l svg { width: 15px; height: 15px; stroke: var(--t3); flex-shrink: 0; }
.ctr-modes-summary-r { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ctr-modes-badge {
    font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    color: var(--t3); background: var(--subtle-bg);
    padding: 3px 8px; border-radius: var(--rd-xs); border: 1px solid var(--bdr);
}
.ctr-modes-chevron { color: var(--t3); transition: transform .2s; flex-shrink: 0; }
.ctr-modes[open] .ctr-modes-chevron { transform: rotate(180deg); }
.ctr-modes-body {
    display: flex; flex-direction: column; gap: 10px; padding: 8px 18px 14px;
    background: var(--bg2);
}
.ctr-mode-cell {
    width: 100%;
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
}
.ctr-mode-label { font-size: 12px; font-weight: 600; color: var(--t2); }
.ctr-mode-switch {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; position: relative;
}
.ctr-mode-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.ctr-mode-slider {
    position: relative; width: 36px; height: 20px;
    background: var(--bg); border: 1px solid var(--bdr); border-radius: 999px;
    transition: .2s;
}
.ctr-mode-slider::before {
    content: ''; position: absolute;
    height: 14px; width: 14px; left: 2px; top: 2px;
    background: var(--t3); border-radius: 50%; transition: .2s;
}
.ctr-mode-switch input:checked + .ctr-mode-slider { background: var(--acc); border-color: var(--t1); }
.ctr-mode-switch input:checked + .ctr-mode-slider::before { transform: translateX(16px); background: #fff; }
.ctr-mode-state { font-size: 11px; font-weight: 700; color: var(--t2); text-transform: uppercase; letter-spacing: .04em; min-width: 48px; text-align: left; }
.seq-mode-state--on { background: var(--subtle-bg); color: var(--g, var(--g)); }
.seq-mode-state--off { background: var(--bg); color: var(--t3); border: 1px solid var(--bdr); }

/* Strip Automatisation (legacy, conserve pour transition). */
.rmd-auto-strip {
    margin: 0 0 22px;
    padding: 16px 18px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd);
}
.rmd-auto-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.rmd-auto-head-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,212,255,.08); color: var(--t1);
    border-radius: 10px; flex-shrink: 0;
}
.rmd-auto-head-title { font-size: 14px; font-weight: 700; color: var(--t1); margin-bottom: 2px; }
.rmd-auto-head-sub { font-size: 12px; color: var(--t3); line-height: 1.5; }
.rmd-auto-rows { display: flex; flex-direction: column; gap: 10px; }
.rmd-auto-row {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 14px;
    background: var(--bg2);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
}
.rmd-auto-row-text { flex: 1; min-width: 0; }
.rmd-auto-row-title {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; font-weight: 600; color: var(--t1); margin-bottom: 3px;
}
.rmd-auto-row-desc { font-size: 12px; color: var(--t3); line-height: 1.45; }
.rmd-auto-state {
    display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.rmd-auto-state--on { background: var(--subtle-bg); color: var(--g, var(--g)); }
.rmd-auto-state--off { background: var(--bg); color: var(--t3); border: 1px solid var(--bdr); }
.rmd-auto-switch {
    position: relative; display: inline-block; flex-shrink: 0;
    width: 44px; height: 24px; cursor: pointer;
}
.rmd-auto-switch input { opacity: 0; width: 0; height: 0; }
.rmd-auto-slider {
    position: absolute; inset: 0;
    background: var(--bg); border: 1px solid var(--bdr);
    border-radius: 999px; transition: .2s;
}
.rmd-auto-slider::before {
    content: ''; position: absolute;
    height: 18px; width: 18px; left: 2px; top: 2px;
    background: var(--t3); border-radius: 50%; transition: .2s;
}
.rmd-auto-switch input:checked + .rmd-auto-slider { background: var(--acc); border-color: var(--t1); }
.rmd-auto-switch input:checked + .rmd-auto-slider::before { transform: translateX(20px); background: #fff; }
@media (max-width: 480px) {
    .rmd-auto-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .rmd-auto-switch { align-self: flex-end; }
}

/* Breadcrumb retour au hub depuis un sub-stepper */
.rmd-compose-crumb {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--t3);
}
.rmd-compose-crumb-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    color: var(--t2);
    cursor: pointer;
    font: inherit;
    transition: all .15s;
}
.rmd-compose-crumb-btn:hover { border-color: var(--t1); color: var(--t1); }
.rmd-compose-crumb-sep { color: var(--t3); }
.rmd-compose-crumb-current { color: var(--t1); font-weight: 600; }

@media (max-width: 640px) {
    .rmd-compose-card { grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; }
    .rmd-compose-card-meta { grid-column: 1 / -1; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--bdr); margin-top: 4px; }
}

/* ── Stepper Page perso ─────────────────────────────────────────────── */
.rmd-pp { max-width: 1100px; margin: 0 auto; }
.rmd-pp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); align-items: start; }
.rmd-pp-form { display: flex; flex-direction: column; min-width: 0; padding: var(--sp-lg); background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd); }
.rmd-pp-section { margin: 0 0 12px; font-size: 14px; font-weight: 700; color: var(--t1); text-transform: none; }
.rmd-pp-label { display: block; font-size: 12px; font-weight: 600; color: var(--t2); margin: 12px 0 6px; }
.rmd-pp-req { color: var(--r); }
.rmd-pp-input, .rmd-pp-textarea {
    width: 100%; padding: 10px 12px;
    background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--rd-sm);
    color: var(--t1); font: inherit; font-size: 14px; line-height: 1.5;
    transition: border-color .15s;
}
.rmd-pp-input:focus, .rmd-pp-textarea:focus { outline: none; border-color: var(--t1); }
.rmd-pp-textarea { resize: vertical; min-height: 180px; font-family: inherit; }
.rmd-pp-vars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rmd-pp-vars-label { font-size: 11px; font-weight: 600; color: var(--t3); }
.rmd-pp-var {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
    padding: 3px 8px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: 4px;
    color: var(--t2); cursor: pointer; transition: all .15s;
}
.rmd-pp-var:hover { border-color: var(--t1); color: var(--t1); background: rgba(0,212,255,.06); }
.rmd-pp-hint { font-size: 11px; color: var(--t3); margin-top: 6px; line-height: 1.5; }
.rmd-pp-hint code { background: var(--bg2); padding: 1px 5px; border-radius: 4px; font-size: 11px; color: var(--t1); }
.rmd-pp-recip-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.rmd-pp-recip-count { font-size: 13px; color: var(--t2); margin-right: auto; }
.rmd-pp-recip-list {
    max-height: 280px; overflow-y: auto;
    border: 1px solid var(--bdr); border-radius: var(--rd-sm);
    padding: 6px; background: var(--bg2);
}
.rmd-pp-recip {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px;
    cursor: pointer; transition: background .12s;
}
.rmd-pp-recip:hover { background: var(--bg); }
.rmd-pp-recip input { cursor: pointer; }
.rmd-pp-recip-name { flex: 1; font-size: 13px; color: var(--t1); font-weight: 500; }
.rmd-pp-recip-city { font-size: 11px; color: var(--t3); }

/* ── Page perso : sélection regroupée par email (1 ligne = 1 contact) ── */
.rmd-pp-recip--grouped { align-items: flex-start; padding: 10px; }
.rmd-pp-recip--grouped input { margin-top: 2px; }
.rmd-pp-recip--grouped.is-partial { background: var(--subtle-bg); }
.rmd-pp-recip-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.rmd-pp-recip-head { font-size: 13px; color: var(--t1); font-weight: 600; word-break: break-word; }
.rmd-pp-recip-contact { color: var(--t3); font-weight: 400; }
.rmd-pp-recip-badge {
    display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .02em;
    padding: 1px 7px; border-radius: var(--rd-pill); vertical-align: 1px;
    background: var(--subtle-bg); color: var(--t1); border: 1px solid var(--ba);
}
.rmd-pp-recip-fiches { display: flex; flex-wrap: wrap; gap: 4px; }
.rmd-pp-recip-fiche { font-size: 11px; padding: 2px 8px; background: var(--bg); color: var(--t2); border-radius: var(--rd-xs); }
.rmd-pp-recip-fiche-city { color: var(--t3); }

.rmd-pp-actions { display: flex; gap: 10px; margin-top: 18px; }
.rmd-pp-preview-col { position: static; min-width: 0; padding: var(--sp-lg); background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd); }
.rmd-pp-preview {
    background: var(--bg2); padding: var(--sp-md); border-radius: var(--rd-sm);
    border: 1px solid var(--bdr); max-height: 70vh; overflow-y: auto;
}
@media (max-width: 1024px) {
    .rmd-pp-grid { grid-template-columns: 1fr; }
    .rmd-pp-preview-col { position: static; }
}

/* ── Page perso : aperçu des groupes formés ── */
.rmd-pp-groups { margin: 12px 0 8px; padding: 12px; background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--rd-sm); }
.rmd-pp-groups-head { font-size: 12px; font-weight: 700; color: var(--t1); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.rmd-pp-group { padding: 8px 0; border-bottom: 1px solid var(--bdr); }
.rmd-pp-group:last-child { border-bottom: none; padding-bottom: 0; }
.rmd-pp-group-email { font-size: 13px; color: var(--t1); font-weight: 600; }
.rmd-pp-group-contact { color: var(--t3); font-weight: 400; font-size: 12px; }
.rmd-pp-group-fiches { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rmd-pp-group-fiche { font-size: 11px; padding: 2px 8px; background: var(--bg); color: var(--t2); border-radius: 4px; }
.rmd-pp-group-note { font-size: 11px; color: var(--t1); margin-top: 6px; font-style: italic; }

/* ── Audit requests list row ── */
.audit-req-row {
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
}
@media (max-width: 640px) {
    .audit-req-row {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 12px 14px;
        align-items: flex-start;
    }
    .audit-req-contact {
        order: 10;
        flex-basis: 100%;
        border-top: 1px solid var(--bdr);
        padding-top: 6px;
        margin-top: 2px;
    }
    .audit-req-row > svg:last-child { align-self: center; }
}

/* ── Audit requests : header, filtres, contact ── */
.audit-req-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    gap: 12px;
}
.audit-req-hd-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
}
.audit-req-refresh-btn { font-size: 12px; padding: 6px 16px; }
.audit-req-filters {
    padding: 12px 20px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.audit-req-filters::-webkit-scrollbar { display: none; }
.audit-req-contact { flex: 1; min-width: 0; }
.audit-req-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.audit-req-meta { font-size: 12px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
    .audit-req-hd { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
    .audit-req-refresh-btn { width: 100%; justify-content: center; font-size: 13px; }
    .audit-req-filters { padding: 8px 14px; gap: 6px; }
    .audit-req-name-row { flex-direction: column; align-items: flex-start; gap: 1px; }
    .audit-req-meta { white-space: normal; }
}

/* ── Responsive global — vues PHP (forms settings + emails) ── */
@media (max-width: 640px) {
    /* settings.php — profil + mot de passe */
    #profile-info-form     { grid-template-columns: 1fr !important; }
    #profile-password-form { grid-template-columns: 1fr !important; }

    /* emails.php — grilles 2-col et 3-col broadcast-profile */
    #broadcast-profile-form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* billing.css — plans 1-col sur très petit écran */
@media (max-width: 480px) {
    .bill-plans-grid { grid-template-columns: 1fr !important; }
}

/* ── emails.php — onglets principaux ── */
.eml-main-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    padding: 0 var(--mn-pad, 20px) 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bdr);
}
.eml-main-tabs::-webkit-scrollbar { display: none; }
.eml-main-tab {
    white-space: nowrap;
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t2);
    cursor: pointer;
    transition: color .15s, border-color .15s;
    margin-bottom: -1px;
}
.eml-main-tab:hover { color: var(--t1); }
.eml-main-tab.active { color: var(--t1); border-bottom-color: var(--t1); font-weight: 600; }
.eml-main-panel { min-height: 200px; }

/* ── templateSelector ── */
.tplsel-wrap { margin-bottom: 14px; }
.tplsel-label {
    display: block;
    font-size: 12px;
    color: var(--t3);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.tplsel-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.tplsel-row .si { flex: 1; min-width: 0; }
.tplsel-hint {
    font-size: 11px;
    color: var(--t3);
    margin-top: 5px;
}
@media (max-width: 480px) {
    .tplsel-row { flex-direction: column; align-items: stretch; }
    .tplsel-preview-btn { width: 100%; justify-content: center; }
}

/* ====== INDEX.PHP — Sidebar pre-collapse state (loaded before JS) ====== */
.sb-pre-collapsed .sb { width: 60px !important; padding: 20px 4px !important; overflow: hidden !important; transition: none !important; }
.sb-pre-collapsed .sb .ns,
.sb-pre-collapsed .sb .sf,
.sb-pre-collapsed .sb .ns-group,
.sb-pre-collapsed .sb .sb-client-info,
.sb-pre-collapsed .sb .sb-client-selector,
.sb-pre-collapsed .sb .nb,
.sb-pre-collapsed .sb .ni-desc,
.sb-pre-collapsed .sb .logo-full,
.sb-pre-collapsed .sb .sb-toggle-label { display: none !important; }
.sb-pre-collapsed .sb .ni { justify-content: center !important; padding: 10px !important; font-size: 0 !important; line-height: 0 !important; gap: 0 !important; }
.sb-pre-collapsed .sb .logo-mini { display: block !important; }
.sb-pre-collapsed .mn { margin-left: 60px !important; max-width: calc(100vw - 60px) !important; transition: none !important; }

/* ====== INDEX.PHP — Bandeau global tâche en arrière-plan ====== */
.neura-task-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: linear-gradient(90deg, rgba(0,229,199,.12), rgba(0,229,199,.06)); border-bottom: 1px solid rgba(0,229,199,.2); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); transform: translateY(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.neura-task-banner.show { transform: translateY(0); pointer-events: auto; }
.neura-task-banner-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; max-width: 100%; gap: 12px; }
.neura-task-banner-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.neura-task-spinner { width: 16px; height: 16px; stroke: var(--t2); fill: none; stroke-width: 2.5; stroke-linecap: round; animation: neura-spin 1s linear infinite; flex-shrink: 0; }
@keyframes neura-spin { to { transform: rotate(360deg); } }
#neura-task-banner-text { font-size: .75rem; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neura-task-banner-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.neura-task-mini-progress { width: 60px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.neura-task-mini-fill { height: 100%; border-radius: 2px; background: var(--acc); width: 0; transition: width .5s ease; }
.neura-task-banner-link { font-size: .7rem; font-weight: 600; color: var(--t1); background: none; border: 1px solid rgba(0,229,199,.3); border-radius: 8px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.neura-task-banner-link:hover { background: rgba(0,229,199,.1); }
.neura-task-banner.done { background: linear-gradient(90deg, var(--subtle-bg), var(--subtle-bg)); border-bottom-color: var(--subtle-bg); }
.neura-task-banner.done .neura-task-spinner { animation: none; stroke: var(--g); }
.neura-task-banner.done #neura-task-banner-text { color: var(--g); }
.neura-task-banner.done .neura-task-mini-fill { background: var(--g); }
@media (prefers-reduced-motion: reduce) {
    .neura-task-spinner { animation: none; }
    .neura-task-banner { transition: none; }
}


/* ====== views/admin-ai-prompts.php — Éditeur prompts IA ====== */
.aip-wrap { padding: 20px 24px; }
.aip-header { margin-bottom: 20px; }
.aip-card { background: var(--card); border: 1px solid var(--bdr); border-radius: var(--rd); padding: 18px 20px; margin-bottom: 18px; }
.aip-card.overridden { border-color: rgba(0,212,255,.4); box-shadow: 0 0 0 1px rgba(0,212,255,.15); }
.aip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; flex-wrap: wrap; }
.aip-title { font-size: 15px; font-weight: 700; color: var(--t1); }
.aip-module { font-size: 11px; font-weight: 600; color: var(--t1); background: rgba(0,212,255,.1); padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; }
.aip-desc { font-size: 12px; color: var(--t3); line-height: 1.5; margin-bottom: 12px; }
.aip-vars { font-size: 11px; color: var(--t3); margin-bottom: 8px; }
.aip-vars code { background: rgba(255,255,255,.04); padding: 1px 6px; border-radius: 4px; color: var(--t1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; }
.aip-textarea { width: 100%; min-height: 200px; max-height: 600px; padding: 12px; background: var(--inp); border: 1px solid var(--bdr); border-radius: var(--rd-sm); color: var(--t1); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.55; resize: vertical; }
.aip-actions { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.aip-status { font-size: 11px; color: var(--t3); margin-right: auto; }
.aip-status.over { color: var(--t1); font-weight: 600; }
.aip-tabsbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.aip-tab { padding: 6px 12px; background: rgba(255,255,255,.03); border: 1px solid var(--bdr); border-radius: 999px; font-size: 11px; color: var(--t2); cursor: pointer; }
.aip-tab.active { background: rgba(0,212,255,.1); border-color: rgba(0,212,255,.3); color: var(--t1); font-weight: 600; }

/* Settings — grids responsive */
.settings-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 600px; }
.settings-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; max-width: 800px; }
@media (max-width: 640px) {
    .settings-grid-2, .settings-grid-3 { grid-template-columns: 1fr; }
}

/* ====== Acquisition — responsive ====== */
/* Map + concurrents : 2 colonnes desktop, 1 colonne mobile */
.acq-map-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 12px;
    align-items: start;
}
@media (max-width: 768px) {
    .acq-map-grid { grid-template-columns: 1fr; }
    /* 5-col/4-col KPI bars → 3 cols sur tablette */
    .grid-collapse-2 { grid-template-columns: repeat(3, 1fr) !important; }
    /* Réduire les hauteurs de cartes Mapbox sur mobile */
    #wiz-grid-map  { height: 280px !important; }
    #audit-grid-map { height: 240px !important; }
    /* Concurrents : hauteur adaptée quand empilé sous la carte */
    .acq-comp-card { max-height: 360px !important; }
}
@media (max-width: 640px) {
    /* 3 cols → 2 cols sur mobile strict */
    .grid-collapse-2 { grid-template-columns: repeat(2, 1fr) !important; }
    /* Tabs section : texte masqué, icône seule si très serré */
    .rmd-tab span:not(.rmd-chip-count) { font-size: 11px; }
    /* KPI inline cards dans les résultats : padding réduit */
    .acq-map-grid + * { margin-top: 8px; }
}

/* iOS : empêche le zoom auto au focus d'un champ < 16px. Safari mobile zoome
   automatiquement sur tout input/select/textarea dont la police est < 16px.
   On force 16px sur mobile pour neutraliser ce comportement (global). */
@media (max-width: 768px) {
    input, select, textarea, .si { font-size: 16px !important; }
}

/* ===== SPLASH SCREEN (écran d'accueil au lancement de l'app) =====
   Couvre le blanc entre la réponse serveur et le boot du bundle JS.
   Affiché une seule fois par onglet (sessionStorage), retiré par le script
   inline en bas de index.php. */
#neura-splash {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--sp-md);
    background: var(--bg);
    opacity: 1; transition: opacity .32s ease;
}
#neura-splash.is-out { opacity: 0; pointer-events: none; }
.neura-splash-logo {
    height: 52px; width: auto; display: block;
    animation: neuraSplashIn .5s cubic-bezier(.16,1,.3,1) both;
}
.neura-splash-msg {
    font-size: var(--fs-md); color: var(--t2); text-align: center;
    animation: neuraSplashIn .5s cubic-bezier(.16,1,.3,1) .08s both;
}
.neura-splash-bar {
    width: 120px; height: 2px; border-radius: var(--rd-pill);
    background: var(--bdr); overflow: hidden;
    animation: neuraSplashIn .5s cubic-bezier(.16,1,.3,1) .12s both;
}
.neura-splash-bar i {
    display: block; height: 100%; width: 40%; border-radius: var(--rd-pill);
    background: var(--acc);
    animation: neuraSplashBar 1.1s ease-in-out infinite;
}
@keyframes neuraSplashIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes neuraSplashBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) {
    .neura-splash-logo, .neura-splash-msg, .neura-splash-bar { animation: none; }
    .neura-splash-bar i { animation: none; width: 100%; }
}

/* Slider de rayon de la zone de scan (assistant prospect) */
.wiz-radius-range { flex: 1; width: 100%; padding: 0; accent-color: var(--t1); cursor: pointer; }

/* ============================================================
   GRILLES RESPONSIVES GENERIQUES (.ui-grid-N)
   Remplace les `style="display:grid;grid-template-columns:repeat(N,1fr)"`
   inline, qui ignoraient les media queries et restaient a N colonnes a 375px.
   Le gap reste libre en inline, seules les colonnes sont pilotees ici.
   ============================================================ */
.ui-grid-2, .ui-grid-3, .ui-grid-4, .ui-grid-5, .ui-grid-7 { display: grid; }
.ui-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ui-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ui-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ui-grid-5 { grid-template-columns: repeat(5, 1fr); }
/* 7 colonnes = bandeau des jours de la semaine : ne se replie jamais. */
.ui-grid-7 { grid-template-columns: repeat(7, 1fr); }

@media (max-width: 768px) {
    .ui-grid-4, .ui-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .ui-grid-2, .ui-grid-3 { grid-template-columns: 1fr; }
    .ui-grid-4, .ui-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .ui-grid-4, .ui-grid-5 { grid-template-columns: 1fr; }
}

/* Variantes de colonnes pour les grilles de cartes de wizard (le nombre de
   colonnes etait pose en inline par-dessus la classe). */
.wiz-cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wiz-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
    .wiz-cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Bento des listes de posts en 3 colonnes (au lieu du 1.5fr + 4 par defaut). */
.pia-bento--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) {
    .pia-bento--3 { grid-template-columns: 1fr; }
}

/* Split 2 colonnes d'une modale (apercu cote a cote), empile sous 768px. */
.ui-split-2 { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) {
    .ui-split-2 { grid-template-columns: 1fr; }
}

/* Rangee de boutons courte (2-3 boutons cote a cote hors .action-bar). */
.ui-btn-row { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ============================================================
   MAILLAGE INTERNE — liens de navigation (shared/ui/nav-link.js)
   locationLink() / tabLink() : le lien herite de la couleur et de la
   graisse du contexte (un titre reste un titre), et ne se revele qu'au
   survol (accent + soulignement). Jamais de bleu lien par defaut.
   ============================================================ */
.nav-link { color: inherit; text-decoration: none; cursor: pointer; transition: color .15s ease; }
.nav-link:hover, .nav-link:focus-visible { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Curseur (input[type=range]) : le champ .si n'a ni bordure ni fond ici, il ne
   sert qu'a heriter de la largeur et de la couleur d'accent. */
.si--range { width: 100%; accent-color: var(--t1); cursor: pointer; background: transparent; border: none; padding: 0; }

/* ============================================================
   CHAMPS DE FORMULAIRE — classes annoncees par shared/ui/inputs.js
   .field-label / .field-help / .field-error n'avaient AUCUNE regle CSS :
   tout code qui suivait la doc obtenait un label sans style (constate le
   2026-08-10 en migrant views/settings.php).
   ============================================================ */
.field-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.field-label .req { color: var(--r); margin-left: 2px; }
.field-help { display: block; font-size: 12px; color: var(--t3); margin-top: 6px; line-height: 1.45; }
.field-error { display: block; font-size: 12px; color: var(--r); margin-top: 6px; }

/* ====== HISTORIQUE DES ENVOIS — engagement & délivrabilité ======
   Tuiles de tri rapide (jamais ouvert, ouvre sans cliquer, rapport non consulté),
   bascule vue par email / par destinataire, et lecture par domaine (détection du
   filtrage anti-spam, qui ne se voit pas contact par contact). */
.rmd-eng-tiles { gap: 8px; margin-bottom: 12px; }
.rmd-eng-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    cursor: pointer;
    text-align: left;
    min-width: 0;
    transition: border-color .15s ease, background .15s ease;
}
.rmd-eng-tile:hover { border-color: var(--t1); }
.rmd-eng-tile.active { border-color: var(--t1); background: rgba(0,212,255,.07); }
.rmd-eng-tile-val {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--t1);
    font-variant-numeric: tabular-nums;
}
/* Un seul accent chromatique sur ces compteurs : le rouge, reserve au cas
   qui demande vraiment une action. Le reste lit en couleur de texte. */
.rmd-eng-tile-val.warn { color: var(--t1); }
.rmd-eng-tile-val.danger { color: var(--r); }
.rmd-eng-tile-val.ok { color: var(--t1); }
.rmd-eng-tile-lbl { font-size: 12px; font-weight: 600; color: var(--t1); }
.rmd-eng-tile-help { font-size: 11px; color: var(--t3); line-height: 1.35; }

.rmd-eng-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--inp); border-radius: var(--rd-sm); }
.rmd-eng-seg button {
    border: none;
    background: transparent;
    color: var(--t2);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}
.rmd-eng-seg button.active { background: var(--card); color: var(--t1); }

.rmd-eng-note {
    font-size: 11px;
    color: var(--t3);
    line-height: 1.5;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--bdr);
    border-radius: var(--rd-sm);
    margin-bottom: 12px;
}
.rmd-eng-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: var(--rd-pill);
    white-space: nowrap;
}
.rmd-eng-badge.danger { background: var(--rbg); color: var(--r); }
.rmd-eng-badge.warn { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.rmd-eng-badge.ok { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.rmd-eng-badge.muted { background: var(--badge-soft-bg); color: var(--badge-soft-fg); border: 1px solid var(--badge-soft-bdr); }
.rmd-eng-sub { font-size: 11px; color: var(--t3); }

.rmd-eng-dom { margin-top: 16px; }
.rmd-eng-dom summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--t2); padding: 6px 0; }
.rmd-eng-dom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bdr);
    font-size: 12px;
}
.rmd-eng-dom-row:last-child { border-bottom: none; }
.rmd-eng-dom-name { flex: 1; min-width: 0; color: var(--t1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.rmd-eng-dom-bar { width: 120px; height: 6px; border-radius: var(--rd-pill); background: var(--inp); overflow: hidden; flex-shrink: 0; }
.rmd-eng-dom-bar i { display: block; height: 100%; background: var(--g); }
.rmd-eng-dom-bar i.warn { background: var(--t1); }
.rmd-eng-dom-bar i.danger { background: var(--r); }
.rmd-eng-dom-val { width: 92px; text-align: right; color: var(--t2); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (max-width: 640px) {
    .rmd-eng-dom-bar { display: none; }
}

/* >>> DESIGN-BOUSTACOM — BLOC GENERE, NE PAS EDITER A LA MAIN.
   Source : .claude/skills/design-boustacom/tokens.json — puis `npm run design:sync` <<< */
/* Neura (app SaaS) — tokens v1.8.0 (2026-09-08) */

/* palette sombre */
:root {
    --bg               : #0b1220;
    --bg2              : #111c2c;
    --card             : #162235;
    --inp              : #162235;
    --bdr              : #34465f;
    --ba               : rgba(0,212,255,.2);
    --t1               : #EDF0F7;
    --t2               : #94a3b8;
    --t3               : #a3b2c7;
    --acc              : #00d4ff;
    --primary          : #00d4ff;
    --primary-hover    : #00e8ff;
    --acc-subtle       : rgba(0,212,255,.1);
    --acc-border       : rgba(0,212,255,.2);
    --gw               : rgba(0,244,255,.25);
    --grad             : linear-gradient(135deg,#00f4ff,#1e7eff);
    --gh               : linear-gradient(135deg,#00f4ff,#1e7eff);
    --btn-p-bg         : #ffffff;
    --btn-p-ink        : #0a0a0a;
    --g                : #34D399;
    --gbg              : rgba(52,211,153,.12);
    --r                : #F87171;
    --rbg              : rgba(248,113,113,.12);
    --o                : #FBBF24;
    --obg              : rgba(251,191,36,.12);
    --p                : #EC4899;
    --pbg              : rgba(236,72,153,.12);
    --inf              : #60A5FA;
    --infbg            : rgba(96,165,250,.12);
    --overlay          : rgba(0,0,0,.2);
    --fs-xs            : 10px;
    --fs-sm            : 11px;
    --fs-base          : 13px;
    --fs-md            : 14px;
    --fs-lg            : 16px;
    --fs-xl            : 18px;
    --fs-2xl           : 22px;
    --fs-3xl           : 28px;
    --rd-xs            : 4px;
    --rd-sm            : 12px;
    --rd-md            : 16px;
    --rd               : 24px;
    --rd-lg            : 24px;
    --rd-pill          : 999px;
    --sp-xs            : 4px;
    --sp-sm            : 8px;
    --sp-md            : 16px;
    --sp-lg            : 24px;
    --sp-xl            : 32px;
    --sp-2xl           : 48px;
    --shadow-sm        : 0 1px 2px rgba(0,0,0,.20);
    --shadow-md        : 0 4px 16px rgba(0,0,0,.25);
    --shadow-lg        : 0 12px 40px rgba(0,0,0,.45);
    --shadow-xl        : 0 24px 64px rgba(0,0,0,.55);
    --tr               : .2s cubic-bezier(.25,.46,.45,.94);
    --font-body        : 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-mono        : ui-monospace,SFMono-Regular,Menlo,monospace;
    --badge-bg         : transparent;
    --badge-fg         : #EDF0F7;
    --badge-bdr        : rgba(255,255,255,.08);
    --badge-soft-bg    : transparent;
    --badge-overlay-bg : rgba(15,23,42,.72);
    --badge-soft-fg    : var(--t2);
    --badge-soft-bdr   : var(--bdr);
    --glass            : #162235;
    --glass-bg         : #162235;
    --glass-hover      : rgba(255,255,255,.08);
    --glass-border     : #34465f;
    --glass-blur       : blur(12px);
    --glass-scrim-bg   : rgba(0,0,0,.55);
    --glass-scrim-blur : blur(4px);
    --glass-heavy-blur : blur(48px) saturate(1.8) brightness(1.04);
    --bg1              : #162235;
    --card-hover       : #213149;
    --subtle-bg        : #111c2c;
}

/* palette claire */
[data-theme="light"] {
    --bg               : #eef3f9;
    --bg2              : #f5f7fb;
    --card             : #ffffff;
    --inp              : #ffffff;
    --bdr              : #d5deea;
    --ba               : rgba(0,212,255,.28);
    --t1               : #0b1b34;
    --t2               : #475569;
    --t3               : #53657e;
    --acc              : #0e7490;
    --primary          : #0e7490;
    --primary-hover    : #155e75;
    --acc-border       : rgba(0,212,255,.28);
    --btn-p-bg         : #0a0a0a;
    --btn-p-ink        : #ffffff;
    --g                : #166534;
    --r                : #b91c1c;
    --o                : #d97706;
    --p                : #db2777;
    --inf              : #2563eb;
    --infbg            : rgba(37,99,235,.08);
    --overlay          : rgba(11,27,52,.03);
    --shadow-sm        : 0 1px 3px rgba(11,27,52,.05);
    --shadow-md        : 0 1px 3px rgba(11,27,52,.05), 0 10px 28px rgba(11,27,52,.08);
    --shadow-lg        : 0 12px 40px rgba(11,27,52,.08);
    --badge-bg         : transparent;
    --badge-fg         : #0b1b34;
    --badge-bdr        : rgba(11,27,52,.09);
    --badge-soft-bg    : transparent;
    --badge-overlay-bg : rgba(15,23,42,.68);
    --badge-soft-fg    : var(--t2);
    --badge-soft-bdr   : var(--bdr);
    --glass            : #ffffff;
    --glass-bg         : #ffffff;
    --glass-hover      : rgba(0,212,255,.03);
    --glass-border     : #d5deea;
    --glass-blur       : none;
    --glass-scrim-bg   : rgba(11,27,52,.35);
    --glass-scrim-blur : blur(4px);
    --bg1              : #ffffff;
    --card-hover       : #e7edf5;
    --subtle-bg        : #f5f7fb;
}
/* <<< FIN DU BLOC GENERE DESIGN-BOUSTACOM >>> */

/* Note sous une grille de cases de rapport. Elle dit ce que la case ne peut
   pas dire d'elle-meme : cocher « Visibilité IA » ne suffit pas, la section a
   besoin d'un scan GEO sur la fiche. */
.rpt-sec-note {
    margin-top: var(--sp-sm);
    font-size: var(--fs-sm);
    color: var(--t3);
    line-height: 1.5;
}

.rpt-sec-note strong { color: var(--t2); }

/* Action workspaces: only layout, shared brand tokens stay in tokens.json. */
.workspace-tabs { display: flex; width: fit-content; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.workspace-toolbar { display: flex; align-items: flex-end; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-md); }
.workspace-toolbar .field-group { flex: 1; min-width: 0; margin-bottom: 0; }
.workspace-list { min-width: 0; }
.workspace-list td { overflow-wrap: anywhere; }
.workspace-list .btn { white-space: normal; justify-content: center; }
.workspace-name { border: 0; padding: 0; background: none; color: var(--t1); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.workspace-name:hover { text-decoration: underline; }
.workspace-name:focus-visible { outline: 2px solid var(--acc); outline-offset: var(--sp-xs); }
@media (max-width: 640px) {
    .workspace-toolbar { align-items: stretch; flex-direction: column; }
    .workspace-list td { padding: var(--sp-sm); }
}

/* Guided workspaces use shared tokens, with vertical steps on narrow screens. */
.workflow-stepper { display:flex; gap:var(--sp-sm); list-style:none; padding:0; margin:var(--sp-md) 0 var(--sp-lg); }
.workflow-stepper li { flex:1; min-width:0; }
.workflow-stepper .workflow-step { width:100%; height:100%; justify-content:flex-start; text-align:left; white-space:normal; padding:var(--sp-md); gap:var(--sp-sm); }
.workflow-stepper .btn.workflow-step.is-current { border-color:var(--acc); color:var(--t1); background:var(--bg2); }
.workflow-step-number { font-weight:700; }
.prospect-next h2 { margin:var(--sp-sm) 0; }
.prospect-next p { color:var(--t2); max-width:70ch; line-height:1.6; }
.prospect-other { margin-top:var(--sp-xl); }
.prospect-step { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-md); padding:var(--sp-md) 0; border-bottom:1px solid var(--bdr); }
.client-answer { margin-bottom:var(--sp-md); overflow-wrap:anywhere; }
@media (max-width:640px) {
    .workflow-stepper { flex-direction:column; }
    .prospect-step { align-items:stretch; flex-direction:column; }
}

/* Invitation: full-width editor, followed by the preview on every screen. */
.onb-split { grid-template-columns:minmax(0,1fr); min-height:0; }
.onb-split .onb-editor { min-width:0; padding-bottom:0; }
.onb-split .onb-preview-pane { display:flex; position:static; max-height:none; min-width:0; }
.onb-split .onb-preview-card { display:flex; flex:none; }
.onb-split .onb-preview-frame-wrap { max-height:none; }
.onb-split .onb-preview-frame-wrap iframe { height:700px; min-height:0; max-width:100%; }
.onb-split .onb-progress-label,
.onb-split .onb-progress-status,
.onb-split .onb-progress-dot,
.onb-split .onb-choice-desc,
.onb-split .onb-preview-hint { color:var(--t2); }
.onb-split .onb-progress-step.current .onb-progress-label { color:var(--t1); }
.onb-split .onb-progress-step.current .onb-progress-dot,
.onb-split .onb-progress-step.done .onb-progress-dot { background:var(--btn-p-bg); color:var(--btn-p-ink); border-color:var(--btn-p-bg); }
#acq-sub-tabs.workflow-navigation { display:block; width:100%; min-width:0; }
.workflow-navigation > nav { width:100%; }
.workflow-navigation .workflow-stepper { margin:0; }
.rmd-toolbar.workflow-navigation-wrap { display:block; padding:0; border:0; background:transparent; }
.workflow-stepper .btn.workflow-step { background:var(--card); color:var(--t1); border-color:var(--t3); }
.workflow-stepper .btn.workflow-step.is-current { background:var(--btn-p-bg); color:var(--btn-p-ink); border-color:var(--btn-p-bg); }
@media (max-width:640px) {
    .onb-split .onb-progress { flex-wrap:wrap; gap:var(--sp-sm); }
    .onb-split .onb-progress-step { flex:1 1 40%; min-width:0; }
    .onb-split .onb-progress-label { display:block; white-space:normal; }
    .onb-split .onb-progress-step::after { display:none; }
    .onb-split .onb-progress-status { padding-left:0; }
}

.prospect-modes { margin-bottom:var(--sp-lg); }
.prospect-modes .btn { flex:1 1 220px; }
#prospect-auto-status { margin-bottom:var(--sp-lg); }
#prospect-auto-actions details { margin-top:var(--sp-md); }

/* Workspaces share one reading rhythm. Descriptions are content, never muted metadata. */
.workspace-surface { --t3:var(--t2); font-size:var(--fs-md); }
.workspace-surface .pia-header { padding:0; margin-bottom:var(--sp-lg); gap:var(--sp-lg); }
.workspace-surface .pia-header-title { font-size:var(--fs-3xl); line-height:1.25; }
.workspace-surface .pia-header-sub { color:var(--t2); font-size:var(--fs-md); line-height:1.6; margin-top:var(--sp-sm); max-width:75ch; }
.workspace-surface .field-help { color:var(--t2); font-size:var(--fs-base); line-height:1.6; }
.workspace-surface h2 { font-size:var(--fs-2xl); line-height:1.35; }
.workspace-surface h3 { font-size:var(--fs-lg); line-height:1.4; margin-bottom:var(--sp-md); }
.workspace-surface p { line-height:1.6; }
.workspace-surface .rmd-card-body { padding:var(--sp-lg); }
.workspace-surface .rmd-card-body > p { margin:var(--sp-sm) 0 var(--sp-lg); max-width:80ch; }
.workspace-surface .rmd-card-body > .action-bar,
.workspace-surface p + .action-bar,
.workspace-surface p + .btn { margin-top:var(--sp-md); }
.workspace-surface .workspace-list td { padding:var(--sp-md); }
.workspace-surface .workspace-list td .btn { margin-top:var(--sp-sm); }
.workspace-surface .workspace-list .field-help { margin-top:var(--sp-sm); }
.workspace-surface .btn.bs { background:var(--card); color:var(--t1); border-color:var(--bdr); }
.workspace-surface .btn.bs:hover { background:var(--bg2); border-color:var(--t1); }
.workspace-surface .btn { min-height:40px; }
.workspace-surface .prospect-modes { gap:var(--sp-lg); border-bottom:1px solid var(--t2); margin:0 0 var(--sp-xl); padding:0; }
.workspace-surface .prospect-modes .workspace-mode { flex:0 1 auto; background:transparent; border:0; border-bottom:3px solid transparent; border-radius:0; padding:var(--sp-md) var(--sp-xs); color:var(--t2); box-shadow:none; font-size:var(--fs-md); }
.workspace-surface .prospect-modes .workspace-mode.is-selected { color:var(--t1); border-bottom-color:var(--acc); }
.workspace-status { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-lg); padding:var(--sp-lg); border:1px solid var(--t2); border-radius:var(--rd); background:var(--card); }
.workspace-status-label { display:flex; flex:1 1 260px; align-items:center; gap:var(--sp-md); }
.workspace-status-label svg { flex-shrink:0; }
.workspace-status-label strong { display:block; font-size:var(--fs-md); color:var(--t1); }
.workspace-status-label span { display:block; color:var(--t2); margin-top:var(--sp-xs); font-size:var(--fs-base); }
.workspace-daily { display:flex; align-items:center; gap:var(--sp-md); flex:0 1 260px; }
.workspace-daily strong { font-size:var(--fs-3xl); line-height:1; color:var(--t1); }
.workspace-daily span { font-size:var(--fs-base); color:var(--t2); max-width:24ch; line-height:1.5; }
.workspace-section { margin-top:var(--sp-xl); }
.workspace-section-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--sp-lg); margin-bottom:var(--sp-lg); }
.workspace-section-heading h2 { margin:var(--sp-sm) 0; }
.workspace-section-heading p { color:var(--t2); margin:0; }
.workspace-section-heading > svg { flex-shrink:0; color:var(--t1); }
.workspace-eyebrow { display:block; color:var(--t2); font-size:var(--fs-base); font-weight:600; }
.workspace-destinations { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-md); }
.workspace-destination { display:flex; flex-direction:column; align-items:stretch; text-align:left; gap:var(--sp-sm); padding:var(--sp-lg); border:1px solid var(--t2); border-radius:var(--rd); background:var(--card); color:var(--t1); cursor:pointer; font:inherit; min-width:0; }
.workspace-destination:hover { background:var(--bg2); border-color:var(--acc); }
.workspace-destination:focus-visible { outline:2px solid var(--acc); outline-offset:var(--sp-xs); }
.workspace-destination-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-sm); }
.workspace-destination-top strong { font-size:var(--fs-3xl); line-height:1; }
.workspace-destination-title { font-size:var(--fs-lg); font-weight:600; }
.workspace-destination-description { font-size:var(--fs-base); color:var(--t2); line-height:1.5; }
.workspace-section-footer { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-md); margin-top:var(--sp-lg); }
.workspace-disclosure,
.workspace-surface details.prospect-other { border-top:1px solid var(--t2); padding-top:var(--sp-lg); margin-top:var(--sp-xl); }
.workspace-surface summary { color:var(--t1); cursor:pointer; font-weight:600; line-height:1.5; }
.workspace-surface details[open] > .action-bar { margin-top:var(--sp-lg); }
.workspace-surface .prospect-next { border-left:3px solid var(--acc); }
.workspace-surface .prospect-next > .btn { margin-top:var(--sp-md); }
.workspace-surface #prospect-workspace-pages { margin-top:var(--sp-lg); gap:var(--sp-md); }
.workspace-surface .workflow-stepper { margin-top:var(--sp-lg); margin-bottom:var(--sp-xl); }
.workspace-surface .workflow-stepper .workflow-step { border-radius:var(--rd-sm); min-height:64px; }
@media (max-width:640px) {
    .workspace-surface .pia-header-title { font-size:var(--fs-2xl); }
    .workspace-surface .prospect-modes { gap:var(--sp-md); }
    .workspace-surface .prospect-modes .workspace-mode { flex:1 1 0; min-width:0; white-space:normal; }
    .workspace-destinations { grid-template-columns:minmax(0,1fr); }
    .workspace-status { align-items:stretch; }
    .workspace-status > .btn { width:100%; justify-content:center; }
    .workspace-daily { flex-basis:100%; }
    .workspace-surface .rmd-card-body { padding:var(--sp-md); }
}
.workspace-kinds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-md); margin-bottom:var(--sp-lg); }
.workspace-kind { display:flex; flex-direction:column; gap:var(--sp-sm); text-align:left; padding:var(--sp-md); font:inherit; border:1px solid var(--t2); border-radius:var(--rd-sm); background:var(--card); color:var(--t1); cursor:pointer; }
.workspace-kind span { font-size:var(--fs-base); color:var(--t2); line-height:1.5; }
.workspace-kind.is-selected { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); }
.workspace-kind:focus-visible { outline:2px solid var(--acc); outline-offset:var(--sp-xs); }
@media(max-width:640px) { .workspace-kinds { grid-template-columns:minmax(0,1fr); } }
/* A selected step keeps its foreground/background pair, including on hover. */
.workspace-surface .workflow-stepper .btn.workflow-step.is-current,
.workspace-surface .workflow-stepper .btn.workflow-step.is-current:hover {
    background:var(--btn-p-bg); color:var(--btn-p-ink); border-color:var(--btn-p-bg);
}

/* One current instruction, brand-rounded controls, no inferred completion. */
.workspace-surface .workspace-kind { border-radius:var(--rd-lg); }
.workspace-surface .workflow-stepper .btn.workflow-step { border-radius:var(--rd-pill); padding:var(--sp-md); gap:var(--sp-md); }
.workspace-surface .workflow-step-number { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 32px; border:1px solid currentColor; border-radius:var(--rd-pill); }
.manual-current-step { border-radius:var(--rd-lg); }
.manual-current-step h2 { margin:var(--sp-md) 0; }
.workspace-surface .manual-current-step .rmd-card-body { padding:var(--sp-xl); }
.manual-step-navigation { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--sp-md); margin-top:var(--sp-lg); }
.manual-step-navigation > .btn:first-child:not(:last-child) { margin-right:auto; }
.manual-resume[open] #prospect-workspace-home { margin-top:var(--sp-lg); }
@media(max-width:640px) {
    .workspace-surface .manual-current-step .rmd-card-body { padding:var(--sp-lg); }
    .manual-current-step .btn { width:100%; justify-content:center; }
}

/* The actual prospect search lives directly inside the manual workspace. */
#manual-search-content .rmd-link-alt { display:block; margin-top:var(--sp-md); text-align:left; }
#manual-search-content .rmd-btn { border-radius:var(--rd-pill); }
#manual-search-content .rmd-field-hint { font-size:13px; color:var(--t2); }

.tunnel-workspace { display:grid; gap:var(--sp-xl); }
.tunnel-workspace h3 { margin:0 0 var(--sp-md); }
.tunnel-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-lg); margin:var(--sp-lg) 0; }
.tunnel-metrics > div { display:grid; gap:var(--sp-sm); }
.tunnel-metrics strong { font-size:var(--fs-2xl); color:var(--t1); }
.tunnel-metrics span { color:var(--t2); }
.tunnel-search { display:flex; flex-wrap:wrap; gap:var(--sp-lg); margin-bottom:var(--sp-md); }
.tunnel-search > div { flex:1 1 260px; min-width:0; }
.tunnel-search label { display:block; margin-bottom:var(--sp-sm); }
.tunnel-workspace .acq-t-table td { max-width:320px; overflow-wrap:anywhere; }
.tunnel-workspace .acq-t-table .acq-rel-dots { flex-wrap:wrap; }

.automatic-health { margin-bottom:var(--sp-lg); }
.automatic-health--error { border-color:var(--r); }
.automatic-health h2 { margin:var(--sp-md) 0; }
.automatic-flow { list-style:none; padding:0; margin:var(--sp-xl) 0; display:grid; gap:var(--sp-lg); }
.automatic-flow li { display:flex; gap:var(--sp-md); align-items:flex-start; }
.automatic-flow h3 { margin:0 0 var(--sp-sm); }
.automatic-flow p { margin:var(--sp-sm) 0; }

/* Prospect activity stays visible without opening each record. */
.prospect-inline-activity { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-md); margin:var(--sp-md) 0; }
.prospect-inline-activity dt { font-weight:600; color:var(--t1); margin-bottom:var(--sp-xs); }
.prospect-inline-activity dd { margin:0; color:var(--t2); overflow-wrap:anywhere; }
.prospect-inline-answers { border-top:1px solid var(--bdr); padding-top:var(--sp-md); }
@media(max-width:640px) { .prospect-inline-activity { grid-template-columns:1fr; } }

.prospect-activity-filters { display:flex; flex-wrap:wrap; gap:var(--sp-sm); margin:var(--sp-md) 0; }
.workspace-surface .workspace-destination.prospect-needs-action { border-color:var(--r); background:var(--rbg); }
.workspace-surface .prospect-needs-action .workspace-destination-top strong,
.workspace-surface .prospect-needs-action .workspace-destination-title { color:var(--r); }
.workspace-surface #prospect-auto-actions .workspace-section { margin-top:var(--sp-md); margin-bottom:var(--sp-lg); }
.workspace-surface #prospect-auto-actions .workspace-destination { padding:var(--sp-md); gap:var(--sp-sm); }
.workspace-surface .prospect-inline-activity { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-sm); font-size:var(--fs-xs); }
@media(max-width:640px) { .workspace-surface .prospect-inline-activity { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.prospect-performance { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--sp-md); margin:var(--sp-md) 0; }
.prospect-performance > div { display:flex; flex-direction:column; gap:var(--sp-xs); padding:var(--sp-md); background:var(--bg2); border:1px solid var(--bdr); border-radius:var(--rd-md); }
.prospect-performance strong { font-size:var(--fs-xl); }
.prospect-performance small { color:var(--t2); }
.prospect-hot { color:var(--r); }
#prospect-workspace-list .ui-table td { padding:var(--sp-sm); font-size:var(--fs-sm); }

/* Audit inbox has its own surfaces, independent of legacy reminder card resets. */
.audit-inbox-summary { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-md); padding:var(--sp-lg); margin:var(--sp-lg) 0; border:1px solid var(--bdr); border-radius:var(--rd-lg); background:var(--bg2); }
.audit-inbox-summary > div { display:grid; gap:var(--sp-xs); }
.audit-inbox-summary strong { font-size:var(--fs-xl); }
.audit-inbox-summary p { margin:0; color:var(--t2); }
.audit-inbox { display:grid; gap:var(--sp-lg); }
.audit-request-card { border:1px solid var(--bdr); border-radius:var(--rd-lg); background:var(--card); overflow:hidden; }
.audit-request-card > header { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-md); padding:var(--sp-lg); border-bottom:1px solid var(--bdr); }
.audit-request-heading { display:flex; gap:var(--sp-md); flex:1 1 60%; min-width:0; }
.audit-request-heading svg { flex-shrink:0; color:var(--t2); }
.audit-request-heading h2 { margin:0; font-size:var(--fs-lg); line-height:1.5; overflow-wrap:anywhere; }
.audit-request-badge { padding:var(--sp-xs) var(--sp-md); border-radius:var(--rd-pill); background:var(--bg2); border:1px solid var(--bdr); font-size:var(--fs-sm); font-weight:600; }
.audit-request-body { display:grid; gap:var(--sp-lg); padding:var(--sp-lg); }
.audit-request-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-lg); margin:0; }
.audit-request-meta dt { color:var(--t2); font-size:var(--fs-sm); margin-bottom:var(--sp-xs); }
.audit-request-meta dd { margin:0; overflow-wrap:anywhere; font-weight:500; }
.audit-request-message { background:var(--bg2); border-radius:var(--rd-md); padding:var(--sp-md); }
.audit-request-message h3 { font-size:var(--fs-sm); margin:0 0 var(--sp-sm); color:var(--t2); }
.audit-request-message p { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.audit-request-card > footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-md); border-top:1px solid var(--bdr); padding:var(--sp-lg); background:var(--bg2); }
.audit-request-card > footer p { margin:var(--sp-xs) 0 0; color:var(--t2); }
@media(max-width:640px) { .audit-request-meta { grid-template-columns:1fr; } .audit-request-card > footer .btn { width:100%; justify-content:center; } }

/* Message review uses the common disclosure, card and action controls. */
.message-review { max-width:880px; margin-inline:auto; display:grid; gap:var(--sp-md); }
.email-review { overflow-wrap:anywhere; }
.email-review ul { max-height:18rem; overflow-y:auto; padding-inline-start:var(--sp-xl); }
.email-review .rmd-card-body { padding:var(--sp-lg); }
#bc-draft-feedback:empty { display:none; }

/* Audit email preview keeps its header reachable, including on narrow screens. */
.audit-email-preview .modal-card { position: relative; inset: auto; max-height: 90dvh; border-radius: var(--rd-lg); animation: none; transform: none; }
.audit-email-preview .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-shrink: 0; }
.audit-email-preview .modal-header .modal-btn { width: auto; flex-shrink: 0; }
.audit-email-preview .modal-body { min-height: 0; }
.audit-email-preview .workspace-disclosure { margin-top: 0; }
.audit-email-preview .eml-live-block .epv { min-height: 55dvh; }

/* Sent audits and prospect follow-up, scoped to this workflow. */
.sent-audit-list { margin-top: var(--sp-lg); }
.sent-audit-list table { table-layout: fixed; }
.sent-audit-list th:first-child { width: 30%; }
.sent-audit-list th:nth-child(2) { width: 16%; }
.sent-audit-list th:nth-child(3) { width: 22%; }
.sent-audit-list th:nth-child(4) { width: 18%; }
.sent-audit-list th:last-child { width: 14%; }
.sent-audit-list .workspace-name { white-space: normal; overflow-wrap: anywhere; font-size: var(--fs-base); line-height: 1.5; text-align: left; }
.sent-audit-list td { overflow-wrap: anywhere; }
.prospect-followup-modal .modal-card { position: relative; inset: auto; max-height: 90dvh; border-radius: var(--rd-lg); animation: none; transform: none; }
.prospect-followup-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); flex-shrink: 0; }
.prospect-followup-modal .modal-header .modal-btn { width: auto; flex-shrink: 0; }
.prospect-followup-modal .modal-body { min-height: 0; }
.prospect-followup { display: grid; gap: var(--sp-lg); color: var(--t1); }
.prospect-followup .acq-ans-contact { margin: 0; padding: var(--sp-lg); background: var(--bg2); border: 1px solid var(--bdr); border-radius: var(--rd); overflow-wrap: anywhere; }
.prospect-followup .acq-ans-name { font-size: var(--fs-lg); line-height: 1.5; margin-bottom: var(--sp-sm); }
.prospect-followup .acq-ans-name span { display: block; font-size: var(--fs-base); color: var(--t2); }
.prospect-followup-card { padding: var(--sp-lg); border: 1px solid var(--bdr); border-radius: var(--rd); background: var(--card); }
.prospect-followup h2 { font-size: var(--fs-lg); color: var(--t1); margin: 0 0 var(--sp-sm); }
.prospect-followup p { margin: 0 0 var(--sp-md); line-height: 1.5; }
.prospect-followup .ui-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-md); }
.prospect-followup-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-md); margin-top: var(--sp-md); }
.prospect-followup-timeline > div { display: grid; gap: var(--sp-sm); padding: var(--sp-md); border-radius: var(--rd-sm); background: var(--bg2); }
.prospect-followup-timeline strong { font-size: var(--fs-base); }
.prospect-followup .workspace-disclosure { margin: 0; }
.prospect-followup-history { display: grid; gap: var(--sp-lg); padding-top: var(--sp-lg); }
.prospect-followup-history .acq-ans-q { padding: var(--sp-md) 0; }
@media (max-width: 640px) {
 .sent-audit-list table { min-width: 720px; }
 .prospect-followup-timeline { grid-template-columns: 1fr; }
 .prospect-followup .ui-btn-row .btn { width: 100%; white-space: normal; }
}

.sent-audit-list .workspace-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sent-audit-list .ui-table td { font-size: var(--fs-base); }
.prospect-followup-timeline .field-help { color: var(--t2); }

.sent-audit-filters { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-lg); padding-top: var(--sp-lg); border-top: 1px solid var(--bdr); }
.audit-followup-badge { display: inline-flex; align-items: center; gap: var(--sp-sm); width: fit-content; padding: var(--sp-xs) var(--sp-sm); border: 1px solid var(--acc); border-radius: var(--rd-pill); background: var(--badge-bg); color: var(--t1); font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
.audit-followup-badge::before { content: ''; width: var(--sp-sm); height: var(--sp-sm); border-radius: var(--rd-pill); background: var(--acc); flex-shrink: 0; }
.workspace-destination-top .audit-followup-badge { margin-left: auto; }
.sent-audit-list .audit-followup-badge + .field-help { margin-top: var(--sp-sm); }

/* Prospect dossiers, shared origin and compact mobile reading. */
.prospect-inbox-toolbar,.prospect-inbox-tabs,.prospect-inbox-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-sm); }
.prospect-inbox-toolbar { justify-content:space-between; margin:var(--sp-md) 0; }
.prospect-inbox-list { display:grid; gap:var(--sp-md); }
.prospect-inbox-card { min-width:0; border:1px solid var(--bdr); border-radius:var(--rd-md); padding:var(--sp-md); background:var(--card); }
.prospect-inbox-card header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--sp-sm); flex-wrap:wrap; }
.prospect-inbox-card header > div { min-width:0; flex:1; }
.prospect-inbox-card h2 { margin:0; font-size:var(--fs-md); line-height:1.4; overflow-wrap:anywhere; }
.prospect-inbox-card p { margin:var(--sp-sm) 0; overflow-wrap:anywhere; }
.prospect-inbox-card header p { color:var(--t2); font-size:var(--fs-sm); }
.prospect-contact,.prospect-request-message { font-size:var(--fs-sm); overflow-wrap:anywhere; }
.prospect-request-message { white-space:pre-wrap; }
.prospect-more { width:100%; color:var(--t2); font-size:var(--fs-sm); }
.prospect-more summary { cursor:pointer; padding:var(--sp-sm) 0; }
.prospect-more .action-bar { margin-top:var(--sp-sm); }
.audit-dossier-heading > div { min-width:0; }
.audit-dossier-heading .stit { overflow-wrap:anywhere; }
.audit-dossier-context { padding:var(--sp-md); border:1px solid var(--bdr); border-radius:var(--rd-md); margin-bottom:var(--sp-md); }
.audit-dossier-context p { margin:0; overflow-wrap:anywhere; }
.audit-version-list > div { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-sm); margin:var(--sp-sm) 0; }
.audit-version-list span { min-width:0; overflow-wrap:anywhere; }
.audit-send-panel > div:first-child { flex-wrap:wrap; gap:var(--sp-sm); }
.audit-send-panel > div:first-child > div { min-width:0; overflow-wrap:anywhere; }
@media(max-width:640px) {
    .prospect-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-xs); }
    .prospect-modes .btn { min-width:0; white-space:normal; padding:var(--sp-sm); font-size:var(--fs-sm); line-height:1.3; }
    .prospect-inbox-tabs { gap:var(--sp-xs); }
    .prospect-inbox-tabs .btn { padding:var(--sp-sm); font-size:var(--fs-sm); }
    .prospect-inbox-card header { flex-direction:column; }
    .prospect-inbox-actions > .btn { flex:1; min-width:0; white-space:normal; }
    .audit-progress .workflow-stepper { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-xs); }
    .audit-progress .workflow-stepper .workflow-step { min-height:0; padding:var(--sp-sm); flex-direction:column; gap:var(--sp-xs); border-radius:var(--rd-md); font-size:var(--fs-sm); text-align:center; }
    .audit-progress .workflow-step-number { width:24px; height:24px; flex-basis:24px; }
    .audit-send-panel > div { min-width:0; }
    .audit-send-panel input,.audit-send-panel select,.audit-send-panel .btn { max-width:100%; }
    .audit-send-panel select { width:100%; min-width:0; }
    .audit-send-panel button { white-space:normal; overflow-wrap:anywhere; }
    .audit-dossier-heading .action-bar { width:100%; }
    .audit-dossier-heading .action-bar .btn { flex:1 1 45%; white-space:normal; }
    #workspace-audit-steps .workflow-stepper { flex-direction:row; }
    #workspace-audit-steps .workflow-stepper .workflow-step { min-height:0; padding:var(--sp-sm); border-radius:var(--rd-md); }
}
.audit-detail-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-md); margin-bottom:var(--sp-lg); }
@media(max-width:640px) {
    .audit-detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .audit-detail-metrics > div { min-width:0; overflow-wrap:anywhere; }
    .audit-detail-metrics svg { flex-shrink:0; }
}

/* Named sections reuse the same underlined navigation as the client tabs. */
.section-tabs { display:flex; align-items:center; gap:var(--sp-xs); max-width:100%; min-width:0; overflow-x:auto; margin:0 0 var(--sp-lg); padding:0; border-bottom:1px solid var(--bdr); background:transparent; }
.section-tab { flex:0 0 auto; min-height:44px; font-family:inherit; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; cursor:pointer; }
.section-tab[aria-pressed="true"] { color:var(--t1); font-weight:700; border-bottom-color:var(--t1); }
.section-tab:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; }
.section-tab-count { font-size:var(--fs-sm); }
/* Notifications share one treatment; totals and historical counts stay neutral. */
.notification-badge,
.section-tab-count.notification-badge,
.ctr-section-count.notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: var(--rd-pill);
    background: var(--r);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.4;
    flex-shrink: 0;
}
.prospect-inbox-toolbar > .section-tabs { margin:0; }
.prospect-secondary-actions { flex-basis:100%; border-top:1px solid var(--bdr); padding-top:var(--sp-sm); }
.audit-dossier-heading { align-items:flex-start; }
.audit-dossier-heading > div:first-child { flex-wrap:wrap; }
.audit-dossier-heading .action-bar { gap:var(--sp-sm); }
.audit-dossier-context { background:var(--card); }
.audit-diagnostic-body { padding:0; }
.audit-send-panel { display:grid; grid-template-columns:minmax(0, 3fr) minmax(280px, 2fr); align-items:start; gap:var(--sp-lg); }
.audit-send-panel[hidden],#workspace-audit-read[hidden],#workspace-audit-history[hidden] { display:none; }
.audit-send-panel .rmd-card { margin:0; min-width:0; }
.audit-message-sidebar { display:grid; gap:var(--sp-lg); min-width:0; }
.audit-send-panel .rmd-card-head { padding:var(--sp-lg); }
.audit-send-panel .rmd-card-head h2 { margin:0; font-size:var(--fs-lg); }
.audit-send-panel .rmd-card-head p { margin:var(--sp-xs) 0 0; font-size:var(--fs-base); color:var(--t2); }
.audit-send-panel .rmd-card-body { padding:var(--sp-lg); }
.audit-send-panel .ec-field { margin-bottom:var(--sp-lg); }
.audit-send-panel input,.audit-send-panel select { width:100%; min-width:0; }
.audit-send-panel .tp-trigger { width:100%; }
.audit-delivery-status { overflow-wrap:anywhere; color:var(--g); }
.audit-message-sidebar .btn { width:100%; }
.audit-found-emails { border-top:1px solid var(--bdr); padding-top:var(--sp-md); }
section.ctr-modes .ctr-modes-summary { cursor:default; }
@media(max-width:768px) {
    .audit-send-panel { grid-template-columns:minmax(0,1fr); }
    .audit-send-panel input,.audit-send-panel select { font-size:var(--fs-lg); }
    .audit-send-panel .rmd-card-head,.audit-send-panel .rmd-card-body { padding:var(--sp-md); }
    .audit-version-list > div { flex-wrap:wrap; }
    .prospect-inbox-toolbar > .section-tabs { width:100%; }
}

.audit-email-preview section[hidden] { display:none; }

[data-section-panel][hidden] { display:none; }

.audit-dossier-heading .stit { margin:0; font-size:var(--fs-2xl); line-height:1.35; }

.audit-message-sidebar .rmd-card-body > .btn { margin-top:var(--sp-md); }

.section-tabs--wrap { flex-wrap:wrap; overflow:visible; }
.section-tabs--wrap .section-tab { flex:1 1 auto; white-space:normal; }
@media(max-width:640px) {
    .section-tabs--wrap .section-tab { flex-basis:calc(50% - var(--sp-xs)); }
}

/* The client identity is context; the current module is the primary workspace. */
.ds-client-overview-link { margin:var(--sp-md) 0 0; border-top:1px solid var(--bdr); padding-top:var(--sp-md); font-size:var(--fs-base); }
.ds-client-overview-link a { color:var(--t2); font-weight:600; text-decoration:underline; text-underline-offset:var(--sp-xs); }
#app-breadcrumb-extra { display:contents; }

/* Short entries stay scannable; long evidence belongs to the detail view. */
.ui-compact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--sp-lg); list-style:none; margin:0; padding:0; }
.ui-compact-grid > li { min-width:0; border-bottom:1px solid var(--bdr); padding:var(--sp-xs) 0; }
.ui-compact-count:empty { display:none; }
@media(max-width:1024px) { .ui-compact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .ui-compact-grid { grid-template-columns:minmax(0,1fr); } }

/* Renewal follow-up: send, signal and response are separate facts. */
.ctr-renewal-followup { margin-top:var(--sp-sm); padding:var(--sp-sm); border-radius:var(--rd-sm); background:var(--bg2); color:var(--t2); }
.ctr-renewal-followup p { margin:var(--sp-sm) 0; }
.ctr-renewal-tracking { display:flex; flex-wrap:wrap; gap:var(--sp-xs); margin-top:var(--sp-xs); }
.ctr-renewal-tracking .rmd-row-tag { white-space:normal; }

.ctr-empty-compact { padding:var(--sp-md); min-height:0; }
.ctr-empty-compact .eml-empty-title { font-size:var(--fs-md); }
.ctr-empty-compact .eml-empty-desc { margin-top:var(--sp-xs); }