:root{
  --bg:#f7f7fb;
  --card:#ffffff;
  --text:#111;
  --muted:#666;
  --primary:#0d6efd;
  --danger:#dc3545;
  --border:#e5e7eb;
  --accent:#eef2ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}
.container{max-width:1100px;margin:0 auto;padding:24px}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:20px;
  box-shadow:0 6px 22px rgba(0,0,0,.04);
}
.row{margin-top:12px}
.meta{color:var(--muted);font-size:.92rem}
h1{font-size:1.5rem;margin:0 0 12px}
h2{font-size:1.2rem;margin:16px 0 8px}
label{display:block;margin-bottom:6px;font-weight:600}
input,select,textarea{
  width:100%;padding:10px;border:1px solid var(--border);border-radius:8px;
  background:#fff;outline:none
}
textarea{min-height:160px;resize:vertical}
button{
  padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:#fff;cursor:pointer;font-weight:600
}
button.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
button.ghost{background:#fff}
button:disabled{opacity:.6;cursor:not-allowed}
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background:var(--accent);border:1px dashed #c7d2fe;border-radius:8px;padding:10px;overflow:auto
}
.error{color:#b42318;background:#fee4e2;border:1px solid #fecdca;border-radius:8px;padding:10px}
.ok{color:#05603a;background:#d1fadf;border:1px solid #a6f4c5;border-radius:8px;padding:10px}
.nav{display:flex;gap:10px;margin-bottom:14px}
.nav a{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid var(--border);text-decoration:none;color:var(--text)}
.nav a.active{background:var(--primary);border-color:var(--primary);color:#fff}
.secret{
  background:#f6f7fb;padding:12px;border-radius:8px;white-space:pre-wrap;
  filter:blur(8px);transition:filter .35s ease;min-height:40px
}
.secret.revealed{filter:blur(0)}
.footer{margin-top:10px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
small.muted{color:var(--muted)}

/* 1) N'appliquer le style qu'aux champs de saisie texte */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  outline:none;
}

/* 2) Reset pour checkbox / radio + alignement avec le libellé */
input[type="checkbox"],
input[type="radio"]{
  width:auto;         /* pas 100% */
  height:auto;
  padding:0;          /* pas de padding */
  margin:0 .5rem 0 0; /* petit espace avant le texte */
  border:none;
  vertical-align:middle;
  accent-color: var(--primary); /* couleur de thème (si supporté) */
}

/* Optionnel: assure un bon alignement quand l'input est dans un <label> */
label > input[type="checkbox"],
label > input[type="radio"]{
  margin-right:.5rem;
}