/* ============================================================
   styles.css — Feuille de style partagée
   maths-sciences-lp.github.io
   ============================================================ */

@import url('assets/vendor/fonts/fonts.css');

/* ── Variables de thème (par défaut : maths seconde) ── */
:root {
  --p: #0056b3;       /* couleur primaire */
  --p-bg: #ebf5ff;    /* fond primaire clair */
  --p-border: #bee3f8;/* bordure primaire */
  --s: #2f855a;       /* secondaire (vert) */
  --s-bg: #f0fff4;    /* fond secondaire */
  --s-border: #a7f3d0;
  --d: #c53030;       /* danger (rouge) */
  --d-bg: #fff5f5;
  --o: #d97706;       /* orange */
  --o-bg: #fffbeb;
  --t: #2d3748;       /* texte principal */
  /* Refonte visuelle — polices & surfaces partagées */
  --ui: 'Hanken Grotesk', -apple-system, 'Segoe UI', system-ui, Roboto, sans-serif;
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sc: 'Spectral SC', 'Hanken Grotesk', serif;
  --navy: #15314f;
  --card-bd: #e6eaf0;
  --shadow: 0 1px 3px rgba(8,20,38,.05);
  --shadow-lg: 0 6px 16px rgba(8,20,38,.10);
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--ui);
  background: #f4f6f9;
  color: var(--t);
  line-height: 1.7;
  margin: 0;
  padding: 20px;
}

