/* ══════════════════════════════════════════
   VOLO SST v22.0 — Main Stylesheet
   Extracted from index.html for performance
   ══════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box}

/* ── TACTICAL INTERFERENCE — subtle persistent effects ── */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.008) 3px,rgba(0,0,0,.008) 4px);opacity:.5}
/* iOS Safari — prevent auto-zoom on focus + touch targets */
input,select,textarea{font-size:16px!important}
button,.btn{min-height:44px}
@supports(-webkit-touch-callout:none){html{height:-webkit-fill-available}body{min-height:-webkit-fill-available}}
:root {
  /* ── Surfaces (Raycast layered) ── */
  --bg:   #0A0A12;
  --bg2:  #07070F;
  --bg3:  #0C0C18;
  --bg4:  #1A1A2A;

  /* ── Accent ── */
  --coral:        #E8734A;
  --coral-dim:    rgba(232,115,74,.18);
  --coral-glow:   rgba(232,115,74,.30);
  --coral-ring:   rgba(232,115,74,.55);

  /* ── Statuts ── */
  --green:        #34D399;
  --green-dim:    rgba(52,211,153,.15);
  --red:          #F87171;
  --red-dim:      rgba(248,113,113,.15);
  --amber:        #FBBF24;
  --amber-dim:    rgba(251,191,36,.15);
  --blue:         #60A5FA;
  --blue-dim:     rgba(96,165,250,.15);

  /* ── Texte ── */
  --text:         #EDE8E0;
  --muted:        #8A8594;
  --muted2:       #5E5870;

  /* ── Borders ── */
  --border:       rgba(255,255,255,.07);
  --border2:      rgba(255,255,255,.12);

  /* ── Shadows ── */
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.35);
  --shadow-card:  0 2px 12px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04);
  --shadow-btn:   0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3);

  /* ── Glass (modals/toasts SEULEMENT) ── */
  --glass-bg:     rgba(255,255,255,.07);
  --glass-border: rgba(255,255,255,.15);
  --glass-blur:   blur(20px);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 4px 20px rgba(0,0,0,.4);

  /* ── Typography ── */
  --f-title: 'Bricolage Grotesque', sans-serif;
  --f-body:  'DM Sans', sans-serif;
  --f-mono:  'JetBrains Mono', monospace;

  /* ── Radii ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 86px;

  /* ── Easing ── */
  --ease: cubic-bezier(.22,1,.36,1);

  /* ── Legacy aliases (compat — ne pas supprimer) ── */
  --gold:      #C9A84C;
  --txt:       #EDE8E0;
  --card:      rgba(7,7,15,.96);
  --card2:     #0C0C18;
  --cardSolid: #07070F;
  --orange:    #E8734A;

  /* ── V9.5 additions ── */
  --dim:          rgba(255,255,255,.25);
  --surface:      rgba(255,255,255,.04);
  --surface-hover:rgba(255,255,255,.07);
  --glass:        rgba(255,255,255,.04);
  --inv-border:   rgba(255,255,255,.08);
  --radius-lg:    20px;
  --shadow-glow:  0 0 20px rgba(232,115,74,.15);

  /* ── Spacing scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* ── Border radius aliases ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* ── Transitions ── */
  --t-fast:   150ms;
  --t-normal: 300ms;
  --t-slow:   500ms;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.5);

  /* ── Z-index scale ── */
  --z-sticky:   10;
  --z-dropdown: 50;
  --z-modal:    100;
  --z-dialog:   200;
  --z-overlay:  300;
  --z-toast:    400;
}

