/* ============================================================================
 * MINE2PROT — DESIGN TOKENS UNIFIÉS (v3.4 · Lot 45 amélioration design)
 *
 * Fichier partagé chargé via <link rel="stylesheet"> dans toutes les maquettes
 * produit (admin-tenant, manager-op, mobile-chauffeur, dashboard-minier, etc.).
 *
 * Surcouche du design-system.html pour :
 *   - Standardiser les tokens (alias --m2p-* ET --xxx pour compat)
 *   - Scale typographique formalisée (ratio 1.25x)
 *   - Spacing system 8pt grid
 *   - Shadows multi-niveaux (0-5)
 *   - Transitions + easing tokens
 *   - Reset accessibilité WCAG 2.1 AA
 *   - Micro-interactions
 *
 * NE TOUCHE PAS au logo, à la palette de marque (cas #4 STOP charte v3).
 * Compatible avec tokens locaux existants des maquettes.
 * ============================================================================ */

:root {
  /* ===================================================================
   * COULEURS — Aliases pour homogénéiser --m2p-* et --xxx
   * =================================================================== */

  /* Palette Mine2Prot (canonical = m2p-*, alias court = sans préfixe) */
  --m2p-primary: #1F4E79;
  --m2p-primary-2: #2D6FAB;
  --m2p-primary-3: #1A4068;     /* hover darker */
  --m2p-primary-light: #DBEAFE; /* backgrounds info */
  --m2p-accent: #F59E0B;
  --m2p-accent-2: #EA580C;
  --m2p-accent-3: #D97706;
  --m2p-dark: #0F172A;
  --m2p-success: #10B981;
  --m2p-success-2: #059669;
  --m2p-success-bg: #D1FAE5;
  --m2p-warn: #F59E0B;
  --m2p-warn-bg: #FEF3C7;
  --m2p-error: #EF4444;
  --m2p-error-2: #B91C1C;
  --m2p-error-bg: #FEE2E2;
  --m2p-info: #06B6D4;
  --m2p-info-bg: #ECFEFF;
  --m2p-purple: #7C3AED;        /* RH réseau / investisseur */
  --m2p-purple-bg: #EDE9FE;

  /* Slate scale (neutral) — réutilisable */
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50: #F8FAFC;

  /* ===================================================================
   * TYPOGRAPHIE — Scale 1.25x (Major Third) à partir de 14px base
   * Cohérent avec la skill ui-design-system §typography
   * =================================================================== */

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --fs-xs: 0.6875rem;    /* 11px — captions, micro */
  --fs-sm: 0.8125rem;    /* 13px — labels, tags */
  --fs-base: 0.875rem;   /* 14px — body */
  --fs-md: 1rem;         /* 16px — emphasized body */
  --fs-lg: 1.25rem;      /* 20px — h4 */
  --fs-xl: 1.5rem;       /* 24px — h3 */
  --fs-2xl: 1.875rem;    /* 30px — h2 */
  --fs-3xl: 2.25rem;     /* 36px — h1 */
  --fs-4xl: 3rem;        /* 48px — hero */

  /* Line-heights cohérents */
  --lh-tight: 1.2;       /* h1-h4 */
  --lh-snug: 1.4;        /* sub-titles, lead */
  --lh-normal: 1.55;     /* body */
  --lh-relaxed: 1.75;    /* long-form */

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Letter-spacing pour headings */
  --tracking-tight: -0.02em;
  --tracking-wide: 0.02em;
  --tracking-widest: 0.1em;

  /* ===================================================================
   * SPACING — 8pt grid system
   * =================================================================== */

  --space-0: 0;
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ===================================================================
   * RADIUS — déjà défini dans design-system.html, on aligne
   * =================================================================== */

  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* ===================================================================
   * SHADOWS — 5 niveaux + inset (vs 2 dans design-system.html)
   * =================================================================== */

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 20px 50px rgba(15, 23, 42, 0.18);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 3px rgba(31, 78, 121, 0.35);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.35);

  /* ===================================================================
   * MOTION — Transitions + easing (manquait totalement)
   * =================================================================== */

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 500ms;

  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ===================================================================
   * Z-INDEX — Layer system
   * =================================================================== */

  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-overlay: 200;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-tooltip: 1200;
  --z-notification: 1300;

  /* ===================================================================
   * TOUCH TARGETS — WCAG 2.1 AA (min 44×44px desktop, 48×48px mobile)
   * =================================================================== */

  --touch-target-min: 44px;
  --touch-target-mobile: 48px;

  /* ===================================================================
   * BREAKPOINTS (en référence — utilisés via @media)
   * xs: 0, sm: 480, md: 640, lg: 768, xl: 1024, 2xl: 1280
   * =================================================================== */
}

/* ============================================================================
 * RESET ACCESSIBILITÉ WCAG 2.1 AA
 * ============================================================================ */

/* Focus visible : tous éléments focusables ont un anneau visible */
*:focus {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--m2p-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-focus);
  transition: box-shadow var(--duration-fast) var(--ease-out);
}

