/* ==========================================================================
   FORMATIONS EN LIGNE (v2), côté apprenant : « Mes formations », sommaire,
   lecteur de leçon, quiz, formation terminée. Préfixe .trn-l-.
   Fidèle aux maquettes mobiles M14 à M20 : colonne de lecture de 520 px
   (480 px sur la page publique), bords blancs, barre d'action collée en bas,
   boutons de 52 px (orange var(--ds-primary-500) / contour var(--ds-ink-400)), avancement vert var(--ds-success).
   Règles du projet : jamais d'ombre, jamais d'accent en bordure gauche.
   ========================================================================== */

.trn-l-page {
  --trn-l-nav-offset: 0px;
  font-family: var(--ds-font);
  color: var(--ds-ink-800);
}

.trn-l-page [hidden] {
  display: none !important;
}

.trn-l-page form.button_to,
.trn-l-page .button_to {
  margin: 0;
  display: flex;
}

/* Contenu visuellement caché (champs radio et cases personnalisés). */
.trn-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.trn-l-container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: var(--ds-s6);
}

/* ---------- Titres et textes ---------- */
.trn-l-head {
  margin-bottom: var(--ds-s4);
}

.trn-l-title {
  margin: 0;
  font-size: var(--ds-fs-h2);
  font-weight: var(--ds-fw-bold);
  line-height: var(--ds-lh-snug);
  color: var(--ds-ink-800);
  overflow-wrap: anywhere;
}

.trn-l-subtitle,
.trn-l-muted {
  margin: var(--ds-s1) 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-ink-500);
}

.trn-l-lead {
  margin: var(--ds-s2) 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ds-ink-700);
}

.trn-l-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.trn-l-inline-link {
  color: var(--ds-ink-800);
  font-weight: 600;
  text-decoration: underline;
}

.trn-l-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink-500);
  text-decoration: none;
}

.trn-l-back:hover {
  color: var(--ds-ink-800);
}

/* ---------- Boutons des écrans d'apprentissage ---------- */
.trn-l-btn {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--ds-s5);
  border: 1px solid transparent;
  border-radius: var(--ds-r-sm);
  font-family: var(--ds-font);
  font-size: var(--ds-fs-body);
  font-weight: var(--ds-fw-semi);
  line-height: var(--ds-lh-normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.trn-l-btn.is-primary {
  background: var(--ds-primary-500);
  border-color: var(--ds-primary-500);
  color: var(--ds-on-primary);
}

.trn-l-btn.is-primary:hover {
  background: var(--ds-primary-600);
  border-color: var(--ds-primary-600);
  color: var(--ds-on-primary);
}

.trn-l-btn.is-secondary {
  background: var(--ds-surface);
  border-color: var(--ds-line-strong);
  color: var(--ds-ink-800);
  font-weight: 600;
}

.trn-l-btn.is-secondary:hover {
  border-color: var(--ds-ink-800);
  color: var(--ds-ink-800);
}

.trn-l-btn:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus);
}

.trn-l-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Écran d'apprentissage : colonne blanche de lecture ---------- */
.trn-l-container.trn-l-screen {
  max-width: 520px;
  padding: 0;
  background: var(--ds-surface);
  color: var(--ds-ink-800);
  font-size: 16px;
  line-height: 1.5;
}

:where(.trn-l-screen) :where(p, h1, h2, ul, ol) {
  margin: 0;
}

.trn-l-screen > .trn-l-back {
  margin: 0 20px;
}

.trn-l-screen .trn-l-banner {
  margin: 0 20px 12px;
}

.trn-l-pad {
  margin-left: 20px;
  margin-right: 20px;
}

.trn-l-body-pad {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 0;
}

.trn-l-sep {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--ds-line-soft);
}

.trn-l-block-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-ink-800);
}

.trn-l-block {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Barre d'action collée en bas de l'écran. */
.trn-l-bar {
  position: sticky;
  bottom: var(--trn-l-nav-offset);
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-line);
}

/* ---------- « Mes formations » : en-tête, filtres, sections ---------- */
.trn-l-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

