/* =====================================================================
   LA VIDA LOCA — Style commun
   Néon violet, noir, or du logo, touche latino.
   ===================================================================== */
:root {
  --fond: #0d0912;
  --fond-2: #140d1c;
  --panneau: #160f1f;
  --carte: #1e1529;
  --carte-2: #251a33;
  --bord: #33254a;
  --bord-fort: #4a3666;
  --texte: #f4eefc;
  --texte-2: #cfc3e3;
  --discret: #a898c2;
  --violet: #b45cff;
  --violet-doux: #d9a8ff;
  --violet-fond: #2b1542;
  --or: #f0b93a;
  --or-clair: #ffd47a;
  --or-fond: #2a1d0a;
  --rose: #ff5ca8;
  --rose-clair: #ff8fc2;
  --rose-fond: #1f0f1c;
  --vert: #7ee2a0;
  --vert-fond: #0f2418;
  --rouge: #ff7a7a;
  --rouge-fond: #2a0f14;
  --titre: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --corps: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --r-petit: 8px;
  --r: 12px;
  --r-grand: 16px;
  --lueur-violet: 0 0 18px rgba(180, 92, 255, .35);
  --lueur-or: 0 0 20px rgba(240, 185, 58, .35);
  --lueur-rose: 0 0 16px rgba(255, 92, 168, .3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--or); }
a:hover { color: var(--or-clair); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--titre); font-weight: 800; letter-spacing: .01em; line-height: 1.05; margin: 0; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
.montant { font-family: var(--titre); font-weight: 800; font-variant-numeric: tabular-nums; }
.discret { color: var(--discret); }
.petit { font-size: 14px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: var(--r);
  border: 1px solid var(--bord); background: var(--carte); color: var(--texte);
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.btn:hover:not(:disabled) { border-color: var(--violet); }
.btn:disabled { opacity: .5; }
.btn-or { background: var(--or); border-color: var(--or); color: #1a1206; }
.btn-or:hover:not(:disabled) { background: var(--or-clair); border-color: var(--or-clair); }
.btn-violet { background: var(--violet); border-color: var(--violet); color: #12081c; }
.btn-rose { background: transparent; border-color: var(--rose); color: var(--rose-clair); }
.btn-rose.actif { background: var(--rose); color: #1a0612; }
.btn-fantome { background: transparent; border-color: transparent; color: var(--discret); }
.btn-fantome:hover:not(:disabled) { color: var(--texte); border-color: var(--bord); }
.btn-danger { background: var(--rouge-fond); border-color: var(--rouge); color: var(--rouge); }
.btn-grand { min-height: 56px; font-size: 18px; padding: 0 24px; }

/* Choix segmentés (entrepôt, paiement…) */
.segments { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r); background: var(--panneau); border: 1px solid var(--bord); }
.segments button {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px;
  background: transparent; color: var(--discret); font-weight: 700;
}
.segments button[aria-pressed="true"] { background: var(--violet); color: #12081c; }

/* ---------- Champs ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--texte-2); }
.champ input, .champ select, .champ textarea {
  min-height: 46px; padding: 0 14px; border-radius: var(--r-petit);
  border: 1px solid var(--bord); background: var(--fond); color: var(--texte); font-size: 16px;
}
.champ textarea { padding: 10px 14px; min-height: 80px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--violet); outline: none; box-shadow: var(--lueur-violet); }
.aide { font-size: 13px; color: var(--discret); }

/* ---------- En-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 8px 20px;
  background: var(--fond-2); border-bottom: 1px solid var(--violet); box-shadow: var(--lueur-violet);
}
.entete .logo { height: 54px; width: auto; flex-shrink: 0; }
.entete nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; min-width: 0; }
.entete nav a, .entete nav span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 10px;
  color: var(--discret); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent;
}
.entete nav a:hover { color: var(--texte); border-color: var(--bord); }
.entete nav a[aria-current="page"] { color: var(--or); background: var(--or-fond); border-color: var(--or); }
.entete nav span.bientot { opacity: .45; cursor: default; }
.entete .qui { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.entete .qui .nom { font-weight: 700; font-size: 15px; text-align: right; }
.entete .qui .grade { font-size: 13px; text-align: right; }
.pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.en-service { color: var(--vert); }

/* ---------- Notifications ---------- */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 40px)); }
.toast {
  padding: 12px 16px; border-radius: var(--r); background: var(--carte-2); border: 1px solid var(--bord-fort);
  font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.5);
  animation: toast-entree .18s ease-out;
}
.toast.ok { border-color: var(--vert); color: var(--vert); background: var(--vert-fond); }
.toast.erreur { border-color: var(--rouge); color: var(--rouge); background: var(--rouge-fond); }
@keyframes toast-entree { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Fenêtres ---------- */
dialog.fenetre {
  width: min(520px, calc(100vw - 32px)); padding: 0; border-radius: var(--r-grand);
  border: 1px solid var(--violet); background: var(--panneau); color: var(--texte); box-shadow: var(--lueur-violet), 0 20px 60px rgba(0,0,0,.6);
}
dialog.fenetre { max-height: calc(100vh - 32px); overflow-y: auto; }
dialog.fenetre.large { width: min(760px, calc(100vw - 32px)); }
dialog.fenetre::backdrop { background: rgba(8, 4, 12, .75); }
.fenetre form { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.fenetre .actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puces button { min-height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte-2); font-size: 14px; }
.puces button:hover { border-color: var(--violet); color: var(--texte); }

/* ---------- Pages simples ---------- */
.page-centre { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.bloc { width: min(460px, 100%); padding: 32px; border-radius: 20px; background: var(--panneau); border: 1px solid var(--bord); }
.message-vide { padding: 32px 16px; text-align: center; color: var(--discret); border: 1px dashed var(--bord); border-radius: var(--r); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 900px) {
  .entete { flex-wrap: wrap; }
  .entete nav { order: 3; width: 100%; }
}