/* Système de design du Plateau virtuel — outil de régie sombre, sans framework. */
:root {
  --fond-0:#0e0f12; --fond-1:#16181d; --fond-2:#1f2228; --fond-3:#2a2e36; --bord:#2e323b;
  --texte:#e8eaee; --texte-2:#9aa1ad; --texte-3:#6b7280;
  --accent:#4f8dff; --accent-texte:#0b1220; --direct:#e8334a; --ok:#32c57a; --attention:#f2b33d; --erreur:#ff5c5c;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;
  --r1:6px; --r2:10px; --r3:16px;
  --ombre-1:0 2px 8px rgba(0,0,0,.4); --ombre-2:0 12px 40px rgba(0,0,0,.6);
  --transition:120ms ease;
  color-scheme: dark;
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--fond-0); color:var(--texte);
  font:14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
body { overflow:hidden; }
a { color:var(--accent); }
h1 { font-size:20px; margin:0 0 var(--e4); font-weight:700; }
h2 { font-size:16px; margin:var(--e5) 0 var(--e3); font-weight:600; color:var(--texte); }
h2:first-child { margin-top:0; }
p { margin:0 0 var(--e3); color:var(--texte-2); }
small, .petit { font-size:12px; color:var(--texte-2); }
.num { font-variant-numeric:tabular-nums; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }
[hidden] { display:none !important; }

/* ------------------------------------------------------------ boutons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--e2); height:36px; padding:0 var(--e4);
  border-radius:var(--r1); border:1px solid var(--bord); background:var(--fond-2); color:var(--texte); font:inherit; font-weight:600;
  cursor:pointer; transition:background var(--transition), border-color var(--transition), transform var(--transition); white-space:nowrap; }
.btn:hover { background:var(--fond-3); }
.btn:active { transform:translateY(1px); }
.btn[disabled], .btn.est-occupe { opacity:.55; cursor:not-allowed; }
.btn--primaire { background:var(--accent); border-color:var(--accent); color:var(--accent-texte); }
.btn--primaire:hover { background:#6a9dff; }
.btn--danger { background:transparent; border-color:var(--direct); color:var(--direct); }
.btn--danger:hover { background:var(--direct); color:#fff; }
.btn--fantome { background:transparent; border-color:transparent; color:var(--texte-2); }
.btn--fantome:hover { background:var(--fond-2); color:var(--texte); }
.btn--grand { height:48px; padding:0 var(--e5); font-size:16px; }
.btn--icone { width:36px; padding:0; }
.btn.est-occupe::after { content:""; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:tourne .8s linear infinite; }
@keyframes tourne { to { transform:rotate(360deg); } }
@media (pointer: coarse) { .btn { height:44px; } .btn--grand { height:56px; } }

/* ------------------------------------------------------------ badges, pastilles */
.badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; background:var(--fond-3); color:var(--texte-2); }
.badge::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.badge--ok { color:var(--ok); background:rgba(50,197,122,.12); }
.badge--attention { color:var(--attention); background:rgba(242,179,61,.12); }
.badge--erreur { color:var(--erreur); background:rgba(255,92,92,.12); }
.badge--direct { color:#fff; background:var(--direct); }
.badge--direct::before { animation:pulse 1.2s ease-in-out infinite; background:#fff; }
.badge--info { color:var(--accent); background:rgba(79,141,255,.12); }
.badge--neutre::before { display:none; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.3; } }

/* ------------------------------------------------------------ champs */
.champ, select.champ, textarea.champ { width:100%; padding:8px 10px; border-radius:var(--r1); border:1px solid var(--bord); background:var(--fond-2); color:var(--texte); font:inherit; }
.champ:focus { border-color:var(--accent); outline:none; }
textarea.champ { min-height:120px; resize:vertical; line-height:1.5; }
.champ--erreur { border-color:var(--erreur); }
label.libelle { display:block; font-size:12px; color:var(--texte-2); margin-bottom:var(--e1); }
.ligne { display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap; }
.ligne > * { min-width:0; }
.espace { flex:1; }

/* interrupteur */
.interrupteur { display:inline-flex; align-items:center; gap:var(--e2); cursor:pointer; user-select:none; }
.interrupteur i { position:relative; width:40px; height:22px; border-radius:11px; background:var(--fond-3); border:1px solid var(--bord); transition:background var(--transition); flex:none; }
.interrupteur i::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform var(--transition); }
.interrupteur[aria-checked="true"] i { background:var(--accent); border-color:var(--accent); }
.interrupteur[aria-checked="true"] i::after { transform:translateX(18px); }
.interrupteur[disabled] { opacity:.5; cursor:not-allowed; }

