/* ===== Variables (thème clair par défaut) ===== */
:root{--bg:#f4f6fb;--card:#fff;--text:#1d2433;--muted:#667085;--accent:#4f46e5;--accent-t:#fff;--ok:#16a34a;--warn:#d97706;--bad:#dc2626;--line:#e3e7ef;--r:14px}
:root[data-theme="dark"]{--bg:#0f1420;--card:#1a2133;--text:#e8ecf5;--muted:#9aa4b8;--accent:#818cf8;--accent-t:#0f1420;--line:#2a3350}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,"Segoe UI",Tahoma,sans-serif}
[hidden]{display:none!important}
h1,h2,h3{margin:.2em 0}
button,select,input,textarea{font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.45em .8em}
button{cursor:pointer;background:var(--accent);color:var(--accent-t);border-color:transparent}
button.ghost{background:transparent;color:var(--text);border-color:var(--line)}
button.danger{background:var(--bad);color:#fff}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
label{display:block;margin:.5em 0}label>span{display:block;font-size:.85em;color:var(--muted)}
input,select,textarea{width:100%}
input[type=checkbox]{width:auto}
textarea{min-height:90px}

/* ===== Mise en page (propriétés logiques → compatible RTL/LTR) ===== */
.app{display:grid;grid-template-columns:210px 1fr;grid-template-rows:auto 1fr;min-height:100vh}
.topbar{grid-column:1/-1;display:flex;gap:.6rem;align-items:center;padding:.6rem 1rem;background:var(--card);border-block-end:1px solid var(--line)}
.topbar select{width:auto}.logo{letter-spacing:.08em;color:var(--accent)}
.banner{flex:1;font-size:.8em;color:var(--warn)}
.nav{display:flex;flex-direction:column;gap:.3rem;padding:1rem .6rem;border-inline-end:1px solid var(--line);background:var(--card)}
.nav button{background:transparent;color:var(--text);text-align:start;border:0}
.nav button.active{background:var(--accent);color:var(--accent-t)}
.main{padding:1rem;max-width:1100px;width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.row>*{flex:0 0 auto}.row>input,.row>select{flex:1 1 140px;width:auto}
.big{font-size:2rem;font-weight:700}.muted{color:var(--muted);font-size:.9em}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--ok)}
.item{display:flex;gap:.6rem;align-items:center;padding:.5rem 0;border-block-end:1px solid var(--line)}
.item .grow{flex:1;min-width:0}
.done .t{text-decoration:line-through;color:var(--muted)}
.tag{font-size:.75em;padding:.1em .6em;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.tag.warn{color:var(--warn);border-color:var(--warn)}.tag.bad{color:var(--bad);border-color:var(--bad)}
.empty{text-align:center;color:var(--muted);padding:1.5rem}
.msg{color:var(--warn);min-height:1.2em}
.auth{min-height:100vh;display:grid;place-items:center;padding:1rem}.auth-card{width:min(380px,100%)}
.tree{list-style:none;margin:0;padding-inline-start:0}
.tree li{padding:.25rem .5rem;border-inline-start:3px solid var(--accent)}
.tree .lvl-week{margin-inline-start:1rem;border-color:var(--ok)}
.tree .lvl-day{margin-inline-start:2rem;border-color:var(--warn)}
.tree .leaf{margin-inline-start:3rem;border-color:var(--muted);font-size:.9em}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal>div{min-height:70px;border:1px solid var(--line);border-radius:8px;padding:3px;font-size:.75em;overflow:hidden}
.cal .today{border-color:var(--accent)}
dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--text);width:min(460px,94vw)}
dialog::backdrop{background:#0008}
.toast{position:fixed;inset-block-end:1rem;inset-inline:1rem;margin-inline:auto;width:fit-content;max-width:92vw;background:var(--text);color:var(--bg);padding:.6rem 1rem;border-radius:10px;z-index:9}
.toast.err{background:var(--bad);color:#fff}
.hl{overflow-x:auto}

/* ===== Mobile : navigation en bas ===== */
@media (max-width:720px){
  .app{grid-template-columns:1fr;padding-block-end:64px}
  .nav{position:fixed;inset-block-end:0;inset-inline:0;flex-direction:row;overflow-x:auto;border:0;border-block-start:1px solid var(--line);z-index:5;padding:.4rem}
  .nav button{white-space:nowrap;font-size:.85em}
  .banner{display:none}
}
@media (prefers-reduced-motion:reduce){.card{animation:none}}