/*
 * mathpad.css — v1.0.0-draft
 * Sarmate.net — book-style rendering for mp-* grammar.
 * See schema/mathpad-grammar.md.
 */

/* ==========================================================
   1. CSS Variables (defaults — overridden per theme)
   ========================================================== */
:root {
  /* Surface colors */
  --bg-primary:   #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary:  #e2e8f0;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted:   #94a3b8;
  --border-soft:  #e2e8f0;

  /* Accent */
  --accent-primary:   #3b82f6;
  --accent-secondary: #60a5fa;
  --accent-gradient:  #3b82f6;

  /* Block colors per type (new mp-* palette) */
  --mp-def-color:      #2563eb; /* deep blue */
  --mp-theorem-color:  #b91c1c; /* deep red — emphasis */
  --mp-prop-color:     #7c3aed; /* violet */
  --mp-lemma-color:    #0f766e; /* teal */
  --mp-remark-color:   #b45309; /* amber */
  --mp-method-color:   #16a34a; /* green */
  --mp-warning-color:  #dc2626; /* warning red */
  --mp-example-color:  #0891b2; /* cyan */
  --mp-exercise-color: #059669; /* emerald */
  --mp-activity-color: #9333ea; /* purple */
  --mp-quiz-color:     #6366f1; /* indigo — interactive QCM */
  --mp-proof-color:    #475569; /* slate */
  --mp-accent-color:   var(--accent-primary);

  /* Correction modal */
  --correction-bg:        rgba(99, 102, 241, 0.08);
  --correction-border:    #6366f1;
  --correction-btn-bg:    #f1f5f9;
  --correction-btn-text:  #6366f1;

  /* Navigation bar (mp-blank stepper) — legacy green/blue scheme */
  --nav-btn-primary:   #00c896;  /* outer buttons (fast forward/backward) — green */
  --nav-btn-secondary: #0096c8;  /* inner buttons (single step) — blue */
  --nav-bar-bg:        rgba(255, 255, 255, 0.6);  /* frosted glass for bottom bar */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;

  /* Typography (sans-serif for projector readability at distance) */
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ui:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;

  /* Layout (full-width projector display, not book column) */
  --block-pad-x: 22px;
  --block-pad-y: 16px;
}

/* ==========================================================
   2. Themes (preserved from v0 — block-* legacy vars kept
      and mapped onto new mp-* vars for backward compat)
   ========================================================== */
[data-theme="original"] {
  --accent-primary: #6b7fb0;
  --mp-def-color:      #6b7fb0;
  --mp-theorem-color:  #6b7fb0;
  --mp-prop-color:     #6b7fb0;
  --mp-lemma-color:    #6b7fb0;
  --mp-remark-color:   #6b7fb0;
  --mp-example-color:  #6b7fb0;
  --mp-exercise-color: #6b7fb0;
  --mp-activity-color: #6b7fb0;
  --mp-method-color:   #6b7fb0;
  --mp-warning-color:  #6b7fb0;
}

[data-theme="classique"] {
  --accent-primary: #3b82f6;
  --mp-def-color:      #2563eb;
  --mp-theorem-color:  #b91c1c;
  --mp-prop-color:     #7c3aed;
  --mp-lemma-color:    #0f766e;
  --mp-remark-color:   #b45309;
  --mp-example-color:  #0891b2;
  --mp-exercise-color: #059669;
  --mp-activity-color: #9333ea;
  --mp-method-color:   #16a34a;
  --mp-warning-color:  #dc2626;
}

[data-theme="ocean"] {
  --accent-primary: #0891b2;
  --mp-def-color:      #0369a1;
  --mp-theorem-color:  #be185d;
  --mp-prop-color:     #0d9488;
  --mp-lemma-color:    #0e7490;
  --mp-remark-color:   #0891b2;
  --mp-example-color:  #06b6d4;
  --mp-exercise-color: #059669;
  --mp-activity-color: #0e7490;
  --mp-method-color:   #16a34a;
  --mp-warning-color:  #be123c;
}

[data-theme="foret"] {
  --accent-primary: #059669;
  --mp-def-color:      #047857;
  --mp-theorem-color:  #991b1b;
  --mp-prop-color:     #0d9488;
  --mp-lemma-color:    #047857;
  --mp-remark-color:   #92400e;
  --mp-example-color:  #0891b2;
  --mp-exercise-color: #15803d;
  --mp-activity-color: #166534;
  --mp-method-color:   #4d7c0f;
  --mp-warning-color:  #b91c1c;
}

[data-theme="lavande"] {
  --accent-primary: #7c3aed;
  --mp-def-color:      #6d28d9;
  --mp-theorem-color:  #be185d;
  --mp-prop-color:     #9333ea;
  --mp-lemma-color:    #c026d3;
  --mp-remark-color:   #a16207;
  --mp-example-color:  #6366f1;
  --mp-exercise-color: #059669;
  --mp-activity-color: #7c3aed;
  --mp-method-color:   #16a34a;
  --mp-warning-color:  #dc2626;
}

[data-theme="corail"] {
  --accent-primary: #fb923c;
  --mp-def-color:      #0369a1;
  --mp-theorem-color:  #b91c1c;
  --mp-prop-color:     #7c3aed;
  --mp-lemma-color:    #0f766e;
  --mp-remark-color:   #b45309;
  --mp-example-color:  #0891b2;
  --mp-exercise-color: #059669;
  --mp-activity-color: #9333ea;
  --mp-method-color:   #16a34a;
  --mp-warning-color:  #c2410c;
}

[data-theme="rose"] {
  --accent-primary: #f472b6;
  --mp-def-color:      #be185d;
  --mp-theorem-color:  #be123c;
  --mp-prop-color:     #a21caf;
  --mp-lemma-color:    #be185d;
  --mp-remark-color:   #b45309;
  --mp-example-color:  #2563eb;
  --mp-exercise-color: #059669;
  --mp-activity-color: #c026d3;
  --mp-method-color:   #15803d;
  --mp-warning-color:  #dc2626;
}

[data-theme="ardoise"] {
  --accent-primary: #475569;
  --mp-def-color:      #334155;
  --mp-theorem-color:  #991b1b;
  --mp-prop-color:     #475569;
  --mp-lemma-color:    #1e3a8a;
  --mp-remark-color:   #92400e;
  --mp-example-color:  #0e7490;
  --mp-exercise-color: #047857;
  --mp-activity-color: #581c87;
  --mp-method-color:   #15803d;
  --mp-warning-color:  #991b1b;
}

[data-theme="sepia"] {
  --bg-primary:   #fef3c7;
  --bg-secondary: #fde68a;
  --bg-tertiary:  #fcd34d;
  --text-primary: #451a03;
  --text-secondary: #78350f;
  --text-muted:   #92400e;
  --accent-primary: #92400e;
  --mp-def-color:      #92400e;
  --mp-theorem-color:  #991b1b;
  --mp-prop-color:     #78350f;
  --mp-lemma-color:    #166534;
  --mp-remark-color:   #a16207;
  --mp-example-color:  #0e7490;
  --mp-exercise-color: #166534;
  --mp-activity-color: #581c87;
  --mp-method-color:   #166534;
  --mp-warning-color:  #991b1b;
}

