/* ============================================================
   abrt — Portfolio · Révision U22 (Algorithmique appliquée)
   Scopé .rev — tokens console.css (--surface,--surface-2,--border,
   --text,--text-muted,--text-faint,--accent,--radius). Zéro dépendance.
   ============================================================ */

/* ---- bloc pf-subpage repris de competences.html ---- */
@media (max-width:880px){
    body.console.pf-subpage{ background:var(--bg) !important; color:var(--text) !important; }
    body.console.pf-subpage > .shell{ display:block !important; }
    body.console.pf-subpage > .mobile-app{ display:none !important; }
    body.console.pf-subpage .side{ display:none !important; }
    body.console.pf-subpage .main{ width:100% !important; min-height:auto; }
    body.console.pf-subpage .bar{ position:sticky; top:0; z-index:20; }
}

/* ================= Layout général ================= */
/* min-width:0 : sans lui, la ToC nowrap gonfle le flex-item .main → débordement horizontal mobile */
body.console.pf-subpage .main{ min-width:0; }
/* width:100% obligatoire : .rev est le flex-item .body ; avec margin auto seul,
   Chrome le dimensionne en max-content (→ 920px de large sur mobile) */
.rev{ width:100%; max-width:920px; margin:0 auto; min-width:0; }
.rev .rev-toc{ max-width:100%; }

.rev .rev-intro{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px 22px; margin-bottom:16px; }
.rev .rev-intro p{ color:var(--text-muted); font-size:14px; line-height:1.65; margin:0 0 12px; }
.rev .rev-intro .chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rev .rev-intro .chips span{ background:var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:12.5px; color:var(--text-muted); }

