/* ============================================================================
   SUITE OPTIMA — Refonte modulaire
   SaaS pro affiné : typographie resserrée, motifs cohérents, théming par app
   ============================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/InterVariable.woff2') format('woff2-variations'),
       url('assets/fonts/InterVariable.woff2') format('woff2');
}

:root {
  /* Tokens neutres — légèrement teintés bleu froid pour un rendu pro */
  --bg-app: #f6f7f9;
  --bg-panel: #ffffff;
  --bg-soft: #f1f3f6;
  --bg-hover: #ebeef2;
  --text-main: #0b1220;
  --text-body: #1e293b;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --border: #e4e7ec;
  --border-strong: #cdd3dc;
  --border-ghost: #f0f2f5;

  --status-success: #0f766e;
  --status-success-bg: #d1fae5;
  --status-warning: #b45309;
  --status-warning-bg: #fef3c7;
  --status-danger: #b91c1c;
  --status-danger-bg: #fee2e2;
  --status-info: #0369a1;
  --status-info-bg: #e0f2fe;

  /* App color — remplacé dynamiquement via style attribute */
  --app: #2c5ca7;
  --app-soft: #eff4fc;
  --app-ink: #1e407a;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-xs: 0 1px 0 rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 10px -2px rgba(15,23,42,0.08), 0 2px 4px -2px rgba(15,23,42,0.04);
  --shadow-lg: 0 14px 30px -10px rgba(15,23,42,0.14), 0 4px 8px -4px rgba(15,23,42,0.06);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

body.density-compact { --scale: 0.92; }
body.density-comfy   { --scale: 1; }
body.density-airy    { --scale: 1.08; }

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

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  background: var(--bg-app);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: 14px;
}

/* ============================================================================
   ZOOM PROPORTIONNEL — maquette de référence : 1920px de large.
   --------------------------------------------------------------
   Toute l'app (sidebar, topbar, contenu, sticky-bars, modales) est rendue
   à largeur 1920px puis scalée uniformément via transform:scale(). Le ratio
   suit la largeur du viewport ; pas de scrollbar horizontale possible.
   • viewport <  1920 → scale < 1 (zoom out) — pas de plancher (priorité :
     pas de scrollbar)
   • viewport >  1920 → scale > 1 (zoom in fidèle, l'app remplit l'écran)
   La hauteur compense via `calc(100vh / scale)` pour que l'app couvre
   exactement le viewport visible une fois rétrécie/grandie.
   ============================================================================ */
:root { --app-scale: 1; }
body {
  /* Empêche tout scroll dû au transform — la mise à l'échelle remplit
     pile le viewport, et les overlays/modales utilisent des unités
     compatibles (cf. .app-root). */
  overflow: hidden;
}
.app-root {
  width: 1920px;
  height: calc(100vh / var(--app-scale));
  transform: scale(var(--app-scale));
  transform-origin: top left;
  /* Reste position:static pour que les modales fixed/sticky descendantes
     continuent de fonctionner (elles sont scalées avec le reste). */
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
ul, ol { list-style: none; }
img { max-width: 100%; display: block; }

::selection { background: color-mix(in oklab, var(--app) 30%, transparent); }

/* ==========================================================================
/* ==========================================================================
   LAYOUT GLOBAL — app-root empile la topbar full-width au-dessus du shell.
   Sidebar déployée par défaut (244px), se replie à 64px en mode rail.
   ========================================================================== */
.app-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh / var(--app-scale));
  overflow: hidden;
}
.shell {
  display: grid;
  grid-template-columns: 64px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
/* Sidebar garde sa place dans la grille (col 1, 64px) mais peut déborder
   visuellement jusqu'à 244px en overlay. Le contenu principal (col 2) ne
   bouge jamais, puisque la colonne 1 reste figée à 64px. */
.shell .sidebar {
  grid-column: 1;
  grid-row: 1;
  width: 244px;
  transition: width 0.22s var(--ease), box-shadow 0.22s var(--ease);
  overflow: hidden;
  z-index: 50;
  position: relative;
  box-shadow: 2px 0 24px -8px rgba(15, 25, 50, 0.18);
}
.shell.is-collapsed .sidebar { width: 64px; box-shadow: none; }
.shell.is-collapsed .sidebar:hover,
.shell.is-collapsed .sidebar:focus-within {
  width: 244px;
  box-shadow: 2px 0 24px -8px rgba(15, 25, 50, 0.18);
}
.shell .main-wrap { grid-column: 2; grid-row: 1; min-width: 0; }

/* ============ APP AUTONOME EMBARQUÉE (iframe sous le chrome du hub) ========
   Machine Design (build Vite) rendu dans une iframe plein cadre, sous la topbar
   et à droite de la sidebar. Barre breadcrumb « Retour au hub / Optima X ». */
.app-embed {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-app);
}
.app-embed-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 14px;
}
.app-embed-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: var(--bg-soft);
  color: var(--text);
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}
.app-embed-back:hover { background: var(--app-soft); color: var(--app-ink); }
.app-embed-sep { color: var(--text-muted); }
.app-embed-crumb { color: var(--text-muted); font-weight: 600; }
.app-embed-frame {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
}
.app-embed-error {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 40px;
  text-align: center;
}
.hub-iframe-guard {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100vh;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text, #1a2340);
  text-align: center;
  padding: 24px;
}
.hub-iframe-guard a {
  color: var(--app, #2c5ca7);
  font-weight: 600;
  text-decoration: underline;
}

/* ============================== SIDEBAR ================================== */
.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 50;
}

/* — Brand sidebar : simple icône maison, toujours centrée — */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-ghost);
  height: 58px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.sidebar-brand-mark {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  border-radius: 9px;
  background: var(--bg-soft);
  flex-shrink: 0;
}
.is-collapsed .sidebar-brand-wordmark,
.sidebar-brand-wordmark {
  display: none;
  height: 0;
}

/* ============================== RAIL & NAV ================================
   Deux renderings empilés : sidebar-rail (icônes uniques, en replié)
   et sidebar-nav (labels + badges, en déployé). Crossfade via opacity.
   ========================================================================== */
.sidebar-nav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  transition: opacity 0.18s var(--ease);
  opacity: 1;
  transition-delay: 0.1s;
}
.is-collapsed .sidebar-nav {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

/* --- RAIL : icônes uniques, visibles uniquement en replié --- */
.sidebar-rail {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s var(--ease);
}
.is-collapsed .sidebar-rail {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}
.rail-item {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-muted);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
.rail-item:hover { background: var(--bg-hover); color: var(--text-body); }
.rail-item.active {
  background: var(--bg-hover);
  color: var(--text);
}
.rail-item.active::before {
  content: ''; position: absolute;
  left: -8px; top: 25%; bottom: 25%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--text);
}
.rail-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
}

/* Séparateur fin entre blocs thématiques dans le rail */
.rail-divider {
  width: 22px;
  height: 1px;
  background: var(--border-ghost);
  margin: 4px 0;
}

/* Modules dans le rail : on remplace l'icône par le logo SVG du module
   et on aligne avec une pastille de couleur pour situer le bloc. */
.rail-module { padding: 0; }
.rail-module-logo {
  width: 26px; height: 26px;
  border-radius: 7px;
  object-fit: contain;
  background: color-mix(in oklab, var(--rail-tint, var(--app)) 8%, transparent);
  padding: 3px;
  transition: background 0.15s, transform 0.15s;
}
.rail-module:hover .rail-module-logo {
  background: color-mix(in oklab, var(--rail-tint, var(--app)) 18%, transparent);
}
.rail-module.active .rail-module-logo {
  background: color-mix(in oklab, var(--rail-tint, var(--app)) 22%, transparent);
}
.rail-module.active::before { background: var(--rail-tint, var(--text)); }
.rail-module.is-locked .rail-module-logo { opacity: 0.45; filter: grayscale(0.4); }
.rail-lock {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-panel);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
}

/* === Blocs thématiques dans la sidebar déployée ===
   Trois groupes (Documentation / Évaluation / Compétence) chacun reçoit
   sa couleur dominante via les variables --block-color / --block-soft
   définies inline depuis OPTIMA_BLOCKS. */
.sidebar-block {
  margin-top: 14px;
  padding-top: 4px;
}
.sidebar-block-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 10px 6px;
}
.sidebar-block-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--block-color);
  margin-top: 6px;
  flex-shrink: 0;
}
.sidebar-block-titles { display: flex; flex-direction: column; line-height: 1.25; }
.sidebar-block-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--block-color);
}
.sidebar-block-sub {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 500;
  white-space: nowrap;
}

/* Items module : logo + 2 lignes (nom + résultat utilisateur) */
.nav-module { gap: 10px; align-items: center; }
.nav-module-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--block-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 3px;
}
.nav-module-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.nav-module-label {
  display: flex; flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.nav-module-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}
.nav-module-outcome {
  font-size: 11.5px;
  color: var(--text-faint);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-item.nav-module:hover .nav-module-icon {
  background: color-mix(in oklab, var(--block-color) 14%, transparent);
}
.nav-item.nav-module.active {
  background: color-mix(in oklab, var(--block-color) 8%, transparent);
}
.nav-item.nav-module.active::before { background: var(--block-color); }
.nav-item.nav-module.active .nav-module-name { color: var(--block-color); }

/* État verrouillé : opacité douce + petit cadenas, accessible mais
   visuellement clair sur l'inactivité du module. */
.nav-item.nav-module.is-locked .nav-module-icon { opacity: 0.5; filter: grayscale(0.4); }
.nav-item.nav-module.is-locked .nav-module-name { color: var(--text-muted); font-weight: 500; }
.nav-item.nav-module.is-locked:hover { background: var(--bg-hover); }
.nav-module-lock {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sidebar-label {
  text-transform: uppercase;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.08em;
  padding: 14px 10px 6px;
  white-space: nowrap;
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-body);
  font-weight: 500;
  font-size: 13.5px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
  position: relative;
  white-space: nowrap;
  cursor: pointer;
}
.nav-item:hover { background: var(--bg-hover); }
.nav-item.active {
  background: var(--bg-hover);
  color: var(--text);
}
.nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--text);
}
.nav-item-icon { color: var(--text-muted); flex-shrink: 0; }
.nav-item.active .nav-item-icon { color: var(--text); }
.nav-item-label { flex: 1; }
.nav-item-badge {
  font-size: 11px; font-weight: 600;
  background: var(--bg-soft); color: var(--text-muted);
  padding: 2px 7px; border-radius: 99px;
}

.sidebar-footer {
  padding: 10px;
  border-top: 1px solid var(--border-ghost);
}

/* ============================== HEADER =================================== */
.main-wrap {
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.topbar {
  height: 58px;
  flex-shrink: 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px 0 0;
  position: relative;
  z-index: 60;
}
.topbar-spacer { flex: 1; }

/* — Brand header : logo Optima AI à gauche, toujours visible,
   largeur fixe indépendante de l'état de la sidebar. — */
.topbar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 244px;
  padding: 0 20px;
  height: 100%;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-brand img {
  height: 34px;
  width: auto;
  display: block;
}
.topbar-brand img {
  height: 34px;
  width: auto;
  display: block;
}

.topbar-actions { display: flex; align-items: center; gap: 6px; }

.wallet-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  transition: all 0.15s;
  position: relative;
}
.wallet-chip:hover { border-color: var(--border-strong); background: var(--bg-panel); }
.wallet-chip-icon {
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--app-soft);
  color: var(--app);
  display: flex; align-items: center; justify-content: center;
}
.wallet-chip-low { color: var(--status-danger); }
.wallet-chip-low .wallet-chip-icon { background: var(--status-danger-bg); color: var(--status-danger); }

.wallet-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  z-index: 40;
  animation: dropIn 0.18s var(--ease);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.wallet-dropdown h4 { font-size: 13px; color: var(--text-muted); font-weight: 500; margin-bottom: 6px; }
.wallet-dropdown-balance {
  font-size: 26px; font-weight: 700; color: var(--text-main); letter-spacing: -0.02em;
}
.wallet-dropdown-balance small { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.wallet-dropdown-meta { font-size: 12.5px; color: var(--text-muted); margin: 10px 0 14px; line-height: 1.45; }
.wallet-dropdown-meta strong { color: var(--app); }
.wallet-dropdown-meta .caveat { color: var(--text-faint); font-size: 11px; display: block; margin-top: 6px; }

.lang-switch {
  display: flex;
  background: var(--bg-soft);
  border-radius: 7px;
  padding: 2px;
  font-size: 11.5px;
  font-weight: 600;
}
.lang-switch button {
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--text-muted);
}
.lang-switch button.active { background: var(--bg-panel); color: var(--text-main); box-shadow: var(--shadow-xs); }

