/* =============================================================================
   FUSION SMARTCONNECT — DESIGN SYSTEM v1.0
   Identité : Violet premium SaaS BTP
   Cible : vitrine fusion-smartconnect.net + CRM app.fusiongroupe.net + Admin
   Auteur : Claude (lead dev) — 2026-04-21
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. RESET & BASE
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fs-font-sans);
  font-size: var(--fs-text-base);
  line-height: var(--fs-leading-normal);
  color: var(--fs-text);
  background: var(--fs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--fs-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--fs-primary-700); }
:focus-visible { outline: 3px solid var(--fs-primary-300); outline-offset: 2px; border-radius: var(--fs-radius-sm); }

/* -----------------------------------------------------------------------------
   2. DESIGN TOKENS
   ----------------------------------------------------------------------------- */
:root {

  /* ----- COULEURS — Palette principale violet -------------------------------- */
  --fs-primary-50:  #F5F3FF;
  --fs-primary-100: #EDE9FE;
  --fs-primary-200: #DDD6FE;
  --fs-primary-300: #C4B5FD;
  --fs-primary-400: #A78BFA;
  --fs-primary-500: #8B5CF6;
  --fs-primary-600: #7C3AED;   /* PRIMARY — actions, liens, focus */
  --fs-primary-700: #6D28D9;   /* hover primary */
  --fs-primary-800: #5B21B6;   /* dark surfaces, navbar */
  --fs-primary-900: #4C1D95;   /* hero gradients depth */
  --fs-primary-950: #2E1065;   /* deepest accent */

  --fs-primary: var(--fs-primary-600);

  /* ----- COULEURS — Accent doré (héritage BTP, CTA secondaire) -------------- */
  --fs-accent-50:  #FFFBEB;
  --fs-accent-100: #FEF3C7;
  --fs-accent-300: #FCD34D;
  --fs-accent-500: #F59E0B;   /* ACCENT — badge premium, ratings */
  --fs-accent-600: #D97706;   /* hover accent */
  --fs-accent-700: #B45309;

  --fs-accent: var(--fs-accent-500);

  /* ----- COULEURS — Neutres (slate, pour texte + surfaces) ------------------ */
  --fs-slate-50:  #F8FAFC;
  --fs-slate-100: #F1F5F9;
  --fs-slate-200: #E2E8F0;
  --fs-slate-300: #CBD5E1;
  --fs-slate-400: #94A3B8;
  --fs-slate-500: #64748B;
  --fs-slate-600: #475569;
  --fs-slate-700: #334155;
  --fs-slate-800: #1E293B;
  --fs-slate-900: #0F172A;

  /* ----- COULEURS — Sémantique --------------------------------------------- */
  --fs-success-50:  #ECFDF5;
  --fs-success-500: #10B981;
  --fs-success-600: #059669;
  --fs-success-700: #047857;

  --fs-warning-50:  #FFFBEB;
  --fs-warning-500: #F59E0B;
  --fs-warning-600: #D97706;
  --fs-warning-700: #B45309;

  --fs-danger-50:  #FEF2F2;
  --fs-danger-500: #EF4444;
  --fs-danger-600: #DC2626;
  --fs-danger-700: #B91C1C;

  --fs-info-50:  #EFF6FF;
  --fs-info-500: #3B82F6;
  --fs-info-600: #2563EB;
  --fs-info-700: #1D4ED8;

  /* ----- COULEURS — Tokens sémantiques -------------------------------------- */
  --fs-bg:           #FFFFFF;
  --fs-bg-soft:      var(--fs-slate-50);
  --fs-bg-muted:     var(--fs-slate-100);
  --fs-surface:      #FFFFFF;
  --fs-surface-hover: var(--fs-slate-50);
  --fs-border:       var(--fs-slate-200);
  --fs-border-strong: var(--fs-slate-300);

  --fs-text:         var(--fs-slate-900);
  --fs-text-muted:   var(--fs-slate-600);
  --fs-text-subtle:  var(--fs-slate-500);
  --fs-text-inverse: #FFFFFF;

  /* ----- TYPOGRAPHIE ------------------------------------------------------- */
  --fs-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-font-display: 'Playfair Display', Georgia, serif;
  --fs-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Échelle modulaire ratio 1.25 */
  --fs-text-xs:   0.75rem;     /* 12px — captions */
  --fs-text-sm:   0.875rem;    /* 14px — labels, helper */
  --fs-text-base: 1rem;        /* 16px — body */
  --fs-text-lg:   1.125rem;    /* 18px — lead */
  --fs-text-xl:   1.25rem;     /* 20px — h6 */
  --fs-text-2xl:  1.5rem;      /* 24px — h5 */
  --fs-text-3xl:  1.875rem;    /* 30px — h4 */
  --fs-text-4xl:  2.25rem;     /* 36px — h3 */
  --fs-text-5xl:  3rem;        /* 48px — h2 */
  --fs-text-6xl:  3.75rem;     /* 60px — h1 desktop */
  --fs-text-7xl:  4.5rem;      /* 72px — hero display */

  --fs-leading-tight:   1.2;
  --fs-leading-snug:    1.4;
  --fs-leading-normal:  1.6;
  --fs-leading-relaxed: 1.75;

  --fs-weight-normal:   400;
  --fs-weight-medium:   500;
  --fs-weight-semibold: 600;
  --fs-weight-bold:     700;
  --fs-weight-extrabold: 800;

  --fs-tracking-tight:  -0.02em;
  --fs-tracking-normal: 0;
  --fs-tracking-wide:   0.02em;

  /* ----- SPACING (échelle 4pt) --------------------------------------------- */
  --fs-space-0:  0;
  --fs-space-1:  0.25rem;   /* 4px  */
  --fs-space-2:  0.5rem;    /* 8px  */
  --fs-space-3:  0.75rem;   /* 12px */
  --fs-space-4:  1rem;      /* 16px */
  --fs-space-5:  1.25rem;   /* 20px */
  --fs-space-6:  1.5rem;    /* 24px */
  --fs-space-8:  2rem;      /* 32px */
  --fs-space-10: 2.5rem;    /* 40px */
  --fs-space-12: 3rem;      /* 48px */
  --fs-space-16: 4rem;      /* 64px */
  --fs-space-20: 5rem;      /* 80px */
  --fs-space-24: 6rem;      /* 96px */
  --fs-space-32: 8rem;      /* 128px */

  /* ----- RADIUS ------------------------------------------------------------- */
  --fs-radius-xs:   0.25rem;   /* 4px  — tags */
  --fs-radius-sm:   0.375rem;  /* 6px  — inputs */
  --fs-radius-md:   0.5rem;    /* 8px  — buttons */
  --fs-radius-lg:   0.75rem;   /* 12px — cards */
  --fs-radius-xl:   1rem;      /* 16px — modals */
  --fs-radius-2xl:  1.5rem;    /* 24px — hero, gros blocs */
  --fs-radius-full: 9999px;

  /* ----- SHADOWS — élévation ----------------------------------------------- */
  --fs-shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --fs-shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.06);
  --fs-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --fs-shadow-lg: 0 10px 20px -5px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.05);
  --fs-shadow-xl: 0 20px 40px -10px rgba(15, 23, 42, 0.12), 0 8px 16px -6px rgba(15, 23, 42, 0.08);
  --fs-shadow-2xl: 0 32px 64px -16px rgba(76, 29, 149, 0.20);

  /* Glow violet pour hero / focus / CTA premium */
  --fs-shadow-primary: 0 8px 24px -8px rgba(124, 58, 237, 0.45);
  --fs-shadow-primary-lg: 0 20px 50px -12px rgba(124, 58, 237, 0.55);

  /* ----- MOTION ------------------------------------------------------------- */
  --fs-duration-fast: 120ms;
  --fs-duration-base: 180ms;
  --fs-duration-slow: 280ms;
  --fs-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --fs-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ----- LAYOUT ------------------------------------------------------------- */
  --fs-container-sm: 640px;
  --fs-container-md: 768px;
  --fs-container-lg: 1024px;
  --fs-container-xl: 1280px;
  --fs-container-2xl: 1440px;
  --fs-container: var(--fs-container-xl);

  /* ----- Z-INDEX scale ------------------------------------------------------ */
  --fs-z-base:    1;
  --fs-z-dropdown: 50;
  --fs-z-sticky:  100;
  --fs-z-overlay: 500;
  --fs-z-modal:   1000;
  --fs-z-toast:   2000;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ----------------------------------------------------------------------------- */