/* Cas spéciaux : boutons, liens, inputs avec focus plus discret intégré */
button:focus-visible,
.btn:focus-visible,
a.s-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  box-shadow: var(--shadow-focus);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--m2p-primary);
  outline-offset: 0;
  border-color: var(--m2p-primary);
  box-shadow: var(--shadow-focus);
}

/* Skip to content link (a11y obligatoire) */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--m2p-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--r-md);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  z-index: var(--z-tooltip);
  transition: top var(--duration-base) var(--ease-out);
  text-decoration: none;
}
.skip-to-content:focus {
  top: 8px;
}

/* Touch targets — boutons et liens cliquables ≥ 44px */
.btn,
button.btn,
.s-link,
.tab,
[role="button"] {
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Exception btn-sm autorisée (UI dense) mais target via padding invisible */
.btn-sm {
  min-height: 32px;
  position: relative;
}
.btn-sm::before {
  content: "";
  position: absolute;
  inset: -6px;
  /* extension invisible pour atteindre 44px touch */
}

/* Liens dans le texte : underline obligatoire pour distinction visuelle */
a:not(.btn):not(.s-link):not(.no-underline) {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* prefers-reduced-motion : annuler les animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
 * MICRO-INTERACTIONS (transitions cohérentes)
 * ============================================================================ */

.btn,
button.btn {
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
  transition-duration: var(--duration-fast);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Cards lift on hover (subtil) */
.card {
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.card[onclick],
.card[role="button"],
.card.clickable {
  cursor: pointer;
}
.card[onclick]:hover,
.card[role="button"]:hover,
.card.clickable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Sidebar links : background + indicateur gauche au hover/active */
.s-link {
  position: relative;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out);
}
.s-link:hover {
  background: rgba(255, 255, 255, 0.04);
}
.s-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--m2p-accent);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* Table rows : highlight on hover */
table tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}
table tbody tr:hover:not([style*="background"]) {
  background: var(--slate-50);
}

/* Inputs : transition border on focus */
input, select, textarea {
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

/* Pills/badges : subtle lift on hover si interactif */
.pill[onclick],
.badge[onclick] {
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}
.pill[onclick]:hover,
.badge[onclick]:hover {
  transform: scale(1.05);
}

/* Smooth scroll global + scroll-margin pour ancres */
html {
  scroll-behavior: smooth;
}
[id] {
  scroll-margin-top: 80px;
}

/* ============================================================================
 * HIÉRARCHIE VISUELLE — Standardisation typo cross-maquettes
 * ============================================================================ */

/* h1-h6 alignés sur la scale 1.25x */
h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
}
h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
}
h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
h4 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

/* Topbar h1 dashboards : un peu plus petit pour densité */
.topbar h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}

/* Crumb (breadcrumb) */
.crumb {
  font-size: var(--fs-xs);
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-1);
}

/* ============================================================================
 * COMPOSANTS — Améliorations utilitaires
 * ============================================================================ */

/* Hero stats : amélioration uniforme */
.hero-stats {
  gap: var(--space-3);
}

.hero-stats .stat {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.hero-stats .stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Cards : padding interne cohérent */
.card {
  border-radius: var(--r-lg);
}

/* Badges/pills : standardisation visuelle */
.badge,
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px var(--space-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.badge.ok,
.pill.active {
  background: var(--m2p-success-bg);
  color: #065F46;
}
.badge.warn {
  background: var(--m2p-warn-bg);
  color: #92400E;
}
.badge.danger,
.pill.danger {
  background: var(--m2p-error-bg);
  color: var(--m2p-error-2);
}
.badge.info {
  background: var(--m2p-info-bg);
  color: #0E7490;
}

/* Loading state utility */
.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}
.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ============================================================================
 * MOBILE-SPECIFIC (mobile-chauffeur.html + dashboards en mobile)
 * ============================================================================ */

@media (max-width: 768px) {
  /* Touch targets plus grands sur mobile (Material Design 3) */
  .btn,
  button.btn,
  .s-link,
  [role="button"] {
    min-height: var(--touch-target-mobile);
  }

  /* Espacement plus généreux mobile */
  .content,
  .topbar {
    padding: var(--space-4);
  }
}

/* Safe area insets pour iOS notch / Android gesture bar */
@supports (padding: max(0px)) {
  .topbar,
  .main-mobile,
  .bottom-nav {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  .bottom-nav {
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }
}

/* ============================================================================
 * DARK MODE READY (préparation future, pas activé)
 * Si la maquette définit .theme-dark sur <body>, ces tokens prennent le relai
 * ============================================================================ */

@media (prefers-color-scheme: dark) {
  .respect-color-scheme {
    --slate-50: #0F172A;
    --slate-100: #1E293B;
    --slate-200: #334155;
    /* Préparation seulement, l'activation nécessite passes maquette par maquette */
  }
}

/* ============================================================================
 * PRINT — Optimisation impression (factures, rapports)
 * ============================================================================ */

@media print {
  .sidebar,
  .topbar .actions,
  .btn,
  .skip-to-content {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .card {
    break-inside: avoid;
    border: 1px solid var(--slate-300) !important;
    box-shadow: none !important;
  }
}