/* ═══════════════════════════════════════════════════════════════
   SMA PRICING INTELLIGENCE — ROOS GLOBAL DESIGN SYSTEM v3 (OKLCH)
   Tokens migrés depuis "Roos — Design System v3" (Claude Design).
   Les anciens noms de variables (--gold, --text-1, --green...) sont
   conservés comme alias pour ne pas casser les ~1800 usages existants
   dans ce fichier et les autres CSS du site — seules leurs VALEURS
   changent (hex/rgba → oklch).
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   PASSAGE D'UNE PAGE À L'AUTRE

   Roos n'est pas une application d'un seul écran : on va de /login à
   /loading, de /portail à /espaces, puis de /espaces au chiffrage — qui
   charge à lui seul une quarantaine de fichiers. Sans rien, chacun de ces
   pas est une coupure : la page qu'on quitte disparaît, le fond devient
   noir, la suivante apparaît d'un bloc.

   Le navigateur sait faire mieux. Il garde l'image de la page qu'on quitte
   JUSQU'À ce que la suivante soit prête à peindre, puis fond l'une dans
   l'autre. On ne voit plus l'attente : on voit un enchaînement.

   Sans effet sur la navigation interne de l'application (changer de vue ne
   change pas de document) ni sur les navigateurs qui l'ignorent.
   ═══════════════════════════════════════════════════════════════ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .30s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* Une transition qu'on n'a pas demandée est une transition qu'on subit. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* ── Tokens ── */
:root {
  /* Surfaces — échelle à 7 niveaux (remplace --bg/--bg-card/--bg-card2) */
  --sl-0: oklch(0.19 0.018 232);
  --sl-1: oklch(0.22 0.018 232);
  --sl-2: oklch(0.26 0.016 232);
  --sl-3: oklch(0.29 0.014 232);
  --sl-4: oklch(0.33 0.013 232);
  --sl-5: oklch(0.37 0.011 232);
  --sl-6: oklch(0.42 0.010 232);

  --bg:         var(--sl-0);
  --bg-card:    var(--sl-2);
  --bg-card2:   var(--sl-1);
  --bg-glass:   oklch(0.19 0.018 232 / 0.94);
  --bg-sidebar: oklch(0.16 0.018 232);

  /* Accent or */
  --au:     oklch(0.78 0.095 82);
  --au-hi:  oklch(0.86 0.100 85);
  --au-lo:  oklch(0.66 0.075 80);
  --au-dim: oklch(0.50 0.055 78);
  --au-bg:  oklch(0.78 0.095 82 / .10);
  --au-ln:  oklch(0.78 0.095 82 / .45);

  --gold:       var(--au);
  --gold-hi:    var(--au-hi);
  --gold-dim:   var(--au-bg);
  --gold-bd:    oklch(0.78 0.095 82 / .22);
  --gold-bd-hi: var(--au-ln);

  /* Texte — échelle à 4 niveaux */
  --tx-1: oklch(0.96 0.010 82);
  --tx-2: oklch(0.82 0.008 82);
  --tx-3: oklch(0.66 0.007 82);
  --tx-4: oklch(0.50 0.006 232);

  --text-0: var(--tx-1);
  --text-1: var(--tx-2);
  --text-2: var(--tx-3);
  --text-3: oklch(0.66 0.007 82 / 0.35);

  /* Lignes / bordures neutres */
  --ln-1: oklch(0.33 0.012 232);
  --ln-2: oklch(0.40 0.011 232);
  --ln-3: oklch(0.50 0.009 232);

  /* Phases (dégradé de progression 5 étapes — hue distinct volontairement
     conservé pour la phase 3, non redéfini par le design system source) */
  --phase1:     #ebb94c;
  --phase2a:    #c89028;
  --phase2b:    #a07020;
  --phase3a:    #d4995a;
  --phase3b:    #9b8060;
  --phase4a:    #c89028;
  --phase4b:    #9a7a28;
  --phase5:     #ebb94c;

  /* Sémantiques — succès/erreur/alerte/info */
  --ok:      oklch(0.74 0.14 152);
  --ok-bg:   oklch(0.74 0.14 152 / .13);
  --ok-ln:   oklch(0.74 0.14 152 / .40);
  --err:     oklch(0.66 0.17 25);
  --err-bg:  oklch(0.66 0.17 25 / .12);
  --err-ln:  oklch(0.66 0.17 25 / .40);
  --warn:    oklch(0.76 0.14 68);
  --warn-bg: oklch(0.76 0.14 68 / .12);
  --warn-ln: oklch(0.76 0.14 68 / .38);
  --info:    oklch(0.70 0.11 228);
  --info-bg: oklch(0.70 0.11 228 / .12);
  --info-ln: oklch(0.70 0.11 228 / .38);

  --green:      var(--ok);
  --red:        var(--err);
  --blue:       var(--info);
  --amber:      var(--warn);

  /* Séries de graphiques — les barres empilées des panneaux Personnel et
     Matériel étaient peintes avec la palette par défaut d'un tableur
     (#5b9bd5, #e06c45, #70ad47, #b070c0) : quatre teintes saturées qui
     n'appartiennent à aucun autre endroit du site. On garde les mêmes
     familles chromatiques — le lecteur reconnaît ses catégories — à la
     luminance et au chroma du système. */
  --ch-1: oklch(0.64 0.070 240);   /* ardoise  — salaire brut, dotation */
  --ch-2: oklch(0.62 0.090 45);    /* terre    — charges patronales */
  --ch-3: oklch(0.66 0.075 165);   /* vert     — indemnités */
  --ch-4: oklch(0.62 0.065 305);   /* mauve    — prévoyance */

  /* Typographie */
  --ff-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --ff-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --serif: var(--ff-serif);
  --sans:  var(--ff-sans);
  --mono:  var(--ff-mono);

  /* Layout (inchangé) */
  --sidebar-w:  260px;
  --sidebar-collapsed-w: 64px;
  --topbar-h:   56px;

  /* Radius — échelle systématique (remplace/complète --radius/--radius-sm) */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;
  --r-4: 8px;
  --r-5: 12px;
  --r-p: 999px;

  --radius:     var(--r-3);
  --radius-sm:  var(--r-2);
  --radius-lg:  var(--r-5);
  --radius-xl:  18px;

  /* Spacing — échelle base-4. --s-5 (20px) conservé en legacy, à résorber ;
     cible systématique = 4/8/12/16/24/32/48/64/96 (prompt §6). */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 48px; --s-10: 64px; --s-11: 96px;

  /* Ombres */
  --sh-1: 0 1px 3px oklch(0 0 0 / .35);
  --sh-2: 0 4px 16px -4px oklch(0 0 0 / .45);
  --sh-focus: 0 0 0 2px var(--sl-2), 0 0 0 4px oklch(0.78 0.095 82 / .5);

  --glow-sm: 0 0 8px  oklch(0.78 0.095 82 / .4);
  --glow-md: 0 0 24px oklch(0.78 0.095 82 / .4), 0 0 48px oklch(0.78 0.095 82 / .15);
  --glow-lg: 0 0 40px oklch(0.78 0.095 82 / .5), 0 0 80px oklch(0.78 0.095 82 / .2);

  /* Motion */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);   /* décélération douce — standard site */
  --ease-spring: cubic-bezier(0.22, 0.68, 0, 1.1); /* léger rebond/pop — modals, entrées volontaires */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebond marqué — checks, pop de confirmation */
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    -52deg,
    rgba(200,145,32,0.022) 0,
    rgba(200,145,32,0.022) 1px,
    transparent 1px,
    transparent 72px
  );
  color: var(--text-1);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 9999;
}

a { color: var(--gold); text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--serif); color: var(--text-0); font-weight: 600; }
input, select, textarea, button { font-family: var(--sans); }

/* ── Sidebar ── */
#sidebar {
  position: fixed; left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--gold-bd);
  display: flex; flex-direction: column;
  z-index: 100;
  transition: width var(--dur-slow) var(--ease);
  overflow: visible;
}

/* ── Sidebar Toggle Button ── */
.sidebar-toggle {
  position: absolute; top: 18px; right: -14px; z-index: 110;
  width: 28px; height: 28px; border-radius: var(--r-p);
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  color: var(--gold); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  box-shadow: var(--sh-1);
}
.sidebar-toggle:hover {
  background: var(--gold-dim); border-color: var(--gold-bd-hi); transform: scale(1.1);
}
.sidebar-toggle:active { transform: scale(0.94); }
.sidebar-toggle:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.sidebar-toggle .toggle-icon {
  transition: transform var(--dur-base) var(--ease-in-out);
  display: inline-flex; width: 12px; height: 12px;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--gold-bd);
  flex-shrink: 0;
}
.brand-mark {
  font-size: 28px; color: var(--gold-hi);
  line-height: 1;
}
.brand-name {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  color: var(--text-0); letter-spacing: 3.5px;
  display: block;
}
.brand-sub {
  font-size: 7.5px; color: var(--gold); opacity: 0.8;
  letter-spacing: 2.5px; text-transform: uppercase;
  display: block; margin-top: 0;
}
.sidebar-nav {
  flex: 1; padding: 16px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 18px;
  color: var(--text-2);
  font-size: 12px; font-weight: 400;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
  border-left: 2px solid transparent;
  letter-spacing: 0.2px;
}
.nav-item:hover { color: var(--text-1); background: var(--gold-dim); }
.nav-item:active { transform: translateX(1px); }
.nav-item:focus-visible { outline: none; box-shadow: var(--sh-focus); border-radius: 0 var(--radius) var(--radius) 0; }
.nav-item.active {
  color: var(--gold-hi);
  background: linear-gradient(90deg, var(--au-bg), transparent);
  border-left-color: var(--gold);
  font-weight: 500;
}
.nav-icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-icon svg { width: 18px; height: 18px; }
.nav-divider {
  height: 1px; background: var(--gold-bd);
  margin: 5px 16px; opacity: 0.6;
}
.sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--gold-bd);
  box-sizing: border-box;
  /* Ceinture de sécurité : rien du pied de sidebar ne peut déborder à droite
     dans les pages (clip horizontal ; le bouton toggle est hors du footer). */
  overflow-x: clip;
}
.sys-badge { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.sys-meta { font-size: 10px; color: var(--text-3); margin-top: 6px; letter-spacing: 0.5px; }

.status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-3); display: inline-block;
}
.status-dot.connected { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.error { background: var(--red); }

/* ── Main Area ── */
#main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  transition: margin-left var(--dur-slow) var(--ease);
}

/* ── Topbar ── */
#topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--gold-bd);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
}
.topbar-left { display: flex; align-items: baseline; gap: 16px; }
/* La barre de droite était un <div> en display:block → flux inline qui passait
   à la ligne (avatar rejeté dessous + rognage). En flex nowrap + flex-shrink:0,
   tout reste sur UNE ligne, centré verticalement. */
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex-shrink: 0; }
#topbar h1 { font-size: 20px; font-weight: 600; }
.topbar-crumb { font-size: 12px; color: var(--text-2); }
.topbar-badge {
  font-size: 11px; color: var(--gold);
  padding: 4px 12px;
  border: 1px solid var(--gold-bd);
  border-radius: var(--r-p);
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.topbar-badge:focus-visible { outline: none; box-shadow: var(--sh-focus); }

/* ── Views ── */
.view { display: none; }
.view.active { display: block; padding: 28px 40px; box-sizing: border-box; max-width: 1800px; overflow-x: hidden; }
.view.active.view-fullwidth { max-width: none; }

/* ── Mini Logo (hidden by default, shown when collapsed) ── */
.brand-mini {
  display: none;
  width: 44px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition: transform var(--dur-slow), box-shadow var(--dur-slow);
  cursor: default;
}
.brand-mini:hover {
  transform: scale(1.08);
}
.brand-mini-img {
  width: 120px; height: auto;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(1.85) contrast(1.15) saturate(0.9);
  pointer-events: none;
}
.brand-mini-letter,
.brand-mini-dot { display: none; }

/* ── Collapsed Sidebar ──
   Replier la barre change `--sidebar-w` LUI-MÊME, et non plus seulement la
   largeur de #sidebar. Tout ce qui se cale sur la barre suit alors du même
   geste — à commencer par le tiroir d'Estimation, qui restait à 260 px du
   bord et laissait, barre repliée, une bande de fond de près de 200 px entre
   la barre et le chiffrage. */
body.sidebar-collapsed { --sidebar-w: var(--sidebar-collapsed-w); }
body.sidebar-collapsed #sidebar { width: var(--sidebar-collapsed-w); }
body.sidebar-collapsed #main { margin-left: var(--sidebar-collapsed-w); }
body.sidebar-collapsed .sidebar-brand { overflow: hidden; justify-content: center; padding: 14px 6px 12px; }
body.sidebar-collapsed .sidebar-brand::before,
body.sidebar-collapsed .sidebar-brand::after { display: none; }
body.sidebar-collapsed .sidebar-brand .brand-identity { opacity: 0; height: 0; width: 0; overflow: hidden; margin: 0; pointer-events: none; }
body.sidebar-collapsed .brand-logo-container { display: none !important; }
body.sidebar-collapsed .brand-logo-shimmer { display: none; }
body.sidebar-collapsed .brand-mini { display: flex; align-items: center; justify-content: center; }
body.sidebar-collapsed .sidebar-nav { overflow: hidden; }
body.sidebar-collapsed .nav-divider { margin: 5px 10px; }
body.sidebar-collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; }
body.sidebar-collapsed .nav-item { justify-content: center; padding: 12px 0; margin-right: 0; gap: 0; border-left-width: 2px; overflow: hidden; }
body.sidebar-collapsed .nav-icon { width: auto; font-size: 18px; }
body.sidebar-collapsed .sidebar-footer { padding: 12px 8px; text-align: center; overflow: hidden; }
body.sidebar-collapsed .sidebar-footer .sys-meta { display: none; }
body.sidebar-collapsed .sidebar-footer .sys-badge span:not(.status-dot) { display: none; }
body.sidebar-collapsed .sidebar-footer .sys-badge { justify-content: center; }
body.sidebar-collapsed .sidebar-toggle .toggle-icon { transform: rotate(180deg); }

/* Smooth transitions for inner sidebar elements */
.brand-identity { transition: opacity var(--dur-base), width var(--dur-slow), height var(--dur-slow); }
.brand-logo-container { transition: width var(--dur-slow), height var(--dur-slow); }
.brand-logo-img { transition: filter var(--dur-slow); }
.nav-label { transition: opacity var(--dur-base), width var(--dur-slow); display: inline-block; }
.sidebar-footer .sys-meta { transition: opacity var(--dur-base); }

.ctx-switcher {
  /* display:block + largeur bornée : sans ça la classe .nav-label le met en
     inline-block, il suit la largeur du texte nowrap et déborde dans les
     pages de travail (#sidebar est en overflow:visible pour le bouton toggle). */
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--gold-bd);
  border-radius: var(--radius);
  background: rgba(5,10,24,.62);
}
.ctx-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--gold);
  font-family: var(--mono, monospace);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
/* Le retour au portail des dossiers. Discret — on y va une fois par jour,
   pas une fois par minute — mais toujours au même endroit. */
.ctx-portail {
  margin-left: auto;
  color: var(--text-2);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ctx-portail:hover { color: var(--gold); border-bottom-color: var(--gold-bd-hi); }
.ctx-portail:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.ctx-select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--gold-bd);
  border-radius: var(--radius);
  background: var(--bg-card2);
  color: var(--text-0);
  padding: 0 8px;
  font-family: var(--sans);
  font-size: 11px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ctx-select:focus { border-color: var(--gold); }
.ctx-select:focus-visible { box-shadow: var(--sh-focus); }
.ctx-nom {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-0);
  overflow-wrap: anywhere;
}
.ctx-nom.vide { font-family: var(--sans); font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.ctx-hint {
  margin-top: 6px;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sidebar-collapsed .ctx-switcher { display: none; }

/* ── Mode dossier ──────────────────────────────────────────────────────
   Un dossier est ouvert : la vue Estimation ne montre que son chiffrage.
   Les six filtres d'état et la recherche portaient sur une liste ; il n'y
   a plus de liste. Le tiroir, lui, recouvre déjà toute la zone — ces
   règles servent le bref instant où il n'est pas encore ouvert, et le cas
   où le dossier ne s'ouvre pas du tout. */
body.est-dossier .est-filter-bar,
body.est-dossier .est-grid,
body.est-dossier .est-topbar { display: none; }

/* ── ROOS Frame ── */
.roos-frame { position: relative; padding: 24px; margin-bottom: 20px; background: var(--bg-card); border: 1px solid var(--gold-bd); border-radius: var(--radius); }
.roos-corner { position: absolute; width: 14px; height: 14px; }
.roos-corner.tl { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); border-radius: 2px 0 0 0; }
.roos-corner.tr { top: -1px; right: -1px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); border-radius: 0 2px 0 0; }
.roos-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); border-radius: 0 0 0 2px; }
.roos-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); border-radius: 0 0 2px 0; }

.roos-eyebrow {
  font-family: var(--sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.roos-eyebrow.warn { color: var(--amber); }
.roos-eyebrow.clickable { cursor: pointer; }
.toggle-arrow { font-size: 12px; transition: transform var(--dur-base); display: inline-block; }
.toggle-arrow.open { transform: rotate(90deg); }

/* ── KPI Cards ── */
.kpi-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-bd);
  border-radius: var(--radius);
  padding: 20px 16px;
  text-align: center;
}
.kpi-value {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: var(--gold-hi);
  line-height: 1.1;
}
.kpi-label { font-size: 11px; color: var(--text-2); margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; }

/* ── Dashboard Grid ── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.dash-card { min-height: 200px; }
.dash-card-full { width: 100%; }

.coverage-bar-wrap { background: var(--bg-card2); border-radius: 8px; height: 32px; overflow: hidden; margin-bottom: 12px; }
.coverage-bar {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--green));
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--bg); transition: width 0.6s;
  min-width: 40px;
}
.coverage-detail { font-size: 12px; color: var(--text-2); }

/* ── Completeness Checklist ── */
.completeness-checklist { display: flex; flex-direction: column; gap: 6px; }
.checklist-loading { font-size: 12px; color: var(--text-2); padding: 8px 0; }
.checklist-empty { font-size: 12px; color: var(--green); padding: 8px 0; }
.checklist-item {
  display: grid; grid-template-columns: 20px 1fr auto 60px;
  align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: 12px; cursor: pointer;
  transition: background var(--dur-fast);
}
.checklist-todo { color: var(--text-1); }
.checklist-todo:hover { background: var(--bg-card2); }
.checklist-done { color: var(--text-2); opacity: 0.6; cursor: default; }
.checklist-icon { font-size: 14px; }
.checklist-todo .checklist-icon { color: var(--gold); }
.checklist-done .checklist-icon { color: var(--green); }
.checklist-progress { font-size: 11px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.checklist-bar { height: 4px; border-radius: 2px; background: var(--bg-card2); overflow: hidden; }
.checklist-bar-fill { height: 100%; border-radius: 2px; background: var(--gold); transition: width 0.4s; }

.arch-diagram { display: flex; flex-direction: column; gap: 4px; }
.arch-layer {
  padding: 10px 14px; background: var(--bg-card2);
  border: 1px solid var(--gold-bd); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-1);
}
.arch-tag {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  background: var(--gold-dim); color: var(--gold); font-weight: 600;
  font-size: 10px; letter-spacing: 1px; margin-right: 8px;
}
.arch-tag.gold { background: var(--gold); color: var(--bg); }
.arch-arrow { text-align: center; color: var(--gold-bd-hi); font-size: 14px; line-height: 1; }

.entreprise-info { font-size: 12px; color: var(--text-2); line-height: 1.8; }
.entreprise-info b { color: var(--text-1); }

.missing-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.missing-cats .cat-tag {
  padding: 4px 10px; background: rgba(192,64,64,0.1);
  border: 1px solid rgba(192,64,64,0.3); border-radius: 20px;
  font-size: 11px; color: var(--red);
}

/* ── Estimation View ── */
.est-input { }
.input-row { display: flex; gap: 12px; }
.input-row textarea {
  flex: 1; background: var(--bg-card2); border: 1px solid var(--gold-bd);
  border-radius: var(--radius-sm); padding: 12px 16px;
  color: var(--text-0); font-size: 14px; resize: vertical;
  transition: border-color var(--dur-base);
}
.input-row textarea:focus { outline: none; border-color: var(--gold); }

.btn-gold {
  background: var(--gold); color: var(--bg); border: none;
  padding: 10px 24px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: all var(--dur-base); letter-spacing: 0.5px;
}
.btn-gold:hover { background: var(--gold-hi); transform: translateY(-1px); }
.btn-outline {
  background: transparent; color: var(--gold); border: 1px solid var(--gold-bd);
  padding: 10px 24px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 13px; cursor: pointer;
  transition: all var(--dur-base);
}
.btn-outline: hover { border-color: var(--gold); background: var(--gold-dim); }
.link-btn {
  background: none; border: none; color: var(--gold); cursor: pointer;
  text-decoration: underline; font-size: inherit;
}

.est-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Factors */
.factors-body { padding-top: 12px; }
.factors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.factors-col h4 { font-size: 13px; color: var(--gold); margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--gold-bd); }
.f-item { margin-bottom: 10px; }
.f-item label { display: block; font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.f-item input[type=range] { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: var(--bg-card2); border-radius: 2px; }
.f-item input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); cursor: pointer; }
.f-item input[type=number], .f-item select {
  width: 100%; padding: 6px 10px; background: var(--bg-card2);
  border: 1px solid var(--gold-bd); border-radius: var(--radius-sm);
  color: var(--text-0); font-size: 12px;
}
.f-val { font-size: 11px; color: var(--gold); float: right; }
.f-toggle {
  width: 40px; height: 22px; border-radius: 11px;
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
  cursor: pointer; position: relative; transition: background var(--dur-base);
}
.f-toggle.on { background: var(--gold-dim); border-color: var(--gold); }
.f-toggle-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-2); position: absolute; top: 2px; left: 2px;
  transition: all var(--dur-base);
}
.f-toggle.on .f-toggle-dot { left: 20px; background: var(--gold); }

/* Upload Zone */
.upload-zone {
  border: 2px dashed var(--gold-bd); border-radius: var(--radius);
  padding: 32px; text-align: center;
  transition: all var(--dur-base); cursor: pointer;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--gold); background: var(--gold-dim); }
.upload-zone.small { padding: 16px; }
.upload-icon { font-size: 28px; margin-bottom: 8px; color: var(--gold); }
.upload-zone p { font-size: 13px; color: var(--text-2); margin-bottom: 4px; }
.upload-hint { font-size: 11px; color: var(--text-3); }

.upload-status { padding: 16px 0; }
.upload-filename { font-size: 13px; color: var(--text-0); margin-bottom: 8px; }
.progress-bar { height: 4px; background: var(--bg-card2); border-radius: 2px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); transition: width var(--dur-slow); border-radius: 2px; }
.upload-step { font-size: 11px; color: var(--text-2); margin-top: 6px; }

/* Extracted Panel */
.extracted-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.extracted-actions-top { display: flex; align-items: center; gap: 16px; }
.extracted-count { font-size: 12px; color: var(--text-2); }
.extracted-actions { display: flex; gap: 12px; margin-top: 16px; }

/* Data Tables */
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: 12px;
}
.data-table thead th {
  position: sticky; top: 0;
  background: var(--bg-card2); color: var(--text-2);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px 8px; text-align: left;
  border-bottom: 1px solid var(--gold-bd);
  font-size: 10px; white-space: nowrap;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--gold-bd);
  transition: background var(--dur-fast);
}
.data-table tbody td { padding: 8px; vertical-align: middle; }

/* ── Sortable columns ── */
.sort-col { position: relative; user-select: none; }
.sort-col:hover { color: var(--gold-hi); }
.sort-col::after { content: '⇅'; font-size: 0.65em; margin-left: 3px; opacity: 0.3; }
.sort-col.sort-asc::after { content: '↑'; opacity: 1; color: var(--gold); }
.sort-col.sort-desc::after { content: '↓'; opacity: 1; color: var(--gold); }

/* ── Expand Row — Detail Panel ── */
.expand-row td { padding: 0 !important; background: var(--bg-card2); border-bottom: 2px solid var(--gold-bd) !important; }
.data-table tbody tr:hover { background: var(--gold-dim); cursor: pointer; }
.data-table tbody tr.row-expanded { background: var(--au-bg); }
.data-table tbody tr.row-expanded td:first-child { border-left: 3px solid var(--gold); }

.dx-panel {
  padding: 28px 32px 32px;
  animation: dxIn 0.35s var(--ease-spring);
}
@keyframes dxIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Hero header ── */
.dx-hero {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--gold-dim);
  gap: 24px;
}
.dx-hero-left { flex: 1; min-width: 0; }
.dx-method {
  display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
  margin-bottom: 8px;
}
.dx-method.decomp_direct { background: rgba(62,203,165,0.12); color: var(--green); }
.dx-method.decomp_blend { background: rgba(62,203,165,0.12); color: var(--green); }
.dx-method.llm_fallback { background: var(--au-bg); color: var(--gold); }
.dx-method.fallback_fixed { background: rgba(192,64,64,0.12); color: var(--red); }
.dx-method.no_data { background: rgba(133,122,106,0.12); color: var(--text-2); }

.dx-desc {
  font-family: var(--serif); font-size: 17px; color: var(--text-0);
  font-weight: 600; margin: 0 0 10px; line-height: 1.3;
}
.dx-hero-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dx-pu { font-family: var(--mono); font-size: 26px; color: var(--gold-hi); font-weight: 700; }
.dx-unite { font-size: 13px; color: var(--text-2); }
.dx-sep { color: var(--gold-dim); font-size: 18px; }
.dx-total-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; }
.dx-total-val { font-family: var(--mono); font-size: 15px; color: var(--text-1); font-weight: 500; }

/* Confidence gauge */
.dx-gauge { width: 110px; flex-shrink: 0; }
.dx-gauge svg { width: 100%; height: auto; display: block; }
/* Légende sortie du SVG : dimensionnée par la feuille de style, donc lisible
   quelle que soit la largeur de la jauge, et traduisible. */
.dx-gauge-cap {
  margin-top: 6px; text-align: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2); line-height: 1.25;
}

/* ── Decomposition cards ── */
.dx-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 20px;
}
.dx-card {
  border-radius: 10px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--gold-dim);
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.dx-card:hover { transform: translateY(-2px); box-shadow: 0 4px 20px var(--sh-c-b); }
.dx-card-accent { height: 3px; }
.dx-card.mat .dx-card-accent { background: var(--phase3a); }
.dx-card.rh .dx-card-accent { background: var(--phase3b); }
.dx-card.fg .dx-card-accent { background: var(--phase4a); }
.dx-card.mg .dx-card-accent { background: var(--green); }
.dx-card-body { padding: 14px 16px; }
.dx-card-amount {
  font-family: var(--mono); font-size: 20px; font-weight: 700;
  color: var(--text-0); line-height: 1.1;
}
.dx-card-amount small { font-size: 12px; color: var(--text-2); font-weight: 400; }
.dx-card-pct { font-family: var(--mono); font-size: 12px; color: var(--text-2); margin: 4px 0 6px; }
.dx-pct-base { font-family: var(--body); font-size: 9px; color: var(--text-3, #555); opacity: .7; margin-left: 3px; letter-spacing: .3px; }
.dx-card-label { font-size: 11px; color: var(--text-2); }

/* Color-tint on hover */
.dx-card.mat:hover { border-color: var(--phase3a); }
.dx-card.rh:hover { border-color: var(--phase3b); }
.dx-card.fg:hover { border-color: var(--phase4a); }
.dx-card.mg:hover { border-color: var(--green); }

/* ── Context chips ── */
.dx-chips {
  display: flex; flex-direction: column; gap: 0;
  margin-bottom: 20px;
  background: var(--bg); border-radius: 10px; border: 1px solid var(--gold-dim);
  overflow: hidden;
}
.dx-chip {
  display: flex; align-items: baseline; gap: 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--gold-bd);
  font-size: 12px; line-height: 1.5;
}
.dx-chip:last-child { border-bottom: 0; }
.dx-chip-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold); font-weight: 600; min-width: 90px; flex-shrink: 0;
}
.dx-chip-value { color: var(--text-0); flex: 1; }
.dx-chip-aside { font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.dx-dim { font-size: 11px; color: var(--text-2); }
.dx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-pill {
  display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 10px;
  background: var(--bg-card2); border: 1px solid var(--gold-dim); color: var(--text-1);
}
.dx-pill b { color: var(--gold-hi); font-family: var(--mono); }

/* ── Detail tables ── */
.dx-unit-banner {
  background: rgba(255,215,0,0.08); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm); padding: 8px 14px; margin-bottom: 12px;
  font-size: 11px; color: var(--text-1); line-height: 1.5;
}
.dx-unit-banner strong { color: var(--gold); }
.dx-tables {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px;
}
.dx-tbl {
  background: var(--bg); border-radius: 10px; border: 1px solid var(--gold-dim);
  padding: 14px 16px; overflow: hidden;
}
.dx-tbl-title {
  font-size: 11px; font-weight: 600; color: var(--text-0);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.dx-cnt {
  font-family: var(--mono); font-size: 10px; background: var(--gold-dim);
  color: var(--text-1); padding: 2px 7px; border-radius: 10px;
}
.dx-tbl table { width: 100%; font-size: 11px; border-collapse: collapse; }
.dx-tbl table th {
  text-align: left; font-size: 9px; color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px 6px;
  border-bottom: 1px solid var(--gold-dim); font-weight: 400;
}
.dx-tbl table td {
  padding: 6px 8px; color: var(--text-1);
  border-bottom: 1px solid var(--gold-bd);
  font-family: var(--mono); font-size: 11px;
}
.dx-tbl table td:first-child { font-family: var(--sans); color: var(--text-0); }
.dx-tbl table .r, .dx-tbl table th.r { text-align: right; }
.dx-tbl table .accent { color: var(--gold-hi); font-weight: 500; }
.dx-tbl table .mono-sm { font-family: var(--mono); font-size: 10px; color: var(--text-2); }

/* ── Editable decomposition inputs ── */
/* `--bg-2` n'existe pas dans le système de tokens : le repli `#1a1a1a` codé en
   dur s'appliquait donc TOUJOURS, y compris en thème clair, où ces champs de
   saisie apparaissaient en boîtes noires au milieu d'un tableau blanc. */
.dx-edit-input {
  width: 62px; padding: 3px 6px; font-family: var(--mono); font-size: 11px;
  background: var(--bg-card2); color: var(--text-0); border: 1px solid var(--gold-bd);
  border-radius: var(--r-2, 4px); text-align: right; outline: none;
  transition: border-color var(--dur-base);
}
.dx-edit-input:hover { border-color: var(--gold-bd-hi); }
.dx-edit-input:focus { border-color: var(--gold); box-shadow: 0 0 0 2px var(--au-bg); }
.dx-col-action { width: 28px; }
.dx-row-del {
  background: none; border: none; color: var(--text-3); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: 4px; transition: color var(--dur-base), background var(--dur-base);
}
.dx-row-del:hover { color: var(--red); background: rgba(192,64,64,0.12); }

/* ── Source badges ── */
.dx-badge {
  display: inline-block; font-size: 9px; padding: 2px 8px; border-radius: 10px;
  font-weight: 600; letter-spacing: 0.3px; margin-left: 6px; vertical-align: middle;
}
.badge-enterprise { background: rgba(62,203,165,0.12); color: var(--green); }
.badge-llm { background: var(--au-bg); color: var(--gold); }
.badge-nodata { background: rgba(133,122,106,0.12); color: var(--text-3); }
/* Ratio arbitré : ni donnée entreprise, ni simple estimation IA — un ratio
   corrigé parce que le précédent était indéfendable, en attente de validation. */
.badge-arbitrage { background: rgba(122,162,247,0.14); color: #7aa2f7; }

/* ── Validate bar ── */
.dx-validate-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 20px; padding: 14px 18px;
  background: var(--au-bg); border: 1px solid var(--gold-dim);
  border-radius: 10px;
}
.dx-validate-info { font-size: 11px; color: var(--text-2); flex: 1; }
.dx-btn-validate {
  padding: 8px 20px; font-size: 12px; font-weight: 600;
  background: var(--gold); color: var(--bg); border: none; border-radius: 6px;
  cursor: pointer; white-space: nowrap; transition: background var(--dur-base), transform var(--dur-fast);
}
.dx-btn-validate:hover { background: var(--gold-hi); transform: translateY(-1px); }
.dx-btn-validate:active { transform: translateY(0); }
.dx-btn-validate:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.dx-btn-validate.validated {
  background: var(--green); color: var(--bg); cursor: default;
}

.th-num { text-align: right !important; }
.th-desc { min-width: 200px; }
.th-hist { color: var(--blue) !important; }
.th-calc { color: var(--gold-hi) !important; }
.th-propose { color: var(--green) !important; font-weight: 700; }
.th-mat { color: var(--phase3a) !important; }
.th-rh { color: var(--phase3b) !important; }
.th-fg { color: var(--phase4a) !important; }
.th-mg { color: var(--green) !important; }
.th-ecart { color: var(--amber) !important; }
.th-method { min-width: 80px; }

.td-num { text-align: right; font-family: var(--mono); font-size: 11px; }
.td-propose { font-weight: 700; color: var(--gold-hi); }
.td-desc { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-conf { text-align: right; }

/* ── Override input in analyse table ── */
.td-override { padding: 2px 4px !important; }
.override-input {
  width: 72px; padding: 3px 6px; border: 1px solid var(--gold-bd);
  border-radius: 4px; background: transparent; color: var(--text-1);
  font-family: var(--mono); font-size: 12px; text-align: right;
  transition: border-color var(--dur-base);
}
.override-input:focus { outline: none; border-color: var(--gold); background: var(--au-bg); }
.override-input::placeholder { color: var(--text-2); opacity: 0.5; }
.override-active .override-input { border-color: var(--gold-hi); background: var(--au-bg); color: var(--gold-hi); font-weight: 600; }
.th-override { min-width: 80px; }

/* ── Sous-traitance Column ── */
.th-st { min-width: 60px; font-size: 10px; }
.td-st { padding: 2px 4px; white-space: nowrap; }
.st-toggle { position: relative; display: inline-block; width: 28px; height: 16px; cursor: pointer; vertical-align: middle; }
.st-toggle input { opacity: 0; width: 0; height: 0; }
.st-slider { position: absolute; inset: 0; background: var(--bg-2); border-radius: 8px; transition: var(--dur-base); }
.st-slider::before { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: var(--text-2); border-radius: 50%; transition: var(--dur-base); }
.st-toggle input:checked + .st-slider { background: var(--gold-dim); }
.st-toggle input:checked + .st-slider::before { transform: translateX(12px); background: var(--gold); }
.st-fields { display: flex; gap: 3px; margin-top: 3px; }
.st-price, .st-margin { width: 55px; padding: 2px 4px; font-size: 10px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 3px; color: var(--text-1); text-align: right; }
.st-price:focus, .st-margin:focus { outline: none; border-color: var(--gold); }
.st-margin { width: 35px; }
.st-margin::after { content: '%'; }
.row-st { background: var(--au-bg); }
.row-st td:first-child { border-left: 2px solid var(--gold); }

/* ── Aléas / Risk Provisions ── */
.aleas-row { padding: 12px 16px; margin-bottom: 12px; }
.aleas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.aleas-header .roos-eyebrow { margin: 0; }
.aleas-summary { display: flex; align-items: center; gap: 6px; }
.aleas-total-label { font-size: 12px; color: var(--text-2); }
.aleas-total-val { font-size: 16px; font-weight: 700; color: var(--gold); font-family: var(--mono); }
.aleas-total-pct { font-size: 11px; color: var(--text-2); }
.aleas-controls { display: flex; flex-direction: column; gap: 8px; }
.aleas-global { display: flex; align-items: center; gap: 8px; }
.aleas-global label { font-size: 12px; color: var(--text-1); font-weight: 600; }
.aleas-input { width: 60px; padding: 4px 6px; font-size: 12px; background: var(--bg-0); border: 1px solid var(--border); border-radius: 4px; color: var(--text-1); text-align: right; font-family: var(--mono); }
.aleas-input:focus { outline: none; border-color: var(--gold); }
.aleas-unit { font-size: 11px; color: var(--text-2); }
.aleas-lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; margin-top: 6px; }
.aleas-lot-item { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--tint-a); border-radius: 4px; }
.aleas-lot-name { font-size: 11px; color: var(--text-1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aleas-lot-base { font-size: 10px; color: var(--text-2); font-family: var(--mono); }
.aleas-lot-input { width: 45px; font-size: 11px; padding: 2px 4px; }

/* ── Feedback Panel ── */
.feedback-panel { background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.feedback-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.feedback-header h4 { margin: 0; font-size: 14px; color: var(--gold); }
.feedback-summary { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.feedback-summary b { color: var(--text-1); }
.fb-sep { color: var(--border); }
.fb-ecart { font-weight: 700; font-size: 14px; padding: 2px 8px; border-radius: 4px; }
.fb-over { color: var(--red); background: rgba(220,60,60,0.1); }
.fb-under { color: var(--green); background: rgba(62,203,165,0.1); }
.fb-ok { color: var(--text-1); }
.feedback-empty { padding: 20px; text-align: center; color: var(--text-2); font-size: 13px; }
.feedback-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.feedback-table th { background: var(--bg-0); padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; font-size: 11px; color: var(--text-2); }
.feedback-table td { padding: 5px 8px; border-bottom: 1px solid var(--tint-a); }
.dv-feedback-btn { background: none; border: 1px solid rgba(62,203,165,0.3); color: var(--green); padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; margin-left: 6px; transition: all var(--dur-base); }
.dv-feedback-btn:hover { background: rgba(62,203,165,0.1); border-color: var(--green); }

/* ── Pricing Presets ── */
.preset-bar { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.preset-dropdown-wrap { position: relative; }
.preset-dropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 100; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; min-width: 200px; max-height: 250px; overflow-y: auto; box-shadow: 0 8px 24px var(--sh-c-b); margin-top: 4px; }
.preset-dropdown.show { display: block; }
.preset-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; cursor: pointer; transition: background var(--dur-fast); }
.preset-item:hover { background: var(--au-bg); }
.preset-name { font-size: 12px; color: var(--text-1); }
.preset-del { font-size: 14px; color: var(--text-2); cursor: pointer; padding: 0 4px; }
.preset-del:hover { color: var(--red); }
.preset-empty { display: block; padding: 12px; text-align: center; font-size: 11px; color: var(--text-2); }

/* ── Work Mode Toggle ── */
.workmode-toggle { background: none; border: 1px solid var(--border); color: var(--text-2); padding: 4px 6px; border-radius: 4px; cursor: pointer; transition: all var(--dur-base); margin-left: 6px; }
.workmode-toggle:hover { border-color: var(--gold); color: var(--gold); }
.workmode-toggle.active { background: var(--au-bg); border-color: var(--gold); color: var(--gold); }

/* ── Work Mode Overrides ── */
.work-mode .roos-corner, .work-mode .ambient-canvas, .work-mode .orb { display: none !important; }
.work-mode * { animation-duration: 0s !important; transition-duration: 0s !important; }
.work-mode .data-table td { padding: 3px 6px; font-size: 11px; }
.work-mode .data-table th { padding: 4px 6px; font-size: 10px; }
.work-mode .roos-frame { border: 1px solid var(--border); padding: 8px; }
.work-mode .summary-card { padding: 8px 10px; }
.work-mode .summary-value { font-size: 18px; }
.work-mode .decomp-card { padding: 8px 10px; }
.work-mode .sidebar { width: 140px; }
.work-mode .main-content { margin-left: 140px; }
.work-mode .nav-item { padding: 6px 10px; font-size: 11px; }
.work-mode .topbar { padding: 4px 16px; }
.work-mode h1, .work-mode h2, .work-mode h3 { font-size: 90%; }
.work-mode .roos-eyebrow { font-size: 8px; letter-spacing: 1.5px; }

/* ── Scenario Bar ── */
.scenario-bar { padding: 10px 16px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scenario-left { display: flex; align-items: center; gap: 10px; }
.scenario-left .roos-eyebrow { margin: 0; font-size: 9px; }
.scenario-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.scenario-tab { background: var(--tint-a); border: 1px solid var(--border); color: var(--text-2); padding: 4px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; transition: all var(--dur-base); position: relative; }
.scenario-tab:hover { border-color: var(--gold); color: var(--text-1); }
.scenario-tab.active { background: var(--au-bg); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.scenario-del { margin-left: 6px; font-size: 14px; opacity: 0.4; cursor: pointer; }
.scenario-del:hover { opacity: 1; color: var(--red); }
.scenario-add { background: none; border: 1px dashed var(--border); color: var(--text-2); padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all var(--dur-base); }
.scenario-add:hover { border-color: var(--gold); color: var(--gold); }
.scenario-right { display: flex; align-items: center; gap: 10px; }
.scenario-info { font-size: 11px; color: var(--text-2); }

/* ── Column Picker ── */
.col-picker { display: none; flex-wrap: wrap; gap: 6px 14px; padding: 10px 16px; margin-bottom: 8px; background: var(--tint-a); border: 1px solid var(--border); border-radius: 6px; }
.col-picker label { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-2); cursor: pointer; user-select: none; }
.col-picker label:hover { color: var(--text-1); }
.col-picker input[type="checkbox"] { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; }
.col-picker-btn { background: none; border: 1px solid var(--border); color: var(--text-2); padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all var(--dur-base); }
.col-picker-btn:hover { border-color: var(--gold); color: var(--gold); }

/* Column hide rules */
#analyseTable.hide-col-num .col-num,
#analyseTable.hide-col-lot .col-lot,
#analyseTable.hide-col-desc .col-desc,
#analyseTable.hide-col-unite .col-unite,
#analyseTable.hide-col-qty .col-qty,
#analyseTable.hide-col-hist .col-hist,
#analyseTable.hide-col-calc .col-calc,
#analyseTable.hide-col-override .col-override,
#analyseTable.hide-col-st .col-st,
#analyseTable.hide-col-mat .col-mat,
#analyseTable.hide-col-rh .col-rh,
#analyseTable.hide-col-fg .col-fg,
#analyseTable.hide-col-mg .col-mg,
#analyseTable.hide-col-ecart .col-ecart,
#analyseTable.hide-col-total .col-total,
#analyseTable.hide-col-conf .col-conf,
#analyseTable.hide-col-method .col-method { display: none; }

/* ── Compare Modal ── */
.scenario-modal-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--shade-c); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.scenario-modal { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; max-width: 95vw; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px var(--sh-c-c); }
.scenario-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.scenario-modal-header h3 { margin: 0; font-size: 16px; color: var(--gold); }
.scenario-modal-close { background: none; border: none; color: var(--text-2); font-size: 22px; cursor: pointer; padding: 4px 8px; }
.scenario-modal-close:hover { color: var(--red); }
.scenario-modal-body { padding: 16px 20px; }
.scenario-cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.scenario-cmp-table th { background: var(--bg-0); padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 11px; color: var(--text-2); position: sticky; top: 0; }
.scenario-cmp-table td { padding: 6px 10px; border-bottom: 1px solid var(--tint-a); }
.scenario-cmp-table .cmp-total-row td { border-top: 2px solid var(--gold); background: var(--au-bg); }
.cmp-up { color: var(--red); font-size: 10px; }
.cmp-down { color: var(--green); font-size: 10px; }

.td-method {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 3px;
  display: inline-block;
}
.td-method.fallback_fixed { background: rgba(192,64,64,0.15); color: var(--red); }
.td-method.no_data { background: rgba(133,122,106,0.15); color: var(--text-2); }

.conf-bar { display: inline-block; width: 50px; height: 6px; background: var(--bg-card2); border-radius: 3px; overflow: hidden; vertical-align: middle; margin-right: 4px; }
.conf-fill { height: 100%; border-radius: 3px; }

.data-table.small { font-size: 11px; }
.data-table.small thead th { padding: 6px; font-size: 9px; }
.data-table.small tbody td { padding: 6px; }

.data-table tfoot { font-weight: 600; }
.data-table tfoot td { border-top: 2px solid var(--gold-bd); padding: 10px 8px; }

/* ── Analyse View ── */
.analyse-summary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-bottom: 24px; }
.summary-card {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 20px; text-align: center;
}
.summary-label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.summary-value { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--text-0); }
.summary-card.total { border-top: 3px solid var(--gold); }
.summary-card.total .summary-value { color: var(--gold-hi); }
.summary-card.hist { border-top: 3px solid var(--blue); }
.summary-card.hist .summary-value { color: var(--blue); }
.summary-card.propose { border-top: 3px solid var(--green); }
.summary-card.propose .summary-value { color: var(--green); font-weight: 800; }
.summary-card.conf { border-top: 3px solid var(--green); }
.summary-card.conf .summary-value { color: var(--green); }
.summary-card.lines { border-top: 3px solid var(--amber); }
.summary-card.ecart { border-top: 3px solid var(--purple, #9b59b6); }
.summary-card.ecart .summary-value { color: var(--purple, #9b59b6); }
.summary-card.alerts { border-top: 3px solid var(--red); }
.summary-card.alerts .summary-value { color: var(--red); }
.summary-value.val-red { color: var(--red) !important; }
.summary-value.val-warn { color: var(--amber) !important; }

/* Risk row indicators */
.risk-row { position: relative; }
.risk-row td:first-child::before { content: '⚠'; position: absolute; left: 4px; font-size: 10px; opacity: 0.8; }
.risk-ecart { background: rgba(231,76,60,0.06); }
.risk-conf { background: var(--au-bg); }
.risk-nodata { background: rgba(149,165,166,0.08); }
.risk-clamp { background: var(--au-bg); }
.risk-row:hover { background: var(--au-bg); }

/* ── Fourchette P10-P90 (M4) ── */
.summary-card.range { border-top: 3px solid var(--blue); }
.summary-card.range .summary-value.summary-range { font-size: 16px; color: var(--blue); font-family: var(--mono); white-space: nowrap; }
.summary-sub { font-size: 10px; margin-top: 5px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.summary-sub.rb-haute { color: var(--green); }
.summary-sub.rb-moyenne { color: var(--amber); }
.summary-sub.rb-faible { color: var(--red); }

.range-badge {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  border: 1px solid transparent; line-height: 1.6;
}
.range-badge .rb-sep { opacity: 0.5; margin: 0 2px; }
.range-badge.rb-haute { color: var(--green); border-color: rgba(62,203,165,0.35); background: rgba(62,203,165,0.07); }
.range-badge.rb-moyenne { color: var(--amber); border-color: var(--gold-bd-hi); background: var(--au-bg); }
.range-badge.rb-faible { color: var(--red); border-color: rgba(231,76,60,0.30); background: rgba(231,76,60,0.06); }
.range-badge .rb-alert { margin-left: 4px; cursor: help; }

.foot-range { display: inline-block; margin-right: 14px; font-weight: 400; font-size: 11px; color: var(--text-2); font-family: var(--mono); }
.foot-range b { color: var(--blue); font-weight: 700; }

/* Chip d'alerte garde-fou dans le détail de ligne (M5) */
.dx-chip.dx-chip-alert { border-color: var(--gold-bd-hi); background: var(--au-bg); }
.dx-chip.dx-chip-alert .dx-chip-label { color: #e67e22; }
.dx-chip-aside.rb-haute { color: var(--green); }
.dx-chip-aside.rb-moyenne { color: var(--amber); }
.dx-chip-aside.rb-faible { color: var(--red); }

.decomp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.decomp-card {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 16px; position: relative;
  overflow: hidden;
}
.decomp-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.decomp-card.mat::before { background: var(--phase3a); }
.decomp-card.rh::before { background: var(--phase3b); }
.decomp-card.fg::before { background: var(--phase4a); }
.decomp-card.mg::before { background: var(--green); }

.decomp-label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 1px; }
.decomp-value { font-family: var(--mono); font-size: 16px; color: var(--text-0); margin: 6px 0; }
.decomp-pct { font-size: 20px; font-family: var(--serif); font-weight: 700; margin-bottom: 8px; }
.decomp-card.mat .decomp-pct { color: var(--phase3a); }
.decomp-card.rh .decomp-pct { color: var(--phase3b); }
.decomp-card.fg .decomp-pct { color: var(--phase4a); }
.decomp-card.mg .decomp-pct { color: var(--green); }
.decomp-sub { font-size: 0.65rem; color: var(--text-3); margin-top: -2px; margin-bottom: 4px; }

.decomp-bar { height: 6px; background: var(--bg-card2); border-radius: 3px; overflow: hidden; }
.decomp-fill { height: 100%; border-radius: 3px; transition: width 0.6s; }
.decomp-card.mat .decomp-fill { background: var(--phase3a); }
.decomp-card.rh .decomp-fill { background: var(--phase3b); }
.decomp-card.fg .decomp-fill { background: var(--phase4a); }
.decomp-card.mg .decomp-fill { background: var(--green); }

.factors-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.factor-pill {
  padding: 6px 14px; border-radius: 20px; font-size: 12px;
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
}
.factor-pill b { color: var(--gold-hi); font-family: var(--mono); }

/* ── Lot Synthesis ── */
.lots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lot-item { background: var(--bg-card); border: 1px solid var(--border-1); border-radius: 8px; padding: 12px 16px; }
.lot-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.lot-label { font-weight: 600; font-size: 0.85rem; color: var(--text-0); }
.lot-pct { font-family: var(--mono); font-size: 0.85rem; color: var(--gold-hi); font-weight: 700; }
.lot-bar { height: 5px; background: var(--bg-card2); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.lot-bar-fill { height: 100%; background: var(--gold); border-radius: 3px; transition: width 0.5s; }
.lot-meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-2); }
.lot-total { font-family: var(--mono); color: var(--text-1); }

/* ── Empty State ── */
.empty-state { text-align: center; padding: 80px 20px; }
.empty-icon { font-size: 48px; color: var(--gold-dim); margin-bottom: 16px; }
.empty-state h3 { font-size: 22px; margin-bottom: 8px; }
.empty-state p { color: var(--text-2); margin-bottom: 24px; }

/* ── Database View ── */
.db-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.db-tab {
  padding: 10px 20px; background: var(--bg-card);
  border: 1px solid var(--gold-bd); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-2); font-size: 13px; cursor: pointer;
  transition: all var(--dur-base); border-bottom: none;
}
.db-tab:hover { color: var(--text-1); }
.db-tab.active { color: var(--gold-hi); background: var(--bg-card2); border-color: var(--gold); }

.db-panel { display: none; }
.db-panel.active { display: block; }

/* ── Secondary collapsible section (commodities/forex) ── */
.db-secondary-section { margin-top: 28px; border: 1px solid var(--gold-bd); border-radius: var(--radius-sm); }
.db-secondary-toggle {
  padding: 12px 18px; cursor: pointer; font-size: 13px; color: var(--text-2);
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.db-secondary-toggle::before { content: '▸'; transition: transform var(--dur-base); font-size: 11px; }
.db-secondary-section[open] .db-secondary-toggle::before { transform: rotate(90deg); }
.db-secondary-toggle:hover { color: var(--text-1); }
.db-secondary-content { padding: 0 18px 18px; }
.db-secondary-toggle::-webkit-details-marker { display: none; }

.db-search { margin-bottom: 16px; }
.db-search input {
  width: 100%; padding: 10px 16px;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius-sm); color: var(--text-0); font-size: 13px;
}
.db-search input:focus { outline: none; border-color: var(--gold); }

.decomp-list { display: flex; flex-direction: column; gap: 12px; }
.decomp-card {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 16px;
  transition: border-color var(--dur-base);
}
.decomp-card:hover { border-color: var(--gold); }
.decomp-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.decomp-card-header h4 { font-size: 14px; color: var(--text-0); }
.decomp-header-right { display: flex; align-items: center; gap: 8px; }
.decomp-unite { font-size: 11px; color: var(--gold); padding: 2px 8px; background: var(--gold-dim); border-radius: 10px; }
.decomp-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.decomp-tag { font-size: 10px; padding: 2px 8px; background: var(--bg-card2); border-radius: 10px; color: var(--text-2); }
.decomp-tag.validated { color: var(--green); background: rgba(62,203,165,0.12); }
.decomp-date { font-size: 10px; color: var(--text-3); margin-left: auto; }
.decomp-source-badge { font-size: 10px; padding: 2px 8px; background: rgba(62,203,165,0.12); border-radius: 10px; color: var(--green); }
.decomp-cost-badge {
  font-size: 11px; font-weight: 600; color: var(--ok); padding: 2px 10px;
  background: rgba(62,203,165,0.12); border: 1px solid rgba(62,203,165,0.25);
  border-radius: 10px; white-space: nowrap;
}

/* Decomposition detail panel */
.decomp-detail {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--gold-dim);
}
.decomp-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 900px) { .decomp-detail-grid { grid-template-columns: 1fr; } }
.decomp-ref-banner {
  background: rgba(255,215,0,0.08); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm); padding: 8px 14px; margin-bottom: 12px;
  font-size: 11px; color: var(--text-1); line-height: 1.5;
}
.decomp-ref-banner strong { color: var(--gold); }
.decomp-cost-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 12px; padding: 10px 14px;
  background: var(--tint-a); border-radius: var(--radius-sm);
  border: 1px solid var(--gold-dim); font-size: 12px; color: var(--text-1);
}
.decomp-cost-summary strong { color: var(--gold); }
.decomp-cost-split { font-size: 10px; color: var(--text-3); }
.decomp-cost-pu { margin-left: auto; font-size: 12px; }
.decomp-detail-section h5 {
  font-size: 12px; color: var(--gold); margin-bottom: 8px; font-weight: 600;
}
.decomp-tbl {
  width: 100%; border-collapse: collapse; font-size: 11px;
}
.decomp-tbl th {
  text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-3); padding: 4px 8px; border-bottom: 1px solid var(--gold-dim);
}
.decomp-tbl th.r, .decomp-tbl td.r { text-align: right; }
.decomp-tbl td {
  padding: 4px 8px; color: var(--text-1); border-bottom: 1px solid var(--tint-a);
}
.decomp-tbl tfoot td {
  padding: 6px 8px; border-top: 1px solid var(--gold-dim); color: var(--gold);
}
.decomp-detail-info {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.decomp-detail-actions {
  margin-top: 12px; display: flex; justify-content: flex-end;
}
.decomp-btn-delete {
  background: rgba(244,67,54,0.1); border: 1px solid rgba(244,67,54,0.3);
  color: #f44336; padding: 6px 16px; border-radius: var(--radius-sm);
  font-size: 11px; cursor: pointer; transition: all var(--dur-base);
}
.decomp-btn-delete:hover {
  background: rgba(244,67,54,0.2); border-color: #f44336;
}

/* Data freshness banner */
.db-freshness {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  margin-bottom: 12px; background: var(--bg-card2); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm); font-size: 11px; color: var(--text-2);
}
.db-freshness .freshness-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.db-freshness .freshness-dot.fresh { background: #3ecba5; }
.db-freshness .freshness-dot.stale { background: #c89028; }
.db-freshness .freshness-dot.old { background: #c04040; }
.db-freshness-label { color: var(--text-1); font-weight: 500; }

.cat-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cat-stat-tag { padding: 4px 10px; background: var(--bg-card); border: 1px solid var(--gold-bd); border-radius: 20px; font-size: 11px; color: var(--text-1); }
.cat-stat-tag b { color: var(--gold); margin-left: 4px; }

.ent-grid { display: flex; flex-direction: column; gap: 24px; }
.ent-section h3 { font-size: 16px; margin-bottom: 12px; }
.bilan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bilan-item { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--gold-dim); font-size: 12px; }
.bilan-item span:last-child { font-family: var(--mono); color: var(--gold); }

/* ── FG Detail Section ── */
.fg-detail-section { }
.fg-formula {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: 16px;
  background: var(--bg); border: 1px solid var(--gold-dim); border-radius: var(--radius-sm);
}
.fg-formula-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gold); font-weight: 600; white-space: nowrap;
}
.fg-formula code {
  font-family: var(--mono); font-size: 12px; color: var(--text-1);
}

.fg-block { margin-bottom: 16px; }
.fg-block-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; padding: 8px 12px;
  border-radius: var(--radius-sm); margin-bottom: 8px;
}
.fg-block-header.cd-header { background: rgba(62,203,165,0.08); color: var(--green); border: 1px solid rgba(62,203,165,0.2); }
.fg-block-header.fg-header { background: var(--au-bg); color: var(--gold); border: 1px solid var(--gold-dim); }
.fg-block-header.cf-header { background: rgba(160,112,32,0.08); color: #d4995a; border: 1px solid rgba(160,112,32,0.2); }
.fg-block-icon { font-size: 10px; }
.fg-block-total { margin-left: auto; font-family: var(--mono); font-size: 13px; font-weight: 700; }

.fg-bar { width: 100%; height: 6px; background: var(--bg-card2); border-radius: 3px; overflow: hidden; }
.fg-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s var(--ease); }
.fg-bar-fill.fg-bar-indirect { background: var(--gold); }
.fg-bar-fill.fg-bar-fixed { background: #d4995a; }
.fg-bar-fill.fg-bar-direct { background: var(--green); }

/* ── Expandable category rows ── */
.fg-row-expandable { cursor: pointer; transition: background var(--dur-fast); }
.fg-row-expandable:hover { background: var(--au-bg); }
.fg-row-expandable.fg-row-open { background: var(--au-bg); }
.fg-chevron {
  display: inline-block; margin-right: 6px;
  font-size: 11px; color: var(--gold);
  transition: transform var(--dur-base) var(--ease);
}
.fg-row-open .fg-chevron { transform: rotate(90deg); }
.fg-sub-row { display: none; }
.fg-sub-row.fg-sub-open { display: table-row; }
.fg-sub-row > td { padding: 0 8px 12px 8px; border-top: none; }
.fg-sub-desc {
  font-size: 11px; color: var(--text-2); font-style: italic;
  margin: 8px 0 6px 0; padding-left: 4px;
}
.fg-sub-table {
  width: 100%; border-collapse: collapse;
  background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--border); margin-top: 4px;
}
.fg-sub-table th {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-2); padding: 6px 8px; text-align: left;
  background: var(--bg-card2); border-bottom: 1px solid var(--border);
}
.fg-sub-table th.th-num { text-align: right; }
.fg-sub-table td { font-size: 11px; padding: 5px 8px; border-bottom: 1px solid var(--border); color: var(--text-1); }
.fg-sub-table td.td-num { text-align: right; font-family: var(--mono); font-weight: 600; color: var(--text-0); }
.fg-sub-base { font-family: var(--mono); font-size: 10px; color: var(--text-2); }
.fg-sub-origine { font-size: 10px; color: var(--text-2); opacity: 0.85; }
.fg-origine-icon { font-size: 11px; margin-right: 2px; }
.fg-formula-hint {
  margin-left: auto; font-size: 10px; color: var(--text-2);
  font-style: italic; white-space: nowrap;
}

.fg-result {
  margin-top: 12px; padding: 16px 20px;
  background: var(--bg); border: 2px solid var(--gold-bd); border-radius: var(--radius);
  text-align: center;
}
.fg-result-formula {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.fg-result-num, .fg-result-den {
  font-family: var(--mono); font-size: 14px; color: var(--text-1);
  padding: 4px 12px; background: var(--bg-card); border-radius: var(--radius-sm);
}
.fg-result-div, .fg-result-eq {
  font-size: 18px; color: var(--text-2); font-weight: 300;
}
.fg-result-rate {
  font-family: var(--serif); font-size: 32px; font-weight: 700;
  color: var(--gold-hi); letter-spacing: -1px;
}
.fg-result-label {
  font-size: 11px; color: var(--text-2); margin-top: 8px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* ── Estimation params banner ── */
.est-params-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  font-size: 13px; color: var(--text-1);
}
.params-banner-icon { font-size: 18px; color: var(--gold); }
.params-banner-link {
  margin-left: auto; font-size: 12px; color: var(--gold);
  cursor: pointer; text-decoration: none; font-weight: 500;
  transition: color var(--dur-base);
}
.params-banner-link:hover { color: var(--gold-hi); }

/* ── Paramètres Entreprise View ── */
.pe-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.pe-kpi {
  padding: 18px 20px;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); text-align: center;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.pe-kpi:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px var(--au-bg);
}
.pe-kpi-value {
  font-family: var(--serif); font-size: 24px; font-weight: 700;
  color: var(--gold-hi); line-height: 1.1;
}
.pe-kpi-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-2); margin-top: 6px;
}

/* Tab bar */
.pe-tabs {
  display: flex; gap: 0; margin-bottom: 24px;
  border-bottom: 1px solid var(--gold-bd);
}
.pe-tab {
  padding: 10px 24px; font-size: 13px; font-weight: 500;
  color: var(--text-2); background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer; transition: color var(--dur-base), border-color var(--dur-base);
  font-family: var(--body);
}
.pe-tab:hover { color: var(--text-0); }
.pe-tab.active {
  color: var(--gold); border-bottom-color: var(--gold);
}

/* Tab panels */
.pe-panel { display: none; animation: peFadeIn 0.25s var(--ease); }
.pe-panel.active { display: block; }
@keyframes peFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Bilan (inside Comptabilité tab) */
.pe-bilan { margin-bottom: 28px; }

/* Year selector bar */
.pe-year-bar {
  display: flex; gap: 8px; margin-bottom: 20px;
}
.pe-year {
  padding: 6px 18px; font-size: 13px; font-weight: 600;
  font-family: var(--mono);
  color: var(--text-2); background: var(--bg-card);
  border: 1px solid var(--gold-bd); border-radius: 20px;
  cursor: pointer; transition: all var(--dur-base);
}
.pe-year:hover { color: var(--text-0); border-color: var(--gold); }
.pe-year.active {
  color: var(--bg); background: var(--gold);
  border-color: var(--gold);
}

/* ── Parameter Health Indicator ── */
.pe-health { padding: 10px 14px; margin-bottom: 16px; border-radius: 8px; border: 1px solid var(--gold-dim); background: var(--bg-card); }
.pe-health-bar { height: 6px; background: var(--tint-b); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.pe-health-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.health-ok .pe-health-fill { background: var(--green); }
.health-warn .pe-health-fill { background: var(--gold); }
.health-bad .pe-health-fill { background: var(--red); }
.pe-health-label { font-size: 11px; color: var(--text-1); font-weight: 600; }
.pe-health-details { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pe-health-dot { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.dot-ok { color: var(--green); background: rgba(62,203,165,0.08); }
.dot-miss { color: var(--red); background: rgba(192,64,64,0.08); }

/* ── Reset Factors Bar ── */
.pe-reset-bar { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 10px 14px; border-radius: 8px; background: var(--au-bg); border: 1px dashed var(--gold-dim); }
.btn-reset-factors { font-size: 12px; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--gold-dim); background: transparent; color: var(--gold); cursor: pointer; transition: all var(--dur-base); }
.btn-reset-factors:hover { background: var(--gold); color: var(--bg); }
.pe-reset-hint { font-size: 11px; color: var(--text-2); }

/* Factors two-column inside Pricing tab */
.pe-factors {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.pe-factors-col h4 {
  font-size: 13px; color: var(--gold); margin-bottom: 14px;
  padding-bottom: 6px; border-bottom: 1px solid var(--gold-bd);
}
@media (max-width: 900px) {
  .pe-factors { grid-template-columns: 1fr; }
}

/* ── Pricing Context Bar ── */
.pe-pricing-ctx { margin-bottom: 20px; }
.ctx-bar {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end;
  padding: 14px 18px; background: var(--bg-card2); border-radius: 10px;
  border: 1px solid var(--bg-card2);
}
.ctx-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 150px; }
.ctx-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-2); font-family: 'Jost', sans-serif; }
.ctx-select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-0);
  padding: 6px 10px; border-radius: 6px; font-size: 12px; font-family: 'Jost', sans-serif;
}
.ctx-select:focus { outline: none; border-color: var(--gold); }

/* ── Factor Cards ── */
.factor-card {
  background: var(--bg-card2); border-radius: 10px; padding: 14px 16px;
  border: 1px solid var(--border); margin-bottom: 10px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.factor-card:hover { border-color: var(--gold-bd); box-shadow: 0 2px 12px var(--au-bg); }
.factor-card.fc-overridden { border-left: 3px solid var(--text-2); }

.fc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fc-mode { cursor: pointer; user-select: none; }
.mode-icon { font-size: 14px; display: inline-block; padding: 2px 6px; border-radius: 6px; line-height: 1; }
.mode-auto { background: rgba(34,197,94,0.12); }
.mode-suggest { background: var(--au-bg); }
.mode-manual { background: rgba(156,163,175,0.15); }
.fc-label { font-size: 12px; color: var(--text-0); font-weight: 500; flex: 1; }

.fc-body { margin-bottom: 8px; }
.fc-range-wrap { display: flex; align-items: center; gap: 10px; }
.fc-range { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: var(--bg); border-radius: 2px; }
.fc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); cursor: pointer; }
.fc-val { font-size: 13px; color: var(--gold); font-weight: 600; min-width: 40px; text-align: right; }
.fc-input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-0);
  padding: 5px 8px; border-radius: 6px; font-size: 12px; width: 100%;
  font-family: 'Jost', sans-serif;
}
.fc-input:focus { outline: none; border-color: var(--gold); }

.fc-footer { display: flex; flex-direction: column; gap: 4px; }
.fc-conf { display: flex; align-items: center; gap: 8px; }
.conf-bar { flex: 1; height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.conf-fill { height: 100%; border-radius: 2px; transition: width 0.4s; }
.conf-high { background: #22c55e; }
.conf-mid { background: var(--gold); }
.conf-low { background: #ef4444; }
.conf-pct { font-size: 10px; color: var(--text-2); min-width: 28px; text-align: right; }
.fc-source {
  font-size: 10px; color: var(--text-3); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Projets / Clients tabs ── */
.pe-proj-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.proj-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.proj-type-badge {
  display: inline-block; font-size: 11px; padding: 4px 10px; border-radius: 6px;
  background: var(--bg-card2); border: 1px solid var(--border); color: var(--text-1);
}
.proj-type-badge b { color: var(--gold); }

/* ── Clickable project rows ── */
.proj-row-main { cursor: pointer; transition: background var(--dur-fast); }
.proj-row-main:hover { background: var(--au-bg); }
.proj-row-expanded { background: var(--au-bg) !important; }
.proj-expand-arrow {
  display: inline-block; transition: transform var(--dur-base); color: var(--gold); font-weight: bold; margin-right: 4px;
}
.proj-row-expanded .proj-expand-arrow { transform: rotate(90deg); }
.proj-row-detail td { padding: 0 !important; border-top: none !important; }
.proj-detail-panel {
  padding: 16px 20px 20px; background: var(--bg-card2); border-left: 3px solid var(--gold);
  animation: projSlideDown 0.2s var(--ease);
}
@keyframes projSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.proj-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proj-detail-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.proj-detail-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gold); margin-bottom: 8px; font-weight: 600; }
.proj-detail-field { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--tint-a); }
.proj-detail-field:last-child { border-bottom: none; }
.proj-field-label { font-size: 12px; color: var(--text-2); }
.proj-field-value { font-size: 12px; color: var(--text-1); font-weight: 500; }
.proj-val-highlight { color: var(--gold); font-weight: 600; }
.proj-detail-metiers { margin-top: 14px; }
.proj-metier-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.proj-metier-chip {
  display: inline-block; font-size: 11px; padding: 3px 10px; border-radius: 12px;
  background: var(--au-bg); border: 1px solid var(--gold-bd); color: var(--text-1);
}

.marge-ok { color: var(--ok) !important; }
.marge-warn { color: var(--gold) !important; }
.marge-bad { color: var(--err) !important; }

.statut-badge {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.statut-termine { background: rgba(34,197,94,0.12); color: var(--ok); }
.statut-en_cours, .statut-en.cours { background: var(--au-bg); color: var(--gold); }
.statut-etude { background: rgba(59,130,246,0.12); color: #3b82f6; }

.type-badge {
  display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 4px;
}
.type-fidele { background: rgba(34,197,94,0.12); color: var(--ok); }
.type-recurrent { background: var(--au-bg); color: var(--gold); }
.type-nouveau { background: rgba(59,130,246,0.12); color: #3b82f6; }

/* ══════════════════════════════════════════════════════════════
   COMPANY PROFILE DASHBOARD
   ══════════════════════════════════════════════════════════════ */
.cp-dashboard { display: flex; flex-direction: column; gap: 24px; }

/* ── Identity Card ── */
.cp-identity {
  display: flex; justify-content: space-between; align-items: flex-start;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--au-bg) 100%);
  border: 1px solid var(--gold-dim); border-radius: 12px; padding: 24px;
}
.cp-logo-area { display: flex; gap: 16px; align-items: flex-start; }
.cp-logo {
  width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), #e0a020);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 800; color: var(--bg-main);
  flex-shrink: 0;
}
.cp-id-info { display: flex; flex-direction: column; gap: 4px; }
.cp-company-name { font-size: 22px; font-weight: 700; color: var(--text-0); margin: 0; }
.cp-subtitle { font-size: 12px; color: var(--text-2); line-height: 1.5; }
.cp-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cp-badge {
  padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600;
  background: var(--au-bg); color: var(--gold); border: 1px solid var(--gold-dim);
}
.cp-contact-block { display: flex; flex-direction: column; gap: 6px; text-align: right; flex-shrink: 0; }
.cp-contact-item { font-size: 12px; color: var(--text-1); }
/* ── Regulatory Info ── */
.cp-regulatory { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0 0; border-top: 1px solid var(--gold-dim); margin-top: 4px; }
.cp-reg-item { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.cp-reg-expiring { color: var(--red); font-weight: 600; }
/* ── Expiration Badges ── */
.cp-qualif-expiring { background: rgba(192,64,64,0.08); }
.cp-qualif-expired { background: rgba(192,64,64,0.15); opacity: 0.7; }
.cp-expiry-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; vertical-align: middle; }
.cp-expiry-badge.warning { background: var(--au-bg); color: var(--gold); }
.cp-expiry-badge.expired { background: rgba(192,64,64,0.2); color: var(--red); }

/* ── Bandeau "profil à compléter" (onboarding) ── */
.cp-incomplete-banner {
  display: flex; align-items: center; gap: 18px;
  margin: 16px 0 4px; padding: 18px 22px;
  background: radial-gradient(120% 160% at 0% 0%, var(--au-bg), transparent 60%),
    var(--bg-card);
  border: 1px solid var(--gold); border-radius: 12px;
  box-shadow: 0 10px 30px -18px var(--sh-c-c);
  animation: cpIncIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cpIncIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cp-inc-mark {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--gold);
  background: var(--au-bg); border: 1px solid var(--gold-dim);
}
.cp-inc-body { flex: 1; min-width: 0; }
.cp-inc-title { font-size: 15px; font-weight: 700; color: var(--text-0); margin-bottom: 3px; }
.cp-inc-text { font-size: 12.5px; color: var(--text-2); line-height: 1.5; max-width: 620px; }
.cp-inc-cta {
  flex-shrink: 0; padding: 11px 20px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--gold), #e0a020); border: none;
  color: var(--bg-main); font-family: var(--sans); font-size: 13px; font-weight: 600;
  transition: filter var(--dur-base), transform var(--dur-base);
}
.cp-inc-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
@media (max-width: 768px) {
  .cp-incomplete-banner { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ── KPI Strip ── */
.cp-kpi-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
}
.cp-kpi {
  background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 10px;
  padding: 14px 12px; display: flex; gap: 10px; align-items: flex-start;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.cp-kpi:hover { border-color: var(--gold); box-shadow: 0 2px 12px var(--au-bg); }
.cp-kpi-icon { font-size: 22px; flex-shrink: 0; }
.cp-kpi-body { display: flex; flex-direction: column; }
.cp-kpi-value { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--text-0); }
.cp-kpi-label { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.cp-kpi-sub { font-size: 10px; color: var(--text-2); margin-top: 4px; opacity: 0.8; }
.kpi-good .cp-kpi-value { color: var(--ok); }
.kpi-warn .cp-kpi-value { color: var(--gold); }
.kpi-bad .cp-kpi-value { color: var(--err); }

/* ── ROOS Impact Banner ── */
.cp-roos-impact {
  background: linear-gradient(135deg, rgba(62,203,165,0.06) 0%, var(--au-bg) 100%);
  border: 1px solid rgba(62,203,165,0.25); border-radius: 12px; padding: 20px 24px;
}
.cp-roos-header { font-size: 14px; font-weight: 700; color: var(--text-0); margin-bottom: 14px; }
.cp-roos-logo { background: linear-gradient(135deg, #3ecba5, var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }
.cp-roos-grid {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cp-roos-metric { text-align: center; }
.cp-roos-label { font-size: 11px; color: var(--text-2); margin-bottom: 4px; }
.cp-roos-label small { opacity: 0.7; }
.cp-roos-val { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--text-0); }
.cp-roos-highlight .cp-roos-val { color: var(--ok); }
.cp-roos-arrow { font-size: 20px; color: var(--text-2); }
.cp-roos-delta {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
}
.cp-roos-delta.positive { background: rgba(62,203,165,0.15); color: var(--ok); }
.cp-roos-delta.negative { background: rgba(192,64,64,0.15); color: var(--err); }
.cp-roos-sep { width: 1px; height: 40px; background: var(--gold-dim); margin: 0 8px; }

/* ── Main Grid ── */
.cp-main-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.cp-section {
  background: var(--bg-card); border: 1px solid var(--gold-dim);
  border-radius: 12px; padding: 20px;
}
.cp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.cp-section-header h3 { font-size: 15px; font-weight: 600; color: var(--text-0); margin: 0; }

/* ── AO Filter ── */
.cp-ao-filter { display: flex; gap: 4px; }
.cp-filter-btn {
  padding: 4px 12px; border-radius: 20px; border: 1px solid var(--gold-dim);
  background: transparent; color: var(--text-2); font-size: 11px; cursor: pointer;
  transition: all var(--dur-base);
}
.cp-filter-btn:hover { border-color: var(--gold); color: var(--text-0); }
.cp-filter-btn.active { background: var(--gold); color: var(--bg-main); border-color: var(--gold); font-weight: 600; }

/* ── AO Funnel ── */
.cp-funnel { margin-bottom: 16px; }
.cp-funnel-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-funnel-label { width: 70px; font-size: 11px; color: var(--text-2); text-align: right; }
.cp-funnel-bar-wrap { flex: 1; height: 24px; background: var(--bg-main); border-radius: 6px; overflow: hidden; }
.cp-funnel-bar { height: 100%; border-radius: 6px; transition: width 0.8s var(--ease); }
.cp-funnel-count { font-family: var(--mono); font-size: 12px; color: var(--text-0); width: 80px; }
.cp-funnel-count small { color: var(--text-2); }
.cp-funnel-lost { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--text-2); padding-left: 78px; }

/* ── AO Year Chart ── */
.cp-ao-year-chart { margin-bottom: 16px; }
.cp-chart-svg { width: 100%; height: auto; }
.cp-chart-svg text { font-family: var(--sans); }
.cp-chart-label { font-size: 11px; fill: var(--text-2); }
.cp-chart-count { font-size: 10px; fill: var(--text-1); font-weight: 600; }
.cp-chart-legend { font-size: 9px; fill: var(--text-2); }

/* ── AO Table ── */
.cp-ao-table-wrap { max-height: 400px; overflow-y: auto; }
.cp-ao-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cp-ao-table th { position: sticky; top: 0; background: var(--bg-card); padding: 8px 6px; text-align: left; font-size: 11px; color: var(--text-2); border-bottom: 1px solid var(--gold-dim); z-index: 1; }
.cp-ao-table td { padding: 8px 6px; border-bottom: 1px solid var(--gold-bd); color: var(--text-1); }
.cp-ao-table tr { cursor: pointer; transition: background var(--dur-fast); }
.cp-ao-table tr:hover { background: var(--au-bg); }
.cp-ao-name { font-weight: 500; color: var(--text-0); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-ao-type-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; background: var(--au-bg); color: var(--gold); }
.cp-res-badge { padding: 3px 10px; border-radius: 12px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.cp-res-win .cp-res-badge, .cp-res-badge.cp-res-win { background: rgba(62,203,165,0.15); color: var(--ok); }
.cp-res-loss .cp-res-badge, .cp-res-badge.cp-res-loss { background: rgba(192,64,64,0.15); color: var(--err); }
.cp-res-nogo .cp-res-badge, .cp-res-badge.cp-res-nogo { background: rgba(136,136,136,0.15); color: #888; }
.cp-res-pending .cp-res-badge, .cp-res-badge.cp-res-pending { background: var(--au-bg); color: var(--gold); }
tr.cp-res-loss { background: rgba(192,64,64,0.02); }
tr.cp-res-nogo { background: rgba(136,136,136,0.02); }
tr.cp-res-pending { background: var(--au-bg); }
tr.cp-ao-has-motif td:first-child { border-left: 3px solid; }
tr.cp-res-loss.cp-ao-has-motif td:first-child { border-color: #c04040; }
tr.cp-res-nogo.cp-ao-has-motif td:first-child { border-color: #888; }

/* ── AO Detail Drawer ── */
.cp-ao-detail {
  background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 12px;
  padding: 24px; animation: fadeSlide 0.3s var(--ease);
}
.cp-ao-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.cp-ao-detail-header h3 { margin: 0; font-size: 16px; color: var(--text-0); }
.cp-ao-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.cp-ao-detail-item { display: flex; flex-direction: column; gap: 2px; }
.cp-ao-dl { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.cp-ao-detail-item span:last-child { font-size: 13px; color: var(--text-0); font-weight: 500; }
.cp-ao-motif {
  background: rgba(192,64,64,0.06); border-left: 3px solid #c04040;
  padding: 12px 16px; border-radius: 6px; font-size: 12px; color: var(--text-1); line-height: 1.5;
}
.cp-ao-linked { margin-top: 12px; font-size: 12px; color: var(--green); }

/* ── Performance Cards ── */
.cp-perf-section { display: flex; flex-direction: column; gap: 16px; }
.cp-card {
  background: var(--bg-main); border: 1px solid var(--gold-dim); border-radius: 10px;
  padding: 16px;
}
.cp-card h4 { font-size: 13px; color: var(--text-0); margin: 0 0 12px 0; font-weight: 600; }
.cp-card-failure { border-color: rgba(192,64,64,0.25); }

/* ── Horizontal Bars ── */
.cp-hbar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-hbar-label { width: 140px; font-size: 11px; color: var(--text-1); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-hbar-label small { color: var(--text-2); }
.cp-hbar-track { flex: 1; height: 16px; background: var(--bg-card); border-radius: 4px; overflow: hidden; }
.cp-hbar-fill { height: 100%; border-radius: 4px; transition: width 0.8s var(--ease); }
.bar-good { background: #3ecba5; }
.bar-ok { background: var(--gold); }
.bar-bad { background: #c04040; }
.cp-hbar-val { font-family: var(--mono); font-size: 11px; color: var(--text-0); width: 90px; }
.cp-hbar-val small { color: var(--text-2); }

/* ── Failure Analysis ── */
.cp-failure-bars { }
.cp-fail-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cp-fail-label { width: 160px; font-size: 11px; color: var(--text-1); text-align: right; }
.cp-fail-track { flex: 1; height: 14px; background: var(--bg-main); border-radius: 4px; overflow: hidden; }
.cp-fail-fill { height: 100%; border-radius: 4px; }
.cp-fail-count { font-family: var(--mono); font-size: 12px; color: var(--text-0); width: 30px; }
.cp-fail-details { margin-top: 16px; border-top: 1px solid var(--gold-dim); padding-top: 12px; }
.cp-fail-details h5 { font-size: 12px; color: var(--text-2); margin: 0 0 8px 0; }
.cp-fail-ao {
  padding: 10px; margin-bottom: 6px; background: rgba(192,64,64,0.03);
  border-left: 3px solid #c04040; border-radius: 4px; cursor: pointer; transition: background var(--dur-fast);
}
.cp-fail-ao:hover { background: rgba(192,64,64,0.08); }
.cp-fail-ao-name { font-size: 12px; font-weight: 600; color: var(--text-0); }
.cp-fail-rang { font-size: 11px; color: var(--err); margin-left: 8px; }
.cp-fail-motif { font-size: 11px; color: var(--text-2); margin-top: 4px; line-height: 1.4; }

/* ── References Grid ── */
.cp-refs-section { }
.cp-refs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cp-ref-card {
  background: var(--bg-main); border: 1px solid var(--gold-dim); border-radius: 8px;
  padding: 14px; border-left: 3px solid var(--ref-color, var(--gold));
  transition: box-shadow var(--dur-base);
}
.cp-ref-card:hover { box-shadow: 0 2px 12px var(--sh-c-a); }
.cp-ref-year { font-size: 10px; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.cp-ref-name { font-size: 13px; font-weight: 600; color: var(--text-0); margin-bottom: 2px; line-height: 1.3; }
.cp-ref-client { font-size: 11px; color: var(--text-2); margin-bottom: 8px; }
.cp-ref-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-1); margin-bottom: 2px; }
.cp-ref-type { font-weight: 600; }
.cp-ref-montant { font-family: var(--mono); color: var(--gold); }
.cp-ref-marge { font-family: var(--mono); font-weight: 600; }

/* ── Bottom Row ── */
.cp-bottom-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ── Qualifications ── */
.cp-qualif-group { margin-bottom: 16px; }
.cp-qualif-group h5 { font-size: 12px; color: var(--text-2); margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.cp-qualif-item { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gold-bd); font-size: 12px; }
.cp-qualif-code { font-family: var(--mono); color: var(--gold); font-weight: 600; min-width: 80px; }
.cp-qualif-label { color: var(--text-0); flex: 1; }
.cp-qualif-valid { color: var(--text-2); font-size: 11px; }

/* ── Clients Grid ── */
.cp-clients-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cp-client-card {
  background: var(--bg-main); border: 1px solid var(--gold-dim); border-radius: 8px;
  padding: 12px; transition: border-color var(--dur-base);
}
.cp-client-card:hover { border-color: var(--gold); }
.cp-client-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cp-client-icon { font-size: 16px; }
.cp-client-name { font-size: 12px; font-weight: 600; color: var(--text-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-client-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-1); margin-bottom: 4px; }
.cp-client-type { text-transform: capitalize; }

/* ═══════════════════════════════════════════════
   Sub-Tab Navigation for Entreprise
   ═══════════════════════════════════════════════ */
.cp-tabs {
  display: flex; gap: 4px; padding: 2px;
  background: var(--bg-card); border-radius: 10px;
  margin-bottom: 24px; overflow-x: auto;
  border: 1px solid var(--gold-dim);
}
.cp-tab {
  padding: 10px 18px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  color: var(--text-2); background: transparent;
  border: none; white-space: nowrap;
  transition: all var(--dur-base) var(--ease);
}
.cp-tab:hover { color: var(--text-0); background: var(--au-bg); }
.cp-tab.active { color: var(--gold); background: var(--au-bg); }
.cp-panel { display: none; animation: fadeSlide 0.25s var(--ease); }
.cp-panel.active { display: block; }

/* ── Grid layouts for sub-panels ── */
.cp-synth-grid, .cp-roos-impact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 900px) { .cp-synth-grid, .cp-roos-impact-grid { grid-template-columns: 1fr; } }

/* ── Carnet de commandes ── */
.cp-carnet-header { margin-bottom: 16px; }
.cp-kpi-inline { display: flex; align-items: center; gap: 12px; }
.cp-carnet-list { display: flex; flex-direction: column; gap: 12px; }
.cp-carnet-item {
  background: var(--bg-card); border: 1px solid var(--gold-dim);
  border-radius: 10px; padding: 14px 16px;
}
.cp-carnet-name { font-size: 13px; font-weight: 600; color: var(--text-0); margin-bottom: 6px; }
.cp-carnet-meta { display: flex; gap: 16px; font-size: 11px; color: var(--text-2); margin-bottom: 10px; flex-wrap: wrap; }
.cp-carnet-summary { display: flex; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--text-1); margin-bottom: 16px; }
.cp-carnet-summary span { display: flex; gap: 4px; align-items: center; }

/* ── Progress bar ── */
.cp-progress-bar {
  position: relative; height: 18px; border-radius: 9px;
  background: var(--au-bg); overflow: hidden;
}
.cp-progress-fill {
  height: 100%; border-radius: 9px;
  background: linear-gradient(90deg, var(--gold), #3ecba5);
  transition: width 0.6s var(--ease);
}
.cp-progress-label {
  position: absolute; right: 8px; top: 1px;
  font-size: 10px; font-weight: 600; color: var(--text-0);
}

/* ── Sécurité synthèse ── */
.cp-secu-hero { text-align: center; }
.cp-secu-big {
  display: flex; flex-direction: column; align-items: center;
  padding: 20px; border-radius: 12px;
  background: var(--au-bg); margin-bottom: 12px;
}
.cp-secu-big.cp-secu-good { background: rgba(62,203,165,0.08); }
.cp-secu-num { font-size: 36px; font-weight: 800; color: var(--gold); }
.cp-secu-big.cp-secu-good .cp-secu-num { color: var(--ok); }
.cp-secu-unit { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.cp-secu-badges { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cp-secu-badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 16px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--gold-dim);
  font-size: 11px; color: var(--text-2);
}
.cp-secu-val { font-size: 14px; font-weight: 700; color: var(--text-0); }

/* ── Trésorerie ── */
.cp-treso-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cp-treso-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--au-bg); font-size: 11px; color: var(--text-2); flex: 1; min-width: 70px;
}
.cp-treso-year { font-weight: 600; color: var(--text-1); }

/* ── Financial Ratios ── */
.cp-ratios-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cp-ratio-card {
  padding: 14px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--gold-dim);
  text-align: center;
}
.cp-ratio-good { border-color: rgba(62,203,165,0.3); }
.cp-ratio-warn { border-color: rgba(192,64,64,0.3); }
.cp-ratio-label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.cp-ratio-val { font-size: 18px; font-weight: 700; }
.cp-ratio-good .cp-ratio-val { color: var(--ok); }
.cp-ratio-warn .cp-ratio-val { color: var(--err); }
@media (max-width: 900px) { .cp-ratios-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════════════
   ROOS Impact — Full Section
   ═══════════════════════════════════════════════ */
.roos-hero-banner {
  background: linear-gradient(135deg, var(--au-bg), rgba(62,203,165,0.06));
  border: 1px solid var(--gold-dim); border-radius: 14px;
  padding: 28px; margin-bottom: 24px; text-align: center;
}
.roos-hero-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 8px; }
.roos-hero-logo { font-size: 28px; }
.roos-hero-title { font-size: 22px; font-weight: 800; color: var(--text-0); letter-spacing: -0.3px; }
.roos-hero-ver {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 10px; background: var(--au-bg); color: var(--gold);
}
.roos-hero-desc { font-size: 12px; color: var(--text-2); margin-bottom: 20px; }
.roos-hero-kpis { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.roos-hero-kpi {
  padding: 12px 18px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--gold-dim);
  min-width: 100px;
}
.roos-hero-kv { font-size: 20px; font-weight: 800; color: var(--gold); }
.roos-hero-kl { font-size: 10px; color: var(--text-2); margin-top: 2px; }

/* ── Timeline ── */
.roos-timeline { position: relative; padding-left: 24px; }
.roos-timeline::before {
  content: ''; position: absolute; left: 8px; top: 4px;
  width: 2px; height: calc(100% - 8px);
  background: linear-gradient(var(--gold), #3ecba5);
  border-radius: 1px;
}
.roos-tl-item { display: flex; gap: 12px; margin-bottom: 16px; position: relative; }
.roos-tl-dot {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
  position: absolute; left: -20px;
  border: 2px solid var(--bg-0);
}
.roos-tl-date { font-size: 11px; color: var(--gold); font-weight: 600; min-width: 60px; }
.roos-tl-content { flex: 1; }
.roos-tl-event { font-size: 13px; font-weight: 600; color: var(--text-0); }
.roos-tl-desc { font-size: 11px; color: var(--text-2); margin-top: 2px; }

/* ── Before/After comparison ── */
.roos-ba-grid { display: flex; flex-direction: column; gap: 6px; }
.roos-ba-row {
  display: grid; grid-template-columns: 1fr 80px 24px 80px 80px;
  align-items: center; gap: 4px; font-size: 12px;
  padding: 6px 10px; border-radius: 6px;
  background: var(--au-bg);
}
.roos-ba-label { color: var(--text-1); font-weight: 500; }
.roos-ba-pre { color: var(--text-2); text-align: right; }
.roos-ba-arrow { color: var(--gold); text-align: center; font-weight: 700; }
.roos-ba-post { color: var(--text-0); font-weight: 600; text-align: right; }
.roos-ba-delta { text-align: right; font-weight: 600; font-size: 11px; }
.roos-ba-good { color: var(--ok); }
.roos-ba-bad { color: var(--err); }

/* ── ROI section ── */
.roos-roi-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.roos-roi-card {
  flex: 1; min-width: 100px; padding: 14px; text-align: center;
  border-radius: 10px; background: var(--bg-card); border: 1px solid var(--gold-dim);
}
.roos-roi-good { border-color: rgba(62,203,165,0.3); }
.roos-roi-gold { border-color: var(--gold); }
.roos-roi-val { font-size: 18px; font-weight: 800; color: var(--text-0); }
.roos-roi-good .roos-roi-val { color: var(--ok); }
.roos-roi-gold .roos-roi-val { color: var(--gold); }
.roos-roi-label { font-size: 10px; color: var(--text-2); margin-top: 2px; }
.roos-roi-breakdown { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.roos-roi-row {
  display: flex; justify-content: space-between;
  padding: 8px 12px; border-radius: 6px;
  background: var(--au-bg); font-size: 12px; color: var(--text-1);
}
.roos-roi-row span:last-child { font-weight: 600; color: var(--ok); }

/* ── ROOS economies ── */
.roos-eco-total { font-size: 14px; color: var(--ok); margin: 12px 0 8px 0; }
.roos-eco-list { display: flex; flex-direction: column; gap: 6px; }
.roos-eco-row { display: grid; grid-template-columns: 140px 1fr 100px; align-items: center; gap: 8px; font-size: 12px; }
.roos-eco-label { color: var(--text-1); }
.roos-eco-val { text-align: right; color: var(--ok); font-weight: 600; }

/* ── ROOS usage ── */
.roos-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.roos-usage-stat {
  text-align: center; padding: 14px;
  border-radius: 10px; background: var(--bg-card); border: 1px solid var(--gold-dim);
}
.roos-usage-val { font-size: 20px; font-weight: 800; color: var(--gold); }
.roos-usage-label { font-size: 10px; color: var(--text-2); margin-top: 2px; }
.roos-modules { font-size: 12px; color: var(--text-2); margin-top: 8px; }
.roos-module-badge {
  display: inline-block; padding: 3px 10px; margin: 2px;
  border-radius: 12px; background: var(--au-bg);
  color: var(--gold); font-size: 11px; font-weight: 500;
}

/* ═══════════════════════════════════════════════
   RH & Sécurité
   ═══════════════════════════════════════════════ */
.rh-summary { display: flex; gap: 24px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.rh-big-num { display: flex; flex-direction: column; align-items: center; }
.rh-big-val { font-size: 42px; font-weight: 800; color: var(--gold); }
.rh-big-label { font-size: 12px; color: var(--text-2); }
.rh-stats { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-1); }
.rh-cats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.rh-cat-row { display: grid; grid-template-columns: 160px 1fr 80px; align-items: center; gap: 8px; font-size: 12px; }
.rh-cat-label { color: var(--text-1); }
.rh-cat-val { text-align: right; color: var(--text-0); font-weight: 600; }
.rh-pers-table { margin-top: 16px; overflow-x: auto; }

.rh-secu-hero { margin-bottom: 16px; }
.rh-secu-grid { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.rh-secu-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--au-bg); font-size: 12px; color: var(--text-2);
}
.rh-secu-item strong { color: var(--text-0); }

.rh-form-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.rh-form-stat {
  text-align: center; padding: 16px 20px;
  border-radius: 10px; background: var(--bg-card); border: 1px solid var(--gold-dim);
  flex: 1; min-width: 100px;
}
.rh-form-val { font-size: 20px; font-weight: 700; color: var(--gold); }
.rh-form-label { font-size: 10px; color: var(--text-2); margin-top: 2px; }

/* ── Responsive for new sections ── */
@media (max-width: 1200px) {
  .cp-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .cp-main-grid { grid-template-columns: 1fr; }
  .cp-bottom-row { grid-template-columns: 1fr; }
  .roos-usage-grid { grid-template-columns: repeat(2, 1fr); }
  .roos-ba-row { grid-template-columns: 1fr 60px 20px 60px 60px; font-size: 11px; }
}

/* ── Commodities View ── */
.cmdty-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--gold-dim);
}
.cmdty-status {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2);
}
.cmdty-status .status-dot { width: 8px; height: 8px; border-radius: 50%; }
.cmdty-status .status-dot.online { background: var(--green); box-shadow: 0 0 8px var(--green); }
.cmdty-status .status-dot.offline { background: var(--red); }
.cmdty-status .status-dot.pulse { background: var(--gold); animation: dotpulse 1s infinite; }
.cmdty-live-badge {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  background: rgba(62,203,165,0.15); color: var(--green);
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.cmdty-refresh-timer {
  font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-left: 8px;
}
.cmdty-loading {
  text-align: center; padding: 60px 20px; color: var(--text-2); font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.cmdty-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--gold-dim); border-top-color: var(--gold);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.cmdty-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.cmdty-card {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 16px; cursor: pointer;
  transition: border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
  position: relative; overflow: hidden;
}
.cmdty-card:hover {
  border-color: var(--accent, var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--sh-c-b);
}
.cmdty-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent, var(--gold)); opacity: 0;
  transition: opacity var(--dur-base);
}
.cmdty-card:hover::before { opacity: 1; }

/* Flash on price change */
.cmdty-flash-up { animation: flashUp 1.2s var(--ease); }
.cmdty-flash-down { animation: flashDown 1.2s var(--ease); }
@keyframes flashUp {
  0% { box-shadow: inset 0 0 0 1px rgba(62,203,165,0.5), 0 0 20px rgba(62,203,165,0.15); }
  100% { box-shadow: none; }
}
@keyframes flashDown {
  0% { box-shadow: inset 0 0 0 1px rgba(192,64,64,0.5), 0 0 20px rgba(192,64,64,0.15); }
  100% { box-shadow: none; }
}

/* Micro-tick price flash (500ms) */
.micro-up { color: var(--ok) !important; transition: color var(--dur-fast) var(--ease); }
.micro-down { color: var(--err) !important; transition: color var(--dur-fast) var(--ease); }
.cmdty-price, .fx-rate {
  transition: color var(--dur-slow) var(--ease);
}
.cmdty-live-dot.tick {
  animation: microPulse 0.4s var(--ease);
}
.fx-live-dot.tick {
  animation: microPulse 0.4s var(--ease);
}
@keyframes microPulse {
  0% { transform: scale(1.8); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}
.micro-spark polyline {
  transition: d var(--dur-slow) var(--ease);
}

.cmdty-card-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.cmdty-icon { font-size: 22px; }
.cmdty-card-info { display: flex; flex-direction: column; flex: 1; }
.cmdty-name { font-size: 13px; font-weight: 600; color: var(--text-0); }
.cmdty-unit { font-size: 10px; color: var(--text-2); }
.cmdty-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green);
  animation: livePulse 2s ease-in-out infinite;
}
.cmdty-card-mid {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
}
.cmdty-price {
  font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--text-0);
  transition: color var(--dur-slow);
}
.cmdty-change { font-size: 11px; font-weight: 600; transition: color var(--dur-slow); }
.cmdty-up { color: var(--green); }
.cmdty-down { color: var(--red); }
.cmdty-spark { height: 40px; }
.spark-svg { width: 100%; height: 100%; }

/* Commodity detail panel */
.cmdty-detail-panel {
  margin-top: 24px; padding: 24px;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius);
  animation: fadeSlide 0.3s var(--ease);
}
@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.cmdty-detail-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--gold-dim);
}
.cmdty-kpis {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.cmdty-kpi {
  flex: 1; min-width: 120px;
  padding: 12px 16px;
  background: var(--bg-card2); border: 1px solid var(--gold-dim);
  border-radius: var(--radius-sm); text-align: center;
}
.cmdty-kpi-val {
  display: block; font-family: var(--mono); font-size: 16px;
  font-weight: 700; color: var(--text-0); margin-bottom: 4px;
}
.cmdty-kpi-lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-2);
}
.cmdty-view-toggle {
  display: flex; gap: 4px; margin-bottom: 16px;
}
.cmdty-view-btn {
  padding: 6px 16px; background: var(--bg-card2); border: 1px solid var(--gold-bd);
  border-radius: var(--radius-sm); color: var(--text-2); font-size: 12px;
  cursor: pointer; transition: all var(--dur-base);
}
.cmdty-view-btn:hover { color: var(--text-1); }
.cmdty-view-btn.active { color: var(--gold-hi); background: var(--bg-card); border-color: var(--gold); }
.cmdty-chart-container { width: 100%; }
.cmdty-chart-svg { width: 100%; height: auto; }
.cmdty-chart-svg .cmdty-dot:hover { opacity: 1 !important; }

/* ── Forex Section ── */
.forex-separator {
  display: flex; align-items: center; gap: 16px;
  margin: 32px 0 20px 0;
}
.forex-sep-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bd), transparent);
}
.forex-sep-title {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  color: var(--gold-hi); letter-spacing: 0.5px; white-space: nowrap;
}
.forex-status-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.forex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
.fx-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; transition: border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
  position: relative; overflow: hidden;
}
.fx-card:hover {
  border-color: var(--accent, var(--gold));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--sh-c-a);
}
.fx-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent, var(--gold)); opacity: 0;
  transition: opacity var(--dur-base);
}
.fx-card:hover::before { opacity: 1; }
.fx-card-left {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.fx-flag { font-size: 26px; }
.fx-pair-info { display: flex; flex-direction: column; min-width: 0; }
.fx-pair-label {
  font-size: 12px; font-weight: 600; color: var(--text-0);
  letter-spacing: 0.5px;
}
.fx-rate {
  font-family: var(--mono); font-size: 18px; font-weight: 700;
  color: var(--text-0); transition: color var(--dur-slow);
}
.fx-change { font-size: 10px; font-weight: 600; }
.fx-spark { width: 160px; height: 44px; flex-shrink: 0; }

/* ── Observatory View ── */
.obs-header { margin-bottom: 16px; }
.obs-status { display: flex; align-items: center; gap: 10px; }
.obs-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-3); }
.obs-dot.working { background: var(--gold); animation: dotpulse 1s infinite; }
.obs-dot.done { background: var(--green); }
@keyframes dotpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.obs-pipeline { margin-bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 0; }

.pipe-node {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 10px 20px;
  font-size: 12px; color: var(--text-0); text-align: center; position: relative;
  min-width: 180px;
}
.pipe-node.active { border-color: var(--gold); }
.pipe-node.done { border-color: var(--green); }
.pipe-connector {
  width: 2px; height: 16px;
  background: linear-gradient(to bottom, var(--gold-bd), var(--gold-bd-hi));
  margin: 0 auto;
}
.pipe-fork, .pipe-merge { display: flex; justify-content: center; align-items: center; gap: 40px; color: var(--gold-bd); font-size: 10px; padding: 4px 0; }
.phase-block { display: flex; gap: 20px; justify-content: center; width: 100%; }
.squad-block {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 12px;
  min-width: 220px; text-align: center;
}
.squad-block h4 { font-size: 11px; color: var(--text-2); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.agent-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.agent-chip {
  font-size: 10px; padding: 3px 8px; border-radius: 12px;
  background: var(--bg-card2); color: var(--text-2); border: 1px solid transparent;
  transition: all var(--dur-base);
}
.agent-chip.working { border-color: var(--gold); color: var(--gold); animation: dotpulse 1s infinite; }
.agent-chip.done { border-color: var(--green); color: var(--green); }

.logs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
.log-panel {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); overflow: hidden;
}
.log-panel h3 {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 12px; background: var(--bg-card2); color: var(--text-2);
  border-bottom: 1px solid var(--gold-bd);
}
.log-content {
  height: 200px; overflow-y: auto; padding: 8px;
  font-size: 11px; font-family: var(--mono);
}
.log-entry { padding: 3px 0; border-bottom: 1px solid var(--gold-bd); }
.log-entry .log-time { color: var(--text-3); margin-right: 6px; }
.log-entry .log-agent { color: var(--gold); margin-right: 6px; }
.log-entry.info .log-msg { color: var(--text-1); }
.log-entry.warning .log-msg { color: var(--amber); }
.log-entry.error .log-msg { color: var(--red); }
.log-entry.success .log-msg { color: var(--green); }
.log-entry.decision .log-msg { color: var(--gold-hi); font-weight: 600; }

.decisions-timeline {
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
}
.decision-item {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--gold-dim);
}
.decision-time { color: var(--text-3); font-family: var(--mono); font-size: 10px; min-width: 70px; }
.decision-msg { color: var(--gold-hi); }

/* ── Overlays ── */
.overlay { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end; }
.overlay-backdrop { position: absolute; inset: 0; background: var(--shade-c); backdrop-filter: blur(4px); }
.overlay-panel {
  position: relative; width: 560px; max-width: 90vw; height: 100vh;
  background: var(--bg-card); border-left: 1px solid var(--gold-bd);
  overflow-y: auto; padding: 32px;
  animation: slideIn 0.25s var(--ease);
}
.overlay-panel.wide { width: 720px; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.overlay-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 1px solid var(--gold-bd); color: var(--text-2);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
  font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base);
}
.overlay-close:hover { border-color: var(--gold); color: var(--gold); }
.overlay-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); margin-bottom: 8px; }
.overlay-header h2 { font-size: 18px; margin-bottom: 8px; }
.prov-meta { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); margin-bottom: 24px; }
.method-badge {
  padding: 2px 10px; border-radius: 10px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.prov-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.prov-price {
  background: var(--bg-card2); border-radius: var(--radius);
  padding: 14px; text-align: center;
}
.prov-price-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-2); display: block; margin-bottom: 4px; }
.prov-price-value { font-family: var(--serif); font-size: 22px; font-weight: 700; }
.prov-price.calc .prov-price-value { color: var(--gold-hi); }
.prov-price.hist .prov-price-value { color: var(--blue); }
.prov-price.total .prov-price-value { color: var(--text-0); }

.prov-section { margin-bottom: 24px; }
.prov-section h3 { font-size: 13px; color: var(--gold); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--gold-bd); }

.prov-waterfall { display: flex; gap: 8px; align-items: flex-end; }
.wf-bar { display: flex; flex-direction: column; align-items: center; flex: 1; }
.wf-value { font-family: var(--mono); font-size: 11px; color: var(--text-0); margin-bottom: 4px; }
.wf-fill { width: 100%; border-radius: 3px 3px 0 0; min-height: 4px; transition: height 0.4s; }
.wf-label { font-size: 9px; color: var(--text-2); margin-top: 4px; text-transform: uppercase; }

/* ═══════════════════════════════════════════════
   DOCUMENT MODAL VIEWER
   ═══════════════════════════════════════════════ */
.doc-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: var(--shade-c); backdrop-filter: blur(6px);
  justify-content: center; align-items: flex-start;
  overflow-y: auto; padding: 40px 20px;
}
.doc-modal {
  position: relative; width: 100%; max-width: 820px;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); box-shadow: 0 20px 60px var(--sh-c-c);
  animation: docSlideIn 0.3s var(--ease);
}
@keyframes docSlideIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.doc-modal-close {
  position: absolute; top: 12px; right: 16px; z-index: 10;
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer;
  color: var(--text-1); font-size: 18px; line-height: 30px; text-align: center;
  transition: all var(--dur-base);
}
.doc-modal-close:hover { background: var(--gold-bd); color: var(--text-0); }
.doc-modal-body { padding: 0; }

/* ─── Multi-doc navigation bar ─── */
.doc-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--au-bg);
}
.doc-nav-btn {
  background: none; border: 1px solid var(--gold); border-radius: var(--radius-sm);
  color: var(--gold); padding: 5px 14px; font-size: 12px; cursor: pointer;
  transition: all var(--dur-base); font-family: var(--font-body);
}
.doc-nav-btn:hover:not(:disabled) { background: var(--gold); color: var(--bg); }
.doc-nav-btn:disabled { opacity: 0.3; cursor: default; }
.doc-nav-counter {
  text-align: center; color: var(--text-0); font-size: 13px;
  font-weight: 600; line-height: 1.3;
}
.doc-nav-label { font-weight: 400; font-size: 11px; color: var(--text-1); }

/* ─── Clickable doc links in sub-tables ─── */
.doc-link {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  color: var(--gold); font-size: 11px; text-decoration: none;
  padding: 2px 8px; border-radius: var(--radius-sm);
  background: var(--au-bg); border: 1px solid var(--gold-bd);
  transition: all var(--dur-base); white-space: nowrap;
}
.doc-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; border-radius: 8px;
  background: var(--gold); color: var(--bg); font-size: 10px; font-weight: 700;
  padding: 0 4px; margin-left: 2px;
}
.doc-link:hover {
  background: var(--au-bg); border-color: var(--gold);
  color: var(--gold-hi); text-decoration: none;
  box-shadow: 0 0 8px var(--au-bg);
}

/* ─── Loading / Error ─── */
.doc-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 20px; color: var(--text-2); font-size: 14px; gap: 16px;
}
.doc-spinner {
  width: 32px; height: 32px; border: 3px solid var(--border);
  border-top-color: var(--gold); border-radius: 50%;
  animation: docSpin 0.8s linear infinite;
}
@keyframes docSpin { to { transform: rotate(360deg); } }
.doc-error {
  padding: 60px 20px; text-align: center;
  color: var(--err); font-size: 14px;
}

/* ─── Paper document container ─── */
.doc-paper {
  position: relative; padding: 40px 48px 32px;
  background: linear-gradient(135deg, #faf8f3 0%, #f5f0e8 100%);
  color: #1a1a1a; font-family: 'Jost', sans-serif; font-size: 13px;
  line-height: 1.5; border-radius: var(--radius);
  min-height: 400px;
}
.doc-stamp {
  position: absolute; top: 24px; right: 40px;
  font-family: var(--serif); font-size: 11px; font-weight: 700;
  letter-spacing: 3px; color: rgba(200,144,40,0.25);
  transform: rotate(-8deg);
  border: 3px solid var(--gold-bd);
  padding: 4px 16px; border-radius: 4px;
}

/* ─── Document header layout ─── */
.doc-paper-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 2px solid #c89028;
}
.doc-emetteur-name {
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  color: #1a1a1a; margin-bottom: 4px;
}
.doc-emetteur-addr, .doc-emetteur-siret, .doc-emetteur-tva {
  font-size: 11px; color: #666; line-height: 1.6;
}
.doc-ref-block { text-align: right; }
.doc-type-badge {
  display: inline-block; font-family: var(--serif);
  font-size: 16px; font-weight: 700; color: var(--gold);
  letter-spacing: 2px; margin-bottom: 4px;
}
.doc-numero { font-family: var(--mono); font-size: 12px; color: #444; }
.doc-date { font-size: 12px; color: #666; margin-top: 2px; }

/* ─── Destinataire / Objet / Contexte ─── */
.doc-destinataire {
  background: #f0ece2; padding: 10px 14px; border-radius: 6px;
  margin-bottom: 12px; font-size: 12px; color: #333;
}
.doc-objet {
  background: var(--au-bg); padding: 10px 14px; border-radius: 6px;
  margin-bottom: 16px; font-size: 12px; color: #444;
  border-left: 3px solid #c89028;
}
.doc-contexte {
  background: rgba(62,203,165,0.08); padding: 10px 14px; border-radius: 6px;
  margin-bottom: 16px; font-size: 11px; color: #3a7a5c;
  border-left: 3px solid #3ecba5; display: flex; align-items: center; gap: 8px;
}
.doc-ctx-icon { font-size: 14px; }

/* ─── Info fields (bulletin, contrat, etc.) ─── */
.doc-bulletin-info, .doc-contrat-info, .doc-police-info,
.doc-amort-info, .doc-avis-info, .doc-decl-info,
.doc-releve-info, .doc-bail-info, .doc-quittance-info,
.doc-ndf-info, .doc-interne-info, .doc-emprunt-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px;
  margin-bottom: 20px; padding: 12px 16px;
  background: #f5f0e8; border-radius: 6px;
}
.doc-field { font-size: 12px; color: #333; }
.doc-field strong { color: #666; font-weight: 600; }

/* ─── Document table ─── */
.doc-table {
  width: 100%; border-collapse: collapse;
  margin: 16px 0; font-size: 12px;
}
.doc-table thead th {
  background: #e8e0d0; color: #444; font-weight: 600;
  padding: 8px 10px; text-align: left; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 2px solid #c89028;
}
.doc-table thead th.th-num { text-align: right; }
.doc-table tbody td {
  padding: 7px 10px; border-bottom: 1px solid #e8e0d0; color: #333;
}
.doc-table tbody td.td-num {
  text-align: right; font-family: var(--mono); font-weight: 500;
}
.doc-table tbody tr:hover { background: var(--au-bg); }
.doc-row-neg td { color: var(--err) !important; }
.doc-row-highlight { background: var(--au-bg) !important; }
.doc-row-highlight td { font-weight: 600; }

/* ─── Totals block ─── */
.doc-totals {
  margin: 16px 0 20px; padding: 0;
  display: flex; flex-direction: column; align-items: flex-end;
}
.doc-total-line {
  display: flex; justify-content: space-between; width: 280px;
  padding: 6px 0; border-bottom: 1px dotted #ccc;
  font-size: 12px; color: #444;
}
.doc-total-line span:last-child { font-family: var(--mono); font-weight: 600; }
.doc-total-ttc {
  border-bottom: 2px solid #c89028 !important;
  font-weight: 700 !important; font-size: 14px !important;
  color: #1a1a1a !important; padding: 8px 0 !important;
  margin-top: 4px;
}
.doc-total-ttc span:last-child { color: var(--gold) !important; font-size: 16px !important; }

/* ─── Conditions / Mentions ─── */
.doc-conditions {
  font-size: 11px; color: #666; margin-top: 20px;
  padding-top: 12px; border-top: 1px solid #ddd;
}
.doc-mentions {
  font-size: 10px; color: #999; margin-top: 8px;
  font-style: italic;
}

/* ─── Document interne content ─── */
.doc-interne-content {
  padding: 16px; background: #faf8f3; border: 1px solid #e8e0d0;
  border-radius: 6px; font-size: 12px; color: #444;
  white-space: pre-wrap; line-height: 1.8; margin-bottom: 16px;
}
.wf-bar.mat .wf-fill { background: var(--phase3a); }
.wf-bar.rh .wf-fill { background: var(--phase3b); }
.wf-bar.fg .wf-fill { background: var(--phase4a); }
.wf-bar.mg .wf-fill { background: var(--green); }

.prov-sc {
  background: var(--bg-card2); border-radius: var(--radius);
  padding: 14px; font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   SMA — WOW ANIMATIONS & DESIGN ENHANCEMENTS v44
   Ultra-design layer: glassmorphism · gold glow · cinematic motion
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */

@keyframes auroraFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmerSweep {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 6px var(--gold-dim), 0 0 12px var(--au-bg); }
  50%      { box-shadow: 0 0 20px var(--gold-dim), 0 0 40px var(--gold-dim); }
}
@keyframes glowSidePulse {
  0%,100% { border-left-color: var(--gold); box-shadow: inset 0 0 20px var(--au-bg); }
  50%     { border-left-color: var(--gold-hi); box-shadow: inset 0 0 32px var(--au-bg); }
}
@keyframes flowDown {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rowSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cardPop {
  from { opacity: 0; transform: translateY(22px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nodeCascade {
  from { opacity: 0; transform: scale(0.88) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes agentGlow {
  0%,100% { box-shadow: 0 0 4px var(--gold-dim); color: var(--gold); border-color: var(--gold); }
  50%      { box-shadow: 0 0 18px var(--gold-dim), 0 0 36px var(--gold-dim); color: var(--gold-hi); border-color: var(--gold-hi); }
}
@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes scanLine {
  0%   { transform: translateX(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes coverShine {
  from { left: -80%; }
  to   { left: 180%; }
}
@keyframes rippleOut {
  from { transform: scale(0); opacity: 0.45; }
  to   { transform: scale(4.5); opacity: 0; }
}
@keyframes connectedPulse {
  0%,100% { box-shadow: 0 0 4px var(--green), 0 0 8px rgba(62,203,165,0.2); }
  50%      { box-shadow: 0 0 14px var(--green), 0 0 28px rgba(62,203,165,0.4); }
}
@keyframes borderPulse {
  0%,100% { border-color: var(--gold-bd); }
  50%      { border-color: var(--gold-bd-hi); }
}
@keyframes tabSlide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Aurora ambient background ── */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 80% 60% at 15% 15%, var(--au-bg) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(74,144,217,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 5%,  rgba(62,203,165,0.025) 0%, transparent 45%),
    radial-gradient(ellipse 70% 70% at 50% 50%, var(--au-bg) 0%, transparent 70%);
  background-size: 100% 100%;
  animation: auroraFlow 16s ease-in-out infinite;
}

/* ── Sidebar ── */
#sidebar {
  background: linear-gradient(180deg, #04060a 0%, #060910 60%, #050810 100%);
  box-shadow: 4px 0 40px var(--sh-c-c), inset -1px 0 0 var(--au-bg);
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  animation: glowPulse 3.5s ease-in-out infinite;
  border-radius: 50%; padding: 4px;
}
.sidebar-nav .nav-item {
  position: relative; overflow: hidden;
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-right: 10px;
}
.sidebar-nav .nav-item::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--au-bg), transparent);
  transform: translateX(-200%);
  transition: transform 0s;
  pointer-events: none;
}
.sidebar-nav .nav-item:hover::before {
  transform: translateX(200%);
  transition: transform 0.5s var(--ease);
}
.sidebar-nav .nav-item:hover {
  color: var(--text-0);
  background: var(--au-bg);
}
.sidebar-nav .nav-item.active {
  background: linear-gradient(90deg, var(--au-bg), var(--au-bg));
  border-left: 2px solid var(--gold);
}
.nav-icon {
  transition: opacity var(--dur-base);
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:not(.active) .nav-icon { opacity: 0.55; }
.nav-item:hover .nav-icon { opacity: 0.9; }

/* ── Topbar ── */
#topbar {
  position: relative;
  background: rgba(5,7,11,0.88);
  backdrop-filter: blur(24px) saturate(200%);
  border-bottom: 1px solid var(--gold-bd);
  box-shadow: 0 2px 48px var(--sh-c-b);
  overflow: hidden;
}
#topbar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, transparent 100%);
  animation: scanLine 7s ease-in-out infinite;
  pointer-events: none;
}
#topbar h1 {
  background: linear-gradient(120deg, var(--text-0) 20%, var(--gold-hi) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── View entries ── */
.view.active {
  animation: viewEnter 0.45s var(--ease) both;
}

/* ── KPI Cards ── */
.kpi-card {
  position: relative; overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-bounce), border-color var(--dur-slow), box-shadow var(--dur-slow);
  animation: cardPop 0.55s var(--ease-bounce) both;
}
.kpi-card:nth-child(1) { animation-delay: 0.04s; }
.kpi-card:nth-child(2) { animation-delay: 0.09s; }
.kpi-card:nth-child(3) { animation-delay: 0.14s; }
.kpi-card:nth-child(4) { animation-delay: 0.19s; }
.kpi-card:nth-child(5) { animation-delay: 0.24s; }
.kpi-card:nth-child(6) { animation-delay: 0.29s; }
.kpi-card:hover {
  transform: translateY(-7px) scale(1.025);
  border-color: var(--gold);
  box-shadow: 0 10px 36px var(--gold-dim), 0 0 0 1px var(--au-bg);
}
.kpi-card::before {
  content: '';
  position: absolute; top: 0; left: -180%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--au-bg), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
.kpi-card:hover::before {
  left: 200%; transition: left 0.6s var(--ease);
}
.kpi-value {
  background: linear-gradient(130deg, var(--gold) 0%, var(--gold-hi) 50%, var(--gold) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  background-size: 200% auto;
  animation: goldShimmer 4.5s linear infinite;
}

/* ── ROOS Frames (glassmorphism) ── */
.roos-frame {
  background: linear-gradient(135deg, rgba(13,18,25,0.96) 0%, rgba(17,23,32,0.92) 100%);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  position: relative;
}
.roos-frame:hover {
  border-color: var(--gold-bd-hi);
  box-shadow: 0 6px 48px var(--au-bg), inset 0 0 48px var(--au-bg);
}

/* ── Buttons ── */
.btn-gold {
  position: relative; overflow: hidden;
  background: linear-gradient(130deg, var(--gold) 0%, var(--gold-hi) 50%, var(--gold) 100%);
  background-size: 200% auto;
  transition: all var(--dur-slow) var(--ease-bounce);
}
.btn-gold::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--tint-c) 50%, transparent 100%);
  transform: translateX(-150%); pointer-events: none;
}
.btn-gold:hover {
  background-position: right center;
  transform: translateY(-2px) scale(1.025);
  box-shadow: 0 6px 28px var(--gold-dim), 0 0 0 1px var(--au-bg);
}
.btn-gold:hover::after {
  transform: translateX(150%); transition: transform 0.45s var(--ease);
}
.btn-gold:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.btn-outline {
  position: relative; overflow: hidden;
  transition: all var(--dur-slow) var(--ease-bounce);
}
.btn-outline: hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--au-bg);
}
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  width: 8px; height: 8px; margin-top: -4px; margin-left: -4px;
  background: var(--tint-c);
  animation: rippleOut 0.65s var(--ease) forwards;
}

/* ── Upload Zone ── */
.upload-zone {
  position: relative;
  transition: all var(--dur-slow) var(--ease-bounce);
}
.upload-zone:hover, .upload-zone.dragover {
  transform: scale(1.012);
  box-shadow: 0 0 40px var(--au-bg);
  border-style: solid; border-color: var(--gold);
}
.upload-icon {
  transition: transform 0.4s var(--ease-bounce), filter var(--dur-slow);
}
.upload-zone:hover .upload-icon, .upload-zone.dragover .upload-icon {
  transform: translateY(-8px) scale(1.25);
  filter: drop-shadow(0 6px 10px rgba(200,144,40,0.55));
}

/* ── Pipeline / Observatory ── */
.pipe-node {
  position: relative; overflow: hidden;
  transition: all var(--dur-slow) var(--ease-bounce);
  animation: nodeCascade 0.45s var(--ease) both;
}
.pipe-node::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, var(--au-bg));
  opacity: 0; transition: opacity var(--dur-slow); pointer-events: none;
}
.pipe-node:hover::before { opacity: 1; }
.pipe-node.active {
  border-color: var(--gold);
  animation: glowPulse 2.2s ease-in-out infinite !important;
  box-shadow: 0 0 22px var(--gold-dim), inset 0 0 22px var(--au-bg);
}
.pipe-node.done {
  border-color: var(--green);
  box-shadow: 0 0 14px rgba(62,203,165,0.22);
}
.pipe-connector {
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%, var(--gold-bd) 20%, var(--gold) 50%, var(--gold-bd) 80%, transparent 100%);
  background-size: 100% 300%;
  animation: flowDown 2s linear infinite;
}
.squad-block {
  transition: all var(--dur-slow) var(--ease-bounce);
  animation: nodeCascade 0.5s var(--ease) both;
}
.squad-block:hover {
  transform: translateY(-5px);
  border-color: var(--gold-bd-hi);
  box-shadow: 0 10px 36px var(--au-bg);
}
.agent-chip {
  transition: all var(--dur-base) var(--ease-bounce);
}
.agent-chip:hover {
  transform: scale(1.12);
  border-color: var(--gold-bd-hi);
  color: var(--text-1);
}
.agent-chip.working {
  animation: agentGlow 1.3s ease-in-out infinite !important;
}
.agent-chip.done {
  box-shadow: 0 0 8px rgba(62,203,165,0.32);
}

/* ── Tables ── */
.data-table tbody tr {
  transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.data-table tbody tr:hover {
  background: var(--au-bg) !important;
  box-shadow: inset 3px 0 0 var(--gold), inset -1px 0 0 var(--au-bg);
  transform: translateX(2px);
}
.data-table thead th {
  position: relative; overflow: hidden;
}
.data-table thead th::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--au-bg), transparent);
  transform: translateX(-150%);
  animation: shimmerSweep 5s ease-in-out infinite;
  pointer-events: none;
}

/* ── DB Tabs ── */
.db-tab {
  position: relative; overflow: hidden;
  transition: all var(--dur-base) var(--ease-bounce);
}
.db-tab:hover { transform: translateY(-2px); }
.db-tab.active {
  box-shadow: 0 -2px 18px var(--au-bg), inset 0 0 24px var(--au-bg);
}

/* ── Paramètres Tabs ── */
.pe-tab { position: relative; overflow: hidden; }
.pe-tab::after {
  content: '';
  position: absolute; bottom: -1px; left: 50%; right: 50%; height: 2px;
  background: var(--gold);
  transition: left 0.32s var(--ease), right 0.32s var(--ease);
  transform-origin: center;
}
.pe-tab:hover::after, .pe-tab.active::after { left: 0; right: 0; }

/* ── Dashboard Cards ── */
.dash-card { transition: all 0.32s var(--ease-bounce); }
.dash-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 44px var(--au-bg);
}
.summary-card {
  position: relative; overflow: hidden;
  transition: all 0.32s var(--ease-bounce);
}
.summary-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--au-bg), transparent);
  opacity: 0; transition: opacity var(--dur-slow); pointer-events: none;
}
.summary-card:hover::before { opacity: 1; }
.summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--au-bg);
}

/* ── Coverage Bar shine ── */
.coverage-bar {
  position: relative; overflow: hidden;
}
.coverage-bar::after {
  content: '';
  position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--tint-c), transparent);
  animation: coverShine 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── Arch layers ── */
.arch-layer {
  transition: all 0.26s var(--ease-bounce);
}
.arch-layer:hover {
  transform: translateX(7px);
  border-color: var(--gold-bd-hi);
  background: rgba(15,21,30,0.9);
}

/* ── Progress bar shimmer ── */
.progress-fill {
  position: relative; overflow: hidden;
}
.progress-fill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--tint-c), transparent);
  animation: shimmerSweep 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── Log panels ── */
.log-panel {
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.log-panel:hover {
  border-color: var(--gold-bd-hi);
  box-shadow: 0 4px 24px var(--au-bg);
}
.log-entry {
  animation: rowSlideIn 0.25s var(--ease) both;
  transition: background var(--dur-fast);
}
.log-entry:hover { background: var(--au-bg); border-radius: 3px; }

/* ── Decisions timeline ── */
.decision-item {
  transition: all var(--dur-base) var(--ease);
}
.decision-item:hover {
  padding-left: 10px;
  background: var(--au-bg);
  border-radius: var(--radius-sm);
}

/* ── Status dot ── */
.status-dot.connected {
  animation: connectedPulse 2.2s ease-in-out infinite;
}

/* ── Obs dot ── */
.obs-dot.working {
  animation: agentGlow 1.1s ease-in-out infinite;
  box-shadow: 0 0 14px var(--gold);
}
.obs-dot.done {
  box-shadow: 0 0 10px var(--green);
  animation: connectedPulse 2.5s infinite;
}

/* ── Decomp cards (animated) ── */
.decomp-card {
  position: relative; overflow: hidden;
  transition: all var(--dur-slow) var(--ease-bounce);
}
.decomp-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(to right, var(--au-bg), transparent);
  transition: width 0.32s var(--ease); pointer-events: none;
}
.decomp-card:hover::before { width: 42%; }
.decomp-card:hover {
  transform: translateX(4px);
  border-color: var(--gold);
  box-shadow: -4px 0 0 var(--gold), 0 4px 24px var(--au-bg);
}

/* ── DX Expand ── */
.dx-panel { animation: dxIn 0.42s var(--ease) both; }
.dx-card {
  transition: all var(--dur-slow) var(--ease-bounce);
}
.dx-card:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 10px 36px var(--sh-c-b);
}

/* ── PE KPI cards ── */
.pe-kpi {
  position: relative; overflow: hidden;
  transition: all var(--dur-slow) var(--ease-bounce);
}
.pe-kpi:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 10px 32px var(--au-bg) !important;
}
.pe-kpi::before {
  content: '';
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--au-bg), transparent);
  transform: skewX(-16deg); pointer-events: none;
}
.pe-kpi:hover::before {
  left: 130%; transition: left 0.55s var(--ease);
}

/* ── Import cards ── */
.import-card {
  transition: all var(--dur-slow) var(--ease-bounce);
}
.import-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 36px var(--au-bg);
}

/* ── Factor cards ── */
.factor-card {
  transition: all var(--dur-slow) var(--ease-bounce);
}
.factor-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px var(--au-bg);
}

/* ── Overlay panel ── */
.overlay-panel {
  animation: slideIn 0.32s var(--ease) both;
  background: linear-gradient(180deg, rgba(12,16,24,0.99) 0%, rgba(9,12,18,0.99) 100%);
  backdrop-filter: blur(24px);
  box-shadow: -24px 0 70px var(--sh-c-c);
}

/* ── KNN Modal ── */
.knn-modal {
  animation: modalIn 0.42s var(--ease-bounce) both;
  border-color: var(--gold-bd-hi);
  box-shadow: 0 28px 90px var(--sh-c-c), 0 0 0 1px var(--au-bg);
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--gold-bd-hi); border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Section headings ── */
.section-heading h2 {
  background: linear-gradient(130deg, var(--text-0) 10%, var(--gold-hi) 90%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Empty state icon ── */
.empty-icon {
  display: inline-block;
  animation: glowPulse 3.2s ease-in-out infinite;
}

/* ── Focus glow ── */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 2px var(--au-bg);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

/* ── Stagger helpers (set by JS via style.animationDelay) ── */
.row-anim { animation: rowSlideIn 0.3s var(--ease) both; }

/* ── Header gradient line ── */
.roos-eyebrow {
  position: relative;
}

/* z-index stack fix: content above aurora */
#main { position: relative; z-index: 1; }
.prov-sc .sc-ref { color: var(--text-0); font-weight: 500; }
.prov-sc .sc-detail { color: var(--text-2); margin-top: 4px; }
.prov-sc .sc-conf { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; margin-top: 6px; }

.prov-factors { display: flex; flex-wrap: wrap; gap: 8px; }
.prov-factor-pill {
  padding: 6px 14px; border-radius: 20px; font-size: 11px;
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
}
.prov-factor-pill b { font-family: var(--mono); color: var(--gold-hi); }

.prov-blending {
  background: var(--bg-card2); border-radius: var(--radius);
  padding: 14px; font-size: 12px; color: var(--text-1);
}
.blend-formula {
  font-family: var(--mono); font-size: 13px; color: var(--gold-hi);
  margin-top: 8px; padding: 8px; background: var(--bg); border-radius: var(--radius-sm);
}

/* ── KNN Chart ── */
.knn-chart-wrapper {
  background: var(--bg); border-radius: var(--radius); padding: 12px;
  overflow: hidden; position: relative;
}
.knn-chart-wrapper canvas { width: 100%; height: auto; display: block; }
.knn-chart-legend {
  display: flex; gap: 18px; margin-top: 10px; font-size: 11px; color: var(--text-2);
  flex-wrap: wrap;
}
.knn-legend-item { display: flex; align-items: center; gap: 5px; }
.knn-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}

/* ── Catalogue grouped rows ── */
.cat-table { table-layout: fixed; }
.cat-table th:nth-child(1) { width: 30%; }
.cat-table th:nth-child(2) { width: 10%; }
.cat-table th:nth-child(3) { width: 10%; }
.cat-table th:nth-child(4) { width: 20%; }
.cat-table th:nth-child(5) { width: 15%; }
.cat-table th:nth-child(6) { width: 15%; }
.cat-row { cursor: pointer; transition: background var(--dur-fast); }
.cat-row:hover { background: var(--bg-card2); }
.cat-row.cat-active { background: var(--au-bg); }
.cat-chevron { display: inline-block; width: 14px; color: var(--text-3); font-size: 11px; transition: transform var(--dur-base); margin-right: 6px; }
.cat-active .cat-chevron { color: var(--gold); transform: rotate(90deg); }
.cat-best-price { color: var(--gold-hi); font-weight: 600; }
.cat-best-supplier { font-weight: 500; }
.cat-expand-row > td { padding: 0 !important; border: none !important; }
.cat-expand-panel {
  background: linear-gradient(135deg, var(--au-bg) 0%, var(--bg-card) 100%);
  border-left: 3px solid var(--gold); padding: 16px 20px 14px;
  animation: hxOpen .2s var(--ease);
}
.cat-expand-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
.cat-supplier-wrap { max-height: 260px; overflow-y: auto; }
.cat-supplier-tbl { font-size: 11px; }
.cat-supplier-tbl td, .cat-supplier-tbl th { padding: 4px 6px; }
.cat-desig { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-best-row { background: var(--au-bg); }
.cat-best-row td { font-weight: 600; }
.cat-selected-badge {
  display: inline-block; font-size: 8px; padding: 1px 5px; border-radius: 3px;
  background: var(--gold); color: var(--bg-main); font-weight: 700; margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle;
}
.cat-chart-area { margin-bottom: 8px; }
.cat-price-svg { width: 100%; height: auto; display: block; }
.cat-price-svg text { font-family: 'Jost', sans-serif; }
.cat-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text-2); flex-wrap: wrap; }
@media (max-width: 900px) { .cat-expand-body { grid-template-columns: 1fr; } }

/* ── Historique grouped rows ── */
.hist-table { table-layout: fixed; }
.hist-table th:nth-child(1) { width: 50%; }
.hist-table th:nth-child(2) { width: 12%; }
.hist-table th:nth-child(3) { width: 14%; }
.hist-table th:nth-child(4) { width: 24%; }
.hist-row { cursor: pointer; transition: background var(--dur-fast); }
.hist-row:hover { background: var(--bg-card2); }
.hist-row.hist-active { background: var(--au-bg); }
.hist-chevron { display: inline-block; width: 14px; color: var(--text-3); font-size: 11px; transition: transform var(--dur-base); margin-right: 6px; }
.hist-active .hist-chevron { color: var(--gold); }
.hist-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  background: var(--bg-card2); border-radius: 10px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
}

/* ── Historique expand panel ── */
.hist-expand-row > td { padding: 0 !important; border: none !important; }
.hx-panel {
  background: linear-gradient(135deg, var(--au-bg) 0%, var(--bg-card) 100%);
  border-left: 3px solid var(--gold); padding: 16px 20px 14px;
  animation: hxOpen .2s var(--ease);
}
@keyframes hxOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.hx-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: start; }
.hx-subtitle { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-3); margin-bottom: 8px; }
.hx-devis-wrap { max-height: 200px; overflow-y: auto; }
.hx-devis-tbl { font-size: 11px; }
.hx-devis-tbl td, .hx-devis-tbl th { padding: 4px 6px; }
.hx-devis { font-family: var(--mono); font-size: 10px; color: var(--text-2); white-space: nowrap; }
.hx-desc { font-size: 10px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.knn-kpi {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 10px;
  background: var(--bg-card2); border: 1px solid var(--border); border-radius: var(--radius-sm); min-width: 60px;
}
.knn-kpi-val { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold-hi); }
.knn-kpi-lbl { font-size: 8px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); }
.knn-loading { color: var(--text-3); font-size: 11px; font-style: italic; }
.knn-no-data { color: var(--text-3); font-size: 11px; font-style: italic; }
.hx-right { display: flex; flex-direction: column; }
.hx-chart-area { width: 100%; cursor: pointer; position: relative; border-radius: var(--radius-sm); transition: background var(--dur-fast); }
.hx-chart-area:hover { background: var(--au-bg); }
.hx-zoom-hint {
  text-align: center; font-size: 9px; color: var(--text-3); margin-top: 2px;
  opacity: 0; transition: opacity var(--dur-base);
}
.hx-chart-area:hover .hx-zoom-hint { opacity: 1; }
.hx-svg { width: 100%; height: auto; display: block; }
.hx-svg text { font-family: 'Jost', sans-serif; }
.hx-svg-full { max-width: 100%; }
.svg-label-y { fill: #6b7280; }
.svg-label-x { fill: #6b7280; }
.hx-no-data { color: var(--text-3); font-size: 12px; font-style: italic; padding: 40px 0; text-align: center; }

/* \u2500\u2500 KNN Fullscreen Modal \u2500\u2500 */
.knn-modal-overlay {
  position: fixed; inset: 0; z-index: 9000; display: none;
  background: var(--shade-c); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 24px;
}
.knn-modal-overlay.open { display: flex; }
.knn-modal {
  background: var(--bg-card); border: 1px solid var(--gold-lo); border-radius: var(--radius);
  max-width: 960px; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 28px 32px; animation: modalIn .25s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.knn-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.knn-modal-head h3 { font-family: var(--serif); font-size: 18px; color: var(--gold-hi); margin: 0; }
.knn-modal-close {
  background: none; border: 1px solid var(--border); color: var(--text-2);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px;
  display: flex; align-items: center; justify-content: center; transition: all var(--dur-fast);
}
.knn-modal-close:hover { color: var(--text-0); border-color: var(--gold); }
.knn-modal-chart { margin-bottom: 12px; }
.knn-modal-legend { display: flex; gap: 18px; font-size: 11px; color: var(--text-2); flex-wrap: wrap; margin-bottom: 16px; }
.knn-modal-tbl { font-size: 11px; }
.knn-modal-pred { margin-top: 12px; font-size: 13px; color: var(--gold-hi); }
.knn-modal-pred strong { font-family: var(--serif); font-size: 16px; }
.hx-legend {
  display: flex; gap: 14px; margin-top: 6px; font-size: 10px; color: var(--text-2); flex-wrap: wrap;
}
@media (max-width: 900px) { .hx-body { grid-template-columns: 1fr; } }

/* ══ Panneaux dépliés Personnel & Matériel ════════════════════════════════
   Les deux panneaux partagent désormais le même squelette : un bandeau
   d'indicateurs sur toute la largeur, puis deux colonnes — tableau à gauche,
   graphique à droite. Les indicateurs résument la ligne entière ; les tenir
   dans la colonne de gauche décalait d'autant le titre du graphique, et les
   deux colonnes ne commençaient jamais à la même hauteur. */
.pers-row { cursor: pointer; transition: background var(--dur-fast); }
.pers-row:hover { background: var(--bg-card2); }
.pers-row.pers-active { background: var(--au-bg); }
.pers-chevron { display: inline-block; width: 14px; color: var(--tx-4); font-size: 10px; transition: transform var(--dur-base); margin-right: 6px; }
.pers-active .pers-chevron { color: var(--gold); transform: rotate(90deg); }
.pers-expand-row > td { padding: 0 !important; border: none !important; }
.pers-expand-panel,
.mat-expand-panel {
  background: linear-gradient(135deg, var(--au-bg) 0%, var(--bg-card) 100%);
  border-left: 3px solid var(--gold); padding: 18px 22px 16px;
  animation: hxOpen .2s var(--ease);
}
.pers-expand-body { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.pers-charges-wrap { max-height: 268px; }
.pers-charges-tbl { font-size: 11px; }
.pers-charges-tbl td, .pers-charges-tbl th { padding: 5px 8px; }
.pers-sub-total > td { border-top: 1px solid var(--gold-bd); color: var(--text-0); }
.pers-chart-area { margin-bottom: 10px; }
.pers-cost-svg { width: 100%; height: auto; display: block; }
.pers-cost-svg text { font-family: var(--sans); }

/* ── Matériel ── */
.mat-row { cursor: pointer; transition: background var(--dur-fast); }
.mat-row:hover { background: var(--bg-card2); }
.mat-row.mat-active { background: var(--au-bg); }
.mat-chevron { display: inline-block; width: 14px; color: var(--tx-4); font-size: 10px; transition: transform var(--dur-base); margin-right: 6px; }
.mat-active .mat-chevron { color: var(--gold); transform: rotate(90deg); }
.mat-expand-row > td { padding: 0 !important; border: none !important; }
.mat-expand-body { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: start; }
.mat-schedule-wrap { max-height: 268px; }
.mat-schedule-tbl { font-size: 11px; }
.mat-schedule-tbl td, .mat-schedule-tbl th { padding: 5px 8px; }
.mat-schedule-tbl .is-now > td { background: var(--au-bg); }
.mat-schedule-tbl .is-now > td:first-child { color: var(--gold-hi); font-weight: 600; }
.mat-amort-svg { width: 100%; height: auto; display: block; }
.mat-amort-svg text { font-family: var(--sans); }
.mat-amort-svg .am-st0 { stop-color: var(--au); stop-opacity: 0.18; }
.mat-amort-svg .am-st1 { stop-color: var(--au); stop-opacity: 0; }
.mat-chart-area { margin-bottom: 10px; }

/* ── Éléments communs aux deux panneaux ── */
.dx-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: var(--s-2); margin-bottom: var(--s-5);
}
.mat-kpi {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px;
  background: var(--sl-1); border: 1px solid var(--ln-1);
  border-radius: var(--r-4); min-width: 0;
}
.mat-kpi.is-key { border-color: var(--gold-bd-hi); background: var(--au-bg); }
.mat-kpi-val {
  font-family: var(--serif); font-size: 19px; line-height: 1.05; font-weight: 700;
  color: var(--text-0); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mat-kpi.is-key .mat-kpi-val { color: var(--gold-hi); }
.mat-kpi-unit { font-size: 0.62em; font-family: var(--sans); color: var(--text-2); }
/* Le millésime accompagne l'intitulé sans le disputer : « VNC 2026 ». */
.mat-kpi-y { color: var(--text-2); }
.mat-kpi-lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--tx-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Les titres de section étaient en --text-3, une teinte à 35 % d'opacité :
   sous 4:1 de contraste, on devine le mot plus qu'on ne le lit. */
.pers-expand-panel .hx-subtitle,
.mat-expand-panel .hx-subtitle { color: var(--tx-3); margin-bottom: 10px; }

.dx-scroll {
  max-height: 268px; overflow: auto;
  border: 1px solid var(--ln-1); border-radius: var(--r-4);
  background: var(--sl-0);
}
.dx-scroll .data-table thead th { background: var(--sl-1); box-shadow: inset 0 -1px 0 var(--gold-bd); }
/* Le balayage doré des entêtes de tableau est une signature de la page ;
   répété sur un tableau imbriqué dans un panneau déplié, il attire l'œil sur
   un entête secondaire toutes les cinq secondes. */
.dx-scroll .data-table thead th::after { display: none; }
.dx-scroll .data-table tbody tr { border-bottom: 1px solid var(--ln-1); }
.dx-scroll .data-table tbody tr:last-child { border-bottom: none; }
/* Ces lignes-là ne s'ouvrent pas : ni curseur main, ni glissement au survol,
   ni liseré d'appel — autant de promesses qu'un clic ne tiendrait pas. */
.dx-scroll .data-table tbody tr:hover {
  background: var(--sl-1) !important;
  box-shadow: none; transform: none; cursor: default;
}
.dx-scroll .td-num { font-variant-numeric: tabular-nums; }
.dx-scroll .td-strong { color: var(--text-0); font-weight: 600; }

.dx-legend {
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-size: 10px; color: var(--text-2);
}
.dx-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dx-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.dx-dot.ch-1 { background: var(--ch-1); }
.dx-dot.ch-2 { background: var(--ch-2); }
.dx-dot.ch-3 { background: var(--ch-3); }
.dx-dot.ch-4 { background: var(--ch-4); }
.dx-dot.ch-au { background: var(--au); }
.dx-dot.ch-err { background: var(--err); }
.dx-dot.is-faded { opacity: 0.4; }

.dx-meta {
  display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap;
  font-size: 11px; color: var(--text-2);
  margin-top: var(--s-3); padding-top: var(--s-3);
  border-top: 1px solid var(--ln-1);
}
.dx-meta-k { color: var(--tx-4); }
.dx-meta strong { color: var(--text-0); font-weight: 600; }
.pers-legend, .mat-legend { margin-bottom: 0; }

@media (max-width: 1100px) {
  .pers-expand-body, .mat-expand-body { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* ── Imports ── */
.section-heading { margin-bottom: 16px; }
.section-heading h2 { font-size: 20px; }
.imports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.import-card { text-align: center; }
.import-card h3 { font-size: 14px; margin-bottom: 6px; }
.import-desc { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.import-cols { font-size: 10px; color: var(--text-3); margin-bottom: 12px; }
.import-result { font-size: 12px; margin-top: 8px; }

.deposit-intro { font-size: 12px; color: var(--text-2); margin-bottom: 12px; }

/* ── Result Overlay (text) ── */
.result-total { text-align: center; margin-bottom: 24px; }
.result-total .rt-label { font-size: 12px; color: var(--text-2); text-transform: uppercase; letter-spacing: 1.5px; }
.result-total .rt-value { font-family: var(--serif); font-size: 42px; font-weight: 700; color: var(--gold-hi); }
.result-components { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
.result-comp {
  background: var(--bg-card2); border-radius: var(--radius);
  padding: 14px; text-align: center; position: relative;
}
.result-comp::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; }
.result-comp.mat::before { background: var(--phase3a); }
.result-comp.rh::before { background: var(--phase3b); }
.result-comp.fg::before { background: var(--phase4a); }
.result-comp.mg::before { background: var(--green); }
.rc-label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.5px; }
.rc-value { font-family: var(--mono); font-size: 15px; color: var(--text-0); margin-top: 4px; }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .decomp-row { grid-template-columns: repeat(2, 1fr); }
  .imports-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  /* `body.sidebar-collapsed` pose la variable sur <body> et l'emporterait donc
     sur celle de <html> : un repli mémorisé imposerait 64 px là où la barre en
     fait 60. On la repose au même endroit. */
  :root, body.sidebar-collapsed { --sidebar-w: 60px; }
  .nav-label, .brand-text, .sys-meta { display: none; }
  .sidebar-brand { justify-content: center; padding: 16px 8px; }
  .nav-item { justify-content: center; padding: 12px 8px; }
  .nav-icon { font-size: 18px; }
  .est-controls { grid-template-columns: 1fr; }
  .occ-body { grid-template-columns: 1fr; }
  .logs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  /* Ici la barre disparaît : le tiroir doit prendre TOUTE la largeur. Sans
     cette seconde déclaration, un repli mémorisé lui laissait 64 px de vide. */
  :root, body.sidebar-collapsed { --sidebar-w: 0px; }
  #sidebar { display: none; }
  .analyse-summary { grid-template-columns: repeat(3, 1fr); }
  .logs-grid { grid-template-columns: 1fr; }
}

/* ── Final animation overrides (v44) — ensure WOW layer wins ── */
.knn-modal {
  animation: modalIn 0.42s var(--ease-bounce) both !important;
  border-color: var(--gold-bd-hi) !important;
  box-shadow: 0 28px 90px var(--sh-c-c), 0 0 0 1px var(--au-bg);
}
.pers-row, .mat-row {
  transition: background var(--dur-base), box-shadow var(--dur-base) !important;
}
.pers-row:hover, .mat-row:hover {
  background: var(--au-bg) !important;
  box-shadow: inset 3px 0 0 var(--gold);
}
.cat-row-group {
  transition: background var(--dur-base) !important;
}
.cat-row-group:hover {
  background: var(--au-bg) !important;
  box-shadow: inset 3px 0 0 var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   SMA — ULTRA PREMIUM DESIGN LAYER v44-EX
   3D · Particles · Custom Cursor · Animated Borders · Inter
   Cinéma fintech · Dark luxury · Gold neon
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS @property for animatable custom values ── */
@property --ba {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@property --ba2 {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: false;
}

/* (bloc "Ultra token layer" consolidé dans le :root principal ci-dessus) */

/* ══ BACKGROUND CANVAS ══ */
#bgCanvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.68;
}

/* ══ CUSTOM CURSOR — disabled ══ */

/* ══ ATMOSPHERIC ORBS ══ */
.app-orb {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
}
.app-orb1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, var(--au-bg) 0%, transparent 68%);
  filter: blur(110px);
  top: -28%; right: -20%;
  animation: appOrbFloat 24s ease-in-out infinite;
}
.app-orb2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 68%);
  filter: blur(90px);
  bottom: -20%; left: -14%;
  animation: appOrbFloat 30s ease-in-out infinite reverse;
}
.app-orb3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 68%);
  filter: blur(80px);
  top: 38%; left: 10%;
  animation: appOrbFloat 20s ease-in-out infinite 4s;
}
@keyframes appOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(40px, -30px) scale(1.04); }
  70%       { transform: translate(-22px, 45px) scale(0.96); }
}

/* ══ PERSPECTIVE TUNNEL GRID ══ */
.app-bg-grid {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.app-bg-grid::before {
  content: '';
  position: absolute;
  left: -120%; right: -120%; top: -18%;
  height: 65%;
  background-image:
    linear-gradient(rgba(200,144,40,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,144,40,0.055) 1px, transparent 1px);
  background-size: 66px 66px;
  transform: perspective(600px) rotateX(-78deg);
  transform-origin: 50% 0%;
  animation: appGridScrollUp 5s linear infinite;
  mask-image: radial-gradient(ellipse 90% 55% at 50% -10%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% -10%, black, transparent 70%);
}
.app-bg-grid::after {
  content: '';
  position: absolute;
  left: -120%; right: -120%; bottom: -18%;
  height: 65%;
  background-image:
    linear-gradient(rgba(200,144,40,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,144,40,0.09) 1px, transparent 1px);
  background-size: 66px 66px;
  transform: perspective(600px) rotateX(78deg);
  transform-origin: 50% 100%;
  animation: appGridScroll 5s linear infinite;
  mask-image: radial-gradient(ellipse 90% 55% at 50% 110%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 110%, black, transparent 70%);
}
@keyframes appGridScroll   { from { background-position: 0 0; } to { background-position: 0  66px; } }
@keyframes appGridScrollUp { from { background-position: 0 0; } to { background-position: 0 -66px; } }

/* ══ FONT UPGRADES ══ */
body { font-family: var(--sans); }
.kpi-value {
  font-family: 'JetBrains Mono', var(--mono) !important;
  font-size: 38px !important;
  letter-spacing: -2px !important;
  font-weight: 600 !important;
}
.kpi-label {
  font-family: var(--sans) !important;
  font-size: 9px !important;
  letter-spacing: 3.5px !important;
  font-weight: 500 !important;
}
.kpi-card { border-radius: var(--radius-lg) !important; }

.roos-eyebrow { font-family: var(--sans) !important; }
.nav-label    { font-family: var(--sans); font-weight: 500; }
.brand-name   { font-family: 'Cormorant Garamond', var(--serif) !important; font-size: 18px !important; font-weight: 300 !important; letter-spacing: 0.28em !important; }
.brand-sub    { font-family: 'Cormorant Garamond', var(--serif) !important; font-style: italic !important; font-size: 11px !important; font-weight: 300 !important; letter-spacing: 0.08em !important; }

/* ══ ANIMATED CONIC-GRADIENT BORDER on KPI CARDS ══ */
@keyframes borderSpin { to { --ba: 360deg; } }

.kpi-card {
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    conic-gradient(
      from var(--ba),
      transparent 0%,
      transparent 35%,
      var(--gold-dim) 50%,
      transparent 65%,
      transparent 100%
    ) border-box;
  border: 1px solid transparent !important;
  --ba: 0deg;
  animation:
    borderSpin 5s linear infinite,
    cardPop 0.55s var(--ease-bounce) both;
}
.kpi-card:nth-child(1) { animation-delay: 0s, 0.04s; }
.kpi-card:nth-child(2) { animation-delay: -0.83s, 0.09s; }
.kpi-card:nth-child(3) { animation-delay: -1.67s, 0.14s; }
.kpi-card:nth-child(4) { animation-delay: -2.50s, 0.19s; }
.kpi-card:nth-child(5) { animation-delay: -3.33s, 0.24s; }
.kpi-card:nth-child(6) { animation-delay: -4.17s, 0.29s; }
.kpi-card:hover {
  background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(135deg, var(--gold), var(--gold-hi), var(--gold)) border-box;
  animation-play-state: paused, running;
  box-shadow: 0 14px 44px var(--gold-dim), 0 0 60px var(--au-bg);
}

/* ══ SIDEBAR ULTRA ══ */
#sidebar {
  background: repeating-linear-gradient(-52deg,
      var(--au-bg) 0, var(--au-bg) 1px,
      transparent 1px, transparent 72px),
    linear-gradient(185deg,
      #030610 0%, #040816 30%, #050A18 65%, #04071A 100%);
  box-shadow: 4px 0 40px var(--sh-c-c),
    inset -1px 0 0 var(--au-bg),
    inset -4px 0 20px var(--sh-c-b);
}
.brand-mark {
  font-size: 32px !important;
  position: relative;
  animation: brandSpin 12s linear infinite, glowPulse 3.5s ease-in-out infinite;
  display: inline-block;
  filter: url(#glow-gold);
}
@keyframes brandSpin { to { transform: rotate(360deg); } }

.sidebar-nav {
  /* Subtle scanline overlay */
  position: relative;
}
.sidebar-nav::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    var(--au-bg) 3px, var(--au-bg) 4px
  );
}
.sidebar-nav .nav-item {
  position: relative; z-index: 1;
  border-radius: 0 10px 10px 0;
  margin-right: 12px;
}
.sidebar-nav .nav-item.active {
  background: linear-gradient(90deg,
    var(--au-bg) 0%,
    var(--au-bg) 70%,
    transparent 100%);
  border-left: 3px solid var(--gold-hi);
  box-shadow: inset 0 0 30px var(--au-bg), 4px 0 14px var(--au-bg);
}
.sidebar-footer {
  background: linear-gradient(0deg, var(--au-bg), transparent);
  border-top: 1px solid var(--gold-bd);
}

/* ══ TOPBAR ULTRA ══ */
#topbar {
  background: rgba(4,7,26,0.92) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  box-shadow: 0 1px 0 var(--au-bg), 0 4px 40px var(--sh-c-c) !important;
}
#topbar h1 {
  font-family: 'Cormorant Garamond', var(--serif) !important;
  font-weight: 300 !important;
  font-size: 28px !important;
  letter-spacing: 0.10em !important;
  background: linear-gradient(120deg, var(--text-0) 0%, var(--gold) 40%, var(--gold-hi) 70%, var(--text-0) 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: goldShimmer 6s linear infinite !important;
}
.topbar-badge {
  font-family: 'JetBrains Mono', var(--mono);
  border-radius: 20px;
  background: var(--au-bg);
  transition: all var(--dur-slow);
}
.topbar-badge:hover {
  background: var(--au-bg);
  box-shadow: 0 0 16px var(--au-bg);
}

/* ── Topbar avatar button ── */
.topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gold-bd);
  background: var(--au-bg); color: var(--gold); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all var(--dur-base);
  margin-left: 8px; padding: 0;
}
.topbar-avatar:hover { background: var(--au-bg); border-color: var(--gold); }

/* ── Database tab separator ── */
.db-tab-sep { color: var(--gold-bd); font-size: 18px; line-height: 38px; margin: 0 4px; user-select: none; }

/* ── Congés badge ── */
.conge-badge {
  background: rgba(232,93,117,0.10) !important;
  color: #e85d75 !important;
  border: 1px solid rgba(232,93,117,0.25);
}
.conge-badge:hover {
  background: rgba(232,93,117,0.20) !important;
  box-shadow: 0 0 16px rgba(232,93,117,0.25);
}
.conge-badge i { margin-right: 5px; }

/* ── Occupation badge — jauge + libellé + valeur, sur une seule ligne ── */
.occ-badge {
  display: inline-flex !important; align-items: center; gap: 7px;
  vertical-align: middle;
  padding: 3px 13px 3px 6px !important; cursor: pointer; line-height: 1;
  --occ-color: var(--gold);
}
.occ-badge:hover { transform: translateY(-1px); box-shadow: 0 0 14px color-mix(in oklab, var(--occ-color) 35%, transparent); }
.occ-gauge { width: 18px; height: 18px; transform: rotate(-90deg); flex-shrink: 0; overflow: visible; }
.occ-gauge-bg { fill: none; stroke: rgba(255,255,255,0.13); stroke-width: 4; }
.occ-gauge-fg {
  fill: none; stroke: var(--occ-color); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.8s cubic-bezier(0.22,1,0.36,1), stroke 0.4s;
  filter: drop-shadow(0 0 2px var(--occ-color));
}
.occ-lbl {
  font-family: 'JetBrains Mono', var(--mono);
  font-size: 11px; font-weight: 500; color: var(--text-1);
  white-space: nowrap;
}
.occ-val {
  font-family: 'JetBrains Mono', var(--mono);
  font-size: 13px; font-weight: 700; color: var(--occ-color);
}

/* ── Idle engins badge ── */
.idle-badge {
  background: rgba(96,165,250,0.10) !important;
  color: #60a5fa !important;
  border: 1px solid rgba(96,165,250,0.25);
}
.idle-badge:hover {
  background: rgba(96,165,250,0.20) !important;
  box-shadow: 0 0 16px rgba(96,165,250,0.25);
}
.idle-badge i { margin-right: 5px; }

/* ══ KPI ROW ULTRA ══ */
.kpi-row { gap: 14px; }

/* ══ ROOS FRAME ULTRA ══ */
.roos-frame {
  background: linear-gradient(145deg,
    rgba(13,18,28,0.97) 0%,
    rgba(11,15,23,0.95) 100%) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(12px) !important;
  transition: border-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease) !important;
}
.roos-frame:hover {
  border-color: var(--gold-bd-hi) !important;
  box-shadow: 0 8px 60px var(--au-bg),
    inset 0 0 60px var(--au-bg),
    0 0 0 1px var(--au-bg) !important;
  transform: translateY(-2px) !important;
}
/* ROOS corner accents glow on hover */
.roos-frame:hover .roos-corner.tl,
.roos-frame:hover .roos-corner.tr,
.roos-frame:hover .roos-corner.bl,
.roos-frame:hover .roos-corner.br {
  border-color: var(--gold-hi) !important;
  filter: drop-shadow(0 0 4px rgba(235,185,76,0.7));
}

/* ══ SECTION HEADINGS ULTRA ══ */
.section-heading { position: relative; margin-bottom: 20px; }
.section-heading h2 {
  font-family: var(--sans) !important;
  font-size: 22px !important; font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  background: linear-gradient(130deg, var(--text-0) 0%, var(--gold) 50%, var(--gold-hi) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.section-heading::after {
  content: '';
  position: absolute; bottom: -8px; left: 0;
  width: 40px; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* ══ BUTTONS ULTRA ══ */
.btn-gold {
  border-radius: 8px !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-hi) 50%, var(--gold) 100%) !important;
  background-size: 200% auto !important;
  box-shadow: 0 2px 12px var(--gold-dim) !important;
}
.btn-gold:hover {
  background-position: right center !important;
  box-shadow: 0 6px 28px var(--gold-dim), 0 0 0 1px var(--gold-dim) !important;
  transform: translateY(-3px) scale(1.03) !important;
}
.btn-outline {
  border-radius: 8px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
}

/* ══ DB TABS ULTRA ══ */
.db-tab {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  border-radius: 8px 8px 0 0 !important;
  transition: all var(--dur-slow) var(--ease-bounce) !important;
}
.db-tab.active {
  background: linear-gradient(180deg, var(--au-bg) 0%, var(--bg-card2) 100%) !important;
  border-color: var(--gold) !important;
  color: var(--gold-hi) !important;
  box-shadow: 0 -4px 20px var(--au-bg), inset 0 1px 0 var(--gold-dim) !important;
}

/* ══ PE TABS ULTRA ══ */
.pe-tab {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
}
.pe-tab.active {
  color: var(--gold-hi) !important;
  border-bottom-color: var(--gold-hi) !important;
  text-shadow: 0 0 20px rgba(235,185,76,0.4) !important;
}

/* ══ DATA TABLE ULTRA ══ */
.data-table thead th {
  font-family: var(--sans) !important;
  font-size: 9px !important;
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
}
.data-table thead {
  position: relative;
}
.data-table tbody tr:hover {
  background: linear-gradient(90deg,
    var(--au-bg) 0%,
    var(--au-bg) 100%) !important;
}

/* ══ PIPELINE ULTRA ══ */
.pipe-node {
  border-radius: 10px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  background: linear-gradient(145deg, rgba(15,20,30,0.98), rgba(10,14,22,0.95)) !important;
}
.pipe-node.active {
  background: linear-gradient(145deg,
    var(--au-bg) 0%,
    rgba(13,18,25,0.96) 100%) !important;
  color: var(--gold-hi) !important;
}
.pipe-node.done {
  background: linear-gradient(145deg,
    rgba(62,203,165,0.1) 0%,
    rgba(13,18,25,0.96) 100%) !important;
  color: var(--green) !important;
}
.squad-block {
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(13,18,28,0.98), rgba(10,14,22,0.95)) !important;
}
.squad-block h4 {
  font-family: var(--sans) !important;
  letter-spacing: 2px !important;
}
.agent-chip {
  font-family: 'JetBrains Mono', var(--mono) !important;
  font-size: 9px !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.agent-chip.working {
  filter: url(#glow-gold);
}

/* ══ LOG PANELS ULTRA ══ */
.log-panel {
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(13,18,28,0.98), rgba(10,14,22,0.95)) !important;
  overflow: hidden;
}
.log-panel h3 {
  font-family: var(--sans) !important;
  letter-spacing: 1.8px !important;
  background: linear-gradient(90deg, var(--bg-card2), var(--au-bg));
}

/* ══ DECISIONS TIMELINE ULTRA ══ */
.decision-msg { font-family: var(--sans) !important; }

/* ══ PROGRESS BAR ULTRA ══ */
.progress-bar {
  border-radius: 8px !important;
  overflow: hidden;
  background: var(--tint-a) !important;
}
.progress-fill {
  border-radius: 8px !important;
}

/* ══ COVERAGE BAR ULTRA ══ */
.coverage-bar-wrap {
  border-radius: 8px !important;
  background: var(--tint-a) !important;
  border: 1px solid var(--gold-bd);
  height: 36px !important;
}
.coverage-bar {
  border-radius: 8px !important;
  background: linear-gradient(90deg, var(--gold), var(--gold-hi), var(--green)) !important;
  font-family: 'JetBrains Mono', var(--mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ══ SUMMARY CARDS ULTRA ══ */
.summary-value {
  font-family: 'JetBrains Mono', var(--mono) !important;
  font-weight: 600 !important;
}
.decomp-value {
  font-family: 'JetBrains Mono', var(--mono) !important;
}

/* ══ DECOMP CARDS ULTRA ══ */
.decomp-card {
  border-radius: 10px !important;
  background: linear-gradient(145deg, rgba(13,18,28,0.98), rgba(10,14,22,0.95)) !important;
}
.decomp-card-header h4 {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}

/* ══ ARCH LAYERS ULTRA ══ */
.arch-layer {
  border-radius: 8px !important;
  background: linear-gradient(90deg,
    var(--au-bg), var(--tint-a)) !important;
}
.arch-tag {
  font-family: 'JetBrains Mono', var(--mono) !important;
  border-radius: 6px !important;
}

/* ══ PE KPI ULTRA ══ */
.pe-kpi {
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(13,18,28,0.98) 0%, rgba(10,14,22,0.95) 100%) !important;
}
.pe-kpi-value {
  font-family: 'JetBrains Mono', var(--mono) !important;
  font-weight: 600 !important;
}
.pe-kpi-label {
  font-family: var(--sans) !important;
}

/* ══ OVERLAY PANEL ULTRA ══ */
.overlay-panel {
  background: linear-gradient(180deg,
    rgba(8,11,18,0.99) 0%,
    rgba(6,8,14,0.99) 100%) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  border-left: 1px solid var(--gold-bd) !important;
}

/* ══ DASH TICKER ══ */
.dash-ticker-wrap {
  display: flex; align-items: center; gap: 0;
  background: linear-gradient(90deg,
    var(--au-bg) 0%, var(--au-bg) 30%, transparent 100%);
  border: 1px solid var(--gold-bd);
  border-radius: 8px;
  height: 36px;
  overflow: hidden;
  margin: 20px 0 0;
  position: relative;
}
.dash-ticker-wrap::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(90deg, rgba(6,9,15,0.95), transparent);
  z-index: 2; pointer-events: none;
}
.dash-ticker-wrap::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(270deg, rgba(6,9,15,0.95), transparent);
  z-index: 2; pointer-events: none;
}
.dash-ticker-label {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px 0 14px;
  font-family: 'JetBrains Mono', var(--mono);
  font-size: 9px; font-weight: 600;
  color: var(--gold-hi); letter-spacing: 2px;
  white-space: nowrap;
  border-right: 1px solid var(--gold-bd);
  height: 100%; background: var(--au-bg);
  flex-shrink: 0; z-index: 3;
}
.ticker-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: dotpulse 1.2s infinite;
  flex-shrink: 0;
}
.dash-ticker-track {
  flex: 1; overflow: hidden; height: 100%;
  display: flex; align-items: center;
}
.dash-ticker {
  display: flex; align-items: center;
  white-space: nowrap; will-change: transform;
}
.ticker-item {
  font-family: var(--sans);
  font-size: 11px; color: var(--text-2);
  padding: 0 32px;
  letter-spacing: 0.3px;
}
.ticker-item b { color: var(--gold); font-weight: 600; }

/* ══ INSIGHT CARDS ══ */
.dash-insights {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-top: 16px;
}
.dash-insight-card {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(13,18,28,0.98), rgba(10,14,22,0.95));
  border: 1px solid var(--gold-bd);
  border-radius: var(--radius-lg);
  padding: 20px 18px 16px;
  transition: all var(--dur-slow) var(--ease-bounce);
  animation: cardPop 0.55s var(--ease-bounce) both;
}
.dash-insight-card:nth-child(1) { animation-delay: 0.35s; }
.dash-insight-card:nth-child(2) { animation-delay: 0.42s; }
.dash-insight-card:nth-child(3) { animation-delay: 0.49s; }
.dash-insight-card:nth-child(4) { animation-delay: 0.56s; }
.dash-insight-card:hover {
  border-color: var(--gold-bd-hi);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px var(--au-bg), 0 0 0 1px var(--au-bg);
}
.dash-insight-link { cursor: pointer; }
.activity-item-link { cursor: pointer; }
.activity-item-link:hover { background: var(--bg-card2); }
.activity-go { color: var(--gold); font-size: 14px; margin-left: auto; opacity: 0; transition: opacity var(--dur-base); }
.activity-item-link:hover .activity-go { opacity: 1; }
.dic-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0.85;
}
.dic-eyebrow {
  font-family: var(--sans);
  font-size: 9px; font-weight: 600;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 8px; margin-top: 6px;
}
.dic-value {
  font-family: 'JetBrains Mono', var(--mono);
  font-size: 28px; font-weight: 600;
  color: var(--gold-hi);
  line-height: 1; margin-bottom: 6px;
  background: linear-gradient(130deg, var(--gold) 0%, var(--gold-hi) 60%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dic-unit {
  font-size: 14px; opacity: 0.7;
  background: linear-gradient(130deg, var(--gold) 0%, var(--gold-hi) 60%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.dic-sub {
  font-family: var(--sans);
  font-size: 10px; color: var(--text-2); margin-bottom: 12px;
}
.dic-chart { height: 36px; }
.dic-chart svg { width: 100%; height: 100%; overflow: visible; }

/* ── sparkline draw animation ── */
@keyframes pathDraw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}
.spark-line {
  stroke-dasharray: 1000;
  animation: pathDraw 1.4s var(--ease) forwards;
}

/* ══ FACTORY CARD GENERAL ══ */
.import-card { border-radius: 10px !important; }
.import-card h3 { font-family: var(--sans) !important; font-weight: 600 !important; }

/* ══ EMPTY STATE ULTRA ══ */
.empty-state h3 { font-family: var(--sans) !important; font-weight: 600 !important; }

/* ══ 3D TILT CARDS ══ */
.kpi-card, .dash-card, .summary-card, .pe-kpi, .dash-insight-card {
  transform-style: preserve-3d;
}

/* ══ FACTOR CARD ULTRA ══ */
.factor-card { border-radius: 10px !important; }

/* ══ CUSTOM SCROLLBAR ULTRA ══ */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--tint-a); border-radius: 2px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--gold-bd-hi), var(--gold));
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-hi); }

/* ══ DASHBOARD v2 — Smart Alerts ══ */
.dash-alerts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
  animation: viewEnter 0.45s var(--ease) both;
}
.dash-alert {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 8px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
  flex: 1 1 auto; min-width: 240px;
}
.alert-icon {
  font-size: 13px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0; font-weight: 700;
}
.alert-ok   { background: rgba(62,203,165,0.06); border-color: rgba(62,203,165,0.2); color: var(--green); }
.alert-ok .alert-icon { background: rgba(62,203,165,0.15); color: var(--green); }
.alert-warn { background: var(--au-bg); border-color: var(--gold-bd); color: var(--gold); }
.alert-warn .alert-icon { background: var(--au-bg); color: var(--gold); }
.alert-error { background: rgba(192,64,64,0.06); border-color: rgba(192,64,64,0.25); color: var(--red); }
.alert-error .alert-icon { background: rgba(192,64,64,0.15); color: var(--red); }
.alert-info  { background: rgba(74,144,217,0.06); border-color: rgba(74,144,217,0.2); color: var(--blue); }
.alert-info .alert-icon { background: rgba(74,144,217,0.15); color: var(--blue); }

/* ══ Data Completeness Gauge ══ */
.dash-separator {
  height: 1px; background: var(--au-bg);
  margin: 10px 0;
}
.completeness-gauge-wrap {
  display: flex; justify-content: center; padding: 6px 0 0;
}
.completeness-gauge { width: 120px; height: 70px; }

/* ══ System Health Grid ══ */
.sys-health-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.sys-health-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--tint-a);
  border-radius: 6px;
  font-size: 11px;
}
.sys-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-2);
  transition: background var(--dur-slow), box-shadow var(--dur-slow);
}
.sys-dot-ok { background: var(--green); box-shadow: 0 0 6px rgba(62,203,165,0.5); }
.sys-dot-warn { background: var(--gold); box-shadow: 0 0 6px var(--gold-dim); }
.sys-dot-error { background: var(--red); box-shadow: 0 0 6px rgba(192,64,64,0.5); }
.sys-dot-info { background: var(--blue); box-shadow: 0 0 4px rgba(74,144,217,0.4); }
.sys-label { flex: 1; color: var(--text-2); }
.sys-status { color: var(--text-1); font-weight: 500; font-family: 'JetBrains Mono', var(--mono); font-size: 10px; }

.arch-compact .arch-layer { padding: 6px 10px; font-size: 10px; }
.arch-compact .arch-arrow { font-size: 11px; }
.arch-compact .arch-tag { font-size: 8px; padding: 1px 6px; }

/* ══ Occupation Ring ══ */
.occupation-gauge-wrap {
  display: flex; justify-content: center; padding: 6px 0 0;
}
.occupation-ring { width: 80px; height: 80px; }

/* ══ Activity Timeline ══ */
.dash-activity {
  margin-top: 14px;
  padding: 16px 20px;
}
.activity-timeline {
  display: flex; flex-direction: column; gap: 6px;
}
.activity-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--tint-a);
  font-size: 11px;
  transition: background var(--dur-base);
}
.activity-item:hover { background: var(--au-bg); }
.activity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
}
.activity-time {
  color: var(--text-2); font-family: 'JetBrains Mono', var(--mono);
  font-size: 10px; min-width: 130px; flex-shrink: 0;
}
.activity-desc { color: var(--text-1); }
.activity-desc b { color: var(--gold); }

/* ══ Refresh Bar ══ */
.dash-refresh-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 0;
  border-top: 1px solid var(--gold-bd);
  margin-top: 16px;
}
.dash-refresh-text {
  font-size: 10px; color: var(--text-2);
  font-family: 'JetBrains Mono', var(--mono);
}
.btn-icon-sm {
  background: transparent; border: 1px solid var(--gold-bd);
  color: var(--gold); width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base);
}
.btn-icon-sm:hover {
  background: var(--au-bg); border-color: var(--gold);
  transform: rotate(90deg);
}

/* ══ Loading placeholder for insight values ══ */
.dic-loading {
  background: linear-gradient(90deg, var(--gold-bd) 25%, var(--gold-dim) 50%, var(--gold-bd) 75%);
  background-size: 200% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmerSweep 1.5s ease-in-out infinite;
  font-size: 20px; letter-spacing: 4px;
}

/* ══ z-index fix: content above canvas & grid ══ */
#main { position: relative; z-index: 1; }
#sidebar { z-index: 100; }
#bgCanvas, .app-bg-grid, .app-orb, body::before, body::after { z-index: 0; }

/* ══ RESPONSIVE INSIGHT CARDS ══ */
@media (max-width: 1200px) {
  .dash-insights { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dash-insights { grid-template-columns: 1fr 1fr; }
  .dash-alerts { flex-direction: column; }
  .dash-alert { min-width: auto; }
  .sys-health-row { font-size: 10px; }
  .activity-time { min-width: 100px; }
}


/* ═══════════════════════════════════════════════════════════════
   PLANNING INTERACTIF — Redesign v2 "Mission Control"
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes plan-bar-in {
  from { opacity: 0; transform: scaleX(0); transform-origin: left center; }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes plan-kpi-glow {
  0%, 100% { text-shadow: 0 0 12px rgba(235,185,76,0.25); }
  50%       { text-shadow: 0 0 28px rgba(235,185,76,0.6), 0 0 40px rgba(200,144,40,0.25); }
}
@keyframes plan-today-pulse {
  0%, 100% { opacity: 0.65; box-shadow: 0 0 6px 0 rgba(192,64,64,0.5); }
  50%       { opacity: 1;    box-shadow: 0 0 14px 3px rgba(192,64,64,0.8); }
}
@keyframes plan-tl-appear {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes plan-tl-appear-r {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Planning Mode Tabs (Actuel / Prévisionnel) ── */
.plan-mode-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.plan-mode-tab {
  padding: 10px 24px; background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; border-bottom: none;
  color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--dur-base);
}
.plan-mode-tab:hover { color: var(--text-1); }
.plan-mode-tab.active { color: var(--gold-hi); background: var(--bg-card2); border-color: var(--gold); }
.plan-mode-panel { display: none; }
.plan-mode-panel.active { display: block; }

/* ── Toolbar ── */
.plan-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 14px; margin-bottom: 22px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(12,16,24,0.9) 0%, rgba(8,11,15,0.95) 100%);
  border: 1px solid var(--gold-bd);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.plan-toolbar-left  { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.plan-toolbar-right { display: flex; gap: 5px; align-items: center; }

.plan-filter-group { display: flex; flex-direction: column; gap: 5px; }
.plan-filter-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 2px;
  color: rgba(200,144,40,0.6); font-weight: 600; padding-left: 2px;
}
.plan-select {
  background: rgba(8,11,15,0.8);
  border: 1px solid var(--gold-bd);
  color: var(--text-1); padding: 7px 14px 7px 10px; border-radius: 8px;
  font-size: 12px; cursor: pointer; min-width: 128px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c89028' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
.plan-select:hover  { border-color: var(--gold); box-shadow: 0 0 0 2px var(--au-bg); }
.plan-select:focus  { border-color: var(--gold); box-shadow: 0 0 0 3px var(--au-bg); outline: none; }
.plan-select option { background: #0c1018; color: var(--text-0); }

/* View buttons – pill style */
.plan-view-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--gold-bd);
  color: var(--text-2); padding: 7px 15px; border-radius: 20px;
  font-size: 11.5px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  transition: all var(--dur-base);
  letter-spacing: 0.3px;
  overflow: hidden;
}
.plan-view-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--au-bg) 0%, var(--au-bg) 100%);
  transition: background var(--dur-base);
  border-radius: 20px;
}
.plan-view-btn:hover {
  border-color: var(--gold-bd-hi);
  color: var(--text-1);
}
.plan-view-btn.active {
  border-color: var(--gold);
  color: var(--gold-hi);
  font-weight: 600;
  box-shadow: 0 0 14px var(--au-bg), inset 0 0 20px var(--au-bg);
  background: var(--au-bg);
}
.plan-view-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.plan-view-sep {
  width: 1px; height: 24px; background: var(--au-bg); margin: 0 6px;
  align-self: center;
}

/* ── KPI Strip — animated counters ── */
.plan-kpi-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-bottom: 22px;
}
.plan-kpi {
  position: relative; overflow: hidden; min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--gold-bd);
  border-radius: var(--radius-lg); padding: 18px 14px 14px;
  text-align: center;
  transition: border-color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
/* Planning : révélation orchestrée + stagger des KPIs (passe audacieuse §3) */
#view-planning.active .plan-mode-tabs,
#view-planning.active .plan-toolbar {
  animation: roos-fade-up var(--dur-slow) var(--ease-out) both;
}
#view-planning.active .plan-mode-tabs { animation-delay: 20ms; }
#view-planning.active .plan-toolbar   { animation-delay: 80ms; }
#view-planning.active .plan-kpi { animation: roos-fade-up var(--dur-base) var(--ease-out) both; }
#view-planning.active .plan-kpi:nth-child(1) { animation-delay: 140ms; }
#view-planning.active .plan-kpi:nth-child(2) { animation-delay: 170ms; }
#view-planning.active .plan-kpi:nth-child(3) { animation-delay: 200ms; }
#view-planning.active .plan-kpi:nth-child(4) { animation-delay: 230ms; }
#view-planning.active .plan-kpi:nth-child(5) { animation-delay: 260ms; }
@media (prefers-reduced-motion: reduce) {
  #view-planning.active .plan-mode-tabs,
  #view-planning.active .plan-toolbar,
  #view-planning.active .plan-kpi {
    animation-name: roos-fade-in; animation-duration: 100ms; animation-delay: 0ms !important;
  }
}
.plan-kpi::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.plan-kpi:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px var(--sh-c-b), 0 0 20px var(--au-bg);
}
.plan-kpi-icon {
  font-size: 18px; margin-bottom: 8px; display: block; opacity: 0.65;
}
.plan-kpi-value {
  font-family: var(--serif); font-size: 28px; font-weight: 700;
  color: var(--gold-hi); line-height: 1.15;
  animation: plan-kpi-glow 3.5s ease-in-out infinite;
}
.plan-kpi-label {
  font-size: 9.5px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: 1.5px; margin-top: 5px; font-weight: 500;
}
.plan-kpi-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.3; transform: scaleX(0);
  transition: transform .8s var(--ease), opacity .4s;
}
.plan-kpi:hover .plan-kpi-bar { transform: scaleX(1); opacity: 0.6; }

/* ── Panel switching ── */
.plan-panel { display: none; min-width: 0; }
.plan-panel.active { display: block; animation: fadeInUp .3s var(--ease); overflow: hidden; }

/* ── Gantt Chart ── */
.plan-gantt-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--gold-bd);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 24px var(--sh-c-a);
}
.plan-gantt-header {
  display: flex; border-bottom: 1px solid var(--gold-bd);
  background: linear-gradient(180deg, rgba(14,18,28,1) 0%, rgba(10,14,20,1) 100%);
}
.plan-gantt-header .gantt-label-col {
  min-width: 280px; max-width: 280px; padding: 12px 18px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px;
  color: rgba(200,144,40,0.5); font-weight: 700;
  border-right: 1px solid var(--gold-bd);
  display: flex; align-items: center;
}
.gantt-timeline-header {
  flex: 1; display: flex; overflow: hidden;
}
.gantt-month {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 2px; font-size: 11.5px; color: var(--text-1); font-weight: 600;
  border-right: 1px solid var(--gold-bd);
  letter-spacing: 0.3px;
}
.gantt-month-year { font-size: 9px; color: rgba(200,144,40,0.45); margin-top: 2px; font-weight: 400; }

.plan-gantt-body {
  max-height: 540px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(200,144,40,0.25) transparent;
}
.plan-gantt-body::-webkit-scrollbar { width: 6px; }
.plan-gantt-body::-webkit-scrollbar-thumb { background: var(--au-bg); border-radius: 3px; }

.gantt-row {
  display: flex;
  border-bottom: 1px solid var(--gold-bd);
  cursor: pointer; transition: background var(--dur-fast);
}
.gantt-row:nth-child(even) { background: var(--au-bg); }
.gantt-row:hover { background: var(--au-bg); }
.gantt-row .gantt-label-col {
  min-width: 280px; max-width: 280px; padding: 10px 18px;
  border-right: 1px solid var(--gold-bd);
  display: flex; flex-direction: column; justify-content: center;
}

/* Color strip on left edge of label col */
.gantt-row .gantt-label-col { border-left: 3px solid transparent; }

.gantt-proj-name {
  font-size: 12.5px; color: var(--text-0); font-weight: 600;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gantt-proj-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
}
.gantt-badge {
  font-size: 9px; padding: 2px 8px; border-radius: 12px;
  color: rgba(0,0,0,0.85); font-weight: 700; letter-spacing: 0.2px;
  white-space: nowrap; text-shadow: none;
}
.gantt-client {
  font-size: 10px; color: var(--text-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.gantt-timeline-row {
  flex: 1; position: relative; min-height: 62px;
  display: flex; align-items: center;
}

/* Alternating row bands on timeline */
.gantt-row:nth-child(even) .gantt-timeline-row {
  background: repeating-linear-gradient(90deg, transparent 0%, transparent 99.5%, var(--au-bg) 100%);
}

.gantt-bar {
  position: absolute; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; min-width: 36px;
  animation: plan-bar-in .45s var(--ease) both;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), filter var(--dur-fast);
}
.gantt-bar::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, var(--tint-c) 0%, transparent 100%);
  pointer-events: none;
}
.gantt-bar:hover {
  transform: translateY(-2px) scaleY(1.05);
  box-shadow: 0 6px 20px var(--sh-c-c) !important;
  filter: brightness(1.15);
  z-index: 5;
}
.gantt-bar-label {
  font-size: 10px; font-weight: 700; color: var(--text-0);
  white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  z-index: 1; position: relative;
}
.gantt-bar-marge {
  font-size: 9px; font-weight: 700; color: var(--text-0);
  margin-left: 5px; padding: 2px 6px; border-radius: 8px; white-space: nowrap;
  z-index: 1; position: relative;
}
.gantt-bar-marge.good { background: rgba(62,203,165,0.35); }
.gantt-bar-marge.mid  { background: var(--gold-dim); }
.gantt-bar-marge.low  { background: rgba(192,64,64,0.45); }

/* Floating rich tooltip */
.gantt-bar[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: rgba(8,11,15,0.97);
  border: 1px solid var(--gold-bd-hi);
  color: var(--text-0); font-size: 11px; padding: 8px 14px;
  border-radius: 8px; white-space: nowrap; z-index: 50;
  box-shadow: 0 8px 28px var(--sh-c-c);
  pointer-events: none;
  letter-spacing: 0.1px; line-height: 1.5;
}

/* Today marker — animated pulse */
.gantt-today-marker {
  position: absolute; top: 0; bottom: 0; z-index: 5;
  pointer-events: none;
  width: 0;
}
.gantt-today-line {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--red) 0%, rgba(192,64,64,0.4) 100%);
  animation: plan-today-pulse 2.2s ease-in-out infinite;
}
.gantt-today-label {
  position: absolute; top: 4px; left: 5px;
  font-size: 8px; color: var(--red); font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  white-space: nowrap;
  background: rgba(192,64,64,0.12);
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid rgba(192,64,64,0.3);
}

/* ── Reschedule Button & Popover ── */
.gantt-reschedule-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); background: var(--shade-b); border: none; border-radius: 3px; padding: 1px 4px; font-size: 10px; cursor: pointer; opacity: 0; transition: opacity var(--dur-base); line-height: 1; }
.gantt-bar:hover .gantt-reschedule-btn { opacity: 1; }
.gantt-reschedule-btn:hover { background: var(--shade-c); }
.reschedule-popover { position: fixed; inset: 0; z-index: 9999; background: var(--shade-c); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.reschedule-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 24px; min-width: 300px; box-shadow: 0 20px 60px var(--sh-c-c); }
.reschedule-title { font-size: 15px; font-weight: 700; color: var(--text-1); margin-bottom: 16px; }
.reschedule-label { font-size: 11px; color: var(--text-2); display: block; margin-bottom: 6px; }
.reschedule-date { width: 100%; padding: 8px 12px; background: var(--tint-b); border: 1px solid var(--border); border-radius: 6px; color: var(--text-1); font-size: 14px; }
.reschedule-date:focus { border-color: var(--gold); outline: none; }
.reschedule-info { font-size: 11px; color: var(--text-2); margin: 10px 0 16px; }
.reschedule-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Resource Conflict Banner ── */
.plan-conflicts-banner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 10px; background: rgba(192,64,64,0.08); border: 1px solid rgba(192,64,64,0.3); border-radius: 8px; flex-wrap: wrap; }
.conflict-icon { font-size: 18px; }
.conflict-text { font-size: 12px; color: var(--red); }
.conflict-text strong { font-weight: 700; }
.conflict-details { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.conflict-item { font-size: 10px; padding: 3px 8px; border-radius: 4px; background: var(--tint-a); color: var(--text-2); }
.conflict-item.conflict-warning { background: rgba(192,64,64,0.12); color: var(--red); }
.conflict-item.conflict-info { background: var(--au-bg); color: var(--gold); }

/* ── Legend ── */
.plan-legend {
  display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(8,11,15,0.5);
  border: 1px solid var(--gold-bd);
  border-radius: 8px;
}
.plan-legend-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; color: var(--text-2);
  cursor: default;
}
.plan-legend-dot {
  width: 10px; height: 10px; border-radius: 3px;
  box-shadow: 0 0 5px currentColor;
}

/* ── Team View ── */
.plan-team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.plan-team-card {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--gold-bd);
  border-radius: 14px; padding: 22px;
  transition: border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
}
.plan-team-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--team-accent, var(--gold));
  opacity: 0.7;
}
.plan-team-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px var(--sh-c-b), 0 0 24px var(--au-bg);
}

.plan-team-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
/* Ring avatar — SVG-based occupation indicator */
.plan-team-avatar-wrap {
  position: relative; width: 56px; height: 56px; flex-shrink: 0;
}
.plan-team-avatar {
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(135deg, var(--au-bg), var(--gold-dim));
  border: 2px solid var(--gold-bd-hi);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--gold-hi);
  font-family: var(--serif);
}
.plan-team-ring {
  position: absolute; inset: -3px;
  border-radius: 50%; pointer-events: none;
}
.plan-team-name {
  font-size: 14.5px; font-weight: 600; color: var(--text-0);
  line-height: 1.2;
}
.plan-team-class {
  font-size: 11px; color: var(--text-2); margin-top: 3px;
}
.plan-team-occupation {
  font-size: 10px; color: var(--gold); margin-top: 4px; font-weight: 600;
}

.plan-team-stat {
  font-size: 12px; color: var(--text-1); margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--gold-bd);
}
.plan-team-stat strong { color: var(--gold-hi); }

.plan-team-projects { display: flex; flex-direction: column; gap: 7px; }
.plan-team-proj {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: rgba(8,11,15,0.6);
  border: 1px solid var(--gold-bd);
  cursor: pointer; transition: all var(--dur-fast);
}
.plan-team-proj:hover {
  background: var(--au-bg);
  border-color: var(--gold-bd);
  transform: translateX(3px);
}
.plan-team-proj-dot {
  width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
}
.plan-team-proj-name {
  font-size: 12px; color: var(--text-0); font-weight: 500;
  flex: 1;
}
.plan-team-proj-dates {
  font-size: 10px; color: var(--text-2); font-family: var(--mono);
}

/* ── Timeline View — Alternating Left/Right ── */
.plan-timeline {
  padding: 0;
  max-width: 1100px; margin: 0 auto;
}
.plan-tl-track {
  position: relative;
  padding: 0 0 20px;
}
/* Center axis line */
.plan-tl-track::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent 0%, var(--gold-bd) 5%, var(--gold) 50%, var(--gold-bd) 95%, transparent 100%);
  border-radius: 1px;
}

/* Each timeline item occupies a full row — alternating sides */
.plan-tl-item {
  position: relative;
  display: flex;
  margin-bottom: 28px;
  cursor: pointer;
  align-items: flex-start;
}
/* Even items: card on left, dot on center */
.plan-tl-item.tl-left  { justify-content: flex-start;  padding-right: calc(50% + 28px); padding-left: 0; }
.plan-tl-item.tl-right { justify-content: flex-end;    padding-left: calc(50% + 28px);  padding-right: 0; }

.plan-tl-dot {
  position: absolute; left: 50%; top: 20px;
  width: 16px; height: 16px; border-radius: 50%;
  transform: translateX(-50%);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--gold-bd), 0 0 10px var(--gold-dim);
  z-index: 2;
  transition: transform var(--dur-base), box-shadow var(--dur-base);
}
.plan-tl-item:hover .plan-tl-dot {
  transform: translateX(-50%) scale(1.4);
  box-shadow: 0 0 0 2px var(--gold), 0 0 16px var(--gold-dim);
}

.plan-tl-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-bd);
  border-radius: 12px; padding: 16px 20px;
  transition: border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
  flex: 1; min-width: 0;
  position: relative;
}
.plan-tl-item.tl-left  .plan-tl-card { border-right: 3px solid var(--tl-color, var(--gold-bd)); animation: plan-tl-appear   .4s var(--ease) both; }
.plan-tl-item.tl-right .plan-tl-card { border-left: 3px solid var(--tl-color, var(--gold-bd)); animation: plan-tl-appear-r .4s var(--ease) both;  }
.plan-tl-item:hover .plan-tl-card {
  border-top-color: var(--tl-color, var(--gold));
  box-shadow: 0 8px 28px var(--sh-c-b);
}
.plan-tl-item.tl-left:hover  .plan-tl-card { transform: translateX(-4px); }
.plan-tl-item.tl-right:hover .plan-tl-card { transform: translateX(4px);  }

.plan-tl-date {
  font-size: 10px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 6px; font-family: var(--mono);
}
.plan-tl-title {
  font-size: 14px; font-weight: 600; color: var(--text-0);
  line-height: 1.3; margin-bottom: 10px;
}
.plan-tl-badges {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.plan-tl-badge {
  font-size: 9.5px; padding: 2px 9px; border-radius: 12px;
  color: rgba(0,0,0,0.85); font-weight: 700;
}
.plan-tl-badge.ghost {
  background: transparent !important; border: 1px solid var(--gold-bd);
  color: var(--text-2);
}
.plan-tl-stats {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-1);
}
.plan-tl-stats span {
  display: flex; align-items: center; gap: 4px;
}
.plan-tl-stats .stat-val { color: var(--gold-hi); font-weight: 600; }

/* ── Detail Drawer — premium panel ── */
.plan-detail-drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 480px; max-width: 92vw;
  background: linear-gradient(180deg, #0c1018 0%, #080b0f 100%);
  border-left: 1px solid var(--gold-bd);
  z-index: 200; overflow-y: auto;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease);
  box-shadow: -10px 0 50px var(--sh-c-c);
  scrollbar-width: thin; scrollbar-color: rgba(200,144,40,0.2) transparent;
}
.plan-detail-drawer.open { transform: translateX(0); }

.plan-detail-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 26px 26px 18px;
  border-bottom: 1px solid var(--gold-bd);
  position: sticky; top: 0;
  background: linear-gradient(180deg, #0d1120 0%, rgba(8,11,15,0.98) 100%);
  backdrop-filter: blur(6px);
  z-index: 1;
}
.plan-detail-header-bar {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.35; margin-bottom: 0;
  position: absolute; bottom: 0; left: 0;
}
.plan-detail-header h3 {
  font-family: var(--serif); font-size: 19px; color: var(--text-0);
  line-height: 1.3; flex: 1; margin-right: 14px;
  font-weight: 400; letter-spacing: 0.2px;
}
.plan-detail-close {
  background: var(--au-bg); border: 1px solid var(--gold-bd);
  color: var(--text-2); width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-base); flex-shrink: 0;
}
.plan-detail-close:hover {
  border-color: var(--gold); color: var(--gold-hi);
  background: var(--au-bg);
  transform: rotate(90deg);
}

.plan-detail-body { padding: 24px; }

.plan-d-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 24px;
}
.plan-d-field {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: var(--au-bg);
  border: 1px solid var(--gold-bd);
  border-radius: 8px;
}
.plan-d-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(200,144,40,0.5); font-weight: 600;
}
.plan-d-val {
  font-size: 13px; color: var(--text-0); font-weight: 500; line-height: 1.3;
}
.plan-d-amount {
  font-family: var(--serif); font-size: 20px; color: var(--gold-hi); font-weight: 700;
}
.plan-d-statut.done   { color: var(--green); }
.plan-d-statut.active { color: var(--gold-hi); }

.plan-d-section {
  margin-bottom: 22px;
}
.plan-d-section h4 {
  font-family: var(--serif); font-size: 14px; color: var(--text-0);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--gold-bd);
  display: flex; align-items: center; gap: 8px;
}
.plan-d-section h4::before {
  content: '';
  display: inline-block; width: 3px; height: 14px;
  background: var(--gold); border-radius: 2px; flex-shrink: 0;
}
.plan-d-tags {
  display: flex; gap: 7px; flex-wrap: wrap;
}
.plan-d-tag {
  font-size: 11px; padding: 4px 12px; border-radius: 14px;
  background: var(--au-bg); color: var(--gold-hi);
  border: 1px solid var(--gold-bd);
  font-weight: 500;
}

.plan-d-pers-list {
  display: flex; flex-direction: column; gap: 10px;
}
.plan-d-pers {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--au-bg);
  border: 1px solid var(--gold-bd);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.plan-d-pers:hover { border-color: var(--gold-bd-hi); background: var(--au-bg); }
.plan-d-pers-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--au-bg), var(--gold-dim));
  border: 1px solid var(--gold-bd-hi);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--gold-hi);
  flex-shrink: 0; font-family: var(--serif);
}
.plan-d-pers-name  { font-size: 13px; color: var(--text-0); font-weight: 600; }
.plan-d-pers-class { font-size: 10px; color: var(--text-2); margin-top: 2px; }
.plan-d-pers-comp  { font-size: 10px; color: var(--gold); margin-top: 3px; }
.plan-d-pers-phase { font-size: 10px; color: var(--green); margin-top: 2px; font-style: italic; }

/* ── Empty state ── */
.plan-empty {
  text-align: center; padding: 70px 20px;
  color: var(--text-2); font-size: 14px;
  opacity: 0.6;
}
.plan-empty::before {
  content: '∅';
  display: block; font-size: 36px; margin-bottom: 12px;
  color: rgba(200,144,40,0.2);
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .plan-tl-track::before { left: 28px; transform: none; }
  .plan-tl-item.tl-left, .plan-tl-item.tl-right {
    justify-content: flex-start;
    padding-left: 56px; padding-right: 0;
  }
  .plan-tl-dot { left: 28px; transform: translateX(-50%); }
  .plan-tl-item:hover .plan-tl-dot { transform: translateX(-50%) scale(1.4); }
  .plan-tl-item.tl-left .plan-tl-card, .plan-tl-item.tl-right .plan-tl-card { border-right: none; border-left: 3px solid var(--tl-color, var(--gold-bd)); }
  .plan-tl-item.tl-left:hover .plan-tl-card, .plan-tl-item.tl-right:hover .plan-tl-card { transform: translateX(3px); }
}
@media (max-width: 1100px) {
  .plan-kpi-row { grid-template-columns: repeat(3, 1fr); }
  .plan-gantt-header .gantt-label-col, .gantt-row .gantt-label-col { min-width: 200px; max-width: 200px; }
}
@media (max-width: 700px) {
  .plan-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .plan-toolbar { flex-direction: column; }
  .plan-detail-drawer { width: 100vw; }
  .plan-toolbar-right { flex-wrap: wrap; }
}

/* ═══════════════════════════════════════════════════════════════
   RESOURCE GANTT v2 — Personnel & Engins (Weekly/Daily scale)
   ═══════════════════════════════════════════════════════════════ */

/* ── Resource KPI Row ── */
.plan-autofill-bar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px; padding: 8px 14px;
  background: var(--au-bg); border: 1px dashed var(--gold-bd);
  border-radius: var(--radius);
}
.plan-autofill-hint { font-size: 0.72rem; color: var(--text-2); }
.plan-autofill-bar .btn-sm { font-size: 0.75rem; padding: 6px 14px; white-space: nowrap; }

/* Capacity heatmap strip */
.plan-heatmap-strip {
  display: flex; align-items: center; gap: 0; margin-bottom: 14px;
  min-height: 22px; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
}
.hm-label {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-2); padding: 0 10px; white-space: nowrap; flex-shrink: 0;
}
.hm-cells { display: flex; flex: 1; height: 18px; }
.hm-cell {
  flex: 1; min-width: 2px; transition: opacity var(--dur-fast);
  cursor: default; position: relative;
}
.hm-cell:hover { opacity: 0.7; z-index: 1; box-shadow: 0 0 4px var(--gold-dim); }

.plan-res-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.plan-res-kpi {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden; min-width: 0;
  transition: border-color var(--dur-base), transform var(--dur-fast);
}
.plan-res-kpi:hover { border-color: var(--gold); transform: translateY(-1px); }
.plan-res-kpi-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.plan-res-kpi-icon.gold  { background: var(--gold-dim); color: var(--gold-hi); }
.plan-res-kpi-icon.green { background: rgba(62,203,165,0.12); color: var(--green); }
.plan-res-kpi-icon.blue  { background: rgba(74,144,217,0.12); color: var(--blue); }
.plan-res-kpi-icon.amber { background: var(--au-bg); color: var(--amber); }
.plan-res-kpi-icon.red   { background: rgba(192,64,64,0.12); color: var(--red); }
.plan-res-kpi-data { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.plan-res-kpi-val {
  font-family: var(--serif); font-size: 20px; font-weight: 700;
  color: var(--text-0); line-height: 1.2;
}
.plan-res-kpi-lbl {
  font-size: 9px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: 0.8px; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Resource Gantt wrapper (scrollable) ── */
.plan-res-gantt {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: oklch(from var(--sl-1) l c h / .58);
  border: 1px solid oklch(1 0 0 / .085);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .1), 0 26px 64px -24px oklch(0 0 0 / .68);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
          backdrop-filter: blur(26px) saturate(150%);
}
/* Sans flou d'arrière-plan, la translucidité ne donnerait qu'un cadre
   délavé sur lequel le fond animé passerait en clair : on retombe alors
   sur une surface pleine. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .plan-res-gantt { background: var(--bg-card); }
}

.plan-res-scroll {
  overflow: auto; max-height: 740px;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-bd) transparent;
}
.plan-res-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.plan-res-scroll::-webkit-scrollbar-track { background: transparent; }
.plan-res-scroll::-webkit-scrollbar-thumb {
  background: var(--gold-bd); border-radius: 4px;
}

/* ── Two-tier header (sticky top) ── */
.res-hdr {
  display: flex; position: sticky; top: 0; z-index: 10;
  background: var(--bg-card2); border-bottom: 2px solid var(--gold-bd);
}
.res-hdr .res-lbl {
  min-width: 300px; max-width: 300px;
  position: sticky; left: 0; z-index: 12;
  background: var(--bg-card2);
  border-right: 2px solid var(--gold-bd);
  display: flex; align-items: flex-end;
  padding: 10px 16px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--text-2); font-weight: 600;
}
.res-hdr-tl {
  display: flex; flex-direction: column;
}
/* Month row */
.res-months-row { display: flex; }
.res-mo-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0; font-size: 12px; font-weight: 600;
  color: var(--text-1); border-right: 1px solid var(--gold-bd);
  letter-spacing: 0.3px; box-sizing: border-box;
  border-bottom: 1px solid var(--gold-bd);
}
.res-mo-cell .mo-yr {
  font-size: 9px; color: var(--text-2); margin-left: 5px; font-weight: 400;
}
/* Week row */
.res-weeks-row { display: flex; }
.res-wk-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--text-2); padding: 3px 0;
  border-right: 1px solid var(--gold-bd);
  box-sizing: border-box;
}
.res-wk-cell.mo-start {
  border-left: 1px solid var(--gold-bd);
}

/* ── Data Rows ── */
.res-row {
  display: flex; border-bottom: 1px solid var(--gold-bd);
  transition: background var(--dur-fast);
}
.res-row:nth-child(even) { background: var(--au-bg); }
.res-row:hover { background: var(--au-bg); }

.res-row .res-lbl {
  min-width: 300px; max-width: 300px;
  position: sticky; left: 0; z-index: 3;
  border-right: 2px solid var(--gold-bd);
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
}
/* Solid backgrounds for sticky labels so content behind doesn't bleed */
.res-row:nth-child(odd) .res-lbl  { background: var(--bg-card); }
.res-row:nth-child(even) .res-lbl { background: #0b0f16; }
.res-row:hover .res-lbl            { background: #111820; }

/* Avatar */
.res-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
  font-family: var(--serif);
}
.res-avatar.pers {
  background: linear-gradient(135deg, var(--gold-dim), var(--gold-bd));
  color: var(--gold-hi);
}
.res-avatar.engin {
  background: linear-gradient(135deg, rgba(74,144,217,0.15), rgba(74,144,217,0.25));
  color: var(--blue);
}

/* Info block */
.res-info { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.res-name {
  font-size: 13px; color: var(--text-0); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.res-meta {
  font-size: 10px; color: var(--text-2); margin-top: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.res-util-badge {
  font-size: 9px; padding: 2px 8px; border-radius: 10px;
  font-weight: 600; white-space: nowrap;
}
.res-util-badge.high { background: rgba(192,64,64,0.2); color: var(--red); }
.res-util-badge.mid  { background: var(--au-bg); color: var(--amber); }
.res-util-badge.low  { background: rgba(62,203,165,0.15); color: var(--green); }
.res-util-badge.idle { background: rgba(133,122,106,0.15); color: var(--text-2); }

.res-util-bar-wrap {
  width: 100%; height: 4px; background: var(--au-bg);
  border-radius: 2px; margin-top: 5px; overflow: hidden;
}
.res-util-bar { height: 100%; border-radius: 2px; transition: width .6s var(--ease); }
.res-util-bar.high { background: var(--red); }
.res-util-bar.mid  { background: var(--amber); }
.res-util-bar.low  { background: var(--green); }
.res-util-bar.idle { background: var(--text-3); }

/* ── Timeline cell (pixel-based, week grid) ── */
.res-tl-cell {
  position: relative; min-height: 56px;
}

/* Week vertical grid lines (rendered by JS) */
.res-wk-line {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--au-bg); pointer-events: none;
}
.res-wk-line.mo-boundary {
  background: var(--au-bg); width: 1px;
}

/* ── Bars ── */
.res-bar {
  position: absolute; height: 28px; border-radius: 6px;
  display: flex; align-items: center; padding: 0 10px;
  font-size: 10.5px; font-weight: 600; color: var(--text-0);
  letter-spacing: 0.2px; opacity: 0.92;
  transition: opacity var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  cursor: pointer; box-shadow: 0 2px 8px var(--sh-c-b);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.res-bar:hover {
  opacity: 1; transform: translateY(-2px); z-index: 5;
  box-shadow: 0 4px 16px var(--sh-c-b);
}

/* Stacking for overlapping bars */
.res-tl-cell .res-bar.stack-0 { top: 6px; }
.res-tl-cell .res-bar.stack-1 { top: 40px; }
.res-tl-cell .res-bar.stack-2 { top: 74px; }
.res-tl-cell .res-bar.stack-3 { top: 108px; }

.res-row.stacks-2 .res-tl-cell { min-height: 74px; }
.res-row.stacks-3 .res-tl-cell { min-height: 108px; }
.res-row.stacks-4 .res-tl-cell { min-height: 142px; }

/* ── Vacation bars ── */
.res-bar-conge {
  position: absolute; height: 28px; border-radius: 6px;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 10px; font-weight: 600; color: var(--text-0);
  opacity: 0.85; cursor: default;
  background: repeating-linear-gradient(
    -45deg,
    rgba(232,93,117,0.7),
    rgba(232,93,117,0.7) 4px,
    rgba(232,93,117,0.4) 4px,
    rgba(232,93,117,0.4) 8px
  );
  border: 1.5px solid rgba(232,93,117,0.6);
  box-shadow: 0 2px 6px rgba(232,93,117,0.25);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  z-index: 3;
}
.res-bar-conge:hover { opacity: 1; }

/* ── Idle engin bars ── */
.res-bar-idle {
  position: absolute; height: 28px; border-radius: 6px;
  display: flex; align-items: center; padding: 0 8px;
  font-size: 10px; font-weight: 600; color: rgba(96,165,250,0.9);
  opacity: 0.75; cursor: default;
  background: repeating-linear-gradient(
    -45deg,
    rgba(96,165,250,0.18),
    rgba(96,165,250,0.18) 4px,
    rgba(96,165,250,0.08) 4px,
    rgba(96,165,250,0.08) 8px
  );
  border: 1.5px dashed rgba(96,165,250,0.35);
  text-shadow: none;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  z-index: 2;
}
.res-bar-idle:hover { opacity: 0.95; }

/* ── Tooltip (JS-driven, fixed position) ── */
.res-tooltip {
  position: fixed; z-index: 200;
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
  color: var(--text-0); font-size: 11px; padding: 10px 16px;
  border-radius: var(--radius-sm); white-space: nowrap;
  box-shadow: 0 6px 24px var(--sh-c-c);
  pointer-events: none; line-height: 1.6; font-weight: 400;
  max-width: 360px;
}
.res-tooltip strong { color: var(--gold-hi); }
.res-tooltip .tt-dates { color: var(--text-1); font-size: 10px; }
.res-tooltip .tt-type  { color: var(--text-2); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }

/* ═══════════════════════════════════════════════════════════════
   PLANNING PERSONNEL — Grille semaine par semaine
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   GRILLE DES PLANNINGS DE RESSOURCES
   ═══════════════════════════════════════════════════════════════════════
   Les filets verticaux par semaine ont disparu. Ils donnaient à l'écran son
   air de tableur, et coûtaient un nœud par semaine et par ligne. Ne restent
   que les bandes de regroupement — dessinées une seule fois pour toute la
   grille, derrière les lignes — et le repère du jour. */
.pa-grid {
  font-size: 11px;
  position: relative;
}

/* ── En-tête ── */
.pa-hdr {
  display: flex;
  position: sticky; top: 0; z-index: 10;
  background: var(--sl-2);
  border-bottom: 1px solid oklch(from var(--au) l c h / .24);
  box-shadow: 0 6px 16px -10px oklch(0 0 0 / .8);
}
.pa-hdr-lbl {
  position: sticky; left: 0; z-index: 12;
  display: flex; align-items: flex-end;
  padding: 0 14px 8px;
  background: inherit;
  font-size: 9.5px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-2);
  white-space: nowrap; overflow: hidden;
}
.pa-hdr-tl { display: flex; flex-direction: column; flex-shrink: 0; }
.pa-hdr-grp, .pa-hdr-un { display: flex; }
.pa-g {
  flex-shrink: 0; overflow: hidden; white-space: nowrap;
  padding: 7px 0 4px; text-align: center;
  font-size: 10px; font-weight: 600;
  color: var(--gold-hi);
  border-left: 1px solid oklch(from var(--au) l c h / .22);
}
.pa-g.alt { background: oklch(1 0 0 / .028); }
.pa-u {
  flex-shrink: 0; overflow: hidden; white-space: nowrap;
  padding: 2px 0 7px; text-align: center;
  font-size: 9px; color: var(--text-2);
}
/* À l'échelle « année » il n'y a rien à regrouper : la rangée d'unités
   prend toute la hauteur au lieu de laisser un bandeau vide, qui se serait
   lu comme un défaut d'affichage. */
.pa-hdr-solo .pa-u {
  padding: 14px 0; font-size: 11px; font-weight: 600; color: var(--gold-hi);
  border-left: 1px solid oklch(from var(--au) l c h / .22);
}

/* ── Corps ── */
.pa-body { position: relative; }
.pa-row {
  display: flex;
  min-height: 46px;
  border-bottom: 1px solid oklch(1 0 0 / .05);
}
.pa-row:last-child { border-bottom: 0; }
.pa-row:hover { background: oklch(1 0 0 / .03); }
/* ═══ LA COLONNE QUI NE BOUGE PAS ═══
   Elle porte le nom de la ressource : sans elle, une barre au mois d'août
   n'appartient à personne. Deux règles la tiennent, et aucune n'est
   décorative :

   PLEINE, ET NON EN VERRE. Un élément collant qui porte `backdrop-filter`
   se décroche : il défile avec le contenu au lieu de rester en place. La
   preuve était sous les yeux — l'en-tête « PERSONNEL », qui n'en portait
   pas, restait accroché ; les lignes, qui en portaient un, partaient. Une
   surface pleine règle aussi le fond du problème : les barres qui glissent
   dessous n'y laissent plus de traînée de couleur.

   AU-DESSUS DU RESTE. Les barres, le repère du jour et les bandes de mois
   passent tous en dessous — sinon la colonne devient transparente dès
   qu'une affectation la croise. */
.pa-lbl {
  position: sticky; left: 0; z-index: 5;
  display: flex; align-items: center; gap: 9px;
  padding: 5px 8px 5px 12px;
  flex-shrink: 0;
  background: var(--sl-2);
  border-right: 1px solid oklch(from var(--au) l c h / .16);
  box-shadow: 6px 0 16px -10px oklch(0 0 0 / .85);
}
.pa-row:hover .pa-lbl { background: var(--sl-3); }
.pa-lbl-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.pa-lbl-info .res-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25;
}
/* Une seule ligne, quoi qu'il arrive : c'est le retour à la ligne du métier
   et du taux qui faisait des lignes de trois hauteurs inégales. */
.pa-lbl-info .res-meta {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; line-height: 1.3;
  white-space: nowrap; overflow: hidden;
}
.pa-lbl-info .res-meta > * { flex: 0 0 auto; }
.pa-lbl-info .res-meta > span:first-child {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.pa-taux { color: var(--gold-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-taux.vide { opacity: .4; }
.pa-lbl .res-classif { opacity: .75; }
/* Rapatriee de la feuille injectee par _ensurePlanEditStyles() : celle-ci,
   chargee apres, gouvernait la grille a la place de ce fichier. */
.res-todo { color: #e0a04d; font-style: italic; opacity: .85; }
/* Les pastilles quittent la ligne de méta : elles en étaient le dernier
   élément, donc le premier à passer à la ligne. */
.pa-lbl-fin {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.pa-lbl .res-avatar { width: 30px; height: 30px; font-size: 12px; }
/* Modifier et supprimer s'empilent dans la largeur d'UN bouton : la colonne
   des ressources est déjà à l'étroit — les 24 px qu'aurait pris un second
   bouton côte à côte, c'est un métier tronqué sur chaque ligne. */
.pa-actions {
  flex: 0 0 24px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pa-edit-btn {
  flex: 0 0 auto;
  width: 24px; height: 21px; padding: 0;
  border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--text-3);
  font-size: 12px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.pa-row:hover .pa-edit-btn { opacity: 1; }
.pa-edit-btn:hover { background: oklch(1 0 0 / .09); color: var(--gold-hi); }
/* Le geste destructeur ne se teinte qu'au survol : rouge en permanence, il
   attirerait l'œil de chaque ligne vers ce qu'on veut faire le moins. */
.pa-del-btn { font-size: 11px; }
.pa-del-btn:hover { background: var(--err-bg); color: var(--err); }
.pa-edit-btn:focus-visible { opacity: 1; outline: 2px solid var(--gold-hi); outline-offset: 1px; }

/* ── Bandes de regroupement et repère du jour ──
   Sans z-index : les bandes sont positionnées mais placées avant les lignes
   dans le document, donc peintes dessous. Le repère du jour, lui, s'élève
   au-dessus des barres — c'est tout son intérêt. */
.pa-bandes { position: absolute; top: 0; bottom: 0; pointer-events: none; }
.pa-bande {
  position: absolute; top: 0; bottom: 0;
  border-left: 1px solid oklch(1 0 0 / .06);
}
.pa-bande.alt { background: oklch(1 0 0 / .022); }
/* Le samedi et le dimanche n'ont pas de case dans le stock : rien ne s'y
   pose, et une affectation les traverse sans s'interrompre. Le voile les
   sort du rythme de travail sans les retirer du calendrier — sans quoi la
   frise sautait du 2 au 5 sans dire pourquoi. */
.pa-we { position: absolute; top: 0; bottom: 0; background: oklch(0 0 0 / .3); }
.pa-u.we { color: var(--text-3); opacity: .5; }
.pa-auj {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  border-left: 1px solid oklch(from var(--au) l c h / .85);
  box-shadow: 0 0 12px oklch(from var(--au) l c h / .5);
}

/* ── Piste et barres ── */
.pa-cells { position: relative; flex-shrink: 0; cursor: crosshair; }
/* Une bulle par semaine travaillée : elle s'arrête le vendredi et reprend
   le lundi. Toutes celles d'une même tâche portent sa couleur et ses
   bornes — c'est la couleur qui les relie à l'œil, et les bornes qui les
   relient au geste. */
.pa-seg {
  position: absolute; top: 6px; bottom: 6px;
  display: flex; align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 7px;
  background: var(--c);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .3), inset 0 -1px 0 oklch(0 0 0 / .2);
  overflow: hidden; cursor: pointer;
  transition: filter var(--dur-fast) var(--ease);
}
.pa-seg:hover { filter: brightness(1.12); }
.pa-seg-t {
  pointer-events: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
  color: oklch(0.19 0.015 260);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Absences et indisponibilités : hachurées, comme elles l'étaient. Une
   teinte seule ne suffit pas à les distinguer d'un chantier, les couleurs
   de chantier balayant maintenant tout le cercle. */
.pa-seg-st {
  background-image: repeating-linear-gradient(135deg,
    transparent 0 3px, oklch(0 0 0 / .2) 3px 5px);
}
.pa-seg-st .pa-seg-t {
  color: oklch(0.97 0 0);
  text-shadow: 0 1px 2px oklch(0 0 0 / .55);
}
/* Poignée d'étirement : révélée au survol, pour ne pas hacher la barre
   d'un trait permanent qui la ferait lire comme deux blocs. */
.pa-seg-g {
  position: absolute; right: 0; top: 0; bottom: 0; width: 10px;
  cursor: ew-resize;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.pa-seg-g::after {
  content: ''; position: absolute; right: 3px; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 46%; border-radius: 1px;
  background: oklch(0 0 0 / .5);
}
.pa-seg:hover .pa-seg-g { opacity: 1; }
/* Un identifiant qu'aucun chantier ne réclame : gris, bordure tiretée,
   texte clair. Le repli doré d'avant lui donnait l'allure d'un chantier
   ordinaire, et ces affectations orphelines passaient inaperçues. */
.pa-seg-inc { border: 1px dashed oklch(1 0 0 / .32); }
.pa-seg-inc .pa-seg-t {
  color: oklch(0.97 0 0);
  text-shadow: 0 1px 2px oklch(0 0 0 / .55);
}
.pa-seg-actif { z-index: 4; filter: brightness(1.16); transition: none; }
.pa-seg-fantome {
  background: oklch(from var(--au) l c h / .3);
  border: 1px dashed oklch(from var(--au) l c h / .8);
  pointer-events: none;
}
body.pa-en-geste, body.pa-en-geste .pa-cells { cursor: ew-resize; }
body.pa-en-geste { user-select: none; -webkit-user-select: none; }

.res-util-badge.abs {
  background: oklch(from var(--err) l c h / .14);
  color: var(--err);
}

.pa-dropdown {
  background: var(--bg-card2);
  border: 1px solid var(--gold-bd);
  border-radius: 6px;
  box-shadow: 0 8px 32px var(--sh-c-c);
  max-height: 300px; overflow-y: auto;
  width: 310px;
  padding: 4px 0;
}
.pa-dd-item {
  padding: 6px 10px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 1px;
  transition: background var(--dur-fast);
}
.pa-dd-item:hover {
  background: var(--au-bg);
}
.pa-dd-item.pa-dd-selected {
  background: var(--au-bg);
}
.pa-dd-item.pa-dd-clear {
  color: var(--text-2); font-style: italic;
  border-left: 3px solid transparent;
}
.pa-dd-separator {
  padding: 6px 14px 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-2);
  background: var(--au-bg);
  border-top: 1px solid var(--gold-bd);
  border-bottom: 1px solid var(--gold-bd);
}
.pa-dd-item.pa-dd-status .pa-dd-name {
  font-size: 12px;
}
.pa-legend-abs {
  background-image: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.18) 2px,
    rgba(0,0,0,0.18) 3px
  ) !important;
}

/* ── Liste de choix ────────────────────────────────────────────────────
   Une seule liste, là où il en fallait deux empilées : choisir le jour,
   puis choisir le chantier. La plage est déjà décidée par le geste, il ne
   reste qu'à dire quoi y mettre — et un champ de recherche pour ne pas
   parcourir trente chantiers à la molette. */
.pa-dropdown.pa-choix {
  position: fixed; z-index: 9999;
  width: 322px; max-height: 380px;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  border-radius: 14px;
  background: oklch(from var(--sl-2) l c h / .74);
  border: 1px solid oklch(1 0 0 / .11);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .12), 0 26px 60px -18px oklch(0 0 0 / .7);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
          backdrop-filter: blur(28px) saturate(170%);
  animation: paChoixEntre .16s var(--ease) both;
}
@keyframes paChoixEntre {
  from { opacity: 0; transform: translateY(-5px) scale(.985); }
}
.pa-choix-q {
  flex: 0 0 auto; width: 100%;
  padding: 12px 15px;
  border: 0; border-bottom: 1px solid oklch(1 0 0 / .09);
  background: transparent; color: var(--text-0);
  font: inherit; font-size: 13px; outline: none;
}
.pa-choix-q::placeholder { color: var(--text-2); }
.pa-choix-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 5px 0; }
.pa-choix .pa-dd-item {
  flex-direction: row; align-items: center; gap: 10px;
  padding: 8px 13px;
  border-left: 3px solid var(--c, transparent);
}
.pa-choix .pa-dd-act {
  color: var(--text-1);
  border-left-color: var(--c, oklch(1 0 0 / .25));
}
.pa-choix .pa-dd-act .pa-dd-name { font-size: 12px; }
.pa-dd-ic { flex: 0 0 auto; width: 14px; text-align: center; color: var(--text-2); }
.pa-choix kbd {
  margin-left: 6px;
  padding: 1px 5px; border-radius: 5px;
  border: 1px solid oklch(1 0 0 / .13);
  background: oklch(1 0 0 / .06);
  font: inherit; font-size: 9.5px; color: var(--text-2);
}
.pa-choix .pa-dd-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px;
}
/* `.pa-dd-item` impose display:flex, qui l'emporterait sur la règle
   d'agent utilisateur attachée à [hidden] : sans ces deux lignes, le
   filtre de recherche ne masquerait rien. */
.pa-choix .pa-dd-item[hidden],
.pa-choix .pa-dd-separator[hidden] { display: none; }

/* ── Repère du jour dans la frise ── */
/* ── Today marker inside timeline ── */
.res-today-line {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--red); opacity: 0.7; z-index: 6;
  pointer-events: none;
}
.res-today-label {
  position: absolute; top: -2px; transform: translateX(-50%);
  font-size: 8px; color: var(--red); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap; pointer-events: none; z-index: 7;
  background: rgba(192,64,64,0.15); padding: 1px 5px;
  border-radius: 3px;
}

/* ════════════════════════════════════════════════════════════════
   ROOS LOGO ANIMÉ — Brand Identity v45
   PNG transparent · Entrée cinématique · Or pulsant · Halo · WOW
   ════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes brandEntrance {
  0%   { opacity: 0; transform: scale(0.6) translateY(-10px); filter: blur(12px); }
  55%  { opacity: 1; filter: blur(0px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0px); }
}
@keyframes brandFloat {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-4px); }
}
@keyframes brandGoldSweep {
  0%   { transform: translateX(-80px); opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(320px);  opacity: 0; }
}
@keyframes brandAuraPulse {
  0%,100% { transform: scale(0.85); opacity: 0; }
  50%      { transform: scale(1.1);  opacity: 1; }
}
@keyframes brandHaloPulse {
  0%,100% { border-color: var(--gold-bd);    box-shadow: none; }
  50%      { border-color: var(--gold-bd-hi); box-shadow: 0 0 28px var(--au-bg), inset 0 0 14px var(--au-bg); }
}
@keyframes brandGemSpin {
  0%   { transform: translate(-50%,-50%) rotate(0deg)   scale(1);   color: var(--gold); }
  25%  { transform: translate(-50%,-50%) rotate(90deg)  scale(1.6); color: var(--gold-hi); }
  50%  { transform: translate(-50%,-50%) rotate(180deg) scale(1);   color: var(--gold); }
  75%  { transform: translate(-50%,-50%) rotate(270deg) scale(1.6); color: var(--gold-hi); }
  100% { transform: translate(-50%,-50%) rotate(360deg) scale(1);   color: var(--gold); }
}
@keyframes brandSubShimmer {
  0%,100% { color: var(--gold);    opacity: 0.7; }
  50%      { color: var(--gold-hi); opacity: 1;   }
}
@keyframes brandLineSweep {
  0%,100% { left: 28%; right: 28%; opacity: 0.4; }
  50%      { left: 6%;  right: 6%;  opacity: 1;   }
}
@keyframes brandBgGlow {
  0%,100% { opacity: 0.25; }
  50%      { opacity: 0.9;  }
}
@keyframes bracketShine {
  0%,100% { border-color: var(--gold);    box-shadow: none; }
  50%      { border-color: var(--gold-hi); box-shadow: 0 0 10px var(--gold-dim); }
}

/* ── Sidebar Brand — row layout, compact ── */
.sidebar-brand {
  flex-direction: row !important;
  align-items: center !important;
  padding: 16px 16px 14px !important;
  gap: 14px !important;
  position: relative;
  overflow: visible;
}
.sidebar-brand::before { display: none; }
.sidebar-brand::after  { display: none; }

/* ── Logo mark ── */
.brand-logo-container {
  width: 42px; height: 42px;
  flex-shrink: 0;
  background: none !important; border: none !important; box-shadow: none !important;
}
.brand-logo-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: none;
  user-select: none; transition: filter var(--dur-slow); border: none; outline: none;
}
.brand-logo-container:hover .brand-logo-img {
  filter: drop-shadow(0 0 6px rgba(200,144,40,0.5));
}
.brand-logo-shimmer { display: none; }
.brand-logo-container::before { display: none; }

/* ── Collapsed: mini logo ── */
.brand-mini { display: none; }
.brand-mini-img {
  width: 32px; height: 32px;
  object-fit: contain;
  display: block;
}

/* ── Wordmark beside logo ── */
.brand-identity {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px; overflow: hidden; min-width: 0;
}
.brand-id-line { display: none; }
.brand-identity .brand-name {
  font-family: var(--sans) !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--text-0) !important; letter-spacing: 3px !important;
  text-transform: uppercase !important; display: block !important;
  white-space: nowrap !important;
}
.brand-identity .brand-sub {
  font-size: 7.5px !important; font-weight: 500 !important;
  letter-spacing: 2.5px !important; text-transform: uppercase !important;
  color: var(--gold) !important; opacity: 0.8 !important;
  display: block !important; white-space: nowrap !important; margin-top: 0 !important;
}

@media (max-width: 960px) {
  .sidebar-brand { padding: 10px 6px !important; gap: 0 !important; }
  .brand-identity { display: none !important; }
  .brand-logo-shimmer, .brand-halo, .brand-bracket { display: none !important; }
  .sidebar-brand::before, .sidebar-brand::after { display: none !important; }
}

/* ══════════════════════════════════════════════
   PROFIL UTILISATEUR
   ══════════════════════════════════════════════ */

.profil-layout {
  max-width: 1100px;
  margin: 0 auto;
}

.profil-card-main {
  padding: 28px 32px;
  margin-bottom: 24px;
}

.profil-avatar-area {
  display: flex;
  align-items: center;
  gap: 24px;
}

.profil-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold-lo, #8a6c2a));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--gold-bd-hi);
  overflow: hidden;
}

.profil-avatar-initials {
  font-family: var(--ff-display, 'Cormorant Garamond', serif);
  font-size: 2rem;
  font-weight: 600;
  color: var(--bg-1, #0e0e12);
  letter-spacing: 2px;
}

.profil-avatar-edit {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-2, #1a1a24);
  border: 1px solid var(--gold-hi);
  color: var(--gold-hi);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base);
}

.profil-avatar:hover .profil-avatar-edit {
  opacity: 1;
}

.profil-id h2 {
  margin: 0;
  font-family: var(--ff-display, 'Cormorant Garamond', serif);
  font-size: 1.6rem;
  color: var(--text-1, #e8e6e0);
}

.profil-role {
  display: block;
  color: var(--gold-hi);
  font-size: .85rem;
  margin-top: 2px;
}

.profil-since {
  display: block;
  color: var(--text-3, #666);
  font-size: .75rem;
  margin-top: 4px;
}

.profil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

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

.profil-section {
  padding: 20px 24px;
}

.profil-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  margin-top: 12px;
}

.profil-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profil-field.full {
  grid-column: 1 / -1;
}

.profil-field label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3, #666);
}

.profil-field input,
.profil-field select {
  background: var(--bg-2, #1a1a24);
  border: 1px solid var(--gold-bd);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text-1, #e8e6e0);
  font-size: .85rem;
  font-family: var(--ff-body, var(--sans));
  transition: border-color var(--dur-base);
}

.profil-field input:focus,
.profil-field select:focus {
  border-color: var(--gold-hi);
  outline: none;
}

.profil-field select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  padding-right: 28px;
}

/* Chips */
.profil-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.profil-chip {
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--bg-2, #1a1a24);
  border: 1px solid var(--gold-bd);
  color: var(--text-2, #aaa);
  font-size: .78rem;
  cursor: pointer;
  transition: all var(--dur-base);
  user-select: none;
}

.profil-chip:hover {
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

.profil-chip.selected {
  background: var(--au-bg);
  border-color: var(--gold-hi);
  color: var(--gold-hi);
}

/* Toggle switches */
.profil-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gold-bd);
  color: var(--text-2, #aaa);
  font-size: .85rem;
}

.profil-toggle-row:last-child { border-bottom: none; }

.profil-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
  flex-shrink: 0;
}

.profil-switch input { opacity: 0; width: 0; height: 0; }

.profil-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3, #2a2a34);
  border-radius: 22px;
  cursor: pointer;
  transition: var(--dur-base);
}

.profil-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: var(--text-3, #666);
  border-radius: 50%;
  transition: var(--dur-base);
}

.profil-switch input:checked + .profil-slider {
  background: var(--gold-dim);
}

.profil-switch input:checked + .profil-slider::before {
  transform: translateX(20px);
  background: var(--gold-hi);
}

/* Actions */
.profil-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

/* Sessions */
.profil-sessions {
  margin-top: 18px;
  border-top: 1px solid var(--gold-bd);
  padding-top: 14px;
}

.profil-sessions h4 {
  margin: 0 0 10px;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-3, #666);
}

.profil-session-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}

.profil-session-item .session-icon {
  color: var(--green, #2dcc70);
  font-size: .6rem;
}

.session-device {
  font-size: .82rem;
  color: var(--text-1, #e8e6e0);
}

.session-meta {
  font-size: .72rem;
  color: var(--text-3, #666);
}

/* Activity */
.profil-activity {
  max-height: 320px;
  overflow-y: auto;
}

.profil-activity-empty {
  color: var(--text-3, #666);
  font-size: .85rem;
  text-align: center;
  padding: 24px 0;
}

.profil-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--gold-bd);
}

.profil-activity-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.profil-activity-text {
  font-size: .82rem;
  color: var(--text-2, #aaa);
}

.profil-activity-date {
  font-size: .7rem;
  color: var(--text-3, #666);
  margin-top: 2px;
}

/* Toast */
.profil-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-2, #1a1a24);
  border: 1px solid var(--gold-hi);
  color: var(--gold-hi);
  padding: 10px 28px;
  border-radius: 8px;
  font-size: .85rem;
  z-index: 10000;
  opacity: 0;
  transition: opacity var(--dur-base), transform var(--dur-base);
  pointer-events: none;
}

.profil-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.profil-toast.error {
  border-color: var(--red, #e74c3c);
  color: var(--red, #e74c3c);
}

/* ── Profil completeness bar ── */
.profil-completeness-bar {
  width: 100%; height: 6px; border-radius: 3px;
  background: var(--tint-b); margin-top: 14px; overflow: hidden;
}
.profil-completeness-fill {
  height: 100%; border-radius: 3px; transition: width .5s var(--ease);
}
.profil-completeness-label {
  font-size: .72rem; color: var(--text-3); margin-top: 6px; text-align: center;
}
.profil-completeness-dots {
  display: flex; gap: 6px; justify-content: center; margin-top: 6px; flex-wrap: wrap;
}
.profil-cdot {
  font-size: .7rem; width: 18px; height: 18px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--tint-b);
}
.cdot-ok { color: var(--green); border-color: rgba(62,203,165,.25); }
.cdot-miss { color: var(--text-3); opacity: .5; }

/* ── Session revoke button ── */
.profil-session-revoke {
  background: none; border: 1px solid var(--tint-b); color: var(--text-3);
  border-radius: 4px; cursor: pointer; font-size: .7rem; padding: 2px 6px;
  transition: all var(--dur-base);
}
.profil-session-revoke:hover {
  border-color: var(--red, #c04040); color: var(--red, #c04040);
}

/* ── Display density ── */
[data-density="compact"] .profil-section,
[data-density="compact"] .roos-frame { padding: 12px; }
[data-density="compact"] table td,
[data-density="compact"] table th { padding: 4px 8px; font-size: .78rem; }
[data-density="confort"] .profil-section,
[data-density="confort"] .roos-frame { padding: 28px; }
[data-density="confort"] table td,
[data-density="confort"] table th { padding: 12px 16px; }

/* ═══════════════════════════════════════════════════════
   PLANNING PRÉVISIONNEL
   ═══════════════════════════════════════════════════════ */
.pp-panel { display: none; }
.pp-panel.active { display: block; }

/* Scenario slider */
.pp-scenario-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--au-bg);
  border: 1px solid var(--gold-bd);
  border-radius: 8px;
  margin-bottom: 12px;
}
.pp-scenario-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pp-scenario-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}
.pp-tag-opt { color: #45B97C; background: rgba(69,185,124,0.12); }
.pp-tag-pes { color: #D47A76; background: rgba(212,122,118,0.12); }
.pp-scenario-slider {
  flex: 1;
  max-width: 220px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--tint-b);
  border-radius: 2px;
  outline: none;
}
.pp-scenario-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold, #C89028);
  cursor: pointer;
  border: 2px solid var(--shade-b);
}
.pp-scenario-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold, #C89028);
  cursor: pointer;
  border: 2px solid var(--shade-b);
}
.pp-scenario-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold, #C89028);
  min-width: 40px;
  text-align: center;
}

.pp-gantt-container {
  overflow-x: auto;
  padding: 16px 0;
}

.pp-gantt-row {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  min-height: 36px;
}

.pp-gantt-label {
  width: 200px;
  min-width: 200px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1, #e5e7eb);
  padding-right: 12px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-gantt-track {
  flex: 1;
  position: relative;
  height: 28px;
  background: var(--tint-a);
  border-radius: 4px;
}

.pp-gantt-bar {
  position: absolute;
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 30px;
  cursor: pointer;
  transition: filter var(--dur-base);
}
.pp-gantt-bar:hover { filter: brightness(1.2); }

.pp-gantt-bar.lot-01,.pp-gantt-bar.lot-18,.pp-gantt-bar.lot-20 { background: linear-gradient(135deg, #8B6914, #C89028); }
.pp-gantt-bar.lot-02,.pp-gantt-bar.lot-03 { background: linear-gradient(135deg, #4A6FA5, #6B8FBF); }
.pp-gantt-bar.lot-04,.pp-gantt-bar.lot-05 { background: linear-gradient(135deg, #2D8B55, #45B97C); }
.pp-gantt-bar.lot-06,.pp-gantt-bar.lot-07,.pp-gantt-bar.lot-08 { background: linear-gradient(135deg, #7B4EA3, #A370D4); }
.pp-gantt-bar.lot-09,.pp-gantt-bar.lot-10,.pp-gantt-bar.lot-15 { background: linear-gradient(135deg, #B85450, #D47A76); }
.pp-gantt-bar.lot-11,.pp-gantt-bar.lot-12,.pp-gantt-bar.lot-13 { background: linear-gradient(135deg, #2A9D8F, #48C9B0); }
.pp-gantt-bar.lot-14,.pp-gantt-bar.lot-16 { background: linear-gradient(135deg, #E76F51, #F4A261); }
.pp-gantt-bar.lot-17,.pp-gantt-bar.lot-19,.pp-gantt-bar.lot-00 { background: linear-gradient(135deg, #6C757D, #ADB5BD); }

/* ── PP Gantt Row Clickable ── */
.pp-gantt-group { cursor: pointer; border-radius: 6px; transition: background var(--dur-fast); }
.pp-gantt-group:hover { background: var(--au-bg); }
.pp-gantt-group.pp-group-open { background: var(--au-bg); border-radius: 6px 6px 0 0; }

.pp-group-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-group-arrow {
  display: inline-block; width: 16px; text-align: center;
  font-size: 10px; color: var(--gold, #C89028); transition: transform var(--dur-base);
}
.pp-group-info {
  font-size: 11px; color: var(--text-3, #64748b); font-weight: 400; margin-left: 4px;
}

/* ── Task sub-rows ── */
.pp-group-tasks {
  border-left: 3px solid var(--gold, #C89028);
  margin-left: 8px;
  margin-bottom: 6px;
  animation: ppGroupSlide .2s var(--ease);
}
@keyframes ppGroupSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.pp-task-row {
  min-height: 32px;
  padding: 0;
  margin-bottom: 1px;
  border-radius: 4px;
  transition: background var(--dur-fast);
}
.pp-task-row:hover { background: var(--au-bg); }
.pp-task-clickable { cursor: pointer; }
.pp-task-expanded { background: var(--au-bg); }

.pp-task-label {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px 8px 4px 14px !important;
  min-width: 220px;
}
.pp-task-desc {
  font-size: 11.5px; font-weight: 500;
  color: var(--text-1, #e5e7eb);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-task-meta {
  font-size: 10px; color: var(--text-3, #64748b);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pp-task-res-hint {
  color: var(--gold, #C89028); font-weight: 600; cursor: pointer;
}

/* Resource reveal panel */
.pp-task-resources {
  margin-left: 14px;
  padding: 6px 14px 8px;
  border-left: 2px solid var(--gold-bd);
  animation: ppGroupSlide .15s var(--ease);
}
.pp-task-res-inner {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pp-res-chip-sm {
  font-size: 10px;
  background: var(--au-bg);
  border: 1px solid var(--gold-bd);
  border-radius: 4px;
  padding: 3px 10px;
  color: var(--text-2, #94a3b8);
  white-space: nowrap;
}

/* Task-level bar (thinner) */
.pp-gantt-bar-task {
  position: absolute; top: 25%; height: 50%;
  border-radius: 4px;
  font-size: 9px; color: var(--text-0); font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; overflow: hidden;
  min-width: 22px;
  opacity: 0.8;
  transition: opacity var(--dur-fast);
}
.pp-gantt-bar-task:hover { opacity: 1; }
/* Re-use lot colors */
.pp-gantt-bar-task.lot-20 { background: linear-gradient(135deg, #6C757D, #ADB5BD); }
.pp-gantt-bar-task.lot-19 { background: linear-gradient(135deg, #E76F51, #F4A261); }
.pp-gantt-bar-task.lot-01 { background: linear-gradient(135deg, #E9C46A, #F4A261); }
.pp-gantt-bar-task.lot-02 { background: linear-gradient(135deg, #7B8CDE, #A5B4FC); }
.pp-gantt-bar-task.lot-03 { background: linear-gradient(135deg, #C89028, #E0A830); }
.pp-gantt-bar-task.lot-04,.pp-gantt-bar-task.lot-05,.pp-gantt-bar-task.lot-06 { background: linear-gradient(135deg, #06B6D4, #67E8F9); }
.pp-gantt-bar-task.lot-07,.pp-gantt-bar-task.lot-08,.pp-gantt-bar-task.lot-09,.pp-gantt-bar-task.lot-10 { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
.pp-gantt-bar-task.lot-11,.pp-gantt-bar-task.lot-12,.pp-gantt-bar-task.lot-13 { background: linear-gradient(135deg, #2A9D8F, #48C9B0); }
.pp-gantt-bar-task.lot-14,.pp-gantt-bar-task.lot-16 { background: linear-gradient(135deg, #E76F51, #F4A261); }
.pp-gantt-bar-task.lot-17,.pp-gantt-bar-task.lot-00 { background: linear-gradient(135deg, #6C757D, #ADB5BD); }

/* ── Prévisionnel Import Bar ── */
.pp-import-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; margin-bottom: 10px; background: var(--au-bg); border: 1px solid var(--gold-bd); border-radius: 8px; flex-wrap: wrap; }
.pp-range { width: 80px; accent-color: var(--gold); }

/* ── Critical Path ── */
.pp-critical { box-shadow: 0 0 0 2px rgba(192,64,64,0.5), 0 3px 12px rgba(192,64,64,0.2) !important; }
.pp-critical-badge { font-size: 8px; color: var(--red); background: rgba(192,64,64,0.12); padding: 1px 5px; border-radius: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; }

.pp-gantt-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tint-b);
}

.pp-gantt-header .pp-gantt-label { color: var(--text-3, #6B7280); font-weight: 500; font-size: 11px; }
.pp-gantt-header .pp-gantt-track { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-3, #6B7280); }

.pp-gantt-day-markers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.pp-gantt-day-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tint-a);
}

.pp-gantt-tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  border: 1px solid var(--gold-bd-hi);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  color: var(--text-1, #e5e7eb);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base);
  z-index: 10;
}
.pp-gantt-bar:hover .pp-gantt-tooltip { opacity: 1; }

/* Resources grid */
.pp-resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 16px 0;
}

.pp-resource-card {
  background: var(--tint-a);
  border: 1px solid var(--tint-b);
  border-radius: 10px;
  padding: 16px;
}

.pp-resource-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold, #C89028);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pp-lot-dur {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  background: var(--au-bg);
  color: var(--gold, #C89028);
  padding: 2px 8px;
  border-radius: 4px;
}

.pp-res-subtitle {
  font-size: 10px;
  color: var(--text-3, #6B7280);
  margin: -8px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--tint-b);
  letter-spacing: 0.3px;
}

.pp-resource-item.pp-bottleneck {
  background: var(--au-bg);
  border-radius: 4px;
  padding: 6px 4px;
}
.pp-resource-item.pp-bottleneck .pp-res-name { color: var(--gold, #C89028); }

.pp-resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--tint-a);
  font-size: 12px;
}

.pp-resource-item:last-child { border-bottom: none; }
.pp-resource-item .pp-res-name { color: var(--text-1, #e5e7eb); font-weight: 500; }
.pp-resource-item .pp-res-hours { color: var(--gold, #C89028); font-weight: 700; font-size: 13px; }
.pp-resource-item .pp-res-type { font-size: 10px; color: var(--text-3, #6B7280); text-transform: uppercase; letter-spacing: 0.5px; }

/* Detail table */
.pp-detail-table { overflow-x: auto; }

.pp-detail-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pp-detail-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--au-bg);
  color: var(--gold, #C89028);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gold-bd);
  position: sticky;
  top: 0;
}

.pp-detail-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--tint-a);
  color: var(--text-1, #e5e7eb);
}

.pp-detail-table tr:hover td {
  background: var(--au-bg);
}

.pp-lot-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  background: var(--au-bg);
  color: var(--gold, #C89028);
}

.pp-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3, #6B7280);
  font-size: 14px;
}

.pp-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.3;
}

/* ═══════════════════════════════════════════════════════════
   DEVIS EN BASE
   ═══════════════════════════════════════════════════════════ */
.dv-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dv-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tint-a);
  border: 1px solid var(--tint-b);
  border-radius: 8px;
  padding: 8px 14px;
  flex: 1;
  max-width: 360px;
}

.dv-search-box input {
  background: none;
  border: none;
  color: var(--text-1, #e5e7eb);
  font-size: 13px;
  outline: none;
  width: 100%;
}

.dv-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2, #9CA3AF);
}

.dv-sep { color: var(--text-3, #6B7280); }

/* Devis cards grid */
.dv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.dv-card {
  background: var(--tint-a);
  border: 1px solid var(--tint-b);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
}
.dv-card:hover {
  border-color: var(--gold-bd-hi);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--sh-c-a);
}

.dv-card-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

/* ── Devis Status Badge (on cards) ── */
.dv-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dv-status-brouillon   { background: rgba(148,163,184,.18); color: #94a3b8; }
.dv-status-en_revision  { background: var(--au-bg);  color: #fbbf24; }
.dv-status-valide       { background: rgba(56,189,248,.15);  color: #38bdf8; }
.dv-status-soumis       { background: rgba(168,85,247,.15);  color: #a855f7; }
.dv-status-gagne        { background: rgba(34,197,94,.15);   color: var(--ok); }
.dv-status-perdu        { background: rgba(239,68,68,.15);   color: var(--err); }

/* ── Devis Status Bar (detail view stepper) ── */
.dv-status-bar {
  background: var(--bg-2, #1e2235);
  border: 1px solid var(--border, #2a2e45);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.dv-status-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dv-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--dur-base);
}
.dv-step-done {
  background: rgba(34,197,94,.12);
  color: var(--ok);
}
.dv-step-active {
  background: var(--gold, #C89028);
  color: #000;
  box-shadow: 0 0 12px var(--gold-dim);
}
.dv-step-pending {
  background: rgba(148,163,184,.08);
  color: #64748b;
}
.dv-step-perdu {
  background: rgba(239,68,68,.15);
  color: var(--err);
}
.dv-step-icon { font-size: 15px; }
.dv-step-label { white-space: nowrap; }
.dv-step-arrow {
  color: #475569;
  font-size: 16px;
  margin: 0 2px;
  user-select: none;
}
.dv-status-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dv-status-actions button {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.dv-status-actions button:not(.btn-danger) {
  background: var(--gold, #C89028);
  color: #000;
}
.dv-status-actions button:not(.btn-danger):hover {
  filter: brightness(1.15);
}
.btn-danger {
  background: rgba(239,68,68,.2) !important;
  color: var(--err) !important;
}
.btn-danger:hover {
  background: rgba(239,68,68,.35) !important;
}

/* ══════════════════════════════════════════════
   IMPORT DEVIS HISTORIQUES DÉTAILLÉS
   ══════════════════════════════════════════════ */
.import-card-wide {
  grid-column: 1 / -1;
  text-align: left;
}
.import-card-wide h3 { font-size: 15px; margin-bottom: 4px; }
.import-card-wide .import-desc { margin-bottom: 8px; }

/* Header bar */
.dv-import-header {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  padding: 10px 12px;
  background: var(--au-bg);
  border-radius: 8px;
  margin-bottom: 12px;
}
.dv-import-stats { display: flex; align-items: center; gap: 12px; font-size: 12px; flex-wrap: wrap; }
.dv-stat { background: var(--au-bg); padding: 2px 8px; border-radius: 4px; font-size: 11px; color: var(--gold); }
.dv-import-actions { display: flex; align-items: center; gap: 10px; }
.dv-check-all { font-size: 11px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.btn-sm { padding: 5px 14px; font-size: 12px; border-radius: 6px; }

/* Ouvrage cards */
.dv-ouvrages-list { display: block; max-height: 70vh; overflow-y: auto; padding: 4px 0; }
.dv-ouv-card { border: 1px solid var(--gold-bd); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.dv-ouv-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer;
  background: var(--tint-a);
  transition: background var(--dur-fast);
  font-size: 12px;
  color: var(--text, #e0e0e0);
  min-height: 36px;
}
.dv-ouv-header:hover { background: var(--au-bg); }
.dv-ouv-check { flex-shrink: 0; }
.dv-ouv-num { color: var(--text-3); font-size: 11px; min-width: 40px; }
.dv-ouv-desc { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-ouv-unite { color: var(--text-3); font-size: 11px; min-width: 35px; text-align: center; }
.dv-ouv-qty { min-width: 55px; text-align: right; font-size: 11px; }
.dv-ouv-pu { min-width: 70px; text-align: right; color: var(--gold); font-weight: 600; }
.dv-ouv-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.dv-status-ok { background: rgba(34,197,94,.12); color: var(--ok); }
.dv-status-warn { background: rgba(250,204,21,.12); color: #eab308; }
.dv-ouv-expand { font-size: 10px; color: var(--text-3); min-width: 14px; transition: transform var(--dur-base); }

/* Body (expanded) */
.dv-ouv-body { padding: 8px 12px 12px; background: var(--shade-a); }
.dv-warnings { margin-bottom: 8px; }
.dv-warning-item { font-size: 11px; color: #eab308; padding: 2px 0; }
.dv-ecart { font-size: 11px; margin-bottom: 8px; }

/* Sub detail tables */
.dv-sub-section { margin-bottom: 10px; }
.dv-sub-section h5 { font-size: 12px; margin-bottom: 4px; color: var(--text-2); }
.dv-sub-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.dv-sub-table th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--gold-bd); color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
.dv-sub-table td { padding: 3px 6px; border-bottom: 1px solid var(--tint-a); }
.dv-sub-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dv-match-cell { font-size: 10px; }
.dv-match-ok td { background: rgba(34,197,94,.04); }
.dv-match-fuzzy td { background: rgba(250,204,21,.04); }
.dv-match-none td { background: rgba(239,68,68,.04); }

/* ── Unmatched Resolution Modal ── */
.dv-resolve-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--shade-c); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: dvResolveIn .2s var(--ease);
}
@keyframes dvResolveIn { from { opacity:0 } to { opacity:1 } }

.dv-resolve-modal {
  background: #0d1424; border: 1px solid var(--gold-bd);
  border-radius: 12px; width: 90vw; max-width: 820px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px var(--sh-c-c);
}

.dv-resolve-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--gold-bd);
}
.dv-resolve-close {
  background: none; border: none; color: #9a9080; font-size: 22px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.dv-resolve-close:hover { color: #f0ebe2; }

.dv-resolve-body {
  flex: 1; overflow-y: auto; padding: 16px 22px;
  scrollbar-width: thin; scrollbar-color: rgba(200,144,40,.2) transparent;
}

.dv-resolve-group { margin-bottom: 20px; }

.dv-resolve-row {
  background: var(--tint-a); border: 1px solid var(--gold-bd);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 8px;
  transition: border-color var(--dur-base);
}
.dv-resolve-row.resolved {
  border-color: rgba(34,197,94,.3);
  background: rgba(34,197,94,.04);
}

.dv-resolve-item-info {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.dv-resolve-item-badge {
  background: var(--au-bg); color: var(--gold);
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; min-width: 24px; text-align: center;
}
.dv-resolve-item-desig {
  font-size: 13px; font-weight: 600; color: #f0ebe2;
}
.dv-resolve-item-ouv {
  font-size: 10px; color: #6a6050; margin-left: auto; white-space: nowrap;
}

.dv-resolve-search-wrap {
  position: relative;
}
.dv-resolve-search {
  width: 100%; padding: 7px 10px; font-size: 12px;
  background: var(--tint-a); border: 1px solid var(--gold-bd);
  border-radius: 6px; color: var(--text-1); outline: none;
  transition: border-color var(--dur-base);
}
.dv-resolve-search:focus {
  border-color: var(--gold-bd-hi);
  background: var(--tint-b);
}
.dv-resolve-search::placeholder { color: #5a5545; }

.dv-resolve-results {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  z-index: 10; background: #111a2e; border: 1px solid var(--gold-bd);
  border-radius: 0 0 6px 6px; max-height: 200px; overflow-y: auto;
  box-shadow: 0 8px 24px var(--sh-c-c);
}

.dv-resolve-result-item {
  padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--tint-a);
  transition: background var(--dur-fast);
}
.dv-resolve-result-item:hover { background: var(--au-bg); }
.dv-resolve-result-item:last-child { border-bottom: none; }

.dv-resolve-result-main {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dv-resolve-result-desig { font-size: 12px; color: var(--text-1); }
.dv-resolve-result-score {
  font-size: 10px; font-weight: 600; padding: 1px 5px;
  border-radius: 3px; white-space: nowrap;
}
.dv-resolve-result-score.high { background: rgba(34,197,94,.15); color: var(--ok); }
.dv-resolve-result-score.med { background: rgba(250,204,21,.15); color: #facc15; }
.dv-resolve-result-score.low { background: rgba(239,68,68,.15); color: var(--err); }

.dv-resolve-result-meta {
  display: flex; gap: 10px; font-size: 10px; color: #7a7060; margin-top: 2px;
}

.dv-resolve-match {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2);
}
.dv-resolve-matched-badge { color: var(--ok); font-weight: 700; }
.dv-resolve-matched-text { font-size: 12px; color: var(--text-1); flex: 1; }
.dv-resolve-matched-prix { font-size: 11px; color: var(--gold); font-weight: 600; }
.dv-resolve-matched-clear {
  background: none; border: none; color: #9a9080; cursor: pointer;
  font-size: 14px; padding: 0 2px;
}
.dv-resolve-matched-clear:hover { color: var(--err); }

.dv-resolve-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-top: 1px solid var(--gold-bd);
}
.dv-resolve-counter { font-size: 12px; color: #9a9080; }
.dv-resolve-skip {
  margin-left: auto; background: none; border: 1px solid var(--gold-bd);
  color: #9a9080; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12px; transition: all var(--dur-base);
}
.dv-resolve-skip:hover { border-color: var(--gold-bd-hi); color: var(--text-1); }

.dv-resolve-loading, .dv-resolve-empty {
  padding: 12px; text-align: center; font-size: 11px; color: #7a7060;
}

/* Import result */
.dv-import-success { padding: 12px; background: rgba(34,197,94,.06); border-radius: 8px; }
.dv-import-result-stats { display: flex; gap: 16px; font-size: 12px; margin-top: 6px; }
.dv-import-errors { margin-top: 8px; }

/* Devis import spinner */
.devis-import-spinner {
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid var(--gold, #C89028); border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.devis-import-log-item {
  display: flex; align-items: center; gap: 6px; padding: 2px 0;
  color: var(--text-3); font-size: 11px;
}
.devis-import-log-item.success { color: var(--green, #22c55e); }
.devis-import-log-item.error { color: var(--red, #ef4444); }

.dv-card-icon {
  color: var(--gold, #C89028);
  flex-shrink: 0;
  margin-top: 2px;
}

.dv-card-title {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1, #e5e7eb);
  word-break: break-word;
}

.dv-card-date {
  font-size: 11px;
  color: var(--text-3, #6B7280);
  white-space: nowrap;
}

.dv-card-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 14px;
}

.dv-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dv-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--gold, #C89028);
  font-family: var(--serif, Georgia, serif);
}

.dv-stat-label {
  font-size: 10px;
  color: var(--text-3, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dv-card-lots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dv-lot-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  background: var(--au-bg);
  color: var(--gold, #C89028);
  white-space: nowrap;
}
.dv-lot-more {
  background: var(--tint-b);
  color: var(--text-3, #6B7280);
}

/* Detail view */
.dv-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.dv-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--tint-a);
  border: 1px solid var(--tint-b);
  border-radius: 8px;
  color: var(--text-1, #e5e7eb);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--dur-base);
}
.dv-back-btn:hover { background: var(--tint-b); }

.dv-detail-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--gold, #C89028);
  margin: 0;
  flex: 1;
}

.dv-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2, #9CA3AF);
}

.dv-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(231,76,60,0.1);
  border: 1px solid rgba(231,76,60,0.2);
  color: #e74c3c;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 12px;
  transition: background var(--dur-base);
}
.dv-delete-btn:hover { background: rgba(231,76,60,0.2); }

/* Lot summary row */
.dv-lot-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.dv-lot-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--tint-a);
  border: 1px solid var(--tint-b);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-1, #e5e7eb);
  font-weight: 600;
}

.dv-lot-card-info {
  font-weight: 400;
  color: var(--text-3, #6B7280);
  font-size: 11px;
  margin-left: 4px;
}

/* Detail table */
.dv-detail-table { overflow-x: auto; }

.dv-detail-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dv-detail-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--au-bg);
  color: var(--gold, #C89028);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gold-bd);
  position: sticky;
  top: 0;
}

.dv-detail-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--tint-a);
  color: var(--text-1, #e5e7eb);
}

.dv-detail-table tr:hover td {
  background: var(--au-bg);
}

.dv-lot-separator td {
  padding: 12px 12px 6px;
  font-weight: 700;
  font-size: 13px;
  color: var(--gold, #C89028);
  border-bottom: 1px solid var(--gold-bd);
  background: var(--au-bg);
}

/* ── Rich devis detail table ── */
.dv-rich-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dv-rich-table th {
  text-align: left; padding: 10px 10px;
  background: var(--au-bg); color: var(--gold); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gold-bd); position: sticky; top: 0;
}
.dv-rich-table th.r, .dv-rich-table td.r { text-align: right; }
.dv-rich-table td { padding: 7px 10px; border-bottom: 1px solid var(--tint-a); color: var(--text-1); }

/* ═══════ Matériaux IA — sub-tabs (Catalogue + Décompositions validées) ═══════ */
.mia-subtabs {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--gold-bd);
  background: linear-gradient(180deg, var(--au-bg), transparent);
  margin-bottom: 14px;
}
.mia-subtab {
  background: transparent; border: 1px solid var(--gold-bd);
  color: var(--text-2); padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 500; cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.mia-subtab:hover { color: var(--text-1); border-color: var(--gold-bd-hi); }
.mia-subtab.active {
  background: var(--au-bg); color: var(--gold-hi);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--au-bg), inset 0 0 14px var(--au-bg);
}
.mia-subtab-info {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  font-style: italic; letter-spacing: 0.2px;
}
.mia-pane { display: none; padding: 0 14px 14px; }
.mia-pane.active { display: block; }

.mia-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.mia-upload-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px;
  background: linear-gradient(135deg, var(--au-bg), var(--au-bg));
  border: 1px solid var(--gold); color: var(--gold-hi);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.mia-upload-btn:hover {
  background: linear-gradient(135deg, var(--gold-dim), var(--au-bg));
  box-shadow: 0 4px 14px var(--au-bg);
}
.mia-btn-secondary {
  padding: 8px 14px; border-radius: 8px;
  background: transparent; border: 1px solid var(--gold-bd-hi);
  color: var(--text-1); font-size: 12px; cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.mia-btn-secondary:hover { background: var(--au-bg); border-color: var(--gold); }
/* La classe était appelée par le bouton « Sauver » de l'éditeur de ressources
   mais n'existait dans aucune feuille : le bouton s'affichait avec le rendu
   natif du navigateur, police et hauteur comprises, au milieu d'une interface
   qui n'en a nulle part ailleurs. L'affirmatif du système, c'est l'or plein. */
.mia-btn-primary {
  padding: 8px 16px; border-radius: 8px;
  background: linear-gradient(135deg, var(--au-hi), var(--au-lo));
  border: 1px solid var(--au-hi);
  color: oklch(0.20 0.02 232);
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease);
}
.mia-btn-primary:hover { box-shadow: var(--glow-sm); filter: brightness(1.06); }
.mia-btn-primary:active { filter: brightness(0.96); }
.mia-btn-primary:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.mia-cat-status, .mia-decomp-status {
  font-size: 11px; color: var(--text-2);
  padding: 4px 10px; background: var(--tint-a); border-radius: 6px;
}
.mia-search {
  flex: 1; min-width: 220px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--tint-a); border: 1px solid var(--tint-b);
  color: var(--text-1); font-size: 12px;
}
.mia-search:focus { outline: none; border-color: var(--gold); background: var(--au-bg); }
.mia-cat-summary { font-size: 11px; color: var(--text-3); margin-bottom: 8px; }
.mia-lx-class {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--au-bg); color: var(--gold-hi);
  border: 1px solid var(--gold-bd);
}

/* ── LangExtract attributes editor (line panel) ── */
.dx-lx-block {
  margin: 14px 0; padding: 14px;
  background: var(--au-bg);
  border: 1px solid var(--gold-bd);
  border-radius: 10px;
}
.dx-lx-title {
  font-size: 12px; font-weight: 600; color: var(--gold-hi);
  margin-bottom: 10px; letter-spacing: 0.3px;
}
.dx-lx-hint { font-weight: 400; color: var(--text-3); font-size: 10px; margin-left: 8px; }
.dx-lx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .dx-lx-cols { grid-template-columns: 1fr; } }
.dx-lx-col-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-3); margin-bottom: 6px;
}
.dx-lx-card {
  padding: 10px; margin-bottom: 8px;
  background: var(--tint-a);
  border: 1px solid var(--tint-b);
  border-radius: 8px;
}
.dx-lx-card.readonly { background: var(--tint-a); }
.dx-lx-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dx-lx-text { color: var(--text-1); font-size: 12px; flex: 1; }
.lx-attrs-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.lx-attr-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) 1.4fr;
  gap: 8px; align-items: center;
  padding: 4px 0;
}
.lx-attr-row.ro { grid-template-columns: minmax(120px, 1fr) 1.4fr; }
.lx-attr-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-2); cursor: pointer;
}
.lx-attr-check input[type="checkbox"] { accent-color: var(--gold); }
.lx-attr-input {
  padding: 4px 8px; border-radius: 5px;
  background: var(--tint-a);
  border: 1px solid var(--tint-b);
  color: var(--text-1); font-size: 11px;
}
.lx-attr-input:focus { outline: none; border-color: var(--gold); background: var(--au-bg); }
.lx-attr-input[data-lx-edited="1"] { border-color: var(--gold-bd-hi); }
.lx-attr-key { font-size: 11px; color: var(--text-2); }
.lx-attr-val { font-size: 11px; color: var(--text-1); }
.lx-attrs-empty { font-size: 11px; color: var(--text-3); font-style: italic; padding: 4px 0; }

.dv-rich-table .dv-lot-separator td { padding: 12px 10px 6px; font-weight: 700; font-size: 13px; color: var(--gold); border-bottom: 1px solid var(--gold-bd); background: var(--au-bg); }

.dv-row { cursor: pointer; transition: background var(--dur-fast); }
.dv-row:hover td { background: var(--au-bg); }
.dv-expanded td { background: var(--au-bg) !important; }

.dv-expand-chevron {
  font-size: 9px; color: var(--text-3); transition: transform var(--dur-base);
  text-align: center; width: 28px; user-select: none;
}
.dv-expanded .dv-expand-chevron { color: var(--gold); }

/* ══ Éditeur de ressources en ligne ═══════════════════════════════════════
   Le formulaire occupe une ligne entière du tableau (voir renderResources-
   Training) : il vivait auparavant dans la cellule « Preview ressources », où
   il écrasait la description et débordait sur la colonne Action. */
.resedit-row { cursor: pointer; }
.resedit-row.is-editing > td {
  background: var(--au-bg);
  border-bottom-color: transparent;
}
.resedit-row.is-editing > td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.resedit-preview-cell { max-width: 420px; }
.resedit-hint {
  color: var(--text-2);
  font-size: 11px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.resedit-hint.is-live { color: var(--gold-hi); }

.resedit-expand-row > td {
  padding: 0 0 14px !important;
  background: var(--au-bg);
  border-bottom: 1px solid var(--gold-bd) !important;
}
/* Une ligne dépliée n'est pas une ligne du tableau : le survol général la
   faisait glisser de deux pixels et lui posait un liseré d'appel, alors
   qu'elle ne mène nulle part. */
.resedit-expand-row:hover,
.pers-expand-row:hover,
.mat-expand-row:hover {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.resedit-panel {
  margin: 0 12px;
  border: 1px solid var(--gold-bd);
  border-radius: var(--r-5);
  background: linear-gradient(180deg, var(--sl-1), var(--sl-0));
  box-shadow: var(--sh-2);
  animation: hxOpen .22s var(--ease);
  overflow: hidden;
}

/* ── Entête : ce que l'on édite, et à quelle quantité ── */
.resedit-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--ln-1);
}
.resedit-head-id { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.resedit-badge {
  padding: 3px 8px; border-radius: var(--r-p);
  background: var(--au-bg); border: 1px solid var(--gold-bd-hi);
  color: var(--gold-hi); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
}
.resedit-head-desc {
  color: var(--text-0); font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resedit-field { display: flex; align-items: center; gap: var(--s-2); }
.resedit-field-lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--tx-4);
}
.resedit-field-unit { font-size: 11px; color: var(--text-2); }

/* ── Groupes Homme / Machine ── */
.resedit-groups { padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-3); }
.resedit-group {
  border: 1px solid var(--ln-1);
  border-radius: var(--r-4);
  background: var(--sl-0);
  overflow: hidden;
}
.resedit-group-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--ln-1);
  background: var(--sl-1);
}
.resedit-group-title {
  color: var(--gold-hi); text-transform: uppercase;
  letter-spacing: 1px; font-size: 10px; font-weight: 700;
}
.resedit-group-count {
  min-width: 18px; padding: 1px 6px; border-radius: var(--r-p);
  background: var(--au-bg); color: var(--gold-hi);
  font-size: 10px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Les boutons d'ajout appartiennent au groupe qu'ils remplissent : quatre
   boutons alignés en haut du panneau obligeaient à nommer la catégorie dans
   chaque libellé (« + Homme direct »). */
.resedit-group-add { margin-left: auto; display: flex; gap: var(--s-1); }
.resedit-add {
  padding: 4px 10px; border-radius: var(--r-p);
  background: transparent; border: 1px solid var(--ln-2);
  color: var(--text-2); font-size: 11px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.resedit-add:hover { color: var(--gold-hi); border-color: var(--gold-bd-hi); }
.resedit-group-body { padding: var(--s-2) var(--s-3) var(--s-3); }

/* ── Grille des lignes ── 8 colonnes, identiques pour une ressource directe
   et une ressource scénario : l'ancienne grille en comptait 7 et une ligne
   scénario en produisait 8, la dernière retombant à la ligne suivante. */
.resedit-cols,
.resedit-item-row {
  display: grid;
  /* Neuf pistes, dont une quatrième vide : le bloc d'identité (libellé, type,
     registre) reste groupé à gauche, le bloc chiffré aligné à droite comme
     les colonnes du tableau au-dessus, et le jeu se met entre les deux. En
     laissant respirer une piste de contenu, l'air se logeait entre le libellé
     et son propre menu déroulant. */
  grid-template-columns:
    minmax(110px, 240px) 112px 340px 1fr 72px 72px 78px 88px 28px;
  align-items: center;
  gap: var(--s-2);
}
.resedit-cols {
  padding: var(--s-2) 0 6px;
  border-bottom: 1px solid var(--ln-1);
  margin-bottom: var(--s-2);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--tx-4);
}
.resedit-cols span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resedit-cols .c-num { text-align: right; }
.resedit-item-row { margin-bottom: 6px; }
.resedit-item-row:last-child { margin-bottom: 0; }
.resedit-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-0); font-size: 12px; font-weight: 600;
}
.resedit-input {
  background: var(--sl-1);
  border: 1px solid var(--ln-2);
  color: var(--text-0);
  padding: 6px 8px;
  border-radius: var(--r-3);
  font-size: 12px;
  font-family: inherit;
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.resedit-input:hover { border-color: var(--ln-3); }
.resedit-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--au-bg);
}
/* La flèche native du navigateur est le seul élément gris système de la page. */
.resedit-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b93a1' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px;
  cursor: pointer;
}
.resedit-select option { background: var(--sl-1); color: var(--text-0); }
.resedit-name { width: 100%; }
.resedit-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.resedit-qty { width: 92px; text-align: right; font-family: var(--mono); }
.resedit-derived {
  text-align: right; font-family: var(--mono); font-size: 12px;
  color: var(--gold-hi); padding: 6px 8px;
  border: 1px dashed var(--gold-bd); border-radius: var(--r-3);
}
.resedit-void { text-align: right; color: var(--tx-4); font-size: 12px; }
.resedit-meta {
  color: var(--text-2); font-size: 11px; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Quatre boutons « Suppr. » pesaient plus lourd que les données qu'ils
   suppriment : ils ne se colorent qu'au survol de leur ligne. */
.resedit-del {
  width: 24px; height: 24px; padding: 0; line-height: 1;
  border: 1px solid transparent; border-radius: var(--r-3);
  background: transparent; color: var(--tx-4);
  font-size: 15px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.resedit-item-row:hover .resedit-del { color: var(--text-2); }
.resedit-del:hover { color: var(--err); border-color: var(--err-ln); background: var(--err-bg); }
.resedit-empty {
  color: var(--text-2); font-size: 11px;
  padding: var(--s-3); text-align: center;
}

/* ── Pied : total vivant + actions ── */
.resedit-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--ln-1);
  background: var(--sl-1);
}
.resedit-total { display: flex; align-items: baseline; gap: var(--s-2); }
.resedit-total-lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--tx-4);
}
.resedit-total strong {
  font-family: var(--mono); font-size: 13px; color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
}
.resedit-actions { display: flex; align-items: center; gap: var(--s-2); }

@media (max-width: 1460px) {
  .resedit-cols,
  .resedit-item-row {
    grid-template-columns: minmax(90px, 190px) 100px 250px 1fr 64px 64px 70px 78px 26px;
  }
}
/* Sous 1180 px, le formulaire défile latéralement plutôt que de s'empiler.
   Empilée, chaque ligne devenait une carte de champs sans intitulés : « 0,2 »
   et « 2 » l'un sous l'autre ne se distinguent plus. Le tableau au-dessus
   défile déjà de la même façon — l'outil est fait pour un grand écran. */
@media (max-width: 1180px) {
  .resedit-group-body { overflow-x: auto; padding-bottom: var(--s-2); }
  .resedit-cols,
  .resedit-item-row {
    min-width: 900px;
    grid-template-columns: 170px 100px 230px 1fr 66px 76px 70px 78px 26px;
  }
}

.dv-col-mat { color: var(--phase3a, #5bbfad); font-size: 11px; }
.dv-col-rh  { color: var(--phase3b, #4a9ed6); font-size: 11px; }
.dv-col-fg  { color: var(--phase4a, #a088c4); font-size: 11px; }
.dv-col-mg  { color: var(--green, #3ecba5); font-size: 11px; }

.dv-desc-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dv-expand-row td { padding: 0 !important; border-bottom: 2px solid var(--gold-bd); }
.dv-expand-row .dx-panel { margin: 0; border-top: none; border-radius: 0 0 8px 8px; }

/* Meta decomposition dots */
.dv-total-big { font-weight: 700; color: var(--gold-hi); font-size: 14px; }
.dv-meta-decomp { font-size: 11px; color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; }
.dv-meta-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dv-meta-dot.mat { background: var(--phase3a, #5bbfad); }
.dv-meta-dot.rh  { background: var(--phase3b, #4a9ed6); }
.dv-meta-dot.fg  { background: var(--phase4a, #a088c4); }
.dv-meta-dot.mg  { background: var(--green, #3ecba5); }

/* Totals row */
.dv-totals-row td {
  padding: 12px 10px !important;
  border-top: 2px solid var(--gold-bd-hi) !important;
  border-bottom: none !important;
  background: var(--au-bg) !important;
  font-weight: 600;
  color: var(--text-1);
}

/* Quality gate */
.dv-gate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.dv-gate-ok {
  background: rgba(62,203,165,0.08);
  border: 1px solid rgba(62,203,165,0.2);
  color: var(--ok);
}
.dv-gate-warn {
  background: var(--au-bg);
  border: 1px solid var(--gold-bd);
  color: var(--gold, #C89028);
}
.dv-gate-icon { font-size: 16px; }

/* Export buttons */
.dv-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--au-bg);
  border: 1px solid var(--gold-bd);
  color: var(--gold, #C89028);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
  transition: background var(--dur-base);
}
.dv-export-btn:hover { background: var(--au-bg); }

/* ══════════════════════════════════════════════
   ONBOARDING WIZARD
   ══════════════════════════════════════════════ */
.onboard-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--shade-c);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboard-panel {
  position: relative;
  background: var(--bg-1, #141625);
  border: 1px solid var(--border, #2a2e45);
  border-radius: 16px;
  width: 600px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px var(--sh-c-c);
}
.onboard-panel .overlay-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: #64748b;
  font-size: 18px; cursor: pointer; z-index: 2;
}
.onboard-progress {
  height: 4px;
  background: var(--bg-3, #252842);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.onboard-progress-fill {
  height: 100%;
  background: var(--gold, #C89028);
  transition: width .4s var(--ease);
  border-radius: 4px;
}
.onboard-steps-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 18px 20px 0;
}
.ob-step-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: all var(--dur-slow);
}
.ob-step-done    { background: rgba(34,197,94,.15); color: var(--ok); }
.ob-step-active  { background: var(--gold, #C89028); color: #000; box-shadow: 0 0 14px var(--gold-dim); }
.ob-step-pending { background: rgba(148,163,184,.08); color: #475569; }
.ob-step-line {
  width: 32px; height: 2px;
  background: var(--border, #2a2e45);
  display: inline-block;
}
.onboard-body {
  padding: 24px 28px;
  min-height: 250px;
}
.onboard-footer {
  display: flex;
  justify-content: space-between;
  padding: 0 28px 20px;
}
.onboard-footer .btn-ghost {
  background: none; border: 1px solid var(--border, #2a2e45);
  color: var(--text-2, #94a3b8);
  padding: 8px 18px; border-radius: 8px; cursor: pointer;
  font-size: 13px;
}
.onboard-footer .btn-gold {
  background: var(--gold, #C89028);
  color: #000; border: none;
  padding: 8px 22px; border-radius: 8px; cursor: pointer;
  font-weight: 600; font-size: 13px;
  transition: filter var(--dur-fast);
}
.onboard-footer .btn-gold:hover { filter: brightness(1.1); }

/* Welcome */
.ob-welcome { text-align: center; }
.ob-welcome-icon { font-size: 56px; margin-bottom: 8px; }
.ob-welcome h2 { color: var(--text-1, #e5e7eb); margin: 0 0 8px; font-size: 22px; }
.ob-welcome p { color: var(--text-2, #94a3b8); margin: 0 0 20px; font-size: 14px; }
.ob-features { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.ob-feature {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2, #1e2235);
  border: 1px solid var(--border, #2a2e45);
  border-radius: 8px;
  padding: 10px 20px;
  color: var(--text-1, #e5e7eb);
  font-size: 14px;
  width: 280px;
}
.ob-feature span { font-size: 18px; }
.ob-feature-link { cursor: pointer; transition: border-color var(--dur-base); }
.ob-feature-link:hover { border-color: var(--gold, #C89028); }

/* Form */
.ob-form h3 { color: var(--text-1, #e5e7eb); margin: 0 0 4px; font-size: 18px; }
.ob-form h4 { color: var(--text-1, #e5e7eb); margin: 12px 0 6px; font-size: 15px; }
.ob-hint { color: var(--text-2, #94a3b8); font-size: 13px; margin: 0 0 16px; }
.ob-field { display: flex; flex-direction: column; gap: 4px; flex: 1; margin-bottom: 12px; }
.ob-field label { color: var(--text-2, #94a3b8); font-size: 12px; font-weight: 600; }
.ob-field input, .ob-field select {
  background: var(--bg-2, #1e2235);
  border: 1px solid var(--border, #2a2e45);
  border-radius: 6px;
  color: var(--text-1, #e5e7eb);
  padding: 8px 10px;
  font-size: 13px;
}
.ob-field input:focus, .ob-field select:focus {
  border-color: var(--gold, #C89028);
  outline: none;
}
.ob-row { display: flex; gap: 12px; }

/* Mini tables */
.ob-mini-table { margin: 8px 0; }
.ob-mini-header {
  display: grid; grid-template-columns: 1fr 120px 32px;
  gap: 8px; padding: 4px 0;
  color: var(--text-2, #94a3b8); font-size: 11px; font-weight: 600;
}
.ob-mini-row {
  display: grid; grid-template-columns: 1fr 120px 32px;
  gap: 8px; margin-bottom: 6px; align-items: center;
}
.ob-mini-row input {
  background: var(--bg-2, #1e2235);
  border: 1px solid var(--border, #2a2e45);
  border-radius: 6px; color: var(--text-1, #e5e7eb);
  padding: 6px 8px; font-size: 13px;
}
.ob-mini-row input:focus { border-color: var(--gold, #C89028); outline: none; }
.ob-remove {
  background: none; border: none;
  color: #64748b; cursor: pointer; font-size: 14px;
  padding: 4px;
}
.ob-remove:hover { color: var(--err); }
.ob-add-btn { font-size: 12px !important; padding: 4px 12px !important; }
.ob-separator { border: none; border-top: 1px solid var(--border, #2a2e45); margin: 16px 0; }
/* ── App fullscreen splash — identical to login/loading splashes ── */
#fs-splash {
  position: fixed; inset: 0; z-index: 99999;
  background: #04071A;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
}
#fs-splash.show {
  display: flex;
  animation: splashIn 0.5s var(--ease) forwards;
}
#fs-splash.out {
  animation: splashOut 0.55s var(--ease) forwards;
  pointer-events: none;
}
#fs-splash-logo {
  width: 88px; height: 88px; object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(200,145,32,0.70));
  margin-bottom: 32px;
  opacity: 0; transform: scale(0.80);
}
#fs-splash-logo.in {
  animation: splLogoIn 0.8s var(--ease-bounce) 0.4s forwards;
}
#fs-splash-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; letter-spacing: 0.46em; text-transform: uppercase;
  color: rgba(200,145,32,0.55); font-weight: 300;
  margin-bottom: 8px;
  opacity: 0;
}
#fs-splash-label.in    { animation: splFadeUp 0.7s var(--ease) 1.1s forwards; }
#fs-splash-label.ready { opacity: 1; animation: splPulse 2.2s ease-in-out infinite; }
#fs-splash-hint {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-2);
  opacity: 0;
}
#fs-splash-hint.in { animation: splFadeUp 0.7s var(--ease) 1.5s forwards; }


/* --------------------------------------------------------------
   NEURAL OBSERVATORY � Futuristic Network Visualization
   -------------------------------------------------------------- */

.view-neuro {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: #010812;
}

/* Override generic .view.active constraints for neural view */
.view.active.view-neuro {
  display: flex !important;
  padding: 0 !important;
  max-width: none !important;
  height: calc(100vh - var(--topbar-h));
  overflow: hidden;
}

#neuroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* -- HUD -- */
#neuroHUD {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 24px 40px;
  background: linear-gradient(180deg, rgba(1,6,16,0.90) 0%, rgba(1,6,16,0) 100%);
  pointer-events: none;
}

#neuroHUDLeft {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.nhud-logo {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-2);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nhud-roos-mark {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1) sepia(1) saturate(1.8) brightness(0.68) hue-rotate(5deg);
  opacity: 0.85;
  flex-shrink: 0;
}

.nhud-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(138,115,64,0.72);
}

#neuroStats {
  display: flex;
  gap: 36px;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
}

.ns-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ns-val {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-0);
  line-height: 1;
  letter-spacing: 0.03em;
}

.ns-lbl {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(138,115,64,0.65);
}

#neuroPhaseBar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 320px;
}

.npill {
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 3px 9px;
  border-radius: 2px;
  border: 1px solid rgba(138,115,64,0.20);
  color: rgba(138,115,64,0.38);
  transition: all 0.5s var(--ease);
}

.npill.active {
  border-color: #e8c372;
  color: var(--gold-hi);
  background: rgba(232,195,114,0.08);
  box-shadow: 0 0 12px rgba(232,195,114,0.35);
  animation: npillpulse 1.4s ease-in-out infinite;
}

.npill.done {
  border-color: var(--gold-bd-hi);
  color: var(--text-1);
  background: var(--au-bg);
}

@keyframes npillpulse {
  0%,100% { box-shadow: 0 0 8px rgba(232,195,114,0.28); }
  50%     { box-shadow: 0 0 22px rgba(255,233,184,0.68); }
}

/* -- Bottom Ticker -- */
#neuroTicker {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: linear-gradient(0deg, rgba(2,5,20,0.92) 0%, rgba(2,5,20,0) 100%);
}

.ticker-label {
  font-size: 7px;
  letter-spacing: 0.26em;
  color: var(--text-1);
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid rgba(232,195,114,0.35);
  padding: 2px 7px;
  border-radius: 2px;
  flex-shrink: 0;
  animation: tickerlive 2.2s ease-in-out infinite;
}

@keyframes tickerlive {
  0%,100% { opacity: 0.62; }
  50%     { opacity: 1; }
}

#neuroTickerTrack {
  display: flex;
  gap: 38px;
  overflow: hidden;
  flex: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 4%, black 94%, transparent 100%);
}

.ticker-item {
  font-size: 9px;
  font-family: var(--mono);
  color: rgba(138,115,64,0.55);
  white-space: nowrap;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  animation: tickerSlideIn 0.4s var(--ease);
}

.ticker-item b {
  color: var(--text-1);
}

@keyframes tickerSlideIn {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: none; }
}

/* ── Neuro live feed (right panel) ── */
.nfeed-hdr {
  font: 600 7px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(138,115,64,0.55);
  margin-bottom: 8px;
  padding-left: 6px;
  border-left: 1px solid rgba(138,115,64,0.20);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nfeed-count {
  color: var(--text-1);
  font-size: 8px;
}
.nfeed-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, black 6%, black 88%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, black 6%, black 88%, rgba(0,0,0,0) 100%);
}
.nfeed-item {
  display: grid;
  grid-template-columns: 26px 1fr 46px;
  gap: 5px;
  align-items: baseline;
  padding: 3px 6px;
  border-left: 1px solid rgba(138,115,64,0.18);
  font-family: var(--mono);
  font-size: 7.5px;
  animation: feedIn 0.28s var(--ease);
}
.nfeed-item.hi {
  border-left-color: rgba(232,195,114,0.50);
  background: rgba(232,195,114,0.04);
}
.nfi-num  { color: rgba(138,115,64,0.65); font-size: 7px; }
.nfi-desc { color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nfi-val  { color: var(--text-0); font-weight: 700; text-align: right; font-size: 8px; }
@keyframes feedIn {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Neuro live feed : summary header + per-state lists ── */
.nfeed-summary {
  border: 1px solid rgba(232,195,114,0.18);
  background: linear-gradient(180deg, rgba(20,18,12,0.75), rgba(8,7,4,0.55));
  border-radius: 8px;
  padding: 8px 10px 9px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
}
.nfs-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--mono);
}
.nfs-row.tiny { font-size: 7.5px; color: var(--text-1); gap: 8px; }
.nfs-row.tiny b { color: var(--gold-hi); font-weight: 700; }
.nfs-eta-label {
  font-size: 7px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(138,115,64,0.65);
}
.nfs-eta {
  font: 700 14px/1 var(--mono);
  color: var(--gold-hi);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(232,195,114,0.35);
}
.nfs-bar {
  height: 3px; background: rgba(138,115,64,0.18); border-radius: 2px;
  overflow: hidden;
}
.nfs-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #8a7340, #e8c372, #ffe9b8);
  box-shadow: 0 0 8px rgba(232,195,114,0.45);
  transition: width 0.4s var(--ease);
}
.nfs-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}
.nfs-dot.done { background: #e8c372; box-shadow: 0 0 6px rgba(232,195,114,0.7); }
.nfs-dot.run  { background: #ffe9b8; box-shadow: 0 0 8px rgba(255,233,184,0.9); animation: nfsdotpulse 1.1s ease-in-out infinite; }
.nfs-dot.pend { background: rgba(138,115,64,0.55); }
@keyframes nfsdotpulse {
  0%,100% { opacity: 0.55; transform: scale(0.85); }
  50%     { opacity: 1;    transform: scale(1.15); }
}

/* Section lists : keep heights compact so all 3 fit */
.nfeed-list-run  { max-height: 96px; }
.nfeed-list-pend { max-height: 156px; }
#neuroFeedList   { max-height: 156px; }

/* Items currently being processed */
.nfeed-item.run {
  border-left-color: rgba(255,233,184,0.65);
  background: linear-gradient(90deg, rgba(255,233,184,0.10), transparent 70%);
  position: relative;
}
.nfeed-item.run::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0;
  width: 2px; background: #ffe9b8;
  box-shadow: 0 0 6px rgba(255,233,184,0.9);
  animation: nfsdotpulse 1.1s ease-in-out infinite;
}
.nfeed-item.run .nfi-val { color: var(--text-0); font-style: italic; }

/* Items pending (greyed out, no value column yet) */
.nfeed-item.pend {
  border-left-color: rgba(138,115,64,0.10);
  opacity: 0.6;
}
.nfeed-item.pend .nfi-val { color: rgba(138,115,64,0.55); font-style: italic; }

/* Sub-row inside a feed item : LX match preview / timer / method */
.nfi-sub {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 6.5px; color: rgba(138,115,64,0.70);
  margin-top: 1px; font-family: var(--mono);
}
.nfi-match { color: var(--text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:170px; }
.nfi-timer { color: var(--text-1); font-variant-numeric: tabular-nums; }
.nfi-meth  { color: var(--text-1); text-transform: uppercase; letter-spacing: 0.08em; }

/* ═══════════════════════════════════════════════════════════════════ */
/* Live LangExtract import inspector                                    */
/* ═══════════════════════════════════════════════════════════════════ */
.mia-live-inspector{margin:16px 0;border: 1px solid var(--gold-bd-hi);border-radius:14px;background: linear-gradient(180deg,rgba(20,18,12,.85),rgba(12,10,6,.92));box-shadow: 0 8px 28px var(--sh-c-b),inset 0 1px 0 var(--au-bg);overflow:hidden}
.mia-live-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom: 1px solid var(--gold-bd);background: var(--shade-b)}
.mia-live-title{display:flex;align-items:center;gap:10px;flex:1;min-width:0;flex-wrap:wrap}
.mia-live-title strong{color: var(--gold-hi);font-size:14px;letter-spacing:.3px}
.mia-live-meta{color:#bbb;font-size:12px}
.mia-live-meta b{color:#e7c976}
.mia-live-dot{width:9px;height:9px;border-radius:50%;background: #d4af63;box-shadow: 0 0 10px #d4af63;animation:mlpulse 1.4s infinite}
@keyframes mlpulse{0%,100%{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.mia-live-actions{display:flex;align-items:center;gap:6px}
.mia-live-tab{background: transparent;border: 1px solid var(--gold-bd);color: var(--gold);padding:5px 10px;border-radius:8px;font-size:12px;cursor:pointer;transition:all var(--dur-fast)}
.mia-live-tab:hover{background: var(--au-bg);color: var(--gold-hi)}
.mia-live-tab.active{background: linear-gradient(180deg,#d4af63,#a8853f);border-color: #d4af63;color:#1a140a;font-weight:600}
.mia-live-close{background: transparent;border: none;color:#888;font-size:18px;cursor:pointer;padding:0 8px}
.mia-live-close:hover{color: var(--gold-hi)}
.mia-live-progress{padding:8px 16px;display:flex;align-items:center;gap:12px;border-bottom: 1px solid var(--gold-bd);background: var(--shade-a)}
.mia-live-bar{flex:1;height:6px;background: var(--tint-b);border-radius:4px;overflow:hidden}
.mia-live-bar-fill{height:100%;background: linear-gradient(90deg,#d4af63,#f4dca0);transition:width var(--dur-base) var(--ease);box-shadow: 0 0 10px var(--gold-dim)}
.mia-live-progress-text{color: var(--gold);font-size:12px;font-variant-numeric:tabular-nums;min-width:160px;text-align:right}
.mia-live-body{padding:0;max-height:540px;overflow:hidden;display:flex;flex-direction:column}
.mia-live-section{padding:14px 16px;overflow-y:auto;max-height:520px}
.mia-live-section[hidden]{display:none}
.mia-live-empty{color:#777;font-style:italic;text-align:center;padding:30px 0;font-size:13px}
.mia-live-prompt{margin:0;padding:14px;background: var(--shade-c);border: 1px solid var(--gold-bd);border-radius:8px;color:#dcd1ad;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:480px;overflow:auto}
.mia-live-examples{display:flex;flex-direction:column;gap:12px}
.mia-live-example{border: 1px solid var(--gold-bd);border-radius:10px;padding:12px;background: var(--shade-b)}
.mia-live-ex-head{color: var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:600}
.mia-live-ex-text-src{color:#e8dfc4;font-style:italic;font-size:13px;margin-bottom:10px;padding-left:8px;border-left: 2px solid var(--gold-bd-hi)}
.mia-live-ex-extraction{padding:8px 10px;background: var(--au-bg);border-radius:6px;margin-top:6px}
.mia-live-ex-class{color: var(--gold-hi);font-size:12px;font-weight:600;margin-bottom:4px}
.mia-live-ex-text{color:#bbb;font-weight:400;font-style:italic}
.mia-live-feed{display:flex;flex-direction:column;gap:8px}
.mia-feed-row{border: 1px solid var(--gold-bd);border-radius:8px;padding:8px 10px;background: var(--shade-a);animation:mlfadein .25s}
@keyframes mlfadein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.mia-feed-row.err{border-color: rgba(255,90,90,.4);background: rgba(80,20,20,.18)}
.mia-feed-row.warn{border-color: var(--gold-bd-hi);background: rgba(80,60,20,.18)}
.mia-feed-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12px}
.mia-feed-idx{color: var(--gold);font-weight:600;font-variant-numeric:tabular-nums;min-width:42px}
.mia-feed-desc{color:#e8dfc4;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mia-feed-prix{color:#9cc28a;font-variant-numeric:tabular-nums;font-weight:600}
.mia-feed-ext{padding:6px 8px;background: var(--au-bg);border-radius:6px;margin-top:4px;border-left: 2px solid var(--gold-bd-hi)}
.mia-feed-class{display:inline-block;background: var(--au-bg);color: var(--gold-hi);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;margin-right:6px}
.mia-feed-text{color: var(--gold);font-size:12px;font-style:italic}
.mia-feed-empty{color:#777;font-size:12px;font-style:italic}
.lx-attr-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.lx-attr-chips.empty{color:#666;font-style:italic;font-size:11px}
.lx-attr-chip{display:inline-flex;align-items:center;background: var(--shade-b);border: 1px solid var(--gold-bd);border-radius:12px;padding:1px 8px;font-size:11px;line-height:1.4;overflow:hidden}
.lx-attr-chip .k{color: var(--gold);font-weight:600}
.lx-attr-chip .v{color:#e8dfc4;margin-left:5px;padding-left:5px;border-left: 1px solid var(--gold-bd)}
.lx-attr-chip.empty{color:#666;background: transparent;border-style:dashed}

/* ── Match-score breakdown (Materials detail) ── */
.dx-art-cell { vertical-align: top; padding: 8px 8px 10px !important; min-width: 240px; max-width: 360px; }
.dx-art-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.dx-art-head strong { font-family: var(--sans); font-size: 12px; color: var(--text-0); font-weight:600; }
.dx-art-sub { display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; font-size:10px; color:var(--text-2); }
.dx-art-cat { background: var(--au-bg); color: var(--gold); padding: 1px 6px; border-radius:8px; }
.dx-art-fourn { color: var(--text-3); font-style: italic; }
.dx-art-id { font-family: var(--mono); color: var(--text-3); opacity:0.6; }

.dx-score-pill {
  display: inline-flex; align-items:center; gap:3px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; letter-spacing: 0.3px;
  background: rgba(133,122,106,0.12); color: var(--text-2);
}
.dx-score-pill.hi  { background: rgba(62,203,165,0.14); color: var(--ok); }
.dx-score-pill.mid { background: var(--au-bg); color: var(--gold-hi); }
.dx-score-pill.lo  { background: rgba(192,64,64,0.14);  color: #d36a6a; }

.dx-score-breakdown {
  margin-top: 8px; padding: 7px 9px;
  background: var(--shade-a); border: 1px solid var(--gold-bd);
  border-radius: 6px;
  display: grid; gap: 4px;
}
.dx-br-row {
  display: grid; grid-template-columns: 56px 1fr 38px 32px;
  align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; color: var(--text-2);
}
.dx-br-lab { color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; font-size: 9px; }
.dx-br-bar {
  position: relative; height: 6px; background: var(--tint-a);
  border-radius: 3px; overflow: hidden;
}
.dx-br-bar > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-hi));
  border-radius: 3px; transition: width 0.4s var(--ease);
}
.dx-br-val { text-align: right; color: var(--text-1); font-weight: 600; }
.dx-br-w { text-align: right; color: var(--text-3); opacity: 0.6; font-size: 9px; }
.dx-br-mode {
  margin-top: 4px; display: inline-block; font-size: 9px;
  color: var(--text-3); font-style: italic;
}

.dx-mat-row td { vertical-align: top; }

/* ── Refonte détail décomposition (UI review) ─────────────────── */

/* Fourchette P10-P90 dans le hero, sous le prix */
.dx-hero-range {
  margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dx-hero-range b { color: var(--blue); font-weight: 700; }
.dx-range-fiab {
  font-family: var(--sans); font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px;
  padding: 2px 8px; border-radius: 10px; border: 1px solid transparent;
}
.dx-range-fiab.rb-haute { color: var(--green); border-color: rgba(62,203,165,0.35); background: rgba(62,203,165,0.07); }
.dx-range-fiab.rb-moyenne { color: var(--amber); border-color: var(--gold-bd-hi); background: var(--au-bg); }
.dx-range-fiab.rb-faible { color: var(--red); border-color: rgba(231,76,60,0.30); background: rgba(231,76,60,0.06); }

/* Alerte quantité nulle */
.dx-qty-warn {
  font-size: 10px; color: var(--amber); font-family: var(--sans);
  background: var(--au-bg); border: 1px solid var(--gold-bd-hi);
  padding: 2px 9px; border-radius: 10px; margin-left: 6px; cursor: help;
}

/* Barre de répartition empilée du PU */
.dx-stack {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  margin-bottom: 12px; background: var(--tint-a); cursor: help;
}
.dx-stack-seg { height: 100%; min-width: 2px; }
.dx-stack-seg.mat { background: var(--phase3a); }
.dx-stack-seg.rh { background: var(--phase3b); }
.dx-stack-seg.fg { background: var(--phase4a); }
.dx-stack-seg.mg { background: var(--green); }

/* Chips contextuels : grille 2 colonnes (fini les rangées pleine largeur
   avec l'aside perdu à l'autre bout de l'écran) */
.dx-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.dx-chip { border-right: 1px solid var(--gold-bd); }
.dx-chip.dx-chip-alert { grid-column: 1 / -1; }

/* Détail du score replié par défaut */
.dx-br-details { margin-top: 6px; }
.dx-br-details > summary {
  font-size: 9px; color: var(--text-3); cursor: pointer; user-select: none;
  text-transform: uppercase; letter-spacing: 0.5px; list-style: none;
}
.dx-br-details > summary::before { content: '▸ '; color: var(--gold-dim); }
.dx-br-details[open] > summary::before { content: '▾ '; }
.dx-br-details > summary::-webkit-details-marker { display: none; }
.dx-br-details > summary:hover { color: var(--text-2); }

/* Correspondance faible : ligne teintée + tag explicite */
.dx-weak-match { background: rgba(192,64,64,0.05); }
.dx-weak-tag {
  font-size: 9px; color: #d36a6a; text-transform: uppercase; letter-spacing: 0.6px;
  border: 1px dashed rgba(192,64,64,0.45); padding: 1px 7px; border-radius: 9px;
  cursor: help; white-space: nowrap;
}

/* Caractéristiques de l'article (extrait de la fiche catalogue) */
.dx-art-caract {
  margin-top: 4px; font-size: 10px; color: var(--text-3); line-height: 1.45;
  font-family: var(--sans); cursor: help;
}

/* ── Panneau détail de ligne v2 (layout 2 colonnes) ───────────── */
/* Contenu (décomposition éditable) à gauche · synthèse à droite.
   Namespace dxp- : l'ancien markup dx-hero/dx-cards reste utilisé par
   la vue Devis. */

.dxp .dxp-alert {
  display: block; margin-bottom: 14px; padding: 10px 16px;
  background: var(--au-bg); border: 1px solid var(--gold-bd-hi);
  border-left: 3px solid #e67e22; border-radius: 8px;
  font-size: 12px; color: var(--text-1); line-height: 1.5;
}
.dxp .dxp-alert b { color: #e67e22; }
/* Arbitrage : une correction, pas une anomalie subie — ton distinct de
   l'alerte garde-fou pour qu'on ne les confonde pas d'un coup d'œil. */
.dxp .dxp-alert.arb {
  background: rgba(122,162,247,0.07);
  border-color: rgba(122,162,247,0.35); border-left-color: #7aa2f7;
}
.dxp .dxp-alert.arb b { color: #7aa2f7; }

/* Mise en page du panneau de détail.
   Auparavant : deux colonnes, tables à gauche et rail de synthèse de 320 px à
   droite. Le rail empilait 5 blocs (~770 px) alors que les tables n'en font
   que ~230 : la hauteur de la ligne était dictée par le rail, laissant plus de
   500 px de vide sous les tables, et les 320 px prélevés tronquaient les
   colonnes du tableau Matériaux.
   Désormais : la synthèse devient un bandeau horizontal au-dessus, et les
   tables occupent toute la largeur. La hauteur suit le contenu réel. */
.dxp-layout { display: flex; flex-direction: column; gap: 14px; }

.dxp-side {
  position: static;       /* le sticky n'a plus de sens en bandeau */
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px;
}
/* Nombre de blocs variable (le contexte peut manquer) : on répartit en flex
   plutôt qu'en colonnes fixes, pour rester correct dans tous les cas. */
.dxp-side > * { flex: 1 1 232px; min-width: 0; }
.dxp-side > .dxp-conf { flex: 0 0 148px; }
.dxp-foot { margin-top: 2px; }

/* Colonne principale */
.dxp-head {
  margin-bottom: 0; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.dxp-head-l { min-width: 0; }
.dxp-head-r { text-align: right; flex-shrink: 0; }
.dxp-head-tot { display: flex; align-items: baseline; gap: 10px; justify-content: flex-end; }
.dxp-head-tot span {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-3); font-weight: 600;
}
.dxp-head-tot b { font-family: var(--mono); font-size: 20px; color: var(--text-0); font-weight: 700; }
.dxp-head-qty { font-family: var(--mono); font-size: 11px; color: var(--text-2); margin-top: 2px; }
.dxp-title {
  font-family: var(--serif); font-size: 18px; color: var(--text-0);
  font-weight: 600; margin: 8px 0 0; line-height: 1.3;
}
.dxp-sect {
  font-size: 11px; color: var(--text-2); text-transform: uppercase;
  letter-spacing: 1px; margin: 4px 0 12px; display: flex;
  align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.dxp-sect b { color: var(--gold); }
.dxp-sect-hint {
  text-transform: none; letter-spacing: 0; font-size: 10px;
  color: var(--text-3); font-style: italic;
}
/* Tables en pleine largeur : deux de front dès qu'il y a la place, et jamais
   de colonne tronquée (le scroll horizontal reste un filet de sécurité). */
.dxp-main .dx-tables { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }
@media (max-width: 900px) { .dxp-main .dx-tables { grid-template-columns: 1fr; } }
.dxp-main .dx-tbl { overflow-x: auto; }
/* ── Marqueur « prix fournisseur » dans le détail de ligne ── */
.dxp-frn {
  margin: 12px 0 10px; padding: 10px 12px;
  background: rgba(78,201,138,0.07);
  border: 1px solid rgba(78,201,138,0.30);
  border-left: 2px solid var(--green); border-radius: 8px;
}
.dxp-frn-t {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--green); font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.dxp-frn-d { color: var(--text-3); font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--mono); }
.dxp-frn-n { font-size: 12px; color: var(--text-0); font-weight: 600; margin: 4px 0 7px; }
.dxp-frn-l {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; color: var(--text-2); padding: 2px 0;
}
.dxp-frn-l b { color: var(--green); font-family: var(--mono); font-weight: 600; }
.dxp-frn-l s { color: var(--text-3); font-family: var(--mono); }
.dxp-frn-l.dim { color: var(--text-3); }
.dxp-frn-l.dim span { font-family: var(--mono); }
.dxp-frn-h { font-size: 9.5px; color: var(--text-3); line-height: 1.5; margin-top: 7px; font-style: italic; }
/* Décomposition départ/transport qui ne redonne pas le prix rendu : signalée
   plutôt qu'affichée avec une unité inventée. Le prix appliqué reste juste. */
.dxp-frn-w {
  font-size: 9.5px; color: var(--gold); line-height: 1.45;
  margin: 4px 0 2px; cursor: help;
}

/* Ce qui plafonne la note de confiance — le point sur lequel agir. */
.dx-gauge-lim {
  margin-top: 4px; text-align: center; cursor: help;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .04em;
  color: var(--text-3); line-height: 1.3;
}

.dxp-price-card {
  background: linear-gradient(160deg, var(--au-bg), var(--au-bg) 55%), var(--bg);
  border: 1px solid var(--gold-bd); border-radius: 12px; padding: 13px 15px;
  display: flex; flex-direction: column;
}
.dxp-price-lab {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--gold); font-weight: 600; margin-bottom: 4px;
}
.dxp-price {
  font-family: var(--mono); font-size: 26px; font-weight: 700;
  color: var(--gold-hi); line-height: 1.1; margin-bottom: 8px;
}
.dxp-price small { font-size: 12px; color: var(--text-2); font-weight: 400; }

.dxp-range { margin: 2px 0 8px; }
.dxp-range-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dxp-range-lab { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); }
.dxp-range-track {
  position: relative; height: 8px; border-radius: 4px;
  background: var(--tint-a); overflow: visible;
}
.dxp-range-seg { position: absolute; top: 0; bottom: 0; border-radius: 4px; opacity: 0.55; }
.dxp-range-seg.rb-haute { background: var(--green); }
.dxp-range-seg.rb-moyenne { background: var(--amber); }
.dxp-range-seg.rb-faible { background: var(--red); }
.dxp-range-marker {
  position: absolute; top: -3px; bottom: -3px; width: 3px;
  background: var(--gold-hi); border-radius: 2px; transform: translateX(-50%);
  box-shadow: 0 0 6px var(--gold-dim);
}
.dxp-range-vals {
  display: flex; justify-content: space-between; margin-top: 5px;
  font-family: var(--mono); font-size: 10px; color: var(--text-2);
}

.dxp-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--text-1); padding-top: 8px;
  border-top: 1px solid var(--gold-bd); margin-top: 8px;
}
.dxp-total-row b { font-family: var(--mono); font-size: 15px; color: var(--text-0); }
.dxp-total-row.dim { font-size: 11px; color: var(--text-2); border-top: 0; margin-top: 2px; padding-top: 2px; }

.dxp-block {
  background: var(--bg); border: 1px solid var(--gold-dim);
  border-radius: 12px; padding: 12px 14px;
}
.dxp-block-title {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--text-3); font-weight: 600; margin-bottom: 8px;
}

/* Répartition du PU — lignes compactes */
.dxp-brk-row {
  display: grid; grid-template-columns: 8px 82px 1fr auto 34px;
  align-items: center; gap: 8px; padding: 4px 0; cursor: help;
}
.dxp-brk-dot { width: 8px; height: 8px; border-radius: 50%; }
.dxp-brk-dot.mat { background: var(--phase3a); }
.dxp-brk-dot.rh { background: var(--phase3b); }
.dxp-brk-dot.fg { background: var(--phase4a); }
.dxp-brk-dot.mg { background: var(--green); }
.dxp-brk-lab { font-size: 11px; color: var(--text-1); white-space: nowrap; }
.dxp-brk-bar { height: 6px; background: var(--tint-a); border-radius: 3px; overflow: hidden; }
.dxp-brk-bar > span { display: block; height: 100%; border-radius: 3px; }
.dxp-brk-bar > span.mat { background: var(--phase3a); }
.dxp-brk-bar > span.rh { background: var(--phase3b); }
.dxp-brk-bar > span.fg { background: var(--phase4a); }
.dxp-brk-bar > span.mg { background: var(--green); }
.dxp-brk-amt { font-family: var(--mono); font-size: 11px; color: var(--text-0); font-weight: 600; text-align: right; white-space: nowrap; }
.dxp-brk-pct { font-family: var(--mono); font-size: 10px; color: var(--text-3); text-align: right; }

/* Jauge de confiance centrée dans son bloc */
.dxp-conf { display: flex; align-items: center; justify-content: center; padding: 8px 10px; }
.dxp-conf .dx-gauge { width: 118px; }

/* Méta contextuelle */
.dxp-meta-row {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; padding: 5px 0; line-height: 1.45;
  border-bottom: 1px solid var(--gold-bd);
}
.dxp-meta-row:last-child { border-bottom: 0; }
.dxp-meta-lab {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--gold); font-weight: 600; min-width: 68px; flex-shrink: 0;
}
.dxp-meta-val { color: var(--text-1); flex: 1; min-width: 0; }
.dxp-meta-aside { font-family: var(--mono); font-size: 10px; color: var(--text-2); white-space: nowrap; }

/* Barre de validation adaptée à la sidebar */
.dxp-foot .dx-validate-bar {
  flex-direction: row; align-items: center; justify-content: flex-end;
  gap: 14px; margin-top: 0; padding: 10px 14px; border-radius: 12px;
}
.dxp-foot .dx-validate-bar .dx-validate-info { margin-right: auto; }
.dxp-foot .dx-validate-bar .dx-btn-validate { width: auto; padding: 9px 20px; }
@media (max-width: 760px) {
  .dxp-foot .dx-validate-bar { flex-direction: column; align-items: stretch; }
  .dxp-foot .dx-validate-bar .dx-btn-validate { width: 100%; }
}

/* ── Écran de chargement du chiffrage + chrono ────────────────── */
#pricingOverlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 14, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: poFade 0.25s ease;
}
@keyframes poFade { from { opacity: 0; } to { opacity: 1; } }
#pricingOverlay.hidden { display: none; }

.po-card {
  width: min(520px, calc(100vw - 40px));
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: 14px; padding: 26px 30px 22px;
  box-shadow: 0 24px 80px var(--sh-c-c), 0 0 0 1px var(--au-bg);
  animation: poCardIn 0.35s var(--ease-spring, ease);
}
@keyframes poCardIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.po-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.po-titles { flex: 1; min-width: 0; }
.po-title { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--text-0); }
.po-sub { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
.po-min {
  background: none; border: 1px solid var(--gold-dim); color: var(--text-2);
  font-size: 10px; padding: 5px 12px; border-radius: 14px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.6px; transition: all var(--dur-base);
}
.po-min:hover { border-color: var(--gold); color: var(--gold-hi); }

.po-spinner {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(from 0deg, transparent 0 40deg, var(--gold) 300deg, transparent 320deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: poSpin 1.1s linear infinite;
}
.po-spinner.sm { width: 16px; height: 16px; }
@keyframes poSpin { to { transform: rotate(360deg); } }

.po-timer {
  font-family: var(--mono); font-size: 40px; font-weight: 700;
  color: var(--gold-hi); text-align: center; margin: 4px 0 14px;
  font-variant-numeric: tabular-nums; letter-spacing: 1px;
}
.po-bar {
  height: 8px; background: var(--tint-a);
  border-radius: 4px; overflow: hidden; margin-bottom: 10px;
}
.po-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-hi));
  transition: width 0.45s ease;
}
.po-stats {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  margin-bottom: 14px;
}
.po-current {
  font-size: 12px; color: var(--text-1); line-height: 1.4;
  padding: 8px 12px; background: var(--au-bg);
  border-left: 2px solid var(--gold); border-radius: 0 6px 6px 0;
  margin-bottom: 10px; min-height: 34px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.po-feed { display: flex; flex-direction: column; gap: 4px; min-height: 20px; }
.po-feed-row {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11px; color: var(--text-2); animation: poFeedIn 0.3s ease;
}
@keyframes poFeedIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.po-feed-num { font-family: var(--mono); color: var(--gold); min-width: 34px; }
.po-feed-desc { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-feed-pu { font-family: var(--mono); color: var(--green); font-weight: 600; white-space: nowrap; }

/* Mode réduit : pastille flottante (le chiffrage continue) */
.po-pill { display: none; }
#pricingOverlay.mini { inset: auto; right: 18px; bottom: 86px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#pricingOverlay.mini .po-card { display: none; }
#pricingOverlay.mini .po-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  color: var(--gold-hi); font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 9px 16px; border-radius: 22px; cursor: pointer;
  box-shadow: 0 8px 28px var(--sh-c-b);
  animation: poCardIn 0.25s ease;
}
.po-pill-sep { color: var(--gold-dim); }

/* ════════════════════════════════════════════════════════════════ */
/* Per-line FOCUS card (centre haut) + DONE STRIP (bottom)          */
/* ════════════════════════════════════════════════════════════════ */
.nfocus-card {
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 56vw);
  z-index: 12;
  background: linear-gradient(180deg, rgba(20, 18, 12, 0.92), rgba(8, 7, 4, 0.94));
  border: 1px solid rgba(232, 195, 114, 0.32);
  border-radius: 14px;
  padding: 16px 22px 18px;
  box-shadow: 0 14px 48px var(--sh-c-c), 0 0 0 1px rgba(232, 195, 114, 0.06) inset;
  backdrop-filter: blur(8px);
  pointer-events: none;
  animation: nfocusFade 0.25s var(--ease);
}
@keyframes nfocusFade { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.nfocus-head {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--text-0);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 8px;
}
.nfocus-tag {
  background: rgba(232, 195, 114, 0.18);
  border: 1px solid rgba(232, 195, 114, 0.4);
  padding: 2px 8px; border-radius: 6px;
  color: var(--gold-hi); font-weight: 600;
}
.nfocus-num { font-weight: 700; color: var(--gold-hi); font-size: 12px; }
.nfocus-lot { color: var(--text-1); flex: 1; font-size: 11px; }
.nfocus-timer { color: var(--gold-hi); font-variant-numeric: tabular-nums; font-weight: 600; }
.nfocus-desc {
  color: var(--text-0);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
  margin: 4px 0 12px;
  max-height: 3.6em; overflow: hidden;
}
.nfocus-meta {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-1);
  font-size: 12px; margin-bottom: 12px;
}
.nfocus-meta b { color: var(--gold-hi); }
.nfocus-sep { color: var(--text-2); }
.nfocus-tracks { display: grid; gap: 6px; }
.nfocus-track {
  display: grid; grid-template-columns: 100px 1fr; gap: 10px;
  align-items: center; font-size: 11px;
}
.nft-label { color: var(--text-1); text-transform: uppercase; letter-spacing: 0.08em; }
.nft-bar { height: 6px; background: var(--tint-b); border-radius: 4px; overflow: hidden; }
.nft-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c8a648, #ffe9b8);
  border-radius: 4px;
  transition: width 0.6s var(--ease);
  box-shadow: 0 0 8px rgba(255, 233, 184, 0.4);
  animation: nftPulse 1.6s ease-in-out infinite;
}
@keyframes nftPulse { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

/* DONE STRIP (bottom) */
.ndone-strip {
  position: absolute;
  left: 18px; right: 320px; bottom: 14px;
  z-index: 11;
  background: linear-gradient(180deg, rgba(8, 7, 4, 0.85), rgba(3, 2, 1, 0.92));
  border: 1px solid rgba(232, 195, 114, 0.22);
  border-radius: 12px;
  padding: 8px 12px 10px;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  max-height: 110px;
}
.ndone-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 6px;
}
.ndone-label { font-weight: 700; }
.ndone-count {
  background: rgba(232, 195, 114, 0.18);
  padding: 1px 7px; border-radius: 6px; color: var(--gold-hi);
  font-weight: 600; font-size: 10px;
}
.ndone-hint { color: var(--text-2); font-size: 9px; letter-spacing: 0.05em; text-transform: none; margin-left: auto; }
.ndone-track {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(232, 195, 114, 0.3) transparent;
}
.ndone-track::-webkit-scrollbar { height: 6px; }
.ndone-track::-webkit-scrollbar-thumb { background: rgba(232, 195, 114, 0.3); border-radius: 3px; }
.ndone-pill {
  flex: 0 0 auto;
  min-width: 170px; max-width: 220px;
  background: rgba(20, 18, 12, 0.72);
  border: 1px solid rgba(232, 195, 114, 0.18);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  display: flex; flex-direction: column; gap: 2px;
}
.ndone-pill:hover {
  background: rgba(40, 33, 18, 0.92);
  border-color: rgba(232, 195, 114, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--sh-c-b);
}
.ndone-pill .ndp-top {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
}
.ndp-num { color: var(--gold-hi); font-weight: 700; }
.ndp-val { margin-left: auto; color: var(--gold-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.ndp-desc {
  color: var(--text-1);
  font-size: 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ndp-pill-meth {
  display: inline-block; font-size: 9px;
  padding: 1px 5px; border-radius: 4px; margin-top: 2px;
  background: rgba(232, 195, 114, 0.12);
  color: var(--text-0);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ndone-pill.hi { border-color: rgba(255, 233, 184, 0.5); box-shadow: 0 0 12px rgba(255, 233, 184, 0.18); }

/* Detail modal */
.nlinedet-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(3, 2, 1, 0.72);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: nldFade 0.18s var(--ease);
}
@keyframes nldFade { from { opacity: 0; } to { opacity: 1; } }
.nlinedet-card {
  width: min(720px, 92vw);
  max-height: 86vh; overflow: auto;
  background: linear-gradient(180deg, #14120c, #0b0905);
  border: 1px solid rgba(232, 195, 114, 0.35);
  border-radius: 16px;
  padding: 24px 28px;
  position: relative;
  box-shadow: 0 20px 60px var(--sh-c-c);
}
.nlinedet-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none; color: var(--text-1);
  font-size: 28px; cursor: pointer; line-height: 1;
  padding: 4px 10px; border-radius: 6px;
}
.nlinedet-close:hover { color: var(--text-0); background: var(--tint-b); }
.nld-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.nld-num { font-size: 12px; color: var(--gold-hi); font-weight: 700; letter-spacing: 0.1em; }
.nld-lot { font-size: 11px; color: var(--text-2); }
.nld-desc { font-size: 18px; color: var(--text-0); margin: 4px 0 16px; line-height: 1.4; }
.nld-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.nld-stat {
  background: var(--tint-a);
  border: 1px solid rgba(232, 195, 114, 0.12);
  border-radius: 8px; padding: 10px 12px;
}
.nld-stat-label { font-size: 10px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.08em; }
.nld-stat-val { font-size: 16px; color: var(--gold-hi); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.nld-breakdown { margin-top: 10px; }
.nld-bd-row {
  display: grid; grid-template-columns: 100px 1fr 90px;
  gap: 10px; align-items: center; padding: 5px 0;
  font-size: 12px; color: var(--text-1);
}
.nld-bd-bar { height: 5px; background: var(--tint-b); border-radius: 3px; overflow: hidden; }
.nld-bd-bar > div { height: 100%; background: linear-gradient(90deg, #c8a648, #ffe9b8); }
.nld-bd-val { text-align: right; color: var(--text-0); font-weight: 600; font-variant-numeric: tabular-nums; }


/* ═══════════════════════════════════════════════════════════
   ESTIMATION v2 — Chiffrage Management Centre
   ═══════════════════════════════════════════════════════════ */

/* ── Topbar ── */
.est-topbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 16px;
}
.est-topbar-title {
  font-family: var(--serif); font-size: 40px; color: var(--text-0);
  font-weight: 300; line-height: 1.02; margin-top: 4px; letter-spacing: -0.015em;
}
.est-import-btn { display: flex; align-items: center; gap: 8px; }
.est-import-btn:active { transform: scale(0.97); }

/* ── Estimation : révélation orchestrée à l'atterrissage (signature §3) ──
   eyebrow → titre → action → filtres. Se rejoue à chaque arrivée sur la vue.
   Les cartes cascadent ensuite via estCardIn (stagger). */
#view-estimation.active .roos-eyebrow,
#view-estimation.active .est-topbar-title,
#view-estimation.active .est-import-btn,
#view-estimation.active .est-filter-bar {
  animation: roos-fade-up var(--dur-slow) var(--ease-out) both;
}
#view-estimation.active .roos-eyebrow      { animation-delay: 20ms; }
#view-estimation.active .est-topbar-title  { animation-delay: 70ms; }
#view-estimation.active .est-import-btn    { animation-delay: 130ms; }
#view-estimation.active .est-filter-bar    { animation-delay: 170ms; }
@media (prefers-reduced-motion: reduce) {
  #view-estimation.active .roos-eyebrow,
  #view-estimation.active .est-topbar-title,
  #view-estimation.active .est-import-btn,
  #view-estimation.active .est-filter-bar {
    animation-name: roos-fade-in; animation-duration: 100ms; animation-delay: 0ms !important;
  }
}

/* ── Filter bar ── */
.est-filter-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--gold-bd); padding-bottom: 14px; margin-bottom: 24px;
}
.est-filter-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; background: none; border: 1px solid transparent;
  border-radius: var(--radius); color: var(--text-2); font-family: var(--mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
  white-space: nowrap;
}
.est-filter-tab:hover { border-color: var(--gold-bd); color: var(--text-1); }
.est-filter-tab:active { transform: scale(0.97); }
.est-filter-tab:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.est-filter-tab.active { border-color: var(--gold); color: var(--gold-hi); background: var(--gold-dim); }
.est-filter-count {
  font-size: 10px; min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--au-bg); border-radius: var(--r-p); padding: 0 5px;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.est-filter-spacer { flex: 1; min-width: 12px; }
.est-search {
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 7px 12px; color: var(--text-0);
  font-family: var(--mono); font-size: 11px; width: 180px; outline: none;
  transition: border-color var(--dur-fast);
}
.est-search:focus { border-color: var(--gold); }
.est-sort {
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 7px 10px; color: var(--text-1);
  font-family: var(--mono); font-size: 11px; outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23c89028'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px;
}

/* ── Cards grid ── */
.est-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; align-items: start;
}
.est-card {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 20px 20px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  position: relative; overflow: hidden; outline: none;
}
.est-card:active { transform: translateY(-1px) scale(0.995); }
.est-card:hover, .est-card:focus-visible {
  border-color: var(--gold-bd-hi);
  box-shadow: 0 4px 28px var(--au-bg);
  transform: translateY(-2px);
}
.est-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.est-card-corner { position: absolute; width: 10px; height: 10px; }
.est-card-corner.tl { top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold); border-radius: 2px 0 0 0; }
.est-card-corner.tr { top: -1px; right: -1px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); border-radius: 0 2px 0 0; }
.est-card-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid var(--gold); border-left: 2px solid var(--gold); border-radius: 0 0 0 2px; }
.est-card-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); border-radius: 0 0 2px 0; }
.est-card-id { font-family: var(--mono); font-size: 10px; color: var(--text-2); letter-spacing: 0.1em; margin-bottom: 5px; }
.est-card-chantier { font-family: var(--serif); font-size: 19px; color: var(--text-0); font-weight: 500; line-height: 1.2; margin-bottom: 2px; }
.est-card-client { font-size: 11px; color: var(--text-2); margin-bottom: 14px; }
.est-card-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.est-card-lots { font-size: 11px; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.est-card-montant { font-family: var(--mono); font-size: 14px; color: var(--gold-hi); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.est-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--gold-bd); }
.est-card-date { font-size: 10px; color: var(--text-2); font-family: var(--mono); }
.est-card-completude { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; color: var(--text-2); }
.est-completude-bar { width: 44px; height: 3px; background: var(--au-bg); border-radius: 2px; overflow: hidden; }
.est-completude-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-hi)); border-radius: 2px; transition: width 0.4s; }

/* ── State badges ── */
.est-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 3px 8px; border-radius: 3px; white-space: nowrap;
}
.est-badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.est-badge--a_chiffrer         { background: var(--au-bg); color: rgba(200,144,40,0.65); border: 1px solid var(--gold-bd); }
.est-badge--a_chiffrer .est-badge-dot { background: var(--gold-dim); }
.est-badge--en_cours_de_chiffrage { background: var(--au-bg); color: var(--gold); border: 1px solid var(--gold-bd); }
.est-badge--en_cours_de_chiffrage .est-badge-dot { background: #ebb94c; animation: estPulse 2.2s ease-in-out infinite; }
.est-badge--chiffre            { background: var(--au-bg); color: var(--gold); border: 1px solid var(--gold-bd-hi); }
.est-badge--chiffre .est-badge-dot { background: var(--gold); }
.est-badge--envoye_pour_validation { background: var(--au-bg); color: #d4a847; border: 1px solid var(--gold-bd-hi); }
.est-badge--envoye_pour_validation .est-badge-dot { background: #d4a847; }
.est-badge--a_revoir           { background: var(--au-bg); color: var(--amber); border: 1px solid var(--gold-bd-hi); }
.est-badge--a_revoir .est-badge-dot { background: var(--amber); }
.est-badge--valide             { background: rgba(62,203,165,0.08); color: var(--green); border: 1px solid rgba(62,203,165,0.25); }
.est-badge--valide .est-badge-dot { background: var(--green); }
@keyframes estPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Empty state ── */
.est-empty { text-align: center; padding: 80px 40px; }
.est-empty .empty-icon { font-size: 44px; margin-bottom: 16px; color: var(--gold-bd-hi); }
.est-empty h3 { font-family: var(--serif); font-size: 22px; color: var(--text-1); margin-bottom: 8px; font-weight: 400; }
.est-empty p { font-size: 13px; color: var(--text-2); }

/* ── Detail drawer ── */
.est-drawer {
  position: fixed; top: var(--topbar-h); right: 0; bottom: 0;
  width: calc(100vw - var(--sidebar-w, 260px));
  background: var(--bg); border-left: 1px solid var(--gold-bd);
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-spring);
  z-index: 200; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -8px 0 48px var(--sh-c-b);
}
.est-drawer.open { transform: translateX(0); }
.est-drawer-inner { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.est-drawer-header {
  display: flex; align-items: center; gap: 20px; padding: 20px 32px;
  border-bottom: 1px solid var(--gold-bd); flex-shrink: 0;
  background: var(--bg-card2); min-height: 76px;
}
.est-drawer-back {
  background: none; border: 1px solid var(--gold-bd); color: var(--gold);
  padding: 7px 15px; border-radius: var(--radius); font-family: var(--mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); flex-shrink: 0;
}
.est-drawer-back:hover { background: var(--gold-dim); border-color: var(--gold); }
.est-drawer-title-wrap { flex: 1; min-width: 0; padding-right: 8px; }
.est-drawer-id { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--text-2); letter-spacing: 0.1em; margin-bottom: 4px; }
.est-drawer-chantier { display: block; font-family: var(--serif); font-size: 24px; color: var(--text-0); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }

/* Le crayon se tient au bout du titre, pas dans un menu : c'est là qu'on
   regarde quand le nom déplaît. Il ne prend sa couleur qu'au survol — un or
   permanent en ferait une action à faire, alors que c'est une action
   possible. */
.est-drawer-titre-ligne { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.est-drawer-titre-ligne .est-drawer-chantier { min-width: 0; }
.renommer-btn {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r-3, 6px);
  color: var(--text-3); cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.renommer-btn svg { width: 15px; height: 15px; }
.renommer-btn:hover { color: var(--gold); border-color: var(--gold-bd); background: var(--gold-dim); }
.renommer-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.renommer-btn:disabled { opacity: .35; cursor: default; }
.renommer-btn:disabled:hover { color: var(--text-3); border-color: transparent; background: none; }

/* Rappel de l'ancien nom sous le champ : on remplace souvent un nom de
   fichier long, et l'avoir sous les yeux évite de le retaper de mémoire. */
.rename-ch-avant {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  margin-top: 6px; word-break: break-all; line-height: 1.5;
}
.est-drawer-montant {
  font-family: var(--mono); font-size: 21px; color: var(--gold-hi); font-weight: 600;
  flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 96px; text-align: right;
}
.est-drawer-montant.is-empty { font-size: 13px; color: var(--text-2); font-weight: 400; font-family: var(--sans); white-space: nowrap; min-width: 140px; }
.est-drawer-header .est-badge { font-size: 10.5px; padding: 5px 12px; gap: 7px; flex-shrink: 0; }
.est-drawer-header .est-badge-dot { width: 7px; height: 7px; }

/* ── Inner tabs ── */
.est-inner-tabs { display: flex; border-bottom: 1px solid var(--gold-bd); background: var(--bg-card2); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
.est-inner-tabs::-webkit-scrollbar { display: none; }
.est-inner-tab {
  padding: 13px 20px; background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-2); font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; cursor: pointer; transition: color var(--dur-fast), border-color var(--dur-fast);
  margin-bottom: -1px; white-space: nowrap; flex-shrink: 0;
}
.est-inner-tab:hover { color: var(--text-1); }
.est-inner-tab.active { color: var(--gold-hi); border-bottom-color: var(--gold); }
.est-inner-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.est-inner-panel { display: none; flex: 1; overflow-y: auto; padding: 28px 32px; }
.est-inner-panel.active { display: block; }

/* ── Lignes table: fills the full available drawer height ── */
/* Layout ROBUSTE : le panneau `#estPanel-lignes` est lui-même le conteneur
   de scroll (hérité de `.est-inner-panel` : flex:1 + overflow-y:auto). Le
   tableau s'affiche à sa HAUTEUR NATURELLE — les 50 lignes sont toujours
   rendues, le panneau scrolle. On n'utilise PLUS de chaîne imbriquée
   flex:1/height:100%/min-height:0 qui s'effondrait à ~0px selon le contexte
   de hauteur, ne laissant qu'une ligne visible à l'écran. */
#estPanel-lignes.active { padding: 20px 32px 24px; }

.est-extracted {
  display: block;
  padding: 24px 28px; margin: 0;
}
.est-extracted .roos-eyebrow { font-size: 12px; }
.est-extracted .extracted-count { font-size: 13px; }
.est-extracted .extracted-header { flex-shrink: 0; }
.est-extracted .table-wrap { margin-top: 4px; overflow-x: auto; }
.est-extracted .data-table { font-size: 13.5px; }
.est-extracted .data-table thead th {
  font-size: 11px; padding: 10px 12px; letter-spacing: 0.06em;
  /* En-tête de colonnes épinglé pendant le scroll du panneau. */
  position: sticky; top: -20px; z-index: 3; background: var(--bg-card2);
}
.est-extracted .data-table tbody td { padding: 9px 12px; line-height: 1.35; }
.est-extracted .data-table tbody tr { border-bottom: 1px solid var(--gold-bd); }
.est-extracted .extracted-actions { margin-top: 16px; }
.est-extracted .th-desc { min-width: 340px; }
.est-extracted .dx-pu { font-size: 22px; }

/* ── Import modal ── */
.est-modal-overlay {
  position: fixed; inset: 0; background: rgba(4,7,26,0.84); backdrop-filter: blur(4px);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base);
}
.est-modal-overlay.open { opacity: 1; pointer-events: auto; }
.est-modal-panel {
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); padding: 32px; width: min(560px, 92vw);
  position: relative;
  transform: scale(0.96); transition: transform var(--dur-base) var(--ease-spring);
}
.est-modal-overlay.open .est-modal-panel { transform: scale(1); }
.est-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.est-modal-close {
  background: none; border: 1px solid var(--gold-bd); color: var(--text-1);
  width: 30px; height: 30px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; transition: all var(--dur-fast);
}
.est-modal-close:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.est-modal-close:focus-visible { outline: 2px solid var(--gold); }
/* Sélecteur d'identifiant : il l'emporte sur .imp-zone, la mise en colonne
   centrée doit donc être déclarée ici, sinon l'icône reste calée à gauche. */
#importModalZone { display: flex; flex-direction: column; align-items: center; }

/* ── Fenêtre d'import d'un devis ──────────────────────────────────────────
   Hiérarchie : d'abord ce qu'on importe (titre + types acceptés), puis le
   geste (zone de dépôt), puis ce qui se passe ensuite. */

/* La surcouche était à z-index 500. Or roos_assistant.css:641 pose
   `body.ra-fullscreen #main { z-index: 940 }` : dans cet état, la barre du
   haut et les cartes de chiffrage se peignaient PAR-DESSUS l'assombrissement
   (mesuré : cartes à rgb(255,255,255), donc non assombries, tandis que la
   barre latérale à z-index 100 l'était). On passe au-dessus de 940, tout en
   restant sous les surcouches de plus haut niveau (9999). */
.est-modal-overlay { z-index: 9500; }

/* `.roos-frame` impose un dégradé sombre ÉCRIT EN DUR et en !important
   (style.css:3836). En thème clair, le panneau restait donc bleu nuit au
   milieu d'une interface blanche. On repasse sur les tokens du thème. */
.est-modal-panel.roos-frame {
  background: var(--bg-card) !important;
  backdrop-filter: none !important;
  box-shadow: var(--sh-2);
}
.est-modal-panel .est-modal-header { align-items: flex-start; margin-bottom: 14px; }
.imp-head-txt { min-width: 0; }
.imp-title {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  color: var(--text-0); line-height: 1.15; margin-top: 4px;
}
.imp-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.imp-chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-1);
  border: 1px solid var(--gold-bd); border-radius: 3px;
  padding: 4px 8px; white-space: nowrap;
}
.imp-zone {
  border-width: 1.5px; padding: 30px 24px 26px;
  background: var(--bg-card2);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.imp-zone-icon {
  font-size: 20px; line-height: 1; color: var(--gold);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gold-bd); background: var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) var(--ease-bounce);
}
.imp-zone:hover .imp-zone-icon,
.imp-zone.dragover .imp-zone-icon { transform: translateY(-4px); }
.imp-zone-t { font-size: 14px; color: var(--text-0); font-weight: 500; }
.imp-browse {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  color: var(--gold); background: transparent;
  border: 1px solid var(--gold-bd); border-radius: var(--radius);
  padding: 7px 16px; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.imp-browse:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold-hi); }
.imp-browse:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.imp-formats {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-2);
  letter-spacing: .04em; margin-top: 2px;
}
.imp-after {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ln-1);
  font-size: 11.5px; line-height: 1.55; color: var(--text-2);
}

/* ── Fournisseurs tab ── */
/* ── Demandes de prix liées au chiffrage (onglet Fournisseurs) ── */
.est-frn-sub, .est-rfq-sub {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--gold); font-weight: 600; margin-bottom: 10px;
}
.est-rfq-section { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--gold-dim); }
.est-rfq-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.est-rfq-head .est-rfq-sub { margin-bottom: 0; }
.est-rfq-loading, .est-rfq-empty { font-size: 12px; color: var(--text-2); line-height: 1.6; padding: 6px 0; }
.est-rfq-empty b { color: var(--gold); }
.est-rfq-card { border: 1px solid var(--gold-bd); border-radius: 9px; padding: 10px 13px; margin-bottom: 10px; }
.est-rfq-mat { font-size: 12.5px; color: var(--text-0); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.est-rfq-q { font-family: var(--mono); font-size: 10px; color: var(--text-3); font-weight: 400; }
.est-rfq-best { font-size: 9.5px; color: var(--green); border: 1px solid rgba(62,203,165,0.4); border-radius: 8px; padding: 1px 7px; }
.est-rfq-count { font-size: 9.5px; color: var(--text-3); margin-left: auto; }
.est-rfq-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* ── Réponse fournisseur dépliable dans l'onglet Fournisseurs du chiffrage ── */
.est-rfq-chip.openable { cursor: pointer; }
.est-rfq-chip.openable:hover { border-color: var(--gold); color: var(--text-0); }
.est-rep {
  margin: 10px 0 4px; padding: 12px 14px;
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
  border-left: 2px solid var(--gold); border-radius: 9px;
}
.est-rep-head {
  font-size: 12.5px; font-weight: 600; color: var(--text-0);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-bottom: 9px;
}
.est-rep-date { font-size: 10.5px; font-weight: 400; color: var(--text-3); font-family: var(--mono); }
.est-rep-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 4px 22px; max-width: 900px;
}
.est-rep-l {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 11.5px; color: var(--text-2);
  padding: 4px 0; border-bottom: 1px solid var(--gold-bd);
  min-width: 0;
}
.est-rep-l b {
  color: var(--text-0); font-family: var(--mono); font-weight: 500;
  text-align: right; min-width: 0; overflow-wrap: anywhere;
}
/* Valeurs longues : pleine largeur, texte aligné à gauche pour rester lisible */
.est-rep-l.wide { grid-column: 1 / -1; }
.est-rep-l.wide b { text-align: left; font-family: var(--sans, inherit); line-height: 1.55; }
.est-rep-mail-t {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.9px;
  color: var(--gold); margin: 12px 0 5px;
}
.est-rep-mail {
  margin: 0; padding: 10px 12px; max-height: 220px; overflow: auto;
  background: var(--shade-b); border: 1px solid var(--gold-dim); border-radius: 7px;
  font-family: var(--mono); font-size: 11px; line-height: 1.65; color: var(--text-1);
  white-space: pre-wrap; word-break: break-word;
}

/* Pied d'une réponse fournisseur : le geste qui relie le prix reçu à la ligne
   du devis. Sans lui, la réponse restait une information morte — consultable,
   jamais appliquée. */
.est-rep-foot {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--gold-dim);
}
.est-rep-hint { flex: 1; font-size: 11px; color: var(--text-2); line-height: 1.5; }
.est-rep-applied {
  flex: 1; font-size: 11px; color: var(--green); font-weight: 500;
}

.est-rfq-chip.todo {
  color: var(--amber); border: 1px dashed var(--amber);
  background: var(--au-bg); font-style: italic;
}
.est-rfq-chip {
  font-size: 10.5px; color: var(--text-1); background: var(--bg-card2);
  border: 1px solid var(--gold-dim); border-radius: 13px; padding: 3px 10px;
}
.est-rfq-chip.sent { border-color: rgba(93,140,201,0.5); color: var(--blue); }
.est-rfq-chip.ok { border-color: rgba(62,203,165,0.5); color: var(--green); }
.est-rfq-chip.ret { border-color: var(--gold); color: var(--gold-hi); }
.est-rfq-chip.best { box-shadow: inset 0 0 0 1px rgba(62,203,165,0.5); }

/* ── Ressources & Marge — vue détaillée ── */
.rm-empty { font-size: 13px; color: var(--text-2); padding: 40px 12px; text-align: center; line-height: 1.6; }
.rm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .rm-kpis { grid-template-columns: repeat(2, 1fr); } }
.rm-kpi {
  background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 11px;
  padding: 12px 16px; display: flex; flex-direction: column; gap: 3px;
}
.rm-kpi span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--text-2); }
.rm-kpi b { font-family: var(--mono); font-size: 21px; color: var(--text-0); font-weight: 700; }
.rm-kpi em { font-size: 10px; color: var(--text-3); font-style: normal; }
.rm-kpi--pv { border-color: var(--gold-bd); background: linear-gradient(160deg, var(--au-bg), var(--au-bg)); }
.rm-kpi--pv b { color: var(--gold-hi); }
.rm-kpi--marge b { color: var(--green); }
.rm-kpi--marge em { color: var(--green); }

.rm-bar {
  display: flex; height: 16px; border-radius: 8px; overflow: hidden;
  margin-bottom: 20px; background: var(--tint-a);
}
.rm-seg { height: 100%; min-width: 2px; transition: opacity var(--dur-fast); }
.rm-seg:hover { opacity: 0.82; }

.rm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1050px) { .rm-grid { grid-template-columns: 1fr; } }
.rm-col { display: flex; flex-direction: column; gap: 16px; }
.rm-block { background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 12px; padding: 15px 17px; }
.rm-block-t { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); font-weight: 600; margin-bottom: 12px; }

/* Construction du prix (build-up) */
.rm-steps { display: flex; flex-direction: column; }
.rm-step {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; font-size: 12.5px; color: var(--text-1);
  border-bottom: 1px solid var(--gold-bd);
}
.rm-step-lab { display: flex; align-items: center; gap: 8px; }
.rm-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.rm-step-val { font-family: var(--mono); color: var(--text-0); white-space: nowrap; }
.rm-step.sub { font-weight: 600; color: var(--text-0); border-top: 1px solid var(--gold-dim); border-bottom: 0; margin-top: 2px; }
.rm-step.sub .rm-step-val { color: var(--gold-hi); }
.rm-step.total { font-weight: 700; border-top: 2px solid var(--gold); border-bottom: 0; margin-top: 4px; padding-top: 10px; font-size: 14px; }
.rm-step.total .rm-step-lab { color: var(--gold-hi); }
.rm-step.total .rm-step-val { color: var(--gold-hi); font-size: 16px; }

/* Cartes déboursé sec */
.rm-dscards { display: flex; flex-direction: column; gap: 10px; }
.rm-dscard { display: flex; align-items: center; gap: 12px; }
.rm-dsc-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rm-dsc-val { font-family: var(--mono); font-size: 16px; color: var(--text-0); font-weight: 700; }
.rm-dsc-lab { font-size: 11.5px; color: var(--text-1); }
.rm-dsc-pct { font-size: 9.5px; color: var(--text-3); }

/* Paramètres */
.rm-params { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 10px; }
.rm-param { display: flex; justify-content: space-between; align-items: baseline; font-size: 11.5px; color: var(--text-2); padding: 4px 0; border-bottom: 1px solid var(--gold-bd); }
.rm-param b { font-family: var(--mono); color: var(--gold-hi); }
.rm-coefs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rm-coef { font-size: 10px; background: var(--bg-card2); border: 1px solid var(--gold-dim); border-radius: 12px; padding: 3px 10px; color: var(--text-1); }
.rm-coef b { font-family: var(--mono); color: var(--gold-hi); }

/* Tables de détail */
.rm-table { width: 100%; font-size: 11.5px; border-collapse: collapse; }
.rm-table th { text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-3); padding: 3px 8px 6px; border-bottom: 1px solid var(--gold-dim); font-weight: 400; }
.rm-table td { padding: 6px 8px; color: var(--text-1); border-bottom: 1px solid var(--gold-bd); font-family: var(--mono); font-size: 11px; }
.rm-table td:first-child { font-family: var(--sans); color: var(--text-0); }
.rm-table .r, .rm-table th.r { text-align: right; }
.rm-table .accent { color: var(--gold-hi); font-weight: 600; }
.rm-table .dim { color: var(--text-3); }
.rm-note { font-size: 11.5px; color: var(--text-2); line-height: 1.6; padding: 8px 12px; background: var(--au-bg); border-left: 2px solid var(--gold); border-radius: 0 6px 6px 0; }
.rm-note b { color: var(--gold); }

.est-fournisseur-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid var(--gold-dim);
}
.est-fournisseur-item:last-child { border-bottom: none; }
.est-frn-logo {
  width: 40px; height: 40px; border-radius: 6px; background: var(--bg-card2);
  border: 1px solid var(--gold-bd); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--gold); flex-shrink: 0;
}
.est-frn-info { flex: 1; min-width: 0; }
.est-frn-name { font-size: 14px; color: var(--text-0); font-weight: 500; margin-bottom: 2px; }
.est-frn-status { font-family: var(--mono); font-size: 10px; display: flex; align-items: center; gap: 5px; }
.est-frn-status--repondu   { color: var(--green); }
.est-frn-status--en_attente { color: var(--amber); }
.est-frn-status--relance   { color: var(--gold); }
.est-frn-actions { display: flex; gap: 8px; flex-shrink: 0; }
/* La barre du panneau Fournisseurs — à ne pas confondre avec .est-frn-actions,
   qui porte les boutons d'UNE ligne fournisseur. */
.est-frn-barre { display: flex; justify-content: flex-end; margin-bottom: 14px; }

/* ── PDF Viewer ── */
.est-pdf-viewer { border-top: 1px solid var(--gold-bd); margin-top: 20px; padding-top: 16px; }
.est-pdf-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.est-pdf-header span { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.est-pdf-header button {
  background: none; border: 1px solid var(--gold-bd); color: var(--text-1);
  padding: 5px 12px; border-radius: var(--radius); cursor: pointer; font-size: 11px;
  font-family: var(--mono); transition: all var(--dur-fast);
}
.est-pdf-header button:hover { border-color: var(--gold); color: var(--gold); }

/* ── Donut chart / Ressources tab ── */
.est-donut-wrap { display: flex; align-items: flex-start; gap: 48px; padding: 16px 0; flex-wrap: wrap; }
.est-donut-legend { display: flex; flex-direction: column; gap: 14px; min-width: 220px; }
.est-donut-legend-item { display: flex; align-items: center; gap: 10px; }
.est-donut-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.est-donut-label { font-size: 13px; color: var(--text-1); flex: 1; }
.est-donut-val { font-family: var(--mono); font-size: 13px; color: var(--text-0); font-weight: 600; font-variant-numeric: tabular-nums; }
.est-donut-pct { font-family: var(--mono); font-size: 11px; color: var(--text-2); margin-left: 4px; }

/* ── Documents tab ── */
.est-doc-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--gold-dim); cursor: pointer; transition: background var(--dur-fast);
  border-radius: 3px;
}
.est-doc-item:last-child { border-bottom: none; }
.est-doc-item:hover { background: var(--gold-dim); padding-left: 8px; }
.est-doc-type {
  width: 36px; height: 36px; border-radius: 4px; background: var(--au-bg);
  border: 1px solid var(--gold-bd); display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-family: var(--mono); color: var(--gold); flex-shrink: 0; text-transform: uppercase;
}
.est-doc-name { font-size: 13px; color: var(--text-0); }
.est-doc-arrow { margin-left: auto; color: var(--text-2); font-size: 12px; }

/* ── Provenance badges ── */
.prov-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 3px; cursor: pointer; user-select: none;
  transition: opacity var(--dur-fast); position: relative; vertical-align: middle; margin-left: 6px;
}
.prov-badge:hover { opacity: 0.8; }
.prov-badge--fournisseur { background: rgba(62,203,165,0.1); color: var(--green); border: 1px solid rgba(62,203,165,0.2); }
.prov-badge--document    { background: rgba(74,144,217,0.1); color: var(--blue);  border: 1px solid rgba(74,144,217,0.2); }
.prov-badge--historique  { background: var(--gold-dim); color: var(--gold); border: 1px solid var(--gold-bd); }
.prov-popover {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) scale(0.92); transform-origin: bottom center;
  background: var(--bg-card); border: 1px solid var(--gold-bd); border-radius: var(--radius);
  padding: 12px 14px; width: 270px; z-index: 400; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast), transform var(--dur-fast); font-family: var(--sans);
  box-shadow: 0 8px 36px var(--sh-c-c); text-align: left;
}
.prov-popover.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.prov-popover-label { font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 7px; }
.prov-popover-text { font-size: 12px; color: var(--text-1); line-height: 1.55; }

/* ── Mock lines (demo chiffrages) ── */
.est-lignes-section { margin-bottom: 28px; }
.est-lignes-lot-header {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--gold); margin-bottom: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--gold-bd);
}
.est-ligne-row {
  display: grid; grid-template-columns: 1fr 80px 100px; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--gold-bd);
  transition: background var(--dur-fast);
}
.est-ligne-row:hover { background: var(--au-bg); padding-left: 4px; border-radius: 3px; }
.est-ligne-designation { font-size: 13px; color: var(--text-0); line-height: 1.35; }
.est-ligne-qte { font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: nowrap; }
.est-ligne-total { font-family: var(--mono); font-size: 13px; color: var(--gold-hi); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ── Drawer entry animation for cards ── */
@keyframes estCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Révélation staggerée (§4.4) : décalage 30ms, plafonné à 8 cartes */
.est-card { animation: estCardIn var(--dur-base) var(--ease-out) both; }
.est-card:nth-child(1) { animation-delay: 0ms; }
.est-card:nth-child(2) { animation-delay: 30ms; }
.est-card:nth-child(3) { animation-delay: 60ms; }
.est-card:nth-child(4) { animation-delay: 90ms; }
.est-card:nth-child(5) { animation-delay: 120ms; }
.est-card:nth-child(6) { animation-delay: 150ms; }
.est-card:nth-child(7) { animation-delay: 180ms; }
.est-card:nth-child(8) { animation-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .est-card { animation-duration: 100ms; animation-delay: 0ms !important; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .est-drawer { width: 100%; }
  .est-grid { grid-template-columns: 1fr; }
  .est-filter-bar { gap: 4px; }
  .est-filter-spacer { display: none; }
  .est-search { width: 120px; }
  .est-donut-wrap { flex-direction: column; }
  .est-donut-wrap canvas { width: 160px; height: 160px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  /* Règle globale plutôt que par composant : durée quasi nulle (et non
     "none") pour que les callbacks JS sur animationend/transitionend
     (fermeture de dropdown, flip de badge, sortie de card...) continuent
     de se déclencher normalement, sans mouvement perceptible pour
     l'utilisateur. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   ESTIMATION v2 — State Transitions & Validation
   ═══════════════════════════════════════════════════════════ */

/* ── State controls dropdown ── */
.est-state-controls { position: relative; flex-shrink: 0; }
.est-state-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: none;
  border: 1px solid var(--gold-bd); border-radius: var(--radius);
  color: var(--text-1); font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.07em;
  cursor: pointer; transition: all var(--dur-fast); white-space: nowrap;
}
.est-state-trigger:hover,
.est-state-trigger.open { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.est-state-trigger[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
.est-state-caret { font-size: 9px; transition: transform var(--dur-fast); }
.est-state-trigger.open .est-state-caret { transform: rotate(180deg); }
.est-state-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius); box-shadow: 0 8px 32px var(--sh-c-c);
  z-index: 350; opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.est-state-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.est-state-option {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  cursor: pointer; transition: background var(--dur-fast); border-bottom: 1px solid var(--gold-dim);
  font-size: 12px; color: var(--text-0);
}
.est-state-option:last-child { border-bottom: none; }
.est-state-option:hover { background: var(--gold-dim); }
.est-state-option.reverse { color: var(--text-2); font-size: 11px; }
.est-state-option-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.est-state-option-label { flex: 1; }
.est-state-option-arrow { font-size: 11px; color: var(--text-2); }

/* ── Badge flip animation ── */
@keyframes estBadgeFlipOut {
  0%   { transform: perspective(400px) rotateX(0deg); opacity: 1; }
  100% { transform: perspective(400px) rotateX(90deg); opacity: 0; }
}
@keyframes estBadgeFlipIn {
  0%   { transform: perspective(400px) rotateX(-90deg); opacity: 0; }
  100% { transform: perspective(400px) rotateX(0deg); opacity: 1; }
}
.est-badge--flip-out { animation: estBadgeFlipOut 0.2s var(--ease) forwards; }
.est-badge--flip-in  { animation: estBadgeFlipIn  0.2s var(--ease) forwards; }

/* ── Card state-change pulse ── */
@keyframes estCardStatePulse {
  0%   { box-shadow: 0 0 0 0 var(--au-bg); transform: scale(1); }
  30%  { box-shadow: 0 0 0 10px var(--gold-dim); transform: scale(1.025); }
  80%  { box-shadow: 0 0 0 6px var(--au-bg); }
  100% { box-shadow: 0 0 0 0 var(--au-bg); transform: scale(1); }
}
.est-card--state-pulse { animation: estCardStatePulse 0.55s var(--ease) forwards; }

/* ── Card exit animation (when filtered out) ── */
@keyframes estCardExit {
  to { opacity: 0; transform: scale(0.92) translateY(-6px); }
}
.est-card--exiting { animation: estCardExit 0.28s var(--ease) forwards; }

/* ── Validation overlay ── */
.est-validation-overlay {
  position: fixed; inset: 0; background: rgba(4,7,26,0.93);
  backdrop-filter: blur(8px); z-index: 600;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-slow);
}
.est-validation-overlay.open { opacity: 1; pointer-events: auto; }
.est-validation-panel {
  text-align: center; padding: 56px 48px; max-width: 520px; width: 90%;
}
.est-seal-wrap { margin-bottom: 32px; }
.est-seal-svg { width: 120px; height: 120px; }

/* Seal ring (static, immediate) */
.est-seal-ring { opacity: 0.2; }

/* Seal circle draws itself */
.est-seal-circle {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transform-origin: center;
  animation: estSealDraw 0.9s var(--ease) forwards 0.1s;
}
@keyframes estSealDraw { to { stroke-dashoffset: 0; } }

/* Checkmark draws after circle */
.est-seal-check {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
  animation: estCheckDraw 0.45s var(--ease) forwards 0.9s;
}
@keyframes estCheckDraw { to { stroke-dashoffset: 0; } }

.est-validation-eyebrow {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--gold); margin-bottom: 12px;
}
.est-validation-chantier {
  font-family: var(--serif); font-size: 36px; color: var(--text-0);
  font-weight: 300; margin-bottom: 6px; line-height: 1.15;
}
.est-validation-id {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  letter-spacing: 0.1em; margin-bottom: 24px;
}
.est-validation-msg {
  font-size: 14px; color: var(--text-1); line-height: 1.65; margin-bottom: 40px;
}
.est-validation-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.est-validation-cta { padding: 13px 32px; font-size: 13px; }
.est-validation-later {
  font-family: var(--mono); font-size: 11px; color: var(--text-2);
  background: none; border: none; cursor: pointer; padding: 6px;
  text-decoration: underline; text-underline-offset: 3px;
  transition: color var(--dur-fast);
}
.est-validation-later:hover { color: var(--text-1); }

/* ── Planning validated banner ── */
.plx-est-banner {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(90deg, var(--au-bg), var(--au-bg));
  border: 1px solid var(--gold-bd); border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 24px;
  animation: estBannerIn 0.4s var(--ease);
}
@keyframes estBannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.plx-est-banner-icon { font-size: 22px; color: var(--gold); flex-shrink: 0; }
.plx-est-banner-body { flex: 1; min-width: 0; }
.plx-est-banner-title { font-size: 13px; color: var(--text-0); font-weight: 600; margin-bottom: 2px; }
.plx-est-banner-sub { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.plx-est-banner-dismiss {
  background: none; border: none; color: var(--text-2); font-size: 16px;
  cursor: pointer; padding: 4px 8px; border-radius: 4px;
  transition: color var(--dur-fast), background var(--dur-fast); flex-shrink: 0;
}
.plx-est-banner-dismiss:hover { color: var(--text-1); background: var(--tint-b); }

/* ── Card planning-pending indicator ── */
.est-card--planning-pending::after {
  content: '→ Planning à créer';
  display: block; margin-top: 8px; padding: 4px 8px;
  background: var(--au-bg); border: 1px solid var(--gold-bd);
  border-radius: 3px; font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR — Chapitres pliables (nav groups)
   Animation de hauteur sans mesure JS : grid-template-rows 1fr↔0fr,
   chevron synchronisé, révélation en cascade des items. Netteté YC.
   ═══════════════════════════════════════════════════════════════ */
.sidebar-nav { --nav-ease: cubic-bezier(.32,.72,0,1); }
.nav-group { display: flex; flex-direction: column; }

.nav-group-header {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; box-sizing: border-box;
  background: none; border: 0; cursor: pointer;
  margin: 11px 0 3px; padding: 3px 18px 3px 20px;
  color: var(--text-3);
  font-family: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase;
  transition: color var(--dur-fast) ease;
  -webkit-user-select: none; user-select: none;
}
.nav-group-header:hover { color: var(--text-1); }
.nav-group-title { line-height: 1; }
.nav-group-chevron {
  width: 11px; height: 11px; flex-shrink: 0; opacity: .5;
  transition: transform var(--dur-slow) var(--nav-ease), opacity var(--dur-fast) ease;
}
.nav-group-header:hover .nav-group-chevron { opacity: .95; }
.nav-group.collapsed .nav-group-chevron { transform: rotate(-90deg); }

/* Le cœur de l'animation : la ligne de grille passe de 1fr à 0fr */
.nav-group-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-slow) var(--nav-ease);
}
.nav-group.collapsed .nav-group-body { grid-template-rows: 0fr; }
.nav-group-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 2px; }

/* Révélation en cascade à l'ouverture ; fermeture instantanée.
   Les délais ne portent QUE sur opacity/transform (positions 4-5 de la liste),
   jamais sur color/background — le survol reste immédiat. */
.nav-group-inner .nav-item {
  transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast),
              opacity .24s ease, transform var(--dur-base) var(--nav-ease);
}
.nav-group.collapsed .nav-group-inner .nav-item {
  opacity: 0; transform: translateX(-7px); transition-delay: 0s;
}
.nav-group:not(.collapsed) .nav-group-inner .nav-item:nth-child(1){transition-delay:0s,0s,0s,.02s,.02s}
.nav-group:not(.collapsed) .nav-group-inner .nav-item:nth-child(2){transition-delay:0s,0s,0s,.05s,.05s}
.nav-group:not(.collapsed) .nav-group-inner .nav-item:nth-child(3){transition-delay:0s,0s,0s,.08s,.08s}
.nav-group:not(.collapsed) .nav-group-inner .nav-item:nth-child(4){transition-delay:0s,0s,0s,.11s,.11s}
.nav-group:not(.collapsed) .nav-group-inner .nav-item:nth-child(5){transition-delay:0s,0s,0s,.14s,.14s}
.nav-group:not(.collapsed) .nav-group-inner .nav-item:nth-child(6){transition-delay:0s,0s,0s,.17s,.17s}

/* Pastille dorée si un chapitre replié contient la vue active */
.nav-group.has-active.collapsed .nav-group-title::after {
  content:""; display:inline-block; width:5px; height:5px; margin-left:8px;
  border-radius:50%; background: var(--gold); vertical-align:middle;
  box-shadow: 0 0 5px var(--gold);
}

/* Mode sidebar réduite (icônes) : chapitres masqués, tout déplié,
   séparateurs discrets entre groupes */
body.sidebar-collapsed .nav-group-header { display:none; }
body.sidebar-collapsed .nav-group-body { grid-template-rows:1fr !important; }
body.sidebar-collapsed .nav-group-inner .nav-item { opacity:1 !important; transform:none !important; }
body.sidebar-collapsed .nav-group + .nav-group {
  border-top: 1px solid var(--gold-bd); margin-top:5px; padding-top:5px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-group-body, .nav-group-chevron, .nav-group-inner .nav-item { transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SUPPRESSION D'ESTIMATION — bouton corbeille (survol) + confirmation
   ═══════════════════════════════════════════════════════════════ */
.est-card { position: relative; }
.est-card-del {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 27px; height: 27px; border-radius: 7px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,6,15,.55); border: 1px solid var(--gold-bd);
  color: var(--text-3); cursor: pointer;
  opacity: 0; transform: scale(.88);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) cubic-bezier(.32,.72,0,1),
              color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.est-card:hover .est-card-del,
.est-card:focus-within .est-card-del { opacity: 1; transform: scale(1); }
.est-card-del:hover { color: var(--err); border-color: rgba(224,82,78,.55); background: rgba(224,82,78,.14); }
.est-card-del:focus-visible { opacity: 1; transform: scale(1); outline: 2px solid var(--gold); outline-offset: 1px; }
.est-card-del svg { width: 15px; height: 15px; }

.est-confirm-overlay {
  position: fixed; inset: 0; z-index: 400; padding: 20px;
  background: var(--shade-c);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-fast) ease;
}
.est-confirm-overlay.open { opacity: 1; }
.est-confirm {
  background: var(--bg-card2); border: 1px solid var(--gold-bd-hi); border-radius: 14px;
  width: 100%; max-width: 420px; padding: 26px 24px 20px; text-align: center;
  transform: translateY(8px) scale(.98);
  transition: transform var(--dur-base) cubic-bezier(.32,.72,0,1);
  box-shadow: 0 20px 60px var(--sh-c-c);
}
.est-confirm-overlay.open .est-confirm { transform: none; }
.est-confirm-icon {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(224,82,78,.12); border: 1px solid rgba(224,82,78,.35); color: var(--err);
}
.est-confirm-icon svg { width: 24px; height: 24px; }
.est-confirm-title { font-size: 17px; font-weight: 600; color: var(--text-0); margin-bottom: 8px; }
.est-confirm-body { font-size: 13px; line-height: 1.55; color: var(--text-2); margin-bottom: 20px; }
.est-confirm-actions { display: flex; gap: 10px; justify-content: center; }
.est-confirm-actions button {
  flex: 1; max-width: 160px; padding: 10px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all var(--dur-fast);
}
.est-confirm-cancel { background: transparent; border: 1px solid var(--gold-bd); color: var(--text-1); }
.est-confirm-cancel:hover { background: var(--gold-dim); color: var(--text-0); }
.est-confirm-ok { background: #e0524e; border: 1px solid #e0524e; color: var(--text-0); }
.est-confirm-ok:hover { background: #c8433f; }
.est-confirm-ok:disabled { opacity: .6; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  .est-confirm-overlay, .est-confirm, .est-card-del { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   SOCLE — PRIMITIVES v-ui  (PASSE B du chantier UI/UX ULTRA)
   Classes NOUVELLES, opt-in, additives → aucune régression possible.
   Adoptées progressivement en PASSE C (page par page).
   Une seule famille de rayon/bordure/ombre. Bordures > ombres.
   ═══════════════════════════════════════════════════════════════ */

/* ── Signature .bk : crochets d'angle (réservés aux blocs de 1er niveau) ── */
.bk { position: relative; }
.bk::before, .bk::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  pointer-events: none; opacity: .55;
}
.bk::before { top: 7px;  left: 7px;
  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.bk::after  { bottom: 7px; right: 7px;
  border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
/* variante 4 coins via wrapper interne pour les blocs qui le veulent */
.bk-4::before, .bk-4::after,
.bk-4 > .bk-tr, .bk-4 > .bk-bl { pointer-events: none; }

/* ── Carte générique (border-first, un seul rayon) ── */
.roos-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-bd);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.roos-card[data-lift]:hover { border-color: var(--gold-bd-hi); }

/* Hiérarchie interne d'un bloc : eyebrow → titre → contenu → action */
.roos-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--tx-3);
}
.roos-title {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--tx-1); line-height: 1.1; letter-spacing: -0.01em;
}

/* ── Bouton unique (remplace les 3 définitions divergentes de .btn-gold) ── */
.roos-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1;
  padding: 0 var(--s-4); height: 34px;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform var(--dur-instant) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.roos-btn:active { transform: scale(0.97); }
.roos-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.roos-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.roos-btn--gold {
  background: var(--gold); color: var(--sl-0); border-color: var(--gold);
}
.roos-btn--gold:hover { background: var(--au-hi); border-color: var(--au-hi); }

.roos-btn--ghost {
  background: transparent; color: var(--tx-2); border-color: var(--gold-bd);
}
.roos-btn--ghost:hover { color: var(--tx-1); border-color: var(--gold-bd-hi); background: var(--au-bg); }

.roos-btn--danger {
  background: transparent; color: var(--err); border-color: var(--err-ln);
}
.roos-btn--danger:hover { background: var(--err-bg); }

.roos-btn.sm { height: 28px; font-size: 12px; padding: 0 var(--s-3); }
.roos-btn.lg { height: 40px; font-size: 14px; padding: 0 var(--s-6); }

/* ── Badge de statut unique (pastille) ── */
.roos-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  padding: 3px var(--s-3); border-radius: var(--r-p);
  border: 1px solid var(--gold-bd); color: var(--tx-2);
  background: var(--au-bg); white-space: nowrap;
}
.roos-badge__dot { width: 6px; height: 6px; border-radius: var(--r-p); background: currentColor; }
.roos-badge--ok   { color: var(--ok);   border-color: var(--ok-ln);   background: var(--ok-bg); }
.roos-badge--warn { color: var(--warn); border-color: var(--warn-ln); background: var(--warn-bg); }
.roos-badge--err  { color: var(--err);  border-color: var(--err-ln);  background: var(--err-bg); }
.roos-badge--info { color: var(--info); border-color: var(--info-ln); background: var(--info-bg); }

/* ── Overlay/modale unique (remplace les 3 idiomes) ── */
.roos-overlay {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-6);
  background: oklch(0.12 0.015 232 / 0.62);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}
.roos-overlay.open { opacity: 1; visibility: visible; transition: opacity var(--dur-fast) var(--ease-out); }
.roos-overlay__panel {
  position: relative; z-index: var(--z-modal);
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--bg-card); border: 1px solid var(--gold-bd);
  border-radius: var(--radius-lg); box-shadow: var(--sh-2);
  transform: scale(0.96);
  transition: transform var(--dur-base) var(--ease-out);
}
.roos-overlay.open .roos-overlay__panel { transform: scale(1); }

/* ── État vide unique (invitation à agir, pas constat de vide) ── */
.roos-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-3); padding: var(--s-9) var(--s-6);
  color: var(--tx-3);
}
.roos-empty__title { font-family: var(--serif); font-size: 1.2rem; color: var(--tx-2); }
.roos-empty__body  { font-size: 13px; max-width: 44ch; line-height: 1.5; }

/* ── Nombres tabulaires : les données ont l'air de données ── */
.roos-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .roos-card, .roos-btn, .roos-overlay, .roos-overlay__panel { transition-duration: 100ms; }
}

/* ── Import FEC (onglet Comptabilité) — comptabilité réelle → taux FG live ── */
.pe-prov {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; line-height: 1.45;
  padding: 5px 12px; border-radius: var(--r-p);
  border: 1px solid var(--gold-bd); margin: 2px 0 14px;
}
.pe-prov-fec  { color: var(--ok);   border-color: var(--ok-ln);   background: var(--ok-bg); }
.pe-prov-demo { color: var(--warn); border-color: var(--warn-ln); background: var(--warn-bg); }

.fec-import {
  border: 1px solid var(--gold-bd); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 16px 18px; margin-bottom: 20px;
}
.fec-import-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fec-import-title { font-family: var(--serif); font-size: 17px; color: var(--text-0); }
.fec-import-sub { font-size: 12px; color: var(--text-2); margin-top: 3px; max-width: 68ch; line-height: 1.5; }
.fec-import-sub b { color: var(--gold-hi); font-weight: 600; }
.fec-preview-table { margin-top: 14px; }
.fec-taux-highlight { font-family: var(--mono); color: var(--gold-hi); font-weight: 600; }
.fec-assump { margin-top: 10px; font-size: 11px; color: var(--text-2); }
.fec-assump summary { cursor: pointer; color: var(--gold); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; }
.fec-assump ul { margin-top: 6px; }
.fec-assump li { margin: 2px 0 2px 16px; list-style: disc; line-height: 1.5; }
.fec-warn { color: var(--warn); font-size: 11.5px; margin-top: 10px; line-height: 1.6; }
.fec-error { color: var(--err); font-size: 12.5px; padding: 10px 0 2px; line-height: 1.6; }
.fec-loading { color: var(--text-2); font-size: 12.5px; padding: 12px 0 2px; display: flex; gap: 9px; align-items: center; }
.fec-apply-bar { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.fec-apply-note { font-size: 11px; color: var(--text-2); }

/* ── Synchronisation Pennylane ──
   Un second bloc dans le même cadre, séparé d'un filet : c'est la MÊME
   opération par une autre porte, pas une autre fonctionnalité. Deux cartes
   distinctes laisseraient croire à deux imports aux résultats différents. */
.fec-import-pennylane {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--gold-bd);
}
.fec-exercice-select {
  background: var(--bg-2, var(--bg-card)); color: var(--text-0);
  border: 1px solid var(--gold-bd); border-radius: var(--radius-sm, 6px);
  padding: 5px 9px; font-size: 12.5px; font-family: inherit;
}
.fec-glissant { margin-top: 14px; }
.fec-glissant-t {
  font-family: var(--serif); font-size: 15px; color: var(--text-0);
  margin-bottom: 4px;
}

/* ── Diagnostic d'échec FEC + mapping manuel des colonnes ── */
.fec-verdict {
  font-size: 12.5px; color: var(--text-1); line-height: 1.6;
  background: var(--warn-bg); border: 1px solid var(--warn-ln);
  border-radius: var(--radius); padding: 10px 12px; margin: 10px 0;
}
.fec-diag { font-size: 11.5px; color: var(--text-2); margin: 5px 0; line-height: 1.6; }
.fec-diag-k {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gold); margin-right: 8px;
}
.fec-diag code {
  font-family: var(--mono); font-size: 10.5px; color: var(--text-1);
  background: var(--bg-card2); border: 1px solid var(--gold-bd);
  border-radius: var(--radius-sm); padding: 1px 6px; margin-right: 4px;
}
.fec-apercu { margin: 8px 0 4px; opacity: 0.75; font-size: 11px; }
.fec-map { margin-top: 12px; }
.fec-map-title { font-family: var(--serif); font-size: 15px; color: var(--text-0); margin-bottom: 10px; }
.fec-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 18px; }
.fec-map-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-2); }
.fec-map-row select {
  flex: 0 1 150px; background: var(--bg-card2); color: var(--text-0);
  border: 1px solid var(--gold-bd); border-radius: var(--radius);
  padding: 5px 8px; font-family: var(--mono); font-size: 11px; outline: none;
}
.fec-map-row select:focus { border-color: var(--gold); }

/* ── Détail de ventilation FEC (dépliable par exercice) ── */
.fec-row-exp { cursor: pointer; }
.fec-row-exp:hover { background: var(--au-bg); }
.fec-chevron {
  display: inline-block; color: var(--gold); margin-right: 7px;
  transition: transform var(--dur-fast) var(--ease-out);
}
.fec-chevron.open { transform: rotate(90deg); }
.fec-detail-row { display: none; }
.fec-detail-row.open { display: table-row; }
.fec-detail-row > td { padding: 0 !important; background: var(--bg-card2); }
.fec-hint { font-size: 11px; color: var(--text-2); margin-top: 6px; font-style: italic; }

.fec-det { padding: 14px 16px; display: grid; gap: 14px; }
.fec-det-bloc { border: 1px solid var(--gold-bd); border-radius: var(--radius); overflow: hidden; }
.fec-det-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--bg-card); border-bottom: 1px solid var(--gold-bd);
}
.fec-det-cd .fec-det-head { color: var(--gold-hi); }
.fec-det-fg .fec-det-head { color: var(--warn); }
.fec-det-cf .fec-det-head { color: var(--info); }
.fec-det-tot { font-weight: 700; font-variant-numeric: tabular-nums; }
.fec-det-poste { padding: 9px 12px; border-bottom: 1px solid var(--gold-bd); }
.fec-det-poste:last-child { border-bottom: none; }
.fec-det-poste-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.fec-det-poste-nom { font-size: 12.5px; color: var(--text-0); font-weight: 500; }
.fec-det-poste-mt { font-family: var(--mono); font-size: 12px; color: var(--gold-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fec-det-pct { color: var(--text-2); font-size: 10px; margin-left: 8px; }
.fec-det-desc { font-size: 11px; color: var(--text-2); margin-top: 2px; line-height: 1.45; }
.fec-det-tbl { width: 100%; margin-top: 7px; border-collapse: collapse; }
.fec-det-tbl td { padding: 3px 0; font-size: 11px; color: var(--text-2); border-bottom: 1px dashed var(--gold-bd); }
.fec-det-tbl tr:last-child td { border-bottom: none; }
.fec-det-lib { color: var(--text-1); }
.fec-det-base { font-family: var(--mono); font-size: 10px; color: var(--text-2); opacity: 0.8; }
.fec-det-tbl .td-num { font-family: var(--mono); text-align: right; color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fec-det-foot {
  font-size: 11.5px; color: var(--text-2); line-height: 1.6;
  padding: 9px 12px; background: var(--bg-card);
  border: 1px solid var(--gold-bd); border-radius: var(--radius);
}
.fec-det-foot b { color: var(--gold-hi); font-family: var(--mono); }

/* Exercice de référence (celui qui pilote le taux FG des chiffrages) */
.pe-prov-ref { color: var(--gold-hi); border-color: var(--gold-bd-hi); background: var(--au-bg); margin-left: 8px; }
.pe-year-ref { position: relative; border-color: var(--gold) !important; }
.pe-year-dot {
  position: absolute; top: 3px; right: 4px;
  width: 5px; height: 5px; border-radius: var(--r-p); background: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLANNING RESSOURCE — les plannings prennent l'écran
   Ajouté le 02/08/2026.

   Trois blocs ont été masqués dans le gabarit — les quatre filtres, deux
   modes de vue sur cinq, la bande des cinq indicateurs — et ce qui reste
   doit occuper la place ainsi libérée. Or elle ne l'était pas : les zones de
   défilement portaient des plafonds en PIXELS (740 px pour les ressources,
   540 px pour le Gantt), hérités d'une époque où la page défilait dans son
   ensemble. Sur un écran haut, cela laissait un grand vide sous le planning ;
   sur un écran bas, cela le tronquait sans que rien ne le dise.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La barre du haut est `position: sticky` : elle occupe encore sa place dans
   le flux. Ce qui reste sous elle vaut donc exactement une hauteur d'écran
   moins la sienne — pas d'approximation, pas de nombre magique. */
#view-planning.view.active {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--topbar-h));
  overflow: hidden;
  padding-bottom: 20px;
}

/* Le sélecteur de mode est le seul rescapé de la barre d'outils : il la prend
   entière et se centre. Trois modes de même poids — le Gantt des projets,
   puis les deux plannings de ressources, que le séparateur détache. */
#view-planning .plan-toolbar       { margin-bottom: 14px; padding: 10px 16px; }
#view-planning .plan-toolbar-right { grid-column: 2; flex: 1; justify-content: center; gap: 8px; }
#view-planning .plan-view-btn      { padding: 10px 26px; font-size: 13px; }
#view-planning .plan-view-sep      { margin: 0 12px; }

/* La chaîne qui distribue la hauteur. Chaque maillon doit être un conteneur
   flex ET accepter de rétrécir : sans `min-height: 0`, un enfant flex refuse
   de passer sous sa taille naturelle, la chaîne casse au premier maillon et
   le défilement remonte à la page entière. */
#view-planning .plan-mode-panel.active,
#view-planning .plan-panel.active,
#view-planning .plan-panel.active .plan-res-gantt,
#view-planning .plan-panel.active .plan-gantt-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Le bout de la chaîne : la zone qui défile prend tout ce qui reste. */
#view-planning .plan-panel.active .plan-res-scroll,
#view-planning .plan-panel.active .plan-gantt-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Ce qui encadre le planning garde sa taille naturelle et ne se laisse ni
   étirer ni comprimer — sans quoi les indicateurs de ressources et la légende
   se feraient écraser par la zone de défilement. */
#view-planning .plan-panel.active .plan-res-kpi-row,
#view-planning .plan-panel.active .plan-autofill-bar,
#view-planning .plan-panel.active .plan-legend,
#view-planning .plan-panel.active .plan-gantt-header,
#view-planning .plan-heatmap-strip,
#view-planning .plan-conflicts-banner {
  flex: 0 0 auto;
}

/* Sous 900 px, une hauteur d'écran ne suffit plus à contenir un planning :
   on rend la page au flux normal, elle défile comme le reste de
   l'application, et les zones reprennent un plafond — relatif cette fois. */
@media (max-width: 900px) {
  #view-planning.view.active { display: block; height: auto; overflow: visible; }
  #view-planning .plan-toolbar-right { justify-content: flex-start; flex-wrap: wrap; }
  #view-planning .plan-panel.active .plan-res-scroll { max-height: 68vh; }
  #view-planning .plan-panel.active .plan-gantt-body { max-height: 60vh; }
}

/* ═══════════════════════════════════════════════════════════════
   ÉCHELLE DE TEMPS — Planning ressource
   ═══════════════════════════════════════════════════════════════ */
#view-planning .plan-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
#view-planning .plan-echelle { grid-column: 3; justify-self: end; }
/* La barre est une grille « 1fr auto 1fr » : le sélecteur de mode au centre,
   l'échelle à droite, et une première colonne restée vide depuis que les
   filtres ont été masqués. Le bouton d'ajout la prend.

   LA RANGÉE EST OBLIGATOIRE. Le placement automatique ne revient pas en
   arrière : le sélecteur de mode ayant déjà pris la colonne 2 de la rangée 1,
   un bouton demandant la colonne 1 était renvoyé à la rangée 2 — la barre
   passait sur deux lignes, le mode seul en haut. */
#view-planning .plan-add-btn { grid-column: 1; grid-row: 1; justify-self: start; }

.plan-echelle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: oklch(1 0 0 / .05);
  border: 1px solid oklch(1 0 0 / .08);
}
.plan-ech-btn {
  appearance: none; -webkit-appearance: none;
  border: 0; cursor: pointer;
  padding: 7px 15px; border-radius: 999px;
  background: transparent; color: var(--text-2);
  font: inherit; font-size: 12px; font-weight: 500; letter-spacing: -.005em;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.plan-ech-btn:hover { color: var(--text-0); }
.plan-ech-btn.active {
  background: oklch(1 0 0 / .12);
  color: var(--text-0);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .16);
}

/* ── Ajouter une ressource depuis le planning ────────────────────────
   Il se tient entre le choix de la vue et celui de l'échelle, parce que
   c'est là qu'il agit : sur ce qui est affiché. Contour doré plutôt que
   plein — c'est une action fréquente mais secondaire, la page sert
   d'abord à lire un planning, pas à peupler un référentiel. */
.plan-add-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  border: 1px solid var(--gold-bd);
  background: transparent; color: var(--text-1);
  font: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.plan-add-btn:hover {
  border-color: var(--gold);
  color: var(--gold-hi);
  background: var(--au-bg);
}
.plan-add-plus {
  font-size: 15px; line-height: 1; font-weight: 400;
  color: var(--gold); transform: translateY(-.5px);
}

@media (max-width: 900px) {
  #view-planning .plan-toolbar { display: flex; flex-wrap: wrap; }
  #view-planning .plan-echelle { justify-self: start; }
  .plan-ech-btn { padding: 6px 11px; font-size: 11px; }
}