/* ══════════════════════════════════════════════════════════════
   Article Single — Page de contenu individuel
   ══════════════════════════════════════════════════════════════ */

.article-single {
    padding-bottom: var(--spacing-3xl);
}

/* Hero image — caled sur `--container-max` (largeur du mega-menu / `.container`)
   pour aligner les bords du hero sur ceux de la barre de navigation. */
.article-single__hero {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    min-height: 20rem;
    max-height: 32rem;
    overflow: hidden;
    background: var(--color-bg-light);
}

.article-single__hero img {
    width: 100%;
    height: 100%;
    min-height: 20rem;
    max-height: 32rem;
    object-fit: cover;
}

@media (min-width: 640px) {
    .article-single__hero {
        min-height: 24rem;
        max-height: 36rem;
    }

    .article-single__hero img {
        min-height: 24rem;
        max-height: 36rem;
    }
}

/* Breadcrumb intégré au hero — overlay haut avec dégradé pour lisibilité */
.article-single__hero-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
    padding-bottom: var(--spacing-md);
    z-index: 1;
}

/* Override des couleurs du breadcrumb canonique quand il vit dans le hero */
.article-single__hero-top .breadcrumb-bar {
    background: transparent;
    display: block;
}

.article-single__hero-top .breadcrumb__list {
    padding-top: var(--spacing-sm);
    padding-bottom: 0;
}

.article-single__hero-top .breadcrumb__item,
.article-single__hero-top .breadcrumb__item--active {
    color: rgba(255, 255, 255, 0.85);
}

.article-single__hero-top .breadcrumb__item a {
    color: rgba(255, 255, 255, 0.75);
}

.article-single__hero-top .breadcrumb__item a:hover {
    color: #fff;
}

.article-single__hero-top .breadcrumb__item:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.4);
}

/* Overlay sombre en bas du hero (titre + meta) */
.article-single__hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.2) 70%, transparent 100%);
    padding-top: 6rem;
    padding-bottom: var(--spacing-lg);
}

/* Meta dans le hero (badge type + date) */
.article-single__hero-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.article-single__hero-type {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(4px);
}

.article-single__hero-date {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.8);
}

/* Titre dans le hero */
.article-single__hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

@media (min-width: 640px) {
    .article-single__hero-title {
        font-size: var(--font-size-3xl);
    }
}

@media (min-width: 1024px) {
    .article-single__hero-title {
        font-size: var(--font-size-4xl);
        max-width: 48rem;
    }
}

/* Chapô / lead paragraph (intégré à la colonne principale, contraint à sa largeur) */
.article-single__lead-text {
    margin: 0 0 var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-base);
    color: var(--color-text-light);
    font-style: italic;
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 640px) {
    .article-single__lead-text {
        font-size: 1.1875rem;
    }
}

/* Layout : contenu + sidebar droite.
   Padding-top reduit : la card hero porte deja un `margin-bottom`
   `--spacing-xl`, doubler avec `--spacing-xl` ici creusait un creux
   visuel entre le hero et le body. `--spacing-sm` suffit a separer
   sans rompre la lecture. */
.article-single__layout {
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--spacing-sm) var(--spacing-md) 0;
}

@media (min-width: 1024px) {
    .article-single__layout {
        display: grid;
        grid-template-columns: 1fr 15rem;
        gap: var(--spacing-2xl);
    }
}

/* >= 80em : on insère le rail de partage vertical en première colonne,
   UNIQUEMENT pour les layouts qui portent réellement un `.reading-share-rail`
   (article, page, formation). Les autres réutilisateurs de
   `.article-single__layout` (event, dossier) restent à 2 colonnes — sinon
   leur colonne principale serait écrasée dans les 3rem du rail absent. */
@media (min-width: 80em) {
    .article-single__layout:has(.reading-share-rail) {
        grid-template-columns: 3rem 1fr 15rem;
        gap: var(--spacing-xl);
    }
}

.article-single__main {
    max-width: 56rem;
    min-width: 0;
}

/* Header (fallback sans hero image) */
.article-single__header {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--spacing-xl);
}

