/* =========================================================
   Mise en Place — feuille de style partagée
   index.php · users.php · stats.php
   ========================================================= */
:root {
    --paper:#F3EEE2;
    --card:#FBF7EE;
    --ink:#2C3122;
    --ink-soft:#6E6A57;
    --olive:#5E6B38;
    --olive-deep:#4A5630;
    --ochre:#B5823C;
    --terracotta:#A8552F;
    --line:#DED6C2;
    --tint-olive:rgba(94,107,56,0.12);
    --tint-ochre:rgba(181,130,60,0.16);
    --tint-terra:rgba(168,85,47,0.13);
    --tint-mute:rgba(110,106,87,0.12);
    --display:'Fraunces',Georgia,serif;
    --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
    --r:7px;
}
@media (prefers-color-scheme: dark) {
    :root {
        --paper:#181B12; --card:#23271B; --ink:#ECE6D6; --ink-soft:#A8A28C;
        --olive:#A2B06A; --olive-deep:#8B9A57; --ochre:#D8A24E; --terracotta:#DB7E52;
        --line:rgba(168,162,140,0.24); --tint-olive:rgba(162,176,106,0.16);
        --tint-ochre:rgba(216,162,78,0.18); --tint-terra:rgba(219,126,82,0.16);
        --tint-mute:rgba(168,162,140,0.13);
    }
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--body); background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.wrap { max-width:1240px; margin:0 auto; padding:0 28px 56px; }

/* ---------- Masthead ---------- */
.masthead { padding:36px 0 0; }
.masthead-row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.eyebrow { font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ochre); margin-bottom:8px; }
.masthead h1 { font-family:var(--display); font-weight:500; font-size:clamp(30px,5vw,46px); line-height:1.02; letter-spacing:-.01em; color:var(--ink); }
.who { flex-shrink:0; text-align:right; font-size:13px; color:var(--ink-soft); }
.who .name { color:var(--ink); font-weight:600; }
.who a { color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); }
.who a:hover { color:var(--ink); }
.rule { height:1px; background:var(--line); margin:24px 0 0; }

/* ---------- Nav ---------- */
.nav { display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.nav a { font-size:13px; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:8px 15px; border-radius:var(--r); transition:color .15s, background .15s; }
.nav a:hover { color:var(--ink); }
.nav a.active { background:var(--ink); color:var(--paper); }

/* ---------- Feuille de service ---------- */
.service { display:flex; align-items:center; flex-wrap:wrap; gap:0 38px; padding:22px 0 6px; }
.service-date { margin-right:8px; }
.service-date .lbl { font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:2px; }
.service-date .val { font-family:var(--display); font-size:23px; font-weight:500; color:var(--ink); }
.vital { padding-left:38px; border-left:1px solid var(--line); }
.vital:first-of-type { border-left:none; padding-left:0; }
.vital .num { font-family:var(--display); font-size:38px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink); }
.vital.is-pending .num { color:var(--ochre); }
.vital.is-confirmed .num { color:var(--olive); }
.vital .cap { display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }

/* ---------- Alerts ---------- */
.alert { margin:18px 0 0; padding:13px 16px; border-radius:var(--r); font-size:14px; border:1px solid transparent; }
.alert-success { background:var(--tint-olive); color:var(--olive-deep); border-color:rgba(94,107,56,.3); }
.alert-error { background:var(--tint-terra); color:var(--terracotta); border-color:rgba(168,85,47,.3); }

