/*
 * Chrome du player Scormia (design « CODE V1 ») — ce que voit l'APPRENANT.
 * La zone de contenu est stylée par scormia.css ; ici : topbar, tiroir
 * sommaire, carte d'écran (PARITÉ avec la carte éditeur .sc-ed-card :
 * 980px / radius 22 / mêmes padding et ombre — « l'aperçu = la version
 * finale »), navigation, carte de score de l'écran de fin.
 */
html, body { margin: 0; height: 100%; }

.sc-player {
    /* Marge latérale du canevas — mêmes bornes que le canevas éditeur
       (44px/56px desktop, 20px étroit — lib/canvas.js applyCanvasPadding). */
    --sc-pad: clamp(20px, 5vw, 56px);
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    font-family: var(--font-ui);
    background: var(--acc-bg);
    color: var(--ink);
    line-height: 1.65;
}

/* Scrollbar fine (sommaire + canevas) — valeurs POC (.sc-ed-scroll). */
.sc-player__menu, .sc-player__main { scrollbar-width: thin; scrollbar-color: #d5dbe6 transparent; }
.sc-player__menu::-webkit-scrollbar, .sc-player__main::-webkit-scrollbar { width: 8px; }
.sc-player__menu::-webkit-scrollbar-thumb, .sc-player__main::-webkit-scrollbar-thumb { background: #d5dbe6; border-radius: 99px; }

/* ===== Barre du haut (toujours visible) : burger · titre · progression · % ===== */
.sc-player__topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    height: 58px;
    padding: 0 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    z-index: 20;
}
.sc-player__menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-3);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sc-player__menu-btn:hover { background: #f4f6fb; color: var(--ink); }
.sc-player__topbar-title {
    flex: 1;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-player__topbar-progress {
    flex: 0 1 170px;
    min-width: 56px;
    height: 6px;
    border-radius: 99px;
    background: #eef1f6;
    overflow: hidden;
}
.sc-player__topbar-bar {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--acc);
    transition: width .3s ease;
}
/* Téléchargement du paquet (page publique uniquement — cf. player.js) : à l'extrémité
   droite de la barre, en retrait, pour rester une action secondaire à côté du titre et
   de la progression. */
.sc-player__download {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--acc-deep);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.sc-player__download:hover {
    background: #f4f6fa;
    border-color: var(--acc);
}
.sc-player__topbar-pct {
    flex-shrink: 0;
    min-width: 7em; /* « 100% terminé » : pas de reflow de la barre quand le nombre grandit */
    font-size: 12px;
    font-weight: 700;
    color: var(--acc-deep);
    text-align: right;
    white-space: nowrap;
}

/* ===== Sommaire (tiroir fermé par défaut, toutes largeurs) ===== */
.sc-player__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: min(86%, 320px);
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .25s ease;
}
.sc-player--menu-open .sc-player__sidebar {
    transform: none;
    box-shadow: 0 24px 60px -20px rgba(27, 36, 64, .45); /* ombre drawer P1 */
}
.sc-player__brand { flex-shrink: 0; padding: 19px 18px 13px; border-bottom: 1px solid var(--line); }
.sc-player__brand-title { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }

/* Lignes de l'arbre — valeurs éditeur (.sc-toc-row / .sc-toc-bullet). */
.sc-player__menu { flex: 1; overflow-y: auto; padding: 10px 10px 20px; }
.sc-player__menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 34px;
    margin-bottom: 1px;
    padding: 6px 8px;
    border: 0;
    border-radius: 9px;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.sc-player__menu-item:hover { background: #f4f6fb; }
.sc-player__menu-item.is-sub { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.sc-player__menu-item.is-current { background: var(--acc-soft); color: var(--acc-deep); font-weight: 600; }
/* Écran de quiz VERROUILLÉ dans le sommaire : grisé, non cliquable, cadenas en bout de ligne. */
.sc-player__menu-item.is-locked { opacity: .55; cursor: not-allowed; }
.sc-player__menu-item.is-locked:hover { background: none; }
.sc-player__menu-lock { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--ink-3); }
/* Puces : carré arrondi accent-line niveau 1, point 5px accent-mid niveaux 2+. */
.sc-player__menu-bullet { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 3px; background: var(--acc-line); }
.sc-player__menu-bullet--dot { width: 5px; height: 5px; border-radius: 50%; background: var(--acc-mid); }
.sc-player__menu-label { flex: 1; min-width: 0; }
/* Écran visité : coche discrète en bout de ligne (classe posée par renderMenu). */
.sc-player__menu-item.is-visited:not(.is-current)::after {
    content: '✓';
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--acc-mid);
}
.sc-player__submenu { margin-left: 17px; }

