/* ─── Diaporama plein écran des tableaux (#21) ─── */

.diaporama {
    --diapo-fond    : #14110c;
    --diapo-texte   : #f0ece3;
    --diapo-discret : #9a8a72;
    --diapo-filet   : rgba(240, 236, 227, 0.25);

    width      : 100vw;
    height     : 100vh;
    height     : 100dvh;
    max-width  : none;
    max-height : none;
    margin     : 0;
    padding    : 0;
    border     : 0;
    background : var(--diapo-fond);
    color      : var(--diapo-texte);
    font-family: 'Georgia', 'Times New Roman', serif;
    overflow   : hidden;
}

.diaporama[open] {
    display        : flex;
    flex-direction : column;
}

.diaporama::backdrop {
    background : var(--diapo-fond);
}

/* ─── Tableau et légende ─────────────────────────────────── */
.diaporama__scene {
    position       : relative; /* repère de l'image sortante pendant le glissement */
    flex           : 1;
    min-height     : 0;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 1.2rem;
    margin         : 0;
    padding        : 2.5rem 5rem 1rem;
}

.diaporama__image {
    flex        : 1;
    min-height  : 0;
    max-width   : 100%;
    object-fit  : contain;
    /* drop-shadow suit le tableau lui-même, pas la boîte de l'image (object-fit) */
    filter      : drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    opacity     : 0;
    transition  : opacity 0.6s ease;
}

.diaporama__image--visible {
    opacity : 1;
}

/* Passage au tableau suivant : l'image glisse au lieu d'apparaître en fondu */
.diaporama__image--glisse {
    transition : none;
}

.diaporama__image--sortante {
    position       : absolute;
    flex           : none;
    max-width      : none;
    margin         : 0;
    opacity        : 1;
    transition     : none;
    pointer-events : none;
}

.diaporama__legende {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    align-items    : baseline;
    gap            : 0.3rem 1rem;
    text-align     : center;
}

.diaporama__titre {
    font-size       : 1.15rem;
    letter-spacing  : 0.06em;
    color           : var(--diapo-texte);
    text-decoration : none;
    border-bottom   : 1px solid transparent;
    transition      : border-color 0.3s ease;
}

.diaporama__titre:hover,
.diaporama__titre:focus-visible {
    color        : var(--diapo-texte);
    border-color : var(--diapo-discret);
}

.diaporama__infos,
.diaporama__compteur {
    font-size  : 0.85rem;
    font-style : italic;
    color      : var(--diapo-discret);
}

/* ─── Boutons ────────────────────────────────────────────── */
.diaporama button {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    gap            : 0.6em;
    padding        : 0.6rem 1rem;
    border         : 1px solid var(--diapo-filet);
    border-radius  : 0;
    background     : transparent;
    color          : var(--diapo-texte);
    font-family    : inherit;
    font-size      : 11px;
    letter-spacing : 0.18em;
    text-transform : uppercase;
    cursor         : pointer;
    transition     : background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.diaporama button:focus {
    background   : transparent;
    border-color : var(--diapo-filet);
    color        : var(--diapo-texte);
}

.diaporama button:hover,
.diaporama button:focus-visible {
    background   : rgba(240, 236, 227, 0.1);
    border-color : var(--diapo-texte);
    color        : var(--diapo-texte);
}

.diaporama button:focus-visible {
    outline        : 2px solid var(--diapo-discret);
    outline-offset : 2px;
}

.diaporama svg {
    width          : 14px;
    height         : 14px;
    fill           : none;
    stroke         : currentColor;
    stroke-width   : 1.6;
    stroke-linecap : round;
    stroke-linejoin: round;
}

.diaporama__nav {
    position : absolute;
    top      : 50%;
    transform: translateY(-50%);
    width    : 3.2rem;
    height   : 3.2rem;
}

.diaporama .diaporama__nav {
    padding : 0;
    border  : 0;
}

.diaporama__nav svg {
    width  : 28px;
    height : 28px;
}

.diaporama__nav--prec { left  : 1rem; }
.diaporama__nav--suiv { right : 1rem; }

.diaporama__commandes {
    display        : flex;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : 0.6rem;
    padding        : 0.8rem 1rem 1.4rem;
}

/* Lecture / pause : une seule icône visible selon l'état */
[data-diaporama="lecture"][aria-pressed="true"]  .diaporama__icone-lecture,
[data-diaporama="lecture"][aria-pressed="false"] .diaporama__icone-pause {
    display : none;
}

.diaporama button[aria-pressed="true"]:not([data-diaporama="lecture"]),
.diaporama button[aria-pressed="true"]:not([data-diaporama="lecture"]):focus {
    background   : var(--diapo-texte);
    border-color : var(--diapo-texte);
    color        : var(--diapo-fond);
}

/* ─── Petits écrans ──────────────────────────────────────── */
@media (max-width: 700px) {
    .diaporama__scene {
        padding : 1.5rem 1rem 0.5rem;
    }

    .diaporama .diaporama__nav {
        display : none; /* balayage du doigt */
    }

    .diaporama button span {
        /* icônes seules, libellés gardés pour les lecteurs d'écran */
        position : absolute;
        width    : 1px;
        height   : 1px;
        overflow : hidden;
        clip     : rect(0 0 0 0);
        white-space : nowrap;
    }

    .diaporama button {
        padding : 0.8rem 1.1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diaporama__image {
        transition : none;
    }
}