/* =========================================================
   BIZATI CONTRÔLE — Design system
   Identité visuelle professionnelle moderne
   - Bleu principal #1736A0 (confiance, professionnalisme)
   - Orange #F39A00 (accents, actions importantes)
   - Gris clair #F4F6FA (fond)
   - Gris foncé #252B36 (texte)
   - Design épuré, cohérent, sans dégradés
   ========================================================= */

/* Polices système pour fonctionnement offline (réseau mobile faible) */

:root{
  /* --- Palette BIZATI CONTRÔLE --- */
  /* Couleurs principales */
  --primary:#1736A0;
  --primary-dark:#0F2678;
  --primary-light:#4A5FB8;
  --primary-bg:#E8EDF5;

  /* Couleur secondaire — ORANGE (accent, valeur, action) */
  --accent:#F39A00;
  --accent-dark:#D17E00;
  --accent-light:#F5B54D;
  --accent-bg:#FFF4E0;

  /* Couleur tertiaire — GRIS FONCÉ (profondeur) */
  --gold:#252B36;
  --gold-dark:#1A1E26;
  --gold-bg:#F4F6FA;

  /* Alias de compatibilité (anciens noms encore référencés) */
  --blue-dark:#0F2678;
  --blue-main:#1736A0;
  --blue-slate:#252B36;
  --blue-light:#4A5FB8;

  /* Couleurs neutres */
  --white:#FFFFFF;
  --ink:#252B36;               /* Texte principal */
  --ink-soft:#5A6372;          /* Texte secondaire */
  --ink-faint:#8A92A0;         /* Texte très clair */

  /* Fond et lignes */
  --paper:#F4F6FA;             /* Fond principal */
  --paper-alt:#E8EBF0;         /* Fond alternatif */
  --line:#D0D5DD;              /* Lignes */
  --line-strong:#B0B5C0;       /* Lignes fortes */

  /* Couleurs d'état */
  --green:#1E8A5F;
  --green-bg:#DCF3E7;
  --red:#D6455A;
  --red-bg:#FBE2E5;

  /* Rayons et ombres */
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --ease-fluid:cubic-bezier(.34,1.56,.64,1);
  --shadow-card:0 4px 12px rgba(30,22,15,.08), 0 16px 32px -12px rgba(30,22,15,.16);
  --shadow-pop:0 24px 48px -20px rgba(30,22,15,.42);
  --shadow-hover:0 8px 24px -8px rgba(30,22,15,.25);
  --shadow-primary:0 8px 20px -6px rgba(14,92,76,.4);
  --shadow-accent:0 8px 20px -6px rgba(217,164,65,.4);

  /* Polices */
  --font-ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Consolas','Monaco','Courier New',monospace;

  /* Dimensions */
  --nav-h:80px;
  --header-h:70px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* --- Signature : le "galon" tissé (liseré 3 tons) ---
   Bande fine réutilisée en haut des cartes/en-têtes, comme le
   biais tissé qui borde un boubou ou un pagne. */
.trim{
  height:5px; border-radius:99px; overflow:hidden;
  background:repeating-linear-gradient(115deg,
    var(--primary) 0 10px, var(--accent) 10px 20px, var(--gold) 20px 30px);
  background-size:200% 100%;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--paper);
  color:var(--ink);
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(var(--nav-h) + 16px);
  line-height:1.6;
  transition:background .3s ease;
}
body.no-nav{padding-bottom:0;}

/* Amélioration du scroll sur mobile */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);}

h1,h2,h3,h4{font-family:var(--font-ui);font-weight:700;color:var(--ink);margin:0;line-height:1.25;}
h1{font-size:1.5rem;letter-spacing:-.02em;}
h2{font-size:1.25rem;letter-spacing:-.01em;}
h3{font-size:1.1rem;}
a{color:inherit;text-decoration:none;transition:color .25s ease;}
a:hover{color:var(--primary-dark);}
button{font-family:inherit;}
::selection{background:var(--primary-light);color:var(--white);}

.num, .mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  letter-spacing:-.01em;
}

/* focus visible partout (accessibilité) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid var(--primary-light);
  outline-offset:2px;
  border-radius:8px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* Amélioration du contraste et accessibilité */