/* ---------- Sommaire (M14) ---------- */
.trn-l-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px 12px;
}

.trn-l-hero .trn-l-title {
  font-size: 22px;
  line-height: 1.3;
}

.trn-l-card-meta {
  margin: 0;
  font-size: 14px;
  color: var(--ds-ink-500);
}

.trn-l-hero .trn-l-card-meta {
  margin-top: -6px;
}

.trn-l-progress {
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--ds-line);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.trn-l-progress::-webkit-progress-bar {
  background: var(--ds-line);
  border-radius: 999px;
}

.trn-l-progress::-webkit-progress-value {
  background: var(--ds-success);
  border-radius: 999px;
}

.trn-l-progress::-moz-progress-bar {
  background: var(--ds-success);
  border-radius: 999px;
}

.trn-l-progress-text {
  margin: -4px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-ink-800);
}

.trn-l-modules {
  padding: 0 12px;
}

.trn-l-module {
  border-top: 1px solid var(--ds-line-soft);
}

.trn-l-module-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px;
  cursor: pointer;
  list-style: none;
}

.trn-l-module-head::-webkit-details-marker {
  display: none;
}

.trn-l-module-head:focus-visible {
  outline: 2px solid var(--ds-ink-800);
  outline-offset: -2px;
  border-radius: 12px;
}

.trn-l-module-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.trn-l-module-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-ink-800);
  overflow-wrap: anywhere;
}

.trn-l-module-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: var(--ds-ink-500);
}

.trn-l-module-sub.is-done {
  color: var(--ds-success);
}

.trn-l-chevron {
  flex: 0 0 auto;
  color: var(--ds-ink-500);
  transition: transform 0.15s ease;
}

.trn-l-module[open] > .trn-l-module-head .trn-l-chevron {
  transform: rotate(180deg);
}

.trn-l-lessons {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
}

.trn-l-lesson {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
}

.trn-l-lesson:hover {
  background: var(--ds-surface-muted);
}

.trn-l-lesson.is-in_progress,
.trn-l-lesson.is-in_progress:hover {
  background: var(--ds-primary-50);
}

.trn-l-dot {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border: 2px solid var(--ds-ink-400);
  border-radius: 50%;
  background: var(--ds-surface);
  color: var(--ds-on-primary);
}

.trn-l-dot.is-in_progress {
  border-color: var(--ds-primary-700);
  color: var(--ds-primary-700);
}

.trn-l-dot.is-done {
  border-color: var(--ds-success);
  background: var(--ds-success);
}

.trn-l-lesson-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.trn-l-lesson-optional {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-bottom: 2px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--ds-surface-muted);
  color: var(--ds-ink-700);
  font-size: 12px;
  font-weight: 600;
}

.trn-l-lesson-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ds-ink-800);
  overflow-wrap: anywhere;
}

.trn-l-lesson.is-in_progress .trn-l-lesson-title {
  font-weight: 700;
}

.trn-l-lesson-meta {
  font-size: 14px;
  color: var(--ds-ink-500);
}

.trn-l-lesson-state {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-success);
}

.trn-l-lesson.is-in_progress .trn-l-lesson-state {
  color: var(--ds-primary-700);
}

.trn-l-quiz-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  margin: 4px 0 8px;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--ds-surface-muted);
  text-decoration: none;
  color: inherit;
}

.trn-l-quiz-row:hover {
  background: var(--ds-line-soft);
}

.trn-l-quiz-icon {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border: 2px solid var(--ds-ink-400);
  border-radius: 8px;
  background: var(--ds-surface);
  color: var(--ds-ink-800);
}

.trn-l-quiz-row .trn-l-lesson-title {
  font-weight: 600;
}

/* Barre « Prochaine étape » du sommaire. */
.trn-l-next {
  position: sticky;
  bottom: var(--trn-l-nav-offset);
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 20px max(16px, env(safe-area-inset-bottom, 0px));
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-line);
}

.trn-l-next-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trn-l-next-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ds-ink-500);
}

