/* ============================================================
   Lyvire Style — pont applicatif vers le kit « Liquid Glass ».
   Charge APRÈS style.css (le kit d'Alexis). N'utilise QUE les
   tokens du kit (--ly-*, --glass-*, --s-*, --r-*, --sh-*), afin
   de rester cohérent noir & blanc. Ce fichier habille les
   composants propres à l'app et fait le pont avec le balisage
   sémantique existant des pages.
   ============================================================ */

/* ---------- Titres de section & textes utilitaires ---------- */
.section-titre{margin:var(--s-6) 0 var(--s-4);font-size:var(--fs-md);text-transform:uppercase;
  letter-spacing:.06em;color:var(--ly-muted);font-weight:700}
.note,.subtitle{color:var(--ly-muted)}
.vide{color:var(--ly-muted);padding:var(--s-5);background:var(--glass-soft);
  border:1px solid var(--glass-border);border-radius:var(--r-md);box-shadow:var(--sh-inset)}
.mini{color:var(--ly-muted);font-size:.82em}
.pied-app{margin-left:var(--rail-w);padding:var(--s-5) var(--s-6);text-align:center;
  color:var(--ly-muted);font-size:var(--fs-xs)}

/* ---------- Boutons (pont : classes sans modificateur) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:46px;
  padding:0 var(--s-5);font:inherit;font-weight:700;border-radius:var(--r-pill);border:1px solid transparent;
  cursor:pointer;color:#fff;text-decoration:none;
  background:linear-gradient(150deg,var(--ly-brand),var(--ly-brand-strong));
  box-shadow:var(--sh-brand),var(--sh-inset);transition:filter var(--t) var(--ease),transform var(--t) var(--ease)}
.btn:hover{filter:brightness(1.12);text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-second{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:46px;
  padding:0 var(--s-5);font:inherit;font-weight:700;border-radius:var(--r-pill);cursor:pointer;
  color:var(--ly-ink);text-decoration:none;background:var(--glass-strong);border:1px solid var(--glass-border);
  box-shadow:var(--sh-1),var(--sh-inset);transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.btn-second:hover{background:#fff;transform:translateY(-1px);text-decoration:none}
.btn-mini{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 var(--s-4);font:inherit;
  font-weight:700;font-size:var(--fs-sm);border-radius:var(--r-pill);cursor:pointer;color:#fff;border:1px solid transparent;
  background:linear-gradient(150deg,var(--ly-brand),var(--ly-brand-soft));box-shadow:var(--sh-1),var(--sh-inset)}
.btn-mini:hover{filter:brightness(1.1)}
.btn-vente{background:linear-gradient(150deg,var(--ly-accent),var(--ly-accent-soft))}
.btn-mini[disabled]{opacity:.5;cursor:not-allowed;filter:none}
.btn-supprimer{background:none;border:0;color:var(--ly-danger);cursor:pointer;font-size:1rem;padding:0 6px}
.lien{color:var(--ly-brand);font-weight:600}
.actions-form{display:flex;gap:var(--s-3);margin-top:var(--s-4);flex-wrap:wrap}

/* ---------- KPI (structure maison .kpi-*) ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s-5);margin-bottom:var(--s-4)}
.kpis-compact{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.kpi{position:relative;display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-5);
  background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate));border:1px solid var(--glass-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-2),var(--sh-inset);color:var(--ly-ink);text-decoration:none}
a.kpi:hover{transform:translateY(-3px);box-shadow:var(--sh-3),var(--sh-inset);text-decoration:none;transition:transform var(--t) var(--ease-out)}
.kpi-ico{font-size:1.4rem}
.kpi-val{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em}
.kpi-lib{color:var(--ly-muted);font-size:var(--fs-sm);font-weight:600}
.kpi-alerte{border-color:rgba(218,75,87,.4)}
.kpi-alerte .kpi-val{color:var(--ly-danger)}

/* ---------- Tableaux (pont .tableau-enveloppe/.tableau) ---------- */
.tableau-enveloppe{overflow-x:auto;background:var(--glass);border:1px solid var(--glass-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-2),var(--sh-inset);padding:var(--s-2);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}
.tableau{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
.tableau thead th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;
  color:var(--ly-muted);font-weight:700;padding:var(--s-3) var(--s-4);white-space:nowrap}
.tableau tbody td{padding:var(--s-4);border-top:1px solid var(--ly-line);vertical-align:middle}
.tableau tbody tr{transition:background var(--t) var(--ease)}
.tableau tbody tr:hover{background:rgba(255,255,255,.45)}
.tableau .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tableau .actions{white-space:nowrap}
.tableau .actions .lien{margin-right:var(--s-3)}
.tableau-cout td{padding:var(--s-3) var(--s-4)}
.ligne-total td{border-top:2px solid var(--ly-ink);font-size:var(--fs-lg)}
.ligne-marge td{color:var(--ly-accent)}

