/*
 * herpsa-parcours-modules.css
 * Modules de lecture : page, livre, intercalaire, lien, fichier, vidéo, glossaire.
 * Chargée après herpsa-parcours.css, seulement sur les écrans qui en ont besoin. Couleurs : variables de :root (style.css).
 */

/* ── Modules publics : page, livre, intercalaire, lien, fichier, vidéo, glossaire ── */
.prc-duration,
.prc-link-site,
.prc-file-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  color: var(--slate-600);
  font-size: .9375rem;
  font-weight: 600;
}
.prc-file-meta { padding: .75rem 1rem; border: 1px solid var(--slate-200); border-radius: var(--radius); background: var(--slate-50); }
.prc-link-note { margin: .75rem 0 0; color: var(--slate-600); font-size: .9375rem; }

/* Tableau large : il défile dans son cadre, la page ne déborde pas. */
.prc-table-wrap {
  max-width: 100%;
  margin: 0 0 1rem;
  overflow-x: auto;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius);
}
.prc-table-wrap table { width: 100%; min-width: max-content; border-collapse: collapse; font-size: .9375rem; }
.prc-table-wrap th,
.prc-table-wrap td { padding: .5rem .75rem; border-bottom: 1px solid var(--slate-200); text-align: left; vertical-align: top; }
.prc-table-wrap th { background: var(--slate-50); color: var(--slate-800); }

/* Livre : liste des chapitres, ouverte par défaut, avec un bouton qui dit ce qu'il fait. */
.prc-chapters-box { margin: 0 0 1.25rem; border: 1px solid var(--slate-500); border-radius: var(--radius); background: var(--white); }
.prc-chapters-summary {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  color: var(--primary);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.prc-chapters-summary::-webkit-details-marker { display: none; }
.prc-chapters-summary-text { flex: 0 1 auto; }
.prc-chapters-name { overflow-wrap: anywhere; }
.prc-chapters-count {
  min-width: 1.75rem;
  padding: .125rem .5rem;
  border-radius: 9999px;
  background: var(--primary-a10);
  color: var(--primary);
  font-size: .875rem;
  text-align: center;
}
.prc-chapters-toggle { display: inline-flex; align-items: center; gap: .375rem; margin-left: auto; color: var(--slate-700); font-size: .875rem; font-weight: 600; }
.prc-chapters-chevron { width: .5rem; height: .5rem; margin-top: -.25rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.prc-chapters-box[open] .prc-chapters-chevron { margin-top: .25rem; transform: rotate(-135deg); }
.prc-chapters-hide,
.prc-chapters-box[open] .prc-chapters-show { display: none; }
.prc-chapters-box[open] .prc-chapters-hide { display: inline; }
.prc-chapters-list { margin: 0; padding: 0 .75rem .75rem; list-style: none; border-top: 1px solid var(--slate-200); }
.prc-chapters-list li { margin-top: .375rem; }
.prc-chapters-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
  padding: .25rem .625rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius);
  color: var(--slate-900);
  font-weight: 600;
  text-decoration: none;
}
.prc-chapters-link:hover { background: var(--primary-a08); }
.prc-chapters-num {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--primary-a35);
  border-radius: 9999px;
  background: var(--primary-a10);
  color: var(--primary);
  font-size: .875rem;
  font-weight: 700;
}
.prc-chapters-link[aria-current="page"] { border-color: var(--primary); background: var(--primary-a08); color: var(--primary); font-weight: 800; }
.prc-chapters-link[aria-current="page"] .prc-chapters-num { border-color: var(--primary); background: var(--primary); color: var(--white); }
@media (prefers-reduced-motion: reduce) { .prc-chapters-chevron { transition: none; } }

/* Média d'un intercalaire et vidéo. */
.prc-media { margin: 0 0 1rem; }
.prc-media-img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.prc-video { margin: 0 0 1rem; }
.prc-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--slate-900);
}
.prc-video-play {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  width: 100%;
  min-height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
}
.prc-video-play:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
.prc-video-play .prc-icon svg { width: 2.5rem; height: 2.5rem; }
.prc-js .prc-video-play { display: flex; }
.prc-js .prc-video-fallback { display: none; }
.prc-video-iframe,
.prc-video-file { display: block; width: 100%; height: 100%; border: 0; }
.prc-video-file { aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius); background: var(--slate-900); }
.prc-video-fallback { margin: .75rem 0 0; }
.prc-video-fallback a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--primary-light); }
.prc-video-caption { margin: 0 0 .75rem; color: var(--slate-700); font-size: 1rem; }
.prc-transcript { margin: 0 0 1rem; border: 1px solid var(--slate-500); border-radius: var(--radius); background: var(--white); }
.prc-transcript-summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .5rem 1rem;
  color: var(--primary);
  font-weight: 700;
  cursor: pointer;
}
.prc-transcript .prc-content { padding: 0 1rem 1rem; }

