/* ═══════════════════════════════════════════════════════════════
   PLATFORM-MOCKUPS.CSS
   Répliques statiques et animées des écrans de la plateforme.

   Source de vérité : dépôt "UX-UI Complement" (maquettes de l'app).
   - tokens          → assets/css/tokens.css
   - outil auteur    → assets/css/pages/course-modify.css
   - dashboard cours → assets/css/pages/course-dashboard.css
   - interface appr. → assets/css/pages/interface-appel.css

   Tout est préfixé `pm-` et scopé sous `.pm-scope` : aucune collision
   possible avec css/global.css (qui utilise le préfixe --color-*).

   MOTEUR D'ANIMATION
   Chaque scénario est en CSS pur, `animation-play-state: paused` par
   défaut. js/platform-mockups.js ajoute `.pm-play` quand le bloc entre
   à l'écran, ce qui démarre tout (les `animation-delay` orchestrent la
   séquence). Les compteurs et le typewriter sont pilotés en JS.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1. SCOPE + TOKENS (repris de UX-UI Complement/assets/css/tokens.css)
   ─────────────────────────────────────────────── */
.pm-scope {
  /* Brand */
  --pm-primary:      #006DE5;
  --pm-primary-dk:   #0055B8;
  --pm-primary-lt:   #DFEBFF;
  /* Sémantiques */
  --pm-success:      #3EA15A;
  --pm-success-lt:   #D1FAE5;
  --pm-warning:      #F2C83A;
  --pm-warning-dk:   #D97706;
  --pm-warning-lt:   #FEF9C3;
  --pm-danger:       #EB5757;
  --pm-purple:       #7C3AED;
  --pm-purple-lt:    #EDE9FE;
  /* Neutres */
  --pm-content-bg:   #F3F5F8;
  --pm-bg-soft:      #FAFBFC;
  --pm-border:       #A3ABBA;
  --pm-border-soft:  #E4E7EC;
  --pm-text:         #1A1D23;
  --pm-text-2:       #667085;
  --pm-text-3:       #A0AABA;
  /* Typo — mêmes familles que le site */
  --pm-font-d: 'Space Grotesk', sans-serif;
  --pm-font-b: 'Inter', sans-serif;
  /* Formes */
  --pm-r-card: 12px;
  --pm-r-sm:   8px;
  --pm-shadow-sm: 0 2px 6px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --pm-shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --pm-shadow-lg: 0 12px 36px rgba(0,0,0,0.13), 0 4px 12px rgba(0,0,0,0.06);
  --pm-card-shadow: 0 1px 2px rgba(15,18,24,0.04), 0 4px 12px rgba(15,18,24,0.05);

  position: relative;
  /* Un mockup occupe toute la largeur qu'on lui donne. Sans ça, placé dans
     un conteneur flex centré (cartes « features »), il se réduit à la
     largeur de son contenu et s'effondre sur petit écran. */
  width: 100%;
  font-family: var(--pm-font-b);
  color: var(--pm-text);
  line-height: 1.4;
  /* Le mockup s'adapte à SA largeur, pas à celle du viewport : sur la home
     il vit dans une colonne de ~540 px au sein d'une page de 1440 px. */
  container-type: inline-size;
  container-name: pm;
}

.pm-scope *,
.pm-scope *::before,
.pm-scope *::after { box-sizing: border-box; }

.pm-scope p,
.pm-scope div,
.pm-scope span,
.pm-scope table { margin: 0; }

/* ───────────────────────────────────────────────
   2. FENÊTRE APPLICATIVE (chrome commun à toutes les répliques)
   ─────────────────────────────────────────────── */
.pm-win {
  background: #fff;
  border: 1px solid var(--pm-border-soft);
  border-radius: 14px;
  box-shadow: var(--pm-shadow-lg);
  overflow: hidden;
}

.pm-win-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--pm-content-bg);
  border-bottom: 1px solid var(--pm-border-soft);
}
.pm-win-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pm-win-dot--r { background: #FF5F56; }
.pm-win-dot--y { background: #FEBC2E; }
.pm-win-dot--g { background: #27C93F; }

.pm-win-title {
  margin-left: 8px;
  font-family: var(--pm-font-b);
  font-size: 12px;
  font-weight: 500;
  color: var(--pm-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Barre d'outils applicative : fil d'ariane + actions */
.pm-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--pm-border-soft);
}
.pm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--pm-text-2);
  min-width: 0;
}
.pm-breadcrumb-sep { color: var(--pm-text-3); }
.pm-breadcrumb-current {
  font-family: var(--pm-font-d);
  font-weight: 600;
  color: var(--pm-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Indicateur d'auto-sauvegarde (course-shared.css .save-indicator) */
.pm-save {
  display: flex;
  align-items: center;
  gap: 6.5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pm-success);
  white-space: nowrap;
  flex-shrink: 0;
}
.pm-save-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pm-success);
  flex-shrink: 0;
}
.pm-save-label--saving,
.pm-save-label--saved { display: none; }

/* Corps de fenêtre : le fond gris de l'app */
.pm-win-body {
  background: var(--pm-content-bg);
  padding: 14px;
}

/* ───────────────────────────────────────────────
   3. CURSEUR DE DÉMONSTRATION
   ─────────────────────────────────────────────── */
.pm-cursor {
  position: absolute;
  top: 0; left: 0;
  width: 22px; height: 22px;
  /* au-dessus de tout, y compris du menu déroulant (z-index 30) */
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(15,20,35,0.35));
  will-change: left, top, opacity;
}
.pm-cursor svg { display: block; width: 100%; height: 100%; }

/* Halo de clic */
.pm-cursor::after {
  content: '';
  position: absolute;
  top: -6px; left: -6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pm-primary);
  opacity: 0;
  transform: scale(0.3);
}

/* ───────────────────────────────────────────────
   4. RÉPLIQUE — OUTIL AUTEUR (course/modify-course.html)
   ─────────────────────────────────────────────── */

/* ── Carte chapitre ── */
.pm-chapter-card {
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-card);
  box-shadow: var(--pm-shadow-sm);
}
.pm-chapter-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--pm-content-bg);
  border-bottom: 1px solid var(--pm-border);
  border-radius: var(--pm-r-card) var(--pm-r-card) 0 0;
}
.pm-drag {
  color: var(--pm-text-3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.pm-chapter-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--pm-primary-lt);
  color: var(--pm-primary);
  font-family: var(--pm-font-d);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-chapter-label {
  font-family: var(--pm-font-d);
  font-size: 15px;
  font-weight: 700;
  color: var(--pm-text);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  white-space: nowrap;
}
.pm-chapter-title {
  flex: 1;
  min-width: 0;
  font-family: var(--pm-font-b);
  font-size: 15px;
  font-weight: 600;
  color: var(--pm-text);
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-chapter-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pm-badge-ch {
  font-family: var(--pm-font-d);
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-text-3);
  background: #EEF1F6;
  padding: 2.5px 9px;
  border-radius: 9999px;
  white-space: nowrap;
}
.pm-badge-ch--time { color: var(--pm-primary); background: var(--pm-primary-lt); }

.pm-chapter-body { padding: 12px; }
.pm-slides-list { display: flex; flex-direction: column; }

/* ── Slide item ── */
.pm-slide-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-sm);
}
.pm-slide-num {
  font-family: var(--pm-font-d);
  font-size: 12px;
  font-weight: 700;
  color: var(--pm-primary);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  padding-top: 4px;
}
.pm-slide-thumb {
  width: 132px;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  border: 1px solid var(--pm-border);
  background: linear-gradient(135deg, #EEF2FF, #DDE6F8);
  flex-shrink: 0;
  padding: 9px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
/* Miniature accueillant une slide rendue : c'est la slide qui fournit le
   fond et le format, la vignette ne fait plus que la cadrer. */
.pm-slide-thumb--render {
  padding: 0;
  background: #fff;
  display: block;
}
.pm-thumb-title {
  font-family: var(--pm-font-d);
  font-size: 8.5px;
  font-weight: 700;
  color: #3D5A8A;
  line-height: 1.25;
}
.pm-thumb-line {
  height: 3px;
  border-radius: 2px;
  background: #9AB2D8;
  opacity: 0.55;
}

.pm-slide-content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pm-slide-title-input {
  font-family: var(--pm-font-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-text);
  padding: 8px 10px;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  background: #fff;
}
/* Zone de texte narratif + bouton micro (dictée) */
.pm-slide-textarea {
  position: relative;
  font-size: 12.5px;
  color: var(--pm-text-2);
  line-height: 1.55;
  padding: 9px 34px 9px 10px;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  background: #fff;
}
.pm-mic {
  position: absolute;
  right: 7px; bottom: 7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--pm-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-mic svg { display: block; }

/* ── Gap + bouton « + » entre deux slides ── */
.pm-slide-gap {
  position: relative;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-slide-gap-line {
  position: absolute;
  left: 16px; right: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--pm-primary);
  opacity: 0;
}
.pm-add-plus {
  position: relative;
  z-index: 2;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pm-primary);
  color: var(--pm-primary);
  font-size: 16px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  box-shadow: 0 2px 6px rgba(0,109,229,0.25);
}

/* ── Menu « Ajouter un élément » ── */
.pm-add-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) scale(0.94);
  transform-origin: top center;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  box-shadow: var(--pm-shadow-md);
  padding: 5.5px;
  min-width: 208px;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
}
.pm-add-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--pm-text);
}
.pm-add-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}
.pm-add-icon--slide { background: var(--pm-primary-lt); color: var(--pm-primary); }
.pm-add-icon--video { background: var(--pm-purple-lt); color: var(--pm-purple); }
.pm-add-icon--quiz  { background: var(--pm-success-lt); color: var(--pm-success); }

