/* ═══════════════════════════════════════════════════════════════
   AuraOS Global Theme — Liquid Glass + Gradient
   Applied globally to the whole app (dashboard, devis, factures, etc.)
   Load last in base.html to override existing styles.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Gradients accent (8 presets) — --acc-grad is set dynamically by setAcc() */
  --acc-grad: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #a855f7 100%);
  --acc-grad-soft: linear-gradient(135deg, rgba(59,130,246,0.2) 0%, rgba(99,102,241,0.2) 50%, rgba(168,85,247,0.2) 100%);
  --acc-grad-subtle: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 50%, rgba(168,85,247,0.08) 100%);
}

/* ═══ Body background — Phase 4 Glass Unified
   Ancien (rollback Phase 4) :
     [data-theme="dark"] body { background-color: #050510 !important; background-image: 3 radial-gradients }
     [data-theme="light"] body { background-color: #F6F2EB; background-image: none }
     [data-theme="light"] .aura-orbs/.aura-orb/.aura-liquid/.aura-noise { display:none }
   Nouveau : --body-bg gradient defini dans theme.css, applique par body { background: var(--body-bg) }.
   Aucun !important ici pour laisser theme.css piloter. Orbes visibles light + dark. */

/* ═══ Ambient orbs — Phase 4 Glass Unified (3 bleus identiques light + dark)
   Ancien (rollback Phase 4) :
     - mix-blend-mode: screen / multiply
     - opacity 0.7 (dark) / 0.45 (light)
     - blur 110px / 120px
     - var(--orb-1/2/3) (couleurs roses/violets/bleu mixtes par theme accent)
     - 3 animations distinctes (auraOrb1/2/3) 22-32s
   Nouveau : 3 bleus fixes via --glass-orb-1/2/3, animation float-orb 60s
   uniforme, opacity 0.35 (light) / 0.20 (dark), blur 100px / 120px.
*/
.aura-orbs {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
/* Quand l'utilisateur a uploadé un wallpaper custom, on masque les orbes
   (sinon teinte de couleur visible par-dessus le wallpaper). */
body.has-bg-image .aura-orbs { display: none; }

.aura-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(32px);
  opacity: 0.65;
  mix-blend-mode: normal;
}
[data-theme="light"] .aura-orb {
  filter: blur(36px);
  opacity: 0.55;
  mix-blend-mode: normal;
}

/* Formes ovoïdes (ratio ~2:1) + radial-gradient avec centre éclairci :
   color-mix() mélange la couleur de base avec du blanc à 35% pour créer
   un "glow" lumineux au centre qui s'estompe vers la couleur pure puis
   vers la transparence. Tailles ~30% plus grandes pour plus de présence. */
.aura-orb-1 {
  width: 620px; height: 320px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--glass-orb-1) 60%, white) 0%,
    var(--glass-orb-1) 35%,
    transparent 75%);
  top: 8%; right: -8%;
  animation: float-orb 60s ease-in-out infinite;
}
.aura-orb-2 {
  width: 500px; height: 680px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--glass-orb-2) 60%, white) 0%,
    var(--glass-orb-2) 35%,
    transparent 75%);
  bottom: -6%; left: -8%;
  animation: float-orb 60s ease-in-out infinite reverse;
}
.aura-orb-3 {
  /* Beaucoup plus grande (~1050×680) + décalée bas-droite + fondu plus
     progressif (transparent 90%) pour un halo très diffus et léger. */
  width: 1050px; height: 680px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--glass-orb-3) 40%, white) 0%,
    var(--glass-orb-3) 30%,
    transparent 90%);
  top: 60%; right: -5%;
  animation: float-orb 60s ease-in-out infinite 20s;
}
/* Orbe centrale : très diffuse, présence légère (pas un point focal dense). */
[data-theme="dark"] .aura-orb-3 {
  opacity: 0.30;
  filter: blur(80px);
}
[data-theme="light"] .aura-orb-3 {
  opacity: 0.25;
  filter: blur(90px);
}
@keyframes float-orb {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(20px, -30px); }
  66%      { transform: translate(-25px, 20px); }
}

