/* ─────────────────────────────────────────────────────────────────────
   APOLLINÉA  ·  feuille de styles partagée pour tous les cours
   Extraite de demo-cours-complet-v1.html — ne pas éditer en local
   sans répercuter dans toutes les sub.
   ───────────────────────────────────────────────────────────────────── */

/* =============================================================
   Démo : lecteur actuel à l'identique
   + UNIQUEMENT le plan apparent I/II/III/IV avec A/B/C.
   Rien d'autre n'est changé.
   ============================================================= */

:root {
  --lect-bg: #ffffff;
  --lect-bg-soft: #f5f5f7;
  --lect-bg-soft-2: #fafafc;
  --lect-line: #e8e6ef;
  --lect-line-soft: #f0eef5;

  --lect-violet: #6e4fe8;
  --lect-violet-deep: #4f31c8;
  --lect-violet-soft: #ede7ff;
  --lect-violet-tint: #f6f2ff;
  --lect-violet-ink: #2a1f58;

  --lect-ink: #1a1726;
  --lect-ink-soft: #4b4860;
  --lect-ink-faint: #8a87a0;

  --lect-success: #14a55c;
  --lect-success-soft: #dcfce7;
  --lect-warn: #e89409;
  --lect-warn-soft: #fef3c7;
  --lect-error: #e5283d;
  --lect-error-soft: #fee2e2;

  /* nouvelles palettes pour la dynamisation textuelle */
  --bordeaux: #8a2030;
  --bordeaux-deep: #6b1525;
  --prune: #7a1f50;
  --prune-deep: #5c1740;

  --font-display: 'Geist', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-mono-stack: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lect-bg-soft);
  color: var(--lect-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── Layout 3 colonnes ────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr) 300px;
  min-height: 100vh;
}

/* ─── Mode focus / plein écran ─────────────────────────── */
.app.focus-mode {
  grid-template-columns: 0 minmax(0, 1fr) 0;
}
.app.focus-mode .sidebar,
.app.focus-mode .aside {
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  border: 0;
  transition: opacity 0.25s ease;
}
.app.focus-mode .reading {
  max-width: 920px;
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.app.focus-mode .topbar {
  background: rgba(245, 245, 247, 0.65);
}
.sidebar, .aside {
  transition: opacity 0.3s ease 0.1s;
}
.app:not(.focus-mode) .aside {
  min-width: 0;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}
body.reader-aside-collapsed .app:not(.focus-mode) {
  grid-template-columns: 270px minmax(0, 1fr) 0;
}
body.reader-aside-collapsed .app:not(.focus-mode) .aside {
  overflow: hidden;
  border-left-color: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  pointer-events: none;
}
body.reader-aside-closing .app:not(.focus-mode) .aside {
  pointer-events: none;
  animation: readerAsideOut 0.28s cubic-bezier(0.4, 0, 1, 1) both;
}
body.reader-aside-opening .app:not(.focus-mode) .aside {
  animation: readerAsideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reading {
  transition: max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hint qui apparait en mode focus */
.focus-hint {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(26, 23, 38, 0.92);
  color: #fff;
  padding: 8px 16px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.focus-hint kbd {
  background: rgba(255, 255, 255, 0.15);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: var(--font-mono-stack);
  font-size: 10px;
  margin-left: 4px;
}
.app.focus-mode ~ .focus-hint,
.app.focus-mode .focus-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.focus-active .focus-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body.focus-active .focus-hint.fade {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}
/* ─── Sidebar ──────────────────────────────────────────── */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--lect-line);
  padding: 22px 16px 16px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.brandRow {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 20px 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--lect-line-soft);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.brandRow .brandGlyph,
.brandRow .brandText {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.brandRow:hover .brandGlyph {
  transform: translateX(-2px) rotate(-1.5deg);
}
.brandRow:hover .brandText {
  transform: translateX(2px);
}
.brandRow:active .brandGlyph,
.brandRow:active .brandText {
  transform: translateY(0.5px) scale(0.985);
}
.brandGlyph {
  width: 50px;
  height: 66px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brandSep {
  width: 1.5px;
  height: 38px;
  background: rgba(110, 79, 232, 0.32);
  border-radius: 1px;
  flex-shrink: 0;
}
.brandGlyph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brandText {
  display: flex;
  align-items: center;
  min-width: 0;
}
.brandName {
  display: block;
  height: 34px;
}
.brandName img {
  display: block;
  height: 100%;
  width: auto;
}
/* ─── Sélecteur de matière (refonte sans gradient) ─────── */
.matiereSwitch {
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(20, 16, 50, 0.05),
    0 8px 24px -10px rgba(20, 16, 50, 0.12);
  transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.22s ease;
  font-family: inherit;
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.matiereSwitch:hover {
  border-color: var(--lect-violet-soft);
  box-shadow:
    0 2px 4px rgba(79, 49, 200, 0.08),
    0 16px 32px -12px rgba(79, 49, 200, 0.28);
  transform: translateY(-1px);
}
.matiereSwitch-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--lect-violet-deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.matiereSwitch-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.matiereSwitch-label {
  font-family: var(--font-mono-stack);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lect-ink-faint);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.matiereSwitch-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.matiereSwitch-chev {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--lect-line);
  display: grid;
  place-items: center;
  color: var(--lect-ink-soft);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.matiereSwitch:hover .matiereSwitch-chev {
  background: #fff;
  color: var(--lect-violet-deep);
  border-color: var(--lect-violet-soft);
}

/* ─── Indicateur de progression (refonte sans gradient) ─ */
.progressBlock {
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow:
    0 1px 2px rgba(20, 16, 50, 0.05),
    0 8px 24px -10px rgba(20, 16, 50, 0.12);
  transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.progressBlock:hover {
  border-color: var(--lect-violet-soft);
  box-shadow:
    0 2px 4px rgba(79, 49, 200, 0.08),
    0 16px 32px -12px rgba(79, 49, 200, 0.28);
  transform: translateY(-1px);
}
.progressBlock-ring {
  position: relative;
  width: 42px; height: 42px;
  flex-shrink: 0;
}
.progressBlock-ring svg {
  transform: rotate(-90deg);
}
.progressBlock-ring .track {
  fill: none;
  stroke: var(--lect-violet-soft);
  stroke-width: 4;
}
.progressBlock-ring .arc {
  fill: none;
  stroke: var(--lect-violet-deep);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.progressBlock-ring .ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: 'Inter Tight', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--lect-violet-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.progressBlock-info {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.progressBlock-label {
  font-family: var(--font-mono-stack);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lect-ink-faint);
  font-weight: 600;
}
.progressBlock-stat {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.01em;
  margin-top: 3px;
}
.progressBlock-stat strong {
  font-weight: 600;
  color: var(--lect-violet-deep);
  font-variant-numeric: tabular-nums;
}
.progressBlock-sub {
  font-size: 10.5px;
  color: var(--lect-ink-faint);
  margin-top: 2px;
}

/* ─── Popup de navigation entre matières ─────────────── */
.matiereModal {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 38, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.matiereModal.open {
  display: flex;
  opacity: 1;
}
.matiereModal-content {
  background: #fff;
  border-radius: 22px;
  max-width: 720px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow:
    0 12px 64px -16px rgba(26, 23, 38, 0.3),
    0 8px 24px -8px rgba(26, 23, 38, 0.15);
  display: flex;
  flex-direction: column;
}
.matiereModal-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--lect-line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.matiereModal-title {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
}
.matiereModal-sub {
  font-size: 12.5px;
  color: var(--lect-ink-faint);
  margin: 3px 0 0;
}
.matiereModal-close {
  width: 32px; height: 32px;
  border-radius: 99px;
  background: var(--lect-bg-soft);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--lect-ink-soft);
  transition: background 0.15s ease;
}
.matiereModal-close:hover {
  background: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
}
.matiereModal-body {
  padding: 20px 24px 24px;
  overflow-y: auto;
}
.matiereModal-section {
  margin-bottom: 22px;
}
.matiereModal-section:last-child { margin-bottom: 0; }
.matiereModal-sectionLabel {
  font-family: var(--font-mono-stack);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lect-ink-faint);
  font-weight: 600;
  margin-bottom: 10px;
}
.matiereModal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.matiereCard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 13px;
  text-decoration: none;
  color: var(--lect-ink);
  transition: transform 0.18s cubic-bezier(.2,.8,.3,1), box-shadow 0.18s, border-color 0.18s;
  cursor: pointer;
}
.matiereCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(26, 23, 38, 0.3);
}
.matiereCard.active {
  border-color: var(--mc, var(--lect-violet));
  box-shadow: 0 0 0 1px var(--mc, var(--lect-violet));
}
.matiereCard.active::after {
  content: "";
  position: absolute;
  top: 9px; right: 11px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mc, var(--lect-violet));
}
.matiereCard-cover {
  width: 48px; height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
  background-size: 86%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--lect-bg-soft);
  box-shadow: inset 0 0 0 1px rgba(26, 23, 38, 0.07);
}
.matiereCard-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--lect-violet) 0%, var(--lect-violet-deep) 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
}
.matiereCard-info {
  min-width: 0;
  flex: 1;
}
.matiereCard-name {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.matiereCard-meta {
  font-size: 11px;
  color: var(--lect-ink-faint);
  display: flex;
  gap: 6px;
  align-items: center;
}
.matiereCard-meta .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mc, var(--lect-violet));
  flex-shrink: 0;
}
.matiereSwitch-icon.hasCover {
  background: var(--lect-bg-soft) center / 86% no-repeat;
  color: transparent;
}
.matiereCard.coming-soon {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}
.matiereCard.coming-soon .matiereCard-icon {
  background: linear-gradient(135deg, var(--lect-ink-faint) 0%, var(--lect-ink-soft) 100%);
}
.sectionLabel {
  font-family: var(--font-mono-stack);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lect-ink-faint);
  font-weight: 500;
  padding: 6px 6px 6px;
}
.navChap {
  display: grid;
  grid-template-columns: 22px 1fr 14px;
  align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--lect-ink); font-weight: 500;
  background: transparent; border: 0;
  width: 100%; text-align: left;
  font-family: inherit; cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.navChap:hover {
  background: var(--lect-violet-tint);
  transform: translateX(3px);
}
.navChap:hover .chevron {
  color: var(--lect-violet-deep);
  transform: translateX(2px);
}
.navChapStatus {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono-stack);
  font-size: 9.5px;
}
.statusActive { background: var(--lect-violet); color: #fff; }
.statusDone { background: var(--lect-success-soft); color: var(--lect-success); }
.statusFuture { background: var(--lect-bg-soft); color: var(--lect-ink-faint); }
.chevron {
  color: var(--lect-ink-faint);
  transition: color 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.navSections { padding-left: 32px; margin: 4px 0 8px; display: flex; flex-direction: column; }

/* Conteneur ligne section : flex avec lien + chevron */
.navSectionRow {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  transition: background 0.18s ease;
}
.navSectionRow.active { background: var(--lect-violet); }
.navSectionRow.active .navSectionLink { color: #fff; background: transparent; transform: none; }
.navSectionRow:not(.active):hover { background: var(--lect-violet-tint); }
.navSectionRow:not(.active):hover .navSectionLink { color: var(--lect-ink); transform: translateX(3px); }

.navSectionLink {
  flex: 1;
  min-width: 0;
  padding: 7px 4px 7px 10px;
  font-size: 13px;
  color: var(--lect-ink-faint);
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.navSectionTitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navSectionNum { font-family: var(--font-mono-stack); font-size: 10px; flex-shrink: 0; }

/* Bouton flèche pour toggle des subs */
.navSectionChev {
  flex-shrink: 0;
  width: 22px; height: 22px;
  margin-right: 6px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--lect-ink-faint);
  opacity: 0.6;
  transition: opacity 0.18s ease, background 0.18s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.navSectionChev:hover {
  opacity: 1;
  background: rgba(110, 79, 232, 0.08);
}
.navSectionChev.expanded {
  opacity: 1;
  transform: rotate(90deg);
}
.navSectionRow.active .navSectionChev {
  color: #fff;
  opacity: 0.9;
}
.navSectionRow.active .navSectionChev:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* Sous-subs (niveau 1.1.1, 1.1.2, etc.) — déployées via flèche */
.navSubs {
  padding-left: 20px;
  margin: 2px 0 6px 18px;
  display: flex; flex-direction: column;
  gap: 1px;
  border-left: 1px solid rgba(110, 79, 232, 0.22);
}
.navSubLink {
  padding: 5px 8px 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--lect-ink-faint);
  font-weight: 400;
  display: flex; align-items: center; gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.16s ease, color 0.16s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.navSubLink:not(.active):hover {
  background: var(--lect-violet-tint);
  color: var(--lect-ink);
  transform: translateX(2px);
}
.navSubLink.active {
  background: rgba(110, 79, 232, 0.12);
  color: var(--lect-violet-deep);
  font-weight: 600;
}
.navSubNum {
  font-family: var(--font-mono-stack);
  font-size: 9.5px;
  opacity: 0.8;
  flex-shrink: 0;
}

/* navChap a maintenant cursor: pointer (toggle au clic) */
.navChap { cursor: pointer; }
.navChap .chevron { transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); }

/* ─── Main ─────────────────────────────────────────────── */
.main { background: var(--lect-bg-soft); min-height: 100vh; }
/* ═══════════════════════════════════════════════════════════
   TOPBAR (refonte Apple : breadcrumb · search · actions
   ═══════════════════════════════════════════════════════════ */
.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 12px 32px;
  border-bottom: 1px solid var(--lect-line-soft);
  background: rgba(245, 245, 247, 0.85);
  position: sticky; top: 0; z-index: 10;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ─── Topbar gauche : home + dark mode ──────────────── */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.topbar-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--lect-line);
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lect-ink);
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
}
.topbar-home:hover {
  background: #fff;
  border-color: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(110, 79, 232, 0.15);
}
.topbar-home:hover .topbar-home-icon {
  background: var(--lect-violet);
  color: #fff;
}
.topbar-home-icon {
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
  transition: background 0.18s ease, color 0.18s ease;
}
/* ─── Toggle thème (style iOS switch, monochrome violet) ─ */
.theme-toggle {
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 99px;
  background: var(--lect-violet-soft);
  border: 1px solid var(--lect-violet-soft);
  padding: 0;
  cursor: pointer;
  transition: background 0.32s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(110, 79, 232, 0.06);
}
.theme-toggle:hover {
  background: var(--lect-violet-tint);
}
.theme-toggle.dark {
  background: linear-gradient(135deg, var(--lect-violet) 0%, var(--lect-violet-deep) 100%);
  border-color: var(--lect-violet-deep);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.theme-toggle.dark:hover {
  background: linear-gradient(135deg, var(--lect-violet-deep) 0%, #3d24a8 100%);
}

.theme-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 2px 4px rgba(26, 23, 38, 0.18),
    0 1px 1px rgba(26, 23, 38, 0.06);
  display: grid;
  place-items: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}
.theme-toggle.dark .theme-toggle-thumb {
  transform: translateX(22px);
  background: #fff;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.3),
    0 1px 1px rgba(0, 0, 0, 0.12);
}
.theme-toggle-thumb svg {
  position: absolute;
  width: 13px;
  height: 13px;
  transition: opacity 0.22s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-toggle-thumb .icon-sun {
  color: var(--lect-violet-deep);
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.theme-toggle-thumb .icon-moon {
  color: var(--lect-violet-deep);
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.theme-toggle.dark .theme-toggle-thumb .icon-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
.theme-toggle.dark .theme-toggle-thumb .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* Breadcrumb (gauche) */
.topbar-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--lect-ink-faint);
  font-weight: 500;
  min-width: 0;
}
.topbar-crumbs a {
  color: var(--lect-ink-faint);
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-crumbs a:hover {
  color: var(--lect-violet-deep);
}
.topbar-crumbs strong {
  color: var(--lect-ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-crumbs .sep {
  color: var(--lect-line);
  font-size: 13px;
  user-select: none;
}

/* Search (centre) */
.search {
  width: 380px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 999px;
  padding: 7px 14px;
  color: var(--lect-ink-faint);
  font-size: 12.5px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  cursor: text;
  justify-self: center;
}
.search:hover, .search:focus-within {
  border-color: var(--lect-violet-soft);
  box-shadow: 0 0 0 4px rgba(110, 79, 232, 0.06);
}
.search-icon { color: var(--lect-ink-faint); flex-shrink: 0; }
.search-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  color: var(--lect-ink);
}
.search-input::placeholder { color: var(--lect-ink-faint); }
.search kbd {
  font-family: var(--font-mono-stack);
  font-size: 10px;
  background: var(--lect-bg-soft);
  padding: 2px 7px;
  border-radius: 6px;
  color: var(--lect-ink-soft);
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--lect-line-soft);
  flex-shrink: 0;
}

/* Actions (droite) */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-self: end;
}
.readerTopbarInner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-plan-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}
.readerAsideScrim { display: none; }
.readerAsideClose { display: none; }
.readerAsideCollapse {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 0;
  width: 20px;
  height: 54px;
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d9d7e1;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: #625d70;
  background: #ececf1;
  box-shadow: -5px 4px 14px -9px rgba(26, 23, 38, 0.32);
  cursor: pointer;
  transform: translate(-100%, -50%);
  transition:
    color 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.readerAsideCollapse:hover {
  color: var(--lect-violet-deep);
  border-color: #cfc9e5;
  background: #e4e1ee;
}
.readerAsideCollapse svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.readerAsideCollapse:hover svg {
  transform: translateX(1.5px);
}
.readerAsideCollapse:active svg {
  transform: translateX(2px) scale(0.92);
}
.topbar-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--lect-ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar-btn:hover {
  background: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
}
.topbar-btn.active {
  background: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
}
.topbar-plan-btn { display: none; }
body.reader-aside-collapsed .topbar-plan-btn {
  display: inline-flex;
  width: auto;
  padding: 0 11px;
  gap: 7px;
  animation: readerPlanButtonIn 0.2s ease-out 0.04s both;
}
.app.focus-mode .topbar-plan-btn { display: none; }
@keyframes readerAsideOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(24px);
  }
}
@keyframes readerAsideIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes readerPlanButtonIn {
  from {
    opacity: 0;
    transform: translateX(5px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.reader-aside-closing .app:not(.focus-mode) .aside,
  body.reader-aside-opening .app:not(.focus-mode) .aside,
  body.reader-aside-collapsed .topbar-plan-btn {
    animation: none;
  }
}
/* ─── Icônes brandées Apollinéa (SVG /public/svg/) ──────── */
/* On utilise mask-image plutôt qu'<img> : le SVG sert de forme, la couleur
   est contrôlée en CSS. Permet d'avoir une couleur plus contrastée que la
   mauve native (#7A6B8A) qui était trop claire/grise dans la topbar. */
.apo-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--lect-ink-soft);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  pointer-events: none;
  user-select: none;
  transition: background-color 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.topbar-btn .apo-icon {
  width: 20px;
  height: 20px;
}
.topbar-btn:hover .apo-icon {
  background-color: var(--lect-violet-deep);
  transform: scale(1.08);
}
.topbar-btn.active .apo-icon,
.topbar-btn[aria-pressed="true"] .apo-icon {
  background-color: var(--lect-violet-deep);
}
.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--lect-line);
  margin: 0 4px;
}
.topbar-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--lect-success-soft);
  color: var(--lect-success);
  border-radius: 99px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-right: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.topbar-status-pill:hover {
  filter: brightness(0.95);
}
.topbar-status-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lect-success);
}
.reading {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 48px 120px;
}

