/* ============================================================
   THE TOWN BAR & GRILL — base.css
   Tokens communs + reset + composants partagés (site public et
   tableau de bord). Palette : bois brun, crème, rose/mauve, doré
   (reprise du logo). Le site public utilise une variante claire
   (body.public), le tableau de bord une variante boisée sombre
   (body.app) — mêmes tokens, valeurs différentes.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}

:root{
  /* Bois (fond sombre — tableau de bord) */
  --wood-900:#1a120b;
  --wood-850:#20160e;
  --wood-800:#281b11;
  --wood-700:#332415;
  --wood-600:#402c1a;
  --wood-500:#4e3620;

  /* Crème (fond clair — site public) */
  --cream-100:#fbf6ee;
  --cream-200:#f5ecdc;
  --cream-300:#ecdfc7;

  /* Accents */
  --gold:#e3b558;
  --gold-600:#c3963c;
  --gold-300:#f6d68f;
  --gold-glow:rgba(227,181,88,.35);

  --rose:#e0679f;
  --rose-600:#c94f86;
  --rose-300:#f3aecb;
  --rose-glow:rgba(224,103,159,.35);
  --rose-dim:rgba(224,103,159,.14);

  --ok:#5fb87a; --ok-dim:rgba(95,184,122,.15);
  --warn:#e0a83c; --warn-dim:rgba(224,168,60,.16);
  --danger:#d9634a; --danger-dim:rgba(217,99,74,.16);
  --info:#7fa8c9; --info-dim:rgba(127,168,201,.16);

  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-1:0 10px 30px -12px rgba(20,12,6,.45);
  --shadow-2:0 18px 50px -18px rgba(20,12,6,.55);
  --ease:cubic-bezier(.2,.7,.2,1);

  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Surface par défaut = tableau de bord (sombre) */
  --bg:var(--wood-900);
  --panel:var(--wood-800);
  --panel-2:var(--wood-700);
  --txt:#f6ecdc;
  --txt-2:rgba(246,236,220,.72);
  --txt-3:rgba(246,236,220,.5);
  --line:rgba(246,236,220,.12);
  --line-2:rgba(246,236,220,.2);
  --accent:var(--gold);
  --accent-2:var(--rose);
}

body.public{
  --bg:#0a0708;
  --panel:#160f11;
  --panel-2:#1e1517;
  --txt:#f6ecdc;
  --txt-2:rgba(246,236,220,.72);
  --txt-3:rgba(246,236,220,.5);
  --line:rgba(246,236,220,.14);
  --line-2:rgba(246,236,220,.22);
  --shadow-1:0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-2:0 18px 50px -18px rgba(0,0,0,.65);
}

body{
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-display);margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-300);font-weight:700;
}
body.public .eyebrow{color:var(--rose-600)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:14px;text-decoration:none;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s,border-color .18s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(140deg,var(--rose),var(--rose-600));color:#fff;box-shadow:0 10px 24px -10px var(--rose-glow)}
.btn--primary:hover{box-shadow:0 14px 30px -10px var(--rose-glow);transform:translateY(-1px)}
.btn--gold{background:linear-gradient(140deg,var(--gold),var(--gold-600));color:#1a120b;box-shadow:0 10px 24px -10px var(--gold-glow)}
.btn--gold:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--txt)}
.btn--ghost:hover{background:var(--panel-2);border-color:var(--accent)}
.btn--danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn--danger:hover{background:var(--danger-dim)}
.btn--sm{padding:7px 14px;font-size:12.5px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Cartes / panneaux ---------- */
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.card-pad{padding:22px}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;border:1px solid transparent;
}
.badge--ok{background:var(--ok-dim);color:var(--ok)}
.badge--warn{background:var(--warn-dim);color:var(--warn)}
.badge--danger{background:var(--danger-dim);color:var(--danger)}
.badge--info{background:var(--info-dim);color:var(--info)}
.badge--rose{background:var(--rose-dim);color:var(--rose-300)}

/* ---------- Formulaires ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--txt-2);margin:0 0 6px}
.field{margin-bottom:16px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],
textarea,select{
  width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:var(--panel-2);color:var(--txt);font-family:var(--font-body);font-size:14px;
  transition:border-color .15s,box-shadow .15s;
}
textarea{resize:vertical;min-height:80px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--rose-dim)}
.checkbox-row{display:flex;align-items:center;gap:9px}
.checkbox-row input{width:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--txt-3);
  padding:10px 12px;border-bottom:1px solid var(--line-2);font-weight:700}
.tbl td{padding:12px;border-bottom:1px solid var(--line)}
.tbl tr:last-child td{border-bottom:none}
.tbl-wrap{overflow-x:auto}

/* ---------- Modale ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(20,12,6,.6);display:none;align-items:center;justify-content:center;
  padding:20px;z-index:1000;
}
.modal-backdrop.is-open{display:flex}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:26px;
}
.modal h3{font-size:19px;margin-bottom:18px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ---------- Toasts ---------- */
#toasts{position:fixed;top:16px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:10px}
.toast{
  background:var(--panel);border:1px solid var(--line-2);border-left:3px solid var(--accent-2);
  border-radius:var(--r-sm);padding:12px 16px;box-shadow:var(--shadow-2);font-size:13.5px;max-width:320px;
  animation:toast-in .25s var(--ease);
}
.toast--ok{border-left-color:var(--ok)}
.toast--error{border-left-color:var(--danger)}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ---------- Divers ---------- */
.muted{color:var(--txt-3)}
.hr{height:1px;background:var(--line);border:none;margin:20px 0}
.empty-state{padding:40px 20px;text-align:center;color:var(--txt-3)}
.skeleton{background:linear-gradient(90deg,var(--panel-2),var(--line-2),var(--panel-2));background-size:200% 100%;
  animation:sk 1.4s infinite;border-radius:var(--r-sm)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}