/* =============================================================================
   TechForge — content.css
   SYSTÈME DE DESIGN DU CONTENU DES COURS (.tf-course-content)

   Objectif : tout le corps des cours est stylé ICI, une seule fois, dans le
   thème « neon forge ». Les articles importés n'ont plus de <style> : ils
   réutilisent ce vocabulaire. Pour un NOUVEAU cours, écris du HTML simple
   (h2, p, ul, table, pre…) ou réutilise les composants ci-dessous — aucun CSS
   à écrire.

   Deux niveaux :
   1) HTML sémantique brut (h1-h6, p, listes, table, code, blockquote, img…)
   2) Composants "guide" repris des cours (sections pliables, encadrés .hbox,
      terminaux .cmd-block, tables, badges, étapes, exercices, schémas SVG…).

   Piloté par les tokens de base.css → sombre par défaut, clair via .ifpa-light-mode.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   0. RACINE + RESET (scopé, comme les articles l'attendaient)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content {
    font-family: var(--font-body);
    color: var(--text);
    line-height: 1.7;
    font-size: 15px;
}
.tf-course-content * { box-sizing: border-box; margin: 0; padding: 0; }

/* ──────────────────────────────────────────────────────────────────────────
   1. TYPOGRAPHIE SÉMANTIQUE (nouveau contenu = beau sans classe)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content h1,
.tf-course-content h2,
.tf-course-content h3,
.tf-course-content h4,
.tf-course-content h5,
.tf-course-content h6 { font-family: var(--font-display); color: var(--text); line-height: 1.25; font-weight: 700; }

.tf-course-content h1 { font-size: clamp(22px, 4vw, 30px); margin: 0 0 1rem; letter-spacing: .01em; }
.tf-course-content h2 {
    font-size: 1.3rem; margin: 2rem 0 1rem;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.tf-course-content h2::after {
    content: ''; position: absolute; left: 0; bottom: -1px;
    width: 56px; height: 2px; background: var(--primary); box-shadow: var(--glow-cyan);
}
.tf-course-content h3 { font-size: 1.05rem; margin: 1.4rem 0 .7rem; color: var(--primary); }
.tf-course-content h3.sub { font-size: .9rem; font-weight: 600; color: var(--text); margin: 14px 0 8px; border-left: 3px solid var(--primary); padding-left: 10px; }
.tf-course-content h4 { font-size: .95rem; margin: 1rem 0 .5rem; }
.tf-course-content h1 em, .tf-course-content h2 em { color: var(--magenta); font-style: italic; }

.tf-course-content p { margin: 0 0 .9rem; color: var(--text); }
.tf-course-content a { color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
.tf-course-content a:hover { color: var(--magenta); border-bottom-color: currentColor; }
.tf-course-content strong, .tf-course-content b { color: var(--text); font-weight: 700; }
.tf-course-content em { font-style: italic; }
.tf-course-content hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 2rem 0; }

/* Listes génériques (contenu non classé) — les listes des composants gardent leur propre style */
.tf-course-content ul:not([class]),
.tf-course-content ol:not([class]) { margin: 0 0 1rem; padding-left: 1.3rem; }
.tf-course-content ul:not([class]) li,
.tf-course-content ol:not([class]) li { margin: .3rem 0; }
.tf-course-content ul:not([class]) li::marker { color: var(--primary); }
.tf-course-content ol:not([class]) li::marker { color: var(--primary); font-family: var(--font-mono); font-weight: 700; }

.tf-course-content blockquote {
    margin: 1.2rem 0; padding: .8rem 1.2rem;
    border-left: 3px solid var(--violet);
    background: var(--violet-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--muted); font-style: italic;
}

.tf-course-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.tf-course-content iframe { max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius); display: block; }

/* Code inline + pré bloc générique */
.tf-course-content code {
    font-family: var(--font-mono);
    font-size: .88em;
    background: var(--surface-2);
    color: var(--primary);
    padding: 1px 6px; border-radius: 4px;
    border: 1px solid var(--border);
}
.tf-course-content pre {
    background: #0a0f1c; color: #e8edf7;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px; margin: 1rem 0;
    overflow-x: auto;
    font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
    box-shadow: inset 0 0 0 1px rgba(41,225,255,.06);
}
.tf-course-content pre code { background: none; border: none; color: inherit; padding: 0; font-size: inherit; }