/* ---------- Layout ---------- */
.grid { display:grid; grid-template-columns:5fr 7fr; gap:28px; margin-top:28px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px; }
.panel + .panel { margin-top:24px; }
.panel-title { font-family:var(--display); font-weight:500; font-size:21px; color:var(--ink); display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.panel-title::before { content:""; width:18px; height:2px; background:var(--ochre); display:inline-block; }
.panel-lead { font-size:14px; color:var(--ink-soft); margin:-10px 0 20px; }

/* ---------- Form ---------- */
.field { margin-bottom:16px; }
.field label { display:block; font-size:12px; font-weight:600; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:7px; }
input, textarea, select { width:100%; padding:11px 13px; font-family:var(--body); font-size:14px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--r); transition:border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--olive); box-shadow:0 0 0 3px var(--tint-olive); }
textarea { resize:vertical; min-height:74px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* ---------- Buttons ---------- */
.btn { font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.01em; padding:11px 18px; border-radius:var(--r); border:1px solid transparent; cursor:pointer; transition:background .15s, border-color .15s, color .15s; text-decoration:none; display:inline-block; text-align:center; line-height:1.3; }
.btn-primary { background:var(--olive); color:#FBF7EE; }
.btn-primary:hover { background:var(--olive-deep); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--ink-soft); }
.btn-danger { background:transparent; color:var(--terracotta); border-color:rgba(168,85,47,.4); }
.btn-danger:hover { background:var(--tint-terra); }
.btn-block { display:block; width:100%; }
.btn-sm { padding:7px 13px; font-size:12px; }
.btn-gap { margin-top:9px; }

/* ---------- Filters ---------- */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip { font-size:12px; font-weight:500; padding:7px 13px; border-radius:100px; border:1px solid var(--line); color:var(--ink-soft); text-decoration:none; transition:all .15s; white-space:nowrap; }
.chip:hover { color:var(--ink); border-color:var(--ink-soft); }
.chip.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ---------- Reservation cards ---------- */
.resa { border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px; margin-bottom:14px; background:var(--card); }
.resa-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:4px; }
.resa-name { font-family:var(--display); font-size:18px; font-weight:500; color:var(--ink); }
.resa-by { font-size:12px; color:var(--ink-soft); margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.pill { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:100px; white-space:nowrap; }
.s-pending { background:var(--tint-ochre); color:var(--ochre); }
.s-confirmed { background:var(--tint-olive); color:var(--olive-deep); }
.s-completed { background:var(--tint-mute); color:var(--ink-soft); }
.s-cancelled { background:var(--tint-terra); color:var(--terracotta); }
.resa-meta { display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:14px; font-size:13.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.resa-meta span { display:inline-flex; align-items:center; gap:7px; }
.resa-meta strong { color:var(--ink); font-weight:600; }
.ic { width:15px; height:15px; stroke:var(--ink-soft); fill:none; stroke-width:1.6; flex-shrink:0; }
.resa-notes { font-size:13px; color:var(--ink); font-style:italic; background:var(--tint-mute); border-radius:6px; padding:10px 12px; margin-bottom:14px; }
.resa-actions { display:flex; flex-wrap:wrap; gap:8px; }
.resa-actions form { display:inline; }

/* ---------- Role badge ---------- */
.role { font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:3px 8px; border-radius:100px; }
.role-admin { background:var(--tint-ochre); color:var(--ochre); }
.role-salle { background:var(--tint-olive); color:var(--olive-deep); }
.role-pr { background:var(--tint-mute); color:var(--ink-soft); }

/* ---------- Table (stats / users) ---------- */
.table { width:100%; border-collapse:collapse; }
.table th { text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); font-weight:600; padding:0 12px 12px; border-bottom:1px solid var(--line); }
.table td { padding:13px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.table tr:last-child td { border-bottom:none; }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }
.table .big { font-family:var(--display); font-size:18px; font-weight:500; }
.table tfoot td { font-weight:700; border-top:2px solid var(--line); border-bottom:none; }
.uname { font-weight:600; color:var(--ink); }
.ufonction { color:var(--ink-soft); font-size:12.5px; }

/* ---------- Misc ---------- */
.empty { text-align:center; padding:48px 20px; color:var(--ink-soft); }
.empty .mark { font-family:var(--display); font-size:30px; color:var(--line); margin-bottom:10px; }
.export { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:22px 0 0; }
.export input { width:auto; }
.inactive { opacity:.5; }

/* ---------- Responsive ---------- */
@media (max-width:900px) { .grid { grid-template-columns:1fr; } }
@media (max-width:560px) {
    .wrap { padding:0 18px 40px; }
    .service { gap:0 26px; }
    .vital { padding-left:26px; }
    .vital .num { font-size:32px; }
    .field-row { grid-template-columns:1fr; }
    .resa-actions .btn { flex:1 1 auto; }
    .table th:nth-child(2), .table td:nth-child(2) { display:none; } /* masque la colonne fonction sur mobile */
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

/* ---------- Ajouts : statuts waitlist / no_show, appel, case à cocher ---------- */
:root { --slate:#5B6B73; --tint-slate:rgba(91,107,115,0.16); }
@media (prefers-color-scheme: dark) {
    :root { --slate:#9DB2BA; --tint-slate:rgba(157,178,186,0.18); }
}
.s-waitlist { background:var(--tint-slate); color:var(--slate); }
.s-no_show  { background:var(--terracotta); color:#FBF7EE; }   /* rempli : se distingue de "Annulée" */

.btn-call { background:var(--ochre); color:#2C2410; border-color:transparent; }
.btn-call:hover { filter:brightness(0.94); }

.checkrow { display:flex; align-items:center; gap:9px; font-weight:500; color:var(--ink);
            text-transform:none; letter-spacing:0; font-size:14px; cursor:pointer; }
.checkrow input { width:auto; margin:0; }

/* --- Statut "Arrivé" (ajout module Service) --- */
.s-arrived { background:var(--olive); color:#FBF7EE; }