.trn-l-next-title {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-ink-800);
  overflow-wrap: anywhere;
}

.trn-l-next-meta {
  font-size: 14px;
  color: var(--ds-ink-500);
}

/* ---------- Lecteur de leçon (M15, M16, M17) ---------- */
.trn-l-lessonpage {
  background: var(--ds-surface);
}

.trn-l-stage {
  position: relative;
  background: var(--ds-ink-900);
  color: var(--ds-on-primary);
}

.trn-l-stage-back {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  border-radius: 50%;
  background: rgba(27, 42, 59, 0.55);
  color: var(--ds-on-primary);
}

.trn-l-stage-back:hover {
  color: var(--ds-on-primary);
  background: rgba(27, 42, 59, 0.75);
}

.trn-l-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--ds-ink-900);
  overflow: hidden;
}

.trn-l-video-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.trn-l-video.is-hosted {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
}

.trn-l-video-el {
  display: block;
  width: 100%;
  max-height: 70vh;
  aspect-ratio: 16 / 9;
  background: transparent;
  object-fit: contain;
}

.trn-l-video.is-portrait .trn-l-video-el {
  width: auto;
  max-width: 100%;
  height: 70vh;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
}

/* Pastilles langue et qualité, en haut à droite de la vidéo (les commandes natives restent en bas). */
.trn-l-pills {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.trn-l-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(27, 42, 59, 0.72);
  color: var(--ds-on-primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.trn-l-pill:hover {
  background: rgba(27, 42, 59, 0.9);
}

.trn-l-pill:focus-visible {
  outline: 2px solid var(--ds-on-primary);
  outline-offset: 2px;
}

.trn-l-quality-current {
  font-weight: 700;
}

/* Leçon à lire : boîte sombre à la place de la vidéo. */
.trn-l-read-banner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 16 / 9;
  padding: 24px;
  background: var(--ds-ink-800);
  color: var(--ds-on-primary);
  text-align: center;
}

.trn-l-read-banner .ct {
  font-size: 17px;
  font-weight: 700;
}

.trn-l-read-banner .text {
  font-size: 14px;
  color: var(--ds-ink-300);
}

.trn-l-offline {
  padding: 10px 20px;
  background: var(--ds-primary-50);
  color: var(--ds-ink-800);
  font-size: 14px;
  line-height: 1.5;
}

.trn-l-media-error {
  margin: 8px 20px 0;
}

.trn-l-tools {
  margin: 8px 20px 0;
  font-size: 14px;
}

.trn-l-screen > .trn-l-preview-banner,
.trn-l-player > .trn-l-preview-banner,
.trn-l-reader > .trn-l-preview-banner {
  margin: 12px 20px 0;
}

.trn-l-lesson-head {
  padding: 14px 20px 0;
}

.trn-l-lesson-head .trn-l-title {
  font-size: 20px;
  line-height: 1.3;
}

.trn-l-lesson-head .trn-l-kicker {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ds-ink-500);
}

/* Question de vérification */
.trn-l-check {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 20px 0;
  padding: 0;
  border: 0;
  background: none;
}

.trn-l-check-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ds-ink-500);
}

.trn-l-check-question {
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-ink-800);
  overflow-wrap: anywhere;
}

.trn-l-check-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trn-l-check-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trn-l-check-fieldset .trn-l-check-question {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.trn-l-check-form .trn-l-muted {
  margin: 0;
}

.trn-l-check-option,
.trn-l-qz-option {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1.5px solid var(--ds-ink-400);
  border-radius: 12px;
  background: var(--ds-surface);
  font-size: 16px;
  color: var(--ds-ink-800);
  cursor: pointer;
}

.trn-l-check-option:has(input:checked),
.trn-l-qz-option:has(input:checked) {
  border-color: var(--ds-primary-500);
  background: var(--ds-primary-50);
}

.trn-l-check-option:has(input:focus-visible),
.trn-l-qz-option:has(input:focus-visible) {
  outline: 2px solid var(--ds-ink-800);
  outline-offset: 2px;
}

/* Pastille radio : cercle de 24 px ; point orange (vérification) ou coche (quiz). */
.trn-l-radio {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ds-ink-400);
  border-radius: 50%;
  background: var(--ds-surface);
  color: var(--ds-ink-800);
}