/* ── THEME: CORPORATE — noir/orange/gris (boss mode) ── */
body.corporate{
  --bg:#111114;--card:rgba(26,26,30,.95);--card2:rgba(32,32,38,.95);--cardSolid:#1A1A1E;
  --gold:#E8734A;--goldL:#F2A060;
  --rescue:#E8734A;--rescueL:#F2A060;--rescueD:#C4612E;--rescueGlow:rgba(232,115,74,.12);
  --txt:#E0E0E0;--muted:#9E9E9E;--muted2:#6E6E6E;--border:rgba(232,115,74,.1);--border2:rgba(232,115,74,.06);
  --rescue2:#F2A060;--gold2:#FF8C00;
  --glow:0 0 30px rgba(232,115,74,.08);
  --dim:#6E6E6E;--ghost:#1E1E22;--noir2:#111114;--noir3:#161618;
}
body.corporate .gold-bar{background:linear-gradient(90deg,transparent,#E8734A,#F2A060,#E8734A,transparent)!important;background-size:300% 100%!important}
body.corporate .tg-hero-bar{background:linear-gradient(90deg,transparent,#E8734A 20%,#F2A060 50%,#E8734A 80%,transparent)!important}
body.corporate .header .title{background:linear-gradient(135deg,#E0E0E0,#E8734A,#F2A060)!important;-webkit-background-clip:text!important;background-clip:text!important}
body.corporate .tg-brand-name{background:linear-gradient(135deg,#E0E0E0 0%,#E8734A 35%,#F2A060 65%,#C4612E 100%)!important;-webkit-background-clip:text!important;background-clip:text!important}
body.corporate .tg-div-txt{font-weight:700!important}
/* ── THEME: LIGHT — fond clair ── */
body.light{
  --bg:#FAF7F4;--card:rgba(255,252,249,.96);--card2:rgba(247,242,237,.98);--cardSolid:#FFFCF9;
  --gold:#E8734A;--goldL:#B8960F;
  --rescue:#E8734A;--rescueL:#EA580C;--rescueD:#C4612E;--rescueGlow:rgba(232,115,74,.09);
  --txt:#1A1512;--muted:#7A6E63;--muted2:#A39585;--border:rgba(210,195,180,.7);--border2:rgba(210,195,180,.4);
  --rescue2:#EA580C;--gold2:#D97706;
  --glow:0 0 20px rgba(120,80,40,.04);
  --dim:#A39585;--ghost:#F5F0EB;--noir2:#FAF7F4;--noir3:#F5F0EB;
}
body.light .header{background:rgba(250,247,244,.97)!important;border-bottom-color:rgba(210,195,180,.5)!important;}
body.light .card{backdrop-filter:none;-webkit-backdrop-filter:none;}
body.light .toast{background:#fff!important;color:#0F172A!important;}
body.light .lock-overlay{background:rgba(250,247,244,.99)!important;}
body.light .modal-overlay{background:rgba(15,23,42,.45)!important;}
body.light .confirm-block{background:#fff;}
body.light .gold-bar{opacity:.6;}
body.light input[type=text],body.light input[type=number],body.light textarea{background:#FFFCF9!important;color:#1A1512!important;border-color:rgba(210,195,180,.6)!important;}
body.light .tg-brand-name{background:linear-gradient(135deg,#0F172A 0%,#E8734A 50%,#7A5C20 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:initial;color:#1A1A2E}
body.light .tg-header{background:rgba(250,247,244,.94);border-bottom-color:rgba(232,115,74,.15)}
body.light .tg-brand-sub{color:#6B7280}
body.light .td-pointage{background:linear-gradient(135deg,rgba(232,115,74,.08),rgba(232,115,74,.02));border-color:rgba(232,115,74,.25)}
body.light .td-pick-on{background:rgba(52,211,153,.06);border-color:rgba(52,211,153,.25)}
body.light .td-pick-off{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.2)}
body.light .td-pick-on.td-pick-locked{background:rgba(200,200,200,.15);border-color:rgba(200,200,200,.2)}
body.light .ee-slim{background:rgba(255,255,255,.8);border-color:rgba(232,115,74,.12)}
body.light .td-card{background:#FFFFFF;border-color:transparent;box-shadow:inset 0 0 0 1px rgba(232,115,74,.08),0 2px 8px rgba(0,0,0,.04)}
body.light .td-card::after{opacity:.3}
body.light .td-card-name{color:#1A1A2E}
body.light .td-card-sub{color:rgba(154,130,48,.6)}
body.light .tg-hero-fade{background:linear-gradient(to bottom,rgba(245,240,232,.3) 0%,rgba(245,240,232,0) 25%,rgba(245,240,232,0) 50%,rgba(245,240,232,.98) 100%)}
body.light #app{background:#F5F0E8}
body.light .screen{background:#F5F0E8}
body.light .td-weather-slot{background:rgba(255,255,255,.7);color:#1A1A2E}
body.light .tg-foot-txt{color:#9CA3AF}
body.light .td-group-label{opacity:.8}
.tg-theme-toggle{background:none;border:none;cursor:pointer;padding:4px;margin-right:6px;display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .2s}
.tg-theme-toggle:hover{opacity:1}
body, .header, .card, .toast, .lock-overlay{
  transition:background-color .22s ease,border-color .22s ease,color .15s ease;
}
body{font-family:'DM Sans',sans-serif;font-size:16px;background:var(--bg);color:var(--txt);min-height:100vh;}
@view-transition{navigation:auto}
/* -- View Transitions -- */
@keyframes vt-fade-in{from{opacity:0}to{opacity:1}}
@keyframes vt-fade-out{from{opacity:1}to{opacity:0}}
@keyframes vt-slide-from-right{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes vt-slide-to-left{from{transform:translateX(0);opacity:1}to{transform:translateX(-30px);opacity:0}}
@keyframes vt-slide-from-left{from{transform:translateX(-30px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes vt-slide-to-right{from{transform:translateX(0);opacity:1}to{transform:translateX(30px);opacity:0}}

::view-transition-old(root){animation:.25s ease-out both vt-fade-out}
::view-transition-new(root){animation:.25s ease-out both vt-fade-in}

::view-transition-old(page-content){animation:.3s ease-out both vt-slide-to-left}
::view-transition-new(page-content){animation:.3s ease-in both vt-slide-from-right}

.header{view-transition-name:main-header}
::view-transition-old(main-header){animation:.2s ease-out both vt-fade-out}
::view-transition-new(main-header){animation:.2s ease-in both vt-fade-in}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  ::view-transition-old(page-content),::view-transition-new(page-content),
  ::view-transition-old(main-header),::view-transition-new(main-header){animation-duration:.01s}
}
.app{max-width:460px;margin:0 auto;min-height:100vh;position:relative;z-index:1}
/* ── WIZARD HERO BACKGROUND ── */
body.wiz-bg-pickon::before,body.wiz-bg-pickoff::before{content:'';position:fixed;inset:0;z-index:0;background-size:cover;background-repeat:no-repeat;opacity:.13;pointer-events:none;transition:opacity .9s ease}
body.wiz-bg-pickon::before{background-image:url('./photos/hero-pickon.jpg');background-position:center 25%}
body.wiz-bg-pickoff::before{background-image:url('./photos/hero-pickoff.jpg');background-position:right center}
.gold-bar{height:2px;background:linear-gradient(90deg,transparent,var(--rescue),var(--gold),var(--rescue),transparent);opacity:.6}
/* Ripple effect */
.ripple{position:absolute;border-radius:50%;background:rgba(232,115,74,.25);transform:scale(0);animation:rippleAnim .6s ease-out;pointer-events:none}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}
.header{
  display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 20px;border-bottom:1px solid rgba(232,115,74,.06);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);position:sticky;top:0;z-index:50;background:rgba(10,10,18,.94);
  & img{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(232,115,74,.35);box-shadow:0 0 16px rgba(232,115,74,.15);transition:all .3s cubic-bezier(.4,0,.2,1);
    &:hover{transform:scale(1.12) rotate(3deg);box-shadow:0 0 24px rgba(232,115,74,.3)}
  }
  & .title{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;letter-spacing:0.5px;background:linear-gradient(135deg,#EDE8E0,#E8734A,#E8734A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  & .step-label{font-size:13px;color:var(--muted);letter-spacing:1px}
}
.screen{padding:20px;min-height:calc(100vh - 76px)}
.screen.step-enter{animation:fadeSlide .4s cubic-bezier(.22,1,.36,1)}
@keyframes fadeSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,115,74,.4)}50%{box-shadow:0 0 20px 10px rgba(232,115,74,.1)}}
@keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.4)}50%{box-shadow:0 0 15px 5px rgba(248,113,113,.2)}}
@keyframes pickoffGlow{0%,100%{box-shadow:0 0 15px rgba(248,113,113,.1),0 0 30px rgba(248,113,113,.05)}50%{box-shadow:0 0 25px rgba(248,113,113,.25),0 0 50px rgba(248,113,113,.1)}}
@keyframes pickoffPulse{
  0%{box-shadow:0 0 8px rgba(248,113,113,.15),0 0 20px rgba(248,113,113,.08);border-color:rgba(248,113,113,.5);transform:scale(1)}
  50%{box-shadow:0 0 24px rgba(248,113,113,.4),0 0 48px rgba(248,113,113,.2),inset 0 0 12px rgba(248,113,113,.06);border-color:rgba(248,113,113,.8);transform:scale(1.02)}
  100%{box-shadow:0 0 8px rgba(248,113,113,.15),0 0 20px rgba(248,113,113,.08);border-color:rgba(248,113,113,.5);transform:scale(1)}
}
@keyframes shimmerLine{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes opsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes shimmerBorder{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes sectionSlide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes scanLine{0%{top:10%}100%{top:90%}}
@keyframes stagger1{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
h2{font-family:'Bricolage Grotesque',sans-serif;font-size:24px;letter-spacing:0.5px;color:var(--gold);margin-bottom:14px;text-align:center}
h3{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;letter-spacing:0.3px;color:var(--rescue);margin-bottom:10px;text-align:center}
.card{
  background:var(--card);border:1px solid rgba(232,115,74,.06);border-radius:var(--radius);padding:16px;margin-bottom:12px;cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:relative;overflow:hidden;
  &::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,115,74,.12),transparent);opacity:0;transition:opacity .3s}
  &:hover,&.selected{border-color:var(--gold);background:var(--card2);transform:translateY(-2px);box-shadow:0 8px 32px rgba(232,115,74,.06),0 0 0 1px rgba(232,115,74,.08);
    &::before{opacity:1}
  }
  &.selected{border-color:var(--green)!important;background:rgba(52,211,153,.06)!important;box-shadow:0 0 0 1.5px rgba(52,211,153,.25),0 8px 24px rgba(52,211,153,.1)!important;transform:translateY(-1px)!important}
  &:active{transform:scale(.95);filter:brightness(.9);transition:transform 80ms cubic-bezier(.4,0,.2,1),filter 80ms cubic-bezier(.4,0,.2,1)}
  & .name{font-weight:600;font-size:17px}
  & .sub{font-size:14px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:2px}
  & .role{font-size:13px;color:var(--gold);letter-spacing:1px;font-weight:600}
}
.btn{
  width:100%;padding:16px;border:none;border-radius:var(--radius);font-family:'Bricolage Grotesque',sans-serif;font-size:18px;letter-spacing:0.3px;cursor:pointer;transition:all .25s cubic-bezier(.22,1,.36,1);font-weight:600;position:relative;overflow:hidden;
  &-gold{background:linear-gradient(135deg,var(--rescue),var(--rescueD));color:#fff;box-shadow:0 4px 16px rgba(232,115,74,.2);
    &:hover{box-shadow:0 6px 24px rgba(232,115,74,.35);transform:translateY(-1px)}
  }
  &-blue{background:linear-gradient(135deg,#60A5FA,#3B82F6);color:#fff;box-shadow:0 4px 16px rgba(59,130,246,.2);
    &:hover{box-shadow:0 6px 24px rgba(59,130,246,.35);transform:translateY(-1px)}
  }
  &-green{background:linear-gradient(135deg,#10B981,#059669);color:#fff;box-shadow:0 4px 16px rgba(52,211,153,.2);
    &:hover{box-shadow:0 6px 24px rgba(52,211,153,.35);transform:translateY(-1px)}
  }
  &-orange{background:linear-gradient(135deg,var(--rescueL),var(--rescue));color:#fff;box-shadow:0 4px 16px rgba(242,160,96,.2);
    &:hover{box-shadow:0 6px 24px rgba(242,160,96,.35);transform:translateY(-1px)}
  }
  &-red{background:linear-gradient(135deg,#F87171,#F87171);color:#fff;box-shadow:0 4px 16px rgba(248,113,113,.2)}
  &-outline{background:rgba(232,115,74,.04);border:1px solid rgba(232,115,74,.2);color:var(--gold);padding:12px;font-size:13px;box-shadow:none;letter-spacing:0.3px;
    &:hover,&:active{background:rgba(232,115,74,.1);border-color:rgba(232,115,74,.35)}
  }
  &:active{transform:scale(.94);filter:brightness(.88);transition:transform 80ms cubic-bezier(.4,0,.2,1),filter 80ms cubic-bezier(.4,0,.2,1)}
  &:disabled,&[disabled]{opacity:.5;pointer-events:none;cursor:default}
}
/* ═══ FALLBACK — explicit btn variants (nesting fallback) ═══ */
.btn-gold{background:linear-gradient(135deg,var(--rescue),var(--rescueD))!important;color:#fff!important;box-shadow:0 4px 16px rgba(232,115,74,.2)}
.btn-green{background:linear-gradient(135deg,#10B981,#059669)!important;color:#fff!important;box-shadow:0 4px 16px rgba(52,211,153,.2)}
.btn-orange{background:linear-gradient(135deg,var(--rescueL),var(--rescue))!important;color:#fff!important;box-shadow:0 4px 16px rgba(242,160,96,.2)}
.btn-blue{background:linear-gradient(135deg,#60A5FA,#3B82F6)!important;color:#fff!important}
.btn-red{background:linear-gradient(135deg,#F87171,#F87171)!important;color:#fff!important}
.btn-outline{background:rgba(232,115,74,.04)!important;border:1px solid rgba(232,115,74,.2)!important;color:var(--gold)!important;font-size:13px;letter-spacing:0.3px}
/* ── WCAG 2.4.7 — Focus visible ── */
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold, #E8734A);
  outline-offset: 2px;
}
/* ── Disabled states ── */
.btn:disabled, button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(0.6);
}
/* ── Text truncation ── */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 44px 20px;
  background: var(--card, #141420);
  border: 1px solid var(--border, rgba(232,115,74,.1));
  border-radius: var(--radius-md, 12px);
  color: var(--muted, #8A8594);
}
.empty-state .empty-icon { font-size: 2rem; margin-bottom: 10px; opacity: .5; }
.empty-state .empty-title { font-family: 'Bricolage Grotesque',sans-serif; font-size: .95rem; letter-spacing: .5px; line-height: 1.4; color: var(--muted); }
/* ── SVG consistency ── */
svg { stroke-linecap: round; stroke-linejoin: round; }
/* ── Animation utilities ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.anim-fade { animation: fadeIn var(--t-normal, 300ms) ease forwards; }
.anim-up   { animation: fadeUp var(--t-normal, 300ms) ease forwards; }
/* ═══ FALLBACK — badge variants ═══ */
.badge-green{background:rgba(52,211,153,.12)!important;color:var(--green)!important;border:1px solid rgba(52,211,153,.2)}
.badge-red{background:rgba(248,113,113,.12)!important;color:var(--red)!important;border:1px solid rgba(248,113,113,.2)}
.badge-gold{background:rgba(232,115,74,.12)!important;color:var(--rescue)!important;border:1px solid rgba(232,115,74,.2)}
.badge-blue{background:rgba(59,130,246,.12)!important;color:var(--blue)!important;border:1px solid rgba(59,130,246,.2)}
.badge-orange{background:rgba(242,160,96,.12)!important;color:var(--rescueL)!important;border:1px solid rgba(242,160,96,.2)}
.checklist-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px;
  /* :has() — gold border glow when all items are checked (no unchecked items left) */
  &:has(.checklist-item.checked):not(:has(.checklist-item:not(.checked))){border-color:rgba(52,211,153,.4);box-shadow:0 0 12px rgba(52,211,153,.08)}
}
.checklist-title{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;letter-spacing:0.3px;color:var(--gold);margin-bottom:12px;text-align:center}
.checklist-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .2s;border:1px solid transparent;margin-bottom:6px;-webkit-tap-highlight-color:transparent;
  &:active{transform:scale(.98)}
  &.checked{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.06);
    & .checklist-box{border-color:var(--green);background:var(--green);color:#fff}
  }
}
.checklist-box{width:28px;height:28px;border-radius:8px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:all .2s}
.checklist-label{font-size:14px;color:var(--txt);line-height:1.3}
.checklist-warn{text-align:center;font-size:12px;color:var(--orange);margin-top:8px;font-family:'DM Sans',sans-serif}
.btn-filter{flex:1;padding:10px 8px;min-height:44px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);color:var(--muted);font-family:'Bricolage Grotesque',sans-serif;font-size:12px;letter-spacing:1px;cursor:pointer;transition:all .25s}
.btn-filter.active{border-color:var(--rescue);color:var(--rescue);background:var(--rescueGlow)}
.toast{
  position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100%);padding:12px 24px;border-radius:14px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;z-index:9999;pointer-events:none;max-width:90%;text-align:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:toastIn .4s cubic-bezier(.4,0,.2,1) forwards;
  &-ok{background:rgba(52,211,153,.92);color:#fff}
  &-err{background:rgba(248,113,113,.92);color:#fff}
  &-off{background:rgba(230,126,34,.92);color:#fff}
  &-info{background:rgba(59,130,246,.92);color:#fff}
}
@keyframes toastIn{from{transform:translateX(-50%) translateY(-100%)}to{transform:translateX(-50%) translateY(0)}}
.net-badge{position:fixed;top:8px;right:12px;padding:4px 10px;border-radius:8px;font-size:11px;font-weight:700;letter-spacing:1px;z-index:9998;font-family:'DM Sans',sans-serif}
.net-on{background:var(--green);color:#fff}
.net-off{background:var(--red);color:#fff;animation:pulse 2s infinite}
.btn-sm{padding:14px;font-size:15px}
.btn-nav{display:flex;gap:10px;margin-top:16px}
.btn-nav .btn{flex:1}
.top-back{display:inline-flex;align-items:center;gap:6px;padding:12px 18px;min-height:48px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:14px;font-family:'DM Sans',sans-serif;cursor:pointer;margin-bottom:14px;transition:all .2s}
.top-back:hover,.top-back:active{border-color:var(--rescue);color:var(--txt);background:rgba(232,115,74,.08)}
.stats-row{display:flex;gap:12px;margin:20px 0}
.stat{flex:1;text-align:center;padding:16px 10px;border-radius:12px;background:var(--card)}
.stat .num{font-family:'Bricolage Grotesque',sans-serif;font-size:36px;font-weight:700}
.stat .label{font-size:11px;letter-spacing:0.3px;color:var(--muted);margin-top:4px}
.check{color:var(--green);font-weight:700;font-size:18px}
.badge{
  display:inline-block;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:600;letter-spacing:1px;
  &-green{background:rgba(52,211,153,.12);color:var(--green);border:1px solid rgba(52,211,153,.2)}
  &-red{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.2)}
  &-gold{background:var(--rescueGlow);color:var(--rescue);border:1px solid rgba(232,115,74,.2)}
  &-blue{background:rgba(59,130,246,.12);color:var(--blue);border:1px solid rgba(59,130,246,.2)}
  &-orange{background:rgba(242,160,96,.12);color:var(--rescueL);border:1px solid rgba(242,160,96,.2)}
}
.pin-row{display:flex;gap:12px;justify-content:center;margin:20px 0}
.pin-dot{width:52px;height:60px;border-radius:12px;border:1.5px solid rgba(232,115,74,.15);display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--gold);font-weight:700;transition:all .25s cubic-bezier(.22,1,.36,1);background:var(--noir3)}
.pin-dot.filled{border-color:var(--rescue);box-shadow:0 0 20px rgba(232,115,74,.25);color:var(--rescue)}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:16px auto}
.numpad button{height:54px;border-radius:12px;background:var(--noir3);border:1px solid rgba(232,115,74,.06);color:var(--txt);font-size:22px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s}
.numpad button:active{background:rgba(232,115,74,.1);transform:scale(.95);border-color:var(--rescue)}
.scan-area{background:rgba(10,10,18,.95);border-radius:var(--radius);border:2px solid var(--rescue);padding:24px;text-align:center;position:relative;overflow:hidden;margin-bottom:14px;animation:glowPulse 3s ease infinite}
.scan-line{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--rescue),transparent);animation:scanLine 2s linear infinite;opacity:.7}
.item-scanned{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.3);border-radius:10px;margin-bottom:8px;font-size:15px}
.item-scanned .id{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted)}
.item-btn{padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all .3s cubic-bezier(.22,1,.36,1)}
.item-btn:hover{border-color:var(--rescue);transform:translateX(4px);box-shadow:0 4px 16px rgba(232,115,74,.06)}
.item-btn:active{transform:scale(.98)}
.item-btn .cat{margin-right:8px;font-size:18px}
.confirm-block{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px;backdrop-filter:blur(12px)}
.confirm-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.confirm-label{color:var(--dim);font-size:10px;letter-spacing:0.3px;margin-bottom:4px;margin-top:14px;text-align:center;font-family:'Bricolage Grotesque',sans-serif;text-transform:uppercase}
.confirm-label:first-child{margin-top:0}
.splash-logo{width:160px;height:160px;border-radius:50%;border:3px solid var(--rescue);display:block;margin:0 auto;box-shadow:0 0 40px rgba(232,115,74,.15),0 0 80px rgba(232,115,74,.05)}
.remorque-tabs{display:flex;gap:10px;margin-bottom:14px}
.remorque-tab{flex:1;padding:16px;border-radius:var(--radius-sm);text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;letter-spacing:0.3px;cursor:pointer;border:2px solid var(--border);background:var(--card);color:var(--muted);transition:all .25s}
.remorque-tab.active{border-color:var(--rescue);color:var(--rescue);background:var(--rescueGlow)}
.urgence-btn{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;background:rgba(248,113,113,.85);border:1px solid rgba(248,113,113,.4);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 2px 12px rgba(248,113,113,.3);z-index:100;opacity:.75;transition:opacity .2s}
.urgence-btn:hover{opacity:1}
/* ── Chat FAB + toast ── */
.chat-fab{
  position:fixed;bottom:80px;right:16px;z-index:99;cursor:pointer;transition:all .25s;animation:chatFabIn .4s ease;
  &-btn{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--rescue),var(--rescueD));border:none;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 4px 20px rgba(232,115,74,.35);display:flex;align-items:center;justify-content:center;transition:transform .2s;
    &:hover{transform:scale(1.1)}
  }
  &-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;line-height:20px;text-align:center;border-radius:10px;background:#F87171;color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:0 5px;border:2px solid var(--bg);animation:pulse .8s ease 1}
  &-toast{position:absolute;bottom:60px;right:0;width:260px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 12px;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:chatToastIn .3s ease;pointer-events:none;
    &-name{font-family:'Bricolage Grotesque',sans-serif;font-size:10px;letter-spacing:1px;color:var(--gold);margin-bottom:3px}
    &-text{font-size:12px;color:var(--txt);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    &-time{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);margin-top:3px}
  }
}
@keyframes chatFabIn{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes chatToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.88);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(8px);animation:modalOverlayIn .25s ease}
@keyframes modalOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalScaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.modal{
  background:var(--cardSolid);border:2px solid var(--border);border-radius:var(--radius-lg);padding:20px;max-width:360px;width:100%;max-height:80vh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:modalScaleIn .25s cubic-bezier(.22,1,.36,1);
  & h3{color:var(--gold);margin-bottom:14px;font-size:18px;font-family:'Bricolage Grotesque',sans-serif;letter-spacing:0.3px}
  & input,& select,& textarea{width:100%;padding:12px;border-radius:8px;background:var(--bg);border:1px solid var(--border);color:var(--txt);font-family:'DM Sans',sans-serif;font-size:16px;margin-bottom:12px;transition:border-color .2s;
    &:focus{border-color:var(--rescue);outline:none;box-shadow:0 0 0 3px rgba(232,115,74,.1)}
  }
  /* :has() — highlight modal border when any input is focused */
  &:has(input:focus,select:focus,textarea:focus){border-color:rgba(232,115,74,.25)}
}
.hidden{display:none}
/* Lock screen */
.lock-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,18,.98);z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(20px);
  & .lock-icon{font-size:64px;animation:float 3s ease-in-out infinite}
  & .lock-text{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;letter-spacing:0.5px;color:var(--gold)}
  & .lock-sub{font-size:14px;color:var(--muted);text-align:center;max-width:280px}
}
/* Dashboard */
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;backdrop-filter:blur(12px)}
.dash-item-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(58,36,40,.3)}
.dash-item-row:last-child{border-bottom:none}
.time-ago{font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 8px;border-radius:6px}
.time-ok{background:rgba(52,211,153,.12);color:var(--green)}
.time-warn{background:rgba(230,126,34,.12);color:var(--orange)}
.time-alert{background:rgba(248,113,113,.12);color:var(--red)}
/* History */
.history-item{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:10px;backdrop-filter:blur(12px);transition:all .25s}
.history-item:hover{border-color:rgba(232,115,74,.2);background:var(--card2)}
.h-mode{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:0.3px;padding:3px 10px;border-radius:8px;display:inline-block}
.h-pickon{background:rgba(52,211,153,.15);color:var(--green)}
.h-pickoff{background:rgba(230,126,34,.15);color:var(--orange)}
.h-cancelled{background:rgba(248,113,113,.15);color:var(--red)}
/* Nav grid accueil */
.nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.nav-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.22,1,.36,1);backdrop-filter:blur(12px);
  &:hover,&:active{border-color:var(--rescue);background:var(--card2);transform:translateY(-3px);box-shadow:0 8px 32px rgba(232,115,74,.1)}
  & .nav-icon{font-size:28px;margin-bottom:8px;display:block}
  & .nav-label{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:0.3px;color:var(--muted)}
}
/* Scrollbar */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px;opacity:.5}
@keyframes slideInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 15px rgba(232,115,74,.15)}50%{box-shadow:0 0 30px rgba(232,115,74,.3)}}
/* Photos */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.photo-thumb{
  position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--card);
  & img{width:100%;height:100%;object-fit:cover}
  & .del{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(248,113,113,.9);color:#fff;border:none;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);transition:transform .15s;
    &:active{transform:scale(.9)}
  }
}
.photo-add{
  aspect-ratio:1;border-radius:10px;border:2px dashed var(--rescue);background:rgba(232,115,74,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .25s;color:var(--rescue);gap:4px;
  &:hover,&:active{background:rgba(232,115,74,.1);border-style:solid}
  & .ico{font-size:28px}
  & .lbl{font-size:11px;letter-spacing:1px;font-family:'Bricolage Grotesque',sans-serif}
}
.photo-count{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:0.3px;color:var(--rescue);text-align:center;margin-bottom:6px}

/* ═══════════════════════════════════════════
   ACCUEIL v2 — REDESIGN TACTICAL
═══════════════════════════════════════════ */
/* HERO */
.accueil-hero{
  position:relative;text-align:center;
  padding:24px 16px 18px;overflow:hidden;
}
.accueil-hero-watermark{
  position:absolute;top:-30px;left:50%;transform:translateX(-50%);
  width:280px;height:280px;opacity:.035;filter:saturate(0);
  pointer-events:none;z-index:0;
}
.accueil-badge-wrap{
  position:relative;z-index:1;display:inline-block;
  margin-bottom:14px;
}
.accueil-badge{
  width:108px;height:108px;border-radius:50%;
  padding:3px;
  background:linear-gradient(135deg,rgba(232,115,74,.55),rgba(232,115,74,.35),rgba(232,115,74,.25));
  box-shadow:0 0 0 1px rgba(232,115,74,.18),0 8px 36px rgba(232,115,74,.22),0 0 80px rgba(232,115,74,.07);
  animation:badge-glow 4s ease-in-out infinite;
  display:block;
}
.accueil-badge img{width:100%;height:100%;border-radius:50%;display:block}
@keyframes badge-glow{
  0%,100%{box-shadow:0 0 0 1px rgba(232,115,74,.18),0 8px 36px rgba(232,115,74,.22),0 0 80px rgba(232,115,74,.07)}
  50%{box-shadow:0 0 0 2px rgba(232,115,74,.35),0 8px 44px rgba(232,115,74,.38),0 0 100px rgba(232,115,74,.12)}
}
.accueil-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:24px;letter-spacing:1px;color:var(--txt);line-height:1;
  position:relative;z-index:1;
}
.accueil-title span{color:var(--rescue)}
.accueil-sub{
  font-family:'Bricolage Grotesque',sans-serif;font-size:10px;
  letter-spacing:0.5px;color:var(--muted);margin-top:4px;
  position:relative;z-index:1;
}
.accueil-divider{
  width:100%;height:1px;margin-top:16px;
  background:linear-gradient(90deg,transparent,rgba(232,115,74,.5),rgba(232,115,74,.35),rgba(232,115,74,.5),transparent);
}
/* STATUS PILLS */
.accueil-status{
  display:flex;align-items:center;gap:8px;
  padding:8px 16px;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
}
.accueil-online{
  display:flex;align-items:center;gap:5px;
  background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.25);
  border-radius:20px;padding:4px 10px;
}
.accueil-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 8px var(--green);
  animation:dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.accueil-online span{
  font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:0.3px;color:var(--green);
}
.accueil-pills{flex:1;display:flex;gap:6px;justify-content:center}
.accueil-pill{
  border-radius:20px;padding:3px 10px;
  font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:0.3px;
}
.accueil-pill-gold{background:rgba(232,115,74,.08);border:1px solid rgba(232,115,74,.22);color:var(--gold)}
.accueil-pill-rescue{background:rgba(232,115,74,.08);border:1px solid rgba(232,115,74,.22);color:var(--rescue)}
.accueil-vid{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted)
}
/* USER BANNER */
.accueil-user{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;
  background:var(--card);border:1px solid var(--border2);
  border-left:3px solid var(--rescue);border-radius:14px;
  margin-bottom:14px;position:relative;overflow:hidden;
}
.accueil-user::after{
  content:'';position:absolute;right:-25px;top:-25px;
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,115,74,.07),transparent 70%);
}
.accueil-avatar{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,rgba(232,115,74,.28),rgba(232,115,74,.14));
  border:1.5px solid rgba(232,115,74,.42);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;color:var(--rescue2);
}
.accueil-uname{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:16px;letter-spacing:1px}
.accueil-umeta{
  font-size:10px;color:var(--muted2);margin-top:2px;
  font-family:'JetBrains Mono',monospace;
}
.accueil-utag{
  margin-left:auto;background:rgba(52,211,153,.1);
  border:1px solid rgba(52,211,153,.28);border-radius:6px;
  padding:4px 9px;font-family:'Bricolage Grotesque',sans-serif;
  font-size:9px;letter-spacing:0.3px;color:var(--green);
}
/* STATS v2 */
.accueil-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.accueil-stat{
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;padding:12px 8px;
  text-align:center;position:relative;overflow:hidden;
}
.accueil-stat::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px}
.accueil-stat .snum{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:26px;line-height:1;
}
.accueil-stat .snum.snum-rescue{color:#E8734A}
.accueil-stat .snum.snum-blue{color:#60A5FA}
.accueil-stat .snum.snum-gold{color:#E8734A}
.accueil-stat .snum.snum-green{color:var(--green)}
.accueil-stat .slabel{font-size:8px;letter-spacing:0.3px;color:var(--muted);margin-top:4px;font-family:'Bricolage Grotesque',sans-serif}
/* Stat bottom accent bars */
.accueil-stat.ast-rescue::after{background:#E8734A}
.accueil-stat.ast-blue::after{background:#60A5FA}
.accueil-stat.ast-gold::after{background:#E8734A}
.accueil-stat.ast-green::after{background:var(--green)}
/* PICK BUTTONS v2 */
.accueil-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.accueil-pick{
  position:relative;border:none;border-radius:16px;
  font-family:'Bricolage Grotesque',sans-serif;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:20px 10px;transition:transform .15s;
  &:active{transform:scale(.97) translateY(2px)}
  & .pick2-icon{font-size:26px}
  & .pick2-lbl{font-size:15px;font-weight:700;letter-spacing:0.5px}
  & .pick2-sub{font-size:9px;letter-spacing:1px;opacity:.65;font-family:'DM Sans',sans-serif}
  &::after{
    content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
    transform:skewX(-20deg);animation:shimmer2 3.5s ease-in-out infinite;
  }
}
.accueil-pick-on{
  background:linear-gradient(160deg,#059669,#047857);
  color:#C8E6C9;
  box-shadow:0 8px 28px rgba(52,211,153,.28),inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(52,211,153,.35);
  animation:pick-on-glow 3s ease-in-out infinite;
}
@keyframes pick-on-glow{
  0%,100%{box-shadow:0 8px 28px rgba(52,211,153,.28),inset 0 1px 0 rgba(255,255,255,.1)}
  50%{box-shadow:0 8px 38px rgba(52,211,153,.5),inset 0 1px 0 rgba(255,255,255,.1)}
}
.accueil-pick-off{
  background:linear-gradient(160deg,#C4612E,#7B1A00);
  color:#FFCCBC;
  box-shadow:0 8px 28px rgba(232,115,74,.22),inset 0 1px 0 rgba(255,255,255,.1);
  border:1px solid rgba(232,115,74,.35);
}
/* accueil-pick children + ::after nested above */
@keyframes shimmer2{0%{left:-120%}65%,100%{left:160%}}
/* SECTION LABEL v2 */
.accueil-section{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;margin-top:14px;
  font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:0.5px;color:var(--muted);
}
.accueil-section::before{content:'';width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--rescue))}
.accueil-section::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border2),transparent)}
/* PRIMARY CARDS v2 */
.accueil-pcard{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  padding:15px 16px;border-radius:14px;border:1px solid transparent;
  cursor:pointer;margin-bottom:8px;transition:transform .15s;
}
.accueil-pcard:active{transform:scale(.99) translateY(1px)}
.accueil-pcard::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 2px 2px 0;
}
.apc-gold{background:linear-gradient(135deg,rgba(232,115,74,.10),rgba(232,115,74,.04));border-color:rgba(232,115,74,.3)}
.apc-gold::before{background:linear-gradient(180deg,var(--gold2),var(--gold))}
.apc-teal{background:linear-gradient(135deg,rgba(52,211,153,.09),rgba(0,188,212,.04));border-color:rgba(52,211,153,.25)}
.apc-teal::before{background:linear-gradient(180deg,#4ade80,var(--green))}
.apc-rescue{background:linear-gradient(135deg,rgba(232,115,74,.10),rgba(232,115,74,.03));border-color:rgba(232,115,74,.28)}
.apc-rescue::before{background:linear-gradient(180deg,var(--rescue2),var(--rescue))}
.apc-inv{background:linear-gradient(135deg,rgba(232,115,74,.08),rgba(0,188,212,.03));border-color:rgba(232,115,74,.22)}
.apc-inv::before{background:linear-gradient(180deg,var(--gold),rgba(232,115,74,.3))}
.accueil-pcard-icon{
  width:44px;height:44px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.apc-gold .accueil-pcard-icon{background:rgba(232,115,74,.12);border:1px solid rgba(232,115,74,.25)}
.apc-teal .accueil-pcard-icon{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.22)}
.apc-rescue .accueil-pcard-icon{background:rgba(232,115,74,.1);border:1px solid rgba(232,115,74,.2)}
.apc-inv .accueil-pcard-icon{background:rgba(232,115,74,.08);border:1px solid rgba(232,115,74,.18)}
.accueil-pcard-body{flex:1}
.accueil-pcard-title{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;
  letter-spacing:0.3px;line-height:1;margin-bottom:3px;
}
.apc-gold .accueil-pcard-title{color:var(--gold2)}
.apc-teal .accueil-pcard-title{color:#4ade80}
.apc-rescue .accueil-pcard-title{color:var(--rescue2)}
.apc-inv .accueil-pcard-title{color:var(--gold)}
.accueil-pcard-sub{font-size:11px;color:var(--muted2)}
.accueil-pcard-val{
  font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:13px;flex-shrink:0;text-align:right;
}
.apc-gold .accueil-pcard-val{color:var(--gold)}
.apc-teal .accueil-pcard-val{color:var(--green)}
/* GRID v2 */
.accueil-grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.accueil-gcard{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:14px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;position:relative;overflow:hidden;transition:all .2s;
}
.accueil-gcard:active{transform:scale(.97)}
.accueil-gc-icon{
  font-size:24px;width:46px;height:46px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
}
.accueil-gc-label{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:0.3px;color:var(--muted2)}
.accueil-gc-sub{font-size:10px;color:var(--muted)}
.accueil-gbadge{
  position:absolute;top:8px;right:8px;
  font-family:'JetBrains Mono',monospace;font-size:9px;
  padding:2px 6px;border-radius:4px;
}
.agb-green{background:rgba(52,211,153,.15);color:var(--green);border:1px solid rgba(52,211,153,.3)}
.agb-orange{background:rgba(232,115,74,.15);color:var(--rescue);border:1px solid rgba(232,115,74,.3)}
.agb-gold{background:rgba(232,115,74,.15);color:var(--gold);border:1px solid rgba(232,115,74,.3)}

/* ═══ TEAM CAROUSEL ═══ */
.team-carousel{
  position:relative;width:100%;height:200px;border-radius:18px;overflow:hidden;
  margin-bottom:14px;box-shadow:0 8px 40px rgba(0,0,0,.4),0 0 0 1px rgba(232,115,74,.15);
  &::after{
    content:'';position:absolute;inset:0;z-index:2;
    background:linear-gradient(0deg,rgba(10,10,18,.95) 0%,rgba(10,10,18,.5) 35%,rgba(10,10,18,.1) 60%,transparent 100%);
  }
  &-slide{
    position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease-in-out;
    background-size:cover;background-position:center 30%;
    &.active{opacity:1}
    & video{width:100%;height:100%;object-fit:cover;object-position:center 30%}
  }
  &-content{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:16px 18px}
  &-label{
    font-family:'Bricolage Grotesque',sans-serif;font-size:10px;letter-spacing:0.5px;color:var(--rescue);
    margin-bottom:4px;display:flex;align-items:center;gap:8px;
    &::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--rescue),transparent)}
  }
  &-title{
    font-family:'Bricolage Grotesque',sans-serif;font-size:22px;letter-spacing:0.5px;color:#fff;
    font-weight:700;line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.6);
    & span{color:var(--rescue)}
  }
  &-sub{font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:1px}
  &-dots{position:absolute;bottom:10px;right:16px;z-index:4;display:flex;gap:6px}
  &-dot{
    width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .4s;
    &.active{background:var(--rescue);box-shadow:0 0 8px rgba(232,115,74,.5);width:18px;border-radius:3px}
  }
  &-counter{
    position:absolute;top:12px;right:14px;z-index:4;
    font-family:'JetBrains Mono',monospace;font-size:9px;
    padding:3px 8px;border-radius:6px;
    background:rgba(0,0,0,.5);backdrop-filter:blur(8px);
    color:rgba(255,255,255,.6);letter-spacing:1px;
  }
}

/* ═══ TERRAIN CARDS V3 ═══ */
.terrain-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.terrain-card{
  position:relative;overflow:hidden;border-radius:16px;padding:18px 14px 14px;
  cursor:pointer;transition:all .25s cubic-bezier(.22,1,.36,1);
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg2);
  border:1px solid transparent;
  &:active{transform:scale(.96)}
  &::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
  &::after{
    content:'';position:absolute;top:-50%;right:-50%;width:100%;height:100%;
    background:radial-gradient(circle,rgba(255,255,255,.03) 0%,transparent 70%);
    pointer-events:none;
  }
}
.tc-rescue{background:linear-gradient(145deg,rgba(232,115,74,.12),rgba(232,115,74,.03)) var(--bg2);border-color:rgba(232,115,74,.2);
  &::before{background:linear-gradient(90deg,var(--rescue),rgba(232,115,74,.3))}
  & .terrain-card-icon{background:rgba(232,115,74,.1);border:1px solid rgba(232,115,74,.25);box-shadow:0 4px 16px rgba(232,115,74,.1)}
  & .terrain-card-label{color:var(--rescueL)}
}
.tc-gold{background:linear-gradient(145deg,rgba(232,115,74,.12),rgba(232,115,74,.03)) var(--bg2);border-color:rgba(232,115,74,.2);
  &::before{background:linear-gradient(90deg,var(--gold),rgba(232,115,74,.3))}
  & .terrain-card-icon{background:rgba(232,115,74,.1);border:1px solid rgba(232,115,74,.25);box-shadow:0 4px 16px rgba(232,115,74,.1)}
  & .terrain-card-label{color:var(--goldL)}
}
.tc-green{background:linear-gradient(145deg,rgba(52,211,153,.12),rgba(52,211,153,.03)) var(--bg2);border-color:rgba(52,211,153,.2);
  &::before{background:linear-gradient(90deg,var(--green),rgba(52,211,153,.3))}
  & .terrain-card-icon{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25);box-shadow:0 4px 16px rgba(52,211,153,.1)}
  & .terrain-card-label{color:#4ade80}
}
.tc-blue{background:linear-gradient(145deg,rgba(59,130,246,.12),rgba(59,130,246,.03)) var(--bg2);border-color:rgba(59,130,246,.2);
  &::before{background:linear-gradient(90deg,var(--blue),rgba(59,130,246,.3))}
  & .terrain-card-icon{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);box-shadow:0 4px 16px rgba(59,130,246,.1)}
  & .terrain-card-label{color:#60A5FA}
}
.tc-purple{background:linear-gradient(145deg,rgba(168,85,247,.12),rgba(168,85,247,.03)) var(--bg2);border-color:rgba(168,85,247,.2);
  &::before{background:linear-gradient(90deg,#A855F7,rgba(168,85,247,.3))}
  & .terrain-card-icon{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.25);box-shadow:0 4px 16px rgba(168,85,247,.1)}
  & .terrain-card-label{color:#C084FC}
}
.terrain-card-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  position:relative;
}
.terrain-card-label{
  font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:2.5px;font-weight:700;line-height:1;
}
.terrain-card-sub{font-size:10px;color:var(--muted);margin-top:1px;line-height:1.3}
.terrain-card-badge{
  position:absolute;top:10px;right:10px;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
  padding:3px 8px;border-radius:6px;
}
.terrain-fw{grid-column:1/-1}
.terrain-fw-inner{
  display:flex;align-items:center;gap:14px;
}
@keyframes terrain-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.3)}
  50%{box-shadow:0 0 20px 4px rgba(59,130,246,.1)}
}
/* Chef badge */
.chef-badge{display:inline-block;background:rgba(232,115,74,.15);border:1px solid rgba(232,115,74,.35);color:#E8734A;padding:3px 10px;border-radius:6px;font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:0.3px;font-weight:700;margin-left:6px}
/* Pointage IN badge */
.ptg-active-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);color:var(--green);padding:3px 10px;border-radius:20px;font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:0.3px;font-weight:700;animation:dot-pulse 2s ease-in-out infinite}
.ptg-active-dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
/* FW CARD v2 */
.accueil-fwcard{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px 16px;cursor:pointer;
  display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:all .2s;
}
.accueil-fwcard:active{transform:scale(.99)}
.accueil-fw-icon{
  width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.accueil-fw-title{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:0.3px;font-weight:700;margin-bottom:2px}
.accueil-fw-sub{font-size:10px;color:var(--muted)}
/* FADE IN per child */
.accueil-anim > *{animation:fadeUp .4s ease both}
.accueil-anim > *:nth-child(1){animation-delay:.06s}
.accueil-anim > *:nth-child(2){animation-delay:.10s}
.accueil-anim > *:nth-child(3){animation-delay:.14s}
.accueil-anim > *:nth-child(4){animation-delay:.17s}
.accueil-anim > *:nth-child(5){animation-delay:.20s}
.accueil-anim > *:nth-child(6){animation-delay:.23s}
.accueil-anim > *:nth-child(7){animation-delay:.26s}
.accueil-anim > *:nth-child(8){animation-delay:.29s}
.accueil-anim > *:nth-child(9){animation-delay:.32s}
.accueil-anim > *:nth-child(10){animation-delay:.35s}
.accueil-anim > *:nth-child(11){animation-delay:.38s}
.accueil-hero{animation:fadeDown .45s ease both}
.accueil-status{animation:fadeDown .45s .04s ease both}
@keyframes fadeDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
/* ══════════════════════════════════════════
   CHAT MODULE
   ══════════════════════════════════════════ */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 120px);max-height:calc(100dvh - 120px);background:var(--bg);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.chat-header{
  display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--border);flex-shrink:0;
  &-title{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;letter-spacing:0.3px;color:var(--gold);font-weight:700;flex:1}
  &-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted)}
}
.chat-pinned{
  padding:8px 14px;background:rgba(232,115,74,.08);border-bottom:1px solid rgba(232,115,74,.2);display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt);flex-shrink:0;
  & .cp-icon{font-size:14px;flex-shrink:0}
  & .cp-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  & .cp-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:12px;padding:2px 5px}
}
.chat-messages{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px;display:flex;flex-direction:column;gap:2px;scroll-behavior:smooth;
  &::-webkit-scrollbar{width:3px}
  &::-webkit-scrollbar-thumb{background:var(--rescue);border-radius:3px}
}
.chat-day-sep{text-align:center;padding:10px 0 6px;font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:0.3px;color:var(--muted)}
.chat-group{
  display:flex;gap:8px;margin-bottom:6px;max-width:85%;
  &.mine{margin-left:auto;flex-direction:row-reverse;
    & .chat-avatar-chat{display:none}
    & .chat-author{display:none}
  }
}
.chat-avatar-chat{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;align-self:flex-end}
.chat-bubbles{display:flex;flex-direction:column;gap:2px;min-width:0}
.chat-author{font-family:'Bricolage Grotesque',sans-serif;font-size:10px;letter-spacing:1px;color:var(--gold);margin-bottom:2px;margin-left:4px}
.chat-bubble{
  position:relative;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.4;word-break:break-word;max-width:100%;
  &.other{background:var(--card);border:1px solid var(--border);color:var(--txt);border-bottom-left-radius:4px;
    & .chat-hover-actions{right:auto;left:4px}
  }
  &.mine{background:var(--rescue);color:#fff;border-bottom-right-radius:4px;
    & .cb-time{text-align:right}
    & .chat-mention{background:rgba(255,255,255,.2);color:#fff}
  }
  & .cb-time{font-family:'JetBrains Mono',monospace;font-size:9px;opacity:.5;margin-top:2px;display:block}
  &:hover .chat-hover-actions{display:flex}
}
.chat-mention{background:rgba(232,115,74,.25);color:var(--rescue);padding:1px 4px;border-radius:4px;font-weight:600}
.chat-reactions{display:flex;gap:3px;margin-top:3px;flex-wrap:wrap}
.chat-react-btn{padding:2px 6px;border-radius:10px;font-size:11px;cursor:pointer;border:1px solid var(--border);background:var(--card);transition:all .12s;display:flex;align-items:center;gap:2px}
.chat-react-btn.active{border-color:var(--rescue);background:rgba(232,115,74,.12)}
.chat-react-btn .cr-count{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted)}
.chat-hover-actions{
  position:absolute;top:-8px;right:4px;display:none;gap:2px;background:var(--cardSolid);border:1px solid var(--border);border-radius:8px;padding:2px 4px;z-index:10;
  & button{background:none;border:none;cursor:pointer;font-size:13px;padding:2px 4px;border-radius:4px;transition:background .1s;
    &:hover{background:rgba(255,255,255,.1)}
  }
}
.chat-input-wrap{
  display:flex;gap:8px;padding:10px 14px;background:var(--card);border-top:1px solid var(--border);flex-shrink:0;align-items:flex-end;
  /* :has() — glow border when chat input is focused */
  &:has(.chat-input:focus){border-top-color:rgba(232,115,74,.3)}
}
.chat-input{
  flex:1;background:var(--card2);border:1px solid var(--border);border-radius:18px;padding:9px 14px;color:var(--txt);font-family:'DM Sans',sans-serif;font-size:16px;outline:none;resize:none;max-height:80px;min-height:36px;line-height:1.3;transition:border-color .15s;
  &:focus{border-color:var(--rescue)}
  &::placeholder{color:var(--muted)}
}
.chat-send{
  width:44px;height:44px;border-radius:50%;background:var(--rescue);border:none;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s;
  &:disabled{opacity:.3;cursor:default}
}
.chat-new-msg-btn{position:sticky;bottom:8px;align-self:center;padding:6px 14px;border-radius:16px;background:var(--rescue);color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;letter-spacing:1px;border:none;cursor:pointer;box-shadow:0 2px 12px rgba(232,115,74,.4);z-index:5}
.chat-mention-dd{position:absolute;bottom:100%;left:14px;right:14px;max-height:180px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--cardSolid);border:1px solid var(--border);border-radius:var(--radius-sm);z-index:20;display:none}
.chat-mention-dd.visible{display:block}
.chat-mention-dd-item{padding:8px 12px;cursor:pointer;font-size:12px;color:var(--txt);display:flex;align-items:center;gap:8px;transition:background .1s}
.chat-mention-dd-item:hover,.chat-mention-dd-item.selected{background:rgba(232,115,74,.12)}
.chat-mention-dd-item .cmdi-role{font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:1px;color:var(--muted)}
.chat-dm-list{display:flex;flex-direction:column;gap:2px;padding:8px}
.chat-dm-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:background .12s}
.chat-dm-item:hover,.chat-dm-item.active{background:rgba(232,115,74,.1)}
.chat-dm-item .dmi-name{flex:1;font-size:12px;font-weight:600;color:var(--txt)}
.chat-dm-item .dmi-badge{width:8px;height:8px;border-radius:50%;background:var(--rescue)}
.chat-unread-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;background:var(--rescue);color:#fff;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;padding:0 5px;margin-left:6px}

