/* ============================================================================
   ASTRAGSO — FOUNDATION v2
   ----------------------------------------------------------------------------
   Implémente AstraGSO-Design-System.html (Inter · slate · blue-600 · gradient IA).
   Remplace le socle "éditorial" (crème/serif/orange) sans casser le legacy :
   les 92 tokens historiques sont repointés sur la nouvelle palette (§ BRIDGE),
   les classes historiques sont aliasées sur les composants DS (§ COMPAT).
   Cascade pilotée par @layer — un alias ne peut jamais battre un composant DS.
   ============================================================================ */

@layer tokens, base, layout, components, fanout, compat, utilities;

@layer tokens {

:root {
  /* ── Marque ─────────────────────────────────────────────── */
  --blue-50:#EFF5FF;  --blue-100:#DBE8FF; --blue-500:#3B82F6;
  --blue-600:#2563EB; --blue-700:#1D4ED8;
  --violet-500:#8B5CF6; --violet-600:#7C3AED; --violet-700:#6D28D9;
  --teal-50:#E7F8F6; --teal-500:#14B8A6; --teal-600:#0D9488; --teal-700:#0F766E;

  /* ── Signature IA (Léa / Max / Stéphane) ────────────────── */
  --ai-from:#EC4899; --ai-to:#DB2777; --ai-soft:#FDF2F8; --ai-ink:#BE185D;
  --ai-gradient:linear-gradient(135deg,#F472B6 0%,#EC4899 45%,#DB2777 100%);

  /* ── Échelle sémantique de scoring ──────────────────────── */
  --green-50:#ECFDF3; --green-100:#D1FADF; --green-500:#22C55E;
  --green-600:#16A34A; --green-700:#15803D;
  --amber-50:#FFFAEB; --amber-100:#FEF0C7; --amber-500:#F59E0B; --amber-600:#D97706;
  --red-50:#FEF3F2;   --red-100:#FEE4E2;   --red-500:#EF4444;   --red-600:#DC2626;
  --red-700:#B91C1C;

  /* ── Neutres (slate) & surfaces ─────────────────────────── */
  --ink:#0F172A; --ink-2:#334155; --muted:#64748B; --subtle:#94A3B8; --faint:#CBD5E1;
  --line:#E9EEF4; --line-strong:#E2E8F0;
  --bg:#F6F8FB; --bg-2:#F1F5F9; --card:#FFFFFF; --track:#EEF2F7;

  /* ── Rayons ─────────────────────────────────────────────── */
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-pill:999px;

  /* ── Élévation ──────────────────────────────────────────── */
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 4px 12px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.04);
  --sh-lg:0 12px 28px rgba(16,24,40,.12);

  /* ── Typo ───────────────────────────────────────────────── */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── Espace (grille 4px) ────────────────────────────────── */
  --space:16px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;

  /* ── Timings ────────────────────────────────────────────── */
  --t-fast:.12s; --t-base:.18s; --t-slow:.3s;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ── Chrome applicatif ──────────────────────────────────── */
  --sidebar-w:232px; --sidebar-w-collapsed:60px; --topbar-h:52px;
}

/* ══════════════════════════════════════════════════════════════════════════
   BRIDGE — les 92 tokens legacy repointés sur la palette DS.
   C'est ce bloc qui re-skinne les 3 214 style="…" inline sans toucher un
   template. À supprimer app par app, au fur et à mesure de la migration.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces "papier" → surfaces slate */
  --paper:        var(--bg);
  --paper-2:      var(--bg-2);
  --paper-3:      var(--card);
  --surface:      var(--card);
  --bg-base:      var(--bg);
  --bg-surface:   var(--card);
  --bg-elevated:  var(--card);
  --bg-hover:     var(--bg-2);
  --bg-deep:      var(--ink);

  /* Encre */
  --ink-soft:     var(--muted);
  --ink-dim:      var(--subtle);
  --text:         var(--ink);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:   var(--muted);
  --text-disabled: var(--subtle);
  --disabled:     var(--subtle);

  /* Filets */
  --border:       var(--line);
  --rule:         var(--line);
  --rule-2:       var(--line-strong);
  --rule-soft:    var(--line);

  /* Accent : l'orange éditorial devient le bleu primaire du DS */
  --accent:        var(--blue-600);
  --accent-2:      var(--blue-700);
  --accent-soft:   var(--blue-500);
  --accent-bg:     var(--blue-50);
  --accent-dim:    var(--blue-50);
  --accent-border: var(--blue-100);
  --accent-bdr:    var(--blue-100);
  --primary:       var(--blue-600);

  /* Sémantique */
  --ok:          var(--green-600); --ok-2:var(--green-700);
  --ok-bg:       var(--green-50);  --ok-dim:var(--green-50); --ok-border:var(--green-100);
  --green:       var(--green-600); --green-dim:var(--green-50); --green-border:var(--green-100);
  --warn:        var(--amber-600); --warn-2:#92400E;
  --warn-bg:     var(--amber-50);  --warn-border:var(--amber-100);
  --amber:       var(--amber-600); --amber-dim:var(--amber-50); --amber-border:var(--amber-100);
  --crit:        var(--red-600);   --crit-2:var(--red-700);
  --crit-bg:     var(--red-50);    --crit-dim:var(--red-50); --crit-border:var(--red-100);
  --red:         var(--red-600);   --red-dim:var(--red-50);  --red-border:var(--red-100);
  --info:        var(--blue-600);
  --info-bg:     var(--blue-50);   --info-border:var(--blue-100);

  /* Couleurs de rôle : rose = IA, violet = planifier, cyan = avis expert (Max) */
  --pink:        var(--ai-to);      --pink-dim:var(--ai-soft); --pink-border:#FBCFE8;
  --pink-glow:   rgba(219,39,119,.28);
  --purple:      var(--violet-600); --purple-dim:#F5F3FF; --purple-border:#DDD6FE;
  --cyan:        var(--teal-600);   --cyan-dim:var(--teal-50); --cyan-border:#A7F3D0;
  --gold:        var(--amber-500);

  /* Familles typo — l'app n'a plus qu'une seule police */
  --font-sans:    var(--font);
  --font-body:    var(--font);
  --font-display: var(--font);
  --font-serif:   var(--font);
  --font-mono:    var(--mono);

  /* Échelle de taille */
  --fs-3xs:9.5px; --fs-2xs:10.5px; --fs-xs:11.5px; --fs-sm:12.5px;
  --fs-base:13.5px; --fs-md:14px; --fs-lg:15px;  --fs-xl:16.5px;
  --fs-2xl:20px;  --fs-3xl:23px; --fs-4xl:27px; --fs-5xl:32px;

  /* Interlettrage */
  --display-tight:-.01em; --display-tighter:-.02em;

  /* Rayons legacy */
  --radius:      var(--r-md);
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-pill: var(--r-pill);

  /* Ombres legacy */
  --shadow-xs: var(--sh-xs);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);

  /* Espacement legacy */
  --space-2:var(--s-2);   --space-3:var(--s-3); --space-4:var(--s-4);
  --space-5:var(--s-5);   --space-6:var(--s-6); --space-7:var(--s-7);
  --space-8:var(--s-8);   --space-9:var(--s-9); --space-10:var(--s-10);

  /* Transitions legacy */
  --transition: all var(--t-base) var(--ease);
  --ease-in-out: var(--ease);

  /* Dégradés legacy — tous ramenés sur la signature IA */
  --gradient-text: var(--ai-gradient);
  --gradient-glow: radial-gradient(circle at 50% 0%, rgba(236,72,153,.14), transparent 70%);

  /* Graphiques */
  --grid-line: var(--line);
  --grid-size: 24px;
  --axis-color: var(--subtle);
}

}
@layer base {

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{color:var(--ink);margin:0;font-weight:700;letter-spacing:-.01em;line-height:1.25}
h1{font-size:20px} h2{font-size:16.5px} h3{font-size:14.5px} h4{font-size:13.5px}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-700)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue-600);outline-offset:2px;border-radius:var(--r-xs);
}

img,svg,video,canvas{max-width:100%;height:auto;display:block}
button{font-family:inherit}

code,kbd,samp{
  font-family:var(--mono);font-size:12px;background:var(--bg-2);
  padding:2px 6px;border-radius:var(--r-xs);color:var(--ink);
}
pre{
  font-family:var(--mono);font-size:12.5px;line-height:1.6;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;overflow:auto;
}
pre code{background:none;padding:0}

hr{height:1px;background:var(--line);border:0;margin:var(--s-6) 0}

::selection{background:var(--blue-100);color:var(--ink)}

/* Barres de défilement discrètes */
*{scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--faint);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--subtle)}

[x-cloak]{display:none!important}

/* Lisible au clavier, invisible à l'œil */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-100px;left:8px;z-index:9999;
  background:var(--card);color:var(--ink);padding:10px 16px;
  border-radius:var(--r-md);box-shadow:var(--sh-lg);font-weight:600;
}
.skip-link:focus{top:8px}

}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT — shell applicatif
   ══════════════════════════════════════════════════════════════════════════ */
@layer layout {

.app-shell{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  min-height:100vh;
  min-height:100dvh;
}

/* ── Barre latérale ─────────────────────────────────────────── */
.sidebar{
  position:sticky;top:0;align-self:start;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:var(--card);
  border-right:1px solid var(--line);
  z-index:40;
  transition:width var(--t-base) var(--ease);
}
.sidebar.collapsed{width:var(--sidebar-w-collapsed)}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .brand-text{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding-inline:0}

.sidebar-logo{
  display:flex;align-items:center;gap:9px;
  padding:16px 14px;
  border-bottom:1px solid var(--line);
  flex:none;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:16px;text-decoration:none}
.brand .dot{
  width:26px;height:26px;border-radius:var(--r-sm);flex:none;
  background:var(--blue-600);color:#fff;
  display:grid;place-items:center;font-size:14px;
}
.brand small{display:block;font-weight:500;color:var(--subtle);font-size:10.5px;letter-spacing:.02em}

.sidebar-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 8px}
.sidebar-section{margin-bottom:2px}
.sidebar-label,.navsec{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--subtle);padding:14px 10px 6px;
}
.sidebar-foot{
  flex:none;padding:10px;border-top:1px solid var(--line);
}

/* ── Barre supérieure ───────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:30;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:10px;
  padding:0 20px;
  background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-title{font-size:13px;font-weight:600;color:var(--ink);flex:1;min-width:0}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* ── Zone de page ───────────────────────────────────────────── */
.main-content{display:flex;flex-direction:column;min-width:0}
.page-body{
  flex:1;
  padding:24px clamp(16px,3vw,32px) 64px;
  max-width:1320px;width:100%;
}
.page-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:22px;
}
.page-header-content{min-width:0}
.page-eyebrow,.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600);
}
.page-title{font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:4px 0 0}
.page-subtitle{color:var(--muted);font-size:13px;margin-top:6px;max-width:70ch}
.lead{color:var(--muted);font-size:14px;max-width:70ch;margin-top:8px}

.section-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.section-title,.sub{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--subtle);margin:0;
}