/* ================= Sommaire sticky ================= */
.rev .rev-toc{
    position:sticky; top:0; z-index:15;
    display:flex; gap:8px; overflow-x:auto; white-space:nowrap;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:10px 12px; margin-bottom:18px;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.rev .rev-toc a{
    flex:0 0 auto; display:inline-block;
    background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
    padding:6px 13px; font-size:12.5px; color:var(--text-muted); text-decoration:none;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.rev .rev-toc a:hover{ color:var(--text); border-color:var(--accent); }
.rev .rev-toc a.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.rev .rev-toc a[hidden]{ display:none; }

@media (max-width:880px){
    .rev .rev-toc{ top:56px; }
}

/* ================= Sections ================= */
.rev .rev-sections{ display:flex; flex-direction:column; gap:20px; }

.rev .rev-sec{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    padding:22px 24px; scroll-margin-top:88px;
}
.rev .rev-sec h2{
    display:flex; align-items:center; gap:10px;
    font-size:17px; font-weight:700; margin:0 0 14px; color:var(--text);
}
.rev .rev-sec .secnum{
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    background:var(--accent); color:#fff; font-size:13px; font-weight:700; flex-shrink:0;
}

.rev .cours h3{ font-size:14px; font-weight:600; margin:16px 0 6px; color:var(--text); }
.rev .cours h3:first-child{ margin-top:0; }
.rev .cours p{ color:var(--text-muted); font-size:14px; line-height:1.65; margin:0 0 10px; }
.rev .cours ul, .rev .cours ol{ color:var(--text-muted); font-size:14px; line-height:1.6; padding-left:20px; margin:6px 0 12px; }
.rev .cours li{ margin-bottom:4px; }
.rev .cours code:not(.python){ background:var(--surface-2); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-family:'SF Mono',Consolas,Monaco,monospace; font-size:12.5px; }

/* ---- bloc code + sortie ---- */
.rev pre.code{
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    padding:14px 16px; overflow-x:auto; margin:10px 0;
    font-family:'SF Mono',Consolas,Monaco,monospace; font-size:13px; line-height:1.6; tab-size:4;
}
.rev pre.code code{ font-family:inherit; }

.rev .runout{ margin:0 0 12px; }
.rev .runlbl{
    display:inline-block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-faint); background:var(--surface); border:1px solid var(--border);
    border-bottom:none; border-radius:6px 6px 0 0; padding:3px 10px;
}
.rev pre.out{
    background:var(--bg,var(--surface)); border:1px solid var(--border); border-radius:0 var(--radius) var(--radius) var(--radius);
    padding:12px 16px; margin:0; overflow-x:auto;
    font-family:'SF Mono',Consolas,Monaco,monospace; font-size:13px; line-height:1.55; color:var(--text);
}

/* ---- callouts ---- */
.rev .callout{
    border-radius:var(--radius); padding:10px 14px; margin:10px 0; font-size:13.5px; line-height:1.55;
    border:1px solid var(--border); background:var(--surface-2);
}
.rev .callout.tip{ border-left:3px solid var(--accent); }
.rev .callout.warn{ border-left:3px solid #e0862a; }

/* ================= Exercices ================= */
.rev .exos{ display:flex; flex-direction:column; gap:14px; margin-top:18px; }

.rev .exo{
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 18px;
}
.rev .exo-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.rev .exo-head h3{ font-size:14px; font-weight:600; margin:0; color:var(--text); }
.rev .exo-head .badge{
    background:var(--accent); color:#fff; font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.03em; border-radius:999px; padding:3px 10px;
}
.rev .exo-head .lvl{ color:var(--text-faint); font-size:12px; letter-spacing:1px; }

.rev .enonce p{ color:var(--text-muted); font-size:13.5px; line-height:1.6; margin:0 0 10px; }

.rev .exo-form{ margin-bottom:10px; }

/* ---- qcm ---- */
.rev .opt{
    display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:6px;
    border:1px solid var(--border); border-radius:8px; background:var(--surface);
    font-size:13.5px; color:var(--text); cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.rev .opt:hover{ border-color:var(--accent); }
.rev .opt input{ flex-shrink:0; accent-color:var(--accent); }

/* ---- feedback ---- */
.rev .feedback{
    border-radius:var(--radius); padding:9px 14px; margin:10px 0 0; font-size:13.5px; font-weight:600; color:#fff;
}
.rev .feedback.ok{ background:#22a06b; }
.rev .feedback.ko{ background:#d64545; }
.rev .feedback[hidden]{ display:none; }

/* ---- trace ---- */
.rev .tracewrap{ overflow-x:auto; margin-bottom:10px; }
.rev table.trace{ border-collapse:collapse; width:100%; font-size:13px; }
.rev table.trace th, .rev table.trace td{
    border:1px solid var(--border); padding:6px 10px; text-align:center; white-space:nowrap;
}
.rev table.trace th{ background:var(--surface); color:var(--text); font-weight:600; }
.rev table.trace td{ background:var(--surface); color:var(--text-muted); }
.rev input.tcell{
    width:72px; text-align:center; font-family:'SF Mono',Consolas,Monaco,monospace; font-size:13px;
    background:var(--surface); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:4px 6px;
}
.rev input.tcell:focus{ outline:none; border-color:var(--accent); }
.rev input.tcell.bad{ border-color:#d64545; background:rgba(214,69,69,.12); }

/* ---- fill (compléter) ---- */
.rev input.blank{
    display:inline-block; font-family:'SF Mono',Consolas,Monaco,monospace; font-size:13px;
    background:var(--surface); border:1px solid var(--accent); border-radius:5px; color:var(--text);
    padding:2px 6px; margin:0 2px;
}
.rev input.blank:focus{ outline:none; box-shadow:0 0 0 2px rgba(var(--accent-rgb,255,255,255),.25); }
.rev input.blank.bad{ border-color:#d64545; background:rgba(214,69,69,.12); }

/* ---- output (textarea) ---- */
.rev textarea.answer{
    width:100%; resize:vertical; background:var(--surface); border:1px solid var(--border); border-radius:8px;
    color:var(--text); font-family:'SF Mono',Consolas,Monaco,monospace; font-size:13px; padding:10px 12px; line-height:1.5;
}
.rev textarea.answer:focus{ outline:none; border-color:var(--accent); }

/* ---- actions ---- */
.rev .exo-actions{ margin-top:2px; }
.rev .exo-actions .btn.check{
    background:var(--accent); color:#fff; border:none; border-radius:8px; padding:8px 16px;
    font-size:13px; font-weight:600; cursor:pointer;
}
.rev .exo-actions .btn.check:hover{ opacity:.9; }

/* ---- solution ---- */
.rev details.solution{
    background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-top:10px; padding:2px 4px;
}
.rev details.solution summary{
    cursor:pointer; color:var(--accent); font-weight:600; font-size:13px; padding:8px 12px; list-style:none;
}
.rev details.solution summary::-webkit-details-marker{ display:none; }
.rev details.solution summary::before{ content:'▸ '; }
.rev details.solution[open] summary::before{ content:'▾ '; }
.rev details.solution p{ color:var(--text-muted); font-size:13.5px; line-height:1.6; padding:0 12px 12px; margin:0; }
.rev details.solution pre.code{ margin:0 12px 12px; }

/* ================= Coloration syntaxique Python ================= */
.rev .tok-kw{ color:#3b82c4; font-weight:600; }
.rev .tok-str{ color:#1a8f4c; }
.rev .tok-com{ color:var(--text-faint); font-style:italic; }
.rev .tok-num{ color:#b5651d; }
.rev .tok-fn{ color:#8a3fbf; }

:root[data-theme="dark"] .rev .tok-kw{ color:#6fb3f2; }
:root[data-theme="dark"] .rev .tok-str{ color:#5fd88a; }
:root[data-theme="dark"] .rev .tok-com{ color:var(--text-faint); }
:root[data-theme="dark"] .rev .tok-num{ color:#e0a458; }
:root[data-theme="dark"] .rev .tok-fn{ color:#c398f0; }

/* ================= Responsive ================= */
@media (max-width:880px){
    .rev .rev-sec{ padding:16px 16px; border-radius:10px; }
    .rev pre.code, .rev pre.out{ font-size:12.5px; }
    .rev table.trace{ display:block; }
    .rev .tracewrap{ -webkit-overflow-scrolling:touch; }
    .rev .exo{ padding:14px 14px; }
}

/* ================= Rail de navigation latéral droit (injecté par JS) =================
   Replié : colonne de pastilles numérotées, ancrée à droite, centrée verticalement.
   Au survol du rail, les titres de section se dévoilent. Purement décoratif/navigation :
   masqué sous 1100px (le sommaire horizontal sticky prend le relais) et à l'impression. */
.rev-rail{
    position:fixed;
    top:50%;
    right:14px;
    transform:translateY(-50%);
    z-index:30;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:86vh;
    overflow-y:auto;
    padding:8px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface);
    box-shadow:0 6px 24px rgba(0,0,0,.12);
    scrollbar-width:none;
}
.rev-rail::-webkit-scrollbar{ width:0; height:0; }

.rev-rail .rr-item{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--text-muted);
    border-radius:999px;
    padding:0;
}
.rev-rail .rr-dot{
    flex:0 0 auto;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    color:var(--text-muted);
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:999px;
    transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.rev-rail .rr-txt{
    /* replié : titre invisible et n'occupe pas de place */
    max-width:0;
    opacity:0;
    white-space:nowrap;
    overflow:hidden;
    font-size:13px;
    font-weight:500;
    color:var(--text);
    transition:max-width .26s ease, opacity .2s ease, padding .26s ease;
}

/* Survol du rail (n'importe quelle ligne) → les titres se dévoilent */
.rev-rail:hover .rr-txt,
.rev-rail:focus-within .rr-txt{
    max-width:260px;
    opacity:1;
    padding-right:12px;
}

/* Ligne active (synchronisée au défilement) */
.rev-rail .rr-item.active .rr-dot{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}
.rev-rail .rr-item.active .rr-txt{ color:var(--accent); font-weight:600; }

/* Survol / focus d'une ligne */
.rev-rail .rr-item:hover .rr-dot,
.rev-rail .rr-item:focus-visible .rr-dot{
    border-color:var(--accent);
    color:var(--accent);
}
.rev-rail .rr-item:hover .rr-txt{ color:var(--text); }
.rev-rail:hover .rr-item.active:hover .rr-txt{ color:var(--accent); }

@media (max-width:1100px){
    .rev-rail{ display:none; }
}
@media print{
    .rev-rail{ display:none; }
}
@media (prefers-reduced-motion:reduce){
    .rev-rail .rr-txt, .rev-rail .rr-dot{ transition:none; }
}

/* ================= Défilement fluide (clics sommaire / rail) =================
   Le lissage est piloté en JS, uniquement sur les clics d'ancre (voir
   revision-u22.js) : le défilement MANUEL reste instantané pour que la
   surbrillance suive en temps réel.
   L'offset sous la barre sticky est assuré UNIQUEMENT par scroll-margin-top sur
   les sections (.rev-sec, 88px). NE PAS ajouter scroll-padding-top ici : il
   s'additionnerait à scroll-margin-top et la cible atterrirait deux fois trop
   bas (le bas de la section précédente resterait visible → mauvaise section
   active juste après un clic). */

/* Badge de version du build (diagnostic cache) */
.rev-rail .rr-ver{
    text-align:center; font-size:9px; color:var(--text-faint);
    padding-top:4px; user-select:none;
}