[data-theme="nuit"] {
  --nav-bar-bg:   rgba(15, 23, 42, 0.65);
  --bg-primary:   #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary:  #334155;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted:   #94a3b8;
  --border-soft:  #334155;
  --accent-primary: #60a5fa;
  --mp-def-color:      #60a5fa;
  --mp-theorem-color:  #f87171;
  --mp-prop-color:     #a78bfa;
  --mp-lemma-color:    #5eead4;
  --mp-remark-color:   #fbbf24;
  --mp-example-color:  #67e8f9;
  --mp-exercise-color: #34d399;
  --mp-activity-color: #c084fc;
  --mp-method-color:   #4ade80;
  --mp-warning-color:  #fb7185;
  --mp-proof-color:    #cbd5e1;
  --correction-bg: rgba(96, 165, 250, 0.15);
  --correction-btn-bg: #1e293b;
  --correction-border: #60a5fa;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.5);
}

[data-theme="minuit"] {
  --nav-bar-bg:   rgba(0, 0, 0, 0.65);
  --bg-primary:   #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary:  #171717;
  --text-primary: #fafafa;
  --text-secondary: #d4d4d4;
  --text-muted:   #737373;
  --border-soft:  #262626;
  --accent-primary: #60a5fa;
  --mp-def-color:      #60a5fa;
  --mp-theorem-color:  #fb7185;
  --mp-prop-color:     #c084fc;
  --mp-lemma-color:    #5eead4;
  --mp-remark-color:   #fbbf24;
  --mp-example-color:  #67e8f9;
  --mp-exercise-color: #34d399;
  --mp-activity-color: #d8b4fe;
  --mp-method-color:   #4ade80;
  --mp-warning-color:  #fb7185;
  --mp-proof-color:    #d4d4d4;
  --correction-bg: rgba(96, 165, 250, 0.2);
  --correction-btn-bg: #0a0a0a;
  --correction-border: #60a5fa;
}

/* ==========================================================
   3. Reset and base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 16px 20px 24px;
  width: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: background var(--transition-normal), color var(--transition-normal);
}

/* Mobile: tighter horizontal padding */
@media (max-width: 600px) {
  body {
    padding: 12px 14px 70px;
    font-size: 16px;
  }
}

p { margin: 0.6em 0; }

a {
  color: var(--accent-primary);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}
a:hover { border-bottom-color: var(--accent-primary); }

strong { font-weight: 700; }
em     { font-style: italic; }

/* ==========================================================
   4. Sectioning
   ========================================================== */
mp-course   { display: block; }
mp-chapter,
mp-section,
mp-subsection { display: block; margin: 1.4em 0; }
/* Document header (\maketitle equivalent) — a single hero block that wraps
   <mp-doc-title> + optional <mp-author> + <mp-date>. The block uses a gradient
   based on the current accent colour, making it the most visually prominent
   element of the document (more so than <mp-chapter>). All other children of
   <mp-meta> (SEO metadata, custom fields…) stay hidden. */
