/* =========================================================
   Portfolio Chef-d'œuvre — Feuille de styles (V2)
   Ajouts V2 :
     - Encart pédagogique (.pedago-block)
     - Vues spéciales (synthèse orale, tableau enseignant)
     - Dossier final imprimable (page de garde, sommaire)
   ========================================================= */

:root {
  --c-bg: #f5f7fa;
  --c-surface: #ffffff;
  --c-surface-2: #eef2f6;
  --c-text: #1f2a37;
  --c-muted: #5b6b7b;
  --c-primary: #2f6fb5;
  --c-primary-dark: #1f4f86;
  --c-accent: #2e8b57;
  --c-accent-dark: #1f6b3d;
  --c-danger: #b23a48;
  --c-warning: #c47a00;
  --c-info: #5e4bb8;
  --c-border: #d2dae3;
  --c-focus: #ffb703;

  --radius: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 { margin: 0 0 .5em 0; line-height: 1.25; }

button, input, select, textarea { font-family: inherit; font-size: 1rem; }

a { color: var(--c-primary); }

/* ===== En-tête ===== */
.app-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  background: var(--c-surface);
  border-bottom: 2px solid var(--c-border);
  box-shadow: var(--shadow);
}
.app-header h1 { font-size: 1.3rem; color: var(--c-primary-dark); }
.app-subtitle { margin: 0; color: var(--c-muted); font-size: .9rem; }
.app-header-right { display: flex; gap: 18px; align-items: center; }