/* ═══ MICRO-ANIMATIONS ═══ */
@keyframes status-flash{0%{box-shadow:0 0 0 0 rgba(232,115,74,.5)}50%{box-shadow:0 0 16px 4px rgba(232,115,74,.3)}100%{box-shadow:none}}
.flash-status{animation:status-flash .3s ease}
@keyframes slide-up-in{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slide-right-in{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pulse-orange{0%,100%{box-shadow:0 0 0 0 rgba(232,115,74,.4)}50%{box-shadow:0 0 8px 3px rgba(232,115,74,.2)}}
.pulse-badge{animation:pulse-orange 1.5s ease infinite}
@keyframes skel-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--card) 25%,rgba(255,255,255,.06) 50%,var(--card) 75%);background-size:200% 100%;animation:skel-shimmer 1.2s ease infinite;border-radius:8px;min-height:20px}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.tab-fade{animation:fadeIn .15s ease}
.tap-btn{position:relative;overflow:hidden;transition:transform .1s ease}
.tap-btn:active{transform:scale(.95)}

/* Lisibilité terrain + iOS Safari */
.btn,.card,.tab-btn{min-height:48px;-webkit-tap-highlight-color:transparent}
input,select,textarea{min-height:52px;font-size:16px;-webkit-appearance:none;border-radius:8px}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
*{-webkit-touch-callout:none}