/* ═══ Orbes plus petites & discrètes sur MOBILE (≤768px) ═══
   À pleine taille (620–1050px) elles débordent un écran de 375px et « bouffent »
   la vue. On réduit width/height par un FACTEUR token (et non transform:scale,
   qui casserait l'animation float-orb : elle anime déjà transform:translate sur
   ces mêmes éléments). On adoucit aussi l'opacité d'orb-1/2 (orb-3, déjà très
   diffuse à 0.30/0.25, garde la sienne). Orbes déjà glass-only (masquées en
   rexora). Desktop inchangé. Bonus perf : plus petites = moins coûteuses à
   peindre. Réglable en 1 ligne via --aura-orb-mobile-scale / -opacity. */
@media (max-width: 768px) {
  :root {
    --aura-orb-mobile-scale: 0.42;     /* 620–1050px → ~260–440px */
    --aura-orb-mobile-opacity: 0.50;   /* orb-1/2 un peu plus discrètes */
  }
  .aura-orb-1 {
    width: calc(620px * var(--aura-orb-mobile-scale)) !important;
    height: calc(320px * var(--aura-orb-mobile-scale)) !important;
    opacity: var(--aura-orb-mobile-opacity) !important;
  }
  .aura-orb-2 {
    width: calc(500px * var(--aura-orb-mobile-scale)) !important;
    height: calc(680px * var(--aura-orb-mobile-scale)) !important;
    opacity: var(--aura-orb-mobile-opacity) !important;
  }
  .aura-orb-3 {
    width: calc(1050px * var(--aura-orb-mobile-scale)) !important;
    height: calc(680px * var(--aura-orb-mobile-scale)) !important;
  }
}

/* ═══ Noise overlay — DESACTIVE Phase 4 (Glass Unified, rendu macOS Sequoia plus epure)
   Peut etre reactive si rendu trop vide en virant le bloc commente ci-dessous.
   Le DOM <div class="aura-noise"> dans base.html reste en place (juste effet visuel neutralise).
*//*
.aura-noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.6;
}
*/

/* ═══ Liquid glass conic gradient rotation — DESACTIVE Phase 4 (Glass Unified)
   Le conic gradient violet/rose/bleu interferait avec les 3 orbes bleus uniformes.
   Le DOM <div class="aura-liquid"> dans base.html reste en place.
*//*
.aura-liquid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden;
}
.aura-liquid::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(168, 85, 247, 0.08) 60deg,
    transparent 120deg,
    rgba(236, 72, 153, 0.08) 180deg,
    transparent 240deg,
    rgba(96, 165, 250, 0.05) 300deg,
    transparent 360deg
  );
  animation: auraLiquid 40s linear infinite;
}
[data-theme="light"] .aura-liquid::before {
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(99, 102, 241, 0.03) 60deg,
    transparent 120deg,
    rgba(168, 85, 247, 0.03) 180deg,
    transparent 240deg,
    rgba(59, 130, 246, 0.03) 300deg,
    transparent 360deg
  );
}
@keyframes auraLiquid { to { transform: rotate(360deg); } }
*/