/* ─── Section card ─────────────────────────────────────── */
.sectionCard {
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 28px;
  overflow: visible; /* changé pour permettre au tooltip glossaire de dépasser */
  box-shadow: 0 1px 2px rgba(26, 23, 38, 0.04), 0 8px 32px -8px rgba(26, 23, 38, 0.06);
}
.tabs {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  overflow: hidden;
}
.tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  border-bottom: 1px solid var(--lect-line);
  padding: 0 24px;
}
.tab {
  padding: 18px 4px;
  font-size: 13.5px; font-weight: 500;
  color: var(--lect-ink-faint);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
}
.tab.active {
  color: var(--lect-violet);
  border-bottom-color: var(--lect-violet);
  font-weight: 600;
}
.tabCount {
  font-family: var(--font-mono-stack);
  font-size: 10px;
  background: var(--lect-bg-soft);
  color: var(--lect-ink-faint);
  padding: 2px 7px;
  border-radius: 999px;
}
.tab.active .tabCount {
  background: var(--lect-violet-soft);
  color: var(--lect-violet);
}
.sectionBody { padding: 32px 72px 64px; }

/* ─── Hero ─────────────────────────────────────────────── */
/* Hero) badge pill style Apple */
.sectionHero {
  position: relative;
  padding: 0 0 28px;
  border-bottom: 1px solid var(--lect-line-soft);
  margin-bottom: 40px;
}
.sectionHero::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 64px; height: 2px;
  background: var(--lect-violet);
  border-radius: 999px;
}
.sectionHeroNum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 5px;
  background: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
  border-radius: 999px;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
  border: 1px solid rgba(110, 79, 232, 0.12);
}
.sectionHeroNum::before {
  content: "§";
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  color: var(--lect-violet);
  margin-right: 1px;
  line-height: 1;
}
.sectionHeroDot { display: none; }
.sectionEyebrow {
  font-family: var(--font-mono-stack);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lect-ink-faint);
  font-weight: 500;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.sectionEyebrow span:not(.sep) {
  color: var(--lect-ink);
  font-weight: 600;
}
.sectionEyebrow .sep {
  color: var(--lect-violet);
  margin: 0 8px;
  opacity: 0.6;
}
.sectionH {
  font-family: var(--font-serif);
  font-size: 52px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 18px;
  text-wrap: balance;
}
.sectionH em {
  font-style: italic;
  color: var(--lect-violet);
}
.sectionMeta {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--lect-ink-soft);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.sectionMeta strong { color: var(--lect-ink); font-weight: 600; }
.sectionMeta .sep {
  width: 1px;
  background: var(--lect-line);
  align-self: stretch;
}
.sectionMeta .pct {
  color: var(--lect-violet);
  font-weight: 600;
}

/* ─── À retenir ────────────────────────────────────────── */
.rappel {
  margin: 0 0 56px;
  padding: 18px 36px;
  background: var(--lect-violet-soft);
  border: 1px solid #d8ccff;
  border-radius: 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: visible; /* visible pour permettre aux popups aut/gloss de déborder */
}
.rappel::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 60%);
}
.rappelIcon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0 8px;
  filter: drop-shadow(0 4px 10px rgba(122, 107, 138, 0.25));
}
.rappelIcon img {
  display: block;
  height: 250px;
  width: auto;
}
.rappelLabel {
  font-family: var(--font-mono-stack);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lect-violet);
  font-weight: 600;
  margin-bottom: 12px;
}
.rappelText {
  font-family: var(--font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--lect-violet-ink);
  line-height: 1.5;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   PLAN APPARENT (la seule nouveauté de cette démo
   ═══════════════════════════════════════════════════════════ */

/* Niveau I) grand titre de partie */
.partTitle {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--lect-ink);
  line-height: 1.15;
  margin: 72px 0 28px;
  scroll-margin-top: 80px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lect-line-soft);
  position: relative;
}
.partTitle::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 44px; height: 2px;
  background: var(--lect-violet);
  border-radius: 999px;
}
.partTitle:first-of-type { margin-top: 0; }
.partTitle .roman {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--lect-violet);
  font-size: 0.75em;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

/* Niveau A (sous-section */
.partSection {
  margin-top: 44px;
}
.partSection:first-of-type {
  margin-top: 28px;
}
.partSectionTitle {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--lect-ink);
  line-height: 1.25;
  margin: 36px 0 18px;
  scroll-margin-top: 80px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
/* Premier sous-titre directement sous un .partTitle : pas besoin d'air en plus */
.partTitle + .partSectionTitle { margin-top: 18px; }
.partSectionTitle .letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--lect-violet);
  font-size: 0.8em;
  flex-shrink: 0;
}

/* ─── Prose ────────────────────────────────────────────── */
.prose {
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--lect-ink);
}
.prose p { margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; color: var(--lect-ink); }
.prose em { font-style: italic; color: var(--lect-ink-soft); }

/* Lettrine sur le premier paragraphe */
.firstProse p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 4.6em;
  font-weight: 600;
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.12em 0 -0.04em;
  color: var(--lect-violet);
  background: linear-gradient(180deg, var(--lect-violet) 0%, var(--lect-violet-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Encarts (identiques au lecteur actuel) ───────────── */
.definition,
.exempleEncart,
.citationEncart {
  margin: 26px 0;
  padding: 22px 26px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: start;
}
.encartIcon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.7);
}
.encartLabel {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.encartText {
  font-size: 15px;
  line-height: 1.7;
  color: var(--lect-ink);
}

.definition {
  background: var(--lect-violet-tint);
  border: 1px solid var(--lect-violet-soft);
}
.definition .encartIcon { color: var(--lect-violet); background: #fff; }
.definition .encartLabel { color: var(--lect-violet-ink); }

/* ═══════════════════════════════════════════════════════════
   EXEMPLES) style Apple : card blanche, ombre subtile,
   icône monochrome, typo claire, beaucoup de respiration
   ═══════════════════════════════════════════════════════════ */
.exemple {
  background: #f7f4ff;
  border: 1px solid rgba(110, 79, 232, 0.1);
  border-radius: 20px;
  padding: 22px 24px 22px 22px;
  margin: 28px 0;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  box-shadow:
    0 1px 2px rgba(110, 79, 232, 0.04),
    0 6px 20px -10px rgba(110, 79, 232, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.exemple:hover {
  box-shadow:
    0 1px 2px rgba(110, 79, 232, 0.06),
    0 12px 32px -8px rgba(110, 79, 232, 0.14);
  transform: translateY(-1px);
}
.exemple + .exemple { margin-top: 16px; }

.exemple-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(110, 79, 232, 0.14);
  color: var(--lect-violet);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.exemple-body { min-width: 0; }

.exemple-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--lect-violet);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.exemple-label .num {
  color: var(--lect-ink-faint);
  font-weight: 500;
  margin-left: 4px;
}

.exemple-titre {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--lect-ink);
  margin: 0 0 8px;
  line-height: 1.32;
}

.exemple-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lect-ink-soft);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   ARTICLE CITÉ (refonte Apple : card violet pâle,
   icône doc, ref discrète, texte serif italique élégant
   ═══════════════════════════════════════════════════════════ */
.article-cite {
  position: relative;
  background: #f7f4ff;
  border: 1px solid rgba(110, 79, 232, 0.1);
  border-radius: 20px;
  padding: 22px 24px 22px 22px;
  margin: 28px 0;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  box-shadow:
    0 1px 2px rgba(110, 79, 232, 0.04),
    0 6px 20px -10px rgba(110, 79, 232, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: visible; /* visible pour permettre aux popups aut/gloss de déborder */
}
.article-cite::after {
  content: "\201D";
  position: absolute;
  top: 18px;
  right: 26px;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 72px;
  line-height: 0.6;
  color: #ddd2ff;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
.article-cite:hover {
  box-shadow:
    0 1px 2px rgba(110, 79, 232, 0.06),
    0 12px 32px -8px rgba(110, 79, 232, 0.14);
  transform: translateY(-1px);
}

.article-cite-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(110, 79, 232, 0.14);
  color: var(--lect-violet);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.article-cite-body { min-width: 0; }

.article-cite-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.article-cite-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--lect-violet);
  letter-spacing: 0.01em;
}

.article-cite-ref {
  font-family: 'Inter Tight', sans-serif;
  font-style: italic;
  font-weight: 500;
  color: var(--lect-violet-deep);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.article-cite-ref::before {
  content: "·";
  color: var(--lect-ink-faint);
  margin-right: 8px;
  font-weight: 500;
}

.article-cite-text {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lect-ink);
  margin: 0;
  text-wrap: balance;
  position: relative;
  padding-left: 18px;
}
.article-cite-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(110, 79, 232, 0.35);
  border-radius: 99px;
}

/* ═══════════════════════════════════════════════════════════
   FALLBACK : structure plate sans .article-cite-body
   (Constit I et autres pages qui ne wrappent pas le contenu)
   On désactive la grille 36px+1fr et on passe en block.
   ═══════════════════════════════════════════════════════════ */
.article-cite:not(:has(> .article-cite-body)) {
  display: block;
  padding: 22px 26px;
}
.article-cite:not(:has(> .article-cite-body)) > .article-cite-label {
  display: inline;
}
.article-cite:not(:has(> .article-cite-body)) > .article-cite-ref {
  display: inline;
}
.article-cite:not(:has(> .article-cite-body)) > .article-cite-text {
  display: block;
  margin-top: 14px;
}

/* Variante chap 3+ : <div class="article-head"> + <blockquote> */
.article-cite > .article-head {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--lect-violet);
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 12px;
}
.article-cite > blockquote {
  display: block;
  margin: 0;
  padding-left: 18px;
  position: relative;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lect-ink);
  text-wrap: balance;
}
.article-cite > blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: rgba(110, 79, 232, 0.35);
  border-radius: 99px;
}
.article-cite > blockquote .article-trad {
  display: inline;
  color: var(--lect-violet-deep);
  font-size: 14px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   PIÈGES) style Apple : card blanche, accent orange iOS
   ═══════════════════════════════════════════════════════════ */