.fs-h1, h1 { font-size: var(--fs-text-5xl); line-height: var(--fs-leading-tight); font-weight: var(--fs-weight-extrabold); letter-spacing: var(--fs-tracking-tight); margin: 0 0 var(--fs-space-4); color: var(--fs-text); }
.fs-h2, h2 { font-size: var(--fs-text-4xl); line-height: var(--fs-leading-tight); font-weight: var(--fs-weight-bold); letter-spacing: var(--fs-tracking-tight); margin: 0 0 var(--fs-space-4); color: var(--fs-text); }
.fs-h3, h3 { font-size: var(--fs-text-3xl); line-height: var(--fs-leading-snug); font-weight: var(--fs-weight-bold); margin: 0 0 var(--fs-space-3); color: var(--fs-text); }
.fs-h4, h4 { font-size: var(--fs-text-2xl); line-height: var(--fs-leading-snug); font-weight: var(--fs-weight-semibold); margin: 0 0 var(--fs-space-3); color: var(--fs-text); }
.fs-h5, h5 { font-size: var(--fs-text-xl); line-height: var(--fs-leading-snug); font-weight: var(--fs-weight-semibold); margin: 0 0 var(--fs-space-2); color: var(--fs-text); }
.fs-h6, h6 { font-size: var(--fs-text-lg); line-height: var(--fs-leading-snug); font-weight: var(--fs-weight-semibold); margin: 0 0 var(--fs-space-2); color: var(--fs-text); }

