/* =============================================================
   LEV STUDIO — Formation · Skin "DaVinci Resolve" de l'intérieur
   des cours. Scopé sous .course pour cohabiter avec la DA LEV
   (formation.css gère le cadre : barre du haut, nav, fond noir).
   ============================================================= */
.course {
  --panel:#202022; --panel-2:#282829; --panel-3:#323234;
  --line:#39393b; --line-2:#484849;
  --teal:#2bb7cc; --teal-soft:rgba(43,183,204,.14);
  --green:#57b85a; --yellow:#e0b341; --pink:#d96aa0; --orange:#e8893a; --blue:#4a90d9;
  --cmono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  margin-top: 32px;
}

.course h2 {
  font-family: var(--font-display); color: var(--text-bright);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.12; margin: 56px 0 8px;
}
.course h2:first-child { margin-top: 0; }
.course .lead { color: var(--text-mid); max-width: 720px; margin: 0 0 22px; font-size: 1.08rem; line-height: 1.5; }
.course > p { color: var(--text-mid); max-width: 720px; }
.course b { color: var(--text-bright); font-weight: 400; }

.course .panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 22px; box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.course .panel-head {
  display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-dim); font-weight: 700; margin: -4px 0 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.course .panel-head::before { content:""; width:8px; height:8px; border-radius:2px; background: var(--teal); }
.course .pill { font-family: var(--cmono); font-size: 13px; color: var(--text-bright); background: var(--panel-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; }

/* Analogie (posée une fois, sobre) */
.course .analogy {
  border-left: 3px solid var(--orange); background: linear-gradient(90deg, rgba(232,137,58,.10), transparent 80%);
  padding: 16px 18px; border-radius: 6px; margin: 18px 0; font-size: .95rem; color: var(--text-mid);
}
.course .analogy b { color: var(--orange); }
.course .analogy .lbl { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:6px; }

/* Cartes espaces */
.course .spaces { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:20px 0; }
.course .space { background:var(--panel-2); border:1px solid var(--line); border-top:3px solid var(--c,var(--teal)); border-radius:8px; padding:18px; }
.course .space .tag { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--c); font-weight:700; }
.course .space h3 { margin:6px 0 8px; font-size:1.05rem; color:var(--text-bright); }
.course .space p { font-size:.84rem; color:var(--text-dim); line-height:1.6; }