.user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 99px;
  transition: background 0.15s;
}
.user-chip:hover { background: var(--bg-soft); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 99px;
  background: linear-gradient(135deg, #cbd5e1, #64748b);
  color: #fff; font-weight: 600; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.user-name { font-size: 13px; font-weight: 600; color: var(--text-main); }

/* ============================== MAIN CONTENT ============================== */
.main {
  flex: 1;
  overflow-y: auto;
  /* Padding fluide : resserré sur ~1280px, aéré sur ultrawide
     clamp(min, ideal-basé-sur-vw, max) — ~3% de la largeur viewport */
  padding: clamp(16px, 2.2vw, 40px) clamp(16px, 3vw, 56px) clamp(40px, 4vw, 72px);
  background:
    radial-gradient(1200px 300px at 50% -100px, color-mix(in oklab, var(--app) 6%, transparent), transparent),
    var(--bg-app);
  transition: background 0.4s var(--ease);
}

/* Container fluide :
   - toujours extensible selon la largeur viewport
   - ne fixe pas de cap étroit : on suit la fenêtre avec juste une gouttière */
.container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  transition: max-width 0.25s var(--ease);
}

/* Breakpoints industriels ciblés */
@media (min-width: 1800px) {
  /* Grands écrans atelier / supervision : on densifie les grilles */
  .project-grid { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .stats-row { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 2400px) {
  /* Ultrawide / 4K — on laisse respirer */
  body { font-size: 15px; }
  .project-grid { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }
}
@media (max-width: 1100px) {
  /* Tablette industrielle / laptop compact */
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* ============================ PAGE HEADER ================================= */
.page-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
  gap: 16px;
}
.page-hero h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-main);
}
.page-hero-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 4px;
}
.page-hero-context {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}

/* ========================== APP SELECTOR — Rail =========================== */
.app-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
  position: relative;
}

.app-rail-scroll {
  display: flex;
  /* Menu principal centré dans la zone de contenu (auparavant aligné à gauche). */
  justify-content: center;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px;
}
.app-rail-scroll::-webkit-scrollbar { display: none; }

/* Rangée "Bientôt disponibles" — séparée, visuellement moins proéminente */
.app-rail-scroll.app-rail-soon {
  padding-top: 10px;
  border-top: 1px dashed var(--border-ghost);
  margin-top: 2px;
}

.app-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: all 0.18s var(--ease);
  position: relative;
  background: transparent;
  color: var(--text-body);
}
.app-pill:hover {
  background: var(--bg-soft);
}
.app-pill-logo {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pill-soft, var(--bg-soft));
  flex-shrink: 0;
  transition: transform 0.3s var(--ease);
}
.app-pill-logo img { width: 20px; height: 20px; object-fit: contain; }
.app-pill:hover .app-pill-logo { transform: scale(1.06); }
.app-pill-label {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0;
  line-height: 1.25;
}
.app-pill-name { font-weight: 600; font-size: 13px; color: var(--text-main); }
.app-pill-tagline { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.app-pill.active {
  background: var(--pill-soft, var(--app-soft));
  border-color: var(--pill-color, var(--app));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pill-color, var(--app)) 15%, transparent);
}
.app-pill.active .app-pill-name { color: var(--pill-ink, var(--app-ink)); }
.app-pill.all .app-pill-logo {
  background: var(--bg-soft);
  color: var(--text-muted);
  font-weight: 800;
  font-size: 11px;
}
.app-pill.is-soon { opacity: 0.55; cursor: not-allowed; }
.app-pill.is-soon::after {
  content: 'Bientôt';
  position: absolute; top: -6px; right: 8px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--text-main); color: #fff;
  padding: 2px 5px; border-radius: 4px;
}

.app-rail-actions {
  display: flex; align-items: center; gap: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}
.app-rail-action {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: all 0.15s;
}
.app-rail-action:hover { background: var(--bg-hover); color: var(--text-main); }

/* ========================== APP SELECTOR — Segmented ====================== */
.app-segment {
  display: inline-flex;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.app-segment::-webkit-scrollbar { display: none; }
.app-segment-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: all 0.18s var(--ease);
  position: relative;
}
.app-segment-item:hover { color: var(--text-main); }
.app-segment-item img { width: 14px; height: 14px; }
.app-segment-item .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pill-color, var(--app));
  flex-shrink: 0;
}
.app-segment-item.active {
  background: color-mix(in oklab, var(--pill-color, var(--app)) 14%, white);
  color: var(--pill-ink, var(--app-ink));
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pill-color, var(--app)) 30%, transparent);
}
.app-segment-item .count {
  font-size: 10.5px; font-weight: 700;
  background: rgba(0,0,0,0.06);
  padding: 1px 6px;
  border-radius: 99px;
  color: var(--text-body);
}
.app-segment-item.active .count { background: rgba(0,0,0,0.08); }

/* ==================== APP SELECTOR — Grid (constellation) ================ */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.app-grid-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all 0.2s var(--ease);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  text-align: left;
}
.app-grid-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% -20%, var(--pill-color, var(--app)), transparent 60%);
  opacity: 0.06;
  transition: opacity 0.3s;
  pointer-events: none;
}
.app-grid-card:hover {
  border-color: var(--pill-color, var(--app));
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.app-grid-card:hover::before { opacity: 0.14; }
.app-grid-card.active {
  border-color: var(--pill-color, var(--app));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--pill-color, var(--app)) 15%, transparent);
}
.app-grid-card.active::before { opacity: 0.18; }

.app-grid-head {
  display: flex; align-items: center; gap: 10px;
}
.app-grid-logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--pill-soft, var(--app-soft));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.app-grid-logo img { width: 24px; height: 24px; object-fit: contain; }
.app-grid-name {
  font-weight: 700; font-size: 14.5px; color: var(--text-main);
  letter-spacing: -0.01em;
}
.app-grid-name small { display: block; font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.app-grid-tagline {
  font-size: 12.5px; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.app-grid-meta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-ghost);
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
}
.app-grid-meta strong { color: var(--text-main); font-weight: 700; }
.app-grid-soon {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--text-main); color: #fff;
  padding: 2px 6px; border-radius: 4px;
}
.app-grid-card.is-soon { opacity: 0.7; cursor: not-allowed; }

/* ============================ WORKSPACE CARDS ============================= */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.stat-card-label {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.stat-card-value {
  font-size: 24px; font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-card-value small { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.stat-card-trend { font-size: 11.5px; color: var(--status-success); font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 3px;}
.stat-card-sparkle {
  position: absolute; right: 12px; top: 12px;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--app-soft);
  color: var(--app);
  display: flex; align-items: center; justify-content: center;
}

/* ============================ PROJECTS GRID =============================== */

/* Onglets En cours / Finalisés — vrais onglets "dossier" fusionnés avec le panel */
.doc-tabs {
  display: flex;
  gap: 2px;
  margin: 28px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}
.doc-tab {
  all: unset;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px 15px;
  border-radius: 12px 12px 0 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: #e9edf3;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-bottom: 0;
  position: relative;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.doc-tab:hover {
  color: var(--text-main);
  background: #dfe4ec;
}
.doc-tab.is-active {
  background: rgb(250, 250, 250);
  color: var(--text-main);
  font-weight: 700;
}
/* Onglet actif : on gomme le bord bas pour fusionner avec le panel */
.doc-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: rgb(250, 250, 250);
  z-index: 3;
}
.doc-tab-label {
  white-space: nowrap;
}
.doc-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: rgba(0,0,0,0.08);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.doc-tab.is-active .doc-tab-count {
  background: #2c5ca7;
  color: #fff;
}

/* Panel du contenu : fusionné avec l'onglet actif, fond gris pour faire ressortir les cartes blanches */
.doc-tabs + .section-body {
  background: rgb(250, 250, 250);
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  border-radius: 0 0 12px 12px;
  padding: 24px 20px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 14px;
}
.section-head h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.section-count {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-soft);
  padding: 2px 7px; border-radius: 99px;
}
.section-head-filters { display: flex; gap: 6px; }

/* Version toggle (bouton accordéon) */
.section-head-toggle {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100% !important;
  margin: 28px 0 14px;
  cursor: pointer;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  box-sizing: border-box;
  position: relative;
}
.section-head-toggle::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border, rgba(0,0,0,0.08)), transparent);
  opacity: 0;
  transition: opacity 160ms ease;
}
.section-head-toggle:hover {
  background: var(--bg-soft, #f3f5f9);
  border-color: var(--border, rgba(0,0,0,0.06));
}
.section-head-toggle:hover::after { opacity: 1; }
.section-head-toggle:active { transform: translateY(1px); }
.section-head-toggle:focus-visible {
  outline: 2px solid var(--accent, #2c5ca7);
  outline-offset: 2px;
}
.section-head-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  color: var(--text-muted);
  background: transparent;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), color 160ms ease, background 160ms ease;
}
.section-head-toggle:hover .section-head-chevron {
  background: rgba(44, 92, 167, 0.08);
  color: var(--accent, #2c5ca7);
}
.section-head-toggle.is-open .section-head-chevron {
  color: var(--accent, #2c5ca7);
  background: rgba(44, 92, 167, 0.1);
  transform: rotate(180deg);
}

/* Contenu accordéon — animation ouverture/fermeture */
.section-body {
  overflow: hidden;
  animation: sectionOpen 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sectionOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 4000px;
  }
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
/* Vue filtrée par hub : grille centrée, cartes en largeur naturelle.
   On bascule en flex pour que peu de cartes soient centrées plutôt
   qu'alignées à gauche d'une grille auto-fill. */
.project-grid.is-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.project-grid.is-centered > .project-card {
  flex: 0 1 360px;
  min-width: 280px;
  max-width: 420px;
}

.project-card {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.18s var(--ease);
  cursor: pointer;
  overflow: hidden;
}
.project-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--card-app, var(--app));
  opacity: 0.9;
}
.project-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.project-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.project-card-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 7px 3px 5px;
  border-radius: 99px;
  background: var(--card-soft, var(--app-soft));
  color: var(--card-ink, var(--app-ink));
}
.project-card-chip img { width: 12px; height: 12px; }
.project-card-menu {
  color: var(--text-faint);
  padding: 2px;
  border-radius: 6px;
  transition: all 0.15s;
}
.project-card-menu:hover { background: var(--bg-hover); color: var(--text-main); }

.project-card-title {
  font-size: 15px; font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.project-card-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-muted);
}
.project-card-meta .avatar {
  width: 20px; height: 20px; border-radius: 99px;
  background: linear-gradient(135deg, #cbd5e1, #94a3b8);
  color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.project-card-meta .dot-sep { color: var(--text-faint); }

.progress-row { display: flex; flex-direction: column; gap: 5px; }
.progress-row-label {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: var(--text-muted);
}
.progress-row-label strong { color: var(--text-main); font-weight: 700; }
.progress-bar {
  height: 4px; border-radius: 99px;
  background: var(--bg-soft);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%; border-radius: 99px;
  background: var(--card-app, var(--app));
  transition: width 0.6s var(--ease);
}

.project-card-langs {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.lang-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  background: var(--bg-soft); color: var(--text-muted);
  padding: 2px 5px; border-radius: 3px;
}

.project-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto;
  padding-top: 4px;
}
.project-card-cta {
  font-size: 13px; font-weight: 600; color: var(--card-app, var(--app));
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px 4px 0;
  border-radius: 6px;
  transition: transform 0.15s;
}
.project-card:hover .project-card-cta { transform: translateX(2px); }

.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 99px;
}
.status-pill.warn { background: var(--status-warning-bg); color: var(--status-warning); }
.status-pill.ok { background: var(--status-success-bg); color: var(--status-success); }
.status-pill.info { background: var(--status-info-bg); color: var(--status-info); }
/* Erreur backend (status=ERROR) */
.status-pill.err {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
/* Génération/Extraction en cours (alimenté par useLiveProjects côté app.jsx) */
.status-pill.live {
  background: rgba(44, 92, 167, 0.12);
  color: #1e407a;
}
.status-pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
/* Override pour le pill live : pas de dot statique, on affiche un dot pulsant */
.status-pill.live::before { display: none; }
.status-pill-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: optima-pulse 1.4s ease-in-out infinite;
}
@keyframes optima-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.7); }
}