.article-single__meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.article-single__type {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.625rem;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.article-single__date {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.article-single__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

@media (min-width: 640px) {
    .article-single__title {
        font-size: var(--font-size-3xl);
    }
}

@media (min-width: 1024px) {
    .article-single__title {
        font-size: var(--font-size-4xl);
    }
}

/* Body */
.article-single__body {
    padding-bottom: var(--spacing-xl);
}

.article-single__zone {
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

/* ══════════════════════════════════════════════════════════════
   Article Sidebar — TOC + Partage + Citer (sticky droite)
   ══════════════════════════════════════════════════════════════ */

.article-sidebar {
    display: none;
}

@media (min-width: 1024px) {
    .article-sidebar {
        display: block;
        position: relative;
    }
}

.article-sidebar__sticky {
    position: sticky;
    top: 5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
}

/* Header du sommaire : titre « Sommaire » + toggle replier sur la MÊME ligne.
   Replié, le titre disparaît (x-show) et le toggle se cale à droite pour
   hugger la marge du rail réduit. */
.article-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.article-sidebar--collapsed .article-sidebar__header {
    justify-content: flex-end;
}

.article-sidebar__header .article-sidebar__section-title {
    margin-bottom: 0;
}

/* Toggle plier/déplier — petit bouton rond aligné sur la ligne « Sommaire ».
   Replié, l'aside se réduit à la largeur du bouton (grid-template-columns
   ... auto), seul le toggle reste pour rouvrir. */
.article-sidebar__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: #fff;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.article-sidebar__toggle:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Asides à structure historique (formation, event, dossier) : le toggle est
   un enfant DIRECT de `.article-sidebar` (pas dans un `.article-sidebar__header`).
   On lui rend son ancrage sticky + alignement à droite que le refactor de
   l'aside CMS avait retirés. L'article CMS, lui, niche son toggle dans
   `.article-sidebar__sticky > .article-sidebar__header` — ce sélecteur
   enfant-direct ne le matche donc pas. */
.article-sidebar > .article-sidebar__toggle {
    position: sticky;
    top: 5rem;
    margin-left: auto;
    margin-bottom: var(--spacing-sm);
    z-index: 2;
}

@media (min-width: 1024px) {
    .article-sidebar {
        display: flex;
        flex-direction: column;
    }
}

/* État replié : seul le header (donc le toggle pour rouvrir) reste visible.
   Le titre « Sommaire » et la liste TOC sont masqués par `x-show` côté markup ;
   l'aside se réduit à la largeur du toggle via grid-template-columns ... auto. */
.article-sidebar--collapsed .article-sidebar__toc-wrap { display: none !important; }

@media (min-width: 1024px) {
    .article-single__layout:has(.article-sidebar--collapsed) {
        grid-template-columns: 1fr auto;
    }
}

@media (min-width: 80em) {
    .article-single__layout:has(.reading-share-rail):has(.article-sidebar--collapsed) {
        grid-template-columns: 3rem 1fr auto;
    }
}

/* .article-sidebar__section-title → déplacé dans content.css (composant transversal) */

.article-sidebar__sep {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-md) 0;
}

.article-sidebar__sep--toc {
    display: block;
}

/* Partage */
.article-sidebar__section {
    margin-bottom: 0;
}

.article-sidebar__actions {
    display: flex;
    gap: var(--spacing-xs);
}

.article-sidebar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
    background: var(--color-bg-light);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.article-sidebar__btn:hover {
    color: #fff;
    background: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   Rail de partage vertical (marge gauche) — desktop large (>= 80em)
   Partagé par la fiche article (grille) et la fiche page (flex). Sous
   80em : `display:none` — le partage reste dans le hero + la barre mobile.
   ══════════════════════════════════════════════════════════════ */
.reading-share-rail { display: none; }

@media (min-width: 80em) {
    .reading-share-rail {
        display: block;
        grid-column: 1; /* article (grille) : 1re colonne ; ignoré en flex (page) */
    }

    .reading-share-rail__sticky {
        position: sticky;
        top: 6rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .reading-share-rail__buttons { gap: var(--spacing-sm); }

    .reading-share-rail__buttons .share-buttons__btn {
        width: 2.25rem;
        height: 2.25rem;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: #fff;
        color: var(--color-text-light);
    }

    .reading-share-rail__buttons .share-buttons__btn:hover {
        color: #fff;
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    /* Le rail gauche reprend le partage sur ces fiches : on masque les boutons
       de partage du hero (>= 80em) pour éviter le doublon. Le fil d'Ariane reste. */
    .list-hero--article .list-hero__share-buttons,
    .list-hero--page .list-hero__share-buttons,
    .list-hero--training .list-hero__share-buttons,
    .list-hero--event .list-hero__share-buttons,
    .list-hero--dossier .list-hero__share-buttons {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   Jauge de progression de lecture — ligne fine fixée en HAUT du viewport,
   AU-DESSUS de la navbar (z > 1000), couleur vert ANCESU. Se remplit selon
   le % de contenu lu (scaleX piloté par le composant Alpine `readingBar`).
   Pas de fond de piste : à 0 % la barre est invisible. Décorative (aria-hidden).
   ══════════════════════════════════════════════════════════════ */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1001;
    pointer-events: none;
}

.reading-progress__fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--color-section-ancesu);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}

/* Marque-page « à ajouter » : petit badge « + » vert sur le bouton bookmark
   tant que le contenu n'est PAS marqué (classe --active absente). Une fois
   marqué, le badge disparaît et l'icône se remplit. Couvre toutes les
   surfaces de partage des fiches (hero, rail gauche, barre mobile). */
.share-buttons__btn--bookmark { position: relative; }

.share-buttons__btn--bookmark:not(.share-buttons__btn--active)::after {
    content: '+';
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.85rem;
    height: 0.85rem;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--color-section-ancesu);
    border-radius: 50%;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   Resource Single — page de détail ressource
   ══════════════════════════════════════════════════════════════ */
.resource-single { max-width: 80rem; margin: 0 auto; }

/* Layout 2 colonnes : aside (infos) + main (viewer) */
.resource-single__layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

@media (min-width: 64em) {
    .resource-single__layout--with-viewer {
        display: grid;
        grid-template-columns: 18rem 1fr;
        gap: var(--spacing-xl);
        align-items: start;
    }
}

/* Aside : sticky sur desktop */
.resource-single__aside {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 64em) {
    .resource-single__layout--with-viewer .resource-single__aside {
        position: sticky;
        top: 5rem;
    }
}

/* Main : conserve `min-width: 0` defensive pour les viewers qui ont
   leur propre min-width (PDF iframe). L'alignement avec le hero est
   desormais porte par la grille englobante `.library-show__layout`. */
.resource-single__main { min-width: 0; }

/* Couverture */
.resource-single__cover-img {
    border-radius: var(--radius-md);
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-bg-light) 0%, #e8edf3 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    aspect-ratio: 3/4;
    max-width: 14rem;
}
.resource-single__cover-img img { width: 100%; height: 100%; object-fit: contain; }

.resource-single__cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3/4;
    border-radius: var(--radius-md);
    max-width: 14rem;
}
.resource-single__cover-placeholder--pdf { background: #fef2f2; color: #dc2626; }
.resource-single__cover-placeholder--video { background: #fefce8; color: #ca8a04; }
.resource-single__cover-placeholder--link { background: #eff6ff; color: #2563eb; }
.resource-single__cover-placeholder--default { background: var(--color-bg-light); color: var(--color-text-light); }

.resource-single__meta { display: flex; align-items: center; gap: var(--spacing-xs); margin-bottom: var(--spacing-sm); }

.resource-single__badge {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.resource-single__badge--pdf { background: #fef2f2; color: #dc2626; }
.resource-single__badge--video { background: #fefce8; color: #ca8a04; }
.resource-single__badge--link { background: #eff6ff; color: #2563eb; }

.resource-single__date { font-size: var(--font-size-xs); color: var(--color-text-light); }

.resource-single__title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: var(--spacing-sm); }

.resource-single__excerpt { font-size: var(--font-size-sm); color: var(--color-text-light); line-height: 1.5; margin-bottom: var(--spacing-md); }

.resource-single__file-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}
.resource-single__filename { display: inline-flex; align-items: center; gap: 0.25rem; }
.resource-single__filename + .resource-single__filesize::before { content: '·'; margin-right: var(--spacing-xs); }

/* Actions */
.resource-single__actions { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: auto; }

.resource-single__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: #fff;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.resource-single__btn:hover { background: var(--color-bg-light); }

.resource-single__btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.resource-single__btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.resource-single__share { display: flex; align-items: center; gap: var(--spacing-xs); }
.resource-single__share-label { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-text-light); margin-right: var(--spacing-xs); }
.resource-single__share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    transition: color 0.15s ease, background 0.15s ease;
}
.resource-single__share-btn:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

/* Viewer intégré — wrapper neutre. La containerisation est appliquée
   par variant : image/audio/external bornés à 80ch pour rester aérés,
   video pleine largeur du main pour permettre l'embed 16/9 (YouTube
   iframe ou `<video>` natif). PDF garde sa pleine largeur via
   `.pdf-viewer` (selector distinct). */
.resource-single__viewer {
    margin-bottom: var(--spacing-xl);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.resource-single__viewer--image,
.resource-single__viewer--audio,
.resource-single__viewer--external,
.resource-single__viewer--office {
    max-width: 80ch;
}

/* Office sans preview PDF générée — card téléchargement propre.
   Icône + libellé + bouton, alignement horizontal, peu verbeuse. */
.office-fallback {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--color-primary-light);
}
.office-fallback__icon {
    flex-shrink: 0;
    color: var(--color-primary);
}
.office-fallback__body { flex: 1; min-width: 0; }
.office-fallback__title {
    margin: 0 0 var(--spacing-xs) 0;
    font-weight: 600;
    color: var(--color-text);
}
.office-fallback__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Vidéo embeddable (YouTube iframe ou `<video>` HTML5) — ratio 16/9
   responsive, prend toute la largeur du main pour un rendu immersif
   aligné sur le viewer PDF. */
.resource-single__viewer--video iframe,
.resource-single__viewer--video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: 0;
}

/* Legacy — overridden by stage layout */

/* ══════════════════════════════════════════════════════════════
   Resource Vidéo — layout pleine largeur style Grafikart
   ══════════════════════════════════════════════════════════════ */
.resource-video { max-width: none; }

.resource-video__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.resource-video__info { flex: 1; min-width: 0; }
.resource-video__title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: var(--spacing-xs) 0; }
.resource-video__excerpt { font-size: var(--font-size-sm); color: var(--color-text-light); line-height: 1.5; margin: 0; }

/* Stage : player + bouton toggle + chapitres côte à côte */
.resource-video__stage {
    display: flex;
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    height: 80vh;
    min-height: 30rem;
}

.resource-video__player { flex: 1; min-width: 0; transition: flex 0.3s ease; }

/* Bouton toggle vertical entre player et chapitres */
.resource-video__sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    flex-shrink: 0;
    border: none;
    background: var(--color-bg-light);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    color: var(--color-text-light);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.resource-video__sidebar-toggle:hover { background: #e8edf3; color: var(--color-text); }

/* Chapitres panneau droit — pleine hauteur */
.resource-video__chapters {
    width: 20rem;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.resource-video__chapters-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.resource-video__chapters-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
}

/* Panneau PDF — infos + citation */
.resource-pdf__panel { padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-md); height: 100%; }

.resource-pdf__file-info { font-size: var(--font-size-xs); color: var(--color-text-light); }
.resource-pdf__filename { display: flex; align-items: center; gap: 0.25rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.125rem; }
.resource-pdf__filesize { font-size: var(--font-size-xs); color: var(--color-text-light); }

/* Citation affichée directement */
/* Bloc référence + QR code */
.resource-pdf__ref { display: flex; gap: var(--spacing-sm); margin-top: auto; }
.resource-pdf__qr-code { flex-shrink: 0; }
.resource-pdf__qr-code svg { width: 4.5rem; height: 4.5rem; display: block; }
.resource-pdf__ref-body { flex: 1; min-width: 0; }
.resource-pdf__cite-label { display: block; font-size: var(--font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-light); margin-bottom: 0.125rem; }
.resource-pdf__cite-text { font-size: 0.6875rem; line-height: 1.4; color: var(--color-text-light); font-style: italic; margin: 0; }

.resource-pdf__ref-actions { display: flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-xs); }
.resource-pdf__ref-sep { color: var(--color-border); font-size: var(--font-size-xs); }
.resource-pdf__cite-copy {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.resource-pdf__cite-copy:hover { text-decoration: underline; }

.resource-video__mobile-toggle {
    display: none;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    border: none;
    background: none;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-light);
    cursor: pointer;
}
.resource-video__mobile-toggle:hover { color: var(--color-primary); }

.resource-video__header-actions { display: flex; align-items: center; gap: var(--spacing-sm); flex-shrink: 0; }

/* Viewer PDF pleine hauteur dans le stage */
.resource-single__pdf-viewer { width: 100%; height: 100%; min-height: 30rem; border: none; }

@media (max-width: 63.9375em) {
    .resource-video__stage { flex-direction: column; height: auto; min-height: auto; }
    .resource-video__sidebar-toggle { display: none; }
    .resource-video__chapters { width: 100%; border-top: 1px solid var(--color-border); }
    .resource-video__header-actions { flex-wrap: wrap; }
    .resource-single__pdf-viewer { width: 100%; min-height: 24rem; height: 50vh; }
    .resource-video__player { min-height: 14rem; }

    .resource-video__mobile-toggle { display: inline-flex; }
}

@media (min-width: 64em) {
    .resource-video__mobile-toggle { display: none; }
}

@media (max-width: 47.9375em) {
    .resource-video__header { flex-direction: column; }
    .resource-video__title { font-size: 1.25rem; }
}

/* Legacy — garder pour compat */

.resource-single__video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.resource-single__video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Chapitrage */
.resource-single__chapters {
    margin-top: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.resource-single__chapters-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

.resource-single__chapters-list { list-style: none; padding: 0; margin: 0; }

.resource-single__chapter { border-bottom: 1px solid var(--color-border); }
.resource-single__chapter:last-child { border-bottom: none; }

.resource-single__chapter-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
    cursor: pointer;
}
a.resource-single__chapter-link:hover { background: var(--color-bg-light); }

.resource-single__chapter--active .resource-single__chapter-link {
    background: rgba(0, 150, 212, 0.06);
    border-left: 3px solid var(--color-primary);
}

.resource-single__chapter-time {
    font-family: monospace;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    min-width: 3rem;
    flex-shrink: 0;
}

.resource-single__chapter-title {
    font-size: var(--font-size-sm);
    color: var(--color-text);
}


.resource-single__aside-section { margin-top: var(--spacing-md); }
.resource-single__aside-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
}

/* Contenu éditorial — largeur contrainte pour la lisibilité prose. */
.resource-single__content { max-width: 70ch; margin-bottom: var(--spacing-xl); }

/* Citer */
.resource-single__cite { padding: var(--spacing-md) 0; border-top: 1px solid var(--color-border); margin-bottom: var(--spacing-xl); }

.resource-single__cite-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-light);
    background: none;
    border: none;
    cursor: pointer;
}
.resource-single__cite-toggle:hover { color: var(--color-text); }