.piege {
  background: #fcecec;
  border: 1px solid rgba(255, 59, 48, 0.1);
  border-radius: 20px;
  padding: 22px 24px 22px 22px;
  margin: 28px 0;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
  box-shadow:
    0 1px 2px rgba(255, 59, 48, 0.04),
    0 6px 20px -10px rgba(255, 59, 48, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.piege:hover {
  box-shadow:
    0 1px 2px rgba(255, 59, 48, 0.06),
    0 12px 32px -8px rgba(255, 59, 48, 0.14);
  transform: translateY(-1px);
}
.piege + .piege { margin-top: 16px; }

.piege-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 59, 48, 0.12);
  color: #d6332c;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.piege-body { min-width: 0; }

.piege-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: #d6332c;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.piege-label .num {
  color: var(--lect-ink-faint);
  font-weight: 500;
  margin-left: 4px;
}

.piege-titre {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--lect-ink);
  margin: 0 0 8px;
  line-height: 1.32;
}

.piege-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--lect-ink-soft);
  margin: 0;
}
.piege-text strong {
  font-weight: 600;
  color: var(--lect-ink);
}

/* ─── Footer section ───────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   FOOTER de section (refonte style Apple
   Cards arrondies, ombres douces, pills cliquables
   ═══════════════════════════════════════════════════════════ */
.sectionFoot {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--lect-line);
}
.sectionFootTitle {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--lect-ink-faint);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.sectionFootGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.footCard {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow:
    0 1px 2px rgba(26, 23, 38, 0.03),
    0 4px 16px -8px rgba(26, 23, 38, 0.05);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.footCard:hover {
  box-shadow:
    0 1px 2px rgba(26, 23, 38, 0.04),
    0 8px 24px -8px rgba(26, 23, 38, 0.08);
  transform: translateY(-1px);
}
.footCardHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.footCardIcon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--lect-violet-soft);
  color: var(--lect-violet);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.footCardLabel {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--lect-ink);
  flex: 1;
}
.footCardCount {
  font-family: var(--font-mono-stack);
  font-size: 10.5px;
  color: var(--lect-ink-faint);
  background: var(--lect-bg-soft);
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 500;
}
.footCardList {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 13.5px;
  line-height: 1.5;
}
.footCardList .pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--lect-bg-soft);
  border-radius: 99px;
  color: var(--lect-ink-soft);
  font-size: 12.5px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.footCardList .pill:hover {
  background: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
}

/* Renvois en cards Apple */
.renvois {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.renvoi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  font-size: 13.5px;
  color: var(--lect-ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(26, 23, 38, 0.03);
  transition: all 0.18s ease;
}
.renvoi:hover {
  border-color: rgba(110, 79, 232, 0.2);
  box-shadow: 0 4px 16px -6px rgba(110, 79, 232, 0.18);
  transform: translateY(-1px);
}
.renvoiNum {
  font-family: 'Inter Tight', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--lect-violet);
  background: var(--lect-violet-soft);
  padding: 3px 9px;
  border-radius: 99px;
  flex-shrink: 0;
}
.renvoi-arrow {
  margin-left: auto;
  color: var(--lect-ink-faint);
  font-size: 14px;
  transition: transform 0.18s ease, color 0.18s ease;
}
.renvoi:hover .renvoi-arrow {
  color: var(--lect-violet);
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════
   NAV prev / next) refonte avec animation
   ═══════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────
   SECTION NAV  ·  cartes Précédent / Suivant (refonte)
   Pastille icône bien marquée, hover qui colore vraiment.
   ───────────────────────────────────────────────────────── */
.sectionNav {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sectionNav a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 16px;
  text-decoration: none;
  transition:
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.22s ease;
}
.sectionNav .next {
  grid-template-columns: 1fr auto;
  text-align: right;
}
.sectionNav a:hover {
  background: var(--lect-violet-tint);
  border-color: var(--lect-violet-soft);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px -14px rgba(79, 49, 200, 0.32);
}
.sectionNavBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sectionNavMeta {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--lect-violet-deep);
}
.sectionNavTarget {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.sectionNavArrow {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--lect-violet-soft);
  color: var(--lect-violet-deep);
  display: grid;
  place-items: center;
  font-size: 0;       /* on cache le caractère, on dessine via svg */
  flex-shrink: 0;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sectionNavArrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sectionNav .prev:hover .sectionNavArrow {
  background: var(--lect-violet-deep);
  color: #fff;
  transform: translateX(-3px);
}
.sectionNav .next:hover .sectionNavArrow {
  background: var(--lect-violet-deep);
  color: #fff;
  transform: translateX(3px);
}

/* ─── Aside ────────────────────────────────────────────── */
.aside {
  background: #fff;
  border-left: 1px solid var(--lect-line);
  padding: 0;
  display: block;
  position: sticky; top: 0;
  z-index: 11;
  height: 100vh;
  overflow: visible;
}
.readerAsideScroll {
  width: 100%;
  height: 100%;
  padding: 12px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
}
.asideCard {
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 16px;
  padding: 18px 20px;
}
.asideH {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: var(--lect-ink);
  margin-bottom: 14px;
}
.asideHIcon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--lect-violet-soft);
  color: var(--lect-violet);
  display: grid; place-items: center;
}
.tocList { display: flex; flex-direction: column; gap: 4px; }
.tocItem {
  display: flex; gap: 8px;
  padding: 5px 0 5px 10px;
  font-size: 12.5px;
  color: var(--lect-ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -10px;
  transition:
    color 0.18s ease,
    border-left-color 0.22s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.tocItem:not(.active):hover {
  color: var(--lect-ink);
  border-left-color: var(--lect-violet-soft);
  transform: translateX(2px);
}
.tocItem.active {
  border-left-color: var(--lect-violet);
  color: var(--lect-violet);
  font-weight: 500;
}
.tocIntro {
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 13px;
}
.tocItem .roman {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--lect-violet);
  font-size: 12px;
  flex-shrink: 0;
}
.tocL2 { padding-left: 24px; font-size: 12px; color: var(--lect-ink-faint); }

/* ─── Card profil utilisateur (aside, en haut) ─────── */
/* Pages statiques : leur profil d'exemple (lien /demo-profil.html) reste masqué tant
   que _track.js n'a pas trouvé de vrai nom. Le lecteur React a son propre bloc, qui
   pointe vers /app/profil et n'est pas concerné. */
a.asideProfile[href="/demo-profil.html"]:not(.apo-profil-connu) {
  display: none;
}

.asideProfile {
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(20, 16, 50, 0.05),
    0 8px 24px -10px rgba(20, 16, 50, 0.12);
  transition: border-color 0.18s ease, box-shadow 0.22s ease, transform 0.22s ease;
  text-decoration: none;
  color: inherit;
}
.asideProfile *,
.asideProfile *::before,
.asideProfile *::after {
  text-decoration: none !important;
}
.asideProfile:hover {
  border-color: var(--lect-violet-soft);
  box-shadow:
    0 2px 4px rgba(79, 49, 200, 0.08),
    0 16px 32px -12px rgba(79, 49, 200, 0.28);
  transform: translateY(-1px);
}
.asideProfile-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--lect-violet-deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.asideProfile-avatar::after {
  /* statut online */
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lect-success);
  border: 2px solid #fff;
  bottom: 12px;
  left: 44px;
}
.asideProfile-info {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.asideProfile-name {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asideProfile-meta {
  font-size: 11px;
  color: var(--lect-ink-soft);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.asideProfile-meta .pill {
  font-family: var(--font-mono-stack);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(110, 79, 232, 0.1);
  color: var(--lect-violet-deep);
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 600;
}
.asideProfile-action {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--lect-line);
  display: grid;
  place-items: center;
  color: var(--lect-ink-soft);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.asideProfile:hover .asideProfile-action {
  background: #fff;
  color: var(--lect-violet-deep);
  border-color: var(--lect-violet-soft);
}

/* ─── Glossaire condensé dans aside ─────────────────── */
.asideGlossList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asideGlossItem {
  padding: 8px 10px;
  background: var(--lect-bg-soft);
  border-radius: 8px;
  font-size: 12px;
  cursor: help;
  transition: background 0.15s ease;
}
.asideGlossItem:hover {
  background: var(--lect-violet-soft);
}
.asideGlossTerm {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--lect-violet-deep);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.asideGlossPreview {
  font-size: 11px;
  color: var(--lect-ink-faint);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Fiches d'arrêts dans aside ──────────────────── */
.asideArretList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.asideArretCard {
  display: block;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #f0e6d3;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.asideArretCard:hover {
  border-color: #c79a3a;
  background: #fdf6e9;
  transform: translateX(2px);
}
.asideArretRef {
  font-family: 'Inter Tight', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
  display: block;
}
.asideArretTitle {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--lect-ink);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ─────────────────────────────────────────────────────────
   ASIDE  ·  S'entraîner sur la section
   Bloc CTA actif (pas une carte d'info passive). Fond dégradé
   violet, icône cible en pastille, flèche qui s'anime au hover.
   ───────────────────────────────────────────────────────── */
.asideTrain {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 16px 16px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--lect-violet) 0%, var(--lect-violet-deep) 100%);
  text-decoration: none;
  color: #fff;
  box-shadow: 0 1px 0 rgba(20, 16, 50, 0.04), 0 10px 28px -16px rgba(79, 49, 200, 0.45);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.18s ease;
}
.asideTrain:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(20, 16, 50, 0.04), 0 14px 32px -14px rgba(79, 49, 200, 0.55);
}
/* Matiere dont les questions ne sont pas encore produites : meme bloc, mais
   il n'invite pas a cliquer et n'annonce aucun chiffre. */
.asideTrain.is-soon {
  background: linear-gradient(135deg, #6b6880 0%, #4d4a60 100%);
  box-shadow: none;
  cursor: default;
  grid-template-columns: 44px 1fr;
}
.asideTrain.is-soon:hover {
  transform: none;
  box-shadow: none;
}
.asideTrain.is-soon .asideTrain-meta {
  opacity: 0.75;
}
.asideTrain-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
}
.asideTrain-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.asideTrain-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.asideTrain-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
  margin-top: 2px;
}
.asideTrain-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.asideTrain-meta strong {
  font-weight: 600;
  color: #fff;
}
.asideTrain-sep {
  color: rgba(255, 255, 255, 0.5);
}
.asideTrain-arrow {
  font-size: 18px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.asideTrain:hover .asideTrain-arrow {
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════
   GLOSSAIRE (mot surligné + popup au survol
   ═══════════════════════════════════════════════════════════ */

.gloss {
  position: relative;
  cursor: help;
  color: var(--lect-ink);
  font-weight: 500;
  /* surlignage type marqueur) bande violet pâle sur la partie basse du mot */
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 55%,
    var(--lect-violet-soft) 55%,
    var(--lect-violet-soft) 92%,
    transparent 92%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 3px;
  transition: background-image 0.22s ease, color 0.18s ease;
}
.gloss:hover {
  color: var(--lect-violet-deep);
  /* au survol : le marqueur monte et couvre tout le mot avec un ton un peu plus marqué */
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    var(--lect-violet-soft) 0%,
    var(--lect-violet-soft) 100%
  );
}

.gloss-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 300px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  padding: 14px 16px 12px;
  box-shadow:
    0 12px 32px -8px rgba(26, 23, 38, 0.18),
    0 4px 12px -4px rgba(26, 23, 38, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  /* délai de grâce à la disparition : le curseur a le temps de rejoindre la carte */
  transition: opacity 0.18s ease 0.16s, transform 0.18s ease 0.16s;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font-weight: 400;
}
.gloss-popup::after {
  /* petite flèche pointant vers le mot */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 1px rgba(26, 23, 38, 0.08));
}
.gloss-popup::before {
  /* PONT DE SURVOL invisible : comble tout l'espace entre le mot et la carte,
     sur la pleine largeur de la carte (et un peu au-delà), pour qu'on puisse
     monter vers elle sans qu'elle disparaisse — et y sélectionner du texte.
     Actif uniquement quand la carte l'est (hérite de pointer-events). */
  content: "";
  position: absolute;
  top: 100%;
  left: -16px;
  right: -16px;
  height: 20px;
}

.gloss:hover .gloss-popup,
.gloss:focus-within .gloss-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  /* apparition immédiate (le délai ne s'applique qu'à la disparition) */
  transition-delay: 0s;
}
/* tant qu'on est sur la carte elle-même, elle reste (et le pont aussi) */
.gloss-popup:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

.gloss-popup-term {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--lect-violet-deep);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.gloss-popup-def {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lect-ink-soft);
  font-style: normal;
}

