/* Ateliers interactifs du Dossier XXIX « L'Art d'avoir l'air d'avoir raison ».
   Tout est scopé sous .sophismes-gallery : aucun style ne fuit vers la page.
   Jetons codex ECI + pourpre ; rouge de faute et vert de validité là où la couleur est la donnée. */

.sophismes-gallery {
  --lv-void: #050811;
  --lv-bg: #070f1c;
  --lv-panel: #0d1a2c;
  --lv-panel2: #12233a;
  --lv-ink: #f4ecd8;
  --lv-parch: #e7dcc1;
  --lv-muted: #b9b0a0;
  --lv-soft: #8f8c78;
  --lv-line: rgba(214, 172, 85, 0.22);
  --lv-line2: rgba(244, 236, 216, 0.10);
  --lv-gold: #d6ac55;
  --lv-gold-b: #f3d98a;
  --lv-azur: #e79ac0;
  --lv-azur-d: #b8557a;
  --lv-ok: #5fe3ac;
  --lv-warn: #ff9a6e;
  --lv-roman: "Cinzel", Georgia, serif;
  --lv-serif: "Fraunces", Georgia, serif;
  --lv-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--lv-parch);
  background: var(--lv-bg);
  font-family: var(--lv-serif);
  font-size: 15px;
  line-height: 1.6;
  container-type: inline-size;
}
.sophismes-gallery *, .sophismes-gallery *::before, .sophismes-gallery *::after { box-sizing: border-box; }
.sophismes-gallery button, .sophismes-gallery input, .sophismes-gallery select { font: inherit; color: inherit; }
.sophismes-gallery button { cursor: pointer; }
.sophismes-gallery :focus-visible { outline: 2px solid var(--lv-gold-b); outline-offset: 2px; }
.sophismes-gallery svg { display: block; max-width: 100%; }
.sophismes-gallery svg text { font-family: var(--lv-mono); }

/* ---------- cadre ---------- */
.lv { padding: clamp(14px, 2.6vw, 26px); background: linear-gradient(180deg, rgba(244, 236, 216, 0.025), transparent); }
.lv__head { display: flex; justify-content: space-between; gap: 20px; align-items: start; flex-wrap: wrap; margin-bottom: 14px; }
.lv__eyebrow { display: flex; gap: 10px; align-items: baseline; font-family: var(--lv-roman); font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lv-soft); }
.lv__id { color: var(--lv-azur); font-weight: 700; border: 1px solid rgba(231, 154, 192, 0.35); border-radius: 2px; padding: 1px 7px; }
.lv__head h3 { font-family: var(--lv-roman); font-size: clamp(0.92rem, 1.8vw, 1.12rem); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lv-ink); margin: 8px 0 6px; font-weight: 600; }
.lv__q { margin: 0; color: var(--lv-muted); max-width: 68ch; font-size: 0.94rem; }
.lv__stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.lv__metric { min-width: 108px; padding: 8px 11px; border: 1px solid var(--lv-line); border-radius: 2px; background: var(--lv-panel); }
.lv__metric > span { display: block; font-family: var(--lv-roman); font-size: 0.52rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lv-soft); }
.lv__metric strong { display: block; margin-top: 3px; font-family: var(--lv-mono); font-size: 1rem; font-weight: 500; color: var(--lv-gold-b); font-variant-numeric: tabular-nums; }
.lv__metric small { font-size: 0.7em; color: var(--lv-muted); }

/* ---------- commandes ---------- */
.lv__controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px 20px; align-items: end;
  padding: 14px 16px; margin-bottom: 14px; border: 1px solid var(--lv-line2); border-radius: 3px; background: rgba(5, 8, 17, 0.5); }
