/* Évaluation dynamique — thème « eval ». */
.dyn-eval {
  --dyn-accent: #6b34c9;
  --dyn-accent-soft: #f2edfd;
  --dyn-accent-bd: #ddccf6;
  --dyn-surface: #ffffff;
  --dyn-surface-2: #f6f7fb;
  --dyn-border: #e6e9f2;
  --dyn-text: #161a26;
  --dyn-muted: #626b7d;
  --dyn-green: #16a34a;
  --dyn-green-soft: #e7f6ee;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- En-tête ---- */
.dyn-head { display: flex; flex-direction: column; gap: 16px; }
.dyn-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.dyn-eyebrow { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dyn-accent); background: var(--dyn-accent-soft); border: 1px solid var(--dyn-accent-bd); border-radius: 999px; padding: 3px 11px; }
.dyn-head-top h2 { margin: 8px 0 2px; font-size: 21px; letter-spacing: -0.01em; color: var(--dyn-text); }
.dyn-head-top h2 small { color: var(--dyn-muted); font-weight: 600; font-size: 14px; }
.dyn-warn { margin: 0; font-size: 12.5px; color: var(--dyn-muted); max-width: 60ch; }
.dyn-progress-wrap { min-width: 220px; display: flex; flex-direction: column; gap: 6px; }
.dyn-progress-wrap small { color: var(--dyn-muted); font-size: 12px; font-weight: 600; text-align: right; }

.dyn-id-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dyn-field { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 650; color: var(--dyn-muted); }
.dyn-toggle { display: inline-flex; gap: 6px; background: var(--dyn-surface-2); border-radius: 10px; padding: 4px; }
.dyn-toggle button { appearance: none; border: none; background: transparent; cursor: pointer; flex: 1; font-weight: 650; font-size: 13px; color: var(--dyn-muted); padding: 8px 10px; border-radius: 7px; transition: all .15s ease; }
.dyn-toggle button.is-on { background: #fff; color: var(--dyn-accent); box-shadow: 0 2px 7px rgba(107, 52, 201, 0.2); }

.dyn-motifs { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; border-top: 1px dashed var(--dyn-border); }
.dyn-motifs-title { font-size: 12.5px; font-weight: 800; color: var(--dyn-text); text-transform: uppercase; letter-spacing: 0.04em; }
.dyn-motif-row { display: grid; grid-template-columns: 34px 150px 1fr; gap: 8px; align-items: center; }
.dyn-motif-tag { display: grid; place-items: center; height: 30px; border-radius: 8px; background: var(--dyn-accent-soft); color: var(--dyn-accent); font-weight: 800; font-size: 12.5px; border: 1px solid var(--dyn-accent-bd); }

/* ---- Sections / exercices ---- */
.dyn-sections { display: flex; flex-direction: column; gap: 14px; }
.dyn-section { padding: 0; overflow: hidden; }
.dyn-section-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; background: var(--dyn-accent-soft); border-bottom: 1px solid var(--dyn-accent-bd); }
.dyn-section-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--dyn-accent); color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.dyn-section-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--dyn-text); }
.dyn-exos { display: flex; flex-direction: column; }
.dyn-exo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--dyn-border); flex-wrap: wrap; }
.dyn-exo:last-child { border-bottom: none; }
.dyn-exo.is-acquired { background: var(--dyn-green-soft); }
.dyn-exo-label { min-width: 0; flex: 1 1 260px; }
.dyn-exo-label strong { display: block; font-size: 14px; font-weight: 600; color: var(--dyn-text); }
.dyn-exo-label small { color: var(--dyn-muted); font-size: 11.5px; font-style: italic; }
.dyn-exo-inputs { display: flex; align-items: flex-end; gap: 12px; flex: none; }
.dyn-exo-date, .dyn-exo-score { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 650; color: var(--dyn-muted); }
.dyn-score-box { display: inline-flex; align-items: center; gap: 4px; }
.dyn-score-box b { color: var(--dyn-muted); font-weight: 700; font-size: 13px; }