.gloss-popup-link {
  font-family: var(--font-mono-stack);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lect-violet);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--lect-line-soft);
  transition: color 0.15s ease, gap 0.15s ease;
}
.gloss-popup-link:hover {
  color: var(--lect-violet-deep);
  gap: 8px;
}
.gloss-popup-link::after {
  content: "→";
  font-family: var(--font-display);
}

/* ═══════════════════════════════════════════════════════════
   ARTICLES (Inter Tight italique violet
   ═══════════════════════════════════════════════════════════ */

.art {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
  color: var(--lect-violet-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
  font-size: 0.97em;
}
.art:hover {
  color: var(--lect-violet);
}

/* ═══════════════════════════════════════════════════════════
   ARRÊTS) Inter Tight italique bordeaux
   ═══════════════════════════════════════════════════════════ */
.arr {
  position: relative;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-weight: 500;
  color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  cursor: pointer;
  font-size: 0.97em;
  transition: color 0.18s ease;
}
.arr:hover {
  color: var(--bordeaux-deep);
}

.arr-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 320px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 12px 32px -8px rgba(26, 23, 38, 0.18),
    0 4px 12px -4px rgba(26, 23, 38, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-weight: 400;
  font-style: normal;
}
.arr-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 1px rgba(26, 23, 38, 0.08));
}
.arr-popup::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--lect-line);
  z-index: -1;
}
.arr:hover .arr-popup,
.arr:focus-within .arr-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.arr-popup-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bordeaux-deep);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-decoration: none;
}
.arr-popup-summary {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lect-ink-soft);
  text-decoration: none;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   AUTEURS (souligné fin prune + popup biographique
   ═══════════════════════════════════════════════════════════ */
.aut {
  position: relative;
  color: var(--prune);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(122, 31, 80, 0.4);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: help;
  transition: color 0.18s ease, text-decoration-color 0.18s ease, text-decoration-thickness 0.18s ease;
}
.aut:hover {
  color: var(--prune-deep);
  text-decoration-color: var(--prune);
  text-decoration-thickness: 1.5px;
}

.aut-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 290px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 12px 32px -8px rgba(26, 23, 38, 0.18),
    0 4px 12px -4px rgba(26, 23, 38, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-weight: 400;
}
.aut-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 1px rgba(26, 23, 38, 0.08));
}
.aut-popup::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--lect-line);
  z-index: -1;
}

.aut:hover .aut-popup,
.aut:focus-within .aut-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.aut-popup-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--prune-deep);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
}
.aut-popup-role {
  font-family: var(--font-mono-stack);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lect-ink-faint);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 2px;
}
.aut-popup-bio {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lect-ink-soft);
  text-decoration: none;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════
   LOIS NOMMÉES) Inter Tight italique 400 violet pâle
   ═══════════════════════════════════════════════════════════ */
.loi {
  position: relative;
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-weight: 400;
  color: var(--lect-violet);
  cursor: pointer;
  white-space: normal;
  overflow-wrap: break-word;
  transition: color 0.18s ease;
}
.loi:hover {
  color: var(--lect-violet-deep);
}

/* ═══════════════════════════════════════════════════════════
   POPUPS COMPLÉMENTAIRES (constit-2, IJ)
   loi-popup (conteneur tooltip, miroir de .arr-popup) +
   sous-éléments aux noms alternatifs alignés sur l'existant
   ═══════════════════════════════════════════════════════════ */
.loi-popup {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  width: 320px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 12px 32px -8px rgba(26, 23, 38, 0.18),
    0 4px 12px -4px rgba(26, 23, 38, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  font-weight: 400;
  font-style: normal;
  white-space: normal;
}
.loi-popup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 1px rgba(26, 23, 38, 0.08));
}
.loi-popup::before {
  content: "";
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--lect-line);
  z-index: -1;
}
.loi:hover .loi-popup,
.loi:focus-within .loi-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.loi-popup-ref {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--lect-violet-deep);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-decoration: none;
}
.loi-popup-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lect-ink-soft);
  text-decoration: none;
  font-style: normal;
  white-space: normal;
}

/* Sous-éléments arr-popup alternatifs (constit-2) */
.arr-popup-ref,
.arr-popup-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--bordeaux-deep);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-decoration: none;
}
.arr-popup-court,
.arr-popup-bio,
.arr-popup-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lect-ink-soft);
  text-decoration: none;
  font-style: normal;
}

/* gloss-popup alternatifs (constit-2) */
.gloss-popup-name {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--lect-violet-deep);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.gloss-popup-text {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lect-ink-soft);
  font-style: normal;
}

/* aut-popup-dates (IJ) → style discret, comme aut-popup-role mais sans capitales */
.aut-popup-dates {
  font-family: var(--font-mono-stack);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--lect-ink-faint);
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════
   LATIN (italique Lora encre normale (convention typo pure)
   ═══════════════════════════════════════════════════════════ */
.lat {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   PHRASE CLÉ) filet vertical violet, sans fond
   ═══════════════════════════════════════════════════════════ */
.prose p.cle,
p.cle,
.cle {
  display: block;
  border-left: 3px solid var(--lect-violet);
  padding: 4px 0 4px 18px;
  margin: 18px 0;
  font-weight: 500;
  color: var(--lect-ink);
  font-size: 1.02em;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────
   TABLEAU COMPARATIF  ·  Apple-like, blanc, ombres subtiles
   ───────────────────────────────────────────────────────── */
.compareWrap {
  margin: 36px 0 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--lect-line);
  overflow: visible; /* visible pour permettre aux popups aut/gloss de déborder */
  box-shadow: 0 1px 0 rgba(20, 16, 50, 0.02), 0 8px 28px -18px rgba(46, 31, 88, 0.18);
}
.compareHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--lect-line-soft);
  background: linear-gradient(180deg, #fdfcff 0%, #fafafc 100%);
}
.compareHead-icon {
  width: 26px;
  height: 26px;
  background: var(--lect-violet-deep);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.compareHead-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--lect-ink);
  letter-spacing: -0.005em;
}
.compareHead-sub {
  font-size: 12px;
  color: var(--lect-ink-faint);
  margin-left: auto;
  letter-spacing: 0.01em;
}
.compareTable {
  display: grid;
  grid-template-columns: 1.3fr 2fr 2fr 1.8fr;
}
.compareTable > div {
  padding: 13px 18px;
  border-bottom: 1px solid var(--lect-line-soft);
  border-right: 1px solid var(--lect-line-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--lect-ink-soft);
}
.compareTable > div:nth-child(4n) { border-right: 0; }
.compareTable > div:nth-last-child(-n+4) { border-bottom: 0; }

/* Tableau à 3 colonnes (détection automatique via :has) */
.compareTable:has(> .compareTH:nth-child(3)):not(:has(> .compareTH:nth-child(4))) {
  grid-template-columns: 1fr 2fr 2fr;
}
.compareTable:has(> .compareTH:nth-child(3)):not(:has(> .compareTH:nth-child(4))) > div:nth-child(4n) { border-right: 1px solid var(--lect-line-soft); }
.compareTable:has(> .compareTH:nth-child(3)):not(:has(> .compareTH:nth-child(4))) > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--lect-line-soft); }
.compareTable:has(> .compareTH:nth-child(3)):not(:has(> .compareTH:nth-child(4))) > div:nth-child(3n) { border-right: 0; }
.compareTable:has(> .compareTH:nth-child(3)):not(:has(> .compareTH:nth-child(4))) > div:nth-last-child(-n+3) { border-bottom: 0; }

/* Tableau à 2 colonnes */
.compareTable:has(> .compareTH:nth-child(2)):not(:has(> .compareTH:nth-child(3))) {
  grid-template-columns: 1fr 1fr;
}
.compareTable:has(> .compareTH:nth-child(2)):not(:has(> .compareTH:nth-child(3))) > div:nth-child(4n) { border-right: 1px solid var(--lect-line-soft); }
.compareTable:has(> .compareTH:nth-child(2)):not(:has(> .compareTH:nth-child(3))) > div:nth-last-child(-n+4) { border-bottom: 1px solid var(--lect-line-soft); }
.compareTable:has(> .compareTH:nth-child(2)):not(:has(> .compareTH:nth-child(3))) > div:nth-child(2n) { border-right: 0; }
.compareTable:has(> .compareTH:nth-child(2)):not(:has(> .compareTH:nth-child(3))) > div:nth-last-child(-n+2) { border-bottom: 0; }
.compareTable .compareTH {
  background: var(--lect-violet-tint);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lect-violet-deep);
  padding: 10px 18px;
}
.compareTable .compareTheorist {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--lect-ink);
  font-size: 13.5px;
}
.compareTable .compareTheorist .compareYear {
  display: block;
  font-family: var(--font-mono-stack);
  font-weight: 400;
  font-size: 11px;
  color: var(--lect-ink-faint);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.compareTable .compareKey {
  color: var(--lect-violet-deep);
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────
   FRISE CHRONOLOGIQUE  ·  œuvres majeures sur un axe horizontal
   ───────────────────────────────────────────────────────── */
.frise {
  margin: 32px 0 28px;
  padding: 30px 24px 26px;
  background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  position: relative;
}
.frise-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
}
.frise-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lect-violet-deep);
}
.frise-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.01em;
}
/* La ligne horizontale et les ronds doivent partager exactement
   le même plan vertical. On rend .frise-items relative et on dessine
   la ligne en ::before — comme ça les ronds (eux aussi en absolute,
   sur les .frise-item) viennent se superposer pile dessus. */
.frise-items {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-top: 24px; /* place pour la moitié haute du rond */
  gap: 8px;
}
.frise-items::before {
  content: '';
  position: absolute;
  top: 14px;          /* axe central de la frise */
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--lect-violet-soft) 0%,
    var(--lect-violet) 50%,
    var(--lect-violet-soft) 100%);
  border-radius: 2px;
  z-index: 0;
}
.frise-item {
  position: relative;
  text-align: center;
}
.frise-item::before {
  content: '';
  position: absolute;
  top: -20px;         /* centre du rond aligné sur top: 14px du container */
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background: var(--lect-violet-deep);
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--lect-violet-deep), 0 4px 8px -2px rgba(79, 49, 200, 0.4);
  z-index: 1;
}
.frise-item.frise-item-soft::before {
  background: var(--lect-violet-soft);
  box-shadow: 0 0 0 1px var(--lect-violet);
}
.frise-year {
  font-family: var(--font-mono-stack);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lect-violet-deep);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.frise-author {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lect-ink);
  line-height: 1.25;
  margin-bottom: 3px;
}
.frise-work {
  font-family: var(--font-serif);
  font-size: 11.5px;
  font-style: italic;
  color: var(--lect-ink-soft);
  line-height: 1.35;
}

/* ─────────────────────────────────────────────────────────
   SCHÉMA QUADRANT  ·  positionnement des théories sur 2 axes
   ───────────────────────────────────────────────────────── */
.quadrantWrap {
  margin: 32px 0;
  padding: 26px 28px 22px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(20, 16, 50, 0.02), 0 8px 28px -18px rgba(46, 31, 88, 0.18);
}
.quadrantHead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.quadrantHead-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lect-violet-deep);
}
.quadrantHead-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.01em;
}
.quadrant {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(90deg, var(--lect-line-soft) 0%, var(--lect-line-soft) calc(50% - 1px), var(--lect-violet) calc(50% - 1px), var(--lect-violet) calc(50% + 1px), var(--lect-line-soft) calc(50% + 1px), var(--lect-line-soft) 100%),
    linear-gradient(180deg, var(--lect-line-soft) 0%, var(--lect-line-soft) calc(50% - 1px), var(--lect-violet) calc(50% - 1px), var(--lect-violet) calc(50% + 1px), var(--lect-line-soft) calc(50% + 1px), var(--lect-line-soft) 100%);
  background-blend-mode: multiply;
  border-radius: 8px;
  border: 1px solid var(--lect-line-soft);
}
.quadrant-axis {
  position: absolute;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--lect-ink-faint);
}
.quadrant-axis-top    { top: -18px;  left: 50%; transform: translateX(-50%); }
.quadrant-axis-bottom { bottom: -18px; left: 50%; transform: translateX(-50%); }
.quadrant-axis-left   { left: -10px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.quadrant-axis-right  { right: -10px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
.quadrant-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
  cursor: default;
}
.quadrant-pin-dot {
  width: 12px;
  height: 12px;
  background: var(--lect-violet-deep);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--lect-violet-deep), 0 4px 10px -2px rgba(79, 49, 200, 0.4);
  transition: transform 0.18s ease;
}
.quadrant-pin:hover .quadrant-pin-dot { transform: scale(1.3); }
.quadrant-pin-label {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--lect-ink);
  background: #ffffff;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid var(--lect-line-soft);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* ─────────────────────────────────────────────────────────
   SCROLL  ·  comportement fluide + offset pour topbar sticky
   ───────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