/* ---------- Badges d'état (rôles) ---------- */
.etat{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;background:var(--glass-soft);color:var(--ly-ink-2);border:1px solid var(--glass-border)}
.etat.role-admin{color:#fff;background:linear-gradient(150deg,var(--ly-brand),var(--ly-brand-strong));border-color:transparent}
.etat.role-gestion{color:#fff;background:linear-gradient(150deg,var(--ly-accent),var(--ly-accent-soft));border-color:transparent}
.etat.role-vendeuse{color:var(--ly-accent);background:var(--ly-brand-tint)}

/* ---------- Cartes / fiches ---------- */
.fiche-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--s-5);margin-bottom:var(--s-5)}
.carte{position:relative;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-2),var(--sh-inset);padding:var(--s-5);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}
.carte h2{margin-top:0}
.defs{display:grid;grid-template-columns:auto 1fr;gap:var(--s-2) var(--s-4);margin:0}
.defs dt{color:var(--ly-muted);font-size:var(--fs-sm)}
.defs dd{margin:0;font-weight:700}

/* ---------- Formulaires (pont) ---------- */
.formulaire{position:relative;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-2),var(--sh-inset);padding:var(--s-5);max-width:960px;
  -webkit-backdrop-filter:blur(var(--blur)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur)) saturate(var(--saturate))}
.formulaire label{display:block;margin-bottom:var(--s-4);font-weight:700;font-size:var(--fs-sm);color:var(--ly-ink-2)}
.formulaire input[type=text],.formulaire input[type=password],.formulaire input[type=number],
.formulaire input[type=date],.formulaire input[type=search],.formulaire input[type=file],
.formulaire select,.formulaire textarea{width:100%;margin-top:6px;font:inherit;font-size:var(--fs-md);
  color:var(--ly-ink);min-height:48px;padding:12px var(--s-4);border-radius:var(--r-sm);
  background:var(--glass-strong);border:1px solid var(--glass-border);box-shadow:var(--sh-inset);outline:none;
  transition:box-shadow var(--t) var(--ease),background var(--t) var(--ease),border-color var(--t) var(--ease)}
.formulaire textarea{min-height:110px;resize:vertical;font-weight:400}
.formulaire input:focus,.formulaire select:focus,.formulaire textarea:focus{background:#fff;
  border-color:var(--ly-brand-soft);box-shadow:0 0 0 4px var(--ly-brand-tint),var(--sh-inset)}
.grille-2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-5)}
.bloc-cout{border:1px solid var(--glass-border);border-radius:var(--r-md);padding:var(--s-4);margin:var(--s-2) 0 var(--s-5);
  background:var(--glass-soft)}
.bloc-cout legend{font-weight:800;padding:0 6px;color:var(--ly-ink)}
.radio-ligne{display:flex;align-items:center;gap:var(--s-3);font-weight:400;margin-bottom:var(--s-3)}
.radio-ligne input[type=number]{max-width:240px;margin-top:0}
.checkbox-ligne{font-weight:700;display:flex;align-items:center;gap:var(--s-2)}
.apercu{color:var(--ly-accent);font-weight:700;margin:var(--s-1) 0}
.aide-inline{display:block;font-weight:400;color:var(--ly-muted);font-size:var(--fs-xs);margin-top:6px}
.erreur-inline{color:var(--ly-danger)!important}
.acc-ligne{display:grid;grid-template-columns:1fr 170px 40px;gap:var(--s-3);margin-bottom:var(--s-2);align-items:center}
.acc-ligne input{margin-top:0}

/* ---------- Récapitulatif de coût (live) ---------- */
.recap{background:var(--glass-soft);border:1px solid var(--glass-border);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;max-width:440px;box-shadow:var(--sh-inset)}
.recap h3{margin:0 0 var(--s-3)}
.recap-liste{list-style:none;margin:0;padding:0}
.recap-liste li{display:flex;justify-content:space-between;padding:6px 0;color:var(--ly-ink-2)}
.recap-liste li.total{border-top:2px solid var(--ly-ink);margin-top:6px;padding-top:var(--s-3);
  font-size:var(--fs-lg);color:var(--ly-ink)}
.recap-liste li.marge{color:var(--ly-accent)}

/* ---------- Bulles d'aide ---------- */
.aide-bulle{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  background:var(--glass-soft);border:1px solid var(--glass-border);color:var(--ly-ink-2);font-size:.72rem;
  font-weight:800;cursor:help;vertical-align:middle}

