/* ════════════════════════════════════════════════════════════════
   FICHIER : preview-theme.css
   ════════════════════════════════════════════════════════════════
   Aperçu de l'éditeur (#prev) et fenêtre d'aperçu externe : même
   habillage « classeur de cours » que les pages (lib/css/theme.css).
   Chaque fiche est une feuille à marge rouge, avec l'intercalaire de
   son thème (# du md) en haut ; titres surlignés (## et ### en
   rouge, #### en vert) ; admonitions arrondies.
   Tout est limité à .pv (conteneur de l'aperçu) ; « :is(#prev, #c) »
   passe devant les règles #prev … d'editor.css.
   Structure produite par editor-state.js (render).
   ════════════════════════════════════════════════════════════════ */

.pv {
  --pv-card: #fffefb; --pv-border: #ddd8cc; --pv-marge: #e07a7a;
  --surl-rouge: #ffc4bd; --surl-vert: #c4efb8;
  --t0: #c0392b; --t1: #2471a3; --t2: #1e8449; --t3: #d35400; --t4: #7d3c98;
  --t5: #138d75; --t6: #c2185b; --t7: #9a7d0a; --t8: #3f51b5; --t9: #8d5524;
}
/* fond : petits carreaux */
#prev-scroll.pv-bg, body.pv-bg {
  background-color: #f6f4ee;
  background-image:
    linear-gradient(rgba(44,111,173,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,111,173,.10) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* ── Une fiche : intercalaire + feuille ──────────────────── */
:is(#prev, #c).pv .pv-fiche { margin: 0 0 1.8rem; }
:is(#prev, #c).pv .pv-fiche:last-child { margin-bottom: .5rem; }
:is(#prev, #c).pv .pv-tab {
  position: relative; z-index: 1; display: inline-block; max-width: 80%;
  margin-bottom: -1px; padding: .45rem .95rem .5rem;
  background: var(--pv-card); color: var(--theme-c, var(--t1));
  border: 1px solid var(--pv-border); border-bottom: none; border-top: 4px solid var(--theme-c, var(--t1));
  border-radius: 12px 12px 0 0;
  font: 700 .72rem var(--font-sans); text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:is(#prev, #c).pv .pv-sheet {
  background-color: var(--pv-card);
  background-image: linear-gradient(90deg, transparent 32px, var(--pv-marge) 32px, var(--pv-marge) 34px, transparent 34px);
  border: 1px solid var(--pv-border); border-radius: 3px;
  padding: 1.2rem 1.4rem 1.3rem 52px;
  box-shadow: 0 1px 2px rgba(30,42,56,.08), 0 4px 14px rgba(30,42,56,.05);
}
:is(#prev, #c).pv .pv-tab + .pv-sheet { border-top-left-radius: 0; }

/* ── Titres surlignés ────────────────────────────────────── */
:is(#prev, #c).pv .fiche-hdr { border: none; padding: 0; margin: 0 0 1rem; }
:is(#prev, #c).pv .fiche-hdr h1 {
  display: inline; border: none; padding: 0 .12em; margin: 0 0 0 -.12em;
  font-size: 1.6em; font-weight: 800; line-height: 1.35; color: #1e2a38;
  background-image: linear-gradient(transparent 58%, var(--surl-rouge) 58%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:is(#prev, #c).pv h3, :is(#prev, #c).pv h4 {
  display: table; text-decoration: none; font-style: normal; border: none;
  padding: 0 .2em; margin-left: -.2em; color: #1e2a38;
}
:is(#prev, #c).pv h3 { font-weight: 800; margin-top: 1rem; background-image: linear-gradient(transparent 60%, var(--surl-rouge) 60%); }
:is(#prev, #c).pv h4 { background-image: linear-gradient(transparent 60%, var(--surl-vert) 60%); }
:is(#prev, #c).pv .pv-sheet > h3:first-child, :is(#prev, #c).pv .fiche-hdr + h3 { margin-top: 0; }

/* ── Admonitions arrondies et douces ─────────────────────── */
:is(#prev, #c).pv .admonition {
  border-radius: 14px; border-left-width: 5px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(30,42,56,.04), 0 4px 14px rgba(30,42,56,.06);
}
:is(#prev, #c).pv .admonition-title { padding: .45rem 1rem; letter-spacing: .08em; }
:is(#prev, #c).pv .admonition-body { padding: .85rem 1.05rem; }

/* QCM : formes de l'habillage */
:is(#prev, #c).pv .qcm-main, :is(#prev, #c).pv .qcm-sec, :is(#prev, #c).pv .qcm-option { border-radius: 8px !important; }