: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)}

textarea{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);resize:vertical}
td.num,th.num{text-align:right;white-space:nowrap}
.neg,.neg strong{color:var(--err)}
button.small{padding:4px 10px;font-size:.85rem}
.scroll{overflow-x:auto}
.scroll input:not([type=checkbox]){min-width:10em;padding:6px 8px}
.check input[type=checkbox]{width:18px;height:18px;flex:none}
td .check{white-space:nowrap;margin:0}

.tabs{display:flex;gap:4px;margin:0 0 12px;overflow-x:auto}
.tabs a{padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--text);border:1px solid var(--line);white-space:nowrap;background:var(--card)}
.tabs a.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

.bar{height:10px;min-width:80px;border-radius:999px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--ok)}
.bar.over span{background:var(--err)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px}
.stat strong{font-size:1.3rem}
.stat .bar{margin-top:10px}

.mt{margin-top:12px}
.nowrap{white-space:nowrap}
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.warn{color:var(--warn);border-color:var(--warn)}

/* Rappels de l'accueil : orange, puis rouge après la date limite */
.alert{display:block;text-decoration:none;color:var(--text);border:1px solid var(--warn);border-left:6px solid var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--card));border-radius:var(--radius);padding:12px 14px;margin-bottom:12px}
.alert.late{border-color:var(--err);background:color-mix(in srgb,var(--err) 12%,var(--card))}
.alert.late strong{color:var(--err)}

/* Ma journée */
.daynav{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.daynav>div,.daynav>h1{flex:1;text-align:center}
.daynav h1{margin:0;font-size:1.3rem}
.daynav .btn{padding:8px 16px;font-size:1.2rem}
.lines{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.line{display:flex;gap:8px;align-items:center}
.line select{flex:1;min-width:0}
.line .hours{width:90px;flex:none}
.choice{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.choice label{margin:0;font-weight:500}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-block;padding:10px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg)}
.choice input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.choice input:focus-visible+span{outline:2px solid var(--accent-2);outline-offset:1px}
.preview{margin:8px 0 14px;padding:10px 12px;border-radius:10px;background:var(--bg)}

/* Mon mois */
table.month td{padding-top:7px;padding-bottom:7px}
tr.weekend td{color:var(--muted);background:color-mix(in srgb,var(--line) 35%,transparent)}
tr.missing td{background:color-mix(in srgb,var(--warn) 12%,transparent)}
tr.missing td:nth-child(2){color:var(--warn);font-weight:600}
tr.today td:first-child{font-weight:700}

.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}

/* Fenêtre moyenne : le menu ne garde que les icônes */
@media (max-width:1000px){
  .nl{display:none}
  .navlinks a{padding:8px}
}
/* 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}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  th,td{padding:8px 6px}
}