mp-meta {
  display: block;
  background: linear-gradient(135deg,
    var(--accent-primary) 0%,
    color-mix(in srgb, var(--accent-primary) 55%, #000) 100%);
  color: white;
  text-align: center;
  padding: 2.4em 1.4em 1.9em;
  margin: 0 0 1.8em;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}
mp-meta > *:not(mp-doc-title):not(mp-author):not(mp-date) { display: none; }

/* Decorative diagonal hint in the corner (subtle, gives depth) */
mp-meta::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 160%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

mp-meta mp-doc-title,
mp-doc-title {
  display: block;
  font-family: var(--font-ui);
  font-size: 2.8em;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: white;
  margin: 0 0 0.5em;
  padding: 0;
  position: relative;
}
mp-meta mp-author,
mp-author {
  display: block;
  font-family: var(--font-ui);
  font-size: 1.05em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 0.25em;
  position: relative;
}
mp-meta mp-date,
mp-date {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.92em;
  color: rgba(255, 255, 255, 0.72);
  font-style: italic;
  margin: 0;
  position: relative;
}

/* When <mp-doc-title> is used standalone (no <mp-meta> wrapper), it still gets
   the hero treatment so articles without metadata look good too. */
mp-doc-title:not(mp-meta mp-doc-title) {
  background: linear-gradient(135deg,
    var(--accent-primary) 0%,
    color-mix(in srgb, var(--accent-primary) 55%, #000) 100%);
  padding: 1.6em 1.4em;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  margin: 0 0 1.8em;
  text-align: center;
}

@media (max-width: 600px) {
  mp-meta { padding: 1.6em 1em 1.3em; }
  mp-doc-title, mp-meta mp-doc-title { font-size: 1.9em; }
  mp-author, mp-meta mp-author { font-size: 0.95em; }
  mp-date, mp-meta mp-date { font-size: 0.85em; }
}

mp-title { display: block; }

/* Chapter title = the visible course title (hero centered) */
mp-chapter > mp-title {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 2.2em;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 1.5em;
  padding: 1.4em 1em 1.3em;
  background: linear-gradient(135deg,
    var(--accent-primary) 0%,
    color-mix(in srgb, var(--accent-primary) 70%, #000) 100%);
  color: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
mp-chapter > mp-title .mp-sectioning-label {
  display: block;
  font-size: 0.38em;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.6em;
  color: white;
}
@media (max-width: 600px) {
  mp-chapter > mp-title { font-size: 1.7em; padding: 1.2em 0.8em 1em; }
}
mp-section > mp-title {
  font-family: var(--font-ui);
  font-size: 1.55em;
  font-weight: 700;
  margin: 1em 0 0.4em;
  padding: 0.3em 0.6em;
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-primary));
  color: var(--text-primary);
  border-left: 6px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
mp-subsection > mp-title {
  font-family: var(--font-ui);
  font-size: 1.25em;
  font-weight: 600;
  margin: 0.8em 0 0.3em;
  color: var(--accent-primary);
}
.mp-sectioning-label {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--accent-primary);
  font-weight: 600;
}
.mp-section-number,
.mp-subsection-number {
  color: var(--accent-primary);
  font-weight: 700;
  margin-right: 0.4em;
}

/* ==========================================================
   5. Formal blocks — full-width with strong color band on top
   ========================================================== */
.mp-formal {
  display: block;
  width: 100%;
  margin: 1.4em 0;
  padding: 0;
  background: color-mix(in srgb, var(--mp-block-color, var(--accent-primary)) 6%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--mp-block-color, var(--accent-primary)) 25%, transparent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  /* PAS d'overflow: hidden — les contenus larges (tableaux, formules KaTeX
     longues) doivent pouvoir scroller via .mp-overflow-wrap. Le header a
     ses propres border-radius haut pour rester aligné avec les coins. */
  position: relative;
  break-inside: avoid;
  page-break-inside: avoid;
}
.mp-formal-header {
  font-family: var(--font-ui);
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 1em;
  color: white;
  background: var(--mp-block-color, var(--accent-primary));
  padding: 0.45em var(--block-pad-x);
  position: relative;
  /* Match les coins arrondis du parent en haut (le header colle visuellement
     au bord). Sans overflow: hidden sur le parent, indispensable. */
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}
.mp-formal-body {
  color: var(--text-primary);
  padding: 0.7em var(--block-pad-x) 0.7em;
  font-size: 1em;
}
.mp-formal-body > *:first-child { margin-top: 0; }
.mp-formal-body > *:last-child  { margin-bottom: 0; }

/* ROC badge */
.mp-roc-badge {
  position: absolute;
  top: 50%;
  right: var(--block-pad-x);
  transform: translateY(-50%);
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: white;
  color: var(--mp-block-color, var(--accent-primary));
  padding: 3px 9px;
  border-radius: 3px;
  vertical-align: middle;
}

/* Dark themes need slightly stronger body tint */
[data-theme="nuit"]   .mp-formal,
[data-theme="minuit"] .mp-formal {
  background: color-mix(in srgb, var(--mp-block-color, transparent) 14%, var(--bg-secondary));
}

/* Per-block icon (CSS pseudo-content using FontAwesome) */
.mp-warning .mp-formal-header::before {
  content: "\f071"; /* fa-exclamation-triangle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.4em;
}
.mp-method .mp-formal-header::before {
  content: "\f0eb"; /* fa-lightbulb */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.4em;
}
.mp-remark .mp-formal-header::before {
  content: "\f05a"; /* fa-info-circle */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin-right: 0.4em;
}

/* ==========================================================
   6. Proof
   ========================================================== */
.mp-proof {
  display: block;
  margin: 0.8em 0 1.2em;
  padding-left: var(--block-pad-x);
  color: var(--text-secondary);
  border-left: 3px dotted var(--mp-proof-color);
}
.mp-proof-header {
  display: inline;
  font-style: italic;
  font-weight: 600;
  color: var(--mp-proof-color);
  margin-right: 0.4em;
}
.mp-proof-body { display: inline; }
.mp-proof-end {
  display: inline-block;
  margin-left: 0.4em;
  color: var(--mp-proof-color);
  font-size: 1em;
}

/* ==========================================================
   7. Pedagogical blocks (example, exercise, activity)
   ========================================================== */
.mp-pedagogical {
  display: block;
  width: 100%;
  margin: 1.4em 0;
  padding: 0;
  background: color-mix(in srgb, var(--mp-block-color, var(--accent-primary)) 5%, var(--bg-primary));
  border: 1px solid color-mix(in srgb, var(--mp-block-color, var(--accent-primary)) 25%, transparent);
  border-radius: var(--radius-md);
  /* PAS d'overflow: hidden — voir note sur .mp-formal. */
  break-inside: avoid;
  page-break-inside: avoid;
}
.mp-pedagogical-header {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  padding: 0.45em var(--block-pad-x);
  background: var(--mp-block-color, var(--accent-primary));
  color: white;
  /* Coins arrondis pour matcher le parent (sans overflow: hidden). */
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}
.mp-pedagogical-body {
  padding: 0.7em var(--block-pad-x) 0.7em;
  color: var(--text-primary);
}
.mp-pedagogical-body > *:first-child { margin-top: 0; }
.mp-pedagogical-body > *:last-child  { margin-bottom: 0; }
.mp-pedagogical-label {
  font-family: var(--font-ui);
  letter-spacing: 0.03em;
  font-weight: 700;
  font-size: 1em;
  color: white;
}
/* Inline heading mode (<mp-course exercise-heading="inline">) — the <mp-title>
   is moved next to the label with a " : " separator, LaTeX-style. */
.mp-pedagogical-sep { font-weight: 600; opacity: 0.9; padding: 0 0.05em; }
.mp-pedagogical-title-inline {
  display: inline;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1em;
  color: white;
  letter-spacing: normal;
  margin: 0;
}

.mp-difficulty {
  color: white;
  font-size: 0.95em;
  letter-spacing: 0.1em;
  opacity: 0.95;
}
.mp-duration {
  font-family: var(--font-ui);
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.92);
  margin-left: auto;
}
.mp-duration .far { margin-right: 0.25em; }

mp-statement { display: block; margin-bottom: 0.5em; }
mp-statement > *:first-child { margin-top: 0; }

/* ==========================================================
   7b. Quiz (mp-quiz / mp-question / mp-answer)
   ========================================================== */
mp-quiz mp-question {
  display: block;
  font-weight: 600;
  margin: 0 0 0.85em;
  line-height: 1.55;
}
mp-quiz mp-answer {
  display: block;
  margin: 0.35em 0;
  padding: 10px 14px 10px 40px;
  background: var(--bg-secondary, #f3f4f6);
  border: 1px solid var(--border-soft, #e5e7eb);
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
}
mp-quiz mp-answer::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-muted, #94a3b8);
  background: transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
mp-quiz mp-answer.mp-answer-multi::before { border-radius: 4px; }
mp-quiz mp-answer:hover {
  background: var(--bg-tertiary, #e5e7eb);
  border-color: var(--mp-quiz-color);
  transform: translateX(2px);
}
mp-quiz mp-answer.mp-answer-selected::before {
  background: var(--mp-quiz-color);
  border-color: var(--mp-quiz-color);
  box-shadow: inset 0 0 0 3px var(--bg-secondary, #f3f4f6);
}
mp-quiz.mp-quiz-locked mp-answer {
  cursor: default;
  pointer-events: none;
  transform: none;
}
mp-quiz mp-answer.mp-answer-correct {
  background: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
mp-quiz mp-answer.mp-answer-correct::before {
  border-color: #10b981;
  background: #10b981;
  content: '\f00c'; /* fa-check */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
  font-weight: 900;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
mp-quiz mp-answer.mp-answer-wrong {
  background: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}
mp-quiz mp-answer.mp-answer-wrong::before {
  border-color: #ef4444;
  background: #ef4444;
  content: '\f00d'; /* fa-times */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome;
  font-weight: 900;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
mp-quiz mp-answer.mp-answer-picked { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18); }
mp-quiz mp-answer.mp-answer-revealed { opacity: 0.85; }
.mp-quiz-feedback {
  margin-top: 1em;
  font-weight: 600;
  font-size: 1.05em;
  min-height: 1.2em;
}
.mp-quiz-feedback-ok { color: #047857; }
.mp-quiz-feedback-ko { color: #b91c1c; }
.mp-quiz-validate {
  margin-top: 0.8em;
  padding: 8px 18px;
  background: var(--mp-quiz-color);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: filter var(--transition-fast);
}
.mp-quiz-validate:hover:not(:disabled) { filter: brightness(1.08); }
.mp-quiz-validate:disabled { opacity: 0.55; cursor: default; }

/* Dark theme readability tweaks */
[data-theme="nuit"] mp-quiz mp-answer,
[data-theme="minuit"] mp-quiz mp-answer { background: var(--bg-secondary); color: var(--text-primary); }
[data-theme="nuit"] mp-quiz mp-answer.mp-answer-correct,
[data-theme="minuit"] mp-quiz mp-answer.mp-answer-correct { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
[data-theme="nuit"] mp-quiz mp-answer.mp-answer-wrong,
[data-theme="minuit"] mp-quiz mp-answer.mp-answer-wrong { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }

/* ==========================================================
   8. Generic container (mp-box)
   ========================================================== */
.mp-box {
  display: block;
  padding: 14px 18px;
  margin: 1em 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  /* PAS d'overflow: hidden ici — sinon les contenus larges (tableaux,
     formules KaTeX longues) sont clippés en responsive sans scrollbar.
     Le bandeau <mp-title> a ses propres border-radius haut, ce qui suffit
     à éviter le liseré de couleur du corps au-dessus. */
}
.mp-box > *:first-child { margin-top: 0; }
.mp-box > *:last-child  { margin-bottom: 0; }

.mp-box-accent {
  background: var(--accent-primary);
  color: white;
}
.mp-box-accent a { color: white; border-bottom-color: rgba(255,255,255,0.4); }

.mp-box-grey {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-soft);
}
.mp-box-info {
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary));
  color: var(--text-primary);
  border-left: 4px solid var(--accent-primary);
}
.mp-box-subtle {
  background: transparent;
  border: 1px dashed var(--border-soft);
  color: var(--text-secondary);
}

/* Bandeau de titre dans <mp-box> : reproduit le rendu LaTeX tcolorbox
   colbacktitle=<framecolor>!20!white + fonttitle=\bfseries. Approche : si
   la box a un <mp-title>, on supprime son padding-top — le bandeau peut
   alors prendre toute la largeur ET coller au bord supérieur sans bidouille
   de margin négatif (qui était écrasé par .mp-box > *:first-child). */
.mp-box:has(> mp-title) {
  padding-top: 0;
}
.mp-box > mp-title {
  display: block;
  margin: 0 -18px 12px;
  padding: 10px 18px;
  font-weight: bold;
  background: color-mix(in srgb, currentColor 10%, transparent);
  /* Match les coins arrondis du parent au-dessus (le bandeau « colle »
     visuellement aux coins du <mp-box>). Sans overflow: hidden sur le
     parent, ça reste indispensable pour ne pas voir de carré net. */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.mp-box-info > mp-title {
  background: color-mix(in srgb, var(--accent-primary) 25%, var(--bg-primary));
}
.mp-box-accent > mp-title {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}
.mp-box-subtle > mp-title {
  background: var(--bg-secondary);
}
.mp-box-grey > mp-title {
  background: color-mix(in srgb, currentColor 14%, var(--bg-secondary));
}

/* ==========================================================
   8bis. Long division "à la potence" (\opidiv converter output)
   ========================================================== */
table.mp-opidiv {
  border-collapse: collapse;
  display: inline-block;
  vertical-align: top;
  margin: 0.5em 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
table.mp-opidiv td {
  width: 1.4em;
  height: 1.5em;
  padding: 0 2px;
  text-align: center;
}
table.mp-opidiv td.op-sign {
  width: 1em;
  color: var(--text-secondary);
}
table.mp-opidiv td.op-bar {
  border-bottom: 1.5px solid currentColor;
}
table.mp-opidiv td.op-right {
  width: auto;
  padding: 0;
  text-align: left;
  vertical-align: top;
  border-left: 1.5px solid currentColor;
}
table.mp-opidiv .op-divisor,
table.mp-opidiv .op-quotient {
  padding: 0 0.6em;
}
table.mp-opidiv .op-quotient {
  border-top: 1.5px solid currentColor;
  margin-top: 1px;
  min-height: 1.5em;
}

/* ==========================================================
   8ter. Multi-column blocks (\begin{multicols} → convert_multicols)
   ========================================================== */
/* Top-align the columns : the first child (often an <ol>/<p> with a top
   margin) would otherwise push column 1 lower than the CSS-column
   continuations / the other flex columns. */
.mp-multicol > :first-child,
.mp-multicol > div > :first-child {
  margin-top: 0;
}

/* Champs de formulaire des devoirs/sujets (\textsc{Classe :} … → form-row). */
.devoir-form-row {
  margin: 0.5em 0;
}
.devoir-blank {
  display: inline-block;
  min-width: 14em;
  border-bottom: 1px solid currentColor;
  vertical-align: baseline;
}

/* ==========================================================
   9. Figure + caption
   ========================================================== */
.mp-figure, mp-figure {
  display: block;
  margin: 1.2em auto;
  text-align: center;
}
.mp-figure img,
.mp-figure canvas,
.mp-figure svg,
mp-figure img,
mp-figure canvas,
mp-figure svg {
  /* 350px hard cap : pupils view on phones — never overflow-x. */
  max-width: min(350px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-sm);
}
/* Backstop : any image/graphic anywhere in a converted course, incl. loose
   <img> outside <mp-figure> — same 350px phone-safe cap. */
mp-course img, mp-course canvas, mp-course svg {
  max-width: min(350px, 100%);
  height: auto;
}
.mp-caption, mp-caption {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}
/* "Figure N — " label prefix injected by renderFigures() */
.mp-fig-label {
  font-style: normal;
  font-weight: 600;
  color: var(--text-secondary, #555);
}
/* Source-credit note under a figure ("Note. Reproduite de …") */
.mp-fig-note {
  font-size: 0.82em;
  color: var(--text-muted, #777);
  margin-top: 0.3em;
  text-align: left;
}
/* Manually-built LaTeX title page (\begin{titlepage}) */
.mp-titlepage {
  margin: 1.5em auto 2.5em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid var(--text-muted, #999);
}
.mp-titlepage hr {
  border: none;
  border-top: 1px solid var(--text-primary, #333);
  margin: 0.6em auto;
  width: 80%;
}

/* ==========================================================
   10. Inline formatting
   ========================================================== */
.mp-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.mp-center {
  display: block;
  width: 100%;
  text-align: center;
}
.mp-spacer { white-space: pre; }

/* ==========================================================
   11. Cross-references
   ========================================================== */
.mp-ref-link {
  color: var(--accent-primary);
  font-weight: 600;
  border-bottom: 1px dotted var(--accent-primary);
}
.mp-ref-broken {
  color: var(--mp-warning-color);
  background: rgba(220, 38, 38, 0.1);
  padding: 0 4px;
  border-radius: 3px;
  font-size: 0.85em;
}

/* ==========================================================
   12. Interactive — blanks (progressive reveal)
   ========================================================== */
.mp-blank {
  visibility: hidden;
  display: inline-block;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 1px;
}
.mp-blank-highlight {
  background: rgba(34, 197, 94, 0.35);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

/* ==========================================================
   13. Interactive — checkboxes (label inside)
   ========================================================== */
.mp-checkbox {
  display: block;
  margin: 0.35em 0;
}
.mp-checkbox-label {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  cursor: pointer;
  user-select: none;
  padding: 0.15em 0;
  transition: opacity var(--transition-fast);
}
.mp-checkbox-label:hover { color: var(--accent-primary); }
.mp-checkbox-input {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--accent-primary);
  cursor: pointer;
  transform: translateY(0.1em);
}
.mp-checkbox-text {
  flex: 1;
  line-height: 1.5;
}
.mp-checkbox.mp-checked .mp-checkbox-text {
  text-decoration: line-through;
  text-decoration-color: var(--accent-primary);
  text-decoration-thickness: 2px;
  opacity: 0.65;
}

/* ==========================================================
   14. Corrections (modal reveal)
   ========================================================== */
.mp-correction-wrapped {
  display: block;
  margin: 12px 0 4px;
  clear: both;
}
.btnCorr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  background: var(--correction-btn-bg);
  border-left: 3px solid var(--correction-border);
  color: var(--correction-btn-text);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.85em;
  cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
  border-bottom: none !important;
}
.btnCorr:hover {
  background: var(--accent-primary);
  color: white;
  transform: translateX(3px);
}
.btnCorr::before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.85em;
}

.correction {
  position: relative;
  display: none;
  opacity: 0;
  transform: scale(0.97) translateY(-6px);
  transition: all var(--transition-normal);
  margin: 12px 0 6px;
  overflow: visible; /* allow the close × to straddle the top-right corner */
}
.correction.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.intCorr {
  padding: 10px 36px 10px 14px;  /* right room for the portion of the × that's inside */
  background: var(--correction-bg);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--correction-border);
  line-height: 1.5;
}
.clos {
  position: absolute;
  top: -5px;    /* 5px above the modal's top edge */
  right: -5px;  /* 5px past the modal's right edge — straddling the corner */
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--correction-btn-bg);
  color: var(--correction-btn-text);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9em;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  border-bottom: none !important;
  transition: all var(--transition-fast);
}
.clos:hover {
  background: #ef4444;
  color: white;
  transform: scale(1.1);
}

/* ==========================================================
   15. Code blocks
   ========================================================== */
.mp-code {
  display: block;
  margin: 1.2em auto;
  width: 100%;
  font-family: var(--font-mono);
  text-align: center;
  /* Le wrapper gère le scroll horizontal : CodeMirror peut s'étendre à
     sa max-content interne (lignes longues non wrappées), et .mp-code
     limite la zone visible à la largeur disponible. Responsive : sur
     écran étroit la scrollbar X reste sur .mp-code (discrète), pas
     l'interne CodeMirror. */
  overflow-x: auto;
  max-width: 100%;
  /* Cadre visible : déplacé de .CodeMirror vers .mp-code pour qu'il
     reste fixe sur le viewport, indépendamment de la largeur interne
     du CodeMirror (qui peut être plus large que ce qu'on voit). */
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
}
.mp-code .CodeMirror {
  font-family: var(--font-mono);
  font-size: 0.92em;
  margin: 0 auto;
  text-align: left;
}
/* Force le mode auto-height de bout en bout : CodeMirror impose des
   hauteurs internes qui créent des scrollbars Y même quand on n'en veut
   pas. On désactive scroll/clip à chaque niveau (.CodeMirror,
   .CodeMirror-scroll, .CodeMirror-sizer) et on masque la fausse
   scrollbar verticale que CodeMirror dessine. Résultat : tout le code
   est rendu visible, sans scrollbar Y. La scrollbar X reste possible
   sur .CodeMirror-scroll pour les lignes longues (cas niixja). */
.mp-code .CodeMirror,
.mp-code .CodeMirror-scroll {
  height: auto !important;
  max-height: none !important;
}
.mp-code .CodeMirror {
  /* Laisse l'éditeur s'étendre à sa largeur naturelle ; c'est .mp-code
     qui scrollera horizontalement si nécessaire. Le max-width:100% de
     la règle au-dessus serait contraignant ici → on l'annule. */
  width: max-content !important;
  min-width: 100%;
  max-width: none !important;
}
.mp-code .CodeMirror-scroll {
  min-height: auto !important;
  /* X et Y : on désactive les scrolls internes, .mp-code prend la
     main pour X et le contenu Y est intégralement visible. */
  overflow: visible !important;
  /* CodeMirror met padding-bottom:50px pour réserver l'espace de la
     scrollbar X, ce qui crée du vide visuel inutile en mode auto. */
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0 !important;
}
.mp-code .CodeMirror-vscrollbar,
.mp-code .CodeMirror-hscrollbar {
  display: none !important;
}
.btnPython {
  display: inline-block;
  background: var(--accent-primary);
  color: white !important;
  font-family: var(--font-ui);
  font-weight: 600;
  padding: 8px 22px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin: 10px auto;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
  border-bottom: none !important;
}
.mp-code .btnPython {
  display: inline-block;
}
.btnPython:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.outputPython {
  display: block;
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  white-space: pre-wrap;
  min-height: 1.4em;
  margin: 8px auto 0;
  border: 1px solid var(--border-soft);
  text-align: left;
  max-width: 100%;
  box-sizing: border-box;
}
.mp-error {
  color: var(--mp-warning-color);
  font-weight: 600;
}
.tortue {
  display: none;
  margin: 8px auto 0;
}

/* ==========================================================
   14b. Aligned equation chains (mp-align) — LaTeX align-like
   ========================================================== */
mp-align {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mp-align-table {
  margin: 0.8em auto;
  border-collapse: collapse;
}
.mp-align-cell {
  padding: 4px 6px;
  vertical-align: middle;
  white-space: nowrap;
}
/* Layout convention for a 5-column line: & prefix & LHS & = & RHS & comment
   ────────────────────────────────────────────────────────────────────────
   nth-child(1) : prefix (often empty / implication arrow) — right
   nth-child(2) : left-hand side                            — right
   nth-child(3) : the "=" symbol                            — center
   nth-child(4) : right-hand side                           — left
   nth-child(5) : in-line comment (handled by .mp-align-comment) */
.mp-align-cell:nth-child(1) { text-align: right; font-weight: 600; }
.mp-align-cell:nth-child(2) { text-align: right; }
.mp-align-cell:nth-child(3) { text-align: center; padding: 4px 10px; }
.mp-align-cell:nth-child(4) { text-align: left; }
/* Alignement POSITIONNEL autour de la relation (=, ≤, →, …). Plus fort
   que les nth-child ci-dessus (cf. ordre source + même spécificité).
   - LHS (cellules avant la relation) → right (collent au =)
   - REL (la relation elle-même) → center
   - RHS (cellules après la relation, hors commentaire) → left (collent au =) */
.mp-align-cell.mp-align-lhs { text-align: right !important; }
.mp-align-cell.mp-align-rel { text-align: center !important; padding: 4px 10px; font-weight: normal; }
.mp-align-cell.mp-align-rhs { text-align: left !important; }
/* LaTeX-style row spacer: trailing "\\[12px]" or "\\[1.5em]" on a line sets
   --mp-align-row-extra-pad on the <tr>; we translate it into extra padding-bottom. */
.mp-align-table tr[style*="--mp-align-row-extra-pad"] .mp-align-cell {
  padding-bottom: calc(4px + var(--mp-align-row-extra-pad, 0px));
}
/* Second cell = typically first value, right-aligned for numeric column alignment */
.mp-align-cell:nth-child(2) {
  text-align: right;
}
/* Comment cell (last when row has > 3 cells) — italic, muted, left-aligned */
.mp-align-cell.mp-align-comment {
  text-align: left;
  padding-left: 14px;
  color: var(--text-secondary);
  font-style: italic;
  white-space: normal; /* allow comment to wrap */
}

/* ==========================================================
   15a. Spreadsheet blocks (mp-spreadsheet) — Excel-like grid
   ========================================================== */
.mp-spreadsheet {
  display: block;
  margin: 1.2em auto;
}
.mp-spreadsheet-container {
  overflow: auto;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  -webkit-overflow-scrolling: touch;
}
.mp-spreadsheet-grid {
  border-collapse: collapse;
  border: 1px solid var(--border-soft);
  background: var(--bg-primary);
  width: auto;
}
.mp-spreadsheet-grid td,
.mp-spreadsheet-grid th {
  border: 1px solid var(--border-soft);
  padding: 0;
  text-align: center;
  width: 80px;
  height: 30px;
  position: relative;
}
.mp-spreadsheet-grid th {
  background-color: var(--bg-secondary);
  font-family: var(--font-ui);
  font-size: 0.85em;
  font-weight: 700;
  color: var(--text-secondary);
  user-select: none;
}
.mp-spreadsheet-grid td {
  vertical-align: top;
}
.mp-spreadsheet-grid textarea {
  width: 100%;
  min-height: 28px;
  resize: none;
  overflow: hidden;
  border: none;
  text-align: left;
  padding: 4px 6px;
  box-sizing: border-box;
  font-size: 14px;
  background: transparent;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-body);
  color: var(--text-primary);
}
.mp-spreadsheet-grid textarea:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-primary));
}
.mp-spreadsheet-fill-handle {
  width: 14px;
  height: 14px;
  background: var(--accent-primary);
  position: absolute;
  bottom: -4px;
  right: -4px;
  border-radius: 3px;
  cursor: crosshair;
  z-index: 10;
  touch-action: none;
  box-shadow: 0 0 0 1px var(--bg-primary);
}
.mp-spreadsheet-highlighted-target {
  outline: 2px solid var(--accent-secondary);
  outline-offset: -2px;
}

/* ==========================================================
   15b. JSXGraph blocks (mp-jsxgraph) — interactive curves
   ========================================================== */
.mp-jsxgraph {
  display: block;
  margin: 1.2em auto;
  text-align: center;
  max-width: 100%;
  /* Pas de overflow-x ici : c'est le .mp-overflow-wrap parent qui gère le
     scroll horizontal quand le board déborde. Ainsi la barre de scroll
     apparaît SOUS le wrap, séparée du board par padding-bottom:14px du
     wrap — l'élève peut toucher cette zone-tampon pour scroller en X sans
     que JSXGraph intercepte. */
  /* Zone tactile verticale autour du board : 16px haut/bas pour que le
     doigt puisse scroller la page sans tomber sur le SVG (qui capture
     les events pointer). */
  padding: 16px 0;
}
.mp-jsxgraph .jxgbox {
  margin: 0 auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================
   16. Variation tables (classes preserved from v0)
   ========================================================== */
table.var {
  border-collapse: collapse;
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--text-primary);
  margin: 1.2em auto;
  font-family: var(--font-body);
  table-layout: fixed;
  /* table-layout: fixed + width: max-content forces the table to its NATURAL width
     (sum of colgroup widths). On a narrow viewport the autoWrapOverflow then wraps
     it in an overflow-x: auto container so cells stay full-width and the user
     scrolls horizontally — better than letting the browser squash arrows and bars. */
  width: max-content;
  max-width: none;
}
.var td {
  text-align: center;
}
.droite       { border-right: 1px solid var(--text-primary); border-bottom: 1px solid var(--text-primary); padding: 12px 18px; text-align: center; font-weight: 600; }
.droite_seule { border-right: 1px solid var(--text-primary); padding: 4px 18px; text-align: center; font-weight: 600; }
.bas          { border-bottom: 1px solid var(--text-primary); padding: 12px 8px; text-align: center !important; }
/* Sign alignment toward the interval boundary so the sign visually sits in its interval */
.mp-sign-left  { text-align: left  !important; padding-left:  16px; }
.mp-sign-right { text-align: right !important; padding-right: 16px; }
/* varTop and varBot rows have explicit fixed heights so the arrow Y endpoints are predictable */
.vh           { padding: 6px 8px 0; text-align: center; vertical-align: middle; height: 30px; }
.mp-var-bot   { padding: 0 8px 6px; text-align: center; vertical-align: middle; height: 30px; overflow: visible; }
/* varBot value alignment to match the arrow's bottom corner (symmetric to varTop logic) */
.mp-varbot-left  { text-align: left  !important; padding-left:  11px; }
.mp-varbot-right { text-align: right !important; padding-right: 11px; }
/* Abscissa values aligned to the arrow start/end corners (matches the value's natural position) */
.mp-abs-left  { text-align: left  !important; padding-left:  16px; }
.mp-abs-right { text-align: right !important; padding-right: 16px; }

/* varTop value alignment to match arrow corners below */
.mp-vartop-left  { text-align: left  !important; padding-left:  11px; }
.mp-vartop-right { text-align: right !important; padding-right: 11px; }

/* Variation label cell (col 0, rowspan across varTop/varMid/varBot) */
.mp-var-label {
  vertical-align: middle;
  font-weight: 600;
}

/* Arrow cells — width comes from colgroup (scales with mp-vartable preset).
   Height stays fixed at 90px; overflow visible so the arrow line can extend into the
   adjacent value-only cell (right or left), but stays strictly within the varMid row. */
.croissante, .decroissante {
  padding: 0;
  height: 90px;
  text-align: center;
  position: relative;
  overflow: visible;
}
.mp-arrow-svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--text-secondary);
  overflow: visible;
}

/* Vertical bar at f'=0 (point on x-axis) — 2px vertical stripe centered in cell */
.verticale {
  border-bottom: 1px solid var(--text-primary);
  padding: 12px 10px;
  text-align: center;
  width: 36px;
  position: relative;
}
/* Barre verticale dessinée via un pseudo-élément positionné au centre exact
   (left:50% + translateX(-50%) garantit le centrage sub-pixel à tout zoom).
   Le texte "0" éventuel est centré par text-align:center — un léger décalage
   typographique <1px peut subsister selon la police, acceptable. */
.verticale::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: var(--text-primary);
  pointer-events: none;
}
.verticale > * { position: relative; z-index: 1; }

/* Forbidden cell — double vertical bar (∥) centered in the cell, drawn as background.
   .interdit (sign/varBot rows) and .interdit_sf (varTop/varMid rows) get the bar fully;
   .mp-forbidden-passthrough is added to varTop/varBot cells that contain limit values,
   so the bar passes through behind the text. */
.interdit, .interdit_sf, .mp-forbidden-passthrough {
  background-image: linear-gradient(to right,
    transparent calc(50% - 3px),
    var(--text-primary) calc(50% - 3px),
    var(--text-primary) calc(50% - 1px),
    transparent calc(50% - 1px),
    transparent calc(50% + 1px),
    var(--text-primary) calc(50% + 1px),
    var(--text-primary) calc(50% + 3px),
    transparent calc(50% + 3px));
}
.interdit, .interdit_sf {
  padding: 0;
  text-align: center;
}
.interdit { border-bottom: 1px solid var(--text-primary); }

/* When a limit value sits in a forbidden col (passthrough cell), push it further
   from the centered double bar than the standard left/right padding. */
.mp-forbidden-passthrough.mp-vartop-left,
.mp-forbidden-passthrough.mp-varbot-left  { padding-left:  4px !important; }
.mp-forbidden-passthrough.mp-vartop-right,
.mp-forbidden-passthrough.mp-varbot-right { padding-right: 4px !important; }


/* ==========================================================
   17b. Table of contents + Bibliography
   ========================================================== */
mp-toc {
  display: block;
  margin: 1.2em 0 1.8em;
  padding: 1em 1.2em;
  background: var(--bg-secondary);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-sm);
}
.mp-toc-title {
  font-family: var(--font-display);
  font-size: 1.05em;
  margin: 0 0 0.6em;
  color: var(--accent-primary);
}
/* Description lists (LaTeX \begin{description}) — term in bold, like LaTeX. */
mp-course dl { margin: 0.8em 0; }
mp-course dl dt {
  font-weight: 700;
  margin-top: 0.5em;
}
mp-course dl dd {
  margin: 0.15em 0 0 1.6em;
}

.mp-toc-list, .mp-toc-list ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.mp-toc-list ul { padding-left: 1.2em; margin-top: 0.2em; }
.mp-toc-item { margin: 0.2em 0; }
.mp-toc-item > a {
  color: var(--text-primary);
  text-decoration: none;
  display: inline-block;
}
.mp-toc-item > a:hover { color: var(--accent-primary); text-decoration: underline; }
.mp-toc-num {
  font-weight: 600;
  color: var(--accent-primary);
  margin-right: 0.3em;
}
.mp-toc-depth-1 > a { font-weight: 600; }

/* Sidebar layout — desktop only. On narrow screens the TOC falls back to the
   inline block above the document content. */
@media (min-width: 900px) {
  body.mp-has-toc-sidebar { padding-left: 300px; }
  mp-toc[layout="sidebar"] {
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100vh;
    margin: 0;
    padding: 1.4em 1em 1em 1.4em;
    border-left: none;
    border-right: 1px solid var(--border-soft);
    border-radius: 0;
    overflow-y: auto;
    z-index: 100;
  }
  mp-toc[layout="sidebar"] .mp-toc-item > a.mp-toc-active {
    color: var(--accent-primary);
    font-weight: 700;
  }
  mp-toc[layout="sidebar"] .mp-toc-item > a.mp-toc-active::before {
    content: "▸ ";
    color: var(--accent-primary);
  }
}

mp-bibliography {
  display: block;
  margin: 1.8em 0;
  padding-top: 1em;
  border-top: 1px solid var(--border-soft);
}
.mp-bibliography-title {
  font-family: var(--font-display);
  font-size: 1.15em;
  margin: 0 0 0.8em;
}
.mp-bibliography-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.mp-bibitem {
  display: flex;
  gap: 0.5em;
  margin: 0.5em 0;
  font-size: 0.92em;
  line-height: 1.45;
}
.mp-bibnum {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 2.2em;
}
.mp-bibtext { flex: 1 1 auto; }

.mp-cite-link {
  color: var(--accent-primary);
  text-decoration: none;
  white-space: nowrap;
}
.mp-cite-link:hover { text-decoration: underline; }
.mp-cite-missing {
  color: #c00;
  font-weight: 600;
}
/* Back-arrow icon next to a bibliography entry. Points to the citation that
   was most recently clicked (or to the first one before any click). */
.mp-bibback {
  display: inline-block;
  margin-left: 0.4em;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85em;
  transition: color var(--transition-fast);
}
.mp-bibback:hover { color: var(--accent-primary); }
.mp-bibback i { vertical-align: -1px; }

/* Brief yellow flash after a scroll-to-anchor jump, so the eye finds the target. */
.mp-flash {
  animation: mp-flash-anim 1.1s ease-out;
  border-radius: 3px;
}
@keyframes mp-flash-anim {
  0%   { background-color: rgba(255, 235, 59, 0.85); box-shadow: 0 0 0 4px rgba(255, 235, 59, 0.85); }
  60%  { background-color: rgba(255, 235, 59, 0.55); box-shadow: 0 0 0 4px rgba(255, 235, 59, 0.55); }
  100% { background-color: transparent; box-shadow: 0 0 0 4px transparent; }
}

/* ==========================================================
   17c. Footnotes
   ========================================================== */
/* Hide the source <mp-footnote> until JS replaces it with a sup callout. */
mp-footnote { display: none; }
.mp-footnote-call {
  font-size: 0.9em;
  line-height: 0;
}
.mp-footnote-call > a {
  color: var(--accent-primary);
  text-decoration: none;
  padding: 0 1px;
}
.mp-footnote-call > a:hover { text-decoration: underline; }

section.mp-footnotes {
  display: block;
  margin: 2em 0 1em;
  padding-top: 1em;
  border-top: 1px solid var(--border-soft);
  font-size: 0.92em;
}
.mp-footnotes-title {
  font-family: var(--font-display);
  font-size: 1em;
  margin: 0 0 0.6em;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.mp-footnote-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.mp-footnote-item {
  display: flex;
  gap: 0.5em;
  margin: 0.4em 0;
  line-height: 1.45;
}
.mp-footnote-num {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 1.8em;
}
.mp-footnote-text { flex: 1 1 auto; }
.mp-footnote-back {
  margin-left: 0.4em;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.85em;
}
.mp-footnote-back:hover { color: var(--accent-primary); }
.mp-footnote-back i { vertical-align: -1px; }

/* ==========================================================
   18. Overflow auto-wrap
   ========================================================== */
.mp-overflow-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  margin: 1em 0;
}

/* Variante inline-block pour wrapping inside <p> (KaTeX $$..$$ standalone).
   display: inline-block valide à l'intérieur d'un <p>, n'éclate pas la
   structure HTML comme le ferait un <div>. */
.mp-overflow-wrap-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  max-width: 100%;
}

/* mp-overflow-wrap autour d'un mp-jsxgraph : ajoute une zone visible en
   bas pour que la scrollbar reste accessible au touch (la zone du
   jsxgraph elle-même intercepte les événements de drag). */
.mp-overflow-wrap:has(> mp-jsxgraph),
.mp-overflow-wrap:has(> .jxgbox) {
  padding-bottom: 14px;
  scrollbar-width: auto;
}
.mp-overflow-wrap {
  padding-bottom: 4px;
  contain: paint;
}
.mp-overflow-wrap::-webkit-scrollbar { height: 6px; }
.mp-overflow-wrap::-webkit-scrollbar-thumb {
  background: var(--border-soft);
  border-radius: 3px;
}

/* ==========================================================
   19-20. Unified bottom bar — credit + nav buttons + theme selector
   ========================================================== */
#mp-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nav-bar-bg);
  border-top: 1px solid var(--border-soft);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 250;
}
.mp-nav-inner {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  height: 56px;
  gap: 14px;
  max-width: 100%;
}
.sarmate-credit {
  font-family: var(--font-ui);
  font-size: 0.75em;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.sarmate-credit:hover {
  color: var(--accent-primary);
  border-bottom: none;
}

/* When the interactive bar is absent (no blanks), the credit pins to the bottom
   of the viewport as a discreet centered link, and the picker floats as a FAB. */
.sarmate-credit-standalone {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 14px;
  white-space: normal;
  z-index: 240;
}
.theme-selector.theme-selector-floating {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 250;
}

/* Reserve room at the bottom so the content doesn't slide under the fixed credit/bar. */
body.mp-has-nav-bar         { padding-bottom: 80px; }
body.mp-has-credit-floating { padding-bottom: 44px; }

/* On narrow viewports the credit moves to its own line above the buttons row. */
@media (max-width: 500px) {
  .mp-nav-inner {
    flex-wrap: wrap;
    height: auto;
    min-height: 56px;
    padding: 4px 14px 8px;
  }
  .sarmate-credit {
    order: -1;
    flex: 0 0 100%;
    text-align: center;
    margin-bottom: 2px;
  }
}
#mp-nav-buttons {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 0 auto;  /* centered in the remaining space between credit and theme */
}
.theme-selector {
  position: relative;
  flex: 0 0 auto;
}
.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent-primary);
  color: white;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  font-size: 16px;
  transition: transform var(--transition-fast);
}
.theme-btn:hover { transform: rotate(20deg); }

.theme-menu {
  position: absolute;
  bottom: 50px;
  right: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  min-width: 160px;
  z-index: 251;
}
.theme-menu.open { display: block; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font-family: var(--font-ui);
  font-size: 0.85em;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-align: left;
}
.theme-option:hover { background: var(--bg-secondary); }
.theme-option.active { background: var(--bg-secondary); font-weight: 600; }
.theme-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/* Mobile responsive: hide credit text below 480px so nav buttons + theme fit */
@media (max-width: 480px) {
  .sarmate-credit { display: none; }
  .mp-nav-inner { padding: 8px 10px; gap: 10px; }
  #mp-nav-buttons { gap: 10px; }
  #mp-nav .boutonNav button { width: 50px; }
}
#mp-nav .boutonNav button {
  width: 56px;
  height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: white;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
/* Outer buttons (±10) — green */
#mpNavBack10 button, #mpNavFwd10 button {
  background: var(--nav-btn-primary);
}
/* Inner buttons (single step ±1) — blue */
#mpNavBack button, #mpNavFwd button {
  background: var(--nav-btn-secondary);
}
#mp-nav .boutonNav button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
#mp-nav .boutonNav button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================
   21. Print
   ========================================================== */
