/* ==========================================================================
   QUASAR DESIGN SYSTEM — TOKENS (refonte 2026)
   Fichier additif. Préfixe --qds- pour éviter toute collision avec les
   variables historiques (--brand-*, --gray-*, --lille-*) toujours actives.
   Direction : chaleureux, professionnel, ancrage Lille / Hauts-de-France,
   brique + géométrie cartographique + détails Art déco. Zéro dépendance.
   ========================================================================== */

:root {
  /* --- Couleurs : fonds clairs (ivoire / chaux) --- */
  --qds-ivoire: #faf7f2;          /* fond de page chaleureux */
  --qds-chaux: #f3ede3;           /* fond de section alterné */
  --qds-pierre: #f7f3ee;          /* = --lille-stone existant, continuité */
  --qds-blanc: #ffffff;

  /* --- Couleurs : bleu ardoise profond (structure, texte, fonds sombres) --- */
  --qds-ardoise-950: #131c2b;
  --qds-ardoise-900: #1c2a40;     /* fonds sombres, footer, hero inversé */
  --qds-ardoise-800: #24344d;
  --qds-ardoise-700: #33465f;     /* texte secondaire sur clair (AA) */
  --qds-ardoise-200: #c4cedd;     /* filets sur fond sombre */
  --qds-ardoise-100: #e2e8f0;

  /* --- Couleurs : rouge brique (identité, action) --- */
  --qds-brique: #a55745;          /* = --lille-brick, brique adoucie décorative */
  --qds-brique-profond: #8c4636;  /* variante AA pour texte sur clair */
  --qds-action: #bd3200;          /* = --brand-orange, continuité CTA */
  --qds-action-sombre: #a72b00;   /* = --brand-orange-dark, hover */

  /* --- Couleurs : ocre / ambre (accents chaleureux) --- */
  --qds-ocre: #8a5a10;            /* accent textuel, AA (~5.2:1) sur ivoire */
  --qds-ambre: #e3a94f;           /* accent décoratif (filets, puces, motifs) */
  --qds-ambre-voile: #f6e7cd;     /* fond d'encadré ambré */

  /* --- Couleur secondaire très ponctuelle --- */
  --qds-sapin: #2f6b58;           /* vert profond : confirmations, badge ponctuel */

  /* --- Texte --- */
  --qds-texte: #1f2937;           /* corps de texte (= gray-800 existant) */
  --qds-texte-doux: #4b5563;      /* texte secondaire */
  --qds-texte-inverse: #f4f1ea;   /* texte sur fond ardoise */

  /* --- Typographie : stack système conservée (0 octet de police) --- */
  --qds-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* Échelle de titres (fluide, compatible avec l'échelle existante) */
  --qds-t-hero: clamp(2.125rem, 5vw, 3rem);
  --qds-t-1: clamp(1.875rem, 4vw, 2.5rem);
  --qds-t-2: clamp(1.5rem, 3vw, 1.875rem);
  --qds-t-3: clamp(1.25rem, 2.2vw, 1.5rem);
  --qds-t-4: clamp(1.075rem, 1.8vw, 1.25rem);
  --qds-t-corps: clamp(1rem, 1.5vw, 1.125rem);
  --qds-t-petit: 0.875rem;
  --qds-t-micro: 0.75rem;

  --qds-interligne-titre: 1.15;
  --qds-interligne-corps: 1.65;

  /* --- Espacements (échelle 4px) --- */
  --qds-e-1: 0.25rem;
  --qds-e-2: 0.5rem;
  --qds-e-3: 0.75rem;
  --qds-e-4: 1rem;
  --qds-e-5: 1.5rem;
  --qds-e-6: 2rem;
  --qds-e-7: 3rem;
  --qds-e-8: 4rem;
  --qds-e-9: 6rem;

  /* Rythme de section (aligné sur l'existant : 3rem mobile → 4rem desktop) */
  --qds-section-y: clamp(3rem, 6vw, 4rem);

  /* --- Rayons --- */
  --qds-r-petit: 0.375rem;
  --qds-r-moyen: 0.625rem;
  --qds-r-grand: 1rem;
  --qds-r-pilule: 999px;

  /* --- Bordures --- */
  --qds-bordure: 1px solid var(--qds-ardoise-100);
  --qds-bordure-forte: 2px solid var(--qds-ardoise-800);
  --qds-filet-brique: 3px solid var(--qds-brique);
  --qds-filet-ambre: 2px solid var(--qds-ambre);

  /* --- Ombres (douces, jamais spectaculaires) --- */
  --qds-ombre-1: 0 1px 3px rgba(28, 42, 64, 0.08), 0 1px 2px rgba(28, 42, 64, 0.06);
  --qds-ombre-2: 0 4px 12px rgba(28, 42, 64, 0.10), 0 2px 4px rgba(28, 42, 64, 0.06);
  --qds-ombre-3: 0 10px 28px rgba(28, 42, 64, 0.14);

  /* --- Conteneur et grille (continuité stricte avec l'existant) --- */
  --qds-conteneur: 1280px;        /* = --max-width existant */
  --qds-conteneur-lecture: 46rem; /* colonne de lecture longue (~736px) */
  --qds-gouttiere: clamp(1rem, 3vw, 2rem);

  /* --- Points de rupture (référence documentaire, usage en media queries)
       320 / 375 : mobiles étroits (pas de query dédiée, fluide)
       640px  : --qds-bp-sm
       768px  : --qds-bp-md
       1024px : --qds-bp-lg
       1280px : --qds-bp-xl
       1440px : confort large (fonds uniquement) --- */

  /* --- Mouvement (sobre, désactivable) --- */
  --qds-duree-courte: 150ms;
  --qds-duree-moyenne: 250ms;
  --qds-courbe: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Focus accessible --- */
  --qds-focus: 3px solid var(--qds-action);
  --qds-focus-decalage: 2px;
  --qds-focus-inverse: 3px solid var(--qds-ambre);
}

/* Animations réduites : tout mouvement du design system est neutralisé */
@media (prefers-reduced-motion: reduce) {
  :root {
    --qds-duree-courte: 0ms;
    --qds-duree-moyenne: 0ms;
  }
  [class^="qds-"], [class*=" qds-"],
  [class^="qds-"]::before, [class*=" qds-"]::before,
  [class^="qds-"]::after, [class*=" qds-"]::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}