/*!
 * Voilà par Fast4u — Design Tokens officiels
 * Version : v002.000.000
 * Statut : Référence de production
 * Règle : WCAG 2.2 AA minimum sur tous les textes, contrôles et états
 */

:root {
  /* Marque */
  --v-brand-violet: #593BFF;
  --v-brand-violet-glow: #795CFF;
  --v-brand-lavender: #9686FF;
  --v-brand-blue: #295FFF;
  --v-brand-turquoise: #13BFA9;
  --v-primary-hover: #482CE5;

  /* Typographie */
  --v-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --v-font-display: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans", sans-serif;
  --v-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;

  /* Rayons */
  --v-radius-xs: 8px;
  --v-radius-sm: 10px;
  --v-radius-md: 14px;
  --v-radius-lg: 18px;
  --v-radius-xl: 24px;
  --v-radius-pill: 999px;

  /* Espacements */
  --v-space-1: 4px;
  --v-space-2: 8px;
  --v-space-3: 12px;
  --v-space-4: 16px;
  --v-space-5: 20px;
  --v-space-6: 24px;
  --v-space-7: 32px;
  --v-space-8: 40px;
  --v-space-9: 48px;
  --v-space-10: 64px;

  /* Dimensions */
  --v-sidebar-width: 268px;
  --v-header-height: 68px;
  --v-control-height: 42px;
  --v-control-height-sm: 36px;
  --v-control-height-lg: 48px;
  --v-container-max: 1440px;

  /* Transitions */
  --v-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --v-duration-fast: 140ms;
  --v-duration-normal: 220ms;
}

/* ==========================================================================
   THÈME CLAIR — HAUTE LISIBILITÉ
   ========================================================================== */
:root,
[data-theme="light"],
[data-surface="light"] {
  color-scheme: light;

  --v-bg: #F6F8FC;
  --v-sidebar: #FFFFFF;
  --v-header: #FFFFFF;
  --v-surface: #FFFFFF;
  --v-surface-alt: #EDF1F8;
  --v-input: #FFFFFF;
  --v-footer: #FFFFFF;

  --v-text: #111827;
  --v-text-secondary: #3E4A60;
  --v-text-muted: #56667D;

  --v-border: #D4DCEB;
  --v-border-strong: #7585A0;

  --v-primary: #593BFF;
  --v-on-primary: #FFFFFF;

  --v-link: #4324B5;
  --v-link-hover: #30168B;
  --v-focus: #5435E4;

  --v-hover: #F0EDFF;
  --v-active-bg: #EAE4FF;
  --v-active-text: #3C1EA9;

  --v-success: #086A4E;
  --v-success-bg: #E1F7EE;
  --v-warning: #7A4600;
  --v-warning-bg: #FFF0D5;
  --v-danger: #A40F3B;
  --v-danger-bg: #FFE8EE;
  --v-info: #1B4C9E;
  --v-info-bg: #E7F1FF;

  --v-chart-grid: #D6DEEC;
  --v-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* ==========================================================================
   THÈME SOMBRE — HAUTE LISIBILITÉ
   ========================================================================== */
html.dark,
[data-theme="dark"],
[data-surface="dark"] {
  color-scheme: dark;

  --v-bg: #0B1020;
  --v-sidebar: #0D1424;
  --v-header: #0D1424;
  --v-surface: #141C2E;
  --v-surface-alt: #1B2540;
  --v-input: #10182A;
  --v-footer: #0D1424;

  --v-text: #F6F8FF;
  --v-text-secondary: #C8D2E4;
  --v-text-muted: #A7B4CC;

  --v-border: #34415A;
  --v-border-strong: #7C8EAE;

  --v-primary: #593BFF;
  --v-on-primary: #FFFFFF;

  --v-link: #C0B5FF;
  --v-link-hover: #E1DAFF;
  --v-focus: #C0B6FF;

  --v-hover: #212E4A;
  --v-active-bg: #332663;
  --v-active-text: #F3EEFF;

  --v-success: #5FE3B4;
  --v-success-bg: #10392E;
  --v-warning: #FFD081;
  --v-warning-bg: #422D19;
  --v-danger: #FF92B0;
  --v-danger-bg: #431C2C;
  --v-info: #9FCBFF;
  --v-info-bg: #182E4D;

  --v-chart-grid: #34415A;
  --v-shadow: 0 10px 28px rgba(0, 0, 0, 0.30);
}

/* ==========================================================================
   BASE GLOBALE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background: var(--v-bg);
  color: var(--v-text);
  font-family: var(--v-font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Règle anti-texte illisible : une section sombre garde ses couleurs sombres,
   même si la page globale est en mode clair. */
[data-surface="dark"],
[data-surface="light"] {
  background-color: var(--v-surface);
  color: var(--v-text);
}

:where(a) {
  color: var(--v-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--v-duration-fast) var(--v-ease);
}

:where(a):hover {
  color: var(--v-link-hover);
}

.v-btn--primary,
.voila-btn-primary-purple,
a[class*="bg-[#583BFF]"],
a[class*="bg-[#593BFF]"],
a[class*="bg-emerald-600"],
a[class*="bg-[#FF6A59]"] {
  color: var(--v-on-primary) !important;
}

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

/* ==========================================================================
   TYPOGRAPHIE & CHIFFRES COMPTABLES
   ========================================================================== */
.v-display,
:where(h1, h2),
.v-card-title {
  font-family: var(--v-font-display);
  color: var(--v-text);
  letter-spacing: -0.02em;
}

.v-text-secondary {
  color: var(--v-text-secondary);
}

.v-text-muted {
  color: var(--v-text-muted);
}

.v-amount,
.v-kpi-value,
.v-table-number,
.v-invoice-number,
.v-tax-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   COMPOSANTS UNIFIÉS
   ========================================================================== */
.v-card {
  background: var(--v-surface);
  color: var(--v-text);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius-md);
  box-shadow: var(--v-shadow);
}