/* ---------- Alertes ---------- */
.alerte{padding:var(--s-3) var(--s-4);border-radius:var(--r-md);margin-bottom:var(--s-5);font-size:var(--fs-md);
  border:1px solid transparent}
.alerte.erreur{background:rgba(218,75,87,.12);color:#A5303B;border-color:rgba(218,75,87,.25)}
.alerte.info{background:var(--glass-soft);color:var(--ly-ink-2);border-color:var(--glass-border)}
.alerte.succes{background:rgba(46,158,107,.14);color:#1E7A50;border-color:rgba(46,158,107,.25)}

/* ---------- Recherche & grille de produits ---------- */
.barre-filtres{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-bottom:var(--s-5)}
.barre-filtres input[type=search],.barre-filtres select{min-height:46px;padding:10px var(--s-4);font:inherit;
  border:1px solid var(--glass-border);border-radius:var(--r-pill);background:var(--glass-strong);box-shadow:var(--sh-inset);outline:none}
.barre-filtres input[type=search]{flex:1;min-width:240px}
.grille-produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-5)}
.carte-produit{position:relative;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-2),var(--sh-inset);color:var(--ly-ink);display:flex;flex-direction:column;
  text-decoration:none;transition:transform var(--t) var(--ease-out),box-shadow var(--t) var(--ease-out)}
.carte-produit:hover{transform:translateY(-3px);box-shadow:var(--sh-3),var(--sh-inset);text-decoration:none}
.vignette{aspect-ratio:1/1;background:linear-gradient(160deg,rgba(255,255,255,.85),var(--ly-brand-tint));
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.vignette img{width:100%;height:100%;object-fit:cover}
.vignette-vide{font-size:2.4rem;opacity:.4}
.carte-produit-corps{padding:var(--s-4);display:flex;flex-direction:column;gap:4px}
.cp-nom{font-size:var(--fs-md)}
.cp-collection{color:var(--ly-muted);font-size:var(--fs-xs)}
.cp-prix{font-weight:800;color:var(--ly-accent)}
.cp-stock{font-size:var(--fs-xs);color:var(--ly-ink-2)}
.cp-stock.rupture{color:var(--ly-danger)}

/* ---------- Galerie fiche produit ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s-3)}
.galerie img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--glass-border)}

/* ---------- Grille de variantes couleur × taille ---------- */
.grille-variantes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.var-cell{border:1px solid var(--glass-border);border-radius:var(--r-sm);padding:var(--s-3);background:var(--glass-strong);box-shadow:var(--sh-inset)}
.var-lib{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:6px}
.var-qte{width:100%;padding:8px 10px;border:1px solid var(--glass-border);border-radius:var(--r-xs);font:inherit;background:#fff}

/* ---------- Formulaires inline (entrée / vente) ---------- */
.form-inline{display:flex;gap:6px;align-items:center;margin:0}
.qte-mini{width:66px;padding:8px;border:1px solid var(--glass-border);border-radius:var(--r-xs);font:inherit;background:#fff}

/* ---------- Aide ---------- */
.liste-aide{margin:0;padding-left:20px}
.liste-aide li{margin-bottom:var(--s-2)}

/* ---------- Connexion ---------- */
.page-login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s-5)}
.carte-login{position:relative;background:var(--glass-strong);border:1px solid var(--glass-border);
  border-radius:var(--r-xl);padding:var(--s-6);width:100%;max-width:400px;box-shadow:var(--sh-3),var(--sh-inset);
  -webkit-backdrop-filter:blur(var(--blur-lg)) saturate(var(--saturate));
  backdrop-filter:blur(var(--blur-lg)) saturate(var(--saturate))}
.login-titre{text-align:center;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px}
.login-soustitre{text-align:center;color:var(--ly-muted);margin:0 0 var(--s-5);font-size:var(--fs-sm)}
.carte-login label{display:block;margin-bottom:var(--s-4);font-weight:700;font-size:var(--fs-sm);color:var(--ly-ink-2)}
.carte-login input{width:100%;margin-top:6px;min-height:48px;padding:12px var(--s-4);border:1px solid var(--glass-border);
  border-radius:var(--r-sm);font:inherit;background:var(--glass-strong);box-shadow:var(--sh-inset);outline:none}
.carte-login input:focus{background:#fff;border-color:var(--ly-brand-soft);box-shadow:0 0 0 4px var(--ly-brand-tint),var(--sh-inset)}
.carte-login .btn{width:100%;margin-top:var(--s-2)}

@media(max-width:820px){
  .grille-2{grid-template-columns:1fr}
  .pied-app{margin-left:0}
}