:root{
  --primaire:#2f6fed; --primaire-fonce:#1d4fc4; --primaire-clair:#e8f0ff;
  --fond:#f4f7fb; --carte:#ffffff; --texte:#101826; --texte-discret:#5b6b82;
  --bordure:#e1e7f0; --succes:#1fa971; --alerte:#e0a112; --danger:#e0413f;
  --ombre:0 2px 10px rgba(16,24,38,.06);
  --rayon:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:var(--fond);color:var(--texte)}
h1{font-size:1.4rem;margin:0 0 16px}
h2{font-size:1.05rem;margin:0 0 10px}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:.95rem;padding:9px 11px;border:1px solid var(--bordure);border-radius:8px;background:#fff;color:var(--texte)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primaire-clair);border-color:var(--primaire)}
.btn{border:none;border-radius:8px;padding:9px 16px;font-weight:600;font-size:.9rem;transition:.15s}
.btn-primary{background:var(--primaire);color:#fff}
.btn-primary:hover{background:var(--primaire-fonce)}
.btn-secondaire{background:var(--primaire-clair);color:var(--primaire-fonce)}
.btn-danger{background:#fde8e8;color:var(--danger)}
.btn-large{width:100%;padding:13px;font-size:1rem}
.btn-icone{background:none;border:none;font-size:1.3rem;color:#fff;padding:4px 8px}
.texte-discret{color:var(--texte-discret);font-size:.88rem}

/* ---------- Login ---------- */
.ecran-login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#101826,#1d3a75);padding:20px}
.login-carte{background:#fff;border-radius:16px;padding:32px 28px;width:100%;max-width:380px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.login-logo{font-size:1.5rem;font-weight:800;text-align:center;color:var(--primaire-fonce);letter-spacing:.5px}
.login-soustitre{text-align:center;color:var(--texte-discret);margin:4px 0 20px;font-size:.9rem}
.login-onglets{display:flex;gap:6px;margin-bottom:18px;background:var(--fond);padding:4px;border-radius:10px}
.onglet-btn{flex:1;background:none;border:none;padding:8px 6px;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--texte-discret)}
.onglet-btn.actif{background:#fff;color:var(--primaire-fonce);box-shadow:var(--ombre)}
.login-form{display:flex;flex-direction:column;gap:14px}
.login-form label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:600;color:var(--texte-discret)}
.login-erreur{color:var(--danger);text-align:center;font-size:.88rem;min-height:20px;margin-top:12px}
.etat-connexion{text-align:center;font-size:.78rem;color:var(--texte-discret)}

/* ---------- App shell ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:56px;background:var(--texte);display:flex;align-items:center;padding:0 10px;z-index:20;gap:10px}
.topbar-titre{color:#fff;font-weight:700;flex:1}
.topbar-droite{display:flex;align-items:center;gap:10px}
.utilisateur-nom{color:#cfe0ff;font-size:.85rem;font-weight:600}
.badge-hors-ligne{background:var(--danger);color:#fff;font-size:.72rem;padding:3px 8px;border-radius:20px}
.badge-attente{background:var(--alerte);color:#3a2900;font-size:.72rem;padding:3px 8px;border-radius:20px;font-weight:700}

.nav-lateral{position:fixed;top:56px;left:0;bottom:0;width:230px;background:#12203a;padding:14px 10px;display:flex;flex-direction:column;gap:2px;z-index:15;transform:translateX(0);transition:transform .2s}
.nav-item{background:none;border:none;color:#c7d5ec;text-align:left;padding:11px 12px;border-radius:8px;font-size:.9rem;font-weight:500}
.nav-item:hover{background:#1a2c4d}
.nav-item.actif{background:var(--primaire);color:#fff}
.voile-nav{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:14}

.contenu{margin-top:56px;margin-left:230px;padding:22px;max-width:1200px}
.page{animation:apparaitre .15s ease-out}
@keyframes apparaitre{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.entete-page{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}

@media (max-width:900px){
  .nav-lateral{transform:translateX(-100%)}
  .nav-lateral.ouvert{transform:translateX(0)}
  .voile-nav.actif{display:block}
  .contenu{margin-left:0;padding:16px}
}

/* ---------- Cartes stats ---------- */
.cartes-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.carte-stat{background:var(--carte);border-radius:var(--rayon);padding:16px;box-shadow:var(--ombre)}
.carte-label{display:block;font-size:.78rem;color:var(--texte-discret);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.carte-valeur{display:block;font-size:1.35rem;font-weight:800;margin-top:4px;color:var(--primaire-fonce)}

.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:800px){.grille-2{grid-template-columns:1fr}}
.bloc{background:var(--carte);border-radius:var(--rayon);padding:16px;box-shadow:var(--ombre)}

.alerte-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--bordure);font-size:.88rem}
.alerte-item:last-child{border-bottom:none}
.tag{padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:700}
.tag-rupture{background:#fde8e8;color:var(--danger)}
.tag-faible{background:#fff3d9;color:#8a6200}
.tag-stock{background:#e3f8ee;color:var(--succes)}

.liste-lignes{display:flex;flex-direction:column;gap:0}
.ligne-item{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--bordure);font-size:.87rem}
.ligne-item:last-child{border-bottom:none}
.ligne-item small{display:block;color:var(--texte-discret)}

/* ---------- POS ---------- */
.pos-grille{display:grid;grid-template-columns:1fr 340px;gap:16px}
@media (max-width:900px){.pos-grille{grid-template-columns:1fr}}
.pos-filtres{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.pos-filtres input{width:100%}
.pos-categories{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--bordure);border-radius:20px;padding:6px 14px;font-size:.82rem;font-weight:600;color:var(--texte-discret)}
.chip.actif{background:var(--primaire);color:#fff;border-color:var(--primaire)}
.pos-articles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.carte-article{background:var(--carte);border-radius:10px;padding:12px;box-shadow:var(--ombre);cursor:pointer;transition:.12s;border:2px solid transparent}
.carte-article:hover{border-color:var(--primaire)}
.carte-article.rupture{opacity:.5;cursor:not-allowed}
.carte-article .nom{font-weight:700;font-size:.88rem;margin-bottom:4px}
.carte-article .prix{color:var(--primaire-fonce);font-weight:800;font-size:.95rem}
.carte-article .qte{font-size:.75rem;color:var(--texte-discret)}
.carte-article .cat{font-size:.7rem;color:var(--texte-discret);text-transform:uppercase;letter-spacing:.3px;margin-bottom:4px}

.pos-panier{background:var(--carte);border-radius:var(--rayon);padding:16px;box-shadow:var(--ombre);height:fit-content;position:sticky;top:70px}
.pos-panier input{width:100%;margin-bottom:10px}
.panier-lignes{max-height:340px;overflow-y:auto;margin-bottom:10px}
.panier-ligne{padding:8px 0;border-bottom:1px solid var(--bordure)}
.panier-ligne-tete{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:600}
.panier-ligne-controles{display:flex;align-items:center;gap:6px;margin-top:6px}
.panier-ligne-controles input[type=number]{width:60px;padding:5px}
.panier-ligne-controles input[type=text]{width:90px;padding:5px}
.btn-mini{background:var(--fond);border:1px solid var(--bordure);border-radius:6px;width:26px;height:26px;font-weight:700}
.btn-suppr-ligne{background:none;border:none;color:var(--danger);font-size:1.1rem;padding:0 4px}
.panier-total{display:flex;justify-content:space-between;align-items:center;font-size:1.1rem;padding:10px 0;border-top:2px solid var(--bordure)}
.panier-remise{color:var(--alerte);font-size:.82rem;text-align:right;margin:4px 0}
.message{text-align:center;font-size:.85rem;min-height:20px;margin-top:8px}
.message.succes{color:var(--succes)}
.message.erreur{color:var(--danger)}

/* ---------- Tableaux ---------- */
.champ-recherche{width:100%;max-width:340px;margin-bottom:14px}
.filtres-ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-bottom:16px}
.filtres-ligne label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--texte-discret);font-weight:600}
.tableau-scroll{overflow-x:auto;background:var(--carte);border-radius:var(--rayon);box-shadow:var(--ombre)}
.tableau{width:100%;border-collapse:collapse;font-size:.87rem;min-width:640px}
.tableau th{text-align:left;padding:12px 14px;background:var(--fond);color:var(--texte-discret);font-size:.75rem;text-transform:uppercase;letter-spacing:.3px}
.tableau td{padding:11px 14px;border-top:1px solid var(--bordure)}
.tableau tr:hover td{background:#fafcff}
.action-lien{background:none;border:none;color:var(--primaire-fonce);font-weight:700;font-size:.82rem;padding:4px 6px}
.action-lien.danger{color:var(--danger)}

/* ---------- Modale ---------- */
.modale-fond{position:fixed;inset:0;background:rgba(10,15,25,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modale-contenu{background:#fff;border-radius:14px;padding:24px;width:100%;max-width:420px;max-height:88vh;overflow-y:auto}
.modale-contenu h2{margin-bottom:16px}
.champ-groupe{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.champ-groupe label{font-size:.82rem;font-weight:600;color:var(--texte-discret)}
.champ-groupe input,.champ-groupe select,.champ-groupe textarea{width:100%}
.modale-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

.compte-carte{background:var(--carte);border-radius:var(--rayon);padding:16px;box-shadow:var(--ombre)}
.compte-carte h3{margin:0 0 4px}