/* ============================================================================
   IA-SEO Back-office — Feuille de styles (refonte « analytics SaaS clair »)
   ----------------------------------------------------------------------------
   Remplace l'ancien app.css. Mêmes noms de classes qu'avant (aucun markup à
   changer pour la bascule de thème) + nouvelles classes pour la refonte SEA :
   .metric-grid/.metric-card, .seg/.seg-btn, .delta, .rank-badge, .pacing.

   Changements clés vs l'ancienne version :
   - Thème CLAIR (fonds blancs, fines bordures grises, accent bleu).
   - Correctifs : --color-text n'est plus le vert #179c76 (texte illisible) ;
     suppression du override `a { color:#00E5A0 !important }` qui forçait tous
     les liens en vert fluo.
   - Chiffres en JetBrains Mono + tabular-nums (lisibilité des tableaux).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Surfaces */
    --color-bg: #f4f5f7;          /* canvas */
    --color-surface: #ffffff;     /* cartes, navbar */
    --color-surface-2: #f7f8fa;   /* en-têtes de tableau, fonds subtils */
    --color-bg-subtle: #f7f8fa;   /* alias utilisé par certains templates */
    --color-border: #e7e9ed;
    --color-border-strong: #e2e5ea;

    /* Marque & sémantique */
    --color-primary: #2f6bf6;
    --color-primary-hover: #2456d6;
    --color-primary-soft: #eef3fe; /* fond actif bleu très clair */
    --color-accent: #0f9d6b;       /* vert positif/marque */
    --color-success: #0f9d6b;
    --color-danger: #e0445b;
    --color-warning: #d9892a;

    /* Texte */
    --color-text: #1f242c;          /* corps */
    --color-text-strong: #11151c;   /* chiffres mis en avant */
    --color-text-secondary: #586172;
    --color-text-muted: #828b99;    /* libellés, métadonnées */

    --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --radius: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
    --shadow: 0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
    --shadow-lg: 0 12px 32px rgba(16,24,40,.10);

    /* SF1.25 (FR-SF38) — tokens dédiés au style des tableaux SEA (.table-sea), dérivés de la
       charte graphique e-conception (bleu pâle #BDCCEA / bleu ciel #65B0E5), SANS toucher aux
       variables globales ci-dessus (palette « SaaS analytique » de l'app, conservée telle
       quelle — NFR-SF5). Cohabitation assumée, pas de re-skin global. */
    --table-zebra-bg: rgba(189, 204, 234, .16);   /* #BDCCEA à faible opacité, lisible sur --color-surface */
    --table-col-separator: rgba(101, 176, 229, .35); /* #65B0E5 atténué, discret vs --color-border-strong */
}

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

/* L'attribut `hidden` doit primer sur TOUTE déclaration d'affichage de la feuille de styles.
   Sans cette règle, la règle navigateur `[hidden] { display: none }` est battue dès qu'un élément
   porte un `display` d'auteur : à spécificité égale l'auteur gagne, et un `style="display:flex"`
   inline gagne toujours. Conséquence observée : les filtres de recherche des listes (sélecteur de
   mots-clés, sélection du référentiel catalogue) posaient bien l'attribut sans que rien ne
   disparaisse à l'écran. Deux composants avaient déjà leur rustine locale
   (`.tab-panel[hidden]`, `.sea-card[hidden]`) — cette règle les rend inutiles et couvre les
   suivants. */
[hidden] { display: none !important; }