.trn-l-radio svg,
.trn-l-cbox svg {
  opacity: 0;
}

.trn-l-check-option .trn-l-radio svg {
  display: none;
}

.trn-l-check-option .trn-l-radio::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
}

.trn-l-check-option input:checked + .trn-l-radio {
  border-color: var(--ds-primary-500);
}

.trn-l-check-option input:checked + .trn-l-radio::after {
  background: var(--ds-primary-500);
}

.trn-l-check-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 12px;
  background: var(--ds-surface-muted);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ds-ink-800);
}

.trn-l-check-result.is-right {
  border-color: var(--ds-success-line);
  background: var(--ds-success-surf);
}

.trn-l-check-result p {
  margin: 0;
}

.trn-l-check-verdict {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-ink-800);
}

.trn-l-check-result.is-right .trn-l-check-verdict {
  color: var(--ds-success);
}

.trn-l-check-label {
  font-weight: 700;
}

.trn-l-check-still {
  font-weight: 700;
}

.trn-l-check-followed {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--ds-success-surf);
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-success);
}

.trn-l-fallback {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 12px 20px 0;
}

/* Onglets : Transcription (ou Texte) | Pour aller plus loin. Le choix passe par des radios masqués. */
.trn-l-tabs-wrap {
  position: relative;
  margin-top: 10px;
}

.trn-l-tabs {
  display: flex;
  margin: 0 20px;
  border-bottom: 1px solid var(--ds-line-strong);
}

.trn-l-tab {
  box-sizing: border-box;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-ink-500);
  text-align: center;
  cursor: pointer;
}

.trn-l-tabs-wrap:has(#trn-l-tab-main:checked) label[for="trn-l-tab-main"],
.trn-l-tabs-wrap:has(#trn-l-tab-resources:checked) label[for="trn-l-tab-resources"] {
  font-weight: 700;
  color: var(--ds-ink-800);
  border-bottom-color: var(--ds-primary-500);
}

.trn-l-tabs-wrap:has(#trn-l-tab-main:focus-visible) label[for="trn-l-tab-main"],
.trn-l-tabs-wrap:has(#trn-l-tab-resources:focus-visible) label[for="trn-l-tab-resources"] {
  outline: 2px solid var(--ds-ink-800);
  outline-offset: -2px;
}

.trn-l-panel {
  display: none;
}

.trn-l-tabs-wrap:has(#trn-l-tab-main:checked) > [data-panel="main"],
.trn-l-tabs-wrap:has(#trn-l-tab-resources:checked) > [data-panel="resources"] {
  display: block;
}

.trn-l-transcript {
  padding: 8px 12px 0;
}

.trn-l-transcript-summary {
  display: none;
}

.trn-l-transcript-text p,
.trn-l-body p {
  margin: 0 0 2px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ds-ink-700);
}

.trn-l-body {
  margin: 0;
  padding: 8px 12px 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ds-ink-700);
  overflow-wrap: anywhere;
}

.trn-l-body img,
.trn-l-body video,
.trn-l-body iframe {
  max-width: 100%;
  height: auto;
}

.trn-l-body ul,
.trn-l-body ol {
  padding: 0 10px 0 32px;
  margin: 0 0 2px;
}

/* Pour aller plus loin / À garder : cartes de ressource */
.trn-l-resources-panel {
  padding: 12px 20px 0;
}

.trn-l-resources {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trn-l-resource {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 14px;
  background: var(--ds-surface);
  text-decoration: none;
  color: inherit;
}

.trn-l-resource:hover {
  border-color: var(--ds-ink-400);
}

.trn-l-resource-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.trn-l-resource-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.trn-l-kind {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 30px;
  background: var(--ds-info-surf);
  color: var(--ds-ink-800);
  font-size: 12px;
  font-weight: 700;
}

.trn-l-resource-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-ink-800);
  overflow-wrap: anywhere;
}