/* Chef Dashboard */
.chef-dash{padding:0 0 16px;animation:slide-up-in .18s ease-out;
  &-title{font-family:'Bricolage Grotesque',sans-serif;font-size:.75rem;letter-spacing:0.3px;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:6px}
  &-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
  &-card{
    background:var(--noir3);border:1px solid rgba(232,115,74,.06);border-radius:12px;padding:12px 10px;text-align:center;cursor:pointer;transition:all .2s;
    &:hover{border-color:var(--gold);transform:translateY(-1px)}
    & .cdn{font-family:'Bricolage Grotesque',sans-serif;font-size:1.6rem;font-weight:700;line-height:1}
    & .cdl{font-family:'JetBrains Mono',monospace;font-size:.5rem;color:var(--muted);letter-spacing:1px;margin-top:4px}
  }
}
.chef-alerts{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:12px}
.chef-alert-item{
  display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid rgba(58,36,40,.3);font-size:.78rem;cursor:pointer;transition:background .15s;
  &:last-child{border-bottom:none}
  &:hover{background:rgba(232,115,74,.04);border-radius:8px}
}
.chef-feed{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.chef-feed-item{
  padding:8px 0;border-bottom:1px solid rgba(58,36,40,.3);font-size:.75rem;color:var(--muted);display:flex;gap:8px;align-items:flex-start;
  &:last-child{border-bottom:none}
  & .cfi-time{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:rgba(184,169,154,.6);min-width:45px;flex-shrink:0}
}
@media(max-width:480px){.chef-dash-row{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.skeleton{animation:none}.pulse-badge{animation:none}}

/* Onboarding tour */
.tour-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}
.tour-card{background:var(--cardSolid,#141420);border:2px solid var(--rescue);border-radius:20px;padding:32px 24px;max-width:380px;width:90%;text-align:center;position:relative;animation:slide-up-in .2s ease-out}
.tour-step{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:0.3px;color:var(--muted);margin-bottom:12px}
.tour-title{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;letter-spacing:0.3px;color:var(--rescue);margin-bottom:8px}
.tour-body{font-size:.85rem;color:var(--txt);line-height:1.6;margin-bottom:20px}
.tour-dots{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.tour-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .2s;
  &.active{background:var(--gold);width:20px;border-radius:4px}
}
.tour-btn{
  padding:12px 28px;border-radius:10px;border:none;font-family:'Bricolage Grotesque',sans-serif;font-size:.8rem;letter-spacing:0.3px;cursor:pointer;transition:all .15s;min-height:48px;
  &-primary{background:var(--rescue);color:#fff;
    &:active{transform:scale(.95)}
  }
  &-skip{background:transparent;color:var(--muted);border:1px solid var(--border)}
}
/* Team PIN gate — #1 Hero photo + #2 Titre redesign */
.team-pin-overlay{
  position:fixed;inset:0;z-index:99999;
  background:
    linear-gradient(to bottom, rgba(10,10,18,.3) 0%, rgba(10,10,18,.82) 55%, rgba(10,10,18,1) 100%),
    url('/volo-sst-hero.jpg') center top/cover no-repeat;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
}
/* Hero title shown above the PIN card */
.team-pin-overlay::before{
  content:'VOLO SST';
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:42px;font-weight:800;letter-spacing:4px;
  color:#fff;
  text-shadow:0 0 40px rgba(232,115,74,.6);
  display:block;margin-bottom:4px;
}
.team-pin-overlay::after{
  content:'Inventaire · Sauvetage · Terrain';
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:2px;
  color:rgba(237,232,224,.5);
  display:block;margin-bottom:28px;
}
.team-pin-card{
  max-width:360px;width:90%;text-align:center;padding:32px 20px;
  background:rgba(7,7,15,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  & h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;letter-spacing:0.5px;color:var(--rescue);margin-bottom:4px}
  & .tps{font-size:.75rem;color:var(--muted);margin-bottom:20px}
}
.team-pin-dots{display:flex;gap:10px;justify-content:center;margin-bottom:18px}
.team-pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);transition:all .15s;
  &.filled{background:var(--rescue);border-color:var(--rescue)}
}
.team-pin-pad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:260px;margin:0 auto;
  & button{height:52px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--txt);font-size:20px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;min-height:48px;
    &:active{background:var(--rescueGlow);transform:scale(.95);border-color:var(--rescue)}
  }
}
.team-pin-err{color:var(--red);font-size:.8rem;margin-top:12px;font-weight:600;min-height:20px}
/* Weather widget */
.weather-widget{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:var(--card);border:1px solid var(--border);font-size:.75rem;color:var(--txt)}
.weather-widget .wi{font-size:1rem}
.weather-widget .wt{font-weight:700}
.weather-widget .wl{color:var(--muted);font-size:.65rem}
/* Cert badges */
.cert-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.6rem;font-weight:700;letter-spacing:.5px}
.cert-ok{background:rgba(52,211,153,.15);color:var(--green)}
.cert-warn{background:rgba(243,156,18,.15);color:var(--orange)}
.cert-exp{background:rgba(248,113,113,.15);color:var(--red)}
/* Announce banner */
.announce-banner{
  padding:12px 14px;background:linear-gradient(135deg,rgba(232,115,74,.2),rgba(232,115,74,.08));border:1px solid rgba(232,115,74,.4);border-radius:14px;margin-bottom:12px;display:flex;align-items:center;gap:10px;
  & .ab-icon{font-size:22px;flex-shrink:0}
  & .ab-text{flex:1;font-size:.82rem;color:var(--txt);line-height:1.4}
  & .ab-close{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px}
}
/* Emergency alert */
.emergency-banner{padding:14px;background:linear-gradient(135deg,rgba(248,113,113,.3),rgba(248,113,113,.1));border:2px solid var(--red);border-radius:14px;margin-bottom:12px;animation:pulse-border 1.5s infinite}
/* Version footer */
.version-footer{text-align:center;padding:20px 0 12px;font-size:.6rem;color:var(--muted);letter-spacing:1px;opacity:.6}
/* ═══ WIZARD PROGRESS BAR ═══ */
/* ═══ WIZARD PROGRESS BAR ═══ */
.wiz-progress{display:flex;align-items:flex-start;justify-content:center;gap:0;margin-bottom:20px;padding:12px 16px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:14px}
.wiz-step{display:flex;align-items:center;gap:0}
.wiz-dot{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid var(--border);background:var(--card);color:var(--muted);transition:all .3s cubic-bezier(.4,0,.2,1);flex-shrink:0;font-family:'JetBrains Mono',monospace;
}
.wiz-dot.active{border-color:var(--rescue);background:var(--rescue);color:#fff;box-shadow:0 0 16px rgba(232,115,74,.35),0 0 6px rgba(232,115,74,.2)}
.wiz-dot.done{border-color:var(--green);background:rgba(52,211,153,.15);color:var(--green)}
.wiz-line{width:18px;height:2px;background:var(--border);flex-shrink:0;transition:background .4s;margin-top:16px}
.wiz-line.done{background:var(--green)}
.wiz-label{
  font-size:9px;letter-spacing:.5px;color:var(--muted);text-align:center;margin-top:4px;font-family:'DM Sans',sans-serif;line-height:1;
}
.wiz-label.active{color:var(--rescue);font-weight:700}
.wiz-label.done{color:var(--green)}
/* ═══ WIZARD FIXED CONTINUE BTN ═══ */
.wizard-continue-btn{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:460px;z-index:999;padding:18px 24px;background:linear-gradient(135deg,#E8734A 0%,#D4650E 100%);color:#fff;font-size:18px;font-weight:700;border:none;text-transform:uppercase;letter-spacing:0.5px;min-height:60px;box-shadow:0 -8px 30px rgba(232,115,74,.25),0 -2px 0 rgba(0,0,0,.4);font-family:'Bricolage Grotesque',sans-serif;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}
.wizard-continue-btn:active{transform:translateX(-50%) scale(.97)}
.wizard-continue-btn:disabled{opacity:.35;pointer-events:none}
.wizard-content-with-fixed-btn{padding-bottom:80px}
/* ═══ SCAN MODE TOGGLE ═══ */
.scan-toggle{display:flex;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:3px;margin-bottom:14px;gap:3px}
.scan-toggle-btn{flex:1;padding:12px 8px;border-radius:10px;border:none;background:transparent;color:var(--muted);font-family:'Bricolage Grotesque',sans-serif;font-size:14px;letter-spacing:1px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:6px}
.scan-toggle-btn.active{background:var(--rescue);color:#fff;box-shadow:0 2px 8px rgba(232,115,74,.3)}
/* ═══ SCANNED COUNTER ═══ */
.scan-counter{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px 14px;background:rgba(52,211,153,.06);border:1.5px solid rgba(52,211,153,.2);border-radius:14px;margin-bottom:14px;transition:all .3s}
.scan-counter.has-items{box-shadow:0 0 20px rgba(52,211,153,.1)}
.scan-counter-num{font-family:'JetBrains Mono',monospace;font-size:36px;font-weight:800;color:var(--green);line-height:1;min-width:36px;text-align:center}
.scan-counter-label{font-size:11px;color:var(--muted);letter-spacing:.5px;text-align:left}
.scan-counter-label strong{display:block;font-size:14px;color:var(--green);font-weight:700;letter-spacing:0}
/* ═══ TAB ARROW ═══ */
.tab-arrow{display:inline-block;margin-left:6px;transition:transform 0.3s;font-size:12px}
.tab-arrow.open{transform:rotate(180deg)}
/* ═══ VEHICLE CARD ═══ */
.vehicle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.veh-card{
  padding:16px 12px;border-radius:14px;border:2px solid var(--border);background:var(--card);cursor:pointer;text-align:center;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;-webkit-tap-highlight-color:transparent;
}
.veh-card:active{transform:scale(.95)}
.veh-card.selected{border-color:var(--green);background:rgba(52,211,153,.08);box-shadow:0 0 0 1px rgba(52,211,153,.15),0 4px 16px rgba(52,211,153,.12)}
.veh-card-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.veh-card-name{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;letter-spacing:.5px;color:var(--txt);font-weight:700}
.veh-card-sub{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.veh-card.selected .veh-card-name{color:var(--green)}
/* ═══ CONFIRM SECTION ═══ */
.confirm-section{padding:12px 14px;border-bottom:1px solid var(--border)}
.confirm-section:last-child{border-bottom:none}
.confirm-section-label{font-size:10px;letter-spacing:0.3px;color:var(--muted);font-family:'Bricolage Grotesque',sans-serif;margin-bottom:4px}
.confirm-section-value{font-size:15px;font-weight:600;color:var(--txt)}
/* ═══ PERSONNEL CARD V2 ═══ */
.pers-card{
  display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;
  &:active{transform:scale(.98)}
  &.selected{border-color:var(--green);background:rgba(52,211,153,.05);
    & .pers-check{border-color:var(--green);background:var(--green);color:#fff}
  }
}
.pers-avatar{
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;border:2px solid var(--border);
  &.sauv{border-color:var(--rescue);color:var(--rescue);background:rgba(232,115,74,.08)}
  &.surv{border-color:var(--blue);color:var(--blue);background:rgba(59,130,246,.08)}
  &.chef{border-color:var(--gold);color:var(--gold);background:rgba(232,115,74,.08)}
}
.pers-info{flex:1;min-width:0}
.pers-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pers-meta{font-size:11px;color:var(--muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.pers-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;transition:all .2s;flex-shrink:0}
/* History timeline */
.hist-timeline{display:flex;flex-direction:column;gap:8px}
.hist-item{
  display:flex;gap:10px;padding:10px;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:.78rem;
  & .hi-icon{font-size:1.2rem;flex-shrink:0}
  & .hi-body{flex:1;min-width:0}
  & .hi-time{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--muted)}
  & .hi-title{font-weight:600;color:var(--txt)}
  & .hi-sub{font-size:.7rem;color:var(--muted);margin-top:2px}
}
/* Pointage hero card — Gold Shiny */
.pointage-hero{display:flex;align-items:center;gap:14px;padding:16px 18px;background:linear-gradient(135deg,rgba(232,115,74,.12),rgba(232,115,74,.03));border:1px solid rgba(232,115,74,.35);border-radius:16px;cursor:pointer;margin:0 16px 14px;transition:all .25s;position:relative;overflow:hidden;box-shadow:0 2px 16px rgba(232,115,74,.08),inset 0 1px 0 rgba(232,115,74,.15)}
.pointage-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#E8734A,#E8D48B,#E8734A,transparent)}
.pointage-hero::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(232,115,74,.06) 50%,transparent 70%);animation:goldShimmer 3s ease-in-out infinite}
@keyframes goldShimmer{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}
.pointage-hero:active{transform:scale(.97);box-shadow:0 0 20px rgba(232,115,74,.15)}
.pointage-hero-icon{width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,rgba(232,115,74,.15),rgba(232,115,74,.05));border:1px solid rgba(232,115,74,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 12px rgba(232,115,74,.1)}
.pointage-hero-info{flex:1}
.pointage-hero-time{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:700;color:#E8734A;line-height:1;text-shadow:0 0 12px rgba(232,115,74,.3)}
.pointage-hero-label{font-family:'Bricolage Grotesque',sans-serif;font-size:10px;letter-spacing:2.5px;color:#E8D48B;margin-top:4px;font-weight:600}
.pointage-hero-status{font-size:10px;color:var(--dim);margin-top:3px;font-family:'JetBrains Mono',monospace}
.pointage-hero-arrow{display:flex;align-items:center}

/* ═══════════════════════════════════════════
   TACTIC GOLD V7 — Accueil Only
═══════════════════════════════════════════ */
.tg-header{position:sticky;top:0;z-index:500;background:rgba(10,10,18,.94);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:1px solid rgba(232,115,74,.06);padding:10px 16px;display:flex;align-items:center}
.tg-logo-img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid rgba(232,115,74,.4);box-shadow:0 0 20px rgba(232,115,74,.2);animation:tg-glow 5s ease-in-out infinite}
@keyframes tg-glow{0%,100%{box-shadow:0 0 20px rgba(232,115,74,.2)}50%{box-shadow:0 0 35px rgba(232,115,74,.4),0 0 15px rgba(232,115,74,.2)}}
.tg-brand{margin-left:10px;flex:1}
.tg-brand-name{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:600;letter-spacing:.25em;background:linear-gradient(135deg,#EDE8E0 0%,#E8734A 35%,#E8734A 65%,#7A5C20 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tg-brand-sub{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.2em;color:#4A4558;margin-top:1px}
.tg-h-dot{width:6px;height:6px;border-radius:50%;background:rgba(0,200,83,.7);box-shadow:0 0 8px rgba(0,200,83,.4);margin-right:14px;animation:tg-dot-p 2.5s infinite}
@keyframes tg-dot-p{0%,100%{opacity:1}50%{opacity:.3}}

/* TG HERO — cinematic crossfade */
.tg-hero{position:relative;height:240px;overflow:hidden}
.tg-hero-img,.tg-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) contrast(1.05) saturate(.85);opacity:0;animation:tg-cf 30s ease-in-out infinite}
.tg-hero-img:nth-child(1),.tg-hero-vid:nth-child(1){animation-delay:0s}
.tg-hero-img:nth-child(2),.tg-hero-vid:nth-child(2){animation-delay:5s}
.tg-hero-img:nth-child(3),.tg-hero-vid:nth-child(3){animation-delay:10s}
.tg-hero-img:nth-child(4),.tg-hero-vid:nth-child(4){animation-delay:15s}
.tg-hero-img:nth-child(5),.tg-hero-vid:nth-child(5){animation-delay:20s}
.tg-hero-img:nth-child(6),.tg-hero-vid:nth-child(6){animation-delay:25s}
@keyframes tg-cf{0%{opacity:0;transform:scale(1)}3%{opacity:1}14%{opacity:1}17%{opacity:0;transform:scale(1.05)}100%{opacity:0}}
.tg-hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,18,.3) 0%,rgba(10,10,18,0) 25%,rgba(10,10,18,0) 50%,rgba(10,10,18,.98) 100%);z-index:2}
.tg-hero-scan{position:absolute;inset:0;z-index:3;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 3px);pointer-events:none}
.tg-hero-bar{position:absolute;bottom:0;left:0;right:0;height:2px;z-index:5;background:linear-gradient(90deg,transparent,rgba(232,115,74,.3) 15%,#E8734A 35%,#F2A060 50%,#E8734A 65%,rgba(232,115,74,.3) 85%,transparent);background-size:200% 100%;opacity:.7;animation:heroBarShimmer 4s ease-in-out infinite}
@keyframes heroBarShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.tg-hero-txt{position:absolute;bottom:16px;left:16px;z-index:6}
.tg-hero-id{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.15em;color:#E8734A;opacity:.8;margin-bottom:4px}
.tg-hero-name{font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:700;letter-spacing:.06em;color:#EDE8E0;line-height:1;text-shadow:0 0 20px rgba(232,115,74,.25),0 0 40px rgba(232,115,74,.1),0 2px 20px rgba(0,0,0,.5)}
.tg-hero-role{font-size:11px;color:#4A4558;margin-top:4px;letter-spacing:.05em}
@media(max-height:700px){.tg-hero{height:180px}.tg-hero-name{font-size:22px}}
@media(max-height:600px){.tg-hero{height:140px}.tg-hero-name{font-size:18px}.tg-hero-id{display:none}}

/* TG STAT BAR — gold labels, rescue values */
.tg-stat-bar{display:flex;justify-content:space-around;padding:14px 16px;background:#141420;border-bottom:1px solid rgba(232,115,74,.06)}
.tg-stat{text-align:center}
.tg-stat-val{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:600;color:#E8734A}
.tg-stat-lbl{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.15em;color:#E8734A;margin-top:2px;opacity:.5}

/* TG ACTIONS — Pick-On / Pick-Off (rescue orange accent) */
.tg-actions{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(232,115,74,.08)}
.tg-act{
  background:#141420;padding:22px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;
  &:active{background:#0F0F1A;transform:scale(.98)}
  &-icon{width:44px;height:44px;border-radius:12px;border:1px solid rgba(232,115,74,.18);display:flex;align-items:center;justify-content:center;background:rgba(232,115,74,.06);
    & .ico{stroke:#E8734A}
  }
  &-label{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:600;letter-spacing:.15em;color:#EDE8E0}
  &-sub{font-size:9px;color:#4A4558;margin-top:2px}
}

/* TG DIVIDER */
.tg-divider{display:flex;align-items:center;padding:20px 16px 10px}
.tg-div-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(232,115,74,.15),transparent)}
.tg-div-txt{font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:.3em;color:#4A4558;padding:0 12px}

/* TG LIST */
.tg-list{padding:0 16px}
.tg-li{
  display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(232,115,74,.04);cursor:pointer;transition:opacity .2s;
  &:active{opacity:.7}
  &:last-child{border-bottom:none}
  &-icon{width:38px;height:38px;border-radius:10px;border:1px solid rgba(232,115,74,.08);background:#0F0F1A;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  &-info{flex:1}
  &-name{font-family:'Bricolage Grotesque',sans-serif;font-size:12px;font-weight:500;letter-spacing:.12em;color:#EDE8E0}
  &-sub{font-size:9px;color:#4A4558;margin-top:1px}
  &-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:#E8734A;font-weight:500}
  &-arrow{color:var(--muted2);font-size:10px}
}

/* SVG icons — gold stroke */
.ico{width:20px;height:20px;stroke:#E8734A;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico-rescue{stroke:#E8734A}
.ico-sm{width:16px;height:16px}

/* TG URGENCE */
.tg-urg{position:fixed;bottom:16px;right:16px;z-index:500;width:50px;height:50px;border-radius:50%;background:rgba(180,30,20,.85);border:1px solid rgba(200,40,30,.3);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 24px rgba(180,30,20,.25)}
.td-fab-scan{position:fixed;bottom:16px;left:16px;z-index:500;width:50px;height:50px;border-radius:50%;background:rgba(232,115,74,.12);border:1px solid rgba(232,115,74,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(232,115,74,.15);transition:all .2s}
.td-fab-scan:active{transform:scale(.9);background:rgba(232,115,74,.2)}

/* TG FOOTER */
.tg-foot{text-align:center;padding:40px 16px 80px}
.tg-foot-logo{width:50px;height:50px;border-radius:50%;opacity:.15;margin-bottom:10px}
.tg-foot-txt{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.2em;color:#1E1E28}
.tg-foot-gold{font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:.3em;color:rgba(232,115,74,.15);margin-top:6px}

/* TG CHEF BUTTONS */
.tg-chef-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.tg-chef-btn{padding:12px;border-radius:12px;border:1px solid rgba(232,115,74,.15);background:rgba(232,115,74,.04);color:#E8734A;font-family:Bricolage Grotesque,sans-serif;font-size:13px;letter-spacing:1px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;transition:all .2s}
.tg-chef-btn:active{background:rgba(232,115,74,.1);transform:scale(.97)}
.tg-chef-btn-red{border-color:rgba(180,30,20,.3);background:rgba(180,30,20,.06);color:#F87171}
.tg-chef-btn-dim{border-color:rgba(232,115,74,.06);background:rgba(255,255,255,.02);color:#4A4558}
.tg-chef-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:14px}
.tg-chef-link{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border-radius:12px;border:1px solid rgba(232,115,74,.15);background:rgba(232,115,74,.04);color:#E8734A;font-family:Bricolage Grotesque,sans-serif;font-size:11px;letter-spacing:1px;cursor:pointer;text-decoration:none;min-height:48px;transition:all .2s}
.tg-chef-link:active{background:rgba(232,115,74,.1)}
.tg-chef-link-green{border-color:rgba(52,211,153,.2);color:var(--green)}
.tg-chef-link-rescue{border-color:rgba(212,101,14,.2);color:#E8734A}
/* Wizard screens — TG global */
.wiz-dot.active{border-color:var(--gold);background:linear-gradient(135deg,var(--rescue),var(--gold));box-shadow:0 0 12px rgba(232,115,74,.25)}
.wiz-label.active{color:var(--gold)}
.btn-filter.active{border-color:var(--gold);color:var(--gold);background:rgba(232,115,74,.08)}
.scan-toggle-btn.active{background:linear-gradient(135deg,var(--rescue),var(--gold));box-shadow:0 2px 8px rgba(232,115,74,.2)}
.top-back:hover,.top-back:active{border-color:var(--gold);color:var(--txt);background:rgba(232,115,74,.06)}
.remorque-tab.active{border-color:var(--gold);color:var(--gold);background:rgba(232,115,74,.06)}
.item-btn:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(232,115,74,.06)}
.nav-card:hover,.nav-card:active{border-color:var(--gold);background:var(--card2);box-shadow:0 8px 32px rgba(232,115,74,.08)}
/* Transaction cards — TG */
.tx-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .2s}
.tx-card:active{transform:scale(.98)}
.tx-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tx-icon-on{background:rgba(232,115,74,.12)}
.tx-icon-off{background:rgba(52,211,153,.12)}

/* ═══ EAGLE EYE — HUD RADAR ═══ */
.eagle-eye{position:relative;margin:12px 16px;padding:16px;background:transparent;border:none;border-radius:18px;overflow:hidden}
.eagle-eye::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(232,115,74,.02) 0%,transparent 70%);pointer-events:none}
.ee-radar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(232,115,74,.03) 0%,rgba(10,10,18,.9) 100%);border:none;z-index:1}
.ee-radar-ring{position:absolute;border-radius:50%;border:1px solid rgba(232,115,74,.05)}
.ee-radar-ring.r1{inset:15%;border-color:rgba(232,115,74,.06)}
.ee-radar-ring.r2{inset:35%;border-color:rgba(232,115,74,.08)}
.ee-radar-ring.r3{inset:55%;border-color:rgba(232,115,74,.05)}
.ee-radar::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(232,115,74,.05)}
.ee-radar-cross{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(232,115,74,.05)}
.ee-radar-wrap{position:relative;width:160px;height:160px;margin:0 auto 12px}
.ee-radar-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.08;filter:sepia(1) saturate(2.5) hue-rotate(5deg) brightness(.7);mix-blend-mode:screen;pointer-events:none;z-index:0}
.ee-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(232,115,74,.15) 30deg,transparent 60deg);animation:ee-spin 4s linear infinite;z-index:2}
@keyframes ee-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ee-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(232,115,74,.6);transform:translate(-50%,-50%);z-index:2}
.ee-dot.active{background:#34D399;box-shadow:0 0 12px rgba(52,211,153,.6);animation:ee-pulse 2s infinite}
.ee-dot.urgent{background:#F87171;box-shadow:0 0 12px rgba(248,113,113,.6);animation:ee-pulse 1s infinite}
@keyframes ee-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.5);opacity:.6}}
.ee-center{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--rescue);box-shadow:0 0 10px rgba(232,115,74,.4);transform:translate(-50%,-50%);z-index:3}
.ee-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.ee-counter{text-align:center;padding:10px 4px;background:rgba(232,115,74,.03);border:1px solid rgba(232,115,74,.06);border-radius:12px;position:relative;overflow:hidden}
.ee-counter::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold);opacity:.3}
.ee-counter-val{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;color:var(--gold);line-height:1}
.ee-counter-lbl{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.15em;color:var(--dim);margin-top:4px}
.ee-counter-delta{font-family:'JetBrains Mono',monospace;font-size:8px;margin-top:2px}
.ee-bars{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ee-bar-row{display:flex;align-items:center;gap:8px}
.ee-bar-label{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;color:var(--muted);width:80px;text-align:right}
.ee-bar-track{flex:1;height:6px;background:rgba(232,115,74,.06);border-radius:3px;overflow:hidden}
.ee-bar-fill{height:100%;border-radius:3px;transition:width 1.5s ease;position:relative}
.ee-bar-fill::after{content:'';position:absolute;top:0;right:0;bottom:0;width:20px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2));animation:ee-shimmer 2s infinite}
@keyframes ee-shimmer{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.ee-bar-pct{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;width:36px}
.ee-header{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px}
.ee-title{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:.35em;color:var(--dim)}
.ee-live{display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.25)}
.ee-live-dot{width:5px;height:5px;border-radius:50%;background:#34D399;animation:ee-pulse 2s infinite}
.ee-live-text{font-family:'JetBrains Mono',monospace;font-size:7px;letter-spacing:.15em;color:#34D399;font-weight:600}

/* ═══ TACTICAL DECK V2 — Accueil Redesign ═══ */

/* TD POINTAGE — Full width gold shiny */
.td-pointage{display:flex;align-items:center;gap:14px;margin:8px 16px;padding:16px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(232,115,74,.2);border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.td-pointage::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#E8734A,transparent)}
.td-pointage::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 10% 20%,rgba(232,115,74,.08),transparent 70%);opacity:0;transition:opacity .4s}
.td-pointage:hover{border-color:rgba(232,115,74,.35);transform:translateY(-2px);box-shadow:0 8px 30px rgba(232,115,74,.08)}
.td-pointage:hover::after{opacity:1}
.td-pointage:active{transform:scale(.95);filter:brightness(.88);transition:transform 80ms}
.td-pointage-icon{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,rgba(232,115,74,.12),rgba(232,115,74,.04));border:1px solid rgba(232,115,74,.25);display:flex;align-items:center;justify-content:center}
.td-pointage-info{flex:1;min-width:0}
.td-pointage-lbl{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:0.3px;color:#E8D48B;font-weight:600}
.td-pointage-status{font-family:'JetBrains Mono',monospace;font-size:9px;color:#4A4558;margin-top:2px}
.td-pointage-time{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;font-weight:700;color:#E8734A;text-shadow:0 0 10px rgba(232,115,74,.25);margin-right:8px}

/* TD PICKS — Side by side */
.td-picks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:6px 16px 10px}
.td-pick{padding:20px 14px;border-radius:16px;text-align:center;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border:1px solid}
.td-pick::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s}
.td-pick:hover::after{opacity:1}
.td-pick:active{transform:scale(.94);filter:brightness(.88);transition:transform 80ms}
.td-pick-on{background:linear-gradient(145deg,rgba(52,211,153,.1),rgba(52,211,153,.03));border-color:rgba(52,211,153,.4)}
.td-pick-on.td-pick-locked{background:rgba(20,20,32,.6);border-color:rgba(90,86,96,.2);cursor:default;opacity:.5}
.td-pick-on.td-pick-locked:active{transform:none}
.td-pick-off{background:linear-gradient(145deg,rgba(248,113,113,.1),rgba(248,113,113,.03));border-color:rgba(248,113,113,.3)}
.td-pick-active{background:linear-gradient(145deg,rgba(248,113,113,.18),rgba(248,113,113,.06));border-color:rgba(248,113,113,.6);box-shadow:0 0 20px rgba(248,113,113,.12);animation:pickoffPulse 1.5s ease-in-out infinite}
.td-pick-lbl{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;letter-spacing:0.3px;font-weight:700;margin-top:8px}
.td-pick-sub{font-size:9px;letter-spacing:.5px;margin-top:3px}

/* TD GROUP LABELS */
.td-group-label{display:flex;align-items:center;gap:10px;padding:20px 16px 10px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;opacity:.6;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s}.td-group-label:active{opacity:.9}
.td-group-line{flex:1;height:1px;background:linear-gradient(90deg,currentColor,transparent)!important;opacity:.15}

/* EE SLIM — horizontal Eagle Eye */
.ee-slim{display:flex;gap:12px;margin:12px 16px;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(232,115,74,.1);border-radius:16px;position:relative;overflow:hidden;transition:border-color .3s}
.ee-slim::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,115,74,.2),transparent)}
.ee-slim::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 15% 30%,rgba(232,115,74,.05),transparent 70%)}
.ee-slim:hover{border-color:rgba(232,115,74,.2)}
.ee-slim-left{flex-shrink:0;display:flex;align-items:center}
.ee-mini-radar{width:80px;height:80px;border-radius:50%;position:relative;background:radial-gradient(circle,rgba(232,115,74,.03) 0%,rgba(10,10,18,.9) 100%);border:1px solid rgba(232,115,74,.08);overflow:hidden}
.ee-mini-radar .ee-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,rgba(232,115,74,.15) 30deg,transparent 60deg);animation:ee-spin 4s linear infinite;z-index:2}
.ee-mini-radar .ee-center{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:var(--rescue,#E8734A);box-shadow:0 0 8px rgba(232,115,74,.4);transform:translate(-50%,-50%);z-index:3}
.ee-mini-radar .ee-radar-logo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.08;filter:sepia(1) saturate(2.5) hue-rotate(5deg) brightness(.7);mix-blend-mode:screen;pointer-events:none;z-index:0}
.ee-slim-right{flex:1;min-width:0}
.ee-slim-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.ee-slim-header .ee-title{font-family:'Bricolage Grotesque',sans-serif;font-size:10px;letter-spacing:0.3px;color:#E8734A;margin:0}
.ee-slim-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}
.ee-slim-stat{text-align:center}
.ee-slim-val{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;font-weight:700;display:block;line-height:1.1}
.ee-slim-lbl{font-family:'JetBrains Mono',monospace;font-size:6px;letter-spacing:0.3px;color:#4A4558;display:block;margin-top:2px}
.ee-slim-bars .ee-bar-row{margin-bottom:4px}
.ee-slim-bars .ee-bar-track{height:3px}

/* TD QUICK GRID */
.td-grid-title{font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:0.5px;color:#4A4558;padding:16px 16px 8px;text-align:center}
.td-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;margin-bottom:18px}
.td-card{
  position:relative;padding:20px 16px;background:var(--bg2);border:1px solid transparent;border-radius:16px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;background-clip:padding-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08);
}
/* ::before vide — réservé pour override éventuel */
.td-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:transparent;pointer-events:none}
/* ::after vide au repos — utilisé pour le filet doré au hover uniquement */
.td-card::after{content:'';position:absolute;inset:0;background:transparent;opacity:0;pointer-events:none}
.td-card:hover{border-color:rgba(232,115,74,.12);transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,.2)}
.td-card:active{transform:scale(.95);filter:brightness(.88);transition:transform 80ms cubic-bezier(.4,0,.2,1)}
.td-card svg{width:26px;height:26px;stroke:var(--accent,#E8734A);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px;opacity:.85;filter:drop-shadow(0 0 4px var(--accent,rgba(232,115,74,.25)));transition:transform .3s,filter .3s;position:relative;z-index:2}
.td-card:hover svg{transform:scale(1.12);filter:drop-shadow(0 0 10px var(--accent,rgba(232,115,74,.35)))}
.td-card-name{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.3px;color:#EDE8E0;position:relative;z-index:2}
.td-card-sub{font-family:'DM Sans',sans-serif;font-size:9px;color:rgba(138,133,148,.7);margin-top:4px;letter-spacing:.3px;font-weight:500;position:relative;z-index:2}
.td-card-badge{position:absolute;top:10px;right:10px;font-family:'JetBrains Mono',monospace;font-size:9px;color:#EDE8E0;padding:3px 8px;border-radius:8px;font-weight:700;z-index:2;box-shadow:0 0 8px rgba(232,115,74,.1)}

/* TD CHEF TOGGLE */
.td-chef-toggle{display:flex;align-items:center;gap:8px;padding:12px 16px;cursor:pointer;border-top:1px solid rgba(232,115,74,.06);-webkit-tap-highlight-color:transparent}
.td-chef-toggle:active{background:rgba(232,115,74,.03)}
.td-chef-panel{overflow:hidden;transition:max-height .3s ease,opacity .3s ease}

/* TD WEATHER SLOT in hero */
.td-weather-slot{position:absolute;top:12px;right:12px;z-index:6;font-family:'JetBrains Mono',monospace;font-size:11px;color:#EDE8E0;background:rgba(10,10,18,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:4px 10px;border-radius:8px;border:1px solid rgba(232,115,74,.1)}

/* TD HERO RANK in hero overlay */
.td-hero-rank{display:flex;align-items:center;gap:6px;margin-top:6px}
.td-hero-rank-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-family:'Bricolage Grotesque',sans-serif;font-size:9px;letter-spacing:0.3px;font-weight:700}
.td-hero-xp-bar{width:80px;height:3px;background:rgba(235,230,223,.1);border-radius:2px;overflow:hidden}
.td-hero-xp-fill{height:100%;border-radius:2px;transition:width 1s ease}
.td-hero-xp-text{font-family:'JetBrains Mono',monospace;font-size:7px;color:rgba(235,230,223,.3)}

/* TD STAGGER ANIMATIONS */
.accueil-anim .td-card{opacity:0;transform:translateY(12px);animation:tdFadeIn .4s ease forwards}
.accueil-anim .td-card:nth-child(1){animation-delay:.05s}
.accueil-anim .td-card:nth-child(2){animation-delay:.1s}
.accueil-anim .td-card:nth-child(3){animation-delay:.15s}
.accueil-anim .td-card:nth-child(4){animation-delay:.2s}
.accueil-anim .td-card:nth-child(5){animation-delay:.25s}
.accueil-anim .td-card:nth-child(6){animation-delay:.3s}
@keyframes tdFadeIn{to{opacity:1;transform:translateY(0)}}
.td-pointage{opacity:0;animation:tdSlideIn .5s ease .1s forwards}
.td-picks{opacity:0;animation:tdSlideIn .5s ease .15s forwards}
.ee-slim{opacity:0;animation:tdSlideIn .5s ease .2s forwards}
@keyframes tdSlideIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* PERF: Kill backdrop-filter on mobile */
@media(max-width:768px){
  .app-header,.header,.top-bar,.card,.toast,.confirm-block,.modal-overlay,.lock-screen,.lock-overlay,.dash-card,.history-item,.nav-card,.del,.tg-header,.tg-urg,.td-fab-scan,.td-weather-slot,.volo-bottom-nav,.volo-bn-dropdown,.team-carousel-counter,.ec-card,.pf-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .app-header,.header{background:rgba(10,10,18,.97)!important}
  .volo-bottom-nav{background:rgba(10,10,18,.97)!important}
  .card,.dash-card,.history-item,.nav-card{background:var(--card)!important}
  .accueil-badge,.tg-logo-img,.td-pick-active{animation:none!important}
  [class*="pulse"],[class*="glow"]{animation-duration:0s!important}
}

/* ══ DESIGN MASTER V10 — Premium classes ══ */

/* ── Ripple tactile terrain ── */
.td-card{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.td-card-ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--accent,rgba(232,115,74,.15)) 0%,transparent 70%);transform:scale(0);animation:td-ripple .5s ease-out forwards;pointer-events:none;z-index:5}
@keyframes td-ripple{0%{transform:scale(0);opacity:.6}100%{transform:scale(4);opacity:0}}

/* ── Skeleton shimmer accueil ── */
.skel-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px 16px;position:relative;overflow:hidden}
.skel-card::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(232,115,74,.04) 40%,rgba(232,115,74,.08) 50%,rgba(232,115,74,.04) 60%,transparent 100%);background-size:200% 100%;animation:skel-shimmer 1.8s ease-in-out infinite}
.skel-line{height:12px;border-radius:6px;background:rgba(255,255,255,.06);margin-bottom:8px}
.skel-line.w60{width:60%}
.skel-line.w40{width:40%}
.skel-line.w80{width:80%}
.skel-circle{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.06);margin-bottom:10px}
.skel-hero{height:240px;background:var(--card);position:relative;overflow:hidden}
.skel-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(232,115,74,.03),transparent);background-size:200% 100%;animation:skel-shimmer 2s ease-in-out infinite}
.skel-pointage{height:76px;margin:8px 16px;border-radius:16px;background:var(--card);border:1px solid var(--border);position:relative;overflow:hidden}
.skel-pointage::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(232,115,74,.04),transparent);background-size:200% 100%;animation:skel-shimmer 1.8s ease-in-out infinite}
@keyframes skel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-height:700px){.skel-hero{height:180px}}
@media(max-height:600px){.skel-hero{height:140px}}

