/* ─── Visionneuse plein écran d'un tableau (zoom) ─── */

/* Image de la fiche : bouton d'ouverture.
   Préfixe .single-tableau : l'emporte sur le reset des <button>, chargé après */
.single-tableau .single-tableau__zoom {
    position   : relative;
    display    : block;
    width      : 100%;
    margin     : 0;
    padding    : 0;
    border     : 0;
    border-radius : 0;
    background : none;
    cursor     : zoom-in;
}

.single-tableau .single-tableau__zoom:focus-visible {
    outline        : 2px solid #9a8a72;
    outline-offset : 4px;
}

.single-tableau__zoom-icone {
    position        : absolute;
    right           : 10px;
    bottom          : 10px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 34px;
    height          : 34px;
    background      : rgba(20, 17, 12, 0.6);
    color           : #f0ece3;
    opacity         : 0.75;
    transition      : opacity 0.3s ease;
}

.single-tableau__zoom:hover .single-tableau__zoom-icone,
.single-tableau__zoom:focus-visible .single-tableau__zoom-icone {
    opacity : 1;
}

.single-tableau__zoom-icone svg {
    width        : 17px;
    height       : 17px;
    fill         : none;
    stroke       : currentColor;
    stroke-width : 1.6;
}

/* ─── Fenêtre plein écran (palette du diaporama) ─── */
.visionneuse {
    --vis-fond    : #14110c;
    --vis-texte   : #f0ece3;
    --vis-discret : #9a8a72;
    --vis-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(--vis-fond);
    color       : var(--vis-texte);
    font-family : 'Georgia', 'Times New Roman', serif;
    overflow    : hidden;
}

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

.visionneuse::backdrop {
    background : var(--vis-fond);
}

.visionneuse__scene {
    position     : relative;
    flex         : 1;
    min-height   : 0;
    overflow     : hidden;
    touch-action : none; /* pincement et glissement gérés en JS */
    cursor       : zoom-in;
    user-select  : none;
}

.visionneuse__scene--deplacable {
    cursor : grab;
}

.visionneuse__scene--deplacable:active {
    cursor : grabbing;
}

.visionneuse__image {
    position         : absolute;
    top              : 0;
    left             : 0;
    max-width        : none;
    height           : auto;
    transform-origin : 0 0;
    pointer-events   : none;
    -webkit-user-drag: none;
}

.visionneuse__image--anime {
    transition : transform 0.25s ease;
}

/* Indicateur pendant le chargement de l'image d'origine */
.visionneuse__chargement {
    position       : absolute;
    top            : 1rem;
    left           : 50%;
    transform      : translateX(-50%);
    margin         : 0;
    padding        : 0.4rem 0.9rem;
    background     : rgba(20, 17, 12, 0.75);
    font-size      : 13px;
    font-style     : italic;
    letter-spacing : 0.06em;
    color          : var(--vis-discret) !important;
    opacity        : 0;
    transition     : opacity 0.3s ease;
    pointer-events : none;
}

.visionneuse--chargement .visionneuse__chargement {
    opacity : 1;
}

/* ─── Commandes ─── */
.visionneuse__commandes {
    display         : flex;
    flex-wrap       : wrap;
    align-items     : center;
    justify-content : center;
    gap             : 0.6rem;
    padding         : 0.8rem 1rem 1rem;
    border-top      : 1px solid var(--vis-filet);
}

.visionneuse .visionneuse__commandes button {
    display        : inline-flex;
    align-items    : center;
    gap            : 0.5em;
    margin         : 0;
    padding        : 0.55rem 1rem;
    border         : 1px solid var(--vis-filet);
    border-radius  : 0;
    background     : transparent;
    font-family    : 'Georgia', serif;
    font-size      : 12px;
    letter-spacing : 0.16em;
    text-transform : uppercase;
    color          : var(--vis-texte);
    cursor         : pointer;
    transition     : border-color 0.3s ease, background-color 0.3s ease;
}

.visionneuse .visionneuse__commandes button:hover,
.visionneuse .visionneuse__commandes button:focus-visible {
    border-color : var(--vis-texte);
    background   : rgba(240, 236, 227, 0.08);
    color        : var(--vis-texte);
}

.visionneuse .visionneuse__commandes button:disabled {
    opacity : 0.35;
    cursor  : default;
}

.visionneuse__commandes svg {
    width        : 14px;
    height       : 14px;
    fill         : none;
    stroke       : currentColor;
    stroke-width : 1.6;
}

.visionneuse__niveau {
    min-width          : 4.5em;
    font-size          : 13px;
    font-style         : italic;
    text-align         : center;
    color              : var(--vis-discret);
    font-variant-numeric : tabular-nums;
}

.visionneuse__aide {
    flex-basis     : 100%;
    margin         : 0.2rem 0 0;
    font-size      : 12px !important;
    font-style     : italic;
    text-align     : center !important;
    color          : var(--vis-discret) !important;
}

@media (max-width: 600px) {
    .visionneuse .visionneuse__commandes button span {
        display : none; /* les icônes suffisent sur petit écran */
    }

    .visionneuse__aide {
        display : none;
    }
}

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