/* ═══ App container + content : above orbs */
.app-container, .main, #main-content, .content-frame, .sidebar, .topbar {
  position: relative;
  z-index: 2;
}
/* Fix : content-frame doit prendre la hauteur restante en flex */
.main > .content-frame {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

/* ═══ Content-frame : match sidebar/topbar glass + radius augmentés (haut ouvert) */
[data-theme="dark"] .content-frame {
  /* Strictement aligné sur la sidebar (auraos.css:601) */
  background: rgba(10, 10, 20, 0.28) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  border-bottom-left-radius: 28px !important;
  border-bottom-right-radius: 28px !important;
}
[data-theme="light"] .content-frame {
  background: rgba(255, 255, 255, 0.32) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border: 1px solid rgba(70,60,120,0.08) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top: none !important;
  border-bottom-left-radius: 28px !important;
  border-bottom-right-radius: 28px !important;
}
/* Sidebar + topbar + app-container : radius augmentés (high spec) */
html body .sidebar, html body nav.sidebar, html body #sidebar {
  border-radius: 28px !important;
}
html body .topbar, html body header.topbar, html body div.topbar {
  border-radius: 28px 28px 0 0 !important;
}
html body .app-container, html body div.app-container {
  border-radius: 28px !important;
}
/* Pas d'overlay content-frame si pas de wallpaper (moins strict) */
body:not(.has-bg-image) .content-frame {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ═══ GLASS PANEL — all card-like elements (high specificity via html prefix)
   Phase 4 Sub-step 2 : migration vers les nouveaux tokens --glass-* macOS Sequoia.
   Anciennes valeurs (rollback Phase 4) :
     dark : background transparent, border rgba(255,255,255,0.10), shadow 0 8px 32px rgba(0,0,0,0.25), blur 0.5px
     light : idem avec rgba(70,60,120,*)
   Nouveau Phase 4 : background var(--glass-bg) (0.55 alpha), blur 30px, shadow var(--glass-shadow).
*/
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-strato,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .chart-card-new,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .pd-panel-detail,
html[data-theme="dark"] .fl-panel,
html[data-theme="dark"] .panel-detail,
html[data-theme="dark"] .kpi-g .kpi,
html[data-theme="dark"] .g2 .card,
html[data-theme="dark"] .card-tresorerie,
html[data-theme="dark"] .card-revenue,
html[data-theme="dark"] .pd-kpi,
html[data-theme="dark"] .pd-client-infos,
html[data-theme="dark"] .compte-chip {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%);
  position: relative;
  overflow: hidden;
  transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.85s cubic-bezier(0.33, 1, 0.68, 1), background 0.7s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.7s cubic-bezier(0.33, 1, 0.68, 1), backdrop-filter 0.7s ease;
}
html[data-theme="light"] .card,
html[data-theme="light"] .card-strato,
html[data-theme="light"] .kpi,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .chart-card,
html[data-theme="light"] .chart-card-new,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .pd-panel-detail,
html[data-theme="light"] .fl-panel,
html[data-theme="light"] .panel-detail,
html[data-theme="light"] .kpi-g .kpi,
html[data-theme="light"] .g2 .card,
html[data-theme="light"] .compte-chip {
  background: var(--glass-bg) !important;
  border: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: var(--glass-blur) saturate(180%);
  -webkit-backdrop-filter: var(--glass-blur) saturate(180%);
  position: relative;
  overflow: hidden;
  transition: transform 0.85s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.85s cubic-bezier(0.33, 1, 0.68, 1), background 0.7s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.7s cubic-bezier(0.33, 1, 0.68, 1), backdrop-filter 0.7s ease;
}

/* Internal flare — radial top-left.
   Reflet tres subtil : on ne veut plus voir les defauts du degrade, juste
   une legere lueur diffuse dans le coin haut-gauche. */