.lv__range { display: grid; gap: 5px; }
.lv__range > span { display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font-family: var(--lv-roman); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lv-soft); }
.lv__range output { font-family: var(--lv-mono); font-size: 0.82rem; letter-spacing: 0; text-transform: none; color: var(--lv-gold-b); font-variant-numeric: tabular-nums; }
.lv__range input[type="range"] { width: 100%; accent-color: var(--lv-gold); height: 20px; }
.lv__choice { display: grid; gap: 5px; }
.lv__choice-l { font-family: var(--lv-roman); font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lv-soft); }
.lv__choice-b { display: flex; flex-wrap: wrap; gap: 5px; }
.lv__choice-b button, .lv__toggle, .lv__action {
  font-family: var(--lv-roman); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--lv-line2); border-radius: 2px; background: var(--lv-panel); color: var(--lv-muted);
  transition: border-color 0.35s, color 0.35s, background 0.35s; }
.lv__choice-b button:hover, .lv__toggle:hover, .lv__action:hover { border-color: var(--lv-gold); color: var(--lv-gold-b); }
.lv__choice-b button.is-on { border-color: var(--lv-azur); color: var(--lv-azur); background: rgba(231, 154, 192, 0.08); }
.lv__toggle.is-on { border-color: var(--lv-azur); color: var(--lv-azur); background: rgba(231, 154, 192, 0.08); }
.lv__action { align-self: end; }

/* ---------- scène ---------- */
.lv__stage { position: relative; border: 1px solid var(--lv-line2); border-radius: 3px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(184, 85, 122, 0.13), transparent 70%), var(--lv-void); }
.lv__grid { display: grid; gap: 12px; padding: 12px; }
@container (min-width: 720px) { .lv__grid.two { grid-template-columns: 1fr 1fr; } .lv__grid.wide { grid-template-columns: 1.6fr 1fr; } }

/* ---------- lecture et limite ---------- */
.lv__foot { display: grid; gap: 8px; margin-top: 14px; }
.lv__read, .lv__caveat { margin: 0; font-size: 0.88rem; max-width: 78ch; }
.lv__read { color: var(--lv-parch); border-left: 2px solid var(--lv-azur); padding-left: 12px; }
.lv__read span { color: var(--lv-azur); }
.lv__caveat { color: var(--lv-soft); border-left: 2px solid var(--lv-line); padding-left: 12px; }
.lv__caveat b { color: var(--lv-muted); font-family: var(--lv-roman); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---------- éléments partagés ---------- */
.lv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 12px; font-family: var(--lv-roman);
  font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-soft); }
.lv-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; border-radius: 2px; }
.lv-note { margin: 0; padding: 8px 12px 12px; font-size: 0.84rem; color: var(--lv-muted); }
.lv-note b { color: var(--lv-gold-b); }
.lv-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.lv-table th, .lv-table td { padding: 5px 9px; text-align: left; border-bottom: 1px solid var(--lv-line2); }
.lv-table th { font-family: var(--lv-roman); font-size: 0.52rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lv-gold); }
.lv-table td { font-family: var(--lv-mono); color: var(--lv-parch); font-variant-numeric: tabular-nums; }
.lv-table td.t { font-family: var(--lv-serif); color: var(--lv-muted); }
.lv-verdict { display: inline-block; font-family: var(--lv-roman); font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 2px; border: 1px solid currentColor; }
.lv-verdict.ok { color: var(--lv-ok); }
.lv-verdict.no { color: var(--lv-warn); }
.lv-verdict.mid { color: var(--lv-gold-b); }

@media (prefers-reduced-motion: reduce) {
  .sophismes-gallery *, .sophismes-gallery *::before, .sophismes-gallery *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 520px) {
  .sophismes-gallery { font-size: 14px; }
  .lv__stats { justify-content: flex-start; }
  .lv__metric { min-width: 92px; }
}

/* ---------- ateliers « épreuve → révélation → antidote » (propres au dossier XXIX) ---------- */
.sophismes-gallery { --lv-pourpre: #e79ac0; --lv-pourpre-d: #b8557a; --lv-red: #ff6b6b; --lv-green: #5fe3ac; }
.lv-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.lv-steps li { font-family: var(--lv-roman); font-size: 0.54rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lv-soft);
  padding: 5px 10px; border: 1px solid var(--lv-line2); border-radius: 2px; display: flex; gap: 8px; align-items: center; }