/* ──────────────────────────────────────────────────────────────────────────
   2. CONTENEURS (page / guide / toolbar)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .page { max-width: 820px; margin: 0 auto; }
.tf-course-content .guide { max-width: 760px; margin: 0 auto; }
.tf-course-content .guide-header { text-align: center; margin-bottom: 2rem; }
.tf-course-content .guide-header h1 { font-size: clamp(22px, 4vw, 30px); font-weight: 800; margin-bottom: .5rem; }
.tf-course-content .guide-header p { font-size: .9rem; color: var(--muted); font-family: var(--font-mono); }
.tf-course-content .toolbar { position: sticky; top: 56px; z-index: 10; background: rgba(16,26,46,.86); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 1.6rem; }
.tf-course-content .section-intro { font-size: .95rem; color: var(--muted); margin-bottom: 1.2rem; line-height: 1.75; }
.tf-course-content .intro { font-size: .9rem; color: var(--muted); border-left: 3px solid var(--primary); padding: 4px 0 4px 14px; margin-bottom: 1.6rem; line-height: 1.7; }
.tf-course-content .meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }
.tf-course-content .article-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .8rem; color: var(--faint); text-align: center; }

/* ──────────────────────────────────────────────────────────────────────────
   3. SOMMAIRE (TOC) + FILTRES
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 2rem; }
.tf-course-content .toc-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 11px;
    font-size: .76rem;
    color: var(--muted);
    cursor: pointer; text-align: left;
    transition: all .15s; font-family: var(--font-body);
}
.tf-course-content .toc-btn:hover { background: var(--surface-3); border-color: var(--primary); color: var(--text); transform: translateY(-1px); }
.tf-course-content .toc-btn .num { font-family: var(--font-mono); font-size: .68rem; color: var(--primary); display: block; margin-bottom: 2px; }
.tf-course-content .toc-btn.p2:hover, .tf-course-content .toc-btn.p3:hover, .tf-course-content .toc-btn.oobe:hover { border-color: var(--primary); }

.tf-course-content .filters { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-course-content .filter-btn { font-size: .76rem; padding: 5px 13px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; font-family: var(--font-body); transition: all .15s; }
.tf-course-content .filter-btn:hover { border-color: var(--primary); color: var(--text); }
.tf-course-content .filter-btn.active { background: var(--primary); color: #04121a; border-color: var(--primary); box-shadow: var(--glow-cyan); }

/* ──────────────────────────────────────────────────────────────────────────
   4. SECTIONS PLIABLES (interactif — JS bascule .open)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .section { margin-bottom: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); transition: border-color .2s; }
.tf-course-content .section:hover { border-color: var(--border); }
.tf-course-content .section-header {
    display: flex; align-items: center; gap: 10px;
    padding: .85rem 1rem; cursor: pointer;
    background: var(--surface-2);
    border-bottom: 1px solid transparent;
    transition: all .15s; user-select: none;
}
.tf-course-content .section-header:hover { background: var(--surface-3); }
.tf-course-content .section-header.open { border-bottom-color: var(--border); }
.tf-course-content .sec-icon { font-size: 14px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary-soft); border: 1px solid rgba(41,225,255,.25); }
.tf-course-content .sec-title { font-family: var(--font-display); font-size: .92rem; font-weight: 600; color: var(--text); flex: 1; }
.tf-course-content .sec-num { font-family: var(--font-mono); font-size: .7rem; color: var(--faint); }
.tf-course-content .chev { color: var(--primary); font-size: .8rem; transition: transform .2s; }
.tf-course-content .chev.open { transform: rotate(90deg); }
.tf-course-content .sec-body { padding: 1.2rem; background: var(--surface); display: none; }
.tf-course-content .sec-body.open { display: block; }
.tf-course-content .sec-body p { font-size: .92rem; line-height: 1.75; color: var(--muted); margin-bottom: .8rem; }
.tf-course-content .sec-body p:last-child { margin-bottom: 0; }
.tf-course-content .sec-body strong { color: var(--text); }

/* ──────────────────────────────────────────────────────────────────────────
   5. ENCADRÉS (.hbox / .note / .intro-box / .hint-box / .consigne)
   Le texte reste lisible (var(--text)) ; la variante colore bordure + fond.
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .hbox,
.tf-course-content .note,
.tf-course-content .hint-box {
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 10px 13px; margin: 12px 0;
    font-size: .86rem; line-height: 1.65;
    background: var(--primary-soft);
    color: var(--text);
}
.tf-course-content .hbox strong, .tf-course-content .note strong { color: var(--text); }

/* Variantes sémantiques (couleur de bordure + teinte de fond) */
.tf-course-content .hbox-info,  .tf-course-content .note.info  { border-color: var(--primary); background: var(--primary-soft); }
.tf-course-content .hbox-ok,    .tf-course-content .hbox-green, .tf-course-content .note.ok { border-color: var(--green); background: var(--green-soft); }
.tf-course-content .hbox-warn,  .tf-course-content .hbox-adapt, .tf-course-content .hbox-ovpn, .tf-course-content .note.warn { border-color: var(--amber); background: var(--amber-soft); }
.tf-course-content .hbox-danger,.tf-course-content .hbox-zyxel, .tf-course-content .note.alert { border-color: var(--red); background: var(--red-soft); }
.tf-course-content .hbox-purple { border-color: var(--violet); background: var(--violet-soft); }
.tf-course-content .hint-box { border-color: var(--amber); background: var(--amber-soft); }
.tf-course-content .hint-box code { background: rgba(0,0,0,.25); border-color: rgba(255,196,77,.3); }