.fs-display { font-family: var(--fs-font-display); font-size: var(--fs-text-7xl); line-height: 1.1; font-weight: var(--fs-weight-bold); letter-spacing: var(--fs-tracking-tight); }
.fs-lead    { font-size: var(--fs-text-lg); line-height: var(--fs-leading-relaxed); color: var(--fs-text-muted); }
.fs-eyebrow { font-size: var(--fs-text-sm); font-weight: var(--fs-weight-semibold); letter-spacing: var(--fs-tracking-wide); text-transform: uppercase; color: var(--fs-primary); margin-bottom: var(--fs-space-3); }
.fs-muted   { color: var(--fs-text-muted); }
.fs-subtle  { color: var(--fs-text-subtle); }
.fs-mono    { font-family: var(--fs-font-mono); }

p { margin: 0 0 var(--fs-space-4); }
strong { font-weight: var(--fs-weight-semibold); color: var(--fs-text); }

/* Responsive headings */
@media (min-width: 768px) {
  .fs-h1, h1 { font-size: var(--fs-text-6xl); }
  .fs-display { font-size: clamp(3rem, 6vw, 4.5rem); }
}

/* -----------------------------------------------------------------------------
   4. LAYOUT — Container & Section
   ----------------------------------------------------------------------------- */
.fs-container { width: 100%; max-width: var(--fs-container); margin-inline: auto; padding-inline: var(--fs-space-6); }
.fs-container-sm { max-width: var(--fs-container-sm); }
.fs-container-md { max-width: var(--fs-container-md); }
.fs-container-lg { max-width: var(--fs-container-lg); }

.fs-section       { padding-block: var(--fs-space-16); }
.fs-section-lg    { padding-block: var(--fs-space-24); }
.fs-section-soft  { background: var(--fs-bg-soft); }
.fs-section-dark  { background: var(--fs-primary-900); color: var(--fs-text-inverse); }
.fs-section-dark .fs-h1, .fs-section-dark .fs-h2, .fs-section-dark .fs-h3, .fs-section-dark p { color: var(--fs-text-inverse); }
.fs-section-dark .fs-muted { color: var(--fs-primary-200); }

@media (min-width: 768px) {
  .fs-container { padding-inline: var(--fs-space-8); }
  .fs-section { padding-block: var(--fs-space-20); }
  .fs-section-lg { padding-block: var(--fs-space-32); }
}

