/* ============================================================================
   DriveTarget — Design System (source de vérité)
   ----------------------------------------------------------------------------
   Réconcilie les deux langages visuels du produit :
     • L'application cartographique (#map / app.html + styles.css) — tokens nets,
       police Inter, rayon 8px, esthétique « produit » minimale.
     • La landing marketing (index.html / login.html) — dégradés bleus, effet
       verre (glassmorphism), orbes flottants, animations « hero ».

   COMMENT L'UTILISER
     1. Charger ce fichier EN PREMIER, avant styles.css et avant le <style>
        inline des pages Tailwind :
            <link rel="stylesheet" href="design-system.css" />
     2. Les variables --ds-* sont la palette canonique (à utiliser pour tout
        nouveau code).
     3. Le bloc « Alias de compatibilité » réexpose --brand, --ink, --line…
        avec les valeurs EXACTES déjà utilisées par styles.css : adopter ce
        fichier ne provoque donc aucune régression visuelle dans l'app.
     4. Les primitives .ds-* (boutons, cartes, badges…) fonctionnent aussi bien
        côté app que côté landing.

   Voir DESIGN-SYSTEM.md pour la documentation, les arbitrages et la grille
   de correspondance Tailwind.
   ========================================================================== */

:root {
  /* ========================================================================
     1. COULEUR
     ====================================================================== */

  /* --- Vert de marque : un vert pétillant, légèrement dégradé (émeraude) ---
     Une seule rampe met fin à la fragmentation historique des bleus
     (#0b5cff / #1d4ed8 / #3b82f6). Teinte fraîche et vive ; le primaire reste
     assez profond pour garder un bon contraste du texte blanc. */
  --ds-brand-50:  #ecfdf5;
  --ds-brand-100: #d1fae5;
  --ds-brand-200: #a7f3d0;
  --ds-brand-300: #6ee7b7;
  --ds-brand-400: #34d399;
  --ds-brand-500: #10b981;   /* vert pétillant — début du dégradé signature     */
  --ds-brand-600: #059669;
  --ds-brand-700: #047857;   /* ★ primaire — texte/bords sur fond clair          */
  --ds-brand-800: #065f46;   /* dégradés profonds, hovers                        */
  --ds-brand-900: #064e3b;
  --ds-brand-action: #06c270; /* vert vif : aplats/CTA app, segment VN, brandColor */

  /* Alias sémantiques de marque */
  --ds-brand:        var(--ds-brand-700);
  --ds-brand-strong: var(--ds-brand-800);
  --ds-brand-tint:   var(--ds-brand-50);
  --ds-brand-soft:   rgba(4, 120, 87, 0.10);   /* fonds doux, états actifs       */
  --ds-brand-ghost:  rgba(6, 194, 112, 0.07);  /* survol/sélection très léger    */
  --ds-on-brand:     #ffffff;

  /* --- Neutres (valeurs canoniques = celles de l'app, zéro régression) ----- */
  --ds-ink:     #111111;   /* titres, texte fort           */
  --ds-text:    #333333;   /* corps de texte               */
  --ds-muted:   #888888;   /* texte secondaire / légendes  */
  --ds-line:    #e5e5e5;   /* bordures, séparateurs        */
  --ds-surface: #f7f7f7;   /* fonds de cartes/zones        */
  --ds-bg:      #ffffff;   /* fond de page                 */

  /* --- Neutres étendus (rampe « slate » utilisée par la landing) ----------- */
  --ds-gray-900: #111827;
  --ds-gray-800: #1f2937;
  --ds-gray-700: #374151;
  --ds-gray-600: #475569;
  --ds-gray-500: #64748b;
  --ds-gray-450: #6b7280;
  --ds-gray-400: #94a3b8;
  --ds-gray-350: #9ca3af;
  --ds-gray-300: #d1d5db;
  --ds-gray-200: #e5e7eb;
  --ds-gray-100: #f1f5f9;
  --ds-gray-50:  #f8fafc;

  /* --- Accents sémantiques ------------------------------------------------- */
  /* Orange = Service Après-Vente (APV) / véhicule d'occasion (cf. config.json) */
  --ds-accent-orange:        #f5811f;
  --ds-accent-orange-strong: #ea580c;
  --ds-accent-orange-ink:    #9a3412;
  --ds-accent-orange-soft:   #fff7ed;
  --ds-accent-orange-tint:   #ffedd5;

  --ds-success:        #16a34a;
  --ds-success-strong: #007f3d;
  --ds-success-soft:   #e6f7ed;
  --ds-success-ink:    #1e7e34;

  --ds-warning:        #c2570f;
  --ds-warning-soft:   #fff3e8;

  --ds-danger:         #ef4444;
  --ds-danger-strong:  #b91c1c;

  --ds-info-purple:    #a855f7;   /* accent ponctuel (rare)  */
  --ds-info-purple-soft: #ede9fe;

  /* --- Segments métier (carte) — alignés sur config.json ------------------- */
  --ds-segment-vn:  #06c270;   /* Voiture Neuve            */
  --ds-segment-apv: #f5811f;   /* Service Après-Vente      */

  /* ========================================================================
     2. TYPOGRAPHIE
     ====================================================================== */
  /* Police unifiée : Inter (choix de l'app) + repli système (choix landing). */
  --ds-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, sans-serif;

  /* Échelle de tailles (px) */
  --ds-text-xs:   11px;   /* eyebrows, labels MAJ, micro-légendes */
  --ds-text-sm:   12px;
  --ds-text-base: 14px;   /* corps app                            */
  --ds-text-md:   16px;
  --ds-text-lg:   17px;   /* chapeau / lead                       */
  --ds-text-xl:   20px;   /* h1 app, titres de carte              */
  --ds-text-2xl:  24px;
  --ds-text-3xl:  28px;   /* h2 app                               */
  --ds-text-4xl:  36px;   /* h2 landing                           */
  --ds-text-5xl:  52px;   /* hero landing                         */

  /* Graisses */
  --ds-weight-regular:   400;
  --ds-weight-medium:    500;
  --ds-weight-semibold:  600;
  --ds-weight-bold:      700;
  --ds-weight-extrabold: 800;   /* hero marketing uniquement       */

  /* Interlignes */
  --ds-leading-tight:   1.12;
  --ds-leading-snug:    1.25;
  --ds-leading-normal:  1.5;
  --ds-leading-relaxed: 1.65;

  /* Interlettrage */
  --ds-tracking-tight:   -0.02em;  /* grands titres            */
  --ds-tracking-snug:    -0.01em;  /* titres moyens            */
  --ds-tracking-wide:     0.05em;  /* eyebrows / labels MAJ    */
  --ds-tracking-wider:    0.1em;

  /* ========================================================================
     3. ESPACEMENT (base 4px)
     ====================================================================== */
  --ds-space-1:  4px;
  --ds-space-2:  8px;
  --ds-space-3:  12px;
  --ds-space-4:  16px;
  --ds-space-5:  20px;
  --ds-space-6:  24px;
  --ds-space-8:  32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-14: 56px;
  --ds-space-16: 64px;

  /* ========================================================================
     4. RAYONS
     ====================================================================== */
  --ds-radius-sm:   6px;
  --ds-radius:      8px;    /* défaut (= --radius app)   */
  --ds-radius-md:   10px;
  --ds-radius-lg:   12px;
  --ds-radius-xl:   16px;   /* modales, grandes cartes   */
  --ds-radius-2xl:  20px;   /* sections CTA              */
  --ds-radius-pill: 999px;  /* puces, docks, boutons ronds */

  /* ========================================================================
     5. OMBRES
     ====================================================================== */
  --ds-shadow-xs:  0 1px 3px rgba(0, 0, 0, 0.10);
  --ds-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
  --ds-shadow-md:  0 10px 25px rgba(0, 0, 0, 0.08);
  --ds-shadow-lg:  0 10px 30px rgba(0, 0, 0, 0.06);
  --ds-shadow-xl:  0 24px 48px rgba(15, 23, 42, 0.18);
  /* Lueurs de marque */
  --ds-shadow-brand:      0 8px 18px rgba(4, 120, 87, 0.24);
  --ds-shadow-brand-lg:   0 14px 34px rgba(6, 194, 112, 0.16);
  --ds-shadow-brand-glow: 0 36px 110px rgba(6, 194, 112, 0.26);
  /* Anneau de focus accessible */
  --ds-focus-ring: 0 0 0 3px rgba(4, 120, 87, 0.18);

  /* ========================================================================
     6. DÉGRADÉS
     ====================================================================== */
  --ds-gradient-brand:      linear-gradient(90deg, #10b981, #06c270);   /* signature — mix pétillant */
  --ds-gradient-brand-135:  linear-gradient(135deg, #10b981, #06c270);
  --ds-gradient-brand-deep: linear-gradient(120deg, #047857, #065f46);  /* sections CTA */
  --ds-gradient-text:       linear-gradient(90deg, #047857, #34d399);
  --ds-gradient-text-tri:   linear-gradient(90deg, #10b981, #34d399, #6ee7b7);
  --ds-gradient-page:       linear-gradient(180deg, #ffffff, rgba(6, 194, 112, 0.04));

  /* ========================================================================
     7. MOUVEMENT
     ====================================================================== */
  --ds-ease:            cubic-bezier(0.25, 1, 0.5, 1);    /* défaut (= --ease app)   */
  --ds-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);   /* révélations hero        */
  --ds-ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);

  --ds-duration-fast:   0.15s;   /* micro-interactions      */
  --ds-duration:        0.3s;    /* transitions courantes   */
  --ds-duration-slow:   0.6s;    /* changements d'écran app */
  --ds-duration-slower: 0.8s;

  /* ========================================================================
     8. PROFONDEUR (z-index)
     ====================================================================== */
  --ds-z-background:    -1;     /* orbes flottants          */
  --ds-z-base:          1;
  --ds-z-map-controls:  450;    /* chips/panneaux sur carte */
  --ds-z-map-hint:      560;
  --ds-z-sticky:        1000;   /* header fixe              */
  --ds-z-modal:         1000;
  --ds-z-modal-close:   1002;
  --ds-z-overlay-high:  8000;   /* modale « communes »      */
  --ds-z-demo:          9000;   /* mode démonstration       */
  --ds-z-cursor:        9600;

  /* ========================================================================
     9. MISE EN PAGE
     ====================================================================== */
  --ds-sidebar:           240px;
  --ds-sidebar-collapsed: 92px;
  --ds-container:         1080px;  /* landing                 */
  --ds-container-app:     1160px;  /* listes app              */
  --ds-container-wide:    1200px;  /* écran message           */
}

/* ==========================================================================
   ALIAS DE COMPATIBILITÉ
   --------------------------------------------------------------------------
   Réexpose les noms courts historiques de styles.css. Les valeurs sont
   IDENTIQUES à l'existant : ce bloc rend le bloc :root de styles.css redondant
   (il peut être supprimé) sans changer un seul pixel de l'app.
   ========================================================================== */
:root {
  --ink:       var(--ds-ink);
  --text:      var(--ds-text);
  --muted:     var(--ds-muted);
  --line:      var(--ds-line);
  --bg:        var(--ds-bg);
  --surface:   var(--ds-surface);
  --brand:     var(--ds-brand);        /* #047857 */
  --brand-600: var(--ds-brand-600);    /* #059669 */
  --brand-700: var(--ds-brand-700);    /* #047857 */
  --brand-800: var(--ds-brand-800);    /* #065f46 */
  --brand-soft: var(--ds-brand-soft);
  --radius:    var(--ds-radius);
  --font-sans: var(--ds-font-sans);
  --ease:      var(--ds-ease);
}

/* ==========================================================================
   PRIMITIVES PARTAGÉES (classes .ds-*)
   Utilisables côté app comme côté landing. Préfixe « ds- » pour éviter toute
   collision avec les classes existantes.
   ========================================================================== */

/* --- Conteneur & section ------------------------------------------------- */
.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-space-8);
}
.ds-section {
  padding-block: var(--ds-space-16);
  border-top: 1px solid var(--ds-line);
}

/* --- Eyebrow & texte en dégradé ------------------------------------------ */
.ds-eyebrow {
  margin: 0;
  color: var(--ds-brand);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
}
.ds-gradient-text {
  background: var(--ds-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: var(--ds-leading-tight);
  padding-bottom: 0.08em;   /* évite le rognage des jambages */
}

/* --- Boutons ------------------------------------------------------------- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  min-height: 40px;
  padding: 0 var(--ds-space-4);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-sm);
  font-family: inherit;
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--ds-duration) var(--ds-ease),
              box-shadow var(--ds-duration) var(--ds-ease),
              background-color var(--ds-duration) var(--ds-ease),
              filter var(--ds-duration) var(--ds-ease);
}
.ds-btn:active:not(:disabled) { transform: scale(0.97); }
.ds-btn:disabled { cursor: not-allowed; opacity: 0.4; }
.ds-btn svg { width: 18px; height: 18px; }

.ds-btn--primary { background: var(--ds-brand); color: var(--ds-on-brand); }
.ds-btn--primary:hover { filter: brightness(0.92); }

.ds-btn--secondary {
  background: var(--ds-bg);
  color: var(--ds-ink);
  border-color: var(--ds-line);
}
.ds-btn--secondary:hover { background: var(--ds-surface); }

.ds-btn--ghost { background: var(--ds-brand-soft); color: var(--ds-brand); }
.ds-btn--ghost:hover { background: var(--ds-brand); color: var(--ds-on-brand); }

.ds-btn--pill { border-radius: var(--ds-radius-pill); padding-inline: var(--ds-space-6); }

/* CTA marketing : dégradé + lueur + reflet animé (reprend le hero d'index.html) */
.ds-btn--cta {
  position: relative;
  overflow: hidden;
  padding: 11px 26px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-gradient-brand);
  color: var(--ds-on-brand);
  font-weight: var(--ds-weight-medium);
  box-shadow: var(--ds-shadow-brand);
}
.ds-btn--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(6, 194, 112, 0.34);
}
.ds-btn--cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 24%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-22deg);
  animation: ds-cta-sweep 3.4s linear infinite;
}