.grid{display:grid;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.stack{display:flex;flex-direction:column;gap:14px}

/* Bouton menu mobile — masqué au-dessus de 900px */
.mobile-menu-btn{
  display:none;background:none;border:0;cursor:pointer;
  font-size:18px;color:var(--ink-2);padding:4px 6px;border-radius:var(--r-sm);
}
.mobile-menu-btn:hover{background:var(--bg-2)}

@media (max-width:900px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);
    transform:translateX(-100%);transition:transform var(--t-base) var(--ease);
    box-shadow:var(--sh-lg);
  }
  .sidebar.mobile-open{transform:none}
  .mobile-menu-btn{display:inline-flex}
  .page-body{padding:16px 16px 56px}
  .page-title{font-size:18px}
}

}
@layer components {

/* ══════════════════════════════════════════════════════════════════════════
   BOUTONS
   ══════════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;
  border-radius:var(--r-md);padding:9px 16px;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  text-decoration:none;
  transition:background var(--t-fast),box-shadow var(--t-fast),
             border-color var(--t-fast),transform .05s,filter var(--t-fast);
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.btn svg,.btn .ic{width:16px;height:16px;flex:none}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

.btn-primary{background:var(--blue-600);color:#fff;box-shadow:var(--sh-xs)}
.btn-primary:hover{background:var(--blue-700);color:#fff}
.btn-secondary{background:var(--card);color:var(--ink-2);border-color:var(--line-strong);box-shadow:var(--sh-xs)}
.btn-secondary:hover{background:var(--bg-2);border-color:var(--faint);color:var(--ink)}
.btn-teal{background:var(--teal-600);color:#fff;box-shadow:var(--sh-xs)}
.btn-teal:hover{background:var(--teal-700);color:#fff}
.btn-violet{background:var(--violet-600);color:#fff}
.btn-violet:hover{background:var(--violet-700);color:#fff}
.btn-ai{background:var(--ai-gradient);color:#fff;box-shadow:0 6px 16px rgba(219,39,119,.28)}
.btn-ai:hover{filter:brightness(1.04);box-shadow:0 8px 20px rgba(219,39,119,.34);color:#fff}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink)}
.btn-lg{padding:12px 22px;font-size:14px;border-radius:var(--r-md)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
form.inline{display:inline}
.btn-danger{background:var(--red-600);color:#fff}
.btn-danger:hover{background:var(--red-700);color:#fff}
.btn-outline{background:transparent;color:var(--ink-2);border-color:var(--line-strong)}
.btn-outline:hover{background:var(--bg-2);color:var(--ink)}
.btn-link{background:none;border:0;color:var(--blue-600);padding:0;font-weight:600}
.btn-link:hover{color:var(--blue-700);text-decoration:underline}

.btn-sm{padding:6px 11px;font-size:12.5px;border-radius:var(--r-sm)}
.btn-sm svg,.btn-sm .ic{width:14px;height:14px}
.btn-lg{padding:12px 20px;font-size:15px}
.btn-block{width:100%}
.btn-icon{padding:7px;width:32px;height:32px}
.btn-icon.btn-sm{padding:5px;width:26px;height:26px}

/* Coût en crédits, affiché à côté d'une action IA */
.cost{font-size:11px;color:var(--muted);font-weight:500}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES · TAGS · PASTILLES
   ══════════════════════════════════════════════════════════════════════════ */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;
}
.tag-blue{background:var(--blue-50);color:var(--blue-700)}
.tag-teal{background:var(--teal-50);color:var(--teal-700)}
.tag-amber{background:var(--amber-50);color:var(--amber-600)}
.tag-green{background:var(--green-50);color:var(--green-700)}
.tag-red{background:var(--red-50);color:var(--red-600)}
.tag-violet{background:#F5F3FF;color:var(--violet-700)}
.tag-ai{background:var(--ai-soft);color:var(--ai-ink)}
.tag-ghost{background:var(--bg-2);color:var(--muted)}

.status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.status .led,.status-dot{width:8px;height:8px;border-radius:50%;flex:none}
.led-green{background:var(--green-500);box-shadow:0 0 0 3px var(--green-50)}
.led-amber{background:var(--amber-500);box-shadow:0 0 0 3px var(--amber-50)}
.led-red{background:var(--red-500);box-shadow:0 0 0 3px var(--red-50)}
.led-slate{background:var(--subtle);box-shadow:0 0 0 3px var(--bg-2)}
.led-blue{background:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50)}
.led-pulse{animation:led-pulse 1.8s ease-in-out infinite}
@keyframes led-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Badge de position (pastille numérique colorée) */
.pos{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:inline-grid;place-items:center;
  color:#fff;font-size:12px;font-weight:700;
}
.pos-1{background:var(--green-600)}
.pos-2{background:var(--green-500)}
.pos-good{background:var(--blue-600)}
.pos-mid{background:var(--amber-500)}
.pos-low{background:var(--red-500)}

/* ══════════════════════════════════════════════════════════════════════════
   CHIPS DE DENSITÉ  (SEO Contenu — termes à utiliser)
   ══════════════════════════════════════════════════════════════════════════ */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chipterm{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 6px 5px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;border:1px solid transparent;
}
.chipterm .cnt{
  min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);
  color:#fff;font-size:11px;font-weight:700;display:inline-grid;place-items:center;
}
.chipterm .tgt{font-size:11px;color:var(--muted);font-weight:600}
.ct-optimal{background:var(--green-50);color:var(--green-700)}  .ct-optimal .cnt{background:var(--green-600)}
.ct-normal{background:var(--bg-2);color:var(--ink-2)}           .ct-normal .cnt{background:var(--subtle)}
.ct-low{background:#FFF8E9;color:var(--amber-600)}              .ct-low .cnt{background:var(--amber-500)}
.ct-excess{background:var(--red-50);color:var(--red-600)}       .ct-excess .cnt{background:var(--red-500)}
.ct-absent{background:var(--card);color:var(--muted);border-color:var(--line-strong)}
.ct-absent .cnt{background:var(--faint)}

.chip-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip-filter{
  font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--muted);background:var(--card);cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.chip-filter:hover{background:var(--bg-2);color:var(--ink)}
.chip-filter.on{background:var(--blue-600);color:#fff;border-color:var(--blue-600)}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULAIRES
   ══════════════════════════════════════════════════════════════════════════ */
.field{display:flex;flex-direction:column;gap:6px}
.field > label,.form-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);
}
.input,.textarea,select.input{
  font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:10px 12px;width:100%;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--subtle)}
.input:focus,.textarea:focus{
  outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50);
}
.input:disabled,.textarea:disabled{background:var(--bg-2);color:var(--subtle);cursor:not-allowed}
.input.is-error,.textarea.is-error{border-color:var(--red-500)}
.input.is-error:focus{box-shadow:0 0 0 3px var(--red-50)}
.textarea{resize:vertical;min-height:78px;line-height:1.55}

.input-search{position:relative}
.input-search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--subtle);pointer-events:none;
}
.input-search .input{padding-left:36px}

.slug{display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden}
.slug .pre{
  padding:10px;background:var(--bg-2);color:var(--subtle);
  font-family:var(--mono);font-size:13px;border-right:1px solid var(--line);
}
.slug input{border:0;padding:10px 12px;flex:1;font-family:var(--mono);font-size:13px;color:var(--ink);min-width:0}
.slug input:focus{outline:0}

.hint,.form-hint,.form-help{font-size:12px;color:var(--subtle)}
.form-error,.form-errors{font-size:12px;color:var(--red-600);font-weight:500}

/* Interrupteur */
.switch{position:relative;width:40px;height:23px;flex:none;display:inline-block}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .sl{position:absolute;inset:0;background:var(--faint);border-radius:var(--r-pill);transition:background var(--t-base);cursor:pointer}
.switch .sl::before{
  content:'';position:absolute;width:17px;height:17px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform var(--t-base);box-shadow:var(--sh-xs);
}
.switch input:checked + .sl{background:var(--blue-600)}
.switch input:checked + .sl::before{transform:translateX(17px)}
.switch input:focus-visible + .sl{outline:2px solid var(--blue-600);outline-offset:2px}

/* Case à cocher */
.check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--blue-600);flex:none}

/* ══════════════════════════════════════════════════════════════════════════
   CARTES & STATISTIQUES
   ══════════════════════════════════════════════════════════════════════════ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:20px}
.card-p,.card-body{padding:20px}
.card-tight{padding:14px}
.card-none{padding:0}
.card-flat{box-shadow:none}
.card-bordered{box-shadow:none;border-color:var(--line-strong)}
.card-ink{background:var(--ink);color:#fff;border-color:transparent}
.card-ink h1,.card-ink h2,.card-ink h3,.card-ink h4{color:#fff}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:24px}

.section-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:20px;
}
.section-card__title{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--subtle);margin:0 0 14px;
}

.stat,.stat-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:18px 20px;
}
.stat .lab,.stat-label{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:600}
.stat .lab .ic,.stat-icon{width:18px;height:18px;color:var(--subtle);flex:none}
.stat .val,.stat-value{
  font-size:30px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.1;margin-top:10px;
  font-variant-numeric:tabular-nums;
}
.stat .foot,.stat-change{font-size:12px;color:var(--subtle);margin-top:4px}
.stat-change.up{color:var(--green-600)}
.stat-change.down{color:var(--red-600)}
.stat.accent .val,.stat.accent .stat-value{color:var(--blue-600)}

.kpis,.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}

/* Tuiles d'action (raccourcis dashboard) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 14px;text-align:center;box-shadow:var(--sh-xs);cursor:pointer;
  transition:box-shadow var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.tile:hover{box-shadow:var(--sh-md);border-color:var(--blue-100);transform:translateY(-2px)}
.tile .ic{width:22px;height:22px;color:var(--blue-600);margin:0 auto 10px}
.tile .t{font-size:13px;font-weight:600;color:var(--ink-2)}

/* ══════════════════════════════════════════════════════════════════════════
   JAUGE DE SCORE (donut /100)
   ══════════════════════════════════════════════════════════════════════════ */