.v-card--alt {
  background: var(--v-surface-alt);
}

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--v-control-height);
  padding: 10px 16px;
  border-radius: var(--v-radius-sm);
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--v-duration-fast) var(--v-ease),
    border-color var(--v-duration-fast) var(--v-ease),
    color var(--v-duration-fast) var(--v-ease),
    transform var(--v-duration-fast) var(--v-ease);
}

.v-btn--primary {
  background: var(--v-primary);
  color: var(--v-on-primary);
  border-color: var(--v-primary);
}

.v-btn--primary:hover {
  background: var(--v-primary-hover);
  border-color: var(--v-primary-hover);
  color: var(--v-on-primary);
}

.v-btn--secondary {
  background: var(--v-surface);
  color: var(--v-text);
  border-color: var(--v-border-strong);
}

.v-btn--secondary:hover {
  background: var(--v-hover);
  color: var(--v-active-text);
}

.v-btn--ghost {
  background: transparent;
  color: var(--v-text-secondary);
  border-color: var(--v-border);
}

.v-btn--ghost:hover {
  background: var(--v-hover);
  color: var(--v-text);
}

.v-btn--danger {
  background: var(--v-danger-bg);
  color: var(--v-danger);
  border-color: currentColor;
}

.v-input,
.v-select,
.v-textarea {
  width: 100%;
  min-height: var(--v-control-height);
  padding: 10px 12px;
  background: var(--v-input);
  color: var(--v-text);
  border: 1px solid var(--v-border-strong);
  border-radius: var(--v-radius-sm);
  font-size: 0.9375rem;
}

.v-input::placeholder,
.v-textarea::placeholder {
  color: var(--v-text-muted);
  opacity: 1;
}

.v-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--v-radius-pill);
  border: 1px solid currentColor;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
}

.v-badge--success {
  color: var(--v-success);
  background: var(--v-success-bg);
}

.v-badge--warning {
  color: var(--v-warning);
  background: var(--v-warning-bg);
}

.v-badge--danger {
  color: var(--v-danger);
  background: var(--v-danger-bg);
}

.v-badge--info {
  color: var(--v-info);
  background: var(--v-info-bg);
}

/* ==========================================================================
   SIDEBAR & FOOTER
   ========================================================================== */
.v-sidebar {
  width: var(--v-sidebar-width);
  background: var(--v-sidebar);
  color: var(--v-text);
  border-right: 1px solid var(--v-border);
}

.v-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--v-text-secondary);
  border-radius: var(--v-radius-sm);
  text-decoration: none;
  font-weight: 600;
}

.v-sidebar-link:hover {
  background: var(--v-hover);
  color: var(--v-text);
}

.v-sidebar-link[aria-current="page"],
.v-sidebar-link.is-active {
  background: var(--v-active-bg);
  color: var(--v-active-text);
  border-left: 3px solid var(--v-primary);
}

.v-footer {
  background: var(--v-footer);
  color: var(--v-text-secondary);
  border-top: 1px solid var(--v-border);
}

.v-footer h2,
.v-footer h3,
.v-footer h4,
.v-footer strong {
  color: var(--v-text);
}

.v-footer a {
  color: var(--v-link);
}

.v-footer a:hover {
  color: var(--v-link-hover);
}

/* ==========================================================================
   CLASSES UTILITAIRES PRÉCOMPILÉES (--v-*) & BADGES D'ICÔNES KPI
   ========================================================================== */