.tf-course-content .intro-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1.5rem; }
.tf-course-content .intro-box p { font-size: .92rem; line-height: 1.75; color: var(--muted); margin-bottom: .6rem; }
.tf-course-content .intro-box p:last-child { margin-bottom: 0; }
.tf-course-content .consigne { font-size: .92rem; line-height: 1.72; color: var(--muted); }
.tf-course-content .consigne strong { color: var(--text); }

/* ──────────────────────────────────────────────────────────────────────────
   6. TERMINAUX / CODE (.cmd-block, .code, .topo-box, .nav-path)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .cmd-block,
.tf-course-content .code,
.tf-course-content .topo-box {
    background: #0a0f1c;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 15px; margin: 12px 0;
    font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85;
    color: #e3ebf7; overflow-x: auto;
    box-shadow: inset 0 0 0 1px rgba(41,225,255,.06), 0 0 16px rgba(0,0,0,.3);
}
.tf-course-content .code { white-space: pre; tab-size: 4; }
/* Coloration syntaxique (tokens des cours) */
.tf-course-content .cmd-block .prompt { color: var(--green); user-select: none; }
.tf-course-content .cmd-block .cmd    { color: #e3ebf7; }
.tf-course-content .cmd-block .comment,
.tf-course-content .cmd-block .c,
.tf-course-content .code .c           { color: var(--faint); font-style: italic; }
.tf-course-content .cmd-block .output,
.tf-course-content .cmd-block .out,
.tf-course-content .cmd-block .y      { color: var(--amber); }
.tf-course-content .cmd-block .err    { color: var(--red); }
.tf-course-content .cmd-block .ok,
.tf-course-content .cmd-block .g      { color: var(--green); }
.tf-course-content .cmd-block .path   { color: var(--primary); }
.tf-course-content .cmd-block .ps-kw,   .tf-course-content .code .k { color: var(--violet); }
.tf-course-content .cmd-block .ps-param,.tf-course-content .code .p { color: var(--amber); }
.tf-course-content .cmd-block .ps-str,  .tf-course-content .code .s { color: var(--green); }
.tf-course-content .cmd-block .ps-type  { color: #6fd6c4; }
.tf-course-content .cmd-block .ps-var,  .tf-course-content .code .v { color: var(--primary); }

.tf-course-content .topo-box .site { color: var(--primary); font-weight: 600; }
.tf-course-content .topo-box .net  { color: var(--green); }
.tf-course-content .topo-box .arrow{ color: var(--faint); }

.tf-course-content .nav-path { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; margin: 8px 0; font-family: var(--font-mono); font-size: .74rem; color: var(--primary); }
.tf-course-content .nav-path .arrow { color: var(--magenta); margin: 0 4px; }

/* ──────────────────────────────────────────────────────────────────────────
   7. TABLES (génériques + nommées)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content table,
.tf-course-content .dns-table,
.tf-course-content .param-table,
.tf-course-content .ver-table,
.tf-course-content .privacy-table,
.tf-course-content .part-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .82rem; }
.tf-course-content table th,
.tf-course-content .dns-table th,
.tf-course-content .ver-table th,
.tf-course-content .privacy-table th,
.tf-course-content .part-table th {
    text-align: left; padding: 8px 10px;
    background: var(--surface-2);
    font-family: var(--font-display); font-weight: 600; font-size: .72rem;
    color: var(--primary); text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.tf-course-content table td,
.tf-course-content .dns-table td,
.tf-course-content .param-table td,
.tf-course-content .ver-table td,
.tf-course-content .privacy-table td,
.tf-course-content .part-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); color: var(--muted); vertical-align: top; }
.tf-course-content table tr:last-child td,
.tf-course-content .dns-table tr:last-child td,
.tf-course-content .param-table tr:last-child td,
.tf-course-content .ver-table tr:last-child td { border-bottom: none; }
.tf-course-content table tbody tr:hover { background: var(--surface-2); }
.tf-course-content .ver-table tr.highlight td { background: var(--primary-soft); color: var(--text); }
/* param-table : 1re colonne = clé, en-tête coloré */
.tf-course-content .param-table th { background: var(--surface-3); color: var(--primary); }
.tf-course-content .param-table td:first-child { font-weight: 600; color: var(--primary); white-space: nowrap; }
.tf-course-content .param-table td.adapt-val { color: var(--amber); font-style: italic; }

/* ──────────────────────────────────────────────────────────────────────────
   8. COLONNES & CARTES (.cols / .col-card / .choice-card / .prereq-card / …)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .cols  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.tf-course-content .cols3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 10px 0; }
.tf-course-content .choice-box, .tf-course-content .status-box,
.tf-course-content .prereq-grid, .tf-course-content .firstboot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }

.tf-course-content .col-card,
.tf-course-content .prereq-card,
.tf-course-content .firstboot-card,
.tf-course-content .recap-box,
.tf-course-content .q-block,
.tf-course-content .name-rules,
.tf-course-content .path-flow,
.tf-course-content .progress-bar-wrap { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0; }
.tf-course-content .col-card h4,
.tf-course-content .prereq-card h4,
.tf-course-content .firstboot-card h4,
.tf-course-content .choice-card h4 { font-family: var(--font-display); font-size: .8rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }

/* listes "à puce custom" dans les cartes */
.tf-course-content .col-card ul, .tf-course-content .prereq-card ul, .tf-course-content .firstboot-card ul,
.tf-course-content .choice-card ul, .tf-course-content .name-rules ul, .tf-course-content .recap-box ul,
.tf-course-content .status-card ul { list-style: none; padding: 0; }
.tf-course-content .col-card li, .tf-course-content .prereq-card li, .tf-course-content .firstboot-card li,
.tf-course-content .choice-card li { font-size: .78rem; color: var(--muted); padding: 2px 0 2px 12px; position: relative; }
.tf-course-content .col-card li::before, .tf-course-content .prereq-card li::before,
.tf-course-content .firstboot-card li::before, .tf-course-content .choice-card li::before { content: "›"; position: absolute; left: 0; color: var(--primary); font-weight: 700; }

/* choix (local / perso / work) */
.tf-course-content .choice-card { border-radius: var(--radius-sm); padding: 10px 12px; border: 1px solid var(--border); background: var(--surface-2); }
.tf-course-content .choice-card.local { background: var(--green-soft); border-color: var(--green); }
.tf-course-content .choice-card.perso { background: var(--primary-soft); border-color: var(--primary); }
.tf-course-content .choice-card.local h4 { color: var(--green); }
.tf-course-content .choice-card.perso h4 { color: var(--primary); }

/* status cards (ok / err) */
.tf-course-content .status-card { border-radius: var(--radius-sm); padding: 8px 12px; font-size: .78rem; border: 1px solid var(--border); background: var(--surface-2); }
.tf-course-content .status-card h4 { font-weight: 600; margin-bottom: 4px; }
.tf-course-content .status-card li { padding: 1px 0; color: var(--muted); }
.tf-course-content .status-card.ok  { background: var(--green-soft); border-color: var(--green); }
.tf-course-content .status-card.ok h4 { color: var(--green); }
.tf-course-content .status-card.err { background: var(--red-soft); border-color: var(--red); }
.tf-course-content .status-card.err h4 { color: var(--red); }

/* recap + q-block */
.tf-course-content .recap-box li { font-size: .8rem; color: var(--muted); padding: 3px 0; display: flex; align-items: center; gap: 8px; }
.tf-course-content .recap-check { color: var(--green); font-weight: 700; font-size: 14px; }
.tf-course-content .q-block .q { font-weight: 600; color: var(--text); margin-bottom: 2px; }
.tf-course-content .q-block .a { color: var(--green); font-family: var(--font-mono); }
.tf-course-content .q-block .explain { color: var(--faint); font-size: .76rem; margin-top: 2px; }
.tf-course-content .name-rules { font-size: .8rem; color: var(--muted); }
.tf-course-content .name-rules li { padding: 2px 0 2px 12px; position: relative; }
.tf-course-content .name-rules li::before { content: "▸"; position: absolute; left: 0; color: var(--primary); font-size: 9px; top: 5px; }

/* architecture (archi-*) */
.tf-course-content .archi-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 2rem; box-shadow: var(--shadow-soft); }
.tf-course-content .archi-box h3 { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 1rem; border: none; padding: 0; }
.tf-course-content .archi-levels { display: flex; flex-direction: column; gap: 6px; }
.tf-course-content .archi-level { display: flex; align-items: stretch; gap: 8px; }
.tf-course-content .archi-card { flex: 1; border-radius: 7px; padding: 8px 12px; font-size: .8rem; background: var(--surface-3); border: 1px solid var(--border); }
.tf-course-content .archi-card strong { display: block; font-size: .72rem; font-weight: 700; margin-bottom: 2px; color: var(--text); }
.tf-course-content .archi-card span { font-size: .74rem; color: var(--muted); }
.tf-course-content .archi-indent { width: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tf-course-content .archi-indent-line { width: 2px; background: var(--border); border-radius: 2px; height: 100%; margin: 0 auto; }

/* ──────────────────────────────────────────────────────────────────────────
   9. BADGES & TAGS
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .action-badge,
.tf-course-content .badge,
.tf-course-content .step-tag,
.tf-course-content .ver-badge,
.tf-course-content .win-badge,
.tf-course-content .diff-badge,
.tf-course-content .lvl-1, .tf-course-content .lvl-2, .tf-course-content .lvl-3, .tf-course-content .lvl-4 {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
    padding: 3px 9px; border-radius: 20px;
    background: var(--primary-soft); color: var(--primary);
    border: 1px solid currentColor;
}
.tf-course-content .action-badge { border-radius: 4px; color: #fff; background: var(--primary-deep); border: none; padding: 2px 8px; margin-right: 4px; }
.tf-course-content .badge { margin-bottom: 8px; color: #fff; background: var(--primary-deep); border: none; }
.tf-course-content .win-badge { color: #fff; background: var(--primary-deep); border: none; margin-bottom: 12px; }

/* couleurs (regroupées par sémantique néon) */
.tf-course-content .action-badge.blue, .tf-course-content .action-badge.win, .tf-course-content .badge-ipsec, .tf-course-content .step-tag.purple, .tf-course-content .action-badge.key, .tf-course-content .action-badge.lin { background: var(--primary-deep); }
.tf-course-content .action-badge.green, .tf-course-content .action-badge.ok, .tf-course-content .path-flow .step-tag.green, .tf-course-content .ver-badge.pro { background: #0d9b6c; }
.tf-course-content .action-badge.red, .tf-course-content .action-badge.danger, .tf-course-content .action-badge.deb, .tf-course-content .badge-deb, .tf-course-content .badge-zyxel { background: #c0394e; }
.tf-course-content .action-badge.warn, .tf-course-content .action-badge.adapt, .tf-course-content .action-badge.ovpn, .tf-course-content .badge-ovpn { background: #b9790c; }
.tf-course-content .action-badge.gray, .tf-course-content .action-badge.skip { background: #4a5a7c; }

.tf-course-content .type-badge, .tf-course-content .adapt-tag, .tf-course-content .tag {
    display: inline-block; font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
    background: var(--surface-3); color: var(--muted);
    padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border);
}
.tf-course-content .tag { text-transform: uppercase; letter-spacing: .06em; border-radius: 20px; padding: 3px 9px; }
.tf-course-content .tag.blue { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.tf-course-content .adapt-tag { background: var(--amber-soft); color: var(--amber); border-color: rgba(255,196,77,.4); }

.tf-course-content .ver-badge.home { background: var(--surface-3); color: var(--muted); }
.tf-course-content .ver-badge.edu  { background: var(--violet-soft); color: var(--violet); border-color: var(--violet); }
.tf-course-content .diff-badge.diff-1, .tf-course-content .lvl-1 { background: var(--green-soft); color: var(--green); }
.tf-course-content .diff-badge.diff-2, .tf-course-content .lvl-2 { background: var(--primary-soft); color: var(--primary); }
.tf-course-content .diff-badge.diff-3, .tf-course-content .lvl-3 { background: var(--amber-soft); color: var(--amber); }
.tf-course-content .diff-badge.diff-4, .tf-course-content .lvl-4 { background: var(--red-soft); color: var(--red); }
.tf-course-content .check { color: var(--green); font-weight: 600; }
.tf-course-content .cross { color: var(--red); }

/* ──────────────────────────────────────────────────────────────────────────
   10. ÉTAPES & FLUX (.flow-step / .step / .step-num / .phase-divider / .level)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .flow-steps { counter-reset: step; margin: 10px 0; }
.tf-course-content .flow-step { display: flex; gap: 10px; margin-bottom: 8px; align-items: flex-start; }
.tf-course-content .flow-step::before { counter-increment: step; content: counter(step); min-width: 22px; height: 22px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary); font-family: var(--font-mono); font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.tf-course-content .flow-step p { font-size: .82rem; line-height: 1.6; color: var(--muted); margin: 0; }

.tf-course-content .steps { counter-reset: step; }
.tf-course-content .step { display: flex; gap: 14px; margin-bottom: 1.2rem; align-items: flex-start; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.tf-course-content .step-num { counter-increment: step; min-width: 30px; height: 30px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary); font-family: var(--font-mono); font-size: .76rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.tf-course-content .step-num::before { content: counter(step, decimal-leading-zero); }
.tf-course-content .step-num.p1 { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.tf-course-content .step-num.p2 { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.tf-course-content .step-num.p3, .tf-course-content .step-num.oobe { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.tf-course-content .step-body h4 { font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.tf-course-content .step-body p { font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
.tf-course-content .step-body p:last-child { margin-bottom: 0; }
.tf-course-content .step-body ul { list-style: none; padding: 0; margin: 4px 0; }
.tf-course-content .step-body ul li { font-size: .85rem; color: var(--muted); padding: 3px 0 3px 16px; position: relative; }
.tf-course-content .step-body ul li::before { content: "→"; position: absolute; left: 0; color: var(--primary); font-size: .7rem; top: 4px; }

.tf-course-content .steps-list { list-style: none; padding: 0; margin: 10px 0; }
.tf-course-content .steps-list li { display: flex; gap: 10px; padding: 6px 0; font-size: .82rem; color: var(--muted); align-items: flex-start; border-bottom: 1px solid var(--border-soft); }
.tf-course-content .steps-list li:last-child { border-bottom: none; }
.tf-course-content .step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 6px currentColor; }
.tf-course-content .step-dot.green { background: var(--green); }
.tf-course-content .step-dot.red   { background: var(--red); }
.tf-course-content .path-flow .arrow { color: var(--primary); font-weight: 700; margin: 0 4px; }

.tf-course-content .phase-divider { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; margin: 1.5rem 0 1rem; display: flex; align-items: center; gap: 10px; }
.tf-course-content .phase-divider h3 { font-family: var(--font-display); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0; border: none; padding: 0; }
.tf-course-content .phase-divider.green { background: var(--green-soft); border-color: var(--green); }
.tf-course-content .phase-divider.green h3 { color: var(--green); }
.tf-course-content .phase-divider.p1 { background: var(--red-soft); border-color: var(--red); }
.tf-course-content .phase-divider.p1 h3 { color: var(--red); }
.tf-course-content .phase-divider.p2 { background: var(--amber-soft); border-color: var(--amber); }
.tf-course-content .phase-divider.p2 h3 { color: var(--amber); }
.tf-course-content .phase-divider.p3 { background: var(--primary-soft); border-color: var(--primary); }
.tf-course-content .phase-divider.p3 h3 { color: var(--primary); }

.tf-course-content .level { margin-bottom: 1.7rem; }
.tf-course-content .level-head { display: flex; align-items: center; gap: 11px; padding: 10px 13px; border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.tf-course-content .level-head > div { flex: 1; }
.tf-course-content .level-head h2 { font-size: .95rem; font-weight: 600; margin: 0; border: none; padding: 0; }
.tf-course-content .level-head h2::after { display: none; }
.tf-course-content .level-head p { font-size: .72rem; margin: 2px 0 0; color: var(--muted); }
.tf-course-content .level-head .l-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; background: var(--primary-soft); border: 1px solid rgba(41,225,255,.25); }

/* ──────────────────────────────────────────────────────────────────────────
   11. EXERCICES (powershell-exercices : cartes, reveal, progress, niveaux l0-l2)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .ex-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.tf-course-content .ex-card.done { border-color: var(--green); box-shadow: 0 0 0 1px rgba(51,240,163,.25), 0 0 18px rgba(51,240,163,.1); }
.tf-course-content .ex-head { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.tf-course-content .ex-num { min-width: 28px; height: 28px; border-radius: 7px; background: var(--surface-3); color: var(--primary); font-family: var(--font-mono); font-size: .76rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tf-course-content .ex-title { font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--text); flex: 1; min-width: 120px; }
.tf-course-content .ex-body { padding: 13px; }
.tf-course-content .ex-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tf-course-content .ex-btn { font-size: .72rem; padding: 6px 13px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); cursor: pointer; font-family: var(--font-body); transition: all .15s; }
.tf-course-content .ex-btn:hover { background: var(--surface-3); border-color: var(--primary); color: var(--text); }
.tf-course-content .ex-btn.on { background: var(--primary); color: #04121a; border-color: var(--primary); }

.tf-course-content .done-toggle { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--faint); cursor: pointer; user-select: none; white-space: nowrap; }
.tf-course-content .done-toggle .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: transparent; transition: all .15s; }
.tf-course-content .done-toggle:hover .box { border-color: var(--green); }
.tf-course-content .ex-card.done .done-toggle { color: var(--green); font-weight: 600; }
.tf-course-content .ex-card.done .done-toggle .box { background: var(--green); border-color: var(--green); color: #04121a; }

.tf-course-content .reveal { display: none; margin-top: 12px; }
.tf-course-content .reveal.open { display: block; animation: fade .22s ease; }
.tf-course-content .sol-label { font-family: var(--font-mono); font-size: .64rem; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.tf-course-content .expl { margin-top: 10px; font-size: .78rem; line-height: 1.62; color: var(--muted); }
.tf-course-content .expl strong { color: var(--text); }
.tf-course-content .all-done { display: none; text-align: center; padding: 15px; margin-top: 6px; border-radius: var(--radius-sm); background: var(--green-soft); color: var(--green); font-size: .85rem; line-height: 1.6; border: 1px solid var(--green); }
.tf-course-content .all-done.show { display: block; animation: fade .3s ease; }

/* niveaux de difficulté (lignes l0 = terminal sombre, l1/l2/l2b = teintes) */
.tf-course-content .l0 { background: #0a0f1c; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tf-course-content .l0 strong { color: #e3ebf7; }
.tf-course-content .l0 span { color: var(--faint); }
.tf-course-content .l1 { background: var(--primary-soft); border: 1px solid rgba(41,225,255,.3); border-radius: var(--radius-sm); }
.tf-course-content .l1 strong { color: var(--primary); }
.tf-course-content .l2 { background: var(--green-soft); border: 1px solid rgba(51,240,163,.3); border-radius: var(--radius-sm); }
.tf-course-content .l2 strong { color: var(--green); }
.tf-course-content .l2b { background: var(--amber-soft); border: 1px solid rgba(255,196,77,.3); border-radius: var(--radius-sm); }
.tf-course-content .l2b strong { color: var(--amber); }

/* barres de progression internes */
.tf-course-content .progress-bar-track, .tf-course-content .progress-track { background: rgba(0,0,0,.3); border: 1px solid var(--border); border-radius: 20px; height: 8px; overflow: hidden; margin: 6px 0; }
.tf-course-content .progress-bar-fill, .tf-course-content .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--magenta)); border-radius: 20px; transition: width .35s ease; box-shadow: 0 0 8px rgba(41,225,255,.4); }
.tf-course-content .progress-wrap { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.tf-course-content .progress-label { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }
.tf-course-content .progress-label b { color: var(--primary); font-weight: 700; }

/* ──────────────────────────────────────────────────────────────────────────
   12. MÉDIAS (vidéo, screenshots, lightbox, schémas SVG, disques)
   ────────────────────────────────────────────────────────────────────────── */
.tf-course-content .video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-soft); margin-bottom: .6rem; background: #000; border: 1px solid var(--border); }
.tf-course-content .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 0; }
.tf-course-content .video-caption { font-size: .74rem; color: var(--faint); margin-bottom: 2.5rem; }
.tf-course-content .video-caption a { color: var(--primary); }

.tf-course-content .screenshot-wrap { margin: 14px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-soft); }
.tf-course-content .screenshot-wrap img { width: 100%; display: block; max-height: 380px; object-fit: contain; object-position: top; cursor: zoom-in; background: #05080f; border-radius: 0; }
.tf-course-content .screenshot-caption { background: var(--surface-2); padding: 7px 12px; font-size: .72rem; color: var(--faint); border-top: 1px solid var(--border); text-align: center; }
.tf-course-content .placeholder { background: var(--surface-2); border: 1.5px dashed var(--border); border-radius: var(--radius-sm); padding: 1.5rem; text-align: center; margin: 14px 0; color: var(--faint); font-size: .78rem; }

/* Lightbox (zoom image plein écran) */
.tf-course-content .lightbox { display: none; position: fixed; inset: 0; background: rgba(4,7,14,.9); z-index: 9999; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.tf-course-content .lightbox.active { display: flex; }
.tf-course-content .lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.7); cursor: default; }
.tf-course-content .lightbox-close { position: fixed; top: 16px; right: 20px; color: #fff; font-size: 28px; cursor: pointer; background: rgba(255,255,255,.08); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; user-select: none; border: 1px solid var(--border); }
.tf-course-content .lightbox-close:hover { background: rgba(255,92,174,.2); }
.tf-course-content .lightbox-caption { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); color: #e3ebf7; font-size: .74rem; background: rgba(4,7,14,.7); padding: 6px 14px; border-radius: 20px; max-width: 80vw; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--border); }

/* Schémas SVG : encadrés en "blueprint" pour rester lisibles quel que soit le thème.
   On conserve la palette claire d'origine (texte sombre, boîtes pastel). */
.tf-course-content .schema { margin: 16px 0; border-radius: var(--radius); overflow: hidden; background: #f4f6fb; border: 1px solid var(--border); padding: 12px; box-shadow: inset 0 0 0 1px rgba(41,225,255,.1), 0 0 18px rgba(41,225,255,.08); }
.tf-course-content .schema svg { width: 100%; height: auto; display: block; }
.tf-course-content .th { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: #1a1a18; }
.tf-course-content .ts { font-family: var(--font-body); font-size: 11px; fill: #444441; }
.tf-course-content .tn { font-family: var(--font-body); font-size: 10px; fill: #73726c; }
.tf-course-content .c-green rect,  .tf-course-content .c-green circle  { fill: #E1F5EE; stroke: #0F6E56; stroke-width: .8; }
.tf-course-content .c-teal rect,   .tf-course-content .c-teal circle   { fill: #E1F5EE; stroke: #0F6E56; stroke-width: .8; }
.tf-course-content .c-blue rect,   .tf-course-content .c-blue circle   { fill: #E6F1FB; stroke: #185FA5; stroke-width: .8; }
.tf-course-content .c-purple rect, .tf-course-content .c-purple circle { fill: #EEEDFE; stroke: #534AB7; stroke-width: .8; }
.tf-course-content .c-red rect,    .tf-course-content .c-red circle    { fill: #FCEBEB; stroke: #A32D2D; stroke-width: .8; }
.tf-course-content .c-coral rect,  .tf-course-content .c-coral circle  { fill: #FAECE7; stroke: #993C1D; stroke-width: .8; }
.tf-course-content .c-amber rect,  .tf-course-content .c-amber circle  { fill: #FAEEDA; stroke: #854F0B; stroke-width: .8; }
.tf-course-content .c-gray rect,   .tf-course-content .c-gray circle   { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: .8; }
.tf-course-content .c-dark rect { fill: #1a1a18; stroke: #3a3a36; stroke-width: .8; }
.tf-course-content .fline { stroke-dasharray: 4 4; animation: flow 1s linear infinite; }

/* Disques (diagrammes de partition) */
.tf-course-content .disk-diagram { margin: 12px 0; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.tf-course-content .disk-header { background: #0a0f1c; color: #e3ebf7; padding: 8px 12px; font-size: .72rem; font-family: var(--font-mono); }
.tf-course-content .disk-bar { display: flex; height: 32px; width: 100%; }
.tf-course-content .disk-bar-seg { display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 600; color: #fff; }
.tf-course-content .part-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }

/* Divers : timestamps cliquables, résultat, final-box */
.tf-course-content .timestamp { font-family: var(--font-mono); font-size: .72rem; background: var(--primary-soft); color: var(--primary); padding: 2px 7px; border-radius: 4px; text-decoration: none; white-space: nowrap; border: 1px solid rgba(41,225,255,.3); }
.tf-course-content .timestamp:hover { background: var(--primary); color: #04121a; }
.tf-course-content .result { display: flex; gap: 10px; align-items: flex-start; background: var(--green-soft); border: 1px solid var(--green); border-radius: var(--radius); padding: .9rem 1rem; margin-top: 1.2rem; font-size: .85rem; color: var(--text); }
.tf-course-content .result-icon { font-size: 20px; flex-shrink: 0; }
.tf-course-content .final-box { background: linear-gradient(135deg, var(--primary-deep), var(--violet)); border-radius: var(--radius); padding: 1.3rem; margin: 16px 0; color: #fff; text-align: center; box-shadow: 0 0 26px rgba(41,225,255,.2); }
.tf-course-content .final-box h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: #fff; border: none; padding: 0; }
.tf-course-content .final-box h3::after { display: none; }
.tf-course-content .final-box p { font-size: .82rem; opacity: .92; line-height: 1.6; }

/* ──────────────────────────────────────────────────────────────────────────
   13. ANIMATIONS partagées par les composants ci-dessus
   ────────────────────────────────────────────────────────────────────────── */
@keyframes fade { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes flow { to { stroke-dashoffset: -16; } }

/* ──────────────────────────────────────────────────────────────────────────
   14. RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .tf-course-content .cols, .tf-course-content .cols3,
    .tf-course-content .choice-box, .tf-course-content .status-box,
    .tf-course-content .prereq-grid, .tf-course-content .firstboot-grid { grid-template-columns: 1fr; }
}