/* Override du piège .app-shell input (width:100% / min-height:58px) pour les champs compacts de la grille */
.app-shell .dyn-exo input { min-height: 38px; height: 38px; width: auto; padding: 6px 8px; border: 1px solid var(--dyn-border); border-radius: 9px; font-size: 13px; background: #fff; }
.app-shell .dyn-exo-date input[type="date"] { width: 138px; }
.app-shell .dyn-score-box input { width: 52px; text-align: center; font-weight: 700; }
.app-shell .dyn-exo.is-acquired input { border-color: #bce6cd; }

.dyn-acq { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--dyn-muted); background: var(--dyn-surface-2); border: 1px solid var(--dyn-border); border-radius: 999px; padding: 6px 11px; white-space: nowrap; align-self: center; }
.dyn-acq svg { opacity: 0.35; }
.dyn-acq.is-on { color: var(--dyn-green); background: var(--dyn-green-soft); border-color: #bce6cd; }
.dyn-acq.is-on svg { opacity: 1; }

.dyn-foot { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 640px) {
  .dyn-motif-row { grid-template-columns: 34px 1fr; }
  .dyn-motif-row input[type="date"] { grid-column: 2; }
  .dyn-exo-inputs { width: 100%; justify-content: space-between; }
}

/* ============ Vue imprimable (PDF) ============ */
.dyn-print { display: none; }
.dyn-print-title { text-align: center; margin-bottom: 10px; }
.dyn-print-title strong { color: #6b34c9; font-size: 13px; }
.dyn-print-title h1 { margin: 4px 0; font-size: 19px; letter-spacing: 0.06em; }
.dyn-print-title p { margin: 0; font-size: 10.5px; font-style: italic; }
.dyn-print-id { width: 100%; border-collapse: collapse; margin-bottom: 10px; font-size: 11px; }
.dyn-print-id td { border: 1px solid #333; padding: 4px 7px; }
.dyn-print-id td:nth-child(odd) { background: #eee; font-weight: 700; width: 18%; }
.dyn-print-grid { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.dyn-print-grid th, .dyn-print-grid td { border: 1px solid #333; padding: 4px 7px; text-align: left; vertical-align: top; }
.dyn-print-grid th { background: #6b34c9; color: #fff; font-size: 10px; text-transform: uppercase; }
.dyn-print-grid th:not(:first-child), .dyn-print-grid td:not(:first-child) { text-align: center; white-space: nowrap; }
.dyn-print-section td { background: #f2edfd; font-weight: 800; color: #4a1f8f; }
.dyn-print-grid i { color: #555; font-size: 9.5px; }

@media print {
  @page { margin: 12mm; }
  body { background: #fff; }
  .app-shell > header { display: none !important; }
  .app-shell > .stage > *:not(.dyn-eval) { display: none !important; }
  .dyn-eval > *:not(.dyn-print) { display: none !important; }
  .dyn-print { display: block !important; }
  .app-shell, .app-shell > .stage, .dyn-eval { display: block !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; background: #fff !important; }
}

/* ============ Examen blanc noté /30 (Oui / Non) — accent émeraude pour distinguer de la prépa (violet) ============ */
.dyn-exam {
  --dyn-accent: #0f9d6b;
  --dyn-accent-soft: #e7f7f0;
  --dyn-accent-bd: #bfe9d6;
}

/* En-tête : score + barre + verdict */
.dyn-exam-score { min-width: 244px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.dyn-exam-bignum { display: flex; align-items: baseline; gap: 5px; font-weight: 800; color: var(--dyn-text); }
.dyn-exam-bignum b { font-size: 34px; line-height: 1; }
.dyn-exam-bignum span { font-size: 15px; font-weight: 700; color: var(--dyn-muted); }
.dyn-exam-bar { position: relative; width: 100%; height: 10px; border-radius: 999px; background: var(--dyn-surface-2); overflow: hidden; border: 1px solid var(--dyn-border); }
.dyn-exam-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #e3a13a; transition: width .25s ease; }
.dyn-exam-bar i.is-fav { background: var(--dyn-green); }
.dyn-exam-threshold { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(20, 24, 38, 0.32); transform: translateX(-1px); }
.dyn-verdict { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--dyn-border); white-space: nowrap; }
.dyn-verdict.is-pending { color: var(--dyn-muted); background: var(--dyn-surface-2); }
.dyn-verdict.is-fav { color: #15803d; background: #e7f6ee; border-color: #bce6cd; }
.dyn-verdict.is-unfav { color: #c0392b; background: #fdecec; border-color: #f3c0c0; }

/* Lignes Oui / Non */
.dyn-exo-exam.is-yes { background: var(--dyn-green-soft); }
.dyn-exo-exam.is-no { background: #fdf3f3; }
.dyn-yn { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.dyn-yn-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; min-height: 40px; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--dyn-border); background: #fff; color: var(--dyn-muted); transition: all .14s ease; }
.dyn-yn-btn svg { opacity: 0.45; }
.dyn-yn-btn:hover { border-color: var(--dyn-accent-bd); }
.dyn-yn-btn.is-yes.on { background: #e7f6ee; border-color: #bce6cd; color: #15803d; }
.dyn-yn-btn.is-no.on { background: #fdecec; border-color: #f3c0c0; color: #c0392b; }
.dyn-yn-btn.on svg { opacity: 1; }
.dyn-yn-pts { min-width: 38px; text-align: right; font-weight: 800; font-size: 12.5px; color: var(--dyn-muted); }
.dyn-exo-exam.is-yes .dyn-yn-pts { color: var(--dyn-green); }

/* Bandeau résultat (pied) */
.dyn-exam-result { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 12px 15px; border-radius: 12px; border: 1px solid var(--dyn-border); background: var(--dyn-surface-2); color: var(--dyn-text); }
.dyn-exam-result b { font-weight: 800; }
.dyn-exam-result.is-fav { background: #e7f6ee; border-color: #bce6cd; color: #14532d; }
.dyn-exam-result.is-unfav { background: #fdecec; border-color: #f3c0c0; color: #7f1d1d; }

/* Historique */
.dyn-exam-history { display: flex; flex-direction: column; gap: 10px; }
.dyn-exam-history h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; color: var(--dyn-text); }
.dyn-exam-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dyn-exam-history li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--dyn-border); border-radius: 10px; background: var(--dyn-surface-2); }
.dyn-hist-score { font-weight: 800; font-size: 15px; color: var(--dyn-text); }
.dyn-hist-badge { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.dyn-hist-badge.is-fav { color: #15803d; background: #e7f6ee; }
.dyn-hist-badge.is-unfav { color: #c0392b; background: #fdecec; }
.dyn-hist-meta { font-size: 12px; color: var(--dyn-muted); }
.dyn-hist-notes { flex-basis: 100%; font-size: 12.5px; color: var(--dyn-text); font-style: italic; }

/* Badge favorable sur les chips de sélection (page Examen) */
.chip-exam-badge { margin-left: 7px; font-style: normal; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.chip-exam-badge.is-fav { color: #15803d; background: #e7f6ee; }
.chip-exam-badge.is-unfav { color: #9a6a00; background: #fdf3e0; }

/* Badge « à présenter » sur la fiche élève (liste Élèves) */
.sk-exam-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11px; font-weight: 800; color: #15803d; background: #e7f6ee; border: 1px solid #bce6cd; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.sk-exam-badge svg { flex: none; }

.dyn-print-verdict { font-size: 12px; margin: 6px 0; }

@media (max-width: 640px) {
  .dyn-exam-score { min-width: 0; width: 100%; align-items: stretch; }
  .dyn-exam-bignum { justify-content: flex-start; }
  .dyn-verdict { align-self: flex-start; }
  .dyn-exo-exam { flex-direction: column; align-items: stretch; gap: 9px; }
  .dyn-exo-exam .dyn-exo-label { flex: 0 0 auto; }
  .dyn-exo-exam .dyn-yn { width: 100%; }
  .dyn-exo-exam .dyn-yn-btn { flex: 1; justify-content: center; }
  .dyn-exo-exam .dyn-yn-pts { min-width: 0; }
}