.lv-steps li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lv-line2); }
.lv-steps li.is-on { color: var(--lv-gold-b); border-color: var(--lv-gold); }
.lv-steps li.is-on::before { background: var(--lv-gold); box-shadow: 0 0 8px var(--lv-gold); }
.lv-steps li.is-done { color: var(--lv-muted); }
.lv-steps li.is-done::before { background: var(--lv-pourpre); }
.lv-panel { padding: 14px 16px; border: 1px solid var(--lv-line2); border-radius: 3px; background: var(--lv-panel); }
.lv-panel + .lv-panel { margin-top: 10px; }
.lv-panel.accent { border-color: rgba(231, 154, 192, 0.45); background: rgba(184, 85, 122, 0.10); }
.lv-panel.gold { border-color: var(--lv-line); background: rgba(214, 172, 85, 0.06); }
.lv-panel h4 { margin: 0 0 8px; font-family: var(--lv-roman); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lv-gold); }
.lv-panel p { margin: 0 0 8px; font-size: 0.92rem; }
.lv-panel p:last-child { margin-bottom: 0; }
.lv-quote { font-family: var(--lv-serif); font-style: italic; font-size: 1.02rem; line-height: 1.62; color: var(--lv-ink); margin: 0; }
.lv-quote mark { background: rgba(231, 154, 192, 0.22); color: var(--lv-ink); padding: 0 2px; border-radius: 2px; }
.lv-quote mark.ok { background: rgba(95, 227, 172, 0.22); }
.lv-quote mark.no { background: rgba(255, 107, 107, 0.22); }
.lv-opts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lv-opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 14px; border: 1px solid var(--lv-line2); border-radius: 3px;
  background: var(--lv-panel); color: var(--lv-parch); font-family: var(--lv-serif); font-size: 0.95rem; line-height: 1.5; transition: border-color .3s, background .3s; }