.save-indicator {
  background: var(--c-surface-2);
  color: var(--c-muted);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: .85rem;
}
.save-indicator.saved { background: #e3f2e8; color: #1f6b3d; }

/* Phase 4 — indicateur de synchro Firebase */
.sync-indicator { transition: opacity .25s; }
.sync-indicator.syncing { animation: psr-sync-blink 1s ease-in-out infinite; opacity: 1 !important; }
.sync-indicator.offline { filter: grayscale(1); opacity: .4 !important; }
.sync-indicator.error { filter: hue-rotate(-40deg); opacity: .9 !important; }
@keyframes psr-sync-blink { 0%,100%{opacity:.4} 50%{opacity:1} }

/* V4.13 — Indicateur du dernier export JSON */
.export-indicator {
  background: var(--c-surface-2);
  color: var(--c-muted);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: .82rem;
  border: 1px solid var(--c-border);
  white-space: nowrap;
}
.export-indicator.fresh   { background: #d5ecdd; color: var(--c-accent-dark); border-color: var(--c-accent); }
.export-indicator.ok      { background: #cfe2ff; color: var(--c-primary-dark); border-color: var(--c-primary); }
.export-indicator.warning { background: #fff0cc; color: #8a5a00; border-color: var(--c-warning); }
.export-indicator.alert,
.export-indicator.never   { background: #fadbdf; color: var(--c-danger); border-color: var(--c-danger); font-weight: 600; }

/* Toast de rappel d'export */
.export-toast {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1500;
  background: #fff;
  border: 2px solid var(--c-warning);
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  max-width: 540px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  animation: toast-in .35s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.et-icon {
  width: 40px; height: 40px;
  background: var(--c-warning); color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700;
}
.et-title { font-weight: 700; color: var(--c-primary-dark); }
.et-desc  { font-size: .88rem; color: var(--c-muted); margin-top: 2px; }

/* V4 : mode enseignant retiré du portfolio élève (cf. evaluer.html) */

/* ===== Mise en page ===== */
.app-body {
  display: grid;
  grid-template-columns: 320px 1fr;
  min-height: calc(100vh - 70px);
}

.sidebar {
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  padding: 18px;
  overflow-y: auto;
  max-height: calc(100vh - 70px);
  position: sticky; top: 0;
}

.main {
  padding: 28px 36px;
  overflow-x: hidden;
  max-width: 1100px;
}

/* ===== Progression ===== */
.progress-block {
  background: var(--c-surface-2);
  padding: 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.progress-label { display: flex; justify-content: space-between; font-weight: 600; }
.progress-bar {
  margin: 8px 0;
  height: 14px;
  background: #d7dee6;
  border-radius: 8px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-accent), #4caf6b);
  transition: width .4s ease;
}
.progress-stats { font-size: .85rem; color: var(--c-muted); }

/* ===== Boutons de vue (synthèse, tableau) ===== */
.views-block {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.view-btn {
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  background: #fff;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-weight: 500;
}
.view-btn:hover { background: var(--c-surface-2); }
.view-btn.active { background: #e3efff; border-color: var(--c-primary); font-weight: 600; }

/* ===== Liste de sections ===== */
.section-list {
  list-style: none; padding: 0; margin: 0 0 14px 0;
}
.section-list li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: var(--c-surface-2);
  border-radius: var(--radius);
  cursor: pointer;
  border-left: 4px solid transparent;
  transition: background .15s;
}
.section-list li:hover { background: #dfe7ef; }
.section-list li.active {
  background: #e3efff;
  border-left-color: var(--c-primary);
  font-weight: 600;
}
.section-list .sec-title { flex: 1; font-size: .92rem; }
.section-list .sec-num {
  display: inline-block; min-width: 22px;
  color: var(--c-muted); font-weight: 600;
}

/* Badges statut */
.badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-not-started { background: #e3e8ee; color: #5b6b7b; }
.badge-in-progress { background: #fff0cc; color: #8a5a00; }
.badge-done        { background: #d5ecdd; color: #1f6b3d; }
.badge-validated   { background: #cfe2ff; color: #1f4f86; }
.badge-to-review   { background: #fadbdf; color: #8a2231; }

.section-list li.alert-empty::after {
  content: "!";
  background: var(--c-warning);
  color: #fff;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700;
}
.section-list li.to-review-highlight {
  box-shadow: inset 0 0 0 2px var(--c-danger);
}

/* ===== Actions sidebar ===== */
.sidebar-actions {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--c-surface-2); }
.btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 1px; }
.btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary-dark); }
.btn-primary:hover { background: var(--c-primary-dark); }
.btn-accent  { background: var(--c-accent); color: #fff; border-color: var(--c-accent-dark); }
.btn-accent:hover { background: var(--c-accent-dark); }
.btn-danger { background: #fff; color: var(--c-danger); border-color: var(--c-danger); }
.btn-danger:hover { background: #fdecef; }

/* ===== Alertes ===== */
.alerts { margin-bottom: 16px; }
.alert-box {
  background: #fff7e0;
  border: 1px solid var(--c-warning);
  color: #6a4500;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.alert-box.review {
  background: #fadbdf; border-color: var(--c-danger); color: #6d1a26;
}

/* ===== Carte de section ===== */
.section-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow);
}

.section-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-border);
  padding-bottom: 12px; margin-bottom: 18px;
}
.section-head h2 { color: var(--c-primary-dark); font-size: 1.4rem; }
.section-head p.desc { color: var(--c-muted); margin: 6px 0 0 0; }

.section-meta {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-end;
}

.status-select {
  padding: 6px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
}

/* ===== Encart pédagogique (V2) ===== */
.pedago-block {
  background: #f1f5fc;
  border-left: 5px solid var(--c-primary);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 22px;
}
.pedago-block h3 {
  color: var(--c-primary-dark);
  margin-top: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pedago-item { margin: 8px 0; }
.pedago-item b {
  display: block;
  color: var(--c-primary-dark);
  font-size: .88rem;
  margin-bottom: 2px;
}
.pedago-item.production b { color: var(--c-accent-dark); }
.pedago-item.attentes   b { color: var(--c-info); }

/* ===== Champs ===== */
.field {
  margin-bottom: 16px;
}
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--c-text);
}
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field textarea,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: #fff;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 2px solid var(--c-primary);
  border-color: var(--c-primary);
}
.field .hint { color: var(--c-muted); font-size: .85rem; margin-top: 4px; }

.field-check { display: flex; align-items: center; gap: 10px; }
.field-check input[type="checkbox"] { width: 20px; height: 20px; }

/* ===== Photos ===== */
.photos-block {
  border: 2px dashed var(--c-border);
  border-radius: var(--radius);
  padding: 14px;
  background: #fafbfc;
}
.photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.photo-item {
  position: relative;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.photo-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.photo-item .photo-caption {
  width: 100%; font-size: .8rem; padding: 4px;
  border: none; border-top: 1px solid var(--c-border);
}
.photo-item .photo-del {
  position: absolute; top: 4px; right: 4px;
  background: rgba(178,58,72,.9); color: #fff;
  border: none; border-radius: 50%; width: 26px; height: 26px;
  cursor: pointer; font-weight: 700;
}

/* ===== Mode enseignant ===== */
.teacher-block {
  margin-top: 20px; padding: 16px;
  background: #fff9e8;
  border: 1px solid var(--c-warning);
  border-radius: var(--radius);
}
.teacher-block h3 { color: var(--c-warning); font-size: 1rem; }
body:not(.mode-teacher) .teacher-only-edit { display: none; }
body:not(.mode-teacher) .teacher-block .hint-role { display: block; color: var(--c-muted); }
body.mode-teacher .hint-role { display: none; }

/* ===== Vue synthèse orale ===== */
.oral-summary {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
}
.oral-summary h2 { color: var(--c-primary-dark); }
.oral-part {
  margin: 20px 0;
  padding: 14px 18px;
  background: #f7faff;
  border-left: 4px solid var(--c-primary);
  border-radius: var(--radius);
}
.oral-part h3 {
  color: var(--c-primary-dark);
  margin-bottom: 8px;
}
.oral-part p { margin: 6px 0; }
.oral-part .oral-empty { color: var(--c-muted); font-style: italic; }

/* ===== Vue tableau enseignant ===== */
.recap-table-wrap {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.recap-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.recap-table th, .recap-table td {
  border: 1px solid var(--c-border);
  padding: 8px 10px;
  text-align: left;
  font-size: .92rem;
  vertical-align: top;
}
.recap-table th {
  background: var(--c-surface-2);
  color: var(--c-primary-dark);
}
.recap-table tr.row-review td { background: #fff3f5; }
.recap-table tr.row-validated td { background: #f0f6ff; }
.recap-table tr.row-done td { background: #f1fbf4; }
.recap-table tr td.actions button { margin-right: 4px; }

.recap-filters {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ===== Impression (dossier final) ===== */
.print-only { display: none; }

/* Structure du dossier final imprimable */
.print-doc { font-family: var(--font); color: #111; }
.print-cover {
  page-break-after: always;
  text-align: center;
  padding: 80px 40px;
}
.print-cover h1 { font-size: 2.2rem; color: var(--c-primary-dark); margin-bottom: 20px; }
.print-cover .project-title { font-size: 1.3rem; font-style: italic; color: var(--c-muted); margin: 16px 0 60px; }
.print-cover .identity {
  margin-top: 80px; font-size: 1.15rem; line-height: 1.8;
  border-top: 2px solid #333; padding-top: 30px; display: inline-block; text-align: left;
}
.print-toc { page-break-after: always; padding: 20px 40px; }
.print-toc h2 { color: var(--c-primary-dark); border-bottom: 2px solid var(--c-primary); padding-bottom: 6px; }
.print-toc ol { font-size: 1rem; line-height: 1.9; }
.print-section { page-break-before: always; padding: 20px 40px; }
.print-section h2 {
  color: var(--c-primary-dark);
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 6px;
}
.print-section .print-field { margin: 10px 0; }
.print-section .print-field b { display: block; color: #333; }
.print-oral { page-break-before: always; padding: 20px 40px; }
.print-oral h2 { color: var(--c-primary-dark); }
.print-oral .oral-part { background: #f7faff; border-left: 4px solid var(--c-primary); padding: 10px 14px; margin: 12px 0; }
.print-annex { page-break-before: always; padding: 20px 40px; }
.print-annex .photos-grid img { max-width: 100%; max-height: 260px; }

@media print {
  @page { margin: 18mm 14mm; }
  body { background: #fff; }
  .no-print { display: none !important; }
  .app-body { display: block; }
  .main { padding: 0; }
  .print-only { display: block; }
  .section-card, .oral-summary, .recap-table-wrap { box-shadow: none; border: none; }
  h2 { page-break-after: avoid; }
}

/* ===== V2.1 : indicateurs de remplissage ===== */
.mini-fill {
  display: inline-block;
  width: 40px; height: 6px;
  background: #d7dee6; border-radius: 4px;
  overflow: hidden;
}
.mini-fill > span {
  display: block; height: 100%;
  background: var(--c-accent);
}
.section-list li.underfilled .sec-title::after {
  content: " ⚠";
  color: var(--c-warning);
  font-weight: 700;
}

.section-fill {
  min-width: 160px;
  margin-top: 4px;
  font-size: .82rem; color: var(--c-muted);
  text-align: right;
}
.fill-bar {
  height: 8px; background: #d7dee6;
  border-radius: 4px; overflow: hidden;
  margin-top: 4px; width: 160px;
}
.fill-bar.small { height: 5px; width: 100%; max-width: 140px; }
.fill-bar > div { height: 100%; background: var(--c-accent); }

/* ===== V2.1 : synthèse orale améliorée ===== */
.oral-controls {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin: 10px 0 18px;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border-radius: var(--radius);
}
.oral-mode-switch, .oral-actions { display: flex; gap: 6px; }
.oral-bullets {
  list-style: disc;
  padding-left: 24px;
  margin: 6px 0;
}
.oral-bullets li {
  margin: 6px 0;
  line-height: 1.5;
}
.plan-part { page-break-inside: avoid; }

/* ===== V2.1 : dossier imprimable — séparateurs et numérotation ===== */
.print-divider {
  page-break-before: always;
  display: flex; align-items: center; justify-content: center;
  height: 100vh;
  text-align: center;
}
.print-divider span {
  font-size: 2rem;
  font-weight: 700;
  color: var(--c-primary-dark);
  border-top: 3px solid var(--c-primary);
  border-bottom: 3px solid var(--c-primary);
  padding: 20px 40px;
  letter-spacing: .05em;
}
.print-section-num {
  display: inline-block;
  width: 48px; height: 48px; line-height: 48px;
  background: var(--c-primary); color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 1.4rem; font-weight: 700;
  margin-bottom: 6px;
}

/* ===== V3 : années scolaires et jalons ===== */
.year-separator {
  background: transparent !important;
  padding: 10px 6px 4px !important;
  font-size: .82rem;
  font-weight: 700;
  color: var(--c-primary-dark);
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: default !important;
  border-left: none !important;
  list-style: none;
}
.year-separator:hover { background: transparent !important; }

.year-badge {
  display: inline-block;
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  margin-right: 6px;
  margin-bottom: 4px;
  vertical-align: middle;
}
.year-badge.year-A1   { background: #cfe2ff; color: #1f4f86; }
.year-badge.year-A2   { background: #d5ecdd; color: #1f6b3d; }
.year-badge.year-both { background: #efe7ff; color: #5e4bb8; }

/* Étoile photo principale */
.photo-star {
  position: absolute; bottom: 28px; right: 4px;
  background: rgba(255,255,255,.92); color: #c47a00;
  border: 1px solid var(--c-border);
  border-radius: 50%; width: 28px; height: 28px;
  cursor: pointer; font-size: 1rem; line-height: 1;
  padding: 0;
}
.photo-star.active { color: #fff; background: var(--c-warning); border-color: var(--c-warning); }
.photo-item.is-main-photo {
  outline: 3px solid var(--c-warning);
  outline-offset: -3px;
}

/* Vue Mes évaluations */
.jalons-view h2 { color: var(--c-primary-dark); }
.jalons-actions { margin: 12px 0 18px; }

.jalon-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 6px solid var(--c-muted);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.jalon-card.evaluated { border-left-color: var(--c-accent); }

.jalon-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px;
}
.jalon-head h3 { margin: 6px 0 4px; color: var(--c-primary-dark); }
.jalon-score { text-align: right; min-width: 150px; }
.score-big {
  font-size: 2rem; font-weight: 700; color: var(--c-accent-dark);
}
.score-pending {
  color: var(--c-muted); font-style: italic;
  background: var(--c-surface-2); padding: 6px 10px;
  border-radius: var(--radius);
}

.criteres-list {
  list-style: none; padding: 0; margin: 10px 0 0 0;
}
.criteres-list li {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
  font-size: .92rem;
}
.criteres-list li:last-child { border-bottom: none; }
.cl-main {
  display: flex; align-items: center; gap: 8px;
}
.cl-main .cl-label { flex: 1; }
.cl-main .cl-pts { white-space: nowrap; }
.cl-cap { color: var(--c-muted); font-size: .85rem; margin-top: 2px; }
.cl-rem {
  margin-top: 4px;
  background: #fff8e0;
  border-left: 3px solid var(--c-warning);
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  font-size: .88rem;
}
.cl-rem b { color: #8a5a00; }

.niv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 22px;
  border-radius: 4px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.niv-NT { background: #fadbdf; color: #8a2231; }
.niv-I  { background: #fff0cc; color: #8a5a00; }
.niv-A  { background: #cfe2ff; color: var(--c-primary-dark); }
.niv-M  { background: #d5ecdd; color: var(--c-accent-dark); }

.jalon-comment {
  margin-top: 10px;
  background: #fff8e0;
  border-left: 3px solid var(--c-warning);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: .92rem;
}

/* =========================================================
   V4 — VUE "MON PROJET" (dashboard agrégé)
   Design moderne et propre. Inspiration : carte d'identité du
   projet, vivante, qui s'enrichit au fur et à mesure.
   ========================================================= */
.projet-view {
  max-width: 980px;
}
.projet-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff;
  padding: 28px 32px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(31,79,134,.18);
  margin-bottom: 22px;
}
.projet-eyebrow {
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .85;
}
.projet-titre {
  font-size: 2rem; font-weight: 700;
  margin: 6px 0 4px;
  color: #fff;
  line-height: 1.1;
}
.projet-author { font-size: .95rem; opacity: .92; }
.projet-description {
  margin-top: 12px; font-size: 1rem; line-height: 1.5;
  background: rgba(255,255,255,.12);
  padding: 10px 14px; border-radius: 8px;
  max-width: 540px;
}
.projet-photo {
  width: 200px; height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid rgba(255,255,255,.4);
}
.projet-photo-empty {
  width: 200px; height: 200px;
  border: 2px dashed rgba(255,255,255,.5);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 2.5rem; color: rgba(255,255,255,.7);
  text-align: center;
}
.projet-photo-empty span {
  font-size: .8rem; margin-top: 4px;
}

.projet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}
.projet-bloc {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  transition: box-shadow .2s;
}
.projet-bloc:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.projet-bloc.locked { background: repeating-linear-gradient(45deg,#fafbfc,#fafbfc 10px,#f3f5f8 10px,#f3f5f8 20px); }
.bloc-composition,
.bloc-etiquettes,
.bloc-eco { grid-column: 1 / -1; }

/* V4.56 : bannières colorées harmonisées sur tous les blocs Mon projet */
.bloc-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap;
  margin: -20px -22px 16px;
  padding: 14px 22px;
  background: linear-gradient(135deg, var(--bloc-c, #4a90d9) 0%, var(--bloc-c-dark, #2c3e50) 100%);
  color: #fff;
  border-bottom: 4px solid var(--bloc-accent, #f0c98c);
  border-radius: 14px 14px 0 0;
}
.bloc-head h3 {
  margin: 0; color: #fff;
  font-size: 1.15rem; font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Couleurs par bloc */
.bloc-scores       { --bloc-c: #4a90d9; --bloc-c-dark: #2c3e50; --bloc-accent: #f0c98c; }
.bloc-composition  { --bloc-c: #4a90d9; --bloc-c-dark: #2c3e50; --bloc-accent: #f0c98c; }
.bloc-plateau      { --bloc-c: #8a5cb5; --bloc-c-dark: #5a3a85; --bloc-accent: #f0c98c; }
.bloc-equilibre    { --bloc-c: #2a8b3a; --bloc-c-dark: #1f5e36; --bloc-accent: #d8a23a; }
.bloc-eco          { --bloc-c: #4a9d5e; --bloc-c-dark: #2a6b3a; --bloc-accent: #d8a23a; }
.bloc-etiquettes   { --bloc-c: #e8a13a; --bloc-c-dark: #8a5500; --bloc-accent: #fff7e8; }
.bloc-emballage    { --bloc-c: #8a6a3a; --bloc-c-dark: #5a4520; --bloc-accent: #f0c98c; }
.bloc-cout         { --bloc-c: #888; --bloc-c-dark: #555; --bloc-accent: #d3d8e0; }

/* Pill état adaptée au fond coloré */
.bloc-head .bloc-etat {
  background: rgba(255,255,255,0.92);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.bloc-etat {
  font-size: .82rem; font-weight: 600;
  padding: 4px 12px; border-radius: 12px;
  white-space: nowrap;
}
.bloc-etat.ok   { background: #d5ecdd; color: var(--c-accent-dark); }
.bloc-etat.warn { background: #fff0cc; color: #8a5a00; }
.bloc-etat.ko   { background: #fdecef; color: var(--c-danger); }
.bloc-etat.locked-tag { background: #e3e8ee; color: #5b6b7b; }
.bloc-etat .link-rempli {
  margin-left: 6px;
  color: inherit; text-decoration: underline;
  cursor: pointer; font-weight: 700;
}
.link-rempli { cursor: pointer; color: var(--c-primary-dark); font-weight: 600; }
.link-rempli:hover { color: var(--c-primary); }

.bloc-text {
  font-size: .95rem; line-height: 1.55;
  margin: 6px 0;
  color: var(--c-text);
}
.bloc-text.empty { color: var(--c-muted); font-style: italic; }
.bloc-text b { color: var(--c-primary-dark); }

/* Liste de composition (entrée/plat/dessert…) */
.composition-list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.composition-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: #f7faff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-size: .92rem;
}
.composition-list li.empty { background: #fafbfc; color: var(--c-muted); }
.ci-icon  { font-size: 1.5rem; }
.ci-label { font-weight: 600; color: var(--c-primary-dark); min-width: 60px; }
.ci-val   { flex: 1; }

/* Vérif équilibre — assiette schématique */
.assiette-check {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.assiette-part {
  padding: 14px;
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.08);
  min-height: 90px;
}
.assiette-part-label {
  font-weight: 700; font-size: 1rem;
  color: var(--c-text);
  margin-bottom: 6px;
}
.assiette-part-found { font-size: .88rem; color: var(--c-accent-dark); font-weight: 500; }
.assiette-part-missing { font-size: .85rem; color: var(--c-danger); }
.assiette-part-missing a { color: var(--c-danger); text-decoration: underline; cursor: pointer; }

/* Stats éco */
.eco-stats {
  display: flex; gap: 14px; margin: 8px 0 12px;
}
.eco-stat {
  flex: 1;
  background: linear-gradient(135deg, #f1f7ff 0%, #f1fbf4 100%);
  padding: 12px;
  border-radius: 10px;
  text-align: center;
}
.eco-stat b {
  display: block;
  font-size: 1.8rem;
  color: var(--c-accent-dark);
  font-weight: 700;
}
.eco-stat span { font-size: .82rem; color: var(--c-muted); }

.eco-table {
  width: 100%; border-collapse: collapse;
  font-size: .9rem;
  margin-top: 8px;
}
.eco-table th, .eco-table td {
  border: 1px solid var(--c-border);
  padding: 8px 10px;
  text-align: left;
}
.eco-table th { background: var(--c-surface-2); color: var(--c-primary-dark); }

.pill {
  display: inline-block;
  font-size: .78rem; font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.pill.ok   { background: #d5ecdd; color: var(--c-accent-dark); }
.pill.warn { background: #fff0cc; color: #8a5a00; }
.pill.ko   { background: #fdecef; color: var(--c-danger); }

/* Étiquettes — cartes */
.etiquettes-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.etiquette-card {
  background: linear-gradient(180deg, #fffef7 0%, #fff 100%);
  border: 1.5px solid var(--c-warning);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(196,122,0,.08);
}
.etiquette-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  border-bottom: 1px dashed var(--c-warning);
  padding-bottom: 6px; margin-bottom: 6px;
}
.etiquette-card h4 {
  margin: 0;
  color: var(--c-warning);
  font-size: 1rem;
}
.et-slogan {
  font-style: italic; color: var(--c-muted);
  font-size: .88rem; margin: 4px 0 6px;
}
.et-defs { margin: 0; font-size: .86rem; }
.et-defs dt {
  font-weight: 700; color: var(--c-primary-dark);
  margin-top: 4px; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.et-defs dd {
  margin: 0 0 4px 0;
  color: var(--c-text);
}
.et-defs dd.alerte { color: var(--c-danger); font-weight: 600; }

/* Actions du tableau de bord */
.projet-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: 14px;
  padding: 16px;
  background: var(--c-surface-2);
  border-radius: 12px;
}

/* Highlight bouton "Mon projet" dans la sidebar */
.view-btn-projet {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600;
}
.view-btn-projet.active { box-shadow: 0 2px 8px rgba(0,0,0,.2); }

/* Repeater (étiquettes / fournisseurs) */
.repeater-field { background: #fafbfc; padding: 12px; border-radius: 10px; border: 1px dashed var(--c-border); }
.repeater-list { margin: 8px 0; }
.repeater-item {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
}
.repeater-item-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
}
.repeater-item-num {
  width: 28px; height: 28px;
  background: var(--c-primary); color: #fff;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.repeater-item-title { flex: 1; font-weight: 600; color: var(--c-primary-dark); }
.repeater-item-body { padding: 14px; }
.repeater-add { margin-top: 8px; }

@media (max-width: 720px) {
  .projet-grid { grid-template-columns: 1fr; }
  .projet-header { grid-template-columns: 1fr; }
  .projet-photo, .projet-photo-empty { width: 100%; height: 220px; }
  .assiette-check { grid-template-columns: 1fr; }
}

/* ===== V4.85 — Sidebar : bouton "Ma fiche de présentation" en TOP ===== */
.sidebar-profil {
  padding: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 12px;
  margin-bottom: 12px;
}
.profil-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.8);
  border: 2px solid #f59e0b;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  transition: all .15s;
}
.profil-btn:hover { background: #fff; transform: translateY(-1px); }
.profil-btn-emoji { font-size: 28px; }
.profil-btn-text { flex: 1; display: flex; flex-direction: column; }
.profil-btn-text b { color: #78350f; font-size: 14px; }
.profil-btn-text small { color: #92400e; font-size: 11px; }
.profil-btn-arrow { color: #f59e0b; font-size: 18px; font-weight: 700; }

/* ===== V4.85 — Sidebar accordéons (chef-d'œuvre, formation) ===== */
.sidebar-section-details {
  margin: 8px 0;
  border-radius: 8px;
  overflow: hidden;
}
.sidebar-section-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #475569;
  background: #f1f5f9;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-section-details > summary::-webkit-details-marker { display: none; }
.sidebar-section-details > summary::after {
  content: "▼";
  font-size: 10px;
  transition: transform .2s;
}
.sidebar-section-details[open] > summary::after { transform: rotate(180deg); }
.sidebar-section-details > .nav-section-content {
  padding: 6px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-separator {
  border: 0;
  border-top: 1px dashed var(--c-border, #cbd5e1);
  margin: 14px 0 10px;
}

/* ===== V4.6 — Sidebar accordéon "Sauvegarde" ===== */
.sidebar-save {
  margin-top: 18px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 4px 0;
}
.sidebar-save-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600;
  color: var(--c-primary-dark);
  border-radius: 10px;
}
.sidebar-save-summary::-webkit-details-marker { display: none; }
.sidebar-save-summary::after {
  content: "▾";
  transition: transform .2s;
  color: var(--c-muted);
}
.sidebar-save[open] .sidebar-save-summary::after { transform: rotate(180deg); }
.sidebar-save .sidebar-actions {
  padding: 4px 10px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar-save .sidebar-actions-title { display: none; }
.sidebar-divider { display: none; }

/* ===== V4.6 — Frise chronologique sur l'accueil ===== */
.home-frise-section {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 20px 24px;
  margin: 16px 0 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.frise-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 16px;
}
.frise-title {
  color: var(--c-primary-dark);
  font-size: 1rem;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.frise-stats {
  font-size: .9rem; color: var(--c-muted);
  font-weight: 600;
}
.frise-track {
  position: relative;
  height: 100px;
  margin: 30px 14px 30px;
}
.frise-line {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 4px;
  background: var(--c-surface-2);
  border-radius: 2px;
  transform: translateY(-50%);
}
.frise-fill {
  position: absolute;
  top: 50%; left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  border-radius: 2px;
  transform: translateY(-50%);
  transition: width .6s ease-out;
}
.frise-year-sep {
  position: absolute;
  top: 12px; bottom: 12px;
  width: 2px;
  background: var(--c-border);
  transform: translateX(-1px);
}
.frise-year-label {
  position: absolute;
  top: -22px;
  transform: translateX(-50%);
  font-size: .76rem;
  color: var(--c-muted);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.frise-step {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.frise-dot {
  display: block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--c-muted);
  transition: all .15s;
}
.frise-step:hover .frise-dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(47,111,181,.18);
}
.frise-todo .frise-dot { border-color: #b0bdcb; }
.frise-progress .frise-dot { border-color: var(--c-warning); background: var(--c-warning); }
.frise-done .frise-dot { border-color: var(--c-accent); background: var(--c-accent); }
.frise-tooltip {
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--c-primary-dark);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .76rem;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.frise-step:hover .frise-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}
.frise-end-marker {
  position: absolute;
  top: -2px;
  right: -8px;
  background: var(--c-primary-dark);
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}

/* ===== V4.12 — Bloc Vérification automatique du menu final ===== */
.auto-verif-block {
  margin: 18px 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  border: 2px solid var(--c-primary);
  border-radius: 12px;
}
.av-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.av-head h3 {
  margin: 0;
  color: var(--c-primary-dark);
  font-size: 1.05rem;
  border: none; padding: 0;
}
.av-badge {
  font-size: .82rem; font-weight: 700;
  padding: 4px 12px; border-radius: 12px;
}
.av-badge.ok { background: var(--c-accent); color: #fff; }
.av-badge.ko { background: var(--c-warning); color: #fff; }

.av-list {
  list-style: none; padding: 0; margin: 12px 0 0;
}
.av-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px; align-items: center;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.av-item.av-ok { border-color: var(--c-accent); background: #f1fbf4; }
.av-item.av-ko { border-color: var(--c-warning); background: #fffbe5; }

.av-pic {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
  font-size: 1.1rem;
}
.av-ok .av-pic { background: var(--c-accent); }
.av-ko .av-pic { background: var(--c-warning); }
.av-label { font-weight: 600; color: var(--c-text); }
.av-desc { font-size: .85rem; color: var(--c-muted); margin-top: 2px; }
.av-link { white-space: nowrap; }

/* ===== V4.11 — Banque de commentaires types ===== */
.comments-bank summary { list-style: none; }
.comments-bank summary::-webkit-details-marker { display: none; }
.comments-bank summary::after {
  content: " ▾";
  color: var(--c-muted);
  transition: transform .2s;
  display: inline-block;
}
.comments-bank[open] summary::after { transform: rotate(180deg); }

.cb-cat { margin-bottom: 10px; }
.cb-cat-title {
  font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  margin: 6px 0 4px;
}
.cb-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.cb-chip {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .12s;
}
.cb-chip:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary-dark);
}

/* ===== V4.7 — Étapes-clés écrites sous la frise ===== */
.frise-keyposts {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.frise-kp {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-border);
  padding: 6px 12px;
  border-radius: 0 6px 6px 0;
  font-size: .85rem;
  color: var(--c-text);
}
.frise-kp .kp-tag {
  display: block;
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  margin-bottom: 2px;
}
.frise-kp.frise-kp-jalon {
  border-left-color: var(--c-accent);
  background: #f1fbf4;
}
.frise-kp.frise-kp-jalon .kp-tag { color: var(--c-accent-dark); }
.frise-kp.frise-kp-final {
  border-left-color: var(--c-primary);
  background: #f1f7ff;
}
.frise-kp.frise-kp-final .kp-tag { color: var(--c-primary-dark); }
@media (max-width: 720px) {
  .frise-keyposts { grid-template-columns: 1fr; }
}

/* ===== V4.7 — Badges types de questions dans l'épreuve ===== */
.q-type-badge {
  display: inline-block;
  font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
  padding: 2px 8px; border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}
.q-type-qcm    { background: #cfe2ff; color: var(--c-primary-dark); }
.q-type-mots   { background: #fff0cc; color: #8a5a00; }
.q-type-phrase { background: #efe7ff; color: #5e4bb8; }
.q-points {
  float: right;
  font-size: .78rem; font-weight: 600;
  color: var(--c-muted);
}

.epreuve-mots {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px;
}
.epreuve-mots input {
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 1rem;
}
.epreuve-q-phrase textarea {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.qcm-feedback.warn { background: #fff3e0; color: #6a4500; }
.feedback-detail { margin-top: 4px; font-size: .82rem; }
.teacher-validate-btn { background: #fff; border: 1px solid var(--c-border); color: var(--c-text); }
.teacher-validate-btn:hover { background: var(--c-surface-2); border-color: var(--c-primary); }

.epreuve-await-teacher {
  background: #fff3e0;
  border: 1px solid var(--c-warning);
  border-left: 4px solid var(--c-warning);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 14px;
  text-align: left;
}
.epreuve-await-teacher h3 {
  color: #8a5a00;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 6px;
}
.epreuve-await-teacher p {
  font-size: .92rem; line-height: 1.5;
  color: var(--c-text);
  margin: 0;
}
.epreuve-validated-banner {
  background: #d5ecdd;
  color: var(--c-accent-dark);
  border: 2px solid var(--c-accent);
  border-radius: 10px;
  padding: 14px;
  margin-top: 12px;
  font-size: 1rem;
}

/* ===== V4.6 — Vue épreuve d'attestation ===== */
.epreuve-view {
  max-width: 880px;
}
.epreuve-head {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff;
  padding: 24px 28px;
  border-radius: 12px;
  margin-bottom: 18px;
}
.epreuve-eyebrow {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; opacity: .85;
}
.epreuve-head h1 {
  margin: 4px 0 6px;
  font-size: 1.6rem;
  color: #fff;
}
.epreuve-meta { font-size: .9rem; opacity: .9; }

.epreuve-situation {
  background: #fff;
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
}
.epreuve-situation h3 {
  color: var(--c-primary-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 6px;
}
.epreuve-situation p { margin: 0; line-height: 1.6; }

.epreuve-questions h3 {
  color: var(--c-primary-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.epreuve-q {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.epreuve-action {
  margin-top: 24px;
  text-align: center;
}
.epreuve-result {
  background: #fff;
  border: 2px solid var(--c-border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 14px;
}
.epreuve-result.ok { border-color: var(--c-accent); background: #f1fbf4; }
.epreuve-result.ko { border-color: var(--c-warning); background: #fffbe5; }
.er-eyebrow {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted); font-weight: 700;
}
.er-note {
  font-size: 3rem; font-weight: 700;
  color: var(--c-primary-dark);
  line-height: 1.05;
}
.er-note small { font-size: 1.2rem; color: var(--c-muted); }
.er-msg { font-size: .95rem; margin-top: 8px; line-height: 1.5; }

.epreuve-remediation {
  background: #fff;
  border: 1px solid var(--c-warning);
  border-left: 4px solid var(--c-warning);
  border-radius: 10px;
  padding: 16px 20px;
  text-align: left;
  margin-top: 14px;
}
.epreuve-remediation h3 {
  color: #8a5a00;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 8px;
}
.epreuve-remediation ul {
  margin: 0;
  padding-left: 22px;
  line-height: 1.7;
  font-size: .92rem;
}

/* Corrigé d'épreuve : Q / réponse élève / bonne réponse / explication */
.epreuve-corrige { border-color: #b9d4ff; border-left-color: #2563eb; background: #f8fbff; }
.epreuve-corrige h3 { color: #1d4ed8; }
.corrige-intro { margin: 0 0 12px; font-size: .92rem; color: #475569; }
.corrige-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.corrige-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; line-height: 1.55; }
.corrige-item.corrige-ok { border-left: 4px solid #16a34a; }
.corrige-item.corrige-ko { border-left: 4px solid #dc2626; }
.corrige-q { font-size: 1rem; margin-bottom: 8px; }
.corrige-badge { font-size: 1.1em; margin-right: 4px; }
.corrige-row { font-size: .92rem; padding: 4px 0; }
.corrige-label { display: inline-block; min-width: 120px; font-weight: 600; color: #475569; }
.corrige-eleve { background: #fafafa; border-radius: 6px; padding: 6px 10px; }
.corrige-bonne { background: #ecfdf5; border-radius: 6px; padding: 6px 10px; margin-top: 4px; color: #065f46; }
.corrige-explic { background: #fffbeb; border-radius: 6px; padding: 8px 10px; margin-top: 6px; color: #78350f; }

/* Rappel pédagogique systématique sous chaque feedback QCM */
.qcm-rappel { display: block; margin-top: 6px; font-size: .9rem; opacity: .92; }

/* ===== V4.5 — Sidebar restructurée ===== */
.nav-block {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 14px;
}
.nav-btn {
  text-align: left;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: .95rem;
  color: var(--c-text);
  transition: background .15s, border-color .15s;
}
.nav-btn:hover { background: var(--c-surface-2); border-color: var(--c-primary); }
.nav-btn.active {
  background: #e3efff;
  border-color: var(--c-primary);
  color: var(--c-primary-dark);
  font-weight: 700;
}
.nav-btn-projet {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600;
}
.nav-btn-projet.active { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

.sidebar-divider {
  height: 1px;
  background: var(--c-border);
  margin: 18px 0 14px;
}
.sidebar-actions-title {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

/* On masque les anciens boutons "view-btn" non navigation */
.views-block { display: none; }

/* ===== V4.5 — Vue Mon parcours dédiée ===== */
.parcours-head { margin-bottom: 16px; }
.parcours-eyebrow {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
}
.parcours-head h2 {
  color: var(--c-primary-dark);
  font-size: 1.6rem;
  margin: 4px 0;
}
.parcours-vue-group { margin-bottom: 22px; }
.parcours-group-title-v {
  color: var(--c-primary-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 2px solid var(--c-primary);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.parcours-group-title-v span {
  color: var(--c-muted); font-weight: 400; font-size: .82rem; margin-left: 6px;
}
.parcours-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: 12px; align-items: center;
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: .95rem;
  transition: all .15s;
}
.parcours-row:hover {
  border-color: var(--c-primary);
  background: #f7faff;
  transform: translateX(2px);
}
.parcours-row-emoji { font-size: 1.4rem; }
.parcours-row-label { color: var(--c-text); font-weight: 500; }
.parcours-row-statut {
  font-size: .8rem; font-weight: 600;
  padding: 3px 10px; border-radius: 8px;
  background: var(--c-surface-2); color: var(--c-muted);
}
.parcours-row-note {
  font-size: .78rem; font-weight: 600;
  padding: 3px 10px; border-radius: 8px;
  background: #cfe2ff; color: var(--c-primary-dark);
}
.parcours-row-arrow { color: var(--c-muted); }
.parcours-row-done .parcours-row-statut { background: #d5ecdd; color: var(--c-accent-dark); }
.parcours-row-progress .parcours-row-statut { background: #fff0cc; color: #8a5a00; }

.home-see-all {
  margin-top: 14px;
  text-align: center;
}
.home-see-all .btn { font-size: .92rem; }

/* ===== V4.5 — Mon projet : nouvel en-tête avec donut ===== */
.projet-header-v2 {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff;
  padding: 28px 32px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(31,79,134,.18);
  margin-bottom: 22px;
}
.ph-eyebrow {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: .85; font-weight: 700;
}
.ph-titre {
  font-size: 2.2rem; font-weight: 700;
  margin: 4px 0 4px;
  color: #fff; line-height: 1.05;
}
.ph-author { font-size: .95rem; opacity: .95; margin-bottom: 18px; }
.ph-row {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.ph-photo img,
.ph-photo-empty {
  width: 200px; height: 150px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.4);
}
.ph-photo-empty {
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: rgba(255,255,255,.7);
  font-size: .85rem; padding: 16px;
  border-style: dashed;
}
.ph-photo-empty small { font-size: .75rem; opacity: .8; }
.ph-donut {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ph-donut svg { display: block; }
.ph-donut-label {
  font-size: .8rem; opacity: .9; letter-spacing: .04em;
}
.ph-desc {
  margin-top: 14px;
  background: rgba(255,255,255,.12);
  padding: 10px 14px; border-radius: 8px;
  font-size: .95rem;
}
/* On désactive l'ancien header */
.projet-header { display: none; }

/* ===== V4.5 — Consigne pédago en accordéon ===== */
.pedago-toggle {
  margin: 8px 0 16px;
}
.pedago-info-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: .85rem;
  color: var(--c-muted);
  font-family: inherit;
}
.pedago-info-btn:hover { background: #e3efff; border-color: var(--c-primary); color: var(--c-primary-dark); }
.pedago-info-btn .pedago-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--c-primary); color: #fff;
  border-radius: 50%;
  font-style: italic; font-weight: 700; font-size: .8rem;
}
.pedago-info-btn.open .pedago-chevron { transform: rotate(180deg); }
.pedago-chevron { transition: transform .2s; font-size: .8rem; }

.pedago-content {
  margin-top: 8px;
  padding: 12px 16px;
  background: #f1f5fc;
  border-left: 3px solid var(--c-primary);
  border-radius: 0 8px 8px 0;
}
.pedago-content[hidden] { display: none; }

/* L'ancien gros bandeau pedago est masqué */
.pedago-block { display: none; }

/* ===== V4.5 — Fiche identité split (formulaire + aperçu live) ===== */
.fiche-split {
  margin: 18px 0;
}

/* L'ancienne welcome banner masquée */
.welcome-banner { display: none; }

/* =========================================================
   V4.29 — Pensée du jour, Respiration, Bilan séance, Auto-éval, Sondage
   ========================================================= */
.splash-pensee {
  background: rgba(255,255,255,.12);
  border-left: 3px solid rgba(255,255,255,.5);
  padding: 8px 14px;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: .9rem;
  color: rgba(255,255,255,.92);
  margin: 0 0 16px;
  opacity: 0;
  animation: stat-in .5s ease-out forwards;
}

/* Respiration */
.resp-anim {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; padding: 30px 0;
}
.resp-circle {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
  transition: transform 4s cubic-bezier(.4,0,.6,1), background 1s;
}
.resp-circle.inspire { transform: scale(2); transition-duration: 4s; }
.resp-circle.retiens { transform: scale(2); background: linear-gradient(135deg, #e0a87c, #cc4a55); transition-duration: .3s; }
.resp-circle.expire  { transform: scale(1); background: linear-gradient(135deg, #2e8b57, #1f6b3d); transition-duration: 8s; }
.resp-circle.done    { transform: scale(1); background: linear-gradient(135deg, #d4af37, #cc8a00); }
.resp-text {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-primary-dark);
  text-align: center;
}
.resp-actions { text-align: center; }

/* Mini-bilan */
.bilan-stars { display: flex; gap: 6px; justify-content: center; }
.bilan-star {
  background: none; border: none;
  font-size: 2rem; cursor: pointer;
  color: #c4a000;
  transition: transform .15s;
}
.bilan-star:hover { transform: scale(1.2); }
.bilan-star.active { color: #ffb300; }

/* Auto-évaluation après épreuve */
.ae2-block { margin: 12px 0; }
.ae2-block label {
  display: block; font-weight: 600;
  color: var(--c-primary-dark);
  margin-bottom: 6px;
  font-size: .92rem;
}
.ae2-emos { display: flex; gap: 10px; justify-content: center; }
.ae2-emo {
  background: #fff;
  border: 2px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 18px;
  cursor: pointer;
  font-size: 1.6rem;
  font-family: inherit;
  text-align: center;
  transition: all .15s;
}
.ae2-emo small { display: block; font-size: .72rem; color: var(--c-muted); margin-top: 4px; }
.ae2-emo:hover { border-color: var(--c-primary); }
.ae2-emo.active { border-color: var(--c-primary); background: #e3efff; }

.ae2-options { display: flex; flex-wrap: wrap; gap: 6px; }
.ae2-opt {
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 16px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: .88rem;
  font-family: inherit;
}
.ae2-opt:hover { border-color: var(--c-primary); }
.ae2-opt.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary-dark); }

/* Sondage */
.sg-q { margin: 14px 0; }
.sg-q label {
  display: block; font-weight: 600;
  color: var(--c-primary-dark);
  margin-bottom: 6px;
}
.sg-stars { display: flex; gap: 4px; }
.sg-star {
  background: none; border: none;
  font-size: 1.6rem; cursor: pointer;
  color: #c4a000;
}
.sg-star.active { color: #ffb300; }
.sg-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-opt {
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 16px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: .88rem;
  font-family: inherit;
}
.sg-opt:hover { border-color: var(--c-primary); }
.sg-opt.active { background: var(--c-primary); color: #fff; }

/* =========================================================
   V4.28 — Météo des émotions
   ========================================================= */
.meteo-modal .meteo-content {
  max-width: 720px !important;
  width: 95%;
}
.meteo-header {
  text-align: center;
  margin-bottom: 18px;
}
.meteo-header h2 {
  margin: 6px 0;
  color: var(--c-primary-dark);
  font-size: 1.6rem;
}
.meteo-eyebrow {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
}
.meteo-emotions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.meteo-card {
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 18px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  display: flex; flex-direction: column; gap: 4px;
  transition: all .15s;
}
.meteo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.meteo-emoji {
  font-size: 2.6rem; line-height: 1;
  margin-bottom: 6px;
}
.meteo-label {
  font-weight: 700;
  font-size: 1.05rem;
}
.meteo-desc {
  font-size: .82rem;
  color: var(--c-text);
  opacity: .7;
}
.meteo-skip {
  text-align: center;
  margin-top: 10px;
}

.meteo-nuances {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin: 18px 0;
}
.meteo-nuance {
  background: #fff;
  border: 2px solid;
  padding: 10px 18px;
  border-radius: 22px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.meteo-nuance:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}

.meteo-back { text-align: center; margin-top: 8px; }
.meteo-confirm { text-align: center; padding: 18px; }

/* Journal des émotions */
.journal-stats {
  display: flex; flex-direction: column; gap: 6px;
  background: #f7faff;
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
}
.js-row {
  display: grid;
  grid-template-columns: auto 120px 1fr 30px;
  gap: 10px;
  align-items: center;
  font-size: .92rem;
}
.js-emoji { font-size: 1.4rem; }
.js-label { color: var(--c-text); font-weight: 500; }
.js-bar {
  background: #e3e8ee;
  height: 10px; border-radius: 6px;
  overflow: hidden;
}
.js-bar > div {
  height: 100%; transition: width .3s;
}
.js-count { font-weight: 700; color: var(--c-primary-dark); text-align: right; }

.journal-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.journal-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-left: 4px solid;
  border-radius: 0 8px 8px 0;
}
.ji-emoji { font-size: 1.6rem; }
.ji-info { flex: 1; }
.ji-nuance { font-weight: 600; }
.ji-meta { font-size: .8rem; color: var(--c-muted); }

@media (max-width: 720px) {
  .meteo-emotions { grid-template-columns: repeat(2, 1fr); }
  .js-row { grid-template-columns: auto 1fr 30px; }
  .js-row .js-bar { display: none; }
}

/* =========================================================
   V4.22 — Espace révision (vue dédiée)
   ========================================================= */
.nav-btn-revision {
  background: linear-gradient(135deg, #c47a00 0%, #e07b00 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600;
}
.nav-btn-revision.active { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

.revision-head { margin-bottom: 18px; }
.revision-head h2 { color: var(--c-primary-dark); font-size: 1.6rem; }

.revision-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.revision-card {
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  padding: 18px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 6px;
  transition: all .15s;
}
.revision-card:hover {
  border-color: var(--c-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.rev-icon { font-size: 2.4rem; line-height: 1; }
.rev-titre { font-weight: 700; color: var(--c-primary-dark); font-size: 1.05rem; }
.rev-desc { font-size: .88rem; color: var(--c-muted); line-height: 1.4; }
.rev-stat {
  margin-top: auto; padding-top: 8px;
  font-size: .82rem; font-weight: 600;
  color: var(--c-accent-dark);
}

/* =========================================================
   V4.22 — Raccourcis "Pour réviser ce module" en bas de chaque module
   ========================================================= */
.module-review-block {
  margin: 18px 0;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff8e0 0%, #fffbe5 100%);
  border: 1px solid var(--c-warning);
  border-radius: 10px;
}
.module-review-block h3 {
  color: var(--c-warning);
  font-size: 1rem;
  margin: 0 0 4px;
  border: none;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.module-review-block .hint { margin: 4px 0 10px; }
.review-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.review-link {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all .15s;
}
.review-link:hover {
  border-color: var(--c-primary);
  background: #f7faff;
  transform: translateX(2px);
}
.rl-icon { font-size: 1.6rem; }
.rl-text { flex: 1; font-size: .88rem; }
.rl-text small { color: var(--c-muted); }

/* =========================================================
   V4.22 — Post-it réalistes (notes par section)
   ========================================================= */
.section-notes-block {
  margin: 18px 0;
  padding: 14px 18px;
  background: #fafbfc;
  border: 1px dashed var(--c-border);
  border-radius: 10px;
}
.snb-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.snb-head h3 {
  margin: 0; color: var(--c-primary-dark);
  font-size: 1rem; border: none;
}
.snb-empty {
  color: var(--c-muted); font-style: italic;
  padding: 14px; text-align: center;
  background: #fff; border-radius: 8px;
  border: 1px dashed var(--c-border);
}

.postit-board {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 6px;
  min-height: 60px;
}
.postit {
  position: relative;
  width: 200px; min-height: 140px;
  padding: 16px 14px 28px;
  font-family: "Comic Sans MS", "Marker Felt", "Bradley Hand", cursive, sans-serif;
  font-size: .92rem;
  line-height: 1.4;
  box-shadow: 2px 4px 10px rgba(0,0,0,.18);
  transition: transform .15s, box-shadow .15s;
}
.postit:hover {
  transform: rotate(0deg) scale(1.02) !important;
  box-shadow: 4px 8px 18px rgba(0,0,0,.25);
  z-index: 5;
}
.postit::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 60px; height: 16px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.08);
  border-radius: 2px;
}
.postit-jaune  { background: #fff5a5; color: #5a4a00; }
.postit-rose   { background: #ffd1dc; color: #6a1a1a; }
.postit-vert   { background: #c8eecc; color: #1f4f1f; }
.postit-bleu   { background: #cfe2ff; color: #1f4f86; }
.postit-orange { background: #ffd9a5; color: #6a4500; }

.postit-texte { white-space: pre-wrap; word-wrap: break-word; }
.postit-date {
  position: absolute;
  bottom: 8px; right: 12px;
  font-size: .72rem;
  opacity: .6;
  font-family: "Calibri", sans-serif;
}
.postit-del {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(0,0,0,.15);
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  font-family: sans-serif;
  color: rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .15s;
}
.postit:hover .postit-del { opacity: 1; }
.postit-del:hover { background: var(--c-danger); color: #fff; }

.postit-form {
  background: #fff5a5;
  border: 2px dashed #c4a800;
  border-radius: 6px;
  padding: 12px;
  width: 220px;
  min-height: 140px;
  display: flex; flex-direction: column; gap: 8px;
}
.postit-form textarea {
  flex: 1;
  background: transparent;
  border: none;
  font-family: "Comic Sans MS", "Marker Felt", cursive, sans-serif;
  font-size: .92rem;
  color: #5a4a00;
  resize: none;
  outline: none;
}
.snb-form-actions {
  display: flex; gap: 6px; justify-content: flex-end;
}

/* =========================================================
   V4.21 — Conversations style smartphone
   ========================================================= */
.phone-modal {
  background: #fff;
  padding: 0 !important;
  max-width: 480px !important;
  width: 100%;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 92vh;
}
.phone-modal:not(.phone-active) {
  padding: 24px 26px !important;
}

/* Liste des conversations */
.conv-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.conv-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s;
}
.conv-card:hover { border-color: var(--c-primary); transform: translateX(2px); }
.conv-card.conv-done { background: #f1fbf4; border-color: var(--c-accent); }
.conv-avatar {
  font-size: 2rem; line-height: 1;
  width: 48px; height: 48px;
  background: var(--c-surface-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.conv-titre { font-weight: 700; color: var(--c-primary-dark); font-size: 1rem; }
.conv-sub { font-size: .88rem; color: var(--c-text); margin: 2px 0; }
.conv-pill {
  display: inline-block;
  font-size: .76rem;
  background: var(--c-surface-2);
  color: var(--c-muted);
  padding: 2px 10px;
  border-radius: 10px;
}
.conv-arrow {
  font-size: 1.4rem; color: var(--c-muted); font-weight: 700;
}
.conv-card.conv-done .conv-arrow { color: var(--c-accent-dark); }

/* Effet téléphone */
.phone-frame {
  display: flex; flex-direction: column;
  background: #e6e9ec;
  height: 86vh;
  max-height: 86vh;
  width: 100%;
}
.phone-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px; align-items: center;
  background: var(--c-primary-dark);
  color: #fff;
  padding: 10px 12px;
}
.phone-back, .phone-close {
  background: rgba(255,255,255,.18);
  border: none; color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer; font-size: 1rem;
}
.phone-avatar {
  font-size: 1.6rem;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.phone-name { font-weight: 700; font-size: .98rem; }
.phone-status { font-size: .72rem; opacity: .85; }
.phone-status::before {
  content: "●"; color: #2ecc71; margin-right: 4px;
}

.phone-intro {
  background: #fffbe5;
  padding: 10px 14px;
  font-size: .85rem;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  font-style: italic;
}

.phone-conv {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  background: linear-gradient(180deg, #e6e9ec 0%, #ddd 100%);
  display: flex; flex-direction: column; gap: 8px;
}

.phone-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: .94rem;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
  animation: bubble-in .25s ease-out;
}
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.phone-bubble-pnj {
  background: #fff;
  align-self: flex-start;
  color: #1a2330;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.phone-bubble-me {
  background: linear-gradient(135deg, #2f6fb5 0%, #1f4f86 100%);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.phone-bubble.pnj-final {
  background: #d5ecdd;
  border: 1px solid var(--c-accent);
}
/* V4.23 : bulle de réaction positive (smiley + félicitations) */
.phone-bubble.phone-reaction {
  background: linear-gradient(135deg, #d5ecdd 0%, #f1fbf4 100%);
  border: 1px solid var(--c-accent);
  font-weight: 600;
  color: var(--c-accent-dark);
  font-size: .98rem;
  animation: reaction-pop .35s cubic-bezier(.2,.7,.3,1.3);
}
@keyframes reaction-pop {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  70% { transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.ps-stars {
  font-size: 2rem;
  letter-spacing: .15em;
  margin-bottom: 4px;
  animation: stars-pop .6s ease-out;
}
@keyframes stars-pop {
  0% { opacity: 0; transform: scale(.5); }
  100% { opacity: 1; transform: scale(1); }
}
.phone-bubble.phone-correction {
  background: #fff3e0;
  border-left: 3px solid var(--c-warning);
  font-style: italic;
  font-size: .88rem;
}

/* Animation "..." en train de saisir */
.phone-bubble.typing {
  display: flex; gap: 4px; align-items: center;
  padding: 12px 16px;
}
.phone-bubble.typing .dot {
  width: 8px; height: 8px;
  background: #aaa;
  border-radius: 50%;
  animation: dot-bounce 1.2s infinite ease-in-out;
}
.phone-bubble.typing .dot:nth-child(2) { animation-delay: .15s; }
.phone-bubble.typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Zone des choix de réponse */
.phone-input {
  background: #fff;
  border-top: 1px solid var(--c-border);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.phone-choice {
  background: #f7faff;
  border: 1.5px solid var(--c-primary);
  color: var(--c-primary-dark);
  border-radius: 18px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: .92rem;
  transition: all .15s;
}
.phone-choice:hover {
  background: var(--c-primary);
  color: #fff;
  transform: translateX(2px);
}

/* Score final */
.phone-score {
  text-align: center;
  padding: 16px;
}
.ps-pct {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--c-accent-dark);
  line-height: 1;
}
.ps-msg {
  font-size: .95rem;
  margin: 8px 0 14px;
  color: var(--c-text);
}
.ps-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 720px) {
  .phone-modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .phone-frame { height: calc(100vh - 50px); }
}

/* =========================================================
   V4.20 — Boutons flottants (FAB) : Glossaire, Notes, Flashcards, Pendu, Préférences
   ========================================================= */
.tools-fab {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 800;
  display: flex; flex-direction: column; gap: 8px;
}
.tools-fab-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--c-primary);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: transform .15s, box-shadow .15s;
}
.tools-fab-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* =========================================================
   V4.20 — Glossaire (panneau latéral)
   ========================================================= */
.glossaire-panel,
.notes-panel {
  position: fixed;
  top: 0; right: -420px; bottom: 0;
  width: 400px; max-width: 90vw;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0,0,0,.15);
  z-index: 950;
  display: flex; flex-direction: column;
  transition: right .3s ease-out;
}
.glossaire-panel.open,
.notes-panel.open { right: 0; }

.glo-header {
  background: var(--c-primary-dark);
  color: #fff;
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
}
.glo-header h3 { margin: 0; font-size: 1.1rem; }
.glo-close {
  background: rgba(255,255,255,.18);
  border: none; color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer; font-size: 1.4rem;
}
.glo-close:hover { background: rgba(255,255,255,.3); }

.glossaire-panel input[type="search"] {
  margin: 14px 18px 6px;
  padding: 10px 14px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-size: 1rem;
}
.glo-list {
  flex: 1; overflow-y: auto;
  padding: 8px 18px 24px;
}
.glo-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--c-border);
}
.glo-item b {
  display: block;
  color: var(--c-primary-dark);
  font-size: 1rem;
  margin-bottom: 3px;
}
.glo-item p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--c-text);
}

/* =========================================================
   V4.20 — Notes post-it (panneau latéral)
   ========================================================= */
.notes-add {
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border);
}
.notes-add textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  font-family: inherit;
  margin-bottom: 8px;
  resize: vertical;
}
.notes-list {
  flex: 1; overflow-y: auto;
  padding: 12px 18px 24px;
}
.notes-item {
  background: #fffbe5;
  border-left: 4px solid var(--c-warning);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin-bottom: 8px;
  position: relative;
}
.notes-meta {
  font-size: .76rem;
  color: var(--c-muted);
  margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.notes-del {
  background: rgba(178,58,72,.15);
  border: none; color: var(--c-danger);
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer; font-size: .85rem;
  font-weight: 700;
}
.notes-del:hover { background: var(--c-danger); color: #fff; }
.notes-texte { font-size: .92rem; line-height: 1.5; }

/* =========================================================
   V4.20 — Flashcards
   ========================================================= */
.flash-decks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.flash-deck {
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all .15s;
}
.flash-deck:hover {
  border-color: var(--c-primary);
  background: #f7faff;
  transform: translateY(-2px);
}
.fd-titre { font-weight: 700; color: var(--c-primary-dark); margin-bottom: 4px; }
.fd-meta { font-size: .82rem; color: var(--c-muted); }

.flash-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 14px;
}
.flash-progress {
  background: var(--c-surface-2);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: .85rem;
  color: var(--c-muted);
  font-weight: 600;
}

.flashcard {
  position: relative;
  height: 260px;
  perspective: 1000px;
  cursor: pointer;
  margin: 14px 0;
}
.fc-face {
  position: absolute; inset: 0;
  border-radius: 12px;
  padding: 24px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  backface-visibility: hidden;
  transition: transform .5s;
}
.fc-recto {
  background: linear-gradient(135deg, #f1f7ff 0%, #fff 100%);
  border: 2px solid var(--c-primary);
}
.fc-verso {
  background: linear-gradient(135deg, #f1fbf4 0%, #fff 100%);
  border: 2px solid var(--c-accent);
  transform: rotateY(180deg);
}
.flashcard.flipped .fc-recto { transform: rotateY(180deg); }
.flashcard.flipped .fc-verso { transform: rotateY(0deg); }
.fc-label {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  margin-bottom: 12px;
}
.fc-text {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
}
.fc-hint {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--c-muted);
  font-style: italic;
}
.flash-actions {
  display: flex; justify-content: center; gap: 10px;
}

/* =========================================================
   V4.20 — Pendu
   ========================================================= */
.pendu-indice {
  background: var(--c-surface-2);
  padding: 10px 14px;
  border-radius: 8px;
  margin: 14px 0;
  border-left: 3px solid var(--c-primary);
}
.pendu-mot {
  font-family: "Courier New", monospace;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
  margin: 18px 0;
  color: var(--c-primary-dark);
}
.pendu-stats {
  text-align: center;
  font-size: 1rem;
  margin: 10px 0;
}
.pendu-bonhomme {
  text-align: center;
  font-size: 1.4rem;
  margin: 10px 0;
  letter-spacing: .15em;
}
.pendu-mot-revele {
  text-align: center;
  font-size: 1.1rem;
  background: var(--c-surface-2);
  padding: 10px;
  border-radius: 8px;
  margin: 10px 0;
}
.pendu-clavier {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 4px;
  margin: 14px 0;
}
.pendu-key {
  padding: 8px 0;
  border: 1.5px solid var(--c-border);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  font-size: .9rem;
  font-family: inherit;
}
.pendu-key:hover:not(:disabled) { background: var(--c-primary); color: #fff; }
.pendu-key:disabled { cursor: not-allowed; }
.pendu-key.used.ok { background: var(--c-accent); color: #fff; border-color: var(--c-accent-dark); }
.pendu-key.used.ko { background: var(--c-danger); color: #fff; border-color: var(--c-danger); opacity: .6; }

/* =========================================================
   V4.20 — Préférences (couleur, contraste, avatar)
   ========================================================= */
.pref-group { margin: 14px 0; }
.pref-group > label {
  display: block;
  font-weight: 600;
  color: var(--c-primary-dark);
  margin-bottom: 8px;
  font-size: .92rem;
}
.pref-couleurs {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.pref-couleur {
  padding: 10px 18px;
  border-radius: 8px;
  border: 3px solid transparent;
  color: #fff;
  cursor: pointer;
  text-transform: capitalize;
  font-weight: 600;
  font-family: inherit;
}
.pref-couleur.active { border-color: #1a2330; box-shadow: 0 0 0 2px #fff inset; }

.pref-avatars {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.pref-avatar {
  width: 44px; height: 44px;
  border: 2px solid var(--c-border);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.5rem;
  font-family: inherit;
}
.pref-avatar.active { border-color: var(--c-primary); background: #e3efff; }

/* V4.24 — Éditeur d'avatar composable */
.ae-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  margin-top: 10px;
}
.ae-preview {
  background: linear-gradient(180deg, #f1f7ff 0%, #ffffff 100%);
  border: 2px solid var(--c-primary);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.ae-preview svg {
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
}
.ae-preview-actions {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.ae-controls {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}
.ae-group { margin-bottom: 14px; }
.ae-group > label {
  display: block;
  font-weight: 700;
  color: var(--c-primary-dark);
  font-size: .82rem;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ae-options {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ae-opt {
  border: 2px solid var(--c-border);
  cursor: pointer;
  font-family: inherit;
  font-size: .82rem;
  transition: all .12s;
}
.ae-opt:hover { border-color: var(--c-primary); }
.ae-opt.active {
  border-color: var(--c-primary-dark);
  box-shadow: 0 0 0 2px var(--c-primary) inset;
}
.ae-opt.ae-color {
  width: 32px; height: 32px;
  border-radius: 50%;
  padding: 0;
}
.ae-opt.ae-text {
  padding: 6px 12px;
  border-radius: 16px;
  background: #fff;
  color: var(--c-text);
}
.ae-opt.ae-text.active {
  background: var(--c-primary);
  color: #fff;
}

/* Aperçu avatar dans les préférences */
.pref-avatar-current {
  display: flex; align-items: center; gap: 14px;
}
.pac-svg svg, .pac-emoji {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid var(--c-primary);
  background: #fff;
}
.pac-emoji {
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
}
.pac-empty {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px dashed var(--c-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  font-size: .8rem;
  text-align: center;
  padding: 6px;
}

/* SVG avatar dans bandeau identité — taille gérée plus haut */
/* SVG avatar dans la fiche identité (aperçu live) */
.fiche-svg-avatar svg {
  width: 110px; height: 110px;
  border-radius: 8px;
  border: 1.5px solid var(--c-primary);
  background: #fff;
}
/* SVG avatar dans le splash de démarrage */
.splash-svg-avatar svg {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2.5px solid var(--c-primary);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

@media (max-width: 720px) {
  .ae-grid { grid-template-columns: 1fr; }
  .ae-preview { max-width: 200px; margin: 0 auto; }
}

/* Mode contraste élevé */
body.contraste-eleve {
  background: #fff !important;
  --c-text: #000;
  --c-muted: #333;
}
body.contraste-eleve .section-card,
body.contraste-eleve .nav-btn,
body.contraste-eleve .modal-content {
  border-width: 2px !important;
}
body.contraste-eleve .field input,
body.contraste-eleve .field textarea,
body.contraste-eleve .field select {
  border: 2px solid #000 !important;
  font-size: 1.05rem !important;
}
body.contraste-eleve label,
body.contraste-eleve h2,
body.contraste-eleve h3 { color: #000 !important; }

/* Responsive : panneaux pleine largeur sur petit écran */
@media (max-width: 720px) {
  .glossaire-panel, .notes-panel { width: 100vw; max-width: 100vw; }
  .flash-decks { grid-template-columns: 1fr; }
  .pendu-clavier { grid-template-columns: repeat(7, 1fr); }
  .tools-fab { bottom: 8px; right: 8px; }
  .tools-fab-btn { width: 42px; height: 42px; font-size: 1.2rem; }
}

/* ===== V4.14 — Mode démo : bandeau permanent + bouton splash ===== */
.demo-banner {
  position: sticky; top: 0; z-index: 900;
  background: linear-gradient(90deg, #c47a00 0%, #d28a00 100%);
  color: #fff;
  padding: 10px 18px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.db-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.db-tag {
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.4);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.db-text { font-size: .9rem; }
.db-text b { color: #fff; }
.demo-banner .btn { background: #fff; color: var(--c-warning); border-color: #fff; font-weight: 600; }
.demo-banner .btn:hover { background: #fff8e0; }

body.with-demo-banner { padding-top: 0; }

.splash-demo {
  background: #fff !important;
  color: var(--c-primary-dark) !important;
  border: 1.5px solid var(--c-primary) !important;
  font-weight: 600;
}
.splash-demo:hover { background: #e3efff !important; }
.splash-demo-hint {
  font-size: .8rem;
  color: var(--c-muted);
  text-align: center;
  margin-top: 8px;
  opacity: 0;
  animation: stat-in .5s ease-out forwards;
}

.home-demo-btn {
  margin-left: 8px;
  background: #fff;
  border: 1px dashed var(--c-primary);
  color: var(--c-primary-dark);
}

/* ===== V4.4 — Splash screen au démarrage ===== */
.splash {
  position: fixed; inset: 0;
  z-index: 2000;
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: splash-fade-in .4s ease-out;
}
.splash.splash-leaving {
  animation: splash-fade-out .5s ease-in forwards;
}
@keyframes splash-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes splash-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
.splash-content {
  background: #fff;
  border-radius: 18px;
  padding: 36px 44px;
  width: min(560px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: splash-rise .5s cubic-bezier(.2,.7,.3,1);
}
@keyframes splash-rise {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.splash-eyebrow {
  font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  margin-bottom: 18px;
}
.splash-identity {
  display: flex; gap: 18px; align-items: center;
  margin-bottom: 22px;
}
.splash-photo img,
.splash-photo-empty {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-primary);
}
.splash-photo-empty {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; font-weight: 700;
}
.splash-name {
  margin: 0;
  font-size: 1.6rem; font-weight: 700;
  color: var(--c-primary-dark);
  line-height: 1.1;
}
.splash-classe {
  color: var(--c-muted);
  font-size: .92rem;
  margin-top: 2px;
}
.splash-projet {
  margin-top: 6px;
  font-size: .9rem;
  color: var(--c-text);
  font-style: italic;
}

.splash-progress-line {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 10px 0 6px;
  font-size: .88rem; color: var(--c-muted);
}
.splash-progress-num b {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--c-primary-dark);
}
.splash-progress-num small { color: var(--c-muted); margin-left: 2px; }
.splash-progress-bar {
  height: 8px; background: var(--c-surface-2);
  border-radius: 6px; overflow: hidden;
  margin-bottom: 22px;
}
.splash-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  animation: splash-fill 1.2s ease-out forwards;
}
@keyframes splash-fill {
  to { width: var(--final-width, attr(style)); }
}
.splash-progress-fill { animation: none; transition: width 1s ease-out; }

.splash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.splash-stat {
  background: linear-gradient(135deg, #f1f7ff 0%, #f1fbf4 100%);
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
  opacity: 0;
  animation: stat-in .5s ease-out forwards;
}
@keyframes stat-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ss-num {
  font-size: 1.8rem; font-weight: 700;
  color: var(--c-primary-dark);
  line-height: 1;
}
.ss-num small {
  font-size: 1rem; color: var(--c-muted); font-weight: 500;
}
.ss-label {
  font-size: .72rem; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .04em;
  margin-top: 6px;
}

.splash-next {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-primary);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 22px;
  opacity: 0;
  animation: stat-in .5s ease-out forwards;
}
.sn-eyebrow {
  font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.sn-titre {
  font-weight: 600;
  color: var(--c-primary-dark);
}

.splash-enter {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  opacity: 0;
  animation: stat-in .5s ease-out forwards;
}

/* ===== V4.4 — Bandeau identité compact (1 ligne) ===== */
.identity-banner-compact {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.identity-banner-compact.incomplete {
  background: #fffbe5;
  border-color: var(--c-warning);
}
.ibc-left { display: flex; align-items: center; gap: 12px; }
.ibc-photo img,
.ibc-initials,
.ibc-svg svg {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-primary);
  background: #fff;
  display: block;
}
.ibc-initials {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
}
.ibc-name {
  font-weight: 700; font-size: 1.05rem;
  color: var(--c-primary-dark);
  line-height: 1.1;
}
.ibc-meta {
  font-size: .85rem; color: var(--c-muted);
  margin-top: 2px;
}

/* L'ancien bandeau identité (gros) est masqué */
.identity-banner { display: none; }

/* ===== V4.18 — Modale générique (validation enseignant, etc.) =====
   Cette classe a été perdue à un moment, ce qui empêchait l'ouverture
   de la modale de validation. RESTAURÉE. */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20,30,45,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
  padding: 16px;
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal .modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 24px 26px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  animation: modal-rise .25s ease-out;
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal .modal-close {
  position: absolute;
  top: 8px; right: 12px;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--c-muted);
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: background .15s;
}
.modal .modal-close:hover {
  background: var(--c-surface-2);
  color: var(--c-danger);
}

/* ===== V4.3 — Modale aperçu fiche (fullscreen) ===== */
.preview-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; flex-direction: column;
  background: rgba(20,30,45,.96);
}
.preview-modal-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  background: #1f4f86; color: #fff;
  font-weight: 600;
}
.preview-modal-bar > div { display: flex; gap: 8px; }
.preview-modal iframe {
  flex: 1;
  width: 100%; border: none;
  background: #fff;
}

/* ===== V4.3 — Bandeau identité en haut de la home ===== */
.identity-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.identity-banner.incomplete {
  border-color: var(--c-warning);
  background: #fffbe5;
}
.identity-photo img,
.identity-photo-empty {
  width: 78px; height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--c-primary);
}
.identity-photo-empty {
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted);
  border-style: dashed;
  font-size: .75rem;
}
.identity-eyebrow {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
}
.identity-banner.incomplete .identity-eyebrow { color: var(--c-warning); }
.identity-name {
  font-size: 1.6rem; font-weight: 700;
  color: var(--c-primary-dark);
  line-height: 1.1;
  margin: 4px 0 2px;
}
.identity-meta { color: var(--c-muted); font-size: .95rem; }
.identity-projet { margin-top: 6px; font-size: .92rem; }

/* Progression globale en barre simple */
.home-progress-section {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.home-progress-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.hp-label { font-weight: 600; color: var(--c-primary-dark); }
.hp-stats { color: var(--c-muted); font-size: .9rem; }
.home-progress-bar {
  height: 12px; background: var(--c-surface-2);
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--c-border);
}
.home-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width .4s;
}

/* Prochaine étape + projet en 2 colonnes */
.home-next-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.next-card, .projet-card {
  border-radius: 14px;
  padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start;
  min-height: 170px;
}
.next-card {
  background: linear-gradient(135deg, #f1f7ff 0%, #ffffff 100%);
  border: 2px solid var(--c-primary);
}
.projet-card {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff;
  border: 2px solid transparent;
  /* V4.7 : forme arrondie distinctive pour "Mon projet" */
  border-radius: 80px 14px 14px 80px;
  position: relative;
  padding-left: 110px;
}
.projet-card::before {
  content: "";
  position: absolute;
  top: 50%; left: 22px;
  width: 76px; height: 76px;
  background: rgba(255,255,255,.18);
  border: 3px solid rgba(255,255,255,.5);
  border-radius: 50%;
  transform: translateY(-50%);
}
.projet-card::after {
  content: "🍽";
  position: absolute;
  top: 50%; left: 22px;
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem;
  transform: translateY(-50%);
}
.next-eyebrow {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 700;
}
.projet-card .next-eyebrow { color: rgba(255,255,255,.85); }
.next-titre {
  font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; gap: 10px;
  color: var(--c-primary-dark);
  line-height: 1.2;
}
.projet-card .next-titre { color: #fff; }
.next-emoji { font-size: 1.7rem; }

@media (max-width: 720px) {
  .home-next-section { grid-template-columns: 1fr; }
  .identity-banner { grid-template-columns: auto 1fr; }
  .identity-actions { grid-column: 1 / -1; }
}

/* Modules pédagogiques (J1-J4) */
.home-section-title {
  color: var(--c-primary-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 18px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-primary);
}
.home-modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.mod-card {
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  padding: 18px 16px;
  cursor: pointer;
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center;
  font-family: inherit;
  transition: all .15s;
}
.mod-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-primary);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.mod-done    { background: #f1fbf4; border-color: var(--c-accent); }
.mod-progress{ background: #fffbe5; border-color: var(--c-warning); }
.mod-emoji  { font-size: 2.4rem; }
.mod-titre  { font-weight: 700; color: var(--c-primary-dark); font-size: .95rem; line-height: 1.3; }
.mod-quiz   { font-size: .82rem; color: var(--c-muted); }
.mod-card-note {
  background: var(--c-primary); color: #fff;
  font-size: .76rem; font-weight: 600;
  padding: 2px 10px; border-radius: 8px;
  margin-top: 2px;
}

/* Parcours compact */
.home-compact-section { margin-top: 8px; }
.compact-group { margin-bottom: 14px; }
.compact-group-title {
  font-size: .85rem; color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px; font-weight: 600;
}
.compact-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  margin-bottom: 4px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  font-size: .92rem;
  transition: background .15s;
}
.compact-row:hover { background: var(--c-surface-2); border-color: var(--c-primary); }
.compact-emoji { font-size: 1.2rem; }
.compact-label { color: var(--c-text); font-weight: 500; }
.compact-statut {
  font-size: .76rem; font-weight: 600;
  padding: 2px 10px; border-radius: 8px;
  background: var(--c-surface-2); color: var(--c-muted);
}
.compact-done .compact-statut { background: #d5ecdd; color: var(--c-accent-dark); }
.compact-progress .compact-statut { background: #fff0cc; color: #8a5a00; }

/* Cacher l'ancienne grille de cartes (si encore utilisée ailleurs) */
.parcours-list, .parcours-group, .parcours-grid { display: none; }

/* ===== V4.2 — Barre retour ===== */
.back-bar {
  display: flex; justify-content: space-between; gap: 8px;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px dashed var(--c-border);
}
.btn-back, .btn-back-projet {
  font-size: .9rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
}
.btn-back:hover { background: #e3efff; border-color: var(--c-primary); color: var(--c-primary-dark); }
.btn-back-projet { background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%); color: #fff; border-color: transparent; font-weight: 600; }
.btn-back-projet:hover { opacity: .92; }

/* ===== V4.2 — Checklist (cases à cocher avec ajout libre) ===== */
.checklist-field { background: #fafbfc; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--c-border); }
.checklist-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0;
}
.chk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 20px;
  cursor: pointer;
  font-size: .9rem;
  font-family: inherit;
  position: relative;
  transition: all .15s;
}
.chk-chip:hover { border-color: var(--c-primary); }
.chk-chip.checked {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary-dark);
  font-weight: 600;
}
.chk-mark { font-weight: 700; min-width: 12px; }
.chk-chip.custom { font-style: italic; }
.chk-chip.custom .chk-del {
  background: rgba(255,255,255,.3);
  border-radius: 50%; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; cursor: pointer; font-size: .85rem;
  font-style: normal;
}
.chk-chip:not(.checked).custom .chk-del { background: var(--c-surface-2); color: var(--c-muted); }
.chk-chip.custom .chk-del:hover { background: var(--c-danger); color: #fff; }

.checklist-add {
  display: flex; gap: 6px;
  margin-top: 8px;
}
.checklist-add input {
  flex: 1; padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
}

/* ===== V4.2 — Photo de profil ===== */
.photo-profil-block {
  display: flex; gap: 14px; align-items: center;
  padding: 14px;
  background: #fafbfc;
  border: 1px solid var(--c-border);
  border-radius: 10px;
}
.photo-profil-preview {
  width: 100px; height: 130px;
  object-fit: cover;
  border: 1.5px solid var(--c-primary);
  border-radius: 6px;
}
.photo-profil-empty {
  width: 100px; height: 130px;
  border: 1.5px dashed var(--c-border);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-muted); font-size: .8rem; text-align: center;
}

/* ===== V5 — Avatar GROS et bien visible dans le header ===== */
.app-header-left { display: flex; align-items: center; gap: 14px; }
.app-header-titles { display: flex; flex-direction: column; }
.header-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid #fbbf24; /* doré quand avatar créé */
  background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  position: relative;
  padding: 0;
  flex-shrink: 0;
  font-family: inherit;
}
.header-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.header-avatar.no-avatar {
  border-style: dashed;
  border-color: #94a3b8;
  background: #f8fafc;
}
.header-avatar.no-avatar::after {
  content: "Crée ton avatar";
  position: absolute;
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #475569;
  white-space: nowrap;
  font-weight: 600;
}
.header-avatar-visu {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--c-surface-2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.header-avatar-visu svg {
  width: 54px; height: 54px;
  background: #fff;
}
.header-avatar-visu img {
  width: 54px; height: 54px;
  object-fit: cover;
}
.hav-emoji { font-size: 1.4rem; line-height: 1; }
.hav-initials {
  font-weight: 700; font-size: .85rem;
  color: #fff;
  background: linear-gradient(135deg, #1f4f86, #2e8b57);
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.header-avatar-name {
  display: none; /* V5 : avatar circulaire seul, le nom n'est plus inline */
  font-weight: 600;
  color: var(--c-primary-dark);
  font-size: .9rem;
}

/* ===== V5 — Titres de sections dans la sidebar ===== */
.nav-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #64748b;
  padding: 12px 12px 4px;
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
}
.nav-section-title:first-of-type {
  border-top: none;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .header-avatar-name { display: none; }
  .header-avatar { padding: 4px; }
}

/* ===== V4 — Bouton "Mon projet" persistant dans le header ===== */
.btn-mon-projet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(31,79,134,.25);
  transition: transform .15s, box-shadow .15s;
}
.btn-mon-projet:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31,79,134,.35);
}
.btn-mon-projet:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.btn-mon-projet-icon { font-size: 1.2rem; }

/* ===== V4.1 — Page d'accueil "Mon parcours" (refonte cartes) ===== */
.home-header-eyebrow {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 4px;
}
.parcours-group {
  margin-top: 22px;
}
.parcours-group-title {
  color: var(--c-primary-dark);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-primary);
}
.parcours-group-title span {
  color: var(--c-muted);
  font-weight: 400;
  font-size: .82rem;
  margin-left: 6px;
}
.parcours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.parcours-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 16px 14px 14px;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  font-family: inherit;
  min-height: 130px;
}
.parcours-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-primary);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.parcours-card.parcours-done {
  background: #f1fbf4;
  border-color: var(--c-accent);
}
.parcours-card.parcours-progress {
  background: #fffbe5;
  border-color: var(--c-warning);
}
.card-statut-pill {
  position: absolute; top: 8px; left: 8px;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--c-surface-2);
  color: var(--c-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.parcours-card.parcours-done .card-statut-pill { background: var(--c-accent); color: #fff; }
.parcours-card.parcours-progress .card-statut-pill { background: var(--c-warning); color: #fff; }

.card-emoji {
  font-size: 2.4rem;
  line-height: 1.1;
  margin-top: 8px;
}
.card-titre {
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}
.card-pct {
  font-size: .76rem;
  color: var(--c-warning);
  font-weight: 600;
}
.card-note {
  font-size: .76rem;
  color: var(--c-primary-dark);
  background: #cfe2ff;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-block;
  font-weight: 600;
}

/* On masque l'ancienne liste à plat */
.parcours-list { display: none; }

/* ===== V4 — Page d'accueil "Mon parcours" ===== */
.home-view {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 26px 30px;
  box-shadow: var(--shadow);
}
.home-header h2 {
  color: var(--c-primary-dark);
  font-size: 1.6rem; margin-bottom: 4px;
}
.home-meta { color: var(--c-muted); margin-bottom: 14px; font-size: .95rem; }
.home-progress {
  display: flex; align-items: center; gap: 12px;
  margin: 6px 0 18px;
}
.home-progress-bar {
  flex: 1; height: 14px;
  background: var(--c-surface-2);
  border-radius: 8px; overflow: hidden;
  border: 1px solid var(--c-border);
}
.home-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  transition: width .4s;
}
.home-progress span { font-size: .9rem; color: var(--c-muted); white-space: nowrap; }

.home-continuer {
  margin: 18px 0 24px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f1f7ff 0%, #f1fbf4 100%);
  border: 1px solid var(--c-primary);
  border-radius: 12px;
  text-align: center;
}
.btn-lg { padding: 14px 24px; font-size: 1.1rem; font-weight: 600; }

.parcours-list {
  list-style: none; padding: 0; margin: 0;
}
.parcours-item {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}
.parcours-item:hover {
  border-color: var(--c-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.parcours-item.parcours-done {
  background: #f1fbf4;
  border-color: var(--c-accent);
}
.parcours-item.parcours-progress {
  background: #fffbe5;
  border-color: var(--c-warning);
}
.parcours-emoji { font-size: 1.8rem; }
.parcours-body { flex: 1; min-width: 0; }
.parcours-titre { font-weight: 600; color: var(--c-text); }
.parcours-sub { font-size: .88rem; color: var(--c-muted); margin-top: 2px; }
.parcours-note {
  display: inline-block; margin-left: 10px;
  background: var(--c-primary); color: #fff;
  padding: 1px 8px; border-radius: 4px;
  font-size: .78rem; font-weight: 600;
}
.parcours-annee {
  display: inline-block; margin-left: 8px;
  background: var(--c-surface-2); color: var(--c-muted);
  padding: 1px 8px; border-radius: 4px;
  font-size: .72rem; font-weight: 600;
}
.parcours-btn { white-space: nowrap; }

/* ===== V4 — QCM intercalés après un cours ===== */
.qcm-after-cours {
  margin-top: 4px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 8px 8px 0;
  margin-bottom: 14px;
}
.qcm-after-label {
  font-size: .85rem; font-weight: 600;
  color: var(--c-primary-dark);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.link-revoir {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--c-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 600;
}
.link-revoir:hover { background: var(--c-primary-dark); }

.retry-line { margin-top: 6px; }

/* ===== V3.2 — Image inline dans un cours ===== */
.cours-figure {
  margin: 12px 0 4px 0;
  text-align: center;
}
.cours-figure img {
  max-width: 100%;
  max-height: 420px;
  border-radius: 10px;
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  cursor: zoom-in;
  transition: transform .2s;
}
.cours-figure img:hover { transform: scale(1.02); }
.cours-figure figcaption {
  font-size: .82rem;
  color: var(--c-muted);
  font-style: italic;
  margin-top: 6px;
}

/* ===== V3.2 — Infographie iframe ===== */
.infographie-block {
  margin: 18px 0;
  background: #fff;
  border: 2px solid var(--c-primary);
  border-radius: 12px;
  padding: 14px 18px;
}
.infographie-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.infographie-head h3 {
  border: none; padding: 0; margin: 0;
  color: var(--c-primary-dark); font-size: 1.05rem;
}

/* ===== V3.2 — Bibliothèque de ressources ===== */
.ressources-block {
  margin: 22px 0;
  padding: 18px 20px;
  background: linear-gradient(180deg, #fff8e0 0%, #fff 100%);
  border: 2px solid var(--c-warning);
  border-radius: 12px;
}
.ressources-block h3 {
  color: var(--c-warning);
  border-bottom: 2px solid var(--c-warning) !important;
}
.ressources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.ressource-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff;
  border: 1.5px solid var(--c-border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: all .2s;
}
.ressource-card:hover {
  border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.ressource-card.lue {
  background: #f1fbf4;
  border-color: var(--c-accent);
}
.ressource-link {
  display: flex; gap: 12px; align-items: flex-start;
  text-decoration: none; color: inherit;
}
.ressource-icon { font-size: 2rem; line-height: 1; }
.ressource-meta { flex: 1; min-width: 0; }
.ressource-type {
  font-size: .68rem; font-weight: 700;
  color: var(--c-muted); letter-spacing: .08em;
}
.ressource-titre {
  font-weight: 600; font-size: .95rem;
  color: var(--c-primary-dark);
  margin: 2px 0;
  line-height: 1.3;
}
.ressource-desc {
  font-size: .82rem; color: var(--c-muted);
  line-height: 1.4;
}
.ressource-lue-btn {
  align-self: flex-start;
  font-size: .8rem;
}
.ressources-counter {
  margin-top: 10px;
  text-align: right;
  font-size: .9rem;
  color: var(--c-muted);
}

/* V4.9 — cartes ressources élargies (vidéo / lien externe) */
.ressource-card-large {
  grid-column: span 2;
}
/* V4.31 : ressources perso de l'enseignant — fond légèrement différent */
.ressource-card.ressource-perso {
  background: #fffbe5;
  border-color: var(--c-warning);
  position: relative;
}
.ressource-card.ressource-perso::before {
  content: "Du prof";
  position: absolute;
  top: 6px; right: 6px;
  background: var(--c-warning);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Modale article (texte HTML inline) */
.article-modal-content {
  max-width: 720px !important;
  width: 95%;
}
.article-eyebrow {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-warning);
  font-weight: 700;
}
.article-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text);
  background: #fff;
  padding: 18px 22px;
  border-radius: 10px;
  border-left: 4px solid var(--c-primary);
  max-height: 60vh;
  overflow-y: auto;
}
.article-body h3 {
  color: var(--c-primary-dark);
  margin-top: 0;
  font-size: 1.2rem;
}
.article-body h4 {
  color: var(--c-primary-dark);
  margin-top: 14px;
  font-size: 1.05rem;
}
.article-body ul, .article-body ol { padding-left: 22px; margin: 10px 0; }
.article-body li { margin: 4px 0; }
.article-body p { margin: 8px 0; }
.article-body i { color: var(--c-muted); font-size: .92rem; }
.ressource-embed {
  width: 100%;
  height: 220px;
  border: none;
  border-radius: 8px;
  margin-top: 8px;
  background: #000;
}
@media (max-width: 720px) {
  .ressource-card-large { grid-column: span 1; }
  .ressource-embed { height: 180px; }
}

/* ===== V3 — Bannière d'accueil ===== */
.welcome-banner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding: 18px 24px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #2f6fb5 0%, #2e8b57 100%);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(47,111,181,.25);
}
.wb-title { font-size: 1.3rem; font-weight: 700; }
.wb-subtitle { font-size: .95rem; opacity: .95; margin-top: 4px; }
.wb-tip {
  background: rgba(255,255,255,.18);
  padding: 8px 14px; border-radius: 8px;
  font-size: .9rem;
}

/* ===== V3 — Exercice classification ===== */
.classif-pile {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px;
  background: #fff; border: 2px dashed var(--c-primary);
  border-radius: 10px; min-height: 60px;
  margin: 12px 0;
}
.classif-chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px;
  background: #fff;
  border: 2px solid var(--c-border);
  border-radius: 20px;
  font-size: .95rem;
  cursor: pointer;
  transition: all .15s;
}
.classif-chip:hover { border-color: var(--c-primary); background: #e3efff; }
.classif-chip.selected {
  background: var(--c-primary); color: #fff;
  border-color: var(--c-primary-dark);
  box-shadow: 0 2px 8px rgba(47,111,181,.4);
}
.classif-chip.placed.ok { background: #d5ecdd; border-color: var(--c-accent); }
.classif-chip.placed.ko { background: #fadbdf; border-color: var(--c-danger); }

.classif-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin: 14px 0;
}
.classif-col {
  border: 2px solid var(--c-border);
  border-radius: 10px;
  padding: 12px;
  min-height: 140px;
  cursor: pointer;
  transition: transform .15s;
}
.classif-col:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.classif-col h4 { color: var(--c-primary-dark); margin: 0 0 10px; font-size: 1rem; }
.classif-box {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 80px;
}

/* ===== V3 — Module pédagogique (cours + QCM + exercice) ===== */
.pedago-module {
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
  border: 2px solid #cfe2ff;
  border-radius: 12px;
}
.pedago-module h3 {
  color: var(--c-primary-dark);
  font-size: 1.1rem;
  margin-top: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--c-primary);
}

/* Cours */
.cours-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.cours-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 6px;
}
.cours-head h4 { color: var(--c-primary-dark); margin: 0; font-size: 1.05rem; }
.cours-text { margin: 0; line-height: 1.7; font-size: 1rem; color: #333; }

.btn-audio {
  white-space: nowrap;
  border: 1px solid var(--c-primary);
  background: #e3efff; color: var(--c-primary-dark);
  font-weight: 600;
}
.btn-audio.playing {
  background: var(--c-warning); color: #fff; border-color: var(--c-warning);
}

.btn-sm { padding: 6px 10px; font-size: .85rem; }

/* QCM */
.module-qcm { margin-top: 18px; }
.qcm-question {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 10px 0;
}
.q-label { font-size: 1rem; margin-bottom: 10px; }
.qcm-options {
  display: flex; flex-direction: column; gap: 6px;
}
.qcm-opt {
  text-align: left;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: .98rem;
  transition: all .15s;
}
.qcm-opt:hover:not(:disabled) { border-color: var(--c-primary); background: #f0f7ff; }
.qcm-opt.selected { font-weight: 600; }
.qcm-opt.correct { background: #d5ecdd; border-color: var(--c-accent); color: var(--c-accent-dark); }
.qcm-opt.wrong   { background: #fadbdf; border-color: var(--c-danger);  color: #8a2231; }
.qcm-opt:disabled { cursor: default; }

.qcm-feedback {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .92rem;
}
.qcm-feedback.ok { background: #d5ecdd; color: var(--c-accent-dark); }
.qcm-feedback.ko { background: #fff3e0; color: #6a4500; }

.qcm-score-box {
  margin-top: 14px;
  padding: 14px 18px;
  background: #fff;
  border: 2px solid var(--c-primary);
  border-radius: 10px;
  font-size: 1.05rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
}

/* Exercice ordering */
.module-exo { margin-top: 18px; }
.exo-ordering {
  list-style: none; padding: 0; margin: 10px 0;
  counter-reset: none;
}
.exo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 2px solid var(--c-border);
  border-radius: 8px;
  margin-bottom: 6px;
  transition: all .2s;
}
.exo-item.item-ok { border-color: var(--c-accent); background: #d5ecdd; }
.exo-item.item-ko { border-color: var(--c-danger); background: #fadbdf; }
.exo-num { font-weight: 700; color: var(--c-primary-dark); min-width: 24px; }
.exo-label { flex: 1; font-size: .98rem; }
.exo-btns { display: flex; gap: 4px; }

.exo-actions { margin-top: 10px; }
.exo-feedback {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 1rem;
}
.exo-feedback.ok { background: #d5ecdd; color: var(--c-accent-dark); border: 1px solid var(--c-accent); }
.exo-feedback.ko { background: #fff3e0; color: #6a4500; border: 1px solid var(--c-warning); }

/* ===== Exercice "image_yesno" — étiquettes conforme ou pas ===== */
.iyn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; margin-top: 12px; }
.iyn-card { background: #fff; border: 2px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.iyn-card.status-ok { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(22,163,74,.1); }
.iyn-card.status-ko { border-color: #dc2626; box-shadow: 0 0 0 2px rgba(220,38,38,.1); }

/* L'étiquette elle-même : visuel "packaging" */
.iyn-label { background: linear-gradient(180deg, #fef9e7 0%, #fff7e0 100%); padding: 14px; border-bottom: 1px dashed #d97706; }
.iyn-label-photo { display: flex; justify-content: center; margin-bottom: 10px; }
.iyn-label-photo img { width: 100%; max-width: 280px; height: 160px; object-fit: cover; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.iyn-label-body { font-size: .9rem; line-height: 1.45; color: #1f2937; }
.iyn-label-title { font-size: 1.15rem; font-weight: 700; color: #78350f; margin-bottom: 2px; }
.iyn-label-slogan { font-style: italic; font-size: .85rem; color: #92400e; margin-bottom: 8px; }
.iyn-row { padding: 3px 0; border-bottom: 1px dotted #fde68a; }
.iyn-row:last-child { border-bottom: none; }
.iyn-key { display: inline-block; min-width: 100px; font-weight: 600; color: #475569; }

/* Surlignage de la zone défaillante quand 2e essai loupé */
.iyn-card.highlight-allergenes .iyn-allergenes,
.iyn-card.highlight-ingredients .iyn-ingredients,
.iyn-card.highlight-date .iyn-date,
.iyn-card.highlight-lot .iyn-lot {
  background: #fee2e2;
  border-left: 3px solid #dc2626;
  padding-left: 8px;
  animation: iyn-flash 1s ease-out 2;
}
@keyframes iyn-flash { 0%, 100% { background: #fee2e2; } 50% { background: #fecaca; } }

/* Question oui/non + boutons */
.iyn-ask { padding: 12px 14px; background: #f8fafc; }
.iyn-q { margin-bottom: 8px; font-size: .95rem; }
.iyn-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.iyn-btn-yes, .iyn-btn-no { flex: 1; padding: 10px 12px; font-weight: 600; }
.iyn-btn-yes { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.iyn-btn-yes:hover:not(:disabled) { background: #a7f3d0; }
.iyn-btn-no { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.iyn-btn-no:hover:not(:disabled) { background: #fecaca; }
.iyn-btn-yes:disabled, .iyn-btn-no:disabled { opacity: .55; cursor: not-allowed; }

/* Feedbacks de la carte */
.iyn-fb { padding: 10px 14px; font-size: .9rem; line-height: 1.5; }
.iyn-fb-ok   { background: #ecfdf5; color: #065f46; border-top: 1px solid #6ee7b7; }
.iyn-fb-ko   { background: #fef2f2; color: #991b1b; border-top: 1px solid #fca5a5; }
.iyn-fb-hint { background: #fffbeb; color: #78350f; border-top: 1px solid #fcd34d; }

/* Indice pédagogique sous le feedback d'ordering */
.exo-hint { margin-top: 10px; padding: 10px 12px; background: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 6px; font-size: .95rem; line-height: 1.5; color: #78350f; }
.exo-hint-rule { display: block; margin-top: 6px; font-size: .9rem; opacity: .9; }

/* Animation visuelle quand un item vient d'être déplacé */
@keyframes exo-pulse-up   { 0% { transform: translateY(14px); background: #fef3c7; } 60% { background: #fde68a; } 100% { transform: translateY(0); background: inherit; } }
@keyframes exo-pulse-down { 0% { transform: translateY(-14px); background: #fef3c7; } 60% { background: #fde68a; } 100% { transform: translateY(0); background: inherit; } }
.exo-item.just-moved { box-shadow: 0 0 0 2px #f59e0b; }
.exo-item.just-moved.moved-up   { animation: exo-pulse-up   .55s ease-out; }
.exo-item.just-moved.moved-down { animation: exo-pulse-down .55s ease-out; }
/* Flèches : pression visible et focus marqué */
.exo-item .btn-up, .exo-item .btn-down { transition: transform .12s ease, background .12s ease; }
.exo-item .btn-up:hover, .exo-item .btn-down:hover { background: #fef3c7; }
.exo-item .btn-up:active, .exo-item .btn-down:active { transform: scale(.85); background: #f59e0b; color: #fff; }

.module-actions {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px dashed var(--c-primary);
  text-align: center;
}
.module-actions .btn { padding: 12px 20px; font-size: 1rem; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .app-body { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; }
  .main { padding: 18px; }
}

/* =====================================================================
   V4.40 — Composeur de repas guidé
   V4.85 — Couleurs thématiques par composante (entrée, plat, etc.)
   ===================================================================== */
.composante-repas {
  border: 2px solid #e3e7ee;
  border-left: 8px solid #94a3b8;   /* couleur d'accent par composante */
  border-radius: 14px;
  margin: 18px 0;
  background: #fbfcfe;
  padding: 0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.2s, transform 0.15s;
}
.composante-repas:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.composante-repas[open] { box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10); }

/* Couleurs spécifiques par composante */
.composante-repas[data-composante="entree"]  { border-left-color: #16a34a; }  /* vert */
.composante-repas[data-composante="plat"]    { border-left-color: #ea580c; }  /* orange */
.composante-repas[data-composante="laitage"] { border-left-color: #ca8a04; }  /* doré */
.composante-repas[data-composante="dessert"] { border-left-color: #db2777; }  /* rose */
.composante-repas[data-composante="boisson"] { border-left-color: #2563eb; }  /* bleu */

.composante-summary {
  cursor: pointer;
  padding: 16px 20px;
  font-size: 1.05rem;
  list-style: none;
  border-radius: 12px 12px 0 0;
  user-select: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: #f8fafc;
}
.composante-summary::-webkit-details-marker { display: none; }
.composante-summary:hover { background: #eef2f6; }

/* Header coloré par composante quand ouvert */
.composante-repas[open] > .composante-summary {
  border-bottom: 2px solid #e3e7ee;
}
.composante-repas[data-composante="entree"][open]  > .composante-summary { background: #f0fdf4; border-bottom-color: #bbf7d0; }
.composante-repas[data-composante="plat"][open]    > .composante-summary { background: #fff7ed; border-bottom-color: #fed7aa; }
.composante-repas[data-composante="laitage"][open] > .composante-summary { background: #fefce8; border-bottom-color: #fef08a; }
.composante-repas[data-composante="dessert"][open] > .composante-summary { background: #fdf2f8; border-bottom-color: #fbcfe8; }
.composante-repas[data-composante="boisson"][open] > .composante-summary { background: #eff6ff; border-bottom-color: #bfdbfe; }

.cr-compo-icon {
  font-size: 1.6rem;
  margin-right: 8px;
  line-height: 1;
}
.cr-compo-titre {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.composante-repas[data-composante="entree"]  .cr-compo-titre { color: #166534; }
.composante-repas[data-composante="plat"]    .cr-compo-titre { color: #9a3412; }
.composante-repas[data-composante="laitage"] .cr-compo-titre { color: #854d0e; }
.composante-repas[data-composante="dessert"] .cr-compo-titre { color: #9d174d; }
.composante-repas[data-composante="boisson"] .cr-compo-titre { color: #1e40af; }

.cr-dot { font-size: 1.1em; margin-right: 4px; }
.cr-dot.ok { color: #2a8b3a; }
.cr-dot.ko { color: #b8b8b8; }
.cr-fac { color: #888; font-weight: normal; font-size: 0.9em; }
.cr-count { color: #666; font-size: 0.85em; margin-left: auto; padding-left: 8px; }
.composante-body { padding: 14px 16px 18px; }
.cr-block { margin: 12px 0; }
.cr-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #2a3340;
}
.cr-nom {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d3d8e0;
  border-radius: 6px;
  font-size: 0.98rem;
}
.cr-banque {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  padding: 10px;
}
.cr-banque-groupe {
  border-bottom: 1px dashed #e3e7ee;
  padding: 6px 0;
}
.cr-banque-groupe:last-of-type { border-bottom: none; }
.cr-banque-groupe > summary {
  cursor: pointer;
  font-weight: 600;
  color: #2a3340;
  padding: 4px 0;
}
.cr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 4px 14px;
}
.cr-chip {
  background: #eaf3fb;
  border: 1px solid #c5dcf0;
  color: #1f5c8b;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
}
.cr-chip:hover { background: #d2e7f7; transform: translateY(-1px); }
.cr-banque-libre {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e3e7ee;
  flex-wrap: wrap;
}
.cr-libre-input { flex: 1; min-width: 140px; padding: 6px 10px; border: 1px solid #d3d8e0; border-radius: 6px; }
.cr-libre-groupe { padding: 6px; border: 1px solid #d3d8e0; border-radius: 6px; }
.cr-liste {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  padding: 8px;
  min-height: 50px;
}
.cr-empty { color: #888; font-style: italic; margin: 8px 4px; }
.cr-ing-row {
  display: grid;
  grid-template-columns: 130px 1fr 160px 32px;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px solid #f0f3f7;
}
.cr-ing-row:last-child { border-bottom: none; }
.cr-ing-grp {
  background: #f0f4fa;
  color: #4a5566;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
  text-align: center;
}
.cr-ing-nom { font-weight: 500; }
.cr-ing-qte { padding: 5px 8px; border: 1px solid #d3d8e0; border-radius: 5px; font-size: 0.9rem; }
.cr-ing-del {
  background: #fdecec;
  color: #b73a3a;
  border: 1px solid #f0b7b7;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 0.85rem;
}
.cr-ing-del:hover { background: #f8d4d4; }
.cr-justifs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 12px;
}
.cr-justif {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.92rem;
}
.cr-justif:hover { background: #f0f4fa; }
.cr-justif-libre {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1px solid #d3d8e0;
  border-radius: 6px;
  font-family: inherit;
}
@media (max-width: 700px) {
  .cr-ing-row {
    grid-template-columns: 1fr 32px;
    grid-template-areas: "grp del" "nom nom" "qte qte";
  }
  .cr-ing-grp { grid-area: grp; justify-self: start; }
  .cr-ing-del { grid-area: del; }
  .cr-ing-nom { grid-area: nom; }
  .cr-ing-qte { grid-area: qte; }
}

/* Récap repas */
.recap-repas {
  background: linear-gradient(135deg, #e8f4ec 0%, #d8ebe1 100%);
  border: 2px solid #b6dac4;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0 22px;
}
.recap-repas h3 { margin: 0 0 6px; color: #1f5e36; }
.recap-hint { margin: 0 0 10px; color: #4a6655; font-size: 0.92rem; }
.recap-bar {
  display: flex;
  height: 26px;
  border-radius: 13px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #b6dac4;
  margin-bottom: 10px;
}
.recap-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  color: #fff;
  font-weight: 600;
  min-width: 60px;
  transition: width 0.4s;
}
.recap-seg.seg-leg { background: #4a9d5e; }
.recap-seg.seg-fec { background: #d8a23a; }
.recap-seg.seg-pro { background: #c25a5a; }
.recap-seg.ko { opacity: 0.5; }
.recap-checks { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
.recap-checks li { font-size: 0.92rem; }
.recap-checks li.ok { color: #1f5e36; }
.recap-checks li.ko { color: #886f00; }
.recap-groupes { margin: 8px 0 0; font-size: 0.9rem; }
.recap-grp-tag {
  display: inline-block;
  background: #fff;
  border: 1px solid #b6dac4;
  color: #1f5e36;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.82rem;
  margin: 2px 2px 0 0;
}

/* =====================================================================
   V4.41 — Exercices interactifs (drag & drop) + mots-clés
   ===================================================================== */
.exos-dnd-block {
  background: linear-gradient(135deg, #fff7e8 0%, #ffeed1 100%);
  border: 2px solid #f0c98c;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 20px 0;
}
.exos-dnd-block > h3 { margin: 0 0 6px; color: #8a5500; }
.exos-dnd-block > .hint { margin: 0 0 14px; color: #6d4400; font-size: 0.92rem; }

.exo-dnd {
  background: #fff;
  border: 1px solid #e5d5b3;
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
}
.exo-dnd-sum {
  cursor: pointer;
  padding: 12px 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #fffaf0;
  user-select: none;
}
.exo-dnd-sum::-webkit-details-marker { display: none; }
.exo-dnd-sum:hover { background: #fff3df; }
.exo-dnd-titre { font-weight: 600; color: #2a3340; }
.exo-dnd-badge {
  font-size: 0.82rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.exo-dnd-badge.ok      { background: #d8f1de; color: #1f5e36; }
.exo-dnd-badge.encore  { background: #fff3cd; color: #856404; }
.exo-dnd-badge.en-cours{ background: #cfe5fb; color: #1f5c8b; }
.exo-dnd-badge.new     { background: #eee; color: #555; }

.exo-dnd-body {
  padding: 14px 16px 18px;
  border-top: 1px solid #f0e3c4;
}
.exo-dnd-intro {
  margin: 0 0 14px;
  font-size: 0.96rem;
  color: #4a3a14;
  background: #fffcf3;
  padding: 8px 12px;
  border-radius: 8px;
  border-left: 4px solid #f0c98c;
}

.exo-dnd-zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.exo-dnd-zone {
  background: #fafbfd;
  border: 2px dashed #c5cfdc;
  border-radius: 10px;
  padding: 10px;
  min-height: 110px;
  transition: all 0.15s;
  cursor: pointer;
}
.exo-dnd-zone.dz-hover  { border-color: #2a8b3a; background: #eaf7ee; transform: scale(1.02); }
.exo-dnd-zone.dz-hint   { border-color: #ffb800; background: #fff4cc; animation: pulseHint 0.6s ease-in-out 3; }
@keyframes pulseHint { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(255,184,0,0.3); } }
.dz-head { display: flex; flex-direction: column; }
.dz-head b { color: #2a3340; font-size: 0.95rem; }
.dz-sub { font-size: 0.78rem; color: #5a6471; margin-top: 2px; }
.dz-tip { font-size: 0.78rem; color: #888; font-style: italic; margin: 4px 0 6px; }
.dz-drop {
  min-height: 50px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}
.exo-dnd-placed {
  background: #d8f1de;
  border: 1px solid #2a8b3a;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 0.86rem;
  color: #1f5e36;
  animation: fadeIn 0.3s;
}
.exo-dnd-placed b { display: block; }
.exo-dnd-placed .why { display: block; font-weight: normal; color: #2a4f37; font-size: 0.78rem; margin-top: 2px; font-style: italic; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.exo-dnd-pile-wrap { margin-top: 14px; }
.exo-dnd-pile-label { font-weight: 600; color: #2a3340; margin-bottom: 6px; font-size: 0.92rem; }
.exo-dnd-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #f7fafd;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  padding: 10px;
  min-height: 50px;
}
.exo-dnd-card {
  background: #fff;
  border: 1.5px solid #b6c4d4;
  color: #2a3340;
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 0.92rem;
  cursor: grab;
  user-select: none;
  font-family: inherit;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.exo-dnd-card:hover { border-color: #4a90d9; transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.exo-dnd-card.selected { border-color: #ff9800; background: #fff4d6; box-shadow: 0 0 0 3px rgba(255,152,0,0.3); }
.exo-dnd-card.dragging { opacity: 0.5; cursor: grabbing; }
.exo-dnd-card.shake-ko { animation: shakeKo 0.5s; border-color: #c25a5a; background: #fdecec; }
@keyframes shakeKo {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.exo-dnd-live {
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.92rem;
  min-height: 1.4em;
  background: #f7fafd;
  border-left: 4px solid #d8e3ee;
}
.exo-dnd-live.ok  { background: #d8f1de; border-left-color: #2a8b3a; color: #1f5e36; }
.exo-dnd-live.ko  { background: #fdecec; border-left-color: #c25a5a; color: #7a2222; }
.exo-dnd-live.info{ background: #cfe5fb; border-left-color: #4a90d9; color: #1f5c8b; }

.exo-dnd-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.exo-dnd-actions .btn-small { padding: 6px 14px; font-size: 0.88rem; }

.exo-dnd-final {
  margin-top: 18px;
  padding: 16px;
  background: #eaf7ee;
  border: 2px solid #b8e0c2;
  border-radius: 10px;
}
.exo-dnd-success h4 { margin: 0 0 6px; color: #1f5e36; }
.exo-dnd-success p  { margin: 4px 0; color: #2a4f37; }

.exo-dnd-motscles { margin: 14px 0; }
.exo-dnd-motscles h4 { margin: 0 0 8px; color: #1f5e36; font-size: 0.96rem; }
.exo-dnd-mc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.exo-dnd-mc-card {
  position: relative;
  min-height: 70px;
  background: linear-gradient(135deg, #ffe082 0%, #ffca8a 100%);
  border: 2px solid #d4a350;
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all 0.3s;
  perspective: 1000px;
  font-size: 0.88rem;
}
.exo-dnd-mc-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.mc-recto, .mc-verso {
  display: block;
  transition: opacity 0.25s;
}
.mc-recto { font-weight: 700; color: #5a3700; font-size: 1rem; }
.mc-verso { display: none; color: #3a2700; font-style: italic; line-height: 1.3; }
.exo-dnd-mc-card.flipped { background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%); border-color: #4caf50; }
.exo-dnd-mc-card.flipped .mc-recto { display: none; }
.exo-dnd-mc-card.flipped .mc-verso { display: block; }

/* Textarea avec mots-clés */
.tk-field textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid #d3d8e0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.96rem;
  resize: vertical;
}
.tk-kw-wrap {
  margin-top: 8px;
  background: #f0f7ff;
  border: 1px dashed #b6cce0;
  border-radius: 8px;
  padding: 10px 12px;
}
.tk-kw-label {
  font-size: 0.88rem;
  color: #1f5c8b;
  margin-bottom: 6px;
  font-weight: 600;
}
.tk-kw-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-kw-chip {
  background: #fff;
  border: 1px solid #b6cce0;
  color: #1f5c8b;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 0.84rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.tk-kw-chip:hover { background: #d2e7f7; transform: translateY(-1px); }

@media (max-width: 700px) {
  .exo-dnd-zones { grid-template-columns: 1fr 1fr; }
  .exo-dnd-mc-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   V4.42 — Galerie d'images universelle
   ===================================================================== */
.galerie-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 40, 0.78);
  backdrop-filter: blur(4px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: galFadeIn 0.18s ease-out;
}
@keyframes galFadeIn { from { opacity: 0; } to { opacity: 1; } }
.galerie-modal {
  background: #fff;
  border-radius: 16px;
  width: min(1200px, 96vw);
  height: min(820px, 92vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  overflow: hidden;
  animation: galSlide 0.22s ease-out;
}
@keyframes galSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.galerie-header {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 20px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #fff;
  border-bottom: 3px solid #f0c98c;
}
.galerie-header h2 { margin: 0; font-size: 1.15rem; }
.galerie-search input {
  width: 100%;
  padding: 9px 14px;
  border: none;
  border-radius: 22px;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.95);
  font-family: inherit;
}
.galerie-search input:focus { outline: 2px solid #f0c98c; }
.galerie-close {
  width: 36px; height: 36px;
  border: none; background: rgba(255,255,255,0.15);
  color: #fff; font-size: 1.2rem;
  border-radius: 50%; cursor: pointer;
}
.galerie-close:hover { background: rgba(255,255,255,0.3); }

.galerie-tabs {
  display: flex;
  gap: 0;
  padding: 0 20px;
  background: #f7f9fc;
  border-bottom: 1px solid #e3e7ee;
  overflow-x: auto;
  scrollbar-width: thin;
}
.galerie-tab {
  background: transparent;
  border: none;
  padding: 12px 18px;
  font-size: 0.92rem;
  cursor: pointer;
  color: #5a6471;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  white-space: nowrap;
  font-weight: 500;
  transition: all 0.15s;
}
.galerie-tab:hover { background: #eaf0f8; color: #2c3e50; }
.galerie-tab.active {
  color: #2c3e50;
  border-bottom-color: #f0c98c;
  background: #fff;
}
.gtab-icon { font-size: 1.1rem; }

.galerie-subs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: #fbfcfe;
  border-bottom: 1px solid #e3e7ee;
}
.galerie-sub-chip {
  background: #fff;
  border: 1.5px solid #d3d8e0;
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 0.84rem;
  cursor: pointer;
  color: #5a6471;
  font-family: inherit;
  transition: all 0.15s;
}
.galerie-sub-chip:hover { border-color: #4a90d9; color: #1f5c8b; }
.galerie-sub-chip.active {
  background: #2c3e50;
  border-color: #2c3e50;
  color: #fff;
  font-weight: 600;
}

.galerie-grid {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  background: #f7f9fc;
}
.galerie-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: #888;
  font-style: italic;
}

.galerie-tile {
  background: #fff;
  border: 2px solid #e3e7ee;
  border-radius: 10px;
  padding: 6px;
  cursor: grab;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  transition: all 0.15s;
  position: relative;
}
.galerie-tile:hover {
  border-color: #4a90d9;
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.galerie-tile.selected {
  border-color: #2a8b3a;
  background: #eaf7ee;
  box-shadow: 0 0 0 3px rgba(42,139,58,0.25);
}
.galerie-tile.dragging { opacity: 0.5; cursor: grabbing; }
.g-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  background: #f0f4fa;
}
.g-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
.galerie-tile:hover .g-img-wrap img { transform: scale(1.06); }
.g-eco {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.g-check {
  position: absolute;
  top: 4px; left: 4px;
  background: #2a8b3a;
  color: #fff;
  border-radius: 50%;
  width: 28px; height: 28px;
  display: none;
  align-items: center; justify-content: center;
  font-weight: bold;
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.galerie-tile.selected .g-check { display: flex; }
.g-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #2c3e50;
  line-height: 1.2;
  padding: 2px 4px;
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.g-sub {
  font-size: 0.72rem;
  color: #888;
  font-style: italic;
}

.galerie-footer {
  padding: 14px 20px;
  background: #fff;
  border-top: 1px solid #e3e7ee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.galerie-selected-info {
  flex: 1;
  font-size: 0.94rem;
  color: #2c3e50;
}
.galerie-actions { display: flex; gap: 10px; }
.galerie-validate:disabled {
  background: #cdd5e0 !important;
  cursor: not-allowed;
  border-color: #cdd5e0 !important;
}

/* Bouton flottant universel */
.galerie-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  color: #fff;
  border: 3px solid #f0c98c;
  border-radius: 28px;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 800;
  transition: all 0.2s;
}
.galerie-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}
.galerie-fab .fab-icon { font-size: 1.3rem; }

/* Toast d'app */
.app-toast {
  position: fixed;
  bottom: 90px;
  right: 22px;
  background: #2c3e50;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.92rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateX(20px);
  transition: all 0.25s;
  z-index: 900;
  max-width: 320px;
  pointer-events: none;
}
.app-toast.visible { opacity: 1; transform: translateX(0); }

@media (max-width: 700px) {
  .galerie-modal { width: 100vw; height: 100vh; border-radius: 0; }
  .galerie-header { grid-template-columns: 1fr auto; }
  .galerie-search { grid-column: 1 / -1; order: 3; }
  .galerie-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .galerie-fab .fab-label { display: none; }
  .galerie-fab { padding: 14px; border-radius: 50%; }
}

/* =====================================================================
   V4.43 — Photos dans les exercices DnD
   ===================================================================== */

/* Carte d'item avec photo */
.exo-dnd-card.with-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  width: 110px;
}
.exo-dnd-card.with-photo img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  background: #f0f4fa;
  display: block;
}
.exo-dnd-card.with-photo .card-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  line-height: 1.15;
  max-width: 100px;
  white-space: normal;
}
.exo-dnd-card.with-photo:hover img { transform: scale(1.04); transition: transform 0.15s; }

/* Zone avec photo (icône en haut) */
.exo-dnd-zone.with-photo {
  position: relative;
  padding-top: 10px;
}
.exo-dnd-zone .dz-photo {
  width: 100%;
  max-height: 90px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  margin-bottom: 6px;
  border: 1px solid #e3e7ee;
  padding: 4px;
}

/* Item placé avec photo */
.exo-dnd-placed {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.exo-dnd-placed .placed-photo {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.exo-dnd-placed .placed-text {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.exo-dnd-placed.ok b { color: #1f5e36; }

@media (max-width: 700px) {
  .exo-dnd-card.with-photo { width: 90px; }
  .exo-dnd-card.with-photo img { width: 75px; height: 75px; }
}

/* =====================================================================
   V4.45 — Exercice "Curseur chaîne du froid"
   ===================================================================== */
.exo-chaine-froid {
  background: linear-gradient(135deg, #eaf3fb 0%, #d8e8f5 100%);
  border: 2px solid #a5c8e8;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 20px 0;
}
.exo-chaine-froid > h3 { margin: 0 0 6px; color: #1f5c8b; }
.exo-chaine-froid > .hint { margin: 0 0 14px; color: #4a6680; font-size: 0.92rem; }

.ecf-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 14px;
  border: 2px solid currentColor;
  transition: all 0.4s ease;
  font-weight: 600;
}
.ecf-banner-emoji { font-size: 2.2rem; }
.ecf-banner-text { display: flex; flex-direction: column; }
.ecf-banner-temp { font-size: 1.4rem; font-weight: 700; }
.ecf-banner-sub  { font-size: 0.95rem; opacity: 0.9; }

.ecf-slider-box {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid #c5dcf0;
}
.ecf-slider {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, #a5c8e8 0%, #b6dac4 33%, #f0c98c 66%, #e08a8a 100%);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.ecf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1f5c8b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.15s;
}
.ecf-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.ecf-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #1f5c8b;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.ecf-ticks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.ecf-tick {
  background: #fff;
  border: 2px solid #d3d8e0;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
  --t-color: #2c3e50;
}
.ecf-tick:hover { border-color: var(--t-color); transform: translateY(-2px); }
.ecf-tick.active {
  border-color: var(--t-color);
  background: var(--t-color);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.ecf-tick-emoji { font-size: 1.4rem; }
.ecf-tick-label { font-size: 0.82rem; font-weight: 600; }

.ecf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.ecf-card {
  background: #fff;
  border: 2px solid #d3d8e0;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.4s ease;
}
.ecf-card.danger-1 { border-color: #a5c8e8; }
.ecf-card.danger-2 { border-color: #b6dac4; }
.ecf-card.danger-3 { border-color: #f0c98c; background: #fffbf3; }
.ecf-card.danger-4 { border-color: #e08a8a; background: #fff5f5; }
.ecf-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #2c3e50;
}
.ecf-aliment-icon { font-size: 1.3rem; }
.ecf-aliment-nom { font-size: 0.9rem; line-height: 1.2; }
.ecf-photo-wrap {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: #f0f4fa;
  position: relative;
}
.ecf-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s, transform 0.4s;
}
.ecf-card.danger-4 .ecf-photo { animation: shakeWarn 0.6s ease-in-out; }
@keyframes shakeWarn {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-2deg); }
  75% { transform: rotate(2deg); }
}
.ecf-desc {
  font-size: 0.84rem;
  color: #4a5566;
  line-height: 1.3;
  text-align: center;
  padding: 4px 2px;
  font-style: italic;
  min-height: 3em;
}
.ecf-card.danger-4 .ecf-desc { color: #a83232; font-weight: 600; }

.ecf-rappel {
  background: #fff;
  border: 2px solid #1f5c8b;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: #1f5c8b;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ecf-rappel-icon { font-size: 1.3rem; flex-shrink: 0; }

@media (max-width: 700px) {
  .ecf-grid { grid-template-columns: 1fr 1fr; }
  .ecf-ticks { grid-template-columns: repeat(2, 1fr); }
  .ecf-banner-temp { font-size: 1.15rem; }
  .ecf-banner-emoji { font-size: 1.6rem; }
}

/* =====================================================================
   V4.46 — Schéma frigo intégré au curseur chaîne du froid
   ===================================================================== */
.ecf-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  margin-bottom: 14px;
}
.ecf-control { display: flex; flex-direction: column; gap: 12px; }

/* Frigo schématique */
.ecf-frigo {
  background: #fff;
  border: 1px solid #c5dcf0;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ecf-frigo-title {
  text-align: center;
  font-weight: 700;
  color: #1f5c8b;
  font-size: 0.95rem;
}

/* Coque du frigo */
.ecf-frigo-shell {
  background: linear-gradient(135deg, #f4f8fc 0%, #e7eff7 100%);
  border: 4px solid #6b7888;
  border-radius: 14px;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 4px;
  position: relative;
}
.ecf-frigo-shell::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 3px;
  background: #6b7888;
  z-index: 0;
}

.ecf-frigo-zone, .ecf-frigo-zone-porte {
  background: #fff;
  border: 2px solid #d3d8e0;
  border-radius: 6px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.78rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 1;
  font-family: inherit;
}
.ecf-frigo-zone:hover, .ecf-frigo-zone-porte:hover {
  border-color: #4a90d9;
  transform: scale(1.03);
}
.ecf-frigo-zone.active, .ecf-frigo-zone-porte.active {
  background: #cfe5fb;
  border-color: #1f5c8b;
  box-shadow: 0 0 0 3px rgba(31,92,139,0.25);
  font-weight: 600;
}
.ecf-frigo-zone[data-zone="bas"].active {
  background: #dbeaf6;
}
.ecf-frigo-zone[data-zone="bac"].active,
.ecf-frigo-zone-porte.active {
  background: #f9e7c9;
  border-color: #8a5500;
  box-shadow: 0 0 0 3px rgba(138,85,0,0.25);
}
.zlbl { font-weight: 600; color: #2c3e50; line-height: 1.1; }
.ztemp { font-size: 0.7rem; color: #5a6471; font-style: italic; }
.zfroid { font-size: 0.8rem; }

/* La 1re zone (Haut), 2e (Milieu), 3e (Bas) → colonne gauche */
/* La 4e (Bac) → colonne gauche aussi, sous Bas */
/* La porte (5e) → colonne droite, occupe toute la hauteur */
.ecf-frigo-zone:nth-child(1) { grid-column: 1; grid-row: 1; }
.ecf-frigo-zone:nth-child(2) { grid-column: 1; grid-row: 2; }
.ecf-frigo-zone:nth-child(3) { grid-column: 1; grid-row: 3; }
.ecf-frigo-zone:nth-child(4) { grid-column: 1; grid-row: 4; }
.ecf-frigo-porte {
  grid-column: 2; grid-row: 1 / span 4;
  background: linear-gradient(180deg, #f4f8fc 0%, #d8e4ef 100%);
  border-radius: 4px;
  position: relative;
}
.ecf-frigo-zone-porte {
  grid-column: 2; grid-row: 1 / span 4;
  align-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 14px 4px;
  font-size: 0.7rem;
}
.ecf-frigo-zone-porte .zlbl { writing-mode: vertical-rl; }
.ecf-frigo-zone-porte .ztemp { writing-mode: vertical-rl; }

/* Hors du frigo (à part) */
.ecf-frigo-out { margin-top: 4px; }
.ecf-frigo-zone-out {
  width: 100%;
  background: #fff;
  border: 2px dashed #e08a8a;
  color: #a83232;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ecf-frigo-zone-out:hover {
  background: #ffeaea;
  transform: scale(1.02);
}
.ecf-frigo-zone-out.active {
  background: #f5d2d2;
  border-style: solid;
  border-color: #a83232;
  box-shadow: 0 0 0 3px rgba(168,50,50,0.3);
  animation: pulseDanger 1s ease-in-out infinite;
}
@keyframes pulseDanger {
  0%, 100% { box-shadow: 0 0 0 3px rgba(168,50,50,0.3); }
  50% { box-shadow: 0 0 0 7px rgba(168,50,50,0.15); }
}
.ecf-frigo-zone-out .zlbl { color: #a83232; font-weight: 700; }
.ecf-frigo-zone-out .ztemp { color: #a83232; }

/* Banner — verdict ajouté */
.ecf-banner-verdict {
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 4px;
}

@media (max-width: 700px) {
  .ecf-layout { grid-template-columns: 1fr; }
  .ecf-frigo { max-width: 280px; margin: 0 auto; }
}

/* =====================================================================
   V4.47 — Composeur visuel de repas (avec photos depuis la banque)
   ===================================================================== */

/* Bouton "Choisir des aliments dans la banque" */
.cr-pick-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #4a90d9 0%, #2c3e50 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.2s;
  box-shadow: 0 3px 8px rgba(74,144,217,0.3);
}
.cr-pick-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(74,144,217,0.4);
}

/* Liste d'ingrédients en tuiles */
.cr-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  background: #fbfcfe;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  padding: 12px;
  min-height: 60px;
}
.cr-ing-tile {
  background: #fff;
  border: 2px solid #e3e7ee;
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: all 0.15s;
}
.cr-ing-tile:hover { border-color: #4a90d9; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.cr-ing-photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f4fa;
  display: block;
}
.cr-ing-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #c5cfdc;
}
.cr-ing-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #e08a8a;
  color: #a83232;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 2;
}
.cr-ing-del:hover { background: #ffeaea; }
.cr-ing-info { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.cr-ing-nom { font-size: 0.86rem; font-weight: 600; color: #2c3e50; line-height: 1.2; }
.cr-ing-grp {
  font-size: 0.7rem;
  color: #5a6471;
  background: #f0f4fa;
  padding: 1px 6px;
  border-radius: 8px;
  align-self: flex-start;
  font-style: italic;
}
.cr-ing-qte {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #d3d8e0;
  border-radius: 5px;
  font-size: 0.78rem;
  font-family: inherit;
}

/* =====================================================================
   V4.47 — image_picker (single & multi)
   ===================================================================== */
.img-picker { margin: 16px 0; }
.img-picker label { font-weight: 600; color: #2a3340; display: block; margin-bottom: 4px; }
.img-picker .hint { color: #5a6471; font-size: 0.86rem; margin-bottom: 8px; }

.img-picker-zone { display: block; }
.img-picker-empty {
  width: 100%;
  background: #fbfcfe;
  border: 2px dashed #b6c4d4;
  border-radius: 10px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  color: #5a6471;
  transition: all 0.15s;
}
.img-picker-empty:hover {
  border-color: #4a90d9;
  background: #eaf3fb;
  color: #1f5c8b;
}
.img-picker-empty .ipe-icon { font-size: 1.6rem; }

/* Carte d'image sélectionnée (single) */
.img-picker-card {
  display: flex;
  gap: 14px;
  background: #fff;
  border: 2px solid #b6dac4;
  border-radius: 12px;
  padding: 12px;
  align-items: stretch;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.img-picker-card img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #f0f4fa;
}
.img-picker-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ipc-nom { font-size: 1.05rem; font-weight: 700; color: #2c3e50; }
.ipc-sub { font-size: 0.84rem; color: #5a6471; font-style: italic; }
.ipc-eco {
  align-self: flex-start;
  font-size: 0.84rem;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 4px;
}
.ipc-eco.bon     { background: #d8f1de; color: #1f5e36; }
.ipc-eco.moyen   { background: #fff3cd; color: #856404; }
.ipc-eco.mauvais { background: #fdecec; color: #7a2222; }
.img-picker-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.img-picker-actions .btn-small { padding: 5px 12px; font-size: 0.84rem; }

/* Multi : grid avec mini-tuiles */
.img-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  background: #fbfcfe;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  padding: 10px;
  min-height: 60px;
}
.img-picker-mini {
  background: #fff;
  border: 2px solid #e3e7ee;
  border-radius: 8px;
  padding: 4px;
  position: relative;
  transition: all 0.15s;
}
.img-picker-mini:hover { border-color: #4a90d9; }
.img-picker-mini img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f4fa;
  display: block;
}
.img-picker-mini .ipm-nom {
  font-size: 0.78rem;
  text-align: center;
  font-weight: 600;
  color: #2c3e50;
  margin-top: 4px;
  line-height: 1.15;
  padding: 0 2px 2px;
}
.ipm-del {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.95);
  border: 1px solid #e08a8a;
  color: #a83232;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.ipm-del:hover { background: #fdecec; }
.ipm-eco {
  position: absolute;
  top: 4px; left: 4px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  z-index: 1;
}

.img-picker-add {
  background: #fbfcfe;
  border: 2px dashed #b6c4d4;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  color: #5a6471;
  transition: all 0.15s;
  font-size: 0.84rem;
  min-height: 110px;
}
.img-picker-add:hover { border-color: #4a90d9; background: #eaf3fb; color: #1f5c8b; }
.img-picker-add .ipa-plus { font-size: 2rem; line-height: 1; font-weight: 300; }

@media (max-width: 700px) {
  .img-picker-card { flex-direction: column; }
  .img-picker-card img { width: 100%; height: 180px; }
}

/* =====================================================================
   V4.48 — Vue projet : rangées visuelles avec photos + plateau + popup info
   ===================================================================== */

/* Rangées de composantes dans la vue projet */
.proj-rangees {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}
.proj-rangee {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-left: 5px solid #4a90d9;
  border-radius: 8px;
  padding: 10px 12px;
}
.proj-rangee.vide {
  border-left-color: #d3d8e0;
  background: #fbfcfe;
  opacity: 0.85;
}
.proj-rangee-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.prh-icon { font-size: 1.3rem; }
.prh-label { font-weight: 700; color: #2c3e50; }
.prh-nom   { color: #4a5566; font-style: italic; }
.prh-count { margin-left: auto; font-size: 0.78rem; color: #888; background: #f0f4fa; padding: 2px 8px; border-radius: 10px; }

.proj-ing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.proj-ing-tile {
  background: #fbfcfe;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.proj-ing-tile img,
.proj-ing-noimg {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  background: #f0f4fa;
}
.proj-ing-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #c5cfdc;
}
.proj-ing-cap { padding: 0 4px; }
.proj-ing-nom { font-size: 0.82rem; font-weight: 600; color: #2c3e50; line-height: 1.15; }
.proj-ing-qte { font-size: 0.74rem; color: #5a6471; margin-top: 1px; }
.proj-rangee-text {
  background: #fbfcfe;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.92rem;
  color: #2c3e50;
  font-style: italic;
}
.proj-rangee-empty {
  padding: 8px 10px;
  color: #888;
  font-style: italic;
  font-size: 0.88rem;
}

/* Bloc plateau à emporter */
.bloc-plateau .plateau-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.plateau-cell {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plateau-cell.vide { background: #fbfcfe; opacity: 0.85; border-style: dashed; }
.plateau-cell-head { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; color: #4a5566; font-weight: 600; }
.plc-icon { font-size: 1.2rem; }
.plateau-cell-photo {
  position: relative;
  aspect-ratio: 1;
  background: #f0f4fa;
  border-radius: 6px;
  overflow: hidden;
}
.plateau-cell-photo img { width: 100%; height: 100%; object-fit: cover; }
.pl-eco {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pl-eco.mini { width: 18px; height: 18px; font-size: 0.7rem; top: 2px; right: 2px; }
.plateau-cell-nom { font-size: 0.84rem; font-weight: 600; color: #2c3e50; text-align: center; }
.plateau-cell-empty { font-size: 0.84rem; color: #888; font-style: italic; padding: 8px 0; text-align: center; }

.plateau-cell-multi { grid-column: 1 / -1; }
.plateau-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 6px;
  margin-top: 6px;
}
.plateau-mini {
  position: relative;
  aspect-ratio: 1;
  background: #f0f4fa;
  border-radius: 6px;
  overflow: hidden;
}
.plateau-mini img { width: 100%; height: 100%; object-fit: cover; }

.plateau-eco {
  margin: 6px 0 0;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.92rem;
  font-weight: 600;
}
.plateau-eco.ok    { background: #d8f1de; color: #1f5e36; }
.plateau-eco.moyen { background: #fff3cd; color: #856404; }
.plateau-eco.ko    { background: #fdecec; color: #7a2222; }

/* =====================================================================
   V4.48 — Popup d'information sur une image
   ===================================================================== */
.img-info-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 40, 0.65);
  backdrop-filter: blur(3px);
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: galFadeIn 0.18s ease-out;
}
.img-info-card {
  background: #fff;
  border-radius: 14px;
  width: min(640px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  border-top: 6px solid #4a90d9;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  position: relative;
  animation: galSlide 0.22s ease-out;
}
.img-info-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border: none;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  z-index: 2;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.img-info-close:hover { background: #fdecec; color: #a83232; }
.img-info-photo {
  background: #f0f4fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.img-info-photo img {
  max-width: 100%;
  max-height: 320px;
  border-radius: 8px;
  object-fit: cover;
}
.img-info-body { padding: 18px 20px; }
.img-info-body h3 { margin: 0 0 14px; color: #2c3e50; font-size: 1.2rem; }
.iir-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px dashed #e3e7ee;
}
.iir-row:last-child { border-bottom: none; }
.iir-row.pnns {
  background: #f7faff;
  margin: 8px -8px;
  padding: 10px 12px;
  border-radius: 6px;
  border-bottom: none;
}
.iir-label { font-size: 0.84rem; color: #5a6471; font-weight: 600; }
.iir-value { font-size: 0.96rem; color: #2c3e50; line-height: 1.3; display: flex; flex-wrap: wrap; gap: 4px; }
.iir-chip {
  display: inline-block;
  background: #eaf3fb;
  color: #1f5c8b;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 500;
}

/* Bouton ⓘ sur les tuiles de la galerie */
.g-info {
  position: absolute;
  bottom: 4px; right: 4px;
  width: 24px; height: 24px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #4a90d9;
  color: #1f5c8b;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-family: inherit;
  transition: all 0.15s;
}
.g-info:hover { background: #eaf3fb; transform: scale(1.15); }

@media (max-width: 700px) {
  .img-info-card { grid-template-columns: 1fr; max-height: 92vh; }
  .img-info-photo img { max-height: 200px; }
}

/* =====================================================================
   V4.49 — Section "Outils" dans la sidebar
   ===================================================================== */
.sidebar-tools {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3e7ee;
}
.sidebar-tools-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  font-weight: 600;
  margin-bottom: 6px;
  padding: 0 4px;
}
.sidebar-tool-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: #fff;
  border: 1.5px solid #d3d8e0;
  color: #2c3e50;
  padding: 9px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.sidebar-tool-btn:hover {
  border-color: #4a90d9;
  background: #eaf3fb;
  color: #1f5c8b;
  transform: translateX(2px);
}
.stb-icon { font-size: 1.1rem; flex-shrink: 0; }

/* Masque l'ancien bouton flottant si jamais il subsiste dans le DOM */
.galerie-fab { display: none !important; }
.tools-fab { display: none !important; }

/* =====================================================================
   V4.50 — Fallback "vignette lettre" (au lieu de l'emoji 🍴)
   ===================================================================== */
.proj-ing-noimg,
.cr-ing-photo-empty {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b6cce0 0%, #4a90d9 100%) !important;
  color: #fff !important;
  font-size: 2.2rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-family: inherit;
}
.proj-ing-noimg::before,
.cr-ing-photo-empty::before {
  content: attr(data-letter);
}

/* =====================================================================
   V4.51 — Couleurs par groupe + allergènes + jauges score
   ===================================================================== */

/* Tag de groupe sur chaque tuile d'ingrédient */
.proj-ing-groupe-tag {
  font-size: 0.7rem;
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  align-self: flex-start;
  font-weight: 600;
  margin-top: 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proj-ing-tile {
  border-width: 2px;
}

/* Allergènes dans l'en-tête de composante */
.prh-aller {
  margin-left: auto;
  font-size: 0.78rem;
  color: #a83232;
  background: #fdecec;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 500;
  border: 1px solid #e8b6b6;
}
.prh-aller b { font-weight: 700; }

/* Bloc scores en haut */
.bloc-scores {
  background: linear-gradient(135deg, #fff 0%, #f7faff 100%);
}
.scores-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
.score-card {
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 10px;
  padding: 12px;
  border-left: 5px solid var(--c, #888);
}
.score-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.score-icon { font-size: 1.4rem; }
.score-titre { font-weight: 700; color: #2c3e50; flex: 1; }
.score-verdict {
  font-size: 0.78rem;
  background: var(--c, #888);
  color: #fff;
  padding: 2px 10px;
  border-radius: 10px;
  font-weight: 600;
}
.score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.score-bar {
  flex: 1;
  height: 14px;
  background: #f0f4fa;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid #e3e7ee;
}
.score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c, #888) 0%, color-mix(in srgb, var(--c, #888) 80%, white) 100%);
  border-radius: 7px;
  transition: width 0.5s ease;
}
.score-num {
  font-weight: 700;
  color: var(--c, #888);
  min-width: 50px;
  text-align: right;
  font-size: 1rem;
}
.score-details summary {
  cursor: pointer;
  color: #5a6471;
  font-size: 0.84rem;
  margin-top: 6px;
  padding: 4px 0;
}
.score-details summary:hover { color: var(--c, #888); }
.score-details ul {
  list-style: none;
  padding: 6px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
}
.score-details li {
  font-size: 0.82rem;
  padding: 2px 0;
}
.score-details li.ok { color: #1f5e36; }
.score-details li.ko { color: #888; }

@media (max-width: 700px) {
  .scores-grid { grid-template-columns: 1fr; }
  .score-details ul { grid-template-columns: 1fr; }
}

/* =====================================================================
   V4.52 — Quantité dans la galerie + hint scores + bouton soumettre + modale
   ===================================================================== */

/* Champ quantité dans une tuile sélectionnée de la galerie */
.galerie-tile .g-qte-input {
  width: calc(100% - 8px);
  margin: 4px;
  padding: 4px 8px;
  border: 1.5px solid #2a8b3a;
  border-radius: 6px;
  font-size: 0.82rem;
  font-family: inherit;
  background: #eaf7ee;
  color: #1f5e36;
  font-weight: 600;
}
.galerie-tile .g-qte-input:focus {
  outline: 2px solid #2a8b3a;
  background: #fff;
}

/* Hint "pour passer à X/X" sur les jauges */
.score-hint {
  background: #fff7e8;
  border: 1px solid #f0c98c;
  color: #6d4400;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
}
.score-hint.score-perfect {
  background: #d8f1de;
  border-color: #2a8b3a;
  color: #1f5e36;
}
.score-todo {
  display: inline-block;
  background: #fff;
  border: 1px solid #f0c98c;
  padding: 1px 8px;
  border-radius: 8px;
  margin: 1px 0;
  font-weight: 500;
}

/* Bouton "Je soumets mon menu" */
.btn-soumettre-menu {
  background: linear-gradient(135deg, #2a8b3a 0%, #1f5e36 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  padding: 12px 22px !important;
  font-size: 1rem !important;
  box-shadow: 0 4px 12px rgba(42,139,58,0.3);
  transition: all 0.2s;
}
.btn-soumettre-menu:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(42,139,58,0.4);
}

/* Modale "Soumettre mon menu" */
.soumettre-card {
  background: #fff;
  border-radius: 14px;
  width: min(640px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 28px;
  border-top: 6px solid #2a8b3a;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  position: relative;
  animation: galSlide 0.22s ease-out;
}
.soumettre-card h2 { margin: 0 0 6px; color: #2c3e50; }
.soumettre-card h3 { margin: 14px 0 6px; color: #2c3e50; font-size: 1rem; }
.soumettre-intro { color: #5a6471; margin: 0 0 12px; font-style: italic; }
.soumettre-scores {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ss-pill {
  background: var(--c, #888);
  color: #fff;
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 0.92rem;
  font-weight: 600;
}
.ss-pill b { font-weight: 800; margin-left: 4px; }
.soumettre-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.soumettre-list li {
  padding: 6px 8px;
  font-size: 0.92rem;
  border-bottom: 1px dashed #e3e7ee;
}
.soumettre-list li:last-child { border-bottom: none; }
.soumettre-list li.ok { color: #1f5e36; }
.soumettre-list li.ko { color: #888; }
.soumettre-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
  flex-wrap: wrap;
}
.soumettre-warn {
  background: #fff7e8;
  border-left: 3px solid #f0c98c;
  padding: 8px 12px;
  margin: 10px 0 0;
  font-size: 0.86rem;
  color: #6d4400;
  border-radius: 4px;
}

/* =====================================================================
   V4.54 — Bouton composer dans Mon projet + titres composantes + ajout libre
   ===================================================================== */

/* Boutons d'action en haut de Mon projet */
.ph-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.btn-ph-action {
  background: #fff;
  color: #2c3e50;
  border: 2px solid #fff;
  padding: 10px 20px !important;
  font-weight: 700;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  font-size: 0.95rem;
}
.btn-ph-action:hover {
  background: #f0f4fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.btn-ph-action.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.5);
}
.btn-ph-action.ghost:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Nouveau header de composante : encadré avec titre centré */
.proj-rangee-head-v2 {
  margin: -10px -12px 12px;
}
.prh-banner {
  background: linear-gradient(135deg, #4a90d9 0%, #2c3e50 100%);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 8px 8px 0 0;
  border-bottom: 4px solid #f0c98c;
}
.prh-icon-big { font-size: 1.8rem; }
.prh-label-big {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.prh-meta {
  background: #fbfcfe;
  padding: 8px 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e3e7ee;
}
.prh-meta .prh-nom {
  font-weight: 600;
  color: #2c3e50;
  font-size: 1rem;
}
.prh-meta .prh-nom-empty {
  color: #aaa;
  font-style: italic;
  font-weight: 400;
}
.prh-meta .prh-count {
  margin-left: auto;
  font-size: 0.78rem;
  color: #888;
  background: #f0f4fa;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Ajout libre d'aliment dans le composeur */
.cr-libre-add-block {
  margin-top: 12px;
  padding: 12px;
  background: #fff7e8;
  border: 1px dashed #f0c98c;
  border-radius: 8px;
}
.cr-libre-label {
  font-size: 0.88rem;
  color: #6d4400;
  font-weight: 600;
  margin-bottom: 8px;
}
.cr-libre-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cr-libre-row .cr-libre-input {
  flex: 1;
  min-width: 160px;
  padding: 8px 12px;
  border: 1px solid #d3d8e0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
}
.cr-libre-row .cr-libre-groupe-sel {
  padding: 8px 12px;
  border: 1px solid #d3d8e0;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.cr-libre-row .cr-libre-add-btn {
  padding: 8px 16px !important;
  background: #4a90d9;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.cr-libre-row .cr-libre-add-btn:hover { background: #2c3e50; }

@media (max-width: 700px) {
  .prh-label-big { font-size: 1rem; }
  .prh-icon-big { font-size: 1.4rem; }
  .cr-libre-row { flex-direction: column; }
}

/* =====================================================================
   V4.55 — Jeu "Trouve le mot"
   ===================================================================== */
.trouve-mot-card {
  background: #fff;
  border-radius: 14px;
  width: min(560px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  padding: 26px 30px;
  border-top: 6px solid #f0c98c;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  position: relative;
  animation: galSlide 0.22s ease-out;
}
.tm-progress {
  font-size: 0.86rem;
  color: #5a6471;
  margin-bottom: 6px;
}
.tm-progress b { color: #2c3e50; }
.tm-bar {
  height: 8px;
  background: #f0f4fa;
  border-radius: 4px;
  margin-bottom: 14px;
  overflow: hidden;
}
.tm-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90d9 0%, #f0c98c 100%);
  transition: width 0.4s ease;
}
.tm-module {
  display: inline-block;
  background: #f0f4fa;
  color: #1f5c8b;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.tm-def {
  margin: 0 0 6px;
  color: #2c3e50;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.4;
}
.tm-hint {
  color: #888;
  font-size: 0.86rem;
  margin: 0 0 14px;
}
.tm-input-row {
  display: flex;
  gap: 8px;
}
.tm-input {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #d3d8e0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}
.tm-input:focus {
  outline: none;
  border-color: #4a90d9;
}
.tm-valider {
  padding: 10px 18px !important;
}
.tm-feedback {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  display: none;
}
.tm-feedback.ok, .tm-feedback.ko {
  display: block;
}
.tm-feedback.ok {
  background: #d8f1de;
  border-left: 4px solid #2a8b3a;
  color: #1f5e36;
}
.tm-feedback.ko {
  background: #fdecec;
  border-left: 4px solid #c25a5a;
  color: #7a2222;
}

/* Écran de fin */
.tm-fin-titre {
  text-align: center;
  margin: 8px 0 4px;
  color: #2c3e50;
  font-size: 1.3rem;
}
.tm-fin-score {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin: 14px 0 4px;
}
.tm-fin-pct {
  text-align: center;
  font-size: 1.1rem;
  color: #5a6471;
  margin: 0 0 18px;
}

/* =====================================================================
   V4.57 — "Donner mon avis" — design fun & coloré
   ===================================================================== */
.mon-avis-card {
  background: linear-gradient(135deg, #fff 0%, #fbfcfe 100%);
  border-radius: 18px;
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 0 0 22px;
  border-top: 8px solid #f0c98c;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  position: relative;
  animation: galSlide 0.22s ease-out;
}
.ma-header {
  background: linear-gradient(135deg, #4a90d9 0%, #2c3e50 100%);
  color: #fff;
  padding: 26px 28px 22px;
  border-radius: 0 0 24px 24px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ma-header h2 {
  margin: 0 0 6px;
  font-size: 1.6rem;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.ma-intro {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.95;
  line-height: 1.4;
}

.ma-section {
  padding: 12px 24px 18px;
  margin-bottom: 12px;
}
.ma-section h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}
.ma-chip-count {
  background: #4a90d9;
  color: #fff;
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 12px;
  margin-left: auto;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
}

/* Étoiles */
.ma-stars-section {
  background: linear-gradient(135deg, #fff7e8 0%, #ffeed1 100%);
  border-radius: 14px;
  margin: 0 18px 14px;
  padding: 14px 22px;
  border: 2px solid #f0c98c;
}
.ma-star-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #f0d4a4;
  flex-wrap: wrap;
}
.ma-star-row:last-child { border-bottom: none; }
.ma-star-label {
  flex: 1;
  font-weight: 600;
  color: #5a3700;
  font-size: 0.94rem;
  min-width: 200px;
}
.ma-stars { display: flex; gap: 4px; }
.ma-star {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: #d4a350;
  transition: transform 0.15s;
  font-family: inherit;
}
.ma-star:hover { transform: scale(1.2); }
.ma-star.active { color: #e8a13a; text-shadow: 0 1px 3px rgba(232,161,58,0.4); }

/* Chips de commentaires */
.ma-section-pos { background: linear-gradient(135deg, #eaf7ee 0%, #d8efe0 100%); border-radius: 14px; margin: 0 18px 14px; border: 2px solid #b8e0c2; }
.ma-section-amel { background: linear-gradient(135deg, #fff4e0 0%, #fce6c5 100%); border-radius: 14px; margin: 0 18px 14px; border: 2px solid #f0c98c; }
.ma-section-pro { background: linear-gradient(135deg, #eaf3fb 0%, #d2e7f7 100%); border-radius: 14px; margin: 0 18px 14px; border: 2px solid #b6cce0; }

.ma-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ma-chip {
  background: #fff;
  border: 2px solid #d3d8e0;
  padding: 8px 14px;
  border-radius: 22px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  font-weight: 500;
}
.ma-chip:hover {
  border-color: #4a90d9;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.ma-section-pos  .ma-chip.active { background: #2a8b3a; color: #fff; border-color: #1f5e36; box-shadow: 0 3px 8px rgba(42,139,58,0.3); }
.ma-section-amel .ma-chip.active { background: #e8a13a; color: #fff; border-color: #8a5500; box-shadow: 0 3px 8px rgba(232,161,58,0.3); }
.ma-section-pro  .ma-chip.active { background: #4a90d9; color: #fff; border-color: #1f5c8b; box-shadow: 0 3px 8px rgba(74,144,217,0.3); }
.ma-chip-emoji { font-size: 1rem; }

/* Texte libre */
.ma-section-libre { padding: 12px 24px 18px; }
.ma-section-libre textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #d3d8e0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.ma-section-libre textarea:focus { outline: none; border-color: #4a90d9; }

/* Actions */
.ma-actions {
  padding: 12px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #e3e7ee;
}
.ma-actions .btn-primary {
  padding: 11px 22px !important;
  font-size: 1rem !important;
  font-weight: 700;
  background: linear-gradient(135deg, #4a90d9 0%, #2c3e50 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 12px rgba(74,144,217,0.3);
}

/* Écran "Merci" */
.ma-merci {
  text-align: center;
  padding: 40px 30px;
}
.ma-merci-emoji {
  font-size: 4rem;
  animation: bounceIn 0.5s ease;
}
@keyframes bounceIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}
.ma-merci h2 { color: #2a8b3a; font-size: 2rem; margin: 10px 0; }
.ma-merci p { color: #5a6471; margin: 8px 0; }
.ma-merci-petit { font-style: italic; color: #888; margin-bottom: 20px !important; }

@media (max-width: 700px) {
  .ma-section { padding: 8px 14px 14px; }
  .ma-stars-section, .ma-section-pos, .ma-section-amel, .ma-section-pro {
    margin: 0 10px 10px;
  }
  .ma-header h2 { font-size: 1.3rem; }
}

/* =====================================================================
   V4.58 — Mon référentiel PSR (vue par familles + détail modale)
   ===================================================================== */
.ref-psr-card {
  background: #fff;
  border-radius: 16px;
  width: min(900px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 0 0 22px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  position: relative;
  animation: galSlide 0.22s ease-out;
}

/* Header de la vue principale */
.rps-header {
  background: linear-gradient(135deg, #4a90d9 0%, #2c3e50 100%);
  color: #fff;
  padding: 24px 28px 20px;
  border-radius: 16px 16px 0 0;
  text-align: center;
  margin-bottom: 18px;
}
.rps-header h2 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 800;
}
.rps-intro {
  margin: 0 0 14px;
  font-size: 0.92rem;
  opacity: 0.95;
  line-height: 1.4;
}
.rps-progress-tot {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.15);
  padding: 8px 14px;
  border-radius: 22px;
  font-size: 0.88rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rps-progress-tot b { font-size: 1rem; font-weight: 700; }
.rps-bar {
  flex: 1;
  min-width: 140px;
  height: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  overflow: hidden;
}
.rps-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #b6dac4 0%, #f0c98c 100%);
  border-radius: 4px;
  transition: width 0.4s ease;
}

/* Grille de familles */
.rps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  padding: 0 22px;
}
.rps-fam-card {
  background: #fff;
  border: 2px solid #e3e7ee;
  border-top: 5px solid var(--c, #4a90d9);
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rps-fam-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  border-color: var(--c, #4a90d9);
}
.rps-fam-icon { font-size: 2rem; line-height: 1; }
.rps-fam-titre {
  font-weight: 700;
  color: #2c3e50;
  font-size: 0.95rem;
  line-height: 1.2;
}
.rps-fam-desc {
  font-size: 0.8rem;
  color: #5a6471;
  font-style: italic;
  flex: 1;
}
.rps-fam-bar {
  height: 6px;
  background: #f0f4fa;
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.rps-fam-bar-fill {
  height: 100%;
  background: var(--c, #4a90d9);
  transition: width 0.4s ease;
}
.rps-fam-stats {
  font-size: 0.78rem;
  color: #5a6471;
  font-weight: 600;
}

/* Vue détail d'une famille */
.rps-fam-header {
  background: linear-gradient(135deg, var(--c, #4a90d9) 0%, color-mix(in srgb, var(--c) 70%, black) 100%);
  color: #fff;
  padding: 18px 24px 16px;
  border-radius: 16px 16px 0 0;
  margin-bottom: 14px;
  position: relative;
}
.rps-back {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 0.84rem;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 8px;
}
.rps-back:hover { background: rgba(255,255,255,0.3); }
.rps-fam-h-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rps-fam-h-emoji { font-size: 2.2rem; }
.rps-fam-header h2 { margin: 0; font-size: 1.4rem; }
.rps-fam-h-desc {
  margin: 6px 0 0;
  opacity: 0.9;
  font-size: 0.88rem;
}

/* Liste d'items */
.rps-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 24px;
}
.rps-item-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e3e7ee;
  border-radius: 8px;
  transition: all 0.15s;
}
.rps-item-row:hover { border-color: #b6c4d4; background: #fbfcfe; }
.rps-item-row.en_cours { background: #fff7e8; border-color: #f0c98c; }
.rps-item-row.acquis   { background: #d8f1de; border-color: #2a8b3a; }

.rps-status {
  font-size: 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 4px;
  font-family: inherit;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.rps-status:hover { transform: scale(1.2); }
.rps-item-content { flex: 1; }
.rps-item-txt {
  font-weight: 600;
  color: #2c3e50;
  font-size: 0.94rem;
}
.rps-item-expl {
  font-size: 0.82rem;
  color: #5a6471;
  font-style: italic;
  margin-top: 2px;
}
.rps-fam-footer {
  margin: 14px 24px 0;
  padding: 10px 14px;
  background: #f7faff;
  border-left: 3px solid #4a90d9;
  border-radius: 4px;
  font-size: 0.84rem;
  color: #5a6471;
}

@media (max-width: 700px) {
  .rps-grid { grid-template-columns: 1fr 1fr; padding: 0 12px; }
  .rps-items, .rps-fam-footer { padding-left: 12px; padding-right: 12px; }
  .rps-fam-card { padding: 10px 8px; }
}

/* =====================================================================
   V4.59 — Bouton ✕ pour retirer une carte placée dans un DnD
   ===================================================================== */
.exo-dnd-placed { position: relative; padding-right: 28px; }
.placed-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  background: rgba(255,255,255,0.95);
  color: #a83232;
  border: 1px solid #e8b6b6;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.15s;
  padding: 0;
  line-height: 1;
}
.placed-remove:hover {
  background: #fdecec;
  transform: scale(1.15);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* =====================================================================
   V4.61 — Tutoriel "Première visite" + aide étiquetage
   ===================================================================== */
.tutoriel-card {
  background: linear-gradient(135deg, #fff 0%, #f7faff 100%);
  border-radius: 18px;
  width: min(560px, 92vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 32px 30px 26px;
  border-top: 8px solid #4a90d9;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  position: relative;
  animation: galSlide 0.22s ease-out;
  text-align: center;
}
.tut-progress {
  font-size: 0.84rem;
  color: #5a6471;
  margin-bottom: 6px;
  font-weight: 600;
}
.tut-bar {
  height: 6px;
  background: #f0f4fa;
  border-radius: 3px;
  margin-bottom: 18px;
  overflow: hidden;
}
.tut-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4a90d9 0%, #f0c98c 100%);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.tut-emoji {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 12px;
  animation: bounceIn 0.5s ease;
}
.tutoriel-card h2 {
  margin: 0 0 14px;
  color: #2c3e50;
  font-size: 1.3rem;
}
.tut-texte {
  text-align: left;
  font-size: 0.96rem;
  line-height: 1.6;
  color: #2c3e50;
  background: #fbfcfe;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 18px;
  border-left: 4px solid #4a90d9;
}
.tut-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.tut-actions .btn-primary {
  padding: 10px 22px !important;
  font-size: 1rem !important;
  font-weight: 700;
  background: linear-gradient(135deg, #4a90d9 0%, #2c3e50 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 24px !important;
}

/* Aide pré-remplissage étiquetage */
.etiq-prefill {
  background: #fff7e8;
  border: 1px dashed #f0c98c;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.etiq-prefill-icon { font-size: 1.2rem; }
.etiq-prefill-txt { color: #6d4400; font-size: 0.88rem; font-weight: 600; flex: 1; min-width: 200px; }
.etiq-prefill .btn-sm { padding: 5px 12px; font-size: 0.84rem; }

/* =====================================================================
   V4.62 — Dashboard visuel des évaluations (radar + tuiles colorées)
   ===================================================================== */
.dashboard-eval {
  background: linear-gradient(135deg, #f7faff 0%, #fbfcfe 100%);
  border: 1px solid #e3e7ee;
  border-radius: 16px;
  padding: 18px 22px;
  margin: 16px 0 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Bandeau résumé */
.dash-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 18px;
  border: 1px solid #e3e7ee;
}
.ds-emoji { font-size: 2.6rem; line-height: 1; }
.ds-text { flex: 1; }
.ds-titre { font-size: 1.1rem; color: #2c3e50; font-weight: 700; }
.ds-sous { font-size: 0.88rem; color: #5a6471; margin-top: 4px; }
.ds-stat-pill {
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.92rem;
  white-space: nowrap;
}

/* Grille radar + tuiles */
.dash-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
}

/* Radar */
.dash-radar-box {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #e3e7ee;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dash-radar-titre {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 0.96rem;
  align-self: flex-start;
}
.dash-radar-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}
.dash-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: #5a6471;
}
.dl-item { display: inline-flex; align-items: center; gap: 4px; }
.dl-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
}

/* Tuiles */
.dash-tiles-box {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #e3e7ee;
}
.dash-tiles-titre {
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 0.96rem;
}
.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.dash-tile {
  border: 2px solid #d3d8e0;
  border-radius: 10px;
  padding: 12px 10px;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  color: inherit;
}
.dash-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}
.dt-num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.dt-titre {
  font-size: 0.78rem;
  color: #2c3e50;
  font-weight: 600;
  line-height: 1.2;
  min-height: 2.4em;
}
.dt-note {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}
.dt-note small { font-size: 0.7rem; opacity: 0.7; font-weight: 600; }
.dt-status {
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 800px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-radar-box { max-width: none; }
  .dash-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .dt-note { font-size: 1.4rem; }
}

/* =====================================================================
   V4.63 — Confettis de victoire
   ===================================================================== */
.confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -30px;
  border-radius: 2px;
  animation: confetti-fall ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--shift, 0), 110vh) rotate(var(--rot, 720deg)); opacity: 0.85; }
}

/* =====================================================================
   V4.63 — Bulles à éclater
   ===================================================================== */
.bulles-card {
  background: linear-gradient(180deg, #eaf3fb 0%, #d2e7f7 100%);
  border-radius: 18px;
  width: min(640px, 96vw);
  height: min(640px, 88vh);
  display: flex;
  flex-direction: column;
  padding: 16px 20px 12px;
  position: relative;
  border-top: 6px solid #4a90d9;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  overflow: hidden;
}
.bulles-card h2 {
  margin: 0 0 4px;
  text-align: center;
  color: #1f5c8b;
  font-size: 1.4rem;
}
.bulles-stats {
  text-align: center;
  margin: 0 0 8px;
  color: #2c3e50;
  font-size: 0.94rem;
}
.bulles-stats b { color: #1f5c8b; font-size: 1.1rem; }
.bulles-zone {
  flex: 1;
  position: relative;
  border-radius: 12px;
  background: linear-gradient(180deg, #cfe5fb 0%, #a5c8e8 100%);
  overflow: hidden;
  margin-bottom: 8px;
}
.bulles-hint {
  text-align: center;
  margin: 0;
  color: #1f5c8b;
  font-size: 0.84rem;
  font-style: italic;
}
.bulle {
  position: absolute;
  bottom: -80px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  cursor: pointer;
  animation: bulle-rise linear forwards;
  box-shadow: inset -8px -8px 18px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.1s;
  font-family: inherit;
}
.bulle:hover { transform: scale(1.08); }
.bulle.pop {
  animation: bulle-pop 0.35s ease-out forwards;
  pointer-events: none;
}
@keyframes bulle-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0.95; }
  10%  { opacity: 1; }
  100% { transform: translateY(-700px) translateX(20px); opacity: 0; }
}
@keyframes bulle-pop {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.7; }
  100% { transform: scale(0.2); opacity: 0; }
}

/* =====================================================================
   V4.63 — Roue des défis
   ===================================================================== */
.roue-card {
  background: linear-gradient(135deg, #fff 0%, #fff7e8 100%);
  border-radius: 18px;
  width: min(480px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 20px 24px 22px;
  position: relative;
  border-top: 6px solid #f0c98c;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  text-align: center;
}
.roue-card h2 {
  margin: 0 0 4px;
  color: #6d4400;
  font-size: 1.4rem;
}
.roue-intro {
  margin: 0 0 14px;
  color: #5a6471;
  font-style: italic;
  font-size: 0.92rem;
}
.roue-wrap {
  position: relative;
  margin: 0 auto 14px;
  width: min(360px, 90%);
  aspect-ratio: 1;
}
.roue-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: #c25a5a;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 2;
  line-height: 1;
}
.roue-spinner {
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
}
.roue-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.roue-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.roue-actions .btn-primary {
  padding: 12px 24px !important;
  font-size: 1rem !important;
  font-weight: 700;
  background: linear-gradient(135deg, #f0c98c 0%, #d4a350 100%) !important;
  color: #5a3700 !important;
  border: none !important;
  border-radius: 24px !important;
  box-shadow: 0 4px 12px rgba(212, 163, 80, 0.3);
}
.roue-resultat {
  background: #d8f1de;
  border: 2px solid #2a8b3a;
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0;
  animation: bounceIn 0.5s ease;
}
.roue-winner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.rw-emoji { font-size: 3rem; line-height: 1; }
.rw-titre { font-size: 1rem; color: #1f5e36; }
.rw-titre b { font-size: 1.15rem; }

/* Cartes "fun" dans Entraîne-toi (relief sympa) */
.rev-card-fun {
  background: linear-gradient(135deg, #fff 0%, #fff7e8 100%);
  border-color: #f0c98c;
}
.rev-card-fun:hover {
  background: linear-gradient(135deg, #fff7e8 0%, #ffeed1 100%);
  border-color: #d4a350;
}

/* =====================================================================
   V4.64 — Améliorations page d'accueil (greeting, alerte identité,
   numéros timeline, badge export adouci)
   ===================================================================== */

/* Salutation personnalisée en haut */
.home-greeting {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #fff7e8 0%, #ffeed1 100%);
  border-radius: 24px;
  margin-bottom: 14px;
  border: 1px solid #f0c98c;
  font-size: 1.05rem;
  flex-wrap: wrap;
}
.hg-emoji { font-size: 1.6rem; line-height: 1; }
.hg-text { color: #6d4400; font-weight: 600; flex: 1; min-width: 200px; }
.hg-text b { color: #2c3e50; font-weight: 800; }
.hg-stats {
  background: #fff;
  border: 1px solid #f0c98c;
  color: #6d4400;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.86rem;
  font-weight: 700;
}

/* Alerte "fiche identité vide" */
.home-alerte-identite {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #eaf3fb 0%, #d2e7f7 100%);
  border: 2px solid #4a90d9;
  border-radius: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  box-shadow: 0 4px 12px rgba(74, 144, 217, 0.15);
}
.hai-emoji { font-size: 2.2rem; }
.hai-text { flex: 1; min-width: 220px; }
.hai-text b { display: block; color: #1f5c8b; font-size: 1.05rem; margin-bottom: 2px; }
.hai-text small { color: #4a6680; font-size: 0.88rem; }
.home-alerte-identite .btn-primary {
  background: linear-gradient(135deg, #4a90d9 0%, #1f5c8b 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 22px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* Numéros sous les ronds de la timeline */
.frise-num {
  position: absolute;
  top: 22px; /* sous le rond */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a6471;
  background: #fff;
  border: 1px solid #d3d8e0;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
}
.frise-step.frise-done .frise-num,
.frise-step.frise-progress .frise-num {
  color: #2c3e50;
  border-color: #4a90d9;
  background: #eaf3fb;
}

/* Badge export adouci */
.export-indicator.soft {
  background: #f0f4fa !important;
  color: #5a6471 !important;
  border: 1px solid #d3d8e0 !important;
  font-weight: 500;
}

/* =====================================================================
   V4.66 — Jeu Memory + bouton fun dans bloc révision module
   ===================================================================== */
.memory-card {
  background: linear-gradient(135deg, #fff 0%, #fff7e8 100%);
  border-radius: 18px;
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px;
  border-top: 6px solid #f0c98c;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
  position: relative;
  animation: galSlide 0.22s ease-out;
}
.memory-card h2 {
  margin: 0 0 4px;
  text-align: center;
  color: #6d4400;
  font-size: 1.3rem;
}
.mem-intro {
  text-align: center;
  color: #5a6471;
  margin: 0 0 12px;
  font-size: 0.92rem;
}
.mem-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #f0c98c;
  border-radius: 22px;
  padding: 8px 16px;
  margin-bottom: 14px;
  font-size: 0.92rem;
  color: #6d4400;
  flex-wrap: wrap;
}
.mem-stats b { color: #2c3e50; }

.mem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  perspective: 1000px;
}
.mem-tile {
  aspect-ratio: 1;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}
.mem-tile.flipped { transform: rotateY(180deg); }
.mem-tile.matched .mem-tile-front {
  background: linear-gradient(135deg, #d8f1de 0%, #9ed8a8 100%);
  border-color: #2a8b3a;
}
.mem-tile-back, .mem-tile-front {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-weight: 700;
  border: 2px solid;
  padding: 4px;
  text-align: center;
  font-size: 0.84rem;
  line-height: 1.2;
  word-break: break-word;
  hyphens: auto;
}
.mem-tile-back {
  background: linear-gradient(135deg, #4a90d9 0%, #2c3e50 100%);
  color: #fff;
  border-color: #1f5c8b;
  font-size: 1.8rem;
}
.mem-tile-front {
  background: linear-gradient(135deg, #fff 0%, #fff7e8 100%);
  color: #2c3e50;
  border-color: #f0c98c;
  transform: rotateY(180deg);
}

.mem-end {
  text-align: center;
  margin-top: 18px;
  padding: 16px;
  background: #d8f1de;
  border: 2px solid #2a8b3a;
  border-radius: 12px;
  animation: bounceIn 0.5s ease;
}
.mem-end-emoji { font-size: 3rem; line-height: 1; }
.mem-end h3 { margin: 8px 0 4px; color: #1f5e36; }
.mem-end-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Boutons "fun" dans le bloc Pour réviser */
.review-link-fun {
  background: linear-gradient(135deg, #fff7e8 0%, #ffeed1 100%) !important;
  border-color: #f0c98c !important;
}
.review-link-fun:hover {
  background: linear-gradient(135deg, #ffeed1 0%, #f0c98c 100%) !important;
  transform: translateY(-3px);
}

@media (max-width: 700px) {
  .mem-grid { grid-template-columns: repeat(2, 1fr); }
  .mem-tile-front, .mem-tile-back { font-size: 0.76rem; }
  .mem-tile-back { font-size: 1.4rem; }
}

/* =====================================================================
   V4.67 — Mode enseignant (toggle + alerte modification post-validation)
   ===================================================================== */
.sidebar-tool-teacher {
  border-color: #d4a350 !important;
  background: linear-gradient(135deg, #fff7e8 0%, #ffeed1 100%) !important;
  color: #6d4400 !important;
}
.sidebar-tool-teacher.active {
  background: linear-gradient(135deg, #2a8b3a 0%, #1f5e36 100%) !important;
  color: #fff !important;
  border-color: #2a8b3a !important;
  box-shadow: 0 0 0 3px rgba(42, 139, 58, 0.25);
}
.sidebar-tool-teacher.active b {
  background: rgba(255,255,255,0.25);
  padding: 1px 6px;
  border-radius: 8px;
  margin-left: 4px;
}

/* Alerte modification post-validation */
.alerte-modif-post {
  margin-top: 8px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #fdecec 0%, #f8d4d4 100%);
  border: 2px solid #c25a5a;
  border-radius: 8px;
  color: #7a2222;
  font-size: 0.88rem;
  line-height: 1.4;
}
.alerte-modif-post b { color: #a83232; font-weight: 800; }

/* =====================================================================
   V4.69 — Mode facile pour les épreuves (élèves fragiles)
   ===================================================================== */
.epreuve-mode {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #f7faff 0%, #eaf3fb 100%);
  border: 2px solid #b6cce0;
  border-radius: 12px;
  margin: 14px 0;
  flex-wrap: wrap;
}
.epreuve-mode.on {
  background: linear-gradient(135deg, #eaf7ee 0%, #d8efe0 100%);
  border-color: #2a8b3a;
}
.em-icon { font-size: 2rem; line-height: 1; }
.em-text { flex: 1; min-width: 220px; }
.em-text b { display: block; color: #2c3e50; font-size: 1.05rem; margin-bottom: 2px; }
.em-text small { color: #5a6471; font-size: 0.86rem; }
.epreuve-mode.on .em-text b { color: #1f5e36; }

/* Mots-clés cliquables sous une question phrase en mode facile */
.phrase-mots-cles {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff7e8;
  border: 1px dashed #f0c98c;
  border-radius: 8px;
}
.phrase-mots-cles > small {
  color: #6d4400;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.pmc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pmc-chip {
  background: #fff;
  border: 1px solid #f0c98c;
  color: #6d4400;
  padding: 4px 12px;
  border-radius: 14px;
  font-size: 0.86rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.pmc-chip:hover { background: #fff7e8; transform: translateY(-1px); }
.pmc-indice {
  margin-top: 8px;
  padding: 6px 10px;
  background: #f0f4fa;
  border-left: 3px solid #4a90d9;
  border-radius: 4px;
}
.pmc-indice small { color: #1f5c8b; }

/* =====================================================================
   V4.73 — Cours aérés : Markdown léger + glossaire + encadrés
   ===================================================================== */
.cours-body { font-size: 1rem; line-height: 1.65; color: #1a2330; }
.cours-body p.cours-text { margin: 8px 0; }
.cours-body h5.cours-soustitre {
  font-size: 1.05rem; color: #1f4f86; margin: 14px 0 6px;
  font-weight: 700; letter-spacing: .01em;
}
.cours-body ul.cours-list, .cours-body ol.cours-list {
  margin: 8px 0 8px 22px; padding: 0;
}
.cours-body ul.cours-list li, .cours-body ol.cours-list li {
  margin: 4px 0; padding-left: 4px;
}
.cours-body ul.cours-list li::marker { color: #1f4f86; }
.cours-body strong { color: #1a2330; font-weight: 700; background: linear-gradient(transparent 60%, #fff3a8 60%); padding: 0 2px; }

/* Encadrés thématiques */
.cours-encadre {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 12px 0; padding: 12px 16px;
  border-radius: 8px; border-left: 4px solid;
  font-size: .98rem;
}
.cours-encadre .enc-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.2; }
.cours-encadre .enc-body { flex: 1; line-height: 1.55; }
.cours-encadre .enc-body strong { background: rgba(255, 255, 255, 0.6); }
.encadre-astuce { background: #eaf6ed; border-color: #2e8b57; color: #1f6b3d; }
.encadre-attention { background: #fff4e0; border-color: #d97706; color: #7c4a00; }
.encadre-cle { background: #eaf2fb; border-color: #1f4f86; color: #163c66; }

/* Glossaire — termes inline cliquables */
.glo-term {
  border-bottom: 1.5px dotted #1f4f86;
  cursor: help;
  color: inherit;
  padding-bottom: 1px;
  transition: background .15s;
}
.glo-term:hover { background: #fff3a8; border-bottom-style: solid; }
.glo-term:focus { outline: 2px solid #1f4f86; outline-offset: 2px; border-radius: 2px; }

/* Modale Glossaire complet */
.glo-list .glo-entry {
  padding: 12px 0; border-bottom: 1px solid #e8ecf0;
}
.glo-list .glo-entry:last-child { border-bottom: 0; }
.glo-list .glo-entry h4 {
  margin: 0 0 4px; color: #1f4f86; font-size: 1.05rem;
}
.glo-list .glo-entry p {
  margin: 0; line-height: 1.55; color: #2a3340;
}

/* Bouton sidebar Glossaire (réutilise les styles existants) */
.sidebar-tool-btn#sidebar-glossaire .stb-icon { color: #1f4f86; }

/* =====================================================================
   V4.74 — Nouveaux types de questions d'épreuve
   ===================================================================== */

/* Image-choice : QCM avec images en grille 2×2 */
.ic-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px; margin: 8px 0 4px;
}
.ic-card {
  display: flex; flex-direction: column; align-items: stretch;
  background: #fff; border: 2px solid #e0e6ec; border-radius: 8px;
  padding: 6px; cursor: pointer; transition: all .15s;
  font-family: inherit; font-size: .92rem; color: #1a2330;
}
.ic-card:hover:not(:disabled) { border-color: #1f4f86; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(31,79,134,.15); }
.ic-card.selected { border-color: #1f4f86; background: #f0f6fd; }
.ic-card.correct { border-color: #2e8b57; background: #eaf6ed; }
.ic-card.wrong { border-color: #b23a48; background: #fbeae9; }
.ic-card:disabled { cursor: default; }
.ic-img-wrap { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 6px; background: #f4f6f8; }
.ic-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ic-label { padding: 8px 4px 4px; text-align: center; font-weight: 600; line-height: 1.3; }

/* Vrai/Faux */
.vf-options { display: flex; gap: 12px; margin: 8px 0 4px; }
.vf-opt {
  flex: 1; padding: 14px 18px; font-size: 1.05rem; font-weight: 600;
  background: #fff; border: 2px solid #e0e6ec; border-radius: 8px;
  cursor: pointer; transition: all .15s; font-family: inherit; color: #1a2330;
}
.vf-opt:hover:not(:disabled) { border-color: #1f4f86; background: #f0f6fd; }
.vf-opt.selected { border-color: #1f4f86; background: #f0f6fd; }
.vf-opt.correct { border-color: #2e8b57; background: #eaf6ed; color: #1f6b3d; }
.vf-opt.wrong { border-color: #b23a48; background: #fbeae9; color: #8b1e2b; }
.vf-opt:disabled { cursor: default; }

/* Classify : items + zones */
.classify-wrap { margin: 8px 0 4px; }
.classify-consigne { color: #5a6471; margin-bottom: 8px; }
.classify-list { display: flex; flex-direction: column; gap: 8px; }
.classify-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 12px; background: #fafbfc; border: 1px solid #e0e6ec;
  border-radius: 8px; transition: all .15s;
}
.classify-item.correct { border-color: #2e8b57; background: #eaf6ed; }
.classify-item.wrong { border-color: #b23a48; background: #fbeae9; }
.classify-label { display: flex; gap: 10px; align-items: center; }
.classify-thumb { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f4f6f8; }
.classify-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.classify-text { font-weight: 600; line-height: 1.3; }
.classify-zones { display: flex; gap: 6px; flex-wrap: wrap; }
.cz-btn {
  padding: 8px 14px; border: 2px solid #d4d9e0; border-radius: 6px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: .92rem;
  font-weight: 600; transition: all .12s; color: #1a2330;
}
.cz-btn:hover:not(:disabled) { border-color: #1f4f86; }
.cz-btn.selected { background: #1f4f86; color: #fff; border-color: #1f4f86; }
.cz-btn.is-good { outline: 2px dashed #2e8b57; outline-offset: 2px; }
.cz-btn:disabled { cursor: default; opacity: .85; }

/* Ordering eval — flèches haut/bas */
.ord-list { list-style: none; margin: 8px 0 4px; padding: 0; counter-reset: ordnum; }
.ord-item {
  counter-increment: ordnum;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin: 4px 0;
  background: #fafbfc; border: 1px solid #e0e6ec; border-radius: 8px;
}
.ord-item::before {
  content: counter(ordnum);
  background: #1f4f86; color: #fff; border-radius: 50%;
  width: 26px; height: 26px; display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700; font-size: .88rem; flex-shrink: 0;
}
.ord-item.correct { border-color: #2e8b57; background: #eaf6ed; }
.ord-item.wrong { border-color: #b23a48; background: #fbeae9; }
.ord-text { flex: 1; font-weight: 500; }
.ord-controls { display: flex; gap: 4px; }
.ord-controls button {
  width: 28px; height: 28px; border: 1px solid #d4d9e0;
  background: #fff; border-radius: 4px; cursor: pointer;
  font-family: inherit; padding: 0; line-height: 1;
}
.ord-controls button:not(:disabled):hover { background: #f0f6fd; border-color: #1f4f86; }
.ord-controls button:disabled { opacity: .35; cursor: default; }

/* Adaptation responsive : sur petit écran, image_choice passe à 1 colonne */
@media (max-width: 600px) {
  .ic-grid { grid-template-columns: 1fr; }
  .classify-item { grid-template-columns: 1fr; }
  .classify-zones { justify-content: stretch; }
  .cz-btn { flex: 1; }
}

/* V4.75 — Checklist dans un repeater (fournisseurs : labels + critères éco) */
.rep-checklist { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; }
.rep-checklist .rep-check {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid #d4d9e0; border-radius: 16px;
  background: #fff; font-size: .9rem; cursor: pointer;
  transition: all .12s; user-select: none;
}
.rep-checklist .rep-check:hover { border-color: #1f4f86; background: #f0f6fd; }
.rep-checklist .rep-check input { margin: 0; cursor: pointer; }
.rep-checklist .rep-check:has(input:checked) { background: #eaf6ed; border-color: #2e8b57; color: #1f6b3d; font-weight: 600; }

/* V4.76 — Aperçu de l'étiquette liée à une composante du menu */
.cr-etiquette-bloc { margin-top: 14px; }
.etiq-preview {
  border: 2px dashed #1f4f86; border-radius: 8px;
  padding: 12px 14px; background: #fafdff;
  position: relative; line-height: 1.45;
}
.etiq-preview-head {
  border-bottom: 1px solid #d4dee8; padding-bottom: 6px; margin-bottom: 8px;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.etiq-preview-head b { color: #1f4f86; font-size: 1.05rem; }
.etiq-preview-head i { color: #5a6471; font-size: .9rem; }
.etiq-preview-body { font-size: .92rem; color: #2a3340; }
.etiq-preview-body > div { margin: 3px 0; }
.etiq-preview-body .etiq-allerg { color: #b23a48; font-weight: 600; }
.etiq-preview .etiq-go { margin-top: 10px; }

.etiq-empty {
  border: 2px dashed #d97706; border-radius: 8px;
  padding: 12px 14px; background: #fff7eb;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.etiq-empty-icon { font-size: 1.5rem; flex-shrink: 0; }
.etiq-empty > div { flex: 1; min-width: 200px; }
.etiq-empty .hint { margin-top: 4px; color: #7c4a00; }

/* =====================================================================
   V4.76 — Vue Mon projet : étiquette + sourcing intégrés par composante
   ===================================================================== */

/* Étiquette inline sous une composante */
.proj-etiq-card {
  margin-top: 12px;
  border: 2px solid #1f4f86; border-radius: 10px;
  background: linear-gradient(180deg, #fafdff 0%, #fff 100%);
  padding: 10px 14px; box-shadow: 0 2px 8px rgba(31,79,134,.07);
}
.proj-etiq-card-head {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  border-bottom: 1px solid #d4dee8; padding-bottom: 6px; margin-bottom: 8px;
}
.proj-etiq-tag {
  background: #1f4f86; color: #fff; padding: 2px 8px; border-radius: 4px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.proj-etiq-card-head b { color: #1f4f86; font-size: 1.05rem; flex: 1; }
.proj-etiq-card-head i { color: #5a6471; font-size: .9rem; }
.proj-etiq-defs { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .92rem; }
.proj-etiq-defs dt { font-weight: 700; color: #1f4f86; }
.proj-etiq-defs dd { margin: 0; color: #2a3340; }
.proj-etiq-defs dd.alerte { color: #b23a48; font-weight: 600; }

.proj-etiq-line {
  margin-top: 12px; padding: 10px 14px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px dashed #d97706; border-radius: 8px; background: #fff7eb;
  color: #7c4a00; font-size: .92rem;
}

/* Sourcing inline sous une composante */
.proj-sourcing-card {
  margin-top: 10px;
  border: 1.5px solid #2e8b57; border-radius: 10px;
  background: #f6fbf7; padding: 10px 14px;
}
.proj-sourcing-head {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.proj-srcs-tag {
  background: #2e8b57; color: #fff; padding: 2px 8px; border-radius: 4px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.proj-srcs-list { display: flex; flex-direction: column; gap: 6px; }
.proj-srcs-row {
  display: grid; grid-template-columns: minmax(140px, 1fr) minmax(180px, 1.5fr) auto;
  gap: 10px; padding: 6px 0; border-bottom: 1px dashed #d4ebd9;
  align-items: center; font-size: .92rem;
}
.proj-srcs-row:last-child { border-bottom: 0; }
.proj-srcs-row .srcs-type {
  display: inline-block; background: #fff; border: 1px solid #2e8b57;
  color: #1f6b3d; padding: 1px 8px; border-radius: 4px; font-size: .82rem; font-weight: 600;
  margin-right: 4px;
}
.proj-srcs-row .srcs-lieu { color: #2a3340; }
.proj-srcs-row .srcs-prix { color: #7c4a00; font-weight: 600; }
.proj-srcs-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.proj-srcs-pills .pill { font-size: .78rem; padding: 1px 7px; }

.proj-sourcing-line {
  margin-top: 10px; padding: 8px 14px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px dashed #d4d9e0; border-radius: 8px; background: #fafbfc;
  color: #5a6471; font-size: .9rem;
}
.proj-sourcing-line span:first-child { font-size: 1.2rem; }

/* Bloc Sourcing global (vue d'ensemble) */
.bloc-sourcing .srcs-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin: 10px 0 14px;
}
.bloc-sourcing .srcs-stat {
  background: #f6fbf7; border: 1.5px solid #2e8b57; border-radius: 8px;
  padding: 10px; text-align: center;
}
.bloc-sourcing .srcs-stat b { display: block; font-size: 1.6rem; color: #1f6b3d; line-height: 1; }
.bloc-sourcing .srcs-stat span { display: block; font-size: .85rem; color: #2a3340; margin-top: 4px; font-weight: 600; }
.bloc-sourcing .srcs-stat small { display: block; color: #6b7785; font-size: .75rem; margin-top: 2px; }
.bloc-sourcing .srcs-stat-labels { grid-column: 1 / -1; padding: 4px 0; }
.bloc-sourcing .srcs-lbl-line { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bloc-sourcing .srcs-budget {
  border-color: #d97706; background: #fff7eb;
}
.bloc-sourcing .srcs-budget b, .bloc-sourcing .srcs-budget span { color: #7c4a00; }

.srcs-by-shop {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.srcs-shop-group {
  background: #fff; border: 1px solid #d4dee8; border-radius: 8px;
  padding: 10px 14px;
}
.srcs-shop-group h4 {
  margin: 0 0 6px; color: #1f4f86; font-size: 1rem;
  display: flex; gap: 8px; align-items: baseline;
  border-bottom: 1px solid #e8ecf0; padding-bottom: 4px;
}
.srcs-shop-count {
  background: #1f4f86; color: #fff; border-radius: 12px;
  padding: 1px 8px; font-size: .78rem; font-weight: 700;
}
.srcs-shop-group ul { margin: 4px 0 0; padding-left: 18px; }
.srcs-shop-group li { margin: 4px 0; line-height: 1.5; font-size: .92rem; }
.srcs-mini-lieu { color: #5a6471; }
.srcs-mini-prix { color: #7c4a00; font-weight: 600; }
.pill.mini { font-size: .72rem; padding: 0 6px; }

.srcs-actions { margin-top: 10px; text-align: right; }
.btn-xs { font-size: .8rem; padding: 3px 10px; }

/* Responsive */
@media (max-width: 720px) {
  .proj-srcs-row { grid-template-columns: 1fr; gap: 4px; }
  .proj-etiq-defs { grid-template-columns: 1fr; }
  .proj-etiq-defs dt { margin-top: 6px; }
}

/* =====================================================================
   V4.77 — Parcours : groupement visuel J'APPRENDS / JE CRÉE
   ===================================================================== */
.parcours-cat-group {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 2px solid;
}
.parcours-cat-group.cat-apprendre { background: #eef4fb; border-color: #1f4f86; }
.parcours-cat-group.cat-projet    { background: #eef9f1; border-color: #2e8b57; }
.parcours-cat-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1.5px dashed rgba(0,0,0,.12);
}
.parcours-cat-badge {
  font-size: 1.6rem; flex-shrink: 0;
  background: #fff; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.parcours-cat-titles h3 {
  margin: 0 0 2px; font-size: 1.05rem;
  color: inherit; letter-spacing: .01em;
}
.cat-apprendre .parcours-cat-titles h3 { color: #163c66; }
.cat-projet    .parcours-cat-titles h3 { color: #1f6b3d; }
.parcours-cat-titles p {
  margin: 0; font-size: .85rem; color: #5a6471;
  line-height: 1.4;
}
.parcours-cat-rows { display: flex; flex-direction: column; gap: 6px; }
.parcours-cat-rows .parcours-row { background: #fff; }

/* =====================================================================
   V4.77 — Vues d'application (Créer mes étiquettes, Choisir mes fournisseurs)
   ===================================================================== */
.vue-application { max-width: 920px; margin: 0 auto; padding-bottom: 40px; }
.appli-head {
  background: linear-gradient(135deg, #eef9f1 0%, #d4ebd9 100%);
  border-left: 5px solid #2e8b57;
  padding: 18px 22px; border-radius: 10px; margin-bottom: 18px;
}
.appli-badge {
  display: inline-block; background: #2e8b57; color: #fff;
  padding: 3px 10px; border-radius: 4px; font-size: .82rem;
  font-weight: 700; letter-spacing: .04em; margin-bottom: 6px;
}
.appli-head h2 { color: #1f6b3d; margin: 4px 0 8px; font-size: 1.5rem; }
.appli-head p { margin: 4px 0; line-height: 1.5; color: #2a3340; }
.appli-head .hint { color: #5a6471; font-size: .88rem; margin-top: 8px; }

.vue-compo-card {
  background: #fff; border: 2px solid #d4dee8;
  border-radius: 12px; padding: 14px 18px; margin: 14px 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.vue-compo-banner {
  display: flex; gap: 10px; align-items: center;
  background: #1f4f86; color: #fff;
  padding: 6px 14px; border-radius: 6px; margin: -4px -4px 12px;
  font-weight: 700; letter-spacing: .08em;
}
.vue-compo-banner span:first-child { font-size: 1.4rem; }
.vue-compo-banner span:last-child { font-size: 1rem; }
.vue-compo-nom {
  font-size: 1.15rem; color: #1f4f86; font-weight: 700;
  margin: 4px 0 12px; padding: 6px 0;
  border-bottom: 1px dashed #d4dee8;
}
.vue-compo-cta { margin-top: 12px; }
.vue-compo-actions { margin-top: 10px; text-align: right; }

.vue-form-box .field { margin-bottom: 10px; }
.vue-form-box label {
  display: block; font-weight: 600; margin-bottom: 4px;
  color: #2a3340; font-size: .92rem;
}
.vue-form-box input, .vue-form-box textarea, .vue-form-box select {
  width: 100%; padding: 8px 10px;
  border: 1px solid #d4dee8; border-radius: 6px;
  font-family: inherit; font-size: .95rem;
}
.vue-form-box textarea { min-height: 60px; }

.vue-fourn-list { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.fourn-form {
  border: 1px solid #d4dee8; border-radius: 8px;
  padding: 12px 14px; background: #fafdff;
}
.fourn-form-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid #e8ecf0;
}
.fourn-form-head b { color: #1f4f86; font-size: 1.02rem; }
.fourn-form .field { margin: 8px 0; }
.fourn-form label {
  display: block; font-weight: 600; margin-bottom: 4px;
  color: #2a3340; font-size: .9rem;
}
.fourn-form input, .fourn-form select, .fourn-form textarea {
  width: 100%; padding: 6px 10px;
  border: 1px solid #d4dee8; border-radius: 6px;
  font-family: inherit; font-size: .92rem;
}
.fourn-form .hint { font-size: .82rem; color: #6b7785; margin-top: 3px; }

/* =====================================================================
   V4.77 — Vue « Mon dossier projet » (rendu magazine HTML)
   ===================================================================== */
.dossier-view {
  max-width: 900px; margin: 0 auto;
  background: #fff;
  font-family: "Garamond", "Times New Roman", Georgia, serif;
  color: #1a2330; line-height: 1.6;
  padding: 0 0 40px;
}
.doss-cover {
  text-align: center; padding: 40px 30px 30px;
  border-bottom: 4pt double #1f3a68;
  background: linear-gradient(180deg, #fafdff 0%, #fff 100%);
}
.doss-eyebrow {
  font-size: .85rem; letter-spacing: .35em; text-transform: uppercase;
  color: #6b7785; font-weight: 700;
}
.doss-titre {
  font-size: 2.6rem; color: #1f3a68; font-weight: 700;
  margin: 14px 0 10px; letter-spacing: .02em;
}
.doss-author { font-size: 1.05rem; color: #444; font-style: italic; }
.doss-desc { font-size: 1.05rem; color: #2a3340; max-width: 600px; margin: 18px auto 0; }
.doss-photo { display: block; margin: 20px auto 0; max-width: 320px; max-height: 240px; border: 1px solid #d2dae3; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.doss-h2 {
  color: #1f3a68; font-size: 1.6rem; font-weight: 700;
  margin: 30px 30px 16px; padding-bottom: 6px;
  border-bottom: 2px solid #c9a14a;
  font-family: "Garamond", "Times New Roman", serif;
}

.doss-argum { padding: 0 30px; display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 24px; }
.doss-pillier {
  padding: 14px 18px; border-radius: 8px;
  border-left: 4px solid;
}
.doss-pillier h3 { margin: 0 0 6px; font-size: 1.1rem; }
.doss-pillier p { margin: 0; font-size: .98rem; }
.doss-pillier.doss-eq { background: #eef4fb; border-color: #1f3a68; }
.doss-pillier.doss-eq h3 { color: #1f3a68; }
.doss-pillier.doss-eco { background: #eef9f1; border-color: #2e6b3f; }
.doss-pillier.doss-eco h3 { color: #2e6b3f; }

.doss-compos { padding: 0 30px; }
.doss-compo-card {
  background: #fafdff;
  border: 1px solid #d4dee8; border-radius: 10px;
  padding: 20px 22px; margin: 18px 0;
  box-shadow: 0 1px 6px rgba(31, 58, 104, 0.06);
}
.doss-compo-head {
  display: flex; gap: 14px; align-items: center;
  background: #1f3a68; color: #fff;
  padding: 8px 18px; border-radius: 6px; margin: -10px -10px 14px;
}
.doss-compo-icon { font-size: 1.6rem; }
.doss-compo-lbl { font-size: 1.1rem; font-weight: 700; letter-spacing: .12em; }
.doss-compo-nom {
  font-size: 1.5rem; color: #1f3a68; font-weight: 700;
  text-align: center; margin: 4px 0 10px;
  font-family: "Garamond", serif;
}
.doss-ing-list {
  list-style: none; padding: 0; margin: 6px 0 12px;
  display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center;
}
.doss-ing-list li {
  background: #fff; border: 1px solid #d4dee8;
  padding: 3px 12px; border-radius: 14px;
  font-size: .92rem;
}
.doss-ing-list li small { color: #6b7785; }
.doss-compo-body { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 14px; }
@media (max-width: 720px) { .doss-compo-body { grid-template-columns: 1fr; } .doss-argum { grid-template-columns: 1fr; } }

.doss-etiq, .doss-fourn {
  background: #fff; border-radius: 8px; padding: 12px 14px;
}
.doss-etiq { border: 2px dashed #1f3a68; }
.doss-fourn { border: 2px solid #2e6b3f; }
.doss-etiq-tag, .doss-fourn-tag {
  display: inline-block; padding: 2px 10px; border-radius: 4px;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  margin-bottom: 8px;
}
.doss-etiq-tag { background: #1f3a68; color: #fff; }
.doss-fourn-tag { background: #2e6b3f; color: #fff; }
.doss-etiq-nom { font-size: 1.15rem; color: #1f3a68; font-weight: 700; }
.doss-etiq-slogan { font-style: italic; color: #5a6471; margin-bottom: 6px; }
.doss-etiq dl { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: .9rem; }
.doss-etiq dt { font-weight: 700; color: #1f3a68; }
.doss-etiq dd { margin: 0; color: #2a3340; }
.doss-etiq dd.alerte { color: #b23a48; font-weight: 600; }

.doss-fourn-tab {
  width: 100%; border-collapse: collapse; font-size: .88rem; margin-top: 6px;
}
.doss-fourn-tab th, .doss-fourn-tab td { border: 1px solid #e0e6ec; padding: 4px 8px; text-align: left; }
.doss-fourn-tab th { background: #eef9f1; color: #1f6b3d; font-size: .82rem; }
.doss-pill {
  display: inline-block; background: #d4ebd9; color: #1f6b3d;
  padding: 1px 8px; border-radius: 10px; font-size: .78rem;
  font-weight: 600; margin: 1px 2px 1px 0;
}
.doss-empty {
  font-style: italic; color: #999; padding: 14px;
  text-align: center; border: 1.5px dashed #d4d9e0; border-radius: 8px;
  background: #fafbfc;
}
.doss-plateau {
  padding: 0 30px; margin-top: 20px;
}
.doss-plateau p { margin: 6px 0; font-size: 1rem; }

/* Bouton Mon dossier projet dans sidebar */
.nav-btn-dossier {
  background: linear-gradient(135deg, #1f3a68 0%, #2e6b3f 100%);
  color: #fff !important; font-weight: 600;
}
.nav-btn-dossier:hover { background: linear-gradient(135deg, #163059 0%, #1f4f30 100%); }

/* V4.77 fix — pastilles de checklist : empêcher le retour à la ligne dans le texte */
.rep-checklist .rep-check { white-space: nowrap; }
.rep-checklist { align-items: center; }

/* =====================================================================
   V4.78 — UX polish : empty state, scroll auto, suite logique, modif dossier
   ===================================================================== */

/* Empty state riche */
.vue-empty-big {
  text-align: center; padding: 40px 24px;
  background: linear-gradient(180deg, #fafdff 0%, #fff 100%);
  border: 2px dashed #1f4f86; border-radius: 12px;
  margin: 20px 0;
}
.vue-empty-icon { font-size: 4rem; line-height: 1; margin-bottom: 12px; }
.vue-empty-big h3 { color: #1f4f86; font-size: 1.4rem; margin: 0 0 8px; }
.vue-empty-big p { color: #2a3340; font-size: 1.05rem; max-width: 540px; margin: 0 auto 20px; line-height: 1.5; }
.btn-big {
  font-size: 1.1rem; padding: 12px 24px;
  font-weight: 700; box-shadow: 0 4px 12px rgba(31,79,134,.18);
}
.btn-big:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(31,79,134,.25); }

/* Suite logique en bas des vues d'application */
.vue-next-step {
  margin-top: 24px;
  padding: 20px 24px; text-align: center;
  background: linear-gradient(135deg, #eef9f1 0%, #d4ebd9 100%);
  border-left: 5px solid #2e8b57;
  border-radius: 10px;
}
.vue-next-step h4 { color: #1f6b3d; margin: 0 0 6px; font-size: 1.15rem; }
.vue-next-step p { margin: 0 0 14px; color: #2a3340; }

/* Scroll auto : flash visuel sur la composante ciblée */
.compo-card-flash {
  animation: compoFlash 1.5s ease-out;
}
@keyframes compoFlash {
  0%   { box-shadow: 0 0 0 4px rgba(31,79,134,0); }
  20%  { box-shadow: 0 0 0 6px rgba(31,79,134,.5); }
  100% { box-shadow: 0 0 0 4px rgba(31,79,134,0); }
}

/* Boutons "Modifier" dans Mon dossier projet */
.doss-compo-head { gap: 14px; flex-wrap: wrap; }
.doss-compo-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.doss-edit {
  background: rgba(255,255,255,.18); color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  font-size: .78rem; padding: 3px 10px;
  font-weight: 600; cursor: pointer; border-radius: 4px;
  transition: all .15s; font-family: inherit;
}
.doss-edit:hover { background: #fff; color: #1f3a68; }

/* =====================================================================
   V4.79 — Hint pédagogique dans Composer mon repas + Lightbox banque
   ===================================================================== */

/* Hint pédagogique dans renderComposanteRepas */
.cr-pedago-hint {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 14px; margin: 8px 0 12px;
  background: #fff8e0; border-left: 4px solid #d4a350;
  border-radius: 6px; line-height: 1.45;
}
.cph-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.cph-txt { font-size: .92rem; color: #5a3e00; }
.cph-txt b, .cph-txt strong { color: #3d2900; }

/* Lightbox banque d'images */
.lightbox-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(15, 23, 42, 0.92);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.05); }
.lightbox-content {
  max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.lightbox-content img {
  max-width: 100%; max-height: 80vh;
  object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.lightbox-caption {
  color: #fff; font-size: 1rem; font-weight: 500; text-align: center;
  background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 4px;
}

/* =====================================================================
   V4.80 — Refonte sidebar : Mes cours / Concevoir mon projet / Mon œuvre
   ===================================================================== */

/* Bouton "Mes cours" dans la sidebar */
.nav-btn-cours {
  background: linear-gradient(135deg, #1f4f86 0%, #2c6cb6 100%);
  color: #fff !important; font-weight: 600;
}
.nav-btn-cours:hover { background: linear-gradient(135deg, #163059 0%, #1f4f86 100%); }

/* Header de Mes cours (vue parcours filtrée) */
.parcours-head-cours { background: linear-gradient(135deg, #eef4fb 0%, #d4e3f5 100%); border-left: 5px solid #1f4f86; }
.parcours-head-cours .parcours-eyebrow { color: #1f4f86; font-weight: 700; }
.parcours-head-cours h2 { color: #163059; }

/* Hub des étapes de création (dans Concevoir mon projet) */
.projet-hub { margin: 18px 0 20px; }
.projet-hub-titre {
  font-size: 1.1rem; color: #1f6b3d;
  margin: 0 0 12px; padding-bottom: 6px;
  border-bottom: 2px solid #2e8b57;
}
.projet-hub-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.hub-card {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px; padding: 16px 18px;
  background: #fff; border: 2px solid #d4ebd9; border-radius: 10px;
  text-align: left; cursor: pointer; transition: all .15s;
  font-family: inherit; color: #1a2330;
  box-shadow: 0 1px 4px rgba(46, 139, 87, 0.06);
}
.hub-card:hover {
  border-color: #2e8b57; transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(46, 139, 87, 0.16);
}
.hub-card .hub-icon { font-size: 1.8rem; line-height: 1; margin-bottom: 4px; }
.hub-card .hub-label { font-size: 1.02rem; font-weight: 700; color: #1f6b3d; }
.hub-card .hub-sub { font-size: .82rem; color: #5a6471; line-height: 1.4; }

/* =====================================================================
   V4.81 — Refonte page d'accueil (home-v2)
   Salutation + timeline 2 ans + carte "aujourd'hui" + victoires + stats
   ===================================================================== */
.home-v2 { max-width: 1080px; margin: 0 auto; padding-bottom: 40px; }

/* 1. Salutation */
.h2-greet {
  background: linear-gradient(135deg, #1f4f86 0%, #2e8b57 100%);
  color: #fff; padding: 22px 26px; border-radius: 14px;
  margin-bottom: 18px; box-shadow: 0 4px 16px rgba(31,79,134,.18);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.h2-greet-main { display: flex; align-items: center; gap: 16px; }
.h2-greet-emoji { font-size: 2.5rem; line-height: 1; }
.h2-greet-text { font-size: 1.4rem; font-weight: 600; letter-spacing: .01em; }
.h2-greet-meta { font-size: .92rem; opacity: .9; margin-top: 2px; text-transform: capitalize; }
.h2-greet-menu {
  background: rgba(255,255,255,.18); padding: 8px 16px; border-radius: 24px;
  font-size: 1rem; backdrop-filter: blur(4px);
}

/* 2. Alerte identité */
.h2-alerte-identite {
  background: #fff7eb; border-left: 5px solid #d97706;
  padding: 18px 22px; border-radius: 10px; margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.h2-alerte-identite .hai-emoji { font-size: 2rem; }
.h2-alerte-identite .hai-text { flex: 1; min-width: 200px; }
.h2-alerte-identite .hai-text b { color: #7c4a00; font-size: 1.05rem; display: block; }
.h2-alerte-identite .hai-text small { color: #5a3e00; }

/* 3. Progression 2 ans */
.h2-progress { margin-bottom: 24px; }
.h2-section-title { color: #1f4f86; font-size: 1.25rem; margin: 0 0 14px; }
.h2-year { background: #fff; border: 1.5px solid #d4dee8; border-radius: 12px; padding: 16px 20px; margin-bottom: 14px; }
.h2-year-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.h2-year-label { font-weight: 700; letter-spacing: .08em; color: #1f4f86; font-size: .95rem; }
.h2-year-1 .h2-year-label { color: #1f4f86; }
.h2-year-2 .h2-year-label { color: #2e6b3f; }
.h2-year-pct { font-size: 1.6rem; font-weight: 700; color: #1f6b3d; }
.h2-year-1 .h2-year-pct { color: #1f4f86; }
.h2-bar {
  height: 12px; border-radius: 6px; overflow: hidden;
  background: #e8ecf0; margin-bottom: 12px;
}
.h2-bar-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #2c6cb6 0%, #2e8b57 100%);
  transition: width .6s ease;
}
.h2-locked {
  padding: 12px 16px; background: #f4f6f8; color: #6b7785;
  border-radius: 8px; font-style: italic; text-align: center;
}

.h2-jalons { display: flex; flex-wrap: wrap; gap: 6px; }
.h2-jalon-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px;
  border: 1.5px solid #d4dee8; background: #fafbfc;
  cursor: pointer; transition: all .15s;
  font-family: inherit; font-size: .9rem; color: #1a2330;
}
.h2-jalon-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.h2-jalon-pill .h2-pill-icon { font-size: 1rem; }
.h2-jalon-pill .h2-pill-note {
  background: #2e8b57; color: #fff; border-radius: 10px;
  padding: 1px 8px; font-size: .78rem; font-weight: 700; margin-left: 4px;
}
.h2-pill-done { background: #eaf6ed; border-color: #2e8b57; color: #1f6b3d; font-weight: 600; }
.h2-pill-progress { background: #fff7eb; border-color: #d97706; color: #7c4a00; font-weight: 600; }
.h2-pill-todo { opacity: .75; }

/* 4. Carte Aujourd'hui + Victoires */
.h2-dual {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 16px; margin-bottom: 24px;
}
@media (max-width: 740px) { .h2-dual { grid-template-columns: 1fr; } }
.h2-today-card, .h2-victoires-card {
  background: #fff; border: 1.5px solid #d4dee8; border-radius: 14px;
  padding: 20px 22px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.h2-card-eyebrow {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
  color: #6b7785; font-weight: 700; margin-bottom: 10px;
}
.h2-today-card {
  background: linear-gradient(135deg, #fafdff 0%, #eef4fb 100%);
  border-color: #1f4f86; text-align: center;
}
.h2-today-emoji { font-size: 3.5rem; line-height: 1; margin: 8px 0; }
.h2-today-titre { font-size: 1.4rem; font-weight: 700; color: #1f4f86; line-height: 1.3; margin-bottom: 4px; }
.h2-today-sub { color: #5a6471; margin-bottom: 16px; }

.h2-vict-list {
  list-style: none; padding: 0; margin: 0 0 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.h2-vict-item {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border-radius: 8px;
  background: #fafbfc; border-left: 4px solid;
}
.h2-vict-item.vict-tres-bien { background: #eaf6ed; border-color: #2e8b57; }
.h2-vict-item.vict-bien      { background: #f0f6fd; border-color: #1f4f86; }
.h2-vict-item.vict-ok        { background: #fff7eb; border-color: #d97706; }
.h2-vict-item.vict-bas       { background: #fbeae9; border-color: #b23a48; }
.h2-vict-note {
  background: #fff; padding: 6px 12px; border-radius: 8px;
  font-weight: 700; color: #1a2330; font-size: 1.05rem;
  border: 1.5px solid currentColor; flex-shrink: 0;
  min-width: 60px; text-align: center;
}
.h2-vict-note small { font-size: .78rem; color: #6b7785; font-weight: 500; }
.h2-vict-info { flex: 1; line-height: 1.35; }
.h2-vict-info b { display: block; font-size: .95rem; }
.h2-vict-info small { color: #5a6471; font-size: .8rem; font-style: italic; }
.h2-vict-moyenne {
  text-align: center; padding: 8px 0; margin-top: 4px;
  background: #f4f6f8; border-radius: 8px;
  color: #1a2330; font-size: 1rem;
}
.h2-vict-moyenne b { color: #1f6b3d; font-size: 1.15rem; }
.h2-vict-empty {
  text-align: center; padding: 16px 0;
}
.h2-vict-emoji { font-size: 2.5rem; line-height: 1; margin-bottom: 8px; }
.h2-vict-empty p { margin: 0 0 14px; color: #5a6471; }

/* 5. Stats rapides */
.h2-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 540px) { .h2-stats { grid-template-columns: repeat(2, 1fr); } }
.h2-stat {
  background: #fff; border: 1.5px solid #d4dee8; border-radius: 10px;
  padding: 14px 16px; text-align: center;
}
.h2-stat b { display: block; font-size: 1.8rem; color: #1f4f86; line-height: 1; }
.h2-stat span { display: block; font-size: .82rem; color: #5a6471; margin-top: 4px; font-weight: 600; }

.h2-demo-block { text-align: center; margin-top: 12px; }

/* Btn-big réutilise le style existant — au cas où pas chargé */
.btn.btn-big { font-size: 1.05rem; padding: 12px 24px; font-weight: 700; }

/* V4.81 fix — légende des statuts dans la timeline + meilleur contraste */
.h2-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; margin: 0 0 14px;
  padding: 10px 14px; background: #f4f6f8; border-radius: 8px;
  font-size: .88rem;
}
.h2-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
}
.h2-legend-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid;
  display: inline-block;
}
.h2-legend-todo { color: #5a6471; }
.h2-legend-todo .h2-legend-dot { background: #fafbfc; border-color: #d4d9e0; }
.h2-legend-progress { color: #7c4a00; }
.h2-legend-progress .h2-legend-dot { background: #fff7eb; border-color: #d97706; }
.h2-legend-done { color: #1f6b3d; }
.h2-legend-done .h2-legend-dot { background: #eaf6ed; border-color: #2e8b57; }
.h2-legend-hint { color: #6b7785; font-style: italic; flex: 1; min-width: 100%; }

/* Pills "todo" plus distinctes (étaient trop fades) */
.h2-jalon-pill.h2-pill-todo {
  background: #fafbfc; border-color: #d4d9e0;
  color: #5a6471; opacity: 1;
}
.h2-jalon-pill.h2-pill-todo .h2-pill-icon { color: #9aa3ad; }

/* =====================================================================
   V4.82 — Graphique "Mes résultats" en barres horizontales
   ===================================================================== */
.h2-resultats-card { /* hérite des styles communs avec h2-victoires-card */ }
.h2-bars-chart {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 6px;
}
.h2-bar-row { display: flex; flex-direction: column; gap: 4px; }
.h2-bar-label {
  font-size: .88rem; font-weight: 600; color: #2a3340;
}
.h2-bar-track {
  position: relative; height: 26px;
  background: #f4f6f8; border-radius: 6px; overflow: hidden;
  border: 1px solid #e0e6ec;
}
.h2-bar-fill-note {
  height: 100%; border-radius: 5px;
  transition: width .8s ease;
}
.h2-bar-fill-note.bar-tres-bien { background: linear-gradient(90deg, #2e8b57 0%, #4caf73 100%); }
.h2-bar-fill-note.bar-bien      { background: linear-gradient(90deg, #1f4f86 0%, #3974b6 100%); }
.h2-bar-fill-note.bar-ok        { background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%); }
.h2-bar-fill-note.bar-bas       { background: linear-gradient(90deg, #b23a48 0%, #d54c5d 100%); }
.h2-bar-value {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: #1a2330; font-weight: 700; font-size: .92rem;
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
}
.h2-resultats-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 10px;
  border-top: 1px dashed #d4dee8;
}
.h2-moyenne-block { display: flex; align-items: baseline; gap: 8px; }
.h2-moyenne-label { font-size: .9rem; color: #5a6471; font-weight: 600; }
.h2-moyenne-val { font-size: 1.5rem; font-weight: 700; color: #1f6b3d; }
.h2-moyenne-val small { font-size: .9rem; color: #6b7785; font-weight: 500; }
.h2-resultats-count { font-size: .85rem; color: #6b7785; font-style: italic; }

/* =====================================================================
   V4.83 — Stepper horizontal Concept A + chart avec placeholders
   ===================================================================== */

/* Récap chips au-dessus du stepper */
.h2-year-recap {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 14px;
}
.recap-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 16px;
  font-size: .85rem; font-weight: 600;
  border: 1.5px solid;
}
.recap-chip.recap-done     { background: #eaf6ed; border-color: #2e8b57; color: #1f6b3d; }
.recap-chip.recap-progress { background: #fff7eb; border-color: #d97706; color: #7c4a00; }
.recap-chip.recap-todo     { background: #f4f6f8; border-color: #d4d9e0; color: #5a6471; }

/* Stepper horizontal */
.h2-stepper {
  display: flex; align-items: flex-start; gap: 0;
  padding: 16px 4px 8px;
  position: relative;
  overflow-x: auto;
}
.h2-stepper::before {
  content: ""; position: absolute;
  top: 50px; left: 8%; right: 8%; height: 3px;
  background: #e0e6ec; z-index: 0; border-radius: 2px;
}
.h2-step {
  flex: 1; min-width: 110px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 4px; background: transparent; border: 0;
  cursor: pointer; font-family: inherit; color: inherit;
  position: relative; z-index: 1;
  transition: transform .15s;
}
.h2-step:hover { transform: translateY(-2px); }
.h2-step .step-num {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  color: #6b7785; text-transform: uppercase;
}
.h2-step .step-circle {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 3px solid #d4d9e0;
  position: relative;
  font-size: 1.6rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: all .2s;
}
.h2-step .step-emoji { line-height: 1; }
.h2-step .step-status-icon {
  position: absolute; bottom: -4px; right: -4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1.5px solid #d4d9e0;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
}
.h2-step .step-label {
  font-size: .82rem; font-weight: 600; text-align: center;
  line-height: 1.25; max-width: 110px;
  color: #1a2330;
}
.h2-step .step-substatus {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 8px; border-radius: 10px;
  background: #f4f6f8; color: #5a6471;
}
.h2-step .step-note {
  background: #2e8b57; color: #fff; padding: 2px 8px;
  border-radius: 10px; font-size: .82rem; font-weight: 700;
}

/* États du stepper */
.h2-step-done .step-circle {
  background: #eaf6ed; border-color: #2e8b57;
  box-shadow: 0 2px 8px rgba(46,139,87,.25);
}
.h2-step-done .step-status-icon {
  background: #2e8b57; border-color: #fff; color: #fff;
}
.h2-step-done .step-substatus {
  background: #eaf6ed; color: #1f6b3d;
}
.h2-step-progress .step-circle {
  background: #fff7eb; border-color: #d97706;
  box-shadow: 0 2px 8px rgba(217,119,6,.25);
  animation: stepPulse 2s ease-in-out infinite;
}
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(217,119,6,.25); }
  50%      { box-shadow: 0 2px 12px rgba(217,119,6,.5); }
}
.h2-step-progress .step-status-icon {
  background: #d97706; border-color: #fff; color: #fff;
}
.h2-step-progress .step-substatus {
  background: #fff7eb; color: #7c4a00;
}
.h2-step-todo .step-circle {
  background: #fafbfc; border-color: #d4d9e0;
  opacity: .85;
}
.h2-step-todo .step-status-icon {
  background: #fff; border-color: #d4d9e0; color: #6b7785;
}
.h2-step-todo .step-label,
.h2-step-todo .step-emoji { opacity: .85; }

/* Ligne de connexion qui se remplit en arrière-plan
   (utilise les data attributes pour calculer la part remplie) */
.h2-stepper::after {
  content: ""; position: absolute;
  top: 50px; left: 8%; height: 3px; z-index: 0;
  background: linear-gradient(90deg, #2e8b57 0%, #2e8b57 100%);
  border-radius: 2px;
  /* La largeur réelle de la ligne verte est dynamique : voir JS */
}

/* Chart — placeholder pour évaluation à réaliser */
.h2-bar-row-todo .h2-bar-label { color: #6b7785; font-style: italic; }
.h2-bar-label .bar-icon { margin-right: 6px; font-size: 1rem; }
.h2-bar-track-todo {
  background: repeating-linear-gradient(
    45deg, #f4f6f8, #f4f6f8 8px, #fafbfc 8px, #fafbfc 16px
  );
  border: 1.5px dashed #d4d9e0;
}
.h2-bar-value-todo {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: #5a6471; font-style: italic; font-weight: 600;
  font-size: .85rem; text-shadow: none;
}
.h2-moyenne-empty .h2-moyenne-label {
  color: #6b7785; font-style: italic;
}

/* Responsive : stepper devient scroll horizontal sur mobile */
@media (max-width: 720px) {
  .h2-stepper { gap: 8px; padding: 16px 8px; }
  .h2-step { min-width: 100px; flex: 0 0 auto; }
  .h2-stepper::before, .h2-stepper::after { display: none; }
}

/* V4.83 fix — Lignes du stepper en background (au lieu de ::before/::after) */
.h2-stepper::before, .h2-stepper::after { display: none; }
.h2-stepper-line-bg, .h2-stepper-line-fill {
  position: absolute; top: 50px; height: 3px;
  border-radius: 2px; z-index: 0;
  pointer-events: none;
}
.h2-stepper-line-bg {
  left: 56px; right: 56px;
  background: #e0e6ec;
}
.h2-stepper-line-fill {
  left: 56px;
  background: linear-gradient(90deg, #2e8b57 0%, #4caf73 100%);
  transition: width .8s ease;
  max-width: calc(100% - 112px);
}
@media (max-width: 720px) {
  .h2-stepper-line-bg, .h2-stepper-line-fill { display: none; }
}

/* =====================================================================
   V4.85 — Avatar editor enrichi : présets + boutons supplémentaires
   ===================================================================== */
.ae-presets { margin-top: 16px; padding-top: 12px; border-top: 1px dashed #d4dee8; }
.ae-presets-label {
  font-size: .82rem; color: #5a6471; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
.ae-presets-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.ae-preset {
  padding: 6px 12px; border: 1.5px solid #d4dee8; border-radius: 16px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: .88rem;
  transition: all .15s; color: #1a2330;
}
.ae-preset:hover { border-color: #1f4f86; background: #f0f6fd; transform: translateY(-1px); }

.ae-preview-actions { flex-wrap: wrap; gap: 4px; }
.ae-preview-actions .btn { font-size: .82rem; padding: 4px 10px; }

/* ===== Exercices visuels v2 ===== */

/* --- Commun --- */
.module-exo .exo-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Points chauds (Exo 1) --- */
.pc-exo .pc-card { background: #f8fafc; border: 1px solid #d6dee6; border-radius: 10px; padding: 12px; }
.pc-exo .pc-progress { font-size: .9rem; color: #51606e; margin-bottom: 8px; }
.pc-exo .pc-photo-wrap { position: relative; max-width: 600px; cursor: crosshair; user-select: none; }
.pc-exo .pc-photo { width: 100%; display: block; border-radius: 8px; }
.pc-exo .pc-overlay { position: absolute; inset: 0; pointer-events: none; }
.pc-exo .pc-zone { position: absolute; border: 3px solid #2e8a4a; background: rgba(46, 138, 74, .25); border-radius: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.pc-exo .pc-zone.revealed { border-color: #c0392b; background: rgba(192, 57, 43, .25); }
.pc-exo .pc-fb { margin-top: 10px; padding: 8px 12px; border-radius: 6px; }
.pc-exo .pc-fb-ok { background: #d6f0db; color: #1d5b2c; }
.pc-exo .pc-fb-ko { background: #fadbdf; color: #74212b; }
.pc-exo .pc-fb-hint { background: #fff3c4; color: #6a4f00; }
.pc-exo .pc-actions { margin-top: 10px; }

/* --- Multi choix image (Exo 2) --- */
.mci-exo .mci-card { background: #f8fafc; border: 1px solid #d6dee6; border-radius: 10px; padding: 12px; }
.mci-exo .mci-progress { font-size: .9rem; color: #51606e; margin-bottom: 6px; }
.mci-exo .mci-enonce { font-weight: 600; margin-bottom: 10px; }
.mci-exo .mci-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.mci-exo .mci-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; background: #fff; border: 2px solid #cfd6df; border-radius: 8px; cursor: pointer; transition: all .15s; }
.mci-exo .mci-choice:hover:not(:disabled) { border-color: #1f4f86; transform: translateY(-2px); }
.mci-exo .mci-choice:disabled { cursor: default; opacity: .8; }
.mci-exo .mci-choice img { width: 100%; height: 130px; object-fit: cover; border-radius: 6px; }
.mci-exo .mci-choice.is-correct { border-color: #2e8a4a; background: #d6f0db; opacity: 1; }
.mci-exo .mci-choice.is-wrong { border-color: #c0392b; background: #fadbdf; opacity: 1; }
.mci-exo .mci-nom { font-size: .9rem; text-align: center; }
.mci-exo .mci-fb { margin-top: 10px; padding: 8px 12px; border-radius: 6px; }
.mci-exo .mci-fb-ok { background: #d6f0db; color: #1d5b2c; }
.mci-exo .mci-fb-ko { background: #fadbdf; color: #74212b; }
.mci-exo .mci-actions { margin-top: 10px; }

/* --- Compare avant/après (Exo 3) --- */
.cap-exo .cap-card { background: #f8fafc; border: 1px solid #d6dee6; border-radius: 10px; padding: 12px; }
.cap-exo .cap-progress { font-size: .9rem; color: #51606e; margin-bottom: 6px; }
.cap-exo .cap-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cap-exo .cap-photos figure { margin: 0; }
.cap-exo .cap-photos figcaption { font-weight: 600; text-align: center; margin-bottom: 4px; }
.cap-exo .cap-photos img { width: 100%; border-radius: 6px; }
.cap-exo .cap-question { margin: 10px 0 6px; font-weight: 600; }
.cap-exo .cap-choices { display: flex; flex-direction: column; gap: 4px; }
.cap-exo .cap-choice { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 6px; }
.cap-exo .cap-choice.cap-good { background: #d6f0db; }
.cap-exo .cap-choice.cap-missed { background: #fff3c4; }
.cap-exo .cap-choice.cap-wrong { background: #fadbdf; text-decoration: line-through; }
.cap-exo .cap-fb { margin-top: 10px; padding: 8px 12px; border-radius: 6px; }
.cap-exo .cap-fb-ok { background: #d6f0db; color: #1d5b2c; }
.cap-exo .cap-fb-ko { background: #fadbdf; color: #74212b; }
.cap-exo .cap-actions { margin-top: 10px; }
@media (max-width: 600px) { .cap-exo .cap-photos { grid-template-columns: 1fr; } }

/* --- Assemble assiette (Exo 4) --- */
.aa-exo .aa-board { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.aa-exo .aa-plate { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; }
.aa-exo .aa-plate-bg { width: 100%; height: 100%; object-fit: contain; }
.aa-exo .aa-zone { position: absolute; border: 2px dashed transparent; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 4px; gap: 4px; }
.aa-exo .aa-zone > span { background: rgba(255,255,255,.92); padding: 4px 10px; border-radius: 6px; font-size: .9rem; font-weight: 700; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.aa-exo .aa-zone:hover { border-color: #1f4f86; background: rgba(31, 79, 134, .12); }
.aa-exo .aa-zone-legumes   { left: 5%;  top: 10%; width: 45%; height: 80%; background: rgba(46, 138, 74, .14); }
.aa-exo .aa-zone-feculents { left: 55%; top: 5%;  width: 40%; height: 45%; background: rgba(212, 165, 25, .14); }
.aa-exo .aa-zone-proteines { left: 55%; top: 50%; width: 40%; height: 45%; background: rgba(192, 57, 43, .14); }
.aa-exo .aa-placed { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.aa-exo .aa-pile-wrap { width: 100%; margin-top: 14px; }
.aa-exo .aa-pile-title { font-weight: 600; margin-bottom: 8px; font-size: 1rem; }
.aa-exo .aa-pile { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.aa-exo .aa-pile-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: #fff; border: 2px solid #cfd6df; border-radius: 10px; cursor: pointer; transition: transform .15s, border-color .15s; }
.aa-exo .aa-pile-item:hover { transform: translateY(-2px); border-color: #94a3b8; }
.aa-exo .aa-pile-item img { width: 100px; height: 100px; object-fit: contain; }
.aa-exo .aa-pile-item span { font-size: .9rem; font-weight: 600; text-align: center; }
.aa-exo .aa-pile-item.is-selected { border-color: #1f4f86; background: #e8f0fa; }
.aa-exo .aa-fb { padding: 8px 12px; border-radius: 6px; width: 100%; }
.aa-exo .aa-fb-ok { background: #d6f0db; color: #1d5b2c; }
.aa-exo .aa-fb-ko { background: #fadbdf; color: #74212b; }
.aa-exo .aa-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Audit zones (Exo 5) --- */
.az-exo .az-card { background: #f8fafc; border: 1px solid #d6dee6; border-radius: 10px; padding: 12px; }
.az-exo .az-progress { font-size: .9rem; color: #51606e; margin-bottom: 6px; }
.az-exo .az-photo img { width: 100%; max-width: 600px; border-radius: 8px; }
.az-exo .az-question { font-weight: 600; margin: 10px 0 6px; }
.az-exo .az-options { display: flex; flex-wrap: wrap; gap: 6px; }
.az-exo .az-opt { padding: 8px 12px; background: #fff; border: 2px solid #cfd6df; border-radius: 6px; cursor: pointer; }
.az-exo .az-opt:hover:not(:disabled) { border-color: #1f4f86; }
.az-exo .az-opt:disabled { cursor: default; opacity: .8; }
.az-exo .az-opt.is-correct { border-color: #2e8a4a; background: #d6f0db; opacity: 1; }
.az-exo .az-opt.is-wrong { border-color: #c0392b; background: #fadbdf; opacity: 1; }
.az-exo .az-fb { margin-top: 8px; padding: 6px 10px; border-radius: 6px; }
.az-exo .az-fb-ok { background: #d6f0db; color: #1d5b2c; }
.az-exo .az-fb-ko { background: #fadbdf; color: #74212b; }
.az-exo .az-explain { margin-top: 8px; padding: 8px 12px; border-radius: 6px; background: #fff3c4; color: #6a4f00; }
.az-exo .az-actions { margin-top: 10px; }

/* =========================================================
   Formation PSR
   ========================================================= */
.nav-btn-formation {
  background: linear-gradient(135deg, #6a4cae 0%, #b04ec5 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600;
}
.nav-btn-formation.active { box-shadow: 0 2px 8px rgba(0,0,0,.18); }

.formation-psr-home .formation-head { margin: 6px 0 18px; }
.formation-psr-home .formation-head h2 { color: #6a4cae; font-size: 1.6rem; margin: 0 0 4px; }
.formation-psr-home .formation-sub { color: #5b3e8f; font-weight: 600; margin: 0 0 4px; }
.formation-psr-home .formation-hint { color: #555; font-size: .95rem; margin: 0 0 14px; }

.formation-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.formation-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px;
  border: 1px solid #d8c8ec;
  border-radius: 12px;
  background: linear-gradient(180deg, #fbf8ff 0%, #f3eaff 100%);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.formation-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(106,76,174,0.18); }
.formation-card-emoji { font-size: 2rem; line-height: 1; }
.formation-card-body { flex: 1; }
.formation-card-body h3 { margin: 0 0 4px; color: #4b2f86; font-size: 1.15rem; }
.formation-card-body p { margin: 0 0 8px; color: #333; font-size: .95rem; }
.formation-card-ref { font-size: .8rem; color: #6a4cae; margin-bottom: 6px; }
.formation-card-arrow { font-size: 1.4rem; color: #6a4cae; align-self: center; }
.formation-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: .8rem; font-weight: 600;
}
.formation-badge.new      { background: #ece1ff; color: #4b2f86; }
.formation-badge.progress { background: #fff3c4; color: #6a4f00; }
.formation-badge.ok       { background: #d6f0db; color: #1d5b2c; }

.formation-teaser { margin-top: 18px; color: #777; font-style: italic; font-size: .92rem; }

.formation-chapitre-head { gap: 18px; flex-wrap: wrap; }
.formation-ref-box {
  background: #f3eaff;
  border-left: 4px solid #6a4cae;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .9rem;
  max-width: 380px;
}
.formation-ref-box b { color: #4b2f86; }
.formation-ref-lien { font-style: italic; margin-top: 4px; color: #555; }
.formation-ref-cap { margin: 6px 0 0 18px; padding: 0; }
.formation-ref-cap li { margin: 2px 0; }

.formation-section-title { color: #6a4cae; margin-top: 22px; }

.formation-qcm-score {
  margin: 14px 0;
  padding: 10px 14px;
  background: #fff3c4;
  border-left: 4px solid #c47a00;
  border-radius: 6px;
}

.formation-exo {
  margin: 14px 0;
  padding: 14px;
  background: #fff;
  border: 1px solid #e2d4f3;
  border-radius: 10px;
}
.formation-exo h4 { margin: 0 0 6px; color: #4b2f86; }

.fpc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.fpc-card { border: 1px solid #ddd; border-radius: 8px; padding: 8px; background: #fafafa; }
.fpc-img-wrap { width: 100%; aspect-ratio: 4/3; background: #eee; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.fpc-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.fpc-img-wrap img.img-missing { opacity: .3; }
.fpc-card button { margin-top: 8px; width: 100%; }
.fpc-erreur { margin-top: 8px; padding: 6px 8px; background: #fadbdf; color: #74212b; border-radius: 6px; font-size: .9rem; }

.fmc-scenario { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #ddd; }
.fmc-scenario:first-of-type { border-top: 0; padding-top: 0; }
.fmc-question { font-weight: 600; margin-bottom: 8px; color: #4b2f86; }
.fmc-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.fmc-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid #ddd; border-radius: 8px; background: #fff; cursor: pointer; }
.fmc-opt img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; background: #eee; }
.fmc-opt img.img-missing { opacity: .3; }
.fmc-opt.ok { border-color: #2e8b57; background: #d6f0db; }
.fmc-opt.ko { border-color: #c0392b; background: #fadbdf; }
.fmc-opt:hover { border-color: #6a4cae; }

.formation-epreuve {
  margin-top: 22px;
  padding: 16px;
  background: linear-gradient(180deg, #fff8e1 0%, #fff 100%);
  border: 2px solid #c47a00;
  border-radius: 12px;
}
.formation-epreuve h3 { color: #6a4f00; margin: 0 0 10px; }
.formation-epreuve .ep-head h4 { margin: 0 0 6px; color: #4b2f86; }
.formation-epreuve .ep-meta { font-size: .9rem; color: #444; margin-bottom: 8px; }
.formation-epreuve .ep-meta > div { margin: 2px 0; }
.formation-epreuve .ep-situation { background: #fff; border-left: 4px solid #6a4cae; padding: 8px 12px; margin: 8px 0 14px; border-radius: 4px; font-style: italic; }
.formation-epreuve .ep-question { margin: 12px 0; padding: 10px; background: #fff; border-radius: 8px; border: 1px solid #eee; }
.formation-epreuve .ep-q-title { margin-bottom: 8px; }
.formation-epreuve .ep-textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-family: inherit; }
.formation-epreuve .ep-indice { margin-top: 6px; color: #6a4f00; font-size: .9rem; }
.formation-epreuve .ep-result { margin-top: 14px; padding: 12px; border-radius: 8px; font-weight: 600; }
.formation-epreuve .ep-result.ok { background: #d6f0db; color: #1d5b2c; }
.formation-epreuve .ep-result.ko { background: #fadbdf; color: #74212b; }
.formation-epreuve .ep-grille { margin-top: 14px; }
.formation-epreuve .ep-grille-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .9rem; }
.formation-epreuve .ep-grille-table th, .formation-epreuve .ep-grille-table td { border: 1px solid #ddd; padding: 6px 8px; text-align: left; vertical-align: top; }
.formation-epreuve .ep-grille-table th { background: #f3eaff; color: #4b2f86; }

.formation-qcm-q { margin: 10px 0; padding: 10px; background: #fff; border-radius: 8px; border: 1px solid #eee; }
.formation-qcm-q .qcm-q-text { font-weight: 600; margin-bottom: 6px; }

/* Encart "Ce que tu vas apprendre" en haut du chapitre */
.formation-objectifs-box {
  background: linear-gradient(135deg, #fff7e6 0%, #fff1d6 100%);
  border-left: 5px solid #e0a800;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 12px 0 18px;
}
.formation-objectifs-box h3 { margin: 0 0 6px; color: #6a4f00; font-size: 1.05rem; }
.formation-objectifs-intro { margin: 0 0 6px; color: #444; font-size: .95rem; }
.formation-objectifs-list { margin: 4px 0 0 18px; padding: 0; }
.formation-objectifs-list li { margin: 3px 0; color: #1a2330; }

/* Mots-clés du chapitre */
.formation-mots-cles {
  background: #f3eaff; border-radius: 10px; padding: 14px 18px;
  margin: 18px 0; border-left: 5px solid #6a4cae;
}
.formation-mots-cles h3 { margin: 0 0 6px; color: #4b2f86; font-size: 1.05rem; }
.formation-mc-list { margin: 4px 0 0 18px; padding: 0; }
.formation-mc-list li { margin: 4px 0; color: #1a2330; line-height: 1.45; }

.formation-bilan-box {
  background: #ecfdf5; border-radius: 10px; padding: 16px 20px;
  margin: 20px 0; border-left: 5px solid #16a34a;
}
.formation-bilan-box h3 { margin: 0 0 8px; color: #065f46; font-size: 1.1rem; }
.formation-bilan-list { margin: 6px 0 8px 22px; padding: 0; line-height: 1.55; }
.formation-bilan-list li { margin: 4px 0; color: #14532d; }
.formation-bilan-msg { margin: 8px 0 0; font-style: italic; color: #1d5b2c; }

/* Vignettes pour exercice ordering avec photos */
.exo-photo-small { width: 70px; height: 50px; object-fit: cover; border-radius: 6px; margin: 0 8px; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* QCM épreuve formation : aligner les hauteurs des options */
.formation-epreuve .qcm-opt {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* CTA avatar dans la fiche de présentation */
.fiche-avatar-cta {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 2px solid #f59e0b;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 14px 0 18px;
}
.fiche-avatar-cta .fac-icon { font-size: 36px; }
.fiche-avatar-cta .fac-text { flex: 1; }
.fiche-avatar-cta .fac-text b { color: #78350f; display: block; font-size: 15px; }
.fiche-avatar-cta .fac-text small { color: #92400e; font-size: 12px; }
.fiche-avatar-cta button { white-space: nowrap; }