:root { --bleu:#1f4e8c; --bleu-clair:#e8f0fb; --gris:#5b6470; --ok:#1f8a4c; --ko:#c0392b; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:#f5f7fa; color:#1d2530; line-height:1.5; }
.haut { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; background:var(--bleu); color:#fff; padding:8px 16px; }
.haut a { color:#fff; text-decoration:none; }
.marque { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; }
.logo { height:46px; width:46px; }
.haut nav { display:flex; flex-wrap:wrap; gap:14px; font-size:.95rem; }
.haut nav a:hover { text-decoration:underline; }
.pastille { background:#ffb020; color:#222; border-radius:10px; padding:0 7px; font-size:.8rem; font-weight:700; }
.page { max-width:980px; margin:0 auto; padding:16px; }
h1 { color:var(--bleu); font-size:1.5rem; margin:.4em 0 .8em; }
h2 { color:var(--bleu); font-size:1.15rem; margin:1.4em 0 .5em; }
.carte { background:#fff; border:1px solid #dde3ea; border-radius:10px; padding:14px 16px; margin:10px 0; }
.formulaire label, .carte label.bloc { display:block; margin:10px 0; font-weight:600; }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { width:100%; padding:8px; border:1px solid #b9c2cd; border-radius:6px; font:inherit; background:#fff; }
textarea { min-height:110px; }
.btn { display:inline-block; background:var(--bleu); color:#fff; border:0; border-radius:6px; padding:9px 16px; font:inherit; cursor:pointer; text-decoration:none; }
.btn:hover { filter:brightness(1.12); }
.btn.sec { background:#6b7684; }
.btn.danger { background:var(--ko); }
.alerte { background:#fdecea; border:1px solid #f5b7b1; padding:10px 14px; border-radius:8px; }
.info { background:var(--bleu-clair); border:1px solid #bcd0ec; padding:10px 14px; border-radius:8px; }
.aide-txt { color:var(--gris); font-size:.9rem; margin:.3em 0; }
.cascade { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; align-items:end; }
.cascade label { font-weight:600; font-size:.9rem; }
.badge { display:inline-block; padding:1px 9px; border-radius:10px; font-size:.78rem; font-weight:700; color:#fff; background:#6b7684; }
.b-rappel { background:#1f4e8c; } .b-exemple { background:#7b4bb3; } .b-exercice { background:#d9822b; } .b-qcm { background:#1f8a4c; }
.s-nouvelle { background:#d9822b; } .s-repondue { background:#1f8a4c; } .s-cloturee { background:#6b7684; }
.diff { color:#d9a400; }
.res-tete { margin-bottom:6px; }
.corrige { margin-top:10px; background:#f7f9fc; border-radius:6px; padding:6px 10px; }
.corrige summary { cursor:pointer; font-weight:600; color:var(--bleu); }
.qcm label.choix { display:block; padding:6px 10px; margin:4px 0; border:1px solid #dde3ea; border-radius:6px; cursor:pointer; }
.qcm label.choix.bonne { background:#e6f5ec; border-color:var(--ok); }
.qcm-res { margin-top:8px; font-weight:700; }
.qcm-res.ok { color:var(--ok); } .qcm-res.ko { color:var(--ko); }
table { width:100%; border-collapse:collapse; background:#fff; }
th, td { border:1px solid #dde3ea; padding:7px 9px; text-align:left; vertical-align:top; }
th { background:var(--bleu-clair); }
.apercu { border:1px dashed #9aa7b8; border-radius:8px; padding:10px 14px; margin-top:8px; min-height:40px; background:#fff; }
.question { background:#fff8e6; border-left:4px solid #d9822b; padding:8px 12px; border-radius:4px; margin:8px 0; }
.reponse { background:#eef7f1; border-left:4px solid var(--ok); padding:8px 12px; border-radius:4px; margin:8px 0; }
.nouveau { color:#d9822b; font-weight:700; }
.ligne-el { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px; }
.bas { text-align:center; color:var(--gris); font-size:.85rem; padding:20px; }
@media (max-width:600px) { .page { padding:10px; } .haut nav { gap:10px; } }

.res-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; padding-top:8px; border-top:1px dashed #dde3ea; }
.barre-prof { background:#fff8e6; border-color:#f0d9a0; }
.barre-prof a { margin:2px 4px 2px 0; }
.brouillon { background:#b58900; }