@media (prefers-contrast: high){
  :root{
    --line:#C0B0A0;
    --line-strong:#A89888;
    --ink-soft:#3D3025;
  }
}

/* =========================================================
   CONTENEUR / DIVIDER "PERFORÉ" (esprit page de cahier arrachée)
   ========================================================= */
.container-app{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
@media (max-width:480px){
  .container-app{padding:0 16px;}
}
.divider-stitch{
  height:1px;
  border:none;
  background-image:repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px);
}

/* =========================================================
   HEADER
   ========================================================= */
.app-header{
  position:sticky; top:0; z-index:40;
  background:rgba(251,246,239,.95);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.app-header::before{
  content:''; display:block; height:4px;
  background:repeating-linear-gradient(115deg,
    var(--primary) 0 10px, var(--accent) 10px 20px, var(--gold) 20px 30px);
}
.app-header .row-header{
  display:flex; align-items:center; gap:12px;
  min-height:var(--header-h);
  padding:12px 20px;
}
@media (max-width:480px){
  .app-header .row-header{padding:10px 16px;}
}
.brand-mark{
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:22px; flex:none;
  box-shadow:var(--shadow-accent);
  transition:transform .2s ease, box-shadow .2s ease;
}
.brand-mark:hover{transform:scale(1.05);}
.brand-name{font-weight:700; font-size:1.05rem; line-height:1.2; color:var(--ink);}
.brand-sub{font-size:.8rem; color:var(--ink-soft);}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:6px;}
.icon-btn{
  width:44px; height:44px; border-radius:13px;
  border:1px solid var(--line);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:18px;
  position:relative; cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.icon-btn:hover{background:var(--paper-alt); border-color:var(--line-strong); transform:translateY(-2px); box-shadow:0 4px 12px -4px rgba(45,21,4,.15);}
.icon-btn:active{transform:translateY(0) scale(.92);}
.icon-btn .dot-alert{
  position:absolute; top:6px; right:7px;
  width:8px; height:8px; border-radius:50%;
  background:var(--red); border:2px solid var(--white);
}
.back-link{
  display:flex; align-items:center; gap:8px; font-weight:600; color:var(--accent);
}
.back-link i{font-size:1.2rem;}

/* barre secondaire (sous-nav desktop) */
.subnav-desktop{
  display:none;
}
@media (min-width:768px){
  .subnav-desktop{
    display:flex; gap:6px; padding:8px 20px 10px;
    max-width:1200px; margin:0 auto;
  }
  .subnav-desktop a{
    display:flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:12px;
    font-weight:600; font-size:.9rem; color:var(--ink-soft);
    transition:all .2s ease;
  }
  .subnav-desktop a.active{background:var(--primary); color:var(--white); box-shadow:0 4px 12px -4px rgba(14,92,76,.4);}
  .subnav-desktop a:not(.active):hover{background:var(--paper-alt); color:var(--ink);}
}

/* =========================================================
   BOTTOM NAV (mobile-first) + rail desktop
   ========================================================= */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 32px -16px rgba(45,21,4,.25);
  padding:8px 12px calc(var(--safe-bottom) + 8px);
  transition:transform .3s ease;
}
.bottom-nav ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  max-width:520px; margin:0 auto;
}
.bottom-nav li{flex:1; display:flex; justify-content:center;}
.bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--ink-faint); font-size:.7rem; font-weight:600;
  padding:6px 8px; min-width:56px;
  transition:all .2s ease;
}
.bottom-nav a i{font-size:1.4rem; transition:transform .25s var(--ease-fluid);}
.bottom-nav a:active i{transform:scale(.9);}
.bottom-nav a.active{color:var(--primary);}
.bottom-nav a.active i{transform:translateY(-3px) scale(1.08);}
.bottom-nav a.active::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:1px;animation:navdot-in .35s var(--ease-fluid);}
@keyframes navdot-in{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}
.bottom-nav a.fab{
  color:var(--white); background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  width:58px; height:58px; border-radius:18px;
  align-items:center; justify-content:center;
  margin-top:-28px; box-shadow:var(--shadow-accent);
  transition:all .2s ease;
}
.bottom-nav a.fab:hover{transform:scale(1.05);}
.bottom-nav a.fab:active{transform:scale(.95);}
.bottom-nav a.fab i{font-size:1.6rem;}
.bottom-nav a.fab span{display:none;}

