@import "./tokens.css";

* {
  box-sizing: border-box;
}

:root {
  --sidebar-width: clamp(240px, 22vw, 280px);
  --bg: #0f1720;
  --panel: #141c26;
  --border: #243140;
  --text: #e8edf4;
  --text-1: #e8edf4;
  --text-2: #9aa3b5;
  --muted: #9aa3b5;
  --pill: #1f2a34;
  --primary: #4ad0b3;
  --primary-rgb: 74, 208, 179;
  --primary-2: #60a5fa;
  --primary-2-rgb: 96, 165, 250;
  --shadow: rgba(0, 0, 0, 0.45);
  --accent-strong: #72f0cf;
  --surface-1: #141c26;
  --surface-2: #0f1720;
  --surface-3: #1f2a34;
  --launcher-bg-1: rgba(74, 208, 179, 0.2);
  --launcher-bg-2: rgba(96, 165, 250, 0.22);
  --launcher-bg-3: #0d141c;
  --launcher-bg-4: #121b25;
  --launcher-bg-5: #182330;
  --launcher-card-bg: rgba(20, 28, 38, 0.7);
  --launcher-card-border: rgba(232, 237, 244, 0.18);
  --launcher-text: #e8edf4;
  --launcher-muted: rgba(232, 237, 244, 0.7);
  --launcher-empty-bg: rgba(15, 22, 30, 0.6);
  --text-rgb: 232, 237, 244;
  --panel-rgb: 20, 28, 38;
  --bg-rgb: 15, 23, 32;
  --sidebar-bg: linear-gradient(180deg, #0d141c 0%, #121b25 100%);
  --dots-opacity: 0.5;
  --dots-color: 232, 237, 244;
  --dots-size: 1px;
  --btn-gradient: linear-gradient(135deg, #4ad0b3, #38b89e);
  --btn-gradient-text: #0e1622;
  --input-bg: rgba(10, 16, 24, 0.5);
  --logo-gradient: linear-gradient(
    160deg,
    rgba(15, 24, 34, 0.92),
    rgba(10, 16, 24, 0.7)
  );

  /* ── Semantic — danger (alias vers --color-danger de tokens.css) ────── */
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-rgb: 239, 68, 68;
  /* Texte place SUR un fond danger (badge, bouton). Token explicite pour
     eviter les '#fff' inline qui font du blanc-sur-blanc en theme clair. */
  --btn-text-on-danger: #ffffff;

  /* ── Aliases legacy (compatibilite chat/components/settings) ───────────
     Ces tokens etaient utilises avec des fallbacks color hardcodes.
     Mapper sur les tokens canoniques pour conserver le mode sombre. */
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --accent: var(--primary);
  --accent-color: var(--primary);
  --bg-primary: var(--bg);
  --bg-secondary: var(--panel);
  --bg-tertiary: var(--surface-3);
  --bg-tooltip: var(--panel);
  --border-color: var(--border);
  --color-primary: var(--primary);
  --warning: var(--color-warning);
  --card-bg: var(--panel);
  --surface: var(--panel);

  /* ── Z-index scale ─────────────────────────────────────────────────────
     Echelle globale pour eviter les conflits entre dropdowns, modals,
     drawers, popovers, toasts et tooltips. Toujours utiliser ces tokens
     plutot que des valeurs hardcodees (9999, 1000, etc). */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1500;
  --z-drawer: 1900;
  --z-modal-backdrop: 1990;
  --z-modal: 2000;
  --z-popover: 2100;
  --z-toast: 2200;
  --z-tooltip: 2300;
}

/* ── Button overrides ────────────────────────────────────────────────── */
.primary:hover:not(:disabled) {
  filter: brightness(1.15);
}
.secondary {
  border-color: rgba(var(--primary-rgb), 0.2);
}
.secondary:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.14);
}

/* ── Read-only inputs ────────────────────────────────────────────────── */
input:read-only,
textarea:read-only {
  background: rgba(var(--text-rgb), 0.02);
  color: var(--muted);
  cursor: default;
  border-color: rgba(var(--text-rgb), 0.08);
}
input:read-only:focus,
textarea:read-only:focus {
  outline: none;
  box-shadow: none;
}

body {
  margin: 0;
  font-family:
    "Space Grotesk",
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--bg);
  color: var(--text);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(
    rgba(var(--dots-color), 0.12) var(--dots-size),
    transparent 1px
  );
  background-size: 12px 12px;
  opacity: var(--dots-opacity);
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

/* ── Global scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--text-rgb), 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--text-rgb), 0.25);
}

/* ── Global focus-visible ─────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Global transition for interactive elements ───────────────────────── */
a, button, input, textarea, select {
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    transform 0.1s ease;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  max-width: 100vw;
  height: 100vh;
  overflow: hidden;
  transition: padding-top 0.25s ease;
}

.app-shell > :not(.app-sidebar-shell):not(.top-progress) {
  min-width: 0;
  overflow-x: auto;
}


/* ── New sidebar shell ─────────────────────────────────────────────────────── */
.app-sidebar-shell {
  position: relative;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(var(--text-rgb), 0.1);
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.1);
  z-index: 50;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
}

.app-sidebar-shell::before {
  content: "";
  position: absolute;
  inset: -20% -40% auto -40%;
  height: 220px;
  background: radial-gradient(
    closest-side,
    rgba(var(--primary-2-rgb), 0.18),
    transparent 70%
  );
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.app-sidebar-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    135deg,
    rgba(var(--text-rgb), 0.03),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.app-sidebar-shell > * {
  position: relative;
  z-index: 1;
}

.top-progress {
  position: fixed;
  top: 0;
  left: var(--sidebar-width, 230px);
  right: 0;
  height: 32px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  color: #fefefe;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px var(--space-4);
  z-index: var(--z-toast, 300);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  animation: top-progress-in 0.25s ease-out;
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.top-progress * {
  pointer-events: auto;
}

.top-progress.is-exiting {
  animation: top-progress-out 0.25s ease-in forwards;
}

.top-progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #1f5bff, #00b2ff);
  transition: width var(--transition-base) ease;
}

.top-progress-text {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-left: 6px;
}

/* ===== GLOBAL PROGRESS BAR ===== */
/* === GLOBAL PROGRESS - Base === */
.global-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  min-height: 36px;
  background: rgba(var(--panel-rgb), 0.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  display: flex;
  align-items: stretch;
  padding: 0;
  /* Au-dessus des modals secondaires (z-modal=400, z-toast=700) mais sous les
     overlays plein-ecran (IndexationOverlay = 99999, z-max = 9999). */
  z-index: 9500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  animation: top-progress-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

/* Etat queued — barre + texte plus discrets */
.global-progress--queued .global-progress__bar,
.global-progress__pill--queued .global-progress__pill-bar {
  background: rgba(var(--text-rgb), 0.18) !important;
  opacity: 0.6;
  width: 100% !important;
  animation: gp-queued-shimmer 1.6s linear infinite;
}
.global-progress--queued .global-progress__percent,
.global-progress__pill--queued .global-progress__pill-pct {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
}
@keyframes gp-queued-shimmer {
  0% { opacity: 0.35; }
  50% { opacity: 0.65; }
  100% { opacity: 0.35; }
}

.global-progress * {
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

.global-progress--done,
.global-progress--error {
  animation: top-progress-out 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* === SINGLE PROCESS - Full-width prominent bar === */
.global-progress--single {
  overflow: hidden;
}

.global-progress--single .global-progress__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  opacity: 0.35;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}

.global-progress--single .global-progress__info {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  padding: 0 var(--space-3);
}

.global-progress--single .global-progress__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.global-progress--single .global-progress__item {
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.global-progress--single .global-progress__percent {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.global-progress--done .global-progress__bar {
  background: var(--primary) !important;
  opacity: 0.25;
  width: 100% !important;
}
.global-progress--done .global-progress__percent {
  color: var(--primary);
}

.global-progress--error .global-progress__bar {
  background: var(--danger) !important;
  opacity: 0.25;
  width: 100% !important;
}
.global-progress--error .global-progress__percent {
  color: var(--danger);
}

/* Mode indeterminate : "fake progression" CSS pure — la barre avance de 0%
   à ~92% sur 90s avec une courbe ease-out (ralentit en fin), donnant
   l'illusion d'une vraie progression. Surcouche shimmer qui flow par-dessus
   pour montrer que le travail continue même si la barre semble figée. Aucun
   setState pendant ce temps : zéro re-render → zéro lag. À la fin du await,
   le statut bascule en 'completed' et la classe --done force width:100%. */
.global-progress--indeterminate .global-progress__bar {
  width: 0 !important;
  transition: none !important;
  animation: global-progress-fake 90s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
  background: linear-gradient(
    90deg,
    rgba(var(--primary-rgb), 0.4) 0%,
    var(--primary) 50%,
    rgba(var(--primary-rgb), 0.4) 100%
  ) !important;
  background-size: 200% 100% !important;
  animation-name: global-progress-fake, global-progress-shimmer !important;
  animation-duration: 90s, 1.8s !important;
  animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1), linear !important;
  animation-iteration-count: 1, infinite !important;
  animation-fill-mode: forwards, none !important;
  will-change: width, background-position;
  opacity: 0.55 !important;
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.45) !important;
}

@keyframes global-progress-fake {
  0%   { width: 0%; }
  100% { width: 92%; }
}

@keyframes global-progress-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.global-progress--indeterminate .global-progress__percent {
  color: var(--primary);
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  font-weight: 600;
  opacity: 0.85;
  animation: global-progress-pulse 1.6s ease-in-out infinite;
}

@keyframes global-progress-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}

/* === MULTI PROCESS - Each pill is a full-height bar === */
.global-progress__items {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.global-progress__pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  min-height: 36px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.global-progress__pill:last-child {
  border-right: none;
}

.global-progress__pill-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  opacity: 0.3;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3);
}

.global-progress__pill-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  position: relative;
  white-space: nowrap;
}

.global-progress__pill-item {
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  position: relative;
}

.global-progress__pill-pct {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  position: relative;
  min-width: 28px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.global-progress__pill--done {
  border-color: var(--primary);
}
.global-progress__pill--done .global-progress__pill-bar {
  background: var(--primary);
  opacity: 0.15;
  width: 100% !important;
}
.global-progress__pill--done .global-progress__pill-pct {
  color: var(--primary);
}

.global-progress__pill--error {
  border-color: var(--danger);
}
.global-progress__pill--error .global-progress__pill-bar {
  background: var(--danger);
  opacity: 0.15;
  width: 100% !important;
}
.global-progress__pill--error .global-progress__pill-pct {
  color: var(--danger);
}

/* === Cancel button ===
   Aligne sur le pattern .idx-ov__cancel-btn (overlay indexation) :
   muted/discret au repos, vire en rouge au hover, label "Annuler". */
.global-progress__cancel {
  position: relative;
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  padding: 6px 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-left: var(--space-2);
  z-index: 1;
  pointer-events: auto;
}
.global-progress__cancel:hover:not(:disabled) {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.10);
}
.global-progress__cancel:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}
.global-progress__cancel:active:not(:disabled) {
  transform: scale(0.98);
  background: rgba(239, 68, 68, 0.18);
}
.global-progress__cancel--cancelling,
.global-progress__cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--muted);
  border-color: rgba(var(--text-rgb), 0.06);
  background: rgba(var(--text-rgb), 0.04);
}
.global-progress__cancel--pill {
  margin-left: var(--space-1);
  padding: 3px 10px;
  font-size: 10px;
}

/* === Mini-indicateur (apres auto-collapse 5s) ===
   Slider discret colle au bord droit de l'ecran, centre verticalement.
   Par defaut : pastille reduite (juste le dot), pour ne pas masquer les boutons.
   Au clic : se developpe vers la gauche pour reveler le texte + bouton annuler. */
.global-progress-mini {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 9499; /* sous .global-progress (9500) et sous .idx-ov (99999) */
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 10px;
  max-width: 32px;
  overflow: hidden;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  cursor: pointer;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.25s ease,
              gap 0.25s ease,
              background 0.2s ease,
              border-color 0.2s ease;
  pointer-events: auto;
  -webkit-app-region: no-drag;
  animation: mini-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.global-progress-mini:hover {
  background: rgba(var(--primary-rgb), 0.20);
  border-color: rgba(var(--primary-rgb), 0.4);
  padding-left: 14px;
}

.global-progress-mini--expanded {
  max-width: 340px;
  gap: 8px;
  padding: 8px 14px;
}

.global-progress-mini--expanded:hover {
  padding-left: 14px;
}

.global-progress-mini:focus-visible {
  outline: none;
  box-shadow: -2px 0 0 2px rgba(var(--primary-rgb), 0.30);
}

.global-progress-mini * {
  pointer-events: auto;
  -webkit-app-region: no-drag;
}

/* Wrapper qui contient un dot par tâche active. Gap petit pour signaler
   "il y a plusieurs jobs" sans agrandir la pastille. */
.global-progress-mini__dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.global-progress-mini__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.9);
  animation: pulse-dot 1.5s ease infinite;
  flex-shrink: 0;
}

/* Désynchronise les pulsations quand plusieurs dots sont présents pour que
   l'animation ne soit pas synchrone (lecture plus vivante). */
.global-progress-mini__dots .global-progress-mini__dot:nth-child(2) { animation-delay: 0.25s; }
.global-progress-mini__dots .global-progress-mini__dot:nth-child(3) { animation-delay: 0.5s; }
.global-progress-mini__dots .global-progress-mini__dot:nth-child(4) { animation-delay: 0.75s; }
.global-progress-mini__dots .global-progress-mini__dot:nth-child(n+5) { animation-delay: 1s; }

.global-progress-mini__text {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(var(--primary-rgb), 0.9);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

@keyframes mini-slide-in {
  from { transform: translate(100%, -50%); opacity: 0; }
  to { transform: translate(0, -50%); opacity: 1; }
}

/* Mini-X dans la pill repliee : seulement quand 1 seul job actif.
   Style discret muted -> rouge au hover, separe du clic principal via
   stopPropagation. */
.global-progress-mini__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.global-progress-mini__cancel:hover {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
}
.global-progress-mini__cancel:focus-visible {
  outline: none;
  color: #f87171;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
}
.global-progress-mini__cancel:disabled,
.global-progress-mini__cancel.is-cancelling {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--muted);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.6); }
}

/* Ajuster le contenu quand la barre globale est visible */
body:has(
    .global-progress:not(.global-progress--done):not(.global-progress--error)
  )
  .app-shell {
  padding-top: 36px;
  padding-bottom: 36px;
}

body:has(
    .global-progress:not(.global-progress--done):not(.global-progress--error)
  )
  .collectdoc-page {
  padding-top: 36px;
  padding-bottom: 36px;
}

body:has(
    .global-progress:not(.global-progress--done):not(.global-progress--error)
  )
  .launcher-page {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* Smooth shift when top progress appears/disappears */
.collectdoc-page,
.launcher-page {
  transition: padding-top var(--transition-slow) ease;
}

body:has(.top-progress) .app-shell {
  padding-top: 32px;
  padding-bottom: 32px;
}

body:has(.top-progress) .collectdoc-page {
  padding-top: 32px;
  padding-bottom: 32px;
}

body:has(.top-progress) .launcher-page {
  padding-top: 32px;
  padding-bottom: 32px;
}

.sidebar {
  position: relative;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(var(--text-rgb), 0.1);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.1);
  z-index: 50;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  isolation: isolate;
  min-height: 0;
}

/* Scrollbar discrète pour la sidebar */
.sidebar::-webkit-scrollbar {
  width: 4px;
}
.sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(var(--text-rgb), 0.12);
  border-radius: var(--radius-xs);
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--text-rgb), 0.25);
}

/* Zone de navigation scrollable indépendamment */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  position: relative;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-3);
}

.sidebar .brand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(var(--text-rgb), 0.1);
}

.sidebar-nav > .nav-btn + .nav-btn,
.sidebar-nav > .nav-submenu + .nav-btn {
  margin-top: 10px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(var(--text-rgb), 0.12);
  border-radius: var(--radius-xs);
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--text-rgb), 0.25);
}

.sidebar::before {
  content: "";
  position: absolute;
  inset: -20% -40% auto -40%;
  height: 220px;
  background: radial-gradient(
    closest-side,
    rgba(var(--primary-2-rgb), 0.18),
    transparent 70%
  );
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    135deg,
    rgba(var(--text-rgb), 0.03),
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.sidebar > * {
  position: relative;
  z-index: 1;
}

.brand-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}

.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.12);
  color: rgba(var(--primary-rgb), 0.9);
  transform: translateY(-4px);
}

.brand-icon svg {
  width: 14px;
  height: 14px;
}

.brand {
  font-weight: 700;
  font-size: var(--text-lg);
  margin-bottom: 0;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
}

.brand-logo {
  width: 180px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: 0 4px 10px var(--shadow);
}
.brand-text {
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  padding: 6px 0 var(--space-3);
  color: var(--text);
}

.brand-text.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0;
}

.brand-title {
  position: relative;
  display: inline-block;
  padding-bottom: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.brand-text.has-icon::after {
  display: none;
}

.brand-text::after {
  content: "";
  position: absolute;
  left: -0.12em;
  right: -0.12em;
  bottom: -2px;
  height: 3px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    rgba(var(--primary-rgb), 0.9),
    rgba(var(--primary-2-rgb), 0.7)
  );
}

.brand-text-button {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}


/* Sidebar brand row */
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2) var(--space-2) 0 var(--space-2);
}

.brand-upload {
  width: 100%;
  margin-bottom: 10px;
}

.brand-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.brand-upload__label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 10px var(--space-3);
  border-radius: var(--radius-lg);
  border: 1.5px dashed rgba(var(--text-rgb), 0.28);
  background: rgba(var(--bg-rgb), 0.55);
  color: var(--text);
  cursor: pointer;
  transition:
    border-color var(--transition-base) ease,
    background var(--transition-base) ease,
    transform var(--transition-base) ease;
}

.brand-upload__label--has-logo {
  border: none;
  padding: 0;
  background: transparent;
}

.brand-upload__label:hover {
  border-color: rgba(var(--primary-rgb), 0.7);
  background: rgba(var(--bg-rgb), 0.65);
  transform: translateY(-1px);
}

.brand-upload__title {
  font-weight: 600;
  font-size: var(--text-sm);
}

.brand-upload__hint {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.65);
}

.brand-upload__preview {
  width: 100%;
  max-height: 90px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 6px;
  box-shadow: 0 4px 10px var(--shadow);
}

.brand-upload__label--has-logo {
  position: relative;
}

.brand-upload__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
  padding: 0;
}

.brand-upload__label--has-logo:hover .brand-upload__remove {
  opacity: 1;
}

.brand-upload__remove:hover {
  background: rgba(220, 40, 40, 0.8);
}
.sidebar,
.sidebar * {
  color: var(--text);
}

.nav-btn {
  border: none;
  background: transparent;
  text-align: left;
  padding: 13px 14px 13px 18px;
  border-radius: 0;
  cursor: pointer;
  font-size: 0.93rem;
  transition:
    background var(--transition-base) ease,
    color var(--transition-base) ease,
    padding var(--transition-base) ease,
    box-shadow var(--transition-base) ease;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  border: none;
  box-shadow: none;
  flex-shrink: 0;
  min-height: 46px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.06);
}

.nav-btn::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(var(--primary-rgb), 0.9),
    rgba(var(--primary-rgb), 0.2)
  );
  opacity: 0;
  transition: opacity var(--transition-base) ease;
}

.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 10px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: var(--space-2);
  border-left: 1px solid rgba(var(--text-rgb), 0.06);
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  pointer-events: none;
  transition:
    max-height var(--transition-slow) ease,
    opacity var(--transition-base) ease,
    transform var(--transition-slow) ease,
    margin-top var(--transition-slow) ease,
    padding-left var(--transition-slow) ease,
    border-color var(--transition-slow) ease;
}

.nav-submenu.is-open {
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid rgba(var(--text-rgb), 0.12);
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow: visible;
}

.nav-submenu__btn {
  border: none;
  background: transparent;
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-radius: 0;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--muted);
  transition:
    background var(--transition-base) ease,
    color var(--transition-base) ease,
    padding var(--transition-base) ease;
  border: none;
  animation: none;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.06);
}

.sidebar-nav > .nav-btn:last-child {
  border-bottom-color: transparent;
}

.nav-submenu__btn:last-child {
  border-bottom-color: transparent;
}


.nav-submenu__btn:hover {
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
  padding-left: 18px;
}

.nav-submenu__btn.active {
  background: transparent;
  color: var(--text);
  font-weight: 600;
  border-color: transparent;
}

.nav-btn.home {
  border: none;
  background: rgba(var(--primary-2-rgb), 0.1);
  color: var(--primary-2);
  font-weight: 600;
  margin-bottom: 6px;
}

.nav-btn:hover {
  background: rgba(148, 163, 184, 0.08);
  padding-left: 22px;
  box-shadow: none;
}

.nav-btn.active {
  background: transparent;
  color: var(--text);
  font-weight: 600;
  border-color: transparent;
  box-shadow: none;
}

.nav-btn:hover::before,
.nav-btn.active::before {
  opacity: 1;
}

.nav-btn:hover::before {
  opacity: 0.6;
}

.nav-btn--highlight {
  background: rgba(99, 102, 241, 0.12);
  border: none;
  color: #818cf8;
  font-weight: 600;
}

.nav-btn--highlight:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: transparent;
}

.tab-btn {
  position: relative;
}
.tab-btn.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--primary);
}

.theme-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 8px 10px;
  background: var(--panel);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 180px;
  text-align: left;
  box-shadow: 0 4px 12px var(--shadow);
  transition: all var(--transition-base) ease;
}
.theme-chip:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.theme-chip.active {
  border-color: var(--primary);
  background: rgba(46, 125, 106, 0.12);
}
.theme-chip__title {
  font-weight: 700;
  color: var(--text);
}
.theme-chip__keywords {
  color: var(--muted);
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.drop-zone {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: var(--panel);
}
.drop-zone.drag-over {
  border-color: var(--primary);
  background: rgba(46, 125, 106, 0.08);
}
.drop-zone__label {
  flex: 1;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soft-select {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 2px 6px var(--shadow);
}
.soft-select:focus {
  outline: 2px solid rgba(46, 125, 106, 0.35);
}
.type-select {
  min-width: 150px;
  max-width: 160px;
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rich-area {
  width: 100%;
  min-height: 140px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  box-shadow: inset 0 1px 3px var(--shadow);
  resize: vertical;
}
.rich-area:focus {
  outline: 2px solid rgba(46, 125, 106, 0.35);
}

.wizard-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.wizard-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--panel);
  cursor: pointer;
}
.wizard-step.active {
  border-color: var(--primary);
  box-shadow: 0 4px 12px var(--shadow);
}
.wizard-step.done {
  border-color: rgba(46, 125, 106, 0.6);
  background: rgba(46, 125, 106, 0.08);
}
.wizard-step__title {
  font-weight: 700;
}
.wizard-step__desc {
  color: var(--muted);
  font-size: var(--text-sm);
}
.wizard-step.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.page-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.page-area {
  width: min(980px, 100%);
  background: transparent;
  color: var(--text);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-6);
  min-height: 520px;
}

.editor-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: calc(100vh - 260px);
}

.page-editor {
  min-height: 520px;
  width: 100%;
  color: var(--text);
  font-family: "Georgia", "Times New Roman", serif;
  font-size: var(--text-md);
  line-height: 1.7;
}

.page-editor .ProseMirror {
  min-height: 520px;
  outline: none;
  white-space: pre-wrap;
}

.page-editor .ProseMirror p {
  margin: 0 0 12px;
}

.page-editor .ProseMirror h1,
.page-editor .ProseMirror h2,
.page-editor .ProseMirror h3 {
  font-family: "Georgia", "Times New Roman", serif;
  margin: 18px 0 10px;
}

.page-editor .ProseMirror ul,
.page-editor .ProseMirror ol {
  margin: 8px 0 12px 22px;
}

.page-editor .ProseMirror .is-empty::before {
  color: rgba(var(--text-rgb), 0.4);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.mini-loader {
  position: fixed;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  z-index: 1500;
  font-size: var(--text-sm);
}
.mini-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--text-rgb), 0.4);
  border-top-color: #4dd2a7;
  border-radius: 50%;
  animation: mini-spin 0.75s linear infinite;
}
@keyframes mini-spin {
  to {
    transform: rotate(360deg);
  }
}

.summary-card {
  margin-top: auto;
  flex-shrink: 0;
  padding: 14px;
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(24, 33, 44, 0.96) 0%,
    rgba(16, 22, 30, 0.96) 100%
  );
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.summary-title {
  font-weight: 600;
  color: var(--accent-strong);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-base);
  color: var(--text);
}

.summary-foot {
  font-size: var(--text-xs);
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
}

.content {
  padding: 52px 36px 28px;
  height: 100vh;
  overflow-y: auto;
}
.content:has(.page--docfinder),
.content:has(.home-page) {
  display: flex;
  flex-direction: column;
}
.content:has(.sub-chooser) {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.content:has(.sidebar-catalog) {
  padding: 0;
}
/* Widen account page when showing subscription cards */
.account-page:has(.sub-chooser) {
  max-width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.content.content--locked {
  overflow: hidden;
}

/* ── Reduced motion: disable ALL animations on weak hardware ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


.page-transition {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.page h1 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin: 0;
}
.page--docfinder {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@keyframes page-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

.page-header h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--leading-tight);
}

.page-header p {
  margin: var(--space-1) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

/* ── Button base ──────────────────────────────────────────────────────── */
button, .btn {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  cursor: pointer;
  background: transparent;
  background-color: transparent;
  border: none;
  color: inherit;
}

.primary {
  background: var(--primary);
  color: white;
  border: none;
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  min-width: 120px;
  transition: filter var(--transition-fast), box-shadow var(--transition-fast), transform 0.1s ease;
}

.primary:hover:not(:disabled) {
  filter: brightness(1.22);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.35);
}

.primary:active:not(:disabled) {
  filter: brightness(0.92);
  transform: scale(0.995);
  box-shadow: none;
}

.primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.primary.is-loading {
  opacity: 0.7;
  cursor: wait;
  pointer-events: none;
}

.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.secondary:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.08);
}

.secondary:active:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.12);
}

.secondary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px var(--space-3);
  cursor: pointer;
  font-size: var(--text-base);
  transition: background var(--transition-fast);
}

.ghost:hover:not(:disabled) {
  background: rgba(var(--text-rgb), 0.06);
}

.ghost:active:not(:disabled) {
  background: rgba(var(--text-rgb), 0.10);
}

.ghost:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ghost.tiny {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

/* ── Button sizes ─────────────────────────────────────────────────────── */
.btn-sm { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-md); }
.ghost.danger {
  background: rgba(220, 40, 40, 0.12);
  color: #fff;
  border: 1px solid rgba(220, 40, 40, 0.3);
}
.ghost.danger:hover {
  background: rgba(220, 40, 40, 0.25);
}
.ghost.danger:active:not(:disabled) {
  background: rgba(220, 40, 40, 0.35);
  transform: scale(0.995);
}
.ghost.danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.danger {
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px var(--space-3);
  cursor: pointer;
  font-weight: 700;
}
.danger:hover {
  filter: brightness(1.05);
}
.danger.tiny {
  padding: 6px 8px;
  font-size: var(--text-xs);
  background: rgba(220, 40, 40, 0.15);
  color: #e04040;
  border: 1px solid rgba(220, 40, 40, 0.3);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 600;
}
.danger.tiny:hover {
  background: rgba(220, 40, 40, 0.25);
}

/* Unified buttons (used in Memoire) */
.btn {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-base) ease, border-color var(--transition-base) ease, transform 0.05s ease;
}
.btn:active {
  transform: scale(0.99);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.95), rgba(var(--primary-rgb), 0.7));
  color: #fff;
  border: 1px solid rgba(var(--primary-rgb), 0.45);
}
.btn-primary:hover {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 1), rgba(var(--primary-rgb), 0.8));
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid rgba(var(--text-rgb), 0.12);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(var(--text-rgb), 0.15);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}
.column-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 9px;
  height: 100%;
  cursor: col-resize;
  z-index: 20;
  background: transparent;
}
.column-resizer::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 4px;
  width: 2px;
  height: 50%;
  background: var(--border);
  border-radius: 2px;
  transition:
    background var(--transition-fast),
    height var(--transition-fast),
    top var(--transition-fast);
}
.column-resizer:hover::after {
  background: var(--primary);
  height: 70%;
  top: 15%;
}
.column-resizer:active::after {
  background: var(--primary);
  height: 100%;
  top: 0;
}
.column-resizer--visible::after {
  background: var(--border);
  height: 70%;
  top: 15%;
}
.source-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--accent-strong);
  text-decoration: underline;
  font-weight: 500;
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
  word-break: break-word;
  white-space: normal;
  cursor: pointer;
  min-width: 0;
  font-size: var(--text-xs);
  line-height: 1.3;
}

.progress {
  width: 100%;
  height: 6px;
  background: #e8ecf5;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
}

.progress-bar.indeterminate {
  width: 40%;
  min-width: 80px;
  animation: progress-indeterminate 1s linear infinite;
}

@keyframes progress-indeterminate {
  0% {
    margin-left: -40%;
  }
  50% {
    margin-left: 20%;
  }
  100% {
    margin-left: 100%;
  }
}

.muted {
  color: var(--muted);
  font-size: var(--text-sm);
}

.muted.tiny {
  font-size: var(--text-xs);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.stats-item {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  text-align: center;
}

.stats-value {
  font-weight: 700;
  font-size: var(--text-xl);
}

.stats-label {
  color: #5c6b88;
  font-size: var(--text-sm);
}

.filters {
  display: flex;
  gap: var(--space-4);
  margin-top: 6px;
}

.doc-type-note {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 6px 0 2px;
}
.doc-type-note strong {
  color: var(--text);
}

/* ── Reusable skeleton loaders ───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--border) 25%,
    rgba(var(--text-rgb), 0.08) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loader 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton--text {
  height: 14px;
  width: 60%;
  margin: 4px 0;
}

.skeleton--title {
  height: 20px;
  width: 40%;
  margin: 6px 0;
}

.skeleton--card {
  height: 80px;
  border-radius: var(--radius-md);
}

.skeleton--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

@keyframes skeleton-loader {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.pill {
  padding: 6px 10px;
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-xs);
  border: 1px solid var(--border);
}
.pill.invert {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--text);
  border: 1px solid rgba(var(--primary-rgb), 0.5);
}
.pill.invert:hover {
  border-color: rgba(46, 125, 106, 0.7);
  box-shadow: 0 2px 6px var(--shadow);
}

.pill.removable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pill.removable button {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  padding: 0;
  color: #1f2a44;
}

.banned-list {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: 6px;
}

.filename {
  font-weight: 600;
}

/* .page metadata (inside preview cards) — uses muted variant */
.preview-card .page {
  color: var(--muted);
  font-size: var(--text-xs);
}

.snippet {
  font-size: var(--text-base);
  color: var(--text);
  line-height: var(--leading-normal);
}

.snippet mark {
  background: #fff2a8;
}

.empty {
  text-align: center;
  color: var(--muted);
  padding: var(--space-5);
  font-size: var(--text-sm);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  z-index: 50;
}

.modal-content {
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--border);
  width: min(900px, 90vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px var(--shadow);
}
.modal-content.viewer {
  width: min(1100px, 95vw);
  max-height: 95vh;
}
.modal-content.viewer {
  width: min(1100px, 95vw);
  max-height: 95vh;
}

.modal-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
}

.modal-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  overflow: auto;
}
.viewer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.viewer-status {
  font-size: var(--text-base);
  color: var(--text);
}
.viewer-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
  overflow: auto;
}
.viewer-canvas img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.viewer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
}
.viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.viewer-canvas {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f6fb;
  border: 1px solid #e3e7ef;
  border-radius: var(--radius-lg);
  padding: 10px;
  overflow: auto;
}
.viewer-canvas img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.modal-body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid #e3e7ef;
}

.pager {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text);
  font-weight: 600;
}

.card-actions {
  margin-top: var(--space-2);
  display: flex;
  justify-content: flex-end;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.table-scroll {
  width: 100%;
  overflow: auto;
  max-height: 720px;
  /* Windows : scrollbars classic consomment de la largeur. Sans gutter
     stable, la scrollbar apparait/disparait au re-render -> reflow ->
     scroll-jump + flicker. macOS a des scrollbars overlay, donc bug
     invisible. scrollbar-gutter: stable reserve l'espace en permanence. */
  scrollbar-gutter: stable;
}

.table-card table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1000px;
  color: var(--text);
  table-layout: auto;
}

.table-card thead tr {
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 12;
  box-shadow: 0 2px 4px var(--shadow);
}

.table-card th,
.table-card td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: var(--text);
  min-width: 120px;
}

.table-card tbody tr.tr-even {
  background: rgba(var(--text-rgb), 0.02);
}

.text-cell {
  white-space: pre-line;
  word-break: break-word;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.45;
}

.excel-table-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.detected-columns {
  padding: 0 var(--space-3) 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detected-columns__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.detected-columns__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
}

.stat-pill.missing {
  background: rgba(var(--text-rgb), 0.04);
  border-style: dashed;
  opacity: 0.9;
}

.stat-pill.missing strong {
  color: var(--muted);
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.table-toolbar .toolbar-left,
.table-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─── Average card (par unite, accordeon) ─── */
.avg-card {
  margin: var(--space-1) 0;
  padding: 0;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.avg-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: 14px 18px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}
.avg-card__header:hover {
  background: rgba(var(--primary-rgb), 0.06);
}
.avg-card__total {
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.avg-card__hint {
  font-size: 0.72rem;
  color: rgba(var(--text-rgb), 0.5);
  letter-spacing: 0.02em;
}
/* Unit filter bar between averages and search table */
.avg-unit-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-2) 0;
  background: var(--surface-1, var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.avg-unit-bar__label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  margin-right: 4px;
}
.avg-unit-pill {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.avg-unit-pill:hover {
  background: rgba(var(--primary-rgb, 99,102,241), 0.12);
  border-color: var(--primary);
  color: var(--primary);
}
.avg-unit-pill--active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--btn-gradient-text);
}
.avg-unit-pill--active:hover {
  background: var(--accent-strong, var(--primary));
  border-color: var(--accent-strong, var(--primary));
  color: var(--btn-gradient-text);
}
.avg-unit-pill__count {
  font-weight: 400;
  font-size: 0.68rem;
  opacity: 0.7;
}
.avg-unit-pill--clear {
  border-style: dashed;
  font-weight: 500;
  color: var(--muted);
}
.avg-unit-pill--clear:hover {
  color: var(--text);
  border-color: var(--text);
  background: rgba(var(--text-rgb), 0.06);
}
.avg-unit-pill--delete {
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  gap: 5px;
}
.avg-unit-pill--delete:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
  color: #ef4444;
}


.avg-card__chevron {
  flex-shrink: 0;
  color: var(--muted);
  transform: rotate(0deg);
  transition: transform var(--transition-base);
}
.avg-card--open .avg-card__chevron {
  transform: rotate(180deg);
}
.avg-card__units {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 18px var(--space-4);
}
.avg-card__mean-ai {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px 18px 6px;
}
.avg-card__mean-ai-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.avg-card__mean-ai-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.avg-card__mean-ai-sub {
  font-size: 0.72rem;
  color: var(--muted);
}
.avg-card__mean-ai-btn {
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  padding: 6px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.78rem;
  transition:
    transform 0.12s,
    background 0.12s,
    border 0.12s;
}
.avg-card__mean-ai-btn:hover {
  background: rgba(var(--primary-rgb), 0.22);
  transform: translateY(-1px);
}
.avg-card__mean-ai-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.avg-card__mean-ai-error {
  margin: 0 18px 8px;
  color: var(--danger);
  font-size: 0.78rem;
}
.avg-card__mean-ai-result {
  margin: 0 18px 12px;
  padding: var(--space-3) 14px;
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px dashed rgba(var(--primary-rgb), 0.25);
  color: var(--text);
  font-weight: 800;
  font-size: 1.05rem;
}
.avg-card__mean-ai-result--unit {
  background: var(--panel);
  border: 1px solid rgba(34, 197, 94, 0.35);
  color: var(--text);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.25);
}
.avg-card__unit-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 10px 14px;
  background: var(--panel);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex-wrap: wrap;
}
.avg-card__unit-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
  flex-shrink: 0;
}
.avg-card__unit-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}
.avg-card__unit-count {
  font-size: 0.78rem;
  color: var(--muted);
}
.avg-card__unit-values {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
}
.avg-card__unit-mean {
  margin-top: 10px;
  padding-top: var(--space-2);
  border-top: 1px dashed rgba(var(--text-rgb), 0.08);
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  flex-basis: 100%;
}
.avg-card__mean-title {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.avg-card__mean-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avg-card__cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.avg-card__cell-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.avg-card__cell-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}

.excel-stats {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.stat-pill {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  min-width: 90px;
}

.stat-pill .label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.stat-pill strong {
  font-size: var(--text-base);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: var(--text-sm);
}

.pill.accent {
  border-color: var(--primary);
  color: var(--accent-strong);
}

.pill.success {
  border-color: #16a34a;
  color: #15803d;
}

.excel-table {
  --file-col-width: 240px;
  --sheet-col-width: 140px;
  --row-col-width: 90px;
  table-layout: fixed;
}
.excel-table td,
.excel-table th {
  overflow: hidden;
  text-overflow: ellipsis;
}

.excel-table th {
  overflow: visible;
}

.excel-table th.empty-header {
  box-shadow: inset -1px 0 0 var(--border);
}

.excel-table--tight {
  table-layout: auto;
  width: 100%;
}

.excel-table--tight th {
  overflow: visible;
}

.excel-table--tight td {
  overflow: hidden;
  max-width: 240px;
}

.excel-table--tight .cell-inner {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.excel-table col.file-col {
  width: var(--file-col-width);
}

.excel-table col.sheet-col {
  width: var(--sheet-col-width);
}

.excel-table col.row-col {
  width: var(--row-col-width);
}

.search-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0.7;
  margin: var(--space-1) 0 var(--space-2);
}

.excel-table .sticky-col {
  position: sticky;
  left: 0;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--border);
}

.excel-table tbody .sticky-col {
  z-index: 2;
}

.excel-table thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 14;
}

.excel-table th.sticky-col:nth-child(1),
.excel-table td.sticky-col:nth-child(1) {
  left: 0;
}

.excel-table thead th.sticky-col {
  z-index: 15;
}

.excel-table th.sticky-col:first-child {
  z-index: 16;
}

.excel-table th.sticky-col:nth-child(2),
.excel-table td.sticky-col:nth-child(2) {
  left: var(--file-col-width);
}

.excel-table th.sticky-col:nth-child(3),
.excel-table td.sticky-col:nth-child(3) {
  left: calc(var(--file-col-width) + var(--sheet-col-width));
}

.excel-table th.sticky-col:nth-child(4),
.excel-table td.sticky-col:nth-child(4) {
  left: calc(
    var(--file-col-width) + var(--sheet-col-width) + var(--row-col-width)
  );
}

.file-cell {
  padding-left: var(--space-3);
}

.file-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  padding: 6px 10px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  font-weight: 600;
  overflow: hidden;
}

.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-links {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.sheet-cell {
  min-width: var(--sheet-col-width);
}

.sheet-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 600;
}

.row-cell {
  text-align: right;
  font-weight: 700;
  color: var(--muted);
  min-width: var(--row-col-width);
}

.row-index {
  font-variant-numeric: tabular-nums;
}

.cell-inner {
  display: block;
  max-width: 720px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
}
.designation-cell {
  min-height: calc(1.5em * 4);
  height: auto;
  max-height: none;
  white-space: pre-line;
  word-break: break-word;
}

.excel-table mark {
  background: rgba(var(--primary-rgb), 0.28);
  color: var(--text);
  padding: 0 3px;
  border-radius: var(--radius-xs);
  font-weight: 600;
}

.match-strong {
  background: rgba(var(--primary-rgb), 0.18);
}

.match-mid {
  background: rgba(var(--primary-rgb), 0.1);
}

.match-soft {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ProposalCell (.pc) — Navigation compacte entre propositions IA
   ═══════════════════════════════════════════════════════════════════════════ */

/* Proposal td: relative positioning so nav buttons stretch full height */
.proposal-td {
  position: relative !important;
  padding: 0 !important;
  min-width: 360px !important;
  overflow: hidden;
}

.proposal-cell-inner {
  max-width: none !important;
  white-space: nowrap !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pc {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  white-space: nowrap;
  line-height: 1;
  font-size: var(--text-xs);
  width: 100%;
  height: 100%;
  padding: 0;
  user-select: none;
  position: static;
}

.pc__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.06);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  -webkit-appearance: none;
  z-index: 2;
}

.pc__nav svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.pc__nav--prev {
  left: 0;
  border-right: 1px solid var(--border);
}

.pc__nav--next {
  right: 0;
  border-left: 1px solid var(--border);
}

.pc__nav:hover {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.2);
  color: var(--primary);
}

.pc__nav:active {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.35);
  color: #fff;
}

.pc__center {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 88px;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.pc__counter {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text);
  min-width: 28px;
  text-align: center;
  letter-spacing: -0.02em;
}

.pc__counter-sep {
  color: var(--muted);
  font-weight: 400;
  opacity: 0.6;
}

.pc__sep {
  width: 1px;
  height: 14px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 1px;
}

/* Barre de progression couverture */
.pc__progress-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.pc__progress-bar {
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  flex-shrink: 0;
}

.pc__progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--accent, var(--primary));
  transition: width 0.2s ease;
}

.pc__pct {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 500;
  min-width: 24px;
  letter-spacing: -0.02em;
}

/* Indicateur unite (icone SVG) */
.pc__unit-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent, var(--primary));
  transition: opacity 0.2s ease;
}

/* Nombre de mots trouves */
.pc__words {
  font-size: var(--text-xs);
  color: var(--muted);
  flex-shrink: 0;
  opacity: 0.7;
}

/* Point de confiance */
.pc__confidence-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, var(--primary));
  cursor: help;
  transition: opacity 0.2s ease;
}

/* Bouton affiner IA */
.pc__refine-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  line-height: 1;
  color: var(--muted);
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.pc__refine-btn:hover {
  opacity: 1;
  color: var(--accent, var(--primary));
}

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.typing-dots {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
}

.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.6;
  animation: blink 1.2s infinite ease-in-out;
}

/* ── Collapsible header ─────────────────────────────────────────────── */
.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-1) 0;
  margin-bottom: 0;
  transition: margin-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.collapsible-header:has(+ .collapsible-panel.is-open) {
  margin-bottom: 12px;
}

/* ── Collapsible panel — smooth grid animation ──────────────────────── */
.collapsible-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.collapsible-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.collapsible-panel:not(.is-open) {
  pointer-events: none;
}

.collapsible-panel__inner {
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.collapsible-panel:not(.is-open) > .collapsible-panel__inner {
  transform: translateY(-8px);
}

.accordion-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Liste dossiers settings */
.image-folders-list {
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.image-folder-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--pill);
  border-radius: var(--radius-1);
}

.image-folder-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.image-folder-item__path {
  font-size: var(--text-sm);
  word-break: break-all;
}

/* Stats grid settings */
.image-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.image-stat-item {
  text-align: center;
  padding: var(--space-4);
  background: var(--pill);
  border-radius: var(--radius-1);
}

.image-stat-item__value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.image-stat-item__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

/* Messages */
.success-text {
  color: var(--primary);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.error-text {
  color: #dc3545;
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* Input readonly */
.input--readonly {
  background: var(--pill);
  cursor: default;
}

/* Progress bar */
.progress {
  height: 8px;
  background: var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  transition: width 0.3s ease;
}

.themes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.themes-header h3 {
  margin: 0;
  font-size: var(--text-md);
}

.themes-optional-callout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 6px 0 10px 0;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.add-theme-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.add-theme-row .input {
  flex: 1;
  padding: 12px 14px;
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-base);
  transition:
    border-color var(--transition-base),
    background var(--transition-base);
}

.add-theme-row .input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--panel);
}

.add-theme-row .input::placeholder {
  color: var(--muted);
}

.add-theme-row .soft-select {
  width: 140px;
  padding: 10px 12px;
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-base);
  cursor: pointer;
}

.add-theme-row .soft-select:focus {
  outline: none;
  border-color: var(--primary);
}

.add-theme-row .primary {
  min-width: 44px;
  padding: 10px 14px;
  border-radius: var(--radius-2);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .add-theme-row {
    flex-wrap: wrap;
  }
  .add-theme-row .input {
    flex: none;
    width: 100%;
  }
  .add-theme-row .primary {
    flex: 1;
  }
}

.themes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.empty-state {
  padding: var(--space-6);
  text-align: center;
}

.theme-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-1);
  cursor: grab;
  transition: all var(--transition-fast) ease;
}

.theme-row:hover {
  background: var(--surface-3);
}

.theme-row.dragging {
  opacity: 0.5;
}

.theme-row.drag-over {
  border-top: 2px solid var(--primary);
}

.drag-handle {
  color: var(--muted);
  font-size: var(--text-base);
  cursor: grab;
}

.theme-info {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.theme-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.theme-type {
  flex-shrink: 0;
}

/* Template & freeblocks */
.template-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.ia-options label {
  margin-bottom: var(--space-1);
  display: inline-block;
}
.ia-options .filter-checkbox {
  align-items: start;
  gap: var(--space-3);
}
.ia-options .filter-checkbox input {
  margin-top: 3px;
}
.ia-options .muted.tiny {
  display: block;
  margin-top: 6px;
  line-height: 1.5;
}

.add-block-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.add-block-row .input {
  flex: 1;
  max-width: 220px;
  padding: 12px 14px;
  border-radius: var(--radius-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-base);
  transition:
    border-color var(--transition-base),
    background var(--transition-base);
}

.add-block-row .input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--panel);
}

.add-block-row .input::placeholder {
  color: var(--muted);
}

.freeblocks-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.freeblock-item {
  background: var(--surface-2);
  border-radius: var(--radius-1);
  padding: var(--space-3);
}
.freeblock-item--auto {
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px dashed rgba(var(--primary-rgb), 0.35);
}
.freeblock-item--auto .freeblock-actions {
  display: none;
}
.freeblock-item--auto .rich-area {
  background: var(--panel);
  color: var(--muted);
  border: 1px dashed var(--border);
}

.freeblock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.freeblock-header label {
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: monospace;
}

.freeblock-actions {
  display: flex;
  gap: 6px;
}
.freeblock-modes {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.mode-btn {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-full);
  padding: 6px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, border-color var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.mode-btn:hover { transform: translateY(-1px); }
.mode-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.25);
}
.mode-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  padding: 6px 2px 2px;
}

.export-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  background: var(--panel);
}
.export-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.export-panel__header h3 {
  margin: 0;
  font-size: var(--text-base);
}
.export-panel__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.export-progress {
  margin-top: 10px;
  height: 6px;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.export-progress__bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

/* Status badges */
.status-ok {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-md);
}

.status-warn {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #d97706;
  background: rgba(217, 119, 6, 0.1);
  padding: 2px 8px;
  border-radius: var(--radius-md);
}

.error-msg {
  color: #dc2626;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  background: rgba(220, 38, 38, 0.08);
  border-radius: var(--radius-1);
}

/* Export page */
.recap-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-5);
}

.recap-card.ready {
  border-color: var(--primary);
}

.recap-card h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
}

.recap-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.recap-section:last-of-type {
  border-bottom: none;
}

.recap-label {
  font-weight: 500;
  color: var(--muted);
}

.recap-items {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.recap-items .ok {
  color: #16a34a;
}

.recap-items .missing {
  color: var(--muted);
}

.alert-box {
  padding: var(--space-3) var(--space-4);
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.3);
  border-radius: var(--radius-1);
  font-size: var(--text-sm);
  color: #d97706;
}

.alert-box p {
  margin: 0;
}

.generate-section {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.primary.large {
  font-size: var(--text-md);
  padding: 14px 28px;
}

.success-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: var(--radius-2);
}

.success-icon {
  font-size: 28px;
  color: #16a34a;
}

.success-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.success-text strong {
  color: #16a34a;
}

@keyframes top-progress-in {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes top-progress-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-100%); }
}

/* Button press effect — subtle scale down on click */
/* Exclut les boutons positionnés en absolute (dsp-input-btn, etc.) pour eviter un saut */
button:active:not(:disabled):not(.dsp-input-btn):not(.pv-btn):not(.pv-action-btn):not(.superchat-nav-btn) {
  transform: scale(0.995);
  transition: transform 60ms ease;
}

/* Smooth focus transitions */
input,
textarea,
select,
button {
  transition:
    border-color var(--transition-base) ease,
    box-shadow var(--transition-base) ease,
    background var(--transition-base) ease,
    transform 0.1s ease;
}

/* Pill/badge pop animation */
.pill {
  transition:
    transform var(--transition-fast) ease,
    background var(--transition-base) ease;
}

.pill:hover {
  transform: scale(1.03);
}

/* ===== TABS WITH SLIDING INDICATOR ===== */

.tabs-container {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  overflow: hidden;
}

.tabs-list {
  display: flex;
  position: relative;
  gap: 0;
  justify-content: center;
}

.tabs-btn {
  flex: 1;
  position: relative;
  padding: 14px 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  transition:
    color var(--transition-base) ease,
    background var(--transition-base) ease;
  z-index: 1;
}

.tabs-btn:hover {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.05);
}

.tabs-btn.active {
  color: var(--accent-strong);
  font-weight: 600;
}

.tabs-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  border-radius: 3px 3px 0 0;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* ===== MODE TOGGLE (Cloud/Local) ===== */
.mode-toggle {
  display: inline-flex;
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: rgba(var(--text-rgb), 0.03);
  padding: 2px;
  gap: 2px;
}
.mode-toggle__btn {
  padding: 6px 12px;
  font-size: var(--text-xs);
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-base) ease;
  border-radius: var(--radius-full);
  letter-spacing: 0.2px;
}
.mode-toggle__btn.is-active {
  color: var(--text);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:
    0 0 0 1px rgba(var(--text-rgb), 0.12),
    0 6px 14px rgba(var(--primary-rgb), 0.25);
}

.mode-toggle__btn:not(.is-active):hover {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.12);
}
.mode-toggle__btn:disabled {
  cursor: default;
}

/* Cloud mode: dim the folder section */
.idx-cloud-dim {
  opacity: 0.35;
  pointer-events: none;
}

/* Cloud mode: grey only the related inputs */
.is-cloud-mode {
  background: rgba(var(--text-rgb), 0.06);
  color: var(--muted);
  border-color: rgba(var(--text-rgb), 0.12);
}
.is-cloud-mode::placeholder {
  color: rgba(var(--text-rgb), 0.35);
}

/* ── SHARE OVERLAY ──────────────────────────────────────────────────────── */
.preview-card { position: relative; }
.preview-actions { justify-content: space-between; align-items: center; }

.drive-source-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-xs);
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  white-space: nowrap;
}

.preview-card--cloud {
  border-left: 3px solid rgba(var(--primary-rgb), 0.3);
}

.share-icon-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  border-radius: var(--radius-sm); padding: 0;
  color: var(--text-secondary);
  opacity: 0.45; transition: opacity var(--transition-fast), background var(--transition-fast);
  display: none;
}
.share-icon-btn:hover { opacity: 1; background: rgba(255,255,255,0.07); }

@keyframes shareIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.share-overlay {
  position: absolute; inset: 0;
  background: rgba(10, 15, 30, 0.92);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3);
  animation: shareIn 0.2s ease both;
  z-index: 10; padding: 16px;
}
.share-close {
  position: absolute; top: 10px; right: 12px;
  background: none; border: none; cursor: pointer;
  color: #fff; font-size: var(--text-md); opacity: 0.4; transition: opacity var(--transition-fast);
  padding: 0; line-height: 1;
}
.share-close:hover { opacity: 1; }
.share-overlay__title { font-weight: 700; font-size: var(--text-base); color: #fff; text-align: center; }
.share-overlay__file {
  font-size: var(--text-xs); color: rgba(255,255,255,0.5);
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.share-overlay__btns { display: flex; gap: 14px; }

.share-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 20px; border-radius: 16px;
  border: none; cursor: pointer;
  font-weight: 600; font-size: var(--text-sm);
  transition: transform 0.18s, box-shadow 0.18s;
  min-width: 90px;
}
.share-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.share-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.share-btn--wa { background: #25D366; color: #fff; }
.share-btn--email { background: linear-gradient(135deg, #6366f1, #3b82f6); color: #fff; }
.share-btn__icon { font-size: 22px; line-height: 1; }

.share-btn__spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff; border-radius: var(--radius-full);
  animation: spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== OFFLINE BANNER ===== */
.offline-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-modal, 200);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 6px 16px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff; font-size: var(--text-sm); font-weight: 600;
  text-align: center;
  animation: slideDown 0.3s ease-out;
}
.offline-banner--warning { background: linear-gradient(135deg, #f59e0b, #d97706); }
.offline-banner--critical { background: linear-gradient(135deg, #ef4444, #dc2626); }
.offline-banner--expired { background: linear-gradient(135deg, #991b1b, #7f1d1d); }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ===== UPDATE AVAILABLE BANNER ===== */
.update-banner {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-popover, 500);
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  padding: 14px 18px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-lg);
  max-width: 440px;
  animation: slideInRight 0.35s ease-out;
}
.update-banner__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.update-banner__title {
  font-size: var(--text-base, 0.88rem);
  font-weight: 600;
  color: var(--text);
}
.update-banner__meta {
  font-size: var(--text-sm, 0.8rem);
  color: var(--text-2);
}
.update-banner__actions {
  display: flex;
  gap: var(--space-2, 8px);
  flex-shrink: 0;
}
.update-banner__btn {
  padding: 6px 12px;
  font-size: var(--text-sm, 0.8rem);
  white-space: nowrap;
}
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.ai-error-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-modal, 200);
  display: flex; align-items: center; justify-content: center; gap: var(--space-2, 8px);
  padding: 8px 16px;
  color: #fff; font-size: var(--text-sm, 0.82rem); font-weight: 600;
  text-align: center; cursor: pointer;
  animation: slideDown 0.3s ease-out;
}
.ai-error-banner--warning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.ai-error-banner--critical {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.account-last-check {
  font-size: var(--text-xs);
  color: var(--text-2);
  opacity: 0.7;
}

/* ===== COMMAND PALETTE (Ctrl+K) ===== */
.command-palette-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal, 200);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  animation: global-fade-in-no-transform 0.15s ease-out;
}
.command-palette {
  width: 520px; max-width: 90vw; max-height: 60vh;
  background: var(--card-bg); border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  overflow: hidden;
  animation: global-fade-in 0.2s ease-out;
}
.command-palette__input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.command-palette__input-wrap svg { opacity: 0.5; flex-shrink: 0; }
.command-palette__input {
  flex: 1; border: none; background: transparent;
  font-size: 1rem; color: var(--text-1); outline: none;
}
.command-palette__results {
  max-height: 45vh; overflow-y: auto; padding: 6px;
}
.command-palette__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-md);
  cursor: pointer; transition: background 0.1s;
  font-size: var(--text-base); color: var(--text-1);
}
.command-palette__item:hover,
.command-palette__item--active {
  background: var(--accent-alpha);
}
.command-palette__item-icon { font-size: 1.1rem; width: 24px; text-align: center; }
.command-palette__item-label { flex: 1; }
.command-palette__item-shortcut {
  font-size: var(--text-xs); opacity: 0.5;
  padding: 2px 6px; border-radius: var(--radius-xs);
  background: var(--bg-2);
  font-family: monospace;
}
.command-palette__empty {
  padding: 24px; text-align: center;
  color: var(--text-3); font-size: 0.85rem;
}

/* -- Shortcuts panel inside command palette -- */
.command-palette__shortcuts {
  max-height: 45vh; overflow-y: auto; padding: 12px 16px;
}
.command-palette__shortcuts-title {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 10px;
}
.command-palette__shortcut-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 6px; border-radius: var(--radius-sm);
}
.command-palette__shortcut-row:hover {
  background: var(--accent-alpha);
}
.command-palette__shortcut-keys {
  display: flex; gap: 4px; flex-shrink: 0;
}
.command-palette__kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  font-size: 0.7rem; font-family: inherit; font-weight: 600;
  color: var(--text-2); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 4px;
  line-height: 1;
}
.command-palette__shortcut-desc {
  font-size: 0.85rem; color: var(--text-1); margin-left: 16px;
}

/* -- Footer hint bar -- */
.command-palette__footer {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.command-palette__footer-hint {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.7rem; color: var(--text-3);
}

/* ===== QUALITY SCORE ===== */
.quality-score {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-radius: 14px;
  background: var(--card-bg); border: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.quality-score__ring {
  width: 56px; height: 56px; position: relative;
}
.quality-score__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quality-score__ring-value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: var(--text-1);
}
.quality-score__details { flex: 1; }
.quality-score__title { font-weight: 700; font-size: 0.9rem; color: var(--text-1); margin-bottom: var(--space-1); }
.quality-score__suggestions { font-size: 0.78rem; color: var(--text-3); }
.quality-score__suggestions li { margin-bottom: 2px; }
.quality-score--high .quality-score__ring-value { color: var(--color-success); }
.quality-score--medium .quality-score__ring-value { color: #f59e0b; }
.quality-score--low .quality-score__ring-value { color: #f87171; }

/* ===== RESPONSE LIBRARY ===== */
.response-library {
  padding: var(--space-4);
}
.response-library__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.response-library__title { font-weight: 700; font-size: 1rem; }
.response-library__search {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-1);
  font-size: 0.85rem; color: var(--text-1);
  width: 220px;
}
.response-library__list {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.response-library__item {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
  cursor: pointer; transition: background var(--transition-fast);
}
.response-library__item:hover {
  background: var(--accent-alpha);
}
.response-library__item-title {
  font-weight: 600; font-size: var(--text-base); color: var(--text-1);
  margin-bottom: var(--space-1);
}
.response-library__item-preview {
  font-size: 0.78rem; color: var(--text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.response-library__item-meta {
  display: flex; gap: var(--space-3); margin-top: var(--space-2);
  font-size: var(--text-xs); color: var(--text-3);
}

/* ===== PRICE COMPARATOR ===== */
.price-comparator {
  margin-top: var(--space-3);
}
.price-comparator__row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.price-comparator__row:nth-child(even) { background: var(--bg-2); }
.price-comparator__label { flex: 1; color: var(--text-2); }
.price-comparator__value { font-weight: 700; min-width: 80px; text-align: right; }
.price-comparator__ref { min-width: 80px; text-align: right; color: var(--text-3); font-size: 0.78rem; }
.price-comparator__delta { min-width: 60px; text-align: right; font-weight: 700; font-size: 0.78rem; }
.price-comparator__delta--high { color: #f87171; }
.price-comparator__delta--low { color: var(--color-success); }
.price-comparator__delta--normal { color: var(--text-3); }

/* ===== DEADLINE NOTIFICATIONS ===== */
.deadline-toast {
  position: fixed; top: 16px; right: 16px; z-index: calc(var(--z-max) - 1);
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.deadline-toast__item {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--radius-lg);
  background: var(--card-bg); border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  animation: slideIn 0.3s ease-out;
  font-size: 0.85rem; color: var(--text-1);
  max-width: 360px;
}
.deadline-toast__item--urgent { border-color: #f87171; }
.deadline-toast__close {
  background: none; border: none; color: var(--text-3);
  cursor: pointer; font-size: 1.1rem; padding: 0;
}
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== DROP ZONE ===== */
.drop-zone-overlay {
  position: fixed; inset: 0; z-index: calc(var(--z-max) - 2);
  display: flex; align-items: center; justify-content: center;
  animation: global-fade-in-no-transform 0.2s ease-out;
  pointer-events: none;
}
.drop-zone-box {
  width: 400px; padding: 48px 32px; text-align: center;
  background: var(--card-bg); border: 3px dashed var(--accent);
  border-radius: 24px;
}
.drop-zone-box__icon { font-size: 3rem; margin-bottom: var(--space-3); }
.drop-zone-box__title { font-size: 1.2rem; font-weight: 700; color: var(--text-1); margin-bottom: var(--space-2); }
.drop-zone-box__hint { font-size: 0.85rem; color: var(--text-3); }

/* ===== GANTT PLANNING ===== */
.gantt-container {
  overflow-x: auto; padding: 16px 0;
}
.gantt-header {
  display: flex; border-bottom: 2px solid var(--border); padding-bottom: 8px;
  font-size: var(--text-xs); font-weight: 700; color: var(--text-3);
  text-transform: uppercase;
}
.gantt-header__label { width: 200px; flex-shrink: 0; padding-left: 8px; }
.gantt-header__months { display: flex; flex: 1; }
.gantt-header__month { flex: 1; text-align: center; min-width: 60px; }
.gantt-row {
  display: flex; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
}
.gantt-row__label { width: 200px; flex-shrink: 0; padding-left: 8px; color: var(--text-2); }
.gantt-row__bar-container { display: flex; flex: 1; position: relative; height: 24px; }
.gantt-row__bar {
  position: absolute; height: 20px; top: 2px;
  border-radius: var(--radius-sm); background: var(--accent);
  opacity: 0.8; transition: opacity var(--transition-fast);
}
.gantt-row__bar:hover { opacity: 1; }

/* ===== MIC BUTTON (global voice dictation) ===== */
.mic-float-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--accent); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
  cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.mic-float-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(99,102,241,0.4); }
.mic-float-btn--recording {
  background: #f87171;
  animation: pulse 1.5s ease-in-out infinite;
  box-shadow: 0 4px 16px rgba(248,113,113,0.3);
}

/* ── Toast notifications ──────────────────────────────────────────── */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  min-width: 240px;
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255,255,255,0.04);
  animation: toast-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast__message {
  flex: 1;
  line-height: 1.4;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.toast--success {
  border-color: rgba(var(--primary-rgb), 0.35);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), var(--panel));
}
.toast--success svg { color: var(--primary); }

.toast--error {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), var(--panel));
}
.toast--error svg { color: var(--color-danger); }

.toast--info {
  border-color: rgba(99, 102, 241, 0.35);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), var(--panel));
}
.toast--info svg { color: #6366f1; }

.toast--warning {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), var(--panel));
}
.toast--warning svg { color: #f59e0b; }

/* ═══════════════════════════════════════════════════════════════════════════
   Welcome Screen (Onboarding)
   ═══════════════════════════════════════════════════════════════════════════ */

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  animation: welcome-fade-in 0.3s ease;
}

@keyframes welcome-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.welcome-card {
  position: relative;
  width: 92vw;
  max-width: 600px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 60px rgba(var(--primary-rgb), 0.08);
  padding: var(--space-8) var(--space-7) var(--space-7);
  overflow: hidden;
  animation: welcome-card-in 0.35s ease;
}

@keyframes welcome-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.welcome-skip {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  z-index: 2;
}

.welcome-skip:hover {
  color: var(--text);
  background: rgba(var(--text-rgb), 0.06);
}

.welcome-slides-container {
  position: relative;
  min-height: 340px;
}

.welcome-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  opacity: 0;
  pointer-events: none;
}

.welcome-slide--active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.welcome-slide--left {
  opacity: 0;
  transform: translateX(-60px);
}

.welcome-slide--right {
  opacity: 0;
  transform: translateX(60px);
}

.welcome-slide__logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  background: rgba(var(--primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.welcome-slide__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  line-height: var(--leading-tight);
}

.welcome-slide__title--sm {
  font-size: var(--text-xl);
}

.welcome-slide__subtitle {
  margin: 0;
  font-size: var(--text-base);
  color: var(--text-2);
  line-height: var(--leading-relaxed);
  max-width: 400px;
}

.welcome-slide__hint {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-2);
  opacity: 0.7;
  line-height: var(--leading-normal);
}

.welcome-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  width: 100%;
  max-width: 480px;
  margin: var(--space-2) 0;
}

.welcome-feature-card {
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.07);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.welcome-feature-card:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
  background: rgba(var(--primary-rgb), 0.04);
}

.welcome-feature-card__icon {
  color: var(--primary);
}

.welcome-feature-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.welcome-feature-card__desc {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: var(--leading-normal);
}

.welcome-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.welcome-btn--primary {
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  box-shadow: var(--shadow-sm);
}

.welcome-btn--primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--shadow-md);
}

.welcome-btn--ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}

.welcome-btn--ghost:hover {
  background: rgba(var(--text-rgb), 0.05);
  color: var(--text);
}

.welcome-btn-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.welcome-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-top: var(--space-5);
}

.welcome-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(var(--text-rgb), 0.15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.welcome-dots__dot--active {
  background: var(--primary);
  width: 24px;
}

.welcome-dots__dot:hover:not(.welcome-dots__dot--active) {
  background: rgba(var(--text-rgb), 0.3);
}

/* ══════════════════════════════════════════════════════════════════════
   PROFILES — Dropdown + Overlay
   ══════════════════════════════════════════════════════════════════════ */

/* Sidebar profile badge */
.sidebar-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(var(--text-rgb), 0.03);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.sidebar-profile-btn:hover {
  background: rgba(var(--primary-rgb, 99,102,241), 0.08);
  border-color: var(--primary);
  color: var(--primary);
}
.sidebar-profile-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* ── Dropdown ──────────────────────────────────────────────────────── */
.profile-dropdown {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 200px;
  background: rgba(var(--panel-rgb, 30,34,50), 0.92);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(var(--primary-rgb),0.05);
  padding: 6px 0;
  z-index: 200;
  animation: profile-dropdown-in 0.2s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes profile-dropdown-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.profile-dropdown__header {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 14px 4px;
}
.profile-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s;
  animation: profile-item-fade 0.2s ease both;
}
@keyframes profile-item-fade {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.profile-dropdown__item:hover {
  background: rgba(var(--primary-rgb),0.1);
}
.profile-dropdown__item.is-active {
  color: var(--primary);
  font-weight: 600;
}
.profile-dropdown__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-dropdown__name { flex: 1; }
.profile-dropdown__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 12px;
}
.profile-dropdown__manage {
  color: var(--muted);
  font-size: 0.78rem;
}
.profile-dropdown__manage:hover { color: var(--primary); }

/* ── Overlay plein écran ───────────────────────────────────────────── */
.profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-overlay__content {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  padding: 40px 48px;
  max-width: 700px;
  width: 90%;
  position: relative;
}
.profile-overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  transition: all 0.15s;
}
.profile-overlay__close:hover { color: var(--text); background: rgba(var(--text-rgb),0.06); }
.profile-overlay__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.profile-overlay__subtitle {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 28px;
}
.profile-overlay__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

/* ── Profile card ──────────────────────────────────────────────────── */
.profile-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface, var(--bg));
  cursor: pointer;
  transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.profile-card:hover {
  border-color: var(--profile-color, var(--primary));
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.profile-card.is-active {
  border-color: var(--profile-color, var(--primary));
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99,102,241), 0.15);
}
.profile-card__indicator {
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 0 0 3px 3px;
}
.profile-card__initial {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
}
.profile-card__name {
  font-weight: 600;
  font-size: 0.9rem;
}
.profile-card__date {
  font-size: 0.72rem;
  color: var(--muted);
}
.profile-card__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}
.profile-card__delete {
  position: absolute;
  top: 8px;
  left: 8px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  opacity: 0;
  transition: all 0.15s;
}
.profile-card:hover .profile-card__delete { opacity: 1; }
.profile-card__delete:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* Card add */
.profile-card--add {
  border-style: dashed;
  border-color: rgba(var(--text-rgb), 0.15);
  color: var(--muted);
}
.profile-card--add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Card create form */
.profile-card--create {
  cursor: default;
  gap: 10px;
}
.profile-card--create:hover { transform: none; }
.profile-card__input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--input-bg, var(--bg));
  color: var(--text);
  font-size: 0.85rem;
  text-align: center;
}
.profile-card__colors {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.profile-card__color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.profile-card__color-dot:hover { transform: scale(1.2); }
.profile-card__color-dot.is-selected {
  border-color: white;
  box-shadow: 0 0 0 2px var(--text);
  transform: scale(1.15);
}


/* Dropzone canon partage — utilise par <Dropzone> dans components/ui/.
   Ce fichier est la SEULE source de verite pour le style des drag-and-drop.
   Toute nouvelle dropzone doit utiliser le composant <Dropzone>. */

.dz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 24px;
  border: 2px dashed rgba(var(--primary-rgb), 0.28);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  margin-bottom: 20px;
  background: rgba(var(--primary-rgb), 0.02);
  position: relative;
  overflow: hidden;
}
.dz::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.dz:hover, .dz--hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
  transform: translateY(-1px);
}
.dz:hover::before, .dz--hover::before { opacity: 1; }
.dz--hover { box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.10); }
.dz--busy { cursor: progress; opacity: 0.7; }

/* Variante hero — zone de drop spacieuse pour les pages d'accueil de module */
.dz--hero {
  min-height: 380px;
  padding: 56px 32px;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}
.dz--hero .dz__icon { width: 64px; height: 64px; border-radius: 18px; }
.dz--hero .dz__icon svg { width: 30px; height: 30px; }
.dz--hero .dz__text { font-size: 1rem; }
.dz--hero .dz__hint { font-size: 0.82rem; }

/* Variante compacte — pour drop inline dans header de card / cellule étroite */
.dz--compact {
  padding: 12px 14px;
  gap: 6px;
  margin-bottom: 0;
  min-height: 0;
  border-width: 1px;
  border-radius: 10px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.dz--compact .dz__icon { width: 30px; height: 30px; border-radius: 8px; }
.dz--compact .dz__icon svg { width: 16px; height: 16px; }
.dz--compact .dz__text { font-size: 0.8rem; }
.dz--compact .dz__hint { font-size: 0.72rem; }
.dz--compact .dz__cta { font-size: 0.72rem; }

.dz__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}
.dz:hover .dz__icon { transform: translateY(-2px); }
.dz__text { font-size: 0.92rem; font-weight: 600; color: var(--text); position: relative; z-index: 1; }
.dz__hint { font-size: 0.78rem; color: var(--muted); position: relative; z-index: 1; }
.dz__cta { font-size: 0.76rem; color: var(--primary); font-weight: 500; margin-top: 4px; position: relative; z-index: 1; }

.dz-picker {
  position: absolute;
  inset: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
  justify-content: stretch;
  gap: 10px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  z-index: 5;
  cursor: default;
  box-sizing: border-box;
  overflow: hidden;
}
.dz-picker__opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 14px 12px;
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.14);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.dz-picker__opt:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.09);
  transform: translateY(-1px);
}
.dz-picker__opt svg { color: var(--primary); margin-bottom: 4px; }
.dz-picker__title { font-size: 0.86rem; font-weight: 600; }
.dz-picker__sub { font-size: 0.74rem; color: var(--muted); }

/* Zone de fichiers en attente (apres drop / selection) */
.dz-pending {
  background: rgba(var(--primary-rgb), 0.025);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 16px;
  padding: 18px 20px 14px;
  margin-bottom: 20px;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(var(--primary-rgb), 0.04) inset;
}
.dz-pending__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.12);
  flex-wrap: wrap;
}
.dz-pending__head > strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dz-pending__head > strong::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18);
}
.dz-pending__actions { display: flex; gap: 8px; }
.dz-pending__btn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.dz-pending__btn:hover { border-color: rgba(var(--primary-rgb), 0.35); }
.dz-pending__btn--primary {
  border: none;
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.18);
}
.dz-pending__btn--primary:hover { transform: translateY(-1px); }
.dz-pending__list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.dz-pending__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(var(--text-rgb), 0.02);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
}
.dz-pending__item:hover {
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.14);
}
.dz-pending__item--typed { grid-template-columns: 1fr auto auto auto; }
.dz-pending__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 500;
}
.dz-pending__size { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.dz-pending__type {
  padding: 5px 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--text);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 11px) 50%, calc(100% - 7px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.dz-pending__type:hover { border-color: var(--primary); }
.dz-pending__rm {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 16px;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.dz-pending__rm:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.08);
}


/* NativeFilePicker — picker custom utilise pour bypasser NSOpenPanel
   (bug macOS Tahoe : freeze 30s a chaque ouverture quand iCloud Desktop sync
   est actif). Virtualise + style Finder boost.
   PAS de backdrop-filter : couteux quand disableHardwareAcceleration() est on. */

.npk__backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--primary-rgb), 0.08), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(var(--primary-rgb), 0.05), transparent 50%),
    rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 9999);
  padding: 24px;
  animation: npk-fade 0.18s ease-out;
}
@keyframes npk-fade { from { opacity: 0; } to { opacity: 1; } }

.npk {
  position: relative;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.05),
    0 12px 32px rgba(0, 0, 0, 0.42);
  width: min(1000px, 100%);
  height: min(700px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: npk-pop 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes npk-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Liseré primary tout en haut — accent visuel discret */
.npk::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.6), transparent);
  pointer-events: none;
  z-index: 2;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.npk__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-1, var(--panel)) 0%, var(--panel) 100%);
  flex-shrink: 0;
}
.npk__head-spacer { flex: 1; }

.npk__back {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
  flex-shrink: 0;
}
.npk__back:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  color: var(--primary);
}
.npk__back:active:not(:disabled) { transform: translateY(0.5px); }
.npk__back:disabled { opacity: 0.3; cursor: not-allowed; }

.npk__crumb {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: var(--text-sm);
  color: var(--muted);
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  scrollbar-width: none;
  max-width: 520px;
}
.npk__crumb::-webkit-scrollbar { display: none; }
.npk__crumb-sep { opacity: 0.5; padding: 0 5px; font-size: 14px; color: var(--text-2, var(--muted)); }
.npk__crumb-btn {
  background: none;
  border: none;
  color: var(--text-2, var(--muted));
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: var(--text-sm);
  transition: background 0.1s, color 0.1s;
}
.npk__crumb-btn:hover {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}
.npk__crumb-btn--last {
  color: var(--text);
  font-weight: 600;
  background: rgba(var(--primary-rgb), 0.08);
}

.npk__filter {
  width: 240px;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.npk__filter::placeholder { color: var(--muted); }
.npk__filter:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.22);
  background: var(--surface-1, var(--panel));
}

/* ── Body ───────────────────────────────────────────────────────────── */
.npk__body {
  flex: 1;
  display: flex;
  min-height: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────────── */
.npk__sidebar {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 10px 8px;
  overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2, var(--bg)) 0%, var(--bg) 100%);
}
.npk__sidebar::-webkit-scrollbar { width: 6px; }
.npk__sidebar::-webkit-scrollbar-thumb { background: rgba(var(--text-rgb), 0.15); border-radius: 3px; }

.npk__sidebar-group { margin-bottom: 14px; }
.npk__sidebar-group:last-child { margin-bottom: 0; }
.npk__sidebar-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 12px 8px;
  text-transform: uppercase;
  letter-spacing: 0.85px;
}

.npk__shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  font-size: var(--text-sm);
  text-align: left;
  margin-bottom: 1px;
  transition: background 0.1s, color 0.1s;
  position: relative;
}
.npk__shortcut-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(var(--text-rgb), 0.04);
  transition: color 0.1s, background 0.1s;
}
.npk__shortcut-icon svg { width: 13px; height: 13px; }
.npk__shortcut:hover { background: rgba(var(--primary-rgb), 0.08); }
.npk__shortcut:hover .npk__shortcut-icon { color: var(--primary); background: rgba(var(--primary-rgb), 0.12); }

.npk__shortcut-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.npk__shortcut-sub {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 400;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npk__shortcut--active {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
  color: var(--primary);
  font-weight: 600;
}
.npk__shortcut--active .npk__shortcut-icon {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.18);
}
.npk__shortcut--active::before {
  content: '';
  position: absolute;
  left: -8px; top: 6px; bottom: 6px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

/* ── Main panel ─────────────────────────────────────────────────────── */
.npk__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
}

.npk__sortbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-1, var(--panel)) 0%, var(--panel) 100%);
  flex-shrink: 0;
}
.npk__sortbar-spacer { flex: 1; }
.npk__sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.1s, color 0.1s;
}
.npk__sort:hover { background: rgba(var(--primary-rgb), 0.08); color: var(--text); }
.npk__sort--active {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.13);
  box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), 0.18);
}

.npk__count {
  font-size: 11px;
  color: var(--muted);
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* ── List (virtualisee) ─────────────────────────────────────────────── */
.npk__list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  contain: strict; /* isole le repaint */
}
.npk__list::-webkit-scrollbar { width: 10px; }
.npk__list::-webkit-scrollbar-track { background: transparent; }
.npk__list::-webkit-scrollbar-thumb {
  background: rgba(var(--text-rgb), 0.18);
  border-radius: 5px;
  border: 2px solid var(--panel);
}
.npk__list::-webkit-scrollbar-thumb:hover { background: rgba(var(--text-rgb), 0.32); }

.npk__list-inner {
  width: 100%;
  position: relative;
  contain: strict;
}

.npk__empty,
.npk__loading,
.npk__error {
  padding: 48px 24px;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}
.npk__loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  border: 2px solid rgba(var(--primary-rgb), 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  vertical-align: middle;
  animation: npk-spin 0.6s linear infinite;
}
@keyframes npk-spin { to { transform: rotate(360deg); } }
.npk__error { color: var(--color-danger); }

/* Row positionne en transform (compositor friendly, evite reflow) */
.npk__item {
  position: absolute;
  left: 0; right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
  user-select: none;
  border-left: 2px solid transparent;
  box-sizing: border-box;
  contain: layout style;
  will-change: transform;
}
.npk__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background 0.08s;
}
.npk__item:hover::after { background: rgba(var(--primary-rgb), 0.07); }
.npk__item--selected {
  border-left-color: var(--primary);
  color: var(--text);
  font-weight: 500;
}
.npk__item--selected::after {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.22) 0%, rgba(var(--primary-rgb), 0.12) 100%);
}
.npk__item--selected:hover::after {
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.28) 0%, rgba(var(--primary-rgb), 0.16) 100%);
}
.npk__item--disabled {
  opacity: 0.32;
  cursor: default;
}
.npk__item--disabled:hover::after { background: transparent; }

.npk__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
  position: relative;
  z-index: 1;
}
.npk__icon--dir { color: var(--primary); }

.npk__name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}
.npk__meta {
  font-size: 11px;
  color: var(--muted);
  min-width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.npk__foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel) 0%, var(--surface-1, var(--panel)) 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.npk__status {
  flex: 1;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npk__btn {
  padding: 9px 20px;
  border-radius: 9px;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s, box-shadow 0.15s;
  white-space: nowrap;
}
.npk__btn:active:not(:disabled) { transform: translateY(0.5px); }
.npk__btn--ghost {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-weight: 500;
}
.npk__btn--ghost:hover {
  background: rgba(var(--text-rgb), 0.05);
  border-color: var(--text-2, var(--muted));
}
.npk__btn--primary {
  border: none;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-strong, var(--primary)) 100%);
  color: #0a1f1a;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 4px 12px rgba(var(--primary-rgb), 0.35);
}
.npk__btn--primary:hover:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 6px 18px rgba(var(--primary-rgb), 0.45);
  transform: translateY(-0.5px);
}
.npk__btn--primary:disabled {
  background: var(--muted);
  cursor: not-allowed;
  opacity: 0.4;
  box-shadow: none;
  color: var(--bg);
}


/* ── SearchForm — compact layout ─────────────────────────────────────────── */
.sf-search-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.sf-search-row .field { margin-bottom: 0; }

.dsp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.dsp-input-wrap input {
  flex: 1;
  padding: 14px var(--space-4);
  padding-right: 140px;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
}
.dsp-input-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
/* Garder le translateY(-50%) au clic pour eviter le saut */
.dsp-input-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.995);
}

/* ── Compact toolbar (replaces old details panel) ──────────────── */
.sf-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}

.sf-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sf-chip {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  user-select: none;
}
.sf-chip:hover {
  border-color: var(--primary);
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.05);
}
/* Tooltip custom instantane au hover */
.sf-chip[data-tooltip] {
  position: relative;
}
.sf-chip[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tooltip);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  white-space: normal;
  width: max-content;
  max-width: 260px;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  animation: sfTooltipIn 0.15s ease-out;
}
.sf-chip[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border);
  z-index: 101;
  pointer-events: none;
}
@keyframes sfTooltipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.sf-chip.is-active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-weight: 600;
}
.sf-chip:disabled {
  opacity: 0.4;
  pointer-events: none;
}
.sf-chip--icon {
  padding: 6px 8px;
}
.sf-chip svg { flex-shrink: 0; }
.sf-chip.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sf-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.sf-chip:active:not(:disabled) {
  transform: scale(0.995);
}
.sf-chip--semantic {
  border-color: var(--warning);
  color: var(--warning);
  gap: 3px;
}
.sf-chip--semantic.is-active {
  border-color: var(--warning);
  background: rgba(230, 168, 23, 0.15);
  color: var(--warning);
  font-weight: 600;
}
.sf-chip--semantic:hover:not(:disabled) {
  border-color: var(--warning);
  background: rgba(230, 168, 23, 0.08);
}
.sf-chip--semantic.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Source info badges */
.sf-source-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.sf-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}
.sf-source-badge--local {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.1);
  color: var(--primary);
}
.sf-source-badge--cloud {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}
.sf-cloud-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}
.sf-cloud-hint a {
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}
.sf-web-empty {
  text-align: center;
  padding: 24px;
  color: var(--muted);
}

.sf-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

.sf-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  white-space: nowrap;
}

.sf-stat {
  font-size: var(--text-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sf-stat strong {
  color: var(--primary);
  font-weight: 700;
}
.sf-stat__range {
  opacity: 0.7;
}
.sf-stat__hint {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 500;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.sf-stat__hint--warn {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}
.sf-stat__hint--low {
  color: #94a3b8;
  opacity: 0.8;
}

.sf-pager {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(var(--text-rgb), 0.03);
}
.sf-pager-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--transition-fast);
}
.sf-pager-btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
}
.sf-pager-btn:active:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.18);
}
.sf-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.sf-pager-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.sf-pager-btn + .sf-pager-btn {
  border-left: 1px solid var(--border);
}

.sf-select {
  padding: 6px 12px;
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: rgba(var(--text-rgb), 0.03);
  height: 34px;
}

/* ── Derived tokens hint ──────────────────────────────────────── */
.sf-derive-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: var(--space-3);
  padding: 10px 14px;
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.10);
  border-radius: var(--radius-md);
}
.sf-derive-hint::before {
  content: 'Mots dérivés';
  display: block;
  width: 100%;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  opacity: 0.7;
  margin-bottom: 2px;
  letter-spacing: 0.03em;
}
.sf-derive-group {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  color: var(--muted);
  padding: 4px 0;
}
.sf-derive-root {
  color: var(--text);
  font-weight: 700;
}
.sf-derive-arrow {
  opacity: 0.4;
  font-size: var(--text-xs);
}
.sf-derive-variant {
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ── Catalog dropdown (portal, fixed position) ───────────────── */
.sf-catalog {
  position: fixed;
  width: 240px;
  max-width: calc(100vw - 24px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  z-index: var(--z-modal, 200);
  overflow: hidden;
  animation: sf-catalog-in 0.12s ease;
}

@keyframes sf-catalog-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.sf-catalog__header {
  padding: 10px 12px 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
}

.sf-catalog__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 12px;
  transition: background var(--transition-fast);
  min-height: 32px;
}

.sf-catalog__item:hover {
  background: rgba(var(--text-rgb), 0.03);
}

.sf-catalog__label {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text);
}

.sf-catalog__toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 34px;
  height: 18px;
  border-radius: 9px;
  border: none;
  background: var(--border);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-base);
  flex-shrink: 0;
  padding: 0;
}

.sf-catalog__toggle.is-on {
  background: var(--primary);
}

.sf-catalog__toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--panel);
  transition: transform var(--transition-base);
  display: block;
}

.sf-catalog__toggle.is-on .sf-catalog__toggle-dot {
  transform: translateX(16px);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: var(--text);
  cursor: pointer;
  min-height: 36px;
}
.checkbox span {
  color: var(--text);
}

.filter-checkboxes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 6px;
}

.filters-stack {
  display: grid;
  gap: var(--space-3);
  margin-top: 6px;
}
.settings-separator {
  height: 1px;
  background: var(--border);
  margin: var(--space-1) 0;
}

/* ============================================
   SEARCH TABS - Onglets DocFinder
   ============================================ */

.search-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-5);
  background: var(--panel);
  border-radius: var(--radius-2);
  padding: 4px;
  border: 1px solid var(--border);
}

.search-tab {
  flex: 1;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-1);
  transition: all var(--transition-base) ease;
}

.search-tab:hover {
  color: var(--text);
  background: var(--pill);
}

.search-tab--active {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
}

.search-tab--active:hover {
  background: var(--primary);
  color: #fff;
}

/* ============================================
   IMAGE SEARCH - Recherche d'images IA
   ============================================ */

.image-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.image-search__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.image-search__header h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
}

.image-search__toolbar {
  display: block;
}

.image-search__empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.image-search__empty p {
  margin: 8px 0;
}

/* Filtres */
.image-filters {
  padding: var(--space-4);
}

.image-filters__row {
  margin-bottom: var(--space-4);
}

.image-filters__row:last-child {
  margin-bottom: 0;
}

.image-filters__row label {
  display: block;
  margin-bottom: var(--space-2);
  font-weight: 500;
  font-size: var(--text-sm);
}

.image-filters__score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.image-filters__score input[type="range"] {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  appearance: none;
}

.image-filters__score input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
}

.image-filters__score span {
  min-width: 40px;
  text-align: right;
  font-weight: 600;
  color: var(--primary);
}

/* Tags sélectionnables */
.image-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.image-tags--selectable .pill {
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.image-tags--selectable .pill:hover {
  background: var(--primary);
  color: #fff;
}

.image-tags--selectable .pill--active {
  background: var(--primary);
  color: #fff;
}

/* Galerie d'images */
.image-gallery {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.image-gallery__count {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.image-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* Carte image */
.image-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-base) ease;
}

.image-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.image-card:focus {
  outline: none;
  border-color: var(--primary);
}

.image-card__thumb {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--pill);
  overflow: hidden;
}

.image-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-card__score {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-1);
  font-size: var(--text-xs);
  font-weight: 600;
}

.image-card__info {
  padding: var(--space-3);
}

.image-card__name {
  margin: 0 0 4px 0;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-card__desc {
  margin: 0 0 8px 0;
  font-size: var(--text-xs);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.image-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.image-card__tags .pill.tiny {
  font-size: 10px;
  padding: 2px 6px;
}

/* Détails image */
.image-details {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .image-details {
    grid-template-columns: 1fr;
  }
}

.image-details__preview {
  background: var(--pill);
  border-radius: var(--radius-2);
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.image-details__preview img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  object-fit: none;
}

.image-details__info .card {
  padding: var(--space-5);
}

.image-details__info h3 {
  margin: 0 0 8px 0;
  font-size: var(--text-lg);
  word-break: break-all;
}

.image-details__section {
  margin: var(--space-5) 0;
}

.image-details__section strong {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

.image-details__section p {
  margin: 0;
  line-height: 1.5;
}

.image-details__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  background: var(--pill);
  border-radius: var(--radius-1);
  font-size: var(--text-sm);
}

.image-details__meta div {
  display: flex;
  gap: var(--space-2);
}

.image-details__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

@media (max-height: 740px) {
  .image-details {
    grid-template-columns: 1fr;
  }

  .image-details__preview {
    min-height: 240px;
    max-height: 45vh;
  }

  .image-details__preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .image-details__info .card {
    max-height: 45vh;
    overflow: auto;
  }
}

.image-score {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: var(--radius-1);
  font-weight: 600;
}

/* Panel indexation */
.image-index-panel {
  padding: var(--space-6);
}

.image-index-panel__section {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.image-index-panel__section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.image-index-panel__section h3 {
  margin: 0 0 8px 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.image-index-panel__actions {
  margin-top: var(--space-4);
}

/* Dossiers images */
.image-folders {
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.image-folder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--pill);
  border-radius: var(--radius-1);
}

.image-folder__path {
  flex: 1;
  font-size: var(--text-sm);
  word-break: break-all;
}

.image-folder__date {
  font-size: var(--text-xs);
}

/* Progression indexation */
.image-index-progress {
  margin: var(--space-4) 0;
}

.image-index-progress__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

/* Statistiques images */
.image-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.image-stat {
  text-align: center;
  padding: var(--space-4);
  background: var(--pill);
  border-radius: var(--radius-1);
}

.image-stat__value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.image-stat__label {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

/* ── DocFinder empty state — compact, max 240px height ────────────────── */
.docfinder-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  flex: 1;
  min-height: 0;
}

.docfinder-empty__icon {
  color: var(--muted);
  opacity: 0.18;
  margin-bottom: var(--space-1);
}

.docfinder-empty__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  opacity: 0.85;
}

.docfinder-empty__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0.65;
}

/* ── Compare Bar & Modal ──────────────────────────────────────────────── */
.compare-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 12px;
  margin: 8px 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 13px);
}
.compare-bar-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  color: var(--muted);
}
.compare-bar-info svg { opacity: 0.6; }

.search-result-row {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.search-result-row > .preview-card,
.search-result-row > div:last-child {
  flex: 1;
  min-width: 0;
}
.compare-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px 0 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.compare-checkbox input { display: none; }
.compare-checkbox svg {
  opacity: 0.5;
  transition: opacity 0.15s;
}
.compare-checkbox:hover svg,
.compare-checkbox.is-checked svg {
  opacity: 1;
}

/* Modal overlay */
.compare-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.compare-modal {
  background: var(--surface-1);
  border-radius: var(--radius-lg, 12px);
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.compare-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.compare-modal-header h2 {
  font-size: var(--text-lg, 18px);
  font-weight: 600;
  margin: 0;
}
.compare-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm, 4px);
  color: var(--muted);
  transition: background 0.15s;
}
.compare-modal-close:hover {
  background: var(--surface-2);
}

.compare-modal-docs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm, 13px);
}
.compare-doc-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.compare-doc-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-doc-page {
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  flex-shrink: 0;
}
.compare-vs {
  font-weight: 600;
  color: var(--muted);
  font-size: var(--text-xs, 11px);
  text-transform: uppercase;
  flex-shrink: 0;
}

.compare-modal-actions {
  padding: 32px 20px;
  text-align: center;
}
.compare-modal-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.compare-hint {
  margin-top: 12px;
  font-size: var(--text-xs, 11px);
  color: var(--muted);
}

.compare-loading {
  padding: 48px 20px;
  text-align: center;
  color: var(--muted);
}
.compare-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.compare-error {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-danger);
}
.compare-error .btn { margin-top: 12px; }

.compare-result {
  padding: 20px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  flex: 1;
  line-height: 1.6;
  font-size: var(--text-sm, 13px);
}
.compare-section-title {
  font-size: var(--text-base, 15px);
  font-weight: 600;
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.compare-section-title:first-child { margin-top: 0; }
.compare-subsection-title {
  font-size: var(--text-sm, 13px);
  font-weight: 600;
  margin: 12px 0 4px;
}
.compare-list-item {
  margin-left: 20px;
  margin-bottom: 4px;
  list-style: disc;
}
.compare-paragraph {
  margin: 4px 0;
}
.compare-spacer {
  height: 8px;
}

/* ── DocFinderSection extracted inline styles ─────────────────────────── */
/* ── DocFinder Categories Section ──────────────────────────────────────── */

/* Better spacing for DocFinderParamsPage cards */
[data-tutorial-id="settings-docfinder"] {
  padding: var(--space-6);
}

[data-tutorial-id="settings-docfinder"] > h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

[data-tutorial-id="settings-indexation"] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.docfinder-hint {
  margin-top: var(--space-1);
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

.docfinder-add-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.docfinder-add-row input[type="text"] {
  flex: 1;
}

.docfinder-add-row .ghost,
.docfinder-cat-row .ghost,
.docfinder-add-row button,
.docfinder-cat-row button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  white-space: nowrap;
  padding: 8px 16px;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.docfinder-add-row .ghost:hover,
.docfinder-cat-row .ghost:hover,
.docfinder-add-row button:hover,
.docfinder-cat-row button:hover {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.docfinder-cat-field {
  margin-top: 0;
  padding: var(--space-5);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast);
}

.docfinder-cat-field:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
}

.docfinder-cat-field > label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.docfinder-cat-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.docfinder-cat-row input[type="text"] {
  flex: 1;
  font-weight: 600;
  font-size: var(--text-base);
}

.docfinder-role-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}

.docfinder-role-select {
  flex: 0 0 auto;
  min-width: 220px;
}

.docfinder-folder-path {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  font-size: 11px;
  padding: 4px 10px;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  border: 1px solid transparent;
}
.docfinder-index-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.docfinder-index-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.docfinder-index-status--ok {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.1);
}
.docfinder-index-status--ok::before {
  background: var(--color-success);
}
.docfinder-index-status--empty {
  color: #d97706;
  background: rgba(245, 158, 11, 0.1);
}
.docfinder-index-status--empty::before {
  background: #f59e0b;
}

/* Space between category cards */
[data-tutorial-id="settings-docfinder"] > .field.docfinder-cat-field + .field.docfinder-cat-field {
  margin-top: 0;
}

/* Empty state styling */
[data-tutorial-id="settings-docfinder"] > .muted.tiny:not(.docfinder-hint) {
  padding: var(--space-5);
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  line-height: var(--leading-relaxed);
}

/* Add category section spacing */
[data-tutorial-id="settings-docfinder"] > .field:first-of-type {
  margin-bottom: var(--space-5);
}

/* ── Cloud Documents Section (inside DocFinder category cards) ─────────── */
.cloud-docs-section {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: rgba(var(--bg-rgb), 0.5);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.cloud-docs-section--dragover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}

.cloud-docs-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cloud-docs-section__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(var(--text-rgb), 0.6);
  flex: 1;
}

.cloud-docs-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
}

.cloud-docs-section__upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cloud-docs-section__upload-btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.14);
  border-color: rgba(var(--primary-rgb), 0.35);
}

.cloud-docs-section__upload-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cloud-docs-section__spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--primary-rgb), 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.cloud-doc-progress {
  height: 3px;
  background: rgba(var(--primary-rgb), 0.1);
  border-radius: 2px;
  margin: var(--space-2) 0;
  overflow: hidden;
}

.cloud-doc-progress__bar {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.cloud-docs-section__empty {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.35);
  text-align: center;
  padding: var(--space-2) 0;
}

.cloud-docs-section__list {
  max-height: 160px;
  overflow-y: auto;
  border-top: 1px solid rgba(var(--text-rgb), 0.05);
  margin-top: var(--space-2);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ── PDF Viewer — scrollable ─────────────────────────────────── */
.pdf-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--sidebar-width, 240px);
  background: var(--bg);
  z-index: 55;
  display: flex;
  flex-direction: column;
}

/* Toolbar */
.pv-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 52px;
  z-index: 2;
}
.pv-toolbar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.pv-toolbar__center {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.pv-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.pv-filename {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  display: block;
}
.pv-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius);
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
}
.pv-btn:hover {
  background: rgba(var(--primary-rgb, 99, 102, 241), 0.12);
  color: var(--primary);
}
.pv-btn--close {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
  border-radius: 50%;
}
.pv-btn--close:hover {
  background: rgba(239, 68, 68, 0.25);
}
.pv-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pv-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.pv-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}
.pv-page-info {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}
.pv-page-input {
  width: 38px;
  padding: 2px 4px;
  text-align: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
}
.pv-page-input:focus {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  outline: none;
}
.pv-page-total {
  color: var(--muted);
  font-size: 0.8rem;
}
.pv-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pv-zoom-group .pv-btn {
  width: 28px;
  height: 26px;
  border-radius: 0;
}
.pv-zoom-group .pv-btn:hover {
  background: rgba(var(--text-rgb), 0.08);
}
.pv-zoom-label {
  font-size: 0.73rem;
  color: var(--muted);
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 4px;
  line-height: 26px;
}

/* Scrollable body */
/* ── PDF Bookmarks panel ─────────────────────────── */
.pv-bookmarks-panel {
  position: absolute;
  top: 48px;
  right: 8px;
  width: 280px;
  max-height: 420px;
  background: var(--surface, var(--bg));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pv-bookmarks-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.pv-bookmarks-panel__list {
  overflow-y: auto;
  flex: 1;
  padding: 6px;
}
.pv-bookmarks-panel__empty {
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 20px 12px;
}
.pv-bookmarks-panel__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast);
}
.pv-bookmarks-panel__item:hover {
  background: var(--hover);
}
.pv-bookmarks-panel__item--active {
  background: rgba(var(--primary-rgb, 99,102,241), 0.12);
}
.pv-bookmarks-panel__item-name {
  font-size: 0.8rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 20px;
}
.pv-bookmarks-panel__item-snippet {
  font-size: 0.72rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-bookmarks-panel__item-remove {
  position: absolute;
  top: 8px;
  right: 6px;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.pv-bookmarks-panel__item:hover .pv-bookmarks-panel__item-remove {
  opacity: 1;
}
.pv-bookmarks-panel__item-remove:hover {
  color: var(--color-danger);
}

/* ── Summary panel (Resume IA) ──────────────────────────────────────── */
.pv-summary-panel {
  position: absolute;
  top: 54px;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--bg-main);
  border-left: 1px solid rgba(var(--text-rgb), 0.1);
  z-index: 12;
  display: flex;
  flex-direction: column;
  animation: pv-summary-slide 0.25s ease;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
@keyframes pv-summary-slide {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.pv-summary-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.08);
  flex-shrink: 0;
}
.pv-summary-panel__body {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.pv-summary-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.pv-summary-panel__error {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.pv-summary-panel__text {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.pv-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  background: rgba(0, 0, 0, 0.35);
  -webkit-overflow-scrolling: touch;
  contain: layout style;
}
.pv-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  min-height: 100%;
  transform: translateZ(0); /* Force GPU compositing layer */
}
.pv-page {
  flex-shrink: 0;
  content-visibility: auto;
  contain-intrinsic-size: 595px 842px;
}
.pv-page__img {
  display: block;
  max-width: 100%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  image-rendering: auto;
}
.pv-page__placeholder {
  width: 595px;
  height: 842px;
  max-width: 90vw;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px dashed rgba(var(--text-rgb), 0.08);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv-page__num {
  font-size: 1.5rem;
  color: rgba(var(--text-rgb), 0.12);
  font-weight: 700;
}

/* Spinner */
.pv-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(var(--text-rgb), 0.1);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: pv-spin 0.75s linear infinite;
}
@keyframes pv-spin {
  to { transform: rotate(360deg); }
}

/* ── Search bar (Ctrl+F) ──────────────────────────────────────────────── */
.pv-btn--active {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
}
.pv-btn--active:hover {
  background: rgba(var(--primary-rgb), 0.28);
}

.pv-search-bar {
  position: absolute;
  top: 54px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pv-search-bar--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.pv-search-bar__inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(var(--panel-rgb, 30, 35, 50), 0.88);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.06);
  min-width: 320px;
  max-width: 480px;
}
.pv-search-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
  margin-left: 2px;
}
.pv-search-bar__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  padding: 4px 2px;
  min-width: 0;
}
.pv-search-bar__input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.pv-search-bar__count {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 2px 8px;
  background: rgba(var(--text-rgb), 0.06);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.pv-search-bar__loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(var(--text-rgb), 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: pv-spin 0.75s linear infinite;
  vertical-align: middle;
}
.pv-search-bar__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.pv-search-bar__nav-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition-fast);
  padding: 0;
}
.pv-search-bar__nav-btn:hover:not(:disabled) {
  background: rgba(var(--text-rgb), 0.1);
}
.pv-search-bar__nav-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.pv-search-bar__close {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  padding: 0;
  flex-shrink: 0;
  margin-left: 2px;
}
.pv-search-bar__close:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

@media (max-width: 700px) {
  .pv-toolbar { padding: 6px 8px; gap: 6px; }
  .pv-filename { max-width: 120px; }
  .pv-page__placeholder { width: 100%; height: 60vh; }
  .pv-search-bar__inner { min-width: 260px; max-width: 90vw; }
}

.owl-edge-toggle {
  position: fixed;
  right: 6px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 34px;
  height: 70px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  background: rgba(12, 18, 30, 0.7);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  display: grid;
  place-items: center;
  z-index: 200;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.owl-edge-toggle__chevron {
  font-size: var(--text-lg);
  color: rgba(var(--text-rgb), 0.8);
  transform: none;
  transition: color var(--transition-base) ease;
}

.owl-edge-toggle:hover .owl-edge-toggle__chevron {
  color: #fff;
}

.owl-edge-toggle__tooltip {
  position: absolute;
  right: 120%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 6px var(--space-2);
  border-radius: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--transition-base) ease,
    transform var(--transition-base) ease;
}

.owl-edge-toggle:hover .owl-edge-toggle__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

.owl-chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 12, 16, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 200);
  padding: var(--space-5);
  opacity: 1;
  transition: opacity var(--transition-base) ease;
}

.owl-chat-overlay.is-docked {
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.owl-chat-overlay[data-state="closing"] {
  opacity: 0;
}

.owl-chat-modal {
  width: 75vw;
  height: 75vh;
  max-width: 1200px;
  max-height: 900px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.owl-chat-modal--docked {
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  border-left: 1px solid var(--border);
  pointer-events: auto;
}

.owl-chat-overlay.is-docked .owl-chat-modal {
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--transition-base) ease;
}

.owl-chat-overlay.is-docked[data-state="open"] .owl-chat-modal {
  transform: translateX(0);
  opacity: 1;
}

.owl-chat-overlay.is-docked[data-state="closing"] .owl-chat-modal {
  transform: translateX(100%);
  opacity: 0;
}

.owl-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(var(--text-rgb), 0.04), transparent);
}

.owl-chat-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.owl-chat-toggle {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
}

.owl-toggle-icon {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  border: 1px solid var(--border);
  position: relative;
}

.owl-toggle-icon.is-window {
  background: linear-gradient(135deg, rgba(var(--text-rgb), 0.08), transparent);
}

.owl-toggle-icon.is-window::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  right: 2px;
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--text-rgb), 0.3);
}

.owl-toggle-icon.is-dock {
  background: rgba(var(--text-rgb), 0.08);
}

.owl-toggle-icon.is-dock::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 4px;
  border-radius: 2px;
  background: rgba(var(--primary-2-rgb), 0.6);
}

.owl-chat-resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  background: transparent;
}

.owl-chat-modal--docked .owl-chat-resize::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(var(--text-rgb), 0.08);
}

.owl-chat-title {
  font-weight: 700;
  font-size: var(--text-md);
}

.owl-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owl-chat-msg {
  display: flex;
}

.owl-chat-msg.user {
  justify-content: flex-end;
}

.owl-chat-msg.assistant {
  justify-content: flex-start;
}

.owl-chat-bubble {
  max-width: 70%;
  padding: 10px var(--space-3);
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: var(--text-base);
  line-height: 1.45;
  white-space: pre-wrap;
}

.owl-chat-msg.user .owl-chat-bubble {
  background: rgba(0, 140, 255, 0.12);
  border-color: rgba(0, 140, 255, 0.35);
}

.owl-chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--text-rgb), 0.2);
  margin-right: var(--space-2);
  flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.owl-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.owl-chat-bubble--typing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.12);
}

.owl-typing {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.owl-typing__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text);
  opacity: 0.35;
  animation: owl-typing-bounce 1s infinite ease-in-out;
}

.owl-typing__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.owl-typing__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes owl-typing-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-6px);
    opacity: 0.85;
  }
}

.owl-chat-empty {
  color: var(--muted);
  font-size: var(--text-sm);
}

.owl-chat-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.owl-chat-footer textarea {
  width: 100%;
  resize: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  padding: 10px var(--space-3);
  font-size: var(--text-base);
}

.owl-chat-error {
  padding: var(--space-2) var(--space-4) 14px;
  color: var(--danger);
  font-size: var(--text-sm);
}

.owl-chat-inline {
  width: 100%;
}

.owl-chat-inline .owl-chat-modal {
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  box-shadow: none;
}

.owl-chat-inline .owl-chat-body {
  max-height: 340px;
}

.owl-chat-inline .owl-chat-modal--docked {
  height: auto;
  border-radius: 16px;
}

.owl-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.owl-nav img {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

@media (max-width: 960px) {
  .owl-chat-modal {
    width: 92vw;
    height: 82vh;
  }

  .owl-chat-modal--docked {
    width: 100vw;
    max-width: 100vw;
  }
}

.launcher-tutorial {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}

.launcher-tutorial__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.6);
  pointer-events: auto;
}

.launcher-tutorial__spot {
  position: fixed;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(6, 8, 12, 0.65);
  border: 2px solid rgba(var(--primary-2-rgb), 0.9);
  transition: all var(--transition-slow) ease;
  pointer-events: none;
}

.launcher-tutorial__owl {
  position: fixed;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-slow) ease;
  pointer-events: none;
}

.launcher-tutorial__owl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.launcher-tutorial__card {
  position: fixed;
  width: 320px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-3) 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

.launcher-tutorial__title {
  font-weight: 700;
  margin-bottom: 6px;
}

.launcher-tutorial__body {
  color: var(--text);
  font-size: var(--text-sm);
  line-height: 1.4;
  margin-bottom: 10px;
}

.launcher-tutorial__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

@media (max-width: 1023px) {
  /* App shell : sidebar devient drawer (géré par MobileDrawer.css) */
  .app-shell {
    grid-template-columns: 1fr !important;
    height: 100vh;
    overflow: hidden;
  }

  /* Reset propriétés desktop de la sidebar — le positionnement fixe est géré par .md-sidebar */
  .app-shell > .sidebar {
    width: 280px;
    padding: 38px 18px 22px;
    gap: 6px;
  }

  .app-shell > .sidebar .brand-upload {
    display: none;
  }

  /* Contenu : espace pour le hamburger fixe (top:10px h:38px → zone 10-48px)
     padding-top: 56px = seuil sûr au-dessus du hamburger */
  .content {
    padding-top: 56px !important;
    height: 100vh;
    overflow-y: auto;
  }

  /* Page header : padding-left pour éviter overlap avec hamburger lors du scroll */
  .page-header {
    padding-left: 56px !important;
  }

  /* Progress bar : pleine largeur */
  .top-progress {
    left: 0 !important;
  }

  .pdf-viewer {
    left: 0;
  }
}

.launcher,
.account-shell {
  min-height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 32px clamp(32px, 6vw, 72px);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.launcher {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.account-shell {
  --launcher-card-bg: rgba(var(--panel-rgb), 0.85);
}

.launcher-bg,
.account-bg {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
  pointer-events: none;
}

.account-bg {
  pointer-events: auto;
  cursor: pointer;
}


/* ── Settings page ──────────────────────────────────────────────────── */
.settings-page {
  width: 100%;
}

.settings-page__header {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(var(--text-rgb, 232, 237, 244), 0.06);
}

.settings-page__header h1 {
  margin: 0 0 var(--space-2);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}

.settings-page__header p {
  margin: 0;
  color: var(--text-2);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.settings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.settings-card--half {
  min-width: 0;
}

.index-action {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 220px;
  align-items: flex-end;
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* DocFinder page: everything fits in viewport, results scroll internally */

[data-tutorial-id="docfinder-results"] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Only lift on hover for clickable cards */
.card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(var(--primary-rgb), 0.25);
}

.card h2,
.card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card h2::before,
.card h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.35);
  flex-shrink: 0;
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0 0 var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.field input,
.field-row input {
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: var(--text-base);
  width: 100%;
  background: var(--panel);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field input:focus,
.field-row input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.field input::placeholder,
.field-row input::placeholder {
  color: var(--text-2);
  opacity: 0.6;
}

.field textarea {
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: var(--text-base);
  width: 100%;
  background: var(--panel);
  color: var(--text);
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

input[type="number"] {
  appearance: textfield;
  -webkit-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 0.85;
  margin: 0;
  width: 18px;
  height: 24px;
  background: var(--panel);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  filter: invert(1);
}

.date-picker {
  position: relative;
  width: 100%;
}

.date-picker__input {
  width: 100%;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: linear-gradient(140deg, rgba(var(--text-rgb), 0.04), transparent);
  color: var(--text);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
}

.date-picker__input.is-empty {
  color: var(--muted);
}

.date-picker__icon {
  opacity: 0.8;
}

.date-picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: 280px;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 10px 25px var(--shadow);
}

.date-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.date-picker__month {
  font-weight: 600;
  text-transform: capitalize;
}

.date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 6px;
}

.date-picker__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.date-picker__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-1);
}

.date-picker__day {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: var(--text-xs);
  padding: 6px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base) ease;
}

.date-picker__day.is-muted {
  color: var(--muted);
}

.date-picker__day:hover {
  background: rgba(59, 130, 246, 0.15);
}

.date-picker__day.is-selected {
  background: var(--primary);
  color: #fff;
}

.checkbox input[type="checkbox"] {
  accent-color: var(--primary);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: var(--space-2);
}

/* ---- Settings section groups ---- */
/* ── Settings section groups ──────────────────────────────────────────── */
.settings-section-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--panel);
  box-shadow: var(--shadow-xs);
}

.settings-section-group--use {
  border-color: var(--primary);
  border-style: dashed;
  background: rgba(var(--primary-rgb), 0.03);
}

.settings-section-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}

.settings-section-group__icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.settings-section-group__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}

.settings-section-group__sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 2px;
}
.filter-checkbox {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
  min-height: 36px;
}

/* Filter section titles */
.filter-section-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-label-small {
  font-size: 0.78rem;
  color: var(--muted);
}
.filter-info-text {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 6px;
  border: 1px solid rgba(99, 102, 241, 0.12);
  line-height: 1.4;
}
.filter-pattern-add {
  font-size: 0.75rem !important;
  padding: 2px 10px !important;
}
.filter-pattern-row {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: rgba(var(--text-rgb), 0.02);
}
.filter-pattern-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.filter-pattern-select {
  flex: 1;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
}
.filter-pattern-delete {
  color: var(--color-danger) !important;
  font-size: 1.1rem !important;
  padding: 2px 8px !important;
  min-width: auto !important;
}
.filter-pattern-row__fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.filter-pattern-row__fields .field {
  margin: 0;
}
.filter-pattern-row__fields input {
  font-size: 0.8rem;
  padding: 5px 8px;
}


/* ── Launcher header ── */
.launcher-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-9);
  color: var(--launcher-text);
}
.launcher-brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.launcher-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: var(--space-2);
  box-shadow: var(--shadow-sm);
}
.launcher-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.launcher-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
  line-height: 1.2;
}
.launcher-subtitle {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.launcher-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Launcher buttons ── */
.launcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.launcher-btn--ghost {
  height: 42px;
  padding: 0 18px;
  background: var(--surface-1);
  color: var(--text-2);
  font-size: 0.85rem;
}
.launcher-btn--ghost:hover {
  background: var(--surface-3);
  color: var(--text-1);
  border-color: var(--primary);
}
.launcher-btn--icon {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--surface-1);
  color: var(--text-2);
}
.launcher-btn--icon:hover {
  background: var(--surface-3);
  color: var(--primary);
  border-color: var(--primary);
}

/* ── Error banner ── */
.launcher-error {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 560px;
  margin: 0 auto 20px;
  padding: 10px var(--space-4);
  border-radius: var(--radius-2);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--text-1);
  font-size: 0.82rem;
}
.launcher-error__close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: var(--space-1);
  line-height: 0;
}
.launcher-error__close:hover {
  color: var(--text-1);
}

.module-catalog__search {
  margin: clamp(0.6rem, 2.2vh, 1.6rem) auto clamp(0.8rem, 3vh, 1.8rem);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  background: linear-gradient(
    120deg,
    rgba(20, 28, 38, 0.9),
    rgba(16, 32, 52, 0.8)
  );
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.28);
  max-width: 92vw;
  width: min(92vw, 70rem);
  padding: clamp(0.3rem, 1.2vh, 0.7rem);
}

.module-catalog__search-row {
  display: flex;
  gap: clamp(0.6rem, 1.6vw, 1.2rem);
  align-items: center;
}

.module-catalog__search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: clamp(0.4rem, 1.1vh, 0.7rem) clamp(0.9rem, 2.2vw, 1.4rem);
  border-radius: clamp(0.7rem, 1.4vw, 1.1rem);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: rgba(10, 18, 26, 0.7);
  color: var(--text);
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
}

.module-catalog__search-input::placeholder {
  color: rgba(232, 237, 244, 0.6);
}

.module-catalog__search-btn {
  height: clamp(2.1rem, 4vh, 2.8rem);
  padding: 0 clamp(0.9rem, 2.2vw, 1.6rem);
  border-radius: clamp(0.7rem, 1.4vw, 1.1rem);
  border: 1px solid rgba(var(--primary-2-rgb), 0.7);
  background: rgba(59, 130, 246, 0.15);
  color: #b7d3ff;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.module-catalog__search-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.module-catalog__search-note {
  margin-top: clamp(0.35rem, 1vh, 0.7rem);
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  color: var(--muted);
}

.module-catalog {
  padding-bottom: clamp(16px, 3vh, 28px);
}

.module-catalog__topbar {
  position: absolute;
  top: clamp(0.8rem, 2vh, 1.4rem);
  left: clamp(0.8rem, 2vw, 1.4rem);
  z-index: 3;
  padding: 0;
  display: flex;
  justify-content: flex-start;
}

.module-catalog__hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(0.5rem, 1.6vh, 0.9rem);
  padding: clamp(1rem, 3.5vh, 1.8rem) clamp(1rem, 3vw, 1.8rem)
    clamp(0.5rem, 2vh, 0.9rem);
  max-width: 70rem;
  margin: 0 auto;
  text-align: center;
}

.module-catalog__hero-left h1 {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.module-catalog__eyebrow {
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.module-catalog__stats {
  margin-top: clamp(0.35rem, 1.4vh, 0.6rem);
  display: flex;
  gap: clamp(0.6rem, 1.6vw, 1rem);
  justify-content: center;
  font-size: clamp(0.7rem, 0.9vw, 0.85rem);
  color: var(--muted);
}

.module-catalog__hero-right {
  justify-self: center;
}

.module-catalog__back--top {
  justify-self: start;
  margin-bottom: clamp(0.25rem, 1vh, 0.5rem);
}

.module-catalog__back {
  height: clamp(2.2rem, 4.4vh, 2.8rem);
  padding: 0 clamp(1rem, 2.2vw, 1.4rem);
  border-radius: clamp(0.9rem, 1.8vw, 1.3rem);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: rgba(10, 18, 26, 0.7);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition:
    transform var(--transition-base) ease,
    box-shadow var(--transition-base) ease,
    border-color var(--transition-base) ease;
}

.module-catalog__back:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--primary-2-rgb), 0.9);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.18);
}

/* PR3 — filtres métier */
.module-catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 82vw;
  margin: 0 auto 1.2rem;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.module-catalog__filter-chip {
  padding: 0.35rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.module-catalog__filter-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.module-catalog__filter-chip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* ── Pricing cards (nouveau modèle par logiciel) ─────────────────────────── */
.module-catalog__grid-wrap {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.module-catalog__connections {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

.module-catalog__pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  z-index: 1;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.module-catalog__pricing-card.is-subscribed {
  border-color: rgba(123, 231, 207, 0.4);
  box-shadow: 0 0 0 1px rgba(123, 231, 207, 0.15);
}
.module-catalog__pricing-card.is-disabled {
  opacity: 0.55;
}

.module-catalog__pricing-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.module-catalog__pricing-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.module-catalog__pricing-title {
  font-weight: 600;
  font-size: 1rem;
}

.module-catalog__pricing-sub {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.module-catalog__status-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.module-catalog__status-badge--active {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}
.module-catalog__status-badge--inactive {
  background: rgba(156, 163, 175, 0.12);
  color: var(--text-secondary);
}

.module-catalog__price {
  margin: 4px 0;
}
.module-catalog__price-amount {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.module-catalog__price-period {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.module-catalog__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.module-catalog__check {
  color: #4ade80;
  margin-right: 6px;
  font-weight: 700;
}

.module-catalog__card-actions {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.module-catalog__launcher-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
}
.module-catalog__launcher-toggle input {
  accent-color: var(--primary);
}

.module-catalog__checkout-btn {
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.module-catalog__checkout-btn:hover {
  background: var(--primary);
  color: #fff;
}
.module-catalog__checkout-btn.is-selected {
  background: var(--primary);
  color: #fff;
}

/* Footer sticky */
.module-catalog__footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px var(--space-6);
  background: rgba(15, 20, 30, 0.92);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.module-catalog__footer-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.module-catalog__footer-summary strong {
  font-size: 1.1rem;
  color: var(--text-primary);
}
.module-catalog__footer-error {
  font-size: 0.78rem;
  color: #f87171;
  flex: 1;
}
.module-catalog__footer-cta {
  flex-shrink: 0;
}

.module-catalog__portal-btn {
  margin-left: auto;
}

.module-catalog__disabled-msg {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
}

@media (max-width: 600px) {
  .module-catalog__connections {
    display: none;
  }
  .module-catalog__footer-bar {
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
  }
}

/* PR3 — capability badges */
.module-catalog__capability {
  display: inline-block;
  justify-self: start;
  font-size: 0.72rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.6rem;
  width: fit-content;
}
.module-catalog__capability--both {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}
.module-catalog__capability--web {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-info);
}
.module-catalog__capability--desktop {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}
.module-catalog__capability--disabled {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
}

.module-catalog__card.is-active {
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.12), 0 4px 16px rgba(var(--primary-rgb), 0.08);
}

/* PR3 — disabled card state */
.module-catalog__card.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.module-catalog__card.is-disabled .module-catalog__card-title {
  color: var(--text-secondary);
}
.module-catalog__disabled-msg {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.module-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.8rem, 2vw, 1.3rem);
  max-width: 82vw;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.module-catalog__card {
  display: grid;
  gap: clamp(0.35rem, 1.2vh, 0.6rem);
  padding: clamp(0.9rem, 2.4vh, 1.4rem);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  border-radius: clamp(1.2rem, 3vw, 2.4rem);
  background: rgba(12, 18, 28, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
  position: relative;
}


.module-catalog__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 0.9rem);
}

.module-catalog__badge {
  font-size: clamp(0.6rem, 0.7vw, 0.75rem);
  padding: clamp(0.2rem, 0.8vh, 0.4rem) clamp(0.4rem, 1vw, 0.7rem);
  border-radius: clamp(0.5rem, 1.2vw, 0.8rem);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(10, 18, 26, 0.6);
}

.module-catalog__badge.is-on {
  color: #7be7cf;
  border-color: rgba(123, 231, 207, 0.5);
  background: rgba(20, 46, 40, 0.5);
}

@media (max-width: 56.25em) {
  .module-catalog__hero,
  .module-catalog__grid {
    padding-left: clamp(0.8rem, 3vw, 1.2rem);
    padding-right: clamp(0.8rem, 3vw, 1.2rem);
  }
  .module-catalog__hero {
    grid-template-columns: 1fr;
    gap: clamp(0.5rem, 1.6vh, 0.9rem);
  }
  .module-catalog__back {
    justify-self: start;
  }
  .module-catalog__search {
    max-width: 100%;
    margin-left: clamp(0.8rem, 3vw, 1.2rem);
    margin-right: clamp(0.8rem, 3vw, 1.2rem);
  }
  .module-catalog__search-row {
    grid-template-columns: 1fr;
  }
}

/* ── Node Graph Module Layout ────────────────────────────────────────────── */
/* ── Node graph / Module cards ── */
.node-graph {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  margin: 0 auto;
  padding: 0 0 28px;
}
.launcher > .node-graph {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Bento grid layout ── */
.bento-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  width: 100%;
}
.bento-grid__main {
  display: flex;
}
.bento-grid__main .node-card {
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-7) 28px;
  min-height: 240px;
}
.bento-grid__main .node-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
}
.bento-grid__main .node-card__title {
  font-size: 1.3rem;
  font-weight: 700;
}
.bento-grid__main .node-card__subtitle {
  font-size: 0.9rem;
}
.bento-grid__main .node-card__badge {
  position: absolute;
  top: 28px;
  right: 24px;
}

.bento-grid__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bento-grid__side .node-card {
  flex: 1;
}

@media (max-width: 700px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-grid__main .node-card {
    min-height: auto;
  }
}

.node-graph__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.node-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 22px var(--space-6);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-1);
  cursor: pointer;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
  text-align: left;
  font-family: inherit;
}

.node-card:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
  transform: translateY(-2px);
}

.node-card--primary {
  border-color: rgba(var(--primary-rgb), 0.25);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), var(--surface-1));
}

.node-card--primary:hover {
  box-shadow: 0 12px 32px rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.node-card--locked {
  cursor: pointer;
  opacity: 0.5;
}
.node-card--locked:hover {
  opacity: 0.7;
  transform: translateY(-1px);
}

.node-card--disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.node-card--disabled:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}

.node-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  transition: background var(--transition-base), transform var(--transition-base);
}

.node-card:hover .node-card__icon {
  background: rgba(var(--primary-rgb), 0.14);
  transform: scale(1.05);
}

.node-card--primary .node-card__icon {
  width: 52px;
  height: 52px;
  background: rgba(var(--primary-rgb), 0.1);
}

.node-card__icon--locked {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--muted);
}

.node-card__body {
  flex: 1;
  min-width: 0;
}

.node-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 3px;
  letter-spacing: -0.01em;
}

.node-card--primary .node-card__title {
  font-size: 1.12rem;
  font-weight: 700;
}

.node-card__subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Feature chips (primary card) ── */
.node-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.node-card__feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 6px var(--space-3);
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  letter-spacing: 0;
}

/* ── Connection tags ── */
.node-card__connections {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: 6px;
}
.node-card__conn-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.64rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  background: rgba(var(--text-rgb), 0.04);
  color: var(--muted);
}
.node-card__conn-tag--active {
  background: color-mix(in srgb, var(--conn-color, var(--color-success)) 10%, transparent);
  color: var(--conn-color, var(--color-success));
}
.node-card__conn-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.node-card__badge {
  flex-shrink: 0;
  padding: var(--space-1) 10px;
  border-radius: var(--radius-sm);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.node-card__badge--active {
  color: var(--primary);
  display: flex;
  align-items: center;
}

.node-card__badge--locked {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.node-card__badge--disabled {
  background: rgba(100, 116, 139, 0.08);
  color: #64748b;
  border: 1px solid rgba(100, 116, 139, 0.12);
}

.node-graph__warning {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-4);
  border-radius: var(--radius-2);
  background: var(--surface-1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: var(--shadow-md);
  font-size: 0.8rem;
  color: var(--text-2);
  max-width: 500px;
}

@media (max-width: 700px) {
  .node-graph__cards {
    grid-template-columns: 1fr;
  }
  .node-card--primary {
    grid-column: auto;
  }
}

/* Keep old class names for backwards compat with tutorial selectors */
.launcher-columns { display: none; }
.launcher-empty-grid { display: none; }

/* ── Add-module row ── */
.launcher-add-row {
  display: flex;
  width: min(960px, 100%);
  margin: 14px auto 0;
  position: relative;
  z-index: 2;
}
.launcher-add-row .node-card--add {
  width: 100%;
}

.node-card--add {
  border: 1px dashed rgba(var(--primary-rgb), 0.25);
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}
.node-card--add:hover {
  opacity: 1;
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: none;
}
.node-card__icon--add {
  background: rgba(var(--primary-rgb), 0.06) !important;
  color: var(--primary);
}

/* --- Module catalog overrides removed --- */

.launcher-card {
  border-radius: 18px;
  border: 1px solid var(--launcher-card-border);
  padding: 22px;
  background: var(--launcher-card-bg);
  color: var(--launcher-text);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
  text-align: left;
  min-height: 180px;
  width: 100%;
  transition:
    transform var(--transition-base) ease,
    border-color var(--transition-base) ease,
    box-shadow var(--transition-base) ease;
}

.launcher-card--active {
  border-color: rgba(var(--primary-2-rgb), 0.6);
  background: var(--launcher-card-bg);
  cursor: pointer;
  transition:
    transform var(--transition-base) ease,
    border-color var(--transition-base) ease;
}

.launcher-card--center {
  width: 320px;
  text-align: center;
  display: grid;
  align-content: center;
  gap: var(--space-2);
}

.launcher-card--active:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--primary-rgb), 0.9);
}

.launcher-card--empty {
  border: 1px dashed rgba(var(--primary-rgb), 0.45);
  background: var(--launcher-empty-bg);
  color: var(--launcher-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.launcher-card--empty:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(var(--primary-2-rgb), 0.9);
  box-shadow: 0 18px 38px rgba(59, 130, 246, 0.18);
}
.launcher-card--empty:hover .launcher-card__plus {
  border-color: rgba(var(--primary-2-rgb), 1);
  color: #93c5fd;
  transform: scale(1.05);
}
.launcher-card--locked {
  border: 1px solid var(--launcher-card-border);
  background: var(--launcher-card-bg);
  color: var(--launcher-muted);
  opacity: 1;
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.launcher-card--locked .launcher-card__lock {
  font-size: 24px;
  margin-bottom: 2px;
  color: var(--launcher-muted);
}
.launcher-card--locked .launcher-card__title {
  font-size: var(--text-sm);
  color: var(--launcher-text);
}
.launcher-card--locked .launcher-card__meta {
  font-size: var(--text-xs);
  color: var(--launcher-muted);
}
.launcher-card__plus {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px dashed rgba(59, 130, 246, 0.8);
  color: var(--primary-2);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 700;
  transition:
    transform var(--transition-base) ease,
    color var(--transition-base) ease,
    border-color var(--transition-base) ease;
}

@media (max-width: 980px) {
  .launcher-columns {
    grid-template-columns: 1fr;
  }
  .launcher-empty-grid {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    grid-template-rows: none;
    justify-self: stretch;
  }
  .launcher-card--center {
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .launcher-empty-grid {
    grid-template-columns: 1fr;
  }
  .launcher-card--center {
    width: 100%;
  }
}

.launcher-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
  width: 100%;
}
.launcher-card__title-letter {
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
}

.launcher-card__meta {
  font-size: var(--text-sm);
  color: var(--launcher-muted);
  text-align: center;
  width: 100%;
}

.launcher-card__footer {
  margin-top: 26px;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-strong);
  text-align: center;
  width: 100%;
}

.account-shell {
  color: var(--text);
}

/* ---- Account Page Layout ---- */
.account-page {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition:
    max-width 0.35s ease,
    padding 0.35s ease,
    margin 0.35s ease;
}

/* Wide mode for partenaires / cloud files tabs */
.account-page--wide {
  max-width: 100%;
  padding-bottom: var(--space-4);
}

.cfiles-container {
  width: 100%;
  height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
}

/* ---- User bar ---- */
.account-userbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: rgba(var(--panel-rgb), 0.85);
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: 16px;
  padding: var(--space-5) var(--space-6);
}

.account-userbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--btn-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-lg);
  color: #fff;
  flex-shrink: 0;
}

.account-userbar__email {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-userbar__plan {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.account-userbar__date {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.5);
}

.account-userbar__right {
  flex-shrink: 0;
}

/* ---- Plan badge ---- */
.account-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Spinner de chargement pour la vérification licence */
.account-plan-badge__spinner {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid rgba(var(--text-rgb), 0.2);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: badge-spin 0.6s linear infinite;
}

@keyframes badge-spin {
  to { transform: rotate(360deg); }
}

.account-plan-badge--free {
  background: rgba(var(--text-rgb), 0.1);
  color: rgba(var(--text-rgb), 0.6);
  border: 1px solid rgba(var(--text-rgb), 0.15);
}

.account-plan-badge--pro {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
}

.account-plan-badge--premium {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.4);
}

/* ---- Section title ---- */
.account-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
}

/* ---- Plan cards grid ---- */
.account-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 600px) {
  .account-plans {
    grid-template-columns: 1fr;
  }
}

/* ---- Individual plan card ---- */
.account-plan-card {
  position: relative;
  background: rgba(var(--panel-rgb), 0.85);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--transition-base) ease,
    box-shadow var(--transition-base) ease;
}

.account-plan-card:hover {
  border-color: rgba(var(--text-rgb), 0.25);
}

.account-plan-card--active {
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 24px rgba(var(--primary-rgb), 0.08);
}

.account-plan-card--premium {
  border-color: rgba(139, 92, 246, 0.25);
}

.account-plan-card--premium:hover {
  border-color: rgba(139, 92, 246, 0.45);
}

.account-plan-card--premium.account-plan-card--active {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 24px rgba(139, 92, 246, 0.1);
}

/* ---- Badge (Plan actuel / Recommande) ---- */
.account-plan-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--primary);
  color: var(--btn-gradient-text);
  white-space: nowrap;
}

.account-plan-card__badge--premium {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.account-plan-card__badge--recommended {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

/* ---- Plan header ---- */
.account-plan-card__header {
  text-align: center;
  margin-bottom: 4px;
}

.account-plan-card__name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.account-plan-card__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
}

.account-plan-card__amount {
  font-size: 40px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.account-plan-card__unit {
  font-size: var(--text-base);
  color: rgba(var(--text-rgb), 0.5);
  font-weight: 500;
}

/* ---- Divider ---- */
.account-plan-card__divider {
  height: 1px;
  background: rgba(var(--text-rgb), 0.1);
  margin: 18px 0;
}

/* ---- Features list ---- */
.account-plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.account-plan-card__features li {
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.8);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  line-height: 1.4;
}

.account-check {
  color: var(--primary);
  font-weight: 700;
  font-size: var(--text-base);
  flex-shrink: 0;
  margin-top: 1px;
}

.account-check--premium {
  color: #a78bfa;
}

/* ---- Catalogue : note bundle ---- */
.module-catalog__bundled-note {
  font-size: 0.75rem;
  color: var(--primary);
  font-weight: 600;
  opacity: 0.85;
}

/* ---- Abonnement par logiciel ---- */
.account-modules-hint {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: -4px 0 16px;
}
.account-modules-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.account-module-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--card-bg);
  transition: border-color var(--transition-base);
}
.account-module-card--active {
  border-color: rgba(74, 208, 179, 0.35);
  background: rgba(74, 208, 179, 0.04);
}
.account-module-card__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.account-module-card__body {
  flex: 1;
  min-width: 0;
}
.account-module-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 6px;
}
.account-module-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.77rem;
  color: var(--text-secondary);
}
.account-module-card__right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 2px;
}
.account-module-card__badge--active {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(74, 208, 179, 0.15);
  color: var(--primary);
}
.account-module-card__price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.account-module-card__price small {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text-secondary);
  margin-left: 2px;
}
.account-checkout-block {
  padding: 16px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.account-checkout-total {
  font-size: 1rem;
  flex: 1;
}
.account-checkout-total strong {
  font-size: 1.25rem;
}
.account-checkout-total__note {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.account-checkout-cta {
  flex-shrink: 0;
  padding: 0.6rem 1.4rem;
}

/* ---- CTA button ---- */
.account-plan-card__btn {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: none;
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity var(--transition-fast) ease,
    transform 0.1s ease;
}

.account-plan-card__btn:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}

.account-plan-card__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.account-plan-card__btn--pro {
  background: var(--btn-gradient);
  color: #fff;
}

.account-plan-card__btn--premium {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

/* ---- Active label ---- */
.account-plan-card__active-label {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 700;
  text-align: center;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.account-plan-card__active-label--premium {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ═══════════════════════════════════════════════
   SUBSCRIPTION TAB — redesign
   ═══════════════════════════════════════════════ */

/* ── Active subscriber hero ── */
.sub-hero {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 28px 24px 24px;
  margin-bottom: var(--space-3);
  background: rgba(var(--panel-rgb), 0.98);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  box-shadow:
    0 0 0 0 rgba(var(--primary-rgb), 0),
    0 0 18px rgba(var(--primary-rgb), 0.08);
}

.sub-hero__topbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.sub-hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(var(--primary-rgb), 0.15);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  color: var(--primary);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-full);
}
.sub-hero__badge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 6px var(--primary);
}
.sub-hero__renewal {
  font-size: var(--text-xs); color: rgba(var(--text-rgb), 0.5);
}
.sub-hero__renewal--cancel { color: #f3b24c; }
.sub-hero__modules {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.sub-hero__chip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(var(--text-rgb), 0.06);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  font-size: var(--text-sm); font-weight: 600;
}
.sub-hero__chip-icon { font-size: var(--text-md); }
.sub-hero__pending {
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sub-hero__pending-title { font-size: var(--text-xs); font-weight: 600; color: rgba(var(--text-rgb), 0.6); }
.sub-hero__pending-detail { display: flex; flex-wrap: wrap; gap: 6px; }
.sub-hero__pending-tag {
  font-size: var(--text-xs); font-weight: 700;
  padding: 3px 10px; border-radius: var(--radius-full);
}
.sub-hero__pending-tag--add { background: rgba(74, 208, 179, 0.15); color: #4ad0b3; }
.sub-hero__pending-tag--remove { background: rgba(248, 113, 113, 0.15); color: #f87171; }

.sub-hero__manage {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 11px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
  font-size: var(--text-sm); font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sub-hero__manage:hover { background: rgba(var(--text-rgb), 0.08); border-color: rgba(var(--text-rgb), 0.2); }
.sub-hero__manage:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Configurator (non-subscriber) ── */
.sub-config {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  background: rgba(var(--panel-rgb), 0.6);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.sub-config__head {
  padding: 22px 22px 0;
}
.sub-config__title {
  font-size: 17px; font-weight: 800; margin-bottom: 3px;
}
.sub-config__subtitle {
  font-size: var(--text-xs); color: rgba(var(--text-rgb), 0.45); margin-bottom: 18px;
}
.sub-config__modules {
  display: flex; flex-direction: column; gap: 0;
  padding: 0 12px;
}

/* ── Module row ── */
.sub-mod {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 14px 10px;
  border-radius: var(--radius-lg);
  margin-bottom: 6px;
  text-align: left; width: 100%;
  cursor: default;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  border: 1.5px solid transparent;
}
.sub-mod--addon { cursor: pointer; }
.sub-mod--addon:hover {
  background: rgba(var(--text-rgb), 0.04);
  border-color: rgba(var(--text-rgb), 0.08);
}
.sub-mod--addon.is-on {
  background: rgba(var(--primary-rgb), 0.07);
  border-color: rgba(var(--primary-rgb), 0.25);
}
.sub-mod__icon-wrap {
  width: 44px; height: 44px; border-radius: var(--radius-lg); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(var(--text-rgb), 0.07);
}
.sub-mod--base .sub-mod__icon-wrap {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.08));
}
.sub-mod--addon.is-on .sub-mod__icon-wrap {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--primary-rgb), 0.06));
}
.sub-mod__body { flex: 1; min-width: 0; }
.sub-mod__name {
  font-size: var(--text-base); font-weight: 700;
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: 2px;
}
.sub-mod__tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  background: rgba(var(--primary-rgb), 0.15); color: var(--primary);
  padding: 1px 8px; border-radius: var(--radius-full);
}
.sub-mod__desc { font-size: var(--text-xs); color: rgba(var(--text-rgb), 0.45); }
.sub-mod__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
}
.sub-mod__price {
  font-size: 15px; font-weight: 800; white-space: nowrap;
}
.sub-mod__price small {
  font-size: var(--text-xs); font-weight: 500; color: rgba(var(--text-rgb), 0.45);
}

/* ── Toggle ── */
.sub-toggle {
  width: 44px; height: 24px; border-radius: var(--radius-lg);
  background: rgba(var(--text-rgb), 0.12);
  position: relative; flex-shrink: 0;
  transition: background var(--transition-slow);
}
.sub-toggle::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(var(--text-rgb), 0.5);
  transition: transform var(--transition-slow) cubic-bezier(.34,1.56,.64,1), background var(--transition-slow);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.sub-toggle.is-on {
  background: var(--primary);
}
.sub-toggle.is-on::after {
  transform: translateX(20px);
  background: var(--bg);
}

/* ── Separator + CTA ── */
.sub-config__sep {
  height: 1px;
  background: rgba(var(--text-rgb), 0.07);
  margin: 6px 12px 0;
}
.sub-config__cta {
  padding: 18px 22px 22px;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sub-config__total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.07);
}
.sub-config__total-label { font-size: var(--text-sm); color: rgba(var(--text-rgb), 0.55); font-weight: 500; }
.sub-config__total-amount { font-size: 26px; font-weight: 900; line-height: 1; }
.sub-config__total-amount small { font-size: var(--text-sm); font-weight: 500; color: rgba(var(--text-rgb), 0.45); margin-left: 2px; }
.sub-config__note { font-size: var(--text-xs); color: rgba(var(--text-rgb), 0.35); text-align: center; }

/* ── Subscription chooser ── */
.sub-chooser {
  margin-bottom: var(--space-5);
}
.sub-chooser__header {
  text-align: center;
  margin-bottom: var(--space-7);
}
.sub-chooser__title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}
.sub-chooser__subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

/* ── Enterprise link ── */
.sub-enterprise {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 13px 18px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(var(--text-rgb), 0.1);
  text-decoration: none; color: var(--text);
  margin-bottom: var(--space-3);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sub-enterprise:hover {
  border-color: rgba(var(--text-rgb), 0.18);
  background: rgba(var(--text-rgb), 0.02);
}
.sub-enterprise__title { font-size: var(--text-sm); font-weight: 600; }
.sub-enterprise__desc { font-size: var(--text-xs); color: rgba(var(--text-rgb), 0.4); margin-top: 2px; }
.sub-enterprise__cta { font-size: var(--text-xs); font-weight: 700; color: var(--primary); white-space: nowrap; }

.account-catalog-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.75);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.account-catalog-note__icon { flex-shrink: 0; font-size: var(--text-md); }
.account-catalog-note strong { color: var(--text); }

a.account-plan-card__contact-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-base);
  cursor: pointer;
}

/* ---- Refresh row ---- */
.account-refresh-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.account-msg {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}

.account-msg--error {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.account-msg--success {
  background: rgba(var(--primary-rgb), 0.12);
  color: #9ff3dc;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}

/* ---- Card (reused for auth + cloud) ---- */
.account-card {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  background: rgba(var(--panel-rgb), 0.85);
  border: 1px solid rgba(var(--text-rgb), 0.18);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
}

.account-danger {
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: linear-gradient(
    140deg,
    rgba(248, 113, 113, 0.12),
    rgba(248, 113, 113, 0.04)
  );
}
.account-danger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.account-danger__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: #fecaca;
}
.account-danger__subtitle {
  font-size: var(--text-xs);
  color: rgba(254, 202, 202, 0.7);
  margin-top: 4px;
}
.account-danger__body {
  margin-top: 10px;
  color: rgba(254, 202, 202, 0.8);
  font-size: var(--text-sm);
}

/* ── Entreprise (Account tab) ── */
.account-company__header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.account-company__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.15);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.account-company__title {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.account-company__sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.account-company__field {
  margin-bottom: var(--space-5);
}
.account-company__field:last-of-type {
  margin-bottom: 0;
}
.account-company__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.account-company__hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}
.account-company__input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.15);
  background: rgba(var(--text-rgb), 0.05);
  color: var(--text);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color var(--transition-base);
}
.account-company__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), 0.12);
}
.account-company__textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.15);
  background: rgba(var(--text-rgb), 0.05);
  color: var(--text);
  font-size: 0.84rem;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  min-height: 120px;
  transition: border-color var(--transition-base);
}
.account-company__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 99, 102, 241), 0.12);
}
.account-company__textarea::placeholder,
.account-company__input::placeholder {
  color: var(--muted);
  opacity: 0.5;
}
.account-company__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.4;
}
.account-company__status svg {
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.account-delete {
  width: min(640px, 92vw);
}
.account-delete__banner {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-3);
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: linear-gradient(
    160deg,
    rgba(248, 113, 113, 0.18),
    rgba(248, 113, 113, 0.06)
  );
  margin-bottom: var(--space-4);
}
.account-delete__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  background: rgba(248, 113, 113, 0.18);
  color: #fecaca;
  font-size: var(--text-xl);
  font-weight: 700;
}
.account-delete__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: #fecaca;
}
.account-delete__text {
  font-size: var(--text-xs);
  color: rgba(254, 202, 202, 0.8);
  margin-top: 4px;
}
.account-delete__list {
  margin: 0 0 6px 0;
  padding-left: 18px;
  color: rgba(var(--text-rgb), 0.8);
  font-size: var(--text-sm);
}

/* ---- AI Provider (Configuration IA) ---- */
.ai-provider {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 760px;
}

/* Hero : mascotte + intro côte à côte */
.ai-provider__hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(201, 100, 66, 0.10) 0%, rgba(var(--panel-rgb), 0.5) 60%);
  border: 1px solid rgba(201, 100, 66, 0.18);
  border-radius: var(--radius-lg);
}
.ai-provider__hero .claude-mascot {
  padding: 0;
  flex: 0 0 auto;
}
.ai-provider__hero-body { min-width: 0; flex: 1; }
.ai-provider__hero-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.ai-provider__hero-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}
.ai-provider__hero-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.ai-provider__status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ai-provider__status-dot.is-on  { background: var(--color-success); box-shadow: 0 0 0 3px rgba(74, 208, 179, 0.18); }
.ai-provider__status-dot.is-off { background: rgba(var(--text-rgb), 0.2); }
.ai-provider__status-sep { color: rgba(var(--text-rgb), 0.25); margin: 0 4px; }

/* Sections de la page IA */
.ai-provider__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-provider__section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px;
}

.ai-provider__key-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(var(--text-rgb), 0.06);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--text-rgb), 0.08);
}

/* ---- Mascotte Claw'd (Anthropic) ---- */
.claude-mascot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 26px 0 12px;
  user-select: none;
}

.claude-mascot__svg {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  animation: claude-mascot-bob 1.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 18px rgba(204, 122, 90, 0.35));
  transform-origin: center bottom;
}

.claude-mascot__svg:hover {
  animation-duration: 0.5s;
}

.claude-mascot__eye {
  transform-origin: center;
  transform-box: fill-box;
  animation: claude-mascot-blink 5.2s ease-in-out infinite;
}

.claude-mascot__leg {
  transform-origin: center top;
  transform-box: fill-box;
  animation: claude-mascot-step 0.7s ease-in-out infinite;
}

.claude-mascot__leg--2 {
  animation-delay: 0.18s;
}

.claude-mascot__leg--3 {
  animation-delay: 0.36s;
}

.claude-mascot__leg--4 {
  animation-delay: 0.54s;
}

.claude-mascot__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@keyframes claude-mascot-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes claude-mascot-blink {
  0%, 92%, 100% {
    transform: scaleY(1);
  }
  95%, 97% {
    transform: scaleY(0.1);
  }
}

@keyframes claude-mascot-step {
  0%, 100% {
    transform: scaleY(1) translateY(0);
  }
  50% {
    transform: scaleY(0.7) translateY(0);
  }
}

.ai-provider__keys {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: rgba(var(--panel-rgb), 0.5);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.ai-provider__key-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ai-provider__key-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.ai-provider__key-active {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  background: rgba(var(--primary-rgb), 0.12);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

.ai-provider__key-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: monospace;
  transition: border-color 0.2s;
}

.ai-provider__key-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.ai-provider__key-hint {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.5);
  line-height: 1.4;
}

.ai-provider__separator {
  height: 1px;
  background: rgba(var(--text-rgb), 0.1);
}

.ai-provider__sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-top: 12px;
  border-radius: 8px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ai-provider__sync-btn:hover {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.ai-provider__log-actions {
  background: rgba(var(--panel-rgb), 0.5);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.ai-provider__log-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.ai-provider__log-desc {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.5);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.ai-provider__log-buttons {
  display: flex;
  gap: var(--space-3);
}

.ai-provider__log-btn {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ai-provider__log-btn:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary);
}

.ai-provider__log-btn--secondary {
  background: transparent;
  border-color: rgba(var(--text-rgb), 0.15);
  color: rgba(var(--text-rgb), 0.6);
}

.ai-provider__log-btn--secondary:hover {
  background: rgba(var(--text-rgb), 0.06);
  border-color: rgba(var(--text-rgb), 0.3);
  color: var(--text);
}

/* ---- Login Hero ---- */
.account-page:has(.login-hero) {
  max-width: 100%;
  min-height: 100%;
  padding: 0;
  gap: 0;
  justify-content: center;
}
.login-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding: 40px 20px;
  overflow: hidden;
}

.login-hero__glow {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
  pointer-events: none;
}

.login-hero__glow--1 {
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-70%, -60%);
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.3), transparent 70%);
}

.login-hero__glow--2 {
  width: 350px;
  height: 350px;
  top: 50%;
  left: 50%;
  transform: translate(-30%, -40%);
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
  animation-delay: -4s;
}

@keyframes loginGlowPulse {
  0% { opacity: 0.3; transform: translate(-70%, -60%) scale(1); }
  100% { opacity: 0.5; transform: translate(-70%, -60%) scale(1.15); }
}

.login-hero__glow--2 {
  animation-name: loginGlowPulse2;
}
@keyframes loginGlowPulse2 {
  0% { opacity: 0.2; transform: translate(-30%, -40%) scale(1); }
  100% { opacity: 0.4; transform: translate(-30%, -40%) scale(1.1); }
}

.login-card {
  position: relative;
  z-index: 3;
  width: min(400px, 90%);
  background: rgba(var(--panel-rgb), 0.6);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: 20px;
  padding: 36px 32px 24px;
  box-shadow:
    0 0 0 1px rgba(var(--primary-rgb), 0.05),
    0 20px 50px rgba(0, 0, 0, 0.4),
    0 8px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Subtle gradient border glow */
.login-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), transparent 50%, rgba(139, 92, 246, 0.2));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.login-card__header {
  text-align: center;
  margin-bottom: var(--space-2);
}

.login-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.15),
    rgba(var(--primary-2-rgb), 0.1)
  );
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.1);
}

.login-card__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
}

.login-card__subtitle {
  font-size: var(--text-base);
  color: rgba(var(--text-rgb), 0.5);
  margin-top: 6px;
  font-weight: 400;
}

.login-card__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--primary-rgb), 0.2),
    rgba(139, 92, 246, 0.15),
    transparent
  );
  margin: 20px 0 24px;
}

.login-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-auth {
  position: relative;
  z-index: 4;
  pointer-events: auto !important;
}

.account-auth * {
  pointer-events: auto !important;
}

.account-auth input,
.account-auth textarea,
.account-auth select,
.account-auth button,
.account-auth label,
.account-auth a {
  pointer-events: auto !important;
  -webkit-user-select: text;
  user-select: text;
}

/* ---- Custom Auth (login/signup/forgot) ---- */
.auth-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(var(--text-rgb), 0.06);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}
.auth-toggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-base) ease, color var(--transition-base) ease, transform var(--transition-base) ease;
}
.auth-toggle__btn:hover {
  color: var(--text);
}
.auth-toggle__btn--active {
  background: var(--primary);
  color: #0f1720;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}
.auth-toggle__btn--active:hover {
  color: #0f1720;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-password {
  position: relative;
  display: flex;
  align-items: center;
}
.auth-password .auth-input {
  padding-right: 44px;
}
.auth-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(var(--text-rgb), 0.08);
  color: var(--text);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-base);
  display: grid;
  place-items: center;
  transition:
    background var(--transition-base) ease,
    color var(--transition-base) ease;
}
.auth-eye:active:not(:disabled),
.auth-eye:focus {
  transform: translateY(-50%) !important;
}
.auth-eye:hover {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
}
.auth-label {
  color: rgba(var(--text-rgb), 0.7);
  font-weight: 500;
  font-size: var(--text-sm);
}
.auth-input {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: var(--text-base);
  transition:
    border-color var(--transition-base) ease,
    box-shadow var(--transition-base) ease;
  width: 100%;
  box-sizing: border-box;
}
.auth-input:focus {
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow:
    0 0 0 3px rgba(var(--primary-rgb), 0.1),
    0 0 20px rgba(var(--primary-rgb), 0.08);
  outline: none;
}
.auth-input::placeholder {
  color: rgba(var(--text-rgb), 0.3);
}
.auth-button {
  background: linear-gradient(135deg, var(--primary), #2dd4bf);
  color: var(--btn-gradient-text);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  cursor: pointer;
  transition:
    transform var(--transition-fast) ease,
    box-shadow var(--transition-base) ease,
    opacity var(--transition-fast) ease;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2);
}
.auth-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.4);
}
.auth-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.auth-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}
.auth-link {
  background: none;
  border: none;
  color: rgba(var(--text-rgb), 0.6);
  text-decoration: underline;
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 0;
}
.auth-link:hover {
  color: var(--primary);
}
.auth-msg {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
}
.auth-msg--error {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.auth-msg--success {
  background: rgba(var(--primary-rgb), 0.12);
  color: #9ff3dc;
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.login-card__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--text-rgb), 0.06);
}

.login-card__footer-text {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
}

.login-card__footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.4);
}

.account-card__top {
  margin-bottom: 18px;
}

.account-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-card__title {
  font-size: 22px;
  font-weight: 700;
}

.account-card__subtitle {
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.7);
  margin-top: 6px;
}

.account-shell .empty {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(var(--text-rgb), 0.2);
  color: rgba(var(--text-rgb), 0.7);
}

.account-shell .ghost {
  background: rgba(var(--panel-rgb), 0.7);
  color: var(--text);
  border: 1px solid rgba(var(--text-rgb), 0.18);
}

.account-shell .ghost.subtle {
  background: transparent;
  border-color: rgba(var(--text-rgb), 0.15);
  font-size: var(--text-xs);
  padding: 6px 12px;
}

/* ---- Supabase Auth overrides ---- */
.account-auth .supabase-auth-ui_container,
.account-auth .supabase-auth-ui_label,
.account-auth .supabase-auth-ui_anchor,
.account-auth .supabase-auth-ui_message,
.account-auth .supabase-auth-ui_text {
  color: var(--text) !important;
}

.account-auth .supabase-auth-ui_label,
.account-auth .supabase-auth-ui_anchor {
  color: rgba(var(--text-rgb), 0.7) !important;
  font-weight: 500 !important;
}

.account-auth .supabase-auth-ui_input {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(var(--text-rgb), 0.12) !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 16px !important;
  font-size: var(--text-base) !important;
  transition:
    border-color var(--transition-base) ease,
    box-shadow var(--transition-base) ease !important;
}

.account-auth .supabase-auth-ui_input:focus {
  border-color: rgba(var(--primary-rgb), 0.6) !important;
  box-shadow:
    0 0 0 3px rgba(var(--primary-rgb), 0.1),
    0 0 20px rgba(var(--primary-rgb), 0.08) !important;
  outline: none !important;
}

.account-auth .supabase-auth-ui_input::placeholder {
  color: rgba(var(--text-rgb), 0.3) !important;
}

.account-auth button[type="submit"],
.account-auth .supabase-auth-ui_button {
  background: var(--btn-gradient) !important;
  color: var(--btn-gradient-text) !important;
  font-weight: 700 !important;
  font-size: var(--text-base) !important;
  border: none !important;
  border-radius: var(--radius-lg) !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition:
    transform var(--transition-fast) ease,
    box-shadow var(--transition-base) ease,
    opacity var(--transition-fast) ease !important;
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.2) !important;
}

.account-auth button[type="submit"]:hover,
.account-auth .supabase-auth-ui_button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.3) !important;
}

.account-auth .supabase-auth-ui_anchor {
  transition: color var(--transition-fast) ease !important;
}

.account-auth .supabase-auth-ui_anchor:hover {
  color: var(--primary) !important;
}

/* ==========================================================================
   CLOUD SECTION (Account Page)
   ========================================================================== */

/* ---- Cloud Header ---- */
.cloud-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.cloud-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.cloud-header__icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.2),
    rgba(139, 92, 246, 0.2)
  );
  border: 1px solid rgba(139, 92, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  flex-shrink: 0;
}

.cloud-header__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.cloud-header__sub {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.5);
  margin-top: 2px;
}

/* ---- Status pill ---- */
.cloud-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
}

.cloud-status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cloud-status-pill--on {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.cloud-status-pill--on .cloud-status-pill__dot {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}

.cloud-status-pill--off {
  background: rgba(var(--text-rgb), 0.06);
  color: rgba(var(--text-rgb), 0.5);
  border: 1px solid rgba(var(--text-rgb), 0.12);
}

.cloud-status-pill--off .cloud-status-pill__dot {
  background: #6b7280;
}

/* ---- Gate (not premium) ---- */
.cloud-gate {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.cloud-gate__icon {
  color: rgba(139, 92, 246, 0.7);
  flex-shrink: 0;
  margin-top: 2px;
}

.cloud-gate__text {
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.7);
  line-height: 1.5;
}

.cloud-gate__text strong {
  color: #a78bfa;
}

/* ---- Toggle button ---- */
.cloud-toggle-row {
  margin-bottom: var(--space-4);
}

.cloud-toggle-btn {
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.cloud-toggle-btn:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.5);
}

.cloud-toggle-btn--active {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

.cloud-toggle-btn--active:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}

/* ---- Sync message ---- */
.cloud-sync-msg {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  background: rgba(var(--primary-rgb), 0.08);
  color: rgba(var(--primary-rgb), 0.9);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  margin-bottom: var(--space-4);
}

.cloud-sync-msg--error {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.2);
}

/* ---- Modules picker ---- */
.cloud-modules {
  margin: 6px 0 18px;
}

.cloud-modules__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: rgba(var(--text-rgb), 0.85);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cloud-modules__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

.cloud-module-card {
  text-align: left;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.12),
    rgba(15, 23, 42, 0.45)
  );
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: var(--text);
  cursor: pointer;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.cloud-module-card:hover {
  transform: translateY(-2px);
  border-color: rgba(99, 102, 241, 0.65);
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.2),
    rgba(15, 23, 42, 0.55)
  );
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.cloud-module-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.5);
  background: rgba(99, 102, 241, 0.12);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cloud-module-card__title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 6px;
}

.cloud-module-card__desc {
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.7);
  line-height: 1.45;
  margin-bottom: var(--space-3);
}

.cloud-module-card__cta {
  font-size: var(--text-xs);
  font-weight: 700;
  color: #c7d2fe;
  letter-spacing: 0.02em;
}

.cloud-module-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.cloud-module-back {
  padding: 6px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  background: rgba(var(--text-rgb), 0.04);
  color: rgba(var(--text-rgb), 0.8);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.cloud-module-header__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}

/* ---- Usage card ---- */
.cloud-usage-card {
  background: rgba(var(--bg-rgb), 0.5);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.cloud-usage-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cloud-usage-card__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(var(--text-rgb), 0.7);
}

.cloud-usage-card__value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.cloud-usage-bar {
  height: 8px;
  border-radius: var(--radius-xs);
  background: rgba(var(--text-rgb), 0.06);
  overflow: hidden;
}

.cloud-usage-bar__fill {
  height: 100%;
  border-radius: var(--radius-xs);
  transition: width 0.4s ease;
}

/* ---- Upload progress bar ---- */
.cloud-upload-progress {
  background: rgba(var(--bg-rgb), 0.6);
  border: 1px solid rgba(139, 92, 246, 0.25);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: var(--space-4);
}

.cloud-upload-progress__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cloud-upload-progress__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: #a78bfa;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.cloud-upload-progress__count {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.cloud-upload-progress__bar {
  height: 10px;
  border-radius: 5px;
  background: rgba(var(--text-rgb), 0.06);
  overflow: hidden;
}

.cloud-upload-progress__fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: width 0.3s ease;
  position: relative;
}

.cloud-upload-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--text-rgb), 0.25),
    transparent
  );
  animation: cloud-upload-shimmer 1.5s infinite;
}

@keyframes cloud-upload-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.cloud-usage-card__bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.4);
}

/* ---- Sync actions ---- */
.cloud-sync-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.cloud-sync-actions__info {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.45);
}

.cloud-sync-actions__btns {
  display: flex;
  gap: var(--space-2);
}

.cloud-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  background: rgba(var(--text-rgb), 0.04);
  color: rgba(var(--text-rgb), 0.7);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.cloud-action-btn:hover:not(:disabled) {
  background: rgba(var(--text-rgb), 0.08);
  border-color: rgba(var(--text-rgb), 0.2);
  color: var(--text);
}

.cloud-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cloud-action-btn svg {
  flex-shrink: 0;
}

/* ---- Documents ---- */
.cloud-docs {
  margin-top: 2px;
}

.cloud-docs + .cloud-docs {
  margin-top: 32px;
}

.cloud-docs__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-4);
}

.cloud-docs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

.cloud-doc-card {
  background: rgba(var(--bg-rgb), 0.4);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast) ease;
}

.cloud-doc-card:hover {
  border-color: rgba(var(--text-rgb), 0.15);
}

.cloud-doc-card--open {
  border-color: rgba(139, 92, 246, 0.25);
}

.cloud-doc-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
}

.cloud-doc-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.cloud-doc-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  font-size: var(--text-xs);
  font-weight: 700;
}

.cloud-doc-card__chevron {
  font-size: 9px;
  color: rgba(var(--text-rgb), 0.3);
  margin-left: auto;
}

.cloud-doc-card__upload {
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(139, 92, 246, 0.25);
  background: rgba(139, 92, 246, 0.08);
  color: #a78bfa;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  margin-left: 4px;
}

.cloud-doc-card__upload:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
}

.cloud-doc-card__upload:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cloud-doc-card__list {
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid rgba(var(--text-rgb), 0.06);
}

.cloud-doc-card__empty {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.35);
  border-top: 1px solid rgba(var(--text-rgb), 0.06);
  text-align: center;
}

.cloud-doc-item {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  gap: var(--space-3);
  transition: background 0.1s ease;
}

.cloud-doc-item:hover {
  background: rgba(var(--text-rgb), 0.03);
}

.cloud-doc-item__icon {
  color: rgba(var(--text-rgb), 0.35);
  flex-shrink: 0;
}

.cloud-doc-item__name {
  flex: 1;
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloud-doc-item__size {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.35);
  flex-shrink: 0;
}

/* ============================================
   IMAGE AI SETTINGS - Section paramètres
   ============================================ */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.settings-card {
  padding: var(--space-5);
}

.settings-card h3 {
  margin: 0 0 8px 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.settings-info {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--pill);
  border-radius: var(--radius-1);
  font-size: var(--text-sm);
}

.settings-info strong {
  display: block;
  margin-bottom: var(--space-2);
}

.settings-info ul {
  margin: 0;
  padding-left: var(--space-5);
}

.settings-info--warning {
  background: rgba(240, 162, 2, 0.1);
  border-left: 3px solid var(--primary-2);
}

.settings-actions {
  margin: var(--space-4) 0;
}

.settings-actions .muted {
  margin-top: var(--space-1);
}

.settings-embedded {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.settings-embedded-header {
  padding: 16px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
}

.settings-embedded-section {
  padding: 12px 0;
  border-top: 1px dashed var(--border);
}

/* Sous-sections indexation */
.index-subsection {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
}

.index-subsection:first-child {
  padding-top: 0;
}

.index-subsection:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.index-subsection h3 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}

/* Accordéon (style de base) */
.accordion {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion + .accordion {
  margin-top: var(--space-3);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font-weight: 600;
}

.accordion-icon {
  display: inline-block;
  font-size: var(--text-md);
  transition: transform var(--transition-base) ease;
}

.accordion-icon.is-open {
  transform: rotate(180deg);
}
.chevron-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: var(--text-sm);
  line-height: 1;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.25s ease,
              background 0.25s ease;
  transform-origin: 50% 50%;
}

.chevron-icon.is-open {
  transform: rotate(180deg);
  color: var(--primary);
}

/* ── Drives Section (drv-*) ──────────────────────────────────────────── */
.drv-section {
  margin-top: 28px;
}

.drv-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.drv-section__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 var(--space-1);
}

.drv-section__desc {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}

.drv-connected-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.25);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.drv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── DriveCard ── */
.drv-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.drv-card:hover {
  border-color: rgba(var(--primary-rgb), 0.2);
}

.drv-card--connected {
  border-color: rgba(46, 204, 113, 0.3);
  box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.06);
}

.drv-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.drv-card__logo {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.drv-card__logo svg {
  width: 22px;
  height: 22px;
}

.drv-card__info {
  flex: 1;
  min-width: 0;
}

.drv-card__name {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
}

.drv-card__desc {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 2px;
}

.drv-card__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Badges ── */
.drv-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.drv-badge--on {
  background: rgba(46, 204, 113, 0.12);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.drv-badge--off {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ── Buttons ── */
.drv-btn {
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
}

.drv-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.drv-btn--primary {
  background: var(--primary);
  color: #fff;
}

.drv-btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.drv-btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.drv-btn--ghost:hover:not(:disabled) {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
}

.drv-btn--icon {
  width: 32px;
  min-width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Setup help ── */
.drv-setup-help {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(var(--text-rgb), 0.03);
  border-radius: 6px;
  margin-bottom: 12px;
}
.drv-setup-help__text {
  font-size: 12px;
  color: var(--text);
}
.drv-setup-help__steps {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Message flash ── */
.drv-msg {
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(var(--text-rgb), 0.03);
  text-align: center;
}

.drv-msg--ok {
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.08);
}

/* ── Advanced config panel ── */
.drv-advanced {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.drv-advanced__hint {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.drv-reconfigure {
  display: block;
  margin-top: 10px;
  font-size: var(--text-xs);
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.drv-reconfigure:hover {
  opacity: 1;
  color: var(--text);
}

/* ── Fields ── */
.drv-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.drv-field__label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text);
}
.drv-field__hint {
  font-size: 0.7rem;
  color: var(--text-2);
  opacity: 0.7;
  margin-top: 2px;
}

.drv-field__input {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.drv-field__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
}

.drv-field__input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.drv-card__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: 14px;
}

.drv-server-note {
  padding: 8px 12px;
  margin-top: 4px;
  font-size: 11px;
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.08);
  border-radius: 6px;
  line-height: 1.4;
}

/* ── Drive info accordion panel ── */
.drv-info-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 6px;
  background: var(--input-bg);
  border-radius: 8px;
  animation: drv-info-slide 0.2s ease-out;
}

@keyframes drv-info-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.drv-info-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.drv-info-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
  opacity: 0.7;
}

.drv-info-item strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}

.drv-info-item p {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-2);
}

/* ── Card footer (tuto toggle + reconfigure) ── */
.drv-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/* ── Tutorial toggle ── */
.drv-tuto-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
}

.drv-tuto-toggle:hover {
  opacity: 1;
}

.drv-tuto-toggle svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Tutorial content ── */
.drv-tuto {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: var(--radius-md);
}

.drv-tuto__title {
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--primary);
}

.drv-tuto__steps {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.drv-tuto__steps li {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text);
}

.drv-tuto__steps li::marker {
  color: var(--primary);
  font-weight: 700;
}

/* ── Inline tutorial steps (new simplified version) ── */
.drv-tuto-steps {
  margin: 12px 0 0;
  padding: 14px 14px 14px 32px;
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: decimal;
}

.drv-tuto-step {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-2);
}

.drv-tuto-step strong { color: var(--text); }
.drv-tuto-step code {
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--text-rgb), 0.06);
  color: var(--primary);
  font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.drv-tuto-step::marker {
  color: var(--primary);
  font-weight: 700;
}

.drv-msg--err {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

.drv-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.drv-advanced-toggle:hover { opacity: 1; color: var(--text); }

.drv-tuto__steps strong {
  color: var(--text);
  font-weight: 700;
}

.drv-tuto__steps code {
  font-size: 0.74rem;
  background: rgba(var(--text-rgb), 0.07);
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-family: 'SF Mono', 'Fira Code', monospace;
  user-select: all;
}

/* ── Links inside tutorials ── */
.drv-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed rgba(var(--primary-rgb), 0.4);
  transition: border-color var(--transition-fast);
  cursor: pointer;
}

.drv-link:hover {
  border-bottom-style: solid;
  border-color: var(--primary);
}

/* ── SettingsPage extracted inline styles ──────────────────────────────── */
.settings-field--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.settings-field__label--bold {
  font-weight: 600;
}

.settings-field__desc {
  font-size: 13px;
  color: var(--muted);
  margin: var(--space-1) 0 0;
}

.settings-logo-desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.settings-brand-upload--narrow {
  max-width: 280px;
}

.settings-debourse-file__mt {
  margin-top: 6px;
}

.settings-field-row--mt {
  margin-top: var(--space-2);
}

/* ── IndexationSection extracted inline styles ────────────────────────── */
.idx-section-heading {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
}

.idx-section-heading span {
  color: var(--primary);
  font-weight: 500;
}

.idx-current-file {
  margin-top: var(--space-2);
  display: block;
  font-size: 11px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}

.idx-subsection--mt {
  margin-top: 0;
  padding-top: var(--space-6);
}

.idx-desc {
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.idx-desc--lg {
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

.idx-checkbox-mr {
  margin-right: var(--space-4);
}

.idx-server-input {
  opacity: 0.7;
  cursor: default;
}

.idx-btn--force {
  font-size: 11px;
  width: auto;
  padding: 4px var(--space-3);
  border-radius: var(--radius-sm);
}

.idx-btn-main--drive {
  background: #8b5cf6;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

.idx-btn-main--drive:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
}

/* Drive browser */
.drive-card {
  margin-bottom: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.drive-card:hover {
  border-color: rgba(139, 92, 246, 0.3);
}

.drive-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  background: var(--panel);
  transition: background var(--transition-fast);
}

.drive-card__header:hover {
  background: var(--surface-3);
}

.drive-card__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.drive-card__icon {
  font-size: 14px;
}

.drive-card__name {
  font-weight: 600;
  font-size: 13px;
}

.drive-card__badge {
  font-size: 11px;
  background: #8b5cf6;
  color: white;
  border-radius: 10px;
  padding: 1px var(--space-2);
}

.drive-card__hint {
  font-size: 11px;
  color: var(--muted);
}

.drive-card__chevron {
  font-size: 12px;
  color: var(--muted);
  transition: transform var(--transition-base);
}

.drive-card__chevron--open {
  transform: rotate(180deg);
}

.drive-card__body {
  padding: var(--space-3) var(--space-5) var(--space-4);
  max-height: 280px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

.drive-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0 var(--space-1);
  font-size: 11px;
  flex-wrap: wrap;
}

.drive-breadcrumb__link {
  cursor: pointer;
  color: var(--accent);
}

.drive-breadcrumb__root {
  font-weight: 600;
}

.drive-breadcrumb__sep {
  color: var(--muted);
}

.drive-error {
  padding: 6px 10px;
  margin-bottom: 6px;
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--danger);
}

.drive-loading {
  padding: var(--space-4) 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.drive-empty {
  padding: var(--space-3) 0;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.drive-selected-summary {
  margin-bottom: var(--space-2);
  padding: 6px 10px;
  background: rgba(139, 92, 246, 0.08);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.drive-selected-summary strong {
  color: #8b5cf6;
}

.drive-selected-summary__remove {
  cursor: pointer;
  color: var(--danger);
  margin-left: 2px;
}

.drive-file-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drive-folder-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-2);
  border-radius: var(--radius-xs);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.drive-folder-item:hover {
  background: var(--hover);
}

.drive-folder-item--selected {
  background: rgba(139, 92, 246, 0.12);
}

.drive-folder-item--selected:hover {
  background: rgba(139, 92, 246, 0.18);
}

.drive-folder-item__checkbox {
  margin: 0;
  accent-color: #8b5cf6;
}

.drive-folder-item__link {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.drive-folder-item__name {
  font-weight: 500;
}

.drive-pdf-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) 30px;
  font-size: 11px;
  color: var(--muted);
}

.drive-pdf-item__size {
  font-size: 10px;
}

.drive-result {
  margin-top: var(--space-2);
  padding: 10px 14px;
  background: rgba(139, 92, 246, 0.06);
  border-radius: var(--radius-md);
  font-size: 12px;
}

.drive-result__title {
  font-weight: 600;
  color: #8b5cf6;
  margin-bottom: var(--space-1);
}

.drive-result__detail {
  margin-left: var(--space-2);
  color: var(--text);
}

.drive-indexed-files {
  margin-top: 10px;
}

.drive-indexed-files summary {
  cursor: pointer;
  font-size: 12px;
}

.drive-indexed-files__list {
  margin-top: 6px;
  max-height: 180px;
  overflow-y: auto;
  font-size: 11px;
}

.drive-indexed-files__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}

.drive-indexed-files__drive-label {
  font-size: 10px;
  color: #8b5cf6;
  font-weight: 600;
  width: 80px;
  flex-shrink: 0;
}

.drive-indexed-files__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drive-indexed-files__pages {
  color: var(--muted);
  flex-shrink: 0;
}

/* Image indexing progress */
.idx-image-progress {
  margin-top: var(--space-2);
}

.idx-image-progress__bar-wrap {
  margin-bottom: var(--space-1);
}

.idx-image-progress__info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
}

.idx-image-progress__file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.idx-image-progress__count {
  flex-shrink: 0;
  margin-left: var(--space-2);
}

.idx-inline-msg {
  font-size: 11px;
  margin-top: var(--space-2);
  display: block;
  line-height: var(--leading-relaxed);
}

.idx-stats-mt {
  margin-top: var(--space-4);
}

.idx-detail-mt {
  margin-top: var(--space-5);
}

.idx-detail-mt summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) 0;
}

.idx-drives-heading span {
  color: #8b5cf6;
}

.idx-maint-section {
  margin-top: 0;
  padding-top: var(--space-6);
}

/* ══════════════════════════════════════════════════════════════════════════
   UI POLISH — Account / Updater / Promo (audit visuel)
   ══════════════════════════════════════════════════════════════════════════ */

/* User bar (en-tête onglets autres que "compte") */
.account-userbar {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.account-userbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.account-userbar__id {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.account-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--text-sm);
}
.account-userbar__email {
  color: var(--text-2);
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-userbar__logout {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.account-userbar__logout:hover:not(:disabled) {
  background: var(--color-danger-muted);
  border-color: var(--color-danger);
}
.account-userbar__logout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Stack messages globaux */
.account-msg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
}
.account-msg-stack .auth-msg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  text-align: left;
}
.auth-msg__close {
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}
.auth-msg__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

/* Banner alerte abonnement (warn) */
.account-banner {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--color-warning-muted);
  border-color: rgba(245, 158, 11, 0.3);
}
.account-banner__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--text);
}
.account-banner--warn .account-banner__inner svg {
  color: var(--color-warning);
  flex-shrink: 0;
}

/* Sub-hero variante compact */
.sub-hero--compact {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
}
.sub-hero--compact .sub-hero__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sub-hero--compact .sub-hero__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.sub-hero--compact .sub-hero__actions {
  display: flex;
  gap: var(--space-2);
}
.sub-hero--compact .sub-hero__manage {
  width: auto;
  font-size: var(--text-sm);
  padding: 6px var(--space-4);
  border-radius: var(--radius-sm);
}
.sub-hero--compact .sub-hero__refresh {
  font-size: var(--text-sm);
  padding: 6px var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sub-hero--compact .sub-hero__renewal {
  font-size: var(--text-sm);
}
.sub-hero__spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: datadoc-spin var(--animation-spin) linear infinite;
}

/* Carte code promo */
.promo-card {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.promo-card__label {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--text);
}
.promo-card__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.promo-card__input {
  flex: 1;
  padding: 8px var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.promo-card__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.promo-card__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.promo-card__btn {
  padding: 8px var(--space-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.promo-card__msg {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}
.promo-card__msg--ok { color: var(--color-success); }
.promo-card__msg--err { color: var(--color-danger); }

/* Updater card */
.updater-card {
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-4);
}
.updater-card__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.updater-card__info {
  flex: 1;
  min-width: 240px;
}
.updater-card__title {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--text);
}
.updater-card__meta {
  font-size: var(--text-base);
  color: var(--text-2);
}
.updater-card__hint {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: var(--space-2);
}
.updater-card__hint--ok { color: var(--color-success); }
.updater-card__hint--err { color: var(--color-danger); }
.updater-card__hint--badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: 999px;
  font-weight: 600;
  width: fit-content;
}
.updater-card__progress {
  margin-top: var(--space-2);
  height: 4px;
  width: 100%;
  max-width: 280px;
  background: rgba(var(--text-rgb), 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.updater-card__progress-fill {
  height: 100%;
  background: var(--btn-gradient);
  transition: width var(--transition-base);
}
.updater-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.updater-card__btn {
  font-size: var(--text-base);
  padding: 10px var(--space-5);
}
.updater-card__exportmsg {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: var(--space-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE POLISH — mars 2026
   Touch targets, modales plein ecran, safe areas iOS, anti-zoom inputs
   ══════════════════════════════════════════════════════════════════════════ */


/* ── FilterConfig (composant unifié de filtres débourse) ──────────────── */
.filter-config {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.filter-config__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.filter-config__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.filter-config__group {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.filter-config__group-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.2s;
}
.filter-config__group-header:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--panel));
}
.filter-config__group-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.filter-config__group-label {
  flex: 1;
  text-align: left;
}
.filter-config__group-count {
  font-size: 11px;
  font-weight: 500;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
  line-height: 16px;
}
.filter-config__group-body {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg);
}
.filter-config__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s, opacity 0.2s;
}
.filter-config__item:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.filter-config__item--off {
  opacity: 0.6;
  background: color-mix(in srgb, var(--danger) 4%, transparent);
}
.filter-config__item-content {
  flex: 1;
  min-width: 0;
}
.filter-config__item-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.filter-config__item--off .filter-config__item-label {
  color: var(--muted);
}
.filter-config__item-desc {
  font-size: 11px;
  color: var(--muted);
}
.filter-config__tags-field {
  padding: 6px 8px;
}
.filter-config__tags-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}
.filter-config__tags-desc {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}
.filter-config__tags-field input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
}
.filter-config__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: var(--space-2);
}
/* Section Date du devis (DateColumnSettings) */
.filter-config__date {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 6px 8px;
}
.filter-config__date-modes {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-config__date-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 6px 0 4px;
}
.filter-config__date-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.filter-config__date-radio:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.filter-config__date-radio input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--primary);
}
.filter-config__date-radio-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.filter-config__date-radio-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.filter-config__date-excel {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--border);
  background: color-mix(in srgb, var(--primary) 3%, var(--panel));
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.filter-config__date-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.filter-config__date-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.filter-config__date-field-desc {
  font-size: 11px;
  color: var(--muted);
}
.filter-config__date-field input[type="text"],
.filter-config__date-field input[type="number"],
.filter-config__date-field select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.filter-config__date-field input[type="text"]:focus,
.filter-config__date-field input[type="number"]:focus,
.filter-config__date-field select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.filter-config__date-field-row {
  display: flex;
  gap: 8px;
}
.filter-config__date-field-row > .filter-config__date-field {
  flex: 1;
}
.filter-config__date-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.filter-config__date-checkbox input[type="checkbox"] {
  accent-color: var(--primary);
}
.filter-config__date-checkbox-hint {
  color: var(--muted);
  font-size: 11px;
  margin-left: 4px;
}
/* Compact mode */
.filter-config--compact .filter-config__title {
  font-size: 12px;
  margin-bottom: 4px;
}
.filter-config__compact-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.filter-config__compact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, opacity 0.15s;
  font-size: 12px;
}
.filter-config__compact-item:hover {
  background: color-mix(in srgb, var(--primary) 4%, transparent);
}
.filter-config__compact-item--off {
  opacity: 0.55;
}
.filter-config__compact-label {
  color: var(--text);
}
.filter-config__compact-item--off .filter-config__compact-label {
  color: var(--muted);
}
.filter-config__compact-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}
/* Dual filter layout (bibliothèque + analyse côte à côte) */
.filter-config-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.filter-config-dual__panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--bg);
}
.filter-config-dual__panel--library {
  border-color: var(--primary);
}
.filter-config-dual__panel--analysis {
  border-color: var(--warning);
}
.filter-config-dual__panel-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-config-dual__panel--library .filter-config-dual__panel-title {
  color: var(--primary);
}
.filter-config-dual__panel--analysis .filter-config-dual__panel-title {
  color: var(--warning);
}
.filter-config-dual__panel-desc {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .filter-config-dual {
    grid-template-columns: 1fr;
  }
}

.columns-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.debourse-columns-card input,
.debourse-columns-card textarea,
.debourse-columns-card select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  transition:
    border-color var(--transition-base) ease,
    box-shadow var(--transition-base) ease;
}

.debourse-columns-card input::placeholder,
.debourse-columns-card textarea::placeholder {
  color: var(--muted);
}

.debourse-columns-card input:focus,
.debourse-columns-card textarea:focus,
.debourse-columns-card select:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.debourse-columns-header {
  padding: var(--space-1) 0;
}

.debourse-columns-title {
  font-weight: 600;
  color: var(--text);
}

.debourse-columns-toggle {
  color: var(--muted);
}

.debourse-columns-stats .pill {
  box-shadow: 0 6px 16px var(--shadow);
}

.debourse-column-card {
  box-shadow: 0 10px 22px var(--shadow);
}

.debourse-column-card__handle {
  opacity: 0.7;
}

.debourse-column-card__order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 600;
}

.debourse-column-card__badges .pill {
  border-radius: var(--radius-full);
}

.debourse-column-field .muted {
  opacity: 0.75;
}

.debourse-column-variants__header label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.variants-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.variant-row {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) 10px;
}

.variant-row.is-disabled {
  opacity: 0.6;
}

.variant-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  align-items: center;
}

.debourse-column-occurrence input[type="number"] {
  text-align: center;
}

.debourse-column-options .debourse-toggle-chip {
  background: var(--surface-2);
}

.debourse-columns-add {
  background: var(--surface-2);
}

@media (max-width: 900px) {
  .columns-grid {
    grid-template-columns: 1fr;
  }
}

.actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: 10px;
}

.list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.preview-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.preview-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-2);
  min-height: 0;
}

.preview-filename {
  font-size: var(--text-xs);
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.preview-image {
  width: 100%;
  flex: 1;
  min-height: 420px;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.preview-actions {
  display: flex;
  align-items: center;
  padding-top: var(--space-2);
}

.pv-action-group {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.pv-action-btn {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
  cursor: pointer;
  padding: 0 16px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all var(--transition-fast);
}
.pv-action-btn svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.pv-action-btn:hover svg {
  opacity: 1;
}
.pv-action-btn--open:hover {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.18);
}
.pv-action-btn--share:hover {
  background: rgba(139, 92, 246, 0.10);
  border-color: rgb(139, 92, 246);
  color: rgb(139, 92, 246);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.18);
}
.pv-action-btn:active {
  transform: scale(0.98);
}
.pv-action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.pv-action-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .list { grid-template-columns: 1fr; }
}

.variants-list {
  display: grid;
  gap: 6px;
}

.variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.02);
}

.variant-row.is-disabled {
  opacity: 0.6;
}

.variant-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text);
}

.variant-check input {
  margin: 0;
}

.variant-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.preview-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.img-skeleton {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 40%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 60%, transparent 100%),
    repeating-linear-gradient(
      -45deg,
      var(--pill),
      var(--pill) 12px,
      var(--border) 12px,
      var(--border) 24px
    );
  background-size: 200% 100%, 34px 34px;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  opacity: 0.8;
}
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0, 0 0; }
  100% { background-position: 200% 0, 0 0; }
}

/* =====================================================
   THEMED LIBRARY PAGE
   ===================================================== */
/* ─── Layout ─── */
.content:has(.tl-page) {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.content:has(.memoir-shell) {
  padding: 0;
  overflow: hidden;
}

.content:has(.mt-page) {
  padding: 0;
  overflow: hidden;
}
.tl-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tl-page .page-subtitle {
  color: var(--muted);
  margin: var(--space-1) 0 0;
  font-size: 0.92rem;
}
.tl-layout {
  display: flex;
  gap: var(--space-4);
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* ─── Sidebar ─── */
.tl-sidebar {
  width: 260px;
  min-width: 220px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tl-sidebar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.04), transparent);
}
.tl-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.tl-toolbar__counter {
  font-size: 0.85rem;
  color: var(--muted);
}
.tl-counter-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tl-create-btn {
  flex: none;
  white-space: nowrap;
  font-size: 0.92rem;
  padding: 9px 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  background: var(--primary);
  color: #0b1620;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 1px 4px rgba(0, 0, 0, 0.2);
}
.tl-create-btn:hover { opacity: 0.92; transform: translateY(-1px); }
.tl-create-btn:active { transform: translateY(0); }
.tl-create-btn__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(11, 22, 32, 0.18);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}
.tl-sync-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tl-sync-btn:hover { background: rgba(var(--primary-rgb), 0.08); color: var(--primary); border-color: rgba(var(--primary-rgb), 0.4); }
.tl-workflow-btn {
  flex: none;
  white-space: nowrap;
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  color: var(--primary);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.tl-workflow-btn:hover:not(:disabled) { background: rgba(var(--primary-rgb), 0.18); transform: translateY(-1px); }
.tl-workflow-btn:disabled { opacity: 0.6; cursor: wait; }
.tl-workflow-btn .tl-workflow-icon { font-size: 1.05rem; line-height: 1; }

/* ─── Library grid (cards) ─── */
.tl-libraries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.tl-libraries-empty {
  padding: 32px 20px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  margin-bottom: 20px;
}
.tl-libraries-empty p { margin: 4px 0; font-size: 0.92rem; }
.tl-libraries-empty p:first-child { color: var(--text); font-weight: 500; }

.tl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  overflow: hidden;
}
.tl-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: transparent;
  transition: background 0.15s;
}
.tl-card:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.05), var(--panel));
  transform: translateY(-1px);
}
.tl-card:hover::before { background: rgba(var(--primary-rgb), 0.35); }
.tl-card--active {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), var(--panel));
}
.tl-card--active::before { background: var(--primary); }

.tl-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 24px;
}
.tl-card__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tl-card--active .tl-card__name { color: var(--primary); }
.tl-card__web-badge {
  color: var(--muted);
  opacity: 0.7;
  flex-shrink: 0;
  display: inline-flex;
}

.tl-card__meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tl-card__count {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tl-card--active .tl-card__count { color: var(--primary); }
.tl-card__count-label {
  font-size: 0.78rem;
  color: var(--muted);
}

.tl-card__del {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.tl-card:hover .tl-card__del { opacity: 0.7; }
.tl-card__del:hover { opacity: 1 !important; color: #ef4444; background: rgba(239, 68, 68, 0.1); }
.tl-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
  flex: 1;
}
.tl-empty {
  color: var(--muted);
  font-size: var(--text-base);
  text-align: center;
  padding: 24px 8px;
}

.debourse-error-card {
  margin-top: var(--space-3);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(
    135deg,
    rgba(208, 77, 62, 0.18),
    rgba(208, 77, 62, 0.08)
  );
  border: 1px solid rgba(208, 77, 62, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.debourse-error-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: #f2d7d4;
  letter-spacing: 0.2px;
}

.debourse-error-sub {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: rgba(242, 215, 212, 0.8);
}

.debourse-error-path {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(242, 215, 212, 0.7);
  word-break: break-all;
}

.debourse-error-section {
  margin-top: 10px;
}

.debourse-error-label {
  font-size: var(--text-xs);
  color: rgba(242, 215, 212, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}

.debourse-error-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.debourse-error-chip {
  padding: 4px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  background: rgba(242, 215, 212, 0.15);
  border: 1px solid rgba(242, 215, 212, 0.3);
  color: rgba(242, 215, 212, 0.95);
}

.debourse-error-chips.is-muted .debourse-error-chip {
  background: rgba(var(--text-rgb), 0.06);
  border-color: rgba(var(--text-rgb), 0.12);
  color: rgba(var(--text-rgb), 0.7);
}

.debourse-error-hint {
  margin-top: 6px;
  font-size: var(--text-xs);
  color: rgba(242, 215, 212, 0.6);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEBOURSE AI PANEL — Panneau de raisonnement IA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Panel IA Debourse ── */
.deb-ai-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(var(--primary-rgb), 0.06);
  margin-bottom: var(--space-3);
  transform-origin: top center;
}
.deb-ai-panel.is-done {
  border-color: rgba(74, 222, 128, 0.25);
}

.deb-ai-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
  background: rgba(var(--primary-rgb), 0.04);
}
.deb-ai-panel.is-done .deb-ai-panel__header {
  background: rgba(74, 222, 128, 0.04);
  border-bottom-color: rgba(74, 222, 128, 0.1);
}

.deb-ai-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.deb-ai-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.deb-ai-panel__percent {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.deb-ai-panel__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
}
.deb-ai-panel__clear:hover {
  background: rgba(var(--text-rgb), 0.06);
  color: var(--text);
}

.deb-ai-panel__stats {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── Dot ── */
.deb-ai-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
  transition: all 0.3s;
}
.deb-ai-dot--live {
  background: #4ade80;
  box-shadow: 0 0 3px rgba(74, 222, 128, 0.3);
}
.deb-ai-dot--done {
  background: #4ade80;
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.3);
}

/* ── Progress bar ── */
.deb-ai-progress {
  height: 3px;
  background: rgba(var(--primary-rgb), 0.1);
  overflow: hidden;
  flex-shrink: 0;
}
.deb-ai-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.7));
  border-radius: 0 3px 3px 0;
  transition: width 0.5s ease;
}

/* ── Pipeline steps ── */
.deb-ai-steps {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  overflow-x: auto;
}
.deb-ai-step {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.5;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.deb-ai-step.is-active {
  opacity: 1;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.07);
}
.deb-ai-step.is-done {
  opacity: 0.7;
  color: #4ade80;
}
.deb-ai-step__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.deb-ai-step.is-active .deb-ai-step__dot {
  animation: deb-ai-pulse 1.2s ease-in-out infinite;
}
.deb-ai-step__label {}

/* ── Context badges ── */
.deb-ai-badges {
  display: flex;
  gap: 6px;
  padding: 0 14px 6px;
}
.deb-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.62rem;
  font-weight: 600;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  letter-spacing: 0.02em;
}

/* ── Current line ── */
.deb-ai-panel__current {
  padding: 6px 14px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  animation: deb-ai-current-in 0.2s ease;
}
@keyframes deb-ai-current-in {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
.deb-ai-panel__current-label {
  font-size: 0.68rem;
  color: var(--muted);
  flex-shrink: 0;
}
.deb-ai-panel__current-line {
  font-size: 0.78rem;
  color: var(--text);
  opacity: 0.85;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Warning ── */
.deb-ai-panel__warning-summary {
  font-size: 0.68rem;
  color: var(--color-warning);
  font-weight: 500;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Error ── */
.deb-ai-panel__error {
  margin: 6px 14px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  color: var(--color-danger);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ── Details toggle ── */
.deb-ai-panel__details {
  border-top: 1px solid rgba(var(--primary-rgb), 0.08);
}
.deb-ai-panel__details-toggle {
  padding: 6px 14px;
  font-size: 0.68rem;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
  display: flex;
  align-items: center;
  gap: 5px;
  list-style: none;
}
.deb-ai-panel__details-toggle::-webkit-details-marker { display: none; }
.deb-ai-panel__details-toggle:hover { color: var(--text); }
.deb-ai-panel__details-toggle svg {
  transition: transform 0.2s ease;
}
.deb-ai-panel__details[open] .deb-ai-panel__details-toggle svg {
  transform: rotate(180deg);
}

/* ── Log list ── */
.deb-ai-panel__list {
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 4px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 180px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.15) transparent;
  animation: deb-ai-list-in 0.2s ease;
}
@keyframes deb-ai-list-in {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 180px; }
}

/* ── Entry ── */
.deb-ai-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.66rem;
  border-left: 2px solid transparent;
  min-height: 20px;
}
.deb-ai-entry__label {
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deb-ai-entry__time {
  font-size: 0.58rem;
  color: var(--muted);
  opacity: 0.4;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.deb-ai-entry--ai-step    { border-left-color: #818cf8; }
.deb-ai-entry--ai-warning { border-left-color: #fbbf24; }
.deb-ai-entry--row-done   { border-left-color: #4ade80; }
.deb-ai-entry--skip       { border-left-color: #94a3b8; }
.deb-ai-entry--default    { border-left-color: var(--border); }

.tl-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.tl-item:hover {
  border-color: var(--primary);
}
.tl-item--active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}
.tl-item__name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-item__web-badge {
  font-size: 0.7rem;
  margin-left: 4px;
  opacity: 0.6;
}
.tl-item__count {
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--pill);
  padding: 2px 7px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.tl-item__del {
  font-size: 1.1rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  flex-shrink: 0;
}
.tl-item:hover .tl-item__del {
  opacity: 1;
}
.tl-item__del:hover {
  color: var(--color-danger);
}

/* ─── Main content ─── */
.tl-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow: hidden;
}
.tl-main > .card.table-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tl-main > .card.table-card > .table-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* cf. components.css : reserve la place de la scrollbar Windows */
  scrollbar-gutter: stable;
}

/* ─── Placeholder ─── */
.tl-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--panel);
  margin-top: 4px;
}
.tl-placeholder__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.tl-placeholder__sub {
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 420px;
  line-height: 1.5;
}

/* ─── Search bar ─── */
.tl-search-wrap {
  position: relative;
  margin: 0 16px;
}
.tl-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.tl-search {
  width: 100%;
  padding: 7px 12px 7px 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: var(--text-base);
  color: var(--text);
  font-family: inherit;
}
.tl-search:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.12);
}

/* ─── Variant rows ─── */
.tl-variant-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: 11px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast);
}
.tl-variant-btn:hover {
  background: rgba(var(--primary-rgb), 0.2);
}
.tl-variant-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 600;
}
.tl-row--expanded > td {
  border-bottom: none;
}
.tl-variant-row {
  background: rgba(var(--primary-rgb), 0.03);
}
.tl-variant-row td {
  border-top: 1px dashed var(--border);
}
.tl-variant-designation {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-base);
  color: var(--muted);
  padding-left: 12px;
}

/* ─── Creation modal ─── */
.tl-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-modal {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.tl-modal h2 {
  margin: 0 0 var(--space-4);
  font-size: 1.1rem;
}
.tl-hint {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
}
.tl-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.92rem;
  cursor: pointer;
  margin: var(--space-2) 0;
}
.tl-error {
  color: var(--color-danger);
  font-size: var(--text-base);
  margin-top: var(--space-2);
}
.tl-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: 16px;
}
.tl-primary-btn {
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.92rem;
  transition: opacity var(--transition-fast);
}
.tl-primary-btn:hover {
  opacity: 0.9;
}
.tl-primary-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ─── Color context menu ─── */
.tl-color-menu {
  position: fixed;
  z-index: var(--z-modal, 200);
  background: rgba(16, 23, 32, 0.96);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: var(--radius-lg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.tl-color-opt {
  text-align: left;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-base);
  color: rgba(var(--text-rgb), 0.9);
  background: rgba(var(--text-rgb), 0.02);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition:
    background 0.12s,
    border-color 0.12s,
    transform 0.12s;
}
.tl-color-opt:hover {
  background: rgba(var(--text-rgb), 0.08);
  border-color: rgba(var(--text-rgb), 0.14);
}
.tl-color-opt.is-active {
  border-color: rgba(109, 214, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(109, 214, 255, 0.2);
}
.tl-color-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

/* ===========================================================================
   CLOUD FILES SECTION — nouveau système cloud PR4-PR6
   =========================================================================== */

.cfiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

/* ── Two-column body ── */
.cfiles-body {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.cfiles-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Compact rows ── */
.cfiles-rows {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1;
  gap: 3px;
}

.cfiles-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  min-height: 34px;
  transition: background 0.1s;
}

.cfiles-row:hover {
  background: rgba(var(--text-rgb), 0.06);
}

.cfiles-row--error {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.04);
}

.cfiles-row__icon {
  font-size: var(--text-base);
  flex-shrink: 0;
}

.cfiles-row__name {
  flex: 1;
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.cfiles-row__size {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.35);
  width: 52px;
  text-align: right;
}

.cfiles-row__date {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.35);
  white-space: nowrap;
}

.cfiles-row__err {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: #f87171;
  cursor: help;
}

.cfiles-row__actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}

.cfiles-row__cat {
  flex-shrink: 0;
  font-size: var(--text-xs);
  padding: 1px 4px;
  border: 1px solid rgba(var(--text-rgb), 0.15);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--text);
  max-width: 100px;
  cursor: pointer;
}
.cfiles-row__cat:disabled {
  opacity: 0.5;
}

/* ── Empty inline ── */
.cfiles-empty--inline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.4);
  border: 1px dashed rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-sm);
}

/* ── Library right panel ── */
.cfiles-lib-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-left: 1px solid rgba(var(--text-rgb), 0.08);
  padding-left: 14px;
}

/* ── Header ── */
.cfiles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cfiles-header__left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cfiles-header__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.18),
    rgba(139, 92, 246, 0.18)
  );
  border: 1px solid rgba(139, 92, 246, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.cfiles-header__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.cfiles-header__sub {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.45);
  margin-top: 2px;
}

.cfiles-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cfiles-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cfiles-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 6;
}

/* ── Buttons ── */
.cfiles-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  border: 1px solid transparent;
}

.cfiles-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.cfiles-btn--primary {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.9),
    rgba(139, 92, 246, 0.9)
  );
  color: #fff;
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.25);
}

.cfiles-btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35);
  transform: translateY(-1px);
}

.cfiles-btn--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}

.cfiles-btn--danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

.cfiles-btn--sm {
  height: 26px;
  padding: 0 10px;
  font-size: var(--text-xs);
}

.cfiles-select {
  height: 32px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--text-rgb), 0.12);
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
  font-size: var(--text-xs);
  cursor: pointer;
  outline: none;
}
.cfiles-select:focus {
  border-color: rgba(99, 102, 241, 0.5);
}
.cfiles-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 12px;
}
.cfiles-tab {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.cfiles-tab:hover {
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}
.cfiles-tab--active {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.5);
  color: #a5b4fc;
  font-weight: 600;
}
.cfiles-tab--reindex {
  margin-left: auto;
  color: rgba(250, 204, 21, 0.7);
  border-color: rgba(250, 204, 21, 0.2);
}
.cfiles-tab--reindex:hover {
  background: rgba(250, 204, 21, 0.08);
  color: #fcd34d;
}
.cfiles-tab--deleteall {
  color: rgba(248, 113, 113, 0.7);
  border-color: rgba(248, 113, 113, 0.2);
}
.cfiles-tab--deleteall:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
}

.cfiles-badge--type {
  background: rgba(99, 102, 241, 0.12);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.cfiles-btn--ghost {
  background: rgba(var(--text-rgb), 0.04);
  border-color: rgba(var(--text-rgb), 0.1);
  color: rgba(var(--text-rgb), 0.6);
  padding: 8px 12px;
  font-size: var(--text-md);
}

.cfiles-btn--ghost:hover:not(:disabled) {
  background: rgba(var(--text-rgb), 0.08);
  border-color: rgba(var(--text-rgb), 0.18);
  color: var(--text);
}

/* ── Flash message ── */
.cfiles-msg {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  background: rgba(74, 222, 128, 0.08);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.2);
}

.cfiles-msg--error {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.2);
}

/* ── Upload progress ── */
.cfiles-progress-card {
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}

.cfiles-progress-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.cfiles-progress-card__filename {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.cfiles-progress-card__pct {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #a78bfa;
}

.cfiles-progress-card__phase {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.4);
  margin-top: var(--space-2);
}

.cfiles-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--text-rgb), 0.07);
  overflow: hidden;
}

.cfiles-progress-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cfiles-progress-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  animation: cfiles-shimmer 1.5s infinite;
}

@keyframes cfiles-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ── Empty state ── */
.cfiles-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-9) var(--space-6);
  background: rgba(var(--bg-rgb), 0.4);
  border: 2px dashed rgba(139, 92, 246, 0.2);
  border-radius: 16px;
}

.cfiles-empty__icon {
  font-size: 40px;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.cfiles-empty__title {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.cfiles-empty__text {
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.45);
  max-width: 340px;
  line-height: 1.6;
}

/* ── File list ── */
.cfiles-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── File card ── */
.cfiles-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(var(--bg-rgb), 0.5);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: var(--radius-lg);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.cfiles-card:hover {
  border-color: rgba(var(--text-rgb), 0.15);
  background: rgba(var(--bg-rgb), 0.7);
}

.cfiles-card--error {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.04);
}

.cfiles-card__icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--text-rgb), 0.05);
  border-radius: var(--radius-sm);
}

.cfiles-card__body {
  flex: 1;
  min-width: 0;
}

.cfiles-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 5px;
}

.cfiles-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cfiles-card__size,
.cfiles-card__date {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.35);
}

.cfiles-card__error {
  font-size: var(--text-xs);
  color: #fca5a5;
  font-style: italic;
}

.cfiles-card__view {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: #a5b4fc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  transition: all var(--transition-fast) ease;
  margin-right: 4px;
}
.cfiles-card__view:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #c4b5fd;
}
.cfiles-card__view:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cfiles-card__del {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: rgba(var(--text-rgb), 0.3);
  font-size: var(--text-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast) ease;
}

.cfiles-card__del:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
}

.cfiles-card__del:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Status badges ── */
.cfiles-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.cfiles-badge--ok {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.cfiles-badge--pending {
  background: rgba(251, 191, 36, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
  animation: cfiles-badge-pulse 1.5s ease-in-out infinite;
}

@keyframes cfiles-badge-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

.cfiles-badge--waiting {
  background: rgba(var(--text-rgb), 0.06);
  color: rgba(var(--text-rgb), 0.45);
  border: 1px solid rgba(var(--text-rgb), 0.1);
}

.cfiles-badge--error {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── Bibliothèque de prix section ── */
.cfiles-lib-section {
  margin-top: var(--space-6);
  border-top: 1px solid rgba(var(--text-rgb), 0.08);
  padding-top: var(--space-5);
}

.cfiles-lib-section__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cfiles-lib-section__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.cfiles-lib-section__sub {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.45);
}

.cfiles-lib-drop {
  border: 2px dashed rgba(139, 92, 246, 0.35);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  cursor: default;
  transition:
    border-color 0.15s,
    background 0.15s;
  background: rgba(139, 92, 246, 0.04);
}

.cfiles-lib-drop--over {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

.cfiles-lib-drop--uploading {
  border-color: rgba(139, 92, 246, 0.2);
  opacity: 0.6;
}

.cfiles-lib-drop__text {
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.5);
}

.cfiles-lib-drop__text strong {
  color: #a78bfa;
}

.cfiles-lib-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cfiles-lib-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 12px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.07);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.cfiles-lib-item__icon {
  flex-shrink: 0;
  font-size: var(--text-md);
}

.cfiles-lib-item__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.cfiles-lib-item__size {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.4);
}


/* === CONTROLE CONFORMITE === */
/* === Compliance page === */
.compliance-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.compliance-embedded {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compl-header-actions {
  display: flex;
  gap: var(--space-2);
}

/* Doc slots */
.compl-docs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.compl-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 20px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--muted);
  text-align: center;
}
.compl-drop-zone:hover { border-color: rgba(var(--primary-rgb), 0.4); color: var(--text); }
.compl-drop-zone--drag { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.06); }

.compl-drop-zone .dz-picker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); z-index: 5; min-width: 380px; cursor: default; }
.compl-drop-zone .dz-picker__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; background: rgba(var(--primary-rgb), 0.04); border: 1px solid rgba(var(--primary-rgb), 0.14); border-radius: 10px; cursor: pointer; color: var(--text); text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.compl-drop-zone .dz-picker__opt:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.09); transform: translateY(-1px); }
.compl-drop-zone .dz-picker__opt svg { color: var(--primary); margin-bottom: 4px; }
.compl-drop-zone .dz-picker__title { font-size: 0.86rem; font-weight: 600; }
.compl-drop-zone .dz-picker__sub { font-size: 0.74rem; color: var(--muted); }

.compl-doc {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(var(--text-rgb), 0.1);
  background: rgba(12, 18, 30, 0.5);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  position: relative;
}

.compl-doc:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.04);
}

.compl-doc--drag {
  border-color: var(--primary) !important;
  background: rgba(var(--primary-rgb), 0.08) !important;
  border-style: solid;
}

.compl-doc--filled {
  border-style: solid;
  border-color: rgba(var(--primary-rgb), 0.25);
  background: rgba(var(--primary-rgb), 0.04);
}

.compl-doc__icon {
  color: var(--muted);
  flex-shrink: 0;
}

.compl-doc--filled .compl-doc__icon {
  color: var(--primary);
}

.compl-doc__info {
  flex: 1;
  min-width: 0;
}

.compl-doc__label {
  font-weight: 600;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.compl-doc__tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: rgba(var(--text-rgb), 0.06);
  color: var(--muted);
}

.compl-doc__tag--req {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

.compl-doc__name {
  font-size: var(--text-xs);
  color: var(--text);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 6px;
}

.compl-doc__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 6px;
}

.compl-doc__clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  border: none;
  background: rgba(var(--text-rgb), 0.06);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast) ease;
}

.compl-doc:hover .compl-doc__clear {
  opacity: 1;
}

.compl-doc__clear:hover {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

/* Options */
.compl-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compl-modes {
  display: flex;
  gap: var(--space-2);
}

.compl-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  background: rgba(var(--text-rgb), 0.04);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.compl-mode:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  color: var(--text);
}

.compl-mode--active {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.35);
  color: var(--primary);
}

/* Liste des documents (apres drop) — sans card, juste un bloc inline */
.compl-doc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 20px;
}
.compl-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(var(--text-rgb), 0.025);
  border: 1px solid rgba(var(--text-rgb), 0.05);
  transition: background var(--transition-fast) ease, border-color var(--transition-fast) ease;
}
.compl-doc-item:hover {
  background: rgba(var(--primary-rgb), 0.04);
  border-color: rgba(var(--primary-rgb), 0.15);
}
.compl-doc-type {
  background: transparent;
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
  cursor: pointer;
}
.compl-doc-name {
  flex: 1;
  font-size: 0.82rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compl-doc-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.compl-doc-rm:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

/* Options inline (sans card) */
.compl-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: 20px;
}

.compl-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.compl-input {
  width: 100%;
  background: rgba(10, 15, 26, 0.6);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast) ease;
}

.compl-input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.4);
}

.compl-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
  cursor: pointer;
}

.compl-check input[type="checkbox"] {
  accent-color: var(--primary);
}

/* Action button */
.compl-action {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: var(--space-4);
}

.compl-run {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-lg);
  border: none;
  font-weight: 700;
  font-size: var(--text-base);
  color: #fff;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.9),
    rgba(var(--primary-2-rgb), 0.85)
  );
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.15);
  cursor: pointer;
  transition:
    transform var(--transition-fast) ease,
    box-shadow var(--transition-fast) ease;
}

.compl-run:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.22);
}

.compl-run:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.compl-spinner {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid rgba(var(--text-rgb), 0.25);
  border-top-color: #fff;
  animation: compl-spin 0.75s linear infinite;
}

@keyframes compl-spin {
  to {
    transform: rotate(360deg);
  }
}

.compl-action__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}

.compl-error {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  font-size: var(--text-sm);
}

/* Results */
.compl-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.compl-summary {
  border-color: rgba(var(--primary-rgb), 0.2);
}

.compl-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.compl-confidence {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}

.compl-confidence--haut {
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
}

.compl-confidence--moyen {
  background: rgba(250, 204, 21, 0.12);
  color: #fbbf24;
}

.compl-confidence--bas {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.compl-summary__text {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text);
  opacity: 0.9;
}

.compl-summary__stats {
  display: flex;
  gap: var(--space-3);
  margin-top: 18px;
  flex-wrap: wrap;
}

.compl-stat {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
}

.compl-stat--ok {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.compl-stat--warn {
  background: rgba(250, 204, 21, 0.1);
  color: #fbbf24;
}

.compl-stat--err {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

.compl-stat--info {
  background: rgba(var(--primary-2-rgb), 0.1);
  color: var(--primary-2);
}

/* Detail blocks */
.compl-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.compl-block {
  /* Inherits .card background/padding/radius */
}

.compl-block--warn {
  border-left: 3px solid rgba(250, 204, 21, 0.5);
}

.compl-block--err {
  border-left: 3px solid rgba(239, 68, 68, 0.5);
}

.compl-block--ok {
  border-left: 3px solid rgba(var(--primary-rgb), 0.5);
}

.compl-block--info {
  border-left: 3px solid rgba(var(--primary-2-rgb), 0.5);
}

.compl-block__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.compl-block--warn .compl-block__head {
  color: #fbbf24;
}
.compl-block--err .compl-block__head {
  color: #f87171;
}
.compl-block--ok .compl-block__head {
  color: var(--primary);
}
.compl-block--info .compl-block__head {
  color: var(--primary-2);
}

.compl-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compl-list li {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(var(--text-rgb), 0.025);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.compl-list__point {
  font-size: var(--text-sm);
  line-height: 1.65;
}

.compl-list__impact {
  font-size: var(--text-xs);
  color: #fbbf24;
  opacity: 0.85;
}

.compl-list__src {
  font-size: var(--text-xs);
  color: var(--muted);
}

/* Sources row */
.compl-sources__row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.compl-src-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  background: rgba(16, 24, 40, 0.6);
  color: inherit;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.compl-src-btn:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-1px);
}

.compl-src-btn__tag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: rgba(var(--primary-rgb), 0.12);
}

.compl-src-btn__name {
  font-size: var(--text-xs);
  color: var(--text);
  opacity: 0.8;
}

/* Ghost buttons */
.compl-result-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.compl-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.compl-ghost:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  color: var(--text);
}

/* Normes */
.compl-normes {
  /* Inherits .card background/padding/radius */
}

.compl-normes__loading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
}

.compl-normes__content {
  font-size: var(--text-sm);
  line-height: 1.6;
  opacity: 0.9;
}

.compl-normes__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.compl-normes__section {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(var(--text-rgb), 0.025);
  border-left: 3px solid rgba(var(--primary-2-rgb), 0.4);
}

.compl-normes__section-title {
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--primary-2);
}

.compl-normes__section-content {
  font-size: var(--text-sm);
  line-height: 1.7;
  white-space: pre-wrap;
}

.compl-normes__empty {
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--space-2) 0;
}

.compl-normes__refs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(var(--text-rgb), 0.05);
}

.compl-normes__ref {
  font-size: var(--text-xs);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-2-rgb), 0.08);
  color: var(--primary-2);
}

/* History */
.compl-history {
  /* Inherits .card background/padding/radius */
}

.compl-history__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compl-history__item {
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  background: rgba(16, 24, 40, 0.5);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast) ease;
}

.compl-history__item:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
}

.compl-history__docs {
  font-weight: 600;
  font-size: var(--text-sm);
}

.compl-history__date {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}

.compl-history__summary {
  font-size: var(--text-xs);
  opacity: 0.75;
  margin-top: 6px;
  line-height: 1.4;
}

@media (max-width: 700px) {
  .compl-docs {
    grid-template-columns: 1fr;
  }
}

.cloud-doc-item__del {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: rgba(239, 68, 68, 0.6);
  font-size: var(--text-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast) ease;
}

.cloud-doc-item__del:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}


/* ==========================================================================
   PLANNING ASSISTANT
   ========================================================================== */

.planning-assistant {
  margin-top: var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.planning-assistant__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--border);
  gap: var(--space-3);
}

.planning-assistant__header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.planning-assistant__header h4 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.planning-assistant__hint {
  font-size: var(--text-xs);
  color: var(--muted);
}

.planning-assistant__quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(var(--primary-rgb), 0.08);
  border-bottom: 1px solid var(--border);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.planning-assistant__quick-label {
  font-size: var(--text-sm);
  color: var(--text);
}

.planning-assistant__shift-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.planning-assistant__shift-input {
  width: 50px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: center;
}

.planning-assistant__shift-input:focus {
  outline: none;
  border-color: var(--primary);
}

.planning-assistant__messages {
  max-height: 240px;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.planning-assistant__empty {
  color: var(--muted);
  font-size: var(--text-sm);
}

.planning-assistant__empty p {
  margin: 0 0 8px;
}

.planning-assistant__empty ul {
  margin: 0;
  padding-left: var(--space-5);
}

.planning-assistant__empty li {
  margin-bottom: var(--space-1);
  font-style: italic;
}

.planning-assistant__message {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  max-width: 85%;
  font-size: var(--text-sm);
  line-height: 1.4;
}

.planning-assistant__message--user {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.planning-assistant__message--assistant {
  background: rgba(var(--text-rgb), 0.08);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.planning-assistant__message-content {
  white-space: pre-wrap;
}

.planning-assistant__message-tasks {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgba(var(--text-rgb), 0.15);
  font-size: var(--text-xs);
}

.planning-assistant__message-tasks ul {
  margin: 4px 0 0;
  padding-left: var(--space-4);
}

.planning-assistant__message-tasks li {
  margin-bottom: 2px;
}

.planning-assistant__loading {
  color: var(--muted);
  font-style: italic;
}

.planning-assistant__error {
  padding: var(--space-2) var(--space-3);
  margin: 0 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  color: #f87171;
  font-size: var(--text-xs);
}

.planning-assistant__apply {
  padding: var(--space-3);
  background: rgba(var(--primary-rgb), 0.08);
  border-top: 1px solid var(--border);
}

.planning-assistant__apply button {
  width: 100%;
}

.planning-assistant__input {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3);
  border-top: 1px solid var(--border);
}

.planning-assistant__input input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--text-sm);
}

.planning-assistant__input input:focus {
  outline: none;
  border-color: var(--primary);
}

.planning-assistant__input input::placeholder {
  color: var(--muted);
}

.planning-assistant__input button {
  padding: var(--space-2) var(--space-4);
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.planning-assistant__input button:hover:not(:disabled) {
  opacity: 0.9;
}

.planning-assistant__input button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ===== SMART CHAT ===== */
.smart-chat-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
}

.smart-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.smart-chat-header__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.smart-chat-header__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.smart-chat-header__context {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-color);
  color: #fff;
  opacity: 0.8;
}
.smart-chat-header__sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-left: var(--space-1);
}
.smart-chat-header__left > svg {
  color: var(--primary);
  flex-shrink: 0;
}
.smart-chat-icon-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all 0.15s;
}
.smart-chat-icon-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.smart-chat-reset-btn {
  background: rgba(var(--text-rgb), 0.06);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.smart-chat-reset-btn:hover {
  background: rgba(var(--text-rgb), 0.1);
  color: var(--text);
}

/* Body / messages */
.smart-chat-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Empty state */
.smart-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  flex: 1;
}
.smart-chat-empty__icon {
  color: var(--text-secondary);
  opacity: 0.4;
  margin-bottom: 16px;
}
.smart-chat-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.smart-chat-empty__text {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.smart-chat-empty__examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 500px;
}
.smart-chat-empty__example {
  padding: var(--space-2) var(--space-4);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-xl);
  font-size: 0.8rem;
  color: var(--primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.smart-chat-empty__example:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
}
.smart-chat-empty__chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.smart-chat-empty__chip:hover {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}
.smart-chat-index-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-3);
  padding: 8px 14px;
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--muted);
}
.smart-chat-index-count { font-variant-numeric: tabular-nums; }
.smart-chat-index-warn { color: #f59e0b; }

/* Messages */
.smart-chat-msg {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  max-width: 85%;
  animation: sc-msg-appear 0.25s ease-out;
}
.smart-chat-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.smart-chat-msg--assistant {
  align-self: flex-start;
}

.smart-chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--primary),
    #2e7d6a 50%,
    var(--primary-2) 90%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    0 0 14px rgba(var(--primary-rgb), 0.4),
    0 0 30px rgba(var(--primary-rgb), 0.15);
  overflow: hidden;
}
.smart-chat-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(var(--primary-rgb), 0.35) 25%,
    transparent 50%,
    rgba(46, 125, 106, 0.25) 75%,
    transparent 100%
  );
}
.smart-chat-avatar::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(var(--primary-rgb), 0.5),
    transparent 60%
  );
}
.nav-ai-orb {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--primary),
    #2e7d6a 50%,
    var(--primary-2) 90%
  );
  box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.4);
  vertical-align: middle;
  margin-right: 5px;
  margin-top: -1px;
  flex-shrink: 0;
}

.nav-icon {
  margin-right: 5px;
  vertical-align: middle;
  margin-top: -2px;
  flex-shrink: 0;
}

.smart-chat-bubble {
  max-width: 90%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  position: relative;
  overflow-wrap: break-word;
  word-break: normal;
  min-width: 60px;
  flex-shrink: 1;
}
.smart-chat-msg--user .smart-chat-bubble {
  background: var(--accent-color);
  color: #fff;
  margin-left: auto;
  border-radius: 12px 12px 2px 12px;
}
.smart-chat-msg--assistant .smart-chat-bubble {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 2px solid var(--accent-color);
  color: var(--text-primary);
}

.smart-chat-content {
  white-space: pre-wrap;
}
.smart-chat-user-docs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.smart-chat-user-doc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart-chat-user-doc svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.smart-chat-error {
  color: var(--color-danger);
  font-size: 0.85rem;
}

/* Confidence badge */
.smart-chat-confidence {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-lg);
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: var(--space-2);
  margin-right: 6px;
}
.smart-chat-confidence--high {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success);
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.smart-chat-confidence--medium {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.smart-chat-confidence--low {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Intent badge */
.smart-chat-intent {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-lg);
  font-size: 0.72rem;
  font-weight: 500;
  background: rgba(99, 102, 241, 0.1);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.2);
  margin-top: var(--space-2);
}

/* Sources */
.smart-chat-sources {
  margin-top: 10px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(var(--text-rgb), 0.06);
}
.smart-chat-sources__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
}
.smart-chat-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin: 3px 4px 3px 0;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.18);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.smart-chat-source:hover {
  background: rgba(99, 102, 241, 0.16);
  border-color: rgba(99, 102, 241, 0.35);
}
.smart-chat-source__page {
  opacity: 0.7;
  font-weight: 600;
}

.smart-chat-sources-preview {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.smart-chat-sources-preview .preview-card {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: none;
}

.smart-chat-sources-preview .preview-image {
  height: 260px;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}

.smart-chat-sources-preview .preview-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.smart-chat-sources-preview .preview-filename {
  font-size: 0.85rem !important;
  color: var(--text) !important;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* In chat context, show button labels (vignettes plus grandes) */
.smart-chat-sources-preview .pv-action-btn span {
  display: inline-block;
}
.smart-chat-sources-preview .pv-action-btn {
  padding: 0;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: var(--radius-full);
}
.smart-chat-sources-preview .pv-action-btn svg {
  width: 16px;
  height: 16px;
}
.smart-chat-sources-preview .pv-action-group {
  justify-content: flex-end;
  gap: 6px;
}

/* Search metadata */
.smart-chat-meta-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 6px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.smart-chat-meta-toggle:hover {
  color: var(--text);
}
.smart-chat-meta {
  margin-top: var(--space-2);
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  animation: sc-slide-down 0.25s ease both;
  transform-origin: top;
}
.smart-chat-meta-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  animation: sc-entry-in 0.2s ease both;
}
.smart-chat-meta-entry:nth-child(1) { animation-delay: 0.04s; }
.smart-chat-meta-entry:nth-child(2) { animation-delay: 0.08s; }
.smart-chat-meta-entry:nth-child(3) { animation-delay: 0.12s; }
.smart-chat-meta-entry:nth-child(4) { animation-delay: 0.16s; }
.smart-chat-meta-entry:nth-child(5) { animation-delay: 0.20s; }
.smart-chat-meta-iter {
  font-weight: 700;
  color: var(--primary);
  min-width: 20px;
}
.smart-chat-meta-query {
  color: var(--text);
  font-style: italic;
}
.smart-chat-meta-count {
  color: var(--muted);
}
.smart-chat-meta-types {
  padding: 1px 6px;
  background: rgba(var(--text-rgb), 0.06);
  border-radius: var(--radius-xs);
  color: var(--muted);
  font-size: 0.7rem;
}
.smart-chat-meta-strategy {
  color: rgba(245, 158, 11, 0.8);
  font-size: 0.7rem;
}

/* Thinking / loading */
.smart-chat-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.smart-chat-thinking__dots {
  display: flex;
  gap: var(--space-1);
}
.smart-chat-thinking__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-color);
  display: inline-block;
  animation: sc-dot-pulse 1.2s infinite;
  opacity: 0.3;
}
.smart-chat-thinking__dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.smart-chat-thinking__dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes sc-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.3); }
}
.smart-chat-thinking__text {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
  opacity: 0.7;
  min-width: 0;
}
/* Compact variant for non-chat contexts (debourse, etc.) */
.smart-chat-thinking--compact {
  gap: var(--space-2);
}
.smart-chat-thinking--compact .smart-chat-thinking__dots span {
  width: 3px;
  height: 3px;
}
.smart-chat-thinking--compact .smart-chat-thinking__text {
  font-size: 0.72rem;
}

.cell-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.cell-loading-dots span {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgba(var(--text-rgb), 0.7);
  animation: smartchat-dot 1.2s infinite;
}
.cell-loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.cell-loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

.smart-chat-cancel-x {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.smart-chat-cancel-x:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.22);
}
.smart-chat-cancel-x:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Footer / input */
.smart-chat-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}
.smart-chat-warning {
  font-size: var(--text-sm);
  color: #f59e0b;
  margin-bottom: var(--space-2);
  padding: 6px 10px;
  background: rgba(245, 158, 11, 0.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(245, 158, 11, 0.2);
}
.smart-chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px 4px 4px 12px;
  transition: border-color 0.15s;
}
.smart-chat-input-row:focus-within {
  border-color: var(--accent-color);
}
.smart-chat-textarea {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
  outline: none;
  padding: 8px 0;
  min-height: 20px;
  max-height: 120px;
  font-family: inherit;
}
.smart-chat-textarea::placeholder {
  color: var(--text-secondary);
}
.smart-chat-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.smart-chat-send-btn {
  background: var(--accent-color);
  border: none;
  color: #fff;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.smart-chat-send-btn:hover { opacity: 0.85; }
.smart-chat-send-btn:disabled { opacity: 0.3; cursor: default; }
.smart-chat-cancel-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.smart-chat-cancel-btn:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* Attach button */
.smart-chat-attach-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.smart-chat-attach-btn:hover { color: var(--text-primary); }
.smart-chat-attach-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Doc chips */
.smart-chat-docs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.smart-chat-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.76rem;
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  color: var(--primary);
}
.smart-chat-doc-chip__name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.smart-chat-doc-chip__remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--text-base);
  line-height: 1;
  padding: 0 2px;
  border-radius: var(--radius-full);
  transition: color var(--transition-fast);
}
.smart-chat-doc-chip__remove:hover {
  color: var(--color-danger);
}

/* Docs in sent messages */
.smart-chat-msg-docs--above {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: flex-end;
  margin-bottom: var(--space-1);
  padding: 0 24px;
}
.smart-chat-msg-doc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  opacity: 0.85;
}

/* Drag overlay */
.smart-chat-dragging {
  position: relative;
}
.smart-chat-dragging::after {
  content: "Deposer le document ici";
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(var(--bg-rgb, 20, 20, 30), 0.85);
  border: 2px dashed var(--primary);
  border-radius: var(--radius-lg);
  pointer-events: none;
}

/* Spin animation for loading */
@keyframes smart-chat-spin-kf {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.smart-chat-spin {
  animation: smart-chat-spin-kf 1s linear infinite;
}

/* ── Library Table Card (SmartChat search_library) ────────────────────────── */
.sc-lib-card {
  margin-top: 14px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.22);
  background: rgba(10, 12, 24, 0.45);
  font-size: 0.78rem;
}
.sc-lib-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background: rgba(99, 102, 241, 0.12);
  border-bottom: 1px solid rgba(99, 102, 241, 0.18);
  gap: var(--space-2);
  flex-wrap: wrap;
}
.sc-lib-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(var(--text-rgb), 0.65);
}
.sc-lib-card__icon {
  flex-shrink: 0;
  opacity: 0.55;
}
.sc-lib-card__source {
  font-size: var(--text-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  font-weight: 500;
}
.sc-lib-card__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sc-lib-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-full);
  font-size: 0.71rem;
  line-height: 1.5;
  white-space: nowrap;
}
.sc-lib-badge--query {
  background: rgba(99, 102, 241, 0.18);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.35);
  font-style: italic;
}
.sc-lib-badge--count {
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-weight: 700;
}
.sc-lib-table-wrap {
  overflow-x: auto;
  max-height: 340px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
}
.sc-lib-table-wrap::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.sc-lib-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 3px;
}
.sc-lib-table {
  width: 100%;
  min-width: 380px;
  border-collapse: collapse;
  font-size: 0.76rem;
}
.sc-lib-th {
  position: sticky;
  top: 0;
  padding: 6px 10px;
  text-align: left;
  font-weight: 700;
  font-size: 0.71rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(var(--text-rgb), 0.6);
  background: rgba(14, 16, 32, 0.98);
  border-bottom: 1px solid rgba(99, 102, 241, 0.2);
  white-space: nowrap;
  z-index: 1;
}
.sc-lib-th--wide {
  min-width: 200px;
  max-width: 340px;
}
.sc-lib-td {
  padding: 5px 10px;
  color: rgba(var(--text-rgb), 0.88);
  border-bottom: 1px solid rgba(var(--text-rgb), 0.04);
  vertical-align: top;
  max-width: 300px;
  word-break: break-word;
  line-height: 1.45;
}
.sc-lib-tr--even {
  background: rgba(255, 255, 255, 0.025);
}
.sc-lib-tr--odd {
  background: transparent;
}
.sc-lib-tr--even:hover,
.sc-lib-tr--odd:hover {
  background: rgba(99, 102, 241, 0.1);
  transition: background var(--transition-fast) ease;
}
.sc-lib-card__footer {
  padding: 5px 12px;
  font-size: 0.7rem;
  color: rgba(var(--text-rgb), 0.38);
  background: rgba(0, 0, 0, 0.12);
  text-align: center;
  border-top: 1px solid rgba(var(--text-rgb), 0.05);
  font-style: italic;
}

/* ── Smart Chat v2 — Confidence bar ──────────────────────────────────── */
.smart-chat-confidence-bar {
  position: relative;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  margin: 8px 0 4px;
  overflow: hidden;
}
.smart-chat-confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.sc-conf--high { background: var(--color-success); }
.sc-conf--medium { background: #f59e0b; }
.sc-conf--low { background: var(--color-danger); }
.smart-chat-confidence-label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* ── Smart Chat v2 — Suggestions ──────────────────────────────────────── */
.smart-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.smart-chat-suggestion-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.3;
}
.smart-chat-suggestion-btn:hover {
  background: var(--accent-color);
  color: #fff;
  border-color: var(--accent-color);
}

/* ── Smart Chat v2 — Warnings ──────────────────────────────────────── */
.smart-chat-warnings {
  margin-bottom: 8px;
}
.smart-chat-warning-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 10px;
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: #92400e;
  margin-bottom: 4px;
  line-height: 1.4;
}
.smart-chat-warning-item::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 11px;
  height: 11px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2392400e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── Smart Chat v2 — Source excerpts ──────────────────────────────────── */
.smart-chat-source__excerpt {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border-left: 2px solid var(--accent-color);
  border-radius: 0 4px 4px 0;
  font-size: 11px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* ── Smart Chat v2 — Source relevance badges ──────────────────────────── */
.smart-chat-source__rel {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 6px;
  font-weight: 500;
  text-transform: capitalize;
}
.smart-chat-source__rel--haute {
  background: #dcfce7;
  color: #166534;
}
.smart-chat-source__rel--moyenne {
  background: #fef9c3;
  color: #854d0e;
}
.smart-chat-source__rel--basse {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Smart Chat v2 — Multi-intent badges ──────────────────────────────── */
.smart-chat-intent {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.smart-chat-intent-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* ── Smart Chat v2 — Cloud source indicator ───────────────────────────── */
.smart-chat-source--cloud {
  opacity: 0.7;
  position: relative;
}
.smart-chat-source--cloud::after {
  content: "";
  margin-left: 4px;
  display: inline-block;
  width: 11px;
  height: 11px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/* ── Smart Chat v2 — Message animations ───────────────────────────────── */
@keyframes sc-msg-appear {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Smart Chat v2 — Improved source card layout ──────────────────────── */
.smart-chat-source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.smart-chat-warning-item {
  background: #422006;
  color: #fbbf24;
  border-left-color: #d97706;
}
.sc-conf--high { background: #16a34a; }
.sc-conf--medium { background: #d97706; }
.sc-conf--low { background: #dc2626; }
.smart-chat-source__excerpt {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.smart-chat-source__rel--haute {
  background: #14532d;
  color: #86efac;
}
.smart-chat-source__rel--moyenne {
  background: #422006;
  color: #fde68a;
}
.smart-chat-source__rel--basse {
  background: #450a0a;
  color: #fca5a5;
}

/* ── Smart Chat v2 — Normes renderer ──────────────────────────────────── */
.sc-normes {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  color: var(--text);
}
.sc-normes__section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.sc-normes__section:last-child { border-bottom: none; }
.sc-normes__section strong { color: var(--text); }
.sc-normes__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
}
.sc-normes__badge--dtu { background: #dbeafe; color: #1e40af; }
.sc-normes__badge--loi { background: #fce7f3; color: #9d174d; }
.sc-normes__badge--chiffres { background: #d1fae5; color: #065f46; }
.sc-normes__badge--attention { background: #fef3c7; color: #92400e; }
.sc-normes__badge--conseil { background: #ede9fe; color: #5b21b6; }
.sc-normes__badge--local { background: #f3f4f6; color: #374151; }
.sc-normes__content {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 4px;
}

/* ── Variante compacte (accordéon) ─────────────────────────────────────── */
.sc-normes--compact {
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.sc-normes__row {
  border-bottom: 1px solid var(--border);
}
.sc-normes__row:last-child { border-bottom: none; }
.sc-normes__row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  line-height: 1.3;
  transition: background 120ms ease;
}
.sc-normes__row-head:hover { background: rgba(255,255,255,0.03); }
.sc-normes__row.is-open .sc-normes__row-head { background: rgba(255,255,255,0.04); }
.sc-normes__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.sc-normes__row-type {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 48px;
}
.sc-normes__row-title {
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-normes__chev {
  flex: 0 0 auto;
  color: var(--muted);
  opacity: 0.7;
}
.sc-normes__row-body {
  padding: 4px 10px 10px 32px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.92;
}
.sc-normes__row-fallback {
  white-space: pre-wrap;
}
.sc-normes__kv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px 12px;
}
.sc-normes__kv-item {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--border);
}
.sc-normes__kv-item:last-child { border-bottom: none; }
.sc-normes__kv-key {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}
.sc-normes__kv-val {
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Smart Chat v2 — Compliance renderer ──────────────────────────────── */
.sc-compliance {
  margin-top: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px;
}
.sc-compliance__score {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sc-compliance__score-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.sc-compliance__score-label {
  font-size: 12px;
  color: var(--text-secondary);
}
.sc-compliance__stats {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sc-compliance__stat {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 500;
}
.sc-compliance__stat--ok { background: #dcfce7; color: #166534; }
.sc-compliance__stat--warn { background: #fef9c3; color: #854d0e; }
.sc-compliance__stat--err { background: #fee2e2; color: #991b1b; }
.sc-compliance__summary {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.sc-compliance__actions {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}
.sc-compliance__action {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.sc-compliance__action::before {
  content: "→";
  flex-shrink: 0;
  color: var(--accent-color);
}

.sc-normes__badge--dtu { background: #1e3a5f; color: #93c5fd; }
.sc-normes__badge--loi { background: #4a1942; color: #f9a8d4; }
.sc-normes__badge--chiffres { background: #064e3b; color: #6ee7b7; }
.sc-normes__badge--attention { background: #422006; color: #fde68a; }
.sc-normes__badge--conseil { background: #2e1065; color: #c4b5fd; }
.sc-normes__badge--local { background: #1f2937; color: #9ca3af; }
.sc-compliance__stat--ok { background: #14532d; color: #86efac; }
.sc-compliance__stat--warn { background: #422006; color: #fde68a; }
.sc-compliance__stat--err { background: #450a0a; color: #fca5a5; }

/* ===== COACH AO CHAT ===== */
.coach-ao-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 380px; max-width: 100vw; z-index: var(--z-overlay);
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
  animation: slideFromRight 0.25s ease-out;
}
@keyframes slideFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
.coach-ao-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 0.95rem;
}
.coach-ao-panel__messages {
  flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 16px;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.coach-ao-panel__msg {
  padding: 10px 14px; border-radius: var(--radius-lg);
  font-size: 0.85rem; max-width: 85%;
  line-height: 1.5;
}
.coach-ao-panel__msg--user {
  align-self: flex-end;
  background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.coach-ao-panel__msg--ai {
  align-self: flex-start;
  background: var(--bg-2);
  color: var(--text-1);
  border-bottom-left-radius: 4px;
}
.coach-ao-panel__input-wrap {
  display: flex; gap: var(--space-2);
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.coach-ao-panel__input {
  flex: 1; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 14px; background: var(--bg-1); color: var(--text-1);
  font-size: 0.85rem; outline: none;
}
.coach-ao-panel__send {
  padding: 8px 16px; border-radius: var(--radius-md); border: none;
  background: var(--accent); color: #fff; font-weight: 600;
  cursor: pointer; font-size: 0.85rem;
}

/* ── Super Chat Panel ──────────────────────────────────────────────── */

.superchat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1098;
}

.superchat-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
}

.superchat-resize-handle {
  position: absolute;
  left: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}
.superchat-resize-handle:hover,
.superchat-resize-handle:active {
  background: rgba(var(--primary-rgb), 0.25);
}
.superchat-panel--open {
  transform: translateX(0);
}
.superchat-panel--expanded {
  /* width controlled by inline style via panelWidth state */
}

.superchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  min-height: 48px;
}
.superchat-header__context {
  font-size: 0.8rem;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  padding: 4px 14px;
  border-radius: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.superchat-header__actions {
  display: flex;
  gap: 6px;
}
.superchat-header__btn {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 1.1rem;
  transition: background 0.15s;
}
.superchat-header__btn:hover {
  background: rgba(var(--text-rgb), 0.06);
}

/* Project context banner */
.superchat-project-context {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(var(--primary-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.superchat-project-context__addr {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
}

.superchat-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.superchat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  gap: 12px;
  opacity: 0.7;
}
.superchat-empty__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.superchat-empty__text {
  font-size: 0.82rem;
  color: var(--text-2);
  max-width: 300px;
}

.superchat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 8px;
}
.superchat-suggestion {
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}
.superchat-suggestion:hover {
  background: rgba(var(--primary-rgb), 0.15);
}

.superchat-msg {
  display: flex;
  gap: 8px;
  max-width: 100%;
}
.superchat-msg--user {
  justify-content: flex-end;
}
.superchat-msg--assistant {
  justify-content: flex-start;
  align-items: flex-end;
}

.superchat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  flex-shrink: 0;
  margin-bottom: 2px;
}

.superchat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  word-break: break-word;
}
.superchat-bubble p { margin-top: 6px; }
.superchat-msg--user .superchat-bubble {
  background: var(--primary);
  color: white;
  border-bottom-right-radius: 4px;
}
.superchat-msg--assistant .superchat-bubble {
  background: var(--surface-3);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.superchat-error {
  color: var(--color-danger);
  font-size: 0.8rem;
}

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

.superchat-docs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.superchat-doc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 0.72rem;
  color: var(--text);
}
.superchat-doc-chip__remove {
  background: none;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.85rem;
  line-height: 1;
}

.superchat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.superchat-input-row textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  max-height: 160px;
  min-height: 36px;
  overflow-y: hidden;
}
.superchat-input-row textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.superchat-attach-btn,
.superchat-send-btn,
.superchat-cancel-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.superchat-attach-btn:hover,
.superchat-send-btn:hover {
  background: rgba(var(--primary-rgb), 0.08);
}
.superchat-send-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.superchat-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  border: none;
  cursor: pointer;
  z-index: 1099;
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.superchat-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(var(--primary-rgb), 0.45);
}

/* Thinking indicator */
.superchat-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-2);
}
.superchat-thinking__dots {
  display: flex;
  gap: 3px;
}
.superchat-thinking__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: superchat-dot 1.4s infinite;
}
.superchat-thinking__dots span:nth-child(2) { animation-delay: 0.2s; }
.superchat-thinking__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes superchat-dot {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* Normes sections */
.superchat-normes { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.superchat-normes__section { background: rgba(var(--text-rgb), 0.03); border-radius: 8px; padding: 10px 12px; }
.superchat-normes__badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 8px;
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 6px;
}
.superchat-normes__content { font-size: 0.78rem; margin-top: 6px; line-height: 1.5; white-space: pre-wrap; }

/* Compliance card */
.superchat-compliance { background: rgba(var(--text-rgb), 0.03); border-radius: 10px; padding: 14px; margin-top: 10px; }
.superchat-compliance__score { font-size: 1.6rem; font-weight: 800; color: var(--primary); }
.superchat-compliance__summary { font-size: 0.8rem; color: var(--text-2); margin: 6px 0 10px; }
.superchat-compliance__stats { display: flex; gap: 8px; flex-wrap: wrap; }
.superchat-compliance__stat {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
}
.superchat-compliance__stat--ok { background: rgba(34,197,94,0.12); color: #16a34a; }
.superchat-compliance__stat--warn { background: rgba(245,158,11,0.12); color: #d97706; }
.superchat-compliance__stat--err { background: rgba(239,68,68,0.12); color: #dc2626; }
.superchat-compliance__actions { margin-top: 10px; }
.superchat-compliance__action { font-size: 0.78rem; padding: 2px 0; color: var(--text); }

/* Source pills in superchat */
.superchat-sources { margin-top: 8px; }
.superchat-sources__title { font-size: 0.72rem; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.superchat-source {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-size: 0.72rem;
  cursor: pointer;
  margin: 2px 4px 2px 0;
  transition: background 0.15s;
}
.superchat-source:hover { background: rgba(var(--primary-rgb), 0.15); }
.superchat-source__page { opacity: 0.7; }

.superchat-nav-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.superchat-nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 10px;
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--primary);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.superchat-nav-btn:hover {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.3);
  transform: translateX(2px);
}
.superchat-nav-btn:active { transform: translateX(2px); }
.superchat-nav-btn__reason { font-weight: 400; opacity: 0.7; font-size: 0.72rem; }

/* ── SuperChat scrollbar ───────────────────────────────────────────── */
.superchat-body::-webkit-scrollbar { width: 6px; }
.superchat-body::-webkit-scrollbar-track { background: transparent; }
.superchat-body::-webkit-scrollbar-thumb { background: rgba(var(--text-rgb), 0.15); border-radius: 3px; }
.superchat-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--text-rgb), 0.25); }

/* ── SuperChat Expanded Mode Overrides ─────────────────────────────── */

/* Body & footer: use full width, more padding */
.superchat-panel--expanded .superchat-body {
  padding: 24px 32px;
}
.superchat-panel--expanded .superchat-footer {
  padding: 12px 32px;
}

/* Text bubbles: capped for readability */
.superchat-panel--expanded .superchat-bubble {
  max-width: min(70%, 640px);
}
.superchat-panel--expanded .superchat-thinking {
  max-width: min(70%, 640px);
}

/* Rich content: use full available width */
.superchat-panel--expanded .superchat-normes,
.superchat-panel--expanded .superchat-compliance,
.superchat-panel--expanded .sc-lib-card,
.superchat-panel--expanded .superchat-actionlog,
.superchat-panel--expanded .superchat-devlog,
.superchat-panel--expanded .superchat-nav-actions,
.superchat-panel--expanded .superchat-sources {
  max-width: 100%;
}

/* Messages: full width */
.superchat-panel--expanded .superchat-msg {
  max-width: 100%;
}

.superchat-panel--expanded .superchat-avatar {
  width: 32px;
  height: 32px;
  font-size: 26px;
}

.superchat-panel--expanded .superchat-empty {
  max-width: 500px;
  margin: 0 auto;
}
.superchat-panel--expanded .superchat-empty__text {
  max-width: 400px;
}

.superchat-panel--expanded .superchat-suggestion {
  font-size: 0.8rem;
  padding: 8px 16px;
}

.superchat-compliance__stat--ok { background: rgba(34,197,94,0.18); color: #4ade80; }
.superchat-compliance__stat--warn { background: rgba(245,158,11,0.18); color: #fbbf24; }
.superchat-compliance__stat--err { background: rgba(239,68,68,0.18); color: #f87171; }
.superchat-overlay { background: rgba(0,0,0,0.5); }

/* ── SuperChat Action Log ──────────────────────────────────────────── */

.superchat-actionlog {
  margin-top: 10px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(var(--text-rgb), 0.08);
  background: rgba(var(--text-rgb), 0.02);
}
.superchat-actionlog__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-2);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s;
}
.superchat-actionlog__toggle:hover {
  background: rgba(var(--text-rgb), 0.04);
}
.superchat-actionlog__summary {
  opacity: 0.8;
}
.superchat-actionlog__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(var(--text-rgb), 0.06);
  animation: sc-slide-down 0.25s ease both;
  transform-origin: top;
}
@keyframes sc-slide-down {
  from { opacity: 0; max-height: 0; transform: scaleY(0.95); }
  to   { opacity: 1; max-height: 600px; transform: scaleY(1); }
}
.superchat-actionlog__entry {
  padding: 8px 12px;
  background: var(--panel);
  animation: sc-entry-in 0.2s ease both;
}
.superchat-actionlog__entry:nth-child(1) { animation-delay: 0.04s; }
.superchat-actionlog__entry:nth-child(2) { animation-delay: 0.08s; }
.superchat-actionlog__entry:nth-child(3) { animation-delay: 0.12s; }
.superchat-actionlog__entry:nth-child(4) { animation-delay: 0.16s; }
.superchat-actionlog__entry:nth-child(5) { animation-delay: 0.20s; }
@keyframes sc-entry-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.superchat-actionlog__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.superchat-actionlog__icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.superchat-actionlog__action {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.superchat-actionlog__badge {
  font-size: 0.68rem;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}
.superchat-actionlog__time {
  font-size: 0.68rem;
  color: var(--text-2);
  opacity: 0.7;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.superchat-actionlog__detail {
  font-size: 0.7rem;
  color: var(--text-2);
  margin-top: 3px;
  padding-left: 30px;
  line-height: 1.4;
  word-break: break-word;
}

/* ── SuperChat Dev Log ─────────────────────────────────────────────── */

.superchat-devlog {
  margin-top: 6px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(139, 92, 246, 0.15);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
.superchat-devlog__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 10px;
  background: rgba(139, 92, 246, 0.04);
  border: none;
  cursor: pointer;
  color: var(--text-2);
  font-size: 0.66rem;
  text-align: left;
  transition: background 0.15s;
  font-family: inherit;
}
.superchat-devlog__toggle:hover {
  background: rgba(139, 92, 246, 0.08);
}
.superchat-devlog__tag {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}
.superchat-devlog__chip {
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(var(--text-rgb), 0.06);
  color: var(--text-2);
  font-weight: 600;
}
.superchat-devlog__chip--warn {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}

.superchat-devlog__body {
  background: rgba(var(--text-rgb), 0.02);
  max-height: 400px;
  overflow-y: auto;
  animation: sc-slide-down 0.25s ease both;
  transform-origin: top;
}
.superchat-devlog__tabs {
  display: flex;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.08);
}
@keyframes sc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.superchat-devlog__tab {
  flex: 1;
  padding: 5px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-2);
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.superchat-devlog__tab:hover { color: var(--text); }
.superchat-devlog__tab--active {
  color: #8b5cf6;
  border-bottom-color: #8b5cf6;
}

.superchat-devlog__section {
  padding: 6px;
  animation: sc-fade-in 0.2s ease both;
}
.superchat-devlog__empty {
  padding: 12px;
  text-align: center;
  font-size: 0.66rem;
  color: var(--text-2);
  opacity: 0.6;
}
.superchat-devlog__item {
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.05);
  animation: sc-entry-in 0.2s ease both;
}
.superchat-devlog__item:nth-child(1) { animation-delay: 0.03s; }
.superchat-devlog__item:nth-child(2) { animation-delay: 0.06s; }
.superchat-devlog__item:nth-child(3) { animation-delay: 0.09s; }
.superchat-devlog__item:nth-child(4) { animation-delay: 0.12s; }
.superchat-devlog__item:nth-child(5) { animation-delay: 0.15s; }
.superchat-devlog__item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.superchat-devlog__fn {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8b5cf6;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
.superchat-devlog__iter {
  font-size: 0.6rem;
  color: var(--text-2);
  opacity: 0.7;
}
.superchat-devlog__dur {
  font-size: 0.6rem;
  color: var(--text-2);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.superchat-devlog__ts {
  font-size: 0.58rem;
  color: var(--text-2);
  opacity: 0.5;
}
.superchat-devlog__kv {
  display: flex;
  gap: 6px;
  padding: 1px 0;
  align-items: flex-start;
}
.superchat-devlog__k {
  font-size: 0.62rem;
  color: #8b5cf6;
  font-weight: 600;
  min-width: 48px;
  flex-shrink: 0;
  opacity: 0.8;
}
.superchat-devlog__v {
  font-size: 0.62rem;
  color: var(--text);
  word-break: break-all;
  white-space: pre-wrap;
  margin: 0;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  line-height: 1.4;
}
.superchat-devlog__v--path {
  opacity: 0.6;
  font-size: 0.58rem;
}
.superchat-devlog__raw {
  font-size: 0.6rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  line-height: 1.4;
  background: rgba(var(--text-rgb), 0.03);
  border-radius: 6px;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* ChatComposer — composer auto-resize + slash + drop                          */
/* ────────────────────────────────────────────────────────────────────────── */
.chat-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.chat-composer__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 8px 8px 8px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chat-composer--focused .chat-composer__row {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.chat-composer--compact .chat-composer__row {
  border-radius: 10px;
  padding: 4px 4px 4px 10px;
}
.chat-composer__textarea {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  outline: none;
  padding: 10px 0;
  min-height: 36px;
  max-height: 240px;
  font-family: inherit;
  overflow-y: auto;
}
.chat-composer--compact .chat-composer__textarea {
  font-size: 13.5px;
  padding: 8px 0;
  min-height: 24px;
  max-height: 160px;
}
.chat-composer__textarea::placeholder {
  color: var(--text-secondary);
}
.chat-composer__textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-composer__attach,
.chat-composer__send,
.chat-composer__cancel {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s, transform 0.15s;
}
.chat-composer__attach {
  width: 36px;
  height: 36px;
  background: transparent;
  color: var(--text-secondary);
}
.chat-composer__attach:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); }
.chat-composer__attach:disabled { opacity: 0.3; cursor: not-allowed; }
.chat-composer__send {
  width: 36px;
  height: 36px;
  background: var(--accent-color);
  color: #fff;
}
.chat-composer__send:hover:not(:disabled) { opacity: 0.9; transform: translateY(-1px); }
.chat-composer__send:disabled { opacity: 0.3; cursor: default; }
.chat-composer__cancel {
  width: 36px;
  height: 36px;
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
}
.chat-composer__cancel:hover { background: rgba(239, 68, 68, 0.22); }
.chat-composer--compact .chat-composer__attach,
.chat-composer--compact .chat-composer__send,
.chat-composer--compact .chat-composer__cancel {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
.chat-composer__hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px;
  font-size: 11px;
  color: var(--text-secondary);
  min-height: 14px;
}
.chat-composer__hint-text {
  opacity: 0.7;
}
.chat-composer__counter {
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.chat-composer__counter--warn { color: var(--color-warning); }
.chat-composer__counter--danger { color: var(--color-danger); }
.chat-composer__spin {
  animation: chat-composer-spin 0.9s linear infinite;
}
@keyframes chat-composer-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ────────────────────────────────────────────────────────────────────────── */
/* QuickReplies — boutons sous message assistant                               */
/* ────────────────────────────────────────────────────────────────────────── */
.chat-quick-replies {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-quick-replies__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  opacity: 0.85;
}
.chat-quick-replies__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chat-quick-replies__btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.chat-quick-replies__btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────────────────────── */
/* ClarificationCard — QCM cliquable                                           */
/* ────────────────────────────────────────────────────────────────────────── */
.chat-clarification {
  background: rgba(59, 130, 246, 0.06);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-clarification__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-color);
  font-weight: 600;
}
.chat-clarification__icon { flex-shrink: 0; }
.chat-clarification__question {
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}
.chat-clarification__options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-clarification__option {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 13.5px;
  transition: background-color 0.15s, border-color 0.15s, transform 0.15s;
}
.chat-clarification__option:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  transform: translateY(-1px);
}
.chat-clarification__option-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-color);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.chat-clarification__other {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-clarification__other-toggle {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.chat-clarification__other-toggle:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.chat-clarification__other-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.chat-clarification__other-input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.chat-clarification__other-input:focus { border-color: var(--accent-color); }
.chat-clarification__other-send,
.chat-clarification__other-cancel {
  border: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: opacity 0.15s, background-color 0.15s;
}
.chat-clarification__other-send {
  background: var(--accent-color);
  color: #fff;
}
.chat-clarification__other-send:disabled { opacity: 0.4; cursor: default; }
.chat-clarification__other-send:hover:not(:disabled) { opacity: 0.9; }
.chat-clarification__other-cancel {
  background: transparent;
  color: var(--text-secondary);
}
.chat-clarification__other-cancel:hover { color: var(--text-primary); }

/* ────────────────────────────────────────────────────────────────────────── */
/* ChatErrorBanner — bandeau erreur in-bubble                                  */
/* ────────────────────────────────────────────────────────────────────────── */
.chat-error-banner {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chat-error-banner__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chat-error-banner__icon {
  color: var(--color-danger);
  flex-shrink: 0;
}
.chat-error-banner__msg {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
}
.chat-error-banner__retry {
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.chat-error-banner__retry:hover { opacity: 0.9; }
.chat-error-banner__hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  opacity: 0.85;
}

/* ────────────────────────────────────────────────────────────────────────── */
/* Drop overlay — drag-and-drop fichiers                                       */
/* ────────────────────────────────────────────────────────────────────────── */
.smart-chat-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.12);
  backdrop-filter: blur(6px);
  border: 2px dashed var(--accent-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
  animation: smart-chat-drop-fadein 0.18s ease-out;
}
.smart-chat-drop-overlay__inner {
  background: var(--bg-secondary);
  border: 1px solid var(--accent-color);
  border-radius: 10px;
  padding: 14px 22px;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
@keyframes smart-chat-drop-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── MarkdownContent — rendu structuré des réponses IA ──────────────────── */
.md-content {
  color: var(--text);
  line-height: 1.55;
  font-size: 14px;
}
.md-content > *:first-child { margin-top: 0; }
.md-content > *:last-child { margin-bottom: 0; }

/* Tableaux Markdown */
.md-content .md-table-wrap {
  margin: 10px 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
}
.md-content .md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
}
.md-content .md-table__th {
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.md-content .md-table__td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.md-content .md-table__tr:last-child .md-table__td {
  border-bottom: none;
}
.md-content .md-table__tr:nth-child(even) .md-table__td {
  background: rgba(255, 255, 255, 0.015);
}

.md-content .md-p {
  margin: 0 0 10px 0;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.md-content .md-h {
  margin: 16px 0 8px 0;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.md-content .md-h-1 { font-size: 18px; }
.md-content .md-h-2 { font-size: 16px; }
.md-content .md-h-3 { font-size: 14.5px; }
.md-content .md-h-4 { font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }

.md-content .md-list {
  margin: 0 0 10px 0;
  padding-left: 22px;
}
.md-content .md-list li {
  margin: 3px 0;
  line-height: 1.55;
}
.md-content .md-ul { list-style: disc; }
.md-content .md-ul li::marker { color: var(--primary); }
.md-content .md-ol { list-style: decimal; }
.md-content .md-ol li::marker { color: var(--primary); font-weight: 600; }

.md-content strong { color: var(--text); font-weight: 700; }
.md-content em { font-style: italic; }

.md-content .md-inline-code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  color: var(--primary);
}

.md-content .md-code-block {
  position: relative;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 12px 0;
  overflow-x: auto;
  font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
}
.md-content .md-code-block code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}
.md-content .md-code-block .md-code-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  background: rgba(20, 28, 38, 0.85);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  z-index: 1;
}
.md-content .md-code-block:hover .md-code-copy,
.md-content .md-code-block .md-code-copy:focus-visible {
  opacity: 1;
}
.md-content .md-code-block .md-code-copy:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.45);
}
.md-content .md-code-block .md-code-copy--ok {
  opacity: 1;
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.55);
  background: rgba(var(--primary-rgb), 0.12);
}

.md-content .md-quote {
  margin: 8px 0 12px 0;
  padding: 6px 12px;
  border-left: 3px solid var(--primary);
  background: rgba(74, 208, 179, 0.06);
  color: var(--muted);
  border-radius: 0 6px 6px 0;
}

.md-content .md-link {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.md-content .md-link:hover { opacity: 0.85; }


/* ── Home Page / Dashboard ─────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════════════
   HOME PAGE — PREMIUM DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */
.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6) var(--space-8);
}

.home-dashboard {
  max-width: 960px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Header — compact greeting + inline stat pills ────────────────────── */
.home-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.home-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.home-greeting {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

.home-header__separator {
  color: var(--muted);
  opacity: 0.4;
  font-size: var(--text-base);
  user-select: none;
}

.home-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: rgba(var(--primary-rgb), 0.06);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}

.home-stat-pill svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.home-date {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
  text-transform: capitalize;
  opacity: 0.7;
}

/* ── Resume chip — small, discreet ────────────────────────────────────── */
.home-resume {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.12), rgba(var(--primary-rgb), 0.04));
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: var(--radius-lg);
  color: var(--primary);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.home-resume::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.home-resume:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.15);
  transform: translateY(-2px);
}

.home-resume:hover::before {
  opacity: 1;
}

.home-resume svg:first-child {
  flex-shrink: 0;
  opacity: 0.7;
}

.home-resume span {
  flex: 1;
}

.home-resume strong {
  font-weight: 700;
  color: var(--text);
}

.home-resume__arrow {
  display: flex;
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.home-resume:hover .home-resume__arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.home-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.home-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-section__title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.home-section__link {
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}

.home-section__link:hover {
  color: var(--primary);
}

.home-section__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  border-radius: var(--radius-full);
}

/* ── Modules grid — débloqués chez l'utilisateur ──────────────────────── */
.home-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.home-module-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.home-module-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--module-accent, var(--primary)) 14%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.home-module-card:hover {
  border-color: color-mix(in srgb, var(--module-accent, var(--primary)) 50%, var(--border));
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}

.home-module-card:hover::before {
  opacity: 1;
}

.home-module-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--module-accent, var(--primary)) 12%, transparent);
  color: var(--module-accent, var(--primary));
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.home-module-card:hover .home-module-card__icon {
  background: color-mix(in srgb, var(--module-accent, var(--primary)) 22%, transparent);
  transform: scale(1.05);
}

.home-module-card__body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.home-module-card__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-module-card__desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-module-card__stat {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--module-accent, var(--primary));
  background: color-mix(in srgb, var(--module-accent, var(--primary)) 10%, transparent);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ── Tip card (astuce du jour / nouveauté) ────────────────────────────── */
.home-tip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.08),
    rgba(var(--primary-rgb), 0.02)
  );
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: var(--radius-lg);
}

.home-tip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  flex-shrink: 0;
}

.home-tip__body {
  flex: 1;
  min-width: 0;
}

.home-tip__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.home-tip__text {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.45;
}

.home-tip__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.home-tip__cta:hover {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: rgba(var(--primary-rgb), 0.4);
}

.home-tip__arrow {
  display: inline-flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.home-tip__cta:hover .home-tip__arrow {
  transform: translateX(3px);
}

/* ── Locked modules (upsell catalogue) ─────────────────────────────────── */
.home-locked-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.home-locked-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  opacity: 0.7;
  transition:
    opacity var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);
}

.home-locked-card:hover {
  opacity: 1;
  border-style: solid;
  border-color: color-mix(in srgb, var(--module-accent, var(--primary)) 35%, var(--border));
  background: color-mix(in srgb, var(--module-accent, var(--primary)) 4%, var(--panel));
}

.home-locked-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--module-accent, var(--muted)) 10%, transparent);
  color: var(--module-accent, var(--muted));
  flex-shrink: 0;
}

.home-locked-card__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-locked-card__lock {
  display: flex;
  align-items: center;
  color: var(--muted);
  opacity: 0.7;
  flex-shrink: 0;
}

/* ── Quick actions grid — accent left border + icon circles ───────────── */
.home-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.home-action-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--card-accent, var(--primary));
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
}

.home-action-card:hover {
  border-color: var(--card-accent, var(--primary));
  border-left-color: var(--card-accent, var(--primary));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.home-action-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--card-accent, var(--primary)) 10%, transparent);
  color: var(--card-accent, var(--primary));
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.home-action-card:hover .home-action-card__icon {
  background: color-mix(in srgb, var(--card-accent, var(--primary)) 18%, transparent);
  transform: scale(1.05);
}

.home-action-card__body {
  flex: 1;
  min-width: 0;
}

.home-action-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}

.home-action-card__desc {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-normal);
}

.home-action-card__arrow {
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.home-action-card:hover .home-action-card__arrow {
  opacity: 0.5;
  transform: translateX(0);
}

/* ── Project cards — 4-col, fixed height, confidence dot ──────────────── */
.home-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.home-project-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  min-height: 88px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.home-project-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.home-project-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.home-project-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.home-project-card__docs {
  font-size: var(--text-xs);
  color: var(--muted);
}

.home-project-card__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--dot-color, var(--muted));
  flex-shrink: 0;
}

/* ── Projects skeleton / empty ────────────────────────────────────────── */
.home-project-skeleton {
  height: 88px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.25; }
}

.home-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}

.home-empty p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.home-empty__btn {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.home-empty__btn:hover {
  background: rgba(var(--primary-rgb), 0.18);
}

/* ── Recent searches ──────────────────────────────────────────────────── */
.home-searches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: var(--text-xs);
  color: var(--muted);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
  max-width: 240px;
}

.home-search-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-search-chip:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--text);
}

.home-search-chip svg {
  flex-shrink: 0;
  opacity: 0.45;
}

/* ── Home responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .home-modules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-locked-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .home-actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-actions-grid .home-action-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .home-header__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .home-header__separator {
    display: none;
  }
  .home-actions-grid {
    grid-template-columns: 1fr;
  }
  .home-projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-locked-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-tip {
    flex-wrap: wrap;
  }
  .home-tip__cta {
    margin-left: auto;
  }
}

@media (max-width: 480px) {
  .home-greeting {
    font-size: var(--text-base);
  }
  .home-projects-grid {
    grid-template-columns: 1fr;
  }
  .home-modules-grid {
    grid-template-columns: 1fr;
  }
  .home-locked-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== MEMOIRE VERSION HISTORY ===== */
.version-history {
  padding: 12px 0;
}
.version-history__item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 10px 16px; border-radius: var(--radius-md);
  cursor: pointer; transition: background var(--transition-fast);
  position: relative;
}
.version-history__item:hover { background: var(--accent-alpha); }
.version-history__item::before {
  content: ''; position: absolute; left: 27px; top: 32px; bottom: -10px;
  width: 2px; background: var(--border);
}
.version-history__item:last-child::before { display: none; }
.version-history__dot {
  width: 12px; height: 12px; border-radius: var(--radius-full);
  background: var(--accent); flex-shrink: 0; margin-top: var(--space-1);
}
.version-history__info { flex: 1; }
.version-history__time { font-size: 0.75rem; color: var(--text-3); }
.version-history__label { font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.version-history__diff { font-size: 0.78rem; color: var(--text-2); margin-top: 2px; }


/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — mars 2026
   Corrige les débordements horizontaux et les layouts brisés sur téléphone
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Bloquer tout débordement horizontal dans la zone de contenu ───────── */
@media (max-width: 1023px) {
  .app-shell > :not(.sidebar):not(.top-progress) {
    overflow-x: hidden !important;
  }
  .app-shell { max-width: 100vw; }
  .card { min-width: 0; max-width: 100%; }
}

/* ── 2. Smart Chat : header responsive ───────────────────────────────────── */
@media (max-width: 1023px) {
  .smart-chat-header {
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 10px 14px;
  }
  .smart-chat-header__left {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
  }
  .smart-chat-header__title {
    font-size: 0.9rem;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
  }
  .smart-chat-header__sub { display: none; }
  .smart-chat-header__actions { flex-shrink: 0; }
  .smart-chat-body { padding: 12px 14px; }
  .smart-chat-footer { padding: 10px 14px 14px; }
  .smart-chat-input-row { gap: 6px; }
}

/* ── 3. Filtres DocFinder : empêche le débordement ───────────────────────── */
@media (max-width: 1023px) {
  .filters {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

/* ── 4. Résultats DocFinder : 1 colonne sur mobile ───────────────────────── */
@media (max-width: 767px) {
  .list {
    grid-template-columns: 1fr !important;
  }
}

/* ── 5. Cloud Files : 1 colonne sur mobile ───────────────────────────────── */
@media (max-width: 1023px) {
  .cfiles-body {
    flex-direction: column !important;
  }
  .cfiles-lib-panel {
    width: 100% !important;
    flex-shrink: unset;
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
    margin-top: var(--space-1);
  }
  .cfiles-fab {
    right: 16px !important;
    bottom: 16px !important;
  }
  /* Toolbar : scroll horizontal plutôt que wrap → évite l'overlap avec lib panel */
  .cfiles-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
}
@media (max-width: 639px) {
  .cfiles-select { font-size: var(--text-xs); }
  .cfiles { padding-bottom: 72px; }
}

/* ── 6. SmartChat table : scroll horizontal interne ─────────────────────── */
@media (max-width: 1023px) {
  .sc-lib-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .sc-lib-table { min-width: 380px; }
}

/* ── 7. Actions / pager : adaptatif ─────────────────────────────────────── */
@media (max-width: 639px) {
  .actions[style*="justifyContent: 'space-between'"],
  .actions[style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .pager { margin-top: 0; }
}

/* ── 8. Chat IA (Smart Chat) — mobile complet ────────────────────────────── */
@media (max-width: 1023px) {
  /* Fix hauteur iOS — 100vh inclut la barre d'adresse sur Safari */
  .smart-chat-page {
    max-height: calc(100vh - 56px) !important; /* 56px = hamburger */
    height: calc(100vh - 56px) !important;
  }
  /* Textarea : 16px pour éviter le zoom iOS */
  .smart-chat-textarea {
    font-size: var(--text-md) !important;
    min-height: 44px !important;
  }
  /* Messages : utiliser toute la largeur */
  .smart-chat-msg--user .smart-chat-bubble,
  .smart-chat-msg--assistant .smart-chat-bubble {
    max-width: 92% !important;
  }
  /* Empty state : moins de padding */
  .smart-chat-empty {
    padding: 20px 12px !important;
    gap: var(--space-2) !important;
  }
  .smart-chat-empty__title {
    font-size: 1rem !important;
  }
  .smart-chat-empty__examples {
    gap: 6px !important;
    margin-top: var(--space-2) !important;
  }
  .smart-chat-empty__example {
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
  }
  /* Index info compact */
  .smart-chat-index-info {
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    flex-wrap: wrap !important;
    gap: var(--space-1) !important;
  }
  /* Send button : taille correcte pour touch */
  .smart-chat-send-btn {
    width: 44px !important;
    height: 44px !important;
  }
}
@media (max-width: 639px) {
  .smart-chat-body { padding: 8px 10px !important; gap: 10px !important; }
  .smart-chat-footer { padding: 8px 10px 12px !important; }
  .smart-chat-header { padding: 8px 10px !important; }
  .smart-chat-avatar { width: 28px !important; height: 28px !important; }
  /* Messages encore plus larges sur petit écran */
  .smart-chat-msg--user .smart-chat-bubble,
  .smart-chat-msg--assistant .smart-chat-bubble {
    max-width: 96% !important;
  }
  /* Sources : plus compact */
  .smart-chat-sources { padding: 8px !important; }
  .smart-chat-source { padding: 6px 8px !important; font-size: 0.78rem !important; }
}

/* ── 9. iOS zoom prevention — tous les inputs ────────────────────────────── */
@media (max-width: 1023px) {
  input, textarea, select {
    font-size: var(--text-md) !important;
    -webkit-text-size-adjust: 100%;
  }
}

/* ── 10. TOUCH TARGETS — minimum 44x44px sur mobile ──────────────────── */
@media (max-width: 768px) {
  button,
  [role="button"],
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
  /* Exceptions : elements inline / decoratifs qui ne doivent pas grandir */
  .smart-chat-confidence,
  .smart-chat-intent,
  .pill,
  .stat-pill,
  .pw-strength__bar,
  .share-close,
  .owl-typing__dot,
  .splash__dot,
  .owl-chat-bubble,
  .smart-chat-bubble,
  .smart-chat-meta-toggle,
  .nav-ai-orb {
    min-height: unset;
    min-width: unset;
  }
  /* Cancel button dans Smart Chat : 44px minimum */
  .smart-chat-cancel-btn {
    width: 44px !important;
    height: 44px !important;
  }
  /* Share icon button */
  .share-icon-btn {
    width: 44px !important;
    height: 44px !important;
  }
  /* Attach button */
  .smart-chat-attach-btn {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── 11. OWL ASSISTANT MODAL — plein ecran sur mobile ────────────────── */
@media (max-width: 768px) {
  .owl-chat-overlay {
    padding: 0 !important;
  }
  .owl-chat-modal {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .owl-chat-modal--docked {
    width: 100vw !important;
  }
  /* Masquer le toggle dock/fenetre inutile sur mobile */
  .owl-chat-toggle {
    display: none !important;
  }
  /* Resize handle inutile sur mobile */
  .owl-chat-resize {
    display: none !important;
  }
  .owl-chat-bubble {
    max-width: 92% !important;
  }
  .owl-chat-body {
    padding: 12px !important;
  }
  .owl-chat-header {
    padding: 10px 14px !important;
  }
  .owl-chat-footer textarea {
    font-size: 16px !important;
  }
}

/* ── 12. CONFIRMATION MODALES — lisible sur petit ecran ──────────────── */
@media (max-width: 768px) {
  .modal,
  [class*="modal-overlay"] > [class*="modal"],
  .command-palette {
    max-width: 92vw !important;
    max-height: 90vh !important;
    margin: auto !important;
  }
  .command-palette {
    width: 92vw !important;
  }
}

/* ── 13. SETTINGS — empiler les champs sur mobile ────────────────────── */
@media (max-width: 768px) {
  /* Les rows flex dans les settings doivent s'empiler */
  .card .row,
  .card .field-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .card .row > input[type="text"],
  .card .row > select {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* DocFinderSection categories : boutons pleine largeur */
  .card .row > .ghost {
    width: 100% !important;
  }
}

/* ── 14. DEBOURSE TABLES — scroll horizontal garanti ─────────────────── */
@media (max-width: 768px) {
  .excel-table-card .table-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto !important;
  }
  .excel-table-card table {
    min-width: 500px !important;
  }
  /* Gradient hint pour indiquer le scroll */
  .excel-table-card {
    position: relative;
  }
  .excel-table-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
    z-index: 5;
    border-radius: 0 14px 14px 0;
    opacity: 0.8;
  }
}

/* ── 15. SAFE AREAS iOS — footer, sidebar, elements fixed ────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 1023px) {
    /* Smart Chat footer — sticky en bas */
    .smart-chat-footer {
      padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }
    /* Owl assistant footer */
    .owl-chat-footer {
      padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    /* MobileDrawer sidebar */
    .md-sidebar {
      padding-bottom: env(safe-area-inset-bottom) !important;
    }
    /* Module catalog footer bar (fixed bottom) */
    .module-catalog__footer-bar {
      padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }
    /* Offline banner (fixed top) */
    .offline-banner {
      padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
    }
    /* Hamburger menu button */
    .md-hamburger {
      top: calc(10px + env(safe-area-inset-top, 0px));
    }
  }
}

/* ── 16. FONT SIZE ANTI-ZOOM iOS — inputs >= 16px ────────────────────── */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── 17. ORIENTATION — paysage sur mobile ────────────────────────────── */
@media (max-width: 1023px) and (orientation: landscape) {
  /* En paysage sur mobile, reduire la hauteur du header chat */
  .smart-chat-header {
    padding: 6px 14px !important;
  }
  /* Chat page : utiliser toute la hauteur dispo */
  .smart-chat-page {
    max-height: calc(100vh - 44px) !important;
    height: calc(100vh - 44px) !important;
  }
  /* Owl modal en paysage : hauteur dynamique */
  .owl-chat-modal {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}

/* ── Accessibility: Reduced Motion ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ASSUREUR MODULE — Premium Dashboard UI
   ═══════════════════════════════════════════════════════════════════════════ */

.assureur-page {
  --assureur-accent: #e67e22;
  --assureur-accent-rgb: 230, 126, 34;
  --assureur-accent-light: #f39c12;
  --assureur-gradient: linear-gradient(135deg, #e67e22, #f39c12);
  --assureur-green: var(--color-success);
  --assureur-orange: #f59e0b;
  --assureur-red: var(--color-danger);
  --assureur-glass: rgba(var(--text-rgb), 0.03);
  --assureur-glass-border: rgba(var(--text-rgb), 0.08);
}

/* ── Header ───────────────────────────────────────────────────────────── */
.assureur-page .page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.assureur-page .page-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.assureur-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--assureur-glass-border);
  border-radius: 10px;
  background: var(--assureur-glass);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.assureur-new-btn:hover {
  border-color: var(--assureur-accent);
  background: rgba(var(--assureur-accent-rgb), 0.08);
  color: var(--assureur-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--assureur-accent-rgb), 0.15);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */
.assureur-tabs {
  display: flex;
  gap: 2px;
  background: rgba(var(--text-rgb), 0.04);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
  position: relative;
}
.assureur-tab {
  flex: 1;
  padding: 11px 18px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.assureur-tab:hover {
  color: var(--text);
}
.assureur-tab.is-active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.assureur-tab__icon {
  font-size: 15px;
}
.assureur-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(var(--assureur-accent-rgb), 0.15);
  color: var(--assureur-accent);
  font-size: 11px;
  font-weight: 700;
  transition: all 0.3s;
}

/* ── Tab content transitions ──────────────────────────────────────────── */
.assureur-tab-content {
  /* animation supprimée pour réactivité */
}

/* ── Upload & Reference dual columns ──────────────────────────────────── */
.assureur-dual-zone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .assureur-dual-zone {
    grid-template-columns: 1fr;
  }
}
.assureur-dual-zone .card {
  margin-bottom: 0;
}

/* ── Glass card style ─────────────────────────────────────────────────── */
.assureur-glass-card {
  background: var(--assureur-glass);
  border: 1px solid var(--assureur-glass-border);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.assureur-glass-card:hover {
  border-color: rgba(var(--assureur-accent-rgb), 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.assureur-glass-card h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.assureur-glass-card h3 .card-icon {
  font-size: 16px;
}

/* ── Upload zone ───────────────────────────────────────────────────────── */
.assureur-upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assureur-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 36px 20px;
  border: 2px dashed rgba(var(--assureur-accent-rgb), 0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--muted);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.assureur-upload::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(var(--assureur-accent-rgb), 0.03), transparent 70%);
  pointer-events: none;
}
.assureur-upload:hover {
  border-color: var(--assureur-accent);
  background: rgba(var(--assureur-accent-rgb), 0.04);
  color: var(--assureur-accent);
  transform: scale(1.01);
  box-shadow: 0 0 20px rgba(var(--assureur-accent-rgb), 0.1);
}
.assureur-upload--dragover {
  border-color: var(--assureur-accent);
  border-style: solid;
  background: rgba(var(--assureur-accent-rgb), 0.08);
  color: var(--assureur-accent);
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(var(--assureur-accent-rgb), 0.2);
}
.assureur-upload .dz-picker { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); z-index: 5; min-width: 380px; cursor: default; }
.assureur-upload .dz-picker__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; background: rgba(var(--assureur-accent-rgb), 0.06); border: 1px solid rgba(var(--assureur-accent-rgb), 0.18); border-radius: 10px; cursor: pointer; color: var(--text); text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.assureur-upload .dz-picker__opt:hover { border-color: var(--assureur-accent); background: rgba(var(--assureur-accent-rgb), 0.12); transform: translateY(-1px); }
.assureur-upload .dz-picker__opt svg { color: var(--assureur-accent); margin-bottom: 4px; }
.assureur-upload .dz-picker__title { font-size: 0.86rem; font-weight: 600; }
.assureur-upload .dz-picker__sub { font-size: 0.74rem; color: var(--muted); }
.assureur-upload__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--assureur-accent-rgb), 0.1);
  color: var(--assureur-accent);
  transition: all 0.3s;
}
.assureur-upload:hover .assureur-upload__icon {
  transform: translateY(-2px);
  background: rgba(var(--assureur-accent-rgb), 0.15);
}
.assureur-upload__text {
  font-size: var(--text-sm);
  font-weight: 600;
}
.assureur-upload__hint {
  font-size: var(--text-xs);
  opacity: 0.5;
}

/* ── Document list ─────────────────────────────────────────────────────── */
.assureur-doc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.assureur-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.05);
  font-size: var(--text-sm);
  color: var(--text);
  transition: all 0.2s;
}
.assureur-doc-item:hover {
  background: rgba(var(--text-rgb), 0.05);
  border-color: rgba(var(--text-rgb), 0.1);
}
.assureur-doc-item svg {
  flex-shrink: 0;
  color: var(--assureur-accent);
}
.assureur-doc-item__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.assureur-doc-badge {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(var(--assureur-accent-rgb), 0.15);
  background: rgba(var(--assureur-accent-rgb), 0.08);
  color: var(--assureur-accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.assureur-doc-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.assureur-doc-item__remove:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
  transform: scale(1.1);
}

/* ── Analysis controls ─────────────────────────────────────────────────── */
.assureur-action-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
}
.assureur-action-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.assureur-type-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assureur-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: 1.5px solid rgba(var(--text-rgb), 0.1);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.assureur-type-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--assureur-gradient);
  opacity: 0;
  transition: opacity 0.3s;
}
.assureur-type-btn:hover {
  border-color: var(--assureur-accent);
  background: rgba(var(--assureur-accent-rgb), 0.05);
  transform: translateY(-1px);
}
.assureur-type-btn.is-active {
  background: var(--assureur-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(var(--assureur-accent-rgb), 0.3);
  transform: translateY(-1px);
  font-weight: 600;
}

.assureur-question-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid rgba(var(--text-rgb), 0.1);
  border-radius: 10px;
  background: rgba(var(--text-rgb), 0.02);
  color: var(--text);
  font-size: var(--text-sm);
  transition: all 0.25s;
  min-width: 0;
}
.assureur-question-input:focus {
  outline: none;
  border-color: var(--assureur-accent);
  box-shadow: 0 0 0 3px rgba(var(--assureur-accent-rgb), 0.1);
  background: var(--panel);
}
.assureur-question-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

/* ── Launch button ─────────────────────────────────────────────────────── */
.assureur-launch-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #e67e22, #f39c12, #e67e22);
  background-size: 200% 200%;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 15px rgba(var(--assureur-accent-rgb), 0.3);
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}
.assureur-launch-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}
.assureur-launch-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(var(--assureur-accent-rgb), 0.4);
}
.assureur-launch-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}
.assureur-launch-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.assureur-launch-btn--loading {
  pointer-events: none;
  position: relative;
}
.assureur-launch-btn__progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
}
.assureur-launch-hint {
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0.7;
}

/* ── Loading dots ─────────────────────────────────────────────────────── */
.assureur-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 4px;
}
.assureur-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: assureur-dot-pulse 1.2s ease-in-out infinite;
}
.assureur-dots span:nth-child(2) { animation-delay: 0.15s; }
.assureur-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes assureur-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* ── Loading animation (scanning) ─────────────────────────────────────── */
.assureur-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 32px;
  min-height: 50vh;
}
.assureur-loading__rings {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assureur-loading__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(var(--assureur-accent-rgb), 0.3);
}
.assureur-loading__ring:nth-child(1) {
  width: 80px; height: 80px;
  animation: assureur-ring-pulse 2s ease-out infinite;
}
.assureur-loading__ring:nth-child(2) {
  width: 80px; height: 80px;
  animation: assureur-ring-pulse 2s ease-out 0.5s infinite;
}
.assureur-loading__ring:nth-child(3) {
  width: 80px; height: 80px;
  animation: assureur-ring-pulse 2s ease-out 1s infinite;
}
@keyframes assureur-ring-pulse {
  0% { transform: scale(0.8); opacity: 0.8; border-color: rgba(var(--assureur-accent-rgb), 0.5); }
  100% { transform: scale(2.2); opacity: 0; border-color: rgba(var(--assureur-accent-rgb), 0); }
}
.assureur-loading__doc-icon {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--assureur-accent-rgb), 0.1);
  border-radius: 16px;
  font-size: 28px;
  overflow: hidden;
}
.assureur-loading__scan-line {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--assureur-accent), transparent);
  border-radius: 1px;
  animation: assureur-scan-line 2s ease-in-out infinite;
  z-index: 3;
}
@keyframes assureur-scan-line {
  0% { top: 8px; opacity: 1; }
  50% { top: 52px; opacity: 1; }
  51% { opacity: 0; }
  100% { top: 8px; opacity: 0; }
}
.assureur-loading__text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  animation: assureur-text-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  text-align: center;
}
@keyframes assureur-text-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.assureur-loading__progress-bar {
  width: 200px;
  height: 3px;
  background: rgba(var(--text-rgb), 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.assureur-loading__progress-fill {
  height: 100%;
  background: var(--assureur-gradient);
  border-radius: 2px;
  animation: assureur-indeterminate 1.8s ease-in-out infinite;
}
@keyframes assureur-indeterminate {
  0% { width: 0%; margin-left: 0%; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* ── Score gauges ──────────────────────────────────────────────────────── */
.assureur-scores {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 24px 0;
}
.assureur-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.assureur-gauge svg {
  display: block;
  filter: drop-shadow(0 0 8px var(--gauge-glow, transparent));
}
.assureur-gauge__bg {
  stroke: rgba(var(--text-rgb), 0.06);
}
.assureur-gauge__circle {
  transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 0 4px var(--gauge-color, transparent));
}
.assureur-gauge--low { --gauge-color: var(--color-success); --gauge-glow: rgba(34, 197, 94, 0.3); }
.assureur-gauge--medium { --gauge-color: #f59e0b; --gauge-glow: rgba(245, 158, 11, 0.3); }
.assureur-gauge--high { --gauge-color: var(--color-danger); --gauge-glow: rgba(239, 68, 68, 0.3); }
.assureur-gauge--low .assureur-gauge__circle { stroke: var(--color-success); }
.assureur-gauge--medium .assureur-gauge__circle { stroke: #f59e0b; }
.assureur-gauge--high .assureur-gauge__circle { stroke: var(--color-danger); }

.assureur-gauge__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 8px));
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s;
}
.assureur-gauge--low .assureur-gauge__value { color: var(--color-success); }
.assureur-gauge--medium .assureur-gauge__value { color: #f59e0b; }
.assureur-gauge--high .assureur-gauge__value { color: var(--color-danger); }

.assureur-gauge__label {
  margin-top: 8px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Results ───────────────────────────────────────────────────────────── */
.assureur-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Resume card */
.assureur-resume-card {
  overflow: hidden;
}
.assureur-resume-card p {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

/* Sinistre card */
.assureur-sinistre-card {
  border-left: 3px solid var(--assureur-accent);
}
.assureur-sinistre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.assureur-sinistre-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.assureur-sinistre-field__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* ── Anomalies ─────────────────────────────────────────────────────────── */
.assureur-anomaly-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.assureur-anomaly {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border-left: 4px solid transparent;
  background: rgba(var(--text-rgb), 0.02);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.assureur-anomaly:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.assureur-anomaly--critique {
  border-left-color: var(--color-danger);
  background: rgba(239, 68, 68, 0.04);
}
.assureur-anomaly--majeur {
  border-left-color: #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}
.assureur-anomaly--mineur {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.04);
}
.assureur-anomaly__badge {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  height: fit-content;
}
.assureur-anomaly--critique .assureur-anomaly__badge {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.assureur-anomaly--majeur .assureur-anomaly__badge {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
.assureur-anomaly--mineur .assureur-anomaly__badge {
  background: rgba(251, 191, 36, 0.12);
  color: #b45309;
}
.assureur-anomaly__content {
  flex: 1;
  min-width: 0;
}
.assureur-anomaly__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.assureur-anomaly__detail {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.6;
}
.assureur-anomaly__source {
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
  margin-top: 4px;
}

/* ── Pieces ─────────────────────────────────────────────────────────────── */
.assureur-pieces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 600px) {
  .assureur-pieces {
    grid-template-columns: 1fr;
  }
}
.assureur-pieces__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assureur-pieces__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 10px;
}
.assureur-pieces__title--ok { color: var(--color-success); }
.assureur-pieces__title--missing { color: var(--color-danger); }

.assureur-piece {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: var(--text-xs);
  display: flex;
  align-items: center;
  gap: 8px;
}
.assureur-piece--ok {
  background: rgba(34, 197, 94, 0.06);
  color: var(--text);
}
.assureur-piece--missing {
  background: rgba(239, 68, 68, 0.06);
  color: var(--text);
}

/* SVG animated checkmark */
.assureur-check-icon {
  flex-shrink: 0;
}
.assureur-check-icon polyline {
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}
.assureur-cross-icon {
  flex-shrink: 0;
}
.assureur-cross-icon line {
  stroke-dasharray: 18;
  stroke-dashoffset: 0;
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.assureur-actions__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assureur-action-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.6;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(var(--text-rgb), 0.02);
  transition: all 0.2s;
}
.assureur-action-item:hover {
  background: rgba(var(--assureur-accent-rgb), 0.04);
}
.assureur-action-item svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--assureur-accent);
}

/* ── Reference Sources ──────────────────────────────────────────────────── */
.assureur-ref-sources__subtitle {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.assureur-ref-sources__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assureur-ref-source {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.06);
}
.assureur-ref-source__file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.assureur-ref-source__file svg {
  flex-shrink: 0;
  color: var(--assureur-accent, var(--primary));
}
.assureur-ref-source__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.assureur-ref-source__page {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 600;
}
.assureur-ref-source__page .assureur-section-badge {
  margin-left: 2px;
}

/* ── History ───────────────────────────────────────────────────────────── */
.assureur-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assureur-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(var(--text-rgb), 0.06);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
  width: 100%;
}
.assureur-history-item:hover {
  border-color: rgba(var(--assureur-accent-rgb), 0.2);
  background: rgba(var(--assureur-accent-rgb), 0.04);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}
.assureur-history-item__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.assureur-history-item__score {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.assureur-gauge--low.assureur-history-item__score {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-success);
}
.assureur-gauge--medium.assureur-history-item__score {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}
.assureur-gauge--high.assureur-history-item__score {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}
.assureur-history-item__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.assureur-history-item__type {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assureur-history-item__meta {
  font-size: var(--text-xs);
  color: var(--muted);
}
.assureur-history-item__date {
  font-size: var(--text-xs);
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Reference docs ───────────────────────────────────────────────────── */
.assureur-refs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.assureur-refs__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.assureur-refs__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.assureur-refs__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px dashed rgba(var(--assureur-accent-rgb), 0.4);
  border-radius: 10px;
  background: rgba(var(--assureur-accent-rgb), 0.04);
  color: var(--assureur-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}
.assureur-refs__add-btn:hover {
  background: rgba(var(--assureur-accent-rgb), 0.1);
  border-color: var(--assureur-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--assureur-accent-rgb), 0.15);
}
.assureur-refs__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assureur-ref-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.assureur-ref-card:hover {
  border-color: rgba(var(--assureur-accent-rgb), 0.15);
  background: rgba(var(--text-rgb), 0.05);
}
.assureur-ref-card__icon {
  font-size: 20px;
  flex-shrink: 0;
}
.assureur-ref-card__info {
  flex: 1;
  min-width: 0;
}
.assureur-ref-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.assureur-ref-card__type {
  font-size: 11px;
  color: var(--muted);
}
.assureur-ref-card__delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  opacity: 0;
}
.assureur-ref-card:hover .assureur-ref-card__delete {
  opacity: 1;
}
.assureur-ref-card__delete:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

/* Ref docs empty state */
.assureur-refs__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--muted);
  text-align: center;
  gap: 12px;
}
.assureur-refs__empty-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(var(--assureur-accent-rgb), 0.06);
  font-size: 24px;
}

/* ── Error ─────────────────────────────────────────────────────────────── */
.assureur-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 500;
}

.assureur-ref-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.06);
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 500;
}

/* ── Index status & section badges ─────────────────────────────────── */
.assureur-ref-card__index-status {
  margin-top: 4px;
}
.assureur-ref-card__index-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}
.assureur-ref-card__index-badge--indexed {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.assureur-ref-card__index-badge--pending {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
  animation: assureur-pulse-badge 1.5s ease-in-out infinite;
}
@keyframes assureur-pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.assureur-ref-card__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.assureur-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--badge-color) 18%, transparent);
  color: var(--badge-color);
  border: 1px solid color-mix(in srgb, var(--badge-color) 28%, transparent);
}

/* ── Global index summary bar ──────────────────────────────────────── */
.assureur-refs__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.assureur-refs__summary-icon {
  font-size: 16px;
}
.assureur-refs__summary-sep {
  color: var(--muted);
  opacity: 0.4;
  font-weight: 400;
}

/* ── Reference search ──────────────────────────────────────────────── */
.assureur-refs__search {
  position: relative;
  display: flex;
  align-items: center;
}
.assureur-refs__search-icon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}
.assureur-refs__search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1.5px solid rgba(var(--text-rgb), 0.1);
  border-radius: 10px;
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.assureur-refs__search-input:focus {
  border-color: rgba(var(--assureur-accent-rgb, var(--primary-rgb)), 0.4);
  box-shadow: 0 0 0 3px rgba(var(--assureur-accent-rgb, var(--primary-rgb)), 0.08);
}
.assureur-refs__search-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.assureur-refs__search-spinner {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--text-rgb), 0.12);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: assureur-spin 0.75s linear infinite;
}
@keyframes assureur-spin {
  to { transform: rotate(360deg); }
}

/* ── Search results ────────────────────────────────────────────────── */
.assureur-refs__search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}
.assureur-refs__search-result {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  transition: border-color 0.2s;
}
.assureur-refs__search-result:hover {
  border-color: rgba(var(--primary-rgb), 0.2);
}
.assureur-refs__search-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.assureur-refs__search-result-file {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.assureur-refs__search-result-page {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(var(--text-rgb), 0.06);
}
.assureur-refs__search-result-text {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ── Loading ref match info ────────────────────────────────────────── */
.assureur-loading__ref-match {
  margin-top: 8px;
  padding: 6px 14px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ── Cloud Warning ─────────────────────────────────────────────────── */
.cloud-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning-color, var(--primary)) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning-color, var(--primary)) 15%, transparent);
  font-size: 0.75rem;
  color: var(--text);
  line-height: 1.5;
}
.cloud-warning__icon {
  flex-shrink: 0;
  color: var(--warning-color, var(--primary));
  margin-top: 1px;
}
.cloud-warning__text {
  flex: 1;
}

/* ── Space Usage ───────────────────────────────────────────────────── */
.space-usage {
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.06);
}
.space-usage__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.space-usage__pct {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.space-usage__bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--text-rgb), 0.08);
  overflow: hidden;
}
.space-usage__fill {
  height: 100%;
  border-radius: 3px;
  background: var(--primary);
  transition: width 0.5s ease;
}
.space-usage--high .space-usage__fill {
  background: #f59e0b;
}
.space-usage--critical .space-usage__fill {
  background: var(--color-danger);
}
.space-usage__detail {
  font-size: 0.68rem;
  color: var(--muted);
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   WEB DOC SOURCES — Gestion documents cloud (web only)
   ══════════════════════════════════════════════════════════════════════ */

.web-doc-sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.web-doc-sources__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.web-doc-sources__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.web-doc-sources__hint {
  font-size: var(--text-sm);
  color: rgba(var(--text-rgb), 0.55);
  margin: 0;
  line-height: 1.5;
}

/* ── Drive cards grid ──────────────────────────────────────────────── */

.web-doc-sources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}

.web-drive-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  background: rgba(var(--text-rgb), 0.02);
  transition: all var(--transition-fast) ease;
}

.web-drive-card:hover {
  border-color: rgba(var(--text-rgb), 0.15);
  background: rgba(var(--text-rgb), 0.04);
}

.web-drive-card--connected {
  border-color: rgba(var(--primary-rgb), 0.25);
  background: rgba(var(--primary-rgb), 0.04);
}

.web-drive-card__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(var(--text-rgb), 0.06);
  color: rgba(var(--text-rgb), 0.5);
}

.web-drive-card--connected .web-drive-card__icon {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.web-drive-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.web-drive-card__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.web-drive-card__status {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.4);
}

.web-drive-card__status--ok {
  color: var(--success, var(--color-success));
}

.web-drive-card__btn {
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.web-drive-card__btn:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.web-drive-card__btn--manage {
  border-color: rgba(var(--text-rgb), 0.15);
  background: rgba(var(--text-rgb), 0.05);
  color: var(--text);
}

.web-drive-card__btn--manage:hover {
  background: rgba(var(--text-rgb), 0.1);
}

/* ── Warning / info boxes ──────────────────────────────────────────── */

.web-doc-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  background: rgba(var(--text-rgb), 0.03);
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.55);
  line-height: 1.5;
}

.web-doc-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.5;
}

.web-doc-warning--info {
  border-color: rgba(var(--primary-rgb), 0.15);
  background: rgba(var(--primary-rgb), 0.04);
  color: rgba(var(--text-rgb), 0.65);
}

.web-doc-warning--info svg {
  color: var(--primary);
  opacity: 0.7;
}

.web-doc-warning--orange {
  border-color: rgba(255, 165, 0, 0.2);
  background: rgba(255, 165, 0, 0.05);
  color: rgba(var(--text-rgb), 0.65);
}

.web-doc-warning--orange svg {
  color: #f59e0b;
  opacity: 0.8;
}

/* ── Category cloud cards ──────────────────────────────────────────── */

.web-doc-sources__categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.web-cat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  background: rgba(var(--text-rgb), 0.02);
  transition: border-color var(--transition-fast) ease;
}

.web-cat-card:hover {
  border-color: rgba(var(--text-rgb), 0.15);
}

.web-cat-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.web-cat-card__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.web-cat-card__count {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.4);
  white-space: nowrap;
}

.web-cat-card__progress {
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--text-rgb), 0.06);
  overflow: hidden;
}

.web-cat-card__progress-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.web-cat-card__files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.web-cat-card__file {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.5);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(var(--text-rgb), 0.04);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.web-cat-card__more {
  font-size: var(--text-xs);
  color: var(--primary);
  padding: 2px 8px;
}

.web-cat-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.web-cat-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  background: rgba(var(--text-rgb), 0.03);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast) ease;
}

.web-cat-card__btn:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--primary);
}

.web-cat-card__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.web-cat-card__btn--upload {
  border-color: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
}

.web-cat-card__btn--index {
  border-color: rgba(139, 92, 246, 0.2);
  color: rgb(139, 92, 246);
}

.web-cat-card__btn--index:hover:not(:disabled) {
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.08);
  color: rgb(139, 92, 246);
}

/* ── Upload zone (drag & drop) ─────────────────────────────────────── */

.web-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  border: 2px dashed rgba(var(--text-rgb), 0.12);
  background: rgba(var(--text-rgb), 0.02);
  cursor: pointer;
  transition: all var(--transition-fast) ease;
  text-align: center;
}

.web-upload-zone:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.03);
}

.web-upload-zone--active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  border-style: solid;
}

.web-upload-zone__icon {
  color: rgba(var(--text-rgb), 0.25);
  transition: color var(--transition-fast) ease;
}

.web-upload-zone:hover .web-upload-zone__icon,
.web-upload-zone--active .web-upload-zone__icon {
  color: var(--primary);
}

.web-upload-zone__text {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(var(--text-rgb), 0.6);
}

.web-upload-zone__hint {
  font-size: var(--text-xs);
  color: rgba(var(--text-rgb), 0.35);
}


@keyframes collectdoc-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ── AI Sorting Animation ─────────────────────────────── */
.collectdoc-ai-sorting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 100%;
  min-height: 300px;
  background: radial-gradient(ellipse at center, rgba(99,102,241,0.06) 0%, transparent 70%);
}
.collectdoc-ai-sorting__robot {
  position: relative;
}
.collectdoc-ai-sorting__icon {
}
.collectdoc-ai-sorting__text {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.collectdoc-ai-sorting__sub {
  font-size: 0.78rem;
  color: var(--muted);
  max-width: 250px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bras qui swipent */
.collectdoc-ai-sorting__arm-l {
  animation: collectdoc-arm-swipe-l 1.2s ease-in-out infinite;
  transform-origin: 30px 55px;
}
.collectdoc-ai-sorting__arm-r {
  animation: collectdoc-arm-swipe-r 1.2s ease-in-out infinite 0.6s;
  transform-origin: 90px 55px;
}
@keyframes collectdoc-arm-swipe-l {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-20deg); }
}
@keyframes collectdoc-arm-swipe-r {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(20deg); }
}

/* Pages qui volent */
.collectdoc-ai-sorting__page-l {
  animation: collectdoc-page-fly-l 1.2s ease-in-out infinite;
}
.collectdoc-ai-sorting__page-r {
  animation: collectdoc-page-fly-r 1.2s ease-in-out infinite 0.6s;
}
@keyframes collectdoc-page-fly-l {
  0% { transform: translate(20px, 0) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(-8px, -15px) rotate(-12deg); opacity: 0; }
}
@keyframes collectdoc-page-fly-r {
  0% { transform: translate(-20px, 0) rotate(0deg); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translate(8px, -15px) rotate(12deg); opacity: 0; }
}

/* Yeux qui bougent */
.collectdoc-ai-sorting__eye-l {
  animation: collectdoc-eye-move 2.5s ease-in-out infinite;
}
.collectdoc-ai-sorting__eye-r {
  animation: collectdoc-eye-move 2.5s ease-in-out infinite;
}
@keyframes collectdoc-eye-move {
  0%, 40%, 100% { transform: translateX(0); }
  50%, 70% { transform: translateX(3px); }
  75%, 90% { transform: translateX(-2px); }
}

/**
 * COLLECTDOC - Styles
 * =================
 * Tous les sélecteurs sont préfixés par .scandoc
 * pour éviter tout conflit avec DATADOC
 */

/* ===== LAYOUT PRINCIPAL ===== */
.collectdoc-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  color: var(--text);
  font-family:
    "Inter",
    "Segoe UI",
    system-ui,
    -apple-system,
    sans-serif;
  position: relative;
  overflow: hidden;
}

/* ===== HEADER ===== */
.collectdoc-header {
  background: transparent;
  border-bottom: 1px solid rgba(var(--text-rgb, 232, 237, 244), 0.06);
  padding: var(--space-4) var(--space-7);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.collectdoc-brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.collectdoc-brand .brand-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  position: relative;
}

.collectdoc-brand .brand-text.has-icon {
  gap: 10px;
}

.collectdoc-brand .brand-text::after {
  display: none;
}

.collectdoc-subtitle {
  margin: var(--space-1) 0 0 0;
  font-size: var(--text-base);
  color: var(--muted);
}

/* ── Mode toggle (Collecte / Tri) ── */
.collectdoc-mode-toggle {
  display: flex;
  background: rgba(var(--text-rgb), 0.06);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(var(--text-rgb), 0.06);
}

.collectdoc-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.25s ease;
  position: relative;
}

.collectdoc-mode-btn svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.collectdoc-mode-btn.is-active svg {
  opacity: 1;
}

.collectdoc-mode-btn:hover {
  color: var(--text);
}

.collectdoc-mode-btn.is-active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 125, 106, 0.3);
}

/* ── Progress strip (slim header stepper) ── */
.collectdoc-progress-strip {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: auto;
}

.collectdoc-pstrip-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  position: relative;
}

.collectdoc-pstrip-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 1px;
  height: 16px;
  transform: translateY(-50%);
  background: var(--border);
}

.collectdoc-pstrip-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(var(--text-rgb), 0.06);
  color: var(--muted);
  transition: all 0.25s ease;
}

.collectdoc-pstrip-step.is-current .collectdoc-pstrip-dot {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 125, 106, 0.3);
}

.collectdoc-pstrip-step.is-done .collectdoc-pstrip-dot {
  background: rgba(46, 125, 106, 0.15);
  color: var(--primary);
}

.collectdoc-pstrip-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.collectdoc-pstrip-step.is-current .collectdoc-pstrip-label {
  color: var(--text);
}

.collectdoc-pstrip-step.is-done .collectdoc-pstrip-label {
  color: var(--primary);
}

.collectdoc-preview-progress {
  padding: 0 32px 10px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.collectdoc-progress-label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.collectdoc-small-note {
  margin: 2px 0 8px;
  font-size: 11px;
  color: var(--muted);
}

.collectdoc-progress-path {
  font-size: 12px;
  color: var(--muted);
  white-space: normal;
  word-break: break-all;
  max-width: 100%;
  overflow: visible;
}

.collectdoc-skip-summary {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.collectdoc-skip-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 72px;
  overflow: hidden;
}

.collectdoc-skip-summary li {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.collectdoc-skip-btn {
  align-self: flex-start;
  font-size: 12px;
  padding: 4px 10px;
}

/* (old collectdoc-step.active/completed removed — replaced by pstrip) */

/* ===== CONTENT ===== */
.collectdoc-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 32px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* ===== CONFIG PANEL ===== */
.collectdoc-config-panel {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

/* ===== WIZARD MODE ===== */
.collectdoc-config-wizard {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  /* Fill the collectdoc-content so nav pins to bottom */
}

/* ── Guide banner ── */
.collectdoc-guide-banner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb, 43, 111, 97), 0.10) 0%, rgba(var(--primary-rgb, 43, 111, 97), 0.04) 100%);
  border: 1px solid rgba(var(--primary-rgb, 43, 111, 97), 0.18);
  margin-bottom: 12px;
}
.collectdoc-guide-banner__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb, 43, 111, 97), 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}
.collectdoc-guide-banner__text {
  flex: 1;
  min-width: 0;
}
.collectdoc-guide-banner__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.collectdoc-guide-banner__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Step description ── */
.collectdoc-step-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: -4px 0 16px;
  padding: 0;
}

/* ── Minimal wizard dot-line stepper ── */
.collectdoc-wiz-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 0 18px;
}

.collectdoc-wiz-dot {
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.collectdoc-wiz-dot:hover {
  border-color: var(--primary);
  color: var(--text);
}

.collectdoc-wiz-dot.is-current {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(46, 125, 106, 0.35);
}

.collectdoc-wiz-dot.is-done {
  background: rgba(46, 125, 106, 0.12);
  border-color: var(--primary);
  color: var(--primary);
  min-width: 28px;
  padding: 0 6px;
}

.collectdoc-wiz-seg {
  width: 24px;
  height: 2px;
  background: var(--border);
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.collectdoc-wiz-seg.is-filled {
  background: var(--primary);
}

.collectdoc-wizard-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 16px;
  min-height: 0;
  gap: 12px;
}

.collectdoc-wizard-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  width: 100%;
  box-shadow: 0 2px 8px var(--shadow);
}

@keyframes collectdoc-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.collectdoc-wizard-card h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  gap: 10px;
}

.collectdoc-wizard-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
}

@media (max-width: 600px) {
  .collectdoc-wizard-2col {
    grid-template-columns: 1fr;
  }
  .collectdoc-pstrip-label {
    display: none;
  }
  .collectdoc-wiz-seg {
    width: 24px;
  }
}

.collectdoc-wizard-nav {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  padding: 14px 0 4px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
  margin-top: auto;
}

.collectdoc-wizard-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.collectdoc-wizard-nav .primary {
  box-shadow: 0 4px 14px rgba(46, 125, 106, 0.25);
}

.collectdoc-wizard-nav .ghost:disabled {
  opacity: 0.3;
}

/* Destination card spans 2 cols for better use of space */
.collectdoc-config-card--wide {
  grid-column: span 2;
}

/* Compact merged card */
.collectdoc-config-card--compact {
  padding: 14px 16px !important;
}

/* 2-col inner grid for wide destination card */
.collectdoc-wide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

@media (max-width: 700px) {
  .collectdoc-wide-grid {
    grid-template-columns: 1fr;
  }
  .collectdoc-config-card--wide {
    grid-column: span 1;
  }
}

@media (max-width: 1100px) {
  .collectdoc-config-panel {
    grid-template-columns: repeat(2, 1fr);
  }
  .collectdoc-config-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
  .collectdoc-config-panel {
    grid-template-columns: 1fr;
  }
}

.collectdoc-config-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 10px 30px var(--shadow);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.collectdoc-config-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(46, 125, 106, 0.08);
  pointer-events: none;
}

.collectdoc-config-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px var(--shadow);
  border-color: rgba(46, 125, 106, 0.35);
}

.collectdoc-config-card h2 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  gap: 10px;
}

.collectdoc-title-icon {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow: 0 4px 10px rgba(46, 125, 106, 0.4);
  flex-shrink: 0;
}

.collectdoc-hint {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(46, 125, 106, 0.08);
  border: 1px dashed rgba(46, 125, 106, 0.35);
  font-size: 12px;
  color: var(--accent-strong);
}

.collectdoc-config-card h3 {
  margin: 16px 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.collectdoc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(46, 125, 106, 0.12);
  color: var(--accent-strong);
  border: 1px solid rgba(46, 125, 106, 0.3);
}

.collectdoc-badge--ai {
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.4);
  color: #3b82f6;
}

.collectdoc-badge--fast {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
  color: #10b981;
}

.collectdoc-badge--new {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.45);
  color: #10b981;
}

/* Sources */
.collectdoc-source-list {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collectdoc-source-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.collectdoc-source-path {
  flex: 1;
  font-family: "Fira Code", "Monaco", "Consolas", monospace;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collectdoc-source-remove {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.collectdoc-source-remove:hover {
  background: rgba(239, 68, 68, 0.2);
}

.collectdoc-empty-state {
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-style: italic;
}

.collectdoc-button-group {
  display: flex;
  gap: 10px;
}

/* Form elements */
.collectdoc-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.collectdoc-select:focus {
  outline: none;
  border-color: var(--primary);
}

/* ── Custom checkbox ── */
.collectdoc-checkbox {
  display: grid;
  grid-template-columns: min-content 1fr;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 0;
  color: var(--text);
  font-size: 13px;
  width: 100%;
}

.collectdoc-checkbox--inline {
  width: auto;
  grid-template-columns: min-content;
}

.collectdoc-checkbox span {
  text-align: left;
}

.collectdoc-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  margin: 0;
  position: relative;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.collectdoc-checkbox input[type="checkbox"]:hover {
  border-color: var(--primary);
}

.collectdoc-checkbox input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}

.collectdoc-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.collectdoc-checkbox input[type="checkbox"]:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.collectdoc-advanced-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collectdoc-filter-row {
  display: grid;
  grid-template-columns: 26px minmax(140px, 1fr) minmax(110px, 1fr) minmax(
      160px,
      1fr
    ) minmax(80px, auto) auto;
  gap: 8px;
  align-items: center;
}

.collectdoc-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}

.collectdoc-input:focus {
  outline: none;
  border-color: var(--primary);
}

.collectdoc-input[type="date"] {
  text-transform: none;
}

.collectdoc-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.8;
}

@media (max-width: 900px) {
  .collectdoc-filter-row {
    grid-template-columns: 26px 1fr;
  }
}

.collectdoc-action-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}

.collectdoc-action-switch span {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.collectdoc-action-switch span.is-active {
  color: var(--text);
  font-weight: 600;
}

.collectdoc-option-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collectdoc-option-group__details {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px dashed var(--border);
}

.collectdoc-accordion-toggle {
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.collectdoc-accordion-toggle:hover {
  background: var(--pill);
}

.collectdoc-accordion-icon {
  display: inline-block;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.collectdoc-accordion-icon.is-open {
  transform: rotate(180deg);
}

.collectdoc-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.collectdoc-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.collectdoc-switch__track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--text-rgb), 0.12);
  transition: background 0.25s ease;
  position: relative;
}

.collectdoc-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.collectdoc-switch input:checked + .collectdoc-switch__track {
  background: var(--primary);
}

.collectdoc-switch input:checked + .collectdoc-switch__track .collectdoc-switch__thumb {
  transform: translateX(18px);
}

.collectdoc-dropzone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 28px 20px;
  background: linear-gradient(180deg, var(--panel), var(--bg));
  text-align: center;
  color: var(--text);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
  margin: 8px 0 12px;
  cursor: pointer;
}

.collectdoc-dropzone.is-active {
  border-color: var(--primary);
  background: linear-gradient(180deg, rgba(46, 125, 106, 0.12), var(--panel));
  transform: translateY(-1px);
}

.collectdoc-dropzone__title {
  font-weight: 600;
  font-size: 14px;
}

.collectdoc-dropzone__subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.collectdoc-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 12px;
}

.collectdoc-preview-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--pill);
  border: 1px solid var(--border);
}

.collectdoc-option-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: rgba(var(--text-rgb), 0.02);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.collectdoc-option-card:not(.is-disabled):hover {
  border-color: rgba(var(--primary-rgb), 0.2);
}

.collectdoc-option-card.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.collectdoc-option-header {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.collectdoc-input-with-button {
  display: flex;
  gap: 10px;
}

.collectdoc-input-with-button input {
  flex: 1;
}

.collectdoc-textarea {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--input);
  color: var(--text);
  font-size: 14px;
  resize: vertical;
}

.collectdoc-range {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collectdoc-range input[type="range"] {
  flex: 1;
}

.collectdoc-range-value {
  min-width: 44px;
  text-align: right;
  font-weight: 600;
  color: var(--text);
}

/* Extensions grid */
.collectdoc-extensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

/* ── Extension groups (revamped) ── */
.collectdoc-extension-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.collectdoc-extension-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--panel);
  transition: border-color 0.2s ease;
}

.collectdoc-extension-group:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
}

.collectdoc-group-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.collectdoc-extension-checkbox {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-size: 12px;
  position: relative;
}

.collectdoc-extension-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.collectdoc-extension-checkbox span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
  color: var(--muted);
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid var(--border);
  transition: all 0.15s ease;
  cursor: pointer;
}

.collectdoc-extension-checkbox:hover span {
  border-color: var(--primary);
  color: var(--text);
}

.collectdoc-extension-checkbox input[type="checkbox"]:checked + span {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.08);
}

.collectdoc-extension-custom {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

/* Errors */
.collectdoc-errors {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 10px;
  padding: 14px;
}

.collectdoc-error {
  color: #ef4444;
  font-size: 14px;
  padding: 4px 0;
}

/* ===== PREVIEW PANEL ===== */
.collectdoc-preview-panel {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.collectdoc-preview-summary {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 10px 30px var(--shadow);
}

.collectdoc-preview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.collectdoc-stat {
  text-align: center;
  padding: 16px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.collectdoc-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.collectdoc-stat-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.collectdoc-stat-warning .collectdoc-stat-value {
  color: #f59e0b;
}

.collectdoc-stat-error .collectdoc-stat-value {
  color: #ef4444;
}

.collectdoc-extension-stats {
  margin-top: 20px;
}

.collectdoc-extension-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.collectdoc-extension-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.collectdoc-extension-name {
  font-size: 13px;
  color: var(--muted);
}

.collectdoc-extension-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

.collectdoc-config-summary {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px var(--shadow);
}

.collectdoc-config-summary h3 {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-strong);
}

.collectdoc-config-item {
  padding: 10px 0;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.collectdoc-config-item:last-child {
  border-bottom: none;
}

.collectdoc-config-item strong {
  color: var(--accent-strong);
  margin-right: 8px;
}

/* Files list */
.collectdoc-files-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px var(--shadow);
}

.collectdoc-files-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.collectdoc-files-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-strong);
}

.collectdoc-files-list {
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.collectdoc-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: all 0.2s;
}

.collectdoc-file-item:hover {
  border-color: var(--primary);
}

.collectdoc-file-info {
  flex: 1;
  min-width: 0;
}

.collectdoc-file-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collectdoc-file-path {
  font-size: 12px;
  color: var(--muted);
  font-family: "Fira Code", "Monaco", "Consolas", monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.collectdoc-file-size {
  font-size: 12px;
  color: var(--muted);
  font-family: "Fira Code", "Monaco", "Consolas", monospace;
  white-space: nowrap;
}

.collectdoc-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.collectdoc-page-info {
  font-size: 13px;
  color: var(--muted);
}

/* Errors card */
.collectdoc-errors-card {
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px var(--shadow);
}

.collectdoc-errors-card h3 {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: #ef4444;
}

.collectdoc-errors-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collectdoc-error-item {
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.collectdoc-error-path,
.collectdoc-error-file {
  font-size: 13px;
  font-family: "Fira Code", "Monaco", "Consolas", monospace;
  color: #ef4444;
  margin-bottom: 4px;
}

.collectdoc-error-message {
  font-size: 12px;
  color: #f87171;
}

.collectdoc-error-more {
  text-align: center;
  padding: 12px;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
}

.collectdoc-warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
  padding: 14px;
  border-radius: 10px;
  text-align: center;
  font-weight: 500;
}

/* ===== PROGRESS PANEL ===== */
.collectdoc-progress-panel {
  max-width: 600px;
  margin: 80px auto;
}

.collectdoc-progress-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 40px 30px;
  box-shadow: 0 10px 30px var(--shadow);
  text-align: center;
}

.collectdoc-progress-content {
  padding: 20px;
}

.collectdoc-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  margin: 0 auto 20px auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.collectdoc-progress-content h2 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: var(--accent-strong);
}

.collectdoc-progress-content p {
  margin: 0 0 20px 0;
  color: var(--muted);
  font-size: 14px;
}

.collectdoc-progress-info {
  text-align: left;
  background: var(--bg);
  padding: 14px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid var(--border);
}

.collectdoc-progress-info div {
  padding: 4px 0;
}

/* ===== RESULTS PANEL ===== */
.collectdoc-results-panel {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.collectdoc-results-summary {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 30px;
  box-shadow: 0 10px 30px var(--shadow);
  text-align: center;
}

.collectdoc-results-summary.success {
  border-color: #22c55e;
}

.collectdoc-results-summary.has-errors {
  border-color: #f59e0b;
}

.collectdoc-results-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 20px auto;
  color: #22c55e;
}

.collectdoc-results-summary.has-errors .collectdoc-results-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.collectdoc-results-summary h2 {
  margin: 0 0 24px 0;
  font-size: 20px;
  color: var(--accent-strong);
}

.collectdoc-results-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.collectdoc-results-destination {
  text-align: left;
  background: var(--bg);
  padding: 16px;
  border-radius: 10px;
  margin-top: 20px;
  border: 1px solid var(--border);
}

.collectdoc-results-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.collectdoc-results-destination strong {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.collectdoc-destination-path {
  font-family: "Fira Code", "Monaco", "Consolas", monospace;
  font-size: 13px;
  color: var(--primary);
  background: var(--panel);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  word-break: break-all;
  border: 1px solid var(--border);
}

/* Reports */
.collectdoc-reports-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px var(--shadow);
}

.collectdoc-reports-card h3 {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-strong);
}

.collectdoc-reports-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collectdoc-report-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.collectdoc-report-info {
  flex: 1;
  min-width: 0;
}

.collectdoc-report-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}

.collectdoc-report-path {
  font-size: 12px;
  font-family: "Fira Code", "Monaco", "Consolas", monospace;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collectdoc-collected-files-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px var(--shadow);
}

.collectdoc-collected-files-card h3 {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-strong);
}

.collectdoc-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

.collectdoc-accordion-header h3 {
  margin: 0;
}

.collectdoc-contacts-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 30px var(--shadow);
  margin-top: 20px;
}

.collectdoc-contacts-card h3 {
  margin: 0 0 14px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-strong);
}

.collectdoc-contacts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collectdoc-contact-item {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(
      200px,
      1.2fr
    );
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
}

.collectdoc-contact-name {
  font-weight: 600;
  color: var(--accent-strong);
}

.collectdoc-contact-role {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}

.collectdoc-contact-address {
  font-size: 12px;
  color: var(--muted);
}

.collectdoc-contact-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.collectdoc-contact-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  align-items: flex-start;
}

.collectdoc-contact-context {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 980px) {
  .collectdoc-contact-item {
    grid-template-columns: 1fr;
  }
  .collectdoc-contact-meta {
    align-items: flex-start;
  }
}

.collectdoc-contact-export {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.collectdoc-more-files {
  text-align: center;
  padding: 14px;
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

/* ===== ACTION BAR ===== */
.collectdoc-action-bar {
  position: sticky;
  bottom: 0;
  background: var(--panel);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 24px var(--shadow);
  grid-column: 1 / -1;
}

.collectdoc-action-bar .primary {
  box-shadow: 0 10px 24px rgba(46, 125, 106, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.collectdoc-action-bar .primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(46, 125, 106, 0.3);
}

.collectdoc-review-actions {
  display: flex;
  gap: 10px;
}

.collectdoc-review-empty {
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  display: grid;
  gap: 10px;
  justify-items: center;
}

.collectdoc-review-empty-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}

.collectdoc-review-empty-sub {
  font-size: 13px;
}

/* ===== COLLECTDOC REVIEW (Tri) ===== */
.collectdoc-review-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.collectdoc-review-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

.collectdoc-review-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.collectdoc-review-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.collectdoc-review-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.collectdoc-review-pill {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.collectdoc-review-pill strong {
  font-size: 14px;
}

.collectdoc-review-pill.good {
  border-color: rgba(46, 204, 113, 0.45);
  color: rgba(46, 204, 113, 0.95);
}

.collectdoc-review-pill.bad {
  border-color: rgba(231, 76, 60, 0.45);
  color: rgba(231, 76, 60, 0.95);
}

.collectdoc-review-pill.neutral {
  border-color: rgba(148, 163, 184, 0.35);
  color: rgba(203, 213, 225, 0.9);
}

.collectdoc-review-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

/* ── Preview column (right — fills remaining space) ── */
.collectdoc-review-preview-col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  order: 2;
}

.collectdoc-preview-frame {
  flex: 1;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--panel);
}

.collectdoc-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: var(--panel);
  display: block;
}

.collectdoc-preview-frame--pdf {
  background: #525659;
  display: flex;
  flex-direction: column;
}

.collectdoc-preview-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.collectdoc-preview-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.collectdoc-preview-pager__btn {
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  font-size: 16px;
  padding: 2px 8px;
}
.collectdoc-preview-pager__label {
  font-size: 13px;
  color: var(--muted);
}

.collectdoc-preview-frame--img {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: repeating-conic-gradient(rgba(128,128,128,0.06) 0% 25%, transparent 0% 50%) 0 0 / 20px 20px;
}

.collectdoc-preview-frame--img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.collectdoc-preview-frame--none {
  display: flex;
  align-items: center;
  justify-content: center;
}

.collectdoc-preview-nopreview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.collectdoc-preview-nopreview-hint {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.6;
}

/* ── Left column (card + controls) ── */
.collectdoc-review-right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  order: 1;
}

/* review mode: fill entire content area */
.collectdoc-page--review .collectdoc-content {
  padding: 12px 16px;
}
.collectdoc-page--review .collectdoc-review-panel {
  height: 100%;
}
.collectdoc-page--review .collectdoc-review-board {
  height: calc(100% - 70px);
}
.collectdoc-page--review .collectdoc-review-stack {
  min-height: 0;
  height: 100%;
}

.collectdoc-review-stack {
  position: relative;
  min-height: 220px;
}

.collectdoc-review-card {
  position: absolute;
  inset: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  user-select: none;
}

.collectdoc-review-card.is-loading,
.collectdoc-review-card.is-empty {
  position: relative;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
}

.collectdoc-review-card.is-current {
  cursor: grab;
}

.collectdoc-review-card.is-current:active {
  cursor: grabbing;
}

.collectdoc-review-card.swipe-left {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease-out;
  transform: translateX(-140%) rotate(-12deg);
  opacity: 0;
}

.collectdoc-review-card.swipe-right {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease-out;
  transform: translateX(140%) rotate(12deg);
  opacity: 0;
}

.collectdoc-review-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary);
}

.collectdoc-review-name {
  font-size: 20px;
  font-weight: 700;
}

.collectdoc-review-path {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
}

.collectdoc-review-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.collectdoc-review-actions-inline {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.collectdoc-review-hints {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 12px;
  opacity: 0.45;
}

.collectdoc-review-controls {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: fit-content;
}

.collectdoc-review-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collectdoc-review-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.collectdoc-review-toggle-title {
  font-weight: 700;
}

.collectdoc-review-toggle-sub {
  font-size: 12px;
  color: var(--muted);
}

.collectdoc-review-speed {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.collectdoc-review-cancel {
  align-self: center;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.collectdoc-review-speed input[type="range"] {
  width: 100%;
}

.collectdoc-review-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.collectdoc-review-error {
  color: #f7b2aa;
  font-size: 12px;
}

.collectdoc-review-ai-stage {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}

.collectdoc-review-ai-stage .stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(var(--bg-rgb), 0.5);
  font-size: 11px;
  color: var(--muted);
}

.collectdoc-review-ai-stage .stage-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.5);
}

.collectdoc-review-ai-stage .stage-pill.is-active {
  border-color: rgba(46, 204, 113, 0.45);
  color: rgba(46, 204, 113, 0.95);
  background: rgba(46, 204, 113, 0.12);
}

.collectdoc-review-ai-stage .stage-pill.is-active .dot {
  background: rgba(46, 204, 113, 0.95);
}

.collectdoc-review-empty-title {
  font-weight: 700;
  font-size: 18px;
}

.collectdoc-review-empty-sub {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 980px) {
  .collectdoc-review-board {
    grid-template-columns: 1fr !important;
  }
  .collectdoc-review-preview-col {
    min-height: 300px;
  }
}

/* Override review look to match CollectDoc theme */
.collectdoc-review-panel {
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.collectdoc-review-card {
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.collectdoc-review-card.is-next {
  background: rgba(var(--text-rgb), 0.02);
  z-index: 1;
  pointer-events: none;
}

.collectdoc-review-badge {
  color: var(--accent);
}

.collectdoc-review-actions {
  display: inline-flex;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}

.collectdoc-review-actions .ghost {
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 999px;
}

.collectdoc-review-actions .ghost.is-active {
  background: rgba(var(--primary-2-rgb), 0.2);
  border-color: rgba(var(--primary-2-rgb), 0.4);
}

.collectdoc-review-footer-actions {
  display: grid;
  gap: 8px;
}

.collectdoc-review-empty {
  background: var(--panel);
  border: 1px dashed var(--border);
}

.collectdoc-mode-switch {
  margin-bottom: 16px;
}

.collectdoc-mode-switch.tabs-container {
  background: transparent;
  border: none;
}

.collectdoc-mode-switch .tabs-list {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px;
  background: rgba(var(--text-rgb), 0.02);
}

.collectdoc-mode-switch .tabs-indicator {
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
}

.collectdoc-mode-switch .tabs-btn {
  padding: 10px 16px;
  font-size: 14px;
}

.collectdoc-mode-switch .tabs-btn:hover,
.collectdoc-mode-switch .tabs-btn.active {
  background: transparent;
}

.collectdoc-review-empty-actions {
  display: inline-flex;
  gap: 8px;
}

/* --- Review layout tweaks (horizontal) --- */
.collectdoc-review-controls {
  width: 100%;
}

.collectdoc-review-card {
  border-radius: 18px;
  padding: 18px;
}

/* Intent overlays handled in later section */

.collectdoc-review-hints {
  font-weight: 700;
  letter-spacing: 0.8px;
}

.collectdoc-review-hints .hint-left {
  color: rgba(231, 76, 60, 0.65);
}

.collectdoc-review-hints .hint-right {
  color: rgba(46, 204, 113, 0.65);
}

.collectdoc-review-pill.good {
  color: rgba(46, 204, 113, 0.9);
  border-color: rgba(46, 204, 113, 0.35);
}

.collectdoc-review-pill.bad {
  color: rgba(231, 76, 60, 0.9);
  border-color: rgba(231, 76, 60, 0.35);
}

.collectdoc-review-pill.neutral {
  color: rgba(203, 213, 225, 0.9);
  border-color: rgba(148, 163, 184, 0.35);
}

/* --- Review layout - Polished design --- */
.collectdoc-review-panel {
  padding: 18px 20px 22px;
}

.collectdoc-review-hero {
  align-items: flex-start;
  gap: 12px;
}

.collectdoc-review-title {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    var(--primary),
    var(--accent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.collectdoc-review-stats {
  margin-left: auto;
}

.collectdoc-review-pill {
  background: rgba(var(--bg-rgb), 0.7);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  transition: all 0.2s ease;
}

.collectdoc-review-pill strong {
  font-size: 15px;
  font-weight: 700;
}

.collectdoc-review-pill.good {
  background: rgba(46, 204, 113, 0.08);
  border-color: rgba(46, 204, 113, 0.3);
  color: #4ade80;
}

.collectdoc-review-pill.bad {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

.collectdoc-review-pill.neutral {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.25);
  color: rgba(203, 213, 225, 0.9);
}

/* Card redesign */
.collectdoc-review-card {
  width: 100%;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(145deg, var(--panel), var(--bg));
  border: 1px solid rgba(var(--text-rgb), 0.08);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(var(--text-rgb), 0.03) inset;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.collectdoc-review-card.is-current {
  z-index: 2;
  background: linear-gradient(145deg, var(--panel), var(--bg));
  border-color: rgba(var(--primary-rgb), 0.15);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(var(--primary-rgb), 0.06),
    0 0 0 1px rgba(var(--primary-rgb), 0.08) inset;
}

/* Intent feedback - border glow + ambient light */
.collectdoc-review-card.is-current::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    box-shadow 0.2s ease;
  z-index: -1;
}

.collectdoc-review-card.is-current.intent-left {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow:
    0 0 30px rgba(239, 68, 68, 0.15),
    0 0 60px rgba(239, 68, 68, 0.08),
    0 24px 60px rgba(0, 0, 0, 0.35) !important;
}

.collectdoc-review-card.is-current.intent-right {
  border-color: rgba(var(--primary-rgb), 0.5) !important;
  box-shadow:
    0 0 30px rgba(var(--primary-rgb), 0.15),
    0 0 60px rgba(var(--primary-rgb), 0.08),
    0 24px 60px rgba(0, 0, 0, 0.35) !important;
}

/* Intent label stamp - centered over card */
.collectdoc-review-card.is-current::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  padding: 12px 32px;
  border-radius: 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  pointer-events: none;
  z-index: 10;
}

.collectdoc-review-card.is-current.intent-left::after {
  content: "REJETER";
  color: rgba(239, 68, 68, 0.95);
  border: 3px solid rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.1);
  transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  opacity: 1;
}

.collectdoc-review-card.is-current.intent-right::after {
  content: "GARDER";
  color: rgba(var(--primary-rgb), 0.95);
  border: 3px solid rgba(var(--primary-rgb), 0.6);
  background: rgba(var(--primary-rgb), 0.1);
  transform: translate(-50%, -50%) rotate(8deg) scale(1);
  opacity: 1;
}

/* File type badge */
.collectdoc-review-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.15),
    rgba(var(--primary-2-rgb), 0.12)
  );
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  width: fit-content;
}

.collectdoc-review-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.collectdoc-review-path {
  word-break: break-word;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(var(--text-rgb), 0.04);
}

.collectdoc-review-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.collectdoc-review-actions-inline {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.collectdoc-review-actions-inline .ghost {
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.collectdoc-review-actions-inline .ghost:hover {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.4);
}

.collectdoc-review-hints {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 16px;
  opacity: 0.5;
}

.collectdoc-review-hints .hint-left {
  color: #f87171;
}

.collectdoc-review-hints .hint-right {
  color: #4ade80;
}

/* Controls panel */
.collectdoc-review-controls {
  background: rgba(var(--bg-rgb), 0.5);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.collectdoc-review-criteria {
  background: rgba(var(--bg-rgb), 0.6);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.collectdoc-review-criteria-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--primary);
}

.collectdoc-review-criteria-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 13px;
  transition: all 0.15s ease;
}

.collectdoc-review-criteria-input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.collectdoc-review-criteria-help {
  font-size: 11px;
  color: var(--muted);
}

/* Decision buttons */
.collectdoc-review-buttons {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.collectdoc-review-buttons .collectdoc-review-reject {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.collectdoc-review-buttons .collectdoc-review-reject:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.45);
  transform: translateY(-1px);
}

.collectdoc-review-buttons .collectdoc-review-keep {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.2),
    rgba(var(--primary-2-rgb), 0.15)
  );
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  color: var(--text);
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.collectdoc-review-buttons .collectdoc-review-keep:hover:not(:disabled) {
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.3),
    rgba(var(--primary-2-rgb), 0.2)
  );
  border-color: rgba(var(--primary-rgb), 0.5);
  box-shadow: 0 2px 16px rgba(var(--primary-rgb), 0.2);
  transform: translateY(-1px);
}

.collectdoc-review-buttons .collectdoc-review-unsure {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--text);
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.collectdoc-review-buttons .collectdoc-review-unsure:hover:not(:disabled) {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.4);
  transform: translateY(-1px);
}

/* Summary cards */
.collectdoc-review-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  width: min(720px, 100%);
}

.collectdoc-review-summary-card {
  background: linear-gradient(
    145deg,
    rgba(var(--bg-rgb), 0.7),
    rgba(var(--bg-rgb), 0.9)
  );
  border: 1px solid rgba(var(--text-rgb), 0.06);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  gap: 8px;
  justify-items: start;
  transition: all 0.2s ease;
}

.collectdoc-review-summary-card:hover {
  border-color: rgba(var(--primary-rgb), 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.collectdoc-review-summary-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.collectdoc-review-summary-count {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    var(--primary),
    var(--accent)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.collectdoc-review-footer-actions .ghost {
  border: 1px solid rgba(var(--text-rgb), 0.08);
  border-radius: 10px;
  transition: all 0.15s ease;
}

.collectdoc-review-footer-actions .ghost:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  background: rgba(var(--primary-rgb), 0.06);
}

/* AI stage pills */
.collectdoc-review-ai-stage .stage-pill {
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--bg-rgb), 0.6);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  transition: all 0.2s ease;
}

.collectdoc-review-ai-stage .stage-pill.is-active {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.3);
  color: #4ade80;
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.1);
}

.collectdoc-review-ai-stage .stage-pill.is-active .dot {
  background: #4ade80;
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

/* Toggle switch */
.collectdoc-review-toggle-title {
  font-weight: 700;
  font-size: 14px;
}

.collectdoc-review-toggle-sub {
  font-size: 12px;
  color: var(--muted);
}

/* Speed indicator */
.collectdoc-review-speed {
  background: rgba(var(--bg-rgb), 0.4);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
}

/* Error */
.collectdoc-review-error {
  color: #f87171;
  font-size: 12px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 10px;
  padding: 8px 12px;
}

/* Next card - behind current */
.collectdoc-review-card.is-next {
  z-index: 1;
  transform: scale(0.96) translateY(10px);
  background: rgba(var(--bg-rgb), 0.4);
  border-color: rgba(var(--text-rgb), 0.04);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}

.collectdoc-review-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.6;
}

/* ================================================================
   IDENTIFICATION PANEL
   ================================================================ */

.collectdoc-id-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow: hidden;
  animation: collectdoc-fade-in 0.25s ease-out;
}

/* ── Summary banner ── */
.collectdoc-id-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: rgba(var(--primary-rgb), 0.04);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
  flex-shrink: 0;
}

.collectdoc-id-summary__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.collectdoc-id-summary__body {
  flex: 1;
  min-width: 0;
}

.collectdoc-id-summary__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.collectdoc-id-summary__meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.collectdoc-id-summary__errors {
  color: #f87171;
}

.collectdoc-id-summary__actions {
  flex-shrink: 0;
}

/* ── Extension filter pills ── */
.collectdoc-id-ext-bar {
  display: flex;
  gap: 6px;
  padding: 12px 24px;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.collectdoc-id-ext-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: inherit;
}

.collectdoc-id-ext-pill:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  color: var(--text);
}

.collectdoc-id-ext-pill.is-active {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.3);
  color: var(--primary);
}

/* ── Toolbar (search + sort) ── */
.collectdoc-id-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.collectdoc-id-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
}

.collectdoc-id-search svg {
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.5;
}

.collectdoc-id-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.8rem;
  font-family: inherit;
}

.collectdoc-id-search input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.collectdoc-id-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.collectdoc-id-sort-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.collectdoc-id-sort select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}

.collectdoc-id-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

/* ── File list ── */
.collectdoc-id-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.collectdoc-id-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--muted);
  font-size: 0.85rem;
}

.collectdoc-id-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.04);
  transition: background 0.12s ease;
}

.collectdoc-id-file:hover {
  background: rgba(var(--text-rgb), 0.03);
}

.collectdoc-id-file-icon {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collectdoc-id-file-ext {
  position: absolute;
  bottom: -2px;
  right: -4px;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--panel);
  padding: 0 3px;
  border-radius: 3px;
  border: 1px solid var(--border);
  line-height: 1.3;
}

.collectdoc-id-file-info {
  flex: 1;
  min-width: 0;
}

.collectdoc-id-file-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collectdoc-id-file-path {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collectdoc-id-file-size {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 60px;
  text-align: right;
}

.collectdoc-id-file-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.collectdoc-id-file:hover .collectdoc-id-file-actions {
  opacity: 1;
}

.collectdoc-id-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
  white-space: nowrap;
}

.collectdoc-id-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}

.collectdoc-id-btn--open {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
}

.collectdoc-id-btn--open:hover {
  background: rgba(var(--primary-rgb), 0.14);
}

.collectdoc-id-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.collectdoc-id-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(var(--text-rgb), 0.15);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: collectdoc-spin 0.6s linear infinite;
}

@keyframes collectdoc-spin {
  to { transform: rotate(360deg); }
}

/* ── Pagination ── */
.collectdoc-id-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.collectdoc-id-page-info {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}



/**
 * MATCHING SOUS-TRAITANTS - Styles
 * =================================
 */

/* ── Responsive — géré par MobileDrawer.css pour hamburger/overlay/sidebar ── */

@media (max-width: 1023px) {
  /* Contenu prend toute la largeur + espace pour le hamburger fixe */
  .soustraitants-main {
    padding-top: 56px !important;
  }

  /* Header : wrap + compact, padding-left pour éviter overlap avec hamburger */
  .soustraitants-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 12px 10px 56px !important;
  }
  .soustraitants-header-actions {
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 639px) {
  /* ═══════════════════════════════════════════════
     HEADER
     Ligne 1 : [hamburger] Titre — Actualiser [+]
     Ligne 2 : stats pills
  ═══════════════════════════════════════════════ */
  .soustraitants-header {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 10px 8px 54px !important;
    gap: 6px 8px !important;
    /* row 1: titre (flex:1) + actions (auto)
       row 2: stats (100%) */
  }

  .soustraitants-title {
    font-size: 1rem !important;
    font-weight: 700;
    flex: 1 1 auto;
    white-space: nowrap;
  }

  /* Stats passent à la ligne suivante pleine largeur */
  .soustraitants-quick-stats {
    order: 10;
    flex: 0 0 100%;
    flex-direction: row !important;
    gap: 8px !important;
    margin-left: 0 !important;
    flex-wrap: nowrap;
    align-items: center;
  }

  .stat-item {
    flex-direction: row !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    min-width: unset !important;
    border-radius: 20px !important;
    align-items: center;
    flex-shrink: 0;
  }

  .stat-value {
    font-size: 0.82rem !important;
    font-weight: 700;
  }

  .stat-label {
    font-size: 0.72rem !important;
    white-space: nowrap;
  }

  /* Actions : uniquement icône pour "+ Ajouter" */
  .soustraitants-header-actions {
    margin-left: 0 !important;
    width: auto !important;
    flex-shrink: 0;
    gap: 6px;
  }

  .soustraitants-header-actions .ghost {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  .soustraitants-add-btn {
    padding: 7px 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    gap: 4px !important;
  }

  /* Masquer le texte "Ajouter", garder uniquement ➕ */
  .soustraitants-add-btn .tab-label {
    display: none !important;
  }

  /* ═══════════════════════════════════════════════
     CONTENU
  ═══════════════════════════════════════════════ */
  .soustraitants-content {
    padding: 12px !important;
  }

  /* ═══════════════════════════════════════════════
     CATÉGORIES : 1 colonne
  ═══════════════════════════════════════════════ */
  .soustraitants-categories {
    grid-template-columns: 1fr !important;
    padding: 10px 12px 6px !important;
  }

  /* ═══════════════════════════════════════════════
     TABS : scroll horizontal compact
  ═══════════════════════════════════════════════ */
  .soustraitants-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding: 6px 12px 8px !important;
    gap: 4px !important;
  }

  .soustraitants-tab {
    min-width: unset !important;
    padding: 7px 14px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  /* ═══════════════════════════════════════════════
     LIST PANEL
  ═══════════════════════════════════════════════ */
  .list-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Ligne 1 : input pleine largeur */
  .list-filter-input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Ligne 2 : spécialité (gauche) + tri (droite) */
  .list-filter-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }

  .list-sort-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }

  /* "Tout supprimer" : discret, sous tout */
  .list-toolbar .ghost.small.danger {
    flex: 1 1 100% !important;
    order: 10 !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    opacity: 0.4;
    text-align: right;
    background: transparent;
    border: none;
    justify-content: flex-end;
  }

  .list-toolbar .ghost.small.danger:active {
    opacity: 1;
  }

  .list-count {
    display: none !important;
  }

  /* Grille 1 colonne */
  .list-grid {
    grid-template-columns: 1fr !important;
  }

  .list-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .card-title h3 {
    font-size: 0.95rem !important;
  }

  .card-actions {
    flex-wrap: wrap;
    gap: 6px !important;
  }

  /* ═══════════════════════════════════════════════
     SEARCH PANEL
  ═══════════════════════════════════════════════ */
  .soustraitants-search-panel {
    gap: 12px !important;
  }

  .search-input-wrapper {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .search-btn {
    width: 100%;
  }

  /* Profil entreprise : 1 colonne */
  .search-profile-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ─── Filtres : 1 colonne propre ─── */
  .filter-row {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .filter-group {
    width: 100% !important;
    min-width: 0 !important;
  }

  .filter-group select,
  .filter-group input[type="text"],
  .filter-group input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Checkbox "Le plus proche" : rangée horizontale */
  .filter-group.filter-group-checkbox {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding-top: 0 !important;
  }

  .filter-group.filter-group-checkbox label {
    text-align: left !important;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    order: 2;
  }

  .filter-group.filter-group-checkbox input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    order: 1;
    flex-shrink: 0;
    accent-color: var(--primary);
  }

  /* Bouton "Appliquer filtres" : pleine largeur */
  .filter-search-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    margin-top: 2px !important;
  }

  /* ═══════════════════════════════════════════════
     RESULT CARDS
  ═══════════════════════════════════════════════ */
  .result-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .result-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }

  .result-score {
    flex-direction: column !important;
    align-items: center !important;
    padding: 6px 10px !important;
    flex-shrink: 0;
  }

  .result-actions {
    gap: 8px !important;
  }

  .result-actions button {
    flex: 1 !important;
  }

  /* ═══════════════════════════════════════════════
     HISTORY PANEL
  ═══════════════════════════════════════════════ */
  .history-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .history-toolbar select {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .history-header {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }

  .history-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .history-amounts {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ═══════════════════════════════════════════════
     MODAL — bottom sheet
  ═══════════════════════════════════════════════ */
  .soustraitants-modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .soustraitants-modal {
    max-height: 92vh !important;
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .form-row {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .specialties-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* .soustraitants-shell défini plus bas avec height: 100vh */

.soustraitants-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-6);
}

.soustraitants-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: stretch;
  min-width: 260px;
  padding: 38px 22px 22px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex-shrink: 0;
}

.soustraitants-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

.soustraitants-sidebar .brand {
  margin-bottom: 18px;
  padding-bottom: 20px;
}

.soustraitants-sidebar .brand-title {
  font-size: 18px;
  letter-spacing: 0.15em;
}

.soustraitants-sidebar .brand-icon {
  width: 28px;
  height: 28px;
}

.soustraitants-sidebar .brand-icon svg {
  width: 18px;
  height: 18px;
}

.soustraitants-sidebar .nav-btn {
  font-size: 16px;
  padding: 14px 14px 14px 20px;
  min-height: 50px;
  gap: 12px;
}

.soustraitants-sidebar .nav-btn .nav-icon {
  width: 20px;
  height: 20px;
}

.soustraitants-sidebar .nav-submenu__btn {
  font-size: 14px;
  padding: 10px 14px 10px 20px;
  gap: 10px;
}

.soustraitants-sidebar .nav-submenu__btn .nav-icon {
  width: 18px;
  height: 18px;
}

.soustraitants-sidebar .nav-submenu.is-open {
  margin-left: 14px;
  padding-left: 10px;
  max-height: 400px;
}

.soustraitants-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  position: relative;
  overflow: hidden;
}

.soustraitants-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(var(--text-rgb), 0.08) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.soustraitants-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 1.1rem;
  color: var(--text-2);
}

/* Header */
.soustraitants-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px var(--shadow);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.soustraitants-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.soustraitants-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

.soustraitants-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.soustraitants-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border: 1px solid transparent;
  color: var(--btn-gradient-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.soustraitants-add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.35);
}

.soustraitants-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 14px 32px 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.soustraitants-category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
  position: relative;
  text-align: center;
}

.soustraitants-category.active {
  background: var(--panel);
  border-color: var(--primary);
  color: var(--accent-strong);
  box-shadow: 0 10px 24px var(--shadow);
}

.category-icon {
  font-size: 16px;
}

.category-label {
  font-size: 14px;
  line-height: 1.1;
}

.soustraitants-quick-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 120px;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-2);
}

/* Tabs */
.soustraitants-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 32px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.soustraitants-tabs__main {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}

.soustraitants-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  justify-content: center;
  min-width: 130px;
}

.soustraitants-tab:hover {
  color: var(--accent-strong);
}

.soustraitants-tab.active {
  color: var(--accent-strong);
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}


.tab-icon {
  font-size: 1rem;
  line-height: 1;
}

.tab-label {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
}

/* Content */
.soustraitants-content {
  flex: 1;
  overflow: auto;
  padding: 24px 32px;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ============ SEARCH PANEL ============ */
.soustraitants-search-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.search-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.search-input-wrapper {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.search-profile-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 10px 24px var(--shadow);
}

.search-profile-title {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.search-profile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.search-profile-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  padding: 12px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.search-btn {
  padding: var(--space-3) var(--space-5);
  white-space: nowrap;
}

/* Filtres */
.search-filters-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px var(--shadow);
}

.search-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
}

.filter-toggle-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.search-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px 4px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.filter-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.filter-group.filter-group-checkbox {
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 18px;
}

.filter-group.filter-group-checkbox label {
  text-align: center;
}

.filter-group label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.filter-group select,
.filter-group input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  min-width: 140px;
}

.filter-search-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-1);
  cursor: pointer;
}

/* Résultats */
.search-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.no-results {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-2);
}

.no-results .hint {
  font-size: 0.85rem;
  margin-top: var(--space-2);
  opacity: 0.7;
}

.result-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px var(--shadow);
  border-color: rgba(var(--primary-rgb), 0.35);
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.result-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--accent-strong);
}

.result-contact {
  font-size: 0.85rem;
  color: var(--text-2);
}

.result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  border-radius: var(--radius-2);
  color: white;
}

.score-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.score-label {
  font-size: 0.7rem;
  opacity: 0.9;
}

.result-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.specialty-tag {
  padding: var(--space-1) var(--space-2);
  background: rgba(var(--primary-rgb, 46, 125, 106), 0.1);
  border-radius: 10px;
  font-size: 12px;
  color: var(--accent-strong);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}

.specialty-tag.small {
  font-size: 0.75rem;
  padding: 2px 6px;
}

.specialty-more {
  font-size: 0.75rem;
  color: var(--text-2);
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.meta-item {
  font-size: 0.85rem;
  color: var(--text-2);
}

.result-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ============ LIST PANEL ============ */
.soustraitants-list-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.list-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.list-filter-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.list-filter-select,
.list-sort-select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.list-count {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-left: auto;
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.list-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.list-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px var(--shadow);
  border-color: rgba(var(--primary-rgb), 0.35);
}

.list-card.inactive {
  opacity: 0.6;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-title {
  min-width: 0;
  flex: 1;
}

.card-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-contact {
  font-size: 0.8rem;
  color: var(--text-2);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inactive-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-radius: var(--radius-1);
}

.card-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.card-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-item {
  font-size: 0.8rem;
  color: var(--text-2);
}

.card-stats {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.card-stats .stat {
  font-size: 0.8rem;
  color: var(--text-2);
}

.card-stats .stat strong {
  color: var(--text-1);
}

.card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}

.card-actions .danger {
  color: #ef4444;
}

.list-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-2);
}

/* ============ HISTORY PANEL ============ */
.soustraitants-history-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.history-toolbar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.history-toolbar select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}

.history-count {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-left: auto;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.history-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px var(--shadow);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.history-project h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.project-address {
  font-size: 0.8rem;
  color: var(--text-2);
}

.status-badge {
  font-size: 0.75rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-1);
  font-weight: 500;
}

.status-badge.pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.status-badge.accepted {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.status-badge.refused {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.status-badge.in_progress {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.status-badge.completed {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.status-badge.cancelled {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

.history-sub {
  display: flex;
  gap: var(--space-3);
  font-size: 0.9rem;
}

.sub-name {
  font-weight: 500;
}

.sub-phone {
  color: var(--text-2);
}

.sub-unknown {
  color: var(--text-2);
  font-style: italic;
}

.history-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 0.8rem;
  color: var(--text-2);
}

.history-amounts {
  display: flex;
  gap: var(--space-4);
  font-size: 0.85rem;
}

.history-ratings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.8rem;
}

.rating-item {
  color: var(--text-2);
}

.history-feedback {
  font-size: 0.85rem;
  color: var(--text-2);
  padding: var(--space-2);
  background: var(--surface-1);
  border-radius: var(--radius-1);
}

.history-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.history-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-2);
}

/* ============ MODAL ============ */
.soustraitants-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
}

.soustraitants-modal {
  background: var(--surface-2);
  border-radius: var(--radius-3);
  max-width: 700px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--surface-3);
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-1);
}

.modal-form {
  padding: var(--space-4) var(--space-5);
}

.modal-form fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-2);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.modal-form legend {
  font-weight: 600;
  padding: 0 var(--space-2);
  color: var(--primary);
}

.form-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-group label {
  font-size: 0.8rem;
  color: var(--text-2);
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-1);
  font-size: 0.9rem;
  color: var(--text-1);
}

.form-group textarea {
  resize: vertical;
}

.checkbox-group {
  flex-direction: row;
  align-items: center;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
}

/* Spécialités grid */
.specialties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
}

.specialty-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-1);
}

.specialty-checkbox:hover {
  background: var(--surface-3);
}

.specialty-checkbox.checked {
  background: rgba(var(--primary-rgb, 46, 125, 106), 0.1);
  border-color: var(--primary);
}

.specialty-checkbox input {
  display: none;
}

.specialty-icon {
  font-size: 1.1rem;
}

.specialty-label {
  font-size: 0.8rem;
}

/* Départements */
.departments-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dept-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dept-group-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
}

.dept-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.dept-chip {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-1);
}

.dept-chip:hover {
  background: var(--surface-3);
}

.dept-chip.checked {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.dept-chip input {
  display: none;
}

/* Tags */
.tags-input {
  display: flex;
  gap: var(--space-2);
}

.tags-input input {
  flex: 1;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.tag {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--surface-3);
  border-radius: var(--radius-1);
  font-size: 0.8rem;
  color: var(--text-1);
}

.tag button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.6;
}

.tag button:hover {
  opacity: 1;
}

/* Modal actions */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
}

/* Rating modal */
.rating-modal {
  max-width: 500px;
}

.modal-content {
  padding: var(--space-4) var(--space-5);
}

.rating-project {
  font-weight: 600;
  margin-bottom: var(--space-4);
  text-align: center;
}

.rating-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3);
}

.rating-row label {
  font-size: 0.9rem;
}

.rating-stars {
  display: flex;
  gap: var(--space-1);
}

.rating-stars .star {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.15s ease;
}

.rating-stars .star:hover,
.rating-stars .star.active {
  opacity: 1;
}

.rating-feedback {
  margin-top: var(--space-4);
}

.rating-feedback label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.9rem;
}

.rating-feedback textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-1);
  background: var(--surface-1);
  resize: vertical;
  color: var(--text-1);
}

.soustraitants-page input::placeholder,
.soustraitants-page textarea::placeholder {
  color: var(--text-2);
}
.ai-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 10px 24px var(--shadow);
}

.ai-results-title {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ai-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-result-card {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.ai-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ai-result-name {
  font-weight: 600;
  color: var(--accent-strong);
}

.ai-result-city {
  font-size: 12px;
  color: var(--muted);
}

.ai-result-address {
  font-size: 12px;
  color: var(--muted);
}

.ai-result-summary {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text);
}

.ai-result-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.ai-error {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PARTENAIRES V2 — Clean layout without internal sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   V2 — Full redesign
   ═══════════════════════════════════════════════════════════════════════════ */
.soustraitants-page-v2 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--text);
}

/* Kill old dotted bg when v2 is used */
.soustraitants-page-v2::before { display: none; }

/* ── Page title ──────────────────────────────────────────────────────────── */
.st-page-header {
  padding: 0 var(--space-7) var(--space-4);
  flex-shrink: 0;
}
.st-page-header__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.st-page-header__subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 2px;
}

/* ── Category tabs (Sous-traitants / Fournisseurs / Location) ─────────── */
.st-categories {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--space-7) var(--space-4);
  flex-shrink: 0;
}

.st-category-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 550;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}

.st-category-btn:hover {
  background: rgba(var(--primary-rgb), 0.05);
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.15);
}

.st-category-btn.is-active {
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.25);
  font-weight: 600;
}

.st-category-btn svg { width: 16px; height: 16px; }

/* ── Header with stats + actions ─────────────────────────────────────────── */
.st-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-7) var(--space-3);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.st-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.st-header__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
}

.st-stats {
  display: flex;
  align-items: center;
  gap: 10px;
}

.st-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(var(--text-rgb), 0.04);
  border: 1px solid var(--border);
}

.st-stat__value {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.st-stat__label {
  font-size: var(--text-xs);
  color: var(--muted);
}

.st-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.st-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  border: none;
  font-family: inherit;
}

.st-btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.st-btn--ghost:hover {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
}

.st-btn--primary {
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border: none;
}
.st-btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.3);
}

/* ── View tabs (Rechercher / Annuaire / Historique) ───────────────────────── */
.st-view-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-7) var(--space-3);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.st-view-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 550;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  margin-bottom: -1px;
}

.st-view-tab:hover {
  color: var(--text);
}

.st-view-tab.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.st-view-tab svg { width: 15px; height: 15px; }

/* ── Content area ─────────────────────────────────────────────────────────── */
.st-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-7) var(--space-7);
  min-height: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   V2 SCOPED OVERRIDES — Clean up inner panels when inside v2 shell
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kill old dotted background pattern */
.soustraitants-page-v2::before { display: none !important; }

/* ── Search panel ────────────────────────────────────────────────────────── */
.soustraitants-page-v2 .soustraitants-search-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.soustraitants-page-v2 .search-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.soustraitants-page-v2 .search-profile-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: none;
}

.soustraitants-page-v2 .search-profile-toggle {
  font-size: var(--text-sm);
}

.soustraitants-page-v2 .search-input-wrapper {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.soustraitants-page-v2 .search-input {
  flex: 1;
  padding: 14px var(--space-4);
  font-size: var(--text-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--text);
  min-width: 0;
}

.soustraitants-page-v2 .search-btn {
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
}

.soustraitants-page-v2 .search-btn.primary {
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border: none;
}

.soustraitants-page-v2 .search-btn.ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.soustraitants-page-v2 .search-btn.ghost:hover {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
}

/* ── Filters card ────────────────────────────────────────────────────────── */
.soustraitants-page-v2 .search-filters-card {
  padding: var(--space-4);
  background: var(--panel);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: none;
}

.soustraitants-page-v2 .search-filters-toggle {
  font-size: var(--text-sm);
  padding: 0;
}

.soustraitants-page-v2 .filter-row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}

.soustraitants-page-v2 .filter-group {
  flex: 1;
  min-width: 120px;
}

.soustraitants-page-v2 .filter-group label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.soustraitants-page-v2 .filter-group select,
.soustraitants-page-v2 .filter-group input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-sm);
  width: 100%;
  min-width: 0;
}

.soustraitants-page-v2 .filter-group.filter-group-checkbox {
  flex: 0 0 auto;
  min-width: auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
}

.soustraitants-page-v2 .filter-search-btn {
  padding: 10px 20px;
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* ── Result cards ────────────────────────────────────────────────────────── */
.soustraitants-page-v2 .search-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.soustraitants-page-v2 .result-card {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.soustraitants-page-v2 .result-card:hover {
  border-color: rgba(var(--primary-rgb), 0.2);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.08);
}

.soustraitants-page-v2 .result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.soustraitants-page-v2 .result-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.soustraitants-page-v2 .result-score {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.soustraitants-page-v2 .result-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  margin-top: var(--space-3);
}

.soustraitants-page-v2 .result-actions button {
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ── AI results ──────────────────────────────────────────────────────────── */
.soustraitants-page-v2 .ai-results {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
}

.soustraitants-page-v2 .ai-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.soustraitants-page-v2 .ai-results-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.soustraitants-page-v2 .ai-result-card {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  margin-bottom: var(--space-2);
}

.soustraitants-page-v2 .ai-result-name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--primary);
}

.soustraitants-page-v2 .ai-result-city,
.soustraitants-page-v2 .ai-result-address {
  font-size: var(--text-sm);
  color: var(--muted);
}

.soustraitants-page-v2 .ai-result-summary {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin-top: var(--space-2);
  line-height: 1.5;
}

.soustraitants-page-v2 .ai-result-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
}

.soustraitants-page-v2 .ai-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ── No results ──────────────────────────────────────────────────────────── */
.soustraitants-page-v2 .no-results {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--muted);
}

.soustraitants-page-v2 .no-results .hint {
  font-size: var(--text-sm);
  opacity: 0.6;
  margin-top: var(--space-2);
}

/* ── List panel overrides ────────────────────────────────────────────────── */
.soustraitants-page-v2 .list-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.soustraitants-page-v2 .list-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: none;
}
.soustraitants-page-v2 .list-card:hover {
  border-color: rgba(var(--primary-rgb), 0.2);
}

/* ── Modal overrides ─────────────────────────────────────────────────────── */
.soustraitants-page-v2 .soustraitants-modal {
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--border);
}


/* ============================================================================
   CONSULTATIONS SOUS-TRAITANTS — Refonte complète
   Layout 2 colonnes stable, design tokens, mode sombre par défaut.
   ============================================================================ */

/* ── Shell global (2 colonnes) ────────────────────────────────────────────── */
.cons-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
  padding: 24px 28px 40px;
  color: var(--text);
  min-height: calc(100vh - 56px);
}

/* ── Sidebar interne ──────────────────────────────────────────────────────── */
.cons-side {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 14px;
}

.cons-side__brand {
  padding: 4px 10px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.cons-side__brand-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}
.cons-side__brand-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

.cons-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.cons-nav-item:hover {
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--text);
}
.cons-nav-item.is-active {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.3);
  font-weight: 600;
}
.cons-nav-item__icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.cons-nav-item__label { flex: 1; min-width: 0; }
.cons-nav-item__count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
.cons-nav-item.is-active .cons-nav-item__count {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
}

.cons-side__divider {
  height: 1px;
  background: var(--border);
  margin: 10px 4px;
}

/* ── Zone principale ──────────────────────────────────────────────────────── */
.cons-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Header sticky */
.cons-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border);
}
.cons-head__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.cons-head__sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.cons-head__actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ── KPIs ──────────────────────────────────────────────────────────────────── */
.cons-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.cons-kpi {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.cons-kpi:hover {
  border-color: rgba(var(--primary-rgb), 0.35);
  transform: translateY(-1px);
}
.cons-kpi__value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.5px;
}
.cons-kpi__label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cons-kpi__dot {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}
.cons-kpi--draft     .cons-kpi__dot { background: #6b7280; }
.cons-kpi--generated .cons-kpi__dot { background: #f3a02c; }
.cons-kpi--sent      .cons-kpi__dot { background: #4aa8d0; }
.cons-kpi--replies   .cons-kpi__dot { background: var(--primary); }

.cons-kpi--draft     .cons-kpi__value { color: var(--text); }
.cons-kpi--generated .cons-kpi__value { color: #f3a02c; }
.cons-kpi--sent      .cons-kpi__value { color: #4aa8d0; }
.cons-kpi--replies   .cons-kpi__value { color: var(--primary); }

/* ── Barre de recherche / filtres ─────────────────────────────────────────── */
.cons-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cons-search {
  flex: 1;
  min-width: 240px;
  position: relative;
}
.cons-search input {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px 11px 40px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cons-search input::placeholder { color: var(--muted); }
.cons-search input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg);
}
.cons-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  font-size: 14px;
}

.cons-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cons-filter-pill {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.cons-filter-pill:hover { color: var(--text); border-color: rgba(var(--primary-rgb), 0.4); }
.cons-filter-pill.is-active {
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.4);
}

/* ── Liste des consultations (cards) ──────────────────────────────────────── */
.cons-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cons-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.cons-card:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.cons-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 8px;
}
.cons-card__title {
  font-weight: 600;
  color: var(--text);
  font-size: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cons-card__lot {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
}
.cons-card__meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
}
.cons-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cons-card__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: var(--muted);
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.cons-card__footer strong { color: var(--text); font-weight: 500; }
.cons-card__spacer { flex: 1; }
.cons-card__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.cons-card:hover .cons-card__actions { opacity: 1; }

/* ── Badges statut ─────────────────────────────────────────────────────────── */
.cons-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.cons-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cons-status--draft     { background: rgba(107, 114, 128, 0.18); color: #9aa3b5; }
.cons-status--generated { background: rgba(243, 160, 44, 0.16);  color: #f3a02c; }
.cons-status--sent      { background: rgba(74, 168, 208, 0.16);  color: #4aa8d0; }
.cons-status--replies   { background: rgba(var(--primary-rgb), 0.18); color: var(--primary); }
.cons-status--closed    { background: rgba(107, 114, 128, 0.12); color: #6b7280; }

/* ── Wizard ───────────────────────────────────────────────────────────────── */
.cons-wizard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
}
.cons-wizard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.cons-wizard__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.cons-wizard__back:hover { color: var(--text); background: var(--bg); }

.cons-step-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}
.cons-step-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 20px;
}

.cons-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.cons-actions__right { display: flex; gap: 10px; }

/* ── Section / Card générique ─────────────────────────────────────────────── */
.cons-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
}
.cons-section + .cons-section { margin-top: 16px; }
.cons-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.cons-section__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.cons-section__sub {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* ── Formulaire ───────────────────────────────────────────────────────────── */
.cons-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.cons-field__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cons-field__input,
.cons-field__textarea,
.cons-field__select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.cons-field__input:hover,
.cons-field__textarea:hover,
.cons-field__select:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
}
.cons-field__input:focus,
.cons-field__textarea:focus,
.cons-field__select:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--panel);
}
.cons-field__textarea { resize: vertical; min-height: 80px; }
.cons-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.cons-field-row--3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.cons-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  white-space: nowrap;
}
.cons-btn:hover { border-color: rgba(var(--primary-rgb), 0.5); }
.cons-btn:active { transform: scale(0.98); }
.cons-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.cons-btn--primary {
  background: var(--primary);
  color: var(--bg);
  border-color: var(--primary);
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.25);
}
.cons-btn--primary:hover {
  filter: brightness(1.08);
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35);
}
.cons-btn--primary:disabled { box-shadow: none; }
.cons-btn--danger {
  background: transparent;
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}
.cons-btn--danger:hover { background: rgba(239, 68, 68, 0.1); border-color: #ef4444; }
.cons-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  padding: 6px 10px;
}
.cons-btn--ghost:hover { color: var(--text); background: var(--bg); }
.cons-btn--sm { padding: 6px 10px; font-size: 12px; }

/* ── Lots (grille de boutons) ─────────────────────────────────────────────── */
.cons-lots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.cons-lot {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: center;
  font-size: 14px;
  color: var(--text);
  transition: all 0.15s;
  position: relative;
}
.cons-lot:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  transform: translateY(-1px);
}
.cons-lot.is-selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-weight: 600;
}

/* ── Chips (multi-select compact pour formulaires) ────────────────────────── */
.cons-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cons-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
  user-select: none;
}
.cons-chip:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  color: var(--text);
}
.cons-chip.is-active {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

/* ── Pièces jointes ───────────────────────────────────────────────────────── */
.cons-pieces {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cons-piece {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.cons-piece:hover { border-color: rgba(var(--primary-rgb), 0.3); }
.cons-piece__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.cons-piece__info { flex: 1; min-width: 0; }
.cons-piece__name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.cons-piece__size { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cons-piece__remove {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.cons-piece__remove:hover { color: #ef4444; background: rgba(239, 68, 68, 0.08); }

/* ── Contacts ─────────────────────────────────────────────────────────────── */
.cons-contacts-search { margin-bottom: 14px; }
.cons-contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 460px;
  overflow-y: auto;
  padding: 4px;
}
.cons-contact {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: all 0.15s;
}
.cons-contact:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  transform: translateY(-1px);
}
.cons-contact.is-selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}
.cons-contact.is-noemail { opacity: 0.5; cursor: not-allowed; }
.cons-contact.is-noemail:hover { transform: none; border-color: var(--border); }

.cons-contact__check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.cons-contact.is-selected .cons-contact__check {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
}
.cons-contact__body { flex: 1; min-width: 0; }
.cons-contact__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cons-contact__company {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cons-contact__email {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cons-contact__warn {
  font-size: 10px;
  color: #f3a02c;
  margin-top: 4px;
  font-weight: 600;
}

/* ── Récap (page) ─────────────────────────────────────────────────────────── */
.cons-recap-page { display: flex; flex-direction: column; gap: 16px; }
.cons-recap-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}
.cons-recap-section h4 {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
}
.cons-recap-section dl {
  margin: 0;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 16px;
  font-size: 14px;
}
.cons-recap-section dt { color: var(--muted); }
.cons-recap-section dd { color: var(--text); margin: 0; }

/* ── Suivi (tracking) ─────────────────────────────────────────────────────── */
.cons-tracking { display: flex; flex-direction: column; gap: 8px; }
.cons-tracking-row {
  display: grid;
  grid-template-columns: 1fr 150px 150px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.cons-tracking-row:hover { border-color: rgba(var(--primary-rgb), 0.3); }
.cons-tracking-row__name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cons-tracking-row__company { font-size: 11px; color: var(--muted); margin-top: 2px; }
.cons-tracking-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(154, 163, 181, 0.12);
  color: var(--muted);
  font-weight: 500;
}
.cons-tracking-pill--ok { background: rgba(var(--primary-rgb), 0.15); color: var(--primary); }

/* ── Annuaire ─────────────────────────────────────────────────────────────── */
.cons-annu-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.cons-annu-bar input {
  flex: 1;
  min-width: 240px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
.cons-annu-bar input:focus { outline: none; border-color: var(--primary); }

.cons-annu-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.cons-annu-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.cons-annu-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.cons-annu-table tr:last-child td { border-bottom: none; }
.cons-annu-table tr:hover td { background: rgba(var(--primary-rgb), 0.04); }
.cons-annu-table .muted { color: var(--muted); font-size: 12px; }

/* ── Section ancien naming (wizard + TemplateSettings) ────────────────────── */
.cons-template-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.cons-template-section h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
/* Quand utilisée à l'intérieur du wizard, fond plus sombre pour la hiérarchie */
.cons-wizard .cons-template-section {
  background: var(--bg);
  border-radius: 12px;
  padding: 18px 20px;
}

/* ── Modèles & identité ───────────────────────────────────────────────────── */
.cons-template-vars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.cons-template-vars__label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-right: 4px;
  align-self: center;
}
.cons-template-vars code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--primary);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  transition: background 0.15s, border-color 0.15s;
}
.cons-template-vars code:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

/* ── Empty states & alertes ───────────────────────────────────────────────── */
.cons-empty {
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 16px;
}
.cons-empty__icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.cons-empty h3 { color: var(--text); margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.cons-empty p  { margin: 0 0 18px; font-size: 13px; line-height: 1.5; max-width: 400px; margin-left: auto; margin-right: auto; }

.cons-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
}
.cons-alert--error   { background: rgba(239, 68, 68, 0.1);  color: #ef4444; border-color: rgba(239, 68, 68, 0.3); }
.cons-alert--success { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); border-color: rgba(var(--primary-rgb), 0.3); }
.cons-alert--info    { background: rgba(74, 168, 208, 0.1); color: #4aa8d0; border-color: rgba(74, 168, 208, 0.3); }

/* ── Drop hero (vue initiale drag-and-drop) ───────────────────────────────── */
.cons-drop-hero {
  max-width: 760px;
  margin: 32px auto;
  text-align: center;
}
.cons-drop-hero__icon {
  font-size: 56px;
  margin-bottom: 14px;
  opacity: 0.7;
}
.cons-drop-hero__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}
.cons-drop-hero__subtitle {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Bandeau IA ───────────────────────────────────────────────────────────── */
.cons-ai-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid;
}
.cons-ai-banner--high   { background: rgba(var(--primary-rgb), 0.08); color: var(--text); border-color: rgba(var(--primary-rgb), 0.4); }
.cons-ai-banner--medium { background: rgba(245, 158, 11, 0.08);     color: var(--text); border-color: rgba(245, 158, 11, 0.4); }
.cons-ai-banner--low    { background: rgba(239, 68, 68, 0.08);      color: var(--text); border-color: rgba(239, 68, 68, 0.4); }
.cons-ai-banner strong { color: var(--primary); }
.cons-ai-banner--medium strong { color: #f59e0b; }
.cons-ai-banner--low strong    { color: #ef4444; }

/* ── Barre flottante de génération ────────────────────────────────────────── */
.cons-generate-bar {
  position: sticky;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  margin-top: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
}
.cons-generate-bar__info { font-size: 13px; color: var(--text); }
.cons-generate-bar__info strong { color: var(--primary); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cons-shell { grid-template-columns: 220px 1fr; gap: 18px; padding: 18px; }
}
@media (max-width: 900px) {
  .cons-shell { grid-template-columns: 1fr; }
  .cons-side {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    padding: 10px;
  }
  .cons-side__brand { display: none; }
  .cons-nav-item { flex-shrink: 0; }
  .cons-kpis { grid-template-columns: repeat(2, 1fr); }
  .cons-field-row, .cons-field-row--3 { grid-template-columns: 1fr; }
  .cons-tracking-row { grid-template-columns: 1fr; }
  .cons-generate-bar { flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
}


/* ==========================================
   NORMES PAGE
   ========================================== */

.normes-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--text);
  overflow: hidden;
}

.normes-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
}

.normes-page--embedded {
  min-height: 100%;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.normes-header {
  padding: 16px 28px 0;
  flex-shrink: 0;
}
.normes-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.normes-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  flex-shrink: 0;
}
.normes-header h1 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.normes-subtitle {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 2px 0 0;
}

/* ── Docs bar (between header and results) ───────────────────────────── */
.normes-docs-bar {
  display: flex;
  align-items: center;
  padding: 8px 28px;
  flex-shrink: 0;
  justify-content: flex-start;
}

/* ── DB badge ────────────────────────────────────────────────────────── */
.normes-db-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 12px;
  margin-left: 0;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.12);
  border-radius: 16px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.normes-db-badge:hover {
  background: rgba(var(--primary-rgb), 0.14);
}

.normes-db-badge__chevron {
  transition: transform 0.2s ease;
}
.normes-db-badge__chevron.is-open {
  transform: rotate(180deg);
}

/* ── Local DB panel ──────────────────────────────────────────────────── */
.normes-local-panel {
  margin: 0;
  padding: 14px 32px;
  background: rgba(var(--primary-rgb), 0.03);
  border-bottom: 1px solid var(--border);
  animation: normes-fade-in 0.2s ease-out;
  flex-shrink: 0;
}

.normes-local-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.normes-local-panel__header > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.normes-local-panel__hint {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
  display: block;
}

.normes-scan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.normes-scan-btn:hover { opacity: 0.85; }
.normes-scan-btn:disabled { opacity: 0.6; cursor: default; }

.normes-local-panel__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.normes-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  font-family: inherit;
}
.normes-clear-btn:hover {
  color: var(--color-danger);
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.normes-scan-progress {
  margin-bottom: 10px;
}
.normes-scan-progress__bar {
  height: 4px;
  background: rgba(var(--text-rgb), 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.normes-scan-progress__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.normes-scan-progress__text {
  font-size: 0.68rem;
  color: var(--muted);
}
.normes-scan-progress__text strong {
  color: var(--text);
}

.normes-scan-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-size: 0.75rem;
  background: rgba(var(--text-rgb), 0.04);
  color: var(--muted);
}
.normes-scan-result.is-success {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
}

.normes-local-panel__empty {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 12px 0;
  text-align: center;
}
.normes-local-panel__empty .muted {
  font-size: 0.72rem;
  margin-top: 4px;
}

.normes-local-panel__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.normes-local-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.72rem;
}

.normes-local-item__ref {
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.normes-local-item__title {
  color: var(--text);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.normes-local-item__source {
  color: var(--muted);
  font-size: 0.66rem;
  opacity: 0.6;
  white-space: nowrap;
  margin-left: auto;
}

.normes-local-item__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.66rem;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
  opacity: 1;
}
.normes-local-item__open:hover {
  background: rgba(var(--primary-rgb), 0.1);
}

/* ── Search box (pinned bottom) ───────────────────────────────────────── */
.normes-search-container {
  flex-shrink: 0;
  max-width: 100%;
  margin: 0;
  padding: 12px 32px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}

.normes-search-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.normes-search-box:focus-within {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.normes-search-ico {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted);
  margin-top: 4px;
}

.normes-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
}

.normes-search-input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.normes-search-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: var(--primary);
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.normes-search-btn:hover:not(:disabled) {
  opacity: 0.85;
  transform: scale(1.04);
}

.normes-search-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.normes-search-btn svg {
  width: 18px;
  height: 18px;
}

.normes-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: normes-spin 0.7s linear infinite;
}

@keyframes normes-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Example tags ────────────────────────────────────────────────────────── */
.normes-examples {
  margin-top: 14px;
  padding: 0 32px;
}

.normes-examples-label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.normes-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.normes-tag {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  color: var(--text-2, var(--muted));
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.normes-tag:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  transform: translateY(-1px);
}

/* ── History ──────────────────────────────────────────────────────────────── */
.normes-history {
  margin-top: var(--space-4);
  padding: 0 var(--space-7);
}

.normes-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.normes-history-label {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.normes-history-clear {
  background: none;
  border: none;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
  opacity: 0.7;
}

.normes-history-clear:hover {
  color: var(--text);
  opacity: 1;
}

.normes-history-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.normes-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-2, var(--muted));
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: left;
  font-family: inherit;
}

.normes-history-item:hover {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
}

.normes-history-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.4;
}

.normes-history-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Error ────────────────────────────────────────────────────────────────── */
.normes-error {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto 20px;
  padding: 12px 16px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: 10px;
  color: var(--color-danger);
  font-size: 0.84rem;
}

.normes-error svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.normes-loading {
  text-align: center;
  padding: 40px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.normes-loading-animation {
  margin-bottom: 20px;
}

.normes-loading-radar {
  width: 80px;
  height: 80px;
  position: relative;
  margin: 0 auto;
}

.normes-loading-radar__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
}

.normes-loading-radar__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.5);
}

.normes-loading-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
}

.normes-loading-tags {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.normes-loading-tag {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  animation: normes-tag-pulse 1.5s ease-in-out infinite alternate;
}

@keyframes normes-tag-pulse {
  0% { opacity: 0.3; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

/* Loading steps (priority flow) */
.normes-loading-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  justify-content: center;
}

.normes-loading-step {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(var(--text-rgb), 0.06);
  color: var(--muted);
  transition: all 0.3s;
}

.normes-loading-step.is-active {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  animation: normes-step-glow 1.5s ease-in-out infinite alternate;
}

@keyframes normes-step-glow {
  0% { box-shadow: 0 0 0 rgba(var(--primary-rgb), 0); }
  100% { box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.2); }
}

.normes-loading-step__arrow {
  color: var(--muted);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Result source badge */
.normes-result-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  align-self: flex-start;
}

/* Search mode toggle */
.normes-search-mode {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.normes-search-mode__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.normes-search-mode__btn:hover {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
}

.normes-search-mode__btn.is-active {
  background: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.3);
  color: var(--primary);
}

.normes-search-mode__btn svg {
  flex-shrink: 0;
}

/* ── Result ───────────────────────────────────────────────────────────────── */
.normes-result {
  max-width: 100%;
  padding: 0 32px 40px;
  animation: normes-fade-in 0.25s ease-out;
}

.normes-result-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.normes-result-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.normes-result-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
  min-width: 0;
}

.normes-result-title strong {
  font-weight: 700;
}

.normes-result-title svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.normes-result-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.normes-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.normes-action-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
}

.normes-action-btn--new {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: rgba(var(--primary-rgb), 0.2);
  color: var(--primary);
}

.normes-action-btn--new:hover {
  background: rgba(var(--primary-rgb), 0.14);
}

.normes-action-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.normes-result-content {
  margin-bottom: 16px;
}

/* ── Sections grid ────────────────────────────────────────────────────── */
.normes-sections-grid {
  columns: 2;
  column-gap: 14px;
}
.normes-sections-grid > .normes-section {
  break-inside: avoid;
  margin-bottom: 14px;
}

.normes-section {
  --section-color: var(--primary);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--section-color);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.normes-section:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border-color: rgba(var(--text-rgb), 0.12);
}

/* ── Type-based colors ── */
.normes-section--dtu        { --section-color: #3b82f6; background: rgba(59, 130, 246, 0.04);  border-top-color: rgba(59, 130, 246, 0.15); border-right-color: rgba(59, 130, 246, 0.15); border-bottom-color: rgba(59, 130, 246, 0.15); }
.normes-section--norme      { --section-color: var(--primary); background: rgba(var(--primary-rgb), 0.04); border-top-color: rgba(var(--primary-rgb), 0.15); border-right-color: rgba(var(--primary-rgb), 0.15); border-bottom-color: rgba(var(--primary-rgb), 0.15); }
.normes-section--chiffres   { --section-color: #f59e0b; background: rgba(245, 158, 11, 0.04);  border-top-color: rgba(245, 158, 11, 0.15); border-right-color: rgba(245, 158, 11, 0.15); border-bottom-color: rgba(245, 158, 11, 0.15); }
.normes-section--loi        { --section-color: #a78bfa; background: rgba(167, 139, 250, 0.04); border-top-color: rgba(167, 139, 250, 0.15); border-right-color: rgba(167, 139, 250, 0.15); border-bottom-color: rgba(167, 139, 250, 0.15); }
.normes-section--conseil    { --section-color: #34d399; background: rgba(52, 211, 153, 0.04);  border-top-color: rgba(52, 211, 153, 0.15); border-right-color: rgba(52, 211, 153, 0.15); border-bottom-color: rgba(52, 211, 153, 0.15); }
.normes-section--attention  { --section-color: #fbbf24; background: rgba(251, 191, 36, 0.05);  border-top-color: rgba(251, 191, 36, 0.18); border-right-color: rgba(251, 191, 36, 0.18); border-bottom-color: rgba(251, 191, 36, 0.18); }
.normes-section--local      { --section-color: #64748b; background: rgba(100, 116, 139, 0.04); border-top-color: rgba(100, 116, 139, 0.15); border-right-color: rgba(100, 116, 139, 0.15); border-bottom-color: rgba(100, 116, 139, 0.15); }

/* ── Index-based fallback colors ── */
.normes-section--color-blue    { --section-color: #3b82f6; background: rgba(59, 130, 246, 0.04);  border-top-color: rgba(59, 130, 246, 0.15); border-right-color: rgba(59, 130, 246, 0.15); border-bottom-color: rgba(59, 130, 246, 0.15); }
.normes-section--color-green   { --section-color: #10b981; background: rgba(16, 185, 129, 0.04);  border-top-color: rgba(16, 185, 129, 0.15); border-right-color: rgba(16, 185, 129, 0.15); border-bottom-color: rgba(16, 185, 129, 0.15); }
.normes-section--color-purple  { --section-color: #a78bfa; background: rgba(167, 139, 250, 0.04); border-top-color: rgba(167, 139, 250, 0.15); border-right-color: rgba(167, 139, 250, 0.15); border-bottom-color: rgba(167, 139, 250, 0.15); }
.normes-section--color-amber   { --section-color: #f59e0b; background: rgba(245, 158, 11, 0.04);  border-top-color: rgba(245, 158, 11, 0.15); border-right-color: rgba(245, 158, 11, 0.15); border-bottom-color: rgba(245, 158, 11, 0.15); }
.normes-section--color-emerald { --section-color: #34d399; background: rgba(52, 211, 153, 0.04);  border-top-color: rgba(52, 211, 153, 0.15); border-right-color: rgba(52, 211, 153, 0.15); border-bottom-color: rgba(52, 211, 153, 0.15); }
.normes-section--color-rose    { --section-color: #fb7185; background: rgba(251, 113, 133, 0.04); border-top-color: rgba(251, 113, 133, 0.15); border-right-color: rgba(251, 113, 133, 0.15); border-bottom-color: rgba(251, 113, 133, 0.15); }

/* ── Section header (clickable) ── */
.normes-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: inherit;
  transition: background 0.15s ease;
}
.normes-section-header:hover {
  background: rgba(var(--text-rgb), 0.025);
}

.normes-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(var(--text-rgb), 0.04);
  color: var(--section-color);
  flex-shrink: 0;
}

.normes-section-header h3 {
  margin: 0;
  flex: 1;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--section-color);
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.normes-section-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.25s ease;
}
.normes-section.is-collapsed .normes-section-chevron {
  transform: rotate(-90deg);
}

/* ── Section body wrapper (collapsible) ── */
.normes-section-body-wrap {
  padding: 0 16px 16px;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease, padding 0.3s ease;
}
.normes-section-body-wrap > .normes-section-body {
  overflow: hidden;
}
.normes-section.is-collapsed .normes-section-body-wrap {
  grid-template-rows: 0fr;
  padding-bottom: 0;
}

.normes-section-body,
.normes-raw-content {
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.9;
}

.normes-section-body p,
.normes-raw-content p {
  margin: 0 0 12px;
}
.normes-section-body p:last-child,
.normes-raw-content p:last-child {
  margin-bottom: 0;
}

.normes-section-body br {
  display: block;
  content: '';
  margin-bottom: 6px;
}

.normes-section-body strong,
.normes-raw-content strong {
  color: var(--section-color, var(--primary));
  font-weight: 600;
}

.normes-section-body h2,
.normes-section-body h3,
.normes-section-body h4,
.normes-raw-content h2,
.normes-raw-content h3,
.normes-raw-content h4 {
  color: var(--text);
  margin: 14px 0 6px;
  font-weight: 650;
}

.normes-section-body h2,
.normes-raw-content h2 {
  font-size: 0.95rem;
}
.normes-section-body h3,
.normes-raw-content h3 {
  font-size: 0.88rem;
}
.normes-section-body h4,
.normes-raw-content h4 {
  font-size: 0.84rem;
}

.normes-section-body ul,
.normes-raw-content ul {
  margin: 8px 0;
  padding-left: 0;
  list-style: none;
}
.normes-section-body li,
.normes-raw-content li {
  margin-bottom: 10px;
  padding-left: 18px;
  position: relative;
  font-size: 0.86rem;
}
.normes-section-body li::before,
.normes-raw-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--section-color, var(--primary));
  opacity: 0.7;
}

.normes-section-body code,
.normes-raw-content code {
  background: rgba(var(--primary-rgb), 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--primary);
}

/* ── Grille compacte clé : valeur ─────────────────────────────────────────── */
.normes-kv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 12px;
}
.normes-kv__item {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
  margin: 0;
  font-size: 0.84rem;
}
.normes-kv__item:last-child {
  border-bottom: none;
}
.normes-kv__item::before {
  content: none;
}
.normes-kv__key {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  align-self: center;
}
.normes-kv__val {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.normes-kv__val strong {
  color: var(--section-color, var(--primary));
  font-weight: 700;
}

/* ── Table ────────────────────────────────────────────────────────────────── */
.normes-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.82rem;
}

.normes-table th,
.normes-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.normes-table th {
  font-weight: 650;
  color: var(--text);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Sources ──────────────────────────────────────────────────────────────── */
.normes-sources {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.normes-sources h4 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.normes-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.normes-source-card {
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid var(--border);
  flex: 0 1 auto;
  max-width: 100%;
}

.normes-source-card.is-local {
  background: rgba(var(--primary-rgb), 0.04);
  border-color: rgba(var(--primary-rgb), 0.15);
}

.normes-source-card__header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.normes-source-card__header > svg {
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.5;
}

.normes-source-card.is-local .normes-source-card__header > svg {
  color: var(--primary);
  opacity: 0.8;
}

.normes-source-card__name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}

.normes-source-card__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  border: none;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s;
  flex-shrink: 0;
}
.normes-source-card__open:hover {
  background: rgba(var(--primary-rgb), 0.18);
}

.normes-source-card__normes {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.normes-source-card__norme-tag {
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
}

/* ── Disclaimer ───────────────────────────────────────────────────────────── */
.normes-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(var(--text-rgb), 0.03);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  border-radius: 10px;
  font-size: 0.75rem;
  color: var(--muted);
}

.normes-disclaimer svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.5;
}

.normes-disclaimer p {
  margin: 0;
}

/* ── Footer cards ─────────────────────────────────────────────────────────── */
.normes-footer {
  padding: 0 32px 24px;
}

.normes-footer-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.normes-footer-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  transition: border-color 0.2s ease;
  min-width: 0;
}

.normes-footer-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
}

.normes-footer-card-icon {
  color: var(--primary);
  flex-shrink: 0;
  display: flex;
}

.normes-footer-card h4 {
  margin: 0 0 2px;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text);
}

.normes-footer-card p {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .normes-header {
    padding: 12px 16px;
  }
  .normes-search-container {
    padding: 10px 16px 12px;
  }
  .normes-search-box {
    padding: 10px 12px;
  }
  .normes-result {
    padding: 0 16px 28px;
  }
  .normes-result-content {
    padding: 14px;
  }
  .normes-section {
    padding: 12px 14px;
  }
  .normes-sections-grid {
    columns: 1 !important;
  }
  .normes-footer {
    padding: 0 16px 16px;
  }
  .normes-footer-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .normes-examples, .normes-history {
    padding: 0 16px;
  }
}

/* ── Documents panel (replaces old local DB panel) ──────────────────── */
.normes-docs-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 2px dashed rgba(var(--primary-rgb), 0.2);
  border-radius: 12px;
  background: rgba(var(--primary-rgb), 0.02);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.normes-docs-dropzone:hover,
.normes-docs-dropzone.is-active {
  border-color: rgba(var(--primary-rgb), 0.4);
  background: rgba(var(--primary-rgb), 0.05);
}

.normes-docs-dropzone p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.normes-docs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.normes-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.76rem;
  transition: border-color 0.15s;
}

.normes-doc-item:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
}

.normes-doc-item__name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.normes-doc-item__open,
.normes-doc-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.12s;
  flex-shrink: 0;
  padding: 0;
}

.normes-doc-item__open:hover {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}

.normes-doc-item__remove:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}


/* ======================================================
   MEMOIRE TECHNIQUE PRO — CSS v2
   Refined dark UI with glassmorphism accents
   ====================================================== */

/* ── Layout ── */
.mt-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--text);
}

/* ── Projects list ── */
.mt-projects {
  flex: 1;
  overflow-y: auto;
  padding: calc(52px + var(--space-7)) calc(36px + var(--space-7)) calc(28px + var(--space-7));
  min-height: 0;
}

.mt-projects__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.mt-projects__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: var(--leading-tight);
}

.mt-projects__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}

.mt-btn-new {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast), transform 0.12s, box-shadow var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.mt-btn-new:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.mt-projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* ── Project Card ── */
.mt-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}

.mt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), transparent);
  transition: opacity 0.18s;
  pointer-events: none;
}

.mt-card:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}

.mt-card:hover::before { opacity: 1; }

.mt-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.mt-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mt-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
  line-height: 1.3;
}

.mt-card__meta {
  font-size: 0.76rem;
  color: var(--muted);
}

.mt-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.mt-card__stats {
  display: flex;
  gap: 12px;
}

.mt-card__stat {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.mt-card__stat span {
  color: var(--text-2);
  font-weight: 600;
}

/* ── Status Badge ── */
.mt-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mt-status--draft {
  background: rgba(var(--text-rgb), 0.08);
  color: var(--text-2);
}

.mt-status--ready {
  background: rgba(74, 208, 140, 0.12);
  color: #4ad08c;
}

.mt-status--exportable {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

.mt-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── New Project Modal ── */
.mt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 24px;
}

.mt-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 32px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  animation: mt-modal-in 0.22s ease;
}

@keyframes mt-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.mt-modal__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--text-1);
}

.mt-form-row {
  margin-bottom: 14px;
}

.mt-form-row label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.mt-input,
.mt-select,
.mt-textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.mt-input:focus,
.mt-select:focus,
.mt-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.mt-textarea { resize: vertical; min-height: 70px; }

.mt-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mt-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.mt-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.12s;
}

.mt-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.mt-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.mt-btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}

.mt-btn--primary {
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
}

.mt-btn--danger {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── Project Detail ── */
.mt-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.mt-detail__head {
  padding: 16px 28px 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

.mt-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mt-detail__back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}

.mt-detail__back:hover { color: var(--primary); }

.mt-detail__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.mt-detail__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-1);
  flex: 1;
  letter-spacing: -0.01em;
}

/* ── Tab Bar ── */
.mt-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: -1px;
}

.mt-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.mt-tab:hover { color: var(--text); }

.mt-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.mt-tab__badge {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.68rem;
  font-weight: 700;
}

/* ── Tab content ── */
.mt-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

/* ── Documents Tab ── */
.mt-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 14px;
  padding: 36px 24px;
  text-align: center;
  transition: border-color 0.18s, background 0.18s;
  cursor: pointer;
  margin-bottom: 22px;
  background: var(--input-bg);
}

.mt-drop-zone:hover,
.mt-drop-zone.drag-over {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.04);
}

.mt-drop-zone__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  opacity: 0.4;
}

.mt-drop-zone__text {
  font-size: 0.9rem;
  color: var(--text-2);
  margin-bottom: 6px;
}

.mt-drop-zone__hint {
  font-size: 0.76rem;
  color: var(--muted);
}

.mt-doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mt-doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s;
}

.mt-doc-item:hover { border-color: rgba(var(--primary-rgb), 0.35); }

.mt-doc-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.mt-doc-item__icon--rc   { background: rgba(239,68,68,0.12); color: #f87171; }
.mt-doc-item__icon--cctp { background: rgba(var(--primary-rgb),0.12); color: var(--primary); }
.mt-doc-item__icon--dpgf { background: rgba(245,158,11,0.12); color: #fbbf24; }
.mt-doc-item__icon--plan { background: rgba(99,102,241,0.12); color: #a5b4fc; }
.mt-doc-item__icon--memoire_ref { background: rgba(139,92,246,0.12); color: #a78bfa; }
.mt-doc-item__icon--annexe,
.mt-doc-item__icon--autre { background: rgba(var(--text-rgb),0.08); color: var(--text-2); }

.mt-doc-item__info {
  flex: 1;
  min-width: 0;
}

.mt-doc-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-doc-item__size {
  font-size: 0.73rem;
  color: var(--muted);
  margin-top: 1px;
}

.mt-doc-item__type-select {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
}

.mt-doc-item__remove {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.mt-doc-item__remove:hover { color: #f87171; }

/* ── Exigences Tab ── */

/* Dashboard */
.mt-req-dashboard {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.mt-req-dashboard__main {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
}

.mt-req-dashboard__pct-ring {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.mt-req-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.mt-req-ring__bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 3;
}

.mt-req-ring__fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray 0.6s ease;
}

.mt-req-dashboard__pct-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-1);
}

.mt-req-dashboard__info {
  flex: 1;
  min-width: 0;
}

.mt-req-dashboard__title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}

.mt-req-dashboard__subtitle {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 10px;
}

/* Segmented bar */
.mt-req-segbar {
  height: 6px;
  border-radius: 3px;
  background: rgba(248, 113, 113, 0.2);
  display: flex;
  overflow: hidden;
}

.mt-req-segbar__fill {
  height: 100%;
  transition: width 0.5s ease;
}

.mt-req-segbar__fill--covered { background: #4ad08c; }
.mt-req-segbar__fill--partial { background: #fbbf24; }

/* Stats row */
.mt-req-dashboard__stats {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}

.mt-req-stat {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mt-req-stat__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mt-req-stat__count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-1);
}

.mt-req-stat__label {
  font-size: 0.73rem;
  color: var(--muted);
}

.mt-req-stat--must {
  padding-left: 14px;
  border-left: 1px solid var(--border);
}

/* Toolbar */
.mt-req-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* Filter chips */
.mt-req-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

.mt-req-filters__sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

.mt-req-filter-chip {
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: all 0.15s;
}

.mt-req-filter-chip.active {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.4);
  color: var(--primary);
}

/* Onboarding card */
.mt-req-onboard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.5;
}

.mt-req-onboard strong { color: var(--text-1); }

.mt-req-onboard__hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
}

/* Paste zone */
.mt-req-paste {
  margin-bottom: 20px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.mt-req-paste__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mt-req-paste__demo {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.mt-req-paste__foot {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
}

.mt-req-paste__count {
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: auto;
}

/* ── Requirement groups ── */
.mt-req-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mt-req-group__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.mt-req-group__count {
  font-size: 0.68rem;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 700;
}

.mt-req-group__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Requirement card ── */
.mt-req-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  overflow: hidden;
}

.mt-req-card:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.mt-req-card--editing {
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.mt-req-card__main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: pointer;
}

.mt-req-card__text {
  flex: 1;
  font-size: 0.84rem;
  color: var(--text-1);
  line-height: 1.45;
}

.mt-req-card__tags {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.mt-req-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.mt-req-chip--cat {
  background: rgba(var(--text-rgb), 0.06);
  color: var(--text-2);
}

.mt-req-chip--lot {
  background: rgba(99, 102, 241, 0.08);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.2);
}

/* Status button */
.mt-req-card__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  min-width: 70px;
}

.mt-req-card__status:hover {
  background: rgba(var(--primary-rgb), 0.04);
}

.mt-req-card__status-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.mt-req-card__status-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Edit panel */
.mt-req-card__edit {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.02);
}

.mt-req-card__edit label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.mt-req-card__edit-row {
  margin-bottom: 12px;
}

.mt-req-card__edit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.mt-req-card__edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

/* Legacy support */
.mt-criticality {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mt-criticality--must   { background: rgba(239,68,68,0.12); color: #f87171; }
.mt-criticality--should { background: rgba(245,158,11,0.12); color: #fbbf24; }
.mt-criticality--nice   { background: rgba(var(--text-rgb),0.08); color: var(--text-2); }

/* ── Plan Tab ── */
.mt-plan-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.mt-outline {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mt-section-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: default;
}

.mt-section-item:hover { border-color: rgba(var(--primary-rgb), 0.35); }

.mt-section-item.dragging {
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0.85;
  border-color: var(--primary);
}

.mt-section-item__drag {
  cursor: grab;
  color: var(--muted);
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.mt-section-item__drag:hover { opacity: 1; }

.mt-section-item__level {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.mt-level-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt-level-btn:hover { border-color: var(--primary); color: var(--primary); }

.mt-section-item__indent {
  flex-shrink: 0;
}

.mt-section-item__title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  background: none;
  border: none;
  outline: none;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s;
  font-family: inherit;
}

.mt-section-item__title:focus {
  background: var(--input-bg);
}

.mt-section-item--level1 .mt-section-item__title { font-size: 0.95rem; }
.mt-section-item--level2 .mt-section-item__title { font-size: 0.85rem; font-weight: 500; }
.mt-section-item--level3 .mt-section-item__title { font-size: 0.8rem; font-weight: 400; color: var(--text-2); }

.mt-section-item__badge {
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
}

.mt-section-item__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.mt-section-item:hover .mt-section-item__actions { opacity: 1; }

.mt-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

.mt-icon-btn:hover { color: var(--text); background: var(--border); }
.mt-icon-btn.danger:hover { color: #f87171; background: rgba(239,68,68,0.1); }

/* ── Generation progress bar ── */
.mt-gen-progress {
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}

.mt-gen-progress__bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--primary-rgb), 0.1);
  overflow: hidden;
  margin-bottom: 8px;
}

.mt-gen-progress__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.6));
  transition: width 0.4s ease;
}

.mt-gen-progress__info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
}

.mt-gen-progress__count {
  font-weight: 700;
  color: var(--primary);
}

.mt-gen-progress__title {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════
   REDACTION TAB — Major visual upgrade
   ══════════════════════════════════════════════════════════ */

.mt-redaction-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.mt-redaction-layout:has(.mt-sources-panel),
.mt-redaction-layout:has(.mt-activity-panel) {
  grid-template-columns: 1fr 300px;
}

.mt-redaction-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* ── Section Navigation — Grouped by H1 ── */
.mt-section-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  max-height: 165px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.15) transparent;
}

.mt-section-nav::-webkit-scrollbar { width: 4px; }
.mt-section-nav::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.2);
  border-radius: 2px;
}

/* Each H1 + its children = one group */
.mt-section-group {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.mt-section-group__children {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* Base pill style */
.mt-section-pill {
  position: relative;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.71rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  transition: all 0.15s;
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.mt-section-pill:hover {
  background: rgba(var(--primary-rgb), 0.05);
  color: var(--text-1);
}

.mt-section-pill.active {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-weight: 600;
}

/* H1 — parent section, more prominent */
.mt-section-pill--h1 {
  font-weight: 700;
  font-size: 0.73rem;
  color: var(--text-1);
  background: rgba(var(--text-rgb), 0.04);
  border-color: rgba(var(--text-rgb), 0.1);
  padding: 5px 11px;
  border-radius: 7px;
  flex-shrink: 0;
}

.mt-section-pill--h1:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
  background: rgba(var(--primary-rgb), 0.06);
}

.mt-section-pill--h1.active {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.35);
  color: var(--primary);
}

/* Locked */
.mt-section-pill--locked {
  padding-right: 22px;
  opacity: 0.6;
}

.mt-section-pill--locked::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2.5'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.7;
}

/* Done indicator: green dot */
.mt-section-pill--done::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ad08c;
  margin-right: 5px;
  flex-shrink: 0;
  vertical-align: middle;
  opacity: 0.7;
}

.mt-section-pill--done.active::before {
  opacity: 1;
}

/* ── Editor Card — Elevated glass-like panel ── */
.mt-editor-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.mt-editor-card__head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(var(--primary-rgb), 0.02);
}

.mt-editor-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-1);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Action buttons — Grouped with dividers ── */
.mt-editor-actions {
  display: flex;
  gap: 0;
  align-items: center;
}

.mt-editor-actions__group {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 8px;
}

.mt-editor-actions__group:first-child {
  padding-left: 0;
}

.mt-editor-actions__group:last-child {
  padding-right: 0;
}

.mt-editor-actions__divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

.mt-action-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mt-action-btn:hover {
  background: rgba(var(--primary-rgb), 0.06);
  color: var(--primary);
}

.mt-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.mt-action-btn:disabled:hover {
  background: transparent;
  color: var(--muted);
}

.mt-action-btn--generate {
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
  padding: 6px 16px;
  border-radius: 8px;
  font-weight: 700;
}

.mt-action-btn--generate:hover {
  opacity: 0.9;
  box-shadow: 0 3px 12px rgba(var(--primary-rgb), 0.3);
  color: var(--btn-gradient-text);
}

.mt-action-btn--lock {
  color: #4ad08c;
}
.mt-action-btn--lock:hover {
  background: rgba(74, 208, 140, 0.08);
  color: #4ad08c;
}

/* ── Editor textarea ── */
.mt-editor-textarea {
  flex: 1;
  width: 100%;
  padding: 20px 22px;
  background: transparent;
  border: none;
  resize: none;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.75;
  font-family: inherit;
  outline: none;
  min-height: 280px;
}

.mt-editor-textarea::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

.mt-editor-textarea.is-generating {
  opacity: 0.6;
  pointer-events: none;
}

.mt-streaming-cursor::after {
  content: '|';
  animation: blink 0.7s step-end infinite;
  color: var(--primary);
  font-weight: 300;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Sources used — Rows by type ── */
.mt-section-sources {
  padding: 10px 18px 12px;
  border-top: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.015);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mt-section-sources__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mt-section-sources__label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 68px;
  padding-top: 3px;
}

.mt-section-sources__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}

.mt-source-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}

.mt-source-tag--must {
  background: rgba(239, 68, 68, 0.06);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.15);
}

.mt-source-tag--should {
  background: rgba(251, 191, 36, 0.06);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.15);
}

.mt-source-tag--nice {
  background: rgba(74, 222, 128, 0.06);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.15);
}

.mt-source-tag--doc {
  background: rgba(99, 130, 200, 0.06);
  color: #7c9dcc;
  border-color: rgba(99, 130, 200, 0.15);
  cursor: pointer;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mt-source-tag--doc:hover {
  background: rgba(99, 130, 200, 0.12);
  border-color: rgba(99, 130, 200, 0.3);
  color: #93b4e0;
}

/* Score & proof evaluation tags */
.mt-source-tag--good {
  background: rgba(46, 160, 67, 0.1);
  color: #3fb950;
  border-color: rgba(46, 160, 67, 0.25);
}

.mt-source-tag--warn {
  background: rgba(210, 153, 34, 0.1);
  color: #d29922;
  border-color: rgba(210, 153, 34, 0.25);
}

.mt-source-tag--bad {
  background: rgba(248, 81, 73, 0.1);
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.25);
}

.mt-source-tag--eval {
  font-size: 10px;
  padding: 1px 6px;
}

/* ── Editor footer — Clean bottom bar ── */
.mt-editor-footer {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(var(--text-rgb), 0.01);
}

.mt-word-count {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mt-word-count__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
}

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

.mt-footer-btn {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mt-footer-btn:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  color: var(--text-1);
}

.mt-footer-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.mt-footer-btn--danger {
  color: rgba(248, 113, 113, 0.7);
  border-color: rgba(239, 68, 68, 0.15);
}

.mt-footer-btn--danger:hover {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.04);
}

.mt-footer-btn--primary {
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border-color: transparent;
  box-shadow: 0 1px 6px rgba(var(--primary-rgb), 0.15);
  font-weight: 700;
  padding: 6px 16px;
}

.mt-footer-btn--primary:hover {
  opacity: 0.9;
  box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.25);
  color: var(--btn-gradient-text);
  border-color: transparent;
}

/* ── Activity Panel — Professional progress tracker ── */
.mt-activity-panel {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: calc(100vh - 200px);
  animation: mt-activity-fadein 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

@keyframes mt-activity-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mt-activity-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.mt-activity-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.02em;
}

.mt-activity-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.mt-activity-dot--live {
  background: #4ade80;
  box-shadow: 0 0 3px rgba(74, 222, 128, 0.3);
}

.mt-activity-panel__clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.68rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.mt-activity-panel__clear:hover {
  color: var(--text-1);
  border-color: var(--text-2);
}

.mt-activity-panel__list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.1) transparent;
}

.mt-activity-panel__list::-webkit-scrollbar {
  width: 3px;
}
.mt-activity-panel__list::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.15);
  border-radius: 2px;
}

/* Phase = grouped entries of same type */
.mt-activity-phase {
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.68rem;
  animation: mt-entry-slide 0.12s ease;
  border-left: 2px solid transparent;
  transition: background 0.15s;
}
.mt-activity-phase:hover {
  background: rgba(var(--primary-rgb), 0.02);
}

/* Colored left border per type */
.mt-activity-entry--system { border-left-color: #64748b; }
.mt-activity-entry--rag { border-left-color: #a855f7; }
.mt-activity-entry--cctp { border-left-color: #3b82f6; }
.mt-activity-entry--api { border-left-color: #fb923c; }
.mt-activity-entry--success { border-left-color: #4ade80; }
.mt-activity-entry--error { border-left-color: #f87171; }
.mt-activity-entry--warning { border-left-color: #fbbf24; }
.mt-activity-entry--writing { border-left-color: #2dd4bf; }
.mt-activity-entry--status { border-left-color: #818cf8; }
.mt-activity-entry--done { border-left-color: #4ade80; }

.mt-activity-phase__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

@keyframes mt-entry-slide {
  from { opacity: 0; }
  to { opacity: 1; }
}

.mt-activity-entry__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  border-radius: 3px;
  background: transparent;
}

.mt-activity-entry__label {
  flex: 1;
  font-weight: 500;
  font-size: 0.66rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-activity-entry--system .mt-activity-entry__label { color: #94a3b8; }
.mt-activity-entry--rag .mt-activity-entry__label { color: #a855f7; }
.mt-activity-entry--cctp .mt-activity-entry__label { color: #60a5fa; }
.mt-activity-entry--api .mt-activity-entry__label { color: #fb923c; }
.mt-activity-entry--success .mt-activity-entry__label { color: #4ade80; }
.mt-activity-entry--error .mt-activity-entry__label { color: #f87171; }
.mt-activity-entry--warning .mt-activity-entry__label { color: #fbbf24; }
.mt-activity-entry--writing .mt-activity-entry__label { color: #2dd4bf; }
.mt-activity-entry--status .mt-activity-entry__label { color: #818cf8; }
.mt-activity-entry--done .mt-activity-entry__label { color: #4ade80; }

.mt-activity-phase__summary {
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.3;
  margin-top: 1px;
  margin-left: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-activity-entry__time {
  flex-shrink: 0;
  font-size: 0.55rem;
  color: var(--muted);
  opacity: 0.3;
  font-variant-numeric: tabular-nums;
}

/* ── Sources Panel ── */
.mt-sources-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 100%;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-rgb), 0.1) transparent;
}

.mt-sources-panel::-webkit-scrollbar { width: 3px; }
.mt-sources-panel::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.15); border-radius: 2px; }

.mt-sources-panel__title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mt-source-item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: border-color 0.15s;
}

.mt-source-item:hover { border-color: rgba(var(--primary-rgb), 0.3); }

.mt-source-item__ref {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mt-source-item__text {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mt-missing-info {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: 10px;
  padding: 12px;
}

.mt-missing-info__title {
  font-size: 0.73rem;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.mt-missing-info__item {
  font-size: 0.76rem;
  color: var(--text-2);
  padding: 3px 0;
  padding-left: 14px;
  position: relative;
}

.mt-missing-info__item::before {
  content: '?';
  position: absolute;
  left: 2px;
  color: #fbbf24;
  font-weight: 700;
  font-size: 0.7rem;
}

/* ── Export Tab ── */
.mt-export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.mt-export-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.18s;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mt-export-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.15);
}

.mt-export-card__icon {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}

.mt-export-card__name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 5px;
}

.mt-export-card__desc {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.mt-export-card--debug {
  border-color: rgba(251, 191, 36, 0.25);
}
.mt-export-card--debug:hover {
  border-color: #fbbf24;
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.15);
}

.mt-compliance-report {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}

.mt-compliance-report__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 16px;
}

.mt-compliance-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  font-size: 0.8rem;
}

.mt-compliance-row:last-child { border-bottom: none; }

.mt-compliance-row__label {
  flex: 1;
  color: var(--text-2);
}

.mt-compliance-row__val {
  font-weight: 700;
  font-size: 0.9rem;
}

.mt-compliance-row__val--good { color: #4ad08c; }
.mt-compliance-row__val--warn { color: #fbbf24; }
.mt-compliance-row__val--bad  { color: #f87171; }

/* ── Loading / Spinner ── */
.mt-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--primary-rgb), 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ── */
.mt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  text-align: center;
  gap: 12px;
}

.mt-empty__icon {
  width: 56px;
  height: 56px;
  opacity: 0.2;
}

.mt-empty__text {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ── Section divider ── */
.mt-section-label {
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 10px;
  margin-top: 20px;
}

.mt-section-label:first-child { margin-top: 0; }

/* ── AI Toast notification ── */
.mt-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text);
  z-index: var(--z-toast);
  animation: mt-toast-in 0.25s ease;
}

@keyframes mt-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Responsive ── */
/* ── Inline Chat Bar ── */
.mt-chat-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.02);
}

.mt-chat-bar__input {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}

.mt-chat-bar__input:focus {
  border-color: var(--primary);
}

.mt-chat-bar__input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.mt-chat-bar__input:disabled {
  opacity: 0.5;
}

.mt-chat-bar__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  flex-shrink: 0;
}

.mt-chat-bar__send:hover:not(:disabled) {
  opacity: 0.85;
  transform: scale(1.05);
}

.mt-chat-bar__send:disabled {
  opacity: 0.35;
  cursor: default;
}

@keyframes mt-spin {
  to { transform: rotate(360deg); }
}

.mt-chat-bar__spinner {
  animation: mt-spin 1s linear infinite;
}

@media (max-width: 1023px) {
  .mt-redaction-layout {
    grid-template-columns: 1fr !important;
  }
  .mt-projects__grid {
    grid-template-columns: 1fr;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   Mémoire Technique V2 — Styles unifiés
   Namespaces : .m2-* (page+projet) · .onboarding-* · .cp-* (CompanyProfile)
                .gen-progress__* · .asset-* · .template-* · .qualif-*
   Mode sombre uniquement — tokens var(--panel|text|muted|border|primary|bg|danger)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Racine ────────────────────────────────────────────────────────────── */
.m2-root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  padding: var(--space-6);
  gap: var(--space-5);
}
.m2-root--loading,
.m2-root--onboarding {
  padding: 0;
}
.m2-loading {
  color: var(--muted);
  font-size: var(--text-base);
  padding: var(--space-7);
  text-align: center;
}
.m2-onboarding-fallback {
  padding: var(--space-8);
  text-align: center;
  color: var(--muted);
}
.m2-muted {
  color: var(--muted);
  font-size: var(--text-sm);
}
.m2-flex1 { flex: 1; }

/* ── Liste projets ─────────────────────────────────────────────────────── */
.m2-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.m2-list__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}
.m2-list__titlewrap { display: flex; flex-direction: column; gap: var(--space-1); }
.m2-list__title { font-size: var(--text-xl); margin: 0; color: var(--text); }
.m2-list__subtitle { color: var(--muted); font-size: var(--text-base); margin: 0; }
.m2-list__actions { display: flex; gap: var(--space-2); }
.m2-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.m2-list__empty {
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  color: var(--muted);
}
.m2-list__empty-hint {
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

/* ── Card projet ────────────────────────────────────────────────────────── */
.m2-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.m2-card:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}
.m2-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
}
.m2-card__title {
  font-size: var(--text-md);
  margin: 0;
  color: var(--text);
  line-height: var(--leading-tight);
}
.m2-card__status {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xl);
  white-space: nowrap;
  border: 1px solid var(--border);
}
.m2-card__status--neutral  { color: var(--muted); }
.m2-card__status--info     { color: var(--color-info);    background: var(--color-info-muted);    border-color: transparent; }
.m2-card__status--progress { color: var(--color-warning); background: var(--color-warning-muted); border-color: transparent; }
.m2-card__status--success  { color: var(--color-success); background: var(--color-success-muted); border-color: transparent; }
.m2-card__status--danger   { color: var(--color-danger);  background: var(--color-danger-muted);  border-color: transparent; }
.m2-card__meta { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.m2-card__meta-row {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}
.m2-card__meta-row dt { font-weight: 600; min-width: 36px; }
.m2-card__meta-row dd { margin: 0; color: var(--text); }
.m2-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.m2-card__date { font-size: var(--text-xs); color: var(--muted); }
.m2-card__open { font-size: var(--text-xs); color: var(--primary); }

/* ── Nouveau projet (modal) ────────────────────────────────────────────── */
.m2-new-project { display: flex; flex-direction: column; gap: var(--space-4); }
.m2-new-project__row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.m2-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.m2-radio {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  cursor: pointer;
  text-align: center;
  color: var(--text);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.m2-radio.is-active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.08);
}
.m2-radio__label { color: var(--text); }
.m2-form-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  padding: var(--space-2);
  background: var(--color-danger-muted);
  border-radius: var(--radius-sm);
}

/* ── Inputs unifiés ────────────────────────────────────────────────────── */
.m2-input, .m2-select, .m2-textarea {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-family: inherit;
  width: 100%;
}
.m2-input:focus, .m2-select:focus, .m2-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.m2-input--narrow { width: 100px; }
.m2-textarea { resize: vertical; min-height: 60px; line-height: var(--leading-normal); }
.m2-iconbtn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
}
.m2-iconbtn:hover { border-color: var(--primary); color: var(--primary); }
.m2-link {
  background: none;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  font-size: var(--text-sm);
  padding: 0;
}
.m2-link:hover { text-decoration: underline; }
.m2-link--primary { color: var(--primary); }
.m2-link--danger { color: var(--color-danger); }

/* ── Détail projet ─────────────────────────────────────────────────────── */
.m2-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 100%;
}
.m2-detail--loading,
.m2-detail--error { padding: var(--space-6); }
.m2-detail__topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.m2-detail__titlewrap { display: flex; flex-direction: column; gap: var(--space-1); }
.m2-detail__title { margin: 0; font-size: var(--text-lg); color: var(--text); }
.m2-detail__meta { color: var(--muted); font-size: var(--text-sm); display: flex; gap: var(--space-2); }
.m2-detail__tabs { border-bottom: 1px solid var(--border); }
.m2-detail__body { padding-top: var(--space-4); }
.m2-detail__error {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  color: var(--color-danger);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Tab générique ─────────────────────────────────────────────────────── */
.m2-tab {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.m2-tab__intro { display: flex; flex-direction: column; gap: var(--space-2); }
.m2-tab__title { margin: 0; font-size: var(--text-lg); color: var(--text); }
.m2-tab__hint { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-normal); }
.m2-tab__saving { font-size: var(--text-xs); color: var(--primary); }
.m2-tab__dropzone { margin: 0; }
.m2-tab__section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.m2-tab__section--actions { flex-direction: column; gap: var(--space-3); }
.m2-tab__section--inline {
  flex-direction: row;
  gap: var(--space-5);
  align-items: flex-start;
  flex-wrap: wrap;
}
.m2-tab__section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.m2-tab__section-title {
  margin: 0;
  font-size: var(--text-md);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.m2-tab__counter {
  background: var(--bg);
  color: var(--muted);
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xl);
}
.m2-tab__empty {
  color: var(--muted);
  padding: var(--space-5);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.m2-tab__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.m2-tab__chat { display: flex; flex-direction: column; gap: var(--space-3); }
.m2-toolbar-item { display: flex; flex-direction: column; gap: var(--space-1); }
.m2-toolbar-label { font-size: var(--text-xs); color: var(--muted); }
.m2-toolbar-actions { display: flex; gap: var(--space-2); margin-left: auto; }
.m2-actions-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.m2-warn {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--text-sm);
}

/* ── Section plan ──────────────────────────────────────────────────────── */
.m2-section-list { display: flex; flex-direction: column; gap: var(--space-3); }
.m2-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.m2-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.m2-section__index {
  background: var(--panel);
  color: var(--muted);
  font-size: var(--text-xs);
  min-width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m2-section__title {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 600;
}
.m2-section__title:focus { outline: none; }
.m2-section__move { display: flex; gap: 2px; }
.m2-section__required {
  font-size: var(--text-xs);
  color: var(--color-warning-light);
  background: var(--color-warning-muted);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
}
.m2-section__desc {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: var(--space-2);
  font-family: inherit;
  font-size: var(--text-sm);
  resize: vertical;
}

/* ── Fichiers ──────────────────────────────────────────────────────────── */
.m2-file-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.m2-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  gap: var(--space-3);
}
.m2-file__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m2-file__name { color: var(--text); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m2-file__meta { display: flex; gap: var(--space-2); align-items: center; }
.m2-file__kind {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.m2-file__badge {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
}
.m2-file__badge--ok       { color: var(--color-success); background: var(--color-success-muted); }
.m2-file__badge--pending  { color: var(--muted);         background: var(--color-warning-muted); }
.m2-file__delete {
  background: transparent;
  border: 0;
  color: var(--color-danger);
  font-size: var(--text-xs);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.m2-file__delete:hover { text-decoration: underline; }
.m2-file__delete:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Critères ──────────────────────────────────────────────────────────── */
.m2-criteria-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.m2-criterion {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.m2-criterion__head { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.m2-criterion__libelle { flex: 2; min-width: 200px; }
.m2-criterion__poids { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 160px; }
.m2-criterion__poids input { flex: 1; }
.m2-criterion__poids-val { font-size: var(--text-sm); color: var(--text); min-width: 36px; text-align: right; }
.m2-criterion__desc { width: 100%; }
.m2-poids-total {
  font-size: var(--text-sm);
  color: var(--color-warning-light);
}
.m2-poids-total.is-ok { color: var(--color-success); }
.m2-toggle { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.m2-toggle__label { color: var(--text); font-size: var(--text-sm); }

/* ── Photos ────────────────────────────────────────────────────────────── */
.m2-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.m2-photo {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.m2-photo__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg);
}
.m2-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.m2-photo__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--text-xs);
}
.m2-photo__badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
}
.m2-photo__badge--ok      { color: var(--color-success); background: var(--color-success-muted); }
.m2-photo__badge--pending { color: var(--muted);         background: var(--color-warning-muted); }
.m2-photo__caption {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.m2-photo__text {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text);
  padding: var(--space-2);
  font-size: var(--text-sm);
  resize: vertical;
  font-family: inherit;
}
.m2-photo__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
}

/* ── DocViewer ─────────────────────────────────────────────────────────── */
.m2-docviewer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.m2-docviewer__toolbar { display: flex; gap: var(--space-2); }
.m2-docviewer__frame-wrap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  min-height: 480px;
}
.m2-docviewer__frame {
  width: 100%;
  min-height: 70vh;
  border: 0;
  display: block;
  background: var(--panel);
}
.m2-docviewer__hint { font-size: var(--text-xs); color: var(--muted); }
.m2-docviewer__empty {
  padding: var(--space-7);
  text-align: center;
  color: var(--muted);
}

/* ── Génération progress ──────────────────────────────────────────────── */
.gen-progress {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.gen-progress__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.gen-progress__status { display: flex; align-items: center; gap: var(--space-2); color: var(--text); font-size: var(--text-sm); }
.gen-progress__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--muted);
}
.gen-progress__dot--idle       { background: var(--muted); }
.gen-progress__dot--generating { background: var(--color-warning); animation: m2-pulse 1.2s infinite; }
.gen-progress__dot--ready      { background: var(--color-success); }
.gen-progress__dot--failed     { background: var(--color-danger); }
.gen-progress__dot--expired    { background: var(--color-danger); opacity: 0.6; }
@keyframes m2-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.gen-progress__current { font-size: var(--text-sm); color: var(--muted); }
.gen-progress__bar {
  background: var(--bg);
  border-radius: var(--radius-full);
  overflow: hidden;
  height: 10px;
  position: relative;
}
.gen-progress__bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width var(--transition-slow);
}
.gen-progress__bar-label {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: right;
}
.gen-progress__stats {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.gen-progress__stat { display: flex; flex-direction: column; gap: 2px; }
.gen-progress__stat-label { font-size: var(--text-xs); color: var(--muted); }
.gen-progress__phases {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.gen-progress__phase {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
  opacity: 0.5;
}
.gen-progress__phase--done   { color: var(--color-success); opacity: 1; }
.gen-progress__phase--active { color: var(--text); opacity: 1; font-weight: 500; }
.gen-progress__phase-bullet {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--bg);
}
.gen-progress__phase--done .gen-progress__phase-bullet   { background: var(--color-success); border-color: var(--color-success); }
.gen-progress__phase--active .gen-progress__phase-bullet { background: var(--primary); border-color: var(--primary); }
.gen-progress__phase-label { flex: 1; }
.gen-progress__error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ═════════════════ ONBOARDING ═════════════════════════════════════════ */
.onboarding-shell {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
.onboarding-loading { color: var(--muted); padding: var(--space-8); text-align: center; }
.onboarding-header {
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.onboarding-title { margin: 0; font-size: var(--text-xl); color: var(--text); }
.onboarding-subtitle { margin: 0; color: var(--muted); font-size: var(--text-base); }
.onboarding-progress {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-7);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.onboarding-progress__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.onboarding-progress__step--done   { color: var(--color-success); }
.onboarding-progress__step--active { color: var(--text); background: var(--bg); font-weight: 500; }
.onboarding-progress__step--todo   { color: var(--muted); }
.onboarding-progress__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
}
.onboarding-progress__step--done   .onboarding-progress__num { background: var(--color-success); border-color: var(--color-success); color: var(--panel); }
.onboarding-progress__step--active .onboarding-progress__num { background: var(--primary); border-color: var(--primary); color: var(--panel); }
.onboarding-progress__label { white-space: nowrap; }

.onboarding-body { flex: 1; padding: var(--space-6) var(--space-7); overflow-y: auto; }
.onboarding-step { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }
.onboarding-step__head { display: flex; flex-direction: column; gap: var(--space-2); }
.onboarding-step__hint { color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-normal); margin: 0; }
.onboarding-step__content { display: flex; flex-direction: column; gap: var(--space-4); }

.onboarding-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-7);
  background: var(--panel);
  border-top: 1px solid var(--border);
  gap: var(--space-3);
}
.onboarding-footer__left,
.onboarding-footer__right { display: flex; gap: var(--space-2); }
.onboarding-footer__center { color: var(--muted); font-size: var(--text-sm); }
.onboarding-footer__counter { color: var(--muted); font-size: var(--text-sm); }

/* Onboarding — inputs / form */
.onboarding-form { display: flex; flex-direction: column; gap: var(--space-4); }
.onboarding-form__section { display: flex; flex-direction: column; gap: var(--space-3); }
.onboarding-form__section-title { margin: 0; font-size: var(--text-md); color: var(--text); }
.onboarding-form__row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.onboarding-form__row--2 > * { flex: 1; min-width: 200px; }
.onboarding-input,
.onboarding-select,
.onboarding-textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-family: inherit;
  width: 100%;
}
.onboarding-textarea { min-height: 80px; resize: vertical; line-height: var(--leading-normal); }
.onboarding-textarea--banned { background: var(--color-danger-bg); }
.onboarding-input:focus,
.onboarding-select:focus,
.onboarding-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.onboarding-muted { color: var(--muted); font-size: var(--text-sm); }
.onboarding-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.onboarding-add-row { display: flex; gap: var(--space-2); }
.onboarding-skip-row { display: flex; gap: var(--space-2); align-items: center; }
.onboarding-radio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}

/* Step Assets */
.onboarding-assets { display: flex; flex-direction: column; gap: var(--space-4); }
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.asset-slot {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.asset-slot__head { display: flex; justify-content: space-between; align-items: center; }
.asset-slot__body { display: flex; flex-direction: column; gap: var(--space-2); }
.asset-slot__preview {
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xs);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.asset-slot__img { max-width: 100%; max-height: 140px; object-fit: contain; }
.asset-slot__filebadge { font-size: var(--text-xs); color: var(--muted); }

/* Photos list (onboarding) */
.onboarding-photo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}
.onboarding-photo-list__item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  aspect-ratio: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboarding-photo-list__placeholder { color: var(--muted); font-size: var(--text-xs); }

/* Examples */
.onboarding-examples { display: flex; flex-direction: column; gap: var(--space-3); }
.onboarding-examples__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.onboarding-examples__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.onboarding-examples__name { color: var(--text); font-size: var(--text-sm); }
.onboarding-examples__size { color: var(--muted); font-size: var(--text-xs); }

/* Extract */
.onboarding-extract {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.onboarding-extract__loading { color: var(--muted); font-size: var(--text-sm); }

/* Références */
.onboarding-references { display: flex; flex-direction: column; gap: var(--space-3); }
.onboarding-refs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.onboarding-refs__item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.onboarding-refs__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.onboarding-refs__main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; flex: 1; }
.onboarding-refs__actions { display: flex; gap: var(--space-2); }
.onboarding-refs__edit { display: flex; flex-direction: column; gap: var(--space-2); }
.onboarding-refs__edit-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.onboarding-refs__tag {
  font-size: var(--text-xs);
  background: var(--bg);
  color: var(--muted);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
}

/* Rules / Structure / Lexicon */
.onboarding-rules { display: flex; flex-direction: column; gap: var(--space-3); }
.onboarding-rules-preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted);
}
.onboarding-structure-preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.onboarding-lexicon { display: flex; flex-direction: column; gap: var(--space-2); }

/* Qualifs */
.onboarding-qualifs { display: flex; flex-direction: column; gap: var(--space-3); }
.qualif-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.qualif-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.qualif-card__uploads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}
.qualif-upload {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.qualif-upload__preview {
  aspect-ratio: 4 / 3;
  background: var(--panel);
  border-radius: var(--radius-xs);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qualif-upload__filebadge { font-size: var(--text-xs); color: var(--muted); }

/* Template choice / preview / studio */
.onboarding-template { display: flex; flex-direction: column; gap: var(--space-4); }
.template-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.template-choice {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
  text-align: left;
  color: var(--text);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.template-choice--active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.08);
}
.template-choice__icon { font-size: var(--text-2xl); }
.template-choice__hint { font-size: var(--text-sm); color: var(--muted); }
.template-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-sm);
}
.template-loading__spinner {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  animation: m2-spin var(--animation-spin) linear infinite;
}
@keyframes m2-spin { to { transform: rotate(360deg); } }
.template-preview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.template-preview--imported { border-color: var(--color-info); }
.template-preview--skipped  { border-style: dashed; }
.template-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.template-preview__thumb {
  aspect-ratio: 3 / 4;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.template-preview__thumb img { width: 100%; height: 100%; object-fit: cover; }
.template-preview__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }

.template-studio { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.template-studio__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.template-studio__split {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  flex: 1;
  min-height: 480px;
}
.template-studio__preview {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  overflow: hidden;
}
.template-studio__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--text-sm);
}
.template-studio__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.template-studio__thumb {
  aspect-ratio: 3 / 4;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  overflow: hidden;
}
.template-studio__thumb img { width: 100%; height: 100%; object-fit: cover; }
.template-studio__chat {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
}
.template-studio__empty { color: var(--muted); font-size: var(--text-sm); padding: var(--space-5); text-align: center; }
.template-studio__download { display: flex; gap: var(--space-2); }

/* Onboarding complete */
.onboarding-complete {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
}
.onboarding-complete__inner {
  max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.onboarding-complete__icon {
  font-size: 48px;
  color: var(--color-success);
  margin: 0 auto;
}
.onboarding-complete__title { margin: 0; font-size: var(--text-xl); color: var(--text); }
.onboarding-complete__subtitle { margin: 0; color: var(--muted); }
.onboarding-complete__recap {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
  font-size: var(--text-sm);
}
.onboarding-complete__recap-label { color: var(--muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; }
.onboarding-complete__actions { display: flex; gap: var(--space-2); justify-content: center; }
.onboarding-complete__footnote { color: var(--muted); font-size: var(--text-xs); }

/* ═════════════════ COMPANY PROFILE ════════════════════════════════════ */
.cp-root {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
}
.cp-root--loading { padding: var(--space-7); text-align: center; color: var(--muted); }
.cp-header {
  padding: var(--space-5) var(--space-7);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.cp-title { margin: 0; font-size: var(--text-xl); color: var(--text); }
.cp-status { font-size: var(--text-sm); color: var(--muted); }
.cp-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
}
.cp-sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  overflow-y: auto;
}
.cp-sidebar__btn {
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.cp-sidebar__btn:hover { background: var(--bg); color: var(--text); }
.cp-sidebar__btn--active {
  background: var(--bg);
  color: var(--text);
  font-weight: 500;
  border-left: 2px solid var(--primary);
}
.cp-panel {
  padding: var(--space-6) var(--space-7);
  overflow-y: auto;
}
.cp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 880px;
}
.cp-section h2 { margin: 0; font-size: var(--text-lg); color: var(--text); }
.cp-section h3 { margin: 0; font-size: var(--text-md); color: var(--text); }
.cp-section__hint { color: var(--muted); font-size: var(--text-sm); margin: 0; line-height: var(--leading-normal); }
.cp-section__subtitle { color: var(--text); font-size: var(--text-base); font-weight: 500; margin: 0; }
.cp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}
.cp-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-base);
  font-family: inherit;
}
.cp-toggle-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.cp-asset-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}
.cp-asset-cell { color: var(--text); font-size: var(--text-sm); }
.cp-asset-status { font-size: var(--text-xs); color: var(--color-success); }
.cp-asset-status--missing { color: var(--color-warning-light); }

.cp-tag {
  display: inline-block;
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--bg);
  color: var(--muted);
  margin-left: var(--space-2);
}
.cp-tag--ok { background: var(--color-success-muted); color: var(--color-success); }

/* CP — Structures */
.cp-structures__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cp-structures__item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.cp-structures__main { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.cp-structures__sub { margin: 0; font-size: var(--text-xs); }
.cp-structures__actions { display: flex; gap: var(--space-2); }
.cp-structures__form {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.cp-structures__submit { display: flex; gap: var(--space-2); }

/* CP — Qualifs */
.cp-qualifs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cp-qualifs__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.cp-qualifs__main { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.cp-qualifs__actions { display: flex; gap: var(--space-2); }
.cp-qualifs__add { display: flex; gap: var(--space-2); }

/* CP — Références */
.cp-references__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cp-references__item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

/* CP — Template thumbs */
.cp-template-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2);
}
.cp-template-actions { display: flex; gap: var(--space-2); }

/* ═════════════════ Responsive ═════════════════════════════════════════ */
@media (max-width: 900px) {
  .cp-body { grid-template-columns: 1fr; }
  .cp-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .template-studio__split { grid-template-columns: 1fr; }
}


/* ======================================================
   ATTESTATION MODULE — CSS (Redesigned)
   BTP attestation PDF form filler
   Modern, ergonomic UI with dark/light theme support
   ====================================================== */

/* ── 1. Page Layout ── */
.att-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: transparent;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── 2. Stepper Navigation ── */
.att-stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  padding: var(--space-4) var(--space-7) var(--space-5);
  background: transparent;
  flex-shrink: 0;
}

.att-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  min-width: 100px;
  transition: opacity 0.2s ease;
}

.att-stepper__item:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.att-stepper__item:not(:disabled):hover .att-stepper__circle {
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

.att-stepper__circle {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  transition: all var(--transition-slow);
  position: relative;
  z-index: 2;
}

.att-stepper__item--active .att-stepper__circle {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.18);
}

.att-stepper__item--done .att-stepper__circle {
  border-color: rgba(74, 208, 140, 0.8);
  background: rgba(74, 208, 140, 0.15);
  color: rgba(74, 208, 140, 1);
}

.att-stepper__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 8px;
  text-align: center;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.att-stepper__item--active .att-stepper__label {
  color: var(--primary);
}

.att-stepper__item--done .att-stepper__label {
  color: var(--text);
}

.att-stepper__connector {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin-top: 18px;
  min-width: 40px;
  max-width: 120px;
  border-radius: 1px;
  transition: background 0.3s ease;
}

.att-stepper__connector--done {
  background: rgba(74, 208, 140, 0.5);
}

/* ── 3. Top Bar ── */
.att-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px 4px;
  background: transparent;
  flex-shrink: 0;
}

.att-topbar__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.att-topbar__spacer {
  flex: 1;
}

/* ── 4. Content Area ── */
.att-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  scroll-behavior: smooth;
}

.att-content::-webkit-scrollbar {
  width: 6px;
}

.att-content::-webkit-scrollbar-track {
  background: transparent;
}

.att-content::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.12);
  border-radius: 3px;
}

.att-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb), 0.22);
}

/* ── 5. Step Panel ── */
.att-step-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 36px 28px;
}

.att-step-panel__header {
  margin-bottom: 28px;
}

.att-step-panel__header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.att-step-panel__header p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ── 6. Section Labels ── */
.att-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  opacity: 0.65;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── 7. Drop Zone ── */
.att-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 44px 24px;
  border: 2px dashed rgba(var(--primary-rgb), 0.25);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  margin-bottom: 20px;
  background: rgba(var(--primary-rgb), 0.02);
  position: relative;
  overflow: hidden;
}

.att-dropzone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(var(--primary-rgb), 0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.att-dropzone:hover,
.att-dropzone--hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
  transform: translateY(-1px);
}

.att-dropzone:hover::before,
.att-dropzone--hover::before {
  opacity: 1;
}

.att-dropzone--hover {
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
  animation: att-pulse-border 1.5s ease infinite;
}

@keyframes att-pulse-border {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1); }
  50% { box-shadow: 0 0 0 8px rgba(var(--primary-rgb), 0.05); }
}

.att-dropzone .dz-picker { position: absolute; inset: 12px; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,0.18); z-index: 5; cursor: default; box-sizing: border-box; overflow: hidden; animation: none; }
.att-dropzone .dz-picker__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 14px 12px; background: rgba(var(--primary-rgb), 0.04); border: 1px solid rgba(var(--primary-rgb), 0.14); border-radius: 10px; cursor: pointer; color: var(--text); text-align: left; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.att-dropzone .dz-picker__opt:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.09); transform: translateY(-1px); }
.att-dropzone .dz-picker__opt svg { color: var(--primary); margin-bottom: 4px; }
.att-dropzone .dz-picker__title { font-size: 0.86rem; font-weight: 600; }
.att-dropzone .dz-picker__sub { font-size: 0.74rem; color: var(--muted); }

.att-dropzone__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: transform 0.2s ease;
}

.att-dropzone:hover .att-dropzone__icon {
  transform: translateY(-2px);
}

.att-dropzone__text {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.att-dropzone__hint {
  font-size: 0.78rem;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

/* ── 8. Document List ── */
.att-doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

/* ── 9. Document Item Card ── */
.att-doc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.att-doc-item:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.att-doc-item__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Type-specific badge colors */
.att-doc-item__icon--RC { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.att-doc-item__icon--CCTP { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.att-doc-item__icon--DPGF { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.att-doc-item__icon--CCAP { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.att-doc-item__icon--DQE { background: rgba(236, 72, 153, 0.12); color: #ec4899; }
.att-doc-item__icon--AUTRE { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }

.att-doc-item__info {
  flex: 1;
  min-width: 0;
}

.att-doc-item__name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.att-doc-item__size {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
  display: block;
}

.att-doc-item__delete {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  opacity: 0;
}

.att-doc-item:hover .att-doc-item__delete {
  opacity: 1;
}

.att-doc-item__delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* ── 10. Select ── */
.att-select {
  padding: 7px 12px;
  background: var(--input-bg, var(--panel));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.att-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.att-select--sm {
  padding: 5px 8px;
  font-size: 0.72rem;
  border-radius: 6px;
}

/* ── 11. Input ── */
.att-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--input-bg, var(--panel));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}

.att-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.att-input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.att-input--sm {
  padding: 7px 10px;
  font-size: 0.78rem;
  border-radius: 6px;
}

/* ── 12. Buttons ── */
.att-btn {
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.att-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.att-btn:active:not(:disabled) {
  transform: translateY(0);
}

.att-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.att-btn--primary {
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}

.att-btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.35);
}

.att-btn--danger {
  background: rgba(239, 68, 68, 0.08);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.att-btn--danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
}

.att-btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.att-btn--ghost:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.att-btn--sm {
  padding: 7px 14px;
  font-size: 0.78rem;
  border-radius: 8px;
}

.att-btn--lg {
  padding: 13px 32px;
  font-size: 0.95rem;
  border-radius: 12px;
}

.att-btn-icon {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.att-btn-icon:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--text);
}

.att-btn-icon:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── 13. Template Loaded Card ── */
.att-template-loaded {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--panel);
  border: 1px solid rgba(74, 208, 140, 0.25);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: border-color 0.2s ease;
}

.att-template-loaded:hover {
  border-color: rgba(74, 208, 140, 0.4);
}

.att-template-loaded__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.att-template-reuse {
  margin-top: 8px;
  font-size: 0.78rem;
}

/* ── 14. Config Status Bar ── */
.att-config-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 12px 0;
  background: rgba(var(--primary-rgb), 0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.att-config-status:hover {
  background: rgba(var(--primary-rgb), 0.05);
}

.att-config-status__info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}

/* ── 15. Lots List ── */
.att-lots-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 680px;
}

.att-lot-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.att-lot-row__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.att-lot-row:hover .att-lot-row__num {
  background: rgba(var(--primary-rgb), 0.14);
  border-color: rgba(var(--primary-rgb), 0.25);
}

.att-add-lot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 2px dashed rgba(var(--primary-rgb), 0.25);
  border-radius: 12px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
  margin-bottom: 24px;
}

.att-add-lot:hover {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.45);
  transform: translateY(-1px);
}

/* ── 16. Generation Summary Card ── */
.att-gen-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.att-gen-summary__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.att-gen-summary__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 100px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.att-gen-summary__value {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

/* ── 17. Alert Boxes ── */
.att-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.25);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #eab308;
  margin-bottom: 16px;
}

.att-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #ef4444;
  margin-bottom: 16px;
  animation: att-shake 0.4s ease;
  line-height: 1.4;
}

@keyframes att-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ── 18. Progress Indicator ── */
.att-progress-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.15);
  border-radius: 14px;
  margin-bottom: 20px;
}

.att-progress-block__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.att-progress-block__text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.att-progress__spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(var(--primary-rgb), 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: att-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.att-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--primary-rgb), 0.12);
  overflow: hidden;
  position: relative;
}

.att-progress-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.7));
  transition: width 0.4s ease;
  position: relative;
}

.att-progress-bar__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  animation: att-progress-shimmer 1.5s ease-in-out infinite;
}

@keyframes att-progress-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 19. Step Actions ── */
.att-step-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── 20. Form Row ── */
.att-form-row {
  margin-bottom: 16px;
}

.att-form-row label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════
   PROJECT LIST (aligned with MT/SAO design)
   ═══════════════════════════════════════════════════════ */

.att-projects {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-7) var(--space-7);
  min-height: 0;
}

.att-projects__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.att-projects__title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  line-height: var(--leading-tight);
}

.att-projects__subtitle {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}

.att-btn-new {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity var(--transition-fast), transform 0.12s, box-shadow var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.att-btn-new:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.att-projects__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

/* ── Project Card ── */
.att-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  position: relative;
  overflow: hidden;
}

.att-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06), transparent);
  transition: opacity 0.18s;
  pointer-events: none;
}

.att-card:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
}

.att-card:hover::before { opacity: 1; }

.att-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 10px;
}

.att-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.att-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
  line-height: 1.3;
}

.att-card__meta {
  font-size: 0.76rem;
  color: var(--muted);
}

.att-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.att-card__stats {
  display: flex;
  gap: 12px;
}

.att-card__stat {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.att-card__stat span {
  color: var(--text-2);
  font-weight: 600;
}

/* ── Status Badge ── */
.att-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.att-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.att-status--draft {
  background: rgba(148,163,184,0.12);
  color: #94a3b8;
}
.att-status--draft .att-status__dot { background: #94a3b8; }

.att-status--done {
  background: rgba(74,208,140,0.12);
  color: #4ad08c;
}
.att-status--done .att-status__dot { background: #4ad08c; }

/* ── Icon Button ── */
.att-icon-btn {
  background: none;
  border: none;
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

.att-icon-btn:hover { color: var(--text); background: var(--border); }
.att-icon-btn.danger:hover { color: #f87171; background: rgba(239,68,68,0.1); }

/* ── Empty State ── */
.att-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 32px;
  text-align: center;
  gap: 12px;
}

.att-empty__text {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════
   PREVIEW LAYOUT
   ═══════════════════════════════════════════════════════ */

.att-preview-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ── Preview Top Bar ── */
.att-preview-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}

/* ── Lot Tabs ── */
.att-lot-tabs {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  overflow-x: auto;
  flex-shrink: 0;
  padding: 2px;
  background: rgba(var(--primary-rgb), 0.04);
  border-radius: 10px;
}

.att-lot-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  transition: all 0.15s ease;
  border-radius: 8px;
  white-space: nowrap;
}

.att-lot-tab:hover {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.06);
}

.att-lot-tab--active {
  color: var(--primary);
  background: var(--panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Page Navigation ── */
.att-preview-topbar__center {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 0 8px;
}

.att-preview-topbar__page {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  min-width: 60px;
  text-align: center;
}

.att-preview-topbar__page span {
  color: var(--muted);
  font-weight: 400;
}

.att-preview-topbar__divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

.att-preview-topbar__zoom {
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 36px;
  text-align: center;
  font-weight: 600;
}

.att-preview-topbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

/* ── Preview Body ── */
.att-preview-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.att-preview-pdf-area {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.att-preview-canvas-wrap {
  flex: 1;
  overflow: auto;
  position: relative;
  display: flex;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.08);
  min-height: 0;
}

.att-preview-canvas-inner {
  position: relative;
  display: inline-block;
  transition: transform 0.2s ease;
}

.att-preview-canvas {
  display: block;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #fff;
}

.att-preview-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--panel);
  padding: 14px 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Field Overlay (editable on PDF) ── */
.att-field-overlay {
  position: absolute;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 3px;
  color: #1a1a1a;
  font-family: inherit;
  padding: 2px 4px;
  outline: none;
  cursor: text;
  transition: all 0.15s ease;
  z-index: 10;
  min-width: 20px;
  min-height: 18px;
  resize: none;
  overflow: hidden;
  line-height: 1.3;
}

.att-field-overlay:hover {
  border-color: rgba(var(--primary-rgb), 0.4);
  background: rgba(var(--primary-rgb), 0.04);
}

.att-field-overlay:focus {
  border-color: var(--primary);
  background: rgba(200, 220, 255, 0.15);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

/* ═══════════════════════════════════════════════════════
   SIDEBAR (Fields + Chat)
   ═══════════════════════════════════════════════════════ */

.att-preview-sidebar {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-left: 1px solid var(--border);
  overflow: hidden;
}

/* ── Collapsible Section ── */
.att-sidebar-section {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex 0.3s ease;
}

.att-sidebar-section--fields {
  flex: 1 1 45%;
  min-height: 120px;
}

.att-sidebar-section--chat {
  flex: 1 1 55%;
  border-top: 1px solid var(--border);
  min-height: 200px;
}

.att-sidebar-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.att-sidebar-section__header:hover {
  background: rgba(var(--primary-rgb), 0.04);
}

.att-sidebar-section__title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.att-sidebar-section__count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  padding: 1px 8px;
  border-radius: 10px;
}

.att-sidebar-section__chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
}

.att-sidebar-section--collapsed .att-sidebar-section__chevron {
  transform: rotate(-90deg);
}

.att-sidebar-section__content {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
  min-height: 0;
}

.att-sidebar-section__content::-webkit-scrollbar {
  width: 4px;
}

.att-sidebar-section__content::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.12);
  border-radius: 2px;
}

/* ── Field Card in Sidebar ── */
.att-pfield {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
  transition: background 0.15s ease;
  border-radius: 6px;
  margin-bottom: 2px;
}

.att-pfield:hover {
  background: rgba(var(--primary-rgb), 0.03);
}

.att-pfield__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
  opacity: 0.85;
}

.att-pfield--empty .att-pfield__label {
  opacity: 0.5;
}

.att-pfield__reason {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 5px;
  font-size: 0.68rem;
  color: #f59e0b;
  line-height: 1.3;
  padding: 4px 8px;
  background: rgba(245, 158, 11, 0.06);
  border-radius: 6px;
}

.att-pfield__reason svg {
  flex-shrink: 0;
  margin-top: 1px;
  stroke: #f59e0b;
}

/* ── Confidence indicators (M1) ── */
.att-pfield__conf-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.att-pfield__conf-dot--high { background: var(--primary); box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.55); }
.att-pfield__conf-dot--mid { background: #f59e0b; }
.att-pfield__conf-dot--low { background: var(--muted); opacity: 0.55; }
.att-pfield__conf-dot--unknown { background: var(--muted); opacity: 0.35; }

.att-pfield--conf-high { border-left: 2px solid var(--primary); padding-left: 8px; }
.att-pfield--conf-mid { border-left: 2px solid #f59e0b; padding-left: 8px; }
.att-pfield--conf-low { border-left: 2px solid var(--muted); padding-left: 8px; opacity: 0.85; }

/* G7 — saisie manuelle inline */
.att-pfield--manual {
  border-left: 2px solid var(--primary);
  padding-left: 8px;
  background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.05) 0%, transparent 40%);
}
.att-pfield--invalid input.att-input {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.06);
}
.att-pfield--valid input.att-input:focus {
  border-color: var(--primary);
}

.att-pfield__evidence {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 5px;
  font-size: 0.66rem;
  color: var(--muted);
  line-height: 1.35;
  padding: 4px 8px;
  background: rgba(var(--primary-rgb), 0.05);
  border-radius: 6px;
  font-style: italic;
}
.att-pfield__evidence svg {
  flex-shrink: 0;
  margin-top: 1px;
  stroke: var(--primary);
  opacity: 0.7;
}
.att-pfield__evidence span {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ── Checkbox fields (M1) ── */
.att-pfield--checkbox .att-pfield__checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.att-pfield--checkbox .att-pfield__checkbox-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
}
.att-pfield--checkbox .att-pfield__label {
  margin-bottom: 0;
  flex: 1;
}

/* (anciennes overrides .att-chatia.* supprimées : la nouvelle intégration
   utilise un wrapper .att-chatia-wrap autour de <ChatIA /> — voir bas du
   fichier pour les styles actifs.) */

/* legacy — anciennes classes att-preview-chat__* (conservées au cas où
   d'autres vues les utiliseraient encore, sinon à supprimer plus tard) */
.att-preview-chat__messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.att-preview-chat__messages::-webkit-scrollbar {
  width: 4px;
}

.att-preview-chat__messages::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.12);
  border-radius: 2px;
}

.att-preview-chat__empty {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
  padding: 12px 8px;
  text-align: center;
}

.att-preview-chat__msg {
  font-size: 0.78rem;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 14px;
  max-width: 88%;
  word-break: break-word;
  animation: att-msg-in 0.2s ease;
}

@keyframes att-msg-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.att-preview-chat__msg--user {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.att-preview-chat__msg--assistant {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.att-preview-chat__input {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.att-preview-chat__send {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.att-preview-chat__send:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.att-preview-chat__send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════
   TEMPLATE CONFIGURATOR
   ═══════════════════════════════════════════════════════ */

.att-configure-layout {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.att-configure-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.att-configure-topbar__title {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  opacity: 0.8;
}

.att-configure-hint {
  padding: 10px 20px;
  font-size: 0.78rem;
  color: var(--muted);
  background: rgba(var(--primary-rgb), 0.04);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  line-height: 1.4;
}

.att-configure-main {
  display: flex;
  gap: 0;
  flex: 1;
  overflow: hidden;
}

.att-configure-pdf-wrap {
  flex: 1;
  overflow: auto;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: center;
  padding: 20px;
}

.att-configure-sidebar {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: 12px;
}

.att-configure-sidebar::-webkit-scrollbar {
  width: 4px;
}

.att-configure-sidebar::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.12);
  border-radius: 2px;
}

.att-fields-sidebar__title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ── Config Zone (on PDF) ── */
.att-config-zone {
  position: absolute;
  background: rgba(59, 130, 246, 0.12);
  border: 1.5px solid rgba(59, 130, 246, 0.5);
  border-radius: 3px;
  cursor: grab;
  z-index: 10;
  transition: border-color 0.12s ease, background 0.12s ease;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.att-config-zone:hover {
  border-color: rgba(59, 130, 246, 0.85);
  background: rgba(59, 130, 246, 0.22);
}

.att-config-zone--selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.18);
  z-index: 20;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

.att-config-zone__label {
  font-size: 8px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.att-config-zone__resize {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background: transparent;
  transition: background 0.12s ease;
}

.att-config-zone__resize:hover {
  background: rgba(59, 130, 246, 0.5);
  border-radius: 0 3px 3px 0;
}

.att-config-draw-preview {
  background: rgba(34, 197, 94, 0.18);
  border: 2px dashed rgba(34, 197, 94, 0.75);
  border-radius: 3px;
  pointer-events: none;
  z-index: 50;
}

/* ── Config Field Card (sidebar) ── */
.att-config-field-card {
  padding: 10px;
  margin-bottom: 6px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.02);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.att-config-field-card:hover {
  border-color: rgba(var(--primary-rgb), 0.15);
  background: rgba(var(--primary-rgb), 0.04);
}

.att-config-field-card--selected {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.06);
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.1);
}

.att-config-field-card--linked {
  border-left: 3px solid #f59e0b;
  margin-top: -2px;
}

.att-config-field-card__link-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  opacity: 0.6;
  margin-bottom: 4px;
  color: #f59e0b;
  font-weight: 500;
}

.att-config-field-card__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.att-config-field-card__meta {
  font-size: 0.62rem;
  opacity: 0.4;
  margin-top: 4px;
  display: flex;
  gap: 8px;
}

.att-config-field-card__actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.att-btn-type-toggle {
  opacity: 0.4;
  transition: all 0.15s ease;
}
.att-btn-type-toggle:hover {
  opacity: 0.7;
}
.att-btn-type-toggle--active {
  opacity: 1;
  color: #3b82f6;
}

.att-config-field-card__type-badge {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 4px;
  text-transform: uppercase;
}
.att-config-field-card__type-badge--image {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.att-config-field-card__img-name {
  font-size: 0.58rem;
  opacity: 0.6;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Image zone on PDF overlay ── */
.att-config-zone--image {
  border-color: rgba(59, 130, 246, 0.5);
  background: rgba(59, 130, 246, 0.06);
}
.att-config-zone--image:hover {
  background: rgba(59, 130, 246, 0.1);
}

.att-config-zone__image-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* ── Image overlay in preview step ── */
.att-field-overlay--image {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════
   MODAL
   ═══════════════════════════════════════════════════════ */

.att-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: att-overlay-in 0.2s ease;
}

@keyframes att-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.att-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  width: 440px;
  max-width: 90vw;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  animation: att-modal-in 0.25s ease;
}

@keyframes att-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.att-modal__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.att-modal__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

/* ═══════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════ */

.att-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: att-toast-in 0.3s ease forwards;
  pointer-events: none;
}

.att-toast--success {
  border-color: rgba(74, 208, 140, 0.3);
}

.att-toast--success::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ad08c;
  flex-shrink: 0;
}

.att-toast--error {
  border-color: rgba(239, 68, 68, 0.3);
}

.att-toast--error::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  flex-shrink: 0;
}

.att-toast--hide {
  animation: att-toast-out 0.25s ease forwards;
}

@keyframes att-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes att-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════ */

@keyframes att-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════
   SCROLLBAR (PDF container)
   ═══════════════════════════════════════════════════════ */

.att-preview-canvas-wrap::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.att-preview-canvas-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.att-preview-canvas-wrap::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-rgb), 0.15);
  border-radius: 3px;
}

.att-preview-canvas-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--primary-rgb), 0.25);
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE (Desktop 1280px — 1920px+)
   ═══════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
  .att-preview-sidebar {
    width: 340px;
  }

  .att-configure-sidebar {
    width: 260px;
  }
}

@media (max-width: 1280px) {
  .att-projects {
    padding: 28px 24px;
  }

  .att-projects__grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .att-preview-sidebar {
    width: 300px;
  }

  .att-preview-topbar {
    padding: 6px 12px;
    gap: 4px;
    flex-wrap: wrap;
  }

  .att-step-panel {
    padding: 24px 20px;
  }

  .att-stepper {
    padding: 16px 20px 12px;
  }
}

@media (min-width: 1600px) {
  .att-projects__grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  }

  .att-preview-sidebar {
    width: 420px;
  }

  .att-step-panel {
    max-width: 840px;
  }
}

/* ── Focus visible for accessibility ── */
.att-btn:focus-visible,
.att-input:focus-visible,
.att-select:focus-visible,
.att-lot-tab:focus-visible,
.att-stepper__item:focus-visible,
.att-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ChatIA module="attestation" — wrapper + custom renderer
   ═══════════════════════════════════════════════════════════════════════
   Le shell <ChatIA /> partagé apporte tout le streaming/tool-loop/history.
   Ici on cale juste sa hauteur dans la sidebar et on style le badge custom
   "X champs mis à jour" (AttestationFieldUpdate.jsx).
*/

.att-chatia-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* La <ChatIA /> ne sait pas qu'elle est dans une sidebar étroite — on
     resserre quelques tailles pour rester lisible à 380-420px. */
}

.att-chatia-wrap > .chatia,
.att-chatia-wrap > .chatia-shell {
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.att-chatia-wrap .chatia__msg-bubble {
  font-size: 0.82rem;
  line-height: 1.45;
}

.att-chatia-wrap .chatia__empty-title {
  font-size: 0.9rem;
}

.att-chatia-wrap .chatia__empty-sub {
  font-size: 0.78rem;
  line-height: 1.45;
}

.att-chatia-wrap .chatia__quickstart {
  gap: 6px;
}

.att-chatia-wrap .chatia__quickstart-btn {
  font-size: 0.78rem;
  padding: 8px 10px;
  text-align: left;
}

/* ── Custom renderer : badge "X champs mis à jour / vidés" ─────────────── */

.att-fieldupdate {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.att-fieldupdate__header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.att-fieldupdate__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.28);
}

.att-fieldupdate__badge--cleared {
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.32);
}

.att-fieldupdate__badge--warn {
  background: rgba(239, 68, 68, 0.10);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.32);
}

.att-fieldupdate__badge svg {
  flex-shrink: 0;
}

.att-fieldupdate__summary {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.att-fieldupdate__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.att-fieldupdate__item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.74rem;
  line-height: 1.35;
  padding: 3px 0;
  border-bottom: 1px dashed rgba(var(--primary-rgb), 0.06);
}

.att-fieldupdate__item:last-child {
  border-bottom: none;
}

.att-fieldupdate__item-label {
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.att-fieldupdate__item-sep {
  color: var(--muted);
  flex-shrink: 0;
  font-weight: 500;
}

.att-fieldupdate__item-value {
  color: var(--text);
  flex: 1 1 auto;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.att-fieldupdate__item--clear .att-fieldupdate__item-label {
  text-decoration: line-through;
  color: var(--muted);
}

.att-fieldupdate__item-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 0.72rem;
}

.att-fieldupdate__unmatched {
  font-size: 0.72rem;
  color: #ef4444;
  padding: 6px 8px;
  background: rgba(239, 68, 68, 0.06);
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.att-fieldupdate__unmatched-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.att-fieldupdate__unmatched ul {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}


/* ──────────────────────────────────────────────────────────────────────────
 * Procurement Intelligence — styles partagés (Module 1 + Module 2)
 * Tous les composants respectent les tokens dark de base.css.
 * Aucun fallback hardcodé blanc / sombre.
 * ────────────────────────────────────────────────────────────────────────── */

.procurement-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}

.procurement-page__header {
  padding: 24px 32px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(20, 28, 38, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.procurement-page__title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--text);
}

.procurement-page__subtitle {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}

.procurement-page__body {
  flex: 1;
  overflow: auto;
  padding: 24px 32px;
}

.procurement-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: rgba(20, 28, 38, 0.65);
}

.procurement-empty__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 12px 0 6px;
}

.procurement-empty__hint {
  font-size: 0.85rem;
  max-width: 480px;
  line-height: 1.55;
}

.procurement-empty__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.procurement-card {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.procurement-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--text);
}

.procurement-tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.72rem;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  font-weight: 500;
}

/* Liste indices */
.procurement-indices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.procurement-index-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(20, 28, 38, 0.65);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: left;
  font-family: inherit;
  color: var(--text);
}

.procurement-index-row:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.05);
}

.procurement-index-row__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.procurement-index-row__label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
}

.procurement-index-row__meta {
  font-size: 0.75rem;
  color: var(--muted);
}

.procurement-index-row__value {
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}

.procurement-index-row__delta {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 6px;
}

.procurement-index-row__delta--up {
  color: #f87171;
  background: rgba(248, 113, 113, 0.10);
}

.procurement-index-row__delta--down {
  color: #4ad0b3;
  background: rgba(74, 208, 179, 0.10);
}

.procurement-index-row__chevron {
  color: var(--muted);
  flex-shrink: 0;
}

/* Toolbar actions */
.procurement-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.procurement-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}

.procurement-btn:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.06);
}

.procurement-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.procurement-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #0c1f1a;
  font-weight: 600;
}

.procurement-btn--primary:hover:not(:disabled) {
  background: #5fdcc1;
  border-color: #5fdcc1;
}

/* Detail page */
.procurement-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.procurement-detail__back::before {
  content: '';
  width: 14px;
  height: 14px;
  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='%239aa3b5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.15s ease;
}

.procurement-detail__back:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.06);
}

.procurement-detail__back:hover::before {
  transform: translateX(-2px);
  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='%234ad0b3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/></svg>");
}

.procurement-detail__back:active {
  transform: scale(0.97);
}

.procurement-detail__chart-card {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  height: 380px;
  display: flex;
  flex-direction: column;
}

.procurement-detail__chart-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: wrap;
}

.procurement-detail__chart-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.procurement-detail__chart-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

.procurement-detail__chart-wrap {
  flex: 1;
  min-height: 0;
}

.procurement-detail__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.procurement-kpi {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.procurement-kpi__label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.procurement-kpi__value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.procurement-kpi__sub {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Tooltip Recharts override (theme dark) */
.procurement-tooltip {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.78rem;
  color: var(--text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.procurement-tooltip__date {
  color: var(--muted);
  margin-bottom: 2px;
}

.procurement-tooltip__value {
  color: var(--primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Compare page — chips, pivot, tableau récap */
.procurement-compare-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
}

.procurement-compare-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.procurement-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  border-radius: 999px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.procurement-compare-chip:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.procurement-compare-chip--active {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.06);
}

.procurement-compare-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--border);
}

.procurement-compare-chip--active .procurement-compare-chip__dot {
  border-color: transparent;
}

.procurement-compare-pivot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.procurement-compare-pivot__label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.procurement-compare-pivot__input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  color-scheme: dark;
}

.procurement-compare-pivot__input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}

.procurement-compare-pivot__hint {
  font-size: 0.75rem;
  color: var(--muted);
}

.procurement-compare-range {
  display: inline-flex;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}

.procurement-compare-range__btn {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}

.procurement-compare-range__btn:hover {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.08);
}

.procurement-compare-range__btn.is-active {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
}

.procurement-stats-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 12px;
}

.procurement-stats-table__row {
  display: grid;
  grid-template-columns: 2fr 0.9fr 0.8fr 0.7fr 0.7fr 0.7fr 0.9fr 0.9fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.procurement-stats-table__row:last-child {
  border-bottom: none;
}

.procurement-stats-table__row--head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}

.procurement-compare-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  margin-top: 4px;
}

.procurement-compare-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.procurement-compare-tooltip-label {
  flex: 1;
  color: var(--text);
}

.procurement-compare-tooltip-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--primary);
}

.procurement-compare-table {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(20, 28, 38, 0.65);
  overflow: hidden;
}

.procurement-compare-table__row {
  display: grid;
  grid-template-columns: 2fr 0.8fr 1fr 0.8fr;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 0.85rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.procurement-compare-table__row:last-child {
  border-bottom: none;
}

.procurement-compare-table__row--head {
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

.procurement-compare-table__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.procurement-compare-table__source,
.procurement-compare-table__date {
  color: var(--muted);
  font-size: 0.78rem;
}

.procurement-compare-table__delta {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* Detail header avec action a droite */
.procurement-detail__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.procurement-detail__header-text {
  flex: 1;
  min-width: 0;
}

/* Bouton alert sur les rows */
.procurement-index-row__alert-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.procurement-index-row__alert-btn:hover {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.4);
  background: rgba(var(--primary-rgb), 0.06);
}

/* Modal (alerte) */
.procurement-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}

.procurement-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  font-family: inherit;
}

.procurement-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.procurement-modal__title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.procurement-modal__close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.procurement-modal__close:hover { color: var(--text); }

.procurement-modal__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.procurement-modal__index {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.procurement-modal__index-label {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
}

.procurement-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.procurement-modal__field-label {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.procurement-modal__select,
.procurement-modal__input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  color-scheme: dark;
}

.procurement-modal__select:focus,
.procurement-modal__input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}

.procurement-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

/* Banniere alerts */
.procurement-alerts-banner {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.procurement-alerts-banner__group--fired {
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
}

.procurement-alerts-banner__title {
  font-size: 0.82rem;
  color: #f87171;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.procurement-alerts-banner__pending {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 12px;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.procurement-alerts-banner__pending summary {
  cursor: pointer;
  list-style: none;
  outline: none;
}

.procurement-alerts-banner__pending summary::-webkit-details-marker {
  display: none;
}

.procurement-alert-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.procurement-alert-row__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.procurement-alert-row__label {
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
}

.procurement-alert-row__rule {
  font-size: 0.74rem;
  color: var(--muted);
}

.procurement-alert-row__note {
  font-size: 0.74rem;
  color: var(--muted);
  font-style: italic;
}

.procurement-alert-row__value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #f87171;
}

.procurement-alert-row__remove {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 22px;
  height: 22px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

.procurement-alert-row__remove:hover {
  color: var(--text);
  border-color: var(--muted);
}

/* Relations card */
.procurement-relations-block {
  margin-top: 6px;
}

.procurement-relations-block__title {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 12px 0 6px;
}

.procurement-relation-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--bg);
}

.procurement-relation-arrow {
  color: var(--primary);
  margin-right: 8px;
  font-weight: 700;
}

.procurement-relation-label {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
}

.procurement-relation-meta {
  margin-left: 10px;
  color: var(--muted);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.procurement-relation-rationale {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Modal large pour le formulaire contrat */
.procurement-modal--wide {
  max-width: 640px;
}

.procurement-modal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.procurement-modal__components {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.procurement-modal__components-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.procurement-modal__component-row {
  display: grid;
  grid-template-columns: 1fr 120px 32px;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}

.procurement-modal__sum {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

.procurement-modal__errors {
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.07);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f87171;
  font-size: 0.82rem;
}

.procurement-modal__errors > div {
  line-height: 1.6;
}

/* Regression — row régresseur (select + lag + auto + delete) */
.procurement-regression-row {
  display: grid;
  grid-template-columns: 1fr 90px auto 32px;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}

/* ============================================================
   Should-Cost Validator
   ============================================================ */
.should-cost-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.should-cost-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.should-cost-form__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.should-cost-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 900px) {
  .should-cost-form__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.should-cost-photo {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  padding: 4px;
  width: 100%;
  max-width: 220px;
}

.should-cost-photo img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 6px;
}

.should-cost-photo__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.should-cost-basket {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

.should-cost-basket__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.should-cost-basket__title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.should-cost-basket__sum {
  font-size: 0.78rem;
  color: var(--muted);
}

.should-cost-basket__sum--warn {
  color: #f5b851;
}

.should-cost-basket__row {
  display: grid;
  grid-template-columns: 1fr 90px 32px;
  gap: 8px;
  margin-bottom: 6px;
  align-items: center;
}

.should-cost-basket__row > .should-cost-basket__hint {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: -2px;
  margin-bottom: 4px;
}

.should-cost-basket__remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.should-cost-basket__remove:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.should-cost-error {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.should-cost-form__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.should-cost-result {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.should-cost-verdict {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  background: rgba(20, 28, 38, 0.65);
}

.should-cost-verdict__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.should-cost-verdict__pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  color: #0f1720;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.2px;
}

.should-cost-verdict__product {
  font-size: 0.9rem;
  color: var(--muted);
}

.should-cost-verdict__msg {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.should-cost-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.should-cost-result__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.should-cost-reasons {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.should-cost-reasons li {
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ============================================================
   Forecast — controls & table
   ============================================================ */
.forecast-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.forecast-table {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

.forecast-table__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.forecast-table__row:last-child {
  border-bottom: none;
}

.forecast-table__row--head {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--border);
}

/* ============================================================
   Onboarding Procurement (empty-state riche)
   ============================================================ */
.procurement-onboarding {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.procurement-onboarding__hero {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  background: linear-gradient(135deg, rgba(74, 208, 179, 0.08), rgba(14, 165, 180, 0.04) 60%, transparent);
  text-align: center;
}

.procurement-onboarding__pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(14, 165, 180, 0.15);
  color: #0ea5b4;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.procurement-onboarding__title {
  margin: 0 0 14px;
  font-size: 1.7rem;
  color: var(--text);
  font-weight: 700;
}

.procurement-onboarding__lead {
  margin: 0 auto 20px;
  max-width: 760px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.98rem;
}

.procurement-onboarding__cta {
  margin-bottom: 12px;
}

.procurement-onboarding__hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.procurement-onboarding__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.procurement-onboarding__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(20, 28, 38, 0.65);
}

.procurement-onboarding__step-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(14, 165, 180, 0.12);
  color: #0ea5b4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.procurement-onboarding__step h3 {
  margin: 0 0 6px;
  font-size: 0.95rem;
  color: var(--text);
}

.procurement-onboarding__step p {
  margin: 0;
  font-size: 0.83rem;
  color: var(--muted);
  line-height: 1.5;
}

.procurement-onboarding__usecase {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  background: rgba(245, 184, 81, 0.05);
}

.procurement-onboarding__usecase-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}

.procurement-onboarding__usecase p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.55;
}

.procurement-onboarding__usecase strong {
  color: #f5b851;
  font-weight: 600;
}

/* ============================================================
   Hero Stats — barre de KPIs en tête de page
   ============================================================ */
.procurement-hero-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(74, 208, 179, 0.06), rgba(14, 165, 180, 0.03) 60%, transparent);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.procurement-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.procurement-hero-stat__label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.procurement-hero-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.procurement-hero-stat__sub {
  font-size: 0.78rem;
  color: var(--muted);
}

.procurement-hero-stat__delta {
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.procurement-hero-stat__delta--up { color: #f87171; }
.procurement-hero-stat__delta--down { color: #4ad0b3; }

/* ============================================================
   Action Cards — alternative ergonomique au toolbar
   ============================================================ */
.procurement-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.procurement-action-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(20, 28, 38, 0.65);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  text-align: left;
  font-family: inherit;
  color: var(--text);
  position: relative;
  overflow: hidden;
}

.procurement-action-card:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.04);
  transform: translateY(-1px);
}

.procurement-action-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.procurement-action-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

.procurement-action-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.procurement-action-card__desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.procurement-action-card__cta {
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.procurement-action-card--primary {
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.04));
  border-color: rgba(var(--primary-rgb), 0.4);
}

.procurement-action-card--primary .procurement-action-card__icon {
  background: var(--primary);
  color: #0c1f1a;
}

/* ============================================================
   Index row redesign — sparkline inline + value typography
   ============================================================ */
.procurement-index-row {
  padding: 14px 18px;
}

.procurement-index-row__sparkline {
  flex-shrink: 0;
  opacity: 0.95;
}

.procurement-index-row__value {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============================================================
   Section header — titre de groupe avec compteur
   ============================================================ */
.procurement-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 12px;
}

.procurement-section-header__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.procurement-section-header__count {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Should-Cost Wizard — sections numérotées
   ============================================================ */
.should-cost-wizard {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.should-cost-section {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(20, 28, 38, 0.65);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.should-cost-section:hover {
  border-color: rgba(var(--primary-rgb), 0.25);
}

.should-cost-section__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(var(--primary-rgb), 0.03);
}

.should-cost-section__step {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.15);
  border: 1.5px solid var(--primary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 700;
}

.should-cost-section__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.should-cost-section__desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 2px 0 0;
}

.should-cost-section__body {
  padding: 18px;
}

.should-cost-section__body-text {
  flex: 1;
}

/* CTA hero — bouton analyser */
.should-cost-cta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 22px;
  border: 1px dashed rgba(var(--primary-rgb), 0.35);
  border-radius: 14px;
  background: rgba(var(--primary-rgb), 0.04);
  text-align: center;
}

.should-cost-cta__btn {
  padding: 12px 28px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: #0c1f1a;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.should-cost-cta__btn:hover:not(:disabled) {
  background: #5fdcc1;
  transform: translateY(-1px);
}

.should-cost-cta__btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.should-cost-cta__hint {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
}

/* Verdict hero — résultat impactant */
.should-cost-verdict-hero {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: rgba(20, 28, 38, 0.65);
  overflow: hidden;
  position: relative;
}

.should-cost-verdict-hero__band {
  height: 4px;
  width: 100%;
}

.should-cost-verdict-hero__body {
  padding: 22px 24px;
}

.should-cost-verdict-hero__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.should-cost-verdict-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  color: #0f1720;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.should-cost-verdict-hero__product {
  font-size: 0.88rem;
  color: var(--muted);
}

.should-cost-verdict-hero__headline {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.should-cost-verdict-hero__sub {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.5;
}

.should-cost-verdict-hero__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.should-cost-metric {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.should-cost-metric__label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.should-cost-metric__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

.should-cost-metric__sub {
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Arguments numérotés */
.should-cost-args {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.should-cost-arg-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(20, 28, 38, 0.65);
  transition: border-color 0.15s ease;
}

.should-cost-arg-card:hover {
  border-color: rgba(var(--primary-rgb), 0.3);
}

.should-cost-arg-card__num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.should-cost-arg-card__text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.5;
}

/* Form fields stylés */
.should-cost-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.should-cost-field__label {
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.should-cost-field__input,
.should-cost-field__select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  color-scheme: dark;
  transition: border-color 0.15s ease;
}

.should-cost-field__input:focus,
.should-cost-field__select:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}

.should-cost-field__hint {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0;
}

/* Preset hint inline */
.should-cost-preset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(245, 184, 81, 0.1);
  color: #f5b851;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid rgba(245, 184, 81, 0.25);
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}

.should-cost-preset:hover {
  background: rgba(245, 184, 81, 0.18);
}

/* ============================================================
   Chart options — toolbar riche pour le graphique Should-Cost
   ============================================================ */
.chart-options {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.025);
  margin-bottom: 14px;
}

.chart-options__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.chart-options__label {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.chart-options__chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}

.chart-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  font-variant-numeric: tabular-nums;
}

.chart-chip:hover:not(:disabled) {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.06);
}

.chart-chip--active {
  background: var(--panel);
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.chart-chip--toggle {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
}

.chart-chip--toggle.chart-chip--off {
  opacity: 0.4;
  text-decoration: line-through;
}

.chart-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-options__date-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
  color-scheme: dark;
}

.chart-options__date-input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}

.chart-options__date-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.chart-options__date-sep {
  color: var(--muted);
  font-size: 0.78rem;
}

/* Procurement Intelligence — Deep Analysis Panel (IA Claude) */
.pi-deep {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 22px;
}

.pi-card {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
}

.pi-card--methodology {
  background: rgba(var(--primary-rgb), 0.04);
}

.pi-card--notif {
  border-style: dashed;
}

.pi-card__title {
  margin: 0 0 6px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
}

.pi-card__sub {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.84rem;
}

.pi-textarea {
  width: 100%;
  min-height: 130px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  resize: vertical;
}

.pi-textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}

.pi-notif-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.pi-notif-status {
  color: var(--primary);
  font-size: 0.82rem;
}

.pi-deep-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pi-btn-primary {
  background: var(--primary);
  color: #0f1720;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: filter 0.15s;
}

.pi-btn-primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.pi-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pi-cta-hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.pi-error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.84rem;
}

.pi-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pi-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.pi-step__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--border);
  flex-shrink: 0;
}

.pi-step__dot--running {
  background: var(--primary);
  animation: pi-pulse 1.2s infinite ease-in-out;
}

.pi-step__dot--done { background: var(--primary); }
.pi-step__dot--warn { background: #f5b851; }
.pi-step__dot--error { background: #ef4444; }

@keyframes pi-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

.pi-step__body {
  flex: 1;
}

.pi-step__label {
  color: var(--text);
  font-size: 0.88rem;
}

.pi-step__msg {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.pi-step__msg--warn { color: #f5b851; }

.pi-verdict-hero {
  display: flex;
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.pi-verdict-hero__band {
  width: 6px;
  flex-shrink: 0;
}

.pi-verdict-hero__body {
  flex: 1;
  padding: 22px 24px;
}

.pi-verdict-hero__headline {
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.pi-verdict-hero__sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.pi-verdict-hero__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.pi-metric {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.pi-metric__lbl {
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 4px;
}

.pi-metric__val {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}

.pi-metric__sub {
  color: var(--muted);
  font-size: 0.7rem;
  margin-top: 2px;
}

.pi-metric--alert {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid var(--danger);
}

.pi-metric--alert .pi-metric__sub {
  color: var(--text);
  opacity: 0.85;
}

.pi-tree-bar {
  display: flex;
  width: 100%;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--bg);
}

.pi-tree-bar__seg {
  height: 100%;
  transition: filter 0.15s;
}

.pi-tree-bar__seg:hover { filter: brightness(1.15); }

.pi-tree-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.pi-tree-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.pi-tree-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.pi-tree-item__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pi-tree-item__label {
  flex: 1;
  font-weight: 600;
  color: var(--text);
  font-size: 0.86rem;
}

.pi-tree-item__share {
  color: var(--muted);
  font-size: 0.78rem;
}

.pi-tree-item__rationale {
  color: var(--muted);
  font-size: 0.74rem;
  margin-bottom: 6px;
}

.pi-tree-item__source {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.pi-tree-item__src-label {
  color: var(--muted);
  font-size: 0.74rem;
}

.pi-tree-item__change {
  font-size: 0.78rem;
  color: var(--text);
}

.pi-tree-item__weighted {
  color: var(--muted);
}

.pi-source-badge {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(126, 197, 255, 0.15);
  border: 1px solid rgba(126, 197, 255, 0.3);
  color: #7ec5ff;
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.pi-source-badge--public {
  background: rgba(74, 208, 179, 0.15);
  border-color: rgba(74, 208, 179, 0.3);
  color: var(--primary);
}

.pi-args {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pi-arg {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.pi-arg__rank {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #0f1720;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.92rem;
}

.pi-arg__body { flex: 1; }

.pi-arg__title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.92rem;
  margin-bottom: 2px;
}

.pi-arg__key {
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.pi-arg__text {
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 6px;
}

.pi-arg__sources {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pi-anomaly {
  border-left: 3px solid var(--border);
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--bg);
  border-radius: 0 8px 8px 0;
}

.pi-anomaly--warning { border-left-color: #f5b851; }
.pi-anomaly--alert { border-left-color: #ef4444; }
.pi-anomaly--info { border-left-color: #7ec5ff; }

.pi-anomaly__title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.86rem;
  margin-bottom: 4px;
}

.pi-anomaly__detail {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.pi-anomaly__source {
  margin-top: 6px;
}

.pi-leverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.pi-leverage__item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

.pi-leverage__title {
  font-weight: 600;
  color: var(--text);
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.pi-leverage__body {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin-bottom: 6px;
}

.pi-leverage__impact {
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
}

.pi-narrative-text {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.pi-method__text {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.pi-audit-ok { color: var(--primary); font-size: 0.82rem; }
.pi-audit-warn { color: #f5b851; cursor: pointer; font-size: 0.82rem; }

.pi-audit-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.78rem;
}

.pi-audit-list code {
  background: var(--bg);
  padding: 0 4px;
  border-radius: 3px;
  color: #f5b851;
}

.pi-method__questions {
  margin-top: 12px;
}

.pi-method__qtitle {
  font-weight: 600;
  color: var(--text);
  font-size: 0.84rem;
  margin-bottom: 4px;
}

.pi-method__questions ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.82rem;
}

.pi-export-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 4px 0 6px;
}

.pi-export-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  flex: 1;
  min-width: 220px;
}

.pi-coach-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 6px 0 10px;
  background: linear-gradient(135deg, rgba(74, 208, 179, 0.08), rgba(74, 208, 179, 0.02));
  border: 1px solid rgba(74, 208, 179, 0.35);
  border-radius: 12px;
}
.pi-coach-cta__text {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.45;
}
.pi-coach-cta__text strong {
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 600;
}
.pi-coach-cta__text span {
  color: var(--muted);
}
.pi-coach-cta__btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.pi-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.pi-progress-pct {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.pi-progress-track {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.pi-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--primary) 0%, #7ec5ff 100%);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.5);
}

.pi-progress-msg {
  margin-top: 10px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
}

.pi-progress-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
}

.pi-notif-status {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 8px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 500;
}

/* ───────────── Chat IA post-analyse ───────────── */
.pi-chat {
  margin-top: 18px;
}
.pi-chat__suggestions {
  margin: 14px 0;
  padding: 12px;
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 10px;
}
.pi-chat__suggestions-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pi-chat__suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.pi-chat__suggestion {
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.pi-chat__suggestion:hover:not(:disabled) {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}
.pi-chat__suggestion:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pi-chat__history {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  margin: 14px 0;
  padding: 4px;
}
.pi-chat__msg {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(20, 28, 38, 0.65);
}
.pi-chat__msg--user {
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.25);
  align-self: flex-end;
  max-width: 80%;
}
.pi-chat__msg--assistant {
  align-self: flex-start;
  max-width: 92%;
}
.pi-chat__msg-role {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.pi-chat__msg-body {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
}
.pi-chat__typing {
  display: flex;
  gap: 4px;
  padding: 6px 0;
}
.pi-chat__typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  animation: pi-chat-typing 1.2s infinite;
}
.pi-chat__typing span:nth-child(2) { animation-delay: 0.18s; }
.pi-chat__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes pi-chat-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.pi-chat__composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.pi-chat__composer .pi-textarea {
  flex: 1;
  margin: 0;
  resize: vertical;
  min-height: 56px;
}
.pi-chat__composer .pi-btn-primary {
  white-space: nowrap;
}

/* ===========================================================
   Supplier History Panel (.pi-history-...)
   =========================================================== */
.pi-history__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pi-history__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pi-history__btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pi-history__btn-secondary:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.6);
  background: rgba(var(--primary-rgb), 0.04);
}
.pi-history__btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pi-history__cta-log {
  white-space: nowrap;
}
.pi-history__stats {
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.86rem;
  color: var(--text);
  margin-bottom: 14px;
}
.pi-history__error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--text);
  margin-bottom: 12px;
}
.pi-history__loading,
.pi-history__empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 0.9rem;
}
.pi-history__empty p {
  margin: 0 0 14px;
}
.pi-history__form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pi-history__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pi-history__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pi-history__field--wide {
  grid-column: 1 / -1;
}
.pi-history__field span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}
.pi-history__field input,
.pi-history__field select,
.pi-history__field textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
}
.pi-history__field input:focus,
.pi-history__field select:focus,
.pi-history__field textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}
.pi-history__form-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pi-history__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.pi-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  color: var(--text);
}
.pi-history__table thead th {
  background: var(--bg);
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pi-history__table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.pi-history__table tbody tr:last-child td {
  border-bottom: none;
}
.pi-history__notes-cell {
  max-width: 280px;
  white-space: pre-wrap;
  color: var(--muted);
}
.pi-history__row-actions {
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
.pi-history__btn-link {
  background: transparent;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.82rem;
  text-decoration: underline;
}
.pi-history__btn-link--danger {
  color: #ef4444;
}

/* ===========================================================
   Multi-Supplier Comparator (.pi-comparator-...)
   =========================================================== */
.pi-comparator__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pi-comparator__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pi-comparator__btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pi-comparator__btn-secondary:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.6);
  background: rgba(var(--primary-rgb), 0.04);
}
.pi-comparator__btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pi-comparator__group {
  background: rgba(var(--primary-rgb), 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.82em;
}
.pi-comparator__error {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: var(--text);
  margin-bottom: 12px;
}
.pi-comparator__loading,
.pi-comparator__empty {
  text-align: center;
  padding: 24px 12px;
  color: var(--muted);
  font-size: 0.9rem;
}
.pi-comparator__empty p {
  margin: 0 0 14px;
}
.pi-comparator__summary {
  margin-bottom: 16px;
}
.pi-comparator__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pi-comparator__summary-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.pi-comparator__summary-card--best {
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.06);
}
.pi-comparator__summary-card--worst {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.05);
}
.pi-comparator__summary-label {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.pi-comparator__summary-value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.pi-comparator__summary-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}
.pi-comparator__form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.pi-comparator__form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.pi-comparator__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pi-comparator__field--wide {
  grid-column: 1 / -1;
}
.pi-comparator__field span {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}
.pi-comparator__field input,
.pi-comparator__field select,
.pi-comparator__field textarea {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
}
.pi-comparator__field input:focus,
.pi-comparator__field select:focus,
.pi-comparator__field textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}
.pi-comparator__form-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.pi-comparator__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.pi-comparator__card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.pi-comparator__card--best {
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2) inset;
}
.pi-comparator__card--worst {
  border-color: rgba(239, 68, 68, 0.4);
}
.pi-comparator__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.pi-comparator__card-supplier {
  font-weight: 600;
  color: var(--text);
  font-size: 0.95rem;
}
.pi-comparator__badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pi-comparator__badge--best {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
}
.pi-comparator__badge--worst {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
}
.pi-comparator__card-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  gap: 8px;
}
.pi-comparator__card-label {
  color: var(--muted);
}
.pi-comparator__card-value {
  color: var(--text);
  font-weight: 500;
  text-align: right;
}
.pi-comparator__card-recommendation {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
}
.pi-comparator__card-notes {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: pre-wrap;
}
.pi-comparator__card-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.pi-comparator__btn-link {
  background: transparent;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 0.82rem;
  text-decoration: underline;
}
.pi-comparator__btn-link--danger {
  color: #ef4444;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Liste des analyses sauvegardees (vue par defaut Should-Cost)
 * ────────────────────────────────────────────────────────────────────────── */
.pi-saved {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pi-saved__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.pi-saved__title {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.pi-saved__subtitle {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 70ch;
}

.pi-saved__new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--primary);
  color: #0f1720;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
}

.pi-saved__new:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.pi-saved__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.pi-saved__card {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 16px 12px;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
}

.pi-saved__card:hover {
  border-color: rgba(var(--primary-rgb), 0.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.pi-saved__card-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pi-saved__card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pi-saved__card-meta {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pi-saved__card-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pi-saved__card-date {
  font-size: 0.74rem;
  color: var(--muted);
}

.pi-saved__card-del {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 7px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}

.pi-saved__card-del:hover {
  color: #ef4444;
  border-color: #ef4444;
}


/* ─── DocDropZone — message de statut sous le Dropzone natif ──────────── */

.pi-doc-drop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.pi-doc-drop__status {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

.pi-doc-drop__status--ok {
  border-left-color: var(--primary);
  color: var(--primary);
}

.pi-doc-drop__status--error {
  border-left-color: #ef4444;
  color: #ef4444;
}

.pi-doc-drop__status--empty {
  border-left-color: var(--muted);
  color: var(--muted);
}

/* ─── Chips des documents joints (contexte additionnel pour Claude) ─────── */

.pi-doc-drop__chips {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(var(--primary-rgb), 0.06);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  border-radius: 8px;
}

.pi-doc-drop__chips-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pi-doc-drop__chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pi-doc-drop__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text);
  max-width: 240px;
}

.pi-doc-drop__chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-doc-drop__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
}

.pi-doc-drop__chip-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ─── Section 1 : 2 dropzones cote a cote (extraction + photo) ─────────── */

.should-cost-drops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

.should-cost-drops > * {
  min-width: 0;
  height: 100%;
}

.should-cost-drops .pi-doc-drop {
  margin-bottom: 0;
}

.should-cost-drops .dz {
  height: 100%;
  min-height: 200px;
  margin-bottom: 0;
  box-sizing: border-box;
}

.should-cost-drops .should-cost-photo--inline {
  min-height: 200px;
}

.should-cost-photo--inline {
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}

.should-cost-photo--inline img {
  max-height: 130px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 720px) {
  .should-cost-drops {
    grid-template-columns: 1fr;
  }
}

/* ────────────────────────────────────────────────────────────────────────────
   Nego Coach — chat plein écran spécialisé négo fournisseur
   ──────────────────────────────────────────────────────────────────────────── */
.nego-coach {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: transparent;
}
.nego-coach__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  background: rgba(20, 28, 38, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nego-coach__title {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.nego-coach__title-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
}
.nego-coach__subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  max-width: 720px;
}
.nego-coach__header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nego-coach__supplier-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nego-coach__supplier-label {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.nego-coach__supplier-select,
.nego-coach__supplier-filter {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  min-width: 200px;
}
.nego-coach__supplier-filter {
  min-width: 130px;
}

.nego-coach__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  min-height: 0;
}

.nego-coach__empty {
  max-width: 720px;
  margin: 60px auto 0;
  text-align: center;
}
.nego-coach__empty-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}
.nego-coach__empty-sub {
  color: var(--muted);
  margin: 0 0 32px;
  font-size: 0.95rem;
}
.nego-coach__quickstart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.nego-coach__quickstart-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.nego-coach__quickstart-btn:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  transform: translateY(-1px);
}
.nego-coach__quickstart-btn svg {
  color: var(--primary);
  flex-shrink: 0;
}

.nego-coach__messages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.nego-coach__msg {
  display: flex;
}
.nego-coach__msg--user {
  justify-content: flex-end;
}
.nego-coach__msg--assistant {
  justify-content: flex-start;
}
.nego-coach__msg-bubble {
  max-width: 82%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(20, 28, 38, 0.65);
  color: var(--text);
  line-height: 1.55;
  font-size: 0.93rem;
}
.nego-coach__msg--user .nego-coach__msg-bubble {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.3);
}
.nego-coach__msg-user-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.nego-coach__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.nego-coach__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  color: var(--primary);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.nego-coach__action-btn:hover {
  background: rgba(var(--primary-rgb), 0.18);
  transform: translateY(-1px);
}

.nego-coach__tools-used {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dotted var(--border);
}
.nego-coach__tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.nego-coach__error {
  margin: 0 28px 12px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #ef4444;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.nego-coach__error button {
  background: transparent;
  border: 0;
  color: #ef4444;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 6px;
}

.nego-coach__footer {
  padding: 14px 28px 18px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.nego-coach__composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 8px 8px 14px;
  transition: border-color 0.15s ease;
}
.nego-coach__composer:focus-within {
  border-color: var(--primary);
}
.nego-coach__textarea {
  flex: 1;
  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  min-height: 24px;
  max-height: 220px;
  padding: 6px 4px;
}
.nego-coach__textarea::placeholder {
  color: var(--muted);
}
.nego-coach__send-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 0;
  background: var(--primary);
  color: #0f1720;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.nego-coach__send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.nego-coach__send-btn--stop {
  background: #ef4444;
  color: #fff;
}
.nego-coach__hint {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

/* ────────────────────────────────────────────────────────────────────────────
   Modal d'ajout d'indice custom dans IndicesPage
   ──────────────────────────────────────────────────────────────────────────── */
.indice-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.indice-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--text);
}
.indice-modal__header {
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.indice-modal__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.indice-modal__close {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.indice-modal__body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.indice-modal__tabs {
  display: flex;
  gap: 6px;
  background: var(--bg);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.indice-modal__tab {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.indice-modal__tab--active {
  background: var(--panel);
  color: var(--text);
  font-weight: 500;
}
.indice-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.indice-modal__label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}
.indice-modal__input,
.indice-modal__textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}
.indice-modal__input:focus,
.indice-modal__textarea:focus {
  border-color: var(--primary);
  outline: 0;
}
.indice-modal__hint {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: -2px;
}
.indice-modal__test-result {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.82rem;
  color: var(--text);
}
.indice-modal__test-result--ok {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}
.indice-modal__test-result--err {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.06);
  color: #ef4444;
}
.indice-modal__footer {
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Carte suggestion Claude */
.indice-suggestion {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.indice-suggestion__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.indice-suggestion__title {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}
.indice-suggestion__why {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.indice-suggestion__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--muted);
}
.indice-suggestion__add-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  background: var(--primary);
  color: #0f1720;
  border: 0;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  font-weight: 500;
}
.indice-suggestion__add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Badge "custom" sur les indices user dans la liste */
.procurement-tag--user {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.4);
}

/* Grille de cartes indice (catalogue user + suggestions Claude) */
.indice-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.indice-suggestion__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.indice-suggestion__code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--panel);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}
.indice-suggestion__label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.indice-suggestion__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.indice-suggestion__url {
  font-size: 0.78rem;
  color: var(--primary);
  text-decoration: none;
}
.indice-suggestion__url:hover { text-decoration: underline; }
.indice-suggestion--proposed {
  border-color: rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.04);
}

/* ──────────────────────────────────────────────────────────────────────────
   Coach Négo EMBARQUÉ (dans une page Should-Cost)
   ────────────────────────────────────────────────────────────────────────── */
.nego-coach--embedded {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: linear-gradient(180deg,
    rgba(var(--primary-rgb), 0.04) 0%,
    var(--panel) 60%);
}

/* Bandeau "Connecté au projet" — très visible, montre le verrouillage contextuel */
.nego-coach__project-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(var(--primary-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.30);
}
.nego-coach__project-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: #0f1720;
  flex-shrink: 0;
}
.nego-coach__project-badge-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.nego-coach__project-badge-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
}
.nego-coach__project-badge-meta {
  font-size: 0.92rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nego-coach__project-badge-meta strong { color: var(--text); font-weight: 600; }
.nego-coach__project-badge-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Scroll des messages — hauteur bornée pour ne pas exploser dans la page */
.nego-coach__scroll--embedded {
  max-height: 540px;
  min-height: 320px;
  overflow-y: auto;
}
.nego-coach__empty--embedded {
  padding: 28px 20px;
  text-align: left;
}
.nego-coach__empty--embedded .nego-coach__empty-title {
  font-size: 1.05rem;
  margin-bottom: 6px;
}

/* Bandeau "mode général" sur la page sidebar Coach */
.nego-coach__general-banner {
  margin: 0 0 12px 0;
  padding: 12px 14px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 8px;
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.5;
}
.nego-coach__general-banner em {
  color: var(--primary);
  font-style: normal;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────────────────
 * CompareIndicesPage — Détection divergence + Export PNG
 * ────────────────────────────────────────────────────────────────────────── */

.procurement-divergence-card {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.procurement-divergence-card__head {
  margin-bottom: 14px;
}

.procurement-divergence-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.procurement-divergence-card__sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.procurement-divergence-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .procurement-divergence-grid {
    grid-template-columns: 1fr;
  }
}

.procurement-divergence-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.procurement-divergence-field__label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.procurement-divergence-field__input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  color-scheme: dark;
  width: 100%;
  box-sizing: border-box;
}

.procurement-divergence-field__input:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
}

.procurement-divergence-import {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.procurement-divergence-dropzone {
  /* le composant Dropzone gère son look ; on contraint juste la hauteur */
  min-height: 84px;
}

.procurement-divergence-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.procurement-divergence-btn {
  padding: 8px 16px;
  background: var(--primary);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.procurement-divergence-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.procurement-divergence-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.procurement-divergence-error {
  font-size: 0.8rem;
  color: var(--danger);
}

.procurement-divergence-result {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg);
}

.procurement-divergence-result--aligned {
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.06);
}

.procurement-divergence-result--divergent {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.06);
}

.procurement-divergence-result__verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.procurement-divergence-result__badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
}

.procurement-divergence-result--aligned .procurement-divergence-result__badge {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.procurement-divergence-result--divergent .procurement-divergence-result__badge {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.5);
}

.procurement-divergence-result__gap {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.procurement-divergence-result__narrative {
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.55;
}

.procurement-divergence-table {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(20, 28, 38, 0.65);
}

.procurement-divergence-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  font-size: 0.84rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.procurement-divergence-table__row:last-child {
  border-bottom: none;
}

.procurement-divergence-table__row--head {
  background: rgba(var(--primary-rgb), 0.04);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

.procurement-divergence-table__label {
  color: var(--text);
}

.procurement-divergence-table__num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.procurement-divergence-table__status {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}

/* Export PNG ─────────────────────────── */

.procurement-export-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.procurement-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.procurement-export-btn:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.6);
  color: var(--primary);
}

.procurement-export-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.procurement-export-toast {
  margin: 6px 0 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

.procurement-export-toast--success {
  border-color: rgba(var(--primary-rgb), 0.5);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.procurement-export-toast--error {
  border-color: rgba(248, 113, 113, 0.5);
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Chantier D — ImagePreview + CostTreeValidationStep
 * Étape intermédiaire entre les inputs et le deep-analyze.
 * ────────────────────────────────────────────────────────────────────────── */

.pi-image-preview {
  position: relative;
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 6px;
  max-width: 220px;
}

.pi-image-preview__img {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 6px;
}

.pi-image-preview__remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pi-image-preview__remove:hover {
  background: var(--bg);
  border-color: var(--primary);
  color: var(--primary);
}

/* Bandeau d'invitation à générer un cost tree dynamique. */
.pi-validate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin: 12px 0 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  flex-wrap: wrap;
}

.pi-validate-banner__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 240px;
}

.pi-validate-banner__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  font-weight: 700;
  font-size: 16px;
}

.pi-validate-banner__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.pi-validate-banner__sub {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
}

/* Conteneur principal de l'étape de validation. */
.pi-validate {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 20px;
  color: var(--text);
}

.pi-validate__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.pi-validate__title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.pi-validate__subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.pi-validate__thumb {
  flex-shrink: 0;
}

/* Phase 1 : loading + log SSE */
.pi-validate__loading {
  padding: 16px 0;
}

.pi-validate__progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.pi-validate__progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.6));
  transition: width 0.3s ease;
}

.pi-validate__progress-pct {
  text-align: right;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

.pi-validate__log {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  font-size: 0.83rem;
}

.pi-validate__log-empty {
  color: var(--muted);
  font-style: italic;
}

.pi-validate__log-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  color: var(--text);
  line-height: 1.4;
}

.pi-validate__log-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.pi-validate__log-line--start .pi-validate__log-dot {
  background: var(--primary);
  opacity: 0.5;
  animation: pi-pulse 1.2s infinite ease-in-out;
}

.pi-validate__log-line--end .pi-validate__log-dot {
  background: var(--primary);
}

@keyframes pi-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 1; }
}

.pi-validate__log-text {
  flex: 1;
  color: var(--text);
}

/* Phase 2 : résultat */
.pi-validate__meta {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.pi-validate__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
}

.pi-validate__chip--muted {
  background: var(--bg);
  color: var(--muted);
}

.pi-validate__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}

.pi-validate__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  color: var(--text);
}

.pi-validate__table thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.pi-validate__table tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.pi-validate__table tbody tr:last-child td {
  border-bottom: none;
}

.pi-validate__table tfoot td {
  padding: 10px 12px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text);
}

.pi-validate__post-label {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}

.pi-validate__post-rationale {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.45;
}

.pi-validate__slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pi-validate__slider {
  flex: 1;
  accent-color: var(--primary);
}

.pi-validate__slider-value {
  min-width: 44px;
  text-align: right;
  font-weight: 600;
  color: var(--text);
}

.pi-validate__slider-range {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
}

.pi-validate__select {
  width: 100%;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.82rem;
}

.pi-validate__select:focus {
  outline: none;
  border-color: var(--primary);
}

.pi-validate__src {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}

.pi-validate__src--public {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.4);
}

.pi-validate__src--user_validated {
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
}

.pi-validate__src--web_search {
  color: #f5b851;
  border-color: rgba(245, 184, 81, 0.4);
}

.pi-validate__src--claude_generated {
  color: #7ec5ff;
  border-color: rgba(126, 197, 255, 0.4);
}

.pi-validate__regen {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.pi-validate__hint-input {
  flex: 1;
  min-width: 220px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.85rem;
}

.pi-validate__hint-input:focus {
  outline: none;
  border-color: var(--primary);
}

.pi-validate__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pi-validate__actions--right {
  justify-content: flex-end;
}

.pi-validate__error {
  padding: 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 8px;
  color: var(--text);
}

.pi-validate__error-msg {
  margin-bottom: 12px;
  color: #ef4444;
  font-size: 0.88rem;
  line-height: 1.5;
}

.pi-validate__warn {
  margin-left: 8px;
  color: #f5b851;
  font-size: 0.78rem;
}

.pi-validate__warn-inline {
  color: #f5b851;
  font-size: 0.78rem;
}

/* ── Ask Claude Indices Card ─────────────────────────────────────────── */
.ask-claude-card {
  background: rgba(20, 28, 38, 0.65);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.ask-claude-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.ask-claude-card__icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.ask-claude-card__title {
  font-size: 1rem; font-weight: 600; margin: 0 0 4px;
  color: var(--text);
}
.ask-claude-card__subtitle {
  font-size: 0.84rem; color: var(--muted); margin: 0; line-height: 1.45;
}
.ask-claude-card__input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 32, 0.6);
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  min-height: 56px;
}
.ask-claude-card__input:focus {
  outline: none;
  border-color: var(--primary);
}
.ask-claude-card__actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.ask-claude-card__examples {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ask-claude-card__example {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 0.76rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ask-claude-card__example:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--primary);
}
.ask-claude-card__error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--danger);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.08);
  font-size: 0.85rem;
}
.ask-claude-card__results {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.ask-claude-card__results-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.ask-claude-suggestion {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(15, 23, 32, 0.5);
}
.ask-claude-suggestion__main {
  flex: 1; min-width: 0;
}
.ask-claude-suggestion__head {
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ask-claude-suggestion__label {
  font-size: 0.95rem; font-weight: 600; color: var(--text);
}
.ask-claude-suggestion__badge {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ask-claude-suggestion__badge--fred {
  background: rgba(var(--primary-rgb), 0.14);
  color: var(--primary);
}
.ask-claude-suggestion__badge--web {
  background: rgba(154, 163, 181, 0.14);
  color: var(--muted);
}
.ask-claude-suggestion__why {
  font-size: 0.85rem; color: var(--text);
  margin: 0 0 6px; line-height: 1.45;
  opacity: 0.85;
}
.ask-claude-suggestion__meta {
  display: flex; gap: 6px; align-items: center;
  font-size: 0.76rem; color: var(--muted);
  flex-wrap: wrap;
}
.ask-claude-suggestion__link {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--primary);
  text-decoration: none;
}
.ask-claude-suggestion__link:hover {
  text-decoration: underline;
}
.procurement-btn--success {
  background: rgba(74, 208, 179, 0.18);
  color: var(--primary);
  border-color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────────────
   CompareIndicesPage refonte (Forvia/PCA flow)
   ───────────────────────────────────────────────────────────────────── */

.pi-cmp-step {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
}

.pi-cmp-step__head {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: transparent; border: 0; padding: 0;
  text-align: left; cursor: default;
}
.pi-cmp-step__head--toggle { cursor: pointer; }

.pi-cmp-step__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.pi-cmp-step__title {
  margin: 0;
  font-size: 1rem; font-weight: 600;
  color: var(--text);
}

.pi-cmp-step__hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: auto;
  font-weight: 400;
}

.pi-cmp-step__chevron {
  margin-left: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.pi-cmp-ref-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}

.pi-cmp-ref-pick {
  display: flex; flex-direction: column; gap: 6px;
}

.pi-cmp-field-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
}

.pi-cmp-select,
.pi-cmp-input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
}
.pi-cmp-select:focus,
.pi-cmp-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}

.pi-cmp-cand-pickers {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 14px;
}

/* Verdict */
.pi-cmp-verdict {
  margin-top: 14px;
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.pi-cmp-verdict--block {
  background: rgba(74, 208, 179, 0.10);
  border-color: rgba(74, 208, 179, 0.45);
}
.pi-cmp-verdict--support {
  background: rgba(245, 184, 81, 0.10);
  border-color: rgba(245, 184, 81, 0.45);
}
.pi-cmp-verdict--partial {
  background: rgba(154, 163, 181, 0.10);
  border-color: rgba(154, 163, 181, 0.40);
}
.pi-cmp-verdict--unknown {
  background: var(--bg);
  border-color: var(--border);
}

.pi-cmp-verdict__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pi-cmp-verdict__badge {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.pi-cmp-verdict--block .pi-cmp-verdict__badge { color: var(--primary); }
.pi-cmp-verdict--support .pi-cmp-verdict__badge { color: #f5b851; }

.pi-cmp-verdict__copy {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
}
.pi-cmp-verdict__copy:hover { border-color: var(--primary); }

.pi-cmp-verdict__text {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.55;
}

/* Ranking */
.pi-cmp-rank__sub {
  margin: 4px 0 12px;
  font-size: 0.82rem;
  color: var(--muted);
}

.pi-cmp-rank {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.pi-cmp-rank__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.88rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.pi-cmp-rank__row:last-child { border-bottom: 0; }

.pi-cmp-rank__row--head {
  background: var(--bg);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pi-cmp-rank__row--top {
  background: rgba(var(--primary-rgb), 0.06);
}

.pi-cmp-rank__label {
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}

.pi-cmp-rank__crown {
  color: var(--primary);
  font-size: 0.95rem;
}

/* Boutons Procurement (variante BEM utilisée dans CompareIndices, DeepAnalysis, etc.) */
.pi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  font-family: inherit;
}
.pi-btn:hover:not(:disabled) { border-color: var(--primary); }
.pi-btn:active:not(:disabled) { transform: translateY(1px); }
.pi-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pi-btn--primary {
  background: var(--primary);
  color: #0F1720;
  border-color: var(--primary);
}
.pi-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  border-color: var(--primary);
}
.pi-btn--ghost {
  background: transparent;
}

/* Barre Projets — sauvegarde / chargement de configurations Compare Indices */
.pi-cmp-projects-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  position: relative;
}
.pi-cmp-projects-bar__current {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.pi-cmp-projects-bar__label {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.pi-cmp-projects-bar__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-cmp-projects-bar__name em { color: var(--muted); font-weight: 500; font-style: italic; }
.pi-cmp-projects-bar__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.pi-cmp-projects-bar__error {
  flex-basis: 100%;
  color: #ef4444;
  font-size: 0.85rem;
  padding-top: 4px;
}
.pi-cmp-projects-list {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.pi-cmp-projects-list__row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.pi-cmp-projects-list__row--current { border-color: var(--primary); }
.pi-cmp-projects-list__load {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.pi-cmp-projects-list__load:hover { background: rgba(var(--primary-rgb), 0.06); }
.pi-cmp-projects-list__title { font-weight: 600; font-size: 0.9rem; }
.pi-cmp-projects-list__sub { font-size: 0.78rem; color: var(--muted); }
.pi-cmp-projects-list__delete {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--muted);
  width: 36px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.pi-cmp-projects-list__delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Barre Projets — IndicesPage (alias compact qui partage les styles pi-cmp-projects-*) */
.pi-projects-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; position: relative; }
.pi-projects-bar__current { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; }
.pi-projects-bar__label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; }
.pi-projects-bar__name { font-size: 0.95rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-projects-bar__name em { color: var(--muted); font-weight: 500; font-style: italic; }
.pi-projects-bar__actions { display: flex; gap: 8px; flex-shrink: 0; }
.pi-projects-bar__error { flex-basis: 100%; color: #ef4444; font-size: 0.85rem; padding-top: 4px; }
.pi-projects-list { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 4px; max-height: 320px; overflow-y: auto; }
.pi-projects-list__row { display: flex; align-items: stretch; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.pi-projects-list__row--current { border-color: var(--primary); }
.pi-projects-list__load { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: transparent; border: none; padding: 8px 12px; cursor: pointer; text-align: left; color: var(--text); }
.pi-projects-list__load:hover { background: rgba(var(--primary-rgb), 0.06); }
.pi-projects-list__title { font-weight: 600; font-size: 0.9rem; }
.pi-projects-list__sub { font-size: 0.78rem; color: var(--muted); }
.pi-projects-list__delete { background: transparent; border: none; border-left: 1px solid var(--border); color: var(--muted); width: 36px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.pi-projects-list__delete:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Bandeau "projet attaché" affiché en haut de Compare Indices */
.pi-cmp-current-project {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: 0.88rem;
}
.pi-cmp-current-project__label { color: var(--muted); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }
.pi-cmp-current-project__name { color: var(--text); }
.pi-cmp-current-project__hint { color: var(--muted); font-size: 0.8rem; font-style: italic; }

/* Charts grid dynamique (plages personnalisables) */
.pi-cmp-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
}
.pi-cmp-charts-grid .procurement-detail__chart-card {
  margin-bottom: 0;
}
@media (max-width: 1100px) {
  .pi-cmp-charts-grid { grid-template-columns: 1fr; }
  .pi-cmp-ref-grid { grid-template-columns: 1fr; }
}

/* Contrôles per-chart : selecteur de plage + bouton close */
.pi-cmp-chart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pi-cmp-range-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 24px 4px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.pi-cmp-range-select:hover { border-color: var(--primary); }
.pi-cmp-range-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}
.pi-cmp-chart-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.pi-cmp-chart-close:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* Bouton "+ Ajouter un graphique" */
.pi-cmp-add-chart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pi-cmp-add-chart-btn {
  background: transparent;
  color: var(--primary);
  border: 1px dashed var(--primary);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pi-cmp-add-chart-btn:hover {
  background: rgba(var(--primary-rgb), 0.08);
}
.pi-cmp-add-chart-hint {
  font-size: 0.8rem;
  color: var(--muted);
}
.pi-cmp-add-chart-hint strong { color: var(--text); }

/* Exports bar */
.pi-cmp-exports {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pi-cmp-exports__label {
  font-size: 0.85rem;
  color: var(--muted);
  margin-right: 4px;
}

/* Refresh FRED bar (CompareIndicesPage header) */
.pi-cmp-data-bar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.pi-cmp-data-bar__info {
  color: var(--muted);
}
.pi-cmp-data-bar__info strong {
  color: var(--text);
  font-weight: 600;
}
.pi-cmp-refresh-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pi-cmp-refresh-btn:hover:not(:disabled) {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}
.pi-cmp-refresh-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.pi-cmp-refresh-msg {
  font-size: 0.85rem;
}
.pi-cmp-refresh-msg--success { color: var(--primary); }
.pi-cmp-refresh-msg--error { color: #ef4444; }

/* CTA "Cas Forvia / PCA" — IndicesPage */
.pi-forvia-cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
  border: 1px solid var(--primary);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pi-forvia-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.18);
}
.pi-forvia-cta__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pi-forvia-cta__badge {
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #07120e;
  background: var(--primary);
  border-radius: 4px;
}
.pi-forvia-cta__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.pi-forvia-cta__sub {
  font-size: 0.85rem;
  color: var(--muted);
}
.pi-forvia-cta__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .pi-forvia-cta { flex-direction: column; align-items: stretch; }
  .pi-forvia-cta__cta { justify-content: flex-end; }
}

/* Bandeau "preset chargé" en haut de Compare */
.pi-cmp-preset-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(var(--primary-rgb), 0.10);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  border-radius: 8px;
  font-size: 0.88rem;
}
.pi-cmp-preset-banner__badge {
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #07120e;
  background: var(--primary);
  border-radius: 4px;
}
.pi-cmp-preset-banner__label {
  flex: 1;
  color: var(--text);
}
.pi-cmp-preset-banner__close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pi-cmp-preset-banner__close:hover { color: var(--text); }

/* Bandeau d'état de fraîcheur des données FRED (IndicesPage) */
.pi-data-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-size: 0.88rem;
}
.pi-data-status--syncing {
  background: rgba(var(--primary-rgb), 0.10);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  color: var(--text);
}
.pi-data-status--stale {
  background: rgba(245, 184, 81, 0.10);
  border: 1px solid rgba(245, 184, 81, 0.5);
  color: var(--text);
}
.pi-data-status__spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(var(--primary-rgb), 0.25);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: pi-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes pi-spin { to { transform: rotate(360deg); } }

/* CTA Forvia disabled */
.pi-forvia-cta:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.pi-forvia-cta:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Info compacte sur la fraicheur des donnees (CompareIndicesPage header) */
.pi-cmp-data-info {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.pi-cmp-data-info strong { color: var(--text); font-weight: 600; }


/* ───────────── Synthèse du marché — design cards + grid ─────────────
   Architecture : carte unique avec header (titre + barre de remplissage)
   puis sections par groupe. Chaque champ est une row CSS grid 3 colonnes
   (label / valeur / source) — pas de <table>+<colgroup> qui rend de manière
   imprévisible selon le contexte parent. */

.ao-synth {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* ── Header ───────────────────────────────────────────────────────── */
.ao-synth__head {
  padding: 20px 24px 16px;
  background: linear-gradient(
    180deg,
    rgba(var(--primary-rgb), 0.06) 0%,
    transparent 100%
  );
  border-bottom: 1px solid var(--border);
}

.ao-synth__head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.ao-synth__head-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
}

.ao-synth__head-count {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.ao-synth__head-count strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.ao-synth__head-slash {
  opacity: 0.4;
  margin: 0 1px;
}

.ao-synth__head-pct {
  margin-left: 8px;
  color: var(--primary);
  font-weight: 600;
  font-size: 12px;
}

.ao-synth__progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  margin-bottom: 14px;
}

.ao-synth__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), rgba(var(--primary-rgb), 0.65));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.4);
}

.ao-synth__head-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.75;
}

.ao-synth__head-legend svg {
  flex-shrink: 0;
  stroke: var(--primary);
  opacity: 0.7;
}

/* ── Body : groupes ───────────────────────────────────────────────── */
.ao-synth__body {
  display: flex;
  flex-direction: column;
}

.ao-synth-grp + .ao-synth-grp {
  border-top: 1px solid var(--border);
}

.ao-synth-grp__head {
  display: grid;
  grid-template-columns: auto 1fr auto 90px;
  align-items: center;
  gap: 14px;
  padding: 16px 24px;
  background: var(--grp-soft, rgba(var(--primary-rgb), 0.05));
  border-bottom: 1px solid var(--grp-border, rgba(var(--primary-rgb), 0.08));
}

.ao-synth-grp__icon-bar {
  display: inline-block;
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: var(--grp-accent, var(--primary));
  flex-shrink: 0;
}

.ao-synth-grp__title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--grp-accent, var(--primary));
}

.ao-synth-grp__badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: rgba(var(--text-rgb), 0.08);
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(var(--text-rgb), 0.06);
}

.ao-synth-grp__badge--ok {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.3);
}

.ao-synth-grp__badge--empty {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.25);
}

.ao-synth-grp__ratio {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  width: 80px;
  justify-self: end;
}

.ao-synth-grp__ratio-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  opacity: 0.7;
  transition: width 0.5s ease;
}

/* ── Rows : grid 3 colonnes ───────────────────────────────────────── */
.ao-synth-grp__rows {
  display: flex;
  flex-direction: column;
}

.ao-synth-row {
  display: grid;
  grid-template-columns: minmax(170px, 240px) 1fr minmax(120px, 150px);
  gap: 0;
  align-items: stretch;
  padding: 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}

.ao-synth-row:last-child {
  border-bottom: none;
}

.ao-synth-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.ao-synth-row:hover {
  background: rgba(var(--primary-rgb), 0.05);
}

/* Bordures verticales entre les 3 colonnes : sans ces séparateurs le tableau
   se lit comme une liste compacte ; on veut un effet "grille" plus marqué. */
.ao-synth-row > .ao-synth-row__label,
.ao-synth-row > .ao-synth-row__value {
  border-right: 1px solid var(--border);
}

.ao-synth-row__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.5;
  padding: 16px 20px;
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ao-synth-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ao-synth-row__chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(var(--text-rgb), 0.04);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ao-synth-row__chip.is-match {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--primary);
  font-weight: 700;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

.ao-synth-row__chip.is-muted {
  opacity: 0.45;
}

/* Label head : titre du champ + icône info pour la consigne de scoring */
.ao-synth-row__label-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ao-synth-row__label-text {
  display: inline;
}

.ao-synth-row__instruction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: rgba(var(--text-rgb), 0.06);
  color: var(--muted);
  cursor: help;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.ao-synth-row__instruction:hover {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
}

/* Badge "X pts" — nombre de points alloués à la ligne (total template = 20) */
.ao-synth-row__points {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Avertissement "valeur hors-liste" — le LLM a renvoyé un texte libre alors que
   le template imposait une liste fermée de chips. */
.ao-synth-row__warn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  cursor: help;
  align-self: flex-start;
}

/* Note Claude sur la ligne (note brute / échelle configurée dans le template) */
.ao-synth-row__score {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 3px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  cursor: help;
  margin-right: 6px;
}

.ao-synth-row__score-scale {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.7;
  letter-spacing: 0;
}

.ao-synth-row__value {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.6;
  word-break: break-word;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ao-synth-row__snippet {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: -0.1px;
}

.ao-synth-row__detail {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.65;
  word-break: break-word;
}

/* Col milieu : un titre court par ligne (snippet) + un texte détaillé en dessous
   (summary Claude ou valeur brute). Le titre = accroche en gras dans la couleur
   de l'app pour signaler la valeur principale ; le body = phrase contextuelle
   plus discrète. */
.ao-synth-row__detail-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.1px;
  margin-bottom: 5px;
  word-break: break-word;
}

.ao-synth-row__detail-body {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 400;
  word-break: break-word;
}

/* Badge distance vol d'oiseau — affiche sous la valeur "Distance / localisation"
   quand companyAddress est defini et que le geocodage a reussi. */
.ao-synth-row__distance {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text);
  line-height: 1;
}

.ao-synth-row__distance svg {
  color: var(--primary);
  flex-shrink: 0;
}

.ao-synth-row__distance strong {
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.ao-synth-row__distance span {
  color: var(--muted);
  font-size: 11px;
}

/* Picker multi-adresses pour le calcul de distance dans le Scan AO. Une ligne
   par adresse (siege, depot, agence), checkbox + label + km calcule. */
.ao-distance-picker {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 10px;
}

.ao-distance-picker__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  margin-bottom: 6px;
}

.ao-distance-picker__min {
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.ao-distance-picker__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ao-distance-picker__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background 0.12s ease;
}

.ao-distance-picker__row:hover {
  background: rgba(var(--primary-rgb), 0.06);
}

.ao-distance-picker__row input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
  accent-color: var(--primary);
}

.ao-distance-picker__row:not(.is-on) {
  opacity: 0.55;
}

.ao-distance-picker__label {
  font-weight: 500;
  color: var(--text);
}

.ao-distance-picker__km {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 11.5px;
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}

.ao-distance-picker__row.is-min .ao-distance-picker__km {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 25%, transparent);
}

.ao-synth-row__source {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 20px;
}

.ao-synth-row--empty .ao-synth-row__label {
  opacity: 0.55;
}

.ao-synth-row--empty .ao-synth-row__value {
  opacity: 0.7;
}

.ao-synth-row__empty {
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted);
  opacity: 0.6;
  padding: 2px 0;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ao-synth-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 14px;
  }
  .ao-synth-row__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-top: 0;
  }
  .ao-synth-row__source {
    justify-content: flex-start;
  }
  .ao-synth-grp__head {
    grid-template-columns: auto 1fr auto;
    padding: 10px 14px;
  }
  .ao-synth-grp__ratio {
    display: none;
  }
}


/* Scan AO — Configuration des templates (ScanAoTemplateConfig.jsx)
 * Préfixe : sat- (Scan Ao Template)
 * Mode sombre par défaut (utilise les tokens de base.css) */

.sat-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 1000;
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
}

.sat-modal {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 1180px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* ─── header ─── */
.sat-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}
.sat-modal__title {
  margin: 0;
  font-size: 17px; font-weight: 600;
  color: var(--text);
}
.sat-modal__sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ─── toolbar ─── */
.sat-modal__toolbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  flex-wrap: wrap;
}
.sat-toolbar__group {
  display: flex; align-items: center; gap: 10px;
}
.sat-toolbar__group--right {
  margin-left: auto;
  flex-wrap: wrap;
}
.sat-toolbar__label {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap;
}

/* ─── nom du template (ligne dédiée) ─── */
.sat-modal__name-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
}
.sat-modal__name-label {
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.sat-modal__name-input {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}
.sat-modal__name-input:focus { outline: none; border-color: var(--primary); }

/* ─── body scrollable ─── */
.sat-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.sat-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.sat-empty p { margin: 0 0 14px; }

.sat-modal__add-table {
  display: flex; justify-content: center;
  padding-top: 6px;
}

/* ─── footer ─── */
.sat-modal__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.sat-modal__foot-info { font-size: 12.5px; color: var(--muted); }
.sat-modal__dirty { color: #f59e0b; }
.sat-modal__clean { color: var(--muted); }
.sat-modal__foot-actions { display: flex; gap: 10px; }

/* ─── tableau ─── */
.sat-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0; /* ne pas se faire écraser par le flex parent .sat-modal__body */
  contain: layout paint;
}
.sat-table__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
}
.sat-table__head-left {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
}
.sat-table__head-right { display: flex; align-items: center; gap: 6px; }

.sat-table__title {
  flex: 1; min-width: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  color: #fff;
  font-size: 14px; font-weight: 600;
}
.sat-table__title::placeholder { color: rgba(255, 255, 255, 0.6); }
.sat-table__title:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.15); }

.sat-table__rows {
  display: flex; flex-direction: column;
}
.sat-table__empty {
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.sat-table__foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-start;
}

/* ─── couleur swatch ─── */
.sat-table__color { position: relative; }
.sat-color-swatch {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.sat-color-palette {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.sat-color-opt {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
}
.sat-color-opt--active { border-color: var(--text); }

/* ─── ligne (3 colonnes) ─── */
.sat-row {
  display: grid;
  grid-template-columns: 32px minmax(220px, 1.1fr) minmax(260px, 1.4fr) minmax(280px, 1.6fr) 36px;
  gap: 24px;
  padding: 26px 24px;
  border-top: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: var(--panel);
  align-items: stretch;
  contain: layout paint;
}
.sat-row:first-child { border-top: none; }
.sat-row:hover { background: rgba(255, 255, 255, 0.015); }

.sat-row__handles {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.sat-row__handles .sat-icon-btn { width: 22px; height: 22px; }
.sat-grip { color: var(--muted); cursor: grab; opacity: 0.6; }
.sat-grip:hover { opacity: 1; }

.sat-row__col {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.sat-col__title {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: baseline; gap: 8px;
}
.sat-col__hint {
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  opacity: 0.7;
  font-style: italic;
}

/* Col 1 : intitulé + meta (échelle, poids) */
.sat-row__col--label { gap: 14px; }
.sat-row__label {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14.5px; font-weight: 600;
  width: 100%;
}
.sat-row__label:focus { outline: none; border-color: var(--primary); }
.sat-row__meta {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.sat-row__inline {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--muted);
}
.sat-row__inline > span { font-weight: 500; }

/* Col 2 : chips */
.sat-row__col--chips .sat-chips { flex: 1; min-height: 100px; align-items: flex-start; }
.sat-row__toggle {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 12.5px; color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.sat-row__toggle input[type="checkbox"] {
  appearance: none;
  width: 32px; height: 18px;
  background: var(--border);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.sat-row__toggle input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--text);
  border-radius: 50%;
  transition: transform 0.15s;
}
.sat-row__toggle input[type="checkbox"]:checked {
  background: var(--primary);
}
.sat-row__toggle input[type="checkbox"]:checked::before {
  transform: translateX(14px);
  background: var(--panel);
}

/* Col 3 : consigne */
.sat-instruction-wrap {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
}
.sat-row__textarea {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-family: inherit;
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}
.sat-row__textarea:focus { outline: none; border-color: var(--primary); }
.sat-instruction-mic {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}

.sat-row__error {
  font-size: 12px;
  color: #ef4444;
}

/* Delete button : aligné en haut à droite */
.sat-row__delete {
  align-self: flex-start;
  margin-top: 22px;
}

/* ─── chips ─── */
.sat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  min-height: 36px;
  align-items: center;
}
.sat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(74, 208, 179, 0.12);
  color: var(--text);
  border: 1px solid rgba(74, 208, 179, 0.35);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  font-size: 12.5px;
  line-height: 1.2;
}
.sat-chip__rm {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 4px;
  border-radius: 999px;
}
.sat-chip__rm:hover { color: #ef4444; background: rgba(239, 68, 68, 0.12); }
.sat-chip__input {
  flex: 1;
  min-width: 160px;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 4px 6px;
  font-size: 13px;
}
.sat-chip__input:focus { outline: none; }
.sat-chip__input::placeholder { color: var(--muted); font-style: italic; }

/* ─── input points (entier 0..20) ─── */
.sat-points {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 4px;
}
.sat-points__btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 20px;
  height: 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sat-points__btn:hover:not(:disabled) { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); }
.sat-points__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sat-points__input {
  width: 32px;
  background: transparent;
  border: none;
  color: var(--text);
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  padding: 0;
  -moz-appearance: textfield;
}
.sat-points__input::-webkit-outer-spin-button,
.sat-points__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sat-points__input:focus { outline: none; }
.sat-points__unit { color: var(--muted); font-size: 11px; }

/* ─── totalisateur points (footer) ─── */
.sat-modal__total {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 12px;
}
.sat-modal__total--ok {
  background: rgba(74, 208, 179, 0.15);
  color: var(--primary);
  border: 1px solid rgba(74, 208, 179, 0.4);
}
.sat-modal__total--warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.sat-btn--xs { padding: 2px 8px; font-size: 11px; border-radius: 5px; }

/* ─── boutons ─── */
.sat-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.sat-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.sat-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sat-btn--ghost { background: transparent; }
.sat-btn--primary {
  background: var(--primary);
  color: #0f1720;
  border-color: var(--primary);
  font-weight: 600;
}
.sat-btn--primary:hover:not(:disabled) {
  filter: brightness(1.08);
  color: #0f1720;
}

.sat-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.sat-icon-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.sat-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sat-icon-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.18); color: #fff; }
.sat-icon-btn--ghost:hover:not(:disabled) { background: rgba(0, 0, 0, 0.15); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.sat-icon-btn--danger { color: #ef4444; border-color: rgba(239, 68, 68, 0.4); }
.sat-icon-btn--danger:hover { background: rgba(239, 68, 68, 0.12); border-color: #ef4444; color: #ef4444; }

/* ─── select ─── */
.sat-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.sat-select:focus { outline: none; border-color: var(--primary); }
.sat-select--lg { font-size: 14px; padding: 8px 12px; min-width: 220px; }
.sat-select--sm { font-size: 11.5px; padding: 3px 6px; }

/* ─── responsive ─── */
@media (max-width: 1100px) {
  .sat-row {
    grid-template-columns: 28px 1fr 32px;
    grid-template-areas:
      "handles label  delete"
      "handles chips  chips"
      "handles instr  instr";
    gap: 12px;
    padding: 14px 16px;
  }
  .sat-row__handles { grid-area: handles; }
  .sat-row__col--label { grid-area: label; }
  .sat-row__col--chips { grid-area: chips; }
  .sat-row__col--instruction { grid-area: instr; }
  .sat-row__delete { grid-area: delete; margin-top: 0; }
}
@media (max-width: 800px) {
  .sat-overlay { padding: 0; }
  .sat-modal { border-radius: 0; max-height: 100vh; }
  .sat-modal__toolbar { padding: 12px 14px; }
  .sat-modal__body { padding: 12px 14px; }
}


/* ──────────────────────────────────────────────────────────────────────────
   ChatIA — composant chat IA réutilisable.

   Variants :
   - chatia--embedded   : intégré dans une page (Should-Cost, etc.)
                          → bordure primary subtile + dégradé + hauteur bornée
   - chatia--standalone : page complète (panel SmartChat global)
                          → flex 1 1 auto, scroll plein écran
   - chatia--page       : page complète (SmartChatPageV2) — remplit parent flex
   - chatia--panel      : panneau latéral (SuperChatPanelV2)
   - chatia--sidebar    : sidebar étroite (panel latéral compact)

   Design :
   - Mode sombre uniquement (tokens var(--bg) / --panel / --text / --primary)
   - Pas de hardcode #fff / white / #111 même en fallback
   - Animations GPU (transform / opacity) — pas de width/height animées
   - Inspiration claude.ai / Linear AI / Perplexity / Notion AI

   Sections :
   1. Layout / variants
   2. Project badge (contexte verrouillé)
   3. Scroll area + fade top
   4. Empty state + quick-starts
   5. Messages (avatar + bulle + typing cursor)
   6. Streaming loaders (3 dots + curseur typewriter)
   7. Action buttons / quick replies
   8. Tool badges + file generation banner
   9. Message meta (model + tokens + cost + timestamp)
   10. Composer (textarea + send + attach + hints)
   11. Drag-drop overlay
   12. Scroll-to-bottom button
   13. Error banner
   14. History drawer
   15. ChatFileDownload card
   16. Canvas split (inline preview)
   17. Module global renderers (NavigationActions, SourcesList)
   ────────────────────────────────────────────────────────────────────────── */

/* ── 1. Layout / variants ─────────────────────────────────────────────── */

.chatia {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  color: var(--text);
  position: relative;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

.chatia--embedded {
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(var(--primary-rgb), 0.06) 0%, transparent 60%),
    var(--panel);
}

.chatia--standalone {
  flex: 1 1 auto;
  height: 100%;
  border-radius: 0;
}

.chatia--page {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.chatia--panel {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  background: var(--panel);
  font-size: 0.9rem;
}

.chatia--sidebar {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  font-size: 0.9rem;
}

/* ── 2. Project badge (contexte verrouillé) ───────────────────────────── */

.chatia__project-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background:
    linear-gradient(90deg, rgba(var(--primary-rgb), 0.10) 0%, rgba(var(--primary-rgb), 0.04) 100%);
  border-bottom: 1px solid rgba(var(--primary-rgb), 0.25);
  backdrop-filter: blur(6px);
}
.chatia__project-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--primary);
  color: var(--bg);
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
}
.chatia__project-badge-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.chatia__project-badge-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
}
.chatia__project-badge-meta {
  font-size: 0.92rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatia__project-badge-meta strong { color: var(--text); font-weight: 600; }
.chatia__project-badge-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.chatia__btn {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(var(--primary-rgb), 0.40);
  color: var(--primary);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.chatia__btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
}
.chatia__btn:active:not(:disabled) { transform: translateY(1px); }
.chatia__btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 3. Scroll area + fade top ────────────────────────────────────────── */

.chatia__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 28px 28px 12px;
  min-height: 0;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  position: relative;
}
.chatia__scroll::-webkit-scrollbar { width: 10px; }
.chatia__scroll::-webkit-scrollbar-track { background: transparent; }
.chatia__scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.chatia__scroll::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
  background-clip: content-box;
}

.chatia__scroll--embedded {
  max-height: 540px;
  min-height: 320px;
  padding: 22px 22px 10px;
}
.chatia__scroll--standalone { padding: 32px 32px 12px; }
.chatia__scroll--sidebar { padding: 16px 14px 8px; max-height: 100%; }

/* ── 4. Empty state + quick-starts ────────────────────────────────────── */

.chatia__empty {
  max-width: 740px;
  margin: 48px auto 0;
  text-align: center;
  animation: chatia-fade-up 0.5s ease-out;
}
.chatia__empty--compact { margin-top: 18px; text-align: left; }
.chatia--sidebar .chatia__empty { max-width: 100%; margin-top: 12px; }

.chatia__empty-orb {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatia__empty--compact .chatia__empty-orb {
  margin: 0 0 12px;
  width: 40px;
  height: 40px;
}
.chatia__empty-orb-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(var(--primary-rgb), 0.45) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0.7;
  animation: chatia-orb-pulse 3.4s ease-in-out infinite;
}
.chatia__empty-orb-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.95) 0%,
    rgba(var(--primary-rgb), 0.55) 100%);
  color: var(--bg);
}
.chatia__empty-orb-icon svg { width: 22px; height: 22px; }
.chatia__empty--compact .chatia__empty-orb-icon svg { width: 16px; height: 16px; }

@keyframes chatia-orb-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}

.chatia__empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 8px;
}
.chatia__empty--compact .chatia__empty-title { font-size: 1.05rem; }
.chatia--sidebar .chatia__empty-title { font-size: 1rem; }

.chatia__empty-sub {
  color: var(--muted);
  margin: 0 0 28px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.chatia__empty--compact .chatia__empty-sub { margin-bottom: 18px; font-size: 0.88rem; }

.chatia__quickstart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.chatia--sidebar .chatia__quickstart,
.chatia--embedded .chatia__quickstart { grid-template-columns: 1fr; }

.chatia__quickstart-btn {
  appearance: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease;
  opacity: 0;
  animation: chatia-fade-up 0.4s ease-out forwards;
  position: relative;
  overflow: hidden;
}
.chatia__quickstart-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.chatia__quickstart-btn:hover:not(:disabled) {
  border-color: rgba(var(--primary-rgb), 0.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.chatia__quickstart-btn:hover:not(:disabled)::before { opacity: 1; }
.chatia__quickstart-btn:active:not(:disabled) { transform: translateY(0); }
.chatia__quickstart-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.chatia__quickstart-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  flex-shrink: 0;
}
.chatia__quickstart-icon svg { width: 14px; height: 14px; }

.chatia__quickstart-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.chatia__quickstart-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}
.chatia__quickstart-hint {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ── 5. Messages (avatar + bulle) ─────────────────────────────────────── */

.chatia__messages {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding-bottom: 12px;
}
.chatia--sidebar .chatia__messages { gap: 14px; }
.chatia--embedded .chatia__messages { gap: 16px; }

.chatia__msg {
  display: flex;
  gap: 12px;
  animation: chatia-fade-up 0.35s ease-out;
  align-items: flex-start;
}
.chatia__msg--user { flex-direction: row-reverse; }
.chatia__msg--assistant { flex-direction: row; }

.chatia--sidebar .chatia__msg { gap: 8px; }

.chatia__msg-avatar { flex-shrink: 0; padding-top: 2px; }

.chatia__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  user-select: none;
}
.chatia__avatar--assistant {
  background: linear-gradient(135deg,
    rgba(var(--primary-rgb), 0.95) 0%,
    rgba(var(--primary-rgb), 0.55) 100%);
  color: var(--bg);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.30);
}
.chatia__avatar--assistant svg { width: 14px; height: 14px; }
.chatia__avatar--user {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.6rem;
}
.chatia--sidebar .chatia__avatar { width: 22px; height: 22px; }
.chatia--sidebar .chatia__avatar--assistant svg { width: 11px; height: 11px; }

.chatia__msg-bubble {
  max-width: calc(100% - 44px);
  padding: 13px 16px 11px;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  line-height: 1.6;
  font-size: 0.94rem;
  position: relative;
}
.chatia__msg--assistant .chatia__msg-bubble {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-top-left-radius: 4px;
}
.chatia__msg--user .chatia__msg-bubble {
  background:
    linear-gradient(135deg,
      rgba(var(--primary-rgb), 0.14) 0%,
      rgba(var(--primary-rgb), 0.08) 100%);
  border: 1px solid rgba(var(--primary-rgb), 0.30);
  border-top-right-radius: 4px;
  color: var(--text);
}
.chatia--sidebar .chatia__msg-bubble {
  padding: 10px 13px;
  font-size: 0.88rem;
}

.chatia__msg-md {
  /* Wrapper du markdown : on garde la coloration héritée mais on hint
     les liens externes pour visibilité. */
}
.chatia__msg-md a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.chatia__msg-md a:hover { text-decoration-thickness: 2px; }

.chatia__msg-md > *:first-child { margin-top: 0; }
.chatia__msg-md > *:last-child { margin-bottom: 0; }

.chatia__msg-user-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.chatia__msg-user-time {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--muted);
  text-align: right;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.chatia__msg--user:hover .chatia__msg-user-time { opacity: 0.8; }

.chatia__msg-user-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.chatia__msg-user-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
}
.chatia__msg-user-attachment svg { color: var(--primary); flex-shrink: 0; }

/* ── 6. Streaming loaders ─────────────────────────────────────────────── */

.chatia__loader {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 2px;
}
.chatia__loader-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.4;
  animation: chatia-loader-bounce 1.2s ease-in-out infinite;
}
.chatia__loader-dot:nth-child(2) { animation-delay: 0.18s; }
.chatia__loader-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes chatia-loader-bounce {
  0%, 70%, 100% { transform: translateY(0); opacity: 0.35; }
  35%           { transform: translateY(-4px); opacity: 1; }
}

/* Curseur typewriter : barre verticale clignotante en fin de stream */
.chatia__typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  margin-bottom: -2px;
  background: var(--primary);
  border-radius: 1px;
  animation: chatia-cursor-blink 1.1s steps(1) infinite;
  vertical-align: text-bottom;
}
@keyframes chatia-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.chatia__spin {
  animation: chatia-spin 0.9s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes chatia-spin { to { transform: rotate(360deg); } }

/* ── 7. Action buttons / quick replies ────────────────────────────────── */

.chatia__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.chatia__action-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  background: rgba(var(--primary-rgb), 0.10);
  border: 1px solid rgba(var(--primary-rgb), 0.32);
  color: var(--primary);
  border-radius: 9px;
  font-size: 0.83rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.15s ease;
}
.chatia__action-btn:hover {
  background: rgba(var(--primary-rgb), 0.18);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.12);
}
.chatia__action-btn:active { transform: translateY(0); }
.chatia__action-btn svg { flex-shrink: 0; }

.chatia__quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.chatia__quick-reply-btn {
  appearance: none;
  background: rgba(var(--primary-rgb), 0.05);
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  color: var(--text);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}
.chatia__quick-reply-btn:hover {
  background: rgba(var(--primary-rgb), 0.16);
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* ── 8. Tool badges + file generation banner ──────────────────────────── */

.chatia__tools-used {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dotted var(--border);
}
.chatia__tools-used-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dotted var(--border);
}
.chatia__tools-used-wrap .chatia__tools-used {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.chatia__tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 7px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, monospace;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.chatia__tool-badge:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
  color: var(--text);
}
.chatia__tool-badge:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb), 0.55);
  outline-offset: 2px;
}
.chatia__tool-badge--expanded {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: rgba(var(--primary-rgb), 0.45);
  color: var(--text);
}
.chatia__tool-badge-chev {
  display: inline-flex;
  align-items: center;
  opacity: 0.6;
  margin-left: 2px;
}
.chatia__tool-details {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  animation: chatia-fade-in 0.18s ease-out;
}
.chatia__tool-details-idx {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.chatia__tool-details-call + .chatia__tool-details-call {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dotted var(--border);
}
.chatia__tool-details-json {
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.30);
  border-radius: 6px;
  border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}
@keyframes chatia-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chatia__tool-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chatia__tool-badge-name { line-height: 1; }
.chatia__tool-badge-count {
  margin-left: 1px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.66rem;
}

.chatia__tool-badge--running {
  background: rgba(var(--primary-rgb), 0.10);
  border-color: rgba(var(--primary-rgb), 0.40);
  color: var(--primary);
  animation: chatia-pulse 1.6s ease-in-out infinite;
}
@keyframes chatia-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.20); }
  50%      { opacity: 0.72; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0); }
}

/* Bannière "Génération en cours…" — plus visible qu'un badge */
.chatia__file-generation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 9px 13px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 9px;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 500;
}
.chatia__file-generation svg { flex-shrink: 0; }

/* ── 9. Message meta ──────────────────────────────────────────────────── */

.chatia__msg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  transition: opacity 0.18s ease;
}
.chatia__msg:hover .chatia__msg-meta { opacity: 1; }
.chatia__msg-meta-pill {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--text);
  font-weight: 500;
}
.chatia__msg-meta-dot { margin: 0 5px; opacity: 0.5; }
.chatia__msg-meta-tokens,
.chatia__msg-meta-cost {
  display: inline-flex;
  align-items: center;
}
.chatia__msg-meta-time { margin-left: auto; }

/* Footer du message assistant : meta à gauche, actions à droite */
.chatia__msg-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.chatia__msg-footer .chatia__msg-meta {
  flex: 1 1 auto;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.chatia__msg-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.chatia__msg:hover .chatia__msg-actions,
.chatia__msg-actions:focus-within {
  opacity: 1;
}

/* Bouton "Copier" générique (messages + code blocks) */
.chatia__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.chatia__copy-btn:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.06);
}
.chatia__copy-btn--ok {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.55);
  background: rgba(var(--primary-rgb), 0.10);
}
.chatia__copy-btn:focus-visible {
  outline: 2px solid rgba(var(--primary-rgb), 0.55);
  outline-offset: 2px;
}
.chatia__copy-btn-text { line-height: 1; }
.chatia__copy-btn--sm { padding: 3px 7px; font-size: 0.68rem; }

/* ── 10. Composer ─────────────────────────────────────────────────────── */

.chatia__footer {
  padding: 12px 28px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent 0%, var(--panel) 18%);
  flex-shrink: 0;
}
.chatia--embedded .chatia__footer {
  padding: 12px 16px 14px;
  background: transparent;
  border-top-color: rgba(var(--primary-rgb), 0.18);
}
.chatia--sidebar .chatia__footer {
  padding: 10px 12px 12px;
}
.chatia--panel .chatia__footer { padding: 12px 20px 16px; }

.chatia__composer-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.chatia__composer {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px 6px 6px 8px;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.chatia--embedded .chatia__composer,
.chatia--panel .chatia__composer,
.chatia--sidebar .chatia__composer {
  background: var(--panel);
}
.chatia__composer:focus-within {
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow:
    0 0 0 3px rgba(var(--primary-rgb), 0.10),
    0 8px 24px rgba(0, 0, 0, 0.25);
}
.chatia__composer--streaming {
  border-color: rgba(var(--primary-rgb), 0.40);
}

.chatia__textarea {
  flex: 1;
  resize: none;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.55;
  min-height: 26px;
  max-height: 220px;
  padding: 8px 6px;
}
.chatia__textarea::placeholder { color: var(--muted); }
.chatia__textarea:disabled { opacity: 0.6; cursor: not-allowed; }

.chatia__send-btn {
  appearance: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: var(--primary);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.1s ease,
    background 0.15s ease,
    box-shadow 0.18s ease;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.22);
}
.chatia__send-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(var(--primary-rgb), 0.28);
}
.chatia__send-btn:active:not(:disabled) { transform: translateY(0); }
.chatia__send-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}
.chatia__send-btn--stop {
  background: #ef4444;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.30);
  animation: chatia-stop-pulse 2.4s ease-in-out infinite;
}
.chatia__mic-btn {
  flex-shrink: 0;
  align-self: center;
  margin-right: 4px;
}
.chatia__mic-btn.voice-dictation {
  padding: 0;
  width: 32px;
  height: 32px;
  justify-content: center;
}
.chatia__send-btn--stop:hover:not(:disabled) {
  background: #dc2626;
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.36);
}
@keyframes chatia-stop-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(239, 68, 68, 0.30), 0 0 0 0 rgba(239, 68, 68, 0.40); }
  50%      { box-shadow: 0 2px 6px rgba(239, 68, 68, 0.30), 0 0 0 6px rgba(239, 68, 68, 0); }
}

.chatia__attach-btn {
  appearance: none;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.chatia__attach-btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
}
.chatia__attach-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Hints clavier + char counter */
.chatia__composer-hints {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  font-size: 0.7rem;
  color: var(--muted);
  min-height: 14px;
}
.chatia__composer-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.75;
}
.chatia__composer-hint-sep {
  margin: 0 4px;
  opacity: 0.6;
}
.chatia__composer-hint kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.66rem;
  color: var(--text);
  line-height: 1.4;
  border-bottom-width: 2px;
}
.chatia__composer-counter {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}
.chatia__composer-hint-extra {
  margin-left: auto;
  opacity: 0.75;
}

/* Hint legacy (compat) */
.chatia__hint {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

/* Attachments chips au-dessus du composer */
.chatia__attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px;
}
.chatia__attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 6px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.78rem;
  max-width: 260px;
  animation: chatia-fade-up 0.25s ease-out;
}
.chatia__attach-chip-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  flex-shrink: 0;
}
.chatia__attach-chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.chatia__attach-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.2;
}
.chatia__attach-chip-size {
  font-size: 0.66rem;
  color: var(--muted);
  line-height: 1.2;
}
.chatia__attach-chip-remove {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.12s ease, color 0.12s ease;
}
.chatia__attach-chip-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* ── 11. Drag-drop overlay ────────────────────────────────────────────── */

.chatia--dragover {
  outline: 2px dashed rgba(var(--primary-rgb), 0.55);
  outline-offset: -8px;
}
.chatia__drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 32, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  animation: chatia-fade-up 0.18s ease-out;
}
.chatia__drop-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 40px;
  background: var(--panel);
  border: 2px dashed var(--primary);
  border-radius: 16px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  animation: chatia-pop 0.25s ease-out;
}
@keyframes chatia-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.chatia__drop-overlay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
}
.chatia__drop-overlay-icon svg { width: 26px; height: 26px; }
.chatia__drop-overlay-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.chatia__drop-overlay-hint {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 400;
}

/* ── 12. Scroll-to-bottom button ──────────────────────────────────────── */

.chatia__scroll-bottom-btn {
  position: absolute;
  bottom: 110px;
  right: 32px;
  z-index: 5;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
  animation: chatia-fade-up 0.2s ease-out;
}
.chatia__scroll-bottom-btn:hover {
  border-color: rgba(var(--primary-rgb), 0.55);
  color: var(--primary);
  transform: translateY(-2px);
}
.chatia--embedded .chatia__scroll-bottom-btn { bottom: 92px; right: 22px; }
.chatia--sidebar .chatia__scroll-bottom-btn {
  bottom: 78px;
  right: 16px;
  width: 30px;
  height: 30px;
}

/* ── 13. Error banner ─────────────────────────────────────────────────── */

.chatia__error {
  margin: 0 28px 10px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 10px;
  color: #ef4444;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  animation: chatia-fade-up 0.25s ease-out;
}
.chatia--embedded .chatia__error,
.chatia--sidebar .chatia__error { margin: 0 14px 10px; }

.chatia__error-msg { flex: 1; min-width: 0; }
.chatia__error-retry {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #ef4444;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease;
  flex-shrink: 0;
}
.chatia__error-retry:hover { background: rgba(239, 68, 68, 0.12); }
.chatia__error-close {
  background: transparent;
  border: 0;
  color: #ef4444;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 6px;
  flex-shrink: 0;
}

/* ── Animations partagées ─────────────────────────────────────────────── */

@keyframes chatia-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect des préférences accessibilité */
@media (prefers-reduced-motion: reduce) {
  .chatia__msg,
  .chatia__quickstart-btn,
  .chatia__empty,
  .chatia__attach-chip,
  .chatia__error,
  .chatia__drop-overlay,
  .chatia__drop-overlay-inner,
  .chatia__scroll-bottom-btn {
    animation: none !important;
  }
  .chatia__empty-orb-glow,
  .chatia__tool-badge--running,
  .chatia__send-btn--stop,
  .chatia__typing-cursor,
  .chatia__loader-dot,
  .chatia__spin {
    animation: none !important;
  }
}

/* ── 14. History drawer ───────────────────────────────────────────────── */

.chatia--with-history {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}

.chatia__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
}

.chatia-history {
  flex-shrink: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  background: rgba(20, 28, 38, 0.65);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border);
  min-height: 0;
}

.chatia-history--collapsed {
  width: 48px;
  align-items: center;
  padding: 8px 0;
  gap: 8px;
}

.chatia-history__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 8px;
}

.chatia-history__new-btn {
  appearance: none;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.4);
  color: var(--primary);
  border-radius: 9px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.1s ease;
}
.chatia-history__new-btn:hover {
  background: rgba(var(--primary-rgb), 0.22);
  border-color: var(--primary);
}
.chatia-history__new-btn:active { transform: translateY(1px); }
.chatia-history__new-btn--icon {
  flex: 0 0 auto;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.chatia-history__toggle {
  appearance: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.chatia-history__toggle:hover {
  color: var(--text);
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.chatia-history__title {
  padding: 4px 14px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.chatia-history__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 8px 12px;
  min-height: 0;
}

.chatia-history__section { margin-bottom: 10px; }
.chatia-history__section-label {
  padding: 8px 6px 4px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chatia-history__section-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chatia-history__item {
  appearance: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 8px;
  padding: 8px 10px 8px 12px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  transition: background 0.12s ease, border-color 0.12s ease;
  position: relative;
}
.chatia-history__item:hover { background: rgba(255, 255, 255, 0.04); }
.chatia-history__item--active {
  background: rgba(var(--primary-rgb), 0.08);
  border-left-color: var(--primary);
}
.chatia-history__item-title {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.chatia-history__item-meta {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-size: 0.7rem;
  color: var(--muted);
}
.chatia-history__item-actions {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  align-self: center;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.chatia-history__item:hover .chatia-history__item-actions,
.chatia-history__item:focus-within .chatia-history__item-actions { opacity: 1; }

.chatia-history__icon-btn {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.chatia-history__icon-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.chatia-history__icon-btn--danger:hover { background: rgba(239, 68, 68, 0.14); color: #ef4444; }

.chatia-history__empty {
  padding: 18px 14px;
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  text-align: center;
}

.chatia-history__collapsed-list {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  width: 100%;
}
.chatia-history__pill {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.chatia-history__pill:hover {
  background: rgba(var(--primary-rgb), 0.10);
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.3);
}
.chatia-history__pill--active {
  background: rgba(var(--primary-rgb), 0.16);
  color: var(--primary);
  border-color: var(--primary);
}

@media (max-width: 640px) {
  .chatia-history { width: 220px; }
}

/* ── 15. ChatFileDownload card ────────────────────────────────────────── */

.chatia-file-dl {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin: 10px 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.1s ease, box-shadow 0.18s ease;
}
.chatia-file-dl:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.chatia-file-dl__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatia-file-dl__body { flex: 1 1 auto; min-width: 0; }
.chatia-file-dl__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatia-file-dl__meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.chatia-file-dl__summary {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chatia-file-dl__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--primary);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.chatia-file-dl__btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.chatia-file-dl__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.chatia-file-dl__buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.chatia-file-dl__btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.chatia-file-dl__btn--ghost:hover {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: var(--primary);
  filter: none;
}

/* ── 16. Canvas split (inline preview) ────────────────────────────────── */

.chatia--split { display: flex; flex-direction: row; align-items: stretch; }
.chatia--split .chatia__main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chatia-canvas {
  flex: 1 1 0;
  min-width: 0;
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatia-canvas-slide 0.28s ease-out;
}
@keyframes chatia-canvas-slide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.chatia-canvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.chatia-canvas__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.chatia-canvas__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.chatia-canvas__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--primary);
  color: var(--bg);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.chatia-canvas__action:hover { filter: brightness(1.1); }
.chatia-canvas__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.chatia-canvas__close:hover { border-color: var(--primary); }
.chatia-canvas__body {
  flex: 1 1 auto;
  overflow: auto;
  background: var(--bg);
}
.chatia-canvas__loading,
.chatia-canvas__error,
.chatia-canvas__note,
.chatia-canvas__fallback {
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.chatia-canvas__error { color: var(--danger, #ef4444); }
.chatia-canvas__fallback { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chatia-canvas__dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--primary);
  color: var(--bg);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* PDF iframe — le viewer Chromium impose un fond blanc, on le laisse */
.chatia-canvas__iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff; /* PDF viewer Chromium est blanc — c'est ok ici */
}

.chatia-canvas__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 24px auto;
  border-radius: 8px;
}

.chatia-canvas__xlsx { display: flex; flex-direction: column; height: 100%; }
.chatia-canvas__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.chatia-canvas__tab {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.chatia-canvas__tab.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--bg);
}
.chatia-canvas__xlsx-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px;
}
.chatia-canvas__table {
  border-collapse: collapse;
  font-size: 12px;
  color: var(--text);
}
.chatia-canvas__table td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  white-space: nowrap;
  background: var(--panel);
}
.chatia-canvas__table tr:first-child td {
  font-weight: 600;
  background: var(--bg);
}

.chatia-canvas__docx {
  padding: 32px 40px;
  max-width: 800px;
  margin: 0 auto;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}
.chatia-canvas__docx-p { margin: 0 0 12px 0; }

.chatia-canvas__pptx {
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.chatia-canvas__slide {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
}
.chatia-canvas__slide-header {
  padding: 6px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.chatia-canvas__slide-body {
  flex: 1 1 auto;
  padding: 12px;
  overflow: auto;
  font-size: 12px;
  color: var(--text);
}
.chatia-canvas__slide-body p { margin: 0 0 6px 0; }

/* ── 17. Module global renderers (NavigationActions, SourcesList) ─────── */

.cgi-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.cgi-nav-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.cgi-nav-action-btn:hover {
  background: rgba(var(--primary-rgb), 0.22);
  border-color: var(--primary);
}
.cgi-nav-action-btn:active { transform: translateY(1px); }
.cgi-nav-action-btn svg { flex-shrink: 0; }

.cgi-sources-list {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.cgi-sources-list__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.cgi-sources-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.cgi-sources-list .preview-card {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
}
.cgi-sources-list .preview-image {
  height: 260px;
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
}
.cgi-sources-list .preview-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}
.cgi-sources-list .preview-filename {
  font-size: 0.85rem !important;
  color: var(--text) !important;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.cgi-sources-list .preview-meta .muted.tiny:not(.preview-filename) {
  font-size: 0.72rem;
  color: var(--muted);
}
.cgi-sources-list .pv-action-btn span {
  display: inline-block;
}

/* ── ChatFileInlinePreview ─────────────────────────────────────────────── */
.chatia-inline {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 720px;
}
.chatia-inline__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.chatia-inline__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.chatia-inline__ext-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 26px;
  padding: 0 7px;
  border-radius: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.chatia-inline__title-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.chatia-inline__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatia-inline__meta {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatia-inline__dl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.chatia-inline__dl:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.10);
  border-color: var(--primary);
  color: var(--primary);
}
.chatia-inline__dl:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.chatia-inline__body {
  min-height: 280px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.chatia-inline__loading,
.chatia-inline__error,
.chatia-inline__note {
  padding: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.chatia-inline__error {
  color: #ef4444;
}
.chatia-inline__iframe {
  width: 100%;
  height: 420px;
  border: 0;
  background: #fff;
}
.chatia-inline__image {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  margin: auto;
}

/* XLSX (sheet_to_html → table standard) */
.chatia-inline__xlsx {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  background: #fff;
}
.chatia-inline__tabs {
  display: flex;
  gap: 2px;
  padding: 6px 8px 0 8px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  background: var(--panel);
  flex-shrink: 0;
}
.chatia-inline__tab {
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chatia-inline__tab.is-active {
  background: var(--panel);
  color: var(--text);
  border-color: var(--primary);
}
.chatia-inline__xlsx-scroll {
  overflow: auto;
  flex: 1;
  padding: 8px;
  background: #fff;
  color: #111;
}
.chatia-inline__xlsx-scroll table {
  border-collapse: collapse;
  font-size: 11px;
}
.chatia-inline__xlsx-scroll table td,
.chatia-inline__xlsx-scroll table th {
  border: 1px solid #d1d5db;
  padding: 3px 7px;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #fff;
  color: #111;
}

/* DOCX (docx-preview = rendu fidèle Word) */
.chatia-inline__docx-scroll {
  overflow: auto;
  flex: 1;
  background: #525659;
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chatia-inline__docx-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.chatia-inline__docx-container .docx-wrapper {
  background: transparent !important;
  padding: 0 !important;
}
.chatia-inline__docx-container .docx-wrapper > section.docx {
  background: #fff !important;
  color: #111 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  margin: 0 auto 16px auto !important;
  transform-origin: top center;
  transform: scale(0.72);
  margin-bottom: -120px !important;
}

/* PPTX (positions absolues fidèles) */
.chatia-inline__pptx {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: #1a1a1a;
}
.chatia-inline__pptx-stage {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chatia-inline__pptx-slide {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  container-type: inline-size;
}
.chatia-inline__pptx-shape {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0.5cqw 0.8cqw;
}
.chatia-inline__pptx-para {
  margin: 0;
  color: #111;
  line-height: 1.15;
}
.chatia-inline__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.chatia-inline__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.chatia-inline__nav-btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: var(--primary);
  color: var(--primary);
}
.chatia-inline__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.chatia-inline__nav-counter {
  font-size: 11px;
  color: var(--muted);
  min-width: 90px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* Documents IA — Style hub + génération + modal.
   Reprend les tokens du système global (cohérence avec chat-ia / Étude de prix). */

.docia-hub {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 24px;
}

.docia-hub__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.docia-hub__head h2 {
  margin: 0 0 4px;
  font-size: 1.35rem;
  color: var(--text);
}
.docia-hub__head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.docia-section-title {
  margin: 0 0 10px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
}

.docia-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ---- Card template ---- */
.docia-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease;
}
.docia-card:hover {
  border-color: rgba(var(--primary-rgb), 0.5);
}

.docia-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.docia-card__menu {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.docia-card__menu:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.08);
}

.docia-card__title {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
}

.docia-card__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.docia-card__meta {
  display: flex;
  gap: 6px;
}

.docia-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
}
.docia-badge--ok {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.35);
  color: var(--primary);
}

.docia-card__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docia-btn-full {
  width: 100%;
}

/* ---- Empty state ---- */
.docia-empty {
  padding: 28px;
  text-align: center;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 12px;
  font-size: 0.9rem;
}
.docia-empty--customs {
  font-style: italic;
}

/* ---- Generation view ---- */
.docia-gen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 24px;
}

.docia-gen__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.docia-back {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.docia-back:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.docia-gen__title h2 {
  margin: 0 0 2px;
  font-size: 1.25rem;
  color: var(--text);
}
.docia-gen__title p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.docia-gen__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.docia-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.docia-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

.docia-filelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.docia-filelist li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.docia-filelist__name {
  color: var(--text);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docia-filelist__size {
  color: var(--muted);
  font-size: 0.78rem;
}
.docia-filelist__remove {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 6px;
}
.docia-filelist__remove:hover { color: #ef4444; }
.docia-filelist__remove:disabled { opacity: 0.4; cursor: not-allowed; }

.docia-gen__actions {
  display: flex;
  justify-content: flex-end;
}

.docia-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  border-radius: 12px;
}
.docia-result__info {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.docia-result__info strong {
  color: var(--text);
  font-size: 0.95rem;
}
.docia-result__info span {
  color: var(--muted);
  font-size: 0.8rem;
}

/* ---- Inputs ---- */
.docia-input,
.docia-textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}
.docia-input:focus,
.docia-textarea:focus {
  outline: none;
  border-color: rgba(var(--primary-rgb), 0.6);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.18);
}
.docia-input:disabled,
.docia-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.docia-textarea {
  resize: vertical;
  line-height: 1.5;
  font-family: inherit;
  min-height: 80px;
}

.docia-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.docia-field label {
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
}
.docia-field small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  margin-left: 4px;
}

/* ---- Bouton micro integre dans le textarea ---- */
.docia-mic-wrap {
  position: relative;
}
.docia-mic-wrap .docia-textarea {
  padding-right: 48px;
}
.docia-mic-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
}
.docia-mic-btn:hover {
  color: var(--text);
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.08);
}
.docia-mic-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.docia-mic-btn.is-on {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}
.docia-mic-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(239, 68, 68, 0.6);
  animation: docia-mic-pulse 1.2s ease-out infinite;
  pointer-events: none;
}
@keyframes docia-mic-pulse {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.5); opacity: 0; }
}

.docia-link {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
  padding: 4px 0;
  transition: color 0.15s;
}
.docia-link:hover { color: var(--text); }
.docia-link--danger:hover { color: #ef4444; }
.docia-link:disabled { opacity: 0.5; cursor: not-allowed; }

.docia-example-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---- Documents d'exemple (modal config) ---- */
.docia-field--subtle > label {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.82rem;
}
.docia-field--subtle > label small {
  color: var(--muted);
  font-weight: 400;
  opacity: 0.75;
}

.docia-examplelist {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.docia-examplelist__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
}
.docia-examplelist__name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docia-examplelist__meta {
  color: var(--muted);
  font-size: 0.75rem;
}
.docia-examplelist__remove {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 6px;
  line-height: 1;
}
.docia-examplelist__remove:hover { color: #ef4444; }
.docia-examplelist__remove:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Modal ---- */
/* PAS de backdrop-filter : disableHardwareAcceleration() est ON dans l'app
   (cf src/main/main.js) → le blur compositor en logiciel rame violemment,
   surtout sur la modal de config avec un gros textarea derrière. */
.docia-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: var(--z-modal, 1000);
}

.docia-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.docia-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.docia-modal__header h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}
.docia-modal__close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.docia-modal__close:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.docia-modal__body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.docia-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.docia-modal--wide {
  max-width: 760px;
}

/* ---------------------------------------------------------------------------
   Header actions (galerie)
   --------------------------------------------------------------------------- */
.docia-hub__headactions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   RefineView — chat IA + aperçu document
   --------------------------------------------------------------------------- */
.docia-refine {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.docia-refine__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.docia-refine__titlewrap h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text);
}
.docia-refine__titlewrap small {
  color: var(--muted);
  font-size: 0.85rem;
}
.docia-refine__body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  padding: 16px 24px;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 1100px) {
  .docia-refine__body {
    grid-template-columns: 1fr 360px;
  }
}
@media (max-width: 900px) {
  .docia-refine__body {
    grid-template-columns: 1fr;
  }
}

/* Colonne preview document (LibreOffice -> PDF rendu via ChatFileInlinePreview).
   On laisse le composant prendre toute la hauteur dispo + scroll interne. */
.docia-refine__doc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.docia-refine__doc > .chatia-inline {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.docia-refine__docmeta-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Wrapper autour de <ChatIA module="documents-refine" variant="embedded" />.
   ChatIA porte deja sa propre bordure/fond (via .chatia--embedded) — on se
   contente de lui donner toute la hauteur dispo pour eviter un grand vide. */
.docia-refine__chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.docia-refine__chat > .chatia {
  flex: 1 1 auto;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
   HistoryPanel
   --------------------------------------------------------------------------- */
.docia-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.docia-history__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.docia-history__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.docia-history__title {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.docia-history__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.82rem;
  align-items: center;
}
.docia-history__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.docia-badge--danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.35);
}


/* ── MobileDrawer — hamburger, overlay portal, sidebar drawer ─────────────
   Architecture :
   - Desktop >= 1024px : sidebar = enfant normal du grid CSS (pas de fixed)
   - Mobile  < 1024px : hamburger + sidebar + overlay = tous portes sur document.body
                        -> aucune interference possible des parents (.app-shell etc.)
   Z-index : overlay=modal-backdrop, sidebar=modal, hamburger=popover
   ─────────────────────────────────────────────────────────────────────── */

/* ── Hamburger : toujours position:fixed, cache sur desktop ─────────────── */
.md-hamburger {
  display: none;
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-popover);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1.5px solid var(--primary);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.md-hamburger:hover {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.18);
  border-color: var(--primary);
}

/* ── Overlay — rendu via portal sur document.body ──────────────────────── */
.md-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-modal-backdrop);
  transition: opacity var(--transition-base);
}
.md-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Mobile / Tablette (< 1024px) ───────────────────────────────────────── */
@media (max-width: 1023px) {
  .md-hamburger {
    display: flex;
  }

  .md-sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    z-index: var(--z-modal) !important;
    border-right: 2px solid rgba(var(--primary-rgb, 74, 208, 179), 0.18) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    isolation: auto !important;
    min-height: unset !important;
    max-width: none !important;
  }

  .md-sidebar.is-open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 48px rgba(0, 0, 0, 0.65), 2px 0 0 rgba(var(--primary-rgb, 74, 208, 179), 0.15) !important;
  }

}


/* ═══════════════════════════════════════════════════════════════════════════
   AppSidebar — Clean, spacious navigation
   Inspired by Linear / Raycast — generous spacing, clear hierarchy
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hard reset ───────────────────────────────────────────────────────── */
.app-sidebar-shell,
.app-sidebar-shell *,
.app-sidebar-shell *::before,
.app-sidebar-shell *::after {
  box-sizing: border-box;
}

.app-sidebar-shell button {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  margin: 0;
  padding: 0;
  outline: none;
  border: none;
  background: none;
  background-color: transparent;
  color: var(--text);
  box-shadow: none;
  min-height: 0;
  cursor: pointer;
  text-decoration: none;
}

/* ── Container ────────────────────────────────────────────────────────── */
.app-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1;
}

.app-sidebar::-webkit-scrollbar {
  width: 6px;
}
.app-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar::-webkit-scrollbar-thumb {
  background: rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-full);
}
.app-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--text-rgb), 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════
   BRAND HEADER
   ═══════════════════════════════════════════════════════════════════════ */
.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-4);
  cursor: default;
  flex-shrink: 0;
}

.app-sidebar__brand-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    rgba(var(--primary-rgb), 0.22),
    rgba(var(--primary-rgb), 0.06)
  );
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.app-sidebar__brand-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  object-fit: contain;
}

.app-sidebar__brand-letter {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--primary);
}

.app-sidebar__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-sidebar__brand-name {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
  line-height: var(--leading-tight);
}

.app-sidebar__brand-tagline {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ── Separator ────────────────────────────────────────────────────────── */
.app-sidebar__separator {
  height: 1px;
  margin: 0 var(--space-5) var(--space-3);
  background: var(--border);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════════════ */
.app-sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-3);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.app-sidebar__nav::-webkit-scrollbar {
  width: 4px;
}
.app-sidebar__nav::-webkit-scrollbar-track {
  background: transparent;
}
.app-sidebar__nav::-webkit-scrollbar-thumb {
  background: rgba(var(--text-rgb), 0.08);
  border-radius: var(--radius-full);
}
.app-sidebar__nav::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--text-rgb), 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════
   PACK SECTIONS — Grouped by subscription pack
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-pack-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sidebar-pack-section.has-pack {
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(var(--pack-accent-rgb, var(--primary-rgb)), 0.05);
  border: 1px solid rgba(var(--pack-accent-rgb, var(--primary-rgb)), 0.12);
  position: relative;
}

/* Left accent bar */
.sidebar-pack-section.has-pack::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--pack-accent, var(--primary));
  opacity: 0.35;
}

.sidebar-pack-section__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--pack-accent, var(--muted));
  padding: var(--space-1) var(--space-2) var(--space-2);
  opacity: 0.6;
}

.sidebar-pack-section__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--pack-accent, var(--muted));
  flex-shrink: 0;
}

.sidebar-pack-section__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ── Nav divider ──────────────────────────────────────────────────────── */
.app-sidebar__nav-divider {
  height: 1px;
  margin: var(--space-3) var(--space-3);
  background: rgba(var(--text-rgb), 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   GROUP — Parent navigation items
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-group {
  display: flex;
  flex-direction: column;
}

/* ── Group header ─────────────────────────────────────────────────────── */
.sidebar-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.2px;
  text-align: left;
  white-space: nowrap;
  color: var(--text-2);
  transition: all var(--transition-fast);
  line-height: 1;
  position: relative;
}

.sidebar-group__header:hover {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
}

.sidebar-group__header.is-active {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

/* Left accent bar for active state */
.sidebar-group__header::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: var(--primary);
  transform: translateY(-50%) scaleY(0);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}

.sidebar-group__header.is-active::after {
  transform: translateY(-50%) scaleY(1);
  opacity: 1;
}

.sidebar-group__header.is-soon {
  cursor: default;
  opacity: 0.4;
}

/* ── Icon pill ────────────────────────────────────────────────────────── */
.sidebar-group__icon-pill {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--text-2);
  transition: all var(--transition-fast);
}

.sidebar-group__icon-pill svg {
  width: 18px;
  height: 18px;
  display: block;
}

.sidebar-group__header:hover .sidebar-group__icon-pill {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

.sidebar-group__icon-pill.is-active {
  background: rgba(var(--primary-rgb), 0.18);
  color: var(--primary);
  box-shadow: var(--shadow-glow);
}

/* ── Label ────────────────────────────────────────────────────────────── */
.sidebar-group__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── "Gratuit" badge ─────────────────────────────────────────────────── */
.sidebar-group__free {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: rgb(167, 139, 250);
  line-height: 1;
}

/* ── Locked state ────────────────────────────────────────────────────── */
.sidebar-group.is-locked {
  opacity: 0.5;
}
.sidebar-group__header.is-locked:hover {
  opacity: 0.75;
}
.sidebar-group__icon-pill.is-locked {
  filter: grayscale(0.6);
}
.sidebar-group__lock {
  margin-left: auto;
  display: flex;
  align-items: center;
  color: var(--muted);
}

/* ── Chevron ──────────────────────────────────────────────────────────── */
.sidebar-group__chevron {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              background var(--transition-fast),
              opacity var(--transition-fast);
  transform: rotate(-90deg);
  opacity: 0.45;
}

.sidebar-group__header:hover .sidebar-group__chevron {
  opacity: 0.7;
  background: rgba(var(--primary-rgb), 0.06);
}

.sidebar-group__chevron.is-open {
  transform: rotate(0deg);
  opacity: 0.8;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════════════════
   CHILDREN SUB-MENU — Smooth open/close with grid animation
   ═══════════════════════════════════════════════════════════════════════ */
.sidebar-group__children {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin-left: 44px;
  position: relative;
}

.sidebar-group__children.is-open {
  grid-template-rows: 1fr;
}

/* Inner wrapper — required for grid-template-rows animation */
.sidebar-group__children-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-height: 0;
  padding: 0;
  transition: opacity 0.25s ease,
              padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.sidebar-group__children.is-open > .sidebar-group__children-inner {
  opacity: 1;
  padding: var(--space-2) 0;
}

/* Subtle left accent line — animates in from top */
.sidebar-group__children::before {
  content: "";
  position: absolute;
  left: -14px;
  top: var(--space-2);
  bottom: var(--space-2);
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--primary),
    rgba(var(--primary-rgb), 0.08)
  );
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.08s,
              opacity 0.3s ease 0.08s;
}

.sidebar-group__children.is-open::before {
  transform: scaleY(1);
  opacity: 0.45;
}

/* ── Child row — staggered entrance ──────────────────────────────────── */
.sidebar-child__row {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
  transform: translateX(0);
}

.sidebar-group__children:not(.is-open) .sidebar-child__row {
  transform: translateX(-6px);
  opacity: 0;
}

/* Stagger delay for each child */
.sidebar-group__children.is-open .sidebar-child__row:nth-child(1) { transition-delay: 0.04s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(2) { transition-delay: 0.07s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(3) { transition-delay: 0.10s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(4) { transition-delay: 0.13s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(5) { transition-delay: 0.16s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(6) { transition-delay: 0.19s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(7) { transition-delay: 0.22s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(8) { transition-delay: 0.25s; }
.sidebar-group__children.is-open .sidebar-child__row:nth-child(9) { transition-delay: 0.28s; }

.sidebar-child__row:hover .sidebar-child__remove {
  opacity: 0.5;
}

/* ── Single child button ──────────────────────────────────────────────── */
.sidebar-child {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  color: var(--text-2);
  transition: all var(--transition-fast);
  line-height: var(--leading-tight);
}

.sidebar-child__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Dot bullet */
.sidebar-child__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--muted);
  background: transparent;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.sidebar-child:hover {
  background: rgba(var(--text-rgb), 0.04);
  color: var(--text);
}

.sidebar-child:hover .sidebar-child__dot {
  border-color: var(--text);
}

.sidebar-child.is-active {
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-weight: 600;
}

.sidebar-child.is-active .sidebar-child__dot {
  width: 7px;
  height: 7px;
  border: none;
  background: var(--primary);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.45);
  animation: sidebar-dot-pulse 2s ease-in-out infinite;
}

@keyframes sidebar-dot-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.45); }
  50%      { box-shadow: 0 0 14px rgba(var(--primary-rgb), 0.7); }
}

/* ── Settings gear icon for params children ──────────────────────────── */
.sidebar-child__settings-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.sidebar-child:hover .sidebar-child__settings-icon {
  opacity: 0.75;
}

.sidebar-child.is-active .sidebar-child__settings-icon {
  opacity: 1;
  color: var(--primary);
  filter: drop-shadow(0 0 4px rgba(var(--primary-rgb), 0.4));
}

.sidebar-flyout__item .sidebar-child__settings-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.5;
}

.sidebar-flyout__item:hover .sidebar-child__settings-icon,
.sidebar-flyout__item.is-active .sidebar-child__settings-icon {
  opacity: 1;
  color: var(--primary);
}

/* ── Add category button — aligned with siblings ─────────────────────── */
.sidebar-child--add {
  color: var(--muted);
  font-size: var(--text-sm);
  gap: var(--space-3);
  height: 34px;
  margin: 0;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  justify-content: flex-start;
  opacity: 0.5;
  flex: unset;
}

.sidebar-child--add:hover {
  opacity: 1;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
}

/* ── Remove button ────────────────────────────────────────────────────── */
.sidebar-child__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-right: var(--space-1);
  opacity: 0;
  color: var(--muted);
  transition: all var(--transition-fast);
}

.sidebar-child__remove:hover {
  opacity: 1 !important;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ── Inline add form ──────────────────────────────────────────────────── */
.sidebar-add-form {
  padding: var(--space-3) 0 var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-add-form__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.04);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.sidebar-add-form__input:focus {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.sidebar-add-form__input::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.sidebar-add-form__actions {
  display: flex;
  gap: var(--space-2);
}

.sidebar-add-form__btn {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.sidebar-add-form__btn--ok {
  background: var(--primary);
  color: var(--btn-gradient-text);
}

.sidebar-add-form__btn--ok:hover {
  filter: brightness(1.1);
}

.sidebar-add-form__btn--cancel {
  color: var(--muted);
}

.sidebar-add-form__btn--cancel:hover {
  color: var(--text);
  background: rgba(var(--text-rgb), 0.06);
}

/* ── Lock icon ────────────────────────────────────────────────────────── */
.sidebar-group__lock {
  margin-left: auto;
  opacity: 0.3;
  font-size: var(--text-xs);
}

/* ═══════════════════════════════════════════════════════════════════════
   SUMMARY CARD
   ═══════════════════════════════════════════════════════════════════════ */
.app-sidebar__summary {
  margin: var(--space-3) var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(var(--primary-rgb), 0.04);
  border: 1px solid rgba(var(--primary-rgb), 0.08);
  flex-shrink: 0;
}

.app-sidebar__summary-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.app-sidebar__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  padding: var(--space-1) 0;
  color: var(--text-2);
}

.app-sidebar__summary-count {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  background: rgba(var(--primary-rgb), 0.08);
  padding: 3px var(--space-3);
  border-radius: var(--radius-sm);
  min-width: 30px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   USER FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
.app-sidebar__footer {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid rgba(var(--text-rgb), 0.08);
  flex-shrink: 0;
}

.app-sidebar__user-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.app-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: all var(--transition-fast);
}

.app-sidebar__user:hover {
  background: rgba(var(--primary-rgb), 0.06);
}

.app-sidebar__avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: linear-gradient(
    135deg,
    var(--primary),
    rgba(var(--primary-rgb), 0.5)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btn-gradient-text);
  font-size: var(--text-base);
  font-weight: 700;
  flex-shrink: 0;
}

.app-sidebar__user-info {
  flex: 1;
  min-width: 0;
}

.app-sidebar__user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: var(--leading-tight);
}

.app-sidebar__user-plan {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  line-height: 1;
  margin-top: 3px;
}

.app-sidebar__plan-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--muted);
  flex-shrink: 0;
}

.app-sidebar__plan-dot.is-pro {
  background: var(--primary);
  box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODULES LIST — Flat ordered list (user-customizable)
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-modules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ── System section (always visible, e.g. Compte) ─────────────────────── */
.sidebar-system-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(var(--text-rgb), 0.06);
}

/* ── Flyout indicator (right chevron) ─────────────────────────────────── */
.sidebar-group__flyout-indicator {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.sidebar-group__header:hover .sidebar-group__flyout-indicator {
  opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOGUE BUTTON — Navigate to sidebar customization page
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-catalogue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  margin: var(--space-2) auto var(--space-3);
  padding: var(--space-1) var(--space-4);
  height: 30px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--muted);
  transition: all 0.2s ease;
  border: 1px solid transparent;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  opacity: 0.6;
}

.sidebar-catalogue-btn svg {
  opacity: 0.45;
  transition: all 0.2s ease;
  width: 14px;
  height: 14px;
}

.sidebar-catalogue-btn:hover {
  opacity: 1;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  border-color: rgba(var(--primary-rgb), 0.12);
}
.sidebar-catalogue-btn:hover svg {
  opacity: 0.9;
}

.sidebar-catalogue-btn.is-active {
  opacity: 1;
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
  border-color: rgba(var(--primary-rgb), 0.18);
}
.sidebar-catalogue-btn.is-active svg {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLYOUT PANEL — Fixed-positioned submenu that appears on hover
   ═══════════════════════════════════════════════════════════════════════════ */
.sidebar-flyout {
  position: fixed;
  z-index: var(--z-sidebar-flyout);
  min-width: 220px;
  max-width: 280px;
  background: var(--panel);
  border: 1px solid rgba(var(--text-rgb), 0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35),
              0 4px 12px rgba(0, 0, 0, 0.2);
  padding: var(--space-2);
  animation: flyout-enter 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: left center;
}

@keyframes flyout-enter {
  from {
    opacity: 0;
    transform: translateX(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.sidebar-flyout__title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  padding: var(--space-2) var(--space-3) var(--space-2);
  opacity: 0.6;
}

.sidebar-flyout__items {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-flyout__row {
  display: flex;
  align-items: center;
}

.sidebar-flyout__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  transition: all var(--transition-fast);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-flyout__item:hover {
  background: rgba(var(--text-rgb), 0.06);
  color: var(--text);
}

.sidebar-flyout__item.is-active {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-weight: 600;
}

.sidebar-flyout__item--add {
  color: var(--muted);
  opacity: 0.6;
  margin-top: var(--space-1);
  border-top: 1px solid rgba(var(--text-rgb), 0.06);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.sidebar-flyout__item--add:hover {
  opacity: 1;
  color: var(--primary);
}

.sidebar-flyout__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--muted);
  background: transparent;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.sidebar-flyout__item:hover .sidebar-flyout__dot {
  border-color: var(--text);
}

.sidebar-flyout__item.is-active .sidebar-flyout__dot {
  border: none;
  background: var(--primary);
  box-shadow: 0 0 6px rgba(var(--primary-rgb), 0.4);
}

.sidebar-flyout__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  opacity: 0;
  color: var(--muted);
  transition: all var(--transition-fast);
}

.sidebar-flyout__row:hover .sidebar-flyout__remove {
  opacity: 0.5;
}

.sidebar-flyout__remove:hover {
  opacity: 1 !important;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.sidebar-flyout__add-form {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar-flyout__add-form input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  background: rgba(var(--primary-rgb), 0.04);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
}

.sidebar-flyout__add-form input:focus {
  border-color: var(--primary);
}

.sidebar-flyout__add-actions {
  display: flex;
  gap: var(--space-2);
}

.sidebar-flyout__add-actions button {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  transition: all var(--transition-fast);
}

.sidebar-flyout__add-actions button:first-child {
  background: var(--primary);
  color: var(--btn-gradient-text);
}

.sidebar-flyout__add-actions button:last-child {
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR CATALOG PAGE — Premium settings UI
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Catalog page — full-width, scrollable layout ────────────────────── */
.sidebar-catalog {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

.sidebar-catalog__inner {
  width: 100%;
  max-width: none;
  padding: 0 var(--space-6);
}

.sidebar-catalog__topbar {
  width: 100%;
  max-width: none;
  padding: var(--space-5) var(--space-6) 0;
}

.sidebar-catalog__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
}

.sidebar-catalog__back:hover {
  color: var(--text);
  background: rgba(var(--text-rgb), 0.06);
}

/* ── Hero banner (with aurora) ────────────────────────────────────────── */
.sidebar-catalog__hero {
  width: 100%;
  max-width: none;
  padding: var(--space-9) var(--space-6);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin: 0 var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-catalog__hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* ── Aurora background ──────────────────────────────────────────────── */
.sidebar-catalog__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.sidebar-catalog__aurora-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.08;
}

.sidebar-catalog__aurora-orb--1 {
  width: 350px;
  height: 350px;
  background: var(--primary);
  top: -100px;
  left: -50px;
}

.sidebar-catalog__aurora-orb--2 {
  width: 280px;
  height: 280px;
  background: #7c3aed;
  top: -50px;
  right: 10%;
}

.sidebar-catalog__aurora-orb--3 {
  width: 200px;
  height: 200px;
  background: #3b82f6;
  bottom: -80px;
  left: 40%;
}

/* ── Animated stats ─────────────────────────────────────────────────── */
.sidebar-catalog__stat {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-catalog__stat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar-catalog__stat strong {
  display: inline-block;
  transition: transform 0.15s ease;
}

.sidebar-catalog__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--primary);
  margin-bottom: var(--space-3);
  opacity: 0.8;
}

.sidebar-catalog h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text);
  margin: 0 0 var(--space-3);
  letter-spacing: -0.7px;
  line-height: var(--leading-tight);
}

.sidebar-catalog__hero p {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: var(--leading-relaxed);
  margin: 0 auto;
  max-width: 520px;
}

/* ── Stats badges ────────────────────────────────────────────────────── */
.sidebar-catalog__stats {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.sidebar-catalog__stats span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: rgba(var(--text-rgb), 0.05);
  border: 1px solid rgba(var(--text-rgb), 0.08);
  color: var(--text-2);
}

.sidebar-catalog__stats strong {
  font-size: var(--text-base);
  color: var(--primary);
  font-weight: 800;
}

/* ── Settings option cards (dual sidebar, flyout) ────────────────────── */
.sidebar-catalog__options {
  width: 100%;
  max-width: none;
  padding: 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.sidebar-catalog__option-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(var(--text-rgb), 0.025);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  transition: all 0.2s ease;
}

.sidebar-catalog__option-card:hover {
  background: rgba(var(--text-rgb), 0.04);
  border-color: rgba(var(--primary-rgb), 0.15);
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.06);
}

.sidebar-catalog__option-info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.sidebar-catalog__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
}

.sidebar-catalog__option-text {
  min-width: 0;
}

.sidebar-catalog__option-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.sidebar-catalog__option-desc {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.4;
}

/* ── Module list ─────────────────────────────────────────────────────── */
.sidebar-catalog__list {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: 0 var(--space-6) var(--space-6);
  flex: 1;
}

/* ── Module item row ─────────────────────────────────────────────────── */
.sidebar-catalog__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  min-height: 52px;
  cursor: grab;
  user-select: none;
}

.sidebar-catalog__item:hover {
  background: rgba(var(--text-rgb), 0.04);
  border-color: rgba(var(--text-rgb), 0.06);
}

.sidebar-catalog__item:active {
  cursor: grabbing;
}

.sidebar-catalog__item.is-dragging {
  opacity: 0.3;
  transform: scale(0.98);
}

.sidebar-catalog__item.is-drag-over {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.06);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.sidebar-catalog__item.is-hidden {
  opacity: 0.5;
}

.sidebar-catalog__item.is-hidden .sidebar-catalog__item-name {
  text-decoration: line-through;
  text-decoration-color: rgba(var(--text-rgb), 0.2);
}

.sidebar-catalog__item.is-hidden:hover {
  opacity: 0.65;
}

/* ── Drag handle ─────────────────────────────────────────────────────── */
.sidebar-catalog__drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  color: var(--muted);
  opacity: 0.25;
  transition: opacity 0.15s ease;
}

.sidebar-catalog__item:hover .sidebar-catalog__drag-handle {
  opacity: 0.6;
}

/* ── Item info ───────────────────────────────────────────────────────── */
.sidebar-catalog__item-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.sidebar-catalog__item-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  transition: opacity 0.2s;
}

.sidebar-catalog__item-sub {
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0.7;
}

.sidebar-catalog__item-pack {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

.sidebar-catalog__item-free {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: rgb(167, 139, 250);
}

.sidebar-catalog__item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Toggle switch ───────────────────────────────────────────────────── */
.sidebar-catalog__toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.sidebar-catalog__toggle-track {
  display: block;
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: rgba(var(--text-rgb), 0.1);
  position: relative;
  transition: background 0.25s ease;
}

.sidebar-catalog__toggle.is-on .sidebar-catalog__toggle-track {
  background: var(--primary);
  box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.25);
}

.sidebar-catalog__toggle-thumb {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.sidebar-catalog__toggle.is-on .sidebar-catalog__toggle-thumb {
  transform: translateX(18px);
}

/* ── Pack sections ───────────────────────────────────────────────────── */
.sidebar-catalog__pack {
  border-radius: var(--radius-lg);
  background: rgba(var(--text-rgb), 0.02);
  border: 1px solid rgba(var(--text-rgb), 0.06);
  padding: var(--space-5) var(--space-4) var(--space-4);
  position: relative;
  transition: all 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.sidebar-catalog__pack:hover {
  background: rgba(var(--text-rgb), 0.035);
  border-color: rgba(var(--text-rgb), 0.1);
  box-shadow: 0 0 20px color-mix(in srgb, var(--pack-color, var(--primary)) 8%, transparent),
              0 4px 16px rgba(0, 0, 0, 0.1);
}

.sidebar-catalog__pack::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--pack-color, var(--primary));
  opacity: 0.6;
  transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.sidebar-catalog__pack:hover::before {
  opacity: 1;
  box-shadow: 0 0 12px var(--pack-color, var(--primary));
}

.sidebar-catalog__pack.is-pack-dragging {
  opacity: 0.3;
  transform: scale(0.98);
}

.sidebar-catalog__pack.is-pack-drag-over {
  border-color: var(--pack-color, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pack-color, var(--primary)) 20%, transparent);
}

/* ── Pack header ─────────────────────────────────────────────────────── */
.sidebar-catalog__pack-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2) var(--space-4);
  cursor: grab;
  user-select: none;
}

.sidebar-catalog__pack-header:active {
  cursor: grabbing;
}

.sidebar-catalog__pack-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  color: var(--pack-color, var(--muted));
  opacity: 0.25;
  transition: opacity 0.15s ease;
}

.sidebar-catalog__pack-header:hover .sidebar-catalog__pack-drag-handle {
  opacity: 0.6;
}

.sidebar-catalog__pack-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.sidebar-catalog__pack-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--pack-color, var(--muted));
}

.sidebar-catalog__pack-count {
  font-size: var(--text-xs);
  color: var(--muted);
  opacity: 0.5;
  margin-left: auto;
  font-weight: 500;
}

/* ── Pack items container ────────────────────────────────────────────── */
.sidebar-catalog__pack-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid rgba(var(--text-rgb), 0.04);
  padding-top: var(--space-2);
}

/* ── Footer note ─────────────────────────────────────────────────────── */
.sidebar-catalog__note {
  width: 100%;
  max-width: none;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-8);
}

.sidebar-catalog__note-inner {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(var(--text-rgb), 0.025);
  border: 1px solid rgba(var(--text-rgb), 0.04);
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}



/* ═══════════════════════════════════════════════════════════════════════════
   PackCards — Ultra-stylé pricing cards
   Glassmorphism · Glow · Hover lift · Shimmer badge
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grid ────────────────────────────────────────────────────────────────── */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  padding: var(--space-2) 0;
  width: 100%;
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.pk-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
  transition:
    transform var(--transition-slow),
    box-shadow var(--transition-slow),
    border-color var(--transition-slow);
}

.pk-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--c, var(--primary));
  opacity: 0.7;
  transition: opacity var(--transition-base), height var(--transition-base);
}

.pk-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 8px 30px rgba(var(--c-rgb), 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08);
  border-color: rgba(var(--c-rgb), 0.3);
}

.pk-card:hover::before {
  height: 4px;
  opacity: 1;
}

/* ── Popular card — extra glow + border ──────────────────────────────────── */
.pk-card--popular {
  border-color: rgba(var(--c-rgb), 0.35);
  box-shadow:
    0 0 0 1px rgba(var(--c-rgb), 0.08),
    0 4px 20px rgba(var(--c-rgb), 0.08);
}

.pk-card--popular::before {
  height: 4px;
  opacity: 1;
  background: linear-gradient(90deg, var(--c), rgba(var(--c-rgb), 0.6));
}

.pk-card--popular:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 40px rgba(var(--c-rgb), 0.18),
    0 0 0 1px rgba(var(--c-rgb), 0.15),
    0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Background glow blob for popular */
.pk-card__glow {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 160px;
  background: radial-gradient(
    ellipse at center,
    rgba(var(--c-rgb), 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Custom card — dashed border ──────────────────────────────────────────── */
.pk-card--custom {
  border-style: dashed;
  border-color: rgba(var(--c-rgb), 0.25);
}

.pk-card--custom::before {
  background: linear-gradient(90deg,
    rgba(var(--c-rgb), 0.6),
    rgba(var(--c-rgb), 0.2),
    rgba(var(--c-rgb), 0.6)
  );
  background-size: 200% 100%;
}

/* ── Active card ─────────────────────────────────────────────────────────── */
.pk-card--active {
  border-color: rgba(var(--c-rgb), 0.4);
  box-shadow:
    0 0 0 2px rgba(var(--c-rgb), 0.06),
    0 0 18px rgba(var(--c-rgb), 0.06);
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.pk-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 1;
  /* Shimmer gradient */
  background: linear-gradient(
    120deg,
    var(--c) 0%,
    rgba(var(--c-rgb), 0.7) 40%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(var(--c-rgb), 0.7) 60%,
    var(--c) 100%
  );
  background-size: 200% 100%;
  animation: pk-shimmer 2.5s ease-in-out infinite;
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--c-rgb), 0.25);
}

.pk-badge--active {
  background: rgba(var(--c-rgb), 0.12);
  color: var(--c);
  border: 1px solid rgba(var(--c-rgb), 0.25);
  box-shadow: none;
  animation: none;
}

.pk-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}

/* ── Tier name ───────────────────────────────────────────────────────────── */
.pk-tier {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-3);
  position: relative;
  z-index: 1;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.pk-header {
  position: relative;
  z-index: 1;
}

/* ── Price ────────────────────────────────────────────────────────────────── */
.pk-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-bottom: var(--space-2);
}

.pk-price__amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  letter-spacing: -2px;
}

.pk-price__currency {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c, var(--muted));
  margin-left: 2px;
}

.pk-price__period {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-left: 2px;
}

.pk-price__label {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c);
  letter-spacing: -1px;
}

/* ── Best for ────────────────────────────────────────────────────────────── */
.pk-bestfor {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0 0 var(--space-1);
  line-height: var(--leading-normal);
}

/* ── Divider ─────────────────────────────────────────────────────────────── */
.pk-divider {
  height: 1px;
  margin: var(--space-5) 0;
  background: var(--border);
  position: relative;
  z-index: 1;
}

.pk-card--popular .pk-divider {
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--c-rgb), 0.2),
    transparent
  );
}

/* ── Features ────────────────────────────────────────────────────────────── */
.pk-features {
  list-style: none;
  margin: 0 0 auto;
  padding: 0 0 var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
  z-index: 1;
}

.pk-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text);
  line-height: var(--leading-normal);
}

.pk-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: rgba(var(--c-rgb), 0.1);
  color: var(--c);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── CTA Buttons ─────────────────────────────────────────────────────────── */
.pk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 650;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  z-index: 1;
  transition:
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-fast),
    border-color var(--transition-base);
  margin-top: auto;
}

.pk-btn--fill {
  background: var(--c);
  color: #fff;
  box-shadow:
    0 2px 12px rgba(var(--c-rgb), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.pk-btn--fill:hover:not(:disabled) {
  box-shadow:
    0 6px 24px rgba(var(--c-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.pk-btn--outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.pk-btn--outline:hover:not(:disabled) {
  border-color: rgba(var(--c-rgb), 0.4);
  color: var(--c);
  background: rgba(var(--c-rgb), 0.05);
}

.pk-btn--active {
  background: rgba(var(--c-rgb), 0.08);
  color: var(--c);
  border: 1px solid rgba(var(--c-rgb), 0.15);
  cursor: default;
}

.pk-btn__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}

.pk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes pk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Trial info ─────────────────────────────────────────────────────────── */
.pk-trial-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.pk-trial-info__trial {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c, var(--primary));
}

.pk-trial-info__cancel {
  font-size: 0.7rem;
  color: var(--muted);
}

/* ── Comparison table ───────────────────────────────────────────────────── */
.pk-comparison {
  margin-top: var(--space-8, 2rem);
  padding: var(--space-6) 0;
  width: 100%;
}

.pk-comparison__title {
  font-size: var(--text-xl, 1.25rem);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin: 0 0 var(--space-2);
}

.pk-comparison__subtitle {
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  margin: 0 0 var(--space-6);
}

.pk-comparison__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid var(--border);
}

.pk-comparison__table th,
.pk-comparison__table td {
  padding: var(--space-3) var(--space-5);
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.pk-comparison__table th:first-child,
.pk-comparison__table td:first-child {
  text-align: left;
  font-weight: 500;
}

.pk-comparison__table thead th {
  font-weight: 700;
  color: var(--text);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--border);
  padding: var(--space-4) var(--space-5);
  background: rgba(var(--primary-rgb, 100, 100, 100), 0.04);
}

.pk-comparison__table tbody tr {
  transition: background var(--transition-fast);
}

.pk-comparison__table tbody tr:nth-child(2n) {
  background: rgba(var(--primary-rgb, 100, 100, 100), 0.02);
}

.pk-comparison__table tbody tr:hover {
  background: rgba(var(--primary-rgb, 100, 100, 100), 0.06);
}

.pk-comparison__table tbody tr:last-child td {
  border-bottom: none;
}

.pk-comparison__yes {
  color: #22c55e;
  font-weight: 600;
  font-size: 1.05rem;
}

.pk-comparison__no {
  color: var(--muted);
  opacity: 0.4;
  font-size: 1rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .pk-grid {
    flex-direction: column;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .pk-comparison__table {
    font-size: 0.75rem;
  }

  .pk-comparison__table th,
  .pk-comparison__table td {
    padding: var(--space-2) var(--space-2);
  }
}


/* Bandeau "Mes profils" en haut de la page Catalogue */

.catalog-profiles {
  margin: 0 0 24px 0;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.catalog-profiles__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.catalog-profiles__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
}

.catalog-profiles__title svg {
  color: var(--primary);
}

.catalog-profiles__hint {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 220px;
}

.catalog-profiles__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.catalog-profiles__pill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 4px 2px 2px;
  transition: border-color 0.18s, background 0.18s;
}

.catalog-profiles__pill-wrap.is-active {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

.catalog-profiles__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}

.catalog-profiles__pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.catalog-profiles__pill.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--bg);
  font-weight: 600;
}

.catalog-profiles__pill-wrap .catalog-profiles__pill {
  border: none;
  background: transparent;
  padding: 4px 10px;
}

.catalog-profiles__pill-wrap.is-active .catalog-profiles__pill {
  color: var(--primary);
  background: transparent;
  font-weight: 600;
}

.catalog-profiles__pill-wrap.is-active .catalog-profiles__pill:hover {
  color: var(--primary);
}

.catalog-profiles__pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.catalog-profiles__pill.is-active .catalog-profiles__pill-dot {
  opacity: 1;
}

.catalog-profiles__pill--add {
  border-style: dashed;
  color: var(--muted);
}

.catalog-profiles__pill--add:hover {
  color: var(--primary);
  border-color: var(--primary);
  border-style: solid;
}

.catalog-profiles__pill-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.catalog-profiles__pill-action:hover {
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
}

.catalog-profiles__pill-action--danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.catalog-profiles__rename-input {
  background: var(--bg);
  border: 1px solid var(--primary);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.82rem;
  min-width: 140px;
  outline: none;
}

.catalog-profiles__rename-input::placeholder {
  color: var(--muted);
}

/* ── Sélecteur compact dans la sidebar ─────────────────────────────── */
.sidebar-profile-switcher {
  position: relative;
  margin: 10px 12px 6px 12px;
}

.sidebar-profile-switcher__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px 8px 8px;
  background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.05) 0%, rgba(var(--primary-rgb), 0.02) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  text-align: left;
}

.sidebar-profile-switcher__trigger:hover {
  border-color: rgba(var(--primary-rgb), 0.55);
  background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.10) 0%, rgba(var(--primary-rgb), 0.04) 100%);
}

.sidebar-profile-switcher__trigger.is-open {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.sidebar-profile-switcher__avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, rgba(var(--primary-rgb), 0.65) 100%);
  color: #0b1218;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sidebar-profile-switcher__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}

.sidebar-profile-switcher__hint {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.sidebar-profile-switcher__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.sidebar-profile-switcher__caret {
  color: var(--muted);
  flex-shrink: 0;
  transition: transform 0.18s, color 0.18s;
}

.sidebar-profile-switcher__trigger:hover .sidebar-profile-switcher__caret {
  color: var(--primary);
}

.sidebar-profile-switcher__trigger.is-open .sidebar-profile-switcher__caret {
  transform: rotate(180deg);
  color: var(--primary);
}

.sidebar-profile-switcher__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  max-height: 260px;
  overflow-y: auto;
}

.sidebar-profile-switcher__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.sidebar-profile-switcher__item:hover {
  background: rgba(var(--primary-rgb), 0.08);
}

.sidebar-profile-switcher__item.is-active {
  color: var(--primary);
  font-weight: 600;
}

.sidebar-profile-switcher__item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}

.sidebar-profile-switcher__item.is-active .sidebar-profile-switcher__item-dot {
  background: var(--primary);
}

.sidebar-profile-switcher__divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.sidebar-profile-switcher__manage {
  color: var(--muted);
  font-size: 0.74rem;
}

.sidebar-profile-switcher__manage:hover {
  color: var(--primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   IndexationSection — Redesigned UI
   BEM naming: .idx-*
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────────────── */
.idx-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Section cards ────────────────────────────────────────────────────────── */
.idx-card {
  background: var(--panel);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.idx-card--drive { }
.idx-card--danger { }

/* ── Section headers ──────────────────────────────────────────────────────── */
.idx-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
}

.idx-header__left {
  flex: 1;
  min-width: 0;
}

.idx-header__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.idx-header__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.1);
  color: var(--primary);
  flex-shrink: 0;
}

.idx-header__title-icon--drive {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.idx-header__title-icon--stats {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.idx-header__title-icon--danger {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}

.idx-header__title-icon--image {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.idx-header__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}

.idx-header__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: var(--space-1);
}

.idx-header__badge--count {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.1);
  color: var(--primary);
}

.idx-header__badge--drive-count {
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

/* ── Category cards (PDF folders) ─────────────────────────────────────────── */
.idx-cat-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.idx-cat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.idx-cat:hover {
  background: var(--surface-3);
}

.idx-cat__label {
  width: 96px;
  font-size: var(--text-xs);
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idx-cat__label--server {
  color: #8b5cf6;
}

.idx-cat__path {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
}

.idx-cat__path:focus {
  outline: none;
  background: var(--panel);
}

.idx-cat__path--readonly {
  opacity: 0.65;
  cursor: default;
}

.idx-cat__count {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-xl);
  background: var(--surface-3);
  color: var(--muted);
  flex-shrink: 0;
  min-width: 28px;
  justify-content: center;
}

.idx-cat__count--active {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.12);
  color: var(--primary);
}

.idx-cat__btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.idx-cat__btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.1);
  color: var(--primary);
}

.idx-cat__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.idx-cat__btn--play {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb, 74, 208, 179), 0.25);
}

.idx-cat__btn--play:hover:not(:disabled) {
  filter: brightness(1.1);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(var(--primary-rgb, 74, 208, 179), 0.35);
}

/* ── Sync status row ──────────────────────────────────────────────────────── */
.idx-sync-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4) var(--space-1) 108px;
  font-size: 11px;
  color: var(--muted);
  flex-wrap: wrap;
}

.idx-sync-badges {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.idx-sync-badge {
  padding: 1px var(--space-2);
  border-radius: var(--radius-xl);
  font-size: 10px;
  font-weight: 600;
}

.idx-sync-badge--ok {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.idx-sync-badge--pending {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.idx-sync-bar {
  flex: 1;
  min-width: 48px;
  max-width: 100px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.idx-sync-bar__fill {
  height: 100%;
  background: var(--color-success);
  transition: width 0.3s;
  border-radius: 2px;
}

.idx-sync-btn {
  padding: 3px var(--space-3);
  font-size: 10px;
  font-weight: 600;
  border: 1px solid rgba(var(--primary-rgb, 74, 208, 179), 0.3);
  border-radius: var(--radius-sm);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.06);
  color: var(--primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.idx-sync-btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.14);
  border-color: var(--primary);
}

.idx-sync-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.idx-sync-progress {
  font-size: 10px;
  color: var(--muted);
  font-family: "SF Mono", "Fira Code", monospace;
}

/* ── Actions bar ──────────────────────────────────────────────────────────── */
.idx-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: 0;
}

.idx-actions__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  margin-right: auto;
}

.idx-actions__checkbox input {
  accent-color: var(--primary);
}

.idx-btn-primary {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: white;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: 0 2px 10px rgba(var(--primary-rgb, 74, 208, 179), 0.3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.idx-btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(var(--primary-rgb, 74, 208, 179), 0.45);
  transform: translateY(-1px);
}

.idx-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.idx-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.idx-btn-primary--drive {
  background: #8b5cf6;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

.idx-btn-primary--drive:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
}

.idx-btn-primary--sm {
  padding: var(--space-2) var(--space-4);
  font-size: 12px;
}

.idx-btn-secondary {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.idx-btn-secondary:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.06);
}

.idx-btn-secondary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Current file indicator ───────────────────────────────────────────────── */
.idx-current-file {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idx-current-file__icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Sync cloud section ───────────────────────────────────────────────────── */
.idx-sync-section {
  margin-top: var(--space-4);
  padding-top: 0;
}

.idx-sync-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.idx-sync-section__title {
  font-weight: 600;
  font-size: var(--text-sm);
}

.idx-sync-section__pending {
  font-size: var(--text-xs);
  color: var(--color-warning);
  font-weight: 600;
}

.idx-sync-section__btn {
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid rgba(var(--primary-rgb, 74, 208, 179), 0.3);
  border-radius: var(--radius-md);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.06);
  color: var(--primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
}

.idx-sync-section__btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.14);
  border-color: var(--primary);
}

.idx-sync-section__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.idx-sync-section__result {
  display: block;
  margin-top: var(--space-2);
  font-size: 11px;
  color: var(--muted);
}

/* ── Drive browser (modernized) ───────────────────────────────────────────── */
.idx-drive-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.idx-drive {
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-2);
}

.idx-drive__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  background: var(--panel);
  transition: background var(--transition-fast);
}

.idx-drive__header:hover {
  background: var(--surface-2);
}

.idx-drive__header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.idx-drive__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #8b5cf6;
}

.idx-drive__name {
  font-weight: 600;
  font-size: var(--text-sm);
}

.idx-drive__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-xl);
  background: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.idx-drive__hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.idx-drive__chevron {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  transition: transform var(--transition-base);
}

.idx-drive__chevron--open {
  transform: rotate(180deg);
}

/* Drive body / browser */
.idx-drive__body {
  background: var(--surface-2);
}

/* Breadcrumb */
.idx-breadcrumb {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  font-size: 11px;
  flex-wrap: wrap;
  background: transparent;
}

.idx-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
  color: #8b5cf6;
  font-weight: 500;
  transition: background var(--transition-fast);
}

.idx-breadcrumb__item:hover {
  background: rgba(139, 92, 246, 0.08);
}

.idx-breadcrumb__item--root {
  font-weight: 700;
}

.idx-breadcrumb__sep {
  color: var(--muted);
  margin: 0 2px;
  user-select: none;
}

/* Selected folders chips */
.idx-drive-selected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.idx-drive-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: var(--radius-xl);
  font-size: 11px;
  font-weight: 500;
  color: #8b5cf6;
  transition: all var(--transition-fast);
}

.idx-drive-chip:hover {
  background: rgba(139, 92, 246, 0.16);
}

.idx-drive-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: #8b5cf6;
  transition: all var(--transition-fast);
  font-size: 10px;
  line-height: 1;
}

.idx-drive-chip__remove:hover {
  background: rgba(139, 92, 246, 0.2);
  color: #7c3aed;
}

/* Folder/file list */
.idx-drive-items {
  padding: var(--space-2) var(--space-4) var(--space-3);
  max-height: 320px;
  overflow-y: auto;
}

.idx-drive-items::-webkit-scrollbar {
  width: 4px;
}

.idx-drive-items::-webkit-scrollbar-track {
  background: transparent;
}

.idx-drive-items::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.idx-drive-folder {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--text-sm);
}

.idx-drive-folder:hover {
  background: rgba(139, 92, 246, 0.06);
}

.idx-drive-folder--selected {
  background: rgba(139, 92, 246, 0.1);
}

.idx-drive-folder--selected:hover {
  background: rgba(139, 92, 246, 0.16);
}

.idx-drive-folder__check {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #8b5cf6;
  cursor: pointer;
  flex-shrink: 0;
}

.idx-drive-folder__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.idx-drive-folder__icon {
  color: #8b5cf6;
  flex-shrink: 0;
  display: inline-flex;
}

.idx-drive-folder__name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idx-drive-file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3) var(--space-1) 40px;
  font-size: 11px;
  color: var(--muted);
}

.idx-drive-file__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.idx-drive-file__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idx-drive-file__size {
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}

.idx-drive-empty {
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
}

.idx-drive-loading {
  padding: var(--space-5);
  text-align: center;
  color: var(--muted);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.idx-drive-loading__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: idx-spin 0.6s linear infinite;
}

@keyframes idx-spin {
  to { transform: rotate(360deg); }
}

.idx-drive-error {
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) var(--space-4);
  background: var(--color-danger-muted);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--color-danger);
}

/* Drive result */
.idx-drive-result {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(139, 92, 246, 0.06);
  border: 1px solid rgba(139, 92, 246, 0.12);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.idx-drive-result__title {
  font-weight: 600;
  color: #8b5cf6;
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.idx-drive-result__detail {
  margin-left: var(--space-5);
  color: var(--text);
  font-size: 12px;
}

/* Indexed files accordion */
.idx-drive-indexed {
  margin-top: var(--space-3);
}

.idx-drive-indexed summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--muted);
  padding: var(--space-2) 0;
  font-weight: 500;
}

.idx-drive-indexed__list {
  margin-top: var(--space-1);
  max-height: 200px;
  overflow-y: auto;
  font-size: 11px;
}

.idx-drive-indexed__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.idx-drive-indexed__label {
  font-size: 10px;
  color: #8b5cf6;
  font-weight: 600;
  width: 80px;
  flex-shrink: 0;
}

.idx-drive-indexed__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.idx-drive-indexed__pages {
  color: var(--muted);
  flex-shrink: 0;
}

/* ── Image section ────────────────────────────────────────────────────────── */
.idx-img-folders {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.idx-img-folder {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast);
}

.idx-img-folder:hover {
  background: var(--surface-3);
}

.idx-img-folder__label {
  font-size: var(--text-xs);
  color: #f59e0b;
  font-weight: 700;
  letter-spacing: 0.03em;
  width: 72px;
  flex-shrink: 0;
}

.idx-img-folder__path {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-family: "SF Mono", "Fira Code", monospace;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
}

.idx-img-add {
  padding: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  border: 2px dashed var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: 100%;
  text-align: center;
}

.idx-img-add:hover {
  border-color: #f59e0b;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.04);
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.idx-progress {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-2);
}

.idx-progress__bar {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s;
  border-radius: 2px;
}

.idx-progress__bar--indeterminate {
  position: relative;
  overflow: hidden;
  background: transparent;
  width: 100% !important;
}

.idx-progress__bar--indeterminate::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  animation: idx-progress-slide 1.2s linear infinite;
}

@keyframes idx-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.idx-progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: var(--space-1);
}

.idx-progress-info__file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
  font-family: "SF Mono", "Fira Code", monospace;
}

.idx-progress-info__count {
  flex-shrink: 0;
  font-weight: 600;
}

/* ── Inline message ───────────────────────────────────────────────────────── */
.idx-msg {
  font-size: 11px;
  margin-top: var(--space-2);
  display: block;
  line-height: var(--leading-relaxed);
}

.idx-msg--error {
  color: var(--color-danger);
}

.idx-msg--muted {
  color: var(--muted);
}

/* ── Statistics ───────────────────────────────────────────────────────────── */
.idx-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.idx-stat {
  flex: 1 1 80px;
  min-width: 80px;
  max-width: 160px;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: none;
}

.idx-stat__value {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
}

.idx-stat__label {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

/* Stats detail accordion */
.idx-stats-detail {
  margin-top: var(--space-4);
}

.idx-stats-detail summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  padding: var(--space-2) 0;
}

/* ── Maintenance ──────────────────────────────────────────────────────────── */
.idx-maint-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  padding: var(--space-2) 0;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: color var(--transition-fast);
}

.idx-maint-toggle:hover {
  color: var(--color-danger);
}

.idx-maint-toggle__chevron {
  transition: transform var(--transition-base);
  display: inline-flex;
}

.idx-maint-toggle__chevron--open {
  transform: rotate(180deg);
}

.idx-maint-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.idx-maint-btn {
  padding: var(--space-2) var(--space-3);
  font-size: 11px;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.idx-maint-btn:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.idx-maint-btn--danger {
  color: var(--color-danger);
}

.idx-maint-btn--danger:hover {
  background: var(--color-danger);
  color: white;
}

/* ── Collapsible animated content ─────────────────────────────────────────── */
.idx-collapsible-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

.idx-collapsible-content--open {
  max-height: 2000px;
  opacity: 1;
}

/* ── Chip appear animation ───────────────────────────────────────────────── */
@keyframes idx-chip-in {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.idx-drive-chip {
  animation: idx-chip-in 0.2s ease-out both;
}

/* ── Drive result appear animation ───────────────────────────────────────── */
@keyframes idx-result-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.idx-drive-result {
  animation: idx-result-in 0.3s ease-out both;
}

/* ── Collapsible section ──────────────────────────────────────────────────── */
.idx-collapsible__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  padding: 0;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  margin-bottom: var(--space-4);
}

.idx-collapsible__chevron {
  transition: transform var(--transition-base);
  display: inline-flex;
  color: var(--muted);
}

.idx-collapsible__chevron--open {
  transform: rotate(180deg);
}

.idx-card {
  background: var(--panel);
}

.idx-drive__header:hover {
  background: var(--surface-3);
}

.idx-drive-folder:hover {
  background: rgba(139, 92, 246, 0.1);
}

.idx-drive-chip {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

.idx-stat {
  background: var(--surface-3);
}

.idx-cat {
  background: var(--surface-3);
}

.idx-img-folder {
  background: var(--surface-3);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CategoryManager — Unified category management UI
   Pattern: Stacked Cards with Inline Actions (VS Code / Linear style)
   Uses design tokens from tokens.css + styles.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Add category row ────────────────────────────────────────────────────── */
.cm-add-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cm-add-row__input {
  flex: 1;
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text);
  transition: border-color var(--transition-fast);
}

.cm-add-row__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.cm-add-row__input::placeholder {
  color: var(--muted);
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.cm-empty {
  padding: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: transparent;
}

/* ── Card list ───────────────────────────────────────────────────────────── */
.cm-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Category card ───────────────────────────────────────────────────────── */
.cm-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cm-card:hover {
  border-color: rgba(var(--primary-rgb, 74, 208, 179), 0.35);
}

.cm-card--expanded {
  border-color: rgba(var(--primary-rgb, 74, 208, 179), 0.5);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(var(--primary-rgb, 74, 208, 179), 0.1);
}

/* ── Card header ─────────────────────────────────────────────────────────── */
.cm-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.cm-card__header:hover {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.03);
}

.cm-card__chevron {
  display: inline-flex;
  color: var(--muted);
  transition: transform var(--transition-base);
  flex-shrink: 0;
}

.cm-card__chevron--open {
  transform: rotate(180deg);
}

.cm-card__name {
  flex: 1;
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  align-items: center;
}

.cm-card__source-icon {
  display: inline-flex;
  align-items: center;
  color: var(--primary);
  opacity: 0.6;
  flex-shrink: 0;
}

.cm-card__source-icon--cloud {
  color: #8b5cf6;
}

/* ── Status badge ────────────────────────────────────────────────────────── */
.cm-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--space-3);
  border-radius: var(--radius-xl);
  font-size: var(--text-xs);
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.cm-status--ok {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.cm-status--warn {
  background: var(--color-warning-muted);
  color: var(--color-warning);
}

.cm-status--empty {
  background: rgba(var(--text-rgb, 232, 237, 244), 0.06);
  color: var(--muted);
}

/* ── Card body (collapsible) ─────────────────────────────────────────────── */
.cm-card__body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.cm-card__body--open {
  max-height: 900px;
  opacity: 1;
  border-top: 1px solid var(--border);
}

.cm-card__body-inner {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Field group ─────────────────────────────────────────────────────────── */
.cm-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cm-field__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Inputs ──────────────────────────────────────────────────────────────── */
.cm-field__input,
.cm-field__select {
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.cm-field__input:focus,
.cm-field__select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}

.cm-field__select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa3b5' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* ── Path display (folder paths) ─────────────────────────────────────────── */
.cm-field__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.cm-field__path {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color var(--transition-fast);
}

.cm-field__path--empty {
  color: var(--muted);
  border-style: dashed;
  font-family: inherit;
  font-style: italic;
}

.cm-field__path--has-value {
  border-color: rgba(var(--primary-rgb, 74, 208, 179), 0.25);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.04);
}

/* ── Browse button (attached to path) ────────────────────────────────────── */
.cm-browse-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.cm-browse-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.06);
}

.cm-browse-btn:active {
  transform: translateY(1px);
}

/* ── Meta row (below path: file count + index button) ────────────────────── */
.cm-field__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-left: var(--space-1);
}

/* ── Index badge ─────────────────────────────────────────────────────────── */
.cm-index-badge {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
}

.cm-index-badge--ok {
  color: var(--color-success);
}

/* ── Sync row ────────────────────────────────────────────────────────────── */
.cm-sync-row {
  padding: 0;
  margin-top: var(--space-2);
}

/* ── Upload result ───────────────────────────────────────────────────────── */
.cm-upload-result {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cm-upload-result__icon {
  color: var(--primary);
  display: inline-flex;
}

/* ── Cloud Folder Picker ─────────────────────────────────────────────────── */
.cm-picker {
  margin-top: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel);
  max-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

.cm-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  gap: var(--space-3);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.03);
}

.cm-picker__location {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}

.cm-picker__close,
.cm-picker__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all var(--transition-fast);
}

.cm-picker__close:hover,
.cm-picker__back:hover {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.1);
  color: var(--text);
}

.cm-picker__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.cm-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--transition-fast);
}

.cm-picker__item:hover {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.08);
}

.cm-picker__item--file {
  color: var(--primary);
}

.cm-picker__item--file:hover {
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.12);
}

.cm-picker__item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cm-picker__empty {
  padding: var(--space-5);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
}

.cm-picker__error {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-danger);
}

.cm-picker__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: rgba(var(--primary-rgb, 74, 208, 179), 0.03);
}

.cm-picker__select {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cm-picker__select:hover {
  filter: brightness(1.1);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 74, 208, 179), 0.3);
}


/* ══════════════════════════════════════════════════════════════════════════
   IndexationOverlay — écran plein écran pendant l'indexation DocFinder
   ══════════════════════════════════════════════════════════════════════════ */

.idx-ov {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.idx-ov.is-visible { opacity: 1; pointer-events: all; }

/* ── Orbes subtiles (pas de gradient tournant) ───────────────────────── */
.idx-ov__orbs { position: absolute; inset: 0; pointer-events: none; }
.idx-ov__orb {
  position: absolute; border-radius: 50%;
  opacity: 0.15;
}
.idx-ov__orb--1 {
  width: 500px; height: 500px; top: -12%; left: -8%;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.5), transparent 70%);
}
.idx-ov__orb--2 {
  width: 400px; height: 400px; bottom: -10%; right: -6%;
  background: radial-gradient(circle, rgba(var(--primary-2-rgb), 0.4), transparent 70%);
}
.idx-ov__orb--3 {
  width: 300px; height: 300px; top: 40%; left: 50%;
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.2), transparent 70%);
}

/* ── Contenu ─────────────────────────────────────────────────────────── */
.idx-ov__content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; max-width: 520px; width: 92%; text-align: center;
}

/* ── Titre ────────────────────────────────────────────────────────────── */
.idx-ov__title-row { display: flex; align-items: center; gap: 10px; }
.idx-ov__doc-icon {
  color: rgba(var(--primary-rgb), 0.8);
}
.idx-ov__title {
  font-size: 1.2rem; font-weight: 600; color: #fff; margin: 0;
  letter-spacing: -0.01em;
}

/* ── Cercle de progression ───────────────────────────────────────────── */
.idx-ov__ring-wrap {
  position: relative; width: 170px; height: 170px; flex-shrink: 0; margin: 4px 0;
}
.idx-ov__ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.idx-ov__ring-bg { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 6; }
.idx-ov__ring-fg {
  fill: none; stroke: url(#idx-ring-grad); stroke-width: 6; stroke-linecap: round;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.idx-ov__ring-center {
  position: absolute; inset: 0; display: flex;
  align-items: baseline; justify-content: center;
  padding-top: 68px; /* centrer visuellement dans le cercle */
}
.idx-ov__ring-pct {
  font-size: 2.6rem; font-weight: 700; color: var(--text);
  line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.idx-ov__ring-pct-sign {
  font-size: 1rem; font-weight: 400; color: var(--muted);
  margin-left: 3px;
}

/* ── Fichier en cours ────────────────────────────────────────────────── */
.idx-ov__current-file {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: rgba(255,255,255,0.45);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 0 8px;
}
.idx-ov__pulse-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--primary-rgb), 0.9);
  animation: idx-pulse 1.5s ease-in-out infinite;
}
@keyframes idx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.6); }
}

/* ── Compteur temps stylé ────────────────────────────────────────────── */
.idx-ov__timer-block {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 24px; border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.idx-ov__timer-main { display: flex; align-items: center; }
.idx-ov__time-counter {
  display: flex; align-items: center; gap: 1px;
  font-size: 2rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.idx-ov__time-sep {
  color: rgba(var(--primary-rgb), 0.6);
  animation: idx-sep-blink 1s step-end infinite;
  margin: 0 2px;
}
@keyframes idx-sep-blink {
  0%, 100% { opacity: 1; } 50% { opacity: 0.2; }
}
.idx-ov__digit {
  display: inline-block;
  animation: idx-digit-flip 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes idx-digit-flip {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.idx-ov__digit-suffix { font-size: 0.6em; color: rgba(255,255,255,0.4); margin-left: 2px; }
.idx-ov__animated-number { display: inline-flex; }

.idx-ov__timer-details {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  justify-content: center;
}
.idx-ov__timer-detail {
  font-size: 0.75rem; color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
.idx-ov__timer-eta {
  color: rgba(var(--primary-rgb), 0.7); font-weight: 500;
}

/* ── Warning performance ─────────────────────────────────────────────── */
.idx-ov__warning {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 12px; padding: 12px 16px;
  font-size: 0.76rem; color: rgba(251, 191, 36, 0.85);
  line-height: 1.55; text-align: left; max-width: 440px;
}
.idx-ov__warning--critical {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.15);
  color: rgba(252, 165, 165, 0.9);
}
.idx-ov__warning-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.idx-ov__warning-text { flex: 1; }
.idx-ov__warning-text strong { color: #fff; font-weight: 600; }

/* ── Catégories supplémentaires ──────────────────────────────────────── */
.idx-ov__extra-cats {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  width: 100%; max-width: 400px;
}
.idx-ov__extra-cats-title {
  font-size: 0.72rem; color: rgba(255,255,255,0.4);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
}
.idx-ov__extra-cats-list {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.idx-ov__extra-cat-btn {
  background: rgba(var(--primary-rgb), 0.08);
  border: 1px solid rgba(var(--primary-rgb), 0.2);
  color: rgba(var(--primary-rgb), 0.9);
  padding: 5px 14px; border-radius: 8px;
  font-size: 0.74rem; font-weight: 500; cursor: pointer;
  transition: all 0.25s ease;
}
.idx-ov__extra-cat-btn:hover:not(:disabled) {
  background: rgba(var(--primary-rgb), 0.15);
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-1px);
}
.idx-ov__extra-cat-btn.is-added {
  background: rgba(var(--primary-rgb), 0.12);
  border-color: rgba(var(--primary-rgb), 0.3);
  color: rgba(var(--primary-rgb), 0.6);
  cursor: default;
}
.idx-ov__index-all-btn {
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  color: rgba(var(--primary-rgb), 0.9);
  padding: 7px 20px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: all 0.25s ease; margin-top: 4px;
}
.idx-ov__index-all-btn:hover {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: rgba(var(--primary-rgb), 0.45);
  transform: translateY(-1px);
}

/* ── Zone d'actions (naviguer + annuler) ─────────────────────────────── */
.idx-ov__actions {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 8px;
}
.idx-ov__navigate-btn {
  background: rgba(var(--primary-rgb), 0.1);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  color: rgba(var(--primary-rgb), 0.9);
  padding: 10px 32px; border-radius: 10px;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all 0.25s ease;
}
.idx-ov__navigate-btn:hover {
  background: rgba(var(--primary-rgb), 0.18);
  border-color: rgba(var(--primary-rgb), 0.45);
  transform: translateY(-1px);
}
/* ── Bouton annuler ──────────────────────────────────────────────────── */
.idx-ov__cancel-btn {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
  padding: 9px 28px; border-radius: 10px;
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  transition: all 0.3s ease;
}
.idx-ov__cancel-btn:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.15);
}
.idx-ov__cancel-btn.is-confirm {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.idx-ov__cancel-btn.is-confirm:hover {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

/* ── Mini-indicateur (overlay réduit) ────────────────────────────────── */
.idx-ov-mini {
  position: fixed;
  top: 12px; right: 16px;
  z-index: 9998;
  display: flex; align-items: center; gap: 8px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.25);
  padding: 8px 16px; border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s ease;
}
.idx-ov-mini:hover {
  background: rgba(var(--primary-rgb), 0.2);
  border-color: rgba(var(--primary-rgb), 0.4);
  transform: translateY(-1px);
}
.idx-ov-mini__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.9);
  animation: idx-pulse 1.5s ease-in-out infinite;
}
.idx-ov-mini__text {
  font-size: 0.78rem; font-weight: 600;
  color: rgba(var(--primary-rgb), 0.9);
  font-variant-numeric: tabular-nums;
}


.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sync-badge:hover {
  background: rgba(var(--primary-rgb), 0.08);
  border-color: var(--primary);
}

.sync-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sync-badge--ok .sync-badge__dot { background: var(--primary); }
.sync-badge--syncing .sync-badge__dot {
  background: #f59e0b;
  animation: sync-pulse 1.2s ease-in-out infinite;
}
.sync-badge--pending .sync-badge__dot { background: #f59e0b; }
.sync-badge--error .sync-badge__dot { background: #ef4444; }
.sync-badge--empty .sync-badge__dot { background: var(--muted); }

@keyframes sync-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.sync-badge__text {
  color: var(--text);
}

.sync-badge--empty .sync-badge__text { color: var(--muted); }

/* Modal détail */
.sync-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sync-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  color: var(--text);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.sync-modal h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text);
}

.sync-modal__line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: var(--muted);
}

.sync-modal__line strong { color: var(--text); }

.sync-modal__error {
  margin-top: 12px;
  padding: 8px 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  color: #fecaca;
  font-size: 12px;
}

.sync-modal__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}

.sync-modal__btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition: all 0.15s ease;
}

.sync-modal__btn:hover { border-color: var(--primary); }
.sync-modal__btn--primary {
  background: var(--primary);
  color: #0a1418;
  border-color: var(--primary);
  font-weight: 600;
}
.sync-modal__btn--primary:hover { opacity: 0.9; }
.sync-modal__btn:disabled { opacity: 0.5; cursor: not-allowed; }


/* ============================================================
 * BACKGROUND TASKS — Toaster top-right uniquement
 * Mode sombre. Tokens var(--panel), var(--text), etc.
 * Aucun fallback hardcode #fff/#000.
 * ============================================================ */

/* Stack des toasts. Top-right, sous le drag-region du titre Mac. */
.bg-toaster {
  position: fixed;
  top: 56px;
  right: 16px;
  z-index: 9700;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
  -webkit-app-region: no-drag;
}

.bg-toast {
  pointer-events: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  min-width: 280px;
  max-width: 360px;
  animation: bg-toast-slide-in 0.32s cubic-bezier(0.32, 0.72, 0.3, 1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bg-toast:hover {
  transform: translateX(-2px);
  box-shadow:
    0 16px 38px -10px rgba(0, 0, 0, 0.5),
    0 3px 8px rgba(0, 0, 0, 0.24);
}

.bg-toast--error { border-left-color: #ef4444; }
.bg-toast--success { border-left-color: var(--primary); }
.bg-toast--running { border-left-color: var(--muted); }

@keyframes bg-toast-slide-in {
  from { opacity: 0; transform: translateX(110%); }
  to   { opacity: 1; transform: translateX(0); }
}

.bg-toast__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.bg-toast--success .bg-toast__icon { color: var(--primary); background: rgba(var(--primary-rgb), 0.14); }
.bg-toast--error .bg-toast__icon   { color: #ef4444; background: rgba(239, 68, 68, 0.14); }
.bg-toast--running .bg-toast__icon { color: var(--muted); background: rgba(148, 163, 184, 0.14); }

.bg-toast__spin {
  animation: bg-toast-spin 1.2s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes bg-toast-spin {
  to { transform: rotate(360deg); }
}

.bg-toast__body { min-width: 0; }

.bg-toast__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
}

.bg-toast__sub {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bg-toast__bar {
  margin-top: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.bg-toast__bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.bg-toast__bar--indet .bg-toast__bar-fill {
  width: 40%;
  animation: bg-toast-indet 1.4s ease-in-out infinite;
}

@keyframes bg-toast-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}

.bg-toast__close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
  transition: all 0.15s ease;
}

.bg-toast__close:hover {
  color: var(--text);
  background: rgba(var(--primary-rgb), 0.10);
}

.bg-toast__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.35);
}

/* Mobile : toasts pleine largeur en haut */
@media (max-width: 520px) {
  .bg-toaster {
    top: 56px;
    right: 8px;
    left: 8px;
    max-width: none;
  }
  .bg-toast {
    min-width: 0;
    max-width: none;
  }
}


/* LibraryWorkflowPage — page plein écran du workflow IA bibliothèque */

.lwp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.lwp-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* ─── Header ─────────────────────────────────────────────────────────── */
.lwp-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.lwp-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lwp-header-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--primary-rgb), 0.15);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.lwp-header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.lwp-header-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.lwp-header-sub strong {
  color: var(--text);
  font-weight: 500;
}

.lwp-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lwp-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.lwp-close-btn:hover {
  background: var(--panel);
  color: var(--text);
}

/* ─── Stage badge ────────────────────────────────────────────────────── */
.lwp-stage-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--border);
}
.lwp-stage-idle { color: var(--muted); }
.lwp-stage-discovery,
.lwp-stage-classifying {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.5);
  background: rgba(var(--primary-rgb), 0.1);
}
.lwp-stage-curating {
  color: #f5b50a;
  border-color: rgba(245, 181, 10, 0.4);
  background: rgba(245, 181, 10, 0.1);
}
.lwp-stage-done {
  color: var(--primary);
  border-color: rgba(var(--primary-rgb), 0.4);
  background: rgba(var(--primary-rgb), 0.15);
}

/* ─── Banners ────────────────────────────────────────────────────────── */
.lwp-error-banner,
.lwp-resumable-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.lwp-error-banner {
  background: rgba(239, 68, 68, 0.12);
  color: #ff8a8a;
}
.lwp-resumable-banner {
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--text);
}
.lwp-resumable-actions {
  display: flex;
  gap: 8px;
}

/* ─── Body ───────────────────────────────────────────────────────────── */
.lwp-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lwp-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  gap: 14px;
}

.lwp-empty-state h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.lwp-empty-state p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

.lwp-empty-state p strong {
  color: var(--text);
  font-weight: 600;
}

.lwp-empty-icon {
  font-size: 48px;
  color: var(--primary);
  margin-bottom: 8px;
}

.lwp-loader-pulse {
  font-size: 48px;
  color: var(--primary);
  animation: lwp-pulse 1.6s ease-in-out infinite;
}

@keyframes lwp-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.6; }
}

.lwp-tip {
  font-size: 12px !important;
  margin-top: 4px !important;
  opacity: 0.7;
}

.lwp-muted { color: var(--muted); }

/* ─── Split layout ───────────────────────────────────────────────────── */
.lwp-split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}

@media (max-width: 900px) {
  .lwp-split { grid-template-columns: 1fr; }
}

.lwp-left, .lwp-right {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  background: var(--bg);
}

.lwp-left { border-right: 1px solid var(--border); }

.lwp-panel-header {
  flex: 0 0 auto;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--panel);
}

.lwp-locked-hint {
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 400;
  opacity: 0.7;
}

/* ─── Cartes de suggestions (prompts rapides) ────────────────────────── */
.lwp-suggestions {
  flex: 0 0 auto;
  padding: 14px 18px 4px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, rgba(var(--primary-rgb), 0.04), transparent);
}
.lwp-suggestions-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-bottom: 8px;
}
.lwp-suggestions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
}
.lwp-suggestion-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: left;
}
.lwp-suggestion-card:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
  color: var(--primary);
  transform: translateY(-1px);
}
.lwp-suggestion-card:active {
  transform: translateY(0);
}
.lwp-suggestion-icon {
  font-size: 14px;
  line-height: 1;
}
.lwp-suggestion-label {
  white-space: nowrap;
}

/* ─── Wrap ChatIA (composant partagé) ────────────────────────────────── */
.lwp-chatia-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lwp-chatia-wrap > .chatia {
  flex: 1;
  min-height: 0;
}

.lwp-quick-actions {
  flex: 0 0 auto;
  padding: 0 18px 14px 18px;
  display: flex;
  justify-content: center;
}

/* ─── Right panel: taxonomy + stats ──────────────────────────────────── */
.lwp-right-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
}

.lwp-taxonomy-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 14px;
}
.lwp-taxonomy-empty p { margin: 6px 0; }

.lwp-taxonomy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lwp-taxonomy-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.lwp-taxonomy-item:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
  background: rgba(var(--primary-rgb), 0.04);
}
.lwp-taxonomy-item:hover .lwp-icon-btn { opacity: 1; }

.lwp-taxonomy-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.12);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

.lwp-taxonomy-main { flex: 1; min-width: 0; }
.lwp-taxonomy-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.lwp-taxonomy-desc {
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
}

.lwp-taxonomy-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-self: center;
}

.lwp-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  opacity: 0.55;
  padding: 0;
}
.lwp-icon-btn svg { display: block; }
.lwp-icon-btn:hover {
  border-color: var(--border);
  background: var(--bg);
  color: var(--text);
  opacity: 1;
}
.lwp-icon-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  opacity: 1;
}
.lwp-icon-btn-danger:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.lwp-taxonomy-edit {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lwp-input, .lwp-textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.lwp-input:focus, .lwp-textarea:focus { border-color: var(--primary); }
.lwp-textarea { resize: vertical; min-height: 56px; line-height: 1.5; }

.lwp-taxonomy-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.lwp-add-theme-btn {
  margin-top: 6px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
}
.lwp-add-theme-btn .lwp-add-theme-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(var(--primary-rgb), 0.1);
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
}
.lwp-add-theme-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.05);
}
.lwp-add-theme-btn:hover .lwp-add-theme-plus {
  background: var(--primary);
  color: var(--panel);
}

/* ─── Stats ──────────────────────────────────────────────────────────── */
.lwp-stats {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lwp-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

.lwp-stat {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  text-align: center;
}
.lwp-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lwp-stat-label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 2px;
}
.lwp-stat-warn {
  border-color: rgba(245, 181, 10, 0.4);
  background: rgba(245, 181, 10, 0.08);
}
.lwp-stat-warn .lwp-stat-value { color: #f5b50a; }

.lwp-progress-bar {
  height: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.lwp-progress-bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.lwp-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-top: 8px;
}

.lwp-aggregated-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lwp-agg-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  font-size: 12.5px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.lwp-agg-name { color: var(--text); }
.lwp-agg-count {
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.lwp-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}
.lwp-recent-row {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 11.5px;
}
.lwp-recent-row.lwp-recent-failed {
  border-color: rgba(245, 181, 10, 0.4);
  background: rgba(245, 181, 10, 0.06);
}
.lwp-recent-designation {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwp-recent-theme {
  color: var(--muted);
  margin-top: 2px;
}

/* ─── Panel "Non classé" (fin de classification) ─────────────────────── */
.lwp-unclassified-panel {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(245, 181, 10, 0.4);
  background: rgba(245, 181, 10, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lwp-unclassified-panel .lwp-section-title {
  margin: 0;
  color: #f5b50a;
}
.lwp-unclassified-hint {
  font-size: 12.5px;
  color: var(--text);
  opacity: 0.85;
  line-height: 1.5;
}

/* ─── Panel "Créer dans la Bibliothèque" ───────────────────────────── */
.lwp-materialize-panel {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  background: rgba(var(--primary-rgb), 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lwp-materialize-panel .lwp-section-title {
  margin: 0;
  color: var(--primary);
  font-size: 14px;
}
.lwp-materialize-hint {
  font-size: 12.5px;
  color: var(--text);
  opacity: 0.85;
  line-height: 1.5;
}
.lwp-materialize-hint code {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--text);
}
.lwp-materialize-actions-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.lwp-link-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 0;
  font-size: 12px;
  text-decoration: underline;
}
.lwp-link-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lwp-materialize-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.lwp-materialize-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s;
}
.lwp-materialize-row:hover { background: rgba(var(--primary-rgb), 0.08); }
.lwp-materialize-row--on { background: rgba(var(--primary-rgb), 0.12); }
.lwp-materialize-row input[type="checkbox"] {
  accent-color: var(--primary);
  cursor: pointer;
}
.lwp-materialize-name {
  flex: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lwp-materialize-count {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lwp-materialize-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lwp-materialize-progress-label {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}
.lwp-materialize-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.lwp-materialize-panel--result {
  border-color: rgba(74, 208, 179, 0.35);
}
.lwp-materialize-result-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lwp-materialize-result-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   UI SHARED — styles pour les composants ui/* partagés
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Spinner (animation globale) ─────────────────────────────────────────── */
@keyframes datadoc-spin {
  to { transform: rotate(360deg); }
}

/* Fallback Suspense pleine page (lazy-loaded routes) */
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  width: 100%;
  color: var(--muted);
}

/* ── Mode low-end : désactivation animations + filtres coûteux ──────────── */
html[data-low-end="1"] *,
html[data-low-end="1"] *::before,
html[data-low-end="1"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.05ms !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-low-end="1"] .page-transition {
  animation: none !important;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ui-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-8) var(--space-5);
  gap: var(--space-3);
  color: var(--muted);
}

.ui-empty__icon {
  opacity: 0.2;
  margin-bottom: var(--space-2);
}

.ui-empty__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
}

.ui-empty__subtitle {
  font-size: var(--text-base);
  color: var(--muted);
  max-width: 420px;
  line-height: var(--leading-normal);
}

.ui-empty__action {
  margin-top: var(--space-4);
}

/* ── Page header ─────────────────────────────────────────────────────────── */
.ui-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  margin-bottom: var(--space-4);
}

.ui-page-header__text {
  flex: 1;
  min-width: 0;
}

.ui-page-header__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  line-height: var(--leading-tight);
}

.ui-page-header__subtitle {
  font-size: var(--text-base);
  color: var(--muted);
  margin-top: var(--space-1);
}

.ui-page-header__action {
  flex-shrink: 0;
}

/* ── Modal commun ────────────────────────────────────────────────────────── */
.ui-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  animation: ui-modal-fade var(--transition-base);
  padding: var(--space-5);
}

@keyframes ui-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ui-modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: ui-modal-pop var(--transition-base);
}

@keyframes ui-modal-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.ui-modal--sm { max-width: 420px; }
.ui-modal--md { max-width: 540px; }
.ui-modal--lg { max-width: 720px; }
.ui-modal--xl { max-width: 960px; }

.ui-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.ui-modal__title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text);
}

.ui-modal__close {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ui-modal__close:hover {
  background: rgba(var(--text-rgb), 0.05);
  color: var(--text);
}

/* ── Field — labels, hints, errors ─────────────────────────────────────── */
.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  display: block;
}

.field__required {
  color: var(--color-danger);
  margin-left: 2px;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-1);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
}

.field--error input,
.field--error textarea,
.field--error select {
  border-color: var(--color-danger);
}

.ui-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5);
}

.ui-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
}


/* ── VoiceDictation ───────────────────────────────────────────────────── */
.voice-dictation {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-xl);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition-base);
}

.voice-dictation--small {
  gap: 4px;
  padding: 3px 8px;
  font-size: 0.72rem;
}

.voice-dictation--listening {
  border-color: var(--color-danger);
  background: rgba(var(--danger-rgb), 0.12);
  color: var(--color-danger);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOUTONS PRIMAIRES — STYLE UNIFIÉ
   Harmonise toutes les classes "*--primary" / "compl-run" / "*-btn-new"
   sur le look de référence `.att-btn-new` (page Attestations).
   Doit être chargé EN DERNIER dans la cascade pour gagner la spécificité.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn--primary,
.att-btn--primary,
.att-btn-new,
.compl-run,
.dz-pending__btn--primary,
.sao-btn--primary,
.mt-btn--primary,
.mt-footer-btn--primary,
.st-btn--primary,
.idx-btn-primary,
.drv-btn--primary,
.tl-primary-btn,
.welcome-btn--primary,
.npk__btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  background: var(--btn-gradient);
  color: var(--btn-gradient-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition:
    opacity var(--transition-fast),
    transform 0.12s ease,
    box-shadow var(--transition-base);
}

.btn--primary:hover:not(:disabled),
.att-btn--primary:hover:not(:disabled),
.att-btn-new:hover:not(:disabled),
.compl-run:hover:not(:disabled),
.dz-pending__btn--primary:hover:not(:disabled),
.sao-btn--primary:hover:not(:disabled),
.mt-btn--primary:hover:not(:disabled),
.mt-footer-btn--primary:hover:not(:disabled),
.st-btn--primary:hover:not(:disabled),
.idx-btn-primary:hover:not(:disabled),
.drv-btn--primary:hover:not(:disabled),
.tl-primary-btn:hover:not(:disabled),
.welcome-btn--primary:hover:not(:disabled),
.npk__btn--primary:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--primary:active:not(:disabled),
.att-btn--primary:active:not(:disabled),
.att-btn-new:active:not(:disabled),
.compl-run:active:not(:disabled),
.dz-pending__btn--primary:active:not(:disabled),
.sao-btn--primary:active:not(:disabled),
.mt-btn--primary:active:not(:disabled),
.mt-footer-btn--primary:active:not(:disabled),
.st-btn--primary:active:not(:disabled),
.idx-btn-primary:active:not(:disabled),
.drv-btn--primary:active:not(:disabled),
.tl-primary-btn:active:not(:disabled),
.welcome-btn--primary:active:not(:disabled),
.npk__btn--primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.btn--primary:disabled,
.att-btn--primary:disabled,
.att-btn-new:disabled,
.compl-run:disabled,
.dz-pending__btn--primary:disabled,
.sao-btn--primary:disabled,
.mt-btn--primary:disabled,
.mt-footer-btn--primary:disabled,
.st-btn--primary:disabled,
.idx-btn-primary:disabled,
.drv-btn--primary:disabled,
.tl-primary-btn:disabled,
.welcome-btn--primary:disabled,
.npk__btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Variants taille — overrides le padding/font-size par défaut */
.btn--sm,
.att-btn--sm,
.idx-btn-primary--sm,
.mt-btn--sm {
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
}

.btn--lg,
.att-btn--lg,
.mt-btn--lg {
  padding: 12px var(--space-6);
  font-size: var(--text-md);
}

.tiny,
.btn--tiny {
  padding: 4px var(--space-2);
  font-size: var(--text-xs);
}