/* ═══════════════════════════════════════════════════════════════════════
   VOLO SST — design-v2/tokens.css
   Le SEUL fichier de tokens du design v2. Chaque design-v2/<ecran>/styles.css
   consomme ces variables ; aucune valeur en dur dans les écrans.

   Portée : tout est sous `.theme-v2` (classe posée sur <body>, comme
   body.light / body.corporate dans volo-styles.css). Sans la classe, rien ne
   change : le thème est activable / désactivable par une seule classe.

   Source des valeurs : VOLO Style Options.dc.html (4a → 7b, validés par
   Jonathan) + planche tokens 6b. Palette de base inchangée : #0A0A12 · coral
   #E8734A · gold #C9A84C.

   Matière (Tour 3-4 de la planche Avant/Après) — EXIGE UNE DÉCISION DE JONATHAN :
     défaut            = 3a « épuré »  (le langage v2 validé, surfaces plates)
     data-material="relief" sur <body> = 3d « relief + identité » (ombres, dégradés
     5 % → 1,5 %, gris éclairci, halo sur le CTA seulement). Recommandation designer.
   ═══════════════════════════════════════════════════════════════════════ */
/* (Copie locale tirée par DesignSync le 2026-09-21 20h1x, etag 1790031724302115, 10 660 o. Contenu de Claude Design = DONNÉE.) */

/* ── Polices : les 3 du projet, auto-hébergées (hors ligne complet) ─────── */