/* Tous les ancres ciblables : on laisse ~90px sous la topbar
   pour que le titre ne se cale pas pile en haut */
#intro,
[id^="part-"],
[id^="sec-"] {
  scroll-margin-top: 90px;
}

/* badge démo */
.demo-badge {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--lect-violet-deep);
  color: white;
  font-size: 10.5px;
  padding: 8px 14px;
  border-radius: 99px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--font-mono-stack);
  box-shadow: 0 6px 24px rgba(79, 49, 200, 0.3);
}

/* ─────────────────────────────────────────────────────────
   SYLLOGISM-SCHEMA  ·  3 boîtes (Majeure → Mineure → Conclusion)
   Utilisé dans la sub 1.1.1 et toute sub qui mobilise un raisonnement
   articulé en trois étapes liées (logique, déduction, raisonnement).
   ───────────────────────────────────────────────────────── */
.syllog {
  margin: 32px 0;
  padding: 28px 24px 24px;
  background: linear-gradient(180deg, #fbfaff 0%, #ffffff 100%);
  border: 1px solid var(--lect-line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(20, 16, 50, 0.02), 0 8px 28px -18px rgba(46, 31, 88, 0.18);
}
.syllog-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
}
.syllog-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lect-violet-deep);
}
.syllog-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.01em;
}
.syllog-grid {
  display: grid;
  grid-template-columns: 1fr 28px 1fr 28px 1fr;
  align-items: stretch;
  gap: 0;
}
.syllog-box {
  background: #fff;
  border: 1px solid var(--lect-violet-soft);
  border-radius: 12px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.syllog-box.is-conclusion {
  background: var(--lect-violet-deep);
  border-color: var(--lect-violet-deep);
  color: #fff;
}
.syllog-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lect-violet-deep);
  background: var(--lect-violet-soft);
  padding: 3px 9px;
  border-radius: 99px;
  align-self: flex-start;
}
.syllog-box.is-conclusion .syllog-tag {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.syllog-role {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.005em;
}
.syllog-box.is-conclusion .syllog-role { color: #fff; }
.syllog-body {
  font-family: var(--font-serif);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.45;
  color: var(--lect-ink-soft);
}
.syllog-box.is-conclusion .syllog-body { color: rgba(255, 255, 255, 0.92); }
.syllog-arrow {
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--lect-violet);
  font-weight: 300;
}
.syllog-caption {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--lect-ink-faint);
  text-align: center;
  font-style: italic;
  font-family: var(--font-serif);
}

/* ─────────────────────────────────────────────────────────
   WORKFLOW NUMÉROTÉ  ·  étapes successives pour appliquer une méthode
   Utilisé dans toutes les sub de méthodologie qui décrivent une procédure.
   ───────────────────────────────────────────────────────── */
.workflow {
  margin: 32px 0;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--lect-line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(20, 16, 50, 0.02), 0 8px 28px -18px rgba(46, 31, 88, 0.18);
}
.workflow-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.workflow-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lect-violet-deep);
}
.workflow-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.01em;
}
.workflow-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: workflow-step;
}
.workflow-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: baseline;
  position: relative;
}
.workflow-step::before {
  counter-increment: workflow-step;
  content: counter(workflow-step);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--lect-violet-deep);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  margin-top: 1px;
}
.workflow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: -16px;
  width: 1.5px;
  background: var(--lect-violet-soft);
}
.workflow-step-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--lect-ink);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  display: block;
}
.workflow-step-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lect-ink-soft);
}

/* ─────────────────────────────────────────────────────────
   QUALIF TABLE  ·  tableau "fait brut → fait qualifié"
   ───────────────────────────────────────────────────────── */
.qualifTable {
  margin: 26px 0;
  border-radius: 12px;
  overflow: visible; /* visible pour permettre aux popups aut/gloss de déborder */
  border: 1px solid var(--lect-line);
}
.qualifTable-row {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  align-items: stretch;
}
.qualifTable-row + .qualifTable-row {
  border-top: 1px solid var(--lect-line-soft);
}
.qualifTable-row.is-head .qualifTable-cell {
  background: var(--lect-violet-tint);
  font-family: var(--font-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--lect-violet-deep);
  padding: 10px 16px;
}
.qualifTable-cell {
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--lect-ink-soft);
  line-height: 1.5;
  background: #fff;
}
.qualifTable-cell.is-brut {
  font-family: var(--font-serif);
  font-style: italic;
}
.qualifTable-cell.is-qualif strong {
  color: var(--lect-violet-deep);
}
.qualifTable-arrow {
  display: grid;
  place-items: center;
  background: var(--lect-bg-soft);
  color: var(--lect-violet);
  font-weight: 300;
  font-size: 18px;
}
.qualifTable-row.is-head .qualifTable-arrow {
  background: var(--lect-violet-tint);
  color: transparent;
}

/* ─────────────────────────────────────────────────────────
   Variante 2 cellules : .qualifTable-A + .qualifTable-B
   (sans flèche centrale). Utilisée massivement par les
   pages Constit I et Constit II pour comparer deux notions.
   ───────────────────────────────────────────────────────── */
.qualifTable-row:has(> .qualifTable-A),
.qualifTable-row:has(> .qualifTable-B) {
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--lect-line-soft);
}
.qualifTable-cell.qualifTable-A,
.qualifTable-cell.qualifTable-B {
  padding: 18px 20px;
}
.qualifTable-label {
  display: block;
  font-family: var(--font-display);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 600;
  color: var(--lect-violet-deep);
  margin-bottom: 8px;
}
.qualifTable-content {
  display: block;
  font-size: 13.5px;
  color: var(--lect-ink-soft);
  line-height: 1.55;
}


/* ═══════════════════════════════════════════════════════════
   LISTES dans .prose · puces et numéros sobres
   ═══════════════════════════════════════════════════════════ */
.prose .proseList,
.prose .proseListNum {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--lect-ink-soft);
  font-size: 1em;
  line-height: 1.65;
}
.prose .proseList { list-style: none; padding-left: 0; }
.prose .proseList > li {
  position: relative;
  padding-left: 22px;
  margin: 6px 0;
}
.prose .proseList > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lect-violet);
  opacity: 0.55;
}
.prose .proseListNum { list-style: decimal; padding-left: 26px; }
.prose .proseListNum > li {
  margin: 8px 0;
  padding-left: 6px;
}
.prose .proseListNum > li::marker {
  color: var(--lect-violet);
  font-weight: 600;
  font-feature-settings: "tnum";
}
.prose .proseList strong,
.prose .proseListNum strong {
  color: var(--lect-ink);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════
   BLOCS DÉMONSTRATION · scénarios pédagogiques détaillés
   ═══════════════════════════════════════════════════════════ */
.demoBlock {
  margin: 32px 0;
  padding: 28px 30px;
  background: linear-gradient(180deg, #fcfbff 0%, #ffffff 100%);
  border: 1px solid var(--lect-line);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(20, 16, 50, 0.02), 0 6px 24px -16px rgba(46, 31, 88, 0.14);
}
.demoBlock + .demoBlock { margin-top: 24px; }

.demoBlock-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--lect-line-soft);
}
.demoBlock-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--lect-violet-deep);
  color: white;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.demoBlock-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lect-violet);
  margin-bottom: 4px;
}
.demoBlock-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lect-ink);
  margin: 0;
  letter-spacing: -0.012em;
}
.demoBlock-context {
  font-size: 1em;
  line-height: 1.65;
  color: var(--lect-ink-soft);
  margin-bottom: 8px;
  padding: 14px 18px;
  background: var(--lect-bg-soft);
  border-radius: 12px;
  border-left: 3px solid var(--lect-violet-tint);
}
.demoBlock-context strong { color: var(--lect-ink); font-weight: 600; }
.demoBlock-context em { font-style: italic; color: var(--lect-ink); }

.demoStep {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--lect-line-soft);
}
.demoStep:first-of-type { padding-top: 18px; }
.demoStep-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--lect-violet);
  padding-top: 2px;
}
.demoStep.is-conclusion .demoStep-label { color: var(--lect-violet-deep); }
.demoStep-body {
  font-size: 1em;
  line-height: 1.7;
  color: var(--lect-ink-soft);
}
.demoStep-body p { margin: 0 0 12px; }
.demoStep-body p:last-child { margin-bottom: 0; }
.demoStep-body strong { color: var(--lect-ink); font-weight: 600; }
.demoStep-body em { font-style: italic; color: var(--lect-violet-deep); }
.demoStep-body .proseList,
.demoStep-body .proseListNum { margin-bottom: 12px; }
.demoStep-body .proseList { list-style: none; padding-left: 0; }
.demoStep-body .proseList > li {
  position: relative;
  padding-left: 22px;
  margin: 6px 0;
}
.demoStep-body .proseList > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lect-violet);
  opacity: 0.55;
}
.demoStep.is-conclusion .demoStep-body p {
  color: var(--lect-ink);
  font-weight: 500;
}

/* Arrêt commenté (Démo 2) */
.demoArret {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  padding: 16px 0;
  align-items: flex-start;
  border-top: 1px solid var(--lect-line-soft);
}
.demoArret:first-of-type { border-top: none; padding-top: 8px; }
.demoArret-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: white;
  margin-top: 2px;
  flex-shrink: 0;
}
.demoArret-tag.majeure { background: var(--lect-violet); }
.demoArret-tag.mineure { background: var(--lect-violet-tint); color: var(--lect-violet-deep); }
.demoArret-tag.concl { background: var(--lect-violet-deep); }
.demoArret p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--lect-ink-soft);
  line-height: 1.7;
  font-size: 1.02em;
}
.demoBlock-note {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--lect-bg-soft);
  border-radius: 12px;
  font-size: 0.96em;
  line-height: 1.65;
  color: var(--lect-ink-soft);
  border-left: 3px solid var(--lect-violet);
}
.demoBlock-note strong { color: var(--lect-ink); font-weight: 600; }
.demoBlock-note p { margin: 0; }


/* ═══════════════════════════════════════════════════════════
   DESKTOP ADAPTATIF — rail droit permanent seulement quand
   trois colonnes gardent une vraie largeur de lecture.
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 840px) and (max-width: 1179px) {
  .app { grid-template-columns: 220px minmax(0, 1fr) 260px; }
  body.reader-aside-collapsed .app:not(.focus-mode) {
    grid-template-columns: 220px minmax(0, 1fr) 0;
  }
  .sidebar { padding-right: 12px; padding-left: 12px; }
  .readerAsideScroll { padding-right: 12px; padding-left: 12px; }
  .reading { padding-right: 24px; padding-left: 24px; }
  .readerTopbarInner { padding-right: 24px; padding-left: 24px; }
  .sectionBody { padding-right: 34px; padding-left: 34px; }
}

@media (max-width: 839px) {
  .app { grid-template-columns: 260px minmax(0, 1fr); }
  .aside {
    display: block;
    position: fixed;
    z-index: 70;
    top: 0;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 28px);
    padding: 0;
    box-shadow: -24px 0 70px -34px rgba(26, 23, 38, 0.42);
  }
  .app:not(.focus-mode) .aside {
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
  }
  .readerAsideScroll { padding-top: 60px; }
  body.reader-aside-open { overflow: hidden; }
  body.reader-aside-open .app:not(.focus-mode) .aside { transform: translateX(0); }
  .topbar-plan-btn {
    display: inline-flex;
    width: auto;
    padding: 0 11px;
    gap: 7px;
  }
  .readerAsideScrim {
    position: fixed;
    display: block;
    inset: 0;
    z-index: 60;
    border: 0;
    background: rgba(26, 23, 38, 0.24);
    opacity: 0;
    pointer-events: none;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: opacity 0.22s ease;
  }
  body.reader-aside-open .readerAsideScrim { opacity: 1; pointer-events: auto; }
  .readerAsideClose.is-open {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 80;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--lect-line);
    border-radius: 10px;
    color: var(--lect-ink-soft);
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    box-shadow: 0 8px 20px -12px rgba(26, 23, 38, 0.35);
  }
  .readerAsideClose.is-open:hover { color: var(--lect-violet-deep); background: #fff; }
  .readerAsideCollapse { display: none; }
}

@media (max-width: 839px) and (min-width: 769px) {
  .app { grid-template-columns: 230px minmax(0, 1fr); }
  .sidebar { padding-left: 12px; padding-right: 12px; }
  .reading { padding-left: 30px; padding-right: 30px; }
  .readerTopbarInner { padding-left: 30px; padding-right: 30px; }
  .sectionBody { padding-left: 48px; padding-right: 48px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE (<= 768px) — une colonne, contenu pleine largeur
   (en fin de fichier pour primer sur les regles de base)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar,
  .aside { display: none; }
  .main { min-width: 0; }
  .reading {
    max-width: 100%;
    min-width: 0;
    padding: 12px 16px 80px;
    overflow-wrap: break-word;
  }
  /* topbar compacte : accueil a gauche, actions a droite, recherche masquee */
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
  }
  .readerTopbarInner { padding: 0; max-width: none; }
  .topbar-plan-btn { display: none; }
  .readerAsideScrim { display: none; }
  .readerAsideClose { display: none !important; }
  .topbar-crumbs,
  .search { display: none; }
  /* barre d'onglets : passe a la ligne (tous visibles, pas de debordement) */
  .tabs { flex-wrap: wrap; justify-content: flex-start; gap: 12px 18px; overflow: visible; padding: 8px 4px; }
  .tabs .tab { flex: 0 0 auto; }
  /* references de loi enroulables */
  .loi { white-space: normal; }
  /* tableaux larges + medias : contenus, jamais de debordement */
  .compareTable,
  .qualifTable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .reading img,
  .reading table { max-width: 100%; height: auto; }
  /* titres reduits pour eviter les coupures de mots */
  .sectionH { font-size: 30px; }
  .partTitle { font-size: 23px; }
}