/* ── PO Alert Banner ── */
.po-alert-banner{margin-bottom:12px;padding:14px 15px;background:linear-gradient(135deg,rgba(248,113,113,.2),rgba(248,113,113,.08));border:2px solid var(--red);border-radius:14px;cursor:pointer;animation:pulse-border 2s infinite;display:flex;align-items:center;gap:10px;transition:transform .2s;touch-action:manipulation}
.po-alert-banner:active{transform:scale(.96)}
.po-alert-title{font-weight:800;font-size:14px;color:var(--red);letter-spacing:1px;font-family:'Bricolage Grotesque',sans-serif}
.po-alert-sub{font-size:11px;color:var(--txt);margin-top:2px}
.po-alert-hint{font-size:10px;color:var(--gold);margin-top:3px}
body.light .po-alert-banner{background:linear-gradient(135deg,rgba(248,113,113,.12),rgba(248,113,113,.04));border-color:rgba(248,113,113,.6)}

/* ── PO Live Card ── */
.po-live-card{background:var(--card);border:1px solid rgba(52,211,153,.3);border-radius:12px;padding:10px 12px;margin:0 16px 6px;animation:po-glow 2.5s ease-in-out infinite;position:relative;overflow:hidden;transition:transform .2s;touch-action:manipulation}
.po-live-card:active{transform:scale(.97)}
.po-live-card.over24{border-color:var(--red);animation:po-glow-red 2.5s ease-in-out infinite}
.po-live-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(52,211,153,.3),transparent);background-size:200% 100%;animation:po-shimmer 3s linear infinite}
.po-live-card.over24::before{background:linear-gradient(90deg,transparent,rgba(248,113,113,.4),transparent);background-size:200% 100%;animation:po-shimmer 3s linear infinite}
.po-live-name{font-weight:700;font-size:13px;color:var(--txt)}
.po-live-dur{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 6px;border-radius:5px}
.po-live-dur.ok{color:rgba(52,211,153,.7);background:rgba(52,211,153,.08)}
.po-live-dur.over24{color:var(--red);background:rgba(248,113,113,.08)}
.po-live-loc{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;margin-top:4px}
.po-live-items-toggle{margin-top:5px;cursor:pointer;display:flex;align-items:center;gap:4px}
.po-live-items-toggle span{font-size:10px;color:rgba(52,211,153,.7);font-weight:600}
.po-live-item{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--dim);padding:1px 0;display:flex;align-items:center;gap:4px}
.po-live-item-count{font-size:9px;color:var(--muted);background:rgba(232,115,74,.1);padding:0 4px;border-radius:3px;font-weight:600}
body.light .po-live-card{background:var(--card);border-color:rgba(52,211,153,.25)}
body.light .po-live-card.over24{border-color:rgba(248,113,113,.5)}