.gauge{
  --v:70;--c:var(--green-500);
  position:relative;width:120px;height:120px;border-radius:50%;flex:none;
  background:conic-gradient(var(--c) calc(var(--v) * 1%),var(--track) 0);
}
.gauge::before{content:'';position:absolute;inset:11px;background:var(--card);border-radius:50%}
.gauge .g-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.gauge .g-in b{font-size:28px;color:var(--ink);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.gauge .g-in span{font-size:11px;color:var(--subtle);font-weight:600}
.gauge-sm{width:84px;height:84px}
.gauge-sm::before{inset:9px}
.gauge-sm .g-in b{font-size:20px}
.gauge-lg{width:150px;height:150px}
.gauge-lg::before{inset:13px}
.gauge-lg .g-in b{font-size:36px}

/* Donut segmenté (couverture) */
.donut{position:relative;width:118px;height:118px;border-radius:50%;flex:none}
.donut::before{content:'';position:absolute;inset:15px;background:var(--card);border-radius:50%}
.donut .d-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut .d-in b{font-size:22px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.donut .d-in span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:700}

.legend{display:flex;flex-direction:column;gap:9px}
.legend .li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
.legend .li i{width:9px;height:9px;border-radius:3px;flex:none}
.legend .li b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════════
   BARRES DE PROGRESSION & LIGNES DE SCORE
   ══════════════════════════════════════════════════════════════════════════ */
.bar,.progress-bar{height:8px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.bar > i,.progress-fill{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--green-500);
  transition:width var(--t-slow) var(--ease);
}
.bar.amber > i{background:var(--amber-500)}
.bar.red > i{background:var(--red-500)}
.bar.blue > i{background:var(--blue-600)}
.bar.ai > i{background:var(--ai-gradient)}

.metricrow{display:flex;align-items:center;gap:14px;padding:9px 0}
.metricrow .ml{
  width:150px;flex:none;font-size:13px;color:var(--ink-2);font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.metricrow .ml .ic{width:18px;height:18px;color:var(--subtle);flex:none}
.metricrow .bar{flex:1}
.metricrow .mv{width:52px;text-align:right;font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

.subscore{display:flex;align-items:center;gap:12px;padding:7px 0}
.subscore .sl{width:92px;flex:none;font-size:13px;color:var(--ink-2);font-weight:500}
.subscore .bar{flex:1}
.subscore .sv{width:54px;text-align:right;font-size:12.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════════
   ONGLETS
   ══════════════════════════════════════════════════════════════════════════ */
.tabs,.tab-bar{display:flex;gap:22px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar,.tab-bar::-webkit-scrollbar{display:none}
.tab,.tab-item{
  padding:11px 2px;font-size:13.5px;font-weight:600;color:var(--muted);
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;margin-bottom:-1px;
  background:none;border-top:0;border-left:0;border-right:0;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.tab .badge,.tab-item .badge{
  background:var(--bg-2);color:var(--muted);font-size:11px;font-weight:700;
  border-radius:var(--r-pill);padding:1px 7px;
}
.tab:hover,.tab-item:hover{color:var(--ink)}
.tab.on,.tab-item.active{color:var(--blue-600);border-bottom-color:var(--blue-600)}
.tab.on .badge,.tab-item.active .badge{background:var(--blue-50);color:var(--blue-700)}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION
   ══════════════════════════════════════════════════════════════════════════ */
.navitem,.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13.5px;font-weight:500;
  cursor:pointer;text-decoration:none;
  transition:background var(--t-fast),color var(--t-fast);
}
.navitem .ic,.nav-icon{width:18px;height:18px;color:var(--subtle);flex:none;display:grid;place-items:center;font-size:14px}
.navitem:hover,.nav-item:hover{background:var(--bg-2);color:var(--ink)}
.navitem.on,.nav-item.active{background:var(--blue-50);color:var(--blue-700);font-weight:600}
.navitem.on .ic,.nav-item.active .nav-icon{color:var(--blue-600)}
.navitem .chev{margin-left:auto;color:var(--subtle);width:16px;height:16px}
.navitem .new,.nav-item .new{margin-left:auto}
.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Élément de sous-niveau */
.nav-item.nav-sub{padding-left:32px;font-size:12.5px;color:var(--muted)}
.nav-item.nav-sub .nav-icon{width:14px;height:14px;font-size:12px}

/* ══════════════════════════════════════════════════════════════════════════
   COMPTEUR DE CRÉDITS + SCORE DE SANTÉ
   ══════════════════════════════════════════════════════════════════════════ */
.meter{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:14px 16px;box-shadow:var(--sh-sm);
}
.meter .top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.meter .top .k{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
}
.meter .top .k .ic{width:15px;height:15px;color:var(--amber-500);flex:none}
.meter .top .v{font-size:14px;font-weight:800;color:var(--green-600);font-variant-numeric:tabular-nums}
.meter .top .v .bonus{color:var(--blue-600);font-size:12px}
.meter .bar{margin:10px 0 8px}
.meter .cap{font-size:11px;color:var(--subtle);line-height:1.4}

.health .hh{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.health .hh .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.health .hh .v{font-size:15px;font-weight:800;color:var(--green-600)}
.health .hh .v small{color:var(--subtle);font-weight:600;font-size:11px}

/* Pastille de crédits en topbar */
.credit-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;
  color:var(--blue-700);background:var(--blue-50);
  border:1px solid var(--blue-100);padding:4px 10px;border-radius:var(--r-pill);
  text-decoration:none;transition:background var(--t-fast);
}
.credit-pill:hover{background:var(--blue-100);color:var(--blue-700)}
.credit-pill.low{color:var(--amber-600);background:var(--amber-50);border-color:var(--amber-100)}
.credit-pill.empty{color:var(--red-600);background:var(--red-50);border-color:var(--red-100)}

/* ══════════════════════════════════════════════════════════════════════════
   CHAT & PERSONAS
   ══════════════════════════════════════════════════════════════════════════ */
.chat,.chat-messages{display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:12px;max-width:88%}
.msg .av,.msg-avatar{
  width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--bg-2);display:grid;place-items:center;
  font-weight:700;color:var(--muted);font-size:13px;overflow:hidden;
}
.msg .bubble,.msg-bubble{padding:11px 14px;border-radius:14px;font-size:13.5px;line-height:1.55}
.msg.assistant .bubble,.msg.assistant .msg-bubble{
  background:var(--card);border:1px solid var(--line);
  border-top-left-radius:4px;color:var(--ink-2);box-shadow:var(--sh-xs);
}
.msg.user{align-self:flex-end;flex-direction:row-reverse}
.msg.user .bubble,.msg.user .msg-bubble{background:var(--blue-600);color:#fff;border-top-right-radius:4px}
.msg.user .av,.msg.user .msg-avatar{background:var(--blue-100);color:var(--blue-700)}

.persona,.agent-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:18px;display:flex;gap:16px;align-items:flex-start;
}
.persona .pic,.agent-avatar{
  width:64px;height:64px;border-radius:var(--r-lg);flex:none;
  display:grid;place-items:center;font-size:24px;background:var(--bg-2);
}
.persona .pic.lea{background:var(--ai-soft)}
.persona .pic.max{background:var(--teal-50)}
.persona .pic.steph{background:var(--blue-50)}
.persona .body{flex:1;min-width:0}
.persona .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.persona .head .nm,.agent-name{font-weight:700;color:var(--ink);font-size:14px}
.persona .txt,.agent-desc{color:var(--ink-2);font-size:13.5px;line-height:1.55}
.persona .actions{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════════════════════════════════
   TABLEAUX
   ══════════════════════════════════════════════════════════════════════════ */
.tbl,.data-table{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl thead th,.data-table thead th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--subtle);padding:0 8px 12px;white-space:nowrap;
}
.tbl thead th.r,.data-table thead th.r{text-align:right}
.tbl tbody td,.data-table tbody td{padding:11px 8px;border-top:1px solid var(--line);color:var(--ink-2)}
.tbl tbody tr:hover,.data-table tbody tr:hover{background:var(--bg)}
.tbl td.q{color:var(--ink);font-weight:500}
.tbl td.num,.data-table td.num{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.tbl td.badge-cell{text-align:right;width:1%}
.tblfoot{padding:14px 8px 2px}
.tblfoot a{font-weight:600;font-size:13px}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ══════════════════════════════════════════════════════════════════════════
   ALERTES
   ══════════════════════════════════════════════════════════════════════════ */
.alert{
  display:flex;gap:11px;align-items:flex-start;
  border-radius:var(--r-md);padding:12px 14px;font-size:13px;line-height:1.5;
}
.alert .ic{width:18px;height:18px;flex:none;margin-top:1px}
.alert b{font-weight:700}
.alert-info{background:var(--blue-50);color:#1E40AF}     .alert-info .ic{color:var(--blue-600)}
.alert-warn,.alert-warning{background:var(--amber-50);color:#92400E} .alert-warn .ic,.alert-warning .ic{color:var(--amber-600)}
.alert-danger,.alert-error{background:var(--red-50);color:#991B1B}   .alert-danger .ic,.alert-error .ic{color:var(--red-600)}
.alert-success{background:var(--green-50);color:var(--green-700)}    .alert-success .ic{color:var(--green-600)}
.alert-ai{background:var(--ai-soft);color:var(--ai-ink)}             .alert-ai .ic{color:var(--ai-to)}

/* ══════════════════════════════════════════════════════════════════════════
   INFOBULLE
   ══════════════════════════════════════════════════════════════════════════ */
.tt{position:relative;display:inline-flex;align-items:center;gap:6px;cursor:help;border-bottom:1px dashed var(--faint)}
.tt .bub{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12px;font-weight:500;
  padding:7px 10px;border-radius:var(--r-sm);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--t-fast);
  box-shadow:var(--sh-md);z-index:50;
}
.tt .bub::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);
}
.tt:hover .bub,.tt:focus-visible .bub{opacity:1}

/* ══════════════════════════════════════════════════════════════════════════
   CHARGEMENT · SQUELETTES · ÉTATS VIDES
   ══════════════════════════════════════════════════════════════════════════ */
.loadcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-md);padding:18px;display:flex;gap:16px;align-items:center;
}
.loadcard .av{
  width:64px;height:64px;border-radius:12px;background:var(--blue-50);
  display:grid;place-items:center;flex:none;font-size:24px;
}
.loadcard h4{font-size:15px}
.loadcard p{margin:4px 0 12px;color:var(--muted);font-size:13px}
.loadcard .wait{font-size:12px;color:var(--subtle);margin-top:8px}

.loadbar{height:6px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.loadbar > i{
  display:block;height:100%;width:40%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--blue-500),var(--blue-700));
  animation:loadslide 1.3s ease-in-out infinite;
}
@keyframes loadslide{0%{margin-left:-40%}100%{margin-left:100%}}

.skeleton{
  background:linear-gradient(90deg,var(--bg-2) 25%,var(--track) 37%,var(--bg-2) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:var(--r-sm);
}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:56px 24px;
  background:var(--card);border:1px dashed var(--line-strong);border-radius:var(--r-lg);
}
.empty-icon{font-size:32px;margin-bottom:12px;opacity:.6}
.empty-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.empty-text{font-size:13px;color:var(--muted);max-width:44ch;margin-bottom:18px}

/* Anneau de traitement (audits en cours) */
.process-ring{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:3px solid var(--track);border-top-color:var(--blue-600);
  animation:spin .9s linear infinite;
}
.process-ring-inner{display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--blue-600)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS (une seule pile, en bas à droite)
   ══════════════════════════════════════════════════════════════════════════ */
.toast-stack{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  display:flex;flex-direction:column;gap:8px;
  max-width:360px;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;
  background:var(--card);border:1px solid var(--line);
  color:var(--ink);box-shadow:var(--sh-md);
  pointer-events:auto;cursor:pointer;
}
.toast.success{background:var(--green-50);border-color:var(--green-100);color:var(--green-700)}
.toast.error{background:var(--red-50);border-color:var(--red-100);color:var(--red-600)}
.toast.warning{background:var(--amber-50);border-color:var(--amber-100);color:var(--amber-600)}
.toast.info{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-700)}

}
/* ══════════════════════════════════════════════════════════════════════════
   QUERY FAN-OUT ENGINE — composants
   Cahier des charges §2 et §5 : construit exclusivement sur les briques du DS.
   Le donut de couverture devient le FCS. Les chips « termes » deviennent des
   chips « sous-requêtes » (couvert / partiel / absent = vert / orange / rouge).
   Les badges de position servent au fan-out concurrentiel.
   ══════════════════════════════════════════════════════════════════════════ */
