/* ============================================================
   MARIA VIDAS — Cave à vins et spiritueux
   Charte officielle : noir profond & or (maquette de référence)
   #0B0B0F / #121212 / #1A1A1A / #2A2A2A — Or #D4AF37 #F2D57E #B8941F
   ============================================================ */
:root{
  /* Marque (zones sombres : barre latérale, connexion, en-têtes) */
  --noir:#0B0B0F; --surface-nuit:#121212; --anthracite:#1A1A1A; --bordure-nuit:#2A2A2A;
  --or:#D4AF37; --or-lum:#F2D57E; --or-fonce:#B8941F; --champagne:#F5E6C8;
  --blanc:#FFFFFF; --casse:#EAEAEA; --gris-clair:#B5B5B5;
  /* Espace de travail (clair, lisible) */
  --fond:#F6F1E6; --surface:#FFFFFF; --encre:#2B2118; --gris:#7A6F63;
  --bordure:#E5DAC2; --surface-2:#FBF7ED;
  --ok:#1FAF5A; --danger:#E24A4A; --info:#4DA3FF; --warn:#E0A93E;
  --grad-or:linear-gradient(90deg,#D4AF37,#F2D57E 50%,#C99A2E);
  --radius:14px;
  --ombre:0 3px 14px rgba(43,33,24,.10);
}
*{box-sizing:border-box}
body{margin:0;color:var(--encre);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(900px 420px at 110% -10%, rgba(212,175,55,.10), transparent 60%),
    var(--fond)}
h1,h2,h3,.serif{font-family:Georgia,"Times New Roman",serif;color:var(--encre)}
a{color:#8A6A14}
::selection{background:var(--or);color:var(--noir)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#D8CBAA;border-radius:6px}
::-webkit-scrollbar-track{background:var(--fond)}

/* ---------- Bloc de marque officiel ---------- */
.logo-bloc{text-align:center;color:var(--casse)}
.logo-bloc .monogramme{display:block;margin:0 auto}
.logo-bloc.grand .monogramme{width:170px}
.logo-bloc.compact .monogramme{width:84px}
.logo-bloc .maison{letter-spacing:8px;font-size:13px;color:var(--or);
  font-family:Georgia,serif;margin-top:10px}
.logo-bloc.compact .maison{font-size:9px;letter-spacing:5px;margin-top:6px}
.logo-bloc .nom-marque{font-family:Georgia,serif;font-weight:700;
  letter-spacing:6px;font-size:38px;line-height:1.15;
  background:var(--grad-or);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-bloc.compact .nom-marque{font-size:19px;letter-spacing:3px}
.logo-bloc .slogan-marque{color:var(--or);letter-spacing:3px;font-size:12px;margin-top:6px;
  font-family:Georgia,serif}
.logo-bloc.compact .slogan-marque{font-size:8.5px;letter-spacing:2px}
.logo-bloc .sous-slogan{color:var(--casse);letter-spacing:4px;font-size:11px;margin-top:6px}
.logo-bloc.compact .sous-slogan{display:none}
.logo-bloc .sep-grappe{color:var(--or);margin:14px 0 10px;font-size:15px}
.logo-bloc .devise-maison{max-width:340px;margin:0 auto;color:var(--casse);font-size:14px}
.logo-bloc .valeurs{display:flex;justify-content:center;gap:0;margin-top:22px}
.logo-bloc .valeurs div{padding:0 16px;border-left:1px solid var(--bordure);
  font-size:9.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gris)}
.logo-bloc .valeurs div:first-child{border-left:0}
.logo-bloc .valeurs img{display:block;width:26px;margin:0 auto 8px}
.logo-bloc .sep-grappe img{width:22px}

/* ---------- Structure ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:252px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;background:
    linear-gradient(180deg,#0D0D12,#0B0B0F 60%,#101014);
  border-right:1px solid var(--bordure-nuit)}
.sidebar,.sidebar h3{color:var(--casse)}
.brand{padding:20px 14px 14px;border-bottom:1px solid var(--bordure-nuit);
  background:radial-gradient(220px 120px at 50% 0%, rgba(212,175,55,.10), transparent 70%)}
.espace{margin:14px 14px 4px;padding:10px 12px;background:var(--anthracite);
  border:1px solid var(--bordure-nuit);border-radius:var(--radius);font-size:11px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--or)}
.espace select{width:100%;margin-top:7px;background:var(--noir);color:var(--casse);
  border:1px solid var(--bordure-nuit);border-radius:9px;padding:8px;font-size:13px;
  letter-spacing:0;text-transform:none}
nav.menu{flex:1;padding:6px 0 20px}
nav.menu .section{padding:15px 20px 5px;font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--or);opacity:.85}
nav.menu a{display:block;padding:9px 20px;color:var(--casse);text-decoration:none;
  font-size:14px;border-left:3px solid transparent;
  transition:background .15s,border-color .15s,color .15s,padding-left .15s}
nav.menu a:hover,nav.menu a.actif{background:linear-gradient(90deg,rgba(212,175,55,.12),transparent);
  border-left-color:var(--or);color:var(--blanc);padding-left:24px}
.sidebar .user{padding:14px 20px;border-top:1px solid var(--bordure-nuit);font-size:13px;
  background:var(--anthracite);color:var(--gris-clair)}
.sidebar .user strong{color:var(--casse)}

main{flex:1;padding:26px 36px;max-width:1240px}
.entete-page{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;margin-bottom:20px;padding:18px 24px;border-radius:var(--radius);
  background:linear-gradient(120deg,#15100B,#241A0F);
  border:1px solid var(--bordure-nuit);box-shadow:var(--ombre);position:relative;overflow:hidden}
.entete-page::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--grad-or)}
.entete-page h1{margin:0;font-size:23px;letter-spacing:.5px;color:var(--champagne)}
.entete-page .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Composants ---------- */
.carte{background:var(--surface);border:1px solid var(--bordure);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:18px;box-shadow:var(--ombre)}
.carte h3{margin-top:2px;color:#8A6A14;font-size:16px;letter-spacing:.6px}
.grille{display:grid;gap:16px}
.grille.c3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.stat{border:1px solid var(--bordure);border-radius:var(--radius);padding:16px 18px;
  background:linear-gradient(150deg,#FFFFFF,var(--surface-2));
  transition:transform .15s,border-color .15s;position:relative;overflow:hidden}
.stat:hover{transform:translateY(-3px);border-color:var(--or-fonce)}
.stat::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad-or);opacity:.8}
.stat .valeur{font-family:Georgia,serif;font-size:27px;font-weight:700;color:#8A6A14}
.stat .libelle{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--gris)}

table{width:100%;border-collapse:collapse;background:var(--surface);
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--bordure)}
th{background:#1A1409;color:var(--or);text-align:left;padding:11px 12px;
  font-size:11px;letter-spacing:1.4px;text-transform:uppercase}
td{padding:10px 12px;border-top:1px solid var(--bordure);font-size:14px;color:var(--encre)}
tr:nth-child(even) td{background:var(--surface-2)}
tr:hover td{background:#F6ECD2}
td code{color:#8A6A14;background:#F1E7CC;padding:2px 7px;border-radius:6px;font-size:12px}

.btn{display:inline-block;border:0;padding:10px 20px;border-radius:10px;cursor:pointer;
  text-decoration:none;font-size:13px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;background:var(--grad-or);color:#131007;
  box-shadow:0 4px 14px rgba(212,175,55,.25);transition:transform .12s,box-shadow .12s,filter .12s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:0 6px 20px rgba(212,175,55,.35)}
.btn.or{background:var(--grad-or)}
.btn.leger{background:#fff;color:#8A6A14;border:1.5px solid var(--or);box-shadow:none}
.btn.leger:hover{background:rgba(212,175,55,.12)}
.btn.danger{background:transparent;color:var(--danger);border:1.5px solid var(--danger);box-shadow:none}
.btn.petit{padding:6px 12px;font-size:11.5px}

.badge{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:600;
  border:1px solid transparent}
.badge.ok{background:#E6F5EA;color:#177A42;border-color:#BCE0C8}
.badge.warn{background:#FBF1D8;color:#8A6A14;border-color:#EBD79E}
.badge.danger{background:#FBE4E4;color:#B02A2A;border-color:#F0BCBC}
.badge.neutre{background:var(--surface-2);color:var(--gris);border-color:var(--bordure)}

form label{display:block;font-size:13px;font-weight:600;color:var(--encre);margin:11px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border:1px solid var(--bordure);
  border-radius:10px;background:#fff;color:var(--encre);font:inherit}
input::placeholder{color:#A79B87}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--or);
  box-shadow:0 0 0 3px rgba(212,175,55,.18)}
input[type=checkbox]{width:auto;accent-color:var(--or);transform:scale(1.15)}
form ul{list-style:none;padding-left:0}
form ul li{display:inline-block;margin-right:14px}
.ligne-form{display:flex;gap:14px;flex-wrap:wrap}
.ligne-form>div{flex:1;min-width:160px}
.errorlist li{color:#B22B2B;font-size:12.5px}
/* Icônes SVG maison */
.ico-svg{width:1.05em;height:1.05em;vertical-align:-0.15em;color:var(--or)}
.logo-bloc .valeurs .ico-svg{width:26px;height:26px;display:block;margin:0 auto 7px}
.vide td{color:var(--gris)}

/* ---------- Toasts (feedback sans rechargement) ---------- */
.zone-toasts{position:fixed;top:18px;right:18px;z-index:1000;display:flex;
  flex-direction:column;gap:10px;max-width:380px}
.toast{background:#fff;border:1px solid var(--bordure);border-radius:12px;
  padding:13px 40px 13px 16px;font-size:14px;color:var(--encre);box-shadow:0 10px 26px rgba(43,33,24,.22);
  position:relative;animation:toast-in .3s ease;border-left:4px solid var(--or)}
.toast.success{border-left-color:var(--ok)}
.toast.error{border-left-color:var(--danger)}
.toast.warning,.toast.info{border-left-color:var(--or)}
.toast .fermer{position:absolute;top:8px;right:12px;cursor:pointer;color:var(--gris);
  font-size:16px;background:none;border:0;padding:0;width:auto}
.toast.sortie{animation:toast-out .3s ease forwards}
@keyframes toast-in{from{transform:translateX(120%);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-out{to{transform:translateX(120%);opacity:0}}

/* ---------- Modales ---------- */
.voile{position:fixed;inset:0;background:rgba(4,4,6,.72);backdrop-filter:blur(3px);
  z-index:900;display:none;align-items:center;justify-content:center}
.voile.ouvert{display:flex}
.modale{background:#fff;border:1px solid var(--bordure);border-radius:16px;
  width:min(480px,94vw);padding:26px 26px 22px;box-shadow:0 18px 50px rgba(20,14,6,.35);
  animation:toast-in .25s ease}
.modale h3{margin:0 0 6px;color:#8A6A14}

/* ---------- Connexion (maquette officielle) ---------- */
.page-login{min-height:100vh;display:flex;flex-direction:column;background:var(--noir)}
.scene-login{flex:1;display:flex;align-items:stretch}
.panneau-marque{flex:1.05;display:flex;align-items:center;justify-content:center;
  padding:44px 30px;position:relative;overflow:hidden;
  background:
    radial-gradient(520px 300px at 50% 12%, rgba(212,175,55,.14), transparent 65%),
    radial-gradient(700px 460px at 0% 100%, rgba(80,50,16,.28), transparent 60%),
    linear-gradient(160deg,#14100A,#0B0B0F 60%)}
.panneau-marque::after{content:"";position:absolute;top:-12%;bottom:-12%;right:-90px;width:180px;
  border-radius:50%;border-right:2px solid var(--or-fonce);opacity:.7}
.casiers{position:absolute;inset:0;opacity:.14;background-image:
  radial-gradient(circle at 8px 8px, rgba(212,175,55,.8) 2.6px, transparent 3px);
  background-size:46px 46px;mask-image:linear-gradient(180deg,#000 0%,transparent 78%)}
.panneau-connexion{flex:1;display:flex;align-items:center;justify-content:center;padding:44px 26px}
.carte-login{width:min(470px,100%);background:var(--surface);border:1px solid var(--bordure);
  border-radius:20px;padding:56px 42px 30px;position:relative;box-shadow:var(--ombre)}
.pastille-cadenas{position:absolute;top:-34px;left:50%;transform:translateX(-50%);
  width:68px;height:68px;border-radius:50%;background:var(--anthracite);
  border:1px solid var(--bordure);display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--or);box-shadow:var(--ombre)}
.carte-login h2{text-align:center;font-family:Georgia,serif;letter-spacing:5px;
  font-size:27px;margin:2px 0 4px;background:var(--grad-or);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.carte-login .sous{text-align:center;color:var(--gris);font-size:13.5px;margin-bottom:8px}
.sep-or{display:flex;align-items:center;gap:12px;color:var(--or);margin:14px 0 8px;font-size:13px}
.sep-or::before,.sep-or::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--or-fonce),transparent)}
.champ-icone{position:relative}
.champ-icone input{padding-left:44px}
.champ-icone .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:var(--or);font-size:15px}
.ligne-options{display:flex;justify-content:space-between;align-items:center;
  margin:14px 0 20px;font-size:13px;color:var(--casse)}
.ligne-options a{color:var(--or);text-decoration:none}
.btn-connexion{width:100%;padding:14px;font-size:14px;letter-spacing:2px}
.note-securite{display:flex;gap:10px;align-items:center;justify-content:center;
  margin-top:22px;color:var(--gris);font-size:12.5px}
.note-securite b{color:var(--casse);display:block;font-size:13px}
.bandeau-pied{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 46px;
  padding:15px 20px;background:#08080B;border-top:1px solid var(--bordure);
  color:var(--gris);font-size:13px}
.bandeau-pied span b{color:var(--or)}

/* ---------- POS ---------- */
.pos{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.scan input{font-size:18px;padding:15px 15px 15px 52px;border:1.5px solid var(--or);
  letter-spacing:2px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='18'%3E%3Cg fill='%23D4AF37'%3E%3Crect x='1' width='2' height='18'/%3E%3Crect x='5' width='1' height='18'/%3E%3Crect x='8' width='3' height='18'/%3E%3Crect x='13' width='1' height='18'/%3E%3Crect x='16' width='2' height='18'/%3E%3Crect x='20' width='1' height='18'/%3E%3Crect x='23' width='2' height='18'/%3E%3C/g%3E%3C/svg%3E") no-repeat 14px center}

.bandeau-alerte{background:#FBF3DC;border:1px solid #EBD79E;
  border-left:5px solid var(--or);border-radius:10px;padding:11px 15px;margin-bottom:16px;
  font-size:14px;color:var(--encre)}
.messages{display:none}

.prix-double{white-space:nowrap;line-height:1.4}
.prix-double .u,.u{color:var(--gris);font-size:11px;letter-spacing:.5px}
select.mini{width:auto;padding:4px 8px;font-size:12px;border-radius:8px}

@media(max-width:1020px){.pos{grid-template-columns:1fr}.sidebar{width:206px}
  main{padding:18px}.panneau-marque{display:none}}
@media print{.sidebar,.entete-page .actions,.btn,.zone-toasts{display:none!important}
  body{background:#fff;color:#000}}