.card::before,
.card-strato::before,
.kpi::before,
.kpi-card::before,
.chart-card-new::before,
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background: radial-gradient(600px circle at 0% 0%, rgba(255,255,255,0.025), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .card::before,
[data-theme="light"] .card-strato::before,
[data-theme="light"] .kpi::before,
[data-theme="light"] .kpi-card::before,
[data-theme="light"] .chart-card-new::before,
[data-theme="light"] .stat-card::before {
  background: radial-gradient(600px circle at 0% 0%, rgba(255,255,255,0.25), transparent 55%);
}
/* z-index lift pour content, sauf pseudo-elements decoratifs */
.card > *:not(.kpi-icon-3d):not(.kpi-watermark):not(.kpi-sh),
.card-strato > *:not(.kpi-icon-3d),
.kpi > *:not(.kpi-icon-3d):not(.kpi-watermark):not(.kpi-sh),
.kpi-card > *:not(.kpi-icon-3d):not(.kpi-watermark),
.chart-card-new > *,
.stat-card > * { z-index: 1; }
/* kpi-icon-3d reste en position absolue */
.kpi-icon-3d { z-index: 0 !important; }

/* Hover states : juste un contour tres fin et estompe dans la couleur d'accent
   du theme. Aucun lift, aucun glow, aucun changement de fond, aucune amplification
   du reflet (l'utilisateur veut une signaletique sobre, pas un effet "physique"). */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .card-strato:hover,
[data-theme="dark"] .kpi:hover,
[data-theme="dark"] .kpi-card:hover,
[data-theme="dark"] .chart-card:hover,
[data-theme="dark"] .chart-card-new:hover,
[data-theme="dark"] .stat-card:hover,
[data-theme="dark"] .pd-kpi:hover,
[data-theme="dark"] .pd-panel-detail:hover,
[data-theme="dark"] .fl-panel:hover,
[data-theme="dark"] .panel-detail:hover,
[data-theme="dark"] .card-tresorerie:hover,
[data-theme="dark"] .card-revenue:hover,
[data-theme="dark"] .kpi-g .kpi:hover,
[data-theme="dark"] .g2 .card:hover {
  border-color: rgba(var(--acc-rgb, 99,102,241), 0.35) !important;
  transform: none !important;
  box-shadow: var(--glass-shadow) !important;
  background: var(--glass-bg) !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .card-strato:hover,
[data-theme="light"] .kpi:hover,
[data-theme="light"] .kpi-card:hover,
[data-theme="light"] .chart-card:hover,
[data-theme="light"] .chart-card-new:hover,
[data-theme="light"] .stat-card:hover,
[data-theme="light"] .pd-kpi:hover,
[data-theme="light"] .pd-panel-detail:hover,
[data-theme="light"] .fl-panel:hover,
[data-theme="light"] .panel-detail:hover,
[data-theme="light"] .card-tresorerie:hover,
[data-theme="light"] .card-revenue:hover,
[data-theme="light"] .kpi-g .kpi:hover,
[data-theme="light"] .g2 .card:hover {
  border-color: rgba(var(--acc-rgb, 99,102,241), 0.30) !important;
  transform: none !important;
  box-shadow: var(--glass-shadow) !important;
  background: var(--glass-bg) !important;
}

/* Pas d'amplification du reflet au hover (cf. demande utilisateur). */
.card:hover::before,
.card-strato:hover::before,
.kpi:hover::before,
.kpi-card:hover::before,
.chart-card-new:hover::before,
.stat-card:hover::before { background: inherit; }

/* ═══ KPI card — hover lift plus doux, plus lent (style compta) */
.kpi-card {
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.9s ease, border-color 0.9s ease !important;
}

/* ═══ Card projets (liste) — aucun effet hover + fond transparent + compact */
#projects-list-view,
#projects-list-view:hover {
  transform: none !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(0.5px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(0.5px) saturate(180%) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
}
[data-theme="light"] #projects-list-view,
[data-theme="light"] #projects-list-view:hover {
  border: 1px solid rgba(70,60,120,0.12) !important;
  box-shadow: 0 8px 32px rgba(70,60,120,0.10) !important;
}
#projects-list-view::before,
#projects-list-view::after,
#projects-list-view:hover::before,
#projects-list-view:hover::after {
  display: none !important;
  content: none !important;
}
/* Compactage pour éviter le scroll de page + fond transparent.
   Padding 0 lateral pour que le tableau aille jusqu'aux bords (gauche/droite)
   de #projects-list-view. */
#projects-list-view {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#projects-list-view > .card-body {
  padding: 8px 0 12px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Detail projet : card-body avec meme transparence que le header
   (sinon body rgba(255,255,255,0.05) + blur 30px contraste avec header
   transparent). */
.project-hero .card > .card-body {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#projects-list-view .project-section {
  margin-bottom: 4px !important;
}
#projects-list-view .project-section-header {
  padding: 5px 10px !important;
  margin-bottom: 2px !important;
}