@media (min-width:768px){
  body{padding-bottom:0;}
  .bottom-nav{display:none;}
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; font-weight:600; font-size:.95rem;
  padding:14px 22px; border:1px solid transparent; cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative; overflow:hidden;
}
.btn::before{
  content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.2), transparent);
  opacity:0; transition:opacity .3s ease;
}
.btn:hover::before{opacity:1;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.97);}
.btn-block{width:100%;}
.btn-lg{padding:18px 24px; font-size:1.05rem; border-radius:16px;}
.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:var(--white); box-shadow:var(--shadow-primary);}
.btn-primary:hover{background:linear-gradient(135deg, var(--primary-dark), var(--primary)); box-shadow:var(--shadow-primary);}
.btn-outline{background:var(--white); color:var(--primary); border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--primary); background:var(--primary-bg); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:transparent;}
.btn-ghost:hover{background:var(--paper-alt); color:var(--ink);}
.btn-danger{background:var(--red-bg); color:var(--red); border-color:var(--red);}
.btn-danger:hover{background:var(--red); color:var(--white); transform:translateY(-1px);}
.btn-success{background:var(--green-bg); color:var(--green); border-color:var(--green);}
.btn-success:hover{background:var(--green); color:var(--white); transform:translateY(-1px);}
.btn-sm{padding:10px 16px; font-size:.85rem; border-radius:11px;}
.btn-icon-circle{
  width:40px; height:40px; border-radius:50%; padding:0;
  background:var(--paper-alt); color:var(--ink-soft); border:1px solid var(--line);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.btn-icon-circle:hover{background:var(--line-strong); color:var(--ink); transform:rotate(15deg) scale(1.05);}

/* =========================================================
   CARTES
   ========================================================= */
.card-app{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease-fluid), box-shadow .3s ease, border-color .25s ease;
  position:relative; overflow:hidden;
}
.card-app.card-signed::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(115deg,
    var(--primary) 0 10px, var(--accent) 10px 20px, var(--gold) 20px 30px);
}
.card-app:hover{box-shadow:var(--shadow-hover); transform:translateY(-2px); border-color:var(--line-strong);}
.card-pad{padding:20px;}
@media (max-width:480px){
  .card-pad{padding:16px;}
}

/* cartes du tableau de bord (les 4 grandes actions) */
.dash-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (min-width:480px){ .dash-grid{gap:16px;} }
@media (min-width:600px){ .dash-grid{grid-template-columns:repeat(3,1fr); gap:18px;} }
@media (min-width:900px){ .dash-grid{grid-template-columns:repeat(5,1fr);} }
.dash-card{
  position:relative; overflow:hidden;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px 18px; min-height:140px;
  display:flex; flex-direction:column; justify-content:space-between;
  box-shadow:var(--shadow-card);
  transition:all .3s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.dash-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--line-strong);}