/* Barre de progression "live" — petit shimmer pour distinguer le flow actif. */
.progress-bar.is-live .progress-bar-fill {
  background: linear-gradient(
    90deg,
    var(--card-app, #2c5ca7) 0%,
    color-mix(in srgb, var(--card-app, #2c5ca7) 70%, white) 50%,
    var(--card-app, #2c5ca7) 100%
  );
  background-size: 200% 100%;
  animation: optima-progress-shimmer 1.8s linear infinite;
}
@keyframes optima-progress-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: 0 0; }
}
.progress-row-live {
  color: var(--card-app, #2c5ca7);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.project-card.is-in-flight {
  border-color: color-mix(in srgb, var(--card-app, #2c5ca7) 35%, transparent);
}
.project-card.is-error {
  border-color: rgba(220, 38, 38, 0.35);
}

/* Tooltip d'avertissement concurrence sous le CTA "Générer le manuel"
   (plan #2 phase J — limite 3 générations Conception simultanées). */
.sticky-bar-concurrency-warning {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--status-warning, #b45309);
  max-width: 380px;
  line-height: 1.35;
}

/* ============================== BUTTONS =================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  transition: all 0.15s var(--ease);
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary {
  background: var(--app);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.1);
}
.btn-primary:hover { background: var(--app-ink); }
.btn-ghost {
  background: var(--bg-panel);
  border-color: var(--border);
  color: var(--text-body);
}
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.btn-subtle {
  background: var(--bg-soft);
  color: var(--text-body);
}
.btn-subtle:hover { background: var(--bg-hover); }
.btn-lg { padding: 10px 16px; font-size: 14px; }
.btn-sm { padding: 5px 9px; font-size: 12px; }
.btn-icon {
  width: 32px; height: 32px; padding: 0;
  border-radius: 8px;
  color: var(--text-muted);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-main); }

/* ============================= CROSS-SELL ================================= */
.cross-sell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(90deg, #fcebeb, #fff5f5);
  border: 1px solid #f4c5c5;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.cross-sell::after {
  content: ''; position: absolute; right: -40px; bottom: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, #cd3433, transparent 60%);
  opacity: 0.06;
}
.cross-sell-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #f4c5c5;
}
.cross-sell-icon img { width: 26px; height: 26px; }
.cross-sell-text strong { color: #8a1f1e; display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
.cross-sell-text span { color: #7a2f2e; font-size: 12.5px; }
.cross-sell-btn {
  background: #cd3433;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
  z-index: 2;
}
.cross-sell-btn:hover { background: #a42a29; }

/* ============================ COMMAND PALETTE ============================= */
.cmd-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 110px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}
.cmd-overlay.open { opacity: 1; pointer-events: auto; }
.cmd-box {
  width: 100%;
  max-width: 620px;
  background: var(--bg-panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform 0.22s var(--ease);
  border: 1px solid var(--border);
}
.cmd-overlay.open .cmd-box { transform: translateY(0); }
.cmd-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.cmd-input-wrap input {
  flex: 1;
  border: none; outline: none;
  background: transparent;
  font-size: 15px;
}
.cmd-list { max-height: 400px; overflow-y: auto; padding: 6px; }
.cmd-section-label {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint);
  padding: 10px 12px 4px;
}
.cmd-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  text-align: left;
  transition: background 0.1s;
  font-size: 13.5px;
}
.cmd-item.highlight,
.cmd-item:hover { background: var(--bg-soft); }
.cmd-item img { width: 20px; height: 20px; }
.cmd-item-body { flex: 1; min-width: 0; }
.cmd-item-title { font-weight: 600; color: var(--text-main); }
.cmd-item-sub { font-size: 11.5px; color: var(--text-muted); }
.cmd-item-kbd {
  font-size: 10.5px; font-weight: 600;
  background: var(--bg-hover);
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 5px;
}
.cmd-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  font-size: 11px;
  color: var(--text-muted);
}

/* ============================ CONTEXT PANEL =============================== */
.context-panel {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 80;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px 10px 12px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-md);
  font-size: 12.5px;
  max-width: 340px;
}
.context-panel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--app);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--app) 25%, transparent);
}
.context-panel strong { color: var(--text-main); font-weight: 700; }

/* ============================ FEEDBACK FAB ================================ */
.fab-feedback {
  position: fixed;
  bottom: 18px; right: 18px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all 0.15s;
  z-index: 70;
}
.fab-feedback:hover { color: var(--app); border-color: var(--app); transform: translateY(-1px); }

/* =============================== TWEAKS =================================== */
.tweaks {
  position: fixed;
  right: 18px; top: 72px;
  width: 260px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 90;
  padding: 0;
  overflow: hidden;
  display: none;
}
.tweaks.open { display: block; animation: dropIn 0.22s var(--ease); }
.tweaks-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.tweaks-head h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-main); }
.tweaks-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 180px); overflow-y: auto; }
.tweak-row { display: flex; flex-direction: column; gap: 6px; }
.tweak-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.tweak-opts { display: flex; gap: 4px; flex-wrap: wrap; }
.tweak-opt {
  padding: 5px 10px; font-size: 12px; font-weight: 500;
  border-radius: 7px;
  background: var(--bg-soft);
  color: var(--text-body);
  transition: all 0.15s;
}
.tweak-opt:hover { background: var(--bg-hover); }
.tweak-opt.active {
  background: var(--app);
  color: #fff;
}
.tweak-opt.mini { padding: 4px 8px; font-size: 11px; }

/* ============================ SKELETONS & BITS ============================ */
.card-empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg-panel);
}

.divider { height: 1px; background: var(--border); margin: 12px 0; }

.kbd {
  font-size: 10.5px; font-weight: 600;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--text-muted);
}

/* ================== ACTIVITY FEED (alternative view) ===================== */
.activity {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.activity-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-ghost);
  cursor: pointer;
  transition: background 0.15s;
}
.activity-item:hover { background: var(--bg-soft); }
.activity-item:last-child { border-bottom: none; }
.activity-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--card-soft, var(--app-soft));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.activity-avatar img { width: 20px; height: 20px; }
.activity-body { flex: 1; min-width: 0; }
.activity-title { font-size: 13.5px; color: var(--text-main); font-weight: 500; }
.activity-title strong { font-weight: 700; }
.activity-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.activity-action { font-size: 12px; color: var(--card-app, var(--app)); font-weight: 600; }

/* ============================== TIPS (infobulles) =========================
   Style sombre. Portail dans body. Apparition fade + léger slide.
   ========================================================================== */
.tip {
  position: fixed;
  z-index: 9999;
  background: #0f172a;
  color: #f1f5f9;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.12);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  animation: tipIn 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  letter-spacing: 0.005em;
}
@keyframes tipIn {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
.tip-title {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  margin-bottom: 2px;
}
.tip-desc {
  color: #cbd5e1;
}
.tip-bullets {
  margin: 6px 0 0;
  padding: 0 0 0 14px;
  color: #94a3b8;
  font-size: 12px;
}
.tip-bullets li { margin: 2px 0; }
.tip-arrow {
  position: absolute;
  width: 8px; height: 8px;
  background: #0f172a;
  transform: rotate(45deg);
  left: 50%;
  margin-left: -4px;
}
.tip-top .tip-arrow { bottom: -3px; }
.tip-bottom .tip-arrow { top: -3px; }

/* Scrollbar */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Responsive */
@media (max-width: 960px) {
  /* La largeur de la sidebar est gérée par l'état is-collapsed (244/64), pas par le viewport */
  .main { padding: 20px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}


/* ============================ SERVICES HERO =============================== */
.services-hero {
  margin: 28px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.services-hero-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.services-hero-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.15;
}
.services-hero-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: waveHello 2.4s ease-in-out 0.3s 2;
}
@keyframes waveHello {
  0%, 60%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(14deg); }
  20%, 40% { transform: rotate(-8deg); }
}
.services-hero-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}
.services-hero-sub strong {
  color: #2c5ca7;
  font-weight: 700;
}

/* --- CTA global "Créer un document" ----------------------------------- */
.services-hero-cta {
  margin: 14px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 14px;
  background: #2c5ca7;
  border: 1px solid #27528f;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.1px;
  cursor: pointer;
  transition: background 0.18s var(--ease),
              border-color 0.18s var(--ease),
              color 0.18s var(--ease);
}
.services-hero-cta:hover {
  background: #1e407a;
  border-color: #1e407a;
}
.services-hero-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: transform 0.25s var(--ease), background 0.18s var(--ease);
}
.services-hero-cta.is-open .services-hero-cta-icon {
  background: #eff4fc;
  color: #2c5ca7;
  transform: rotate(90deg);
}
.services-hero-cta.is-open {
  background: #fff;
  color: #1e407a;
  border-color: #c8d6ec;
}

