:root{
  --bg:#faf6f1; --card:#ffffff; --text:#2b2118; --muted:#7a6b5d; --line:#e6dccf;
  --accent:#7a4a21; --accent-2:#a0652f; --on-accent:#fff; --ok:#2e7d4f; --warn:#b26a00; --err:#b3261e;
  --radius:12px; --shadow:0 1px 3px rgba(60,40,20,.12);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#1b1612; --card:#26201a; --text:#f1e8de; --muted:#b3a291; --line:#3b3128;
    --accent:#d39a5e; --accent-2:#e3b07a; --on-accent:#1b1612; --ok:#6cc58f; --warn:#f0b04a; --err:#f2867d; --shadow:none; }
}
/* Environnement de test : fond vert pour ne jamais le confondre avec la production */
body.mode-test{ --bg:#eef6ea; }
@media (prefers-color-scheme:dark){ body.mode-test{ --bg:#16201a; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
h1{font-size:1.5rem;margin:.2em 0 .6em}
h2{font-size:1.15rem;margin:0 0 .6em}
main{max-width:1100px;margin:0 auto;padding:16px}

#nav{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.navin{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--text);white-space:nowrap}
.brand img{width:32px;height:32px}
.navlinks{display:flex;gap:4px;flex:1;overflow-x:auto}
.navlinks a{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--text);white-space:nowrap}
.navlinks a.on{background:var(--accent);color:var(--on-accent)}
.test-badge{background:var(--ok);color:#fff;border-radius:6px;padding:1px 6px;font-size:.75rem;margin-left:4px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}
a.card{display:block;text-decoration:none;color:inherit}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:.875rem}

label{display:block;font-weight:600;margin:0 0 4px}
.field{margin-bottom:12px}
input,select{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}
input:focus,select:focus{outline:2px solid var(--accent-2);outline-offset:1px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 16px}
.check{display:flex;gap:8px;align-items:center;font-weight:400}
.check input{width:auto}

button,.btn{font:inherit;font-weight:600;padding:10px 16px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;text-decoration:none;display:inline-block}
button.ghost,.btn.ghost{background:transparent;color:var(--accent)}
button.danger{background:var(--err);border-color:var(--err);color:#fff}
button:disabled{opacity:.5;cursor:default}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line)}
th{font-size:.85rem;color:var(--muted);font-weight:600}
tr.click{cursor:pointer}
tr.click:hover td{background:color-mix(in srgb,var(--accent) 8%,transparent)}
tr.inactive td{color:var(--muted)}
.tag{display:inline-block;border-radius:999px;padding:1px 8px;font-size:.8rem;border:1px solid var(--line)}
.tag.chef{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tag.off{color:var(--err);border-color:var(--err)}

.login{max-width:380px;margin:8vh auto 0}
.login .brand{justify-content:center;font-size:1.3rem;margin-bottom:16px}
.login .brand img{width:56px;height:56px}
.error{color:var(--err);margin:8px 0}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;z-index:10;max-width:calc(100% - 32px)}
#toast.err{background:var(--err);color:#fff}

/* Téléphone */
@media (max-width:700px){
  main{padding:12px}
  .navin{padding:6px 10px}
  .brand span,.nl{display:none}
  .navlinks a{padding:8px}
  .hide-phone{display:none}
  th,td{padding:8px 6px}
}