/* segment (radio stylé) */
.segment { display:inline-flex; border:1px solid var(--bord); border-radius:var(--r1); overflow:hidden; background:var(--fond-2); flex-wrap:wrap; }
.segment button { height:34px; padding:0 12px; border:0; background:transparent; color:var(--texte-2); font:inherit; font-weight:600; cursor:pointer; }
.segment button[aria-checked="true"] { background:var(--accent); color:var(--accent-texte); }
.segment button:hover:not([aria-checked="true"]) { background:var(--fond-3); color:var(--texte); }

/* curseur */
.curseur { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--e2); }
.curseur input[type=range] { width:100%; accent-color:var(--accent); }
.curseur .val { min-width:44px; text-align:right; font-variant-numeric:tabular-nums; color:var(--texte-2); }

/* ------------------------------------------------------------ cartes, listes */
.carte { background:var(--fond-1); border:1px solid var(--bord); border-radius:var(--r2); padding:var(--e4); }
.grille { display:grid; gap:var(--e3); grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
.carte-produit { position:relative; background:var(--fond-1); border:1px solid var(--bord); border-radius:var(--r2); overflow:hidden; cursor:pointer; transition:border-color var(--transition); }
.carte-produit:hover { border-color:var(--texte-3); }
.carte-produit.est-active { border-color:var(--accent); }
.carte-produit.est-en-cours { border-color:var(--direct); box-shadow:0 0 0 1px var(--direct); }
.carte-produit.sans-photo { opacity:.55; }
.carte-produit .photo { aspect-ratio:3/4; background:#0c0c0e center/cover no-repeat; }
.carte-produit .corps { padding:var(--e2) var(--e3) var(--e3); }
.carte-produit .nom { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.carte-produit .meta { display:flex; justify-content:space-between; align-items:center; margin-top:var(--e1); color:var(--texte-2); font-size:12px; }
.carte-produit .coin { position:absolute; top:var(--e2); left:var(--e2); display:flex; gap:var(--e1); }
.carte-produit .selection { position:absolute; top:var(--e2); right:var(--e2); width:22px; height:22px; accent-color:var(--accent); }
.liste { display:flex; flex-direction:column; gap:var(--e1); }
.liste__ligne { display:flex; align-items:center; gap:var(--e3); padding:var(--e2) var(--e3); border-radius:var(--r1); background:var(--fond-2); border:1px solid transparent; }
.liste__ligne.est-en-cours { border-color:var(--direct); }
.liste__ligne .vignette { width:40px; height:52px; border-radius:4px; object-fit:cover; background:#0c0c0e; flex:none; }
.liste__ligne .nom { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.liste__poignee { cursor:grab; color:var(--texte-3); user-select:none; }
.liste__ligne.est-glisse { opacity:.4; }
.vide { padding:var(--e5); text-align:center; color:var(--texte-3); border:1px dashed var(--bord); border-radius:var(--r2); }

/* ------------------------------------------------------------ retours */
#toasts { position:fixed; right:var(--e4); bottom:var(--e4); display:flex; flex-direction:column; gap:var(--e2); z-index:100; max-width:min(420px, calc(100vw - 32px)); }
.toast { padding:var(--e3) var(--e4); border-radius:var(--r2); background:var(--fond-2); border:1px solid var(--bord); box-shadow:var(--ombre-2); animation:apparait .2s ease; }
.toast--ok { border-color:var(--ok); } .toast--erreur { border-color:var(--erreur); } .toast--attention { border-color:var(--attention); }
@keyframes apparait { from { opacity:0; transform:translateY(8px); } }
dialog.modale { border:1px solid var(--bord); border-radius:var(--r3); background:var(--fond-1); color:var(--texte); padding:var(--e5); width:min(560px, calc(100vw - 32px)); box-shadow:var(--ombre-2); }
dialog.modale::backdrop { background:rgba(0,0,0,.6); }
dialog.modale--plein { width:calc(100vw - 32px); height:calc(100vh - 32px); max-width:none; max-height:none; padding:0; overflow:hidden; }
.barre-progression { height:8px; border-radius:4px; background:var(--fond-3); overflow:hidden; }
.barre-progression i { display:block; height:100%; background:var(--accent); width:0; transition:width .3s; }
.barre-progression.indeterminee i { width:30%; animation:glisse 1.2s linear infinite; }
@keyframes glisse { from { margin-left:-30%; } to { margin-left:100%; } }
.verifications { list-style:none; padding:0; margin:0; display:grid; gap:var(--e1); }
.verifications li { display:flex; gap:var(--e2); align-items:center; }
.verifications li::before { content:"✗"; color:var(--erreur); font-weight:700; width:16px; }
.verifications li.ok::before { content:"✓"; color:var(--ok); }
.verifications li.attente::before { content:"…"; color:var(--texte-3); }

/* ------------------------------------------------------------ cadre téléphone (aperçu) */
.cadre-telephone { position:relative; width:100%; aspect-ratio:1132/2392; border-radius:8%/3.7%; overflow:hidden; background:#000; }
.cadre-telephone iframe { position:absolute; left:0; top:0; width:1132px; height:2392px; border:0; transform-origin:top left; }
.bloc-telephone .indice { margin-top:var(--e2); padding:var(--e2) var(--e3); border-radius:var(--r1); background:var(--fond-2); color:var(--texte-2); font-size:12px; }

/* ------------------------------------------------------------ grille de l'admin */
#app { display:grid; height:100vh; grid-template-columns:220px 1fr 340px; grid-template-rows:1fr; }
#lateral { background:var(--fond-1); border-right:1px solid var(--bord); display:flex; flex-direction:column; padding:var(--e4) var(--e3); gap:var(--e1); }
#lateral .logo { font-weight:800; font-size:15px; letter-spacing:.3px; padding:var(--e2) var(--e3) var(--e4); }
#lateral nav a { display:flex; align-items:center; gap:var(--e3); padding:10px var(--e3); border-radius:var(--r1); color:var(--texte-2); text-decoration:none; font-weight:600; }
#lateral nav a:hover { background:var(--fond-2); color:var(--texte); }
#lateral nav a.est-active { background:var(--fond-3); color:var(--texte); }
#lateral nav a .ic { width:20px; text-align:center; }
#lateral .pied { margin-top:auto; display:grid; gap:var(--e2); font-size:12px; color:var(--texte-2); }
#contenu { overflow:auto; padding:var(--e5); }
#apercu { background:var(--fond-1); border-left:1px solid var(--bord); padding:var(--e4); overflow:auto; display:flex; flex-direction:column; gap:var(--e3); }
#onglets { display:none; }
.entete { display:flex; align-items:center; gap:var(--e3); margin-bottom:var(--e4); }
.entete h1 { margin:0; }
@media (max-width: 1179px) {
  #app { grid-template-columns:56px 1fr; }
  #lateral { padding:var(--e3) var(--e2); }
  #lateral .logo, #lateral nav a span:not(.ic), #lateral .pied { display:none; }
  #lateral nav a { justify-content:center; }
  #apercu { display:none; }
}
@media (max-width: 759px) {
  #app { grid-template-columns:1fr; grid-template-rows:1fr auto; }
  #lateral { display:none; }
  #contenu { padding:var(--e4); padding-bottom:calc(var(--e4) + 8px); }
  #onglets { display:grid; grid-template-columns:repeat(5, 1fr); background:var(--fond-1); border-top:1px solid var(--bord); padding-bottom:env(safe-area-inset-bottom); }
  #onglets a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0; font-size:11px; color:var(--texte-2); text-decoration:none; }
  #onglets a.est-active { color:var(--accent); }
  #onglets a .ic { font-size:20px; }
  .grille { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  #toasts { right:var(--e3); left:var(--e3); bottom:auto; top:var(--e3); }
}