/* Extension « Diaporama ». Sans script : une image par écran, défilement horizontal aimanté.
   Avec script (.slideshow-js) : images empilées dans un cadre de hauteur fixe, une seule visible, glissement court
   en fondu ; flèches et commandes en surimpression, toujours à la même place. */
.article-content .slideshow { position: relative; margin: 1.5em 0; outline: none; --slideshow-duration: 5s; }
.article-content .slideshow:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius-md); }
.article-content .slideshow-track {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    height: min(75vh, 760px); background: var(--surface-2); border-radius: var(--radius-md); scrollbar-width: none;
}
.article-content .slideshow-track::-webkit-scrollbar { display: none; }
.article-content .slideshow .slide {
    flex: 0 0 100%; height: 100%; margin: 0; scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center;
}
.article-content .slideshow .slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; }

/* Scène : une image à la fois, glissement de 40 px et fondu (250 ms) ; l'ancienne s'efface sur place (200 ms) */
.article-content .slideshow-js .slideshow-track { display: block; position: relative; overflow: hidden; touch-action: pan-y; }
.article-content .slideshow-js .slide { position: absolute; inset: 0; display: none; opacity: 0; }
.article-content .slideshow-js .slide.is-active,
.article-content .slideshow-js .slide.is-leaving,
.article-content .slideshow-js .slide.is-entering { display: flex; }
.article-content .slideshow-js .slide.is-entering { opacity: 0; transform: translateX(40px); transition: none; }
.article-content .slideshow-js .slide.is-entering.from-left { transform: translateX(-40px); }
.article-content .slideshow-js .slide.is-active {
    opacity: 1; transform: none; z-index: 1;
    transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.article-content .slideshow-js .slide.is-leaving { opacity: 0; transition: opacity 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
    .article-content .slideshow-js .slide.is-entering { transform: none; }
}

/* Surimpression : flèches au milieu des bords, compteur en haut à gauche (positions fixes dans le cadre) */
.article-content .slideshow-nav {
    position: absolute; top: calc(min(75vh, 760px) / 2); transform: translateY(-50%); z-index: 2;
    width: 48px; height: 96px; border: 0; border-radius: 10px; cursor: pointer;
    background: rgb(0 0 0 / .35); color: #fff; font-size: 2.2rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: background-color .15s;
}
.article-content .slideshow-nav:hover, .article-content .slideshow-nav:focus-visible { background: rgb(0 0 0 / .65); }
.article-content .slideshow-nav.prev { left: 8px; }
.article-content .slideshow-nav.next { right: 8px; }
.article-content .slideshow-counter {
    position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 10px; border-radius: 999px;
    background: rgb(0 0 0 / .5); color: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; pointer-events: none;
}
.article-content .slideshow-exit {
    position: absolute; top: 8px; right: 8px; z-index: 2; display: none;
    width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
    background: rgb(0 0 0 / .5); color: #fff; font-size: 1.1rem;
}
.article-content .slideshow-exit:hover { background: rgb(0 0 0 / .75); }

/* Lecture automatique : ▶/⏸ et durée en bas à gauche, barre de progression en bas du cadre */
.article-content .slideshow-controls {
    position: absolute; left: 8px; top: calc(min(75vh, 760px) - 48px); z-index: 2; display: flex; gap: 6px;
}
.article-content .slideshow-play, .article-content .slideshow-speed {
    height: 36px; min-width: 36px; padding: 0 10px; border: 0; border-radius: 999px; cursor: pointer;
    background: rgb(0 0 0 / .5); color: #fff; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.article-content .slideshow-play:hover, .article-content .slideshow-speed:hover { background: rgb(0 0 0 / .75); }
.article-content .slideshow-progress {
    position: absolute; left: 0; top: calc(min(75vh, 760px) - 3px); z-index: 2; height: 3px; width: 0;
    background: var(--accent); pointer-events: none;
}
.article-content .slideshow.is-playing .slideshow-progress.is-running {
    animation: slideshow-progress var(--slideshow-duration) linear forwards;
}
@keyframes slideshow-progress { from { width: 0; } to { width: 100%; } }

.article-content .slideshow-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* Plein écran : fond noir, cadre de la taille de l'écran, commandes aux bords de l'écran */
.article-content .slideshow:fullscreen { margin: 0; background: #000; }
.article-content .slideshow:fullscreen .slideshow-track { height: 100vh; border-radius: 0; background: #000; }
.article-content .slideshow:fullscreen .slideshow-nav { top: 50vh; }
.article-content .slideshow:fullscreen .slideshow-controls { top: calc(100vh - 52px); left: 12px; }
.article-content .slideshow:fullscreen .slideshow-progress { top: calc(100vh - 3px); }
.article-content .slideshow:fullscreen .slideshow-exit { display: flex; align-items: center; justify-content: center; }
.article-content .slideshow:fullscreen .slideshow-bar { display: none; }

/* « Tout afficher » : les images les unes sous les autres, sans surimpression */
.article-content .slideshow.slideshow-expanded .slideshow-track {
    display: flex; flex-direction: column; height: auto; overflow: visible; scroll-snap-type: none; background: none;
}
.article-content .slideshow.slideshow-expanded .slide {
    position: static; display: flex; opacity: 1; transform: none; height: auto; margin: 0 0 1em;
}
.article-content .slideshow.slideshow-expanded :is(.slideshow-nav, .slideshow-counter, .slideshow-exit,
    .slideshow-fullscreen-btn, .slideshow-controls, .slideshow-progress) { display: none; }