:root{
  --brand: #0a66ff;
  --brand-600:#0a5ae0;
  --ink: #1f2328;
  --muted:#6b7280;
  --bg:#ffffff;
  --panel:#ffffff;
  --border:#e5e7eb;
  --focus:#2563eb;
  --danger:#c62828;
  --ok:#0e9f6e;
  --radius:10px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#e5e7eb;
    --muted:#9aa3af;
    --bg:#0b0f14;
    --panel:#0f141b;
    --border:#1f2a37;
    --focus:#60a5fa;
    --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink); font: 16px/1.5 var(--font);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:20px}
header.site{
  position:sticky; top:0; z-index:10; background:var(--panel);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
}
header.site .row{display:flex; align-items:center; gap:16px; padding:12px 20px}
.brand{font-weight:700; text-decoration:none; color:var(--ink); font-size:18px}
.brand strong{color:var(--brand)}
nav.lang a, nav.lang strong{font-size:14px; color:var(--muted); text-decoration:none}
nav.lang a:hover{color:var(--ink)}

/* Subnav (internal sections) */
.subnav{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:8px 10px}
.subnav .btn{padding:8px 12px}

/* Typography helpers */
h1{font-size:1.6rem;margin:12px 0 8px}
h2{font-size:1.25rem;margin:14px 0 8px}
h3{font-size:1.05rem;margin:12px 0 6px}
.lead{color:var(--muted)}
.small{font-size:0.9rem}
.muted{color:var(--muted)}
code, pre{background:rgba(127,127,127,.08); border:1px solid var(--border); padding:.15rem .35rem; border-radius:6px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:9px 14px; border:1px solid var(--border); border-radius:8px;
  background:var(--panel); color:var(--ink); text-decoration:none; cursor:pointer;
  transition:.15s ease-in-out; user-select:none;
}
.btn:hover{border-color:#cfd3d8; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-600); border-color:var(--brand-600)}
.btn[disabled], .btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed; transform:none}

/* Forms */
form{margin:0}
.field{margin:10px 0}
.field > label{display:block; font-weight:600; margin-bottom:6px}
.form-row{display:flex; gap:12px; align-items:center; margin-top:12px}
.grid-2{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
.grid-3{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.span-2{grid-column: span 2}
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"],
select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px;
  background:var(--panel); color:var(--ink); outline: none;
}
textarea{min-height:120px; resize:vertical}

/* Focus visible (clavier / accessibilité) */
:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:6px;
}

/* Alerts / flashes */
.alert{padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--panel); margin:10px 0}
.alert.alert-error{border-color:var(--danger); color:var(--danger); background: color-mix(in oklab, var(--danger) 8%, transparent)}
.alert.alert{border-color:var(--ok); color:var(--ok); background: color-mix(in oklab, var(--ok) 8%, transparent)}

/* Fieldsets */
.fieldset{
  border:1px solid var(--border); border-radius:var(--radius); padding:12px;
  background:var(--panel); box-shadow:var(--shadow);
}
.fieldset > legend{padding:0 6px; color:var(--muted)}

/* Tables */
table{border-collapse:collapse}
th, td{border-bottom:1px solid var(--border)}
th{font-weight:600; color:var(--muted)}
td, th{padding:8px}

/* Progress bar (dashboard) */
.progress{border:1px solid var(--border); border-radius:999px; overflow:hidden; height:10px; background:rgba(127,127,127,.12)}
.progress > .bar{height:10px; background:var(--brand); width:0}

/* ============================
   Checkboxes & Radios (jolis)
   ============================ */

/* 1) Amélioration sans changer le HTML: accent-color + taille + alignement */
input[type="checkbox"], input[type="radio"]{
  accent-color: var(--brand);
  width: 1.1em; height: 1.1em;
  vertical-align: middle;
  margin-right: .45em;
}
label > input[type="checkbox"], label > input[type="radio"]{
  /* label + input sur une ligne propre */
  margin-top:-2px;
}
.field label{display:flex; align-items:center; gap:8px}
.field label input[type="checkbox"], .field label input[type="radio"]{margin-right:0}

/* 2) États */
input[type="checkbox"]:disabled, input[type="radio"]:disabled{opacity:.55; cursor:not-allowed}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; border-radius:4px;
}

/* 3) Variante "switch" (si tu veux un toggle sans changer les inputs) */
.switch{display:inline-flex; align-items:center; gap:10px}
.switch input[type="checkbox"]{
  appearance: none; -webkit-appearance:none; width:42px; height:24px; border-radius:999px;
  background: #cfd3d8; position:relative; border:1px solid var(--border); margin:0;
  transition:.2s ease-in-out;
}
.switch input[type="checkbox"]::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.15); transition:.2s ease-in-out;
}
.switch input[type="checkbox"]:checked{background:var(--brand); border-color:var(--brand)}
.switch input[type="checkbox"]:checked::after{transform: translateX(18px)}
.switch input[type="checkbox"]:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

/* File input */
input[type="file"]{
  display:block; padding:8px; border:1px dashed var(--border); border-radius:8px; background:var(--panel);
}

/* Links */
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Cards (optional) */
.card{border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); padding:12px}

.userpill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--panel);color:var(--muted)}
.userpill .avatar{width:22px;height:22px;border-radius:50%;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}

/* Footer */
footer.site{border-top:1px solid var(--border); color:var(--muted); padding:16px 20px; margin-top:28px}