/* ==========================================================================
   Portail SIO — pages de ressource v2 (mémo, cours, fiche, exercice, tutoriel)
   Chargée APRÈS /css/ressource.css : les styles du contenu sont conservés,
   cette feuille ajoute la mise en page moderne et améliore la lisibilité.
   ========================================================================== */
body.rp { padding:0; margin:0; min-height:100vh; line-height:1.7; font-family:"Inter", sans-serif; color:var(--sio-tx1);
    background:radial-gradient(1100px 420px at 10% -10%, color-mix(in srgb, var(--tc) 10%, transparent), transparent 60%), var(--sio-page)}
.rp a { color:var(--sio-blue)}

/* ---------- Barre de progression de lecture ---------- */
.rp-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none}
.rp-progress i { display:block; height:100%; width:0; background:linear-gradient(90deg, var(--tc), #a78bfa); box-shadow:0 0 10px var(--tc); transition:width .1s linear}

/* ---------- Barre du haut ---------- */
.rp-top { position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:16px; height:60px; padding:0 24px;
    background:#ffffff; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom: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);}
.rp-logo { display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0}
.rp-logo-ico { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; color:#fff; font-size:1.05rem;
    background:linear-gradient(135deg,#2563eb,#7c3aed); box-shadow:0 4px 14px rgba(96,165,250,0.35)}
.rp-logo-txt { font-size:1.05rem; font-weight:800; color:var(--sio-tx1); letter-spacing:-0.01em}
.rp-logo-txt b { background:linear-gradient(135deg,var(--sio-blue),var(--sio-violet)); -webkit-background-clip:text; -webkit-text-fill-color:transparent}
.rp-top-mid { flex:1; min-width:0; display:flex; align-items:center; gap:10px}
.rp-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; font-size:0.75rem; font-weight:700; white-space:nowrap;
    color:var(--tc); background:color-mix(in srgb, var(--tc) 14%, #ffffff); border:1px solid color-mix(in srgb, var(--tc) 30%, transparent);--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);}
.rp-top-t { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700; font-size:0.9rem; color:var(--sio-tx1);
    opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s}
body.rp-scrolled .rp-top-t { opacity:1; transform:none}
.rp-top-act { display:flex; align-items:center; gap:8px; flex-shrink:0}
.rp-tbtn { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px; font:600 0.82rem "Inter", sans-serif; white-space:nowrap;
    color:var(--sio-tx1) !important; background:#f1f5f9; border:1px solid var(--sio-line); cursor:pointer; text-decoration:none;
    transition:background .15s, border-color .15s, transform .15s;--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);}
.rp-tbtn:hover { background:#e2e8f0; border-color:var(--sio-line); transform:translateY(-1px);--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);}
.rp-tbtn i.ti { font-size:1.05rem}
.rp-tbtn.ok { color:var(--sio-green-l) !important; background:#e8faf3; border-color:rgba(52,211,153,0.35);--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);}

/* ---------- Mise en page ---------- */
.rp-wrap { max-width:1280px; margin:0 auto; padding:28px 28px 40px}
body.rp-notoc .rp-wrap { max-width:1100px}
.rp-layout { display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:28px; align-items:start}
.rp-layout > .rp-toc { order:2}
body.rp-notoc .rp-layout { grid-template-columns:minmax(0, 1fr)}

/* ---------- Bandeau d'en-tête ---------- */
.rp-hero { position:relative; overflow:hidden; border-radius:22px; padding:28px 30px; margin-bottom:22px;
    background:radial-gradient(900px 280px at 0% 0%, color-mix(in srgb, var(--tc) 18%, #ffffff), transparent 60%),
               radial-gradient(700px 240px at 100% 0%, #f3effe, transparent 60%), #ffffff;
    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);}
.rp-hero-chip { display:inline-flex; align-items:center; gap:7px; font-size:0.78rem; font-weight:800; letter-spacing:0.05em; text-transform:uppercase; color:var(--tc)}
.rp-hero-chip span { color:var(--sio-tx3); font-weight:600; letter-spacing:0.02em}
.rp-hero-chip i.ti { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:1rem; background:color-mix(in srgb, var(--tc) 16%, #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);}
.rp h1.rp-title { font-size:2.15rem; font-weight:850; letter-spacing:-0.025em; line-height:1.2; margin:12px 0 0; color:var(--sio-tx1)}
.rp-sub { color:var(--sio-tx3); font-size:1.02rem; line-height:1.6; margin-top:10px; max-width:860px}
.rp-sub strong { color:var(--sio-tx1)}
.rp-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.rp-pills:empty { display:none}
.rp-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:0.76rem; font-weight:600; line-height:1.5;
    background:#f1f5f9; border:1px solid var(--sio-line); 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);}
.rp-pill.ok { color:var(--sio-green-l); background:#e8faf3; border-color:rgba(52,211,153,0.35);--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);}
.rp-pills .tag { padding:4px 12px; font-size:0.76rem; line-height:1.5; border:1px solid var(--sio-line)}
.rp-pills .tag:not(.yellow):not(.blue):not(.purple):not(.green):not(.orange) { 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);}

/* ---------- Sommaire ---------- */
.rp-toc { position:sticky; top:84px; max-height:calc(100vh - 110px); overflow-y:auto; padding:14px; border-radius:16px;
    background:#ffffff; 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);}
.rp-toc-t { display:flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:800; letter-spacing:0.07em; text-transform:uppercase; color:var(--sio-tx3); padding:2px 8px 8px}
.rp-toc nav, .rp-toc-m nav { display:flex; flex-direction:column; gap:2px}
.rp-toc a, .rp-toc-m a { display:block; padding:6px 10px; border-radius:8px; color:var(--sio-tx3) !important; font-size:0.82rem; line-height:1.4; text-decoration:none;
    border-left:2px solid transparent; transition:background .15s, color .15s}
.rp-toc a:hover, .rp-toc-m a:hover { background:#f1f5f9; color:var(--sio-tx1) !important;--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);}
.rp-toc a.on, .rp-toc-m a.on { color:var(--sio-tx1) !important; font-weight:600; border-left-color:var(--tc); background:color-mix(in srgb, var(--tc) 12%, #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);}
.rp-toc::-webkit-scrollbar { width:6px} .rp-toc::-webkit-scrollbar-thumb { background:#f1f5f9; border-radius:3px;--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);}
.rp-toc-m { margin-bottom:16px; border-radius:14px; background:#ffffff; 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);}
.rp-toc-m summary { cursor:pointer; padding:12px 16px; font-weight:700; font-size:0.88rem; color:var(--sio-tx1); list-style:none; display:flex; align-items:center; gap:8px}
.rp-toc-m summary::-webkit-details-marker { display:none}
.rp-toc-m summary::after { content:"▾"; margin-left:auto; color:var(--sio-tx4); transition:transform .2s}
.rp-toc-m[open] summary::after { transform:rotate(180deg)}
.rp-toc-m nav { padding:0 10px 12px}
@media (min-width:1200px) { .rp-toc-m { display:none !important} }
@media (max-width:1199px) { .rp-layout { grid-template-columns:minmax(0, 1fr)} .rp-toc { display:none !important} }

/* ---------- Zone de lecture (contenu saisi dans l'admin) ---------- */
.rp .content-box { margin:0; padding:34px 40px; border-radius:20px; background:#ffffff; border:1px solid var(--sio-line); font-size:1rem;--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);}
.rp .content-box > .container > :first-child, .rp .content-box > :first-child { margin-top:0}
.rp .content-box p, .rp .content-box li { color:var(--sio-tx2); line-height:1.75}
.rp .content-box strong { color:var(--sio-tx1)}
.rp .content-box h2 { font-size:1.42rem; font-weight:800; letter-spacing:-0.01em; color:var(--sio-tx1); margin:42px 0 16px; padding-bottom:10px; scroll-margin-top:84px;
    border-bottom:1px solid var(--sio-line);
    background:linear-gradient(var(--tc), var(--tc)) left bottom / 56px 2px no-repeat}
.rp .content-box h3 { color:var(--sio-tx1); scroll-margin-top:84px}
.rp .content-box h4 { color:var(--sio-tx1)}
.rp .content-box code { font-family:ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace; font-size:0.88em; color:var(--sio-blue-l); background:#edf5fe;--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);}
.rp .content-box pre { font-family:ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace; font-size:0.86rem; line-height:1.6; color:#e2e8f0;
    background:#0a0f1c; border:1px solid rgba(255,255,255,0.08); padding:18px 20px; border-radius:12px; }
.rp .content-box pre code { background:none; padding:0; color:inherit; font-size:inherit}
.rp .content-box .cmd-block { font-family:ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace; 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);}
.rp .content-box img { max-width:100%; height:auto; border-radius:10px}
.rp .content-box hr { margin:28px 0}
.rp-tw { overflow-x:auto; margin:16px 0 28px; border-radius:14px; border:1px solid var(--sio-line)}
.rp .rp-tw table { margin:0; border-radius:0}
.rp .rp-tw table th { white-space:nowrap}
.rp .content-box .timer-container { top:60px}
.rp .content-box div:first-child > :is(h2, h3, h4):first-child { margin-top:0}
.rp .content-box .question-box .options { display:flex; flex-direction:column; gap:8px; margin:12px 0 4px}
.rp .content-box .question-box .options label { display:block; padding:10px 16px; border-radius:10px; cursor:pointer; color:var(--sio-tx2);
    background:#ffffff; border:1px solid var(--sio-line); transition:background .15s, border-color .15s;--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);}
.rp .content-box .question-box .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);}
.rp .content-box .question-box .options label:has(input:checked) { border-color:color-mix(in srgb, var(--tc) 55%, transparent); background:color-mix(in srgb, var(--tc) 10%, #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);}
.rp .content-box .question-box .options input[type=radio] { margin-right:10px; accent-color:var(--tc); transform:scale(1.15); vertical-align:middle}
.rp-vide { display:flex; align-items:center; gap:10px; color:var(--sio-tx3); padding:10px 0}

/* ---------- Carte de fin ---------- */
.rp-fin { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; padding:20px 22px; border-radius:18px; scroll-margin-top:84px;
    background:linear-gradient(135deg, #e8faf3, #ffffff); border:1px solid rgba(52,211,153,0.25);--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);}
.rp-fin-ico { width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.35rem; color:var(--sio-green); background:#dcf7ed; 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);}
.rp-fin-txt { flex:1; min-width:220px}
.rp-fin-txt b { display:block; color:var(--sio-tx1); font-size:1rem}
.rp-fin-txt small { display:block; color:var(--sio-tx3); font-size:0.85rem; line-height:1.5; margin-top:2px}
.rp-fin .btn-termine { margin:0}
.rp-foot { text-align:center; color:var(--sio-tx4); font-size:0.8rem; margin-top:30px}
.rp-foot a { color:var(--sio-tx3); text-decoration:none}
.rp-foot a:hover { color:var(--sio-tx1)}

/* ---------- Quiz : écran de démarrage, chrono ---------- */
body.rp-quiz-attente #rpContenu, body.rp-quiz-attente #timerContainer { display:none}
.rp-start { text-align:center; padding:42px 24px; border-radius:20px; margin-bottom:22px;
    background:radial-gradient(600px 220px at 50% 0%, color-mix(in srgb, var(--tc) 14%, #ffffff), transparent 70%), #ffffff;
    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);}
body:not(.rp-quiz-attente) .rp-start { display:none}
.rp-start-ico { width:64px; height:64px; margin:0 auto 14px; border-radius:18px; display:grid; place-items:center; font-size:1.9rem; color:var(--tc);
    background:color-mix(in srgb, var(--tc) 16%, #ffffff); border:1px solid color-mix(in srgb, var(--tc) 30%, transparent);--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);}
.rp-start h2 { font-size:1.35rem; font-weight:800; color:var(--sio-tx1); margin:0 0 6px}
.rp-start p { color:var(--sio-tx3); margin:0 auto; max-width:560px}
.rp-start-infos { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:20px 0 24px}
.rp-start-infos span { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:12px; font-size:0.85rem; font-weight:600; color:var(--sio-tx1);
    background:#ffffff; 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);}
.rp-start-infos i.ti { color:var(--tc); font-size:1.05rem}
.rp-start-go { display:inline-flex; align-items:center; gap:9px; padding:14px 34px; border-radius:999px; border:none; cursor:pointer; font:700 1rem "Inter", sans-serif; color:#fff;
    background:linear-gradient(135deg, var(--tc), #8b5cf6); box-shadow:0 8px 26px color-mix(in srgb, var(--tc) 35%, transparent); transition:transform .15s, box-shadow .2s}
.rp-start-go:hover { transform:translateY(-2px); box-shadow:0 12px 32px color-mix(in srgb, var(--tc) 45%, transparent)}
.rp-start-note { margin-top:18px; font-size:0.85rem; color:var(--sio-yellow-l)}
.rp-start-note a { color:var(--sio-yellow-l); font-weight:700}
.rp .timer-container { top:60px; border-radius:14px; padding:10px 16px; margin-bottom:16px; border:1px solid var(--sio-line)}
.rp-pill.score { color:var(--sio-pink); background:#feeff7; border-color:rgba(244,114,182,0.35);--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);}

/* ---------- Petits écrans ---------- */
@media (max-width:760px) {
    .rp-top { padding:0 12px; gap:8px; height:56px}
    .rp-logo-txt, .rp-tbtn span { display:none}
    .rp-tbtn { padding:8px 10px}
    .rp-wrap { padding:16px 12px 30px}
    .rp-hero { padding:20px 18px; border-radius:18px}
    .rp h1.rp-title { font-size:1.6rem}
    .rp .content-box { padding:20px 16px; border-radius:16px}
    .rp .content-box h2 { font-size:1.22rem; margin-top:32px}
    .rp-fin .btn-termine { width:100%}
    .rp .content-box .timer-container, .rp .timer-container { top:56px}
    .rp-start { padding:30px 16px}
}

/* ---------- Impression / PDF ---------- */
@media print {
    body.rp { background:#fff !important; color:#000}
    .rp-progress, .rp-top, .rp-toc, .rp-toc-m, .rp-fin, .copy-btn { display:none !important}
    .rp-wrap { max-width:none; padding:0}
    .rp-layout { display:block}
    .rp-hero { background:none !important; border:none; border-bottom:2px solid #1d4ed8; border-radius:0; padding:0 0 10px; margin-bottom:14px}
    .rp h1.rp-title { color:#1d4ed8; font-size:1.6rem}
    .rp h1.rp-title .highlight { -webkit-text-fill-color:#1d4ed8 !important; color:#1d4ed8 !important; background:none !important}
    .rp-sub, .rp-hero-chip span { color:#333}
    .rp-pill, .rp-pills .tag { border:1px solid #bbb; color:#333 !important; background:none !important}
    .rp .content-box { background:#fff; border:none; padding:0}
    .rp .content-box p, .rp .content-box li, .rp .content-box td { color:#000}
    .rp .content-box h2, .rp .content-box h3, .rp .content-box h4, .rp .content-box strong { color:#000}
    .rp .content-box h2 { background:none; border-bottom:1px solid #999; break-after:avoid}
    .rp .content-box pre, .rp .content-box .cmd-block { background:#f3f4f6 !important; color:#000; border:1px solid #ddd; white-space:pre-wrap}
    .rp .content-box code { color:#1d4ed8; background:#eef2ff}
    .rp-tw { border:1px solid #ccc; overflow:visible}
    .rp-foot { color:#555}
}