/* Grid helpers */
.fs-grid { display: grid; gap: var(--fs-space-6); }
.fs-grid-2 { grid-template-columns: 1fr; }
.fs-grid-3 { grid-template-columns: 1fr; }
.fs-grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .fs-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .fs-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .fs-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .fs-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .fs-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* -----------------------------------------------------------------------------
   5. COMPONENTS — Buttons
   ----------------------------------------------------------------------------- */
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  padding: var(--fs-space-3) var(--fs-space-5);
  min-height: 44px;
  font-family: var(--fs-font-sans);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--fs-tracking-normal);
  border: 1px solid transparent;
  border-radius: var(--fs-radius-md);
  background: transparent;
  color: var(--fs-text);
  cursor: pointer;
  transition: all var(--fs-duration-base) var(--fs-ease-out);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
}
.fs-btn:disabled, .fs-btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Primary — violet, plein */
.fs-btn-primary {
  background: var(--fs-primary-600);
  color: var(--fs-text-inverse);
  box-shadow: var(--fs-shadow-sm);
}
.fs-btn-primary:hover { background: var(--fs-primary-700); box-shadow: var(--fs-shadow-primary); transform: translateY(-1px); }
.fs-btn-primary:active { transform: translateY(0); box-shadow: var(--fs-shadow-sm); }

/* Secondary — outline violet */
.fs-btn-secondary {
  background: var(--fs-surface);
  color: var(--fs-primary-700);
  border-color: var(--fs-primary-200);
}
.fs-btn-secondary:hover { background: var(--fs-primary-50); border-color: var(--fs-primary-300); }

/* Ghost — pas de bordure */
.fs-btn-ghost { color: var(--fs-text-muted); }
.fs-btn-ghost:hover { background: var(--fs-bg-muted); color: var(--fs-text); }

/* Accent — gold */
.fs-btn-accent {
  background: var(--fs-accent-500);
  color: #1A1305;
  box-shadow: var(--fs-shadow-sm);
}
.fs-btn-accent:hover { background: var(--fs-accent-600); transform: translateY(-1px); }

/* Danger */
.fs-btn-danger { background: var(--fs-danger-600); color: var(--fs-text-inverse); }
.fs-btn-danger:hover { background: var(--fs-danger-700); }

/* Sizes */
.fs-btn-sm { min-height: 36px; padding: var(--fs-space-2) var(--fs-space-4); font-size: var(--fs-text-xs); }
.fs-btn-lg { min-height: 52px; padding: var(--fs-space-4) var(--fs-space-8); font-size: var(--fs-text-base); }
.fs-btn-xl { min-height: 60px; padding: var(--fs-space-5) var(--fs-space-10); font-size: var(--fs-text-lg); border-radius: var(--fs-radius-lg); }

.fs-btn-block { width: 100%; }

/* -----------------------------------------------------------------------------
   6. COMPONENTS — Card
   ----------------------------------------------------------------------------- */
.fs-card {
  background: var(--fs-surface);
  border: 1px solid var(--fs-border);
  border-radius: var(--fs-radius-lg);
  padding: var(--fs-space-6);
  transition: all var(--fs-duration-base) var(--fs-ease-out);
}
.fs-card-hover:hover { border-color: var(--fs-primary-200); box-shadow: var(--fs-shadow-lg); transform: translateY(-2px); }
.fs-card-elevated { border: none; box-shadow: var(--fs-shadow-md); }
.fs-card-flat { border: none; background: var(--fs-bg-soft); }
.fs-card-feature { padding: var(--fs-space-8); }

.fs-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--fs-primary-100), var(--fs-primary-50));
  color: var(--fs-primary-600);
  border-radius: var(--fs-radius-lg);
  margin-bottom: var(--fs-space-4);
  font-size: 24px;
}
.fs-card-icon-accent { background: linear-gradient(135deg, var(--fs-accent-100), var(--fs-accent-50)); color: var(--fs-accent-700); }

/* -----------------------------------------------------------------------------
   7. COMPONENTS — Badge / Chip
   ----------------------------------------------------------------------------- */