.trn-l-resource-open {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--ds-primary-500);
  border-radius: var(--ds-r-sm);
  background: var(--ds-primary-500);
  color: var(--ds-on-primary);
  font-size: var(--ds-fs-h4);
  font-weight: var(--ds-fw-semi);
  text-decoration: none;
}

.trn-l-resource-open:hover { background: var(--ds-primary-600); border-color: var(--ds-primary-600); }

.trn-l-resource-open.is-outline {
  min-height: 42px;
  border: 1px solid var(--ds-line-strong);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface);
  color: var(--ds-ink-800);
  font-size: var(--ds-fs-body);
  font-weight: var(--ds-fw-semi);
}

.trn-l-keep-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ds-success-surf);
  color: var(--ds-success);
}

/* Feuilles du bas : langue (popover natif) et qualité (dialog) */
.trn-l-popover {
  box-sizing: border-box;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 20px 28px;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--ds-surface);
  color: var(--ds-ink-800);
}

.trn-l-popover:popover-open {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trn-l-popover::backdrop,
.trn-l-sheet::backdrop {
  background: rgba(27, 42, 59, 0.5);
}

.trn-l-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--ds-surface);
  color: var(--ds-ink-800);
  overflow: auto;
}

.trn-l-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 20px 28px;
}

.trn-l-sheet-handle {
  align-self: center;
  width: 40px;
  height: 5px;
  margin-bottom: 6px;
  border-radius: 3px;
  background: var(--ds-ink-300);
}

.trn-l-sheet-head {
  display: flex;
  align-items: center;
}

.trn-l-sheet-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-ink-800);
}

.trn-l-sheet-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ds-ink-800);
  cursor: pointer;
}

.trn-l-qualities {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trn-l-radio-ring {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ds-ink-400);
  border-radius: 50%;
}

.trn-l-radio-ring::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
}

.trn-l-quality,
.trn-l-popover .trn-l-chip.ds-chip {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--ds-line-soft);
  border-radius: 0;
  background: none;
  color: var(--ds-ink-800);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.trn-l-quality.is-active .trn-l-radio-ring,
.trn-l-popover .trn-l-chip.is-active .trn-l-radio-ring {
  border-color: var(--ds-primary-500);
}

.trn-l-quality.is-active .trn-l-radio-ring::after,
.trn-l-popover .trn-l-chip.is-active .trn-l-radio-ring::after {
  background: var(--ds-primary-500);
}

.trn-l-quality.is-active .trn-l-quality-name,
.trn-l-popover .trn-l-chip.is-active {
  font-weight: 700;
}

.trn-l-quality:focus-visible,
.trn-l-popover .trn-l-chip:focus-visible {
  outline: 2px solid var(--ds-ink-800);
  outline-offset: -2px;
}

.trn-l-quality-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.trn-l-quality-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--ds-ink-800);
}

.trn-l-quality-sub {
  font-size: 14px;
  color: var(--ds-ink-500);
}

.trn-l-popover .trn-l-chips {
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.trn-l-popover .trn-l-muted {
  margin: 0;
  padding-top: 10px;
  font-size: 13px;
}

.trn-l-popover .trn-l-muted + .trn-l-muted {
  padding-top: 4px;
}

.trn-l-save-data {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 8px 0;
  cursor: pointer;
}

.trn-l-save-data .trn-l-quality-name {
  font-weight: 700;
}

.trn-l-save-data .ds-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  border-radius: 999px;
  background: var(--ds-ink-300);
}

.trn-l-save-data .ds-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ds-surface);
  transition: left 0.15s ease;
}

.trn-l-save-data input:checked + .ds-toggle {
  background: var(--ds-primary-500);
}

.trn-l-save-data input:checked + .ds-toggle::after {
  left: 23px;
}

.trn-l-save-data input:focus-visible + .ds-toggle {
  outline: 2px solid var(--ds-ink-800);
  outline-offset: 2px;
}

