/* ===== Style commun aux pages de contenu (cours/memo/exercice/tutoriel/quiz) ===== */
* { margin:0; padding:0; box-sizing:border-box}
body { font-family:"Inter",sans-serif; background:var(--sio-page); color:var(--sio-tx1); padding:32px 24px; line-height:1.7; min-height:100vh}
.container { max-width:1100px; margin:0 auto; background:#ffffff; border-radius:32px; padding:48px 44px; border:1px solid var(--sio-line); backdrop-filter:blur(8px);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
h1 { font-size:2.6rem; font-weight:900; margin-bottom:8px; letter-spacing:-1px}
h1 .highlight { background:linear-gradient(135deg,var(--sio-blue),var(--sio-violet)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.subtitle { color:var(--sio-tx3); font-size:1.1rem; margin-bottom:32px; border-bottom:1px solid var(--sio-line); padding-bottom:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.tag { display:inline-block; padding:2px 14px; border-radius:40px; font-size:0.7rem; font-weight:600}
.tag.yellow { background:#fef6e1; color:var(--sio-yellow);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.tag.blue { background:#e9f3fe; color:var(--sio-blue);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.tag.purple { background:#f3effe; color:var(--sio-violet);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.tag.green { background:#e3f9f1; color:var(--sio-green);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.tag.orange { background:#feecdf; color:var(--sio-orange);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

.content-box { background:#ffffff; border-radius:12px; padding:20px 24px; border:1px solid var(--sio-line); margin:16px 0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box h1 { font-size:2.2rem}
.content-box h2 { font-size:1.6rem; font-weight:700; margin-top:32px; margin-bottom:14px; border-bottom:1px solid var(--sio-line); padding-bottom:8px}
.content-box h3 { font-size:1.2rem; font-weight:600; margin-top:24px; margin-bottom:8px; color:var(--sio-tx2)}
.content-box p, .content-box li { color:var(--sio-tx3); margin-bottom:8px}
.content-box ul, .content-box ol { padding-left:24px; margin:8px 0 16px}
.content-box strong { color:var(--sio-tx1)}
.content-box table { width:100%; border-collapse:collapse; margin:16px 0 28px; border-radius:16px; overflow:hidden}
.content-box th { background:#f1f5f9; color:var(--sio-tx3); font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.8px; padding:14px 12px; text-align:left; border-bottom:2px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box td { padding:14px 12px; border-bottom:1px solid var(--sio-line); vertical-align:top; color:var(--sio-tx2)}
.content-box tr:last-child td { border-bottom:none}
.content-box tr:nth-child(odd) { background:#ffffff;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box code { font-family:'Courier New',monospace; color:var(--sio-blue); background:#f0f7ff; padding:2px 6px; border-radius:4px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box pre { background:#f1f5f9; padding:16px 20px; border-radius:12px; overflow-x:auto; font-size:0.85rem; color:var(--sio-tx2); font-family:'Courier New',monospace; margin:12px 0; position:relative; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* Bouton copier (dans les blocs de code) */
.copy-btn { position:absolute; top:8px; right:12px; background:#f1f5f9; border:1px solid var(--sio-line); color:var(--sio-tx3); padding:2px 12px; border-radius:4px; font-size:0.7rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:inherit;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.copy-btn:hover { background:#e2e8f0; color:var(--sio-tx1); border-color:var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.copy-btn.copied { background:#e3f9f1; color:var(--sio-green); border-color:rgba(52,211,153,0.2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* Bouton terminé */
.btn-termine { display:inline-block; padding:12px 32px; border-radius:40px; font-size:1rem; font-weight:700; color:#fff; background:linear-gradient(135deg,#059669,#047857); border:none; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; font-family:inherit; margin-top:24px; box-shadow:0 4px 20px rgba(52,211,153,0.25)}
.btn-termine:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(52,211,153,0.35)}
.btn-termine.termine { background:#f1f5f9; color:var(--sio-tx3); box-shadow:none; cursor:default;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.btn-termine.termine:hover { transform:none; box-shadow:none}

.back-link { display:inline-block; color:var(--sio-blue); text-decoration:none; font-weight:600; font-size:0.9rem; transition:all 0.3s}
.back-link:hover { text-decoration:underline; transform:translateX(-4px)}
.print-btn { display:inline-block; padding:8px 20px; border-radius:40px; font-size:0.8rem; font-weight:600; color:var(--sio-violet); background:#f7f4ff; border:1px solid rgba(167,139,250,0.15); cursor:pointer; transition:all 0.3s; font-family:inherit; margin-right:12px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.print-btn:hover { background:#f0ebfe; transform:translateY(-2px);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
hr { border:0; border-top:1px solid var(--sio-line); margin:32px 0}
.footer-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-top:24px}
.footer-meta { color:var(--sio-tx4); font-size:0.8rem}

@media (max-width:768px) { .container { padding:24px 16px} h1 { font-size:2rem} .btn-termine { width:100%; text-align:center} }
@media (max-width:480px) { .container { padding:16px} h1 { font-size:1.6rem} .content-box { padding:12px 14px} }
@media print { .btn-termine, .print-btn, .back-link, .copy-btn { display:none !important} }

/* ===== IMPRESSION / PDF (amélioré) ===== */
@media print {
    body { padding:0; background:#fff; color:#000}
    .container { padding:12px; border:none; background:#fff; border-radius:0; max-width:100%}
    h1 { font-size:1.6rem; margin-bottom:4px}
    .subtitle { margin-bottom:12px; padding-bottom:8px}
    .content-box { padding:0; border:none; background:#fff; margin:8px 0}
    .content-box h2 { font-size:1.2rem; margin-top:16px; margin-bottom:8px}
    .content-box h3 { font-size:1rem; margin-top:12px}
    .content-box p, .content-box li { color:#000; margin-bottom:4px}
    .content-box table { margin:8px 0 12px}
    .content-box th, .content-box td { padding:6px 8px; color:#000}
    .content-box pre { background:#f3f4f6; color:#000; border:1px solid #ddd}
    hr { margin:12px 0}
}

/* ===== Encadrés spéciaux (astuces, exercices) dans le contenu ===== */
.content-box .tip-box { margin:20px 0; padding:16px 24px; background:#f8fbff; border-radius:12px; border-left:4px solid #60a5fa; display:flex; align-items:flex-start; gap:12px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .tip-box .tip-icon { font-size:1.4rem; flex-shrink:0}
.content-box .tip-box .tip-content h4 { color:var(--sio-blue); font-size:0.95rem; margin-bottom:2px}
.content-box .tip-box .tip-content p { color:var(--sio-tx3); font-size:0.9rem; margin-bottom:0}
.content-box .exercise-box { background:#fbfaff; border-radius:12px; padding:16px 24px; border:1px solid rgba(167,139,250,0.08); margin:16px 0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .exercise-box h4 { color:var(--sio-violet); font-size:0.95rem; margin-bottom:4px}
.content-box .exercise-box p, .content-box .exercise-box li { color:var(--sio-tx3); font-size:0.9rem}

/* ===== Accordéon "Voir le corrigé" / "Explication" ===== */
.content-box .corrige-toggle { display:inline-block; padding:6px 18px; border-radius:40px; font-size:0.8rem; font-weight:600; color:var(--sio-violet); background:#f7f4ff; border:1px solid rgba(167,139,250,0.15); cursor:pointer; transition:all 0.3s; font-family:inherit; margin-top:8px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .corrige-toggle:hover { background:#f0ebfe; transform:translateY(-2px);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .corrige-content { display:none; margin-top:12px; padding:16px 20px; background:#f1fcf8; border-radius:12px; border-left:3px solid #34d399;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .corrige-content.visible { display:block}

/* ===== Quiz d'auto-évaluation intégré (dans le contenu des cours) ===== */
.content-box .quiz-question { background:#ffffff; border-radius:12px; padding:20px 24px; margin:20px 0; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .quiz-question p { font-size:1.05rem; font-weight:600; margin-bottom:14px; color:var(--sio-tx1)}
.content-box .quiz-question label { display:block; padding:10px 16px; margin:6px 0; border-radius:8px; background:#ffffff; border:1px solid var(--sio-line); transition:all 0.2s; cursor:pointer; font-size:0.95rem; color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .quiz-question label:hover { background:#f1f5f9; border-color:var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .quiz-question label input[type="radio"] { margin-right:12px; accent-color:#60a5fa; transform:scale(1.2); vertical-align:middle}
.content-box .quiz-feedback { margin-top:14px; padding:14px 20px; border-radius:8px; font-weight:600; display:none; font-size:0.95rem}
.content-box .quiz-feedback.correct { display:block; background:#e3f9f1; border:1px solid rgba(52,211,153,0.25); color:var(--sio-green);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .quiz-feedback.wrong { display:block; background:#fde5e5; border:1px solid rgba(239,68,68,0.25); color:#ef4444;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* ===== Correction : titre invisible à l'impression (dégradé non imprimable) ===== */
@media print {
    h1 .highlight, .content-box h1 .highlight { -webkit-text-fill-color:#1d4ed8 !important; color:#1d4ed8 !important; background:none !important}
}

/* ===== Minuteur sticky (quiz) ===== */
.timer-container { position:sticky; top:0; z-index:100; background:#ffffff; backdrop-filter:blur(8px); padding:8px 0 12px; margin-bottom:16px; border-bottom:1px solid var(--sio-line); display:flex; align-items:center; gap:12px; flex-wrap:wrap;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.timer-container .timer-label { color:var(--sio-tx3); font-weight:600; font-size:0.9rem}
.timer-container .timer-display { font-weight:700; font-size:1.2rem; color:var(--sio-yellow); background:#fef6e1; padding:2px 16px; border-radius:40px; font-variant-numeric:tabular-nums;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.timer-container .timer-display.warning { color:#ef4444; background:#fde5e5; animation:pulse-timer 1s ease-in-out infinite;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
@keyframes pulse-timer { 0%,100% { opacity:1} 50% { opacity:0.5} }
.timer-container .timer-total { color:var(--sio-tx4); font-size:0.8rem}
.btn-verifier { display:inline-block; padding:14px 36px; border-radius:40px; font-size:1.05rem; font-weight:700; color:#fff; background:linear-gradient(135deg,#2563eb,#7c3aed); border:none; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; font-family:inherit; margin-top:24px; box-shadow:0 4px 20px rgba(96,165,250,0.25)}
.btn-verifier:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(96,165,250,0.35)}
@media print { .timer-container { display:none !important} }

/* ===== Alias pour les exercices utilisant class="timer" au lieu de "timer-display" ===== */
.timer-container .timer { font-weight:700; font-size:1.2rem; color:var(--sio-yellow); background:#fef6e1; padding:2px 16px; border-radius:40px; font-variant-numeric:tabular-nums;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.timer-container .timer.warning, .timer-container .timer.danger { color:#ef4444; background:#fde5e5;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

/* ===== Champs de saisie génériques dans le contenu (exercices interactifs) ===== */
.content-box input[type="text"], .content-box input[type="number"], .content-box textarea {
    background:#ffffff; border:1px solid var(--sio-line); border-radius:8px;
    padding:9px 14px; color:var(--sio-tx1); font-family:inherit; font-size:0.9rem; outline:none; transition:border-color 0.2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box input[type="text"]:focus, .content-box input[type="number"]:focus, .content-box textarea:focus { border-color:#60a5fa}
.content-box input::placeholder, .content-box textarea::placeholder { color:var(--sio-tx4)}

/* ===== Bloc question + grille de saisie (ex. exercice Subnetting) ===== */
.content-box .question-box { background:#ffffff; border:1px solid var(--sio-line); border-radius:12px; padding:20px 24px; margin:16px 0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .question-box h3 { margin-bottom:10px; font-size:1rem}
.content-box .input-grid { display:flex; flex-direction:column; gap:12px; margin:16px 0}
.content-box .input-group { display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.content-box .input-group label { min-width:180px; font-weight:600; font-size:0.9rem; color:var(--sio-tx2)}
.content-box .input-group input { flex:1; min-width:160px}

/* ===== Règles + liste mots de passe (ex. exercice Politique mots de passe) ===== */
.content-box .rules-box { background:#ffffff; border:1px solid var(--sio-line); border-radius:12px; padding:16px 20px; margin:16px 0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .rules-box h3 { margin-bottom:10px; font-size:1rem}
.content-box #rulesList { display:flex; flex-wrap:wrap; gap:8px 20px}
.content-box .rule { font-size:0.85rem; color:var(--sio-tx2); white-space:nowrap}

.content-box #mdpList { display:flex; flex-direction:column; gap:12px; margin:16px 0}
.content-box .mdp-item { background:#ffffff; border:1px solid var(--sio-line); border-radius:12px; padding:14px 18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .mdp-text { font-family:'Courier New',monospace; font-size:1rem; font-weight:700; color:var(--sio-tx1); letter-spacing:0.5px}
.content-box .btn-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.content-box .btn-valid { padding:8px 18px; border-radius:40px; font-size:0.85rem; font-weight:600; border:1px solid var(--sio-line); background:#ffffff; color:var(--sio-tx3); cursor:pointer; font-family:inherit; transition:all 0.2s;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .btn-valid:hover:not(:disabled) { background:#f1f5f9; color:var(--sio-tx1);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .btn-valid.true.active { background:#dcf7ed; border-color:rgba(52,211,153,0.4); color:var(--sio-green);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .btn-valid.false.active { background:#fcdfdf; border-color:rgba(239,68,68,0.4); color:#ef4444;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .btn-valid:disabled { opacity:0.6; cursor:default}

.content-box .status { font-size:0.8rem; font-weight:600; padding:4px 12px; border-radius:40px; white-space:nowrap}
.content-box .status.waiting { background:#f1f5f9; color:var(--sio-tx3);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .status.correct { background:#e3f9f1; color:var(--sio-green);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .status.incorrect { background:#fde5e5; color:#ef4444;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

.content-box .feedback { margin-top:16px; padding:16px 20px; border-radius:12px; font-size:0.95rem; display:none}
.content-box .feedback.correct { display:block; background:#e8faf3; border:1px solid rgba(52,211,153,0.25); color:var(--sio-green);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .feedback.incorrect { display:block; background:#fff9eb; border:1px solid rgba(251,191,36,0.25); color:var(--sio-yellow);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .feedback .detail { margin-top:10px; font-size:0.85rem; color:var(--sio-tx2); display:flex; flex-direction:column; gap:4px}

/* ===== Fiches migrées (tutos-info) ===== */
.content-box .fiche-table { width:100%; border-collapse:collapse; margin:16px 0; font-size:0.9rem}
.content-box .fiche-table th { background:#f1f5f9; color:var(--sio-tx1); text-align:left; padding:10px 14px; border-bottom:2px solid var(--sio-line); font-weight:700;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .fiche-table td { padding:10px 14px; border-bottom:1px solid var(--sio-line); color:var(--sio-tx2)}
.content-box .fiche-table tr:hover td { background:#ffffff;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}

.content-box .fiche-quiz-inline { margin:20px 0}
.content-box .fiche-quiz-item { background:#ffffff; border:1px solid var(--sio-line); border-radius:10px; padding:14px 18px; margin-bottom:10px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .fiche-quiz-item summary { cursor:pointer; font-weight:600; color:var(--sio-tx1)}
.content-box .fiche-quiz-options { list-style:none; margin:10px 0 0 0; padding:0}
.content-box .fiche-quiz-options li { padding:6px 12px; margin:4px 0; border-radius:6px; background:#ffffff; color:var(--sio-tx3); font-size:0.9rem;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .fiche-quiz-options li.fiche-quiz-correct { background:#e3f9f1; color:var(--sio-green); font-weight:600;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .fiche-quiz-reponse { margin-top:8px; color:var(--sio-green); font-size:0.85rem; font-weight:600}

.content-box .fiche-liens { list-style:none; padding:0; margin:16px 0}
.content-box .fiche-liens li { padding:8px 0; border-bottom:1px solid var(--sio-line); font-size:0.9rem; color:var(--sio-tx2)}
.content-box .fiche-liens a { color:var(--sio-blue); text-decoration:none; font-weight:600}
.content-box .fiche-liens a:hover { text-decoration:underline}

/* ===== Questions de type "commande" (saisie libre) dans les quiz ===== */
.content-box #quiz .question .commande-input {
    width:100%; max-width:500px; margin-top:8px}
.content-box #quiz .question .commande-input.commande-correct { border-color:rgba(52,211,153,0.5); background:#ecfbf6; color:var(--sio-green-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box #quiz .question .commande-input.commande-incorrect { border-color:rgba(239,68,68,0.5); background:#feeeee; color:var(--sio-red-l);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box #quiz .question .commande-hint { color:var(--sio-tx3); font-size:0.8rem; margin-top:6px}
.content-box #quiz .question .commande-feedback { margin-top:8px; font-size:0.85rem; font-weight:600}

/* ===== Fiches migrees (tutos-info) - suite ===== */
.content-box .danger-box { background:#feeeee; border-left:4px solid #ef4444; border-radius:10px; padding:16px 20px; margin:16px 0; color:var(--sio-red-l); font-weight:600;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .fiche-checklist { list-style:none; padding:0; margin:16px 0}
.content-box .fiche-checklist li { padding:8px 0; border-bottom:1px solid var(--sio-line); color:var(--sio-tx2); font-size:0.9rem}
.content-box .fiche-liste { margin:16px 0; padding-left:22px; color:var(--sio-tx2)}
.content-box .fiche-liste li { padding:4px 0; font-size:0.9rem}

.content-box .fiche-entete { background:#ffffff; border:1px solid var(--sio-line); border-radius:14px; padding:20px 24px; margin-bottom:20px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .fiche-description { color:var(--sio-tx2); font-size:1rem; margin-bottom:14px}
.content-box .fiche-meta-badges { display:flex; flex-wrap:wrap; gap:8px}
.content-box .fiche-etapes { background:#f8fbff; border-left:4px solid #60a5fa; border-radius:10px; padding:18px 22px; margin:16px 0 24px 0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .fiche-etapes h3 { margin-top:0; margin-bottom:10px}
.content-box .fiche-etapes ol { padding-left:22px; color:var(--sio-tx2)}
.content-box .fiche-etapes li { padding:4px 0; font-size:0.9rem}

/* ===== Habillage des tutoriels ===== */
.content-box .tuto-badge { display:inline-block; padding:4px 16px; border-radius:40px; font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; background:#e9f3fe; color:var(--sio-blue); margin-bottom:12px;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .tuto-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0 24px; padding-bottom:16px; border-bottom:1px solid var(--sio-line); color:var(--sio-tx3); font-size:0.85rem}
.content-box .tuto-meta .tag { background:#f3effe; color:var(--sio-violet); padding:2px 14px; border-radius:40px; font-size:0.75rem; font-weight:600;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

.content-box .step-box { background:#ffffff; border-radius:14px; padding:20px 24px; margin:20px 0; border:1px solid var(--sio-line); border-left:3px solid #60a5fa;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .step-title { font-size:1.1rem; font-weight:700; color:var(--sio-tx1); margin-bottom:10px; display:flex; align-items:center; gap:8px}
.content-box .step-num { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#60a5fa; color:#0b1120; font-weight:800; font-size:0.85rem; flex-shrink:0}
.content-box .step-desc { color:var(--sio-tx3); font-size:0.9rem; margin-bottom:8px}
.content-box .step-result { background:#f1fcf8; border-left:3px solid #34d399; padding:10px 16px; border-radius:8px; margin-top:10px; color:var(--sio-tx2); font-size:0.9rem;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}

.content-box .cmd-block { background:#eef2f7; border-radius:10px; padding:14px 18px; margin:12px 0; font-family:'Courier New',monospace; font-size:0.85rem; line-height:1.8; overflow-x:auto; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .cmd-block .comment { color:var(--sio-tx4)}
.content-box .cmd-block .prompt { color:var(--sio-green); font-weight:700}
.content-box .cmd-block .prompt-win { color:var(--sio-blue); font-weight:700}

.content-box .note-box { background:#f6faff; border-left:4px solid #60a5fa; border-radius:10px; padding:16px 20px; margin:16px 0; color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .warning-box { background:#fffbf0; border-left:4px solid #fbbf24; border-radius:10px; padding:16px 20px; margin:16px 0; color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .success-box { background:#f1fcf8; border-left:4px solid #34d399; border-radius:10px; padding:16px 20px; margin:16px 0; color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .def-box { background:#faf8ff; border-left:4px solid #a78bfa; border-radius:10px; padding:16px 20px; margin:16px 0; color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .section-desc { color:var(--sio-tx3); font-size:0.95rem; margin-bottom:16px}

/* Neutraliser le <div class="container"> imbriqué dans le contenu (déjà dans notre propre .container) */
.content-box .container { max-width:none; margin:0; background:none; border-radius:0; padding:0; border:none; backdrop-filter:none}

/* ===== Correctifs espacement tutoriels ===== */
.content-box .step-title { margin-top:0; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--sio-line)}
.content-box .step-box + .step-box { margin-top:24px}
.content-box .step-desc { margin-bottom:10px; line-height:1.6}
.content-box .step-result { margin-top:12px}

.content-box h1 { font-size:1.9rem; line-height:1.3; margin-bottom:14px}
.content-box .tuto-badge { margin-bottom:10px}
.content-box .tuto-meta { row-gap:8px}

.content-box .cmd-block { position:relative; padding-right:90px}

/* ===== Questions du quiz autonome (quiz.php) ===== */
.content-box #quiz .question { background:#ffffff; border-radius:12px; padding:20px 24px; margin:20px 0; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box #quiz .question h3 { font-size:1.05rem; font-weight:700; color:var(--sio-tx1); margin-bottom:6px}
.content-box #quiz .question > p { font-size:0.95rem; color:var(--sio-tx3); margin-bottom:14px}
.content-box #quiz .options { display:flex; flex-direction:column; gap:8px}
.content-box #quiz .options label { display:block; padding:10px 16px; border-radius:8px; background:#ffffff; border:1px solid var(--sio-line); cursor:pointer; transition:all 0.2s; font-size:0.95rem; color:var(--sio-tx2);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box #quiz .options label:hover { background:#f1f5f9; border-color:var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box #quiz .options label input[type="radio"] { margin-right:10px; accent-color:#60a5fa; transform:scale(1.15); vertical-align:middle}
.content-box #quiz .options label.correct-answer { background:#dcf7ed; border-color:rgba(52,211,153,0.4); color:var(--sio-green-l); font-weight:600;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box #quiz .options label.wrong-answer { background:#fcdfdf; border-color:rgba(239,68,68,0.4); color:var(--sio-red-l); font-weight:600;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .btn-result { display:inline-block; padding:14px 36px; border-radius:40px; font-size:1.05rem; font-weight:700; color:#fff; background:linear-gradient(135deg,#2563eb,#7c3aed); border:none; cursor:pointer; transition:transform 0.2s, box-shadow 0.2s; font-family:inherit; margin-top:12px; box-shadow:0 4px 20px rgba(96,165,250,0.25)}
.content-box .btn-result:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 30px rgba(96,165,250,0.35)}
.content-box .btn-result:disabled { opacity:0.6; cursor:default}

/* ===== Boutons génériques dans le contenu (exercices interactifs) ===== */
.content-box .btn { display:inline-block; padding:10px 24px; border-radius:40px; font-size:0.9rem; font-weight:700; border:none; cursor:pointer; font-family:inherit; transition:transform 0.2s, box-shadow 0.2s; margin-right:8px}
.content-box .btn-success { color:#fff; background:linear-gradient(135deg,#059669,#047857); box-shadow:0 4px 16px rgba(52,211,153,0.2)}
.content-box .btn-success:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 6px 24px rgba(52,211,153,0.3)}
.content-box .btn-secondary { color:var(--sio-tx1); background:#f1f5f9; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.content-box .btn-secondary:hover { background:#e2e8f0; transform:translateY(-2px);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.content-box .btn:disabled { opacity:0.5; cursor:default; transform:none !important; box-shadow:none !important}

/* ===== Mise en page sidebar + contenu (pages admin) ===== */
.sidebar { width:265px; min-height:100vh; background:#ffffff; border-right:1px solid var(--sio-line); padding:24px 16px; position:sticky; top:0; height:100vh; overflow-y:auto; flex-shrink:0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.sidebar .logo { font-size:1.1rem; font-weight:800; padding:0 8px 16px 8px; border-bottom:1px solid var(--sio-line); margin-bottom:16px; display:flex; align-items:center; gap:8px}
.sidebar .user-card { background:#ffffff; border-radius:10px; padding:12px 14px; margin-bottom:16px; border:1px solid var(--sio-line);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.sidebar .user-card .name { font-weight:600; font-size:0.9rem}
.sidebar .user-card .role { font-size:0.65rem; color:var(--sio-tx3); text-transform:uppercase}
.sidebar .nav { display:flex; flex-direction:column; gap:3px}
.sidebar .nav a { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:8px; color:var(--sio-tx3); text-decoration:none; font-size:0.82rem; font-weight:500; position:relative}
.sidebar .nav a:hover { background:#ffffff; color:var(--sio-tx1);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.sidebar .nav a.active { background:#f0f7ff; color:var(--sio-blue);--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.sidebar .nav a .badge { margin-left:auto; background:#ef4444; color:#fff; font-size:0.55rem; font-weight:700; padding:1px 7px; border-radius:40px}
.sidebar .divider { height:1px; background:#f1f5f9; margin:10px 0;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.sidebar .logout-btn { margin-top:12px; padding:8px 12px; border-radius:8px; color:#ef4444; background:#fef2f2; border:none; width:100%; font-family:inherit; font-size:0.82rem; cursor:pointer;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);}
.admin-page-wrapper { display:flex; min-height:100vh}
.admin-page-main { flex:1; padding:24px 32px; min-width:0}

/* ===== Correctif : wrapper sidebar+contenu indépendant du style de la page (pages admin sans sidebar d'origine) ===== */
.admin-page-wrapper { position:fixed; inset:0; display:flex; background:#ffffff; z-index:1;--sio-tx1:var(--sio-ink-tx1);--sio-tx2:var(--sio-ink-tx2);--sio-tx3:var(--sio-ink-tx3);--sio-tx4:var(--sio-ink-tx4);--sio-line:var(--sio-ink-line);--sio-blue:var(--sio-ink-blue);--sio-blue-l:var(--sio-ink-blue-l);--sio-cyan:var(--sio-ink-cyan);--sio-green:var(--sio-ink-green);--sio-green-l:var(--sio-ink-green-l);--sio-indigo:var(--sio-ink-indigo);--sio-orange:var(--sio-ink-orange);--sio-orange-l:var(--sio-ink-orange-l);--sio-pink:var(--sio-ink-pink);--sio-red:var(--sio-ink-red);--sio-red-l:var(--sio-ink-red-l);--sio-teal:var(--sio-ink-teal);--sio-violet:var(--sio-ink-violet);--sio-yellow:var(--sio-ink-yellow);--sio-yellow-l:var(--sio-ink-yellow-l);color:var(--sio-tx1);}
.admin-page-main { flex:1; height:100vh; overflow-y:auto; padding:24px 32px}