:root{
  --fond:#f4f5f7; --carte:#fff; --texte:#15181d; --doux:#6b7280;
  --bord:#e3e6ea; --accent:#2f6feb; --accent-fonce:#1f52bb;
  --alerte-fond:#fdecec; --alerte-texte:#a11d1d; --code:#f3f4f6;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#0e1116; --carte:#161b22; --texte:#e6edf3; --doux:#9aa4b2;
    --bord:#2a313a; --accent:#4d8bff; --accent-fonce:#3a72e0;
    --alerte-fond:#3a1d1d; --alerte-texte:#ffb4b4; --code:#0b0e13;
  }
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; background:var(--fond); color:var(--texte);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
  display:flex; flex-direction:column; align-items:center;
  padding:40px 16px 24px;
}
.carte{
  width:100%; max-width:640px; background:var(--carte); border:1px solid var(--bord);
  border-radius:16px; padding:36px 34px;
}
.surtitre{margin:0 0 6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--doux)}
h1{margin:0 0 14px; font-size:27px; line-height:1.25}
h2{margin:32px 0 10px; font-size:17px}
.chapo{margin:0 0 22px; font-size:16px; color:var(--texte)}
.note{font-size:14px; color:var(--doux)}
.alerte{background:var(--alerte-fond); color:var(--alerte-texte); padding:12px 14px;
  border-radius:9px; font-size:14.5px; margin:0 0 18px}
.formulaire{display:flex; flex-direction:column; gap:9px; margin:22px 0}
label{font-size:14px; font-weight:600}
input[type=email],textarea{
  width:100%; padding:12px 13px; font:inherit; color:var(--texte);
  background:var(--fond); border:1px solid var(--bord); border-radius:9px;
}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
button,.bouton{
  display:inline-block; background:var(--accent); color:#fff; border:0; cursor:pointer;
  padding:13px 22px; border-radius:9px; font:600 15px/1 inherit; text-decoration:none;
  text-align:center;
}
button:hover,.bouton:hover{background:var(--accent-fonce)}
.bouton.secondaire{background:transparent; color:var(--accent); border:1.5px solid var(--accent)}
.bouton.secondaire:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.choix{display:grid; gap:14px; margin:22px 0}
.choix .option{border:1px solid var(--bord); border-radius:12px; padding:18px}
.choix h3{margin:0 0 4px; font-size:16px}
.choix p{margin:0 0 14px; font-size:14px; color:var(--doux)}
.lien-retour{color:var(--accent); text-decoration:none; font-size:14.5px}
.lien-retour:hover{text-decoration:underline}
code,.mono,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
code{background:var(--code); padding:1px 5px; border-radius:4px; font-size:.9em}
pre.cle{background:var(--code); border:1px solid var(--bord); border-radius:9px;
  padding:13px; font-size:12.5px; overflow-x:auto; word-break:break-all; white-space:pre-wrap}
.etapes{padding-left:20px} .etapes li{margin:7px 0}
details{margin-top:26px; border-top:1px solid var(--bord); padding-top:16px}
summary{cursor:pointer; font-size:14.5px; font-weight:600}
details ul{font-size:14.5px; color:var(--doux)}
.stats{display:flex; flex-wrap:wrap; gap:22px; margin:18px 0 26px}
.stats div{display:flex; flex-direction:column}
.stats b{font-size:24px} .stats span{font-size:12.5px; color:var(--doux)}
.case{font-weight:400; font-size:13.5px; display:flex; gap:7px; align-items:center; margin:10px 0}
.tableau{overflow-x:auto; border:1px solid var(--bord); border-radius:10px}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:left; padding:8px 11px; border-bottom:1px solid var(--bord); white-space:nowrap}
th{background:var(--fond); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--doux)}
tr:last-child td{border-bottom:0}
td.detail{white-space:normal; color:var(--doux); max-width:340px}
footer{margin-top:22px; font-size:13px; color:var(--doux)}
footer a{color:var(--doux)}