body {
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* Scrollbars discrètes */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #d2d6dd; border-radius: 7px; border: 3px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: #c0c5cf; }
::-webkit-scrollbar-track { background: transparent; }

/* ===================== Navbar (global) ===================== */
.navbar {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1.75rem;
    height: 58px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.navbar-brand a {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: .01em;
}
.navbar-brand a:hover { text-decoration: none; }
.navbar-menu { display: flex; gap: .25rem; flex: 1; }
.navbar-end { display: flex; align-items: center; gap: 1rem; }

.nav-link {
    padding: .42rem .8rem;
    border-radius: var(--radius);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: color .12s, background .12s;
}
.nav-link:hover { color: var(--color-text); background: var(--color-surface-2); text-decoration: none; }
.nav-link.active { color: var(--color-primary); background: var(--color-primary-soft); }
.nav-user { font-size: .8rem; color: var(--color-text-muted); }

/* ===================== Layout ===================== */
.main-content { max-width: 1280px; margin: 0 auto; padding: 1.75rem 2rem 4rem; }

.page-header { margin-bottom: 1.5rem; }
.page-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; color: var(--color-text); }
.page-subtitle, .page-header p { color: var(--color-text-secondary); font-size: .9rem; margin-top: .15rem; }
.text-muted { color: var(--color-text-muted); font-size: .9rem; }
.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.page-header-actions, .page-actions { display: flex; gap: .6rem; align-items: center; }

/* ===================== Flash / alerts ===================== */
.flash, .alert {
    padding: .7rem 1.1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
    border: 1px solid transparent;
}
.flash-success, .alert-success { background: rgba(15,157,107,.08); border-color: rgba(15,157,107,.3); color: #0b7a53; }
.flash-danger, .flash-error, .alert-danger { background: rgba(224,68,91,.07); border-color: rgba(224,68,91,.3); color: #c43048; }
.flash-warning, .alert-warning { background: rgba(217,137,42,.09); border-color: rgba(217,137,42,.32); color: #a8671a; }
.flash-info, .alert-info { background: rgba(47,107,246,.06); border-color: rgba(47,107,246,.28); color: #2456d6; }
.flash a, .alert a { text-decoration: underline; font-weight: 600; }

/* ===================== Badge navbar (alertes SEO) ===================== */
.nav-badge {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 .35rem;
    margin-left: .15rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
    color: #fff;
    background: var(--color-danger);
    border-radius: 999px;
    vertical-align: middle;
}

/* ===================== Toast (notifications volantes) ===================== */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: min(420px, calc(100vw - 2rem));
}
.toast {
    padding: .8rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: .9rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
    animation: toast-in .2s ease-out;
}
.toast-error { background: #fff; border-color: rgba(224,68,91,.4); color: #c43048; }
.toast-warning { background: #fff; border-color: rgba(217,137,42,.4); color: #a8671a; }
.toast a { text-decoration: underline; font-weight: 600; color: inherit; }
.toast-close { float: right; margin-left: .75rem; cursor: pointer; opacity: .5; border: 0; background: none; font-size: 1.1rem; line-height: 1; color: inherit; }
.toast-close:hover { opacity: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ===================== Login ===================== */
.login-page {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background:
        radial-gradient(ellipse at 60% 18%, rgba(47,107,246,.06) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 85%, rgba(15,157,107,.05) 0%, transparent 50%),
        var(--color-bg);
}
.login-container { width: 100%; max-width: 410px; padding: 1rem; }
.login-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-lg);
}
.login-header { text-align: center; margin-bottom: 1.75rem; }
.login-header h1 { font-size: 1.6rem; font-weight: 800; color: var(--color-text); letter-spacing: .01em; margin-bottom: .25rem; }
.login-header p { color: var(--color-text-muted); font-size: .85rem; }

/* ===================== Forms ===================== */
.form-group { margin-bottom: 1.15rem; }
.form-group label {
    display: block; font-size: .76rem; font-weight: 600; color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem;
}
.form-control {
    width: 100%; padding: .6rem .85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    color: var(--color-text);
    font-family: var(--font-sans); font-size: .95rem;
    transition: border-color .12s, box-shadow .12s; outline: none;
}
.form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(47,107,246,.15); }
.form-control.is-invalid { border-color: var(--color-danger); }
.form-errors { list-style: none; margin-top: .375rem; padding: 0; }
.form-errors li, .form-error-message { font-size: .82rem; color: var(--color-danger); margin-top: .2rem; }

/* ===================== Buttons ===================== */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .55rem 1.1rem; border-radius: var(--radius);
    font-family: var(--font-sans); font-size: .875rem; font-weight: 600;
    cursor: pointer; border: 1px solid transparent; text-decoration: none;
    transition: background .12s, border-color .12s, transform .08s, box-shadow .12s;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); color: #fff; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-surface-2); border-color: #cfd4dc; color: var(--color-text); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #c83a50; color: #fff; }
.btn-success { background: var(--color-success); color: #fff; }
.btn-success:hover { background: #0c815a; color: #fff; }
.btn-warning { background: rgba(217,137,42,.12); color: #a8671a; border-color: rgba(217,137,42,.4); }
.btn-warning:hover { background: rgba(217,137,42,.2); }
.btn-outline { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn-outline:hover { background: var(--color-surface-2); }
.btn-full { width: 100%; justify-content: center; margin-top: .5rem; }
.btn-sm { padding: .35rem .7rem; font-size: .8rem; }
.btn-xs { padding: .2rem .55rem; font-size: .75rem; }

@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn--loading { opacity: .8; pointer-events: none; cursor: default; }
.btn .btn-spinner { display: none; }
.btn--loading .btn-spinner {
    display: inline-block; width: .85em; height: .85em;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: btn-spin .65s linear infinite; flex-shrink: 0;
}

/* ===================== Cards ===================== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

/* ===================== Tables ===================== */
.table-container { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
    text-align: left; padding: .6rem 1rem;
    font-size: .72rem; font-weight: 600; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--color-border);
}
td { padding: .8rem 1rem; border-bottom: 1px solid var(--color-border); }
tr:hover td { background: var(--color-surface-2); }

.table-sea { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table-sea thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-border-strong);
    padding: .7rem 1rem; color: var(--color-text-muted);
}
.table-sea td { padding: .62rem 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.table-sea tbody tr:last-child td { border-bottom: none; }

/* Colonnes numériques : alignées à droite + chiffres mono à chasse fixe. */
.table-sea .num, .table-sea th.num { text-align: right; }
.table-sea td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }

/* Séparateurs verticaux entre colonnes (SF1.25, FR-SF38) — dernière colonne exclue. */
.table-sea td, .table-sea th { border-right: 1px solid var(--table-col-separator); }
.table-sea td:last-child, .table-sea th:last-child { border-right: none; }

/* Zébrage (SF1.25, FR-SF38) — DÉCISION INVERSÉE vs le choix d'origine ci-dessous : le retour
   terrain (FR-SF38) demande explicitement l'alternance de fond pour la lisibilité des tableaux
   denses. Historique conservé pour traçabilité : « pas de zébrage : trop bruyant en clair sur
   données denses » (décision d'origine, DASH-ère). Règle placée AVANT le hover ci-dessous
   (même spécificité CSS — l'ordre de déclaration décide) pour que le survol reste visible sur une
   ligne paire comme sur une ligne impaire. */
.table-sea tbody tr:nth-child(even) td { background: var(--table-zebra-bg); }

/* Hover. */
.table-sea tbody tr:hover td { background: #f6f8fb; }

/* En-têtes triables (Stimulus table-sort) */
.table-sea th[data-sort-key],
th[data-sort-key] { cursor: pointer; user-select: none; white-space: nowrap; }
.table-sea th[data-sort-key]::after,
th[data-sort-key]::after { content: ' ↕'; opacity: .35; }
.table-sea th[aria-sort="ascending"]::after,
th[aria-sort="ascending"]::after { content: ' ▲'; opacity: 1; color: var(--color-text-secondary); }
.table-sea th[aria-sort="descending"]::after,
th[aria-sort="descending"]::after { content: ' ▼'; opacity: 1; color: var(--color-text-secondary); }
.table-sea-container { overflow: auto; max-height: 72vh; border-radius: var(--radius-lg); }
.card.table-sea-container { padding: 0; }

/* Formulaires larges : la card exploite la zone de contenu (1280px), champs en
   grille responsive 2-3 colonnes qui retombe en 1 colonne sous ~300px/champ. */
.form-card { max-width: 1100px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 1.5rem;
    align-items: start;
}
.form-grid > .form-group { min-width: 0; }
.form-grid > .span-full { grid-column: 1 / -1; }

/* Lien de campagne dans les tableaux */
.table-sea a { color: var(--color-text); font-weight: 500; }
.table-sea a:hover { color: var(--color-primary); text-decoration: none; }

/* ===================== Badges ===================== */
.badge {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .15rem .55rem; border-radius: var(--radius-pill);
    font-size: .72rem; font-weight: 600; line-height: 1.5;
}
.badge-active, .badge-success { background: rgba(15,157,107,.12); color: #0b7a53; }
.badge-inactive, .badge-secondary { background: #eef0f3; color: var(--color-text-secondary); }
.badge-admin, .badge-info { background: rgba(47,107,246,.1); color: var(--color-primary); }
.badge-content, .badge-warning { background: rgba(217,137,42,.13); color: #a8671a; }
.badge-danger { background: rgba(224,68,91,.1); color: #c43048; }

/* Type de campagne (pilule neutre, contour) */
.badge-type {
    background: var(--color-surface); border: 1px solid var(--color-border-strong);
    color: var(--color-text-secondary); border-radius: var(--radius); padding: .12rem .5rem;
    font-size: .72rem; font-weight: 600;
}

/* Statuts d'indexation */
.badge-status-idle { background: #eef0f3; color: var(--color-text-secondary); }
.badge-status-crawling { background: rgba(217,137,42,.13); color: #a8671a; }
.badge-status-embedding { background: rgba(47,107,246,.1); color: var(--color-primary); }
.badge-status-indexed { background: rgba(15,157,107,.12); color: #0b7a53; }
.badge-status-indexed-errors { background: rgba(217,137,42,.13); color: #a8671a; }
.badge-status-error { background: rgba(224,68,91,.1); color: #c43048; }

/* Priorité de mise en négatif (SF1.23 — classification IA) — couleurs LITTÉRALES de la charte
   e-conception (#FD1741/#65B0E5/#BDCCEA/#011037), délibérément distinctes de --color-primary. */
.badge-priorite-eleve  { background:#FD1741; color:#fff; padding:.2rem .6rem; border-radius:12px; font-weight:600; font-size:.75rem; }
.badge-priorite-moyen  { background:#65B0E5; color:#fff; padding:.2rem .6rem; border-radius:12px; font-weight:600; font-size:.75rem; }
.badge-priorite-faible { background:#BDCCEA; color:#011037; padding:.2rem .6rem; border-radius:12px; font-weight:600; font-size:.75rem; }
.badge-priorite-attente{ background:var(--color-bg-secondary,#f1f3f5); color:var(--color-muted,#6c757d); padding:.2rem .6rem; border-radius:12px; font-size:.75rem; }

/* SF1.3 — Polarité alertes/recommandations (FR-SF6). Axe SENTIMENT, orthogonal au bucket d'urgence
   (.sea-strip--{bucket}, DASH1.2/1.5) : les deux badges coexistent, aucun ne remplace l'autre.
   Charte e-conception : #FD1741 réservé au négatif fort (PAS réutilisé pour .sea-strip--critique qui
   reste var(--color-danger) #e0445b — axe différent). Vert positif = teinte .badge-success existante. */
.badge-polarite-positif { background: rgba(15,157,107,.12); color: #0b7a53; }
.badge-polarite-negatif { background: #FD1741; color: #fff; }
.badge-polarite-neutre  { background: #BDCCEA; color: #011037; }

/* SF1.9 (FR-SF18) — Polarité du compte rendu hebdomadaire (par campagne). Classes SCOPED au compte
   rendu, couleurs LITTÉRALES de la charte e-conception (le thème global générique ne suit pas la
   charte — hors périmètre de cette story). Positif = accent secondaire #65B0E5 ; négatif = rouge
   fort #FD1741 ; attention = fond bleu pâle #BDCCEA. */
.sea-wr-badge { display:inline-flex; align-items:center; padding:.2rem .6rem; border-radius:12px; font-weight:600; font-size:.75rem; }
.sea-wr-badge--positif { background:#65B0E5; color:#011037; }
.sea-wr-badge--negatif { background:#FD1741; color:#fff; }
.sea-wr-badge--attention { background:#BDCCEA; color:#011037; }

/* ===================== Delta (évolution période) ===================== */
.delta { font-size: .78rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta--good { color: var(--color-success); }
.delta--bad  { color: var(--color-danger); }
.delta--flat { color: var(--color-text-muted); }
.delta small { font-weight: 500; opacity: .85; }

/* ===================== Rang & buckets (classements) ===================== */
.rank-num { font-family: var(--font-mono); font-weight: 700; }
.rank-num--best { color: var(--color-success); }
.rank-num--worst { color: var(--color-danger); }
.rank-num--mid { color: var(--color-text-muted); }
.rank-badge {
    display: inline-block; margin-left: .4rem; padding: .1rem .45rem;
    border-radius: 5px; font-size: .62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: #fff;
}
.rank-badge--best { background: var(--color-success); }
.rank-badge--worst { background: var(--color-danger); }

/* ===================== Metric cards (KPI) ===================== */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem;
}
.metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: .95rem 1.05rem;
    box-shadow: var(--shadow-sm);
}
.metric-card--bare { background: transparent; border: none; box-shadow: none; padding: 0; }
.metric-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 600; }
.metric-value {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em;
    color: var(--color-text-strong); margin-top: .45rem;
}
.metric-card--bare .metric-value { font-size: 1.2rem; }
.metric-foot { margin-top: .55rem; }

/* ===================== Segmented control (.seg) ===================== */
.seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: #eef0f3; border: 1px solid var(--color-border-strong);
    border-radius: 9px;
}
.seg-btn {
    border: none; background: transparent; font: inherit;
    font-size: .8rem; font-weight: 500; color: var(--color-text-secondary);
    padding: .3rem .7rem; border-radius: 7px; cursor: pointer; white-space: nowrap;
    text-decoration: none; transition: background .12s, color .12s;
}
.seg-btn:hover { color: var(--color-text); text-decoration: none; }
.seg-btn.active {
    background: var(--color-surface); color: var(--color-text-strong);
    font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
.seg-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* ===================== Pacing budgétaire ===================== */
.pacing-bar { height: 9px; border-radius: 6px; background: #eef0f3; border: 1px solid var(--color-border-strong); overflow: hidden; }
.pacing-bar > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover)); }
.pacing-bar--over > span { background: linear-gradient(90deg, var(--color-danger), #c83a50); }

/* ===================== Quick links / placeholder ===================== */
.quick-links { display: flex; gap: 1rem; margin-top: 1.5rem; }
.dashboard-placeholder {
    padding: 3rem; text-align: center;
    border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg);
    color: var(--color-text-muted);
}

/* ===================== Onglets (fiche client) ===================== */
.tabs { margin-top: 1.5rem; }
.tab-list {
    display: flex; flex-wrap: wrap; gap: .25rem;
    border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem;
}
.tab-list .tab {
    appearance: none; background: transparent; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    padding: .55rem 1rem; font-size: .92rem; font-weight: 500;
    color: var(--color-text-secondary); cursor: pointer;
    border-radius: var(--radius) var(--radius) 0 0;
}
.tab-list .tab:hover { color: var(--color-text); background: var(--color-surface-2); }
.tab-list .tab.active, .tab-list .tab[aria-selected="true"] {
    color: var(--color-primary); border-bottom-color: var(--color-primary);
}
.tab-panel[hidden] { display: none; }

/* ===================== Barre de navigation SEA ===================== */
/* Niveau 1 (groupes) = segmented control plein ; niveau 2 = sous-onglets discrets. */
.sea-nav { margin-bottom: 1.5rem; }
.sea-nav .tab-list {
    border-bottom: none; gap: 2px; padding: 3px; margin-bottom: .85rem;
    background: #eef0f3; border: 1px solid var(--color-border-strong);
    border-radius: 9px; width: max-content; max-width: 100%;
}
.sea-nav .tab-list .tab {
    border: none; margin-bottom: 0; border-radius: 7px;
    padding: .35rem .8rem; font-size: .85rem; color: var(--color-text-secondary);
}
.sea-nav .tab-list .tab:hover { background: rgba(255,255,255,.6); color: var(--color-text); }
.sea-nav .tab-list .tab.active, .sea-nav .tab-list .tab[aria-selected="true"] {
    background: var(--color-surface); color: var(--color-text-strong);
    font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.12);
}
.sea-subtabs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.sea-subtab {
    padding: .3rem .7rem; border-radius: var(--radius);
    font-size: .85rem; color: var(--color-text-secondary) !important;
    text-decoration: none; white-space: nowrap; font-weight: 500;
    transition: background .12s, color .12s;
}
.sea-subtab:hover { background: var(--color-surface-2); color: var(--color-text) !important; text-decoration: none; }
.sea-subtab.active {
    color: var(--color-primary) !important; background: var(--color-primary-soft); font-weight: 600;
}
.sea-subtab--back { margin-left: auto; opacity: .85; }

/* ===================== SEA Boucle d'action — Card layout ===================== */

/* Feed & groups */
.sea-feed  { display: flex; flex-direction: column; gap: 14px; }
.sea-group { display: flex; flex-direction: column; gap: 8px; }

/* Group header */
.sea-grp-hd   { display: flex; overflow: hidden; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: 10px; }
.sea-grp-body { flex: 1; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sea-grp-left { display: flex; align-items: center; gap: 8px; }
.sea-grp-count { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: #e2e5ea; border-radius: 6px; font-size: .78rem; font-weight: 700; color: var(--color-text-secondary); flex-shrink: 0; }
.sea-grp-code  { font-size: .875rem; font-weight: 600; color: var(--color-text-strong); }
.sea-grp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Item card */
.sea-card { display: flex; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; transition: border-color .12s; }
.sea-card:hover { border-color: #cdd1d9; }
.sea-card[hidden] { display: none !important; }

/* Colour strip */
.sea-strip { width: 4px; flex-shrink: 0; }
.sea-strip--critique { background: var(--color-danger); }
.sea-strip--moyen    { background: var(--color-warning); }
.sea-strip--info     { background: var(--color-primary); }

/* Card body */
.sea-card-body { flex: 1; padding: 18px 22px 16px; min-width: 0; }

/* Meta row */
.sea-meta       { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.sea-meta-code  { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); letter-spacing: .01em; }
.sea-meta-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sea-campaign   { font-size: .82rem; font-weight: 600; color: var(--color-text-strong); }
.sea-date       { font-size: .78rem; color: var(--color-text-muted); white-space: nowrap; }

/* Description */
.sea-desc { font-size: .875rem; color: var(--color-text); line-height: 1.6; margin-bottom: 14px; }

/* Data row */
.sea-data-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sea-metric   { display: inline-flex; align-items: center; gap: 5px; background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-radius: 7px; padding: 3px 10px; font-size: .78rem; white-space: nowrap; }
.sea-metric .m-lbl   { color: var(--color-text-muted); }
.sea-metric .m-val   { font-family: var(--font-mono); font-weight: 600; color: var(--color-text-strong); }
.sea-metric .m-seuil { color: var(--color-text-muted); }
.sea-cost  { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--color-text-strong); white-space: nowrap; }
.sea-extra { font-size: .75rem; color: var(--color-text-muted); }

/* Actions */
.sea-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Ignorer inline form */
.sea-ig-details > summary { list-style: none; -webkit-appearance: none; }
.sea-ig-details > summary::-webkit-details-marker { display: none; }
.sea-ig-form  { margin-top: 10px; padding: 12px 14px; background: #fffdf7; border: 1px solid rgba(217,137,42,.35); border-radius: 8px; }
.sea-ig-lbl   { font-size: .8rem; font-weight: 600; color: var(--color-text); margin-bottom: 7px; }
.sea-ig-row   { display: flex; gap: 8px; flex-wrap: wrap; }
.sea-ig-input { flex: 1; min-width: 200px; font-size: .8rem; padding: 6px 10px; border: 1px solid #d4d8df; border-radius: 6px; font-family: inherit; background: #fff; color: var(--color-text); outline: none; }
.sea-ig-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(47,107,246,.12); }

/* Explain panel */
.sea-explain    { margin-top: 14px; padding: 16px 18px; background: rgba(47,107,246,.04); border: 1px solid rgba(47,107,246,.18); border-radius: 10px; }
.sea-explain-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sea-explain-lbl{ font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--color-primary); }

/* SEA button variants */
.btn-explain { background: transparent; color: var(--color-primary); border: 1px solid rgba(47,107,246,.35); }
.btn-explain:hover, .btn-explain.open { background: rgba(47,107,246,.08); border-color: rgba(47,107,246,.5); color: var(--color-primary); text-decoration: none; }
.btn-ignore  { background: transparent; color: var(--color-warning); border: 1px solid rgba(217,137,42,.4); }
.btn-ignore:hover  { background: rgba(217,137,42,.06); color: var(--color-warning); text-decoration: none; }
.btn-report  { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); }
.btn-report:hover  { background: var(--color-surface-2); color: var(--color-text-secondary); text-decoration: none; }
.btn-confirm { background: var(--color-warning); color: #fff; border: none; border-radius: var(--radius); font-family: inherit; font-size: .82rem; font-weight: 600; padding: .3rem .9rem; cursor: pointer; }
.btn-confirm:hover { background: #c07820; }
.btn-cancel  { background: var(--color-surface-2); color: var(--color-text-secondary); border: 1px solid var(--color-border-strong); border-radius: var(--radius); font-family: inherit; font-size: .82rem; padding: .3rem .9rem; cursor: pointer; }
.btn-cancel:hover { background: #eef0f3; }
.btn-x { background: none; border: none; cursor: pointer; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; padding: 2px 4px; font-family: inherit; }
.btn-x:hover { color: var(--color-text-secondary); }

/* KPI strip */
.sea-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 1.75rem; }
.sea-kpi-card  { border-radius: 10px; padding: 1rem; text-align: center; border: 1px solid; }
.sea-kpi-card.clickable { cursor: pointer; transition: opacity .12s; }
.sea-kpi-card.clickable:hover { opacity: .85; }
.sea-kpi--danger  { background: rgba(224,68,91,.08);  border-color: rgba(224,68,91,.2); }
.sea-kpi--warn    { background: rgba(217,137,42,.09); border-color: rgba(217,137,42,.22); }
.sea-kpi--neutral { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.sea-kpi--ok      { background: rgba(15,157,107,.08); border-color: rgba(15,157,107,.2); }
.sea-kpi-num { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; line-height: 1; }
.sea-kpi-lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 5px; }
.sea-kpi--danger  .sea-kpi-num { color: #c43048; } .sea-kpi--danger  .sea-kpi-lbl { color: #9b2226; }
.sea-kpi--warn    .sea-kpi-num { color: #a8671a; } .sea-kpi--warn    .sea-kpi-lbl { color: #92400e; }
.sea-kpi--neutral .sea-kpi-num { color: #364152; } .sea-kpi--neutral .sea-kpi-lbl { color: var(--color-text-secondary); }
.sea-kpi--ok      .sea-kpi-num { color: #0b7a53; } .sea-kpi--ok      .sea-kpi-lbl { color: #166534; }

/* Filter bar */
.sea-filter-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.sea-tabs       { display: flex; border-bottom: 2px solid var(--color-border); }
.sea-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: .45rem 1rem; cursor: pointer; font: inherit; font-weight: 400; font-size: .875rem; color: var(--color-text-muted); white-space: nowrap; }
.sea-tab.active { border-bottom-color: var(--color-primary); font-weight: 700; color: var(--color-primary); }

/* Empty / zero state */
.sea-empty { background: var(--color-surface); border: 1px dashed #d4d8df; border-radius: 12px; padding: 42px 24px; text-align: center; margin-bottom: 1rem; }

/* Low priority toggle */
.sea-low-toggle { background: none; border: none; font: inherit; font-size: .82rem; color: var(--color-text-muted); cursor: pointer; padding: .2rem 0; display: inline-flex; align-items: center; gap: .4rem; }
.sea-low-toggle:hover { color: var(--color-text-secondary); }

/* ===================== Shell 2 colonnes + sidebar universelle ===================== */
.app-shell { display: flex; align-items: flex-start; }
.app-shell > .main-content {
    flex: 1; min-width: 0;
    padding: 1.5rem 2rem 3rem;
}

.dash-sidebar {
    width: 248px; flex: none; align-self: stretch;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    position: sticky; top: 58px;
    height: calc(100vh - 58px);
    display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
    padding-bottom: 1.5rem;
}

/* ── Sélecteur de client (details/summary natif) ── */
.dash-switcher { position: relative; margin: 12px 12px 0; }
.dash-switcher > summary { list-style: none; cursor: pointer; }
.dash-switcher > summary::-webkit-details-marker { display: none; }

.dash-client {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 11px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none; transition: border-color .12s;
}
.dash-client:hover,
.dash-switcher[open] > .dash-client { border-color: var(--color-primary); text-decoration: none; }
.dash-client-avatar {
    width: 30px; height: 30px; flex: none; border-radius: 8px;
    background: var(--color-primary-soft); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.dash-client-body { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.dash-client-name { font-size: 13px; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-client-meta { font-size: 11px; color: var(--color-text-muted); }
.dash-client-meta::after { content: ' ▾'; }
.dash-switcher[open] .dash-client-meta::after { content: ' ▴'; }

.dash-switcher-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden; max-height: 280px; overflow-y: auto;
}
.dash-switcher-option {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; font-size: 13px; color: var(--color-text);
    text-decoration: none; transition: background .1s;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-switcher-option:hover { background: var(--color-surface-2); text-decoration: none; }
.dash-switcher-option.active { color: var(--color-primary); font-weight: 600; background: var(--color-primary-soft); }
.dash-switcher-check { width: 14px; flex: none; font-size: 11px; color: var(--color-primary); }

/* ── Onglets SEO / SEA ── */
.sidebar-section-tabs {
    position: sticky; top: 0; z-index: 10;
    display: flex; padding: 10px 12px 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.sidebar-section-tab {
    flex: 1; padding: 6px 4px; text-align: center;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    text-decoration: none; color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
}
.sidebar-section-tab:hover { color: var(--color-text); text-decoration: none; }
.sidebar-section-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* ── Navigation verticale ── */
.dash-nav { flex: 1; padding: 4px 0 8px; }
.dash-sidebar-group {
    padding: 13px 20px 5px; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-muted);
}
.dash-nav-link {
    display: flex; align-items: center; gap: 9px;
    margin: 1px 8px; padding: 7px 12px; border-radius: 8px;
    font-size: 13.5px; font-weight: 500; color: var(--color-text-secondary);
    text-decoration: none; transition: background .12s, color .12s;
}
.dash-nav-link:hover { background: var(--color-surface-2); color: var(--color-text); text-decoration: none; }
.dash-nav-link.active {
    background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600;
    box-shadow: inset 2px 0 0 var(--color-primary);
}
.dash-nav-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: #c4cad3; }
.dash-nav-link.active .dash-nav-dot { background: var(--color-primary); }

@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .dash-sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--color-border); }
    .dash-nav { display: flex; flex-wrap: wrap; }
    .dash-sidebar-group { width: 100%; }
    .dash-switcher-dropdown { position: fixed; top: auto; left: 1rem; right: 1rem; }
}

/* ── Combobox de sélection unique (contrôleur Stimulus `combobox`) ──
   Ergonomie « select2 » sans dépendance : champ replié, panneau de recherche, navigation
   clavier. Les options sont des radios natifs, seulement masqués visuellement. */
.combobox { position: relative; }

.combobox__display {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; text-align: left; cursor: pointer;
}
.combobox__display::after {
    content: '▾'; flex: none; color: var(--color-text-muted); font-size: .8em;
}
.combobox__display[data-empty] { color: var(--color-text-muted); }
.combobox__display[aria-expanded="true"] { border-color: var(--color-primary); }

.combobox__panel {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius, 6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    padding: .5rem;
}
.combobox__search { margin-bottom: .4rem; }
.combobox__list { max-height: 16rem; overflow-y: auto; }

.combobox__option {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem; border-radius: 6px; cursor: pointer;
}
.combobox__option:hover,
.combobox__option[data-active="true"] { background: var(--color-surface-2, #f3f4f6); }
.combobox__option[data-selected="true"] {
    background: var(--color-primary-soft, #eef2ff); font-weight: 600;
}

/* Le radio reste dans le DOM et fonctionnel (clic sur le label, .click() au clavier) :
   il est masqué visuellement, pas désactivé. */
.combobox__radio {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}