/* ── Section quiz (dépliée par le scénario) ──
   La carte grandit vers le bas quand le quiz s'ajoute — c'est le signal
   visuel qu'un élément vient d'être créé. Comme la croissance se fait
   sous les slides, tout ce qui est au-dessus garde sa position : d'où le
   curseur ancré en pixels depuis le HAUT (et non en %). */
.pm-quiz-section {
  margin-top: 14px;
  padding: 0 14px;
  background: linear-gradient(180deg, var(--pm-success-lt) 0%, transparent 100%);
  border-top: 3px solid var(--pm-success);
  border-radius: 10px 10px 0 0;
  /* replié au départ */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.pm-quiz-sep {
  display: flex;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 4px;
}
.pm-quiz-sep-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--pm-success);
  padding: 6px 15px;
  border-radius: 9999px;
}
.pm-quiz-q-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0 16px;
}
.pm-quiz-q-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--pm-primary);
  background: var(--pm-primary-lt);
  border: 1px solid var(--pm-primary);
  padding: 2.5px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 3px;
}
.pm-quiz-q-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-quiz-q-label {
  font-family: var(--pm-font-d);
  font-size: 11px;
  font-weight: 700;
  color: var(--pm-text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pm-quiz-q-input {
  min-height: 40px;
  border: 1px solid var(--pm-border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--pm-text);
  background: #fff;
  line-height: 1.55;
}
/* Champ « actif » pendant la frappe */
.pm-quiz-q-input.is-focus {
  border-color: var(--pm-primary);
  box-shadow: 0 0 0 3px var(--pm-primary-lt);
}
/* Caret de saisie */
.pm-caret {
  display: none;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  background: var(--pm-primary);
  vertical-align: text-bottom;
}
.pm-typing .pm-caret { display: inline-block; }

/* ───────────────────────────────────────────────
   5. RÉPLIQUE — DASHBOARD COURS (course/dashboard.html)
   ─────────────────────────────────────────────── */
.pm-dash-body {
  background: var(--pm-content-bg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pm-dash-row {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: stretch;
}
/* Row 2 du dashboard : le graphe de tendance sur toute la largeur */
.pm-dash-row--trends { grid-template-columns: minmax(0, 1fr); }

/* ── KPI blocks ── */
.pm-kpi-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; min-width: 0; }
.pm-kpi-block {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pm-border-soft);
  border-radius: 14px;
  box-shadow: var(--pm-card-shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.pm-kpi-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pm-primary), #4DA3FF);
}
.pm-kpi-block--amber::before { background: linear-gradient(90deg, var(--pm-warning), #FBBF24); }
.pm-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pm-primary-lt);
  color: var(--pm-primary);
  flex-shrink: 0;
}
.pm-kpi-block--amber .pm-kpi-icon { background: var(--pm-warning-lt); color: var(--pm-warning-dk); }
.pm-kpi-icon svg { width: 22px; height: 22px; }
.pm-kpi-content { flex: 1; min-width: 0; }
.pm-kpi-value { display: flex; align-items: baseline; gap: 4px; margin-bottom: 3px; }
.pm-kpi-num {
  font-family: var(--pm-font-d);
  font-size: 38px;
  font-weight: 700;
  color: var(--pm-text);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pm-kpi-suffix {
  font-family: var(--pm-font-d);
  font-size: 19px;
  font-weight: 600;
  color: var(--pm-text-2);
  line-height: 1;
}
.pm-kpi-label {
  font-family: var(--pm-font-d);
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-text);
  margin-bottom: 2px;
}
.pm-kpi-sub { font-size: 11.5px; color: var(--pm-text-3); line-height: 1.4; }

/* ── Chart card ── */
.pm-chart-card {
  background: #fff;
  border: 1px solid var(--pm-border-soft);
  border-radius: 14px;
  box-shadow: var(--pm-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pm-chart-header {
  padding: 13px 16px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--pm-border-soft);
}
.pm-chart-title {
  font-family: var(--pm-font-d);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--pm-text);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.pm-chart-title::before {
  content: '';
  display: inline-block;
  width: 4px; height: 15px;
  border-radius: 2px;
  background: var(--pm-primary);
  flex-shrink: 0;
}
.pm-chart-meta {
  font-size: 11.5px;
  color: var(--pm-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pm-chart-body { padding: 14px 16px; flex: 1; min-height: 0; }
.pm-chart-body--flush { padding: 0; }
.pm-chart-body--pie {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
}

/* ── Donut ── */
.pm-pie-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.pm-pie-svg-wrap { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.pm-pie-svg-wrap svg { width: 100%; height: 100%; display: block; }
.pm-pie-arc {
  /* état de départ : arc vide (le scénario le déroule) */
  stroke-dasharray: 0 402.1;
}
.pm-pie-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(15,18,24,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pm-pie-num {
  font-family: var(--pm-font-d);
  font-size: 23px;
  font-weight: 700;
  color: var(--pm-text);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pm-pie-label { font-size: 10.5px; color: var(--pm-text-3); margin-top: 4px; font-weight: 500; }
.pm-pie-legend { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.pm-pie-legend-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  padding: 4px 2px;
  border-bottom: 1px dashed var(--pm-border-soft);
}
.pm-pie-legend-item:last-child { border-bottom: none; }
.pm-pie-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pm-pie-name {
  color: var(--pm-text-2);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-pie-val {
  font-family: var(--pm-font-d);
  font-weight: 700;
  color: var(--pm-text);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pm-pie-pct { font-size: 10.5px; color: var(--pm-text-3); font-weight: 500; margin-left: 4px; }

/* ── Tableau ── */
.pm-table-wrap { overflow: hidden; }
.pm-table { width: 100%; border-collapse: collapse; }
.pm-table th {
  text-align: left;
  padding: 8px 10px;
  font-family: var(--pm-font-d);
  font-size: 10px;
  font-weight: 700;
  color: var(--pm-text-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--pm-bg-soft);
  border-bottom: 1px solid var(--pm-border-soft);
  white-space: nowrap;
}
.pm-table th.num { text-align: right; }
.pm-table td {
  padding: 7.5px 10px;
  font-size: 12px;
  color: var(--pm-text);
  border-bottom: 1px solid var(--pm-border-soft);
  vertical-align: middle;
  white-space: nowrap;
}
.pm-table td.num {
  text-align: right;
  font-family: var(--pm-font-d);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pm-table tr:last-child td { border-bottom: none; }
/* Lignes révélées une à une par le scénario */
.pm-table tbody tr { opacity: 0; }

.pm-pct-badge {
  display: inline-block;
  min-width: 42px;
  padding: 2px 8px;
  border-radius: 9999px;
  font-family: var(--pm-font-d);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.pm-pct-badge--good { background: var(--pm-success-lt); color: #21754A; }
.pm-pct-badge--mid  { background: var(--pm-warning-lt); color: var(--pm-warning-dk); }
.pm-pct-badge--low  { background: #FFE8D9; color: #C2410C; }

/* ── Graphe multi-lignes ── */
.pm-ml-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.pm-series-pill {
  --pm-series-color: var(--pm-primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 9999px;
  background: #fff;
  border: 1.5px solid var(--pm-series-color);
  font-size: 11px;
  font-family: var(--pm-font-d);
  font-weight: 600;
  color: var(--pm-text);
  white-space: nowrap;
}
.pm-series-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--pm-series-color);
  flex-shrink: 0;
}

.pm-timerange {
  display: inline-flex;
  padding: 3px;
  background: var(--pm-bg-soft);
  border: 1px solid var(--pm-border-soft);
  border-radius: 9999px;
  flex-shrink: 0;
}
.pm-timerange-opt {
  padding: 3px 10px;
  border-radius: 9999px;
  font-family: var(--pm-font-b);
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-text-3);
  white-space: nowrap;
}
.pm-timerange-opt.is-active {
  background: #fff;
  color: var(--pm-primary);
  box-shadow: 0 1px 3px rgba(15,18,24,0.12);
}

.pm-ml-wrap { position: relative; }
.pm-ml-wrap svg { display: block; width: 100%; height: auto; }
.pm-ml-line {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="100" sur le polyline → tracé animable sans mesurer */
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.pm-ml-area { opacity: 0; }
.pm-ml-grid { stroke: var(--pm-border-soft); stroke-width: 1; }
.pm-ml-xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 8px;
  font-size: 10.5px;
  color: var(--pm-text-3);
  font-variant-numeric: tabular-nums;
}

/* Le 2e jeu de séries (plage 30 J) reste caché tant que le clic n'a pas eu lieu */
.pm-ml-series--b { opacity: 0; }

/* Tooltip du graphe */
.pm-ml-tooltip {
  position: absolute;
  /* juste au-dessus du point de courbe que le curseur survole en fin de scénario */
  top: 2%; left: 52%;
  background: #fff;
  border: 1px solid var(--pm-border-soft);
  border-radius: 8px;
  box-shadow: var(--pm-shadow-md);
  padding: 7px 10px;
  font-size: 11px;
  color: var(--pm-text-2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.pm-ml-tooltip strong {
  display: block;
  font-family: var(--pm-font-d);
  font-size: 12px;
  color: var(--pm-text);
  margin-bottom: 2px;
}

/* Pastille « données à jour » */
.pm-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--pm-success-lt);
  color: #21754A;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.pm-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pm-success);
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────
   6. ANIMATIONS — tout est en pause jusqu'à `.pm-play`
   ─────────────────────────────────────────────── */
.pm-scope [class*="pm-anim-"],
.pm-scope .pm-cursor,
.pm-scope .pm-cursor::after,
.pm-scope .pm-pie-arc,
.pm-scope .pm-ml-line,
.pm-scope .pm-ml-area,
.pm-scope .pm-ml-series--b,
.pm-scope .pm-ml-tooltip,
.pm-scope .pm-table tbody tr,
.pm-scope .pm-slide-gap-line,
.pm-scope .pm-add-plus,
.pm-scope .pm-add-menu,
.pm-scope .pm-quiz-section,
.pm-scope .pm-live-dot {
  animation-play-state: paused;
  animation-fill-mode: both;
}
.pm-scope.pm-play [class*="pm-anim-"],
.pm-scope.pm-play .pm-cursor,
.pm-scope.pm-play .pm-cursor::after,
.pm-scope.pm-play .pm-pie-arc,
.pm-scope.pm-play .pm-ml-line,
.pm-scope.pm-play .pm-ml-area,
.pm-scope.pm-play .pm-ml-series--b,
.pm-scope.pm-play .pm-ml-tooltip,
.pm-scope.pm-play .pm-table tbody tr,
.pm-scope.pm-play .pm-slide-gap-line,
.pm-scope.pm-play .pm-add-plus,
.pm-scope.pm-play .pm-add-menu,
.pm-scope.pm-play .pm-quiz-section,
.pm-scope.pm-play .pm-live-dot {
  animation-play-state: running;
}

@keyframes pm-fade-in    { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-fade-out   { from { opacity: 1; } to { opacity: 0; } }
@keyframes pm-rise-in    { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pm-draw-line  { to { stroke-dashoffset: 0; } }
@keyframes pm-draw-arc   { to { stroke-dasharray: var(--pm-arc) 402.1; } }
@keyframes pm-menu-in    { to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes pm-menu-out   { from { opacity: 1; transform: translateX(-50%) scale(1); }
                           to   { opacity: 0; transform: translateX(-50%) scale(0.94); } }
@keyframes pm-click-ring { 0% { opacity: 0.45; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pm-pulse-dot  { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.75); } }
@keyframes pm-quiz-open  { to { max-height: 260px; opacity: 1; padding-bottom: 8px; } }

/* ── Scénario ÉDITEUR ── */
/* Le curseur descend jusqu'au gap, clique, choisit « Quiz », clique, puis
   file vers le champ question.
   Les coordonnées viennent de --pm-x-*/--pm-y-*, que le JS mesure sur les
   éléments [data-pm-target] à l'entrée à l'écran : le curseur vise juste
   quelle que soit la largeur du mockup (540 px sur la home, ~460 px sur la
   page outil auteur). Les valeurs en dur ne servent que de repli. */
@keyframes pm-cursor-editor {
  0%   { opacity: 0; left: 76%; top: 30px; }
  6%   { opacity: 1; left: 76%; top: 30px; }
  18%  { opacity: 1; left: var(--pm-x-plus,  50%); top: var(--pm-y-plus,  317px); }
  26%  { opacity: 1; left: var(--pm-x-plus,  50%); top: var(--pm-y-plus,  317px); }  /* clic (2,6 s) */
  36%  { opacity: 1; left: var(--pm-x-menu,  50%); top: var(--pm-y-menu,  429px); }
  42%  { opacity: 1; left: var(--pm-x-menu,  50%); top: var(--pm-y-menu,  429px); }  /* clic (4,4 s) */
  55%  { opacity: 1; left: var(--pm-x-field, 26%); top: var(--pm-y-field, 577px); }
  88%  { opacity: 1; left: var(--pm-x-field, 26%); top: var(--pm-y-field, 577px); }
  100% { opacity: 0; left: var(--pm-x-field, 26%); top: var(--pm-y-field, 577px); }
}
}
.pm-scene-editor .pm-cursor {
  animation: pm-cursor-editor 11s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
/* Deux halos de clic : au « + » (2.6 s) puis sur « Quiz » (4.4 s) */
.pm-scene-editor .pm-cursor::after {
  animation: pm-click-ring 0.55s ease-out 2.6s 1, pm-click-ring 0.55s ease-out 4.4s 1;
}
/* Le « + » et sa ligne n'existent qu'au survol dans l'app : ils apparaissent
   à l'arrivée du curseur et s'effacent une fois l'élément ajouté. */
.pm-scene-editor .pm-slide-gap-line {
  animation: pm-fade-in 0.25s ease-out 1.9s forwards,
             pm-fade-out 0.3s ease-in 4.7s forwards;
}
.pm-scene-editor .pm-add-plus {
  animation: pm-fade-in 0.25s ease-out 1.9s forwards,
             pm-fade-out 0.3s ease-in 4.7s forwards;
}
.pm-scene-editor .pm-add-menu {
  animation: pm-menu-in 0.22s cubic-bezier(0.2, 1.1, 0.4, 1) 2.75s forwards,
             pm-menu-out 0.18s ease-in 4.6s forwards;
}
.pm-scene-editor .pm-quiz-section {
  animation: pm-quiz-open 0.5s cubic-bezier(0.3, 0.9, 0.3, 1) 4.75s forwards;
}
/* Le champ prend le focus au moment où le curseur l'atteint */
.pm-scene-editor .pm-anim-focus {
  animation: pm-focus-on 0.2s ease-out 6s forwards;
}
@keyframes pm-focus-on {
  to { border-color: var(--pm-primary); box-shadow: 0 0 0 3px var(--pm-primary-lt); }
}
/* Caret clignotant pendant la frappe */
@keyframes pm-caret-blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
.pm-caret { animation: pm-caret-blink 1s steps(1) infinite; }

/* Indicateur d'auto-sauvegarde : idle → saving → saved */
.pm-scene-editor .pm-save-label--idle  { animation: pm-fade-out 0.01s linear 9.1s forwards; }
.pm-scene-editor .pm-save-label--saving {
  display: inline;
  opacity: 0;
  animation: pm-fade-in 0.2s linear 9.1s forwards, pm-fade-out 0.01s linear 10.1s forwards;
}
.pm-scene-editor .pm-save-label--saved {
  display: inline;
  opacity: 0;
  animation: pm-fade-in 0.25s ease-out 10.1s forwards;
}
.pm-scene-editor .pm-save-dot {
  animation: pm-pulse-dot 0.7s ease-in-out 9.1s 2;
}
/* Les libellés se superposent dans une même boîte, dimensionnée sur le plus
   long des trois pour qu'aucun ne soit tronqué au moment de la bascule. */
.pm-save-labels {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 146px;
  height: 1.2em;
}
.pm-save-labels > span {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
}

/* ── Scénario DASHBOARD ── */
/* Arcs du donut : chacun se déroule jusqu'à sa valeur --pm-arc */
.pm-scene-dash .pm-pie-arc { animation: pm-draw-arc 0.85s cubic-bezier(0.35, 0, 0.2, 1) forwards; }
.pm-scene-dash .pm-pie-arc--1 { animation-delay: 0.55s; }
.pm-scene-dash .pm-pie-arc--2 { animation-delay: 1.05s; }
.pm-scene-dash .pm-pie-arc--3 { animation-delay: 1.45s; }

/* Lignes du tableau, une par une */
.pm-scene-dash .pm-table tbody tr { animation: pm-rise-in 0.34s ease-out forwards; }
.pm-scene-dash .pm-table tbody tr:nth-child(1) { animation-delay: 0.9s; }
.pm-scene-dash .pm-table tbody tr:nth-child(2) { animation-delay: 1.05s; }
.pm-scene-dash .pm-table tbody tr:nth-child(3) { animation-delay: 1.20s; }
.pm-scene-dash .pm-table tbody tr:nth-child(4) { animation-delay: 1.35s; }
.pm-scene-dash .pm-table tbody tr:nth-child(5) { animation-delay: 1.50s; }
.pm-scene-dash .pm-table tbody tr:nth-child(6) { animation-delay: 1.65s; }

/* Jeu de séries A (6 mois) : tracé, puis effacement au changement de plage */
.pm-scene-dash .pm-ml-series--a .pm-ml-line {
  animation: pm-draw-line 1.5s ease-out 1.9s forwards, pm-fade-out 0.3s ease-in 6.1s forwards;
}
.pm-scene-dash .pm-ml-series--a .pm-ml-area {
  animation: pm-fade-in 0.5s ease-out 3.1s forwards, pm-fade-out 0.3s ease-in 6.1s forwards;
}
/* Jeu de séries B (30 J) : apparaît après le clic sur la pilule */
.pm-scene-dash .pm-ml-series--b { animation: pm-fade-in 0.01s linear 6.35s forwards; }
.pm-scene-dash .pm-ml-series--b .pm-ml-line {
  animation: pm-draw-line 1.1s ease-out 6.4s forwards;
}
.pm-scene-dash .pm-ml-series--b .pm-ml-area {
  animation: pm-fade-in 0.45s ease-out 7.2s forwards;
}
/* Bascule de la pilule de période au moment du clic */
@keyframes pm-pill-off {
  to { background: transparent; color: var(--pm-text-3); box-shadow: none; }
}
@keyframes pm-pill-on {
  to { background: #fff; color: var(--pm-primary); box-shadow: 0 1px 3px rgba(15,18,24,0.12); }
}
.pm-scene-dash .pm-anim-pill-off { animation: pm-pill-off 0.2s ease-out 6.2s forwards; }
.pm-scene-dash .pm-anim-pill-on  { animation: pm-pill-on 0.2s ease-out 6.2s forwards; }

/* Curseur : glisse vers la pilule « 30 J », clique, puis remonte sur la courbe.
   Coordonnées mesurées par le JS (voir plus haut). */
@keyframes pm-cursor-dash {
  0%   { opacity: 0; left: 25%; top: 97%; }
  38%  { opacity: 0; left: 25%; top: 97%; }
  44%  { opacity: 1; left: 34%; top: 92%; }
  60%  { opacity: 1; left: var(--pm-x-range, 71.4%); top: var(--pm-y-range, 670px); }
  68%  { opacity: 1; left: var(--pm-x-range, 71.4%); top: var(--pm-y-range, 670px); }  /* clic (6,2 s) */
  84%  { opacity: 1; left: var(--pm-x-point, 69.6%); top: var(--pm-y-point, 801px); }
  95%  { opacity: 1; left: var(--pm-x-point, 69.6%); top: var(--pm-y-point, 801px); }
  100% { opacity: 0; left: var(--pm-x-point, 69.6%); top: var(--pm-y-point, 801px); }
}
}
.pm-scene-dash .pm-cursor {
  animation: pm-cursor-dash 10s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}
.pm-scene-dash .pm-cursor::after { animation: pm-click-ring 0.55s ease-out 6.2s 1; }
.pm-scene-dash .pm-ml-tooltip {
  animation: pm-fade-in 0.25s ease-out 8.5s forwards, pm-fade-out 0.4s ease-in 9.9s forwards;
}
/* Ambiance permanente */
.pm-live-dot { animation: pm-pulse-dot 2.4s ease-in-out infinite; }

/* ───────────────────────────────────────────────
   7. RÉPLIQUE — INTERFACE APPRENANT (student/interface-appel.html)
   ─────────────────────────────────────────────── */

/* Deux panneaux, comme dans l'app : l'avatar à gauche, les slides à droite. */
.pm-learner {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  gap: 10px;
  padding: 10px;
  background: var(--pm-content-bg);
  min-height: 320px;
}

/* ── Panneau avatar ── */
.pm-avatar-frame {
  position: relative;
  border-radius: var(--pm-r-card);
  background: #1A1D23;
  overflow: hidden;
  box-shadow: var(--pm-shadow-md);
  /* .avatar-video-frame.speaking : liseré bleu quand l'avatar parle */
  border: 2px solid var(--pm-primary);
  box-shadow: 0 0 0 3px rgba(0, 109, 229, 0.18), var(--pm-shadow-md);
}
.pm-avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.pm-timer-pill,
.pm-state-pill {
  position: absolute;
  top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 9999px;
  font-family: var(--pm-font-d);
  font-size: 10.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  max-width: calc(100% - 18px);
  overflow: hidden;
}
.pm-timer-pill {
  left: 9px;
  background: rgba(15, 17, 22, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.pm-state-pill {
  right: 9px;
  background: rgba(0, 109, 229, 0.85);
  border: 1px solid rgba(0, 109, 229, 0.95);
}
.pm-state-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

/* Sous-titres : les répliques se relaient toutes les ~4 s */
.pm-subs {
  position: absolute;
  left: 0; right: 0;
  bottom: 40px;
  padding: 0 12px;
  text-align: center;
  min-height: 2.7em;
}
.pm-sub {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.7);
  opacity: 0;
}

.pm-avatar-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 24px 10px 9px;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
.pm-avatar-name {
  font-family: var(--pm-font-d);
  font-size: 11.5px;
  font-weight: 600;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-avatar-role {
  opacity: 0.75;
  font-size: 10px;
  font-weight: 400;
  margin-left: 6px;
  /* le rôle reste lisible même quand le prénom est collé au bord */
  white-space: nowrap;
}

/* ── Interface d'appel complète (le hero de la home) ──
   Reprend la structure réelle : colonne avatar (cadre vidéo + self-view),
   panneau slides avec chevrons et compteur, barre de contrôles. */
.pm-call { display: flex; flex-direction: column; background: var(--pm-content-bg); }

/* En-tête applicatif (interface-appel.html · .topbar) :
   logo, fil d'ariane du cours, présence sociale et profil apprenant. */
.pm-apptop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--pm-border-soft);
  flex-shrink: 0;
}
.pm-apptop-left,
.pm-apptop-right { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pm-apptop-logo { height: 17px; width: auto; display: block; flex-shrink: 0; }
.pm-apptop-sep { width: 1px; height: 16px; background: var(--pm-border-soft); flex-shrink: 0; }
.pm-apptop-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--pm-text-3);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.pm-apptop-bread { color: var(--pm-text-3); font-size: 11px; flex-shrink: 0; }
.pm-apptop-course {
  font-family: var(--pm-font-d);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pm-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Présence sociale : les autres apprenants en session */
.pm-apptop-social { display: flex; align-items: center; flex-shrink: 0; }
.pm-med {
  width: 21px; height: 21px;
  border-radius: 50%;
  margin-left: -6px;
  border: 2px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--pm-font-d);
  font-weight: 700;
  font-size: 8px;
  flex-shrink: 0;
}
.pm-med:first-child { margin-left: 0; }
.pm-med--more { background: var(--pm-content-bg); color: var(--pm-text-2); }
/* Profil : nom + niveau + barre d'XP */
.pm-apptop-user { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.pm-apptop-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--pm-primary-lt);
  border: 1px solid #C4D9FF;
  color: var(--pm-primary);
  font-family: var(--pm-font-d);
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-apptop-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-apptop-name {
  font-family: var(--pm-font-d);
  font-size: 11px;
  font-weight: 600;
  color: var(--pm-text);
  line-height: 1;
  white-space: nowrap;
}
.pm-apptop-gami { display: flex; align-items: center; gap: 5px; }
.pm-apptop-level { font-family: var(--pm-font-d); font-size: 9px; font-weight: 600; color: var(--pm-text-2); line-height: 1; white-space: nowrap; }
.pm-xp-bar { width: 46px; height: 4px; border-radius: 9999px; background: var(--pm-border-soft); overflow: hidden; }
.pm-xp-fill { height: 100%; border-radius: 9999px; background: var(--pm-primary); width: var(--pm-w, 0%); }

/* Barre de progression du cours, sous l'en-tête */
.pm-cpb { height: 3px; background: var(--pm-border-soft); flex-shrink: 0; }
.pm-cpb-fill { height: 100%; background: linear-gradient(90deg, var(--pm-primary), #4DA3FF); width: var(--pm-w, 0%); }
.pm-scope.pm-play .pm-cpb-fill,
.pm-scope.pm-play .pm-xp-fill {
  animation: pm-bar-fill 1.2s cubic-bezier(0.3, 0.9, 0.3, 1) var(--pm-delay, 0.4s) backwards;
}

@container pm (max-width: 430px) {
  /* À l'étroit, on garde le logo et le cours ; le profil détaillé saute. */
  .pm-apptop-social,
  .pm-apptop-meta,
  .pm-apptop-back,
  .pm-apptop-bread { display: none; }
}
.pm-call-body {
  /* flex:none — dans un conteneur flex en colonne, flex-basis prend le pas
     sur `height` : avec flex:1 la hauteur imposée était ignorée et le corps
     s'étirait à la taille intrinsèque des images. */
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  gap: 10px;
  padding: 10px;
  height: 300px;
  min-height: 0;
}
/* Colonne avatar : le cadre prend ~62 %, la webcam le reste (comme dans l'app) */
.pm-call-side {
  display: grid;
  grid-template-rows: 62fr 38fr;
  gap: 8px;
  min-height: 0;
}
.pm-call-side > * { min-height: 0; }
.pm-selfview {
  position: relative;
  min-height: 0;
  border-radius: var(--pm-r-card);
  border: 1px solid var(--pm-border);
  background: #1A1D23;
  overflow: hidden;
}
.pm-selfview img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pm-selfview-label {
  position: absolute;
  left: 7px; bottom: 6px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(15, 17, 22, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 9.5px;
  font-weight: 600;
}
.pm-selfview-privacy {
  position: absolute;
  right: 7px; bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
}

/* Chevrons de navigation entre slides */
/* La slide garde son 16:9 et se centre dans l'espace disponible, comme dans
   l'app — sans align-items:center elle s'étirerait sur toute la hauteur. */
.pm-slide-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-slide-stage .pm-slide-frame { flex: 1; max-height: 100%; }
.pm-slide-chev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--pm-border-soft);
  box-shadow: var(--pm-shadow-sm);
  color: var(--pm-text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.pm-slide-chev--prev { left: -6px; }
.pm-slide-chev--next { right: -6px; }

/* Barre de contrôles (interface-appel.css · .controls-bar) */
.pm-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 9px 12px;
  background: #15171A;
  flex-shrink: 0;
}
.pm-ctrl-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pm-ctrl-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}
.pm-ctrl-btn.is-active {
  background: rgba(0, 109, 229, 0.28);
  border-color: rgba(0, 109, 229, 0.5);
  color: #5BA7FF;
}
.pm-ctrl-btn--mic {
  width: 42px; height: 42px;
  background: var(--pm-primary);
  border-color: var(--pm-primary);
  color: #fff;
}
.pm-ctrl-btn--quit { background: rgba(235, 87, 87, 0.9); border-color: #EB5757; color: #fff; }
.pm-ctrl-lbl {
  font-size: 8px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.pm-ctrl-sep {
  width: 1px;
  height: 26px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
/* Halo qui pulse autour du micro : l'apprenant peut prendre la parole */
@keyframes pm-mic-halo {
  0%   { box-shadow: 0 0 0 0 rgba(0, 109, 229, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 109, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 109, 229, 0); }
}
.pm-scope.pm-play .pm-ctrl-btn--mic { animation: pm-mic-halo 2.4s ease-out infinite; }

/* ── Panneau slides ── */
.pm-learner-slides {
  display: flex;
  flex-direction: column;
  /* La slide est centrée verticalement dans son panneau, comme dans l'app :
     c'est l'avatar qui donne la hauteur, pas l'inverse. */
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.pm-slide-frame {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-card);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}
.pm-lslide {
  position: absolute;
  inset: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  opacity: 0;
}
.pm-lslide-title {
  font-family: var(--pm-font-d);
  font-size: 14px;
  font-weight: 700;
  color: var(--pm-text);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.pm-lslide-rule {
  width: 34px; height: 3px;
  border-radius: 2px;
  background: var(--pm-primary);
}
.pm-lslide-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
}
.pm-lslide-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--pm-text-2);
}
.pm-lslide-list li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pm-primary-lt);
  border: 1.5px solid var(--pm-primary);
  flex-shrink: 0;
}
.pm-lslide-note {
  font-size: 10.5px;
  color: var(--pm-text-3);
}

.pm-slide-dots-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}
.pm-slide-dots { display: flex; align-items: center; gap: 5px; }
.pm-sdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pm-border);
}
.pm-sdot.is-active { background: var(--pm-primary); }
.pm-slide-counter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  background: var(--pm-primary-lt);
  color: var(--pm-primary);
  border: 1px solid #C4D9FF;
  border-radius: 9999px;
  font-family: var(--pm-font-d);
  font-size: 11px;
  font-weight: 600;
}

/* ── Scénario APPRENANT — ambiance en boucle, pas de curseur ──
   Le hero doit rester lisible et laisser le CTA vidéo au premier plan :
   on montre seulement que « ça parle » et que le cours avance.

   Les décalages passent par --pm-d, lu DANS le raccourci `animation`.
   Un `animation-delay` déclaré à part serait écrasé : le raccourci le
   remet à 0 et sa règle (.pm-scope.pm-play .x) est plus spécifique. */
@keyframes pm-sub-cycle {
  0%, 2%    { opacity: 0; }
  6%, 28%   { opacity: 1; }
  32%, 100% { opacity: 0; }
}
.pm-scope.pm-play .pm-sub {
  animation: pm-sub-cycle 13s ease-in-out var(--pm-d, 0s) infinite;
}
.pm-sub--2 { --pm-d: 4.33s; }
.pm-sub--3 { --pm-d: 8.66s; }

@keyframes pm-slide-cycle {
  0%, 3%    { opacity: 0; }
  8%, 45%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.pm-scope.pm-play .pm-lslide {
  animation: pm-slide-cycle 13s ease-in-out var(--pm-d, 0s) infinite;
}
.pm-lslide--2 { --pm-d: 6.5s; }

/* La pastille active suit le même rythme que les slides */
@keyframes pm-sdot-cycle {
  0%, 3%    { background: var(--pm-border); }
  8%, 45%   { background: var(--pm-primary); }
  50%, 100% { background: var(--pm-border); }
}
.pm-scope.pm-play .pm-sdot--cycled {
  animation: pm-sdot-cycle 13s ease-in-out var(--pm-d, 0s) infinite;
}
.pm-sdot--cycled + .pm-sdot--cycled { --pm-d: 6.5s; }

.pm-state-dot { animation: pm-asp-pulse 1.6s ease-in-out infinite; }
@keyframes pm-asp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.85); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px rgba(255,255,255,0); opacity: 0.55; }
}

/* Avant le déclenchement (et sans JS) : première slide et premier
   sous-titre visibles — jamais de cadre vide. */
.pm-scope:not(.pm-play):not(.pm-static) .pm-lslide--1,
.pm-scope:not(.pm-play):not(.pm-static) .pm-sub--1 { opacity: 1; }

/* ───────────────────────────────────────────────
   7a. FORMATS COMPACTS — visuels des cartes « features » (~305 × 152)
   Mêmes composants, cadrés sur un seul élément signifiant.
   ─────────────────────────────────────────────── */
.pm-mini {
  display: flex;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  background: var(--pm-content-bg);
}
.pm-mini-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
/* Vignette avatar en portrait : le cadre de l'app, réduit */
.pm-mini .pm-avatar-frame {
  width: 104px;
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
  border-width: 1.5px;
}
.pm-mini-quote {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--pm-text-2);
}
.pm-mini .pm-voice-viz { color: var(--pm-primary); height: 18px; }

/* Le donut et sa légende côte à côte quand la place manque en hauteur */
.pm-pie-wrap--row {
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
.pm-pie-wrap--row .pm-pie-svg-wrap { width: 104px; height: 104px; }
.pm-pie-wrap--row .pm-pie-center { width: 62px; height: 62px; }
.pm-pie-wrap--row .pm-pie-num { font-size: 17px; }
.pm-pie-wrap--row .pm-pie-label { font-size: 9.5px; margin-top: 2px; }

/* Variante « à l'écoute » de la pastille d'état (avatar-state-pill.listening) */
.pm-state-pill--listening {
  background: rgba(62, 161, 90, 0.88);
  border-color: rgba(62, 161, 90, 0.95);
}
/* Pastille d'état hors du cadre vidéo : en flux, pas en surimpression */
.pm-state-pill--inline {
  position: static;
  align-self: flex-start;
  max-width: 100%;
}

/* ── Réglages de session (interface-appel.css · .chip-group / .chip) ── */
.pm-settings-label {
  font-family: var(--pm-font-d);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pm-text);
}
.pm-chip-group { display: flex; flex-wrap: wrap; gap: 5px; }
.pm-chip {
  padding: 5px 10px;
  border-radius: 9999px;
  background: var(--pm-content-bg);
  border: 1px solid var(--pm-border);
  font-family: var(--pm-font-d);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pm-text-2);
  white-space: nowrap;
}
.pm-chip.is-selected {
  background: var(--pm-primary);
  border-color: var(--pm-primary);
  color: #fff;
}

/* ── Fil de discussion (interface-appel.css · .chat-msg / .chat-bubble) ── */
.pm-chat { display: flex; flex-direction: column; gap: 10px; }
.pm-chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.pm-chat-msg--user { flex-direction: row-reverse; }
.pm-chat-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pm-font-d);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--pm-primary);
}
.pm-chat-av img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pm-chat-av--user { background: var(--pm-purple); }
.pm-chat-bubble {
  background: var(--pm-content-bg);
  border: 1px solid var(--pm-border);
  border-radius: 4px 10px 10px 10px;
  padding: 8px 11px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pm-text);
  min-width: 0;
}
.pm-chat-msg--user .pm-chat-bubble {
  background: var(--pm-primary-lt);
  border-color: #C4D9FF;
  border-radius: 10px 4px 10px 10px;
}

/* ───────────────────────────────────────────────
   7c-bis. SLIDES RENDUES
   De vraies slides plutôt que des barres grises. Les tailles sont en
   `cqw` (unités de container query) : le texte suit la largeur de la
   slide, donc la même slide reste lisible en miniature de 90 px comme
   en aperçu de 400 px, sans jeu de classes par taille.
   ─────────────────────────────────────────────── */
.pm-slide-render {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
}
/* Bandeau de titre coloré, comme sur un support d'entreprise */
.pm-slide-render::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3.5cqw;
  background: linear-gradient(90deg, var(--pm-primary), #4DA3FF);
}
.pm-sr-body {
  flex: 1;
  min-height: 0;
  padding: 8cqw 7cqw 6cqw;
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  overflow: hidden;
}
.pm-sr-title {
  font-family: var(--pm-font-d);
  font-size: 7cqw;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #1A2B45;
  /* un titre long ne doit pas pousser les puces hors de la slide */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-sr-rule { width: 14cqw; height: 1.4cqw; border-radius: 1cqw; background: var(--pm-primary); flex-shrink: 0; }
.pm-sr-list { display: flex; flex-direction: column; gap: 2.4cqw; list-style: none; }
.pm-sr-list li {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font-size: 5.4cqw;
  line-height: 1.25;
  color: #46586F;
}
.pm-sr-list li::before {
  content: '';
  width: 2.2cqw; height: 2.2cqw;
  border-radius: 50%;
  background: var(--pm-primary);
  flex-shrink: 0;
}
.pm-sr-note { margin-top: auto; font-size: 4.4cqw; color: #94A3B8; }

/* Variante couverture : fond plein, titre centré */
.pm-slide-render--cover { background: linear-gradient(135deg, #0B2F63 0%, #006DE5 100%); }
.pm-slide-render--cover::before { display: none; }
.pm-slide-render--cover .pm-sr-body { justify-content: center; align-items: flex-start; padding: 7cqw; }
.pm-slide-render--cover .pm-sr-title { color: #fff; font-size: 9.5cqw; }
.pm-slide-render--cover .pm-sr-sub { font-size: 5cqw; color: rgba(255,255,255,0.75); }
.pm-slide-render--cover .pm-sr-rule { background: rgba(255,255,255,0.85); }

/* Variante graphique : titre + petit histogramme */
.pm-sr-chart { display: flex; align-items: flex-end; gap: 2.6cqw; height: 22cqw; margin-top: auto; }
.pm-sr-bar { flex: 1; border-radius: 1cqw 1cqw 0 0; background: var(--pm-primary-lt); }
.pm-sr-bar--on { background: var(--pm-primary); }

/* Variante média : bloc image + puces à côté */
.pm-sr-split { display: flex; gap: 4cqw; flex: 1; min-height: 0; }
.pm-sr-media {
  width: 38%;
  border-radius: 2cqw;
  background: linear-gradient(135deg, #E8EFFB, #D3E1F7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8FAAD2;
  flex-shrink: 0;
}
.pm-sr-media svg { width: 30%; height: auto; }

/* ───────────────────────────────────────────────
   7d. ÉCRANS DU PARCOURS DE CRÉATION (page outil auteur)
   Import, réglages du cours, ressources, publication.
   ─────────────────────────────────────────────── */

/* ── Zone d'import (modale d'import de l'outil auteur) ── */
.pm-dropzone {
  border: 1.5px dashed var(--pm-border);
  border-radius: 10px;
  background: #FAFBFD;
  padding: 20px 16px;
  text-align: center;
  /* Centrage par le conteneur : le reset `.pm-scope div { margin: 0 }`
     est plus spécifique qu'un `margin: 0 auto` sur l'enfant. */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pm-dropzone-icon {
  width: 42px; height: 42px;
  margin-bottom: 10px;
  border-radius: 11px;
  background: var(--pm-primary-lt);
  color: var(--pm-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pm-dropzone-text {
  font-family: var(--pm-font-d);
  font-size: 13px;
  font-weight: 700;
  color: var(--pm-text);
}
.pm-dropzone-sub { font-size: 11.5px; color: var(--pm-text-3); margin-top: 3px; }
.pm-format-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
}
.pm-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 5px;
  font-family: var(--pm-font-d);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--pm-primary-lt);
  color: var(--pm-primary);
}
.pm-type-badge--pdf   { background: #FEE2E2; color: #EB5757; }
.pm-type-badge--video { background: #FFEDD5; color: #F97316; }
.pm-type-badge--doc   { background: #F3F0FF; color: var(--pm-purple); }

/* ── Carte de réglages (course/general.html · .settings-card) ── */
.pm-settings-card {
  background: #fff;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-card);
  overflow: hidden;
}
.pm-s-group-label {
  padding: 8px 14px 6px;
  font-family: var(--pm-font-d);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-text-3);
  background: var(--pm-bg-soft);
  border-bottom: 1px solid var(--pm-border);
}
.pm-s-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid #F0F2F5;
}
.pm-s-row:last-child { border-bottom: none; }
.pm-s-row--top { align-items: flex-start; }
.pm-s-label { font-size: 12px; font-weight: 600; color: var(--pm-text); line-height: 1.35; }
.pm-f-input,
.pm-f-textarea {
  border: 1px solid var(--pm-border);
  border-radius: 6.5px;
  padding: 7px 10px;
  font-family: var(--pm-font-b);
  font-size: 12px;
  color: var(--pm-text);
  background: #fff;
  line-height: 1.5;
}
.pm-f-input { height: 30px; padding: 0 10px; display: flex; align-items: center; }
.pm-f-input--empty,
.pm-f-textarea--empty { color: var(--pm-text-3); }

/* ── Liste de ressources (course/resources.html · .res-table) ── */
.pm-res-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #F1F4F8;
}
.pm-res-row:last-child { border-bottom: none; }
.pm-res-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}
.pm-res-icon--pdf  { background: #FEE2E2; color: #EB5757; }
.pm-res-icon--link { background: var(--pm-primary-lt); color: var(--pm-primary); }
.pm-res-icon--doc  { background: #F3F0FF; color: var(--pm-purple); }
/* display:block explicite — ces éléments sont des <span> pour rester
   valides à l'intérieur des lignes, mais doivent s'empiler. */
.pm-res-body { flex: 1; min-width: 0; display: block; }
.pm-res-name {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--pm-text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-res-url {
  display: block;
  font-size: 10.5px;
  color: var(--pm-text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Interrupteur (components.css · .toggle-switch), figé ── */
.pm-toggle {
  position: relative;
  width: 34px; height: 19px;
  border-radius: 9999px;
  background: var(--pm-border);
  flex-shrink: 0;
}
.pm-toggle::before {
  content: '';
  position: absolute;
  top: 2.5px; left: 2.5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.18s ease;
}
.pm-toggle.is-on { background: var(--pm-primary); }
.pm-toggle.is-on::before { transform: translateX(15px); }

/* ── Publication / accès (course/access.html) ── */
.pm-publish-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #F1F4F8;
  font-size: 12px;
}
.pm-publish-row:last-child { border-bottom: none; }
.pm-publish-label { color: var(--pm-text-2); }
.pm-publish-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--pm-font-d);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--pm-text);
  white-space: nowrap;
}
.pm-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pm-success);
  flex-shrink: 0;
}
.pm-status-dot--idle { background: var(--pm-text-3); }

/* ── Question d'interaction (outil auteur) ── */
.pm-iq {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 11px;
  border-radius: 8px;
  background: var(--pm-purple-lt);
  border: 1px solid rgba(124, 58, 237, 0.25);
}
.pm-iq-tag {
  font-family: var(--pm-font-d);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-purple);
  background: #fff;
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 4px;
  padding: 2.5px 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.pm-iq-text { font-size: 11.5px; color: var(--pm-text); line-height: 1.45; }

/* Ligne de récap discrète sous un bloc */
.pm-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--pm-text-3);
}

/* ───────────────────────────────────────────────
   7e. PROGRAMME DU COURS (student/course-program.html)
   Avancement par chapitre + indicateur de saisie de l'avatar.
   ─────────────────────────────────────────────── */
.pm-ch-list { display: flex; flex-direction: column; gap: 10px; }
.pm-ch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pm-ch-num {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--pm-content-bg);
  border: 1px solid var(--pm-border);
  color: var(--pm-text-2);
  font-family: var(--pm-font-d);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-ch-row.is-done .pm-ch-num {
  background: var(--pm-success);
  border-color: var(--pm-success);
  color: #fff;
}
.pm-ch-row.is-current .pm-ch-num {
  background: var(--pm-primary);
  border-color: var(--pm-primary);
  color: #fff;
}
.pm-ch-body { flex: 1; min-width: 0; }
.pm-ch-title {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--pm-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm-ch-row.is-current .pm-ch-title { color: var(--pm-text); font-weight: 600; }
.pm-ch-bar-bg {
  height: 5px;
  margin-top: 5px;
  border-radius: 9999px;
  background: var(--pm-border-soft);
  overflow: hidden;
}
.pm-ch-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--pm-primary);
  /* la largeur cible est portée par --pm-w, le scénario l'anime depuis 0 */
  width: var(--pm-w, 0%);
}
.pm-ch-bar--done { background: var(--pm-success); }
.pm-ch-pct {
  font-family: var(--pm-font-d);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--pm-text-3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Indicateur « l'avatar rédige » */
.pm-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  border-radius: 4px 10px 10px 10px;
  background: var(--pm-content-bg);
  border: 1px solid var(--pm-border);
}
.pm-typing-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--pm-text-3);
}
@keyframes pm-typing { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
                       30% { opacity: 1; transform: translateY(-3px); } }
.pm-scope.pm-play .pm-typing-dot {
  animation: pm-typing 1.25s ease-in-out var(--pm-d, 0s) infinite;
}
.pm-typing-dot:nth-child(2) { --pm-d: 0.15s; }
.pm-typing-dot:nth-child(3) { --pm-d: 0.3s; }

/* Barre d'avancement global, en pied de fenêtre */
.pm-progress-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--pm-border-soft);
  font-size: 11px;
  color: var(--pm-text-2);
}
.pm-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 9999px;
  background: var(--pm-border-soft);
  overflow: hidden;
}
.pm-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--pm-success), #4ADE80);
  width: var(--pm-w, 0%);
}
.pm-progress-pct {
  font-family: var(--pm-font-d);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--pm-success);
  flex-shrink: 0;
}