/* Barre du bas du lecteur : règle de validation, « Leçon précédente », « Leçon suivante » */
.trn-l-lessonpage .trn-l-bar {
  gap: 6px;
  margin-top: 16px;
  padding-top: 10px;
}

.trn-l-status {
  display: flex;
  flex-direction: column;
}

.trn-l-status p {
  margin: 0;
}

.trn-l-status-progress {
  font-size: 13px;
  text-align: center;
  color: var(--ds-ink-500);
}

.trn-l-status-done {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-success);
}

.trn-l-status-overall {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.trn-l-pager {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trn-l-pager-prev {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 48px;
  padding-right: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-ink-800);
  text-decoration: underline;
}

.trn-l-pager .trn-l-btn,
.trn-l-pager .trn-l-complete {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.trn-l-pager .trn-l-complete .trn-l-btn {
  width: 100%;
}

/* ---------- Quiz (M18) ---------- */
.trn-l-topbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding: 0 20px 0 4px;
  border-bottom: 1px solid var(--ds-line-soft);
}

.trn-l-topbar-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 0;
  color: var(--ds-ink-800);
}

.trn-l-topbar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-ink-800);
}

.trn-l-quizpage .trn-l-preview-banner {
  margin: 12px 20px 0;
}

.trn-l-quiz-meta {
  margin: 0;
}

.trn-l-quiz {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 0;
}

.trn-l-quiz .trn-l-bar {
  margin: 6px -20px 0;
}

.trn-l-qz-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trn-l-qz-step {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-ink-800);
}

.trn-l-qz-segments {
  display: flex;
  gap: 6px;
}

.trn-l-qz-segment {
  flex: 1 1 0;
  height: 6px;
  border-radius: 3px;
  background: var(--ds-line-strong);
}

.trn-l-qz-segment.is-done,
.trn-l-qz-segment.is-current {
  background: var(--ds-primary-500);
}

.trn-l-qz-question {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.trn-l-quiz.is-stepper .trn-l-qz-question:not(.is-current) {
  display: none;
}

.trn-l-qz-question:focus {
  outline: none;
}

.trn-l-qz-text {
  display: block;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ds-ink-800);
  overflow-wrap: anywhere;
}

.trn-l-qz-hint {
  margin: 8px 0 14px;
  font-size: 15px;
  color: var(--ds-ink-500);
}

.trn-l-qz-question + .trn-l-qz-question {
  margin-top: 28px;
}

.trn-l-quiz.is-stepper .trn-l-qz-question + .trn-l-qz-question {
  margin-top: 0;
}

.trn-l-qz-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trn-l-qz-option {
  gap: 14px;
  min-height: 64px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 17px;
}

.trn-l-qz-option-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.trn-l-qz-option .trn-l-radio,
.trn-l-qz-option .trn-l-cbox {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 2px solid var(--ds-ink-400);
  border-radius: 50%;
  background: var(--ds-surface);
  color: var(--ds-ink-800);
}

.trn-l-qz-option .trn-l-cbox {
  border-radius: 6px;
}

.trn-l-qz-option input:checked + .trn-l-radio,
.trn-l-qz-option input:checked + .trn-l-cbox {
  border-color: var(--ds-primary-500);
  background: var(--ds-primary-500);
  color: var(--ds-on-primary);
}

.trn-l-qz-option input:checked + .trn-l-radio svg,
.trn-l-qz-option input:checked + .trn-l-cbox svg {
  opacity: 1;
}

.trn-l-qz-option:has(input:focus-visible) .trn-l-radio,
.trn-l-qz-option:has(input:focus-visible) .trn-l-cbox {
  outline: none;
  box-shadow: var(--ds-focus);
}

.trn-l-qz-actions.trn-l-bar {
  margin-top: 20px;
}

/* Résultat */
.trn-l-qz-result {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
}

.trn-l-qz-result p {
  margin: 0;
}

.trn-l-qz-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.trn-l-qz-score {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ds-ink-800);
}

