/* =========================================================================
   Framewark — Design System utilities
   Palette "Profondeur Nocturne" + "Jalons de Clarté"
   Client  : vert #0B3327  (--fw-primary-800 par défaut)
   Freelance : violet #3E183C (appliqué via body.theme-freelance)
   Accent bright lime #CCFC8A conservé pour les CTA dans les deux thèmes
   Typo : Work Sans (headings) · Inter (body)
   ========================================================================= */

/* ----------------------- Variables de thème (rôle) ------------------------ */

:root,
body.theme-client {
  /* Palette VERTE (client) — base #0B3327 */
  --fw-primary-50:  232 243 238;
  --fw-primary-100: 195 222 211;
  --fw-primary-200: 149 195 177;
  --fw-primary-300:  96 164 137;
  --fw-primary-400:  52 134 105;
  --fw-primary-500:  16 103  79;
  --fw-primary-600:   8  80  61;
  --fw-primary-700:   6  74  55;
  --fw-primary-800:  11  51  39;  /* #0B3327 */
  --fw-primary-900:   7  35  24;
  --fw-primary-950:   3  21  14;

  /* Teintes dérivées pour helpers CSS (glow, ombres, bg surfaces sombres) */
  --fw-primary-rgb-800: 11, 51, 39;
  --fw-primary-rgb-900: 7, 35, 24;
  --fw-primary-hex-800: #0B3327;
  --fw-primary-hex-900: #072318;
  --fw-primary-hex-surface-dark: #0d3226; /* surface carte en dark */
}

body.theme-freelance {
  /* Palette VIOLETTE (freelance) — base #3E183C */
  --fw-primary-50:  248 236 245;
  --fw-primary-100: 236 204 229;
  --fw-primary-200: 216 160 205;
  --fw-primary-300: 192 113 174;
  --fw-primary-400: 158  72 135;
  --fw-primary-500: 125  48 105;
  --fw-primary-600:  94  32  79;
  --fw-primary-700:  76  27  64;
  --fw-primary-800:  62  24  60;  /* #3E183C */
  --fw-primary-900:  42  15  40;
  --fw-primary-950:  24   7  21;

  --fw-primary-rgb-800: 62, 24, 60;
  --fw-primary-rgb-900: 42, 15, 40;
  --fw-primary-hex-800: #3E183C;
  --fw-primary-hex-900: #2a0f28;
  --fw-primary-hex-surface-dark: #3a1638;
}

/* ------------------------- Typographie fondamentale ------------------------ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
}

h1, h2, h3, h4, h5, h6,
.fw-heading {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.fw-display {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.03em;
  font-weight: 700;
  line-height: 1.05;
}

.fw-eyebrow {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6875rem;
}

/* ------------------------------ Scrollbars -------------------------------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--fw-primary-800) / 0.15);
  border-radius: 999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(204, 252, 138, 0.18);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(204, 252, 138, 0.45);
}

/* ----------------------------- Transitions -------------------------------- */