/* ── TX History Row ── */
.tx-row{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:5px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:transform .15s;touch-action:manipulation}
.tx-row:active{transform:scale(.97)}
.tx-row.has-alert{border-color:rgba(232,115,74,.2)}
.tx-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tx-dot.pick-on{background:var(--rescue)}
.tx-dot.pick-off{background:var(--green)}
.tx-mode{font-weight:700;font-size:11px;width:52px;flex-shrink:0}
.tx-mode.pick-on{color:var(--rescue)}
.tx-mode.pick-off{color:var(--green)}
.tx-dest{flex:1;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-status{font-size:8px;padding:1px 5px;border-radius:5px;font-weight:600}
.tx-status.closed{background:rgba(52,211,153,.1);color:var(--green)}
.tx-status.active{background:rgba(232,115,74,.1);color:var(--rescue)}
.tx-time{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--dim);flex-shrink:0}
body.light .tx-row{background:var(--card);border-color:var(--border)}

/* ── Wizard Resume Banner ── */
.wizard-resume{margin:0 16px 12px;padding:14px 15px;background:linear-gradient(135deg,rgba(232,115,74,.15),rgba(232,115,74,.05));border:1px solid rgba(232,115,74,.4);border-radius:14px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:transform .15s;touch-action:manipulation}
.wizard-resume:active{transform:scale(.97)}
.wizard-resume-title{font-weight:700;font-size:13px;color:var(--gold);letter-spacing:1px;font-family:'Bricolage Grotesque',sans-serif}
.wizard-resume-step{font-size:11px;color:var(--muted);margin-top:2px}
body.light .wizard-resume{background:linear-gradient(135deg,rgba(232,115,74,.1),rgba(232,115,74,.03));border-color:rgba(232,115,74,.3)}

