@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Mono:wght@300;400;500&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold:        #c9a050;
  --gold-light:  #e8c87a;
  --gold-dim:    rgba(201,160,80,0.15);
  --cream:       #f8f3ea;
  --parchment:   #efe8d8;
  --dark:        #131008;
  --dark2:       #1e1810;
  --dark3:       #2a2218;
  --ink:         #2c1f0e;
  --brown:       #5a3e1b;
  --brown-lt:    #8b6840;
  --red:         #7a1c1c;
  --green:       #1e5c3a;
  --green-lt:    #27864f;
  --border:      rgba(201,160,80,0.22);
  --shadow:      0 4px 24px rgba(19,16,8,0.13);
  --radius:      3px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--cream); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 3px; }

/* ── Auth overlay ── */
#auth-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
}

.auth-box {
  background: var(--dark2);
  border: 1px solid var(--border);
  padding: 52px 48px;
  text-align: center;
  width: min(420px, 90vw);
}

.auth-logo {
  font-family: var(--font-display);
  font-size: 38px;
  font-style: italic;
  color: var(--gold-light);
  margin-bottom: 6px;
}

.auth-sub {
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 36px;
  font-family: var(--font-mono);
}

.auth-label {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
  font-family: var(--font-mono);
  text-align: left;
}

.auth-input {
  width: 100%;
  background: var(--dark3);
  border: 1px solid var(--border);
  color: white;
  padding: 14px 18px;
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
  font-family: var(--font-mono);
  outline: none;
  margin-bottom: 24px;
  transition: border-color .2s;
}

.auth-input:focus { border-color: var(--gold); }

.auth-btn {
  width: 100%;
  padding: 14px;
  background: var(--gold);
  color: var(--dark);
  border: none;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 3px;
  font-style: italic;
  cursor: pointer;
  transition: background .2s;
}

.auth-btn:hover { background: var(--gold-light); }

.auth-error {
  margin-top: 16px;
  font-size: 13px;
  color: #e87070;
  letter-spacing: 1px;
  min-height: 18px;
}

/* ── Topbar staff ── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--dark);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  height: 54px;
}

.topbar-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  color: var(--gold-light);
  text-decoration: none;
}

.topbar-nav { display: flex; gap: 4px; }

.topbar-link {
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  border-radius: var(--radius);
  transition: all .2s;
}

.topbar-link:hover { color: var(--gold-light); background: var(--gold-dim); }
.topbar-link.active { color: var(--gold-light); background: var(--gold-dim); }

.topbar-time {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 2px;
}

/* ── Toast ── */
#toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--dark2);
  color: var(--gold-light);
  border: 1px solid var(--gold);
  padding: 11px 28px;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 15px;
  z-index: 9998;
  opacity: 0;
  transition: all .3s ease;
  pointer-events: none;
  white-space: nowrap;
}

#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Boutons généraux ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 1.5px;
  cursor: pointer;
  border: none;
  transition: all .2s;
  border-radius: var(--radius);
}

.btn-gold  { background: var(--gold); color: var(--dark); }
.btn-gold:hover { background: var(--gold-light); }
.btn-dark  { background: var(--dark3); color: var(--gold-light); border: 1px solid var(--border); }
.btn-dark:hover { border-color: var(--gold); }
.btn-red   { background: transparent; color: var(--red); border: 1px solid rgba(122,28,28,.4); }
.btn-red:hover { background: var(--red); color: white; }
.btn-green { background: var(--green); color: white; }
.btn-green:hover { background: var(--green-lt); }
.btn-sm { padding: 6px 14px; font-size: 12px; }

/* ── Badge statut ── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 20px;
  font-weight: 500;
}

.badge-attente    { background: #2a2200; color: #e8b84d; border: 1px solid #5a4800; }
.badge-preparation{ background: #2a1500; color: #e8873a; border: 1px solid #6a3800; }
.badge-pret       { background: #0a2a16; color: #4ae88a; border: 1px solid #1a6040; }
.badge-servi      { background: #1a1a2a; color: #8888cc; border: 1px solid #3a3a6a; }

/* ── Card ── */
.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

/* ── Divider décoratif ── */
.divider-gold {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 32px 0;
  opacity: .5;
}

/* ── Input générique ── */
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
  border-radius: var(--radius);
}

.input:focus { border-color: var(--gold); }

.input-dark {
  background: var(--dark3);
  color: white;
  border-color: var(--border);
}

.input-dark:focus { border-color: var(--gold); }

/* ── Table ── */
.table-wrap { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.data-table th {
  background: var(--dark);
  color: var(--gold-light);
  padding: 11px 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
}

table.data-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: var(--gold-dim); }

/* ── Modal ── */
.modal-bg {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(19,16,8,.75);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}

.modal {
  background: var(--dark2);
  border: 1px solid var(--border);
  padding: 36px;
  width: min(520px, 94vw);
  max-height: 85vh;
  overflow-y: auto;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--gold-light);
  margin-bottom: 24px;
}

/* ── Animations ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.fade-up { animation: fadeUp .35s ease both; }