.trn-l-qz-status {
  display: flex;
  align-items: center;
}

.trn-l-qz-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 2px 12px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
}

.trn-l-qz-chip.is-passed {
  background: var(--ds-success-surf);
  color: var(--ds-success);
}

.trn-l-qz-chip.is-failed {
  background: var(--ds-surface-sunken);
  color: var(--ds-ink-800);
}

.trn-l-qz-intro {
  font-size: 15px;
  color: var(--ds-ink-700);
}

.trn-l-qz-rule {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ds-ink-800);
}

.trn-l-qz-correction {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ds-line-soft);
}

.trn-l-qz-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-line-soft);
}

.trn-l-qz-item:has(> .trn-l-qz-mark) {
  display: flex;
  gap: 12px;
}

.trn-l-qz-item p {
  margin: 0;
}

.trn-l-qz-item-body {
  flex: 1 1 auto;
  min-width: 0;
}

.trn-l-qz-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  color: var(--ds-on-primary);
}

.trn-l-qz-item.is-right .trn-l-qz-mark {
  background: var(--ds-success);
}

.trn-l-qz-item.is-wrong .trn-l-qz-mark {
  background: var(--ds-danger);
}

.trn-l-qz-item-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-ink-500);
}

.trn-l-qz-item.is-right .trn-l-qz-item-label {
  color: var(--ds-success);
}

.trn-l-qz-item.is-wrong .trn-l-qz-item-label {
  color: var(--ds-danger);
}

.trn-l-qz-item-text {
  margin-top: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ds-ink-800);
}

.trn-l-qz-item-answer {
  margin-top: 2px;
  font-size: 14px;
  color: var(--ds-ink-700);
}

/* Mode lecture des accompagnateurs : options en lecture seule */
.trn-l-preview-banner svg {
  flex: 0 0 auto;
}

.trn-l-readonly-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.trn-l-readonly-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1.5px solid var(--ds-ink-400);
  border-radius: 12px;
  background: var(--ds-surface);
  font-size: 16px;
  color: var(--ds-ink-800);
}

.trn-l-readonly-option.is-correct {
  border-color: var(--ds-success);
  background: var(--ds-success-surf);
}

.trn-l-readonly-mark {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ds-ink-400);
  border-radius: 50%;
  background: var(--ds-surface);
  color: var(--ds-on-primary);
}

.trn-l-readonly-option.is-correct .trn-l-readonly-mark {
  border-color: var(--ds-success);
  background: var(--ds-success);
}

.trn-l-readonly-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.trn-l-readonly-explanation {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ds-ink-700);
}

/* ---------- Formation terminée (M19) ---------- */
.trn-l-done-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.trn-l-done-head .trn-l-title {
  font-size: 24px;
  line-height: 1.25;
}

.trn-l-done-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ds-success-surf);
  color: var(--ds-success);
}

.trn-l-done-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: -4px;
}

.trn-l-done-facts .trn-l-lead {
  margin: 0;
  font-weight: 600;
}

.trn-l-done-date {
  font-size: 15px;
  color: var(--ds-ink-500);
}

.trn-l-done-facts .trn-l-card-meta {
  font-size: 15px;
  color: var(--ds-ink-700);
}

.trn-l-objectives {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

.trn-l-objectives li {
  padding: 8px 0;
  border-bottom: 1px solid var(--ds-line-soft);
}

.trn-l-keep-note {
  font-size: 15px;
  color: var(--ds-ink-700);
}

.trn-l-disclaimer {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ds-surface-muted);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-ink-500);
}

.trn-l-done-actions.trn-l-bar {
  margin-top: 24px;
}

/* ---------- Téléphone et tablette : la barre du bas de l'espace est fixe ---------- */
@media (max-width: 1024px) {
  .trn-l-page {
    --trn-l-nav-offset: 76px;
  }
}

@media (min-width: 768px) {
  .trn-l-container.trn-l-screen {
    border: 1px solid var(--ds-line-soft);
  }
}