.v-kpi-icon {
  border-width: 1px;
  border-style: solid;
}
.v-kpi-icon-warning {
  background-color: var(--v-warning-bg) !important;
  color: var(--v-warning) !important;
  border-color: color-mix(in srgb, var(--v-warning) 30%, transparent) !important;
}
.v-kpi-icon-success {
  background-color: var(--v-success-bg) !important;
  color: var(--v-success) !important;
  border-color: color-mix(in srgb, var(--v-success) 30%, transparent) !important;
}
.v-kpi-icon-primary {
  background-color: var(--v-active-bg) !important;
  color: var(--v-active-text) !important;
  border-color: color-mix(in srgb, var(--v-active-text) 25%, transparent) !important;
}
.v-kpi-icon-info {
  background-color: var(--v-info-bg) !important;
  color: var(--v-info) !important;
  border-color: color-mix(in srgb, var(--v-info) 30%, transparent) !important;
}

.bg-\[var\(--v-bg\)\] { background-color: var(--v-bg) !important; }
.bg-\[var\(--v-bg-elevated\)\] { background-color: var(--v-bg-elevated, var(--v-sidebar)) !important; }
.bg-\[var\(--v-surface\)\] { background-color: var(--v-surface) !important; }
.bg-\[var\(--v-surface-2\)\],
.bg-\[var\(--v-surface-alt\)\] { background-color: var(--v-surface-alt) !important; }
.bg-\[var\(--v-header\)\] { background-color: var(--v-header) !important; }
.bg-\[var\(--v-sidebar\)\] { background-color: var(--v-sidebar) !important; }
.bg-\[var\(--v-footer\)\] { background-color: var(--v-footer) !important; }
.bg-\[var\(--v-primary\)\] { background-color: var(--v-primary) !important; }
.bg-\[var\(--v-active-bg\)\] { background-color: var(--v-active-bg) !important; }
.bg-\[var\(--v-hover\)\] { background-color: var(--v-hover) !important; }
.bg-\[var\(--v-input-bg\)\],
.bg-\[var\(--v-input\)\] { background-color: var(--v-input) !important; }
.bg-\[var\(--v-warning-bg\)\] { background-color: var(--v-warning-bg) !important; }
.bg-\[var\(--v-success-bg\)\] { background-color: var(--v-success-bg) !important; }
.bg-\[var\(--v-danger-bg\)\] { background-color: var(--v-danger-bg) !important; }
.bg-\[var\(--v-info-bg\)\] { background-color: var(--v-info-bg) !important; }

.text-\[var\(--v-text\)\] { color: var(--v-text) !important; }
.text-\[var\(--v-text-secondary\)\] { color: var(--v-text-secondary) !important; }
.text-\[var\(--v-text-muted\)\] { color: var(--v-text-muted) !important; }
.text-\[var\(--v-primary\)\] { color: var(--v-primary) !important; }
.text-\[var\(--v-link\)\] { color: var(--v-link) !important; }
.text-\[var\(--v-active-text\)\] { color: var(--v-active-text) !important; }
.text-\[var\(--v-warning\)\] { color: var(--v-warning) !important; }
.text-\[var\(--v-success\)\] { color: var(--v-success) !important; }
.text-\[var\(--v-danger\)\] { color: var(--v-danger) !important; }
.text-\[var\(--v-info\)\] { color: var(--v-info) !important; }

.border-\[var\(--v-border\)\] { border-color: var(--v-border) !important; }
.border-\[var\(--v-border-strong\)\] { border-color: var(--v-border-strong) !important; }
.border-\[var\(--v-primary\)\] { border-color: var(--v-primary) !important; }
.divide-\[var\(--v-border\)\] > :not(:last-child) { border-color: var(--v-border) !important; }

.hover\:bg-\[var\(--v-hover\)\]:hover { background-color: var(--v-hover) !important; }
.hover\:bg-\[var\(--v-primary\)\]:hover { background-color: var(--v-primary) !important; }
.hover\:bg-\[var\(--v-primary-hover\)\]:hover { background-color: var(--v-primary-hover) !important; }
.hover\:bg-\[var\(--v-surface-3\)\]:hover { background-color: var(--v-hover) !important; }
.hover\:text-\[var\(--v-text\)\]:hover { color: var(--v-text) !important; }
.hover\:text-\[var\(--v-link\)\]:hover { color: var(--v-link) !important; }
.hover\:text-\[var\(--v-link-hover\)\]:hover { color: var(--v-link-hover) !important; }
.hover\:text-white:hover { color: #FFFFFF !important; }
.hover\:border-\[var\(--v-border-strong\)\]:hover { border-color: var(--v-border-strong) !important; }
.group:hover .group-hover\:text-\[var\(--v-link\)\] { color: var(--v-link) !important; }