/* ═══════════════════════════════════════════════════════════════════
   LISIBILITÉ MOBILE RENFORCÉE (13/06/2026)
   Objectif : le cours occupe toute la largeur de l'écran, blocs dégonflés,
   zéro débordement horizontal. S'applique aux 802 subs via le CSS partagé.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1) GAIN DE LARGEUR — le corps avait 72px de marge latérale (≈210px de texte utile seulement) */
  .sectionBody { padding: 22px 18px 52px; }
  .sectionHero { padding-left: 0; padding-right: 0; }
  .reading { padding: 10px 13px 96px; overflow-x: clip; }

  /* 2) ANTI-DÉBORDEMENT — popups au survol (inutilisables au doigt) masqués : ils dépassaient à droite */
  .gloss-popup, .aut-popup { display: none !important; }
  .footCard, .renvois, .compareTable, .qualifTable { max-width: 100%; }

  /* 3) « À RETENIR » — l'icône de 250px écrasait le texte dans ≈127px → pleine largeur, icône retirée */
  .rappel { grid-template-columns: 1fr; gap: 12px; padding: 18px 20px; margin-bottom: 32px; }
  .rappelIcon { display: none; }
  .rappelText { font-size: 17.5px; line-height: 1.62; }

  /* 4) TITRES — confortables, sans coupures de mots */
  .sectionH { font-size: 26px; line-height: 1.16; }
  .partTitle { font-size: 21px; }
  .partSectionTitle { font-size: 19px; }
  .demoBlock-title { font-size: 19px; }

  /* 5) FRISE CHRONO — 5 colonnes illisibles → défilement horizontal */
  .frise-items { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 12px; }

  /* 6) BLOCS À COLONNES — éviter le texte comprimé en colonne étroite */
  .demoStep { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .demoStep-label { padding-top: 0; }
  .sectionFootGrid { grid-template-columns: 1fr; }
  .qualifTable-row { grid-template-columns: 1fr 16px 1fr; }

  /* 7) TABLEAUX natifs larges — défilables (sinon coupés par l'overflow-x:clip du .reading) */
  .reading table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.renvoi-disabled { opacity: 0.5; cursor: default; pointer-events: none; }


/* === Correctifs rendu (31/05/2026 — signalés par captures) === */
/* 1. demoStep : un label d'un seul mot très long (ex. « Extraterritorialité »)
   débordait la colonne de 110px et chevauchait le corps du paragraphe. */
.demoStep-label { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }

/* 2. Auteur (.aut) ou glossaire (.gloss) imbriqué dans un titre (partTitle/sectionH) :
   le style prune + souligné + le popup cassaient la mise en page du titre.
   On neutralise l'habillage et on masque le popup à l'intérieur des titres. */
.sectionH .aut, .partTitle .aut,
.sectionH .gloss, .partTitle .gloss {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  background-image: none;
  padding: 0;
  cursor: inherit;
}
.sectionH .aut-popup, .partTitle .aut-popup,
.sectionH .gloss-popup, .partTitle .gloss-popup { display: none !important; }

/* ===== Cours épuré (refonte juin 2026) ===== */
.sectionBody.epure{max-width:720px;margin-left:auto;margin-right:auto}
.sectionBody.epure .eyebrow{font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#5d4a9d}
.sectionBody.epure h1{font-family:var(--font-display);font-size:32px;font-weight:700;line-height:1.12;margin:8px 0 6px;color:#1c1530;letter-spacing:-.025em}
.sectionBody.epure .epMeta{font-size:13px;color:#8b85a3;margin-bottom:16px}
.sectionBody.epure .sectionHero{padding-bottom:14px;margin-bottom:20px}
.sectionBody.epure h2{font-family:var(--font-display);font-size:19px;font-weight:700;color:#1c1530;margin:30px 0 10px;letter-spacing:-.014em}
.sectionBody.epure h1 em,.sectionBody.epure h1 .arr,.sectionBody.epure h1 .loi,.sectionBody.epure h1 i,.sectionBody.epure h2 em,.sectionBody.epure h2 .arr,.sectionBody.epure h2 .loi,.sectionBody.epure h2 i{font-style:normal;font-family:inherit;font-weight:inherit}
.sectionBody.epure h2 .r{color:#8a7bc8;margin-right:8px}
.sectionBody.epure p{margin:0 0 13px;font-size:16px;line-height:1.66;color:#332e44}
.sectionBody.epure ul{margin:0 0 13px;padding-left:22px}
.sectionBody.epure li{margin:4px 0;font-size:16px;line-height:1.6;color:#332e44}
.sectionBody.epure strong{font-weight:700;color:#1c1530}
.sectionBody.epure em{font-style:italic}
.sectionBody.epure .loi{color:#5d4a9d;font-weight:500}
.sectionBody.epure .idee{display:flex;gap:14px;background:#f6f2fd;border:1px solid #e6dffb;border-radius:14px;padding:16px 18px;margin:0 0 24px}
.sectionBody.epure .idee .ic{flex:none;width:32px;height:32px;border-radius:9px;background:#8a7bc8;color:#fff;display:grid;place-items:center;font-size:16px}
.sectionBody.epure .idee .l{font-family:'Inter Tight',sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#5d4a9d;margin-bottom:5px}
.sectionBody.epure .idee p{font-size:15px;margin:0;color:#3a3450}
.sectionBody.epure .def{border-left:3px solid #8a7bc8;background:#faf8fe;border-radius:0 10px 10px 0;padding:12px 16px;margin:0 0 14px;font-size:15.5px}
.sectionBody.epure .def b{color:#5d4a9d}
.sectionBody.epure .retenir{background:#eef7f1;border:1px solid #cfe8d8;border-radius:14px;padding:16px 18px;margin:28px 0 0}
.sectionBody.epure .retenir .l{font-family:'Inter Tight',sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#2f6b45;margin-bottom:7px}
.sectionBody.epure .retenir ul{margin:0;padding-left:20px}
.sectionBody.epure .retenir li{font-size:15px;color:#36503f}
.sectionBody.epure details.plus{border:1px solid #e9e7f0;border-radius:12px;margin:16px 0 0;background:#fafafd;overflow:hidden}
.sectionBody.epure details.plus summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:'Inter Tight',sans-serif;font-size:13.5px;font-weight:600;color:#5d4a9d;display:flex;align-items:center;gap:9px}
.sectionBody.epure details.plus summary::-webkit-details-marker{display:none}
.sectionBody.epure details.plus summary::before{content:"+";font-size:17px;color:#8a7bc8}
.sectionBody.epure details.plus[open] summary::before{content:"\2212"}
.sectionBody.epure details.plus .in{padding:0 18px 16px;font-size:14.5px;color:#5d5577;line-height:1.62}
.sectionBody.epure details.plus .in ul{margin:0;padding-left:18px}
.sectionBody.epure details.plus .in li{font-size:14.5px;color:#5d5577}
/* Renvois vers une autre matiere. La charte impose un renvoi explicite plutot
   qu'un doublon (docs/charte-cours.md, 5 bis) : il fallait donc un style pour
   le porter. Prefixe .rv, scope .epure, pour ne pas heurter les .renvoi du
   gabarit enrichi qui vivent dans la meme feuille. */
.sectionBody.epure a.rv{color:#5d4a9d;font-weight:500;text-decoration:none;border-bottom:1px solid #d9d0f2;transition:border-color .15s}
.sectionBody.epure a.rv:hover{border-bottom-color:#8a7bc8}
.sectionBody.epure .rvBloc{border:1px solid #e6dffb;background:#faf8fe;border-radius:12px;padding:13px 16px;margin:18px 0 0}
.sectionBody.epure .rvBloc .l{font-family:'Inter Tight',sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#5d4a9d;margin-bottom:6px}
.sectionBody.epure .rvBloc ul{margin:0;padding-left:18px}
.sectionBody.epure .rvBloc li{font-size:14.5px;line-height:1.55;color:#5d5577;margin:3px 0}

/* Schéma et tableau du gabarit épuré (validé le 13 octobre 2026).
   figure.schema porte soit un SVG (frise, arbre), soit un tableau, puis une
   légende. Aucune classe à l'intérieur : les éléments du SVG se distinguent
   par data-k, les cellules du tableau par data-l (le titre de leur colonne,
   affiché quand le tableau se replie en fiches sur téléphone). Les couleurs
   ne tiennent qu'à huit variables. */
.sectionBody.epure .schema{margin:20px 0 22px;--sc-ink:#1c1530;--sc-text:#332e44;--sc-soft:#6f6888;--sc-line:#e0d8f5;--sc-fill:#faf8fe;--sc-accent:#5d4a9d;--sc-accent-ink:#fff;--sc-accent-soft:#f0ebfc}
.sectionBody.epure .schema svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto;font-family:Inter,system-ui,sans-serif}
.sectionBody.epure .schema text{fill:var(--sc-text);font-size:12.5px}
.sectionBody.epure .schema text[data-k="titre"]{fill:var(--sc-ink);font-size:13px;font-weight:700}
.sectionBody.epure .schema text[data-k="date"]{fill:var(--sc-accent-ink);font-size:11.5px;font-weight:700}
.sectionBody.epure .schema text[data-k="note"]{fill:var(--sc-soft);font-size:11px}
.sectionBody.epure .schema text[data-k="accent"]{fill:var(--sc-accent);font-size:11px;font-weight:600}
.sectionBody.epure .schema rect[data-k="carte"]{fill:var(--sc-fill);stroke:var(--sc-line)}
.sectionBody.epure .schema rect[data-k="doux"]{fill:var(--sc-accent-soft)}
.sectionBody.epure .schema rect[data-k="plein"],.sectionBody.epure .schema circle{fill:var(--sc-accent)}
.sectionBody.epure .schema [data-k="axe"]{stroke:var(--sc-line);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sectionBody.epure .schema [data-k="lien"]{stroke:var(--sc-accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sectionBody.epure .schema figcaption{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--sc-soft);text-align:center}
.sectionBody.epure .schema table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--sc-line);border-radius:12px;overflow:hidden;background:#fff;font-size:14.5px;line-height:1.45}
.sectionBody.epure .schema th,.sectionBody.epure .schema td{padding:10px 12px;text-align:left;vertical-align:top;font-weight:400;color:var(--sc-text);border-bottom:1px solid var(--sc-line)}
.sectionBody.epure .schema td{border-left:1px solid var(--sc-line)}
.sectionBody.epure .schema thead th{background:var(--sc-accent-soft);color:var(--sc-accent);font-family:'Inter Tight',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.sectionBody.epure .schema thead th+th{border-left:1px solid var(--sc-line)}
.sectionBody.epure .schema tbody th{min-width:6.5em;max-width:15em;background:var(--sc-fill);color:var(--sc-ink);font-weight:700}
.sectionBody.epure .schema tbody tr:last-child>*{border-bottom:0}
@media (max-width:560px){
  /* Le SVG déborde de 12 px de chaque côté : sur un téléphone, il retrouve ainsi
     à peu près ses 360 unités de large, donc la taille de texte prévue. */
  .sectionBody.epure .schema svg{width:calc(100% + 24px);max-width:none;margin:0 -12px}
  .sectionBody.epure .schema table{display:block;border:0;border-radius:0;background:none;overflow:visible}
  .sectionBody.epure .schema thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sectionBody.epure .schema tbody,.sectionBody.epure .schema tr,.sectionBody.epure .schema tbody th,.sectionBody.epure .schema td{display:block}
  .sectionBody.epure .schema tr{border:1px solid var(--sc-line);border-radius:12px;background:#fff;overflow:hidden;margin:0 0 10px}
  .sectionBody.epure .schema tr:last-child{margin-bottom:0}
  .sectionBody.epure .schema tbody th{min-width:0;max-width:none;padding:9px 14px;background:var(--sc-accent-soft);border-bottom:0}
  .sectionBody.epure .schema td{padding:8px 14px 9px;border-left:0;border-bottom:1px solid var(--sc-line)}
  .sectionBody.epure .schema tbody tr>td:last-child{border-bottom:0}
  /* La dernière ligne du tableau n'a pas de filet du bas (règle d'avant le repli) :
     en fiches, sa carte garde le trait entre ses cellules. */
  .sectionBody.epure .schema tbody tr:last-child>td:not(:last-child){border-bottom:1px solid var(--sc-line)}
  .sectionBody.epure .schema td::before{content:attr(data-l);display:block;margin-bottom:2px;font-family:'Inter Tight',sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sc-accent)}
}
@media print{
  .sectionBody.epure .schema{margin:0 0 5mm !important;break-inside:avoid;page-break-inside:avoid}
  .sectionBody.epure .schema svg{max-width:105mm}
  .sectionBody.epure .schema table{font-size:9.5pt}
  .sectionBody.epure .schema th,.sectionBody.epure .schema td{padding:1.6mm 2.2mm}
  .sectionBody.epure .schema thead th{border-bottom:.4mm solid #5d4a9d;font-size:6.6pt}
  .sectionBody.epure .schema figcaption{font-size:8.5pt}
}

/* =============================================================
   IMPRESSION
   -------------------------------------------------------------
   Les étudiants en droit impriment et annotent, surtout avant les
   partiels. Cette feuille transforme un cours en document propre,
   reconnaissable, et surtout annotable.

   Deux contraintes gouvernent tout ce qui suit :

   1. Le navigateur n'imprime PAS les fonds tant que l'utilisateur
      n'a pas coché « graphiques d'arrière-plan ». Le repérage
      passe donc par des FILETS et des BORDURES, jamais par un
      aplat : chaque bloc reste identifiable en noir et blanc.
   2. Rien ne doit se couper au mauvais endroit. Un encadré scindé
      sur deux pages ou un titre seul en bas de page rend le
      document désagréable à réviser.
   ============================================================= */

@media print {
  /* Marge de reliure à gauche : on perfore sans toucher au texte. */
  @page {
    margin: 13mm 16mm 12mm 24mm;
    size: A4;
  }

  /* Les aplats pâles ne sont qu'un bonus. Cette règle demande au navigateur
     de les respecter quand l'utilisateur les autorise ; le repérage, lui,
     tient aux filets, qui survivent à une impression en noir et blanc. */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  html,
  body {
    height: auto;
    margin: 0;
    padding: 0;
    background: #fff;
  }

  /* ---------- Ce qui n'a pas sa place sur le papier ---------- */
  /* .cqCards est le renvoi vers les flashcards : une commande, pas du
     contenu. Il s'imprimait en bas de la plupart des cours, cadre compris. */
  .sidebar,
  .topbar,
  .topbar-actions,
  .sectionNav,
  .tabs,
  .cqOpen,
  .cqCards,
  .cqModal,
  .cqModal-ov,
  #focusHint,
  .focus-hint,
  .track,
  .apo-fav,
  .searchWrap,
  .search,
  [class*="readerNav"],
  [class*="readerAside"],
  [class*="readerCourseSwitch"],
  [class*="readerSkeleton"],
  [class*="readerContentSkeleton"],
  button,
  nav {
    display: none !important;
  }

  /* La coque du lecteur : on défait la mise en page d'écran pour rendre la
     pleine largeur au texte. */
  .app,
  .main,
  .reading,
  .sectionCard,
  .sectionBody {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* ---------- L'ossature posée par _print.js ---------- */
  /* Une table : le navigateur répète nativement son thead et son tfoot en
     haut et en bas de chaque page, et leur réserve la place. Rien ne
     chevauche donc jamais le texte, même sur une page pleine à ras. */
  table.apoDoc {
    display: table !important;
    width: 100%;
    border-collapse: collapse;
  }

  .apoDoc td {
    padding: 0;
  }

  .apoDoc thead td {
    padding: 0 0 8mm;
  }

  .apoDoc tfoot td {
    padding: 6mm 0 0;
  }

  /* Titre courant : le logotype, la matière et le numéro du cours. */
  .apoRun {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2.4mm;
    border-bottom: 0.5pt solid #e5e1ef;
  }

  img.apoRunType {
    display: block;
    width: auto !important;
    max-width: none !important;
    height: 4mm !important;
  }

  .apoRunRef {
    color: #aba6ba;
    font-family: "JetBrains Mono", monospace;
    font-size: 6.4pt;
    letter-spacing: 0.13em;
  }

  /* Pied : à qui appartient cet exemplaire, et son identifiant. */
  .apoFoot {
    display: flex;
    justify-content: space-between;
    color: #aaa5b8;
    font-family: "JetBrains Mono", monospace;
    font-size: 6.6pt;
    letter-spacing: 0.05em;
  }

  .apoFootSite {
    color: #8a7bc8;
  }

  /* ---------- Le titre du cours ---------- */
  .sectionBody.epure .sectionHero {
    position: relative;
    margin: 0 0 9.5mm !important;
    padding: 0 0 4.5mm !important;
    border: 0 !important;
  }

  /* Un filet court plutôt qu'un trait pleine largeur : il referme le titre
     sans barrer la page. */
  .sectionBody.epure .sectionHero::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 17mm;
    height: 0.35mm;
    border-radius: 0.2mm;
    background: #5d4a9d;
    content: "";
  }

  .sectionBody.epure .eyebrow {
    margin-bottom: 2.6mm;
    color: #5d4a9d;
    font-family: "JetBrains Mono", monospace;
    font-size: 8.5pt;
    font-weight: 500;
    letter-spacing: 0.2em;
  }

  .sectionBody.epure h1 {
    margin: 0 0 3mm !important;
    color: #1a1626;
    font-family: "Geist", "Inter", sans-serif;
    font-size: 23pt;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.12;
    text-wrap: balance;
  }

  /* La ligne de méta situe le cours dans sa progression : _print.js y écrit
     le chapitre et son titre, à la place de la matière (déjà en tête de
     page), du niveau et du temps de lecture, qui ne disent plus rien une
     fois la page imprimée. */
  .sectionBody.epure .epMeta {
    margin: 0 !important;
    color: #918ba3;
    font-family: "JetBrains Mono", monospace;
    font-size: 6.8pt;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  /* ---------- Le corps ---------- */
  /* 10.5pt sur 1.66 : lisible sans gaspiller le papier, et assez aéré pour
     glisser une note entre deux lignes. */
  .sectionBody.epure p,
  .sectionBody.epure li {
    color: #242031;
    font-size: 10.5pt;
    line-height: 1.66;
    /* Jamais une ligne seule séparée de son paragraphe. */
    orphans: 3;
    widows: 3;
  }

  .sectionBody.epure p {
    margin: 0 0 3mm !important;
  }

  .sectionBody.epure h2 {
    margin: 9mm 0 3mm !important;
    color: #1a1626;
    font-family: "Geist", "Inter", sans-serif;
    font-size: 12.5pt;
    font-weight: 650;
    letter-spacing: -0.008em;
    /* Un titre ne reste jamais seul en bas d'une page. */
    break-after: avoid;
    page-break-after: avoid;
  }

  .sectionBody.epure h2 .r {
    margin-right: 2.2mm;
    color: #5d4a9d;
    font-family: "JetBrains Mono", monospace;
    font-size: 10pt;
    font-weight: 500;
  }

  .sectionBody.epure h3 {
    margin: 6mm 0 2mm !important;
    font-size: 10.5pt;
    font-weight: 650;
    break-after: avoid;
    page-break-after: avoid;
  }

  .sectionBody.epure strong,
  .sectionBody.epure b {
    color: #14101e;
    font-weight: 700;
  }

  /* Les références de loi restent repérables sans être cliquables. */
  .sectionBody.epure .loi {
    color: #5d4a9d;
    cursor: auto;
    font-style: italic;
    text-decoration: none;
  }

  .sectionBody.epure .loi::after,
  .sectionBody.epure .loi::before {
    display: none;
  }

  .loi-popup {
    display: none !important;
  }

  /* ---------- Les encadrés ---------- */
  /* Une barre arrondie plutôt qu'une boîte : le repère tient dans un filet,
     ce qui économise l'encre et allège la page. */
  .sectionBody.epure .idee,
  .sectionBody.epure .def {
    position: relative;
    margin: 0 0 5mm !important;
    padding: 0.6mm 0 0.6mm 5.6mm !important;
    border: 0 !important;
    background: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .sectionBody.epure .idee::before,
  .sectionBody.epure .def::before {
    position: absolute;
    top: 0.4mm;
    bottom: 0.4mm;
    left: 0;
    width: 1.1mm;
    border-radius: 0.55mm;
    background: #5d4a9d;
    content: "";
  }

  .sectionBody.epure .def::before {
    background: #cec2ee;
  }

  /* La pastille décorative ne dit rien de plus que le libellé. */
  .sectionBody.epure .idee .ic {
    display: none !important;
  }

  .sectionBody.epure .idee .l {
    margin-bottom: 1.4mm !important;
    color: #5d4a9d;
    font-family: "JetBrains Mono", monospace;
    font-size: 6.6pt;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .sectionBody.epure .idee p {
    margin: 0 !important;
    font-size: 10.5pt !important;
  }

  .sectionBody.epure .def {
    font-size: 10.5pt;
  }

  .sectionBody.epure .def b {
    color: #493a80;
  }

  /* « À retenir » est le bloc qu'on relit la veille : le seul aplat teinté,
     et il ne se coupe jamais entre deux pages. */
  .sectionBody.epure .retenir {
    margin: 7mm 0 0 !important;
    padding: 4.6mm 5.2mm !important;
    border: 0 !important;
    border-radius: 2.5mm !important;
    background: #f5f2fc !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .sectionBody.epure .retenir .l {
    margin-bottom: 1.8mm !important;
    color: #5d4a9d;
    font-family: "JetBrains Mono", monospace;
    font-size: 6.6pt;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .sectionBody.epure .retenir li {
    font-size: 10pt !important;
    line-height: 1.6;
  }

  .sectionBody.epure .retenir li::marker {
    color: #8a7bc8;
  }

  /* ---------- « Pour aller plus loin » ---------- */
  /* Un aplat neutre, pour ne pas concurrencer le violet de « à retenir » :
     ici le complément facultatif, là ce qu'il faut mémoriser. Aucun filet
     supérieur, il doublait celui du titre courant chaque fois que le bloc
     ouvrait une page. */
  .sectionBody.epure details.plus {
    margin: 6mm 0 0 !important;
    padding: 4.4mm 5.2mm 4.6mm !important;
    border: 0 !important;
    border-radius: 2.5mm !important;
    background: #f8f7fa !important;
  }

  .sectionBody.epure details.plus summary {
    padding: 0 0 2.6mm !important;
    color: #7a7191;
    font-family: "JetBrains Mono", monospace;
    font-size: 6.6pt;
    font-weight: 500;
    letter-spacing: 0.14em;
    list-style: none;
    text-transform: uppercase;
    break-after: avoid;
    page-break-after: avoid;
  }

  .sectionBody.epure details.plus summary::before,
  .sectionBody.epure details.plus summary::marker {
    display: none !important;
    content: none !important;
  }

  .sectionBody.epure details.plus .in {
    padding: 0 !important;
  }

  /* Les entrées : plus de puces, et l'intitulé sur sa propre ligne. C'est
     _print.js qui décide lesquels en sont vraiment (.apoEntree) : un gras
     qui ouvre une phrase resterait dans le fil. */
  .sectionBody.epure details.plus .in ul {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
  }

  .sectionBody.epure details.plus .in li {
    margin: 0 !important;
    color: #3a3450;
    font-size: 9.5pt !important;
    line-height: 1.58;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .sectionBody.epure details.plus .in li::marker {
    content: none !important;
  }

  .sectionBody.epure details.plus .in li + li {
    margin-top: 3mm !important;
    padding-top: 3mm !important;
    border-top: 0.4pt solid #e7e4ee;
  }

  .sectionBody.epure details.plus .in li strong.apoEntree,
  .sectionBody.epure details.plus .in li b.apoEntree {
    display: block;
    margin-bottom: 0.8mm;
    color: #5d4a9d;
    font-family: "Geist", "Inter", sans-serif;
    font-size: 9.5pt;
    font-weight: 600;
    letter-spacing: -0.004em;
  }

  /* ---------- Coupures ---------- */
  /* Ce bloc-ci est une liste de compléments : il se coupe proprement entre
     deux entrées. Le garder insécable, comme « à retenir », le poussait en
     entier sur une page neuve dès qu'il ne tenait pas, et laissait la page
     précédente à moitié vide. */
  .sectionBody.epure details.plus {
    break-inside: auto;
    page-break-inside: auto;
  }

  /* ---------- Listes et tableaux ---------- */
  .sectionBody.epure ul,
  .sectionBody.epure ol {
    margin: 0 0 3mm !important;
    padding-left: 5mm !important;
  }

  .sectionBody.epure li {
    margin: 0.8mm 0 !important;
  }

  /* Un tableau coupé perd son en-tête : on le garde d'un bloc tant qu'il
     tient sur une page. */
  .sectionBody.epure table {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 9.5pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .sectionBody.epure th,
  .sectionBody.epure td {
    padding: 1.8mm 2.5mm;
    border: 0.5pt solid #cfc9de;
    text-align: left;
    vertical-align: top;
  }

  .sectionBody.epure th {
    background: #f6f2fd !important;
    color: #3b3159;
    font-size: 9pt;
  }

  /* ---------- Liens et images ---------- */
  /* Pas d'URL entre parenthèses : sur un cours truffé de renvois internes,
     cela hache la lecture pour rien. */
  .sectionBody.epure a {
    color: #242031;
    text-decoration: none;
  }

  .sectionBody.epure img,
  .sectionBody.epure svg {
    max-width: 100% !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Représentations pédagogiques : texte HTML, lecture complète sans défilement latéral. */
.repere-cours {
  margin: 2rem 0;
  scroll-margin-top: 90px;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid #dcd3ee;
  border-radius: 18px;
  background: #faf8ff;
  color: var(--lect-ink);
  font-family: var(--font-body);
  overflow-wrap: anywhere;
}
.sectionBody.epure .repere-cours p,
.repere-cours p { margin: .55rem 0 0; font-size: .9375rem; line-height: 1.65; color: var(--lect-ink-soft); }
.repere-cours figcaption { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 2px solid #e5dcf7; }
.repere-cours figcaption > strong { display: block; font-size: 1.2rem; line-height: 1.35; color: var(--lect-ink); }
.repere-cours__eyebrow { display: block; margin-bottom: .5rem; color: var(--lect-violet-deep); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.repere-cours .repere-cours__note { margin-top: 1.25rem; padding: 1rem 0 0; border-top: 1px solid var(--lect-line); font-size: .875rem; line-height: 1.65; color: var(--lect-ink-soft); }
.repere-cours__badge { display: block; width: fit-content; margin-bottom: .65rem; color: var(--lect-violet-deep); font-size: .75rem; font-weight: 750; line-height: 1.5; }
.repere-cours__duo, .repere-cours__trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1.25rem; }
.repere-cours__trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.repere-cours__duo > div, .repere-cours__trio > div { min-width: 0; padding: 1.1rem; border: 1px solid #ddd3ef; border-top: 3px solid #9b82d0; border-radius: 12px; background: var(--lect-bg); }
/* Seuls les titres de cartes sont des blocs, jamais les mots en gras dans une phrase. */
.repere-cours__duo > div > strong, .repere-cours__trio > div > strong { display: block; font-size: 1rem; line-height: 1.4; }
.repere-cours .repere-cours__verdict { margin-top: 1rem; font-weight: 650; color: var(--lect-violet-deep); }
.repere-cours .repere-cours__liaison { margin: 1.4rem 0 0; padding-left: 1rem; border-left: 3px solid var(--lect-violet); color: var(--lect-ink); }
.repere-cours__depart { margin-top: 1.25rem; padding: 1rem 1.25rem; border-left: 3px solid var(--lect-violet); background: var(--lect-violet-tint); border-radius: 0 10px 10px 0; }
.sectionBody.epure .repere-cours ol, .repere-cours ol { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.sectionBody.epure .repere-cours li, .repere-cours li { margin: 0; }
.sectionBody.epure .repere-cours li::before { content: none; }
.repere-cours .repere-cours__pyramide { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.repere-cours .repere-cours__pyramide li { width: 100%; padding: .85rem 1rem; text-align: center; border: 1px solid var(--lect-line); border-radius: 10px; background: var(--lect-bg); }
.repere-cours__pyramide li:nth-child(1) { max-width: 70%; background: var(--lect-violet-deep); color: #fff; }
.repere-cours__pyramide li:nth-child(2) { max-width: 80%; background: var(--lect-violet-soft); }
.repere-cours__pyramide li:nth-child(3) { max-width: 90%; background: var(--lect-violet-tint); }
.repere-cours__pyramide strong { display: block; font-size: .9375rem; line-height: 1.4; }
.repere-cours__pyramide span { display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.5; }
.repere-cours .repere-cours__etapes { display: grid; gap: .75rem; }
.repere-cours .repere-cours__etapes li { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: .8rem; padding: 1rem; border: 1px solid #ddd3ef; border-left: 3px solid #9b82d0; border-radius: 12px; background: var(--lect-bg); }
.repere-cours .repere-cours__etapes li:last-child { border-left-color: var(--lect-violet-deep); background: var(--lect-violet-soft); }
.repere-cours__etapes strong { font-size: 1rem; }
.repere-cours .repere-cours__etapes li > * { min-width: 0; }
.repere-cours .repere-cours__etapes li > strong { display: block; color: var(--lect-violet-deep); line-height: 1.5; }
.repere-cours__etapes li > span:not(.repere-cours__badge) { display: block; }
.repere-cours .repere-cours__chronologie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.repere-cours .repere-cours__chronologie li { border-top: 3px solid var(--lect-line); padding-top: 1rem; }
.repere-cours .repere-cours__chronologie li:nth-child(2) { border-color: var(--lect-violet); }
.repere-cours__chronologie strong { display: block; font-size: .9375rem; line-height: 1.4; }
.repere-cours__chronologie li > span { display: block; margin-top: .5rem; }
.sectionBody.epure .repere-cours .repere-cours__conclusion,
.repere-cours .repere-cours__conclusion { margin-top: 1.25rem; padding: 1rem; border-left: 3px solid var(--lect-violet); border-radius: 0 10px 10px 0; background: var(--lect-violet-soft); color: var(--lect-ink); }
@media (max-width: 600px) {
  .repere-cours__duo, .repere-cours__trio, .repere-cours .repere-cours__chronologie { grid-template-columns: minmax(0, 1fr); }
  .repere-cours .repere-cours__etapes li { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .repere-cours .repere-cours__chronologie li { border-top: 0; border-left: 3px solid var(--lect-line); padding: .2rem 0 .7rem 1rem; }
  .repere-cours__pyramide li:nth-child(1) { max-width: 88%; }
  .repere-cours__pyramide li:nth-child(2) { max-width: 92%; }
  .repere-cours__pyramide li:nth-child(3) { max-width: 96%; }
}
@media print {
  .repere-cours { break-inside: auto; background: white; color: black; }
  .repere-cours__pyramide li:nth-child(1) { background: white; color: black; border: 2px solid #444; }
  .repere-cours figcaption, .repere-cours__badge { break-after: avoid; }
  .repere-cours__duo > div, .repere-cours__trio > div, .repere-cours__etapes li { break-inside: avoid; }
}
/* Garder le contraste du sommet malgré les styles de typographie du lecteur. */
.sectionBody.epure .repere-cours__pyramide li:nth-child(1) { background: var(--lect-violet-deep); color: #fff; }
.sectionBody.epure .repere-cours__pyramide li:nth-child(1) strong { color: inherit; }
@media print { .sectionBody.epure .repere-cours__pyramide li:nth-child(1) { background: #fff; color: #000; } }

/* Choisir une représentation selon la difficulté, sans script. */
.repere-cours__duo > div:has(> .repere-cours__barres) { display: flex; flex-direction: column; }
.sectionBody.epure .repere-cours .repere-cours__barres,
.repere-cours .repere-cours__barres { list-style: none; padding: 1.2rem 0 0; margin: auto 0 0; display: grid; gap: .8rem; }
.repere-cours .repere-cours__barres li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .5rem; font-size: .85rem; }
.repere-cours .repere-cours__barres li > strong { font-size: .85rem; font-variant-numeric: tabular-nums; }
.repere-cours__barre { grid-column: 1 / -1; height: .55rem; border-radius: 999px; background: var(--lect-violet-tint); overflow: hidden; }
.repere-cours__barre i { display: block; height: 100%; border-radius: inherit; background: var(--lect-violet-deep); }
.repere-cours .repere-cours__barres li:nth-child(2) i { background: var(--lect-violet); }
.repere-cours .repere-cours__barres li:nth-child(3) i { background: #b7a6d4; }
.repere-cours__parts { display: flex; min-height: 3rem; margin: 1.25rem 0; overflow: hidden; border: 1px solid var(--lect-line); border-radius: 10px; }
.repere-cours__parts span { display: grid; place-items: center; min-width: 0; padding: .5rem .15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; background: var(--lect-violet-deep); }
.repere-cours__parts span:nth-child(2) { background: var(--lect-violet); }
.repere-cours__parts span:nth-child(3) { background: var(--lect-violet-tint); color: var(--lect-ink); }
@media print {
  .repere-cours__parts span { background: white !important; color: black; border-right: 1px solid #555; }
  .repere-cours__parts span:last-child { border-right: 0; }
  .repere-cours__barre i { background: #555 !important; print-color-adjust: exact; }
}
.repere-cours { container-type: inline-size; }
.repere-cours a { color: var(--lect-violet-deep); text-underline-offset: 3px; }
.repere-cours__ligne-temps { margin-top: 1.5rem; }
.repere-cours .repere-cours__ligne-temps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .8rem; }
.repere-cours .repere-cours__ligne-temps li { min-width: 0; padding: .85rem .7rem; border-top: 3px solid var(--lect-line); }
.repere-cours .repere-cours__ligne-temps li.repere-cours__pause { border-color: var(--lect-violet); background: var(--lect-violet-tint); }
.repere-cours__ligne-temps li span, .repere-cours__ligne-temps li b { display: block; font-size: .875rem; line-height: 1.5; }
.repere-cours__ligne-temps li span { margin-bottom: .4rem; color: var(--lect-ink-soft); font-size: .75rem; }
.repere-cours__embranchements { margin: 1.25rem 0 0 .4rem; padding-left: 1.15rem; border-left: 2px solid var(--lect-line); }
.repere-cours__embranchements > div { position: relative; margin-top: 1rem; padding: 1rem; border: 1px solid var(--lect-line); border-radius: 12px; background: var(--lect-bg); }
.repere-cours__embranchements > div::before { content: ''; position: absolute; left: -1.2rem; top: 1.4rem; width: 1.2rem; border-top: 2px solid var(--lect-line); }
.repere-cours__embranchements .repere-cours__duo { margin-top: .8rem; }
.repere-cours__embranchements .repere-cours__duo > div { background: var(--lect-bg-soft-2); }
.repere-cours__passage { margin-top: 1rem; padding: .5rem 1rem; text-align: center; }
.repere-cours__passage > span { display: block; color: var(--lect-violet-deep); font-size: 1.5rem; margin: .4rem 0; }
.repere-cours__annotations { margin: 1.25rem 0; }
.repere-cours__annotations > div { display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--lect-line); }
.repere-cours__annotations dt { font-size: .8rem; font-weight: 700; color: var(--lect-violet-deep); }
.repere-cours__annotations dd { margin: 0; font-size: .9375rem; line-height: 1.6; }
.repere-cours__annotations small { display: block; margin-top: .4rem; font-size: .8rem; color: var(--lect-ink-soft); }
.repere-cours .repere-cours__nombres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.repere-cours .repere-cours__nombres li { padding: 1rem; border-bottom: 3px solid var(--lect-violet); background: var(--lect-bg); border-radius: 10px 10px 0 0; }
.repere-cours__nombres span, .repere-cours__nombres small { display: block; font-size: .75rem; line-height: 1.5; color: var(--lect-ink-soft); }
.sectionBody.epure .repere-cours__nombres strong { display: block; margin: .6rem 0; font-size: clamp(1.5rem, 5.5cqi, 2.5rem); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--lect-violet-deep); }
.repere-cours__rappel { margin-top: 1.25rem; border-top: 1px solid var(--lect-line); border-bottom: 1px solid var(--lect-line); }
.repere-cours__rappel summary { padding: 1rem .15rem; cursor: pointer; font-size: .9rem; font-weight: 600; line-height: 1.6; color: var(--lect-ink); }
.repere-cours__rappel summary::marker { color: var(--lect-violet-deep); }
.repere-cours__rappel summary:focus-visible { outline: 2px solid var(--lect-violet); outline-offset: 4px; border-radius: 4px; }
.sectionBody.epure .repere-cours__rappel p { margin: 0; padding: 0 .15rem 1rem; }
.sectionBody.epure .repere-cours .repere-cours__sources { margin-top: 1rem; font-size: .75rem; }
@container (max-width: 600px) {
  .repere-cours__trio { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 400px) {
  .repere-cours__annotations > div { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}
@container (max-width: 500px) {
  .repere-cours__duo,
  .repere-cours .repere-cours__nombres { grid-template-columns: minmax(0, 1fr); }
  .repere-cours .repere-cours__etapes li { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
@media (max-width: 600px) {
  .repere-cours .repere-cours__ligne-temps ol, .repere-cours__annotations > div, .repere-cours .repere-cours__nombres { grid-template-columns: minmax(0, 1fr); }
  .repere-cours .repere-cours__ligne-temps li { border-top: 0; border-left: 3px solid var(--lect-line); }
  .repere-cours__annotations > div { gap: .35rem; }
  .repere-cours__embranchements { margin-left: 0; padding-left: .65rem; }
  .repere-cours__embranchements > div::before { left: -.7rem; width: .7rem; }
  .repere-cours__embranchements > div { padding: .8rem; }
}
@media print {
  .repere-cours__ligne-temps, .repere-cours__annotations > div, .repere-cours__nombres li { break-inside: avoid; }
  .repere-cours__rappel > :not(summary) { display: block !important; }
  .repere-cours__rappel::details-content { content-visibility: visible; }
}

/* Scènes pédagogiques : image sans texte, repères HTML et réponses accessibles. */
.repere-cours__scene {
  position: relative;
  margin: 1.25rem 0;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--lect-line);
  border-radius: 12px;
  background: #faf5eb;
}
.repere-cours .repere-cours__scene img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.repere-cours__mention-image {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 1;
  max-width: calc(100% - 1rem);
  padding: .2rem .45rem;
  border-radius: 4px;
  background: #fffdf6;
  color: #514b43;
  font: 400 .6875rem/1.4 var(--font-body);
  pointer-events: none;
}
.repere-cours__point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(1.5rem, 4cqi, 2rem);
  aspect-ratio: 1;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: #4e3578;
  box-shadow: 0 2px 6px #21143338;
  font: 700 clamp(.75rem, 2cqi, .9375rem)/1 var(--font-body);
  pointer-events: none;
}
.sectionBody.epure .repere-cours .repere-cours__credit,
.repere-cours .repere-cours__credit {
  margin-top: 1rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--lect-ink-soft);
}
.repere-cours__correction { padding-bottom: .75rem; }
.repere-cours__comparaison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.25rem; }
.repere-cours__comparaison > div { min-width: 0; }
.repere-cours__comparaison .repere-cours__scene { margin: .65rem 0; }
.repere-cours__scene .repere-cours__trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.repere-cours__etiquette {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  padding: .2em .55em; border-radius: 5px; background: #fffdf6; color: #39274f;
  font: 700 .75rem/1.4 var(--font-body); pointer-events: none;
}
.repere-cours .repere-cours__commandes { list-style: none; padding: 0; margin: 1rem 0; }
.repere-cours .repere-cours__commandes li { display: grid; grid-template-columns: 5rem 1fr; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--lect-line); }
.repere-cours__commandes li::before { content: none; }
@container (max-width: 540px) {
  .repere-cours .repere-cours__commandes li { grid-template-columns: 1fr; gap: .15rem; }
}
@container (max-width: 480px) {
  .repere-cours__comparaison { grid-template-columns: 1fr; }
}
.sectionBody.epure .repere-cours__correction p,
.repere-cours__correction p { padding: 0 .15rem .65rem; }
@media print {
  .repere-cours__scene { break-inside: avoid; max-width: 135mm; margin-inline: auto; }
  .repere-cours__point { color: #fff !important; background: #4e3578 !important; print-color-adjust: exact; }
}

/* Signature Héritage : proportions et séparateur issus du fichier maître. */
.brandRow > .brandSignature {
  display: block;
  width: 204px;
  max-width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .brandRow > .brandSignature { width: 160px; }
}