/* Lien « Mes formations » sous le titre de la liste côté équipe. */
.trn-page-link {
  margin-top: var(--ds-s2);
}

/* ==========================================================================
   « Mes formations » (maquette M20) dans la mise en page du design system,
   comme la page Formations de l'équipe : en-tête de page (.trn-page-header),
   filtres en pastilles, sections en grille de cartes .ds-card (une colonne
   sur téléphone), avancement vert, bouton .ds-btn en bas de carte.
   ========================================================================== */
.trn-mf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.trn-mf .trn-mf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.trn-mf-section {
  margin-top: 28px;
}

.trn-mf-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.trn-mf-section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-ink-800);
}

.trn-mf-section-note {
  margin: -6px 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-ink-500);
}

.trn-mf-section-empty {
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ds-surface-sunken, var(--ds-surface-muted));
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-ink-500);
}

.trn-mf-empty {
  margin-top: 24px;
}

.trn-mf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.trn-mf-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.trn-mf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.trn-mf-short {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--ds-info-surf);
  color: var(--ds-ink-800);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.trn-mf-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.trn-mf-title a {
  color: var(--ds-ink-800);
  text-decoration: none;
}

.trn-mf-title a:hover {
  text-decoration: underline;
}

.trn-mf-meta {
  margin: 0;
  font-size: 14px;
  color: var(--ds-ink-700);
}

.trn-mf-summary {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ds-ink-500);
}

.trn-mf-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trn-mf-bar {
  flex: 1;
}

.trn-mf .ds-progress-bar.green {
  background: var(--ds-success);
}

.trn-mf-bar-0 { width: 0%; }
.trn-mf-bar-5 { width: 5%; }
.trn-mf-bar-10 { width: 10%; }
.trn-mf-bar-15 { width: 15%; }
.trn-mf-bar-20 { width: 20%; }
.trn-mf-bar-25 { width: 25%; }
.trn-mf-bar-30 { width: 30%; }
.trn-mf-bar-35 { width: 35%; }
.trn-mf-bar-40 { width: 40%; }
.trn-mf-bar-45 { width: 45%; }
.trn-mf-bar-50 { width: 50%; }
.trn-mf-bar-55 { width: 55%; }
.trn-mf-bar-60 { width: 60%; }
.trn-mf-bar-65 { width: 65%; }
.trn-mf-bar-70 { width: 70%; }
.trn-mf-bar-75 { width: 75%; }
.trn-mf-bar-80 { width: 80%; }
.trn-mf-bar-85 { width: 85%; }
.trn-mf-bar-90 { width: 90%; }
.trn-mf-bar-95 { width: 95%; }
.trn-mf-bar-100 { width: 100%; }

.trn-mf-progress-count {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ds-ink-800);
}

/* Bouton aligné en bas de carte, même quand les cartes d'une ligne n'ont pas la même hauteur. */
.trn-mf-action {
  display: flex;
  margin-top: auto;
  padding-top: 8px;
}

.trn-mf-action .trn-mf-form,
.trn-mf-action .trn-mf-btn {
  width: 100%;
}

.trn-mf-action .trn-mf-form {
  margin: 0;
}

.trn-mf-btn {
  justify-content: center;
  text-decoration: none;
}

.trn-mf-foot {
  margin-top: 32px;
}

/* ---------- Attestation de suivi sur l'écran « Formation terminée » (phase 8) ---------- */
.trn-l-cert {
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ds-line-strong);
  border-radius: 16px;
  background: var(--ds-surface);
}
.trn-l-cert-head { display: flex; align-items: center; gap: 12px; }
.trn-l-cert-icon {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-warning-surf);
  color: var(--ds-primary-800);
}
.trn-l-cert-text { min-width: 0; }
.trn-l-cert-meta { margin: 2px 0 0; font-size: 14px; color: var(--ds-ink-500); }
.trn-l-cert-share { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.trn-l-cert-share .trn-l-btn { gap: 8px; height: 48px; font-size: 14px; }
@media (max-width: 420px) {
  .trn-l-cert-share { grid-template-columns: 1fr; }
}