.resource-single__cite-panel { margin-top: var(--spacing-sm); padding: var(--spacing-sm); background: var(--color-bg-light); border-radius: var(--radius-sm); }
.resource-single__cite-text { font-size: 0.6875rem; line-height: 1.5; color: var(--color-text-light); }
.resource-single__cite-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
}

/* Ressources liées — card visuelle pour amener du rythme à la fin de
   fiche, containerisée sur 72rem comme le reste du site. Fond teinté
   `--color-primary-light` (sans border) pour casser la monotonie blanche
   du body sans surcharger visuellement. */
.resource-single__related {
    max-width: 72rem;
    margin: var(--spacing-xl) auto;
    padding: var(--spacing-xl);
    background: var(--color-primary-light);
    border-radius: var(--radius-lg, 12px);
}

.resource-single__related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.resource-single__related-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.resource-single__related-see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: color 0.15s ease, gap 0.15s ease;
}

.resource-single__related-see-all:hover {
    color: var(--color-primary-dark, var(--color-primary));
    gap: 0.6rem;
}

/* Grille related — layout horizontal des cards : 1 col mobile, 2 col
   ≥48em. Plus compact que la grille 4 col verticale, et permet aux
   thumbnails PDF portrait de rester lisibles dans une vignette carrée
   à gauche sans rogner le titre. */
