/* =============================================================================
   beeMob TAD — Design tokens                              assets/css/tokens.css
   -----------------------------------------------------------------------------
   Source de vérité : docs/ARCHITECTURE.md §5. Ce fichier ne contient QUE des
   propriétés personnalisées (et la police) : aucun sélecteur de composant.

   Règles d'usage
   - Les composants n'utilisent que les tokens SÉMANTIQUES (--bg, --text,
     --primary…). Les palettes primitives (--teal-600, --slate-200…) ne servent
     qu'à construire les tokens sémantiques, aux pastilles de ligne et aux cas
     de marque explicitement documentés.
   - Aucune couleur en dur ailleurs que dans les palettes primitives ci-dessous.

   Thème clair / sombre — une seule définition par token
   Chaque token sémantique porte ses DEUX valeurs sur une seule ligne :

       --bg: var(--_light, var(--slate-50)) var(--_dark, var(--night-900));
                          └── valeur claire ──┘          └── valeur sombre ──┘

   Deux interrupteurs internes décident laquelle s'applique :
       thème actif   → l'interrupteur vaut `initial` (valeur invalide) :
                       var() utilise donc sa valeur de repli ;
       thème inactif → l'interrupteur est vide : var() ne produit rien.
   Résultat : impossible d'oublier la variante sombre d'un token, et les
   sélecteurs de thème (§5.2) ne font que basculer deux interrupteurs.
   Fonctionne dans tous les navigateurs gérant les propriétés personnalisées
   (pas besoin de light-dark()).

   Mouvement complet / réduit — même principe avec --_motion-full et
   --_motion-reduced (voir §5 de ce fichier et assets/css/motion.css).

   Pour ajouter un token : `--nom: var(--_light, CLAIR) var(--_dark, SOMBRE);`
   Les interrupteurs --_light, --_dark, --_motion-* sont PRIVÉS : ne jamais
   les utiliser hors de ce fichier.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   0. Police — Inter variable auto-hébergée (optionnelle)
   Si assets/fonts/InterVariable.woff2 est absent, la pile --font-sans prend
   le relais (Segoe UI Variable, system-ui…) sans erreur visible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
}


:root {
  /* ---------------------------------------------------------------------------
     1. Palettes primitives
     ------------------------------------------------------------------------ */

  /* Teal — couleur de marque (« Mob » du logo beeMob).
     600 = boutons et texte de marque sur fond clair (AA : 4,96:1 sur blanc). */
  --teal-50: #ecf8fb;
  --teal-100: #d2eff6;
  --teal-200: #a6deec;
  --teal-300: #6cc6dc;
  --teal-400: #33a9c6;
  --teal-500: #1590ae;
  --teal-600: #007a98;
  --teal-700: #00627b;
  --teal-800: #034f63;
  --teal-900: #073f4f;
  --teal-950: #04232d;

  /* Vert abeille — accent (« bee » du logo).
     500 = décor et icônes ; 700 = texte (AA : 6,3:1 sur blanc). */
  --green-50: #f3faeb;
  --green-100: #e3f3d0;
  --green-200: #c8e8a5;
  --green-300: #a3d76e;
  --green-400: #84c443;
  --green-500: #6ab133;
  --green-600: #518c24;
  --green-700: #3f6b1f;
  --green-800: #34561d;
  --green-900: #2d491c;

  /* Ardoise — neutres du thème clair (textes, bordures, fonds).
     450 et 550 sont des pas intermédiaires ajoutés pour l'accessibilité :
     450 = contour de champ ≥ 3:1 (WCAG 1.4.11 / RGAA 3.3) sur blanc et sur --bg ;
     550 = texte discret ≥ 4,5:1 sur --bg, --surface et --surface-3. */
  --slate-0: #ffffff;
  --slate-25: #fbfcfd;
  --slate-50: #f5f7fa;
  --slate-100: #eef2f6;
  --slate-200: #e2e8ef;
  --slate-300: #cdd6e0;
  --slate-400: #9aa8b8;
  --slate-450: #808fa0;
  --slate-500: #6b7a8c;
  --slate-550: #5b6a7c;
  --slate-600: #4d5b6c;
  --slate-700: #364353;
  --slate-800: #222d3b;
  --slate-900: #131c28;
  --slate-950: #0a1019;

  /* Nuit — bleus profonds du thème sombre (jamais de noir pur) et encre de la
     sidebar d'exploitation. 850 = encre de la sidebar en thème clair ;
     300 = contour de champ ≥ 3:1 sur les surfaces sombres. */
  --night-950: #070c16;
  --night-900: #0b1220;
  --night-850: #0c1724;
  --night-800: #111a2b;
  --night-700: #172238;
  --night-600: #1b2740;
  --night-500: #253350;
  --night-400: #34466a;
  --night-300: #56688a;

  /* États — rouge (danger), ambre (avertissement), bleu (information).
     Les pas 300/400 servent au thème sombre (texte et pleins lisibles). */
  --red-50: #fef3f2;
  --red-100: #fee4e2;
  --red-300: #fda29b;
  --red-400: #f97066;
  --red-500: #f04438;
  --red-600: #d92d20;
  --red-700: #b42318;

  --amber-50: #fffaeb;
  --amber-100: #fef0c7;
  --amber-300: #fec84b;
  --amber-400: #fdb022;
  --amber-500: #f79009;
  --amber-600: #dc6803;
  --amber-700: #b54708;

  --blue-50: #eff8ff;
  --blue-100: #d1e9ff;
  --blue-300: #84caff;
  --blue-400: #53b1fd;
  --blue-500: #2e90fa;
  --blue-600: #1570ef;
  --blue-700: #175cd3;

  /* Lignes sans couleur GTFS — signalétique transport.
     Toutes ≥ 5:1 avec un texte blanc : identiques dans les deux thèmes
     (une ligne garde son identité visuelle). */
  --line-1: #c2185b; /* magenta */
  --line-2: #1d4ed8; /* bleu */
  --line-3: #c2410c; /* orange */
  --line-4: #6d28d9; /* violet */
  --line-5: #15803d; /* vert */
  --line-6: #0e7490; /* pétrole */
  --line-7: #8d5a00; /* ocre */
  --line-8: #b91c1c; /* rouge */


  /* ---------------------------------------------------------------------------
     2. Typographie
     ------------------------------------------------------------------------ */
  --font-sans: "Inter", "InterVariable", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Titres « display » : même pile, toujours associée à --tracking-tight. */
  --font-display: "Inter", "InterVariable", "Segoe UI Variable Display", "Segoe UI", system-ui,
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* Tailles (rem : respectent le zoom et la taille de police du navigateur) */
  --fs-xs: .75rem;      /* 12px — mentions, eyebrows */
  --fs-sm: .875rem;     /* 14px — interface dense, tableaux */
  --fs-base: 1rem;      /* 16px — texte courant, champs */
  --fs-md: 1.125rem;    /* 18px — chapeau */
  --fs-lg: 1.25rem;     /* 20px — h3 */
  --fs-xl: 1.5rem;      /* 24px — h2 mobile */
  --fs-2xl: 1.875rem;   /* 30px — h1 mobile, h2 bureau */
  --fs-3xl: 2.25rem;    /* 36px — h1 bureau */
  --fs-4xl: 3rem;       /* 48px — grands chiffres */
  --fs-display: clamp(2.25rem, 4.5vw + 1rem, 4rem); /* titres héros */

  /* Graisses */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Interlignes et approche */
  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --tracking-tight: -0.02em;
  --tracking-wide: .08em;


  /* ---------------------------------------------------------------------------
     3. Espacements (grille de 4px)
     ------------------------------------------------------------------------ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;


  /* ---------------------------------------------------------------------------
     4. Formes, mise en page, plans
     ------------------------------------------------------------------------ */

  /* Rayons — client : lg / xl pour les grandes cartes ; manager : sm / md. */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Mise en page */
  --container: 1200px;
  --container-narrow: 880px;
  --header-h: 68px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;

  /* Plans (z-index) — toujours passer par ces tokens */
  --z-base: 1;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 50;
  --z-modal: 60;
  --z-toast: 70;
  --z-tooltip: 80;


  /* ---------------------------------------------------------------------------
     5. Mouvement (§5.4) — valeur normale, puis valeur « mouvement réduit »
     Documentation complète : assets/css/motion.css et docs/GUIDE-MOTION-DESIGN.md
     ------------------------------------------------------------------------ */

  /* Interrupteurs privés (mouvement complet par défaut) */
  --_motion-full: initial;
  --_motion-reduced: ;

  /* Durées — en mouvement réduit : 1ms (et non 0) pour que les événements
     transitionend / animationend continuent d'être émis. */
  --dur-instant: var(--_motion-full, 90ms) var(--_motion-reduced, 1ms);   /* pression, micro-état */
  --dur-fast: var(--_motion-full, 150ms) var(--_motion-reduced, 1ms);     /* survol, focus, couleur */
  --dur-base: var(--_motion-full, 220ms) var(--_motion-reduced, 1ms);     /* apparition, onglets */
  --dur-slow: var(--_motion-full, 320ms) var(--_motion-reduced, 1ms);     /* tiroirs, modales, révélations */
  --dur-slower: var(--_motion-full, 480ms) var(--_motion-reduced, 1ms);   /* entrée de page, graphiques */
  --dur-epic: var(--_motion-full, 900ms) var(--_motion-reduced, 1ms);     /* compteurs, succès */
  --dur-draw: var(--_motion-full, 1400ms) var(--_motion-reduced, 1ms);    /* tracé d'itinéraire */

  /* Courbes (identiques dans les deux modes) */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);     /* par défaut */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* entrées : décélération marquée */
  --ease-in: cubic-bezier(.7, 0, .84, 0);         /* sorties : accélération */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);    /* déplacement d'un point à un autre */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* petits éléments ludiques (léger rebond) */

  /* Distances de translation — 0px en mouvement réduit */
  --move-1: var(--_motion-full, 4px) var(--_motion-reduced, 0px);
  --move-2: var(--_motion-full, 8px) var(--_motion-reduced, 0px);
  --move-3: var(--_motion-full, 16px) var(--_motion-reduced, 0px);
  --move-4: var(--_motion-full, 32px) var(--_motion-reduced, 0px);

  /* Chorégraphie */
  --stagger-step: var(--_motion-full, 45ms) var(--_motion-reduced, 0ms);
  /* Échelles — neutralisées (1) en mouvement réduit : aucun effet de zoom */
  --scale-press: var(--_motion-full, .97) var(--_motion-reduced, 1);
  --scale-pop: var(--_motion-full, 1.04) var(--_motion-reduced, 1);


  /* ---------------------------------------------------------------------------
     6. Tokens sémantiques — var(--_light, CLAIR) var(--_dark, SOMBRE)
     ------------------------------------------------------------------------ */

  /* Interrupteurs privés (thème clair par défaut) */
  --_light: initial;
  --_dark: ;

  /* Fonds et surfaces */
  --bg: var(--_light, var(--slate-50)) var(--_dark, var(--night-900));
  --surface: var(--_light, var(--slate-0)) var(--_dark, var(--night-800));
  --surface-2: var(--_light, var(--slate-50)) var(--_dark, var(--night-700));
  --surface-3: var(--_light, var(--slate-100)) var(--_dark, var(--night-600));
  --surface-inverse: var(--_light, var(--slate-900)) var(--_dark, var(--slate-100));

  /* Textes — contrastes vérifiés (clair sur --bg / sombre sur --surface) :
     text 16,2 / 16,6 · muted 6,5 / 7,2 · subtle 5,2 / 5,3 (≥ 4,5 partout). */
  --text: var(--_light, var(--slate-900)) var(--_dark, var(--slate-100));
  --text-muted: var(--_light, var(--slate-600)) var(--_dark, var(--slate-400));
  --text-subtle: var(--_light, var(--slate-550)) var(--_dark, var(--slate-450));
  --text-inverse: var(--_light, var(--slate-0)) var(--_dark, var(--slate-900));

  /* Bordures — --border : séparateurs et cartes (décoratif) ;
     --border-strong : contours de champs et contrôles (≥ 3:1). */
  --border: var(--_light, var(--slate-200)) var(--_dark, var(--night-500));
  --border-strong: var(--_light, var(--slate-450)) var(--_dark, var(--night-300));

  /* Primaire (teal) — boutons, liens, sélection.
     Texte sur fond --primary : --on-primary (4,96:1 clair / 5,95:1 sombre). */
  --primary: var(--_light, var(--teal-600)) var(--_dark, var(--teal-400));
  --primary-hover: var(--_light, var(--teal-700)) var(--_dark, var(--teal-300));
  --primary-active: var(--_light, var(--teal-800)) var(--_dark, var(--teal-200));
  --primary-soft: var(--_light, var(--teal-50))
    var(--_dark, color-mix(in srgb, var(--teal-400) 16%, transparent));
  --primary-soft-text: var(--_light, var(--teal-700)) var(--_dark, var(--teal-200));
  --on-primary: var(--_light, var(--slate-0)) var(--_dark, var(--teal-950));

  /* Accent (vert abeille) — décor, icônes, mises en avant.
     Texte sur fond --accent : --on-accent (encre sombre, 7,2:1). */
  --accent: var(--_light, var(--green-500)) var(--_dark, var(--green-400));
  --accent-hover: var(--_light, var(--green-600)) var(--_dark, var(--green-300));
  --accent-soft: var(--_light, var(--green-50))
    var(--_dark, color-mix(in srgb, var(--green-400) 14%, transparent));
  --accent-soft-text: var(--_light, var(--green-700)) var(--_dark, var(--green-300));
  --on-accent: var(--slate-950);

  /* États — sur un fond plein --success / --danger / --info, le texte est
     --text-inverse ; --warning plein n'accepte qu'un texte sombre
     (préférer --warning-soft + --warning-text). */
  --success: var(--_light, var(--green-700)) var(--_dark, var(--green-400));
  --success-soft: var(--_light, var(--green-50))
    var(--_dark, color-mix(in srgb, var(--green-400) 14%, transparent));
  --success-text: var(--_light, var(--green-700)) var(--_dark, var(--green-300));

  --warning: var(--_light, var(--amber-500)) var(--_dark, var(--amber-400));
  --warning-soft: var(--_light, var(--amber-50))
    var(--_dark, color-mix(in srgb, var(--amber-400) 14%, transparent));
  --warning-text: var(--_light, var(--amber-700)) var(--_dark, var(--amber-300));

  --danger: var(--_light, var(--red-600)) var(--_dark, var(--red-400));
  --danger-soft: var(--_light, var(--red-50))
    var(--_dark, color-mix(in srgb, var(--red-400) 16%, transparent));
  --danger-text: var(--_light, var(--red-700)) var(--_dark, var(--red-300));

  --info: var(--_light, var(--blue-600)) var(--_dark, var(--blue-400));
  --info-soft: var(--_light, var(--blue-50))
    var(--_dark, color-mix(in srgb, var(--blue-400) 16%, transparent));
  --info-text: var(--_light, var(--blue-700)) var(--_dark, var(--blue-300));

  /* Focus — c'est une COULEUR (outline / box-shadow), ≥ 3:1 sur les surfaces. */
  --focus-ring: var(--_light, var(--teal-600)) var(--_dark, var(--teal-300));

  /* Voile des modales et tiroirs */
  --overlay: var(--_light, color-mix(in srgb, var(--slate-950) 48%, transparent))
    var(--_dark, color-mix(in srgb, var(--night-950) 72%, transparent));


  /* ---------------------------------------------------------------------------
     7. Ombres — en couches (contact + diffusion + ambiance).
     En sombre : moins de couches, plus opaques, teintées nuit.
     ------------------------------------------------------------------------ */
  --shadow-xs:
    var(--_light,
      0 1px 2px color-mix(in srgb, var(--slate-900) 6%, transparent))
    var(--_dark,
      0 1px 2px color-mix(in srgb, var(--night-950) 45%, transparent));

  --shadow-sm:
    var(--_light,
      0 1px 2px color-mix(in srgb, var(--slate-900) 5%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--slate-900) 8%, transparent))
    var(--_dark,
      0 1px 2px color-mix(in srgb, var(--night-950) 45%, transparent),
      0 2px 6px -1px color-mix(in srgb, var(--night-950) 40%, transparent));

  --shadow-md:
    var(--_light,
      0 1px 2px color-mix(in srgb, var(--slate-900) 4%, transparent),
      0 4px 10px -2px color-mix(in srgb, var(--slate-900) 7%, transparent),
      0 14px 28px -8px color-mix(in srgb, var(--slate-900) 10%, transparent))
    var(--_dark,
      0 1px 2px color-mix(in srgb, var(--night-950) 40%, transparent),
      0 8px 20px -6px color-mix(in srgb, var(--night-950) 55%, transparent));

  --shadow-lg:
    var(--_light,
      0 2px 4px color-mix(in srgb, var(--slate-900) 4%, transparent),
      0 12px 24px -6px color-mix(in srgb, var(--slate-900) 10%, transparent),
      0 28px 56px -14px color-mix(in srgb, var(--slate-900) 16%, transparent))
    var(--_dark,
      0 2px 6px color-mix(in srgb, var(--night-950) 40%, transparent),
      0 20px 40px -10px color-mix(in srgb, var(--night-950) 65%, transparent));

  --shadow-xl:
    var(--_light,
      0 4px 8px color-mix(in srgb, var(--slate-900) 4%, transparent),
      0 20px 40px -8px color-mix(in srgb, var(--slate-900) 14%, transparent),
      0 48px 96px -24px color-mix(in srgb, var(--slate-900) 24%, transparent))
    var(--_dark,
      0 4px 10px color-mix(in srgb, var(--night-950) 45%, transparent),
      0 32px 72px -16px color-mix(in srgb, var(--night-950) 75%, transparent));

  /* Halo coloré des actions principales (CTA, bouton primaire au survol) */
  --shadow-primary:
    var(--_light,
      0 1px 2px color-mix(in srgb, var(--teal-900) 22%, transparent),
      0 8px 20px -6px color-mix(in srgb, var(--teal-600) 50%, transparent))
    var(--_dark,
      0 1px 2px color-mix(in srgb, var(--night-950) 50%, transparent),
      0 8px 24px -8px color-mix(in srgb, var(--teal-400) 45%, transparent));


  /* ---------------------------------------------------------------------------
     8. Sidebar d'exploitation — encre foncée dans les DEUX thèmes
     (plus profonde que --bg en sombre), accents teal.
     ------------------------------------------------------------------------ */
  --sidebar-bg: var(--_light, var(--night-850)) var(--_dark, var(--night-950));
  --sidebar-text: var(--slate-200);         /* 14,6:1 */
  --sidebar-text-muted: var(--slate-400);   /* 7,4:1 */
  --sidebar-active-bg: color-mix(in srgb, var(--teal-400) 18%, transparent);
  --sidebar-border: color-mix(in srgb, var(--slate-0) 8%, transparent);


  /* ---------------------------------------------------------------------------
     9. Graphiques — palette catégorielle ordonnée (1 = marque, 6 = neutre
     « autres »). Clair : toutes ≥ 3:1 sur blanc (WCAG 1.4.11) ;
     sombre : teintes éclaircies pour rester lisibles sur la nuit.
     ------------------------------------------------------------------------ */
  --chart-1: var(--_light, var(--teal-600)) var(--_dark, var(--teal-400));
  --chart-2: var(--_light, var(--green-600)) var(--_dark, var(--green-400));
  --chart-3: var(--_light, var(--amber-600)) var(--_dark, var(--amber-400));
  --chart-4: var(--_light, var(--line-4))
    var(--_dark, color-mix(in srgb, var(--line-4) 60%, var(--slate-0)));
  --chart-5: var(--_light, var(--line-1))
    var(--_dark, color-mix(in srgb, var(--line-1) 60%, var(--slate-0)));
  --chart-6: var(--_light, var(--slate-450)) var(--_dark, var(--slate-400));

  /* Mode de couleur natif (contrôles de formulaire, barres de défilement) */
  color-scheme: light;
}