@layer fanout {

/* ── FCS : Fan-Out Coverage Score ───────────────────────────────────────────
   Donut à trois segments. Alimenté par --covered / --partial (cumulés, en %),
   le reste étant l'absent. Remplace l'ancien donut brut « 54 % couvert ».     */
.fcs{
  --covered:0; --partial:0;
  position:relative;width:118px;height:118px;border-radius:50%;flex:none;
  background:conic-gradient(
    var(--green-500) 0 calc(var(--covered) * 1%),
    var(--amber-500) calc(var(--covered) * 1%) calc(var(--partial) * 1%),
    var(--red-500)   calc(var(--partial) * 1%) 100%
  );
}
.fcs::before{content:'';position:absolute;inset:15px;background:var(--card);border-radius:50%}
.fcs .d-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.fcs .d-in b{font-size:22px;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.fcs .d-in span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);font-weight:700}
.fcs-lg{width:150px;height:150px}
.fcs-lg::before{inset:19px}
.fcs-lg .d-in b{font-size:28px}

.fcs-panel{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.fcs-panel .legend{flex:1;min-width:180px}

/* Chute de recall — part des sous-requêtes absentes */
.recall-drop{display:flex;align-items:baseline;gap:8px}
.recall-drop b{font-size:22px;font-weight:800;color:var(--red-600);font-variant-numeric:tabular-nums}
.recall-drop span{font-size:12px;color:var(--muted);font-weight:600}

/* ── Chips de sous-requêtes ─────────────────────────────────────────────────
   Une chip = une sous-requête du fan-out. Le statut de couverture porte la
   couleur ; la provenance (synthétique / réel / les deux) porte la pastille. */
.chipq{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 10px 5px 12px;border-radius:var(--r-pill);
  font-size:13px;font-weight:600;border:1px solid transparent;
  max-width:100%;
}
.chipq .qt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chipq .prov{
  width:18px;height:18px;border-radius:50%;flex:none;
  display:inline-grid;place-items:center;
  font-size:9px;font-weight:800;color:#fff;letter-spacing:0;
}
.chipq .freq{
  font-size:11px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:none;
}

/* Statut de couverture (§2.5) */
.cq-covered{background:var(--green-50);color:var(--green-700)}
.cq-partial{background:#FFF8E9;color:var(--amber-600)}
.cq-absent{background:var(--red-50);color:var(--red-600)}
.cq-untested{background:var(--card);color:var(--muted);border-color:var(--line-strong)}

/* Provenance (§2.2) — « both » est le signal fort à prioriser */
.prov-synthetic{background:var(--violet-500)}
.prov-real{background:var(--teal-600)}
.prov-both{background:var(--ai-gradient);box-shadow:0 0 0 2px var(--ai-soft)}
.prov-none{background:var(--faint)}

/* Non extractible : le sujet est là, mais aucun passage ne répond seul */
.chipq.not-extractable{border-style:dashed;border-color:currentColor;opacity:.85}

/* ── Taxonomie des sous-requêtes (§2.3) ────────────────────────────────── */
.qtype{
  display:inline-flex;align-items:center;
  font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:var(--r-xs);
  background:var(--bg-2);color:var(--muted);white-space:nowrap;
}
.qtype-reformulation{background:var(--blue-50);color:var(--blue-700)}
.qtype-implicit{background:#F5F3FF;color:var(--violet-700)}
.qtype-comparative{background:var(--teal-50);color:var(--teal-700)}
.qtype-entity{background:var(--amber-50);color:var(--amber-600)}
.qtype-personalized{background:var(--ai-soft);color:var(--ai-ink)}
.qtype-recency{background:var(--green-50);color:var(--green-700)}
.qtype-procedural{background:var(--blue-50);color:var(--blue-700)}
.qtype-faq{background:var(--bg-2);color:var(--ink-2)}

/* ── Carte de thème (§2.6 — pilier + satellites, jamais une page par requête) */
.theme-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:18px;
  display:flex;flex-direction:column;gap:14px;
}
.theme-card:hover{box-shadow:var(--sh-md)}
.theme-card__head{display:flex;align-items:flex-start;gap:14px}
.theme-card__title{font-size:15px;font-weight:700;color:var(--ink);flex:1;min-width:0}
.theme-card__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.theme-card__body{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.theme-card__queries{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:200px}
.theme-card__foot{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid var(--line);
}

/* Décision par thème : enrichir une page existante, ou créer un actif */
.decision{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill);
}
.decision-enrich{background:var(--blue-50);color:var(--blue-700)}
.decision-create{background:var(--violet-600);color:#fff}
.decision-refresh{background:var(--amber-50);color:var(--amber-600)}

/* ── Plan d'action : format recommandé + justification (§2.7) ───────────── */
.format-reco{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--bg-2);border-radius:var(--r-md);padding:12px 14px;
}
.format-reco .ic{width:18px;height:18px;color:var(--blue-600);flex:none;margin-top:1px}
.format-reco .fr-name{font-size:13px;font-weight:700;color:var(--ink)}
.format-reco .fr-why{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}

/* Triples entité–prédicat–objet (§2.7) */
.triple{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;
  padding:7px 10px;background:var(--bg-2);border-radius:var(--r-sm);
}
.triple .s{color:var(--blue-700);font-weight:600}
.triple .p{color:var(--muted)}
.triple .o{color:var(--ink);font-weight:600}
.triple .arrow{color:var(--faint)}

/* ── Matrice de couverture passage-level (§2.5) ─────────────────────────── */
.coverage-matrix{width:100%;border-collapse:collapse;font-size:13px}
.coverage-matrix thead th{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--subtle);padding:0 10px 12px;position:sticky;top:0;background:var(--card);z-index:1;
}
.coverage-matrix tbody td{padding:12px 10px;border-top:1px solid var(--line);vertical-align:top}
.coverage-matrix tbody tr:hover{background:var(--bg)}
.coverage-matrix .cm-query{color:var(--ink);font-weight:500;max-width:280px}
.coverage-matrix .cm-passage{color:var(--muted);font-size:12.5px;max-width:340px;line-height:1.5}
.coverage-matrix .cm-url{
  font-family:var(--mono);font-size:11.5px;color:var(--blue-600);
  display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px;
}
.coverage-matrix .cm-sim{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2)}

/* Verdict d'extractibilité — le passage répond-il seul, de façon citable ? */
.extractable{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.extractable.yes{color:var(--green-600)}
.extractable.no{color:var(--red-600)}

/* ── Boucle de preuve par citation (§2.9) ──────────────────────────────── */
.proof-loop{
  display:flex;align-items:stretch;gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.proof-step{
  flex:1;padding:16px 18px;min-width:0;
  border-right:1px solid var(--line);
}
.proof-step:last-child{border-right:0}
.proof-step .ps-k{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--subtle);margin-bottom:8px;
}
.proof-step .ps-v{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.proof-step .ps-d{font-size:12px;color:var(--muted);margin-top:4px}
.proof-step.gain{background:var(--green-50)}
.proof-step.gain .ps-v{color:var(--green-700)}

/* Delta avant / après comblement */
.delta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700}
.delta.up{color:var(--green-600)}
.delta.down{color:var(--red-600)}
.delta.flat{color:var(--muted)}

/* ── Fan-out concurrentiel & part de citations (§2.8) ───────────────────── */
.share-bar{
  display:flex;height:10px;border-radius:var(--r-pill);overflow:hidden;background:var(--track);
}
.share-bar > i{display:block;height:100%}
.share-bar .mine{background:var(--blue-600)}
.share-bar .rival{background:var(--faint)}
.share-legend{display:flex;align-items:center;gap:14px;margin-top:8px;font-size:12px;color:var(--muted)}
.share-legend .sl-item{display:flex;align-items:center;gap:6px}
.share-legend .sl-item i{width:9px;height:9px;border-radius:3px;flex:none}

/* Perte de fan-out : le concurrent est cité, pas nous */
.loss-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:var(--r-md);background:var(--red-50);
}
.loss-row .lr-q{flex:1;min-width:0;font-size:13px;color:var(--ink);font-weight:500}
.loss-row .lr-who{font-size:12px;color:var(--red-600);font-weight:600;white-space:nowrap}

/* ── Moteurs (adaptateurs multi-surfaces) ──────────────────────────────── */
.engines{display:flex;flex-wrap:wrap;gap:6px}
.engine{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--r-xs);
  background:var(--bg-2);color:var(--muted);white-space:nowrap;
}
.engine.hit{background:var(--green-50);color:var(--green-700)}
.engine.miss{background:var(--card);color:var(--subtle);border:1px solid var(--line)}
.engine.stale{background:var(--amber-50);color:var(--amber-600)}

/* ── Chaîne de raisonnement Deep Search (§2.10) ─────────────────────────── */
.chain{display:flex;flex-direction:column;gap:0;position:relative}
.chain-link{
  display:flex;gap:14px;padding:14px 0;position:relative;
}
.chain-link:not(:last-child)::before{
  content:'';position:absolute;left:13px;top:38px;bottom:-6px;
  width:2px;background:var(--line-strong);
}
.chain-link .cl-dot{
  width:28px;height:28px;border-radius:50%;flex:none;z-index:1;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;background:var(--green-500);
}
.chain-link.partial .cl-dot{background:var(--amber-500)}
.chain-link.dropped .cl-dot{background:var(--red-500)}
.chain-link .cl-body{flex:1;min-width:0;padding-top:3px}
.chain-link .cl-q{font-size:13.5px;color:var(--ink);font-weight:500}
.chain-link .cl-note{font-size:12px;color:var(--muted);margin-top:3px}
/* Le point où le contenu décroche le long de la chaîne */
.chain-link.dropped .cl-q{color:var(--red-600)}

/* ── Estimation de coût avant lancement (§2.15) ────────────────────────── */
.run-cost{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--amber-50);border:1px solid var(--amber-100);
  border-radius:var(--r-md);padding:12px 14px;
}
.run-cost .rc-k{font-size:12.5px;color:var(--amber-600);font-weight:600}
.run-cost .rc-v{font-size:15px;font-weight:800;color:var(--amber-600);font-variant-numeric:tabular-nums}

/* Fraîcheur : chaque run est daté, l'ancienneté est exposée */
.freshness{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted)}
.freshness.fresh{color:var(--green-600)}
.freshness.aging{color:var(--amber-600)}
.freshness.stale{color:var(--red-600)}

}
/* ══════════════════════════════════════════════════════════════════════════
   COMPAT — classes historiques aliasées sur les composants DS.
   Objectif : aucun template ne casse pendant la migration.
   Chaque bloc porte un marqueur @deprecated : à retirer une fois l'app migrée.
   La couche est *après* `components` : elle complète, elle ne remplace pas.
   ══════════════════════════════════════════════════════════════════════════ */
@layer compat {

/* @deprecated → .tag / .tag-* */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--bg-2);color:var(--muted);
}
.badge-green{background:var(--green-50);color:var(--green-700)}
.badge-red{background:var(--red-50);color:var(--red-600)}
.badge-yellow{background:var(--amber-50);color:var(--amber-600)}
.badge-gray{background:var(--bg-2);color:var(--muted)}
.badge-cyan{background:var(--teal-50);color:var(--teal-700)}
.badge-purple{background:#F5F3FF;color:var(--violet-700)}
.badge-pink{background:var(--ai-soft);color:var(--ai-ink)}
.badge-blue{background:var(--blue-50);color:var(--blue-700)}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;background:var(--bg-2);color:var(--ink-2);
}