/* ── Section group smart collapse ── */
.td-group-label{user-select:none}
.td-group-label:hover{opacity:.8}
.td-grid.collapsed{display:none!important}

/* ── Conformite section — amber au lieu de rouge ── */
.td-group-conformite{color:#FBBF24!important}
.td-group-conformite .td-group-line{background:#FBBF24!important}
.td-card[data-section="conformite"]{--accent:#FBBF24}
body.light .td-card[data-section="conformite"]{--accent:#D97706}

/* ── Pointage premium glow ── */
.td-pointage{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── Footer premium ── */
.tg-foot-logo{opacity:.25!important;transition:opacity .3s}
.tg-foot-logo:hover{opacity:.5!important}
.tg-foot-txt{color:var(--muted2)!important;font-size:8px!important}
.tg-foot-gold{color:rgba(232,115,74,.25)!important}

/* ── Chef grid premium ── */
.tg-chef-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tg-chef-btn{display:flex;align-items:center;gap:6px;padding:10px 12px;background:rgba(232,115,74,.06);border:1px solid rgba(232,115,74,.1);border-radius:10px;color:var(--gold);font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:.3px;font-weight:600;cursor:pointer;transition:all .2s;touch-action:manipulation;white-space:nowrap}
.tg-chef-btn:active{transform:scale(.95);background:rgba(232,115,74,.12)}
.tg-chef-btn-red{color:var(--red);background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.1)}
.tg-chef-btn-red:active{background:rgba(248,113,113,.15)}
body.light .tg-chef-btn{background:rgba(232,115,74,.05);border-color:rgba(232,115,74,.15)}

/* ── Deconnexion clean ── */
.btn-logout{flex:1;padding:11px;background:none;border:1px solid var(--border);border-radius:10px;color:var(--muted2);font-size:14px;cursor:pointer;letter-spacing:.3px;font-family:'Bricolage Grotesque',sans-serif;transition:all .2s;touch-action:manipulation}
.btn-logout:active{background:rgba(232,115,74,.04);color:var(--muted)}
body.light .btn-logout{border-color:var(--border);color:var(--muted)}

/* ── PO Live Header ── */
.po-live-header{display:flex;align-items:center;gap:8px;padding:8px 16px;margin-bottom:6px}
.po-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.po-live-title{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:0.3px;color:var(--green);flex:1}
.po-live-count{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);background:rgba(52,211,153,.08);padding:2px 6px;border-radius:6px}

/* ── TX Header ── */
.tx-header{display:flex;align-items:center;gap:8px;padding:8px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tx-header-title{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;letter-spacing:0.3px;color:var(--gold);flex:1}
.tx-header-count{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted);background:rgba(232,115,74,.08);padding:2px 6px;border-radius:6px}

/* ── Section header pulse for active alerts ── */
.td-group-label.has-alert::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);animation:opsPulse 2s infinite;margin-left:4px;flex-shrink:0}

/* ── Pick shimmer line ── */
.td-pick-shimmer{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 0%,var(--red) 30%,#ff4444 50%,var(--red) 70%,transparent 100%);background-size:200% 100%;animation:shimmerLine 2s linear infinite}
@keyframes shimmerLine{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── PO Live SVG sizing ── */
.po-live-loc svg{width:11px;height:11px;stroke:var(--muted);stroke-width:1.5;fill:none;flex-shrink:0}
.po-live-items-toggle svg{width:8px;height:8px;stroke:rgba(52,211,153,.5);stroke-width:2;fill:none}

/* ── Glass card desktop enhancement ── */
@media(min-width:768px){
  .td-card{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .td-pointage{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}

/* ══ BENTO GRID V2 — Asymmetric layouts ══ */
.td-grid.bento{grid-template-columns:1fr 1fr;gap:10px}
.td-card-wide{grid-column:1/-1}
.td-card-wide .td-card-name{font-size:15px}
.td-card-wide .td-card-sub{font-size:10px}
.td-card-featured{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:18px 20px}
.td-card-featured svg{width:36px;height:36px;margin-bottom:0}
.td-card-featured .td-card-info{display:flex;flex-direction:column;gap:2px}
.td-card-featured .td-card-name{font-size:15px}
.td-card-featured .td-card-kpis{display:flex;gap:12px;margin-top:6px}
.td-card-featured .td-card-kpi{display:flex;flex-direction:column;align-items:center;gap:1px}
.td-card-featured .td-card-kpi-val{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;color:var(--txt)}
.td-card-featured .td-card-kpi-lbl{font-size:7px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}


/* ── Featured card pulse ── */
.td-card-featured{animation:featuredPulse 3s ease-in-out infinite}
@keyframes featuredPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,115,74,0),inset 0 0 0 1px rgba(255,255,255,.06)}50%{box-shadow:0 0 20px rgba(232,115,74,.08),inset 0 0 0 1px rgba(232,115,74,.12)}}

/* ── Card tint by section ── */
.td-card[style*="--accent:#E8734A"]{background:linear-gradient(145deg,rgba(232,115,74,.06),rgba(232,115,74,.02) 60%) var(--bg2)}
.td-card[style*="--accent:var(--green)"],.td-card[style*="--accent:#34D399"]{background:linear-gradient(145deg,rgba(52,211,153,.06),rgba(52,211,153,.02) 60%) var(--bg2)}
.td-card[style*="--accent:#60A5FA"]{background:linear-gradient(145deg,rgba(96,165,250,.06),rgba(96,165,250,.02) 60%) var(--bg2)}
.td-card[style*="--accent:#8B5CF6"]{background:linear-gradient(145deg,rgba(139,92,246,.06),rgba(139,92,246,.02) 60%) var(--bg2)}
.td-card[style*="--accent:#FBBF24"]{background:linear-gradient(145deg,rgba(251,191,36,.06),rgba(251,191,36,.02) 60%) var(--bg2)}
body.light .td-card[style*="--accent:#E8734A"]{background:linear-gradient(145deg,rgba(232,115,74,.04),#FFFFFF 60%)}
body.light .td-card[style*="--accent:#60A5FA"]{background:linear-gradient(145deg,rgba(96,165,250,.04),#FFFFFF 60%)}
body.light .td-card[style*="--accent:#8B5CF6"]{background:linear-gradient(145deg,rgba(139,92,246,.04),#FFFFFF 60%)}
body.light .td-card[style*="--accent:#FBBF24"]{background:linear-gradient(145deg,rgba(251,191,36,.03),#FFFFFF 60%)}

/* ── Filet doré au hover (fin, lent, discret) ── */
@keyframes volo-gold-sweep{
  0%  {background:linear-gradient(110deg,transparent 42%,rgba(201,168,76,.0) 47%,rgba(201,168,76,.55) 50%,rgba(201,168,76,.0) 53%,transparent 58%);background-size:280% 100%;background-position:220% 0;opacity:1}
  100%{background:linear-gradient(110deg,transparent 42%,rgba(201,168,76,.0) 47%,rgba(201,168,76,.55) 50%,rgba(201,168,76,.0) 53%,transparent 58%);background-size:280% 100%;background-position:-120% 0;opacity:0}
}
.td-card:hover::after{animation:volo-gold-sweep 1.4s cubic-bezier(.25,.46,.45,.94) forwards}
@media(max-width:768px){.td-card:hover::after{animation:none}}

/* ── Gold filet sur .card (pages secondaires) ── */
.card{position:relative}
.card::after{content:'';position:absolute;inset:0;background:transparent;opacity:0;pointer-events:none}
.card:hover::after{animation:volo-gold-sweep 1.4s cubic-bezier(.25,.46,.45,.94) forwards}
@media(max-width:768px){.card:hover::after{animation:none}}


@keyframes volo-gold-sweep{
  0%{background:linear-gradient(110deg,transparent 42%,rgba(201,168,76,0) 47%,rgba(201,168,76,.55) 50%,rgba(201,168,76,0) 53%,transparent 58%);background-size:280%% 100%%;background-position:220%% 0;opacity:1}
  100%{background:linear-gradient(110deg,transparent 42%,rgba(201,168,76,0) 47%,rgba(201,168,76,.55) 50%,rgba(201,168,76,0) 53%,transparent 58%);background-size:280%% 100%%;background-position:-120%% 0;opacity:0}
}
.stat-card,.rsst-card,.ai-card,.plan-card,.chef-card,.caisse-kpi-card,.group-card,.day-panel,.box{position:relative}
.stat-card::after,.rsst-card::after,.ai-card::after,.plan-card::after,.chef-card::after,.caisse-kpi-card::after,.group-card::after,.day-panel::after,.box::after{content:'';position:absolute;inset:0;background:transparent;opacity:0;pointer-events:none}
.stat-card:hover::after,.rsst-card:hover::after,.ai-card:hover::after,.plan-card:hover::after,.chef-card:hover::after,.caisse-kpi-card:hover::after,.group-card:hover::after,.day-panel:hover::after,.box:hover::after{animation:volo-gold-sweep 1.4s cubic-bezier(.25,.46,.45,.94) forwards}
@media(max-width:768px){.stat-card:hover::after,.rsst-card:hover::after,.ai-card:hover::after,.plan-card:hover::after,.chef-card:hover::after,.caisse-kpi-card:hover::after,.group-card:hover::after,.day-panel:hover::after,.box:hover::after{animation:none}}

/* ── Ghost icon background ── */
.td-card{position:relative;overflow:hidden}
.td-card-ghost{position:absolute;bottom:-6px;right:-6px;width:56px;height:56px;opacity:.035;transform:rotate(15deg);stroke:var(--accent,#E8734A);stroke-width:.8;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;z-index:0;transition:opacity .3s}
.td-card:hover .td-card-ghost{opacity:.06}
body.light .td-card-ghost{opacity:.045}
body.light .td-card:hover .td-card-ghost{opacity:.07}

/* ── Hero glow radial ── */
.tg-hero-txt::before{content:'';position:absolute;bottom:0;left:0;width:250px;height:150px;background:radial-gradient(ellipse at bottom left,rgba(232,115,74,.12),transparent 70%);pointer-events:none;z-index:-1}
body.light .tg-hero-txt::before{background:radial-gradient(ellipse at bottom left,rgba(232,115,74,.08),transparent 70%)}

/* ── Footer signature line ── */
.tg-foot::before{content:'';display:block;width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,115,74,.2),transparent);margin:0 auto 20px}

/* ── Stock Live card inline KPIs ── */
.td-stock-live-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.td-stock-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:ee-pulse 2s infinite;flex-shrink:0}
.td-stock-lbl{font-size:7px;color:var(--green);font-weight:600;letter-spacing:.1em}

/* ── Vacances banner ── */
.vacances-banner{display:flex;align-items:center;gap:10px;margin:0 0 8px;padding:12px 14px;background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(251,191,36,.03));border:1px solid rgba(251,191,36,.25);border-radius:12px;cursor:pointer;transition:transform .15s;touch-action:manipulation}
.vacances-banner:active{transform:scale(.97)}
.vacances-title{font-family:'Bricolage Grotesque',sans-serif;font-size:11px;font-weight:700;letter-spacing:.3px;color:#FBBF24}
.vacances-sub{font-size:10px;color:var(--muted);margin-top:2px}
body.light .vacances-banner{background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(251,191,36,.02));border-color:rgba(217,119,6,.2)}
body.light .vacances-title{color:#D97706}

/* ── PO Live scroll container ── */
.po-live-scroll{max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(232,115,74,.2) transparent}
.po-live-scroll::-webkit-scrollbar{width:3px}
.po-live-scroll::-webkit-scrollbar-track{background:transparent}
.po-live-scroll::-webkit-scrollbar-thumb{background:rgba(232,115,74,.2);border-radius:3px}

/* ══════════════════════════════════════════
   V9 UPGRADES — Design System Enhancements
   ══════════════════════════════════════════ */

/* ── VIEW TRANSITIONS ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s ease-out}
::view-transition-new(root){animation:vt-in .25s ease-in}
@keyframes vt-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}

/* ── GLASS DEPTH — 3 surfaces ── */
.glass-s1{background:rgba(20,20,32,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(232,115,74,.1);box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)}
.glass-s2{background:rgba(20,20,32,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.06);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.glass-s3{background:rgba(20,20,32,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.03);box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}
body.light .glass-s1{background:rgba(255,252,249,.98);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(210,195,180,.5)}
body.light .glass-s2{background:rgba(255,252,249,.92);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(210,195,180,.35)}
body.light .glass-s3{background:rgba(255,252,249,.7);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(210,195,180,.2)}

/* ── MICRO ANIMATIONS — stagger fadeUp ── */
@keyframes v9-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes v9-scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.v9-anim{animation:v9-fadeUp .4s cubic-bezier(.4,0,.2,1) both}
.v9-anim:nth-child(1){animation-delay:0s}
.v9-anim:nth-child(2){animation-delay:.06s}
.v9-anim:nth-child(3){animation-delay:.12s}
.v9-anim:nth-child(4){animation-delay:.18s}
.v9-anim:nth-child(5){animation-delay:.24s}
.v9-anim:nth-child(6){animation-delay:.3s}
.v9-anim:nth-child(7){animation-delay:.36s}
.v9-anim:nth-child(8){animation-delay:.42s}
.v9-anim:nth-child(9){animation-delay:.48s}
.v9-anim:nth-child(10){animation-delay:.54s}
@media(prefers-reduced-motion:reduce){.v9-anim{animation:none!important}}

/* ── SKELETON LOADING ── */
@keyframes v9-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel{border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.03) 75%);background-size:200% 100%;animation:v9-shimmer 1.5s ease infinite}
.skel-circle{border-radius:50%}
.skel-card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
body.light .skel{background:linear-gradient(90deg,rgba(0,0,0,.04) 25%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.04) 75%);background-size:200% 100%;animation:v9-shimmer 1.5s ease infinite}

/* ── BOTTOM NAV ── */
.v9-bnav{position:fixed;bottom:0;left:0;right:0;z-index:9000;padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 10px);background:linear-gradient(180deg,transparent,rgba(10,10,18,.98) 20%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:none;flex-direction:row;justify-content:space-around;align-items:center;border-top:1px solid rgba(232,115,74,.08)}
.v9-bnav.visible{display:flex}
.v9-bnav a{display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;padding:8px 16px!important;border-radius:12px!important;text-decoration:none!important;opacity:.45;transition:all .2s;-webkit-tap-highlight-color:transparent;min-width:60px}
.v9-bnav a.active{opacity:1!important;background:rgba(232,115,74,.1)!important}
.v9-bnav .bn-icon{width:26px!important;height:26px!important;border-radius:6px!important;display:block!important;object-fit:cover!important}
.v9-bnav .bn-label{font-family:'JetBrains Mono',monospace!important;font-size:9px!important;letter-spacing:0.5px!important;color:var(--muted,#8A8594)!important;display:block!important}
.v9-bnav a.active .bn-label{color:var(--gold,#E8734A)!important}
.v9-bnav a.active::after{content:''!important;display:block!important;width:4px!important;height:4px!important;border-radius:50%!important;background:var(--gold,#E8734A)!important;margin-top:2px!important}
body.light .v9-bnav{background:linear-gradient(180deg,transparent,rgba(250,247,244,.97) 25%)}
body.light .v9-bnav a.active{background:rgba(232,115,74,.06)}

/* ═══════════════════════════════════════
   DESIGN SYSTEM V2 — RAYCAST SURFACES
   Ne pas modifier sans Jonathan
═══════════════════════════════════════ */

/* ── Card standard ── */
.vds-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.vds-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 40%);
  pointer-events: none;
}

/* ── Card héro avec ring border animé (pick-on actifs, alertes) ── */
.vds-card-hero {
  position: relative;
  border-radius: var(--r-lg);
  padding: 1.5px;
  box-shadow: var(--shadow-card);
}
.vds-card-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  padding: 1.5px;
  background: linear-gradient(135deg, var(--coral-ring) 0%, transparent 60%, var(--coral-ring) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: vds-pulse-ring 3s ease-in-out infinite;
}
.vds-card-hero::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--r-lg) - 1.5px);
  background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 40%);
  pointer-events: none;
}
.vds-card-hero-inner {
  position: relative;
  z-index: 1;
  background: var(--bg3);
  border-radius: calc(var(--r-lg) - 1.5px);
  border: 1px solid rgba(232,115,74,.15);
}
@keyframes vds-pulse-ring {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

/* ── Stat block encastré ── */
.vds-stat {
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  box-shadow: var(--shadow-inset);
}
.vds-stat-label {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--muted2);
  letter-spacing: .2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 2px;
}
.vds-stat-value {
  font-family: var(--f-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}
.vds-stat-value.coral  { color: var(--coral); }
.vds-stat-value.green  { color: var(--green); }
.vds-stat-value.amber  { color: var(--amber); }
.vds-stat-value.red    { color: var(--red); }

/* ── Pill statut ── */
.vds-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: var(--shadow-inset);
}
.vds-pill.live       { background: var(--green-dim); border: 1px solid rgba(52,211,153,.35);  color: var(--green); }
.vds-pill.en-cours   { background: var(--amber-dim); border: 1px solid rgba(251,191,36,.35);  color: var(--amber); }
.vds-pill.alerte     { background: var(--red-dim);   border: 1px solid rgba(248,113,113,.35); color: var(--red); }
.vds-pill.dispo      { background: var(--green-dim); border: 1px solid rgba(52,211,153,.35);  color: var(--green); }
.vds-pill.hors-ligne { background: rgba(138,133,148,.12); border: 1px solid rgba(138,133,148,.2); color: var(--muted); }

.vds-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.vds-pill-dot.blink { animation: vds-blink 1.8s ease-in-out infinite; }
@keyframes vds-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Avatar membre ── */
.vds-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--bg4);
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-title);
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  box-shadow: var(--shadow-inset);
}
.vds-avatar.green { border-color: rgba(52,211,153,.5);  color: var(--green); background: var(--green-dim); }
.vds-avatar.red   { border-color: rgba(248,113,113,.5); color: var(--red);   background: var(--red-dim); }
.vds-avatar.coral { border-color: rgba(232,115,74,.5);  color: var(--coral); background: var(--coral-dim); }

/* ── Glass UNIQUEMENT modals/toasts ── */
.vds-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
@media (max-width: 768px) {
  .vds-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(14,14,26,.97) !important;
  }
}

/* ── Bouton primary ── */
.vds-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px;
  background: linear-gradient(135deg, var(--coral) 0%, #D4613A 100%);
  border: none; border-radius: var(--r-pill);
  font-family: var(--f-body); font-size: 12px; font-weight: 600;
  color: #fff; cursor: pointer;
  box-shadow: var(--shadow-btn), 0 4px 14px rgba(232,115,74,.35);
  letter-spacing: .1px;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
  white-space: nowrap;
}
.vds-btn-primary:hover  { transform: translateY(-1px); box-shadow: var(--shadow-btn), 0 6px 18px rgba(232,115,74,.45); }
.vds-btn-primary:active { transform: translateY(0); box-shadow: inset 0 2px 4px rgba(0,0,0,.3); }

/* ── Action button ── */
.vds-action-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: var(--shadow-card), var(--shadow-inset);
  position: relative; overflow: hidden;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .1s var(--ease);
  text-align: left;
}
.vds-action-btn::before {
  content: '';
  position: absolute; inset: 0; border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events: none;
}
.vds-action-btn:hover  { background: var(--bg3); border-color: var(--border2); transform: translateY(-1px); }
.vds-action-btn:active { transform: translateY(0); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }

/* ── Icon dans action button ── */
.vds-action-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
  box-shadow: var(--shadow-inset);
}
.vds-action-icon.coral { background: var(--coral-dim);  border: 1px solid rgba(232,115,74,.25); }
.vds-action-icon.green { background: var(--green-dim);  border: 1px solid rgba(52,211,153,.25); }
.vds-action-icon.blue  { background: var(--blue-dim);   border: 1px solid rgba(96,165,250,.25); }
.vds-action-icon.amber { background: var(--amber-dim);  border: 1px solid rgba(251,191,36,.25); }

/* ── KBD tag ── */
.vds-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; min-width: 24px;
  background: var(--bg4);
  border: 1px solid var(--border2);
  border-bottom: 2px solid rgba(0,0,0,.5);
  border-radius: 5px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 500;
  color: var(--muted);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── Animations fadeUp staggerées ── */
.vds-fade-1 { animation: vds-fadeUp .4s var(--ease) both; }
.vds-fade-2 { animation: vds-fadeUp .4s .08s var(--ease) both; }
.vds-fade-3 { animation: vds-fadeUp .4s .16s var(--ease) both; }
.vds-fade-4 { animation: vds-fadeUp .4s .24s var(--ease) both; }
.vds-fade-5 { animation: vds-fadeUp .4s .32s var(--ease) both; }
@keyframes vds-fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Alert banner ── */
.vds-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--red-dim);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-inset), 0 0 20px rgba(248,113,113,.1);
}
.vds-alert-text { flex: 1; font-size: 12px; color: var(--red); font-weight: 500; }
.vds-alert-time { font-family: var(--f-mono); font-size: 10px; color: rgba(248,113,113,.7); letter-spacing: .1em; flex-shrink: 0; }