.dash-card:active{transform:translateY(-2px);}
.dash-card::before{
  content:""; position:absolute; left:0; top:18px; bottom:18px; width:5px;
  background:linear-gradient(180deg, var(--primary), var(--primary-dark));
  border-radius:0 5px 5px 0;
  transition:width .3s ease;
}
.dash-card:hover::before{width:6px;}
.dash-card .dash-ico{
  width:50px; height:50px; border-radius:14px;
  background:linear-gradient(135deg, var(--primary-bg), var(--primary-bg));
  color:var(--primary);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.dash-card:hover .dash-ico{transform:scale(1.15) rotate(5deg);}
.dash-card .dash-title{font-weight:700; font-size:1rem; margin-top:16px; transition:color .2s ease;}
.dash-card:hover .dash-title{color:var(--primary);}
.dash-card .dash-sub{font-size:.78rem; color:var(--ink-soft); margin-top:4px;}

/* stat rapide en haut du dashboard */
.stat-strip{display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
.stat-strip::-webkit-scrollbar{display:none;}
.stat-chip{
  flex:none; min-width:140px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.stat-chip:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 4px 12px -4px rgba(45,21,4,.12);}
.stat-chip .stat-num{font-size:1.6rem; color:var(--primary); transition:color .2s ease;}
.stat-chip:hover .stat-num{color:var(--primary-dark);}
.stat-chip .stat-label{font-size:.75rem; color:var(--ink-soft); font-weight:600; margin-top:4px;}
.stat-chip.alert .stat-num{color:var(--red);}

/* =========================================================
   LIGNE "REGISTRE" (liste produits / historique / stock)
   ========================================================= */
.ledger-row{
  display:flex; align-items:center; gap:12px;
  background:var(--white); border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:var(--radius-md);
  padding:16px;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.ledger-row:hover{border-color:var(--line-strong); transform:translateX(4px); box-shadow:0 4px 12px -4px rgba(45,21,4,.1);}
.ledger-row + .ledger-row{margin-top:12px;}
.ledger-row .lr-icon{
  width:46px; height:46px; border-radius:12px; flex:none;
  background:linear-gradient(135deg, var(--accent-bg), var(--paper-alt));
  color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  transition:transform .3s ease;
}
.ledger-row:hover .lr-icon{transform:scale(1.1) rotate(5deg);}
.ledger-row .lr-title{font-weight:600; font-size:.95rem; transition:color .2s ease;}
.ledger-row:hover .lr-title{color:var(--accent-dark);}
.ledger-row .lr-sub{font-size:.8rem; color:var(--ink-soft); margin-top:2px;}
.ledger-row .lr-num{font-size:1.1rem; color:var(--ink); text-align:right;}
.ledger-row.low{border-left-color:var(--red);}
.ledger-row.low .lr-icon{color:var(--red); background:var(--red-bg);}
.ledger-row.cancelled{border-left-color:var(--ink-faint); opacity:.7;}
.ledger-row.cancelled .lr-icon{color:var(--ink-faint); background:var(--paper-alt);}
.ledger-row.cancelled .lr-title{text-decoration:line-through;color:var(--ink-faint);}

/* Badge "tampon" — encre rouge, légèrement tourné */
.badge-stamp{
  display:inline-flex; align-items:center; gap:5px;
  border:2px solid var(--red); color:var(--red);
  padding:3px 9px; border-radius:8px;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  transform:rotate(-4deg);
  position:relative;
}
.badge-stamp::after{
  content:""; position:absolute; inset:-3px; border:1px solid var(--red);
  border-radius:8px; opacity:.45;
}
.badge-ok{border-color:var(--green); color:var(--green); transform:rotate(-2deg);}
.badge-ok::after{border-color:var(--green);}

.badge-soft{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent-bg); color:var(--accent);
  padding:4px 10px; border-radius:20px; font-size:.72rem; font-weight:700;
}

/* =========================================================
   FORMULAIRES
   ========================================================= */
.field{margin-bottom:18px;}
.field label{display:block; font-weight:600; font-size:.87rem; margin-bottom:8px; color:var(--ink);}
.field .hint{font-size:.76rem; color:var(--ink-soft); margin-top:6px;}
.form-control, .form-select{
  width:100%; padding:15px 16px; border-radius:13px;
  border:1.5px solid var(--line-strong); background:var(--white);
  font-family:var(--font-ui); font-size:.95rem; color:var(--ink);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.form-control:focus, .form-select:focus{
  border-color:var(--primary); outline:none;
  box-shadow:0 0 0 4px var(--primary-bg), 0 4px 12px -4px rgba(14,92,76,.2);
  transform:translateY(-1px);
}
.form-control::placeholder{color:var(--ink-faint); transition:color .2s ease;}
.form-control:focus::placeholder{color:var(--ink-soft);}
.input-icon-group{position:relative;}
.input-icon-group i{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:1.05rem;
}
.input-icon-group .form-control{padding-left:44px;}
.input-icon-group .toggle-pass{
  position:absolute; right:12px; left:auto; cursor:pointer; color:var(--ink-soft);
}
.unit-select{display:flex; flex-wrap:wrap; gap:8px;}
.unit-chip{
  padding:9px 14px; border-radius:20px; border:1.5px solid var(--line-strong);
  font-size:.85rem; font-weight:600; color:var(--ink-soft); cursor:pointer; background:var(--white);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.unit-chip:hover{border-color:var(--accent); color:var(--accent-dark); transform:translateY(-1px);}
.unit-chip.active{background:var(--accent); color:var(--white); border-color:var(--accent); transform:scale(1.05); box-shadow:0 4px 12px -4px rgba(217,164,65,.3);}

/* recherche */
.search-bar{position:relative;}
.search-bar i{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-faint); transition:all .25s cubic-bezier(.4,0,.2,1);}
.search-bar input{
  width:100%; padding:14px 16px 14px 46px; border-radius:15px;
  border:1.5px solid var(--line-strong); background:var(--white); font-size:.95rem;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.search-bar input:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 4px var(--primary-bg), 0 4px 12px -4px rgba(14,92,76,.2); transform:translateY(-1px);}
.search-bar input:focus + i{color:var(--primary); transform:translateY(-50%) scale(1.1);}

/* =========================================================
   PAGE DE CONNEXION
   ========================================================= */
.auth-wrap{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
  background:
    radial-gradient(circle at 15% 20%, var(--primary-bg) 0, transparent 50%),
    radial-gradient(circle at 85% 80%, var(--accent-bg) 0, transparent 45%),
    var(--paper);
  position:relative; overflow:hidden;
}
.auth-wrap::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1.4px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 50% 30%, black, transparent 70%);
}
.auth-card{
  width:100%; max-width:420px;
  background:var(--white); border:1px solid var(--line);
  border-radius:28px; padding:8px 28px 28px;
  box-shadow:var(--shadow-pop);
  animation:auth-in .45s var(--ease-fluid);
  position:relative; z-index:1; overflow:hidden;
}
.auth-card::before{
  content:''; display:block; height:5px; margin:0 -28px 28px;
  background:repeating-linear-gradient(115deg,
    var(--primary) 0 10px, var(--accent) 10px 20px, var(--gold) 20px 30px);
}
@keyframes auth-in{from{opacity:0; transform:translateY(20px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);}}
.auth-logo{
  width:72px; height:72px; border-radius:20px; margin:0 auto 20px;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.8rem;
  box-shadow:var(--shadow-accent);
  animation:logo-bounce 2s ease infinite;
}
@keyframes logo-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.auth-title{text-align:center; font-size:1.4rem; margin-bottom:8px;}
.auth-sub{text-align:center; color:var(--ink-soft); font-size:.9rem; margin-top:6px; margin-bottom:28px;}

/* =========================================================
   TOASTS
   ========================================================= */
.toast-stack{
  position:fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:100; display:flex; flex-direction:column; gap:8px; width:min(360px,92vw);
}
.toast-item{
  display:flex; align-items:center; gap:12px;
  background:var(--ink); color:var(--white);
  padding:14px 18px; border-radius:14px; font-size:.9rem; font-weight:500;
  box-shadow:0 16px 32px -14px rgba(0,0,0,.4);
  animation:toast-in .4s cubic-bezier(.4,0,.2,1);
  transition:all .3s ease;
}
.toast-item:hover{transform:translateY(-2px); box-shadow:0 20px 40px -16px rgba(0,0,0,.5);}
.toast-item.success{background:linear-gradient(135deg, var(--green), #1E7A3E);}
.toast-item.danger{background:linear-gradient(135deg, var(--red), #A02C2C);}
.toast-item i{font-size:1.1rem; transition:transform .3s ease;}
.toast-item:hover i{transform:scale(1.15);}
@keyframes toast-in{from{opacity:0; transform:translateY(-20px) scale(.92);} to{opacity:1; transform:translateY(0) scale(1);}}

/* =========================================================
   MODAL simple
   ========================================================= */
.modal-backdrop-app{
  position:fixed; inset:0; background:rgba(36,28,22,.5);
  display:none; align-items:flex-end; justify-content:center; z-index:80;
}
.modal-backdrop-app.show{display:flex;}
.modal-sheet{
  width:100%; max-width:500px; background:var(--paper);
  border-radius:24px 24px 0 0; padding:24px 22px calc(var(--safe-bottom) + 24px);
  max-height:90dvh; overflow-y:auto;
  animation:sheet-up .3s cubic-bezier(.4,0,.2,1);
}
@keyframes sheet-up{from{transform:translateY(40px); opacity:0;} to{transform:translateY(0); opacity:1;}}
.sheet-handle{width:44px; height:5px; border-radius:4px; background:var(--line-strong); margin:0 auto 16px;}
@media (min-width:600px){
  .modal-backdrop-app{align-items:center;}
  .modal-sheet{border-radius:22px; margin:20px;}
}

/* empty state */
.empty-state{text-align:center; padding:48px 24px; color:var(--ink-soft);}
.empty-state i{font-size:2.6rem; color:var(--accent-light); margin-bottom:12px; display:block; animation:float 3s ease infinite;}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}

/* pills onglets (Mon stock / Contrôle) */
.tab-pills{display:flex; gap:8px; background:var(--paper-alt); padding:6px; border-radius:15px;}
.tab-pills button{
  flex:1; border:none; background:transparent; padding:12px; border-radius:12px;
  font-weight:700; font-size:.87rem; color:var(--ink-soft); cursor:pointer;
  transition:all .2s ease;
}
.tab-pills button.active{background:var(--white); color:var(--primary); box-shadow:var(--shadow-card);}

.section-title{display:flex; align-items:center; justify-content:space-between; margin:28px 0 14px;}
.section-title h2{font-size:1.1rem;}
.section-title a{font-size:.85rem; font-weight:700; color:var(--primary); transition:color .2s ease;}
.section-title a:hover{color:var(--primary-dark);}

.text-soft{color:var(--ink-soft);}
.mt-0{margin-top:0;}

/* =========================================================
   ESPACE ADMINISTRATEUR — même système, variante "encre foncée"
   pour marquer clairement un contexte distinct du compte boutique
   ========================================================= */
.header-admin{background:var(--ink); border-bottom:1px solid var(--blue-dark);}
.header-admin .brand-name{color:var(--white);}
.header-admin .brand-sub{color:#C9B29E;}
.header-admin .brand-mark{background:linear-gradient(155deg, var(--accent), var(--accent-dark));}
.header-admin .icon-btn{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:var(--accent-light);}
.header-admin .divider-stitch{background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px);}
.admin-flag{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--primary); color:var(--white);
  font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:7px;
}

.auth-wrap.admin-wrap{
  background:
    radial-gradient(circle at 15% 10%, rgba(217,164,65,.22) 0, transparent 45%),
    radial-gradient(circle at 88% 90%, rgba(11,95,165,.35) 0, transparent 42%),
    var(--ink);
}
.auth-wrap.admin-wrap .auth-card{background:#2E241C; border-color:#4A3A2C;}
.auth-wrap.admin-wrap .auth-title{color:var(--white);}
.auth-wrap.admin-wrap .auth-sub{color:#B7A594;}
.auth-wrap.admin-wrap label{color:#E7DAC9;}
.auth-wrap.admin-wrap .form-control{background:#241C16; border-color:#4A3A2C; color:var(--white);}
.auth-wrap.admin-wrap .form-control::placeholder{color:#8A7969;}
.auth-wrap.admin-wrap .input-icon-group i{color:#8A7969;}

/* onglets de navigation admin (toujours visibles, mobile compris) */
.admin-tabs{
  display:flex; gap:8px; padding:12px 16px 0;
  max-width:1080px; margin:0 auto; overflow-x:auto;
}
.admin-tabs a{
  display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:10px 16px; border-radius:12px; font-weight:600; font-size:.88rem; color:var(--ink-soft);
  border:1px solid var(--line);
}
.admin-tabs a.active{background:var(--primary); border-color:var(--primary); color:var(--white);}

/* badges de statut boutique */
.badge-green{background:var(--green-bg); color:var(--green); border-radius:20px; padding:4px 11px; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:5px;}
.badge-red-soft{background:var(--red-bg); color:var(--red); border-radius:20px; padding:4px 11px; font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:5px;}

/* petit menu d'actions (kebab) */
.action-menu{position:relative;}
.action-menu .action-panel{
  position:absolute; right:0; top:calc(100% + 6px); z-index:30;
  background:var(--white); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow-pop); min-width:198px; padding:6px; display:none;
}
.action-menu.open .action-panel{display:block;}
.action-menu .action-panel button{
  width:100%; text-align:left; background:none; border:none; padding:10px 12px; border-radius:9px;
  font-size:.86rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:9px; cursor:pointer;
}
.action-menu .action-panel button:hover{background:var(--paper-alt);}
.action-menu .action-panel button.danger{color:var(--red);}
.action-menu .action-panel hr{border:none; border-top:1px solid var(--line); margin:5px 4px;}