/* ═══ KPI card — effet vitrage (reflet lumineux diagonal + sheen du haut) */
.kpi-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  /* Bande lumineuse top tres fine + streak diagonal extremement discret.
     Plus de bandes visibles avec defauts de degrade : opacite divisee /3. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 8%),
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.04) 50%, transparent 60%);
  opacity: 0.45;
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-theme="dark"] .kpi-card::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 8%),
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.025) 50%, transparent 60%);
  opacity: 0.5;
}
/* Pas d'amplification au hover (cf. demande utilisateur : juste contour fin) */
.kpi-card:hover::after { opacity: inherit; }

/* ═══ Rounded corners — plus arrondi pour aspect glass moderne */
.card, .card-strato, .kpi, .kpi-card, .chart-card, .chart-card-new, .stat-card {
  border-radius: 28px !important;
}
.fl-panel { border-radius: 24px !important; }
/* Phase 4 : radius boutons aligne sur pattern badge-statut (3px).
   Ancien (rollback Phase 4) : border-radius: 14px !important; */
.btn, .btn-primary-strato, .btn-primary, .btn.btn-primary,
.btn-secondary-strato, .btn-danger-strato { border-radius: 3px !important; }
.input-strato, .select-strato, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"], select, textarea {
  border-radius: 14px !important;
}

