/* app.css — gabarit d'application commun (« modèle dashboard »).
   Inclus par toutes les pages. Les couleurs sont des variables posées par
   brand.js (re-skin par domaine). Ne rien coder en dur ici de spécifique client. */

:root{
  --ink:#1a1a2e;--parchment:#f5f0e8;--amber:#d4a843;--amber-light:#f0d78c;
  --warm-gray:#e8e2d8;--text:#2c2c2c;--text-light:#888;--red:#c0392b;--green:#27ae60;
  --radius:12px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:#fafafa;color:var(--text);font-family:var(--font);font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}

/* ── Header (topbar sombre, marque Cinzel) ─────────────────────────────── */
.topbar{background:var(--ink);color:var(--parchment);padding:10px 16px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:100}
.topbar .brand{font-family:'Cinzel',serif;font-size:13px;letter-spacing:4px;color:var(--amber);display:inline-flex;align-items:center}
.topbar .spacer{margin-left:auto}
.topbar .navlink{color:var(--parchment);opacity:.6;font-size:12px;text-decoration:none;padding:4px 8px;border-radius:4px;cursor:pointer}
.topbar .navlink:hover,.topbar .navlink.active{opacity:1}
.topbar .navlink.active{background:var(--amber);color:var(--ink);font-weight:600}
.topbar .logout{color:var(--parchment);opacity:.6;font-size:12px;text-decoration:underline;cursor:pointer}
.topbar .logout:hover{opacity:1}

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap{max-width:960px;margin:0 auto;padding:22px 18px 60px}
.wrap.narrow{max-width:600px}
.page-title{margin:6px 2px 4px;font-size:22px;font-weight:700;color:var(--ink)}
.page-title span{color:var(--amber)}
.page-sub{color:var(--text-light);margin:0 2px 20px;font-size:14px}

/* ── Cartes ────────────────────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--warm-gray);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.card > h2,.card-title{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-light);font-weight:700}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn{display:inline-block;background:var(--amber);color:var(--ink);border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;font-size:14px;cursor:pointer;text-align:center;transition:.12s}
.btn:hover{filter:brightness(1.05)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--warm-gray)}
.btn.ghost:hover{border-color:var(--amber)}
.btn.block{display:block;width:100%}

/* ── Formulaires ───────────────────────────────────────────────────────── */
.field{margin-bottom:14px}
label{display:block;font-size:12px;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],input[type=tel],input[type=date],textarea,select{
  width:100%;padding:11px 13px;border:1.5px solid var(--warm-gray);border-radius:8px;font:inherit;font-size:14px;background:#fff;color:var(--text)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--amber)}
textarea{min-height:90px;resize:vertical}

/* ── Divers ────────────────────────────────────────────────────────────── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
@media(max-width:640px){.grid3{grid-template-columns:1fr}}
.tile{background:#fff;border:1px solid var(--warm-gray);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:6px}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:20px;background:var(--warm-gray);color:var(--ink)}
.badge.ok{background:#e4f0e6;color:var(--green)}
.badge.warn{background:#fbeecb;color:#8a6d1a}
.badge.err{background:#f7e0dd;color:var(--red)}
.empty{color:var(--text-light);font-size:14px;padding:6px 0}
.loading{color:var(--text-light);text-align:center;padding:40px}
.err-msg{color:var(--red);font-size:13px;margin:8px 0}