/* --- Barre CTA "Nouveau document" quand un hub est filtré -------------- */
.hub-new-doc-bar {
  display: flex;
  justify-content: center;
  margin: 18px auto 8px;
}
.services-hero-cta-hub {
  background: var(--hub-color) !important;
  border-color: color-mix(in oklab, var(--hub-color) 80%, #000) !important;
  color: #fff !important;
}
.services-hero-cta-hub:hover {
  background: color-mix(in oklab, var(--hub-color) 85%, #000) !important;
  border-color: color-mix(in oklab, var(--hub-color) 70%, #000) !important;
}
.services-hero-cta-hub .services-hero-cta-icon {
  background: rgba(255, 255, 255, 0.22);
}
.services-hero-cta-hub-name {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  margin-left: 8px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.services-hero-cta-hub.is-open {
  background: #fff !important;
  color: var(--hub-color) !important;
  border-color: color-mix(in oklab, var(--hub-color) 45%, #fff) !important;
}
.services-hero-cta-hub.is-open .services-hero-cta-icon {
  background: var(--hub-soft);
  color: var(--hub-color);
  transform: rotate(90deg);
}

.hub-new-doc-dropslot {
  margin: 10px auto 16px;
  width: 100%;
  max-width: 920px;
  animation: dropslot-in 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
.hub-new-doc-dropslot .dropzone { margin-bottom: 0; }

/* --- Tunnel "Créer un document" : stepbar + états de la grille ---------- */
.services-hero.is-tunnel .services-hero-head { margin-bottom: 4px; }

/* Cartes cliquables en mode tunnel (avant choix) */
.services-hero.is-picking .service-card.is-pickable {
  cursor: pointer;
}
.services-hero.is-picking .service-card.is-pickable:hover {
  border-color: var(--svc-color);
  background: color-mix(in oklab, var(--svc-soft) 55%, #fff);
}

/* Carte choisie : ring coloré plein */
.service-card.is-picked {
  border-color: var(--svc-color) !important;
  background: var(--svc-soft) !important;
}
.service-card-picked-flag {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--svc-color);
}

/* Dropslot sous la grille */
.services-hero-dropslot {
  margin: 18px auto 0;
  width: 100%;
  max-width: 920px;
  animation: dropslot-in 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dropslot-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.services-hero-dropslot .dropzone { margin-bottom: 0; }

/* Dropzone teintée au hub quand elle vit sous le hero */
.dropzone.has-hub {
  border-color: color-mix(in oklab, var(--hub-color) 55%, var(--border-strong));
  background: color-mix(in oklab, var(--hub-soft) 35%, #fff);
}
.dropzone.has-hub::before {
  background: none;
}
.dropzone.has-hub:hover {
  border-color: var(--hub-color);
  background: color-mix(in oklab, var(--hub-soft) 55%, #fff);
}
.dropzone.has-hub.is-dragging {
  border-color: var(--hub-color);
  background: color-mix(in oklab, var(--hub-soft) 70%, #fff);
}
.dropzone.has-hub .dropzone-cta-primary {
  background: var(--hub-color);
  border-color: var(--hub-color);
}
.dropzone.has-hub .dropzone-cta-primary:hover {
  background: color-mix(in oklab, var(--hub-color) 85%, #000);
  border-color: color-mix(in oklab, var(--hub-color) 85%, #000);
}
.dropzone.has-hub .dropzone-sub strong { color: var(--hub-color); }
.dropzone.has-hub .dropzone-title strong { color: var(--hub-color); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/* === Blocs thématiques (Documentation / Évaluation / Compétence) ===
   Trois sections empilées. Chaque bloc a un en-tête léger avec sa couleur
   dominante (--block-color) servant de repère visuel. */
.services-blocks {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 0;
}
.services-block { display: flex; flex-direction: column; gap: 10px; transition: gap 0.32s var(--ease); }

/* ============================================================
   Mode focus : un hub précis est sélectionné. On replie tout ce
   qui n'est pas le hub actif (autres cartes du même bloc, tout
   un autre bloc) avec une animation douce pour libérer l'espace.
   ============================================================ */

/* Cartes repliées : on garde la grille intacte (cartes même
   largeur), on réduit juste la hauteur et la richesse interne. */
.service-card {
  transition: border-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease),
              transform 0.18s var(--ease),
              background 0.18s var(--ease),
              padding 0.32s var(--ease),
              min-height 0.32s var(--ease);
}
.service-card.is-collapsed {
  min-height: 0;
  padding: 8px 12px;
  background: color-mix(in oklab, var(--bg-soft) 60%, var(--bg-panel));
  align-self: start;
}
.service-card.is-collapsed .service-card-signature,
.service-card.is-collapsed .service-card-outcome,
.service-card.is-collapsed .service-card-activate,
.service-card.is-collapsed .service-card-picked-flag,
.service-card.is-collapsed .service-card-count {
  display: none;
}
.service-card.is-collapsed .service-card-hubname {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--text-body);
}
.service-card.is-collapsed:hover .service-card-hubname {
  color: var(--svc-color, var(--app));
}

/* Bloc entier replié : on garde le titre lisible mais on
   compresse les cartes en pastilles minuscules sur une ligne. */
.services-block.is-collapsed { gap: 6px; }
.services-block.is-collapsed .services-block-label {
  font-size: 14px;
  font-weight: 700;
  transition: font-size 0.32s var(--ease);
}
.services-block.is-collapsed .services-block-sub {
  max-height: 0;
  opacity: 0;
  margin: 0;
  overflow: hidden;
  transition: max-height 0.32s var(--ease), opacity 0.2s var(--ease);
}
.services-block-sub {
  max-height: 40px;
  opacity: 1;
  transition: max-height 0.32s var(--ease), opacity 0.32s var(--ease) 0.05s;
}
.services-block-label {
  transition: font-size 0.32s var(--ease);
}
/* En mode focus, on masque entièrement les cartes non sélectionnées,
   même celles du bloc qui contient le hub actif. */
.services-block.has-active .service-card.is-collapsed {
  display: none;
}
/* …et la carte active restante est centrée sur la largeur du bloc.
   On bascule la grille en flex centrée pour ne plus dépendre des
   3 colonnes par défaut. */
.services-block.has-active .services-grid {
  display: flex;
  justify-content: center;
}
.services-block.has-active .services-grid .service-card {
  flex: 0 1 360px;
  max-width: 480px;
}
/* Et dans les blocs sans hub actif, on cache toutes les cartes :
   il ne reste plus que le titre du bloc. */
.services-block.is-collapsed:not(.has-active) .services-grid {
  display: none;
}
/* En mode focus on masque aussi les en-têtes de bloc — on a besoin
   de toute la verticalité pour la suite du workspace. */
.services-block.is-collapsed .services-block-head {
  display: none;
}
/* Et le bloc replié sans hub actif disparaît entièrement (plus de
   gap résiduel ni d'espace mort dans le flux). */
.services-block.is-collapsed:not(.has-active) {
  display: none;
}
.services-block-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0 2px;
}
.services-block-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--block-color);
  margin-top: 7px;
  flex-shrink: 0;
}
.services-block-titles { display: flex; flex-direction: column; gap: 2px; }
.services-block-label {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  color: var(--block-color);
  margin: 0;
  line-height: 1.2;
}
.services-block-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 500;
  line-height: 1.3;
}

/* Barre filtre actif (remplace la carte "Tous") */
.services-hero-filter-active {
  display: flex;
  justify-content: center;
  margin: 4px auto 14px;
}
.services-hero-filter-reset {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 99px;
  background: var(--bg-panel);
  border: 1px solid var(--border-ghost);
  color: var(--text-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.services-hero-filter-reset:hover {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text-main);
}
.services-hero-filter-reset svg {
  color: var(--text-muted);
}
.services-hero-filter-reset-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: #2c5ca7;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.service-card {
  /* Largeur gérée par la grille parent (services-grid) */
  min-width: 0;
}

/* Pas de variation de largeur pour les anciennes grilles "soon" — supprimées */

.service-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  padding: 14px 14px 38px;
  min-height: 130px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s var(--ease),
              box-shadow 0.18s var(--ease),
              transform 0.18s var(--ease),
              background 0.18s var(--ease);
  min-width: 0;
  overflow: hidden;
}
.service-card:hover:not(:disabled) {
  border-color: var(--svc-color, var(--app));
  box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--svc-color, var(--app)) 40%, transparent);
  transform: translateY(-1px);
}
.service-card.active {
  border-color: var(--svc-color, var(--app));
  background: var(--svc-soft, var(--app-soft));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--svc-color, var(--app)) 14%, transparent);
}
.service-card.is-inactive {
  background: var(--bg-soft);
  border-style: dashed;
  border-color: var(--border-strong);
}
.service-card.is-inactive:hover:not(:disabled) {
  border-style: solid;
  background: color-mix(in oklab, var(--svc-soft, var(--app-soft)) 50%, var(--bg-panel));
  border-color: var(--svc-color, var(--app));
}
.service-card.is-inactive .service-card-logo img,
.service-card.is-inactive .service-card-logo svg {
  filter: grayscale(0.85) opacity(0.7);
  transition: filter 0.18s var(--ease);
}
.service-card.is-inactive .service-card-logo {
  background: var(--bg-soft);
  color: var(--text-muted);
}
.service-card.is-inactive:hover .service-card-logo img,
.service-card.is-inactive:hover .service-card-logo svg {
  filter: grayscale(0) opacity(1);
}
.service-card.is-inactive:hover .service-card-logo {
  background: color-mix(in oklab, var(--svc-soft, var(--app-soft)) 70%, var(--bg-panel));
  color: var(--svc-color, var(--app));
}
.service-card.is-inactive .service-card-name-accent,
.service-card.is-inactive .service-card-kicker-accent,
.service-card.is-inactive .service-card-hubname {
  color: var(--text-muted);
  transition: color 0.18s var(--ease);
}
.service-card.is-inactive:hover .service-card-name-accent,
.service-card.is-inactive:hover .service-card-kicker-accent,
.service-card.is-inactive:hover .service-card-hubname {
  color: var(--svc-color, var(--app));
}
.service-card-activate {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--svc-color, var(--app));
  background: color-mix(in oklab, var(--svc-soft, var(--app-soft)) 80%, var(--bg-panel));
  border: 1px solid color-mix(in oklab, var(--svc-color, var(--app)) 25%, transparent);
  border-radius: 99px;
  letter-spacing: 0.01em;
}
.service-card.is-inactive:hover .service-card-activate {
  background: var(--svc-color, var(--app));
  color: #fff;
  border-color: var(--svc-color, var(--app));
}

.service-card.is-soon {
  cursor: not-allowed;
}
.service-card.is-soon .service-card-logo img {
  filter: grayscale(1) opacity(0.55);
}
.service-card.is-soon .service-card-name-accent {
  color: var(--text-muted) !important;
}

.service-card-count {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--svc-color, var(--app));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* Ruban COMING SOON en haut-droite */
.service-card-ribbon {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--svc-color, var(--text-muted));
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

.service-card-logo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  max-width: 44px;
  max-height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Plaque douce teintée du segment, pour porter la marque Optima
     en monochrome sans ré-introduire les variations de couleur par hub. */
  background: color-mix(in oklab, var(--svc-soft, var(--app-soft)) 70%, var(--bg-panel));
  color: var(--svc-color, var(--app));
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.service-card-logo img,
.service-card-logo svg {
  width: 28px;
  height: 28px;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}
.service-card-logo .optima-mark {
  display: block;
}

.service-card-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Signature « Optima » : petit, en haut, façon prefix discret */
.service-card-signature {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  line-height: 1;
  margin-bottom: 2px;
}
/* Nom du hub : gros et gras, c'est l'identité dominante */
.service-card-hubname {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--svc-color, var(--app));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-card-outcome {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-body);
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
}
/* Conservés pour rétro-compat (autres usages éventuels du composant) */
.service-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.service-card-name-prefix {
  color: var(--text-main);
}
.service-card-name-accent {
  color: var(--svc-color, var(--app));
}
.service-card-tagline {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Carte "Tous" (visible seulement si filtre actif) */
.service-card-all {
  /* mêmes règles que service-card standard */
}
.service-card-logo-all {
  background: var(--bg-soft);
  color: var(--text-body);
}

@media (max-width: 1100px) {
  /* La grille .services-grid gère elle-même le nombre de colonnes ;
     on ne ré-impose plus de flex/max-width ici (sinon les items grid
     se collapsent en colonnes minuscules). */
}
@media (max-width: 720px) {
  /* idem : le grid template gère le responsive seul */
}


/* =============================== APP FOOTER ================================ */
.app-footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
  font-size: 11.5px;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  flex-shrink: 0;
  z-index: 5;
}
.app-footer-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-footer-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.app-footer-version {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-body);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.app-footer-sep {
  color: var(--text-faint);
  user-select: none;
}
.app-footer-link {
  color: var(--text-muted);
  transition: color 0.15s var(--ease);
  position: relative;
}
.app-footer-link:hover {
  color: var(--app);
}
.app-footer-link:hover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

@media (max-width: 720px) {
  .app-footer {
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    text-align: center;
  }
}


/* =============================== CREATE STEPPER =========================== */
/* Stepper horizontal 3 étapes dans le header du mode création.
   - étape done : pastille verte avec check, label noir, cliquable
   - étape current : pastille pleine couleur hub, label noir gras
   - étape todo : pastille outline gris clair, label gris
   - ligne de liaison : grise, devient verte entre deux étapes franchies */
.create-stepper {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px;
}
.create-stepper-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: default;
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
  min-width: 0;
  flex-shrink: 0;
}
.create-stepper-item:not(:disabled) {
  cursor: pointer;
}
.create-stepper-item:not(:disabled):hover {
  background: var(--bg-soft);
}
.create-stepper-bullet {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.create-stepper-num { line-height: 1; }
.create-stepper-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

/* --- état : courant ------------------------------------------------------- */
.create-stepper-item.is-current .create-stepper-bullet {
  background: var(--hub-color, var(--app));
  color: #fff;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--hub-color, var(--app)) 18%, transparent);
}
.create-stepper-item.is-current .create-stepper-label {
  color: var(--text-main);
}

/* --- état : franchi ------------------------------------------------------- */
.create-stepper-item.is-done .create-stepper-bullet {
  background: var(--status-success, #0f766e);
  color: #fff;
}
.create-stepper-item.is-done .create-stepper-label {
  color: var(--text-main);
}

/* --- état : à venir ------------------------------------------------------ */
.create-stepper-item.is-todo .create-stepper-bullet {
  background: var(--bg-panel);
  color: var(--text-faint);
  border: 1.5px solid var(--border-strong);
}
.create-stepper-item.is-todo .create-stepper-label {
  color: var(--text-faint);
  font-weight: 500;
}

/* --- ligne de liaison ----------------------------------------------------- */
.create-stepper-line {
  width: 38px;
  height: 2px;
  background: var(--border-strong);
  border-radius: 1px;
  transition: background 0.25s var(--ease);
  flex-shrink: 0;
}
.create-stepper-line.is-done {
  background: var(--status-success, #0f766e);
}

/* Responsive : masquer les labels sous 720px, garder les pastilles */
@media (max-width: 720px) {
  .create-stepper-label { display: none; }
  .create-stepper-line { width: 22px; }
}


/* =============================== AI WORKING MODAL ========================= */
/* Modale de transition étape 1 → 2 (et 2 → 3) : spinner + titre fixe +
   sous-texte qui change toutes les 1.2s. Fond overlay semi-transparent. */
.ai-working-modal {
  background: #fff;
  border-radius: 14px;
  padding: 36px 48px 32px;
  min-width: 380px;
  max-width: 460px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 4px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: ai-working-pop 0.28s var(--ease);
}
@keyframes ai-working-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-working-spinner {
  position: relative;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
}
.ai-working-ring,
.ai-working-ring-2 {
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-top-color: var(--hub-color, var(--app));
  border-right-color: var(--hub-color, var(--app));
  border-radius: 50%;
  animation: ai-working-spin 1.1s linear infinite;
}
.ai-working-ring-2 {
  inset: 8px;
  border-width: 2px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: var(--hub-color, var(--app));
  border-left-color: var(--hub-color, var(--app));
  opacity: 0.45;
  animation-duration: 1.6s;
  animation-direction: reverse;
}
@keyframes ai-working-spin {
  to { transform: rotate(360deg); }
}

.ai-working-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-main);
  margin-bottom: 8px;
}
.ai-working-sub {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  min-height: 20px;
  animation: ai-working-fade 0.4s var(--ease);
}
@keyframes ai-working-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =============================== ÉTAPE 2 : VISUELS ======================== */
/* Curation des visuels extraits : grille de vignettes, dropdown chapitre,
   lien Ignorer, bloc coût récap, barre d'actions bas avec CTA. */
.visuals-stage {
  padding: 22px 32px 32px;
  max-width: 1180px;
  margin: 0 auto;
}
.visuals-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.visuals-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.visuals-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin: 0;
}
.visuals-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
}

/* --- Grille de vignettes -------------------------------------------------- */
.visuals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}
.visual-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.2s var(--ease);
}
.visual-card.is-ignored {
  opacity: 0.45;
}
.visual-card.is-ignored .visual-name {
  text-decoration: line-through;
}
.visual-card.is-ignored .visual-thumb {
  filter: grayscale(1);
}
.visual-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg-soft);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.2s var(--ease);
}
.visual-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.visual-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.visual-name {
  color: var(--text-main);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.visual-ignore {
  background: none;
  border: none;
  color: var(--status-danger, #c2410c);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.visual-ignore:hover {
  text-decoration: underline;
}
.visual-chapter {
  width: 100%;
  height: 32px;
  padding: 0 28px 0 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-main);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23545254' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.visual-chapter:focus {
  outline: none;
  border-color: var(--hub-color, var(--app));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hub-color, var(--app)) 15%, transparent);
}
.visual-chapter:disabled {
  background-color: var(--bg-soft);
  cursor: not-allowed;
}
/* Sélecteur de sous-section / ancre — affiché sous .visual-chapter dès qu'un
   chapitre est choisi. Visuellement plus discret (fond gris léger, hauteur
   réduite) pour signaler qu'il est secondaire au chapitre. */
.visual-anchor {
  width: 100%;
  height: 28px;
  margin-top: 6px;
  padding: 0 26px 0 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #545254);
  background: var(--bg-soft, #f7f7f8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23545254' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 9px center;
  border: 1px solid var(--border, #e6e6e8);
  border-radius: 5px;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}
.visual-anchor:focus {
  outline: none;
  border-color: var(--hub-color, var(--app));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--hub-color, var(--app)) 12%, transparent);
}
.visual-anchor:disabled {
  background-color: var(--bg-soft);
  cursor: not-allowed;
  opacity: 0.6;
}