/* @deprecated → .input / .textarea / .field */
.form-input,.form-textarea{
  font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:10px 12px;width:100%;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form-input:focus,.form-textarea:focus{
  outline:0;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-50);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--subtle)}
.form-input:disabled,.form-textarea:disabled{background:var(--bg-2);color:var(--subtle)}
.form-textarea{resize:vertical;min-height:78px;line-height:1.55}
.form-field,.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.form-section{margin-bottom:24px}
.form-section-title{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--subtle);margin-bottom:12px;
}
.form-alert{border-radius:var(--r-md);padding:12px 14px;font-size:13px;background:var(--bg-2);color:var(--ink-2)}
.form-alert-info{background:var(--blue-50);color:#1E40AF}
.form-mono{font-family:var(--mono);font-size:13px}
.checkbox-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}

/* @deprecated → .panel / .alert-info */
.callout,.callout-card{
  background:var(--blue-50);border:1px solid var(--blue-100);
  border-radius:var(--r-md);padding:14px 16px;font-size:13px;color:#1E40AF;line-height:1.55;
}
.card-processing{border-color:var(--blue-100);background:var(--blue-50)}

/* @deprecated → .subscore */
.dim-row{display:flex;align-items:center;gap:12px;padding:7px 0}
.dim-label{width:92px;flex:none;font-size:13px;color:var(--ink-2);font-weight:500}
.dim-bar{flex:1;height:8px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.dim-bar > i,.dim-bar > div{display:block;height:100%;border-radius:var(--r-pill);background:var(--green-500)}
.dim-score{width:54px;text-align:right;font-size:12.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* @deprecated → .bar */
.score-bar-wrap{height:8px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.score-bar-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--green-500);transition:width var(--t-slow) var(--ease)}

/* @deprecated → .stat / .kpis */
.kpi,.kpi-cell,.stat-box,.stat-item,.score-box,.score-tile{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:16px 18px;
}
.kpi-number,.kpi-val,.stat-val,.score-val,.score-num,.score-tile__value{
  font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.02em;
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.kpi-label,.kpi-lbl,.stat-lbl,.score-lbl,.score-tile__label,.axis-label{
  font-size:12px;font-weight:600;color:var(--muted);
}
.kpi-hint{font-size:11px;color:var(--subtle);margin-top:4px}
.score-unit{font-size:13px;font-weight:600;color:var(--subtle)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}

/* @deprecated → .theme-card / .format-reco */
.action-row,.action-card,.issue-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:16px 18px;
}
.action-card--critical,.issue-card.critical{border-left:3px solid var(--red-500);border-radius:0 var(--r-lg) var(--r-lg) 0}
.action-card--warning,.issue-card.warning{border-left:3px solid var(--amber-500);border-radius:0 var(--r-lg) var(--r-lg) 0}
.action-title,.action-card__title,.issue-title{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px}
.action-why,.action-card__why,.issue-impact{font-size:13px;color:var(--ink-2);line-height:1.55}
.action-how,.action-card__how,.issue-steps{font-size:13px;color:var(--muted);line-height:1.55;margin-top:8px}
.action-meta,.action-card__meta,.issue-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:12px;font-size:12px;color:var(--subtle);
}

/* @deprecated → .chain */
.pipeline-steps,.status-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pipeline-step,.status-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;background:var(--bg-2);color:var(--muted);
}
.pipeline-step.done,.status-chip.done{background:var(--green-50);color:var(--green-700)}
.pipeline-step.active,.status-chip.active{background:var(--blue-50);color:var(--blue-700)}
.pipeline-step.failed,.status-chip.failed{background:var(--red-50);color:var(--red-600)}

.step-num,.step-indicator,.idx,.num-circle{
  width:24px;height:24px;border-radius:50%;flex:none;
  display:inline-grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;background:var(--blue-600);
}
.step-label,.step-title{font-size:13.5px;font-weight:600;color:var(--ink)}
.step-desc,.step-body{font-size:12.5px;color:var(--muted);line-height:1.5}

/* @deprecated → .card + .navitem */
.kanban-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px}
.kanban-col-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.kanban-col-label{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);
}

.notif-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.notif-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--blue-600);flex:none;margin-top:6px}
.notif-mark-btn{background:none;border:0;color:var(--blue-600);font-size:12px;font-weight:600;cursor:pointer}

.geo-skill-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-xs);padding:16px;transition:box-shadow var(--t-fast),border-color var(--t-fast);
}
.geo-skill-card:hover{box-shadow:var(--sh-md);border-color:var(--blue-100)}
.geo-skill-icon{width:22px;height:22px;color:var(--blue-600);margin-bottom:10px;font-size:18px}
.agent-skill-tag{
  display:inline-flex;font-size:10.5px;font-weight:600;padding:2px 7px;
  border-radius:var(--r-xs);background:var(--bg-2);color:var(--muted);
}

.header-icon-btn{
  display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:var(--r-sm);border:1px solid var(--line-strong);
  background:var(--card);color:var(--muted);cursor:pointer;
}
.header-icon-btn:hover{background:var(--bg-2);color:var(--ink)}

.verdict-panel{
  background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:20px 22px;
}
.verdict-panel h1,.verdict-panel h2,.verdict-panel h3{color:#fff}

.divider{height:1px;background:var(--line);border:0;margin:var(--s-5) 0}
.divider-strong{height:1px;background:var(--line-strong);border:0;margin:var(--s-6) 0}
.dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none;display:inline-block}

/* @deprecated → surfaces DS. Le fond « papier » n'existe plus. */
.bg-paper{background:var(--bg)}
.bg-paper-2{background:var(--bg-2)}
.bg-paper-3{background:var(--card)}
.bg-ink{background:var(--ink);color:#fff}
.paper-grid{background:var(--bg)}   /* la trame « papier millimétré » est retirée */

.brand-mark{font-weight:800;color:var(--ink);letter-spacing:-.02em}
.nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.nav-logo-icon{width:26px;height:26px;border-radius:var(--r-sm);background:var(--blue-600);color:#fff;display:grid;place-items:center;font-size:14px;flex:none}
.nav-logo-name{font-weight:800;color:var(--ink);font-size:15px}

.display{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
.display-2{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.2}

/* Le gradient « texte » de l'ancien logo devient la signature IA */
.gradient-text,.gradient-text-pink{
  background:var(--ai-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

}

/* ══════════════════════════════════════════════════════════════════════════
   UTILITAIRES
   ══════════════════════════════════════════════════════════════════════════ */
@layer utilities {

.text-ink{color:var(--ink)}
.text-muted{color:var(--muted)}
.text-disabled{color:var(--subtle)}
.text-accent{color:var(--blue-600)}
.text-ok{color:var(--green-600)}
.text-warn{color:var(--amber-600)}
.text-crit{color:var(--red-600)}
.text-cyan{color:var(--teal-600)}
.text-purple{color:var(--violet-600)}
.text-ai{color:var(--ai-ink)}

.font-sans,.font-serif{font-family:var(--font)}   /* le serif éditorial est retiré */
.font-mono,.mono,.tracking-mono{font-family:var(--mono)}

.fw-400{font-weight:400} .fw-500{font-weight:500} .fw-600{font-weight:600}
.fw-700{font-weight:700} .fw-800{font-weight:800}
.italic{font-style:italic}
.uppercase{text-transform:uppercase;letter-spacing:.06em}
.tracking-tight{letter-spacing:-.02em}
.tracking-normal{letter-spacing:0}
.tracking-wide{letter-spacing:.08em}
.tabnum{font-variant-numeric:tabular-nums}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.hidden{display:none!important}
.avoid-break{break-inside:avoid;page-break-inside:avoid}

/* ── Animations ─────────────────────────────────────────────────────────── */
.pop-in{animation:pop-in .22s var(--ease) both}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}

.fade-up,.animate-fade{animation:fade-up .3s var(--ease) both}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.stagger > *{animation:fade-up .3s var(--ease) both}
.stagger > *:nth-child(1){animation-delay:.02s}
.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.1s}
.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}
.stagger > *:nth-child(n+6){animation-delay:.22s}

/* ── Indicateurs HTMX ───────────────────────────────────────────────────── */
.htmx-indicator{opacity:0;transition:opacity var(--t-base)}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.htmx-swapping{opacity:.4;transition:opacity var(--t-fast)}

/* ── Perf de rendu ──────────────────────────────────────────────────────────
   Les longues listes (matrices de couverture, tableaux de requêtes, kanban)
   ne paient le layout que pour ce qui est à l'écran.                          */
.cv-auto{content-visibility:auto;contain-intrinsic-size:auto 320px}
.cv-row{content-visibility:auto;contain-intrinsic-size:auto 56px}
.contain-paint{contain:paint}

/* ── Impression (rapports PDF) ──────────────────────────────────────────── */
@media print{
  .sidebar,.topbar,.toast-stack,.mobile-menu-btn,.btn{display:none!important}
  .app-shell{display:block}
  .page-body{padding:0;max-width:none}
  .card,.stat,.panel,.section-card,.theme-card{box-shadow:none;border-color:var(--line-strong)}
  body{background:#fff}
}

/* ── Mouvement réduit ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ── Contraste renforcé ─────────────────────────────────────────────────── */
@media (prefers-contrast:more){
  :root{--line:#94A3B8;--line-strong:#64748B;--muted:#475569;--subtle:#64748B}
}

}
/* ══════════════════════════════════════════════════════════════════════════
   ÉTATS — classes posées dynamiquement par Alpine (:class="{ saving: … }")
   ══════════════════════════════════════════════════════════════════════════ */
@layer compat {

/* Actions en cours : le bouton reste lisible, il ne clignote pas */
.saving,.sending,.searching,.syncing,.creating,.clearing,
.restoring,.removing,.joining,.processing{
  opacity:.72;pointer-events:none;cursor:progress;
}
.saved,.copied,.done,.completed{color:var(--green-600)}
.pending{color:var(--amber-600)}

/* Petit spinner générique */
.spinner{
  width:14px;height:14px;border-radius:50%;flex:none;display:inline-block;
  border:2px solid currentColor;border-top-color:transparent;
  animation:spin .7s linear infinite;
}

/* Pastille « live » (audit en cours, capture de citations) */
.pulse-dot{
  width:7px;height:7px;border-radius:50%;flex:none;display:inline-block;
  background:var(--green-500);
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:pulse-dot 1.8s ease-out infinite;
}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--red-500);flex:none;display:inline-block;animation:led-pulse 1.4s ease-in-out infinite}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}

/* Marqueurs de vérification (checklists d'audit) */
.kw-check,.check-ok{color:var(--green-600);font-weight:700}
.cross,.check-ko{color:var(--red-600);font-weight:700}

/* Couleurs nommées héritées, utilisées comme modificateurs sur des blocs */
.green{color:var(--green-600)}
.cyan{color:var(--teal-600)}
.pink{color:var(--ai-ink)}
.purple{color:var(--violet-600)}
.accent{color:var(--blue-600)}
.crit{color:var(--red-600)}
.neutral{color:var(--muted)}
.major{color:var(--amber-600)}
.error{color:var(--red-600)}
.highlight{background:var(--amber-50);color:var(--amber-600);padding:1px 5px;border-radius:var(--r-xs)}

.form-alert-error{background:var(--red-50);color:#991B1B;border-radius:var(--r-md);padding:12px 14px;font-size:13px}
.dim-bar-fill{display:block;height:100%;border-radius:var(--r-pill);background:var(--green-500)}
.divider-label{
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);
}
.divider-label::before,.divider-label::after{content:'';flex:1;height:1px;background:var(--line)}
.btn-arrow{transition:transform var(--t-fast)}
.btn:hover .btn-arrow{transform:translateX(2px)}
.connector{flex:1;height:1px;background:var(--line-strong);min-width:16px}

/* Axes de score du rapport GEO (SEO / GEO / GSO) */
.axis-score--seo{--c:var(--blue-600)}
.axis-score--geo{--c:var(--violet-600)}
.axis-score--gso{--c:var(--teal-600)}

}