/* ── Scan line tactique (z-index 0, behind everything) ── */
.vds-scan-wrap {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.vds-scan-wrap::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,115,74,.5), transparent);
  animation: vds-scan 6s linear infinite;
}
@keyframes vds-scan { from{top:0} to{top:100vh} }

/* ═══════════════════════════════════════════════════════════
   VDS V2 — CARD STYLE: Ring Border Animé + Scan Sweep
   Jonathan pick: Style 2 (ring coral/blue/violet) + Style 7 (scan vert hover)
   ═══════════════════════════════════════════════════════════ */

@keyframes vds-ring-shift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes vds-card-scan {
  0%   { transform: translateY(-2px); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(600px); opacity: 0; }
}

/* Override standard card → ring border animé */
.vds-card {
  border-color: transparent;
  transition: transform .25s var(--ease), box-shadow .3s ease;
}
.vds-card::before {
  /* Ring border: gradient coral→blue→violet, mask shows only border pixels */
  inset: 0;
  padding: 1.5px;
  background: linear-gradient(135deg, #E8734A 0%, #60A5FA 35%, #8B5CF6 65%, #E8734A 100%);
  background-size: 300% 300%;
  animation: vds-ring-shift 5s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: var(--r-lg);
}
/* Scan line — vert, sweep de haut en bas au hover */
.vds-card::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(52,211,153,.0) 10%, rgba(52,211,153,.85) 50%, rgba(52,211,153,.0) 90%, transparent 100%);
  top: 0;
  pointer-events: none;
  animation: none;
  opacity: 0;
}
.vds-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 0 1px rgba(232,115,74,.08);
}
.vds-card:hover::before {
  animation-duration: 1.4s; /* ring accélère au hover */
}
.vds-card:hover::after {
  animation: vds-card-scan 1.1s ease-out forwards;
}

/* Hero card — gradient plus vif, scan via inner */
.vds-card-hero::before {
  background: linear-gradient(135deg, #E8734A 0%, #60A5FA 35%, #8B5CF6 65%, #E8734A 100%);
  background-size: 300% 300%;
  animation: vds-ring-shift 3.5s ease infinite;
}
.vds-card-hero:hover::before { animation-duration: 1s; }
.vds-card-hero-inner::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.85), transparent);
  top: 0; pointer-events: none; opacity: 0; animation: none;
  border-radius: 2px;
}
.vds-card-hero:hover .vds-card-hero-inner::after {
  animation: vds-card-scan 1.1s ease-out forwards;
}
.vds-card-hero-inner { position: relative; overflow: hidden; }

/* accueil-pcard — scan via ::after (::before = left bar) */
.accueil-pcard {
  transition: transform .2s var(--ease), box-shadow .25s ease;
}
.accueil-pcard::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.8), transparent);
  top: 0; pointer-events: none; opacity: 0; animation: none;
}
.accueil-pcard:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.accueil-pcard:hover::after {
  animation: vds-card-scan 1s ease-out forwards;
}

/* accueil-gcard — ring glow + scan */
.accueil-gcard {
  transition: transform .2s var(--ease), box-shadow .25s ease, border-color .25s;
}
.accueil-gcard::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(52,211,153,.7), transparent);
  top: 0; pointer-events: none; opacity: 0; animation: none;
}
.accueil-gcard:hover {
  transform: translateY(-2px);
  border-color: rgba(232,115,74,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 12px rgba(232,115,74,.08);
}
.accueil-gcard:hover::after {
  animation: vds-card-scan .9s ease-out forwards;
}

/* ══════════════════════════════════════════════
   VOLO SST v9.5 — Inventaire Design System
   #3 Glassmorphism cards / #4 caisse card / #5 search
   #6 couleurs caisse / #7 slideDown / #8 fadeUp items
   #9 chip transitions / #10 donut / #13 touch targets
   #14 status chips / #16 bandeau / #17 will-change
   ══════════════════════════════════════════════ */

/* ── Animations keyframes inventaire ── */
@keyframes inv-slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes inv-fadeUp {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes inv-donutFill {
  from { stroke-dashoffset: var(--inv-circ, 175.93); }
  to   { stroke-dashoffset: var(--inv-offset, 0); }
}
@keyframes inv-critPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.5; }
}

/* ── Layout wrapper ── */
.inv-wrap {
  padding: 12px 16px 80px;
  max-width: 600px;
  margin: 0 auto;
}

/* ── #5 Search bar frosted glass ── */
.inv-search-bar { margin-bottom: 12px; }
.inv-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 0 12px;
  transition: border-color .2s;
  &:focus-within {
    border-color: rgba(232,115,74,.35);
  }
}
.inv-search-icon { flex-shrink: 0; }
.inv-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--txt);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  padding: 14px 0;
  &::placeholder { color: var(--muted); }
}
.inv-scan-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  -webkit-tap-highlight-color: transparent;
  &:active { background: rgba(201,168,76,.1); }
}

/* ── #9 Filter chips ── */
.inv-chips {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}
.inv-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--r-pill, 86px);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  &:active { transform: scale(.97); }
}
.inv-chip-active {
  background: rgba(232,115,74,.15);
  border-color: rgba(232,115,74,.4);
  color: var(--coral);
  font-weight: 600;
}
.inv-chip-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: .7;
}

/* ── KPI donuts ── */
.inv-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.inv-kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--inv-border);
  border-radius: 14px;
  padding: 12px 8px;
  will-change: transform;
}
.inv-kpi-donut {
  width: 56px;
  height: 56px;
  /* #10 donut fill animation handled via style attr on SVG circle */
}
.inv-kpi-donut circle:last-child {
  transition: stroke-dashoffset .6s cubic-bezier(.22,1,.36,1);
}
.inv-kpi-value {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.inv-kpi-label {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .5px;
  text-align: center;
  font-family: 'DM Sans', sans-serif;
}

/* ── #4 Caisse cards glassmorphism ── */
.inv-caisses-list { display: flex; flex-direction: column; gap: 8px; }
.inv-caisse-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  &:active { opacity: .85; }
  &.inv-caisse-critique {
    border-color: rgba(248,113,113,.2);
  }
  &.inv-caisse-open {
    border-color: rgba(232,115,74,.3);
    box-shadow: 0 0 20px rgba(232,115,74,.08);
  }
  &:hover {
    border-color: rgba(232,115,74,.3);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
  }
}
.inv-caisse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  min-height: 64px;
}
.inv-caisse-info { flex: 1; min-width: 0; }
.inv-caisse-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-caisse-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.inv-caisse-type-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(232,115,74,.12);
  color: var(--coral);
  border-left: 3px solid var(--coral);
  /* #6 colour overrides applied via JS style attr */
}
.inv-caisse-verif {
  font-size: 10px;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
}
.inv-caisse-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.inv-caisse-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  padding: 3px 8px;
}
.inv-caisse-chevron {
  transition: transform .25s var(--ease);
}
.inv-chevron-open { transform: rotate(180deg); }
.inv-caisse-bar-wrap {
  height: 3px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.inv-caisse-bar {
  height: 100%;
  transition: width .5s cubic-bezier(.22,1,.36,1);
}

/* ── #7 Fiche sac slide open ── */
.inv-fiche-sac {
  overflow: hidden;
  animation: inv-slideDown .25s ease-out;
  will-change: opacity, transform;
  border-top: 1px solid rgba(255,255,255,.05);
  padding: 12px;
}

/* ── #16 Bandeau critique redesign ── */
.inv-bandeau-critique {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(248,113,113,.15), rgba(248,113,113,.05));
  border-left: 3px solid #F87171;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #F87171;
  font-family: 'DM Sans', sans-serif;
}
.inv-bandeau-icon {
  animation: inv-critPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Items list ── */
.inv-items-list { display: flex; flex-direction: column; gap: 6px; }

/* ── #13 Item row touch target 64px + #8 fadeUp ── */
.inv-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: inv-fadeUp .2s ease-out both;
  animation-delay: calc(var(--i,0) * 30ms);
  transition: background .15s, border-color .15s;
  &:active {
    background: rgba(232,115,74,.06);
    border-color: rgba(232,115,74,.2);
  }
}
.inv-item-photo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  & img { width: 100%; height: 100%; object-fit: cover; }
}
.inv-item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(232,115,74,.22), rgba(201,168,76,.22));
  color: var(--coral);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inv-item-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-item-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .3px;
}
.inv-item-insp {
  font-size: 10px;
  color: var(--muted2);
  font-family: 'DM Sans', sans-serif;
}

/* ── #14 Status chip redesign ── */
.inv-item-status {
  flex-shrink: 0;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  font-family: 'JetBrains Mono', monospace !important;
  background: none !important; /* override inline style — set via JS now */
  white-space: nowrap;
}
.inv-status-dispo {
  background: rgba(52,211,153,.12) !important;
  color: #34D399 !important;
  border: 1px solid rgba(52,211,153,.25) !important;
}
.inv-status-critique {
  background: rgba(248,113,113,.12) !important;
  color: #F87171 !important;
  border: 1px solid rgba(248,113,113,.25) !important;
}
.inv-status-surveiller {
  background: rgba(251,191,36,.12) !important;
  color: #FBBF24 !important;
  border: 1px solid rgba(251,191,36,.25) !important;
}

/* ── Fiche buttons ── */
.inv-fiche-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.05);
}
.inv-btn-print {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  &:active {
    background: rgba(232,115,74,.1);
    border-color: rgba(232,115,74,.3);
    color: var(--coral);
  }
}

/* FAB */
.inv-fab {
  position: fixed;
  bottom: 88px;
  right: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), #D4650E);
  color: #fff;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(232,115,74,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, box-shadow .15s;
  &:active { transform: scale(.92); box-shadow: 0 2px 10px rgba(232,115,74,.3); }
}

/* ── QR scanner zone ── */
.inv-scanner-zone {
  position: relative;
  width: 100%;
  max-height: 220px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  margin-top: 8px;
  & video { width: 100%; height: 220px; object-fit: cover; }
}
.inv-scanner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-scanner-frame {
  width: 150px;
  height: 150px;
  border: 2px solid var(--coral);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.45);
}
.inv-scanner-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,.6);
  border: none;
  color: #fff;
  font-size: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* ── Toast ── */
.inv-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(10,10,18,.95);
  border: 1px solid rgba(232,115,74,.3);
  color: var(--txt);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 24px;
  z-index: 9990;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  white-space: nowrap;
}
.inv-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── #17 will-change performance ── */
.inv-chip { will-change: background, border-color; }

/* ── #19 Empty state ── */
.inv-empty {
  text-align: center;
  padding: 48px 24px;
  opacity: .7;
}
.inv-empty-icon {
  display: block;
  margin: 0 auto 16px;
}
.inv-empty-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 8px;
}
.inv-empty-sub {
  font-size: 13px;
  color: var(--muted);
}

/* ── Mobile perf: kill blur on very small devices ── */
@media(max-width:480px) {
  .inv-caisse-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12,12,24,.95);
  }
  .inv-search-input-wrap {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* END inventaire design system */