/* =============================== CADRE HUB + STICKY BAR =================== */
/* Cadre coloré selon le hub actif, englobant tout l'espace de création : header
   avec stepper + contenu d'étape + sticky bar en bas. En dehors du cadre, un
   fond gris très clair pour contraster avec le blanc du cadre. */

/* Stage = zone qui enveloppe le cadre et donne le fond gris autour */
.create-stage {
  min-height: 100vh;
  background: var(--bg-soft, #f7f6f4);
  padding: 0;
}
.create-stage.has-hub {
  /* Colle le cadre au ras du viewport — plus de gouttière ni d'ombre autour */
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Quand .main contient le cadre hub, supprimer son padding interne sinon le
   cadre se retrouve entouré d'une large gouttière invisible */
.main:has(.create-stage.has-hub) {
  padding: 0;
}
/* Retire le spacer bas du .main quand on affiche un cadre hub */
.container:has(> .create-stage.has-hub) > div[style*="height: 48"] {
  display: none;
}

/* Cadre : bordure fine couleur hub, coins arrondis, fond blanc */
.hub-frame {
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}
.hub-frame.has-hub {
  border: 1.5px solid var(--hub-color, var(--app));
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Ajuster le header à l'intérieur du cadre (plus de border-bottom propre au
   cadre externe, on garde les règles existantes pour .create-head-bar) */
.hub-frame .create-head-bar {
  border-radius: 12px 12px 0 0;
}
.hub-frame.has-hub .create-head-bar {
  /* Cadre collé au viewport : plus de coins arrondis, tout est carré */
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   Isolation de --hub-color : la couleur du service teinte UNIQUEMENT le cadre
   de travail (.hub-frame) et son contenu. Les chromes globaux — topbar,
   sidebar, app-footer — restent neutres, à la couleur de la version "Toutes".
   On neutralise --hub-color sur ces 3 conteneurs pour que même si une règle
   interne le lit par erreur, elle retombe sur --app.
   -------------------------------------------------------------------------- */
.topbar,
.sidebar-nav,
.app-footer {
  --hub-color: var(--app);
  --hub-soft: var(--app-soft);
}

/* ========= Sticky bar unifiée ============================================= */
/* Collée au bas du cadre (sticky dans le flux du cadre). Fond blanc, top-
   border dans la couleur du hub pour reprendre l'identité. Ombre douce vers
   le haut pour se détacher de la grille qui scrolle dessous. */
.sticky-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid color-mix(in oklab, var(--hub-color, var(--app)) 30%, var(--border-soft));
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.04);
  z-index: 5;
  margin-top: auto;
}
.sticky-bar-inner {
  display: grid;
  /* Layout par défaut : recap à gauche (prend l'espace dispo + shrinkable),
     CTA à droite. L'ancien `1fr auto 1fr` poussait le CTA au milieu et faisait
     déborder le recap sous le bouton sur les écrans étroits. */
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  max-width: 100%;
}
.sticky-bar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;        /* permet à RollbackBtn + recap de wrap si nécessaire */
}
/* Bouton "Retour" (rollback) discret, à gauche de la sticky bar.
   Placé devant le récap de l'étape — icône + label, fond ghost. */
.sticky-bar-back {
  all: unset;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 600;
  color: var(--text-muted, #64748b);
  background: rgba(15, 25, 50, 0.04);
  border: 1px solid var(--border, #e4e7ec);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, transform .08s;
  flex-shrink: 0;
}
.sticky-bar-back:hover {
  background: rgba(15, 25, 50, 0.08);
  color: var(--text-main, #0b1220);
  border-color: var(--border-strong, #cfd4db);
}
.sticky-bar-back:active { transform: translateY(1px); }
.sticky-bar-back:focus-visible {
  outline: 2px solid var(--accent, #2c5ca7);
  outline-offset: 2px;
}
.sticky-bar-center {
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: center;
  flex-wrap: nowrap;
}
.sticky-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Cartouche récap étape 1 : "Analyse IA de N doc · coût X crédits" */
.sticky-bar.is-step1 .sticky-bar-inner {
  grid-template-columns: 1fr auto;
}

/* Étape Visuels : layout simple 2 colonnes — tout en noir, sans solde/coût.
   À gauche : "Télécharger les images (.zip)". À droite : sélecteur de langues
   compact + CTA "Générer le manuel". */
.sticky-bar.is-visuals .sticky-bar-inner {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ───── Responsive sticky-bar (toutes étapes) ─────
   Sous 720px (tablette portrait / mobile) : stack vertical du recap et du
   CTA pour éviter que la phrase descriptive ne soit recouverte par le
   bouton. Le CTA prend toute la largeur — plus facile au pouce.            */
@media (max-width: 720px) {
  .sticky-bar-inner {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 12px 14px;
  }
  .sticky-bar-left {
    width: 100%;
  }
  .sticky-bar-right {
    width: 100%;
    justify-content: stretch;
  }
  .sticky-bar-cta {
    width: 100%;
    justify-content: center;
  }
  .sticky-bar-recap {
    width: 100%;
    padding: 8px 12px;
  }
  /* L'étape Visuels a un sélecteur de langues ; on l'aligne en flex-wrap. */
  .sticky-bar.is-visuals .sticky-bar-right {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.sticky-bar.is-visuals .sticky-bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.sticky-bar.is-visuals .sticky-bar-download {
  color: var(--text-main);
}
.sticky-bar.is-visuals .sticky-bar-langs-lbl {
  color: var(--text-main);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
}
.sticky-bar.is-visuals .visuals-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
}
.sticky-bar.is-visuals .visuals-lang input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.sticky-bar.is-visuals .visuals-lang-box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-strong, #c8cdd6);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  transition: background 120ms, border-color 120ms;
  flex-shrink: 0;
}
.sticky-bar.is-visuals .visuals-lang.is-on .visuals-lang-box {
  background: var(--hub-color, var(--app));
  border-color: var(--hub-color, var(--app));
}
.sticky-bar.is-visuals .visuals-lang.is-on .visuals-lang-box::after {
  content: '';
  width: 8px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.sticky-bar.is-visuals .visuals-lang-code {
  color: var(--text-main);
  letter-spacing: 0.02em;
}

/* Étape chatbox : recap à gauche, bouton Continuer collé à droite */
.sticky-bar.is-chatbox .sticky-bar-inner {
  grid-template-columns: 1fr auto;
}
.sticky-bar-recap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border-ghost);
  border-radius: 10px;
  color: var(--text-body);
  min-width: 0;          /* permet au texte interne de shrink quand l'espace manque */
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.3;
}
.sticky-bar-recap svg {
  color: var(--text-muted);
  flex-shrink: 0;
}
.sticky-bar-recap strong {
  color: var(--text);
  font-weight: 600;
}
.sticky-bar-recap-text {
  /* Sur les écrans assez larges la phrase tient sur une ligne. Quand l'espace
     manque (étape coverpage avec long descriptif), on laisse wrap proprement
     plutôt que de déborder sous le CTA "Continuer". */
  white-space: normal;
  line-height: 1.4;
  min-width: 0;
  overflow-wrap: anywhere;   /* coupe les longs mots si vraiment trop étroit */
}
.sticky-bar-validation-note {
  font-size: 11.5px;
  color: #7c5915;
  background: #fff7e6;
  border: 1px solid #f1c97a;
  padding: 3px 8px;
  border-radius: 99px;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 8px;
}

/* Divider vertical entre blocs du centre */
.sticky-bar-divider {
  width: 1px;
  height: 22px;
  background: var(--border-soft);
  flex-shrink: 0;
}

/* Progression étape 1 */
.sticky-bar-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 240px;
  max-width: 360px;
}
.sticky-bar-label {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-bar-label strong {
  color: var(--text-main);
  font-weight: 700;
}
.sticky-bar-track {
  height: 4px;
  background: var(--bg-soft);
  border-radius: 2px;
  overflow: hidden;
}
.sticky-bar-fill {
  height: 100%;
  background: var(--hub-color, var(--app));
  border-radius: 2px;
  transition: width 0.3s var(--ease);
}

/* Blocs centre : solde, coût, langues */
.sticky-bar-balance,
.sticky-bar-cost {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.sticky-bar-balance-lbl,
.sticky-bar-cost-lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sticky-bar-balance-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
}
.sticky-bar-cost-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--hub-color, var(--app));
  font-variant-numeric: tabular-nums;
}
.sticky-bar-cost-unit {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
  text-transform: lowercase;
}

/* Langues dans sticky */
.sticky-bar-langs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sticky-bar-langs-lbl {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 2px;
}

/* CTA principal */
.sticky-bar-cta {
  background: var(--hub-color, var(--app));
  border-color: var(--hub-color, var(--app));
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 9px 16px;
}
.sticky-bar-cta:hover:not(:disabled) {
  filter: brightness(1.06);
}
.sticky-bar-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sticky-bar-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Responsive : sur petit écran, empiler */
@media (max-width: 900px) {
  .sticky-bar-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sticky-bar-center {
    flex-wrap: wrap;
  }
}


/* =========================================================================
   Base de connaissance — vue vierge
   ========================================================================= */
.kb-view {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.kb-view-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kb-view-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}
.kb-view-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}
.kb-view-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 72px 32px;
  background: var(--bg-panel, #fff);
  border: 1px dashed var(--border, rgba(0,0,0,0.12));
  border-radius: 20px;
}
.kb-view-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--app-soft, #eff4fc);
  color: var(--app, #2c5ca7);
  margin-bottom: 4px;
}
.kb-view-empty-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.kb-view-empty-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0;
  text-wrap: pretty;
}

/* =========================================================================
   Mes documents — vue dédiée
   Réutilise les onglets .doc-tabs et la grille .project-grid existants.
   ========================================================================= */
.docs-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.docs-view-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.docs-view-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
}
.docs-view-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 640px;
  text-wrap: pretty;
}

/* =========================================================================
   Feedback FAB — bouton flottant + panneau "Aidez-nous à nous améliorer"
   Ancré bas-droite, au-dessus du footer. Présent partout dans l'app.
   ========================================================================= */
.feedback-fab-wrap {
  position: fixed;
  right: 22px;
  bottom: 56px;
  /* Le panneau d'aide/feedback doit toujours s'afficher au-dessus de
     n'importe quelle sticky bar (étape Sources/Visuels/Génération…),
     y compris quand celle-ci colle au bas du cadre hub. On monte donc
     le z-index nettement au-dessus des footers de section (z-index: 5)
     et des dropdowns (z-index: 30-40). */
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
  transition: bottom 0.18s var(--ease, ease);
}
/* Quand on est en étape de conception (le hub frame contient une
   sticky-bar collée au bas du cadre), on remonte le FAB pour qu'il
   ne soit plus avalé visuellement par la barre. Hauteur sticky-bar ≈
   72px ; on ajoute la marge habituelle (~16px) au-dessus du footer. */
body:has(.create-stage .sticky-bar) .feedback-fab-wrap {
  bottom: 128px;
}
.feedback-fab-wrap > * { pointer-events: auto; }

