/* ==========================================================================
   RENDEMENT AUTO — DESIGN TOKENS CANONIQUES
   Référence officielle : Rendement Auto — Écrans.html
   Direction : Gris tech contemporain + Vert forêt profond + Émeraude + Ambre
   Norme : WCAG 2.2 AA (contrastes >= 4.5:1 texte, >= 3:1 bordures & graphes)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Espacements (Scale stricte 4px)
     ------------------------------------------------------------------------ */
  --space-1:  4px;   /* Écart icône / texte */
  --space-2:  8px;   /* Entre un label et sa valeur */
  --space-3:  12px;  /* Padding interne des chips et badges */
  --space-4:  16px;  /* Padding des cartes compactes, gap de grille mobile */
  --space-6:  24px;  /* Padding des cartes standard, gap de grille desktop */
  --space-8:  32px;  /* Séparation entre blocs d'une même section */
  --space-12: 48px;  /* Entre sections sur mobile */
  --space-16: 64px;  /* Entre sections sur desktop */
  --space-24: 96px;  /* Respiration avant un bandeau de conversion */

  /* ------------------------------------------------------------------------
     2. Rayons de courbure (Système géométrique canonique)
     ------------------------------------------------------------------------ */
  --radius-xs:          4px;
  --radius-sm:          6px;     /* Chips, badges, inputs secondaires */
  --radius-md:          12px;    /* Boutons, menus, champs de recherche */
  --radius-tile:        14px;    /* Tuiles métriques internes (Prix d'achat, Net/mois) */
  --radius-card-sm:     16px;    /* Cartes KPI fiche véhicule, sections méthodologie */
  --radius-box:         20px;    /* Cartes de réassurance 3 étapes "Comment ça marche" */
  --radius-card-mobile: 22px;    /* Cartes véhicules mobile */
  --radius-card:        24px;    /* Cartes véhicule desktop, panneau de recherche hero */
  --radius-lg:          16px;    /* Alias standard */
  --radius-pill:        999px;   /* Capsules de navigation, pastilles, badges ronds, CTA */
  --radius-full:        999px;

  /* ------------------------------------------------------------------------
     3. Élévations (Ombres douces et précises, jamais de noir pur)
     ------------------------------------------------------------------------ */
  --elev-subtle:    0 1px 2px rgba(20, 30, 48, 0.04);
  --elev-1:         0 1px 2px rgba(20, 30, 48, 0.05);                                   /* Repos subtil */
  --elev-2:         0 4px 12px rgba(20, 30, 48, 0.08);                                  /* Survol standard, popover */
  --elev-3:         0 16px 32px rgba(20, 30, 48, 0.12);                                 /* Modales, drawers, barre sticky */
  --elev-card:      0 1px 2px rgba(20, 30, 48, 0.05), 0 16px 32px -20px rgba(20, 30, 48, 0.22); /* Cartes au repos */
  --elev-card-hover: 0 2px 6px rgba(20, 30, 48, 0.06), 0 30px 52px -26px rgba(20, 30, 48, 0.34); /* Survol carte */
  --elev-floating:  0 1px 2px rgba(20, 30, 48, 0.04), 0 20px 40px -15px rgba(0, 0, 0, 0.35);    /* Panneau hero flottant */
  --elev-dock:      0 -8px 24px rgba(20, 30, 48, 0.08);                                 /* Dock collant bas mobile */

  /* Aliases de compatibilité */
  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-3);

  /* ------------------------------------------------------------------------
     4. Fond, Surfaces et Typographie (Mode Clair - Référence Écrans.html)
     ------------------------------------------------------------------------ */
  --canvas:             #F3F5F8;  /* Fond de page gris contemporain frais et net */
  --surface:            #FFFFFF;  /* Cartes, modales, en-têtes */
  --surface-subtle:     #E8ECF1;  /* Fond navigation capsule, skeleton, placeholders */
  --surface-sunken:     #EFEDE8;  /* Zones en creux historiques */
  --surface-tile:       #F3F5F8;  /* Tuiles métriques internes (Prix d'achat, Net/mois) */
  --border:             #DCE2EA;  /* Séparateurs, contour des cartes */
  --border-subtle:      #E8ECF1;  /* Bordures douces, séparateurs internes */
  --border-strong:      #CBC5B9;  /* Contour des champs de saisie */
  --ink:                #16181D;  /* Titres, chiffres clés, contraste maximal */
  --ink-muted:          #5B6069;  /* Texte courant, sous-titres */
  --ink-subtle:         #6E737C;  /* Légendes, unités, labels — texte le plus clair autorisé */
  --ink-light:          #8A8F98;  /* Chevrons, icônes inactives */
  --ink-on-dark:        #FFFFFF;  /* Titre sur fond sombre */
  --ink-on-dark-subtle: #B7D6CC;  /* Lead sur fond vert sombre hero */

  /* ------------------------------------------------------------------------
     5. Marque — Vert forêt profond, Émeraude rendement, Vert d'impulsion
     ------------------------------------------------------------------------ */
  --brand-50:    #EFF8F5;  /* Fond de bloc positif, confiance élevée */
  --brand-100:   #D9F0E9;  /* Remplissage de badge, puce de statut douce */
  --brand-500:   #15A184;  /* Survol, bordure active */
  --brand-600:   #0E7C66;  /* Action principale, chiffre héros positif, bouton CTA */
  --brand-700:   #0B4F42;  /* Reste net waterfall, texte sur fond vert doux */
  --brand-900:   #062B24;  /* Bandeau sombre du Hero et footer */
  --brand-pulse: #2FC0A0;  /* Point lumineux temps réel (animation ping) */

  /* ------------------------------------------------------------------------
     6. Accent — Ambre pour performances exceptionnelles
     ------------------------------------------------------------------------ */
  --accent-100: #FDF0DA;  /* Fond adouci */
  --accent-500: #D98324;  /* Badge « Meilleur rendement » sur carte véhicule */
  --accent-700: #9A5612;  /* Texte d'accent sur fond clair */

  /* ------------------------------------------------------------------------
     7. Sémantique financière
     ------------------------------------------------------------------------ */
  --positive: #0E7C66;  /* Gain, hausse favorable */
  --warning:  #B45309;  /* Hypothèse fragile, occupation > 90% */
  --danger:   #B42318;  /* Perte, cash-flow négatif, erreur */
  --info:     #175CD3;  /* Information neutre, lien */

  /* ------------------------------------------------------------------------
     8. Palette Data-viz & Waterfall
     ------------------------------------------------------------------------ */
  --viz-gross:      #0E7C66;  /* Revenu locatif brut (+4 820 €) */
  --viz-deduction:  #6E737C;  /* Commissions, assurance, entretien, décote, impôts */
  --viz-charges-bg: #B9C2CE;  /* Charges légères */
  --viz-net:        #0B4F42;  /* Reste net (+1 624 €) */
  --viz-1: #0E7C66;
  --viz-2: #D98324;
  --viz-3: #4B5565;
  --viz-4: #7FC9B4;
  --viz-5: #9FA8B4;
  --viz-6: #F2C572;

  /* ------------------------------------------------------------------------
     9. Typographie & Polices Canoniques
     ------------------------------------------------------------------------ */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --text-display: 52px;  --leading-display: 1.05;  /* Titre hero, chiffre héros simulateur */
  --text-h1:      36px;  --leading-h1:      1.15;  /* Titre de page */
  --text-h2:      24px;  --leading-h2:      1.25;  /* Titre de section */
  --text-h3:      20px;  --leading-h3:      1.35;  /* Titre de carte véhicule */
  --text-body-lg: 18px;  --leading-body-lg: 1.5;   /* Chapeau, lead de page */
  --text-body:    15px;  --leading-body:    1.55;  /* Texte courant */
  --text-body-sm: 13px;  --leading-body-sm: 1.4;   /* Labels, cellules de tableau */
  --text-caption: 12px;  --leading-caption: 1.35;  /* Sources, mentions, unités */

  /* Aliases de compatibilité */
  --text-48: var(--text-display);
  --text-32: var(--text-h1);
  --text-24: var(--text-h2);
  --text-20: var(--text-h3);
  --text-16: var(--text-body);
  --text-14: var(--text-body-sm);
  --text-13: var(--text-caption);

  /* Anneau de focus visible accessible */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-600);
}