.fs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-1);
  padding: var(--fs-space-1) var(--fs-space-3);
  font-size: var(--fs-text-xs);
  font-weight: var(--fs-weight-semibold);
  line-height: 1;
  border-radius: var(--fs-radius-full);
  background: var(--fs-slate-100);
  color: var(--fs-slate-700);
  letter-spacing: var(--fs-tracking-wide);
}
.fs-badge-primary { background: var(--fs-primary-100); color: var(--fs-primary-800); }
.fs-badge-success { background: var(--fs-success-50); color: var(--fs-success-700); }
.fs-badge-warning { background: var(--fs-warning-50); color: var(--fs-warning-700); }
.fs-badge-danger  { background: var(--fs-danger-50); color: var(--fs-danger-700); }
.fs-badge-info    { background: var(--fs-info-50); color: var(--fs-info-700); }

.fs-badge-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* -----------------------------------------------------------------------------
   8. COMPONENTS — Form
   ----------------------------------------------------------------------------- */
.fs-field { display: flex; flex-direction: column; gap: var(--fs-space-2); margin-bottom: var(--fs-space-4); }
.fs-label {
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-medium);
  color: var(--fs-text);
}
.fs-label-required::after { content: ' *'; color: var(--fs-danger-600); }
.fs-helper { font-size: var(--fs-text-xs); color: var(--fs-text-subtle); }
.fs-error  { font-size: var(--fs-text-xs); color: var(--fs-danger-600); display: flex; align-items: center; gap: var(--fs-space-1); }

.fs-input, .fs-select, .fs-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--fs-space-3) var(--fs-space-4);
  font-family: inherit;
  font-size: var(--fs-text-base);
  line-height: 1.4;
  color: var(--fs-text);
  background: var(--fs-surface);
  border: 1px solid var(--fs-border-strong);
  border-radius: var(--fs-radius-md);
  transition: border-color var(--fs-duration-base) var(--fs-ease-out), box-shadow var(--fs-duration-base) var(--fs-ease-out);
}
.fs-input::placeholder, .fs-textarea::placeholder { color: var(--fs-text-subtle); }
.fs-input:hover, .fs-select:hover, .fs-textarea:hover { border-color: var(--fs-slate-400); }
.fs-input:focus, .fs-select:focus, .fs-textarea:focus {
  outline: none;
  border-color: var(--fs-primary-500);
  box-shadow: 0 0 0 4px var(--fs-primary-100);
}
.fs-input.is-invalid { border-color: var(--fs-danger-500); }
.fs-input.is-invalid:focus { box-shadow: 0 0 0 4px var(--fs-danger-50); }
.fs-textarea { min-height: 120px; resize: vertical; }
.fs-input:disabled { background: var(--fs-bg-muted); color: var(--fs-text-subtle); cursor: not-allowed; }

/* Checkbox & radio */
.fs-checkbox, .fs-radio { display: inline-flex; align-items: center; gap: var(--fs-space-2); cursor: pointer; }
.fs-checkbox input, .fs-radio input { width: 18px; height: 18px; accent-color: var(--fs-primary-600); cursor: pointer; }

/* -----------------------------------------------------------------------------
   9. COMPONENTS — Alert
   ----------------------------------------------------------------------------- */
.fs-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4);
  border-radius: var(--fs-radius-md);
  border-left: 4px solid;
  background: var(--fs-bg-soft);
}
.fs-alert-info    { background: var(--fs-info-50);    border-color: var(--fs-info-500);    color: var(--fs-info-700); }
.fs-alert-success { background: var(--fs-success-50); border-color: var(--fs-success-500); color: var(--fs-success-700); }
.fs-alert-warning { background: var(--fs-warning-50); border-color: var(--fs-warning-500); color: var(--fs-warning-700); }
.fs-alert-danger  { background: var(--fs-danger-50);  border-color: var(--fs-danger-500);  color: var(--fs-danger-700); }

/* -----------------------------------------------------------------------------
   10. COMPONENTS — Navbar (vitrine + admin)
   ----------------------------------------------------------------------------- */