/* ═══ Projet detail (pd-*) : gap + radius sur chaque KPI et bloc */
.pd-kpis {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 14px !important;
  border: none !important;
  overflow: visible !important;
  margin-bottom: 14px !important;
  background: transparent !important;
}
.pd-kpi {
  border: none !important;
  border-radius: 22px !important;
  padding: 18px 20px !important;
  position: relative;
  overflow: hidden;
  /* Pas d'ombre, pas de fond — surfaces purement informationnelles,
     les KPIs s'intègrent au panel sans encadrement ni élévation. */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .pd-kpi,
html[data-theme="light"] .pd-kpi {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.pd-kpi:last-child {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Client infos + autres blocs pd- : radius + margin */
.pd-client-infos,
.pd-head,
.pd-timeline,
.pd-avancement,
.pd-doc-panel {
  border-radius: 22px !important;
  margin-bottom: 14px !important;
}
/* User : retrait du fond glass sur pd-client-infos (cohérent avec les
   pd-kpi nus) — surface purement informationnelle, intégrée au panel
   sans encadrement. Override de la règle globale auraos.css ligne 213. */
.pd-client-infos,
html[data-theme="dark"] .pd-client-infos,
html[data-theme="light"] .pd-client-infos {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.pd-doc-tabs { border-radius: 14px !important; }
.tl-evt { border-radius: 100px !important; }

/* Cellule KPI fusionnee "A encaisser" qui occupe 2 colonnes et affiche
   les valeurs TTC + HT cote a cote sur une meme ligne. */
.pd-kpi--span2 { grid-column: span 2 !important; }
.pd-kpi-value--dual {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.pd-kpi-value--dual .pd-kpi-unit {
  font-style: normal;
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-left: 3px;
  text-transform: uppercase;
}
.pd-kpi-value--dual .pd-kpi-sep {
  opacity: 0.35;
  font-weight: 400;
}

/* Responsive : 7 KPIs sur une ligne en mode large.
   En mode panneau detail ouvert (fl--facture) : 7 cols compactes,
   gap reduit + padding KPI reduit pour rentrer dans la largeur
   reduite du panneau central. */
.fl--facture .pd-kpis {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.fl--facture .pd-kpi { padding: 12px 10px !important; }
.fl--facture .pd-kpi-label { font-size: 9px !important; }
.fl--facture .pd-kpi-value { font-size: 13px !important; }
@media (max-width: 1400px) {
  .pd-kpis { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; gap: 8px !important; }
  .pd-kpi { padding: 10px 8px !important; }
  .pd-kpi-label { font-size: 9px !important; }
  .pd-kpi-value { font-size: 12px !important; }
}
@media (max-width: 1000px) {
  .pd-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  .pd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}

/* ═══ Typography : Space Grotesk headings + Space Mono body */
body, .sidebar, .topbar, input, select, textarea, button, .btn {
  font-family: var(--f) !important;
}
h1, h2, h3, h4, h5, h6,
.page-title, .welcome-title, .kpi-val, .kpi-value, .kpi-card-value,
.pd-kpi-val, .pd-kpi-value, .stat-value, .card__amount, .font-display {
  font-family: var(--fd) !important;
  letter-spacing: -0.01em;
}

/* ═══ Buttons primary : gradient accent */
[data-theme="dark"] .btn-primary-strato,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn.btn-primary,
[data-theme="light"] .btn-primary-strato,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn.btn-primary {
  background: var(--acc-grad) !important;
  background-size: 200% 200% !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #fff !important;
  /* glow accent retiré — on garde uniquement le highlight inset */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-primary-strato:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  /* glow accent au hover retiré */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* ═══ Gradient text for headings (optional) */
.gradient-text, .hero__title span:nth-child(2) {
  background: var(--acc-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ═══ Sidebar : darker glass */
[data-theme="dark"] .sidebar {
  background: rgba(10, 10, 20, 0.28) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .sidebar {
  background: rgba(255,255,255,0.32) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-right: 1px solid rgba(70,60,120,0.08) !important;
}

/* ═══ Topbar : glass */
[data-theme="dark"] .topbar {
  background: rgba(10, 10, 20, 0.22) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
[data-theme="light"] .topbar {
  background: rgba(255,255,255,0.32) !important;
  backdrop-filter: blur(14px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
  border-bottom: 1px solid rgba(70,60,120,0.08) !important;
}

/* ═══ Inputs : glass-inset */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .input-strato,
[data-theme="dark"] .select-strato {
  background: rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.3) !important;
  color: #fff !important;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .input-strato:focus,
[data-theme="dark"] .select-strato:focus {
  border-color: rgba(var(--acc-rgb, 99,102,241), 0.5) !important;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.3),
    0 0 0 3px rgba(var(--acc-rgb, 99,102,241), 0.12),
    0 0 20px rgba(var(--acc-rgb, 99,102,241), 0.15) !important;
}

/* ═══ Scrollbars */
[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ═══ Selection */
::selection { background: #a855f7; color: #fff; }

/* ═══ Timeline event buttons : glass transparent */
html .tl-evt {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 0 rgba(255,255,255,0.12),
    inset 1px 0 0 0 rgba(255,255,255,0.03) !important;
}
html[data-theme="light"] .tl-evt {
  background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.4) 100%) !important;
  border: 1px solid rgba(70,60,120,0.1) !important;
  box-shadow:
    0 8px 24px rgba(70,60,120,0.1),
    inset 0 1px 0 0 rgba(255,255,255,0.9) !important;
}
html .tl-evt:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%) !important;
  border-color: rgba(255,255,255,0.15) !important;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.3),
    0 0 30px rgba(var(--acc-rgb, 99,102,241),0.15),
    inset 0 1px 0 0 rgba(255,255,255,0.18) !important;
}
html[data-theme="light"] .tl-evt:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%) !important;
}
/* Icone interne : juste backdrop blur, pas de glow */
.tl-evt-ico {
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ═══ Floating arrow button : plus glass transparent */
.fl-expand-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-left: none !important;
  box-shadow:
    4px 0 20px rgba(0,0,0,0.3),
    inset 0 1px 0 0 rgba(255,255,255,0.15) !important;
}
html[data-theme="light"] .fl-expand-btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 100%) !important;
  border: 1px solid rgba(70,60,120,0.1) !important;
  border-left: none !important;
  box-shadow:
    4px 0 16px rgba(70,60,120,0.08),
    inset 0 1px 0 0 rgba(255,255,255,0.9) !important;
}
.fl-expand-btn:hover {
  background: linear-gradient(135deg, rgba(var(--acc-rgb, 99,102,241),0.2) 0%, rgba(var(--acc-rgb, 99,102,241),0.08) 100%) !important;
  border-color: rgba(var(--acc-rgb, 99,102,241),0.3) !important;
  box-shadow:
    4px 0 24px rgba(var(--acc-rgb, 99,102,241),0.3),
    inset 0 1px 0 0 rgba(255,255,255,0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BLUR-IN ANIMATION — apparition des textes (focusing effect)
   ═══════════════════════════════════════════════════════════════ */
@keyframes blurIn {
  from { filter: blur(12px); opacity: 0; transform: scale(1.1); }
  to { filter: blur(0); opacity: 1; transform: scale(1); }
}
@keyframes blurInSoft {
  from { filter: blur(8px); opacity: 0; transform: translateY(6px); }
  to { filter: blur(0); opacity: 1; transform: translateY(0); }
}

/* Per-char (staggered via JS) */
.blur-char {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  animation: blurIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Auto per-element blur-in : titres, valeurs KPI, texte principal */
h1, h2, h3,
.page-title, .welcome-title, .page-header h1,
.kpi-val, .kpi-value, .pd-kpi-val, .pd-kpi-value,
.card__amount, .stat-value, .big-number,
.fl-panel-title, .pd-head-name, .pd-tl-title {
  animation: blurInSoft 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger automatique sur les KPI en grille */
.kpi-g .kpi:nth-child(1), .kpi-grid > *:nth-child(1) { animation-delay: 0.05s; }
.kpi-g .kpi:nth-child(2), .kpi-grid > *:nth-child(2) { animation-delay: 0.10s; }
.kpi-g .kpi:nth-child(3), .kpi-grid > *:nth-child(3) { animation-delay: 0.15s; }
.kpi-g .kpi:nth-child(4), .kpi-grid > *:nth-child(4) { animation-delay: 0.20s; }
.kpi-g .kpi:nth-child(5), .kpi-grid > *:nth-child(5) { animation-delay: 0.25s; }
.kpi-g .kpi:nth-child(n+6), .kpi-grid > *:nth-child(n+6) { animation-delay: 0.30s; }

.kpi-g .kpi, .kpi-grid > * {
  animation: blurInSoft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Utility : appliquer manuellement */
.blur-in { animation: blurInSoft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.blur-in-strong { animation: blurIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blur-char, .blur-in, .blur-in-strong,
  h1, h2, h3, .kpi-val, .kpi-value, .kpi-g .kpi, .kpi-grid > * {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 4 — Boutons utilitaires sur pattern badge-statut macOS Sequoia
   Catch-all pour les boutons specifiques pas couverts ailleurs.
   Pattern : alpha 0.10-0.18 + couleur pleine + radius 3px + border 1px subtile.
   ═══════════════════════════════════════════════════════════════ */

/* .btn-success-strato (vert) */
.btn-success-strato {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
  border: 1px solid rgba(16, 185, 129, 0.30);
  border-radius: 3px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.btn-success-strato:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.40);
  color: #10B981;
  filter: brightness(0.95);
}

/* .btn-facture (accent, comme primary) */
.btn-facture, .btn-getstarted, .btn-personnaliser-dash, .btn-layout-save {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: rgba(var(--acc-rgb), 0.18);
  color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb), 0.30);
  border-radius: 3px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.btn-facture:hover, .btn-getstarted:hover,
.btn-personnaliser-dash:hover, .btn-layout-save:hover {
  background: rgba(var(--acc-rgb), 0.25);
  border-color: rgba(var(--acc-rgb), 0.40);
  color: var(--acc);
  filter: brightness(0.95);
}

/* .btn-layout-cancel, .btn-ghost, .btn-icon-text (neutres gris) */
.btn-layout-cancel, .btn-ghost, .btn-icon-text {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  background: rgba(148, 163, 184, 0.10);
  color: var(--t2);
  border: 1px solid rgba(148, 163, 184, 0.20);
  border-radius: 3px;
  font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}
.btn-layout-cancel:hover, .btn-ghost:hover, .btn-icon-text:hover {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.30);
  color: var(--t1);
  filter: brightness(0.95);
}

/* .btn-stop (rouge — arret timer) */
.btn-stop, .timer-banner .btn-stop {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
  border: 1px solid rgba(239, 68, 68, 0.30);
  border-radius: 3px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 500;
  transition: all 0.2s ease;
}
.btn-stop:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.40);
  filter: brightness(0.95);
}