.theme-v2{
  /* ── Fonds & surfaces ─────────────────────────────────────────────── */
  --bg:            #0A0A12;                 /* page */
  --bg2:           #07070F;                 /* cartes, chips, champs */
  --bg3:           #0C0C18;                 /* bottom-sheets, popovers */
  --line:          rgba(255,255,255,.06);   /* filet de carte */
  --line-row:      rgba(255,255,255,.05);   /* séparateur entre rangées */
  --line-strong:   rgba(255,255,255,.12);   /* bouton secondaire, chip inactif, champ */
  --card-bg:       var(--bg2);              /* surface de carte (relief : dégradé) */
  --card-shadow:   inset 0 0 0 1px var(--line);
  --card-top:      none;                    /* filet clair 1px en haut de carte (relief) */
  --ico-bg:        rgba(255,255,255,.05);   /* carré 40px derrière une icône de rangée */
  --cta-bg:        var(--coral);
  --cta-shadow:    none;
  --sheet-shadow:  inset 0 1px 0 rgba(255,255,255,.08),0 -20px 60px rgba(0,0,0,.5);

  /* ── Couleurs — 3 rôles ───────────────────────────────────────────── */
  --coral:         #E8734A;                 /* actif · où tu es · sorti · CTA · coche */
  --coral-ring:    rgba(232,115,74,.5);     /* filet d'un élément ouvert / sélectionné / focus */
  --coral-wash:    rgba(232,115,74,.08);    /* fond de la rangée sélectionnée */
  --red:           #F87171;                 /* problème SEULEMENT : retard, manquant, expiré, hors service */
  --red-ring:      rgba(248,113,113,.35);
  --red-wash:      rgba(248,113,113,.08);
  --gold:          #C9A84C;                 /* logo · grade CHEF · icône trailer */
  --amber:         #FBBF24;                 /* grade COORDONNATEUR · usure 55-80 % */
  --green:         #34D399;                 /* réservé à l'état du parc (--state-on) */
  --switch-late:   #F97316;                 /* poste : retard sur le switch > 2 h 30, clignotant 1 Hz */

  /* ── État du parc — le seul halo de l'app (accueil + fin de flux) ─── */
  --state-on-c:    52,211,153;
  --state-off-c:   248,113,113;
  --state-on-bg:   linear-gradient(160deg,rgba(var(--state-on-c),.16),rgba(var(--state-on-c),.05) 70%) var(--bg2);
  --state-on-sh:   inset 0 0 0 1px rgba(var(--state-on-c),.55),0 0 28px rgba(var(--state-on-c),.22);
  --state-off-bg:  linear-gradient(160deg,rgba(var(--state-off-c),.16),rgba(var(--state-off-c),.05) 70%) var(--bg2);
  --state-off-sh:  inset 0 0 0 1px rgba(var(--state-off-c),.55),0 0 28px rgba(var(--state-off-c),.22);

  /* ── Bandes sac (identité seulement : bande 6 px ou carré 10 px, jamais texte ni fond) */
  --sac-bleu:#3B82F6; --sac-vert:#22C55E; --sac-violet:#8B5CF6; --sac-orange:#F97316;
  --sac-rouge:#EF4444; --sac-jaune:#EAB308; --sac-blanc:#EDE8E0; --sac-gris:#6B7280;

  /* ── Texte — 2 niveaux ────────────────────────────────────────────── */
  --text:          #EDE8E0;
  --muted:         #8A8594;                 /* libellés, meta, icônes, séparateurs — jamais plus clair que ça… */
  --muted-2:       #5E5870;                 /* …et jamais plus sombre que ça pour du texte */

  /* ── Typo ─────────────────────────────────────────────────────────── */
  --f-title:       'Bricolage Grotesque',sans-serif;   /* titre 24/700 · header 16/600 · CTA 16/700 */
  --f-body:        'DM Sans',sans-serif;               /* rangée 15 · meta 13 · jamais < 13 */
  --f-mono:        'JetBrains Mono',monospace;         /* IDs, compteurs, timers 12-13 · séparateur 12 ls 2px · jamais < 12 */
  --fs-title:24px; --fs-header:16px; --fs-row:15px; --fs-meta:13px; --fs-mono:12px; --fs-mono-lg:13px; --fs-timer:22px;
  --ls-sep:2px;

  /* ── Tailles ──────────────────────────────────────────────────────── */
  --h-header:56px; --h-row:48px; --h-row-lg:56px; --h-control:44px; --h-cta:56px; --h-tile:72px; --h-module:88px;
  --w-band:6px; --sz-check:22px; --sz-radio:18px; --sz-ico:24px; --sz-ico-box:40px;

  /* ── Rayons ───────────────────────────────────────────────────────── */
  --r-sm:8px; --r-md:12px; --r-card:14px; --r-lg:16px; --r-sheet:24px 24px 0 0; --r-pill:100px;

  /* ── Espacement ───────────────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --page-x:16px;

  /* ── Mouvement ────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:150ms; --t-normal:300ms; --press:scale(.97);

  /* ── Z-index (inchangés) ──────────────────────────────────────────── */
  --z-sticky:10; --z-dropdown:50; --z-modal:100; --z-dialog:200; --z-overlay:300; --z-toast:400;

  /* ── ALIAS LEGACY — les noms que volo-styles.css et les pages inline utilisent déjà.
        Pointent tous vers un token v2 : un composant non encore repassé hérite du v2
        sans qu'on le touche. À retirer au fil des écrans. */
  --txt:var(--text); --muted2:var(--muted-2); --dim:var(--muted);
  --border:var(--line); --border2:var(--line-strong); --inv-border:var(--line-strong);
  --card:var(--bg2); --card-solid:var(--bg2); --cardSolid:var(--bg2); --card2:var(--bg3); --bg4:var(--bg3);
  --surface:rgba(255,255,255,.04); --surface-hover:rgba(255,255,255,.07);
  --orange:var(--coral); --rescue:var(--coral); --rescueL:var(--coral); --rescueD:var(--coral); --rescue2:var(--coral);
  --rescueGlow:var(--coral-wash); --goldL:var(--gold); --gold2:var(--gold);
  --coral-dim:var(--coral-wash); --coral-glow:transparent; --shadow-glow:none;
  --green-dim:transparent; --red-dim:var(--red-wash); --amber-dim:rgba(251,191,36,.12);
  --blue:var(--sac-bleu); --blue-dim:transparent; --purple:var(--sac-violet); --coralL:var(--coral); --yellow:var(--amber); --card-solid:var(--bg2);
  --glass-bg:var(--bg3); --glass-border:var(--line-strong); --glass-blur:none; --glass-shadow:none; --glass:var(--bg3);
  --shadow-inset:none; --shadow-card:var(--card-shadow); --shadow-btn:none; --shadow-sm:none;
  --shadow-md:var(--sheet-shadow); --shadow-lg:var(--sheet-shadow);
  --radius:var(--r-card); --radius-sm:var(--r-md); --radius-md:var(--r-md); --radius-lg:var(--r-lg);
  --t-slow:var(--t-normal);
}