.fs-navbar {
  position: sticky;
  top: 0;
  z-index: var(--fs-z-sticky);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--fs-border);
}
.fs-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-6);
  height: 72px;
  width: 100%;
  max-width: var(--fs-container);
  margin-inline: auto;
  padding-inline: var(--fs-space-6);
}
.fs-navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  font-family: var(--fs-font-display);
  font-size: var(--fs-text-xl);
  font-weight: var(--fs-weight-bold);
  color: var(--fs-text);
}
.fs-navbar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--fs-primary-600), var(--fs-primary-800));
  color: white;
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-primary);
  font-family: var(--fs-font-sans);
  font-weight: var(--fs-weight-extrabold);
  font-size: 18px;
}
.fs-navbar-nav { display: none; align-items: center; gap: var(--fs-space-2); }
.fs-navbar-link {
  padding: var(--fs-space-2) var(--fs-space-3);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-medium);
  color: var(--fs-text-muted);
  border-radius: var(--fs-radius-sm);
  transition: all var(--fs-duration-base) var(--fs-ease-out);
}
.fs-navbar-link:hover { color: var(--fs-primary-700); background: var(--fs-primary-50); }
.fs-navbar-link.is-active { color: var(--fs-primary-700); background: var(--fs-primary-50); }
.fs-navbar-actions { display: flex; align-items: center; gap: var(--fs-space-3); }
@media (min-width: 1024px) { .fs-navbar-nav { display: inline-flex; } }

/* -----------------------------------------------------------------------------
   11. COMPONENTS — Hero
   ----------------------------------------------------------------------------- */
.fs-hero {
  position: relative;
  padding-block: var(--fs-space-20) var(--fs-space-24);
  background: radial-gradient(ellipse at top right, var(--fs-primary-100) 0%, transparent 50%),
              radial-gradient(ellipse at bottom left, var(--fs-accent-50) 0%, transparent 40%),
              var(--fs-bg);
  overflow: hidden;
}
.fs-hero-dark {
  background: linear-gradient(135deg, var(--fs-primary-900) 0%, var(--fs-primary-950) 100%);
  color: var(--fs-text-inverse);
}
.fs-hero-dark .fs-h1, .fs-hero-dark .fs-h2 { color: white; }
.fs-hero-dark .fs-lead { color: var(--fs-primary-200); }

/* -----------------------------------------------------------------------------
   12. COMPONENTS — Footer
   ----------------------------------------------------------------------------- */
.fs-footer {
  background: var(--fs-primary-950);
  color: var(--fs-primary-200);
  padding-block: var(--fs-space-16) var(--fs-space-8);
}
.fs-footer h4 { color: white; font-size: var(--fs-text-sm); text-transform: uppercase; letter-spacing: var(--fs-tracking-wide); margin-bottom: var(--fs-space-4); }
.fs-footer a { color: var(--fs-primary-200); display: block; padding-block: var(--fs-space-1); font-size: var(--fs-text-sm); }
.fs-footer a:hover { color: white; }
.fs-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: var(--fs-space-6); margin-top: var(--fs-space-12); display: flex; flex-wrap: wrap; gap: var(--fs-space-4); justify-content: space-between; font-size: var(--fs-text-xs); }

/* -----------------------------------------------------------------------------
   13. UTILS — Helpers ponctuels (à usage modéré)
   ----------------------------------------------------------------------------- */
.fs-text-center { text-align: center; }
.fs-mt-0 { margin-top: 0; }
.fs-mt-2 { margin-top: var(--fs-space-2); }
.fs-mt-4 { margin-top: var(--fs-space-4); }
.fs-mt-6 { margin-top: var(--fs-space-6); }
.fs-mt-8 { margin-top: var(--fs-space-8); }
.fs-mb-0 { margin-bottom: 0; }
.fs-mb-2 { margin-bottom: var(--fs-space-2); }
.fs-mb-4 { margin-bottom: var(--fs-space-4); }
.fs-mb-6 { margin-bottom: var(--fs-space-6); }
.fs-mb-8 { margin-bottom: var(--fs-space-8); }
.fs-flex { display: flex; }
.fs-flex-col { flex-direction: column; }
.fs-items-center { align-items: center; }
.fs-justify-between { justify-content: space-between; }
.fs-gap-2 { gap: var(--fs-space-2); }
.fs-gap-3 { gap: var(--fs-space-3); }
.fs-gap-4 { gap: var(--fs-space-4); }
.fs-gap-6 { gap: var(--fs-space-6); }

/* =============================================================================
   FIN DU DESIGN SYSTEM
   ============================================================================= */