/* -----------------------------------------------------------------------------
   10. Bascule de thème — seuls les interrupteurs changent.
   :root                                   → clair (défaut)
   :root[data-theme="dark"]                → sombre (choix explicite)
   système sombre sans data-theme="light"  → sombre
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --_light: ;
  --_dark: initial;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --_light: ;
    --_dark: initial;
    color-scheme: dark;
  }
}


/* -----------------------------------------------------------------------------
   11. Bascule de mouvement
   prefers-reduced-motion: reduce   → réduit, sauf choix explicite data-motion="full"
   :root[data-motion="reduced"]     → réduit (choix explicite de l'utilisateur)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
    --_motion-full: ;
    --_motion-reduced: initial;
  }
}

:root[data-motion="reduced"] {
  --_motion-full: ;
  --_motion-reduced: initial;
}


/* -----------------------------------------------------------------------------
   12. Contraste renforcé (préférence système « augmenter le contraste »)
   Textes secondaires et bordures foncés d'un cran, dans les deux thèmes.
   -------------------------------------------------------------------------- */
@media (prefers-contrast: more) {
  :root {
    --text-muted: var(--_light, var(--slate-700)) var(--_dark, var(--slate-300));
    --text-subtle: var(--_light, var(--slate-600)) var(--_dark, var(--slate-400));
    --border: var(--_light, var(--slate-450)) var(--_dark, var(--night-300));
    --border-strong: var(--_light, var(--slate-600)) var(--_dark, var(--slate-400));
  }
}


/* -----------------------------------------------------------------------------
   13. Impression — toujours le thème clair (billets, feuilles de route).
   Les deux sélecteurs couvrent tous les cas avec la même spécificité que les
   règles sombres ci-dessus ; placés en dernier, ils l'emportent.
   -------------------------------------------------------------------------- */
@media print {
  :root:not([data-theme="light"]),
  :root[data-theme="light"] {
    --_light: initial;
    --_dark: ;
    color-scheme: light;
  }
}