/* =====================================================
   BRAVYXO — Design tokens V2  (css/tokens.css)
   "Le terrain parle. L'entreprise avance."
   Chargé AVANT toutes les autres feuilles, sur toutes les pages.
   Thème par défaut : Anthracite (sombre).
   Thème optionnel : Soleil (clair, fort contraste) via <html data-theme="soleil">.
   Polices système uniquement : fonctionne hors Internet.
   ===================================================== */
:root {
  color-scheme: dark;

  /* ---------- MARQUE : orange chantier ---------- */
  --orange-50:  #fff3e8;
  --orange-100: #ffe0c2;
  --orange-300: #ffa65c;
  --orange-400: #ff8a33;
  --orange-500: #ff6a00;   /* = logo, action principale */
  --orange-600: #e85d00;   /* pressé */
  --orange-700: #b84800;   /* texte orange sur fond clair (AA sur blanc) */

  /* ---------- NEUTRES : anthracite (légèrement froid, comme l'acier) ---------- */
  --gris-0:   #0a0b0d;     /* fond app */
  --gris-50:  #0f1114;     /* fond 2 (sidebar, barre d'onglets) */
  --gris-100: #15181c;     /* surface 1 (cartes) */
  --gris-150: #1b1f24;     /* surface 2 (cartes imbriquées, champs) */
  --gris-200: #232830;     /* surface 3 (survol, sélection) */
  --gris-300: #2e343d;     /* bordure forte */
  --gris-400: #48505b;     /* désactivé */
  --gris-500: #6c7480;     /* texte tertiaire */
  --gris-600: #a0a8b3;     /* texte secondaire */
  --gris-800: #dfe3e8;
  --gris-900: #f4f6f8;     /* texte principal */

  /* ---------- SÉMANTIQUES (une couleur = un sens) ---------- */
  --vert-500:  #2fbf71;  --vert-bg:  rgba(47,191,113,.14);  --vert-bord:  rgba(47,191,113,.38);
  --jaune-500: #f5b800;  --jaune-bg: rgba(245,184,0,.14);   --jaune-bord: rgba(245,184,0,.40);   /* ATTENTION (≠ orange marque) */
  --rouge-500: #ff4f4f;  --rouge-bg: rgba(255,79,79,.14);   --rouge-bord: rgba(255,79,79,.42);   /* BLOQUANT */
  --bleu-500:  #4ea3ff;  --bleu-bg:  rgba(78,163,255,.14);  --bleu-bord:  rgba(78,163,255,.38);  /* INFO / EN COURS */

  /* ---------- RÔLES SÉMANTIQUES (à utiliser dans les composants) ---------- */
  --bg:            var(--gris-0);
  --bg-2:          var(--gris-50);
  --surface-1:     var(--gris-100);
  --surface-2:     var(--gris-150);
  --surface-3:     var(--gris-200);
  --surface-inverse: var(--gris-900);
  --bord:          rgba(255,255,255,.08);
  --bord-fort:     rgba(255,255,255,.14);
  --bord-focus:    var(--orange-500);
  --texte:         var(--gris-900);
  --texte-2:       var(--gris-600);
  --texte-3:       var(--gris-500);
  --texte-desactive: var(--gris-400);
  --accent:        var(--orange-500);
  --accent-presse: var(--orange-600);
  --accent-survol: var(--orange-400);
  --accent-texte:  var(--orange-400);      /* orange lisible sur sombre */
  --accent-bg:     rgba(255,106,0,.12);
  --accent-bord:   rgba(255,106,0,.40);
  --sur-accent:    #140a02;                /* texte SUR bouton orange : anthracite */
  --succes: var(--vert-500);  --attention: var(--jaune-500);  --danger: var(--rouge-500);  --info: var(--bleu-500);
  --voile:         rgba(5,6,8,.64);

  /* ---------- TYPOGRAPHIE (polices système uniquement) ---------- */
  --police:        -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titre:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-chiffre: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --police-mono:   ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle (ratio ~1.2, arrondie au pixel) */
  --fs-11: .6875rem;  /* 11 — bureau uniquement : légende de graphique */
  --fs-12: .75rem;    /* 12 — métadonnées bureau */
  --fs-13: .8125rem;  /* 13 — texte secondaire bureau, libellés */
  --fs-15: .9375rem;  /* 15 — corps bureau / minimum terrain */
  --fs-17: 1.0625rem; /* 17 — corps terrain, boutons */
  --fs-20: 1.25rem;   /* 20 — titres de carte */
  --fs-24: 1.5rem;    /* 24 — titre d'écran mobile */
  --fs-30: 1.875rem;  /* 30 — titre d'écran bureau, KPI */
  --fs-40: 2.5rem;    /* 40 — KPI héros */
  --fs-56: 3.5rem;    /* 56 — chrono de journée */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800;
  --lh-serre: 1.1;  --lh-titre: 1.25;  --lh-corps: 1.5;
  --ls-titre: -.02em;  --ls-chiffre: -.01em;  --ls-label: .01em;

  /* ---------- ESPACEMENTS (base 4) ---------- */
  --sp-0: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;
  --gouttiere-mobile: 16px;  --gouttiere-bureau: 32px;

  /* ---------- CIBLES TACTILES ---------- */
  --h-sm: 36px;     /* bureau uniquement */
  --h-md: 44px;     /* minimum absolu (Apple HIG) */
  --h-tactile: 48px;/* minimum terrain avec gants */
  --h-lg: 52px;     /* champ terrain, bouton secondaire terrain */
  --h-xl: 60px;     /* bouton principal terrain */
  --h-geant: 72px;  /* action du moment : Commencer / Terminer */
  --h-micro: 88px;  /* bouton stop dictée */

  /* ---------- RAYONS ---------- */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---------- ÉLÉVATIONS (lumière du dessus + ombre courte, pas de halo orange) ---------- */
  --e-0: none;
  --e-1: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.40);
  --e-2: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.30);
  --e-3: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.50), 0 4px 10px rgba(0,0,0,.30);
  --e-accent: 0 6px 18px rgba(255,106,0,.28);   /* UNIQUEMENT le bouton principal */
  --anneau-focus: 0 0 0 3px rgba(255,106,0,.45);

  /* ---------- MOUVEMENT ---------- */
  --d-instant: 80ms;
  --d-rapide: 140ms;
  --d-moyen: 220ms;
  --d-lent: 320ms;
  --d-recit: 520ms;
  --ease-sortie: cubic-bezier(.2,.8,.2,1);
  --ease-entree: cubic-bezier(.4,0,1,1);
  --ease-bascule: cubic-bezier(.65,0,.35,1);
  --ease-ressort: cubic-bezier(.34,1.4,.64,1);

  /* ---------- PROFONDEUR (z-index) ---------- */
  --z-base: 0;  --z-eleve: 10;  --z-collant: 20;  --z-nav: 50;  --z-sidebar: 60;
  --z-popover: 70;  --z-voile: 80;  --z-feuille: 90;  --z-toast: 100;  --z-bandeau: 110;  --z-splash: 200;

  /* ---------- MISE EN PAGE ---------- */
  --largeur-mobile: 480px;  --largeur-lecture: 720px;  --largeur-bureau: 1280px;
  --sidebar: 248px;  --sidebar-rail: 72px;  --tabbar: 64px;
  --safe-haut: env(safe-area-inset-top, 0px);  --safe-bas: env(safe-area-inset-bottom, 0px);
}