/* Glossaire. */
.prc-gl-search { display: none; margin: 0 0 1rem; }
.prc-js .prc-gl-search { display: block; }
.prc-gl-label { display: block; margin: 0 0 .375rem; color: var(--slate-800); font-weight: 700; }
.prc-gl-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: .5rem .75rem;
  border: 2px solid var(--slate-500);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--slate-800);
  font-size: 1rem;
}
.prc-gl-letters-list { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.prc-gl-letter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--slate-500);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}
.prc-gl-letter-link:hover { background: var(--primary-a08); }
.prc-gl-group { margin: 0 0 1.25rem; scroll-margin-top: var(--scroll-offset); }
.prc-gl-letter { margin: 0 0 .5rem; padding-bottom: .25rem; border-bottom: 2px solid var(--primary); color: var(--primary); font-size: 1.25rem; }
.prc-gl-dl { margin: 0; }
.prc-gl-entry { padding: .75rem 0; border-bottom: 1px solid var(--slate-200); }
.prc-gl-term { margin: 0 0 .25rem; color: var(--slate-900); font-size: 1.0625rem; font-weight: 800; overflow-wrap: anywhere; }
.prc-gl-def,
.prc-gl-example,
.prc-gl-more-wrap { margin: 0 0 .25rem; color: var(--slate-700); }
.prc-gl-def p,
.prc-gl-example p { margin: 0; }
.prc-gl-example { font-style: italic; }
.prc-gl-more { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--primary-light); font-weight: 700; }
.prc-gl-entry[hidden],
.prc-gl-group[hidden],
.prc-gl-none[hidden] { display: none; }
.prc-video--file { margin: 0 0 1rem; }

/* ── Mot du glossaire cliquable dans la lecture ── */
.prc-term {
  border-bottom: 2px dotted var(--primary);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.prc-term:hover { background: var(--primary-a10); }
.prc-termdef {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: min(26rem, calc(100vw - 2rem));
  max-height: 60vh;
  padding: 1.25rem;
  border: 2px solid var(--primary);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  color: var(--slate-900);
  overflow-y: auto;
}
.prc-termdef[hidden] { display: none; }
.prc-termdef-title { margin: 0 0 .5rem; color: var(--primary); font-size: 1.25rem; }
.prc-termdef-def,
.prc-termdef-body p { margin: 0 0 .75rem; }
.prc-termdef-example { padding: .75rem; border-left: 4px solid var(--primary); border-radius: var(--radius); background: var(--primary-a08); }
.prc-termdef-label { display: block; margin: 0 0 .25rem; color: var(--primary); font-size: .875rem; font-weight: 800; }
.prc-termdef-close {
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-top: .5rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Téléphone : le panneau occupe toute la largeur, en bas de l'écran, à portée de pouce. */
@media (max-width: 768px) {
  .prc-termdef { right: 0; bottom: 0; left: 0; width: auto; max-height: 55vh; border-width: 2px 0 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

/* ── Visionneuse PDF (ordinateur) ── */
.prc-pdf { display: block; width: 100%; height: 75vh; min-height: 24rem; margin: 1rem 0; border: 1px solid var(--slate-300); border-radius: var(--radius); background: var(--white); }
.prc-pdf[hidden] { display: none; }

/* ── Contenu intégré (iframe isolé) ── */
.prc-embed { display: block; width: 100%; max-width: 100%; margin: 1rem 0 .5rem; border: 1px solid var(--slate-300); border-radius: var(--radius); background: var(--white); }
.prc-embed-note { margin: 0 0 1rem; color: var(--slate-700); font-size: .875rem; }

/* ── Étape verrouillée (option une section après l'autre) ── */
.prc-lock { margin: 1rem 0; padding: 1.5rem; border: 2px solid var(--primary); border-radius: var(--radius-xl); background: var(--primary-a08); text-align: center; }
.prc-lock-icon { margin: 0 0 .5rem; color: var(--primary); }
.prc-lock-icon .prc-icon svg { width: 2.5rem; height: 2.5rem; }
.prc-lock-title { margin: 0 0 .5rem; color: var(--primary); font-size: 1.25rem; }
.prc-lock-text,
.prc-lock-todo { margin: 0 0 .5rem; color: var(--slate-900); }
.prc-lock-todo { font-weight: 700; }
.prc-lock .prc-actions { justify-content: center; }