/* Node graph */
.course .node-graph {
  display:flex; align-items:center; overflow-x:auto; padding:30px 10px 20px; scrollbar-width:thin;
  background: radial-gradient(circle,#343436 1px,transparent 1.4px) 0 0/18px 18px, #1b1b1c;
  border:1px solid var(--line); border-radius:8px;
}
.course .node {
  flex:0 0 128px; position:relative; background:linear-gradient(#2f2f31,#272729); border:1px solid #111;
  border-radius:8px; padding:8px 8px 12px; cursor:pointer; transition:.16s; box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.course .node:hover { transform:translateY(-2px); }
.course .node.active { box-shadow:0 0 0 2px var(--nc), 0 2px 10px rgba(0,0,0,.6); border-color:var(--nc); }
.course .node .num { position:absolute; top:5px; left:7px; font-family:var(--cmono); font-size:10px; color:#cfcfcf; background:rgba(0,0,0,.45); padding:0 5px; border-radius:3px; line-height:16px; }
.course .node .thumb { height:54px; border-radius:5px; border:1px solid #000; margin-bottom:7px; background-size:cover; background-position:center; }
.course .node .nm { font-size:12.5px; font-weight:700; line-height:1.2; text-align:center; color:var(--text-bright); }
.course .node .role { font-size:10.5px; color:var(--text-dim); margin-top:2px; text-align:center; }
.course .node .badge { position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:9px; text-transform:uppercase; letter-spacing:.06em; background:var(--nc); color:#10171a; font-weight:800; padding:2px 7px; border-radius:10px; white-space:nowrap; z-index:2; }
.course .node .io { position:absolute; top:50%; width:11px; height:11px; border-radius:50%; transform:translateY(-50%); border:2px solid #1a1a1a; z-index:3; }
.course .node .io.in{ left:-6px; background:var(--blue);} .course .node .io.out{ right:-6px; background:var(--green);}
.course .conn { flex:0 0 30px; align-self:center; height:2px; }
.course .conn svg{ width:100%; height:22px; overflow:visible; display:block; }
.course .node-detail { margin-top:16px; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--nc,var(--teal)); border-radius:8px; padding:20px; min-height:130px; }
.course .node-detail .step { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--nc,var(--teal)); font-weight:700; }
.course .node-detail h3 { margin:6px 0 10px; font-size:1.15rem; color:var(--text-bright); }
.course .node-detail .what { font-size:.95rem; color:var(--text-mid); margin:0 0 12px; }
.course .node-detail .hint { font-size:.82rem; color:var(--text-dim); background:var(--panel); border-radius:6px; padding:10px 12px; border:1px solid var(--line); }
.course .node-detail .hint b { color:var(--orange); }

/* Color wheels */
.course .primaries { display:grid; grid-template-columns:repeat(4,1fr) auto; gap:18px; align-items:start; }
.course .cw { text-align:center; }
.course .cw-wheel { width:100%; max-width:128px; aspect-ratio:1; margin:0 auto; border-radius:50%; position:relative; cursor:grab; touch-action:none;
  background: radial-gradient(circle at center,#2a2a2a 24%,rgba(42,42,42,0) 60%), conic-gradient(from 90deg,#ff4b4b,#ff45c4,#6b5bff,#2ad1ff,#46ff8f,#f4ff52,#ff4b4b);
  border:1px solid #000; box-shadow:inset 0 0 0 5px rgba(0,0,0,.35), inset 0 0 14px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5); }
.course .cw-dot { position:absolute; left:50%; top:50%; width:14px; height:14px; border-radius:50%; transform:translate(-50%,-50%); background:#ededed; border:2px solid #111; box-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none; }
.course .cw-label { margin-top:11px; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-bright); }
.course .cw-sub { font-size:10px; color:var(--text-dim); }
.course .cw-luma { height:7px; border-radius:4px; margin:9px 6px 0; position:relative; background:linear-gradient(90deg,#0a0a0a,#f2f2f2); border:1px solid #000; cursor:ew-resize; touch-action:none; }
.course .cw-luma .knob { position:absolute; top:50%; left:50%; width:11px; height:14px; border-radius:3px; transform:translate(-50%,-50%); background:#d8d8d8; border:1px solid #000; }
.course .cw-preview-wrap { position:relative; margin-bottom:18px; border-radius:6px; overflow:hidden; border:1px solid #000; }
.course .cw-preview { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:filter .08s linear; }
.course .cw-tint { position:absolute; inset:0; mix-blend-mode:overlay; pointer-events:none; opacity:0; transition:opacity .08s, background-color .08s; }
.course .scope-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.course .scope-svg { width:clamp(104px, 22vw, 140px); height:clamp(104px, 22vw, 140px); background:#0c0c0c; border-radius:50%; border:1px solid #000; box-shadow:inset 0 0 14px rgba(0,0,0,.7); }
.course .scope-lbl { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-dim); font-weight:700; text-align:center; margin-top:6px; }
.course .cw-reset { margin-top:14px; background:var(--panel-3); border:1px solid var(--line-2); color:var(--text-dim); padding:6px 14px; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; }
.course .cw-reset:hover { color:var(--text-bright); border-color:var(--teal); }

/* Erreurs */
.course .mistakes { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.course .mistake { background:var(--panel-2); border:1px solid var(--line); border-left:3px solid #d9534f; border-radius:8px; padding:14px 16px; }
.course .mistake h4 { margin:0 0 6px; font-size:.9rem; color:#ea7b75; }
.course .mistake p { margin:0; font-size:.82rem; color:var(--text-dim); }
.course .mistake .fix { color:var(--green); font-weight:600; }

/* Quiz */
.course .quiz-q { background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:16px 18px; margin-bottom:14px; }
.course .quiz-q .q { font-weight:700; font-size:.95rem; color:var(--text-bright); margin:0 0 12px; }
.course .quiz-opt { display:block; width:100%; text-align:left; background:var(--panel); border:1px solid var(--line); color:var(--text-mid); padding:10px 14px; border-radius:6px; margin-bottom:8px; cursor:pointer; font-size:.88rem; transition:.15s; }
.course .quiz-opt:hover:not(:disabled){ border-color:var(--line-2); }
.course .quiz-opt.good{ border-color:var(--green); background:rgba(87,184,90,.16); color:var(--text-bright);}
.course .quiz-opt.bad{ border-color:#d9534f; background:rgba(217,83,79,.16); color:var(--text-bright);}
.course .quiz-opt:disabled{ cursor:default; }
.course .quiz-exp{ font-size:.82rem; color:var(--text-dim); margin:6px 0 0; padding:10px 12px; background:var(--panel); border-radius:6px; border:1px solid var(--line); display:none; }
.course .quiz-exp.show{ display:block; } .course .quiz-exp b{ color:var(--teal); }

/* Glossaire (replié) */
.course .glossary details{ background:var(--panel-2); border:1px solid var(--line); border-radius:8px; margin-bottom:8px; padding:0 16px; }
.course .glossary summary{ cursor:pointer; padding:13px 0; font-weight:700; font-size:.9rem; color:var(--text-bright); list-style:none; display:flex; justify-content:space-between; align-items:center; }
.course .glossary summary::-webkit-details-marker{ display:none; }
.course .glossary summary::after{ content:"+"; color:var(--teal); font-size:18px; }
.course .glossary details[open] summary::after{ content:"–"; }
.course .glossary details p{ margin:0 0 14px; font-size:.84rem; color:var(--text-dim); }
.course .glossary code{ font-family:var(--cmono); color:var(--text-bright); background:var(--panel-3); padding:0 5px; border-radius:4px; }

/* Comparaison « corriger ≠ étalonner » (réutilise le rythme des cartes) */
.course .duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.course .duo .space h3 { display:flex; align-items:center; gap:8px; }

/* Diagramme CIE (stylisé, pas scientifique) */
.course .cie-wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,200px); gap:22px; align-items:center; }
.course .cie-svg { width:100%; height:auto; display:block; background:#0c0c0c; border-radius:8px; border:1px solid #000; }
.course .cie-key { list-style:none; margin:0; padding:0; font-size:.84rem; }
.course .cie-key li { display:flex; align-items:flex-start; gap:9px; margin-bottom:14px; color:var(--text-dim); line-height:1.5; }
.course .cie-key b { color:var(--text-bright); font-weight:700; display:block; }
.course .cie-key .sw { flex:0 0 13px; width:13px; height:13px; border-radius:3px; margin-top:2px; }

/* Histogramme (illustratif, zones survolables) */
.course .histo-svg { width:100%; height:auto; display:block; }
.course .histo-zone rect.bg { fill:transparent; transition:fill .15s; }
.course .histo-zone:hover rect.bg { fill:rgba(43,183,204,.08); }
.course .histo-axis { font-family:var(--cmono); font-size:9px; fill:var(--text-dim); letter-spacing:.04em; }
.course .histo-cap { display:flex; justify-content:space-between; margin-top:10px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); font-weight:700; }

/* Waveform (illustratif) */
.course .wf-svg { width:100%; height:auto; display:block; border-radius:4px; }

/* Vectorscope (illustratif, avec légende) */
.course .vs-wrap { display:grid; grid-template-columns:170px 1fr; gap:22px; align-items:center; }
.course .vs-svg { width:100%; max-width:170px; height:auto; display:block; margin:0 auto; }
.course .vs-key { list-style:none; margin:0; padding:0; font-size:.84rem; }
.course .vs-key li { margin-bottom:13px; color:var(--text-dim); line-height:1.5; }
.course .vs-key li:last-child { margin-bottom:0; }
.course .vs-key b { display:block; color:var(--text-bright); font-weight:700; }

/* Color Space Transform — survol (mini-flux) */
.course .cst-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:22px 0 10px; }
.course .cst-flow .pill { font-size:14px; padding:7px 14px; }
.course .cst-box { font-family:var(--cmono); font-size:13px; color:#10171a; background:var(--teal); border-radius:6px; padding:8px 14px; font-weight:700; box-shadow:0 2px 10px rgba(43,183,204,.35); }
.course .cst-arrow { color:var(--text-dim); font-size:20px; }
.course .cst-grade { font-family:var(--cmono); font-size:13px; color:#1a1209; background:var(--orange); border-radius:6px; padding:8px 14px; font-weight:700; }
.course .glossary .cst-flow { margin:16px auto; }
.course .cst-cap { text-align:center; font-size:.84rem; color:var(--text-dim); max-width:560px; margin:0 auto; }
.course .cst-cap a { color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(43,183,204,.4); }

/* Flux en NŒUDS : les opérations (CST, correction, LUT) sont des nœuds
   stylisés ; les espaces couleur (Log, Wide Gamut, Rec.709) sont les
   pastilles « sur le câble ». Cohérent avec le node editor de l'ép. 1. */
.course .node-flow { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; margin:18px 0 10px; }
.course .nf-node { position:relative; background:linear-gradient(#2f2f31,#272729); border:1px solid #000; border-top:3px solid var(--teal); border-radius:7px; padding:9px 13px; text-align:center; box-shadow:0 2px 7px rgba(0,0,0,.5); font-size:12.5px; font-weight:700; color:var(--text-bright); line-height:1.15; }
.course .nf-node.grade { border-top-color:var(--orange); }
.course .nf-node.lut { border-top-color:var(--yellow); }
.course .nf-node small { display:block; font-size:9px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; margin-top:1px; }
.course .nf-node .io { position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translateY(-50%); border:2px solid #1a1a1a; }
.course .nf-node .io.in { left:-5px; background:var(--blue); }
.course .nf-node .io.out { right:-5px; background:var(--green); }
.course .nf-space { font-family:var(--cmono); font-size:11px; color:var(--text-dim); background:var(--panel-3); border:1px solid var(--line); border-radius:20px; padding:3px 11px; white-space:nowrap; }
.course .nf-wire { color:var(--line-2); font-size:15px; }
.course .nf-legend { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; font-size:.76rem; color:var(--text-dim); margin:0 0 6px; }
.course .nf-legend span { display:inline-flex; align-items:center; gap:7px; }
.course .nf-legend .k-node { width:16px; height:12px; border-radius:3px; border:1px solid #000; border-top:2px solid var(--teal); background:linear-gradient(#2f2f31,#272729); }
.course .nf-legend .k-space { width:16px; height:12px; border-radius:7px; background:var(--panel-3); border:1px solid var(--line); }

/* Calques (vertical) vs nœuds (horizontal) — pour les transfuges de Premiere */
.course .vn { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.course .vn-col { background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:16px; text-align:center; }
.course .vn-h { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); font-weight:700; margin-bottom:14px; }
.course .vn-stack { display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; min-height:96px; }
.course .vn-stack span { width:78%; padding:6px 0; font-size:11.5px; border-radius:4px; background:var(--panel-3); border:1px solid var(--line-2); color:var(--text-mid); }
.course .vn-stack span.base { background:#10171a; border-color:var(--teal); color:var(--text-bright); }
.course .vn-chain { display:flex; align-items:center; justify-content:center; gap:7px; min-height:96px; color:var(--line-2); font-size:15px; }
.course .vn-node { width:44px; height:44px; border-radius:7px; background:linear-gradient(#2f2f31,#272729); border:1px solid #000; border-top:3px solid var(--teal); display:flex; align-items:center; justify-content:center; font-family:var(--cmono); font-size:12px; color:var(--text-bright); }
.course .vn-dir { margin-top:14px; font-size:.78rem; color:var(--text-dim); }

/* Teaser HDR (encart court, ne déborde pas du périmètre) */
.course .hdr-teaser { display:flex; gap:16px; align-items:flex-start; background:linear-gradient(100deg,rgba(224,179,65,.12),transparent 75%); border:1px solid var(--line); border-left:3px solid var(--yellow); border-radius:8px; padding:18px 20px; margin:22px 0; }
.course .hdr-teaser .ic { flex:0 0 auto; font-size:1.5rem; line-height:1; }
.course .hdr-teaser h4 { margin:0 0 6px; font-size:1rem; color:var(--text-bright); }
.course .hdr-teaser p { margin:0; font-size:.86rem; color:var(--text-dim); line-height:1.6; }

/* Pont vers l'épisode suivant */
.course .pont { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:22px 24px; margin:28px 0 8px;
  text-decoration:none; transition:.18s; }
.course a.pont:hover { border-color:var(--teal); transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.45); }
.course .pont .pont-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--teal); font-weight:700; margin-bottom:5px; }
.course .pont .pont-title { font-family:var(--font-display); font-size:1.25rem; color:var(--text-bright); line-height:1.15; }
.course .pont .pont-go { flex:0 0 auto; color:var(--teal); font-weight:700; font-size:.95rem; white-space:nowrap; }

/* Maquette « page Color » de DaVinci (vierge, à l'arrivée) */
.course .resolve-ui { border:1px solid #000; border-radius:8px; overflow:hidden; background:#161617; box-shadow:0 6px 22px rgba(0,0,0,.5); margin:18px 0; }
.course .ru-tabs { display:flex; flex-wrap:wrap; background:#0e0e0f; border-bottom:1px solid #000; }
.course .ru-tabs span { padding:7px 11px; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }
.course .ru-tabs span.on { color:#fff; background:#202022; box-shadow:inset 0 -2px 0 var(--teal); }
.course .ru-main { display:grid; grid-template-columns:1fr 158px; gap:1px; background:#000; }
.course .ru-viewer { position:relative; background:#0a0a0a; }
.course .ru-viewer img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; opacity:.92; }
.course .ru-viewer .ru-flat { position:absolute; left:8px; bottom:8px; font-size:9px; font-family:var(--cmono); color:#cfcfcf; background:rgba(0,0,0,.55); padding:2px 7px; border-radius:3px; }
.course .ru-effects { background:#202022; padding:11px 10px; }
.course .ru-effects .h { font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim); font-weight:700; margin-bottom:9px; }
.course .ru-search { font-size:10px; background:#161617; border:1px solid var(--line); border-radius:4px; padding:5px 8px; color:var(--text-mid); margin-bottom:9px; }
.course .ru-fx { font-size:10px; background:var(--teal-soft); border:1px solid var(--teal); border-radius:4px; padding:7px 8px; color:var(--text-bright); line-height:1.3; }
.course .ru-nodes { position:relative; background:#1b1b1c; background-image:radial-gradient(circle,#2e2e30 1px,transparent 1.4px); background-size:16px 16px; padding:20px; display:flex; align-items:center; justify-content:center; gap:14px; min-height:96px; border-top:1px solid #000; }
.course .ru-node { width:92px; background:linear-gradient(#2f2f31,#272729); border:1px solid #000; border-radius:6px; padding:6px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.course .ru-node .thumb { height:38px; background:linear-gradient(135deg,#6d6d6f,#9a9a9c); border-radius:4px; margin-bottom:5px; }
.course .ru-node .lbl { font-size:9px; color:var(--text-dim); font-family:var(--cmono); }
.course .ru-addhint { font-size:10px; color:var(--text-dim); border:1px dashed var(--line-2); border-radius:6px; padding:10px 12px; }
.course .ru-addhint kbd { font-family:var(--cmono); font-size:10px; background:var(--panel-3); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:4px; padding:0 5px; color:var(--text-bright); }
.course .ru-badge { position:absolute; width:20px; height:20px; border-radius:50%; background:var(--teal); color:#10171a; font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 5px rgba(0,0,0,.6); z-index:4; }

/* Séquence progressive (image → nœud → image+nœud+Effects) */
.course .ru-seq { display:grid; gap:20px; margin:18px 0; }
.course .ru-stage { margin:0; }
.course .ru-stage .resolve-ui { margin:0; }
.course .ru-stage .ru-viewer img { aspect-ratio:auto; height:clamp(130px,24vw,190px); }
.course .ru-stage figcaption { display:flex; gap:10px; align-items:center; margin-top:11px; font-size:.88rem; color:var(--text-mid); line-height:1.45; }
.course .ru-stage figcaption .n { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--teal); color:#10171a; font-weight:800; font-size:.8rem; display:flex; align-items:center; justify-content:center; }

/* === Maquette « page Color » — Version A : capture réelle annotée === */
.course .cp-variant { margin:16px 0 0; }
.course .cp-tag { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent-red); font-weight:700; margin:0 0 8px; }
.course .cp-shot { position:relative; margin:0; border:1px solid #000; border-radius:8px; overflow:hidden; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.course .cp-shot img { width:100%; display:block; }
.course .cp-zone { position:absolute; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#fff; background:rgba(8,8,8,.82); border-left:3px solid var(--accent-red); padding:3px 8px 3px 7px; border-radius:0 4px 4px 0; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.6); }
.course .cp-zone i { width:17px; height:17px; border-radius:50%; background:var(--accent-red); color:#fff; font-style:normal; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.course .cp-zone.cp-hi { border-left-color:var(--green); }
.course .cp-zone.cp-hi i { background:var(--green); color:#0a1a0c; }
/* « + » dessiné en CSS (parfaitement centré, sans dépendre de la police) */
.course .cp-zone i.plus { position:relative; }
.course .cp-zone i.plus::before,
.course .cp-zone i.plus::after { content:""; position:absolute; left:50%; top:50%; background:currentColor; transform:translate(-50%,-50%); }
.course .cp-zone i.plus::before { width:7px; height:2px; }
.course .cp-zone i.plus::after  { width:2px; height:7px; }

/* Séquence de captures réelles annotées (1 nœud → +CST → CST réglé) */
.course .cp-seq { display:grid; gap:24px; margin:16px 0 0; }
.course .cp-step { margin:0; }
.course .cp-step figcaption { display:flex; gap:10px; align-items:center; margin-top:11px; font-size:.9rem; color:var(--text-mid); line-height:1.45; }
.course .cp-step figcaption .n { flex:0 0 auto; width:25px; height:25px; border-radius:50%; background:var(--teal); color:#10171a; font-weight:800; font-size:.82rem; display:flex; align-items:center; justify-content:center; }

/* === Version B : reconstitution 100 % CSS === */
.course .cp-recon { border:1px solid #000; border-radius:8px; overflow:hidden; background:#161617; box-shadow:0 6px 22px rgba(0,0,0,.5); }
.course .cp-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:1px; background:#000; }
.course .cp-cell { position:relative; background:#1b1b1c; min-height:120px; }
.course .cp-cell .cp-h { position:absolute; top:6px; left:6px; z-index:3; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#fff; background:rgba(232,0,13,.9); padding:2px 7px; border-radius:3px; }
.course .cp-viewer img { width:100%; height:100%; object-fit:cover; display:block; min-height:150px; }
.course .cp-nodes { background-image:radial-gradient(circle,#2e2e30 1px,transparent 1.4px); background-size:15px 15px; display:flex; align-items:center; justify-content:center; }
.course .cp-nodechain { display:flex; align-items:center; gap:7px; color:var(--line-2); font-size:14px; }
.course .cp-mn { width:34px; height:34px; border-radius:6px; background:linear-gradient(#2f2f31,#272729); border:1px solid #000; border-top:3px solid var(--teal); box-shadow:0 2px 5px rgba(0,0,0,.5); }
.course .cp-tools, .course .cp-scopes { display:flex; align-items:center; justify-content:center; padding:26px 8px 12px; }
.course .cp-wheels { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.course .cp-wheels .w i { display:block; width:38px; height:38px; border-radius:50%; margin:0 auto 4px; background:radial-gradient(circle at center,#2a2a2a 28%,transparent 60%),conic-gradient(from 90deg,#ff4b4b,#ff45c4,#6b5bff,#2ad1ff,#46ff8f,#f4ff52,#ff4b4b); border:1px solid #000; box-shadow:inset 0 0 0 3px rgba(0,0,0,.35),inset 0 0 8px rgba(0,0,0,.6); }
.course .cp-wheels .w span { font-size:8px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; }
.course .cp-wf { width:100%; height:auto; border-radius:4px; }

/* Flux : vrais nœuds (même forme que le Node Editor) */
.course .node-flow .node { cursor:default; flex:0 0 124px; }
.course .node-flow .node:hover { transform:none; }
.course .node-flow .node .nm small { font-size:.72em; color:var(--text-dim); font-weight:600; }

/* Marche à suivre (étapes numérotées) */
.course .steps { counter-reset:step; list-style:none; margin:18px 0; padding:0; display:grid; gap:11px; }
.course .steps li { position:relative; padding:13px 16px 13px 52px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; font-size:.9rem; color:var(--text-mid); line-height:1.55; }
.course .steps li::before { counter-increment:step; content:counter(step); position:absolute; left:14px; top:12px; width:25px; height:25px; border-radius:50%; background:var(--teal); color:#10171a; font-weight:800; font-size:.82rem; display:flex; align-items:center; justify-content:center; }
.course .steps b { color:var(--text-bright); }
.course .steps .warn { color:var(--yellow); }
.course kbd { font-family:var(--cmono); font-size:.76rem; background:var(--panel-3); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:4px; padding:1px 6px; color:var(--text-bright); white-space:nowrap; }

/* Réglages concrets du CST (inspecteur Resolve simplifié) */
.course .cst-sets { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 4px; }
.course .cst-set { background:var(--panel-2); border:1px solid var(--line); border-top:3px solid var(--teal); border-radius:8px; padding:14px 16px; }
.course .cst-set.solo { grid-column:1 / -1; }
.course .cst-set .h { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--teal); font-weight:700; margin-bottom:4px; }
.course .cst-set .sub { font-size:.78rem; color:var(--text-dim); margin-bottom:10px; }
.course .cst-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-top:1px solid var(--line); }
.course .cst-row .k { font-size:.8rem; color:var(--text-dim); }
.course .cst-row .v { font-family:var(--cmono); font-size:.76rem; color:var(--text-bright); text-align:right; }

/* Courbe Luma interactive (ép. 02) */
.course .curve-wrap { display:grid; grid-template-columns:1fr 230px; gap:22px; align-items:center; }
.course .curve-preview-wrap { border-radius:6px; overflow:hidden; border:1px solid #000; }
.course .curve-preview { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:url(#lumaCurve); }
.course #curveSvg { width:100%; max-width:230px; aspect-ratio:1; display:block; margin:0 auto; background:#0c0c0c; border:1px solid #000; border-radius:6px; box-shadow:inset 0 0 12px rgba(0,0,0,.6); touch-action:none; }
.course .curve-handle { fill:#ededed; stroke:#111; stroke-width:1.5; transition:fill .12s; }
.course .curve-handle.active { fill:var(--teal); stroke:#fff; stroke-width:2; }
.course .curve-hit { cursor:ns-resize; }
.course .curve-readout { max-width:230px; margin:6px auto 0; text-align:center; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--teal); min-height:14px; opacity:0; transition:opacity .15s; }
.course .curve-readout.on { opacity:1; }
.course .curve-axes { display:flex; justify-content:space-between; max-width:230px; margin:7px auto 0; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); }
.course .curve-btns { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.course .curve-histo { margin-top:18px; }
.course #curveHisto { width:100%; height:auto; display:block; background:#0c0c0c; border:1px solid #000; border-radius:6px; }
.course #curveHistoFill { transition:none; }

/* ── Balançoire (analogie du pivot) ─────────────────────── */
.course .seesaw { max-width:380px; margin:22px auto 8px; }
.course .seesaw svg { width:100%; height:auto; display:block; overflow:visible; }
.course .seesaw-plank { transform-box:fill-box; transform-origin:center; animation:seesawRock 6.5s ease-in-out infinite; }
@keyframes seesawRock { 0%{transform:rotate(0deg);} 22%{transform:rotate(-9deg);} 50%{transform:rotate(0deg);} 72%{transform:rotate(9deg);} 100%{transform:rotate(0deg);} }
.course .seesaw-labels { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); }
.course .seesaw-labels > span { display:inline-flex; align-items:center; gap:6px; }
.course .seesaw-labels .ss-mid { color:var(--teal); font-weight:700; }
.course .ss-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex:none; }
.course .ss-dot.lo { background:radial-gradient(circle at 35% 30%, #4a4a52, #141416); border:1px solid #41414a; }
.course .ss-dot.hi { background:radial-gradient(circle at 35% 30%, #fff, #e7d9b2); }
@media (prefers-reduced-motion: reduce) { .course .seesaw-plank { animation:none; } }

/* ── 3 sliders : contraste / luminosité / saturation ────── */
.course .trio { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center; }
.course .trio-stage { border-radius:6px; overflow:hidden; border:1px solid #000; }
.course .trio-stage img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:url(#trioFilter); }
.course .trio-controls { display:flex; flex-direction:column; gap:14px; }
.course .trio-name { display:flex; justify-content:space-between; align-items:baseline; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); font-weight:700; margin-bottom:6px; }
.course .trio-name b { color:var(--text-bright); font-family:var(--cmono); font-size:12px; font-weight:700; letter-spacing:0; }
.course .trio input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background:var(--line-2); outline:none; cursor:pointer; }
.course .trio input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }
.course .trio input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }
.course .trio-gauge { display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--line); }
.course .trio-gauge-row { display:grid; grid-template-columns:130px 1fr; align-items:center; gap:10px; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); }
.course .trio-bar { height:8px; border-radius:4px; background:var(--panel-3); overflow:hidden; }
.course .trio-bar i { display:block; height:100%; width:50%; background:var(--text-dim); transition:width .12s ease; }
.course .trio-bar i.perc { background:var(--teal); }
.course .trio-note { font-size:.8rem; color:var(--text-dim); margin:6px 0 0; line-height:1.55; }
.course .trio-note b { color:var(--teal); }
@media (max-width:768px){ .course .trio { grid-template-columns:1fr; } .course .trio-gauge-row { grid-template-columns:104px 1fr; } }

/* ── EP0 : Log vs Standard (courbe de transfert) ────────── */
.course .logsim { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; }
.course .logsim-plot svg { width:100%; height:auto; display:block; background:#0c0c0c; border:1px solid #000; border-radius:6px; }
.course .ls-ylab { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:5px; }
.course .ls-xlab { font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); text-align:right; margin-top:5px; }
.course .logsim-side { display:flex; flex-direction:column; gap:16px; }
.course .logsim input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background:var(--line-2); outline:none; cursor:pointer; }
.course .logsim input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }
.course .logsim input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }
.course .ls-legend { display:flex; flex-direction:column; gap:9px; }
.course .ls-chip { font-size:.84rem; color:var(--text-mid); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.course .ls-chip b { color:var(--text-bright); font-weight:700; }
.course .ls-chip b.bad { color:var(--orange); }
.course .ls-chip .dot { width:10px; height:10px; border-radius:50%; flex:none; }
.course .ls-chip .dot.std { background:var(--orange); }
.course .ls-chip .dot.log { background:var(--teal); }
@media (max-width:768px){ .course .logsim { grid-template-columns:1fr; } }

/* ── EP3 : Power Window ──────────────────────────────────── */
.course .pw-stage { position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid #000; touch-action:none; cursor:grab; user-select:none; }
.course .pw-stage:active { cursor:grabbing; }
.course .pw-base { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;
  -webkit-user-drag:none; user-select:none;
  filter:brightness(.8) saturate(.55) contrast(.96); }   /* le reste : plat/terne (avant retouche) */
.course .pw-inside { position:absolute; inset:0; background-size:cover; background-position:center; pointer-events:none;
  filter:brightness(1.16) saturate(1.35) contrast(1.08);   /* la zone corrigée : ça claque */
  -webkit-mask-image:radial-gradient(ellipse 17% 25% at 41% 33%, #000 60%, transparent 100%);
  mask-image:radial-gradient(ellipse 17% 25% at 41% 33%, #000 60%, transparent 100%); }
.course .pw-ring { position:absolute; border:2px dashed rgba(255,255,255,.9); border-radius:50%; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.5); }
.course .pw-tag { position:absolute; top:-9px; left:50%; transform:translateX(-50%); font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; background:var(--teal); color:#10171a; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.course .pw-controls { display:flex; align-items:center; gap:18px; margin-top:14px; flex-wrap:wrap; }
.course .pw-shapes { display:flex; gap:8px; flex-wrap:wrap; }
.course .pw-shapes .cw-reset { margin-top:0; }
.course .pw-hint { font-size:.82rem; color:var(--text-dim); flex:1; min-width:200px; }
.course .pw-size { display:flex; align-items:center; gap:10px; }
.course .pw-size .trio-name { margin:0; }
.course .pw-size input[type=range], .course .qual-row input[type=range] { -webkit-appearance:none; appearance:none; height:4px; border-radius:3px; background:var(--line-2); outline:none; cursor:pointer; }
.course .pw-size input[type=range] { width:140px; }
.course .pw-size input[type=range]::-webkit-slider-thumb, .course .qual-row input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }
.course .pw-size input[type=range]::-moz-range-thumb, .course .qual-row input[type=range]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }

/* ── EP3 : Qualifier ─────────────────────────────────────── */
.course .qual { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.course .qual-photo { position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid #000; }
.course .qual-svg { width:100%; height:100%; display:block; }
.course .qual-zone-tag { position:absolute; top:10px; left:10px; z-index:2; font-size:10px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; background:rgba(8,8,8,.82); color:var(--teal); padding:3px 9px; border-radius:3px; transition:opacity .18s ease; }
.course .qual-swatches { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; margin:2px 0 16px; }
.course .qual-sw { aspect-ratio:1; border-radius:5px; transition:filter .15s ease, opacity .15s ease, transform .15s ease; }
.course .qual-sw.off { filter:grayscale(1) brightness(.45); opacity:.5; transform:scale(.86); }
.course .qual-controls { display:flex; flex-direction:column; gap:12px; }
.course .qual-presets { display:flex; gap:10px; flex-wrap:wrap; }
.course .qual-row { display:flex; align-items:center; gap:12px; }
.course .qual-row .trio-name { margin:0; white-space:nowrap; }
.course .qual-row input[type=range] { flex:1; }
.course .qual-readout { font-family:var(--cmono); font-size:12px; color:var(--teal); }

/* ── EP3 : série / parallèle ─────────────────────────────── */
.course .seg-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-dim); font-weight:700; margin:22px 0 4px; }
.course .par-graph { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin:6px 0 12px; }
.course .par-col { display:flex; flex-direction:column; gap:12px; }
.course .par-graph .node, .course .par-graph .node:hover { cursor:default; flex:0 0 124px; transform:none; }
.course .par-conn { width:34px; align-self:stretch; flex:none; }

/* ── EP3 : mini-vectorscope (ligne de peau) ─────────────── */
.course .skinscope { display:flex; align-items:center; gap:22px; margin:20px 0; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:18px; }
.course .skinscope svg { width:150px; flex:none; }
.course .skinscope-cap { font-size:.9rem; color:var(--text-dim); line-height:1.6; }
.course .skinscope-cap b { color:var(--text-bright); }
.course .skinscope-cap .ss-line { color:var(--orange); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:11px; margin-bottom:6px; }
@media (max-width:768px){ .course .skinscope { flex-direction:column; text-align:center; } }

@media (max-width:768px){
  .course .pw-controls { flex-direction:column; align-items:stretch; gap:12px; }
  .course .pw-size input[type=range] { width:100%; }
  .course .qual-swatches { grid-template-columns:repeat(8,1fr); }
  .course .par-graph { flex-direction:column; }
  .course .par-conn { display:none; }
  .course .qual { grid-template-columns:1fr; }
}

/* Histogramme avant/après (statique, ép. 02) */
.course .histo-duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.course .histo-duo figure { margin:0; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:12px; }
.course .histo-duo svg { width:100%; height:auto; display:block; background:#0c0c0c; border-radius:4px; }
.course .histo-duo figcaption { text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); font-weight:700; margin-top:8px; }

/* Démo micro-contraste (toggle clarity) */
.course .clarity-demo { margin-bottom:14px; }
.course .clarity-demo img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:6px; border:1px solid #000; filter:none; transition:filter .18s ease; }
.course .clarity-demo img.on { filter:url(#clarity); }
.course .cw-reset.on { border-color:var(--teal); color:var(--text-bright); background:var(--teal-soft); }

/* Contraste = émotion (low vs high) */
.course .mood-duo { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
.course .mood-duo figure { margin:0; }
.course .mood-duo img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:8px; border:1px solid #000; }
.course .mood-duo figcaption { margin-top:8px; font-size:.85rem; color:var(--text-mid); line-height:1.45; }
.course .mood-duo b { color:var(--text-bright); }

/* Mobile */
@media (max-width: 768px){
  .course .curve-wrap{ grid-template-columns:1fr; }
  .course .mood-duo{ grid-template-columns:1fr; }
  .course .duo{ grid-template-columns:1fr; }
  .course .cie-wrap{ grid-template-columns:1fr; gap:16px; }
  .course .pont{ flex-direction:column; align-items:flex-start; }
  .course .ru-main{ grid-template-columns:1fr; }
  .course .ru-nodes{ flex-direction:column; }
  .course .cst-sets{ grid-template-columns:1fr; }
  .course .vn{ grid-template-columns:1fr; }
  .course .cp-grid{ grid-template-columns:1fr; }
  .course .cp-zone{ font-size:9px; padding:2px 5px; gap:4px; }
  .course .cp-zone i{ width:14px; height:14px; font-size:8.5px; }
  .course .vs-wrap{ grid-template-columns:1fr; gap:14px; }
  /* dans les flux, les plots restent sur les côtés (flux horizontal qui wrap) */
  .course .node-flow .node .io.in{ left:-5px; top:50%; right:auto; transform:translateY(-50%); }
  .course .node-flow .node .io.out{ right:-5px; left:auto; top:50%; bottom:auto; transform:translateY(-50%); }
  .course .node-graph{ flex-direction:column; align-items:center; overflow-x:visible; gap:0; padding:18px 10px; }
  .course .node{ flex:none; width:100%; max-width:320px; }
  .course .node .io.in{ left:50%; top:-6px; right:auto; transform:translateX(-50%);} .course .node .io.out{ left:50%; bottom:-6px; right:auto; top:auto; transform:translateX(-50%);}
  .course .conn{ width:2px; height:22px; background:#9a9a9a; } .course .conn svg{ display:none; }
  .course .primaries{ grid-template-columns:1fr 1fr; gap:22px 12px; }
  .course .cw-wheel{ width:118px; height:118px; max-width:none; }
  .course .scope-cell{ grid-column:span 2; }
}

/* ============================================================
   Iceberg du cinéma — composants (ISO : gain, seaux, couette)
   ============================================================ */
.course .ice-depth{ display:flex; align-items:center; gap:14px; margin:46px 0 4px; }
.course .ice-depth .tag{ font-family:var(--cmono,monospace); font-size:11px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--teal); white-space:nowrap; }
.course .ice-depth .line{ flex:1; height:1px; background:linear-gradient(90deg,var(--teal),transparent); opacity:.55; }
.course .ice-depth.abyss .tag{ color:var(--orange); }
.course .ice-depth.abyss .line{ background:linear-gradient(90deg,var(--orange),transparent); }

.course .stopladder{ width:100%; height:auto; display:block; }

.course .gain-stage{ border-radius:8px; overflow:hidden; border:1px solid #000; background:#0c0c0e; }
.course .gain-stage svg{ display:block; width:100%; height:auto; }

.course .ice-row{ display:block; margin:18px 0 0; }
.course .ice-name{ display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; color:var(--text-dim); margin-bottom:8px; }
.course .ice-name b{ font-family:var(--cmono,monospace); color:var(--text-bright); font-size:.9rem; }
.course input[type=range].ice-range{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px; background:var(--line-2); outline:none; cursor:pointer; }
.course input[type=range].ice-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }
.course input[type=range].ice-range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--teal); border:2px solid #0c0c0c; cursor:pointer; }
.course .ice-readout{ margin-top:10px; font-family:var(--cmono,monospace); font-size:.8rem; color:var(--teal); text-transform:uppercase; letter-spacing:.08em; }

.course .buckets{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.course .buckets figure{ margin:0; }
.course .buckets svg{ width:100%; height:auto; display:block; border-radius:8px; border:1px solid #000; background:#0c0c0e; }
.course .buckets figcaption{ margin-top:8px; font-size:.82rem; color:var(--text-dim); line-height:1.45; }
.course .buckets b{ color:var(--text-bright); }

.course .couette{ display:grid; grid-template-columns:minmax(0,1.15fr) 1fr; gap:20px; align-items:center; }
.course .couette-svg{ width:100%; height:auto; display:block; border-radius:8px; border:1px solid #000; background:#0b0c0e; }
.course .du-native{ margin-top:2px; font-family:var(--cmono,monospace); font-size:.8rem; color:var(--text-bright); background:var(--panel-3); border:1px solid var(--line-2); border-radius:6px; padding:5px 10px; display:inline-block; }
.course .du-legend{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.course .du-legend li{ display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--text-dim); }
.course .du-legend i{ width:14px; height:14px; border-radius:3px; flex:0 0 auto; }
.course .du-legend i.hi{ background:rgba(63,208,230,.5); border:1px solid #3fd0e6; }
.course .du-legend i.lo{ background:rgba(230,60,50,.55); border:1px solid #e63c32; }
.course .du-snap{ margin-top:14px; font-size:.8rem; font-weight:700; color:var(--green); background:rgba(60,190,120,.1); border:1px solid rgba(60,190,120,.4); border-radius:6px; padding:8px 10px; }

.course .pont.soon{ opacity:.9; }
.course .pont.soon .pont-go{ color:var(--text-dim); border:1px solid var(--line-2); border-radius:6px; padding:5px 12px; }

/* Optiques : 4e étage (Fosse des Mariannes) + comparateurs */
.course .ice-depth.mariana .tag{ color:#8a7be6; }
.course .ice-depth.mariana .line{ background:linear-gradient(90deg,#8a7be6,transparent); }

.course .cmp-top{ margin-top:8px; }

.course .cmp{ display:grid; grid-template-columns:minmax(0,1.25fr) 1fr; gap:20px; align-items:center; }
.course .cmp-note{ margin-top:12px; font-size:.84rem; color:var(--text-dim); line-height:1.5; }

.course .tri-links{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:14px; }
.course .tri-links a{ color:var(--teal); font-size:.84rem; font-weight:600; text-decoration:none; }
.course .tri-links a:hover{ text-decoration:underline; }

/* Audit P1 : encart « à retenir » + nouveaux schémas (contre-jour, sténopé, sweet spot, breathing) */
.course .takeaway{ display:flex; gap:12px; align-items:baseline; background:var(--teal-soft); border-left:3px solid var(--teal); border-radius:0 6px 6px 0; padding:11px 15px; margin:18px 0; }
.course .takeaway .tk-lbl{ flex:0 0 auto; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); font-weight:700; padding-top:2px; }
.course .takeaway .tk-txt{ font-size:.86rem; color:var(--text-mid); line-height:1.5; }
.course .takeaway b{ color:var(--text-bright); }
.course .btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.course .cw-reset.active{ border-color:var(--teal); color:var(--text-bright); background:var(--panel-2); }
.course .cj-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.course .cj-tag{ font-size:.78rem; font-weight:700; border-radius:5px; padding:4px 9px; border:1px solid var(--line-2); color:var(--text-dim); transition:all .15s; }
.course .cj-tag.bad{ color:#ea7b75; border-color:rgba(217,83,79,.5); background:rgba(217,83,79,.1); }
.course .cj-tag.ok{ color:var(--green); border-color:rgba(60,190,120,.4); background:rgba(60,190,120,.1); }
.course .fb-scene{ transition:transform .5s ease; transform-box:fill-box; transform-origin:center; }
@media (prefers-reduced-motion:reduce){ .course .fb-scene{ transition:none; } }

/* Ancrage réel (photo/vidéo stock) — placeholder tant que le fichier manque */
.course .anchor{ margin:18px 0; }
.course .anchor .anchor-media{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:8px; border:1px solid #000; background:#0c0c0e; }
.course .anchor-ph{ aspect-ratio:16/9; border:1px dashed var(--line-2); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; padding:14px;
  background:repeating-linear-gradient(45deg,#0e0e10,#0e0e10 11px,#121214 11px,#121214 22px); }
.course .anchor.ready .anchor-ph{ display:none; }
.course .anchor-ph .aph-lbl{ font-family:var(--cmono,monospace); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.course .anchor-ph .aph-sub{ font-size:.78rem; color:var(--text-dim); }
.course .anchor figcaption{ margin-top:8px; font-size:.82rem; color:var(--text-dim); line-height:1.45; }
.course .anchor figcaption .reel{ display:inline-block; font-size:9px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--teal); border:1px solid var(--teal); border-radius:4px; padding:1px 5px; margin-right:7px; vertical-align:middle; }
.course .anchor b{ color:var(--text-bright); }

/* ── Toolkit visuel « instrument premium » des schémas ── */
.course .sv-svg{ width:100%; height:auto; display:block; border-radius:10px; border:1px solid #1b1e20;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 6px rgba(0,0,0,.4); }
.course .sv-svg text{ font-family:ui-monospace,"SF Mono","JetBrains Mono","IBM Plex Mono",Menlo,Consolas,monospace; }
.course .sv-svg path, .course .sv-svg line, .course .sv-svg polyline{ stroke-linecap:round; stroke-linejoin:round; }
.course .sv-svg .sv-lbl{ fill:#8298a0; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; }
.course .sv-svg .sv-cap{ fill:#6f7d80; font-size:9px; letter-spacing:.02em; }
.course .sv-svg .sv-val{ fill:#e6edef; font-weight:600; letter-spacing:.02em; }

/* Grain film subtil sur les panneaux (texture cinéma) */
.course .panel{ position:relative; }
.course .panel::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion:reduce){ .course .panel::after{ opacity:.03; } }

@media (max-width: 768px){
  .course .couette{ grid-template-columns:1fr; }
  .course .buckets{ grid-template-columns:1fr; }
  .course .cmp{ grid-template-columns:1fr; }
}

/* ── Triangle d'exposition interactif (ép. obturation) ── */
.course .tri-live .tri-cams,
.course .tri-live .tri-presets{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.course .tri-live .tri-cam,
.course .tri-live .tri-preset{ font:600 .74rem/1 ui-monospace,"SF Mono",Menlo,monospace;
  color:#8298a0; background:#12181b; border:1px solid #24303a; border-radius:999px;
  padding:6px 12px; cursor:pointer; letter-spacing:.02em; }
.course .tri-live .tri-cam.is-on{ color:#2bb7cc; border-color:#2bb7cc; }
.course .tri-live .tri-preset:hover{ color:#e6edef; border-color:#3a4b57; }
.course .tri-live .tri-stage{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.course .tri-live .tri-svg{ flex:1 1 340px; min-width:280px; }
.course .tri-live [role="slider"]:focus{ outline:none; }
.course .tri-live [role="slider"]:focus-visible circle,
.course .tri-live [role="slider"]:focus-visible rect{ stroke-width:2.6; }
.course .tri-preview{ flex:0 0 168px; }
.course .tri-prev-frame{ position:relative; width:168px; height:110px; border-radius:8px;
  overflow:hidden; border:1px solid #24303a; background:#0b0f11; transition:filter .18s; }
.course .tri-prev-bg{ position:absolute; inset:0;
  background:linear-gradient(120deg,#20323a,#3a5561 60%,#243038); transition:filter .18s; }
.course .tri-prev-subj{ position:absolute; left:34%; top:26%; width:34%; height:56%;
  border-radius:14px 14px 10px 10px; background:linear-gradient(#d8c3a6,#a07d59);
  transform-origin:center; transition:filter .18s, transform .18s; }
.course .tri-prev-grain{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='80' height='80' filter='url(%23n)' opacity='0.7'/></svg>"); opacity:0; }
.course .tri-prev-cap{ margin-top:6px; text-align:center; }
.course .tri-coach{ font:600 .84rem/1.5 ui-monospace,"SF Mono",Menlo,monospace;
  color:#c7d2d6; background:#0f1417; border-left:3px solid #2bb7cc; border-radius:0 8px 8px 0;
  padding:10px 14px; margin:6px 0 12px; }
@media (max-width:600px){ .course .tri-live .tri-stage{ flex-direction:column; }
  .course .tri-preview{ align-self:center; } }
@media (prefers-reduced-motion: reduce){
  .course .tri-prev-frame,.course .tri-prev-bg,.course .tri-prev-subj{ transition:none; } }

/* ── Plaque d'archive (parenthèses historiques : camera obscura, etc.) ── */
.course .archive-plate{ margin:22px 0; border:1px solid #24303a; border-radius:10px; overflow:hidden; background:#0f1417; }
.course .archive-plate img{ display:block; width:100%; height:auto; background:#ece3d0; padding:14px; }
.course .archive-plate figcaption{ padding:12px 16px; font-size:.86rem; line-height:1.55; color:#8a9aa0; border-top:1px solid #24303a; }
.course .archive-plate .ap-tag{ display:inline-block; font:600 .66rem/1 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.16em; text-transform:uppercase; color:#e8000d; margin-right:8px; vertical-align:baseline; }
.course .archive-plate figcaption b{ color:#c7d2d6; }