/* ---------- THÈME SOLEIL (ouvrier + chef sur site) — fort contraste ---------- */
:root[data-theme="soleil"] {
  color-scheme: light;
  --bg: #ffffff;  --bg-2: #f3f3f1;
  --surface-1: #ffffff;  --surface-2: #f1f2f3;  --surface-3: #e6e8eb;
  --surface-inverse: #0a0b0d;
  --bord: #c4c8ce;  --bord-fort: #0a0b0d;
  --texte: #0a0b0d;  --texte-2: #2c3138;  --texte-3: #4a515b;  --texte-desactive: #8a9099;
  --accent-texte: var(--orange-700);
  --accent-survol: var(--orange-600);
  --accent-bg: #fff1e5;  --accent-bord: #e85d00;
  --sur-accent: #140a02;
  --vert-500: #0f7a3f;  --jaune-500: #8a6400;  --rouge-500: #c81e1e;  --bleu-500: #0b5cc2;
  --vert-bg: #e3f6ea; --jaune-bg: #fff4cc; --rouge-bg: #fde5e5; --bleu-bg: #e3efff;
  --vert-bord: #0f7a3f; --jaune-bord: #8a6400; --rouge-bord: #c81e1e; --bleu-bord: #0b5cc2;
  --e-1: 0 0 0 1px #c4c8ce;  --e-2: 0 0 0 2px #0a0b0d;  --e-3: 0 12px 32px rgba(0,0,0,.22), 0 0 0 2px #0a0b0d;
  --e-accent: none;
  --anneau-focus: 0 0 0 3px #0a0b0d;
  --voile: rgba(0,0,0,.45);
}

/* ---------- Respect du réglage « Réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --d-instant: 0ms; --d-rapide: 0ms; --d-moyen: 0ms; --d-lent: 0ms; --d-recit: 0ms; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================
   ALIAS V1 → V2 (à supprimer au lot 7, quand plus rien ne les utilise)
   Les ~700 styles en ligne générés par le JS continuent de fonctionner.
   ===================================================== */
:root, :root[data-theme="soleil"] {
  --noir: var(--bg);              --noir-2: var(--bg-2);
  --carte: var(--surface-1);      --carte-pleine: var(--surface-1);   --carte-2: var(--surface-2);
  --orange: var(--accent);        --orange-clair: var(--accent-texte); --orange-fonce: var(--orange-600);
  --vert: var(--vert-500);        --rouge: var(--rouge-500);          --ambre: var(--jaune-500);   --bleu: var(--bleu-500);
  --jaune: var(--jaune-500);
  --texte-doux: var(--texte-2);
  --rayon: var(--r-lg);           --rayon-sm: var(--r-sm);
  --degrade-orange: var(--accent);       /* les dégradés deviennent un aplat */
  --ombre-orange: var(--e-accent);
  --fs-titre: var(--fs-24); --fs-soustitre: var(--fs-17); --fs-kpi: var(--fs-30); --fs-corps: var(--fs-15); --fs-label: var(--fs-13);
}

/* V2 — logos PNG à fond noir : en mode Soleil, présentés comme une icône d'application
   (pastille anthracite arrondie) au lieu d'un carré noir brut sur fond clair. */
:root[data-theme="soleil"] img[src*="logo-r.png"],
:root[data-theme="soleil"] img[src*="logo-complet.png"] {
  background: #0a0b0d;
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: 0 1px 2px rgba(10, 11, 13, .18);
}