/* === Design tokens (light/dark) === */
:root{
  --bg:#f8fafc; --card:#ffffff; --muted:#6b7280; --text:#0f172a;
  --primary:#0ea5e9; --primary-600:#0284c7; --ring:#93c5fd;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626; --border:#e5e7eb;
}
:root.dark{
  --bg:#0b1220; --card:#0f172a; --muted:#9aa4b2; --text:#e5e7eb;
  --primary:#38bdf8; --primary-600:#0ea5e9; --ring:#38bdf8;
  --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; --border:#1f2a37;
}
html,body{height:100%}
body{background:var(--bg); color:var(--text); font:400 15px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial}
a{color:var(--primary); text-decoration:none} a:hover{color:var(--primary-600)}
.container{max-width:1100px; margin:0 auto; padding:16px}

/* === Cards & layout === */
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card.pad{padding:16px}

/* === Buttons === */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer; font-weight:600}
.btn:focus{outline:2px solid var(--ring); outline-offset:2px}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--border)}
.btn-ghost:hover{background:rgba(148,163,184,.12)}
.btn-danger{background:var(--err); color:#fff}

/* === Forms === */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-row{display:flex; flex-direction:column; gap:6px}
label{font-weight:600}
input[type="text"],input[type="number"],input[type="date"],select,textarea{
  width:90%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--card); color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ring); outline-offset:2px}
.helptext{color:var(--muted); font-size:12px}
.errorlist{margin:4px 0 0; padding:0; list-style:none; color:var(--err); font-size:13px}

/* === Tables === */
.table-wrap{overflow:auto; border-radius:14px; border:1px solid var(--border)}
table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card)}
th,td{padding:10px 12px; border-bottom:1px solid var(--border); white-space:nowrap}
thead th{font-size:13px; color:var(--muted); text-align:left; position:sticky; top:0; background:var(--card)}
tbody tr:hover{background:rgba(148,163,184,.08)}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* === Badges === */
.badge{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:var(--muted)}

/* === Toasts (messages Django) === */
.toast{padding:10px 12px; border-radius:12px; border:1px solid var(--border)}
.toast.success{background:rgba(34,197,94,.12); color:#16a34a}
.toast.error{background:rgba(239,68,68,.12); color:#dc2626}
.toast.warning{background:rgba(234,179,8,.12); color:#ca8a04}
.toast.info{background:rgba(59,130,246,.12); color:#2563eb}

/* === Topbar === */
.topbar{background:var(--card); border-bottom:1px solid var(--border)}
.topbar a{color:var(--text); padding:10px 8px; border-radius:8px}
.topbar a.active{background:rgba(148,163,184,.18)}



/* ==== MENU responsive ==== */
.topbar{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--border)}
.navbar{display:flex;align-items:center;justify-content:space-between}

.brand{display:flex;align-items:center;gap:8px;font-weight:700}

.hamburger{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);background:var(--card)}
.hamburger .bar,.hamburger .bar::before,.hamburger .bar::after{
  content:"";display:block;width:18px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.hamburger .bar::before{transform:translateY(-6px)}
.hamburger .bar::after{transform:translateY(6px)}
.hamburger[aria-expanded="true"] .bar{background:transparent}
.hamburger[aria-expanded="true"] .bar::before{transform:rotate(45deg)}
.hamburger[aria-expanded="true"] .bar::after{transform:rotate(-45deg)}

.nav{display:none;gap:10px}
.nav-link{color:var(--text);padding:8px 10px;border-radius:8px}
.nav-link:hover{background:rgba(148,163,184,.12)}
.nav-link.active{background:rgba(148,163,184,.18)}

.drawer{position:fixed;inset:0;z-index:60;pointer-events:none}
.drawer .backdrop{position:absolute;inset:0;background:rgba(2,6,23,.45);opacity:0;transition:opacity .2s ease}
.drawer .panel{position:absolute;top:0;left:0;height:100%;width:82%;max-width:320px;background:var(--card);
  border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .2s ease;padding:16px}
.drawer.open{pointer-events:auto}
.drawer.open .backdrop{opacity:1}
.drawer.open .panel{transform:translateX(0)}

@media (min-width:1024px){
  .hamburger{display:none}
  .nav{display:flex}
  .drawer{display:none}
}


/* Groupe input + bouton (ex: œil) */
.field-addon{ display:flex; align-items:center; gap:8px; }

/* Fait grandir l'input pour remplir la ligne */
.input-grow{ flex:1; }

/* Bouton icône carré aligné à la hauteur des champs */
.bouton-site--icon{
  width:42px; height:42px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
}

/* Important pour l’alignement: que les inputs fassent 100% */
input[type="text"], input[type="password"], input[type="number"], input[type="date"], select, textarea{
  width:100%; /* remplace 90% si tu l’as encore */
}