.lv-opt:hover:not(:disabled) { border-color: var(--lv-gold); }
.lv-opt:disabled { cursor: default; }
.lv-opt b { flex: none; font-family: var(--lv-roman); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--lv-soft); padding-top: 3px; min-width: 1.4em; }
.lv-opt.is-pick { border-color: var(--lv-pourpre); background: rgba(184, 85, 122, 0.12); }
.lv-opt.is-ok { border-color: var(--lv-green); background: rgba(95, 227, 172, 0.10); }
.lv-opt.is-no { border-color: var(--lv-red); background: rgba(255, 107, 107, 0.10); }
.lv-opt.is-dim { opacity: 0.55; }
.lv-textarea { width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; border: 1px solid var(--lv-line2); border-radius: 3px; background: var(--lv-void); color: var(--lv-parch); font-family: var(--lv-serif); font-size: 0.95rem; line-height: 1.5; }
.lv-input { width: 100%; padding: 9px 12px; border: 1px solid var(--lv-line2); border-radius: 3px; background: var(--lv-void); color: var(--lv-gold-b); font-family: var(--lv-mono); font-size: 1rem; }
.lv-big { font-family: var(--lv-roman); font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: 0.04em; color: var(--lv-gold-b); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lv-big small { display: block; font-family: var(--lv-roman); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--lv-soft); font-weight: 600; margin-top: 4px; }
.lv-bars { display: grid; gap: 8px; }
.lv-bar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 10px; align-items: center; font-size: 0.86rem; color: var(--lv-muted); }
.lv-bar i { display: block; height: 10px; border-radius: 2px; background: var(--lv-gold); transition: width .6s cubic-bezier(.22,1,.36,1); min-width: 2px; }
.lv-bar i.p { background: var(--lv-pourpre); }
.lv-bar i.ok { background: var(--lv-green); }
.lv-bar i.no { background: var(--lv-red); }
.lv-bar strong { font-family: var(--lv-mono); color: var(--lv-gold-b); font-weight: 500; font-variant-numeric: tabular-nums; }
.lv-chip { display: inline-block; font-family: var(--lv-roman); font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--lv-line); border-radius: 2px; color: var(--lv-gold); margin-right: 6px; }
.lv-chip.p { color: var(--lv-pourpre); border-color: rgba(231, 154, 192, 0.4); }
.lv-src { margin: 8px 0 0; font-family: var(--lv-mono); font-size: 0.7rem; color: var(--lv-soft); line-height: 1.5; }
.lv-src a { color: var(--lv-muted); }
.lv-private { margin: 10px 0 0; font-family: var(--lv-roman); font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lv-soft); display: flex; gap: 8px; align-items: center; }
.lv-private::before { content: "◇"; color: var(--lv-gold); }
.lv-timer { font-family: var(--lv-mono); font-size: clamp(1.4rem, 3.5vw, 2.2rem); color: var(--lv-gold-b); font-variant-numeric: tabular-nums; }
.lv-cards { display: grid; gap: 12px; }
@container (min-width: 640px) { .lv-cards.two { grid-template-columns: 1fr 1fr; } .lv-cards.three { grid-template-columns: repeat(3, 1fr); } }
.lv-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lv-hint { font-size: 0.86rem; color: var(--lv-soft); margin: 6px 0 0; }
.lv-people { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-people span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lv-line2); background: var(--lv-panel); display: grid; place-items: center; font-family: var(--lv-roman); font-size: 0.55rem; color: var(--lv-muted); }
.lv-people span.you { border-color: var(--lv-gold); color: var(--lv-gold-b); }
.lv-people span.wrong { border-color: var(--lv-red); color: var(--lv-red); }
.lv-people span.ally { border-color: var(--lv-green); color: var(--lv-green); }
.lv-frise { display: flex; flex-wrap: wrap; gap: 4px; }
.lv-frise button { font-family: var(--lv-roman); font-size: 0.56rem; letter-spacing: 0.08em; padding: 6px 8px; min-width: 44px; border: 1px solid var(--lv-line2); border-radius: 2px; background: var(--lv-panel); color: var(--lv-muted); }
.lv-frise button.is-on { border-color: var(--lv-gold); color: var(--lv-gold-b); background: rgba(214, 172, 85, 0.1); }
.lv-frise button.is-fam { border-color: rgba(231, 154, 192, 0.5); color: var(--lv-pourpre); }
.lv-counter { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: var(--lv-roman); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lv-soft); padding: 6px 10px; border: 1px solid var(--lv-line); border-radius: 2px; background: rgba(5, 8, 17, 0.8); }
.lv-counter b { font-family: var(--lv-mono); font-size: 1.1rem; color: var(--lv-gold-b); letter-spacing: 0; margin-left: 6px; font-variant-numeric: tabular-nums; }
.lv-marker { display: inline-block; font-family: var(--lv-mono); font-size: 0.66rem; color: var(--lv-pourpre); border: 1px solid rgba(231, 154, 192, 0.5); border-radius: 2px; padding: 0 4px; margin: 0 2px; vertical-align: super; cursor: help; }
.lv-scroll { max-height: 420px; overflow: auto; padding: 16px 18px; scrollbar-width: thin; }
.lv-scroll p { margin: 0 0 12px; font-family: var(--lv-serif); font-size: 1rem; line-height: 1.66; color: var(--lv-ink); }
.lv-scroll p.refrain { font-weight: 700; color: var(--lv-gold-b); }
.lv-scroll p.stage { font-style: italic; color: var(--lv-soft); }
.lv-scroll .lit { background: rgba(231, 154, 192, 0.20); border-bottom: 1px solid var(--lv-pourpre); }
.lv-subtitle { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 14px; background: rgba(5, 8, 17, 0.9); border-top: 1px solid var(--lv-line); font-family: var(--lv-roman); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lv-pourpre); min-height: 32px; }