/* Les barres se remplissent une fois, à l'entrée à l'écran */
@keyframes pm-bar-fill { from { width: 0; } to { width: var(--pm-w, 0%); } }
.pm-scope.pm-play .pm-ch-bar,
.pm-scope.pm-play .pm-progress-fill {
  animation: pm-bar-fill 1.1s cubic-bezier(0.3, 0.9, 0.3, 1) var(--pm-delay, 0.3s) backwards;
}

/* Fenêtre ancrée en bas du bloc : coins arrondis en haut seulement */
.pm-win--bottom { border-radius: 14px 14px 0 0; border-bottom: none; }

/* ── Page rendez-vous : les deux faces du produit ──
   Un seul fil de discussion laissait croire à un simple chatbot. On montre
   donc les deux temps du produit, empilés : on crée le module (carte du
   haut), les apprenants le suivent en session (fenêtre du bas).
   Empilement plutôt que superposition : dans une colonne de ~590 px, une
   carte en surimpression recouvrait le texte du hero. */
.pm-duo {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pm-duo-back { flex-shrink: 0; }
.pm-duo-front { flex-shrink: 0; }
.pm-duo-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-family: var(--pm-font-d);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Mise en page de la session (page rendez-vous) : parcours à gauche,
   échange avec l'avatar à droite. */
.pm-rdv-body {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  min-height: 0;
}
.pm-rdv-side {
  padding: 14px;
  background: rgba(0, 0, 0, 0.18);
  border-right: 1px solid var(--pm-border-soft);
}
.pm-rdv-main { padding: 14px; min-width: 0; }
.pm-rdv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.pm-rdv-title {
  font-family: var(--pm-font-d);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--pm-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@container pm (max-width: 560px) {
  .pm-rdv-body { grid-template-columns: minmax(0, 1fr); }
  /* À l'étroit, l'échange avec l'avatar porte le message : le parcours passe à la trappe. */
  .pm-rdv-side { display: none; }
}

/* ───────────────────────────────────────────────
   7d-bis. SCÉNARIOS DES 8 ÉTAPES (page outil auteur)
   Chaque étape joue son propre geste à l'entrée à l'écran.
   ─────────────────────────────────────────────── */

/* Étape 1 — le fichier tombe dans la zone d'import, puis se téléverse */
@keyframes pm-drop-in {
  0%   { opacity: 0; transform: translateY(-18px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(2px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
@keyframes pm-dz-active {
  0%, 100% { border-color: var(--pm-border); background: #FAFBFD; }
  50%      { border-color: var(--pm-primary); background: var(--pm-primary-lt); }
}
.pm-scope.pm-play .pm-anim-drop { animation: pm-drop-in 0.6s cubic-bezier(0.2, 1.1, 0.4, 1) 0.9s backwards; }
.pm-scope.pm-play .pm-anim-dropzone { animation: pm-dz-active 1.6s ease-in-out 0.4s 1; }

/* Barre de téléversement */
.pm-upload-bar {
  height: 4px;
  border-radius: 9999px;
  background: var(--pm-border-soft);
  overflow: hidden;
  margin-top: 10px;
}
.pm-upload-fill { height: 100%; border-radius: 9999px; background: var(--pm-primary); width: 0; }
@keyframes pm-upload { from { width: 0; } to { width: 100%; } }
.pm-scope.pm-play .pm-upload-fill { animation: pm-upload 1.5s cubic-bezier(0.3, 0.8, 0.3, 1) 1.4s forwards; }
.pm-upload-done { opacity: 0; font-size: 11px; color: var(--pm-success); font-weight: 600; margin-top: 6px; }
.pm-scope.pm-play .pm-upload-done { animation: pm-fade-in 0.3s ease-out 2.9s forwards; }

/* Étape 3 & suivantes — apparition en cascade des lignes */
.pm-anim-stagger > * { opacity: 0; }
.pm-scope.pm-play .pm-anim-stagger > * {
  animation: pm-rise-in 0.4s ease-out var(--pm-d, 0s) forwards;
}
.pm-anim-stagger > *:nth-child(1) { --pm-d: 0.5s; }
.pm-anim-stagger > *:nth-child(2) { --pm-d: 0.75s; }
.pm-anim-stagger > *:nth-child(3) { --pm-d: 1.0s; }
.pm-anim-stagger > *:nth-child(4) { --pm-d: 1.25s; }
.pm-anim-stagger > *:nth-child(5) { --pm-d: 1.5s; }

/* Étape 4 & 7 — l'interrupteur bascule tout seul */
@keyframes pm-toggle-on {
  to { background: var(--pm-primary); }
}
@keyframes pm-toggle-knob { to { transform: translateX(15px); } }
.pm-toggle.pm-anim-toggle { background: var(--pm-border); }
.pm-toggle.pm-anim-toggle::before { transform: translateX(0); }
.pm-scope.pm-play .pm-toggle.pm-anim-toggle { animation: pm-toggle-on 0.25s ease-out 1.9s forwards; }
.pm-scope.pm-play .pm-toggle.pm-anim-toggle::before { animation: pm-toggle-knob 0.25s cubic-bezier(0.3, 1.2, 0.5, 1) 1.9s forwards; }

/* Étape 7 — les pastilles de statut passent au vert l'une après l'autre */
@keyframes pm-status-go { to { background: var(--pm-success); } }
.pm-status-dot.pm-anim-status { background: var(--pm-text-3); }
.pm-scope.pm-play .pm-status-dot.pm-anim-status {
  animation: pm-status-go 0.3s ease-out var(--pm-d, 0.6s) forwards;
}

/* Curseur de saisie réutilisable hors du scénario éditeur */
.pm-scope.pm-play .pm-anim-focus-soft {
  animation: pm-focus-on 0.2s ease-out var(--pm-d, 0.6s) forwards;
}

/* ───────────────────────────────────────────────
   7b. VARIANTE SUR FOND SOMBRE (section « engagement » de la home)
   Une carte blanche y ferait tache : on retourne les surfaces, en
   gardant les couleurs de marque et la structure des composants.
   ─────────────────────────────────────────────── */
.pm-scope--dark {
  --pm-content-bg:  rgba(255, 255, 255, 0.07);
  --pm-bg-soft:     rgba(255, 255, 255, 0.04);
  --pm-border:      rgba(255, 255, 255, 0.18);
  --pm-border-soft: rgba(255, 255, 255, 0.12);
  --pm-text:        #FFFFFF;
  --pm-text-2:      rgba(255, 255, 255, 0.68);
  --pm-text-3:      rgba(255, 255, 255, 0.45);
  --pm-primary-lt:  rgba(0, 109, 229, 0.28);
}
/* Les surfaces « carte » sont en #fff en dur dans les composants clairs :
   il faut les retourner explicitement, sinon on obtient du texte blanc sur
   fond blanc. */
.pm-scope--dark.pm-win,
.pm-scope--dark .pm-win,
.pm-scope--dark .pm-settings-card,
.pm-scope--dark .pm-chapter-card,
.pm-scope--dark .pm-chart-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.pm-scope--dark .pm-win-bar {
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.pm-scope--dark .pm-win-title { color: rgba(255, 255, 255, 0.45); }
.pm-scope--dark .pm-topbar {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.pm-scope--dark .pm-slide-item,
.pm-scope--dark .pm-slide-title-input,
.pm-scope--dark .pm-slide-textarea,
.pm-scope--dark .pm-f-input,
.pm-scope--dark .pm-f-textarea,
.pm-scope--dark .pm-quiz-q-input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--pm-text);
}
.pm-scope--dark .pm-chat-av { border: 1px solid rgba(255, 255, 255, 0.18); }
.pm-scope--dark .pm-typing-dot { background: rgba(255, 255, 255, 0.55); }
.pm-scope--dark .pm-ch-pct { color: rgba(255, 255, 255, 0.55); }
.pm-scope--dark .pm-mini { background: transparent; padding: 0; }
.pm-scope--dark .pm-chip.is-selected {
  background: var(--pm-primary);
  border-color: var(--pm-primary);
  color: #fff;
}
.pm-scope--dark .pm-chat-bubble { backdrop-filter: blur(2px); }
.pm-scope--dark .pm-chat-msg--user .pm-chat-bubble { border-color: rgba(0, 109, 229, 0.55); }
.pm-scope--dark .pm-mini-quote { color: var(--pm-text-2); }

/* ───────────────────────────────────────────────
   7c. WAVEFORM AUDIO (interface-appel.css · .voice-viz / .vbar)
   Ambiance permanente : c'est le signal « cette formation est parlée ».
   Hauteurs fixes + scaleY, exactement comme dans l'app (animation
   compositée, donc gratuite même en boucle infinie).
   ─────────────────────────────────────────────── */
.pm-voice-viz {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 20px;
  flex-shrink: 0;
  color: #fff;
}
.pm-vbar {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.9;
  transform-origin: bottom;
}
@keyframes pm-vbar {
  from { transform: scaleY(0.2); opacity: 0.3; }
  to   { transform: scaleY(1);   opacity: 1; }
}
.pm-scope.pm-play .pm-vbar { animation: pm-vbar 0.7s ease-in-out var(--pm-d, 0s) infinite alternate; }
.pm-vbar:nth-child(1) { height: 4px;  --pm-d: 0s;    }
.pm-vbar:nth-child(2) { height: 13px; --pm-d: 0.07s; }
.pm-vbar:nth-child(3) { height: 18px; --pm-d: 0.14s; }
.pm-vbar:nth-child(4) { height: 11px; --pm-d: 0.21s; }
.pm-vbar:nth-child(5) { height: 16px; --pm-d: 0.09s; }
.pm-vbar:nth-child(6) { height: 8px;  --pm-d: 0.28s; }
.pm-vbar:nth-child(7) { height: 14px; --pm-d: 0.04s; }
.pm-vbar:nth-child(8) { height: 6px;  --pm-d: 0.24s; }

/* ───────────────────────────────────────────────
   8. ÉTAT STATIQUE — reduced motion + fallback sans JS
   Tout est figé dans son état FINAL (donut plein, courbes tracées,
   quiz déplié) : l'information reste intégralement lisible.
   ─────────────────────────────────────────────── */
.pm-scope.pm-static *,
.pm-scope.pm-static *::before,
.pm-scope.pm-static *::after {
  animation: none !important;
  transition: none !important;
}
.pm-scope.pm-static .pm-cursor,
.pm-scope.pm-static .pm-add-menu,
.pm-scope.pm-static .pm-slide-gap-line,
.pm-scope.pm-static .pm-add-plus,
.pm-scope.pm-static .pm-ml-tooltip,
.pm-scope.pm-static .pm-ml-series--a { opacity: 0; }
.pm-scope.pm-static .pm-quiz-section { max-height: 260px; opacity: 1; padding-bottom: 8px; }
.pm-scope.pm-static .pm-quiz-q-input { border-color: var(--pm-primary); box-shadow: 0 0 0 3px var(--pm-primary-lt); }
.pm-scope.pm-static .pm-caret { display: none; }
.pm-scope.pm-static .pm-save-label--idle,
.pm-scope.pm-static .pm-save-label--saving { display: none; }
.pm-scope.pm-static .pm-save-label--saved { display: inline; opacity: 1; }
.pm-scope.pm-static .pm-pie-arc { stroke-dasharray: var(--pm-arc) 402.1; }
.pm-scope.pm-static .pm-table tbody tr { opacity: 1; }
.pm-scope.pm-static .pm-ml-series--b { opacity: 1; }
.pm-scope.pm-static .pm-ml-series--b .pm-ml-line { stroke-dashoffset: 0; }
.pm-scope.pm-static .pm-ml-series--b .pm-ml-area { opacity: 1; }
.pm-scope.pm-static .pm-sub--1 { opacity: 1; }
.pm-scope.pm-static .pm-lslide--1 { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pm-scope *,
  .pm-scope *::before,
  .pm-scope *::after {
    animation: none !important;
    transition: none !important;
  }
  .pm-scope .pm-cursor,
  .pm-scope .pm-add-menu,
  .pm-scope .pm-slide-gap-line,
  .pm-scope .pm-add-plus,
  .pm-scope .pm-ml-tooltip,
  .pm-scope .pm-ml-series--a { opacity: 0; }
  .pm-scope .pm-quiz-section { max-height: 260px; opacity: 1; padding-bottom: 8px; }
  .pm-scope .pm-quiz-q-input { border-color: var(--pm-primary); box-shadow: 0 0 0 3px var(--pm-primary-lt); }
  .pm-scope .pm-caret { display: none; }
  .pm-scope .pm-save-label--idle,
  .pm-scope .pm-save-label--saving { display: none; }
  .pm-scope .pm-save-label--saved { display: inline; opacity: 1; }
  .pm-scope .pm-pie-arc { stroke-dasharray: var(--pm-arc) 402.1; }
  .pm-scope .pm-table tbody tr { opacity: 1; }
  .pm-scope .pm-ml-series--b { opacity: 1; }
  .pm-scope .pm-ml-series--b .pm-ml-line { stroke-dashoffset: 0; }
  .pm-scope .pm-ml-series--b .pm-ml-area { opacity: 1; }
  .pm-scope .pm-sub--1 { opacity: 1; }
  .pm-scope .pm-lslide--1 { opacity: 1; }
}

/* ───────────────────────────────────────────────
   9. RESPONSIVE — recadrage sur la partie clé, jamais de scale global

   Tout est piloté par la LARGEUR DU MOCKUP (@container), pas par celle du
   viewport : sur la home il vit dans une colonne de ~540 px au sein d'une
   page de 1440 px, donc une media query viewport se tromperait de cible.
   ─────────────────────────────────────────────── */

/* ── Palier 1 · ~700 px : le tableau des groupes passe sous les KPI ── */
@container pm (max-width: 700px) {
  /* :not() indispensable — sans lui cette règle écraserait la ligne tendance,
     qui doit rester sur une seule colonne. */
  .pm-dash-row:not(.pm-dash-row--trends) {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  }
  .pm-dash-row > .pm-chart-card--table { grid-column: 1 / -1; }
  /* Titre et sélecteur de période passent à la ligne plutôt que de se chevaucher */
  .pm-chart-header { flex-wrap: wrap; row-gap: 8px; padding: 11px 14px 10px; }
  .pm-kpi-stack { grid-template-rows: auto auto; }
  .pm-kpi-num { font-size: 30px; }
  .pm-kpi-suffix { font-size: 16px; }
  .pm-kpi-block { padding: 13px 14px; gap: 11px; }
  .pm-kpi-icon { width: 38px; height: 38px; border-radius: 11px; }
  .pm-kpi-icon svg { width: 19px; height: 19px; }
  .pm-kpi-label { font-size: 12.5px; }
  .pm-kpi-sub { font-size: 11px; }
  .pm-pie-svg-wrap { width: 116px; height: 116px; }
  .pm-pie-center { width: 68px; height: 68px; }
  .pm-pie-num { font-size: 19px; }
  .pm-chart-body { padding: 12px 14px; }
  .pm-dash-body { padding: 14px; gap: 12px; }
  .pm-dash-row { gap: 12px; }
}

/* ── Palier intermédiaire · ~560 px ──
   La pastille numérotée dit déjà « chapitre 2 » : on retire le libellé
   redondant plutôt que de tronquer le titre, qui porte l'information. */
@container pm (max-width: 560px) {
  .pm-chapter-label { display: none; }
}

/* ── Palier 2 · ~430 px : recadrage sur l'essentiel ──
   Dashboard → les 2 KPI + le donut, empilés et lisibles (le tableau et la
   courbe seraient illisibles à cette largeur).
   Éditeur   → une slide et le quiz, miniature réduite. */
@container pm (max-width: 430px) {
  .pm-dash-row:not(.pm-dash-row--trends) { grid-template-columns: minmax(0, 1fr); }
  .pm-dash-row > .pm-chart-card--table,
  .pm-dash-row--trends { display: none; }
  .pm-kpi-block { padding: 14px 15px; }
  .pm-kpi-num { font-size: 32px; }
  .pm-pie-svg-wrap { width: 128px; height: 128px; }
  .pm-pie-center { width: 74px; height: 74px; }
  .pm-pie-num { font-size: 21px; }
  .pm-pie-legend-item { font-size: 12.5px; }

  /* Interface apprenant : avatar au-dessus, slide en dessous. Côte à côte à
     cette largeur, ni le visage ni le texte de la slide ne seraient lisibles. */
  .pm-learner { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: 0; }
  .pm-avatar-frame { aspect-ratio: 16 / 10; }
  .pm-subs { bottom: 36px; }
  .pm-sub { font-size: 11px; }
  .pm-lslide-title { font-size: 13px; }
  .pm-lslide-list li { font-size: 11px; }

  .pm-chapter-meta { display: none; }
  .pm-slide-item--secondary { display: none; }
  .pm-chapter-label { font-size: 13.5px; }
  .pm-chapter-title { font-size: 13.5px; padding: 5px 8px; }

  /* La slide s'empile : numéro + miniature sur une ligne, puis le contenu sur
     toute la largeur — sinon la colonne de texte tombe à un mot par ligne. */
  .pm-slide-item { padding: 10px; gap: 9px; flex-wrap: wrap; }
  .pm-slide-thumb { width: 104px; }
  .pm-thumb-title { font-size: 7.5px; }
  .pm-thumb-line { height: 2px; }
  .pm-slide-content-col { flex-basis: 100%; }
  .pm-slide-title-input { font-size: 12.5px; padding: 7px 9px; }
  .pm-slide-textarea {
    font-size: 12px;
    /* La narration est illustrative : on la coupe net à 3 lignes.
       box-sizing: border-box → la hauteur max doit inclure le padding ET la
       bordure : 3 × 18 + 2 × 9 + 2 × 1 = 74. Sans les 2 px de bordure, la
       3e ligne était rognée par le bas. */
    line-height: 18px;
    max-height: 74px;
    overflow: hidden;
  }
  .pm-quiz-sep-badge { font-size: 11.5px; padding: 5px 12px; }
  .pm-quiz-q-label { font-size: 10px; }
  .pm-quiz-q-input { font-size: 12px; }
  .pm-win-title { font-size: 11px; }
  .pm-win-body { padding: 10px; }
  .pm-dash-body { padding: 10px; gap: 10px; }
  .pm-topbar { padding: 9px 12px; }
  .pm-breadcrumb { font-size: 11.5px; }
  .pm-save { display: none; }
}

/* Le curseur suit le doigt de personne : sur écran tactile, on montre
   directement l'état final plutôt qu'une souris fantôme. */
@media (hover: none), (max-width: 768px) {
  .pm-cursor { display: none; }
}