/* ==========================================================================
   MODE SOMBRE — Inversion sémantique conforme aux guidelines
   ========================================================================== */
[data-theme="dark"] {
  --canvas:         #0E1116;
  --surface:        #171B21;
  --surface-subtle: #1F242C;
  --surface-sunken: #1F242C;
  --surface-tile:   #1C222B;
  --border:         #2A303A;
  --border-subtle:  #242A34;
  --border-strong:  #3C434F;
  --ink:            #F2F3F5;
  --ink-muted:      #A8AFB8;
  --ink-subtle:     #858C96;
  --ink-light:      #6A717C;
  --ink-on-dark:    #FFFFFF;
  --ink-on-dark-subtle: #9ED0C3;

  --brand-50:  #10322B;
  --brand-100: #14443A;
  --brand-500: #1E8C73;
  --brand-600: #2FC0A0;  /* Action principale en mode sombre */
  --brand-700: #1E8C73;
  --brand-900: #051A15;
  --brand-pulse: #2FC0A0;

  --accent-100: #291A07;
  --accent-500: #F0A64A;
  --accent-700: #F7CA8B;

  --positive: #2FC0A0;
  --warning:  #E0A33C;
  --danger:   #F0776B;
  --info:     #6AA2F5;

  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elev-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --elev-3: 0 16px 32px rgba(0, 0, 0, 0.60);
  --elev-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 32px -20px rgba(0, 0, 0, 0.50);
  --elev-card-hover: 0 2px 6px rgba(0, 0, 0, 0.40), 0 30px 52px -26px rgba(0, 0, 0, 0.70);
  --elev-floating: 0 20px 40px -15px rgba(0, 0, 0, 0.75);
  --elev-dock: 0 -8px 24px rgba(0, 0, 0, 0.45);

  --shadow-sm: var(--elev-1);
  --shadow-md: var(--elev-2);
  --shadow-lg: var(--elev-3);

  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-600);
}

/* ==========================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */
@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(14, 124, 102, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(14, 124, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 124, 102, 0); }
}

.num {
  font-variant-numeric: tabular-nums;
}