.smooth-transition {
  transition: all 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-lift { transition: transform 200ms ease, box-shadow 200ms ease; }
.hover-lift:hover { transform: translateY(-2px); }
.hover-scale { transition: transform 200ms ease; }
.hover-scale:hover { transform: scale(1.04); }

/* ============================= Composants Framewark ======================= */

/* -------- Cartes -------- */
.fw-card {
  background-color: #ffffff;
  border: 1px solid rgba(6, 47, 72, 0.10);
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(6, 47, 72, 0.05), 0 4px 14px -4px rgb(var(--fw-primary-800) / 0.08);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.dark .fw-card {
  background-color: var(--fw-primary-hex-surface-dark);
  border-color: rgba(204, 252, 138, 0.14);
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.fw-card:hover {
  border-color: rgba(204, 252, 138, 0.35);
  box-shadow: 0 2px 4px 0 rgba(6, 47, 72, 0.06), 0 10px 24px -6px rgb(var(--fw-primary-800) / 0.12);
}
.dark .fw-card:hover {
  border-color: rgba(204, 252, 138, 0.28);
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.fw-card-elev {
  box-shadow: 0 10px 25px -5px rgba(6, 47, 72, 0.14), 0 8px 10px -6px rgb(var(--fw-primary-800) / 0.10);
}
.dark .fw-card-elev {
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.65);
}

/* -------- Sub-card (cartes internes dans un panel/card) -------- */
.fw-subcard {
  background-color: #ffffff;
  border: 1px solid rgba(6, 47, 72, 0.10);
  border-radius: 0.85rem;
  box-shadow: 0 1px 2px 0 rgba(6, 47, 72, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.dark .fw-subcard {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.fw-subcard:hover {
  border-color: rgb(var(--fw-primary-800) / 0.22);
  box-shadow: 0 4px 10px -2px rgba(6, 47, 72, 0.08);
}
.dark .fw-subcard:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(204, 252, 138, 0.22);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4);
}
.fw-subcard--accent {
  border-left: 3px solid rgb(var(--fw-primary-800));
}
.dark .fw-subcard--accent {
  border-left-color: #CCFC8A;
}

/* -------- Sous-navigation (segments) — harmonise les onglets projet -------- */
.fw-segment {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  max-width: 100%;
  padding: 0.125rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(6, 47, 72, 0.1);
  background: linear-gradient(180deg, rgba(6, 47, 72, 0.04), rgba(6, 47, 72, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dark .fw-segment {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* -------- Glassmorphism "nocturne" -------- */
.fw-glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  border: 1px solid rgba(6, 47, 72, 0.08);
}
.dark .fw-glass {
  background: rgb(var(--fw-primary-800) / 0.55);
  border-color: rgba(204, 252, 138, 0.12);
}

.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dark .glass {
  background: rgb(var(--fw-primary-800) / 0.6);
}

/* -------- Boutons -------- */
.fw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: 0.75rem;
  padding: 0.625rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition: all 180ms cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.fw-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.fw-btn-primary {
  background: #CCFC8A;
  color: rgb(var(--fw-primary-800));
  box-shadow: 0 6px 16px -4px rgba(204, 252, 138, 0.45);
}
.fw-btn-primary:hover { background: #d9ff9b; transform: translateY(-1px); }
.fw-btn-primary:active { transform: translateY(0); }

.fw-btn-secondary {
  background: #ffffff;
  color: #014751;
  border-color: rgba(6, 47, 72, 0.15);
}
.dark .fw-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #c7ffff;
  border-color: rgba(204, 252, 138, 0.25);
}
.fw-btn-secondary:hover { border-color: rgba(204, 252, 138, 0.6); color: #014751; }
.dark .fw-btn-secondary:hover { color: #ffffff; background: rgba(204, 252, 138, 0.08); }

.fw-btn-ghost {
  background: transparent;
  color: #014751;
}
.dark .fw-btn-ghost { color: #c7ffff; }
.fw-btn-ghost:hover { background: rgba(6, 47, 72, 0.05); }
.dark .fw-btn-ghost:hover { background: rgba(204, 252, 138, 0.08); }

.fw-btn-danger {
  background: #dc2626;
  color: #ffffff;
}
.fw-btn-danger:hover { background: #b91c1c; }

/* -------- Inputs -------- */
.fw-input,
.fw-textarea,
.fw-select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid rgba(6, 47, 72, 0.15);
  border-radius: 0.75rem;
  padding: 0.625rem 0.875rem;
  color: rgb(var(--fw-primary-800));
  font-size: 0.875rem;
  line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.fw-input::placeholder,
.fw-textarea::placeholder { color: rgb(var(--fw-primary-800) / 0.45); }
.fw-input:focus,
.fw-textarea:focus,
.fw-select:focus {
  outline: none;
  border-color: #CCFC8A;
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.22);
}
.dark .fw-input,
.dark .fw-textarea,
.dark .fw-select {
  background-color: rgb(var(--fw-primary-800) / 0.7);
  border-color: rgba(204, 252, 138, 0.18);
  color: #f5f5f5;
}
.dark .fw-input::placeholder,
.dark .fw-textarea::placeholder { color: rgba(255, 255, 255, 0.45); }
.dark .fw-input:focus,
.dark .fw-textarea:focus,
.dark .fw-select:focus {
  border-color: #CCFC8A;
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.2);
}

/* -------- Chips / Badges -------- */
.fw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.625rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: 'Work Sans', sans-serif;
  letter-spacing: 0.02em;
}
.fw-chip-accent { background: rgba(204, 252, 138, 0.15); color: #014751; }
.dark .fw-chip-accent { color: #e8ffb6; background: rgba(204, 252, 138, 0.18); }
.fw-chip-neutral { background: rgb(var(--fw-primary-800) / 0.06); color: #262626; }
.dark .fw-chip-neutral { background: rgba(255, 255, 255, 0.06); color: #e5e5e5; }

/* -------- Ring focus cohérent -------- */
.fw-focus-ring:focus-visible {
  outline: none;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.35);
}

/* ------------------------ Anciennes classes (compat) ---------------------- */

.text-contrast-high { color: rgb(var(--fw-primary-800)); }
.dark .text-contrast-high { color: #f5f5f5; }
.text-contrast-medium { color: #3f3f3f; }
.dark .text-contrast-medium { color: #d4d4d4; }
.text-contrast-low { color: #6b7280; }
.dark .text-contrast-low { color: #a3a3a3; }
.text-muted { color: #9ca3af; }
.dark .text-muted { color: #737373; }

.bg-card { background-color: #ffffff; }
.dark .bg-card { background-color: var(--fw-primary-hex-surface-dark); }
.bg-card-secondary { background-color: #f9fafb; }
.dark .bg-card-secondary { background-color: #212121; }

.border-card { border-color: rgba(6, 47, 72, 0.1); }
.dark .border-card { border-color: rgba(204, 252, 138, 0.12); }

.hover-card:hover { background-color: #f9fafb; }
.dark .hover-card:hover { background-color: #262626; }

.menu-item { color: #3f3f3f; }
.dark .menu-item { color: #d4d4d4; }
.menu-item:hover { background-color: #f3f4f6; color: #014751; }
.dark .menu-item:hover { background-color: rgba(204, 252, 138, 0.08); color: #ffffff; }
.menu-item-active { background-color: rgba(204, 252, 138, 0.12); color: #014751; }
.dark .menu-item-active { background-color: rgba(204, 252, 138, 0.15); color: #ffffff; }

.form-input {
  background-color: #ffffff;
  border-color: rgba(6, 47, 72, 0.15);
  color: rgb(var(--fw-primary-800));
}
.dark .form-input {
  background-color: rgb(var(--fw-primary-800) / 0.7);
  border-color: rgba(204, 252, 138, 0.2);
  color: #f5f5f5;
}
.form-input::placeholder { color: rgb(var(--fw-primary-800) / 0.45); opacity: 1; }
.dark .form-input::placeholder { color: rgba(255, 255, 255, 0.45); opacity: 1; }

.btn-primary {
  background: #CCFC8A;
  color: rgb(var(--fw-primary-800));
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.2s;
  font-family: 'Work Sans', sans-serif;
}
.btn-primary:hover { background: #d9ff9b; transform: translateY(-1px); }
.dark .btn-primary { background: #CCFC8A; color: rgb(var(--fw-primary-800)); }
.dark .btn-primary:hover { background: #e8ffb6; }

/* ---------------------- Pattern décoratif (logo-like) --------------------- */

.fw-mountain-bg {
  position: relative;
  overflow: hidden;
}
.fw-mountain-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(at 20% 10%, rgba(204, 252, 138, 0.18) 0%, transparent 45%),
    radial-gradient(at 85% 75%, rgba(1, 71, 81, 0.35) 0%, transparent 50%),
    radial-gradient(at 50% 50%, rgba(6, 47, 72, 0.35) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.fw-mountain-bg > * { position: relative; z-index: 1; }

.fw-grid-pattern {
  background-image:
    linear-gradient(rgba(204, 252, 138, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 252, 138, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ------------------------- Bannière nocturne (header pages) --------------- */

.fw-banner {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(800px 260px at 85% -20%, rgba(204, 252, 138, 0.16), transparent 60%),
    radial-gradient(520px 240px at 8% 120%, rgba(1, 71, 81, 0.32), transparent 60%),
    linear-gradient(135deg, rgb(var(--fw-primary-950)) 0%, rgb(var(--fw-primary-800)) 45%, rgb(var(--fw-primary-800)) 120%);
  color: #f5f5f5;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.45);
}
.fw-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.3;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 35%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 35%, transparent 100%);
}
.fw-banner > * { position: relative; z-index: 1; }
.fw-banner__orb {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}
.fw-banner__orb--a { top: -70px; right: -30px; background: rgba(204, 252, 138, 0.45); }
.fw-banner__orb--b { bottom: -90px; left: 8%; background: rgba(199, 255, 255, 0.12); }

.fw-banner__eyebrow {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #CCFC8A;
  margin-bottom: 0.4rem;
}
.fw-banner__title {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #ffffff;
}
.fw-banner__subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.35rem;
  max-width: 56rem;
}
.fw-banner__accent { color: #CCFC8A; }

.fw-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
  backdrop-filter: blur(8px);
}
.fw-banner__btn:hover {
  border-color: rgba(204, 252, 138, 0.6);
  color: #CCFC8A;
}
.fw-banner__btn--primary {
  background: #CCFC8A;
  border-color: transparent;
  color: rgb(var(--fw-primary-800));
  box-shadow: 0 6px 20px -6px rgba(204, 252, 138, 0.55);
}
.fw-banner__btn--primary:hover {
  background: #d9ff9b;
  color: rgb(var(--fw-primary-800));
}

/* ------------------------ KPI & Panels (dashboard + listes) --------------- */

.fw-kpi {
  position: relative;
  border-radius: 1rem;
  border: 1px solid rgba(6, 47, 72, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  padding: 1rem 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden;
}
.fw-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(204, 252, 138, 0.4);
  box-shadow: 0 10px 28px rgba(6, 47, 72, 0.08);
}
.dark .fw-kpi {
  background: linear-gradient(180deg, rgb(var(--fw-primary-800) / 0.75) 0%, rgb(var(--fw-primary-800) / 0.55) 100%);
  border-color: rgba(255, 255, 255, 0.06);
}
.dark .fw-kpi:hover { border-color: rgba(204, 252, 138, 0.4); }

.fw-kpi__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: #4b5563;
}
.dark .fw-kpi__label { color: rgba(229, 231, 235, 0.75); }

.fw-kpi__value {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgb(var(--fw-primary-800));
}
.dark .fw-kpi__value { color: #f5f5f5; }

.fw-kpi__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.fw-kpi__trend {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  letter-spacing: 0.01em;
}
.fw-kpi__trend--up {
  background: rgb(var(--fw-primary-800) / 0.08);
  color: rgb(var(--fw-primary-800));
  border: 1px solid rgb(var(--fw-primary-800) / 0.18);
}
.dark .fw-kpi__trend--up {
  background: rgba(204, 252, 138, 0.12);
  color: #CCFC8A;
  border-color: rgba(204, 252, 138, 0.3);
}
.fw-kpi__trend--warn {
  background: rgba(251, 191, 36, 0.16);
  color: #78350f;
  border: 1px solid rgba(251, 191, 36, 0.35);
}
.dark .fw-kpi__trend--warn {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.3);
}
.fw-kpi__trend--down {
  background: rgba(239, 68, 68, 0.12);
  color: #7f1d1d;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.dark .fw-kpi__trend--down { color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); }

/* Variante compacte (dashboard freelance / vue projet) */
.fw-kpi.fw-kpi--sm {
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
}
.fw-kpi.fw-kpi--sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(6, 47, 72, 0.06);
}
.fw-kpi.fw-kpi--sm .fw-kpi__label {
  font-size: 0.58rem;
  letter-spacing: 0.07em;
}
.fw-kpi.fw-kpi--sm .fw-kpi__value {
  font-size: 1.35rem;
  margin-top: 0.125rem;
}
.fw-kpi.fw-kpi--sm .fw-kpi__icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.55rem;
  font-size: 0.95rem;
}
.fw-kpi.fw-kpi--sm .fw-kpi__trend {
  font-size: 0.58rem;
  padding: 0.1rem 0.4rem;
  gap: 0.15rem;
}

/* Liens <a> en carte KPI (fiche projet) : focus = anneau lime, pas l’anneau Tailwind par défaut (bleu) */
a.fw-kpi {
  -webkit-tap-highlight-color: transparent;
}
a.fw-kpi:focus {
  outline: none;
}
a.fw-kpi:focus-visible {
  outline: none;
  /* Annule toute ombre d’anneau héritée (variable --tw-ring-color = bleu par défaut) */
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.4);
}
.dark a.fw-kpi:focus-visible {
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.5);
}
a.fw-kpi.fw-kpi--sm:hover:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.4), 0 6px 16px rgba(6, 47, 72, 0.06);
}
a.fw-kpi:hover:focus-visible:not(.fw-kpi--sm) {
  transform: translateY(-2px);
  border-color: rgba(204, 252, 138, 0.4);
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.4), 0 10px 28px rgba(6, 47, 72, 0.08);
}

/* Même échelle que .fw-kpi.fw-kpi--sm .fw-kpi__value (1.35rem) — hors carte (bento projet, graphiques) */
.fw-kpi-num {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: rgb(var(--fw-primary-800));
}
.dark .fw-kpi-num { color: #f5f5f5; }

/* Hero nocturne (dashboard, liste / fiche projet) — mêmes marges intérieures partout */
.fw-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(800px 280px at 85% -20%, rgba(204, 252, 138, 0.18), transparent 60%),
    radial-gradient(600px 260px at 10% 110%, rgba(1, 71, 81, 0.35), transparent 60%),
    linear-gradient(135deg, rgb(var(--fw-primary-950)) 0%, rgb(var(--fw-primary-800)) 50%, #062f48 140%);
  color: #f5f5f5;
  padding: 1rem 1.2rem;
}
.fw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 40%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 40%, transparent 100%);
}
.fw-hero-orb {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
}
.fw-hero-orb--a {
  top: -80px;
  right: -40px;
  background: rgba(204, 252, 138, 0.5);
}
.fw-hero-orb--b {
  bottom: -120px;
  left: 10%;
  background: rgba(199, 255, 255, 0.15);
}
.fw-hero.fw-hero--compact {
  padding: 0.75rem 1rem;
  border-radius: 0.9rem;
}
.fw-hero.fw-hero--compact .fw-hero-orb {
  width: 200px;
  height: 200px;
  opacity: 0.38;
}

/* Lignes échéances (listes compactes) */
.deadline-row {
  transition: background-color 0.18s ease;
}
.deadline-row:hover {
  background: rgba(204, 252, 138, 0.06);
}
.dark .deadline-row:hover {
  background: rgba(204, 252, 138, 0.1);
}
.deadline-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.15);
}

/* Bandeau synthèse léger (vue projet, pas de hero plein écran) */
.hero-strip {
  background: linear-gradient(
    120deg,
    rgba(204, 252, 138, 0.08) 0%,
    rgba(6, 47, 72, 0.02) 50%,
    transparent 100%
  );
  border: 1px solid rgba(6, 47, 72, 0.06);
  border-radius: 0.85rem;
}
.dark .hero-strip {
  background: linear-gradient(
    120deg,
    rgba(204, 252, 138, 0.08) 0%,
    rgba(199, 255, 255, 0.02) 50%,
    transparent 100%
  );
  border-color: rgba(199, 255, 255, 0.08);
}

/* Grille 4 métriques dense (vue projet — évite une colonne par carte sur certains viewports) */
.proj-overview-grid-4 {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 520px) {
  .proj-overview-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Cartes dashboard (alignement DA core/dashboard.html) */
.dashboard-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
  border: 1px solid rgba(6, 47, 72, 0.08);
  box-shadow: 0 1px 3px rgba(6, 47, 72, 0.06);
}
.dark .dashboard-card {
  background: linear-gradient(135deg, rgba(55, 65, 81, 0.95) 0%, rgba(31, 41, 55, 0.98) 100%);
  border: 1px solid rgba(199, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.chart-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
  border: 1px solid rgba(6, 47, 72, 0.1);
  box-shadow: 0 2px 8px rgba(6, 47, 72, 0.06);
}
.dark .chart-card {
  background: linear-gradient(180deg, rgba(55, 65, 81, 0.98) 0%, rgba(31, 41, 55, 0.95) 100%);
  border: 1px solid rgba(199, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.dashboard-kpi {
  padding: 0.35rem 0.5rem;
  border-left: 2px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-kpi:hover {
  border-left-color: #ccfc8a;
}
.dashboard-kpi-value {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.fw-panel {
  border-radius: 1rem;
  border: 1px solid rgba(6, 47, 72, 0.10);
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 1px 2px 0 rgba(6, 47, 72, 0.05), 0 4px 14px -4px rgb(var(--fw-primary-800) / 0.08);
}
.dark .fw-panel {
  background: var(--fw-primary-hex-surface-dark);
  border-color: rgba(204, 252, 138, 0.14);
  box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
a.fw-panel:focus,
a.chart-card:focus {
  outline: none;
}
a.fw-panel:focus-visible,
a.chart-card:focus-visible {
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.4), 0 1px 2px 0 rgba(6, 47, 72, 0.05), 0 4px 14px -4px rgb(var(--fw-primary-800) / 0.08);
}
.dark a.fw-panel:focus-visible {
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.48), 0 4px 14px 0 rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
a.chart-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.4), 0 2px 8px rgba(6, 47, 72, 0.06);
}
.dark a.chart-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(204, 252, 138, 0.48), 0 4px 16px rgba(0, 0, 0, 0.4);
}
.fw-panel__head {
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid rgba(6, 47, 72, 0.08);
  background: linear-gradient(180deg, rgba(6, 47, 72, 0.015), transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dark .fw-panel__head {
  border-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
}
.fw-panel__title {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  color: rgb(var(--fw-primary-800));
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.dark .fw-panel__title { color: #f5f5f5; }

/* ----------------------------- Selection ---------------------------------- */

::selection {
  background: rgba(204, 252, 138, 0.35);
  color: rgb(var(--fw-primary-800));
}
.dark ::selection {
  background: rgba(204, 252, 138, 0.35);
  color: #ffffff;
}