/* ══════════════════════════════════════════════════════════════════════════
   SHELL — pied de sidebar, voile mobile, divers
   ══════════════════════════════════════════════════════════════════════════ */
@layer layout {

.user-chip{display:flex;align-items:center;gap:8px;min-width:0}
.user-chip__av{
  width:28px;height:28px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:11px;font-weight:700;
  color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);
}
.user-chip__id{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3}
.user-chip__name{
  font-size:11.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.user-chip__plan{font-size:10.5px;color:var(--subtle)}
.user-chip__out{font-size:12px;color:var(--subtle);flex:none;padding:2px 4px;border-radius:var(--r-xs)}
.user-chip__out:hover{background:var(--bg-2);color:var(--red-600)}

.sidebar-toggle{margin-left:auto;opacity:.55}
.sidebar-toggle:hover{opacity:1}
.sidebar.collapsed .sidebar-toggle{margin:0}

.sidebar-scrim{
  position:fixed;inset:0;z-index:39;
  background:rgba(15,23,42,.4);
  backdrop-filter:blur(2px);
}
@media (min-width:901px){ .sidebar-scrim{display:none!important} }

.messages{margin-bottom:16px}
.grow{flex:1;min-width:0}

}

/* ══════════════════════════════════════════════════════════════════════════
   ÉDITEUR À COUVERTURE — écrire en voyant la citabilité (§3)
   ══════════════════════════════════════════════════════════════════════════ */
@layer fanout {

.editor-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:20px;align-items:start;
}
.editor-main{min-width:0}
.editor-side{position:sticky;top:calc(var(--topbar-h) + 20px)}
.editor-body{
  min-height:520px;font-size:14.5px;line-height:1.7;
  font-family:var(--font);
}

/* Une ligne = une sous-requête, son verdict, et le passage qui y répond. */
.draft-row{
  padding:12px 0;border-top:1px solid var(--line);
}
.draft-row:first-child{border-top:0;padding-top:0}
.draft-row__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.draft-row__verdict{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:6px;padding-left:2px;
}
.draft-row__passage{
  margin-top:6px;padding:8px 10px;
  background:var(--bg-2);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--muted);line-height:1.5;
}
.draft-row__passage b{color:var(--ink-2)}

/* Un trou à combler se voit. Les autres sous-requêtes sont là pour le
   contexte : le rédacteur ne doit pas les perdre en route. */
.draft-row.is-target{
  border-left:2px solid var(--blue-600);
  padding-left:10px;margin-left:-12px;
}

@media (max-width:1100px){
  .editor-grid{grid-template-columns:1fr}
  .editor-side{position:static}
}

}

/* ══════════════════════════════════════════════════════════════════════════
   DOUBLE SIDEBAR — rail d'icônes + panneau de groupes
   ══════════════════════════════════════════════════════════════════════════ */
@layer layout {

.app-shell--dual{grid-template-columns:auto minmax(0,1fr)}
.sidebars{display:grid;grid-template-columns:76px 268px;position:sticky;top:0;height:100vh;height:100dvh;z-index:40}

/* ── Rail ───────────────────────────────────────────────────────────────── */
.ribbon{
  background:var(--card);border-right:1px solid var(--line);
  padding:12px 0;display:flex;flex-direction:column;align-items:center;gap:3px;
  overflow-y:auto;overscroll-behavior:contain;
}
.rib{
  position:relative;width:58px;padding:9px 4px;border-radius:var(--r-md);
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--muted);text-decoration:none;
  border:1px solid transparent;
  transition:background var(--t-fast),color var(--t-fast);
}
.rib svg{width:20px;height:20px}
.rib .lbl{font-size:9px;font-weight:600;line-height:1.1;text-align:center}
.rib:hover{background:var(--bg-2);color:var(--ink)}
.rib.on{background:var(--blue-50);color:var(--blue-700)}
.rib.star .lbl::after{content:'★';color:var(--amber-500);font-size:8px;margin-left:2px;vertical-align:top}

/* Le compteur. Bleu = nouveautés livrées. Gris = ce qui reste à faire. */
.rib .cnt{
  position:absolute;top:4px;right:6px;
  min-width:15px;height:15px;padding:0 3px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  font-size:9px;font-weight:700;
  background:var(--bg-2);color:var(--muted);
}
.rib .cnt-new{background:var(--ai-gradient);color:#fff}

.ribspacer{flex:1}
.ribdiv{width:34px;height:1px;background:var(--line);margin:6px 0}

/* ── Panneau ────────────────────────────────────────────────────────────── */
.panel{
  background:var(--card);border-right:1px solid var(--line);
  padding:16px 12px;overflow-y:auto;overscroll-behavior:contain;
}
.panel .ph{padding:6px 8px 12px}
.panel .ph .k{
  font-size:14.5px;font-weight:800;color:var(--ink);
  display:flex;align-items:center;gap:8px;margin:0;
}
.panel .ph .d{font-size:11.5px;color:var(--muted);margin:4px 0 0;line-height:1.45}

.pgroup{margin-top:12px}
.pgroup .gt{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--subtle);padding:7px 8px 3px;margin:0;
}

.pitem{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:12px;font-weight:500;
  text-decoration:none;
}
.pitem .pdot{width:5px;height:5px;border-radius:50%;flex:none;background:var(--faint)}
.pitem .pn{flex:1;min-width:0;line-height:1.3}
.pitem .pstar{color:var(--amber-500);font-size:9px;vertical-align:top}

/* Live : cliquable. Le reste : visible, désactivé, daté.
   Masquer les items non livrés donnerait l'illusion d'un produit complet ;
   les rendre cliquables mènerait à une 404. On les montre pour ce qu'ils sont. */
.pitem.s-live{color:var(--ink-2)}
.pitem.s-live .pdot{background:var(--green-500)}
.pitem.s-live:hover{background:var(--bg-2);color:var(--ink)}
.pitem.s-live.on{background:var(--blue-50);color:var(--blue-700);font-weight:600}
.pitem.s-live.on .pdot{background:var(--blue-600)}

.pitem.s-build{color:var(--subtle);cursor:default}
.pitem.s-build .pdot{background:var(--amber-500)}
.pitem.s-reco{color:var(--faint);cursor:default}
.pitem.s-reco .pdot{background:var(--line-strong)}

.pitem .tg{
  font-size:9px;font-weight:700;letter-spacing:.03em;
  padding:2px 5px;border-radius:var(--r-xs);flex:none;white-space:nowrap;
}
.tg-new{background:var(--ai-gradient);color:#fff}
.tg-build{background:var(--amber-50);color:var(--amber-600)}
.tg-reco{background:var(--bg-2);color:var(--subtle)}

.plegend{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:18px;padding:12px 8px 0;border-top:1px solid var(--line);
}
.plegend .lg{font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--r-pill)}
.lg-live{background:var(--green-50);color:var(--green-700)}
.lg-build{background:var(--amber-50);color:var(--amber-600)}
.lg-reco{background:var(--bg-2);color:var(--muted)}
.lg-all{background:var(--blue-50);color:var(--blue-700);text-decoration:none}
.lg-all:hover{background:var(--blue-100,var(--bg-2))}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .sidebars{grid-template-columns:76px}
  .panel{display:none}
}
@media (max-width:900px){
  .app-shell--dual{grid-template-columns:1fr}
  .sidebars{
    position:fixed;inset:0 auto 0 0;grid-template-columns:76px 268px;
    transform:translateX(-100%);transition:transform var(--t-base) var(--ease);
    box-shadow:var(--sh-lg);
  }
  .sidebars.mobile-open{transform:none}
  .sidebars.mobile-open .panel{display:block}
  .app-shell--dual .mobile-menu-btn{
    display:inline-flex;position:fixed;top:10px;left:12px;z-index:41;
    background:var(--card);border:1px solid var(--line);
    width:32px;height:32px;align-items:center;justify-content:center;
  }
  .app-shell--dual .topbar{padding-left:56px}
}

}


/* ═══ Fan-out — hiérarchie de lecture et action de solution (Sprint 10) ═══ */

/* Le fil : client › site › angle. La hiérarchie demandée, rendue visible. */
.crumbs{display:flex;align-items:stretch;gap:2px;flex-wrap:wrap;margin-bottom:18px}
.crumb{display:flex;flex-direction:column;gap:1px;padding:8px 14px;border-radius:var(--r-md);
  text-decoration:none;background:var(--bg-2);border:1px solid transparent;transition:border-color .15s}