.library-show__related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 48em) {
    .library-show__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card horizontale « ressource en relation » — thumb carré à gauche
   (placeholder ou image générée par DAM), type + titre à droite.
   Distincte de `.library-card` (listing vertical avec featured fields,
   excerpt et chips tags). */
.library-related-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    overflow: hidden;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.library-related-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.library-related-card__link {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    color: inherit;
    text-decoration: none;
}

.library-related-card__thumb {
    position: relative;
    width: 5rem;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background: var(--color-bg-light, #f8f9fa);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Quand une miniature DAM est présente, on laisse l'image respirer sur
   le fond de la card (blanc) — `object-fit: contain` peut laisser des
   bandes blanches qu'on ne veut pas teintées en gris pâle. Le fond
   gris pâle reste réservé au placeholder (icône typée centrée). */
.library-related-card__thumb:has(.library-related-card__image) {
    background: transparent;
}

.library-related-card__placeholder {
    color: var(--color-primary);
    opacity: 0.5;
    display: inline-flex;
    line-height: 0;
}

.library-related-card__image {
    height: 100%;
    object-fit: contain;
    display: block;
}

.library-related-card__body {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

.library-related-card__type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted, #6b7280);
    font-weight: 500;
}

.library-related-card__type-icon {
    display: inline-flex;
    line-height: 0;
}

.library-related-card__title {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text, #1f2937);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.library-related-card:hover .library-related-card__title {
    color: var(--color-primary);
}

@media (max-width: 47.9375em) {
    .resource-single__cover-img, .resource-single__cover-placeholder { max-width: 10rem; }
    .resource-single__pdf-viewer { height: 24rem; }
}

/* ══════════════════════════════════════════════════════════════
   Dossier Single — sommaire des articles liés
   ══════════════════════════════════════════════════════════════ */

.article-single__type--dossier {
    background: var(--color-navy);
    color: #fff;
}

.dossier-single__articles {
    margin-bottom: var(--spacing-2xl);
}

.dossier-single__articles-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
}

.dossier-single__articles-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.dossier-single__article-item + .dossier-single__article-item {
    border-top: 1px solid var(--color-border);
}

.dossier-single__article-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.15s ease;
}

.dossier-single__article-link:hover {
    background: var(--color-bg-light);
}

.dossier-single__article-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.dossier-single__article-title {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.dossier-single__article-excerpt {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dossier-single__article-arrow {
    flex-shrink: 0;
    color: var(--color-text-light);
    margin-left: auto;
}

/* ── Related — cards sans bande grise ── */
.article-single__related {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-2xl);
}

.article-single__related-container {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.article-single__related-title {
    font-size: var(--font-size-xl);
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.article-single__related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

@media (min-width: 640px) {
    .article-single__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .article-single__related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════════
   Article TOC items (réutilisés dans la sidebar droite)
   ══════════════════════════════════════════════════════════════ */

/* .article-sidebar__toc, .article-toc__* → déplacés dans content.css (composant transversal) */

/* ══════════════════════════════════════════════════════════════
   Print header/footer — masqués à l'écran
   ══════════════════════════════════════════════════════════════ */

.print-header,
.print-footer {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   Article mobile — hero compact

   La bulle de partage qui remplace l'ancienne bande `.article-mobile-bar`
   vit desormais dans `styles/components/share-fab.css` : elle est partagee
   par toutes les fiches (article, page, evenement, formation, ressource,
   CESU), dont certaines ne chargent pas cette feuille.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 63.9375em) {
    .article-single__hero { min-height: 15rem; max-height: 22rem; }
}

/* ══════════════════════════════════════════════════════════════
   Print — Styles d'impression (format document)
   ══════════════════════════════════════════════════════════════ */

@media print {
    /* La typo papier de base (font-family, font-size, line-height) et
       la mise en page `@page` (marges, footer numérotation, en-tête
       courant à partir de la page 2) viennent de
       `styles/components/print.css`. On laisse cette brique faire
       autorité — pas de duplication ici. */

    /* ── Masquer éléments écran ──
       Les hides universels (`.navbar`, `.breadcrumb-bar`, `.bottom-nav`,
       `.cookie-consent`, `.skip-link`, `.site-footer`, `.sf-toolbar`)
       viennent désormais de `styles/components/print.css`. On garde ici
       seulement ce qui est propre aux fiches éditoriales (hero, sidebar
       partage/citer/print, articles liés, barre mobile sticky). */
    .article-sidebar,
    .article-single__related,
    .article-single__hero,
    .article-single__header,
    .share-fab,
    .reading-progress,
    .reading-share-rail,
    .list-filters,
    .page-transition-bar {
        display: none !important;
    }

    /* ── Newsletter minisite — impression ── */
    .nl-minisite-header__bar,
    .nl-minisite__sidebar,
    .nl-minisite-header__actions {
        display: none !important;
    }

    .nl-minisite-header {
        padding-top: 0;
    }

    .nl-minisite-hero {
        display: none !important;
    }

    .nl-minisite__content .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .nl-minisite-header {
        padding-top: 0 !important;
    }

    /* En-tête bibliographique : logo | titre + meta | QR code */
    .nl-minisite__print-biblio {
        display: flex !important;
        align-items: center;
        gap: 1em;
        margin: 1.5em 0 1em;
        padding: 0.75em 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .nl-minisite__print-biblio-logo {
        flex-shrink: 0;
    }

    .nl-minisite__print-biblio-logo img {
        width: auto;
        height: 60px;
    }

    .nl-minisite__print-biblio-info {
        flex: 1;
        min-width: 0;
    }

    .nl-minisite__print-biblio-title {
        display: block;
        font-size: 12pt;
        font-weight: 700;
        color: #000;
        line-height: 1.3;
    }

    .nl-minisite__print-biblio-meta {
        display: block;
        font-size: 8pt;
        color: #444;
        margin-top: 0.15em;
    }

    .nl-minisite__print-biblio-url {
        display: block;
        font-size: 7pt;
        color: #666;
        word-break: break-all;
        margin-top: 0.15em;
    }

    .nl-minisite__print-biblio-qr {
        flex-shrink: 0;
    }

    .nl-minisite__print-biblio-qr svg {
        width: 60px;
        height: 60px;
    }

    .nl-minisite-hero__topic {
        background: none;
        color: #344b8d;
        border: 1px solid #344b8d;
        font-size: 7pt;
        padding: 0 0.4em;
    }

    .nl-minisite__layout {
        display: block;
    }

    .nl-minisite__body {
        max-width: none;
    }

    .nl-minisite__content .prose-content {
        font-size: 10pt;
        line-height: 1.35;
    }

    .nl-minisite__content .prose-content p {
        margin-bottom: 0.5em;
    }

    .nl-minisite__content .prose-content ul,
    .nl-minisite__content .prose-content ol {
        padding-left: 1.5em;
        margin-bottom: 0.5em;
    }

    .nl-minisite__content .prose-content ul {
        list-style-type: disc;
    }

    .nl-minisite__content .prose-content ol {
        list-style-type: decimal;
    }

    .nl-minisite__content .prose-content li {
        margin-bottom: 0.2em;
    }

    .nl-minisite__content .prose-content li ul,
    .nl-minisite__content .prose-content li ol {
        margin-top: 0.2em;
        margin-bottom: 0;
    }

    .nl-minisite__content .prose-content blockquote {
        border-left: 3px solid #333;
        background: none;
        padding: 0.5em 1em;
        font-size: 9pt;
        font-style: italic;
    }

    .nl-minisite__content .prose-content table {
        font-size: 8.5pt;
        page-break-inside: avoid;
    }

    .nl-minisite__content .prose-content th,
    .nl-minisite__content .prose-content td {
        padding: 0.25em 0.5em;
        border: 1px solid #ccc;
    }

    .nl-minisite__content .prose-content th {
        background: #f5f5f5;
        font-weight: 600;
    }

    .nl-minisite__content .prose-content h2 {
        font-size: 14pt;
        font-weight: 700;
        margin-top: 1.5em;
        page-break-after: avoid;
    }

    .nl-minisite__content .prose-content h3 {
        font-size: 12pt;
        font-weight: 600;
        margin-top: 1em;
        page-break-after: avoid;
    }

    .nl-minisite__content .prose-content img {
        max-width: 80%;
        page-break-inside: avoid;
    }

    .nl-minisite__content .prose-content a {
        color: #000;
        text-decoration: underline;
    }

    .nl-minisite__content .prose-content a::after {
        content: " (" attr(href) ")";
        font-size: 7.5pt;
        color: #666;
        word-break: break-all;
    }

    /* Annexe contenus référencés en pied de newsletter */
    .nl-minisite__print-qr {
        display: block !important;
        margin-top: 2em;
        page-break-inside: avoid;
    }

    /* Contenus référencés — annexe */
    .nl-minisite__print-refs {
        margin-top: 1.5em;
        padding-top: 1em;
        border-top: 1px solid #eee;
    }

    .nl-minisite__print-refs-title {
        display: block;
        font-size: 10pt;
        font-weight: 700;
        color: #000;
        margin-bottom: 0.75em;
    }

    .nl-minisite__print-refs-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75em 1.5em;
    }

    .nl-minisite__print-ref {
        display: flex;
        align-items: center;
        gap: 0.5em;
        page-break-inside: avoid;
    }

    .nl-minisite__print-ref-qr svg {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .nl-minisite__print-ref-title {
        display: block;
        font-size: 8pt;
        font-weight: 600;
        color: #000;
    }

    .nl-minisite__print-ref-url {
        display: block;
        font-size: 6.5pt;
        color: #666;
        word-break: break-all;
    }

    /* ── Article : supprimer le layout grid ── */
    .article-single {
        padding: 0;
    }

    .article-single__layout {
        display: block;
        max-width: none;
        padding: 0;
    }

    .article-single__main {
        max-width: none;
    }

    /* Chapô (rendu une seule fois sur papier, ici uniquement — la cartouche
       print ne l'embarque pas pour éviter le doublon). Densifié. */
    .article-single__lead-text {
        font-size: 9pt;
        line-height: 1.4;
        padding-bottom: 0.4em;
        margin-bottom: 0.6em;
        color: #333;
        border-bottom-color: #999;
    }

    /* ── Contenu prose · densifié pour limiter le nombre de pages ── */
    .prose-content {
        font-size: 8.5pt;
        line-height: 1.4;
    }

    .prose-content > * + * {
        margin-top: 0.5em;
    }

    .prose-content h2 {
        font-size: 11pt;
        margin-top: 1em;
        margin-bottom: 0.3em;
        page-break-after: avoid;
    }

    .prose-content h3 {
        font-size: 10pt;
        margin-top: 0.75em;
        margin-bottom: 0.25em;
        page-break-after: avoid;
    }

    .prose-content h4 {
        font-size: 9pt;
        margin-top: 0.6em;
        margin-bottom: 0.15em;
        page-break-after: avoid;
    }

    .prose-content img {
        max-width: 70%;
        max-height: 20em;
        page-break-inside: avoid;
    }

    .prose-content figure {
        page-break-inside: avoid;
    }

    .prose-content blockquote {
        border-left: 3px solid #333;
        background: none;
        padding: 0.5em 1em;
        font-size: 9pt;
    }

    .prose-content table {
        font-size: 8.5pt;
        page-break-inside: avoid;
    }

    .prose-content pre {
        font-size: 8pt;
        border: 1px solid #ccc;
        background: none;
        page-break-inside: avoid;
    }

    /* Liens : afficher l'URL */
    .prose-content a[href^="http"]::after {
        content: " [" attr(href) "]";
        font-size: 0.75em;
        color: #666;
        word-break: break-all;
    }

    /* ── Print footer ── */
    .print-footer {
        display: block;
        margin-top: 2em;
    }

    .print-footer__rule {
        border: none;
        border-top: 1px solid #ccc;
        margin-bottom: 0.75em;
    }

    .print-footer__cite {
        font-size: 8pt;
        color: #444;
        line-height: 1.4;
    }

    .print-footer__url {
        font-size: 7.5pt;
        color: #888;
        margin-top: 0.25em;
    }

    /* ── FAQ print ── */
    .helpcenter__sidebar,
    .helpcenter__back,
    .helpcenter__cta,
    .helpcenter__rating,
    .helpcenter__report,
    .helpcenter__report-toggle,
    .helpcenter__report-thanks,
    .helpcenter__answer-tag,
    .helpcenter__cat-header,
    .helpcenter__entry-link-btn {
        display: none !important;
    }
    /* .btn-print masque par sa propre rule @media print dans components/btn-print.css. */

    .helpcenter__container { max-width: none; }

    .helpcenter__layout { display: block !important; }

    /* Bandeau bibliographique */
    .helpcenter__print-biblio {
        display: flex !important;
        align-items: center;
        gap: 1em;
        margin: 1.5em 0 1em;
        padding: 0.75em 0;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .helpcenter__print-biblio-logo img { height: 60px; width: auto; }

    .helpcenter__print-biblio-info { flex: 1; min-width: 0; }
    .helpcenter__print-biblio-title { display: block; font-size: 12pt; font-weight: 700; color: #000; }
    .helpcenter__print-biblio-meta { display: block; font-size: 8pt; color: #444; margin-top: 0.15em; }
    .helpcenter__print-biblio-url { display: block; font-size: 7pt; color: #666; word-break: break-all; margin-top: 0.15em; }

    .helpcenter__print-biblio-qr { flex-shrink: 0; }
    .helpcenter__print-biblio-qr svg { width: 60px; height: 60px; }

    .helpcenter__print-biblio { margin-bottom: 1.5em; }

    .helpcenter__entry {
        padding-bottom: 0.75em;
        margin-bottom: 0.75em;
        page-break-inside: avoid;
    }

    .helpcenter__entry-title { font-size: 12pt; font-weight: 700; margin-top: 0.75em; margin-bottom: 0.25em; }

    .helpcenter__entry .prose-content { font-size: 9pt; line-height: 1.3; }
    .helpcenter__entry .prose-content p { margin-bottom: 0.3em; }

    .helpcenter__answer-date { font-size: 7pt; color: #888; }

    .helpcenter__entry-footer { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   Library Show — fiche ressource publique (show.html.twig)
   Structure : topbar standalone (breadcrumb + share) sur fond
   teinte compact, puis grille englobante a 2 cols >= 48em (rail
   vignette + CTA sticky | main titre + description + viewer +
   body). Le rail reste visible pendant tout le scroll de la fiche
   grace a `position: sticky` sur `.library-show__rail-inner`.
   ══════════════════════════════════════════════════════════════ */

/* Fond teinte englobant — applique sur l'article racine pour couvrir
   topbar + zone titre (rail vignette + header titre + chips). Limite
   en hauteur via `background-size: 100% 24rem`, donc la description,
   le viewer et le body sont sur fond blanc franc.

   3 couches (la 1ere rendue PAR-DESSUS) : linear vertical (force blanc
   franc dans les derniers 30% de la zone teintee) + linear horizontal
   (blanc franc sur les 25% lateraux) + radial centre haut (teinte
   `--color-primary-light`). */
.library-show {
    background-color: var(--color-bg);
    background-image:
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 50%,
            var(--color-bg) 95%
        ),
        linear-gradient(
            90deg,
            var(--color-bg) 0%,
            transparent 25%,
            transparent 75%,
            var(--color-bg) 100%
        ),
        radial-gradient(
            ellipse 80% 100% at 50% 0%,
            var(--color-primary-light) 0%,
            color-mix(in srgb, var(--color-primary-light) 50%, var(--color-bg)) 50%,
            var(--color-bg) 100%
        );
    background-size: 100% 24rem;
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* Topbar wrap : conteneur transparent (le fond gradient est porte par
   `.library-show`), juste un padding-top defensif. */
.library-show__topbar-wrap {
    padding-top: var(--spacing-xs);
}

/* Topbar : breadcrumb a gauche, label « Partager : » + boutons +
   bookmark a droite. Padding-top porte par le topbar pour que les
   baselines breadcrumb / label coincident. */
.library-show__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 0;
    flex-wrap: wrap;
}
.library-show__topbar > :first-child { flex: 1 1 auto; min-width: 0; }
.library-show__topbar .breadcrumb-bar { background: transparent; border: 0; margin-bottom: 0; }
.library-show__topbar .breadcrumb__list { padding: 0; }

.library-hero__share {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}
.library-hero__share-label {
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
}

/* Variant `--hero` du composant share-buttons : style ghost calé sur
   `.sidebar-reading-time__btn` (sidebar fiche article) — sans bordure,
   hover subtil (color primary + bg-light), 1.75rem ronds. Plus propre
   que le défaut bordé du composant share. Séparateur vertical avant
   le bookmark (mêlé aux share ici, contrairement à la fiche article). */
.share-buttons--hero .share-buttons__btn {
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    background: transparent;
}
.share-buttons--hero .share-buttons__btn:hover:not(:disabled) {
    color: var(--color-primary);
    background: var(--color-bg-light);
}
.share-buttons--hero .share-buttons__btn--bookmark.share-buttons__btn--active {
    color: var(--color-primary);
    background: transparent;
}
.share-buttons--hero .share-buttons__btn--bookmark.share-buttons__btn--active:hover {
    background: var(--color-bg-light);
}
.share-buttons--hero .share-buttons__btn--bookmark {
    position: relative;
    margin-left: var(--spacing-sm);
}
.share-buttons--hero .share-buttons__btn--bookmark::before {
    content: '';
    position: absolute;
    left: calc(var(--spacing-sm) / -2);
    top: 50%;
    transform: translate(-50%, -50%);
    height: 1.25rem;
    width: 1px;
    background: var(--color-border);
}

/* Breadcrumb : le dernier crumb (lien courant, sans href) tronque a
   28ch avec ellipsis pour eviter qu'un titre long ne pousse la barre
   share hors ecran. */
.library-show__topbar .breadcrumb__item:last-child > span,
.library-show__topbar .breadcrumb__item:last-child > a {
    display: inline-block;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ──────────────────────────────────────────────────────────────
   Grille englobante : rail (vignette + CTA sticky) | main (header
   titre + description + viewer + body). 1 col mobile, 2 cols >=
   48em. La sticky du rail est portee par `.library-show__rail-inner`
   pour que la sticky soit relative au container `.library-show__layout`
   qui englobe TOUT le contenu (donc le rail reste visible pendant
   tout le scroll).
   ────────────────────────────────────────────────────────────── */
.library-show__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-2xl);
    /* PAS de `align-items: start` : la cellule rail doit prendre la
       hauteur de la rangee (= hauteur du main) pour que la sticky
       interne ait du "rail" sur lequel glisser. Avec `start`, la
       cellule rail = hauteur de son contenu, sticky inactive. */
}

@media (min-width: 48em) {
    .library-show__layout {
        grid-template-columns: 11rem 1fr;
        gap: var(--spacing-xl);
        padding-top: var(--spacing-xl);
    }
}

.library-show__rail-inner {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-width: 11rem;
    margin: 0 auto; /* centre sur mobile (cellule full-width) */
}

/* Sticky uniquement sur ecran large : sur mobile le rail apparait en
   haut du flow, pas la peine de le coller. `top` calcule depuis la
   var globale `--header-height` (3.5rem) + un spacing-md de marge. */
@media (min-width: 48em) {
    .library-show__rail-inner {
        position: sticky;
        top: calc(var(--header-height) + var(--spacing-md));
        margin: 0; /* aligne a gauche dans la grille 11rem 1fr */
    }
}

.library-show__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.library-hero__cover {
    position: relative;
    width: 100%;
    max-width: 11rem;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 16px -6px rgba(15, 23, 42, 0.18), 0 1px 3px rgba(15, 23, 42, 0.06);
}

/* Vidéo/replay : le thumbnail (YouTube etc.) est en 16/9, le cover doit
   matcher pour éviter les bandes blanches. `object-fit: cover` pour
   remplir parfaitement (le thumbnail YouTube standard est exactement
   16/9, zéro crop visible). Le fond bascule sur le noir vidéo. */
.library-hero__cover--video {
    aspect-ratio: 16 / 9;
    background: #000;
}

.library-hero__cover-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.library-hero__cover--video .library-hero__cover-img {
    object-fit: cover;
}

.library-hero__cover-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background: linear-gradient(160deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-primary) 8%, var(--color-bg)) 100%);
}

.library-hero__cover-badge {
    position: absolute;
    left: var(--spacing-sm);
    bottom: var(--spacing-sm);
    padding: 0.1875rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.library-hero__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.library-hero__eyebrow {
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.library-hero__eyebrow-link {
    color: inherit;
    text-decoration: none;
}
.library-hero__eyebrow-link:hover { color: var(--color-primary); text-decoration: underline; }

/* Tags chips cliquables (vers /ressources?tag=…) — sous le titre. */
.library-hero__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* Style aligné sur `.library-card__tag` du listing /ressources : radius-sm,
   fond neutre `bg-light` + bordure, hover bascule sur la couleur primary.
   Pas de full-rounded (999px) qui ferait dissonance avec le reste. */
.library-hero__tag {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    color: var(--color-text-light);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.library-hero__tag:hover,
.library-hero__tag:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
    outline: none;
}

.library-hero__title {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}

.library-hero__excerpt-wrap {
    position: relative;
}

.library-hero__excerpt {
    margin: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-md, 1rem);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.library-hero__excerpt.is-expanded {
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
}

.library-hero__excerpt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--spacing-xs);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.library-hero__excerpt-toggle:hover { text-decoration: underline; }
.library-hero__excerpt-toggle svg { transition: transform 0.2s ease; }

.library-hero__chips {
    list-style: none;
    margin: var(--spacing-xs) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.library-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-text-light);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.library-hero__chip svg { color: var(--color-text-light); flex-shrink: 0; }

/* CTA download sous la vignette : centre, largeur de la colonne (11rem). */
.library-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.library-hero__cta {
    width: 100%;
    justify-content: center;
}

/* Citation imprimable — invisible à l'écran, visible sur impression.
   QR + texte de référence pour citer la ressource papier. Les actions
   interactives (copier, télécharger QR) sont retirées : à l'impression
   elles n'ont pas de sens. */
.library-print-cite { display: none; }

@media print {
    .library-print-cite {
        display: flex;
        gap: 1rem;
        align-items: flex-start;
        padding: 0.75rem 0;
        margin-top: 1rem;
        border-top: 1px solid #ddd;
        font-size: 9pt;
        break-inside: avoid;
    }
    .library-print-cite__qr { flex-shrink: 0; width: 3rem; height: 3rem; }
    .library-print-cite__qr svg { width: 100%; height: 100%; }
    .library-print-cite__body { flex: 1; min-width: 0; }
    .library-print-cite__label {
        display: block;
        font-size: 7pt;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #555;
        margin-bottom: 0.25rem;
    }
    .library-print-cite__text { margin: 0; line-height: 1.4; color: #333; }
}

@media (max-width: 47.9375em) {
    .library-hero__topbar { padding-right: var(--spacing-sm); }
    .library-hero__share { padding-bottom: var(--spacing-sm); }
    .library-hero__share-label { display: none; }
    .library-hero .breadcrumb__item:last-child > span,
    .library-hero .breadcrumb__item:last-child > a { max-width: 18ch; }
}

/* ══════════════════════════════════════════════════════════════
   PDF Viewer — toolbar externe + iframe natif
   Plein écran sur le wrapper (requestFullscreen), zoom et navigation
   pages restent gérés par le browser natif (non pilotables depuis
   le DOM parent pour un PDF iframe).
   ══════════════════════════════════════════════════════════════ */
.pdf-viewer {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
}

.pdf-viewer__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0.5rem 0.75rem;
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.pdf-viewer__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: var(--color-text-light);
    font-size: var(--font-size-xs);
}

.pdf-viewer__name {
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdf-viewer__sep { color: var(--color-border); }
.pdf-viewer__size { flex-shrink: 0; }

.pdf-viewer__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.pdf-viewer__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-light);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pdf-viewer__btn:hover {
    background: #fff;
    border-color: var(--color-border);
    color: var(--color-text);
}

.pdf-viewer__frame-wrap {
    width: 100%;
    height: 75vh;
    min-height: 28rem;
    background: #525659;
}

.pdf-viewer__frame-wrap:fullscreen {
    height: 100vh;
    min-height: 100vh;
}

.pdf-viewer__frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

@media (max-width: 47.9375em) {
    .pdf-viewer__frame-wrap { height: 60vh; min-height: 22rem; }
    .pdf-viewer__title { font-size: 0.6875rem; }
    .pdf-viewer__name { max-width: 12rem; }
}

/* Description éditoriale placée AVANT le viewer (pdf/image/video/audio).
   Replié par défaut quand le contenu dépasse `max-height`, avec fade
   gradient en bas pour signaler le débordement. Toggle Alpine identique
   au pattern `library-hero__excerpt-toggle`. */
.resource-single__intro {
    margin-bottom: var(--spacing-lg);
}

.resource-single__intro-body {
    position: relative;
    max-width: 70ch;
    max-height: 12rem;
    overflow: hidden;
}

.resource-single__intro-body.is-expanded {
    max-height: none;
    overflow: visible;
}

.resource-single__intro-body.is-overflowing:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
    pointer-events: none;
}

.resource-single__intro-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--spacing-xs);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.resource-single__intro-toggle:hover { text-decoration: underline; }
.resource-single__intro-toggle svg { transition: transform 0.2s ease; }

/* ══════════════════════════════════════════════════════════════
   Replay metadata — sous-template `library/_metadata/_replay.html.twig`
   Affiché sous le viewer iframe YouTube. Cale à 70ch comme le body
   éditorial pour rester aéré (l'iframe vidéo a sa pleine largeur).
   ══════════════════════════════════════════════════════════════ */
.replay-meta {
    max-width: 70ch;
    margin-top: 0;
    margin-bottom: var(--spacing-xl);
}

.replay-meta__info {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-lg);
    padding: var(--spacing-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

@media (min-width: 30em) {
    .replay-meta__info {
        grid-template-columns: repeat(2, 1fr);
    }
}

.replay-meta__row {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
}

.replay-meta__row dt {
    font-size: var(--font-size-xs);
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.replay-meta__row dd {
    font-size: 0.95rem;
    margin: 0;
    color: var(--color-text);
}

.replay-meta__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.replay-meta__link:hover {
    text-decoration: underline;
}

.replay-meta__section {
    margin-bottom: var(--spacing-lg);
}

.replay-meta__section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-sm);
    color: var(--color-text);
}

.replay-meta__trainings {
    list-style: none;
    padding: 0;
    margin: 0;
}

.replay-meta__trainings li {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}

.replay-meta__trainings li:last-child {
    border-bottom: none;
}

/* ──────────────────────────────────────────────────────────────
   Speaker cards — intervenants d'un replay.
   Grille responsive (1 col mobile, 2 cols >= 30em) avec un avatar
   initiales à gauche et nom/affiliation/role à droite.
   ────────────────────────────────────────────────────────────── */
.speaker-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

@media (min-width: 30em) {
    .speaker-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.speaker-card {
    /* La card peut être un `<li>` simple (pas de bio publique) ou contenir
       un `<a class="speaker-card__link">` qui couvre toute la surface. Dans
       les deux cas le rendu visuel est identique — le hover plus marqué est
       porté par `.speaker-card__link:hover` (cf. plus bas). */
    padding: 0;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.speaker-card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    box-shadow: 0 2px 8px -4px rgba(15, 23, 42, 0.12);
}

/* Layout interne — appliqué soit directement sur la `<li>` (pas de lien),
   soit sur le `<a>` quand la bio publique existe (cible cliquable couvrant
   toute la surface, alignée avec le contenu). */
.speaker-card,
.speaker-card__link {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.speaker-card__link {
    padding: var(--spacing-sm) var(--spacing-md);
    color: inherit;
    text-decoration: none;
    width: 100%;
    transition: background-color 0.12s ease;
}

/* Quand la card est un simple `<li>` sans lien : conserver le padding via
   un sélecteur d'absence pour éviter d'avoir deux niveaux de padding. */
.speaker-card:not(:has(.speaker-card__link)) {
    padding: var(--spacing-sm) var(--spacing-md);
}

.speaker-card__link:hover,
.speaker-card__link:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    outline: none;
}

.speaker-card__link:focus-visible {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.speaker-card__avatar {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 85%, white) 0%, var(--color-primary) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.speaker-card__initials {
    line-height: 1;
}

.speaker-card__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.speaker-card__name {
    margin: 0;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9375rem;
    line-height: 1.3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: baseline;
}

.speaker-card__civility {
    color: var(--color-text-light, #6b7280);
    font-weight: 500;
    font-size: 0.8125rem;
}

.speaker-card__affiliation {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-text-light, #6b7280);
    line-height: 1.35;
}

.speaker-card__role {
    display: inline-flex;
    align-items: center;
    margin-top: 0.25rem;
    padding: 0.0625rem 0.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    align-self: flex-start;
}

/* ──────────────────────────────────────────────────────────────
   Video stage — replay layout : player YouTube + panneau
   chapitres côte à côte sur desktop (≥62em), empilés sur mobile.
   Le wrapper porte le scope Alpine `seek()` ; chaque lien chapitre
   dispatch `yt-seek` localement (bubble vers le wrapper, listener
   y appelle `seekTo` via postMessage sur l'iframe YouTube).
   Le panneau chapitres reste fond blanc épuré (zéro card) : titre +
   bouton toggle + liste navigable. Plié par défaut sur mobile,
   déplié sur desktop pour rester immédiatement consultable.
   ────────────────────────────────────────────────────────────── */
.video-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

@media (min-width: 64em) {
    .video-stage--with-chapters {
        grid-template-columns: minmax(0, 1fr) 18rem;
        align-items: start;
    }

    /* Quand l'utilisateur plie le panneau chapitres (Alpine bascule
       `--collapsed`), le grid retombe à 1 colonne et l'iframe player
       (qui est `width:100%`) reprend toute la largeur disponible. */
    .video-stage--with-chapters.video-stage--collapsed {
        grid-template-columns: 1fr;
    }
}

.video-stage__player {
    /* Reset hérité du `.resource-single__viewer` générique : la
       margin-bottom est déjà portée par `.video-stage` wrapper.
       `position:relative` pour ancrer le bouton « ré-ouvrir
       chapitres » qui se positionne en absolute top-right. */
    margin-bottom: 0;
    min-width: 0;
    position: relative;
}

/* Bouton flottant pour ré-ouvrir le panneau chapitres une fois plié.
   Reste discret (semi-transparent sombre) pour ne pas masquer l'image
   du player. */
.video-stage__chapters-reopen {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.55rem;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background-color 0.12s ease, transform 0.12s ease;
}

.video-stage__chapters-reopen:hover,
.video-stage__chapters-reopen:focus-visible {
    background: rgba(15, 23, 42, 0.92);
    transform: translateY(-1px);
    outline: none;
}

.video-stage__chapters {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

@media (min-width: 64em) {
    .video-stage__chapters {
        position: sticky;
        top: calc(var(--header-height) + var(--spacing-md));
        max-height: calc(100vh - var(--header-height) - var(--spacing-xl));
    }
}

.video-stage__chapters-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin: 0 0 var(--spacing-sm);
}

.video-stage__chapters-title {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light, #6b7280);
}

.video-stage__chapters-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-light, #6b7280);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.video-stage__chapters-toggle:hover,
.video-stage__chapters-toggle:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    color: var(--color-primary);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    outline: none;
}

.video-stage__chapters-toggle svg {
    transition: transform 0.15s ease;
}

.video-stage__chapters-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.video-stage__chapters-link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.75rem;
    padding: 0.25rem 0;
    color: var(--color-text);
    text-decoration: none;
    line-height: 1.4;
    border-radius: var(--radius-sm);
    transition: color 0.12s ease;
}

.video-stage__chapters-link:hover,
.video-stage__chapters-link:focus-visible {
    color: var(--color-primary);
    outline: none;
}

.video-stage__chapters-link:focus-visible {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.video-stage__chapters-time {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    color: var(--color-primary);
    font-weight: 600;
    align-self: start;
    margin-top: 0.15rem;
}

.video-stage__chapters-label {
    font-size: 0.875rem;
    word-break: break-word;
}