/* Simulateurs interactifs obturo. Les couleurs se règlent par variables --sim-* (valeurs par défaut claires). */
.sim{--s-bg:var(--sim-bg,#fbf8f3);--s-panel:var(--sim-panel,#fff);--s-ink:var(--sim-ink,#27221d);--s-muted:var(--sim-muted,#6f655b);--s-line:var(--sim-line,#e3dbd0);
  --s-accent:var(--sim-accent,#e2682a);--s-accent-ink:var(--sim-accent-ink,#fff);--s-good:var(--sim-good,#2f8a4f);--s-bad:var(--sim-bad,#c2412d);--s-warn:var(--sim-warn,#b8860b);
  --s-track:var(--sim-track,#ece4d9);--s-chrome:var(--sim-chrome,#17130f);--s-chrome-ink:var(--sim-chrome-ink,#f1e9dc);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start;color:var(--s-ink);font-family:Nunito,system-ui,sans-serif}
.sim *{box-sizing:border-box}
.sim [hidden]{display:none!important}
.sim button,.sim input,.sim label{font-family:inherit}

/* viseur */
.sim-view{background:var(--s-chrome);border-radius:14px;padding:12px 12px 14px;color:var(--s-chrome-ink);position:sticky;top:12px}
.sim-stage{position:relative;aspect-ratio:8/5;border-radius:8px;overflow:hidden;background:#000;isolation:isolate}
.sim-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.sim-wash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.sim-grain{position:absolute;inset:0;background-repeat:repeat;opacity:0;pointer-events:none;mix-blend-mode:normal}
.sim-hud{position:absolute;left:0;right:0;bottom:0;display:flex;gap:18px;padding:8px 12px;font:500 15px/1 "DM Mono",ui-monospace,Menlo,monospace;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,0));text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.02em}
.sim-stage[data-exp="over"]::after,.sim-stage[data-exp="under"]::after{content:"";position:absolute;inset:0;border:3px solid var(--s-bad);border-radius:8px;pointer-events:none}
.sim-stage[data-exp="ok"]::after{content:"";position:absolute;inset:0;border:3px solid var(--s-good);border-radius:8px;pointer-events:none}

/* posemètre */
.sim-lm{margin-top:12px}
.sim-lm-scale{display:flex;justify-content:space-between;font:500 11px/1 "DM Mono",ui-monospace,monospace;color:#b9ad9c;padding:0 1px 5px}
.sim-lm-bar{position:relative;height:12px;border-radius:6px;background:linear-gradient(to right,#6b2c22 0,#8a5a22 28%,#2b2620 36%,#2b2620 64%,#8a5a22 72%,#6b2c22 100%)}
.sim-lm-ok{position:absolute;left:41.67%;width:16.66%;top:0;bottom:0;background:var(--s-good);opacity:.85;border-radius:2px}
.sim-lm-mark{position:absolute;top:-4px;width:6px;height:20px;margin-left:-3px;border-radius:3px;background:#fff;box-shadow:0 0 0 2px var(--s-chrome);transition:left .12s ease-out}
.sim-lm-read{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;font-size:13px;color:#b9ad9c}
.sim-lm-read strong{font:500 18px/1 "DM Mono",ui-monospace,monospace;color:var(--s-chrome-ink)}
.sim-lm-read[data-ok="1"] strong{color:#7fd69a}
.sim-lm-read[data-ok="0"] strong{color:#ff9a86}

/* panneau */
.sim-panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.sim-tabs{display:flex;flex-wrap:wrap;gap:6px}
.sim-tab,.sim-chip{border:1px solid var(--s-line);background:var(--s-panel);color:var(--s-ink);padding:8px 13px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;line-height:1.1}
.sim-tab[aria-pressed="true"],.sim-chip[aria-pressed="true"]{background:var(--s-ink);border-color:var(--s-ink);color:var(--s-panel)}
.sim-tab[data-done="1"]:not([aria-pressed="true"]){border-color:var(--s-good);color:var(--s-good)}
.sim-tab-score{font-family:"DM Mono",ui-monospace,monospace;font-weight:500;margin-left:2px}
.sim-eyebrow{margin:0 0 8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-muted);font-weight:700}
.sim-chips{display:flex;flex-wrap:wrap;gap:6px}

.sim-challenge{border:1px solid var(--s-line);background:var(--s-panel);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sim-ch-title{margin:0;font-size:18px;line-height:1.2}
.sim-ch-brief{margin:0;color:var(--s-muted);font-size:15px;line-height:1.5}
.sim-crit{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.sim-crit li{display:flex;gap:10px;align-items:flex-start;line-height:1.35}
.sim-tick{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid var(--s-line);margin-top:1px;position:relative}
.sim-crit li[data-ok="1"] .sim-tick{background:var(--s-good);border-color:var(--s-good)}
.sim-crit li[data-ok="1"] .sim-tick::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sim-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sim-ch-actions{display:flex;flex-wrap:wrap;gap:8px}
.sim-btn{border:1px solid var(--s-line);background:var(--s-panel);color:var(--s-ink);padding:9px 15px;border-radius:9px;font-size:14px;font-weight:700;cursor:pointer}
.sim-btn.sim-primary{background:var(--s-accent);border-color:var(--s-accent);color:var(--s-accent-ink)}
.sim-hint{margin:0;padding:10px 12px;border-radius:8px;background:var(--s-track);font-size:14px;line-height:1.45}
.sim-result{margin:0;font-weight:700;font-size:15px;min-height:1.2em}
.sim-result[data-ok="1"]{color:var(--s-good)}
.sim-result[data-ok="0"]{color:var(--s-bad)}

/* jauges */
.sim-gauges{display:flex;flex-direction:column;gap:14px}
.sim-gauge{background:var(--s-panel);border:1px solid var(--s-line);border-radius:12px;padding:12px 16px 10px}
.sim-g-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.sim-g-head label{font-weight:800;font-size:15px}
.sim-g-val{font:500 22px/1 "DM Mono",ui-monospace,monospace;color:var(--s-accent)}
.sim-gauge input[type=range]{--p:0%;width:100%;margin:0;height:28px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.sim-gauge input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(to right,var(--s-accent) var(--p),var(--s-track) var(--p))}
.sim-gauge input[type=range]::-moz-range-track{height:10px;border-radius:5px;background:linear-gradient(to right,var(--s-accent) var(--p),var(--s-track) var(--p))}
.sim-gauge input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--s-panel);border:3px solid var(--s-accent);margin-top:-8px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sim-gauge input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--s-panel);border:3px solid var(--s-accent)}
.sim-gauge input[type=range]:focus-visible{outline:2px solid var(--s-accent);outline-offset:3px;border-radius:6px}
.sim-ticks{display:flex;justify-content:space-between;font:500 11px/1 "DM Mono",ui-monospace,monospace;color:var(--s-muted);padding:2px 4px 0}
.sim-ticks span{flex:1;text-align:center}
.sim-help{margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--s-muted)}
.sim-check{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;cursor:pointer}
.sim-check input{width:20px;height:20px;accent-color:var(--s-accent)}

/* effets */
.sim-meters{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.sim-m-head{display:flex;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:4px;color:var(--s-muted)}
.sim-m-head strong{color:var(--s-ink);font-weight:700;text-align:right}
.sim-m-bar{height:8px;border-radius:4px;background:var(--s-track);overflow:hidden}
.sim-m-bar i{--p:0%;display:block;height:100%;width:var(--p);background:var(--s-accent);border-radius:4px;transition:width .12s ease-out}
.sim-feedback{margin:0;font-size:15px;line-height:1.5;padding:12px 14px;border-left:4px solid var(--s-accent);background:var(--s-track);border-radius:0 8px 8px 0}

@media (max-width:860px){.sim{grid-template-columns:minmax(0,1fr)}.sim-view{position:static}}
@media (max-width:420px){.sim-meters{grid-template-columns:1fr}.sim-hud{gap:12px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.sim-lm-mark,.sim-m-bar i{transition:none}}

/* Variante ciblée (leçons 2.2 à 2.4) */
.sim[data-focus] .sim-tabs{display:none}
.sim-focus-note{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--s-panel);border:1px solid var(--s-accent);font-size:14px;line-height:1.45}
.sim[data-focus="ap"] .sim-gauge:not([data-key="ap"]),.sim[data-focus="sh"] .sim-gauge:not([data-key="sh"]),.sim[data-focus="iso"] .sim-gauge:not([data-key="iso"]){opacity:.62}
.sim[data-focus="ap"] [data-meter="bg"],.sim[data-focus="sh"] [data-meter="mv"],.sim[data-focus="sh"] [data-meter="sk"],.sim[data-focus="iso"] [data-meter="gr"]{outline:2px solid var(--s-accent);outline-offset:3px;border-radius:8px}