/* --- Cartes -------------------------------------------------------------- */
.ds-card {
  padding: var(--ds-space-6);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-bg);
}
/* Variante « verre » de la landing (feature-container / landing-card) */
.ds-card--glass {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ds-card--lift {
  transition: transform var(--ds-duration) var(--ds-ease),
              box-shadow var(--ds-duration) var(--ds-ease);
}
.ds-card--lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--ds-shadow-md);
}

/* --- Badge / chip / pastille --------------------------------------------- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-semibold);
}
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  height: 36px;
  padding: 0 var(--ds-space-3);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-bg);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-weight-medium);
}

/* --- Champs de formulaire ------------------------------------------------ */
.ds-input {
  width: 100%;
  min-height: 40px;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-bg);
  color: var(--ds-ink);
  font: inherit;
  font-size: var(--ds-text-base);
  transition: border-color var(--ds-duration-slow) var(--ds-ease),
              box-shadow var(--ds-duration-fast) var(--ds-ease);
}
.ds-input:focus {
  outline: none;
  border-color: var(--ds-brand);
  box-shadow: var(--ds-focus-ring);
}
.ds-input:disabled {
  background: var(--ds-gray-50);
  color: var(--ds-gray-450);
  cursor: not-allowed;
}

/* --- Utilitaires --------------------------------------------------------- */
.ds-focus-ring:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.ds-elevate-sm { box-shadow: var(--ds-shadow-sm); }
.ds-elevate-md { box-shadow: var(--ds-shadow-md); }