/* Voile du tiroir (affiché à toutes tailles quand le sommaire est ouvert). */
.sc-player__backdrop { display: none; }
.sc-player--menu-open .sc-player__backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(27, 36, 64, .28); }

/* ===== Contenu : canevas teinté + carte blanche (parité .sc-ed-card) ===== */
/* Le SCROLL porte sur .sc-player__main (contenu + navigation), pas sur le seul
   contenu : la barre Précédent/Suivant suit donc le flux et s'affiche EN BAS DE
   PAGE (après le contenu), au lieu d'être épinglée au bas du viewport (retour
   Andrew). Le canevas garde flex:1 0 auto → il pousse la nav en bas quand le
   contenu est court, et la laisse défiler sous le contenu quand il est long. */
.sc-player__main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
.sc-player__screen { flex: 1 0 auto; padding: 40px var(--sc-pad) 44px; background: var(--acc-bg); }
.sc-player__card {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    padding: 52px 64px 60px;
    box-shadow: 0 12px 34px -22px rgba(27, 36, 64, .22);
}

/* ===== Écran de couverture : titre display Fraunces + chapô (sobre) ===== */
.sc-player__card--cover .sc-stack > .sc-block--heading:first-child .sc-heading__text {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 42px);
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.15;
}
.sc-player__card--cover .sc-stack > .sc-block--heading:first-child + .sc-block--richtext .sc-richtext:not(.sc-richtext--lead) {
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* ===== Écran de fin : carte de score (remplie par refreshResult — player.js).
   Visible seulement quand tous les blocs quiz sont terminés. ===== */
.sc-player__result {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding: 18px 22px;
    border-radius: 16px;
    border: 1.5px solid;
}
.sc-player__result[hidden] { display: none; }
.sc-player__result--passed { background: var(--ok-bg); border-color: var(--ok-line); }
.sc-player__result--failed { background: color-mix(in srgb, var(--danger) 6%, #fff); border-color: color-mix(in srgb, var(--danger) 30%, #fff); }
.sc-player__result-score { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1; }
.sc-player__result--passed .sc-player__result-score { color: var(--ok); }
.sc-player__result--failed .sc-player__result-score { color: var(--danger); }
.sc-player__result-label { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }

/* ===== Navigation : Suivant plein accent, Précédent blanc bordé ===== */
.sc-player__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    width: 100%;
    /* box-sizing:border-box OBLIGATOIRE : le player exporté tourne SANS reset
       (content-box par défaut) — sinon width:100% + padding déborde à droite et
       le bouton « Suivant » sort du cadre (retour Andrew). */
    box-sizing: border-box;
    max-width: calc(980px + 2 * var(--sc-pad));
    margin: 0 auto;
    padding: 14px var(--sc-pad) 22px;
}
.sc-player__prev, .sc-player__next {
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 24px;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, opacity .15s ease;
}
.sc-player__next { background: var(--acc); color: #fff; }
.sc-player__next:hover:not(:disabled) { filter: brightness(1.07); }
/* Contour : padding -1px pour garder le même gabarit (pattern .sc-button--outline). */
.sc-player__prev { padding: 11px 23px; border: 1.5px solid var(--line-2); background: #fff; color: var(--ink-2); }
.sc-player__prev:hover:not(:disabled) { background: #f4f6fb; }
.sc-player__prev:disabled, .sc-player__next:disabled { opacity: .45; cursor: default; filter: none; }
.sc-player__position { font-size: 13px; font-weight: 600; color: var(--mut); }

/* Sous 760px : carte resserrée (mêmes valeurs que .sc-ed-card--narrow). */
@media (max-width: 760px) {
    .sc-player__screen { padding-top: 28px; }
    .sc-player__card { padding: 32px 22px 40px; }
}

/* Animation d'entrée d'un écran — fade + translateY (blkIn POC), rejouée à
   chaque navigation car le wrapper .sc-anim-in est recréé à chaque rendu. */
@keyframes sc-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sc-anim-in { animation: sc-fade-in .28s ease both; }

@media (prefers-reduced-motion: reduce) {
    .sc-anim-in { animation: none; }
    .sc-player__sidebar { transition: none; }
    .sc-player__topbar-bar { transition: none; }
}