.crumb:hover{border-color:var(--line-strong)}
.crumb-k{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.crumb-v{font-size:13px;font-weight:600;color:var(--ink)}
.crumb-client .crumb-v{color:var(--blue-700)}
.crumb-here{background:var(--ink);}
.crumb-here .crumb-k{color:rgba(255,255,255,.6)}
.crumb-here .crumb-v{color:#fff}
.crumb-sep{display:flex;align-items:center;color:var(--subtle);font-size:16px;padding:0 4px}

/* Le hero : l'action d'abord. Le brief seul semblait insurmontable — on mène
   par ce qu'on peut FAIRE. */
.solution-hero{display:flex;gap:24px;align-items:flex-start;
  background:linear-gradient(135deg,var(--card),var(--bg-2));
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  padding:26px 28px;margin-bottom:20px}
.sh-main{flex:1;min-width:0}
.sh-eyebrow{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue-600);margin-bottom:8px}
.sh-title{font-size:22px;font-weight:800;color:var(--ink);line-height:1.2;margin:0 0 10px}
.sh-lead{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 18px;max-width:60ch}
.sh-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.sh-meta{font-size:12px;color:var(--subtle);margin:14px 0 0}
.sh-warn{font-size:12.5px;color:var(--amber-600);margin:14px 0 0;font-weight:500}
.sh-warn a,.sh-meta a{color:var(--blue-600)}
.sh-side{display:flex;flex-direction:column;gap:12px;flex:none;width:180px}
.sh-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.sh-stat-v{font-size:18px;font-weight:800;color:var(--ink);line-height:1.1}
.sh-stat-k{font-size:11px;color:var(--subtle);margin-top:3px}
.sh-stat-k code{font-size:10.5px}

/* Les réponses : présentées comme des PROMESSES de contenu, pas des devoirs. */
.solution-answers{margin-bottom:20px}
.answers-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.answer-item{display:flex;gap:10px;align-items:flex-start;
  background:var(--bg-2);border-radius:var(--r-md);padding:14px 16px}
.answer-check{display:flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border-radius:50%;background:var(--green-100,#dcfce7);
  color:var(--green-700,#15803d);font-size:11px;font-weight:800;margin-top:1px}
.answer-q{font-size:13.5px;font-weight:700;color:var(--ink)}
.answer-why{font-size:12px;color:var(--muted);line-height:1.5;margin-top:3px}

/* Le détail technique : replié. Utile mais secondaire. */
.tech-detail{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:0;margin-bottom:8px}
.tech-detail>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  padding:16px 20px;user-select:none}
.tech-detail>summary::-webkit-details-marker{display:none}
.tech-detail>summary::before{content:'▸';color:var(--subtle);font-size:12px;transition:transform .15s}
.tech-detail[open]>summary::before{transform:rotate(90deg)}
.td-summary-label{font-size:13px;font-weight:700;color:var(--ink)}
.tech-detail[open]{padding:0 20px 20px}

@media (max-width:720px){
  .solution-hero{flex-direction:column}
  .sh-side{flex-direction:row;width:100%}
  .sh-stat{flex:1}
}

.gen-running{display:flex;align-items:center;gap:14px;
  background:var(--bg-2);border-radius:var(--r-md);padding:14px 18px}
.gen-running-title{font-size:14px;font-weight:700;color:var(--ink)}
.gen-running-sub{font-size:12px;color:var(--muted);margin-top:2px}


/* ═══ Onglets projet pleine largeur — scope de l'interface (agences) ═══ */
.project-tabs{
  border-bottom:1px solid var(--line);background:var(--bg-2);
  padding:0 16px;overflow:hidden;
}
.project-tabs-scroll{
  display:flex;align-items:flex-end;gap:2px;overflow-x:auto;
  scrollbar-width:thin;padding-top:6px;
}
.project-tabs-scroll::-webkit-scrollbar{height:0}
.ptab{
  display:flex;align-items:center;gap:8px;flex:none;
  padding:8px 14px;border:1px solid transparent;border-bottom:none;
  border-radius:var(--r-md) var(--r-md) 0 0;
  background:transparent;color:var(--muted);cursor:pointer;
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;
  transition:background .12s,color .12s;
}
.ptab:hover{background:var(--card);color:var(--ink)}
.ptab-active{
  background:var(--card);color:var(--ink);
  border-color:var(--line);
  box-shadow:0 -2px 0 var(--blue-600) inset;
  position:relative;top:1px;
}
.ptab-fav{width:18px;height:18px;border-radius:4px;object-fit:cover;flex:none}
.ptab-fav-mono{
  display:grid;place-items:center;background:var(--blue-600);color:#fff;
  font-size:10px;font-weight:800;
}
.ptab-label{max-width:160px;overflow:hidden;text-overflow:ellipsis}
.ptab-add{color:var(--subtle);font-size:16px;padding:8px 12px;text-decoration:none}
.ptab-add:hover{background:var(--card);color:var(--ink)}
@media (max-width:720px){
  .ptab-label{max-width:90px}
}


/* ═══ Cockpit de pilotage — la page Piloter scopée sur le projet actif (Sprint A) ═══ */
.pilot-cockpit{margin-bottom:28px}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.pc-ident{display:flex;gap:14px;align-items:center;min-width:0}
.pc-fav{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;border:1px solid var(--line)}
.pc-fav-mono{display:grid;place-items:center;background:var(--blue-600);color:#fff;font-size:20px;font-weight:800}
.pc-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
.pc-title{font-size:22px;font-weight:800;color:var(--ink);line-height:1.15;margin:2px 0}
.pc-domain{font-size:13px;color:var(--blue-600);text-decoration:none}
.pc-domain:hover{text-decoration:underline}
.pc-scores{display:flex;gap:12px;flex:none}
.pc-score{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 18px;text-align:center;min-width:84px}
.pc-score-v{font-size:26px;font-weight:800;line-height:1;color:var(--ink)}
.pc-score-k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--subtle);margin-top:4px}
.pc-score-strong .pc-score-v{color:var(--green-600,#16a34a)}
.pc-score-fair .pc-score-v{color:var(--amber-600,#d97706)}
.pc-score-weak .pc-score-v{color:var(--red-600,#dc2626)}
.pc-score-unmeasured .pc-score-v{color:var(--subtle)}

/* La prochaine action — l'élément le plus important de la page. */
.pc-next{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--ai-gradient);color:#fff;border-radius:var(--r-lg);
  padding:20px 24px;text-decoration:none;margin-bottom:16px;
  box-shadow:0 6px 20px rgba(219,39,119,.24);transition:transform .12s,box-shadow .12s}
.pc-next:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(219,39,119,.32);color:#fff}
.pc-next-eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.85}
.pc-next-label{font-size:18px;font-weight:800;margin:4px 0 3px;line-height:1.2}
.pc-next-why{font-size:13px;opacity:.9;line-height:1.45;max-width:60ch}
.pc-next-arrow{font-size:26px;flex:none;opacity:.9}
.pc-next-measure{background:linear-gradient(135deg,var(--blue-600),var(--blue-700));box-shadow:0 6px 20px rgba(37,99,235,.24)}
.pc-next-measure:hover{box-shadow:0 10px 26px rgba(37,99,235,.32)}

.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:18px 20px;text-decoration:none;display:block;transition:border-color .12s}
a.pc-tile:hover{border-color:var(--line-strong)}
.pc-tile-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px}
.pc-tile-v{font-size:15px;font-weight:700;color:var(--ink)}
.pc-tile-cta{font-size:13px;color:var(--blue-600);margin-top:8px;font-weight:600}
.pc-muted{color:var(--muted);font-weight:500}
.pc-bar{height:6px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin-top:10px}
.pc-bar>i{display:block;height:100%;background:var(--ai-gradient);border-radius:99px}
.pc-activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pc-activity a{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);text-decoration:none;padding:2px 0}
.pc-activity a:hover{color:var(--ink)}
.pc-dot{width:7px;height:7px;border-radius:50%;flex:none}
.pc-dot-audit{background:var(--blue-600)}
.pc-dot-fanout{background:var(--violet-600,#7c3aed)}
.pc-dot-content{background:var(--green-600,#16a34a)}
@media (max-width:720px){.pc-grid{grid-template-columns:1fr}.pc-scores{width:100%}.pc-score{flex:1}}


/* ═══ Matrice de couverture — filtres par verdict (Sprint B, revue UX) ═══ */
.cov-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cov-filter{display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--card);color:var(--muted);font-size:12.5px;font-weight:600;
  cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.cov-filter:hover{border-color:var(--line-strong);color:var(--ink)}
.cov-filter-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.cov-filter-on .cov-n{background:rgba(255,255,255,.22);color:#fff}
.cov-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--bg-2);color:var(--muted);font-size:11px;font-weight:700}
.cov-filter-absent.cov-filter-on{background:var(--red-600,#dc2626);border-color:var(--red-600,#dc2626)}
.cov-filter-partial.cov-filter-on{background:var(--amber-600,#d97706);border-color:var(--amber-600,#d97706)}
.cov-filter-covered.cov-filter-on{background:var(--green-600,#16a34a);border-color:var(--green-600,#16a34a)}
.cov-hint{font-size:12px;color:var(--red-600,#dc2626);font-weight:500;margin-left:2px}


/* ═══ Éditeur — panneau « et ensuite » (Sprint C, revue UX) ═══ */
.next-steps{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.ns-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--subtle);margin-bottom:12px}
.ns-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ns-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:16px 18px;text-decoration:none;transition:border-color .12s,transform .12s}
.ns-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.ns-card-accent{background:linear-gradient(135deg,var(--card),var(--bg-2));border-color:var(--blue-200,#bfdbfe)}
.ns-card-k{font-size:12px;font-weight:700;color:var(--blue-600);margin-bottom:4px}
.ns-card-accent .ns-card-k{color:var(--violet-600,#7c3aed)}
.ns-card-v{font-size:14px;font-weight:600;color:var(--ink)}
@media (max-width:720px){.ns-actions{grid-template-columns:1fr}}


/* ═══ Bande de verdicts d'analyse — la même histoire partout (Sprint D) ═══ */
.verdict-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:24px}
.vstrip{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:14px 16px;
  text-decoration:none;border-left-width:3px;transition:transform .12s,border-color .12s}
.vstrip:hover{transform:translateY(-1px)}
.vstrip-active{background:var(--bg-2);box-shadow:none}
.vstrip-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--subtle)}
.vstrip-v{font-size:24px;font-weight:800;color:var(--ink);line-height:1.1;margin:3px 0 2px}
.vstrip-sub{font-size:11.5px;color:var(--muted)}
.vstrip-strong{border-left-color:var(--green-500,#22c55e)}
.vstrip-strong .vstrip-v{color:var(--green-600,#16a34a)}
.vstrip-fair{border-left-color:var(--amber-500,#f59e0b)}
.vstrip-fair .vstrip-v{color:var(--amber-600,#d97706)}
.vstrip-weak{border-left-color:var(--red-500,#ef4444)}
.vstrip-weak .vstrip-v{color:var(--red-600,#dc2626)}
.vstrip-unmeasured{border-left-color:var(--line-strong)}
.vstrip-unmeasured .vstrip-v{color:var(--subtle)}


/* ═══ Mesurer — bandeau « où vous en êtes » (Sprint E, revue UX) ═══ */
.measure-headline{margin-bottom:26px}
.mh-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--subtle);margin-bottom:12px}
.mh-cards{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px}
.mh-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:18px 20px}
.mh-k{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--subtle);margin-bottom:8px}
.mh-v{font-size:28px;font-weight:800;color:var(--ink);line-height:1.05}
.mh-sub{font-size:12px;color:var(--muted);line-height:1.45;margin-top:6px}
/* La carte preuve mène : elle est plus grande et colorée par le résultat. */
.mh-card-proof{background:linear-gradient(135deg,var(--card),var(--bg-2));border-left:3px solid var(--line-strong)}
.mh-gain{border-left-color:var(--green-500,#22c55e)}
.mh-gain .mh-v{color:var(--green-600,#16a34a)}
.mh-loss{border-left-color:var(--red-500,#ef4444)}
.mh-loss .mh-v{color:var(--red-600,#dc2626)}
.mh-card-empty .mh-v{color:var(--subtle)}
@media (max-width:820px){.mh-cards{grid-template-columns:1fr}}


/* ═══ Programme EPO — hub dashboard (Sprint F, revue UX) ═══ */
.epo-program{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:20px 22px;margin-bottom:16px}
.epo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.epo-tier{font-size:16px;font-weight:800;color:var(--ink)}
.epo-site{font-size:12.5px;color:var(--muted);margin-top:2px}
.epo-status{font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;
  background:var(--bg-2);color:var(--muted)}
.epo-status-completed{background:var(--green-100,#dcfce7);color:var(--green-700,#15803d)}
.epo-status-running,.epo-status-paid{background:var(--blue-100,#dbeafe);color:var(--blue-700,#1d4ed8)}
.epo-status-pending{background:var(--amber-100,#fef3c7);color:var(--amber-700,#b45309)}
.epo-status-cancelled,.epo-status-refunded{background:var(--red-100,#fee2e2);color:var(--red-700,#b91c1c)}
.epo-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.epo-metric-v{font-size:22px;font-weight:800;color:var(--ink);line-height:1}
.epo-metric-k{font-size:11px;color:var(--subtle);margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.epo-bar{height:7px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin-top:16px}
.epo-bar>i{display:block;height:100%;background:var(--ai-gradient);border-radius:99px}
.epo-steps{display:flex;flex-direction:column;gap:14px}
.epo-step{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);line-height:1.5}
.epo-step-n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--blue-600);color:#fff;font-size:12px;font-weight:800}
@media (max-width:720px){.epo-metrics{grid-template-columns:repeat(2,1fr)}}


/* ═══ Marché — note « vous êtes cité » (Sprint G, revue UX) ═══ */
.self-note{font-size:12px;font-weight:600;color:var(--green-700,#15803d);
  background:var(--green-100,#dcfce7);padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap}


/* ═══ Marque — hub scans de marque (Sprint H, revue UX) ═══ */
.brand-scan{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:20px 22px;margin-bottom:14px;text-decoration:none;transition:border-color .12s,transform .12s}
.brand-scan:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.bs-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}
.bs-name{font-size:16px;font-weight:800;color:var(--ink)}
.bs-domain{font-size:12.5px;color:var(--muted);margin-top:2px}
.bs-status{font-size:11px;font-weight:700;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;background:var(--bg-2);color:var(--muted)}
.bs-status-done{background:var(--green-100,#dcfce7);color:var(--green-700,#15803d)}
.bs-status-running{background:var(--blue-100,#dbeafe);color:var(--blue-700,#1d4ed8)}
.bs-status-failed{background:var(--red-100,#fee2e2);color:var(--red-700,#b91c1c)}
.bs-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.bs-metric-v{font-size:22px;font-weight:800;color:var(--ink);line-height:1}
.bs-metric-k{font-size:11px;color:var(--subtle);margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:720px){.bs-metrics{grid-template-columns:repeat(2,1fr)}}


/* ═══ Agence — cockpit portefeuille multi-clients (Sprint J, revue UX) ═══ */
.agency-portfolio{margin-bottom:26px}
.ap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.ap-summary{display:flex;gap:16px}
.ap-sum{text-align:center}
.ap-sum b{display:block;font-size:22px;font-weight:800;color:var(--ink);line-height:1}
.ap-sum span{font-size:10.5px;color:var(--subtle);text-transform:uppercase;letter-spacing:.04em}
.ap-list{display:flex;flex-direction:column;gap:10px}
.ap-client{display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);padding:14px 18px;text-decoration:none;transition:transform .12s,border-color .12s}
.ap-client:hover{transform:translateY(-1px);border-color:var(--line-strong)}
.ap-urg-high{border-left-color:var(--red-500,#ef4444)}
.ap-urg-mid{border-left-color:var(--amber-500,#f59e0b)}
.ap-urg-low{border-left-color:var(--green-500,#22c55e)}
.ap-client-name{font-size:15px;font-weight:800;color:var(--ink)}
.ap-client-next{font-size:12.5px;color:var(--muted);margin-top:2px}
.ap-client-scores{display:flex;gap:16px;flex:none}
.ap-score{text-align:center}
.ap-score-v{display:block;font-size:20px;font-weight:800;line-height:1;color:var(--ink)}
.ap-score-k{font-size:10px;color:var(--subtle);text-transform:uppercase;letter-spacing:.04em}
.ap-score-strong{color:var(--green-600,#16a34a)}
.ap-score-fair{color:var(--amber-600,#d97706)}
.ap-score-weak{color:var(--red-600,#dc2626)}
.ap-score-unmeasured{color:var(--subtle)}
@media (max-width:600px){.ap-client{flex-direction:column;align-items:flex-start;gap:10px}}


/* ═══ Optimisation méta / <head> — avancé (Sprint 29) ═══ */
.meta-preview-teaser{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.mp-chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}
.mp-chip-star{background:var(--blue-100,#dbeafe);color:var(--blue-700,#1d4ed8);border-color:transparent}
.meta-score{font-size:13px;font-weight:800;padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap}
.meta-score-strong{background:var(--green-100,#dcfce7);color:var(--green-700,#15803d)}
.meta-score-fair{background:var(--amber-100,#fef3c7);color:var(--amber-700,#b45309)}
.meta-score-weak{background:var(--red-100,#fee2e2);color:var(--red-700,#b91c1c)}
.meta-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.meta-check{display:flex;gap:10px;align-items:flex-start}
.mc-dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:5px;background:var(--line-strong)}
.meta-check-ok .mc-dot{background:var(--green-500,#22c55e)}
.meta-check-weak .mc-dot{background:var(--amber-500,#f59e0b)}
.meta-check-missing .mc-dot{background:var(--red-400,#f87171)}
.mc-label{font-size:13px;font-weight:700;color:var(--ink)}
.mc-note{font-size:12px;color:var(--muted);line-height:1.45;margin-top:1px}
.meta-head-code{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;font-family:var(--font-mono,monospace);font-size:12.5px;line-height:1.6;
  color:var(--ink-2);overflow-x:auto;white-space:pre;margin:0}
.meta-advice{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:10px}
.meta-advice li{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.field-label{display:block;font-size:12px;font-weight:600;color:var(--subtle);margin-bottom:5px}


/* ═══ Optimisation méta — comparaison au modèle de référence (Sprint 30) ═══ */
.bench-table{width:100%;border-collapse:collapse;font-size:13px}
.bench-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--subtle);padding:0 12px 10px;border-bottom:1px solid var(--line)}
.bench-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.bench-label{font-weight:700;color:var(--ink)}
.bench-you{color:var(--muted)}
.bench-them{color:var(--ink-2)}
.bench-marker{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;
  background:var(--line-strong);vertical-align:middle}
.bench-gap{background:var(--red-50,#fef2f2)}
.bench-gap .bench-marker{background:var(--red-500,#ef4444)}
.bench-gap .bench-them{color:var(--red-700,#b91c1c);font-weight:600}
.bench-ahead .bench-marker{background:var(--green-500,#22c55e)}
.bench-match .bench-marker{background:var(--green-400,#4ade80)}


/* ═══ Plan stratégique — actions globales + copie (Sprint 31) ═══ */
.plan-actions{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:var(--radius-lg,12px);
  padding:14px 18px;margin-bottom:24px}
.pa-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pa-label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--subtle,#9ca3af)}
.pa-label-ok{color:var(--green,#16a34a)}
.pa-progress{font-size:12px;color:var(--text-muted,#6b7280);font-weight:600}
.task-copy-row{display:flex;gap:6px;margin-top:8px}
.btn-xs{font-size:.6rem;padding:3px 8px;border-radius:6px}


/* ═══ QG projet — poste de commandement (Sprint 32) ═══ */
.hq-next{display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:linear-gradient(135deg,var(--blue-600,#2563eb),var(--purple,#7c3aed));
  color:#fff;border-radius:var(--r-lg,14px);padding:18px 22px;margin-bottom:26px;
  text-decoration:none;box-shadow:var(--sh-sm)}
.hq-next:hover{transform:translateY(-1px)}
.hq-next-eyebrow{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.85}
.hq-next-label{font-size:18px;font-weight:800;margin:3px 0 2px}
.hq-next-why{font-size:13px;opacity:.9}
.hq-next-go{font-size:14px;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.2);
  padding:8px 14px;border-radius:var(--r-pill,99px)}
.hq-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:26px}
.hq-result{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:var(--r-lg,14px);
  box-shadow:var(--sh-sm);padding:16px 18px;border-top:3px solid var(--line-strong,#d1d5db)}
.hq-result-v{font-size:26px;font-weight:800;color:var(--ink,#111);line-height:1}
.hq-result-k{font-size:11px;color:var(--subtle,#9ca3af);text-transform:uppercase;letter-spacing:.04em;margin-top:5px}
.hq-result-strong{border-top-color:var(--green-500,#22c55e)}
.hq-result-strong .hq-result-v{color:var(--green-600,#16a34a)}
.hq-result-fair{border-top-color:var(--amber-500,#f59e0b)}
.hq-result-weak{border-top-color:var(--red-500,#ef4444)}
.hq-result-weak .hq-result-v{color:var(--red-600,#dc2626)}
.hq-result-unmeasured .hq-result-v{color:var(--subtle,#9ca3af)}
.hq-angles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-bottom:26px}
.hq-phase-title{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--subtle,#9ca3af);margin-bottom:10px}
.hq-angle{display:flex;align-items:center;gap:11px;background:var(--card,#fff);
  border:1px solid var(--line,#e5e7eb);border-radius:var(--r-md,10px);box-shadow:var(--sh-sm);
  padding:11px 14px;margin-bottom:8px;text-decoration:none;transition:border-color .12s,transform .12s}
.hq-angle:hover{transform:translateY(-1px);border-color:var(--line-strong,#d1d5db)}
.hq-angle-mark{flex:none;width:10px;height:10px;border-radius:50%;background:var(--line-strong,#d1d5db)}
.hq-angle-covered .hq-angle-mark{background:var(--green-500,#22c55e)}
.hq-angle-partial .hq-angle-mark{background:var(--amber-500,#f59e0b)}
.hq-angle-todo .hq-angle-mark{background:var(--red-400,#f87171)}
.hq-angle-body{flex:1;min-width:0}
.hq-angle-label{font-size:13.5px;font-weight:700;color:var(--ink,#111)}
.hq-angle-detail{font-size:12px;color:var(--muted,#6b7280);margin-top:1px}
.hq-angle-status{font-size:11px;font-weight:700;color:var(--subtle,#9ca3af);white-space:nowrap}
.hq-angle-covered .hq-angle-status{color:var(--green-600,#16a34a)}
.hq-angle-partial .hq-angle-status{color:var(--amber-600,#d97706)}
.hq-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.hq-toolkit{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:var(--r-lg,14px);
  box-shadow:var(--sh-sm);padding:14px 16px}
.hq-toolkit-title{font-size:12px;font-weight:800;color:var(--ink,#111);margin-bottom:8px}
.hq-toolkit-links{display:flex;flex-direction:column;gap:4px}
.hq-tool-link{font-size:12.5px;color:var(--blue-600,#2563eb);text-decoration:none;padding:2px 0}
.hq-tool-link:hover{text-decoration:underline}


/* ═══ Hub GEO — sélecteur de projet (Sprint 33) ═══ */
.geo-project-switch{display:flex;align-items:center;gap:8px;min-width:0;max-width:60%}
.geo-project-switch__label{font-size:10px;color:var(--text-muted,#6b7280);font-weight:600;white-space:nowrap;flex:none}
.geo-project-switch__scroll{display:flex;align-items:center;gap:6px;overflow-x:auto;
  padding-bottom:2px;scrollbar-width:thin}
.geo-project-switch__scroll .btn{white-space:nowrap;flex:none}


/* ═══ État de facturation — bandeau démo + pastilles (Sprint 42) ═══ */
.demo-banner{border-left:3px solid var(--amber-500,#f59e0b)}
.bill-dot{width:12px;height:12px;border-radius:50%;flex:none;background:var(--line-strong,#d1d5db)}
.bill-dot-unconfigured{background:var(--amber-500,#f59e0b)}
.bill-dot-test{background:var(--blue-500,#3b82f6)}
.bill-dot-live{background:var(--green-500,#22c55e)}