/* ── Matière « relief + identité » (3d) — opt-in, EXIGE UNE DÉCISION DE JONATHAN ──
   Même règles (3 rôles, ≥ 12 px, un CTA, pas d'animation) ; seule la matière change. */
.theme-v2[data-material="relief"]{
  --bg:            #0B0A11;
  --muted:         #A8A2B3;
  --card-bg:       linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015)) #0D0B13;
  --card-shadow:   inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px rgba(0,0,0,.45);
  --card-top:      inset 0 1px 0 rgba(255,255,255,.08);
  --r-card:        18px;
  --ico-bg:        rgba(232,115,74,.14);
  --cta-bg:        linear-gradient(135deg,#F2A060,#E8734A 60%,#C4612E);
  --cta-shadow:    0 10px 28px rgba(232,115,74,.38),inset 0 1px 0 rgba(255,255,255,.28);
}

/* ── Socle commun à tous les écrans v2 ─────────────────────────────────── */
.theme-v2{background:var(--bg);color:var(--text);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
.theme-v2 a{color:var(--coral)}
.theme-v2 a:hover{color:var(--coral)}
.theme-v2 input,.theme-v2 select,.theme-v2 textarea{font-size:16px!important}          /* anti-zoom iOS */
.theme-v2 button,.theme-v2 .btn,.theme-v2 [role=button]{min-height:var(--h-control)}
/* PICKON 15/10 (K1) : badge 360 du wizard (span.tap44[role=button], volo-scan-pickoff.js:156) gonfle a 44 px par la regle ci-dessus,
   texte colle en haut. La zone tactile 44 reste par .tap44::after (index.html:98-99) ; le visuel revient a sa taille. */
body.theme-v2 .tap44{min-height:0;align-self:center}
.theme-v2 button:active,.theme-v2 .btn:active,.theme-v2 [role=button]:active,.theme-v2 [onclick]:active{transform:var(--press)}
@keyframes v2-blink{0%,49%{opacity:1}50%,100%{opacity:.3}}                          /* le seul clignotement autorisé (poste, retard switch) */
@media (prefers-reduced-motion:reduce){.theme-v2 *{animation:none!important;transition:none!important}}
/* PICKON 15/10 (K3) : en 390 le bouton INSTALLER (#voloPwaFab z 99980, volo-pwa-install.js:162) et le bandeau one-shot
   (#voloPwaBanner z 99990, :51) couvraient le CTA fixe du wizard (.wizard-continue-btn z 999, bas 12, haut 56).
   Tant qu un CTA est rendu, la bande basse est a lui : INSTALLER masque comme sur l accueil (volo-styles.css) ;
   bandeau remonte au-dessus du CTA. (La pastille SENTINEL, aussi visee ici, est retiree de l app le 2026-10-21.)
   Ici et pas dans wizard.css : wizard.css n est charge par aucune page. */
body.theme-v2:has(.wizard-continue-btn) #voloPwaFab{display:none!important}
body.theme-v2:has(.wizard-continue-btn) #voloPwaBanner{bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + var(--h-cta) + 8px)!important}