/* Orbes flottants d'arrière-plan (fond hero / landing) ---------------------
   À poser sur un conteneur en position: relative, ou sur <body class="ds-orbs">. */
.ds-orbs { position: relative; overflow-x: hidden; }
.ds-orbs::before,
.ds-orbs::after {
  content: '';
  position: fixed;
  z-index: var(--ds-z-background);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
}
.ds-orbs::before {
  top: 38%; left: 26%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.4) 0%,
              rgba(6, 194, 112, 0.3) 30%, transparent 70%);
  animation: ds-float 8s ease-in-out infinite;
}
.ds-orbs::after {
  top: 16%; right: 8%; width: 420px; height: 420px; filter: blur(64px);
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%,
              rgba(6, 194, 112, 0.2) 30%, transparent 70%);
  animation: ds-float-right 15s ease-in-out infinite;
}

/* ==========================================================================
   ANIMATIONS PARTAGÉES
   Consolide les keyframes dupliquées entre index.html et styles.css.
   ========================================================================== */
@keyframes ds-cta-sweep   { 0% { left: -40%; } 100% { left: 130%; } }
@keyframes ds-fade-in-up  { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-fade-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-bounce      { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
@keyframes ds-pulse-grow  {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(6, 194, 112, 0.7); }
  50%  { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(6, 194, 112, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(6, 194, 112, 0); }
}
@keyframes ds-spin        { to { transform: rotate(360deg); } }
@keyframes ds-modal-enter { 0% { opacity: 0; transform: translateY(-20px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ds-float {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(60px, -40px) scale(1.1); }
  50%  { transform: translate(220px, 20px) scale(0.92); }
  75%  { transform: translate(90px, 40px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes ds-float-right {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-80px, 40px) scale(1.1); }
  60%  { transform: translate(-150px, -20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Respect des préférences d'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .ds-orbs::before,
  .ds-orbs::after,
  .ds-btn--cta::before {
    animation: none;
  }
  .ds-btn, .ds-card--lift { transition: none; }
}