@page { size: auto; margin: 12mm 14mm; }

@media print {
  .sarmate-credit,
  .theme-selector,
  .theme-menu,
  #mp-nav,
  .btnCorr,
  .btnPython,
  .clos,
  .mp-graph-sliders,
  .CodeMirror,
  .tortue,
  .mp-code .CodeMirror,
  iframe { display: none !important; }

  body {
    background: white !important;
    color: black !important;
    font-size: 10.5pt !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Show all corrections inline when printing */
  .correction {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Blanks stay hidden but reserve space for handwriting */
  .mp-blank {
    visibility: hidden !important;
    display: inline-block !important;
    min-width: 30px !important;
    padding: 0 15px !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Block break-inside */
  .mp-formal, .mp-pedagogical, .mp-proof, .mp-box,
  mp-figure, mp-vartable, table {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Reduce shadows and rounded corners for print */
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .mp-formal, .mp-pedagogical, .mp-box {
    border-radius: 2px !important;
  }

  /* Code blocks: print only the source */
  .mp-code textarea { display: none !important; }
  .mp-code::before {
    content: attr(data-print-label);
    display: block;
    font-style: italic;
    color: #666;
  }

  /* Avoid widows/orphans on headers */
  mp-title, mp-chapter > mp-title, mp-section > mp-title, mp-subsection > mp-title {
    break-after: avoid;
    page-break-after: avoid;
  }
}

/* Utility */
.no-break, .saut-page { break-inside: avoid; page-break-inside: avoid; }
.saut-page { break-before: page; page-break-before: always; }

/* Images insérées via l'outil "Dessiner" (zonePaint) ou par import local.
   Centrées avec marge verticale. L'utilisateur garde le contrôle direct sur
   la largeur via l'attribut style="width:Npx" de la balise <img>. */
.mp-paint-img {
  display: block;
  margin: 10px auto;
  max-width: 100%;
}

/* Tables produced by the LaTeX → mathpad converter (.tp-table class) */
.tp-table {
  border-collapse: collapse;
  /* Tableau toujours centré dans son flux (margin auto). L'alignement DES
     CELLULES, lui, suit le colspec LaTeX via les classes td-l/td-c/td-r. */
  margin: 1.2em auto;
  font-family: var(--font-body, inherit);
  /* Largeur naturelle (toutes les cellules à plat) au lieu de l'algorithme
     de fit-to-container du navigateur qui wrappe les têtes sur 4 lignes.
     Le wrapper .mp-overflow-wrap gère le scroll horizontal si trop large. */
  width: max-content;
  max-width: none;
}
.tp-table th,
.tp-table td {
  padding: 8px 12px;
  /* Par défaut left, comportement LaTeX standard (un \begin{tabular}{l c r}
     applique l/c/r par colonne via les classes td-l/td-c/td-r ci-dessous). */
  text-align: left;
  min-height: 32px;
  vertical-align: middle;
}
.tp-table .td-l { text-align: left; }
.tp-table .td-c { text-align: center; }
.tp-table .td-r { text-align: right; }
.tp-table th {
  /* Teinte translucide dérivée de la couleur du texte : lisible sur n'importe
     quel fond (page claire, <mp-box> coloré, thème sombre). Un fond opaque
     comme var(--bg-secondary) devenait blanc-sur-blanc dans une boîte colorée
     à texte blanc. Fallback (color-mix non supporté) = transparent → sûr. */
  background: color-mix(in srgb, currentColor 8%, transparent);
  font-weight: 600;
}
.tp-table td.empty {
  height: 36px;
  min-width: 80px;
}
.tp-table caption {
  padding-top: 0.5em;
  font-style: italic;
  color: var(--text-secondary, #555);
}
/* Ruled table : col-spec carried "|" pipes → vertical rules between/around
   columns. Horizontal rules are NOT automatic — they come only from \hline
   (see .tr-rule below), matching the author's LaTeX exactly. */
.tp-table.tp-bordered th,
.tp-table.tp-bordered td {
  border-left: 1px solid var(--text-primary, #333);
  border-right: 1px solid var(--text-primary, #333);
}
/* Plain table : no pipes in col-spec → no vertical rules at all. */
.tp-table.tp-plain th,
.tp-table.tp-plain td {
  border: none;
}
/* A row preceded by \hline gets a top rule ; the table's trailing \hline
   gives the last row a bottom rule. Works for both bordered and plain. */
.tp-table .tr-rule > th,
.tp-table .tr-rule > td {
  border-top: 1px solid var(--text-primary, #333);
}
/* A cell preceded by \cline{a-b} gets a PARTIAL top rule — only the cells
   the \cline spans (e.g. columns 2-5 when column 1 is a \multirow). */
.tp-table td.td-cline,
.tp-table th.td-cline {
  border-top: 1px solid var(--text-primary, #333);
}
/* Trailing \hline → bottom rule. Put it on the <table> itself (not on
   tr:last-child > td) so it also underlines a \multirow cell that started
   in an earlier row but visually extends down to the last row. */
.tp-table.tp-rule-bottom {
  border-bottom: 1px solid var(--text-primary, #333);
}

/* Figure caption produced when \begin{figure} has no \includegraphics */
.mp-fig-caption {
  text-align: center;
  color: var(--text-secondary, #555);
  margin: 0.4em 0 1.2em;
}

/* List of figures / list of tables (<mp-lof> / <mp-lot>) */
mp-lof, mp-lot {
  display: block;
  margin: 1.5em 0;
}
.mp-lof-list {
  list-style: none;
  padding-left: 0;
}
.mp-lof-item {
  margin: 0.3em 0;
}
.mp-lof-item a {
  text-decoration: none;
  color: var(--text-primary, #222);
}
.mp-lof-item a:hover { text-decoration: underline; }
.mp-lof-num {
  display: inline-block;
  min-width: 2.4em;
  font-weight: 600;
  color: var(--accent-primary, #06c);
}

/* Section heading converti depuis un \secbox{N}{couleur}{TITRE} (macro
   user à 3 args, body = tikzpicture+\node + texte coloré). Le #1 est déjà
   dans le texte du <h3> (pas besoin de counter CSS). */
h3.mp-secbox {
  margin: 1.6em 0 0.8em;
  padding: 0.4em 0.7em;
  font-size: 1.1em;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent-primary, #06c) 12%, transparent);
  border-left: 4px solid var(--accent-primary, #06c);
  border-radius: 4px;
}

/* Math inline tall (\dfrac, \binom, fraction display-style…) à l'intérieur
   d'un <li> a une hauteur supérieure à la line-height par défaut → les
   éléments successifs se chevauchent visuellement (cas exercice 4 du doc
   deceliere : « \begin{enumerate} \item $\dfrac{X}{Y}$ \item $\dfrac{...}$ »).
   Un \dfrac mesure ~2.2em ; line-height par défaut ~1.5em → il faut
   ~0.7em de padding-block et une line-height généreuse pour que le boîte
   de l'item accommode la hauteur de la fraction. */
mp-course li:has(.mfrac),
mp-course li:has(.katex-display) {
  margin-block: 1em;
  padding-block: 0.5em;
  line-height: 2.4;
}