/* Corps de cours en serif (Spectral) ; titres & UI en Hanken Grotesk */
.c { font-family: var(--serif); color: #2b3a4d; }
.c h1, .c h2, .c h3, .c h4,
.c .badge, .c .label, .c .comp, .c .mama-tag, .c .context-tag,
.c .tag-socle, .c .tag-standard, .c .tag-appro,
.c .badge-niv, .c .niveau, .c .diff, .c .pts, .c .exo-num, .c .exo-num-badge,
.c button, .c .bc, .c .btn-corr, .c .bcq, .c .nav-btn, .c .nav-link,
.c summary, .c .print-btn, .c .simu-link, .c .nb, .c .value-badge,
.c .diff-toggle button, .c .sujet-toggle button, .c .btn-valider, .c .btn-reset {
  font-family: var(--ui);
}
.c em { color: #1d4ed8; font-style: italic; }
/* Chrome injecté par nav.js : police UI (sinon hérite du serif de .c) */
.sn-top-block, .sn-footer-block, .sn-author, .print-bar,
.sn-breadcrumb, .sn-ch-menu, .sn-tab, .sn-ch-nav, .sn-btn,
.sn-toc-title, .sn-toc-list { font-family: var(--ui); }

/* ── Conteneur principal ── */
.c {
  max-width: 880px;
  margin: auto;
  background: #fff;
  padding: 36px 40px;
  border-radius: 14px;
  border: 1px solid var(--card-bd);
  box-shadow: var(--shadow);
  font-size: 1.04rem;
  line-height: 1.72;
}
.container {
  max-width: 800px;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* ── En-tête ── */
header {
  text-align: center;
  border-bottom: 1px solid var(--card-bd);
  margin-bottom: 28px;
  padding-bottom: 18px;
}
h1 {
  font-family: var(--ui);
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.95em;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
h2 {
  font-family: var(--ui);
  font-size: 1.4em;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -.01em;
  border-left: 4px solid var(--p);
  padding-left: 14px;
  margin-top: 38px;
  margin-bottom: 14px;
}
h3 { font-family: var(--ui); font-size: 1.08em; color: var(--navy); margin-top: 22px; margin-bottom: 8px; font-weight: 700; }

.sous-titre { font-family: var(--serif); color: #475569; font-size: 1em; margin: 0; }
.maj { font-size: .78em; color: #a0aec0; text-align: center; margin-top: 4px; font-style: italic; }

/* ── Fil d'ariane (breadcrumb) ── */
.breadcrumb {
  font-size: .8em;
  color: #718096;
  margin-bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.breadcrumb a { color: var(--p); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: #a0aec0; }
@media print { .breadcrumb { display: none; } }

/* ── Navigation (liens de retour / pied de page) ── */
.nb {
  margin-bottom: 16px;
  display: block;
  text-decoration: none;
  color: var(--p);
  font-size: .85em;
  font-weight: 700;
}
.nb:hover { text-decoration: underline; }

.nav-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
  font-size: .88em;
  flex-wrap: wrap;
  gap: 10px;
}
.nav-footer a { text-decoration: none; color: var(--p); font-weight: 600; }
.nav-footer a:hover { text-decoration: underline; }

.nav-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px dashed #e2e8f0;
}
.nav-bottom a { text-decoration: none; color: var(--p); font-size: .85em; font-weight: 700; }
.nav-bottom a:hover { text-decoration: underline; }

.nav-btn {
  text-decoration: none;
  font-size: .85em;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 6px;
  color: var(--p);
  border: 1px solid var(--p);
  transition: .2s;
}
.nav-btn:hover { background: var(--p); color: #fff; }

.nav-links { margin-top: 30px; padding-top: 15px; border-top: 1px solid #e2e8f0; display: flex; gap: 15px; flex-wrap: wrap; }
.nav-link { text-decoration: none; color: var(--p); font-size: .85em; font-weight: 600; padding: 5px 12px; border: 1px solid var(--p); border-radius: 6px; }

/* ── Blocs de contenu pédagogique ── */
.def {
  background: #fff;
  border: 1px solid var(--p-border);
  border-left: 4px solid var(--p);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 18px 0;
  box-shadow: var(--shadow);
}
.def strong { color: var(--p); }

.prop {
  background: #fff;
  border: 1px solid var(--s-border);
  border-left: 4px solid var(--s);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 18px 0;
  box-shadow: var(--shadow);
}
.prop strong { color: var(--s); }

.att {
  background: var(--d-bg);
  border-left: 4px solid var(--d);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 18px 0;
}
.att strong { color: var(--d); }

.meth {
  background: var(--o-bg);
  border-left: 4px solid var(--o);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 18px 0;
}
.meth strong { color: var(--o); }
.meth > strong { display: block; margin-bottom: 4px; }

.retenir {
  background: linear-gradient(135deg,#fffaf0,#fef6e7);
  border: 1px solid #fde9c3;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 26px 0;
}
.retenir h3 { font-family: var(--ui); color: #92400e; margin: 0 0 10px; }
.retenir strong { color: #7c2d12; }

.situation {
  background: #fdf4ff;
  border: 2px dashed #a855f7;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px 0;
}
.situation h3 { color: #7c3aed; margin: 0 0 8px; font-size: 1em; }

.objectifs {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 30px;
  border: 1px solid var(--card-bd);
  box-shadow: var(--shadow);
}
.objectifs ul { margin: 6px 0 0 0; padding-left: 20px; }

.biv {
  background: #fdf4ff;
  border-left: 5px solid #9333ea;
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 14px 0;
}

/* ── Exemples & Exercices ── */
.ex {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 16px 0;
}
.ex-titre { font-weight: 700; color: var(--p); margin-bottom: 10px; }

.exo {
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0;
  box-shadow: var(--shadow);
}
.exo-num { font-size: .78em; font-weight: 700; text-transform: uppercase; color: #718096; letter-spacing: .05em; margin-bottom: 6px; }
.exo .exo-num { font-weight: 700; color: var(--p); font-size: .85em; text-transform: uppercase; margin-bottom: 4px; }
.exo-titre { font-weight: 700; font-size: 1em; color: var(--t); margin-bottom: 10px; }
.exo-header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.exo-num-badge { background: var(--p); color: #fff; font-weight: 700; font-size: .88em; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.exo-title { font-weight: 600; font-size: 1em; }

.mini-exo {
  background: var(--p-bg);
  border-left: 4px solid var(--p);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin: 12px 0 18px;
}
.mini-exo strong:first-child {
  display: block;
  font-size: .8em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--p);
  margin-bottom: 6px;
}
.mini-exo p { margin: 4px 0 10px; }

.mama-tag {
  display: inline-block;
  background: #e6f0ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  font-size: .75em;
  font-weight: 700;
  color: #1a4a8a;
  padding: 2px 8px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ── Étapes numérotées ── */
.etape { display: flex; gap: 12px; margin: 8px 0; align-items: flex-start; }
.etape-txt { font-weight: 700; color: var(--s); margin-top: 8px; display: block; }
.nc, .num, .guide-num {
  background: var(--p);
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  font-weight: 700;
  margin-top: 2px;
  flex-shrink: 0;
}
.num { width: 28px; height: 28px; font-size: .85em; }

/* ── Guide méthodologique ── */
.guide {
  background: #f0f7ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0;
}
.guide-step { display: flex; gap: 12px; margin: 8px 0; align-items: flex-start; }

/* ── Corrections ── */
.corr {
  background: var(--s-bg);
  border-left: 4px solid var(--s);
  padding: 14px 18px;
  margin-top: 12px;
  border-radius: 0 10px 10px 0;
  display: none;
  font-size: .93em;
}
details[open] > .corr { display: block; }
.corr p, .corr li { margin: 5px 0; }
.corr ul, .corr ol { padding-left: 20px; }
.corr strong { color: #065f46; }

details.corr-wrap { margin-top: 10px; }
summary.corr-btn {
  cursor: pointer;
  font-size: .85em;
  font-weight: 700;
  color: var(--s);
  padding: 6px 12px;
  background: var(--s-bg);
  border-radius: 6px;
  border: 1px solid var(--s-border);
  display: inline-block;
  list-style: none;
}
summary.corr-btn::-webkit-details-marker { display: none; }
.corr-body {
  background: var(--s-bg);
  border-left: 4px solid var(--s);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin-top: 8px;
  font-size: .92em;
  line-height: 1.8;
}
.corr-rep {
  background: #065f46;
  color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  font-weight: 700;
  display: inline-block;
  font-size: .95em;
}

details { margin: 8px 0; }
details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--p);
  background: var(--p-bg);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: .9em;
  user-select: none;
}
details summary:hover { filter: brightness(.95); }
details.corr summary { cursor: pointer; font-weight: 600; color: var(--s); font-size: .88em; margin-top: 10px; padding: 4px 0; }
details.corr summary:hover { text-decoration: underline; }
details.corr .corr-body { background: #f0fff4; border-left: 4px solid var(--s); padding: 10px 14px; margin-top: 6px; border-radius: 0 6px 6px 0; font-size: .9em; }
details p { margin: 6px 0 0 0; color: #4a5568; }

/* ── Boutons de correction ── */
.bc, .btn-corr {
  background: var(--p);
  color: #fff;
  border: none;
  padding: 7px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85em;
  margin-top: 10px;
  transition: background .2s;
}
.bc:hover, .btn-corr:hover { filter: brightness(.85); }

.bcq {
  background: var(--p);
  color: #fff;
  border: none;
  padding: 4px 11px;
  border-radius: 5px;
  cursor: pointer;
  font-size: .78em;
  margin-top: 8px;
}
.bcq:hover { filter: brightness(.85); }

/* ── QCM interactif ── */
.qcm-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.qcm-header .dh-item { display: flex; align-items: center; gap: 6px; }
.qcm-header strong { color: var(--p); }
.q-block { border: 1px solid #e2e8f0; border-radius: 10px; padding: 18px 20px; margin: 16px 0; background: #fff; }
.q-block h3 { margin: 0 0 10px; font-size: 1em; color: var(--p); }
.q-block .theme { font-size: .78em; color: #718096; margin-bottom: 8px; font-style: italic; }
.options label { display: block; padding: 8px 12px; margin: 4px 0; border-radius: 6px; cursor: pointer; border: 1.5px solid #e2e8f0; transition: background .15s, border-color .15s; font-size: .95em; }
.options label:hover { background: var(--p-bg); border-color: var(--p-border); }
.options input[type="radio"] { margin-right: 8px; accent-color: var(--p); }
.options label.correct { background: #d1fae5; border-color: #34d399; }
.options label.incorrect { background: #fee2e2; border-color: #f87171; }
.q-feedback { margin-top: 8px; padding: 8px 12px; border-radius: 6px; font-size: .88em; display: none; }
.q-feedback.ok { background: #d1fae5; color: #065f46; display: block; }
.q-feedback.ko { background: #fee2e2; color: #991b1b; display: block; }
.btn-valider { background: var(--p); color: #fff; border: none; padding: 10px 28px; border-radius: 8px; font-size: 1em; font-weight: 700; cursor: pointer; margin-top: 20px; display: block; }
.btn-valider:hover { opacity: .85; }
.btn-reset { background: #e2e8f0; color: #374151; border: none; padding: 8px 20px; border-radius: 8px; font-size: .9em; cursor: pointer; margin-top: 8px; }
.btn-reset:hover { background: #cbd5e1; }
.score-box { margin-top: 24px; padding: 18px 24px; border-radius: 10px; text-align: center; font-size: 1.15em; font-weight: 700; display: none; }
.score-box.show { display: block; }
.score-good { background: #d1fae5; color: #065f46; border: 2px solid #34d399; }
.score-avg { background: #fef3c7; color: #92400e; border: 2px solid #fcd34d; }
.score-low { background: #fee2e2; color: #991b1b; border: 2px solid #f87171; }
/* Legacy QCM grid (leçons) */
.qcm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.qcm-item { border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 14px; font-size: .9em; background: #fafafa; }
.qcm-item strong { display: block; margin-bottom: 6px; color: var(--p); }
.qcm-item ul { margin: 4px 0 0; padding-left: 0; list-style: none; }
.qcm-item ul li { padding: 2px 0; }
.qcm-item ul li::before { content: '☐  '; color: #cbd5e0; }
.qcm-item ul li.ok::before { content: '✔  '; color: var(--s); font-weight: 700; }
.qcm-item ul li.ok { color: var(--s); font-weight: 600; }
.qcm-corr { display: none; margin-top: 8px; background: var(--s-bg); border-left: 3px solid var(--s); padding: 8px 12px; border-radius: 0 6px 6px 0; font-size: .87em; }

/* ── Niveaux de difficulté ── */
.niveau-header { border-radius: 8px; padding: 10px 16px; margin: 30px 0 16px; display: flex; align-items: center; gap: 12px; }
.niv1 { background: #d1fae5; border-left: 5px solid #059669; }
.niv2 { background: #dbeafe; border-left: 5px solid var(--p); }
.niv3 { background: #fef3c7; border-left: 5px solid var(--o); }
.niv4 { background: #fce7f3; border-left: 5px solid #db2777; }
.niv1 h2, .niv2 h2, .niv3 h2, .niv4 h2 { margin: 0; border: none; padding: 0; font-size: 1em; }
.badge-niv { font-size: .72em; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.badge-1 { background: #22543d; color: #fff; }
.badge-2 { background: #2b6cb0; color: #fff; }
.badge-3 { background: #744210; color: #fff; }
.badge-4 { background: #742a2a; color: #fff; }

.niveau { display: inline-block; font-size: .75em; font-weight: 700; text-transform: uppercase; padding: 3px 10px; border-radius: 12px; margin-bottom: 14px; }
.n1 { background: #d1fae5; color: #065f46; }
.n2 { background: #dbeafe; color: #1e40af; }
.n3 { background: #fef3c7; color: #92400e; }
.n4 { background: #fee2e2; color: #991b1b; }

.diff { font-size: .78em; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.diff-1 { background: #d1fae5; color: #065f46; }
.diff-2 { background: #fef3c7; color: #92400e; }
.diff-3 { background: #fee2e2; color: #991b1b; }

/* ── Tableaux ── */
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .92em; }
table.full { width: 100%; }
th, td { border: 1px solid #e2e8f0; padding: 9px 12px; text-align: center; }
th { background: var(--p-bg); color: var(--p); font-weight: 700; }
td.tv-x { background: #f0f7ff; font-weight: 600; color: var(--p); }
td.ok { background: #d1fae5; font-weight: 700; }
td.hi { background: #fef3c7; font-weight: 700; color: var(--o); }
td.vide { background: #fffbeb; border: 1.5px dashed var(--o); color: #92400e; font-style: italic; font-size: .85em; }
td.hl { background: var(--p-bg); font-weight: 700; color: var(--p); }
td:first-child { text-align: left; }
tr:nth-child(even) td { background: #f8fafc; }
.cell-blank { background: #fef9c3; padding: 2px 8px; border-radius: 4px; font-weight: 700; color: #92400e; text-align: center; min-width: 48px; }

/* ── Graphiques / Canvas / SVG ── */
.chart-wrapper, .chart-wrap {
  max-width: 580px;
  margin: 16px auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}
.chart-wrapper h3, .chart-wrap h3 { font-size: .9em; color: var(--p); margin: 0 0 10px; text-align: center; }
.chart-label { text-align: center; font-size: .82em; color: #718096; margin-top: 4px; font-style: italic; }

canvas.anim {
  display: block;
  margin: 12px auto;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.ctrl-vis { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; align-items: center; font-size: .9em; }
.ctrl-vis input[type=range] { width: 160px; accent-color: var(--p); }
.ctrl-vis label { display: flex; align-items: center; gap: 6px; }
.anim-result { text-align: center; font-size: 1em; font-weight: 700; color: var(--p); min-height: 1.6em; margin-top: 6px; }

.anim-wrap {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin: 18px 0;
  text-align: center;
}
.anim-wrap button {
  background: var(--p);
  color: #fff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin: 6px 4px;
  font-size: .85em;
}
.anim-wrap button:hover { filter: brightness(.85); }

.svg-wrap { text-align: center; margin: 16px 0; }
.svg-leg { font-size: .82em; color: #718096; text-align: center; margin-top: 6px; font-style: italic; }

/* ── Formules ── */
.formula-box, .formule-box, .formule {
  text-align: center;
  background: #f7faff;
  border: 1px solid #e3edf9;
  border-radius: 12px;
  padding: 16px 22px;
  margin: 16px 0;
  font-size: 1.05em;
}
.formula-box .fb-label { font-size: .82em; color: #4a5568; margin-bottom: 6px; font-weight: 600; }
.formula-box .fb-formula { font-size: 1em; color: var(--p); font-weight: 700; }
.formula-box.green { background: var(--s-bg); border-color: var(--s-border); }
.formula-box.green .fb-formula { color: var(--s); }
.formula-box.orange { background: var(--o-bg); border-color: #fde68a; }
.formula-box.orange .fb-formula { color: var(--o); }
.formula-box.red { background: var(--d-bg); border-color: #fed7d7; }
.formula-box.red .fb-formula { color: var(--d); }
.formule-box small, .formule small { display: block; margin-top: 4px; color: #718096; font-size: .82em; }

/* ── Badges ── */
.badge { display: inline-block; font-size: .75em; font-weight: 700; padding: 2px 8px; border-radius: 12px; margin-right: 4px; }
.badge-green { background: #d1fae5; color: #065f46; }
.badge-blue { background: #dbeafe; color: #1e40af; }
.badge-yellow { background: #fef3c7; color: #92400e; }
.badge-red { background: #fee2e2; color: #991b1b; }

.label {
  display: inline-block;
  font-size: .75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.label-def { background: var(--p-bg); color: var(--p); }
.label-prop { background: #d1fae5; color: #065f46; }
.label-att { background: #fee2e2; color: #991b1b; }
.label-meth { background: #fef3c7; color: #92400e; }
.label-ex { background: #e2e8f0; color: #4a5568; }
.label-ret { background: #c4b5fd; color: #3b0764; }
.label-biv { background: #f3e8ff; color: #7c3aed; }

.ticcer-badge { display: inline-block; background: #0969da; color: #fff; font-size: .75em; font-weight: 700; padding: 2px 10px; border-radius: 12px; margin-right: 6px; vertical-align: middle; }
.erama-badge { display: inline-block; background: #7c3aed; color: #fff; font-size: .75em; font-weight: 700; padding: 2px 10px; border-radius: 12px; margin-right: 6px; vertical-align: middle; }
.badge-appro { background: #ede9fe; color: #5b21b6; font-size: .78em; padding: 2px 8px; border-radius: 4px; font-weight: 600; }

/* ── Grilles ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 16px 0; }
.grid2, .two-col, .deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.info-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 12px; text-align: center; }
.info-card .val { font-size: 1.4em; font-weight: 700; color: var(--p); }
.info-card .lbl { font-size: .78em; color: #718096; margin-top: 2px; }

/* ── Divers ── */
.zone-rep {
  border: 1.5px dashed #cbd5e0;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px 0;
  min-height: 44px;
  background: #fcfcfd;
  font-size: .88em;
  color: #a0aec0;
  font-style: italic;
}
.reponse-box {
  border: 1.5px dashed #cbd5e0;
  border-radius: 8px;
  min-height: 54px;
  padding: 10px;
  margin: 10px 0;
  background: #fafffe;
  color: #a0aec0;
  font-size: .88em;
  font-style: italic;
}
.reponse { background: #d1fae5; border-radius: 6px; padding: 3px 10px; font-weight: 600; color: #065f46; display: inline-block; margin: 2px 0; }

.q { margin: 10px 0 4px; padding-left: 4px; font-size: .95em; }
.q-sub { margin: 4px 0 4px 20px; padding-left: 4px; font-size: .95em; }
.consigne { background: var(--p-bg); border-left: 4px solid var(--p); padding: 10px 14px; border-radius: 0 6px 6px 0; margin: 10px 0; font-size: .93em; }

.slider-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; }
.slider-row label { font-weight: 600; min-width: 90px; }
.slider-row input[type=range] { flex: 1; min-width: 120px; accent-color: var(--p); }
.value-badge { background: var(--p); color: #fff; padding: 3px 12px; border-radius: 6px; font-weight: 700; font-size: .9em; white-space: nowrap; }

.sep { border: none; border-top: 2px dashed #e2e8f0; margin: 32px 0; }
.section-sep { border: none; border-top: 2px dashed #e2e8f0; margin: 32px 0; }
.intro-box { background: #f0f7ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 14px 18px; margin-bottom: 24px; font-size: .93em; }
.result-box { background: var(--o-bg); border: 2px solid var(--o); border-radius: 8px; padding: 12px 16px; margin: 10px 0; font-weight: 600; }
.ds-head { background: #eef2f7; padding: 12px 15px; border-radius: 8px; margin-bottom: 20px; font-size: .9em; }

.section-titre { display: flex; align-items: center; gap: 12px; margin-top: 36px; margin-bottom: 4px; }
.section-ligne { flex: 1; height: 2px; background: #e2e8f0; border-radius: 2px; }
.section-label { font-size: .82em; font-weight: 700; text-transform: uppercase; color: #718096; letter-spacing: .05em; margin-bottom: 8px; }

ul.styled li { margin-bottom: 6px; }

/* ── Classes spécifiques aux pages DS ── */
.b { padding: 15px; border-radius: 8px; margin: 15px 0; border: 1px solid #e2e8f0; }
.e { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; margin: 15px 0; }
.dh { display: flex; flex-wrap: wrap; gap: 10px; background: #eef2f7; padding: 14px 18px; border-radius: 8px; margin-bottom: 28px; font-size: .9em; }
.dh-item { display: flex; align-items: center; gap: 6px; }
.dh-item strong { color: var(--p); }
.partie { border: 1px solid #e2e8f0; border-radius: 10px; padding: 20px; margin: 24px 0; }
.partie-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--p); }
.partie-title { font-weight: 700; font-size: 1.1em; color: var(--p); }
.pts { background: var(--p); color: #fff; font-weight: 700; font-size: .85em; padding: 3px 10px; border-radius: 12px; }
.answer-line { border-bottom: 1px solid #aaa; margin: 6px 0; height: 28px; display: block; }
.bareme { font-style: italic; color: #718096; font-size: .85em; }

/* ── Compétences CCF (badges) ── */
.comp { font-size: .72em; padding: 2px 7px; border-radius: 4px; font-weight: 700; white-space: nowrap; }
.comp-app { background: #dbeafe; color: #1d4ed8; }
.comp-ana { background: #fef3c7; color: #b45309; }
.comp-rea { background: #d1fae5; color: #065f46; }
.comp-val { background: #ede9fe; color: #6d28d9; }
.comp-com { background: #cffafe; color: #0e7490; }
.comp-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; font-size: .82em; }
.comp-legend span { padding: 3px 9px; border-radius: 4px; font-weight: 600; }

/* ── Classes partagées exercices ── */
.enonce { background: #fff; border-radius: 6px; padding: 12px 14px; border: 1px solid #e2e8f0; margin: 10px 0; font-size: .95em; }
.context-tag { display: inline-block; background: #fef3c7; color: #92400e; border-radius: 4px; font-size: .72em; font-weight: 700; text-transform: uppercase; padding: 2px 8px; margin-bottom: 8px; letter-spacing: .03em; }
.zone-rep label { font-size: .85em; color: #718096; font-weight: 600; display: block; margin-bottom: 4px; }
.zone-rep textarea { width: 100%; min-height: 70px; border: 1px dashed #cbd5e0; border-radius: 6px; padding: 8px; font-size: .9em; color: var(--t); background: #fff; resize: vertical; box-sizing: border-box; font-family: inherit; }
.zone-rep textarea:focus { outline: none; border-color: var(--p); background: var(--p-bg); }
.att-corr { background: #fff5f5; border-left: 4px solid var(--d); padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 8px 0; font-size: .9em; }
td.tl { text-align: left; }
.schema { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin: 10px 0; text-align: center; }
.schema figcaption { font-size: .8em; color: #718096; margin-top: 6px; }

/* ── Barre d'impression (exercices / DS) ── */
.print-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 24px 0 8px;
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}
.print-bar span {
  font-size: .85em;
  color: #64748b;
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid var(--p);
  border-radius: 8px;
  background: #fff;
  color: var(--p);
  font-size: .88em;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.print-btn:hover {
  background: var(--p);
  color: #fff;
}
.print-btn-corr {
  border-color: #16a34a;
  color: #16a34a;
}
.print-btn-corr:hover {
  background: #16a34a;
  color: #fff;
}

/* ── Différenciation pédagogique (socle / standard / approfondissement) ── */
.diff-toggle {
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 0 0 24px;
  border: 2px solid var(--p);
  border-radius: 8px;
  overflow: hidden;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.diff-toggle button {
  flex: 1;
  padding: 10px 12px;
  border: none;
  border-right: 1px solid var(--p-border);
  background: #fff;
  color: var(--p);
  font-size: .82em;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.diff-toggle button:last-child { border-right: none; }
.diff-toggle button.active {
  background: var(--p);
  color: #fff;
}
.diff-toggle button:not(.active):hover {
  background: var(--p-bg);
}

/* Masquage selon le mode actif */
body.mode-socle .diff-standard,
body.mode-socle .diff-appro { display: none !important; }
body.mode-standard .diff-socle,
body.mode-standard .diff-appro { display: none !important; }
body.mode-appro .diff-socle,
body.mode-appro .diff-standard { display: none !important; }

/* Badges visuels */
.tag-socle, .tag-standard, .tag-appro {
  display: inline-block;
  font-size: .72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 9px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.tag-socle    { background: #d1fae5; color: #065f46; }
.tag-standard { background: #dbeafe; color: #1e40af; }
.tag-appro    { background: #ede9fe; color: #5b21b6; }

/* ── Toggle Sujet A / B (interrogations) ── */
.sujet-toggle {
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 0 auto 24px;
  border: 2px solid var(--p);
  border-radius: 8px;
  overflow: hidden;
  max-width: 260px;
}
.sujet-toggle button {
  flex: 1;
  padding: 10px 18px;
  border: none;
  border-right: 1px solid var(--p-border);
  background: #fff;
  color: var(--p);
  font-size: .88em;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.sujet-toggle button:last-child { border-right: none; }
.sujet-toggle button.active {
  background: var(--p);
  color: #fff;
}
.sujet-toggle button:not(.active):hover {
  background: var(--p-bg);
}

/* Masquage des sujets selon le mode */
body.show-sujet-a .sujet-b { display: none !important; }
body.show-sujet-b .sujet-a { display: none !important; }

/* Encadré "Pour aller plus loin" dans les cours */
.plus-loin {
  background: #faf5ff;
  border: 1.5px dashed #a78bfa;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 16px 0;
}
.plus-loin strong { color: #6d28d9; }

/* ── Situation professionnelle ── */
.situation-pro {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 2px solid #d97706;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 20px 0;
}
.situation-pro::before {
  content: "Situation professionnelle";
  display: block;
  font-weight: 700;
  color: #92400e;
  font-size: .93em;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sp-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: .92em;
  margin-bottom: 12px;
}
.sp-label { font-weight: 600; color: #4a5568; white-space: nowrap; }

/* ── Erreurs fréquentes ── */
.erreur-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 10px 0;
  background: #fff5f5;
  border-radius: 6px;
  padding: 12px;
}
.erreur-item .ico { font-size: 1.3em; flex-shrink: 0; margin-top: 1px; }
.erreur-item .txt { flex: 1; }
.erreur-item .txt strong { color: var(--d); }

/* ── Hors programme / Pour aller plus loin ── */
.hors-prog {
  background: #faf5ff;
  border: 2px dashed #9f7aea;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 18px 0;
}
.hors-prog::before {
  content: "Pour aller plus loin (hors programme)";
  display: block;
  font-weight: 700;
  color: #6d28d9;
  font-size: .9em;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Classes DS (devoirs surveillés) ───────────────────── */
.answer-box {
  border: 1px dashed #aaa;
  border-radius: 6px;
  min-height: 56px;
  margin: 8px 0;
  padding: 6px;
  background: #fafafa;
  display: block;
}
.formule-donnee {
  background: #f0f9ff;
  border: 1px solid #7dd3fc;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: .93em;
}
.aide-box {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0;
  font-size: .9em;
}
.aide-box strong { color: #d97706; }
/* ds-title : en-tête de partie (barre colorée) */
.ds-title {
  background: var(--p);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  margin: 32px 0 20px;
  font-size: 1.1em;
  font-weight: 700;
}
/* ds-title--card : variante encadrée (bilan, formules) */
.ds-title--card {
  background: var(--p-bg);
  border: 2px solid var(--p-border);
  border-radius: 10px;
  padding: 16px 22px;
  margin-bottom: 20px;
  text-align: center;
}
.ds-title--card h2 { margin: 0 0 4px; color: var(--p); font-size: 1.3em; }
.ds-title--card p  { margin: 0; font-size: .9em; color: #4a5568; }

/* ── Lien simulation ── */
.simu-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ebf5ff;
  border: 1px solid #93c5fd;
  border-radius: 8px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--p);
  font-weight: 600;
  font-size: .9em;
  transition: .2s;
  margin: 4px;
}
.simu-link:hover { background: var(--p); color: #fff; }

/* ── Zones réponses (interro.html) ── */
.zone-reponse-courte,
.zone-reponse-moyenne,
.zone-reponse-longue {
  border: 1px solid #cbd5e0;
  border-radius: 6px;
  background: #fff;
  margin: 8px 0 10px;
  padding: 6px 10px;
}
.zone-reponse-courte  { min-height: 36px; }
.zone-reponse-moyenne { min-height: 72px; }
.zone-reponse-longue  { min-height: 120px; }
.lignes-reponse { list-style: none; padding: 0; margin: 6px 0 10px; }
.lignes-reponse li {
  border-bottom: 1px solid #94a3b8;
  min-height: 28px;
  margin-bottom: 6px;
}
@media print {
  .zone-reponse-courte,
  .zone-reponse-moyenne,
  .zone-reponse-longue {
    background: #fff;
    border: 1px solid #aaa;
  }
  .lignes-reponse li { border-bottom: 1px solid #888; }
}

/* ── Media queries ── */

/* Tablette */
@media (max-width: 800px) {
  /* Tableaux : permet le scroll horizontal sans casser la mise en page */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Canvas, SVG : shrink à la largeur du container */
  canvas, svg { max-width: 100%; height: auto; }
}

/* Mobile */
@media (max-width: 600px) {
  body { padding: 12px; }
  .c, .container { padding: 18px; }
  .grid2, .two-col, .deux-col, .qcm-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }

  /* Titres lisibles sur mobile */
  h1 { font-size: 1.35em; line-height: 1.25; }
  h2 { font-size: 1.05em; }
  h3 { font-size: .98em; }

  /* Tables avec font plus petite pour les cas courants */
  table th, table td { padding: 6px 8px; font-size: .88em; }

  /* Boutons / liens : taille minimale tactile (44 px conseillée) */
  .bc, .nb, .nav-link, button.btn, .btn { min-height: 36px; padding: 8px 12px; }

  /* Inputs : éviter zoom auto iOS (16 px minimum) */
  input[type=text], input[type=number], input[type=email], textarea, select { font-size: 16px; }

  /* Cartes et encadrés : padding plus serré */
  .def, .prop, .att, .meth, .retenir, .ex, .exo, .situation, .objectifs { padding: 10px 12px; }

  /* MathJax : éviter le débordement horizontal */
  mjx-container { max-width: 100%; overflow-x: auto; }
}

/* Très petit mobile */
@media (max-width: 380px) {
  body { padding: 8px; }
  .c, .container { padding: 14px; }
  h1 { font-size: 1.2em; }
  .info-grid { grid-template-columns: 1fr; }
}