.feedback-fab {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--border, #e4e7ec);
  background: #fff;
  color: var(--app, #2c5ca7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(20, 30, 55, 0.14), 0 2px 6px rgba(20, 30, 55, 0.06);
  transition: transform .15s var(--ease, ease), box-shadow .15s var(--ease, ease), background .15s;
}
.feedback-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(20, 30, 55, 0.18), 0 3px 8px rgba(20, 30, 55, 0.08);
}
.feedback-fab.is-open {
  background: var(--app-soft, #eff4fc);
}
.feedback-fab svg {
  width: 26px;
  height: 26px;
  display: block;
}

.feedback-panel {
  width: 360px;
  max-width: calc(100vw - 44px);
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(20, 30, 55, 0.22), 0 6px 16px rgba(20, 30, 55, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: feedbackPanelIn .18s var(--ease, ease);
}
@keyframes feedbackPanelIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.feedback-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 14px;
  background: var(--bg-soft, #f1f3f6);
  border-bottom: 1px solid var(--border, #e4e7ec);
}
.feedback-panel-titles { flex: 1; min-width: 0; }
.feedback-panel-title {
  margin: 0 0 2px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.feedback-panel-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}
.feedback-panel-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.feedback-panel-close:hover {
  background: var(--bg-hover, #ebeef2);
  color: var(--text-main);
}

.feedback-tabs {
  margin: 14px 18px 4px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--bg-soft, #f1f3f6);
  border-radius: 999px;
}
.feedback-tab {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s, color .12s, box-shadow .12s;
}
.feedback-tab:hover { color: var(--text-main); }
.feedback-tab.is-active {
  background: #fff;
  color: var(--text-main);
  box-shadow: 0 1px 3px rgba(20, 30, 55, 0.08);
}

.feedback-fields {
  padding: 14px 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 56vh;
  overflow-y: auto;
}
.feedback-field { display: flex; flex-direction: column; gap: 6px; }
.feedback-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}
.feedback-input {
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-main);
  background: var(--bg-soft, #f1f3f6);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 10px;
  outline: none;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.feedback-input::placeholder { color: var(--text-faint, #94a3b8); }
.feedback-input:focus {
  background: #fff;
  border-color: var(--app, #2c5ca7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app, #2c5ca7) 18%, transparent);
}
.feedback-textarea {
  min-height: 60px;
  resize: vertical;
  line-height: 1.45;
}

.feedback-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border, #e4e7ec);
  margin-top: 8px;
}
.feedback-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.feedback-submit { padding: 8px 18px; font-size: 13.5px; }

/* =========================================================================
   Workspace — bloc « Documents en cours » + CTA vers Mes documents
   ========================================================================= */
.ws-docs-section {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ws-docs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
/* Vue filtrée par hub : titre de section centré */
.ws-docs-section.is-centered .ws-docs-head {
  justify-content: center;
  text-align: center;
}
.ws-docs-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}
.ws-docs-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--bg-soft, #f1f3f6);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}
.ws-docs-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border, #e4e7ec);
  background: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ws-docs-cta:hover {
  background: var(--bg-soft, #f1f3f6);
  border-color: var(--border-strong, #cfd4db);
  color: var(--app, #2c5ca7);
}

/* CTA mis en avant : accès rapide aux documents finalisés.
   Centré sous la grille "Documents en cours". */
.ws-done-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.ws-done-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 16px;
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-main);
  box-shadow: 0 1px 2px rgba(20, 30, 55, 0.04), 0 8px 24px rgba(20, 30, 55, 0.06);
  transition: transform .14s, border-color .14s, box-shadow .14s, background .14s;
  min-width: 320px;
  max-width: 480px;
}
.ws-done-cta:hover {
  transform: translateY(-1px);
  border-color: var(--app, #2c5ca7);
  background: color-mix(in srgb, var(--app, #2c5ca7) 4%, #fff);
  box-shadow: 0 2px 6px rgba(20, 30, 55, 0.06), 0 14px 32px color-mix(in srgb, var(--app, #2c5ca7) 18%, transparent);
}
.ws-done-cta-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--app, #2c5ca7) 14%, #fff);
  color: var(--app, #2c5ca7);
  transition: background .14s, color .14s;
}
.ws-done-cta:hover .ws-done-cta-icon {
  background: var(--app, #2c5ca7);
  color: #fff;
}
.ws-done-cta-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ws-done-cta-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.005em;
}
.ws-done-cta-sub {
  font-size: 12.5px;
  color: var(--text-muted);
}
.ws-done-cta > svg:last-child {
  color: var(--text-muted);
  transition: color .14s, transform .14s;
}
.ws-done-cta:hover > svg:last-child {
  color: var(--app, #2c5ca7);
  transform: translateX(2px);
}

/* =========================================================================
   Paramètres de l'espace
   Layout 2 colonnes (form + aperçu) sur Personnalisation, full-width sur
   Infos Entreprise. Footer sticky avec actions.
   ========================================================================= */
.settings-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
}
.settings-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border, #e4e7ec);
}
.settings-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  line-height: 1.15;
}
.settings-lede {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.settings-lede strong { color: var(--text-main); font-weight: 700; }

.settings-tabs {
  display: inline-flex;
  gap: 8px;
  margin-top: 8px;
}
.settings-tab {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1px solid var(--border, #e4e7ec);
  background: #fff;
  color: var(--text-main);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.settings-tab:hover { background: var(--bg-soft, #f1f3f6); }
.settings-tab.is-active {
  background: var(--app, #2c5ca7);
  border-color: var(--app, #2c5ca7);
  color: #fff;
  box-shadow: 0 1px 2px rgba(20, 30, 55, 0.08);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px) {
  .settings-grid { grid-template-columns: 1fr; }
}

.settings-form { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.settings-form-full { max-width: 720px; }

.settings-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-block-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.005em;
}
.settings-block-sub {
  margin: -8px 0 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.settings-field { display: flex; flex-direction: column; gap: 6px; }
.settings-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
}
.settings-input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-main);
  background: var(--bg-soft, #f1f3f6);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 10px;
  outline: none;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.settings-input::placeholder { color: var(--text-faint, #94a3b8); }
.settings-input:focus {
  background: #fff;
  border-color: var(--app, #2c5ca7);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--app, #2c5ca7) 18%, transparent);
}
.settings-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.settings-textarea {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) {
  .settings-row { grid-template-columns: 1fr; }
}

.settings-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 26px 16px;
  border: 1.5px dashed var(--border-strong, #cfd4db);
  border-radius: 12px;
  background: var(--bg-soft, #f1f3f6);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.settings-dropzone:hover {
  border-color: var(--app, #2c5ca7);
  color: var(--app, #2c5ca7);
}
.settings-dropzone.has-file {
  padding: 12px;
  background: #fff;
}
.settings-dropzone-img {
  max-width: 160px;
  max-height: 60px;
  object-fit: contain;
}
.settings-dropzone-icon { display: inline-flex; }
.settings-dropzone-text { font-size: 13px; font-weight: 500; }
.settings-dropzone-remove {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e5ea);
  background: #fff;
  color: var(--text-muted, #6e7078);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(20, 30, 55, .12);
  transition: color .12s, border-color .12s, background .12s;
  z-index: 2;
}
.settings-dropzone-remove:hover {
  color: #c0392b;
  border-color: #e3b4ae;
  background: #fff5f4;
}

.settings-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.settings-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-main);
  cursor: pointer;
}
.settings-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  accent-color: var(--app, #2c5ca7);
  cursor: pointer;
}

/* ----- Aperçu en temps réel ----- */
.settings-preview {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-preview-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.settings-preview-doc {
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow: 0 8px 24px rgba(20, 30, 55, 0.06), 0 1px 3px rgba(20, 30, 55, 0.04);
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 9.5px;
  color: var(--text-muted);
  min-height: 320px;
}
.settings-preview-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.settings-preview-logo {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint, #94a3b8);
  overflow: hidden;
}
.settings-preview-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.settings-preview-meta { text-align: right; line-height: 1.4; }
.settings-preview-title {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.02em;
}
.settings-preview-subtitle {
  text-align: center;
  margin-top: -8px;
  font-size: 9.5px;
}
.settings-preview-lines {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-preview-lines span {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--bg-hover, #ebeef2);
}
.settings-preview-lines span:nth-child(1) { width: 90%; }
.settings-preview-lines span:nth-child(2) { width: 78%; }
.settings-preview-lines span:nth-child(3) { width: 84%; }
.settings-preview-lines span:nth-child(4) { width: 70%; }
.settings-preview-lines span:nth-child(5) { width: 64%; }
.settings-preview-foot {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e4e7ec);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: end;
  font-size: 9px;
  line-height: 1.4;
}

/* ----- Footer sticky ----- */
.settings-foot {
  margin-top: 12px;
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--border, #e4e7ec);
}
.settings-btn-cancel {
  padding: 9px 18px;
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  color: var(--text-main);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.settings-btn-cancel:hover {
  background: var(--bg-soft, #f1f3f6);
  border-color: var(--border-strong, #cfd4db);
}
.settings-btn-save {
  padding: 9px 18px;
  font-size: 13.5px;
  border-radius: 10px;
}

/* =========================================================================
   Base de connaissances (KB v2)
   ========================================================================= */
.kb2-view {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.kb2-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kb2-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kb2-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--app, #2c5ca7);
  background: color-mix(in srgb, var(--app, #2c5ca7) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--app, #2c5ca7) 24%, #fff);
  border-radius: 6px;
}
.kb2-lede {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 780px;
  line-height: 1.55;
}

/* ----- Dropzone compacte ----- */
.kb2-dropzone {
  position: relative;
  border: 1.5px dashed var(--border-strong, #cfd4db);
  border-radius: 14px;
  background: var(--bg-soft, #f1f3f6);
  padding: 36px 24px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.kb2-dropzone:hover,
.kb2-dropzone.is-dragging {
  border-color: var(--app, #2c5ca7);
  background: color-mix(in srgb, var(--app, #2c5ca7) 5%, #fff);
}
.kb2-drop-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  color: var(--app, #2c5ca7);
  margin-bottom: 6px;
}
.kb2-drop-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}
.kb2-drop-sub {
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.kb2-drop-actions {
  position: relative;
  margin-top: 10px;
}
.kb2-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid var(--border-strong, #cfd4db);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.kb2-add-btn:hover {
  background: var(--bg-soft, #f1f3f6);
  border-color: var(--app, #2c5ca7);
  color: var(--app, #2c5ca7);
}
.kb2-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(20, 30, 55, 0.12);
  padding: 6px;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.kb2-add-menu button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-size: 13px;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
}
.kb2-add-menu button:hover {
  background: var(--bg-soft, #f1f3f6);
  color: var(--app, #2c5ca7);
}

/* ----- Notice confidentialité ----- */
.kb2-privacy {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--app, #2c5ca7) 5%, #fff);
  border: 1px solid color-mix(in srgb, var(--app, #2c5ca7) 18%, #fff);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-main);
}
.kb2-privacy strong { font-weight: 700; }
.kb2-privacy-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--app, #2c5ca7) 14%, #fff);
  color: var(--app, #2c5ca7);
}

/* ----- Liste fichiers ingérés ----- */
.kb2-files { display: flex; flex-direction: column; gap: 12px; }
.kb2-files + .kb2-files { margin-top: 18px; }
.kb2-files-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  justify-content: space-between;
}
/* Sous-titre pédagogique sous le titre — précise la règle d'inclusion. */
.kb2-files-sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted, #64748b);
  line-height: 1.5;
}
.kb2-files-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kb2-files-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-soft, #f1f3f6);
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 999px;
}
.kb2-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.kb2-file-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.kb2-file-card:hover {
  border-color: var(--border-strong, #cfd4db);
  box-shadow: 0 1px 3px rgba(20, 30, 55, 0.06);
}
.kb2-file-card.is-integrated {
  border-color: color-mix(in srgb, var(--app, #2c5ca7) 30%, #fff);
  background: color-mix(in srgb, var(--app, #2c5ca7) 3%, #fff);
}
.kb2-file-icon {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kb2-file-icon.is-pdf {
  background: color-mix(in srgb, #d4493b 15%, #fff);
  color: #c93a2c;
}
.kb2-file-icon.is-doc {
  background: color-mix(in srgb, var(--app, #2c5ca7) 14%, #fff);
  color: var(--app, #2c5ca7);
}
.kb2-file-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.kb2-file-body { min-width: 0; flex: 1; }
.kb2-file-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb2-file-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}
.kb2-file-trash {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.kb2-file-trash:hover {
  background: color-mix(in srgb, #d4493b 12%, #fff);
  color: #c93a2c;
}
.kb2-file-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  padding: 6px 10px;
  background: #1f2937;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s;
  white-space: nowrap;
  z-index: 5;
}
.kb2-file-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 18px;
  border: 5px solid transparent;
  border-top-color: #1f2937;
}
.kb2-file-card:hover .kb2-file-tooltip { opacity: 1; }

/* =========================================================================
   PersonalizeChip — CTA discret en début de Step 1
   ========================================================================= */
.personalize-chip-row {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin: -4px 0 8px;
}
.personalize-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  background: #fff;
  border: 1px solid var(--border-strong, #cfd4db);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s, box-shadow .12s;
  position: relative;
}
.personalize-chip:hover {
  border-color: var(--hub-color, var(--app, #2c5ca7));
  color: var(--hub-color, var(--app, #2c5ca7));
  background: color-mix(in srgb, var(--hub-color, var(--app, #2c5ca7)) 6%, #fff);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--hub-color, var(--app, #2c5ca7)) 18%, transparent);
}
.personalize-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hub-color, var(--app, #2c5ca7));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hub-color, var(--app, #2c5ca7)) 22%, transparent);
}
.personalize-chip-text { font-weight: 600; }
.personalize-chip-sub {
  padding-left: 8px;
  margin-left: 4px;
  border-left: 1px solid var(--border, #e4e7ec);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
}
.personalize-chip-dismiss {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.personalize-chip-dismiss:hover {
  background: var(--bg-soft, #f1f3f6);
  color: var(--text-main);
}

/* =========================================================================
   SettingsModal — modale plein écran qui embarque la SettingsView
   ========================================================================= */
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: settings-modal-fade .14s ease-out;
}
@keyframes settings-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.settings-modal {
  position: relative;
  width: min(1200px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--bg, #fafbfc);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.32);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: settings-modal-rise .18s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes settings-modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.settings-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border, #e4e7ec);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.settings-modal-close:hover {
  background: var(--bg-soft, #f1f3f6);
  color: var(--text-main);
  border-color: var(--border-strong, #cfd4db);
}
.settings-modal-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.settings-modal-body .settings-view {
  padding-top: 32px;
}

/* =========================================================================
   ProjectWarningsBanner — avertissements persistants d'un projet
   (US-05 risques résiduels insuffisants, US-06 normes harmonisées).
   Généralisation du bandeau .ed126-empty-warning pour les cartes projet.
   ========================================================================= */
.project-warnings { display: flex; flex-direction: column; gap: 6px; }
.project-warning-banner {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 10px;
  background: #fff8e1; border: 1px solid #f6c343; color: #6e4a00;
  border-radius: 6px; font-size: 11.5px; line-height: 1.4;
}
.project-warning-banner svg { flex-shrink: 0; margin-top: 1px; color: #b07f00; }

/* =========================================================================
   ToastHost — toasts éphémères en bas-droite
   ========================================================================= */
.toast-host {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 12px;
  background: #1f2937;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  min-width: 280px;
  max-width: 420px;
  animation: toast-in .22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
}
.toast-success .toast-icon { background: #16a34a; }
.toast-warning .toast-icon { background: #f59e0b; }
.toast-message { line-height: 1.4; }


/* =========================================================================
   TRANSITION : Génération du document final (étape 2 → success)
   Page inline qui couvre la zone scrollable du hub-frame pendant ~6.5s.
   Header : titre + sous-titre + pill "RÉDACTION IA" pulsant.
   Barre de progression continue, puis grille de chapitres qui s'allument
   les uns après les autres dans un ordre aléatoire.
   ========================================================================= */
.genprog {
  padding: 40px 32px 56px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}
.genprog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
.genprog-head-text { min-width: 0; }
.genprog-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text-main);
  margin: 0 0 6px 0;
  line-height: 1.2;
}
.genprog-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}
.genprog-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-main);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: var(--shadow-xs);
  white-space: nowrap;
}
.genprog-pill svg { color: var(--hub-color, var(--app)); }
.genprog-pill-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}
.genprog-pill-dots span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-main);
  opacity: 0.25;
  animation: genprogDot 1.2s infinite ease-in-out;
}
.genprog-pill-dots span:nth-child(2) { animation-delay: 0.18s; }
.genprog-pill-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes genprogDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

.genprog-bar {
  height: 3px;
  background: var(--bg-soft);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.genprog-bar-fill {
  height: 100%;
  background: var(--hub-color, var(--app));
  border-radius: inherit;
  transition: width 60ms linear;
  box-shadow: 0 0 8px color-mix(in oklab, var(--hub-color, var(--app)) 50%, transparent);
}

.genprog-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 32px 24px;
}
@media (max-width: 1100px) {
  .genprog-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .genprog-grid { grid-template-columns: repeat(2, 1fr); }
}
.genprog-chap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  font-size: 13px;
  text-align: left;
  transition: color 280ms ease, opacity 280ms ease;
}
.genprog-chap-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.genprog-chap-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.genprog-chap.is-pending {
  color: var(--text-faint);
  opacity: 0.55;
}
.genprog-chap.is-writing {
  color: var(--text-main);
}
.genprog-chap.is-writing .genprog-chap-num {
  color: var(--hub-color, var(--app));
}
.genprog-chap.is-done {
  color: var(--text-body);
}
.genprog-chap.is-done .genprog-chap-num {
  color: var(--text-muted);
}

/* Petit point pulsant pour le chapitre en cours d'écriture */
.genprog-chap-spark {
  position: absolute;
  top: 5px;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hub-color, var(--app));
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--hub-color, var(--app)) 60%, transparent);
  animation: genprogSpark 1.1s infinite ease-out;
}
@keyframes genprogSpark {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--hub-color, var(--app)) 60%, transparent); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px transparent; transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

/* Coche discrète quand le chapitre est terminé */
.genprog-chap-check {
  position: absolute;
  top: 5px;
  right: 0;
  color: var(--hub-color, var(--app));
  opacity: 0.85;
  animation: genprogCheckIn 220ms ease-out;
}
@keyframes genprogCheckIn {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 0.85; transform: scale(1); }
}


/* =========================================================================
   BootSplash — écran d'amorçage affiché le temps de la vérification /api/me
   (app.jsx <BootSplash>). Évite le flash du dashboard avant confirmation auth.
   ========================================================================= */
.boot-splash {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  background: var(--bg-app, #f6f7f9);
  z-index: 9999;
  animation: boot-splash-in .2s ease both;
}
@keyframes boot-splash-in { from { opacity: 0; } to { opacity: 1; } }
.boot-splash-loader { position: relative; width: 54px; height: 54px; }
.boot-splash-ring {
  position: absolute; inset: 0;
  border: 3px solid var(--border, rgba(0,0,0,0.08));
  border-top-color: var(--app, #2c5ca7);
  border-radius: 50%;
  animation: ai-working-spin 1s linear infinite;
}
.boot-splash-mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--app, #2c5ca7);
}
.boot-splash-word {
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: var(--text-soft, #5b6472);
}
.boot-splash-word span { color: var(--app, #2c5ca7); }

/* =========================================================================
   LoginModal — splash de connexion (split layout)
   ========================================================================= */
.login-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(1200px 700px at 30% 20%, #1c2538 0%, #0c1320 60%, #060a13 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 5000;
  padding: 24px;
  animation: loginFade 240ms ease-out;
}
@keyframes loginFade { from { opacity: 0; } to { opacity: 1; } }

.login-modal {
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--bg-panel);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  animation: loginPop 320ms cubic-bezier(.2,.9,.3,1);
}
@keyframes loginPop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Panneau brand (gauche) ---- */
.login-brand {
  position: relative;
  padding: 38px 38px 28px;
  background:
    linear-gradient(135deg, #1f2c47 0%, #1b2238 50%, #16182a 100%);
  color: #f1f5fb;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.login-brand-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.15) 70%, transparent);
  pointer-events: none;
  z-index: 0;
}
.login-brand-glow {
  position: absolute;
  width: 520px; height: 520px;
  left: -120px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98,142,255,.45), transparent 60%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
/* Élève le contenu au-dessus des calques décoratifs (grid + glow) sans les
   repositionner : le sélecteur universel `> *` a la même spécificité que
   `.login-brand-glow`/`.login-brand-grid` et, plus bas dans la cascade, écrasait
   leur `position: absolute` en `relative`. Le glow (height: 520px) repassait
   alors dans le flux et étirait le panneau au-delà de `max-height`, d'où la
   modale rognée. On exclut donc les deux décors de la règle. */
.login-brand > *:not(.login-brand-grid):not(.login-brand-glow) { position: relative; z-index: 1; }

.login-brand-top {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 36px;
}
.login-brand-mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 18px; font-weight: 700; letter-spacing: .3px;
  color: #fff;
}
.login-brand-mark svg { color: #7ea7ff; }
.login-brand-mark-ai { color: #7ea7ff; font-weight: 600; }
.login-brand-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}

.login-brand-headline {
  margin-bottom: 28px;
}
.login-brand-headline h1 {
  margin: 0 0 14px;
  font-size: 28px; line-height: 1.2; font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.login-brand-headline h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #9ec0ff 0%, #7ea7ff 60%, #6ad4c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-brand-headline p {
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: 14px; line-height: 1.55;
  text-wrap: pretty;
}

.login-brand-bullets {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.login-brand-bullets li {
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: rgba(255,255,255,.85);
  line-height: 1.4;
}
.login-brand-tick {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(126,167,255,.18);
  color: #9ec0ff;
  flex-shrink: 0;
}

.login-brand-foot {
  display: flex; justify-content: space-between;
  font-size: 11.5px; color: rgba(255,255,255,.4);
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ---- Panneau form (droite) ---- */
.login-panel {
  background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center;
  padding: 38px 40px;
  overflow-y: auto;
}
.login-panel-inner {
  width: 100%;
  max-width: 360px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.login-head h2 {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.005em;
}
.login-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-field { display: flex; flex-direction: column; gap: 6px; }
.login-field-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.login-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
}
.login-forgot {
  font-size: 11.5px;
  color: var(--accent, #4569d4);
  text-decoration: none;
  font-weight: 600;
}
.login-forgot:hover { text-decoration: underline; }

.login-input-wrap { position: relative; display: block; }
.login-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  transition: border-color .12s, box-shadow .12s, background .12s;
  box-sizing: border-box;
}
.login-input:focus {
  border-color: var(--accent, #4569d4);
  background: var(--bg-panel);
  box-shadow: 0 0 0 3px rgba(69,105,212,.15);
}
.login-input:disabled { opacity: .6; cursor: not-allowed; }
.login-input-wrap .login-input { padding-right: 38px; }
.login-input-toggle {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  background: transparent; border: 0;
  color: var(--text-muted);
  width: 28px; height: 28px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.login-input-toggle:hover { background: var(--bg-soft); color: var(--text-main); }

.login-error {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.25);
  color: #b3273a;
  font-size: 12.5px;
  padding: 8px 10px;
  border-radius: 6px;
  line-height: 1.4;
}

.login-submit {
  margin-top: 2px;
  padding: 11px 16px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #4f74e0 0%, #3d5fc4 100%);
  color: #fff;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 12px -2px rgba(69,105,212,.45);
  transition: transform .08s, box-shadow .12s, opacity .12s;
}
.login-submit:hover:not(:disabled) {
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 18px -2px rgba(69,105,212,.55);
}
.login-submit:active:not(:disabled) { transform: translateY(1px); }
.login-submit:disabled { opacity: .65; cursor: not-allowed; }

.login-demo-hint {
  margin-top: 4px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: 8px;
  text-align: center;
}
.login-demo-hint strong { color: var(--text-main); margin-right: 4px; }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .login-modal { grid-template-columns: 1fr; max-width: 460px; }
  .login-brand { display: none; }
  .login-panel { padding: 32px 28px; }
}

/* =========================================================================
   Bouton Power (topbar) + LogoutConfirm
   ========================================================================= */
.power-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  margin-left: 4px;
  transition: background .12s, color .12s, border-color .12s;
}
.power-btn:hover {
  background: rgba(220, 53, 69, 0.08);
  color: #c33548;
  border-color: rgba(220, 53, 69, 0.18);
}
.power-btn:active { transform: translateY(1px); }

.logout-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 22, 35, 0.5);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 5100;
  animation: loginFade 160ms ease-out;
  padding: 24px;
}
.logout-confirm {
  background: var(--bg-panel);
  border-radius: 14px;
  width: 100%;
  max-width: 380px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.04);
  animation: loginPop 220ms cubic-bezier(.2,.9,.3,1);
}
.logout-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.1);
  color: #c33548;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.logout-title {
  margin: 0 0 8px;
  font-size: 17px; font-weight: 700;
  color: var(--text-main);
}
.logout-body {
  margin: 0 0 20px;
  font-size: 13.5px; color: var(--text-muted);
  line-height: 1.5;
  text-wrap: pretty;
}
.logout-actions {
  display: flex; gap: 10px; justify-content: center;
}
.logout-actions .btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-main);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.logout-actions .btn:hover { background: var(--bg-soft); }
.logout-actions .btn-danger {
  background: linear-gradient(180deg, #d94557 0%, #c33548 100%);
  border-color: #b3273a;
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(195,53,72,.4);
}
.logout-actions .btn-danger:hover {
  background: linear-gradient(180deg, #e54e60 0%, #cd3a4d 100%);
}

/* ChatBox — chip indiquant le champ ED126 en cours de collecte
   (preuve visuelle que les questions sont contextuelles, pas statiques). */
.chatbox-field-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 16px 0 16px; padding: 4px 10px;
  background: #eef4fc; color: #1c3761;
  border: 1px solid #cdd9ec; border-radius: 999px;
  font-size: 11px; line-height: 1.2; max-width: max-content;
}
.chatbox-field-chip svg { flex-shrink: 0; color: #1c3761; }
.chatbox-field-chip strong { color: #0b2148; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ChatBox — bulle d'erreur visible (clé LLM invalide, etc.) */
.chatbox-bubble.is-ai.is-error,
.chatbox-bubble.is-ai[data-kind="error"] {
  background: #fff3f2 !important;
  border: 1px solid #f3c5c1 !important;
  color: #8a1f15 !important;
}

/* ============================================================================
   ED126 PREVIEW — porté de legacy/jds/frontend/src/index.css
   Mise en page A4 façon INRS ED 126 (fiche de poste). Utilisée par le
   composant FichePreview dans createzone.jsx (étape Success du flux JDS).
   ============================================================================ */
.ed126-scroll { overflow: auto; padding: 24px; background: #f4f5f7; min-height: 520px; height: 100%; }
.ed126-page {
  max-width: 880px; margin: 0 auto; background: #fff; padding: 24px 28px;
  border: 1px solid #d8dde3; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  font-size: 13px; color: #1c2329; line-height: 1.45;
}
.ed126-page .muted { color: #888; font-style: italic; }

/* — Toolbar mode édition vs aperçu — */
.ed126-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  max-width: 880px; margin: 0 auto 12px auto; padding: 6px 0;
}
.ed126-toolbar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 6px;
  border: 1px solid #cdd9ec; background: #fff; color: #1c3761;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: 0.15s var(--ease, ease);
}
.ed126-toolbar-btn:hover { background: #f0f4fb; }
.ed126-toolbar-btn.is-on { background: #1c3761; color: #fff; border-color: #1c3761; }
.ed126-toolbar-btn.is-on:hover { background: #102342; }
.ed126-toolbar-hint { font-size: 11px; color: #777; }

/* — Inline edit inputs — communs entre mode édition et lecture — */
.inline-edit-input,
.inline-edit-textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; color: inherit; line-height: 1.4;
  padding: 2px 4px; margin: 0;
  background: transparent; border: 1px solid transparent;
  border-radius: 3px; resize: vertical;
  transition: border-color 0.15s, background 0.15s;
}
.inline-edit-input[readonly],
.inline-edit-textarea[readonly] {
  cursor: default;
  /* En lecture seule on garde le rendu typographique, sans cadre. */
}
.inline-edit-input:not([readonly]),
.inline-edit-textarea:not([readonly]) {
  border-color: #d8dde3; background: #fff;
}
.inline-edit-input:not([readonly]):focus,
.inline-edit-textarea:not([readonly]):focus {
  outline: none; border-color: #1c3761; background: #fbfcfe;
  box-shadow: 0 0 0 2px rgba(28, 55, 97, 0.12);
}
.ed126-header-input { font-weight: 600; color: #1c3761; }
.ed126-multiline-field { min-height: 36px; }
.task-textarea, .measure-input { min-height: 28px; }
.annotation-input { font-size: 11px; }
.secours-big-num-input {
  width: 60px; font-size: 22px; font-weight: 900; text-align: center;
  color: #27ae60; padding: 0 4px;
}
.secours-big-num-input.num-red { color: #e74c3c; }

/* — EPI cells : pointer en mode édition — */
.ed126-epi-cell.is-clickable { cursor: pointer; }
.ed126-epi-cell.is-clickable:hover { box-shadow: 0 0 0 2px rgba(28, 55, 97, 0.15); }

/* — Boutons ajout/suppression dans le tableau de tâches — */
.btn-add-task, .btn-add-measure {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 6px 0 0 0; padding: 4px 10px; border-radius: 4px;
  border: 1px dashed #cdd9ec; background: #f4f7fc; color: #1c3761;
  font-size: 11px; cursor: pointer; transition: 0.15s;
}
.btn-add-task:hover, .btn-add-measure:hover { background: #e9eff8; border-style: solid; }
.btn-remove-task, .btn-remove-measure {
  position: absolute; top: 4px; right: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(231, 76, 60, 0.12); color: #c0392b;
  font-size: 14px; line-height: 18px; cursor: pointer; padding: 0;
}
.btn-remove-measure {
  position: static; margin-left: 4px; flex-shrink: 0;
}
.btn-remove-task:hover, .btn-remove-measure:hover { background: #e74c3c; color: #fff; }

/* — Photo cliquable en mode édition — */
.ed126-photo-clickable {
  width: 100%; aspect-ratio: 4 / 3; border: 2px dashed #1c3761;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  background: #fbfcfe; cursor: pointer; transition: 0.15s;
}
.ed126-photo-clickable:hover { background: #eef4fc; }

/* — Modes globaux — */
.ed126-scroll.is-edit-mode .ed126-page { box-shadow: 0 4px 18px rgba(28, 55, 97, 0.12); }
.ed126-scroll.is-edit-mode .ed126-task-col { background: #fafbfd !important; }
.ed126-scroll.is-edit-mode .ed126-task-col.col-risque { background: #fff !important; }

/* — Header banner — */
.ed126-header-banner {
  display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center;
  border: 2px solid #1c3761; border-radius: 4px; padding: 8px 14px; margin-bottom: 14px;
  background: linear-gradient(180deg, #f0f4fb 0%, #fff 100%);
}
.ed126-header-left, .ed126-header-right { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.ed126-header-right { text-align: right; }
.ed126-header-center { text-align: center; }
.ed126-header-label { color: #557; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.ed126-header-value { font-weight: 600; color: #1c3761; }
.ed126-header-title { font-size: 18px; font-weight: 800; letter-spacing: 0.08em; color: #1c3761; }

/* — Machine row + photo — */
.ed126-machine-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 14px;
  border: 1px solid #d8dde3; border-radius: 4px; padding: 12px; background: #fafbfd;
}
.ed126-machine-info { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.ed126-field-row { display: flex; gap: 8px; align-items: baseline; }
.ed126-field-row-stack { flex-direction: column; align-items: stretch; gap: 4px; }
.ed126-field-row .lbl { font-weight: 700; color: #1c3761; flex-shrink: 0; min-width: 110px; }
.ed126-field-row .val { color: #1c2329; flex: 1; }
.val-multiline { white-space: pre-wrap; }

.ed126-photo-zone {
  display: flex; flex-direction: column; gap: 6px;
}
.ed126-photo-static {
  width: 100%; aspect-ratio: 4 / 3; border: 1.5px dashed #b6bdc6;
  border-radius: 4px; display: flex; align-items: center; justify-content: center; background: #fff;
}
.ed126-photo-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.ed126-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #999; font-size: 11px; }
.ed126-annotations { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.ed126-annotation-row { display: flex; gap: 4px; align-items: baseline; }
.annotation-arrow { color: #1c3761; font-weight: 700; }

/* — Section bands — */
.ed126-section-band {
  padding: 6px 12px; font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; border-radius: 3px 3px 0 0; margin-top: 10px;
}
.ed126-section-band.band-blue { background: #1c3761; color: #fff; }
.ed126-section-band.band-grey { background: #50596a; color: #fff; }
.ed126-section-band .band-title { display: block; }

/* — EPI row — */
.ed126-epi-row {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  border: 1px solid #d8dde3; border-top: none; padding: 10px; background: #fff;
  margin-bottom: 4px;
}
.ed126-epi-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px; padding: 6px 4px; border-radius: 4px; text-align: center; border: 1px solid transparent;
  font-size: 10px; line-height: 1.2; transition: 0.15s;
}
.ed126-epi-icon { font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.task-pictos-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
/* Le span .picto reçoit toujours une taille explicite (width/height=px) via le
   composant Pictogram ; on force donc le SVG injecté à remplir ce span pour
   qu'il ne déborde jamais à sa taille intrinsèque (bug picker pictogrammes). */
.picto { overflow: hidden; }
.picto svg { width: 100%; height: 100%; display: block; }

/* Picker pictogrammes danger — porté de optima_jds/frontend.
   Ouvert depuis chaque ligne de tâche en mode édition. */
.task-picto-panel-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 4px 0; padding: 3px 8px; border-radius: 4px;
  border: 1px dashed #cdd9ec; background: #f4f7fc; color: #1c3761;
  font-size: 10.5px; cursor: pointer; transition: 0.15s;
}
.task-picto-panel-toggle:hover { background: #e9eff8; border-style: solid; }
.task-picto-picker-wrap {
  margin: 6px 0; padding: 8px; border: 1px solid #cdd9ec; border-radius: 6px;
  background: #fbfcfe;
}
.task-picto-filter {
  width: 100%; box-sizing: border-box;
  padding: 4px 8px; margin-bottom: 8px; font-size: 11px;
  border: 1px solid #d8dde3; border-radius: 4px; background: #fff;
}
.task-picto-filter:focus { outline: none; border-color: #1c3761; box-shadow: 0 0 0 2px rgba(28,55,97,0.12); }
.task-picto-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 4px; max-height: 220px; overflow-y: auto;
}
.task-picto-picker-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; border-radius: 4px;
  border: 1px solid #d8dde3; background: #fff;
  cursor: pointer; transition: 0.12s;
}
.task-picto-picker-cell:hover { background: #f0f4fb; border-color: #cdd9ec; }
.task-picto-picker-cell.is-selected { background: #1c3761; border-color: #1c3761; }
.task-picto-picker-cell.is-selected .task-picto-picker-label { color: #fff; }
.task-picto-picker-label { font-size: 9px; line-height: 1.1; text-align: center; color: #444; }
.task-picto-picker-empty { padding: 14px; text-align: center; font-size: 11px; color: #777; }

/* Bandeau "fiche manifestement vide" */
.ed126-empty-warning {
  max-width: 880px; margin: 0 auto 10px auto; padding: 10px 14px;
  display: flex; gap: 10px; align-items: flex-start;
  background: #fff8e1; border: 1px solid #f6c343; color: #6e4a00;
  border-radius: 6px; font-size: 12.5px; line-height: 1.45;
}
.ed126-empty-warning svg { flex-shrink: 0; margin-top: 2px; color: #b07f00; }
.ed126-empty-warning strong { font-weight: 700; }
.ed126-epi-label { font-size: 9.5px; color: #333; }
.ed126-epi-cell.epi-active { background: #e8f5e9; border-color: #4caf50; }
.ed126-epi-cell.epi-active .ed126-epi-label { color: #1b5e20; font-weight: 600; }
.ed126-epi-cell.epi-inactive { background: #fafbfc; border-color: #e6e9ee; opacity: 0.65; }
.ed126-epi-cell.epi-inactive .ed126-epi-icon { filter: grayscale(0.6); }
.ed126-epi-cell.epi-interdit { background: #ffebee; border-color: #c62828; }
.ed126-epi-cell.epi-interdit .ed126-epi-icon { filter: grayscale(1) brightness(0.5); }
.ed126-epi-cell.epi-interdit .ed126-epi-label { color: #b71c1c; text-decoration: line-through; }

/* — Task table — */
.ed126-task-table { border: 1px solid #d8dde3; border-top: none; background: #fff; }
.ed126-task-header {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; background: #eef1f5;
  font-weight: 700; font-size: 11px; padding: 6px 0; border-bottom: 1px solid #d8dde3;
}
.ed126-task-header .ed126-task-col { padding: 4px 10px; }
.ed126-task-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1.4fr;
  border-bottom: 1px solid #eef1f5;
}
.ed126-task-row:last-child { border-bottom: none; }
.ed126-task-row-empty { padding: 14px 10px; }
.ed126-task-col { padding: 8px 10px; font-size: 11.5px; }
.ed126-task-col.col-tache { background: #fafbfd; }
.ed126-task-col.col-risque { background: #fff; border-left: 1px solid #eef1f5; border-right: 1px solid #eef1f5; }
.ed126-task-col.col-mesure { background: #fafbfd; }
.task-field { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.task-sublabel { font-size: 10px; color: #1c3761; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.task-field .val { color: #1c2329; }
.task-risk-text { margin: 0 0 4px 0; padding: 4px 6px; background: #fff5e6; border-left: 2px solid #f59e0b; border-radius: 2px; font-size: 11px; }
.task-measure-row { display: flex; gap: 4px; align-items: baseline; margin-bottom: 4px; }
.measure-bullet { color: #1c3761; font-weight: 700; }

/* — Qualification — */
.ed126-qualification {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  border: 1px solid #d8dde3; border-top: none; padding: 10px; background: #fff;
}
.ed126-qual-col { display: flex; flex-direction: column; gap: 6px; }
.qual-field { display: flex; gap: 8px; align-items: baseline; }
.qual-label { font-weight: 700; color: #1c3761; font-size: 11.5px; flex-shrink: 0; }

/* — Secours dual panels — */
.ed126-secours-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ed126-secours-panel { border: 2px solid; border-radius: 6px; padding: 10px 12px; font-size: 12px; }
.ed126-secours-panel.panel-accident { border-color: #27ae60; background: #f1f9f3; }
.ed126-secours-panel.panel-incendie { border-color: #e74c3c; background: #fdf2f0; }
.secours-panel-header { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.secours-panel-header strong { font-size: 13px; }
.ed126-secours-panel p { margin: 4px 0; }
.secours-contact-row { display: flex; gap: 6px; align-items: baseline; font-size: 11.5px; margin: 3px 0; }
.secours-label { font-weight: 700; color: #1c3761; min-width: 90px; }
.secours-num-display { display: flex; gap: 8px; align-items: baseline; margin: 6px 0; font-size: 12px; }
.secours-big-num { font-size: 22px; font-weight: 900; color: #27ae60; padding: 0 6px; }
.secours-big-num.num-red { color: #e74c3c; }

/* — Footer — */
.ed126-footer-note {
  text-align: center; font-size: 10px; color: #777; letter-spacing: 0.06em;
  margin-top: 14px; padding-top: 8px; border-top: 1px dashed #d8dde3; text-transform: uppercase;
}
.ed126-adapt-loading {
  margin-top: 10px; padding: 6px 10px; background: #eef4fc; color: #1c3761; border-radius: 4px;
  font-size: 11.5px; text-align: center;
}

/* Compact responsive for narrow viewports */
@media (max-width: 720px) {
  .ed126-machine-row { grid-template-columns: 1fr; }
  .ed126-epi-row { grid-template-columns: repeat(3, 1fr); }
  .ed126-task-header, .ed126-task-row { grid-template-columns: 1fr; }
  .ed126-task-col.col-risque, .ed126-task-col.col-mesure { border-left: none; border-top: 1px solid #eef1f5; }
  .ed126-qualification, .ed126-secours-dual { grid-template-columns: 1fr; }
}