/* =============================================================
   WIDE Edizioni — Galeries photo
   Grand slider (4×5) + barre de vignettes (1×1) responsive.
   Remplace l'ancien style.css (il contient tout le nécessaire).

   Variables personnalisables (sur .diaporama-widget) :
     --dp-gap      espace entre vignettes
     --dp-dim      opacité de la vignette ACTIVE (contraste de sélection)
     --dp-radius   arrondi des coins
     --dp-row      hauteur d'une ligne de vignette en version phone
   ============================================================= */

.diaporama-widget {
    --dp-gap: 12px;
    --dp-dim: 0.65;         /* opacité de la vignette sélectionnée */
    --dp-radius: 12px;
    --dp-row: 84px;
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.diaporama-widget *,
.diaporama-widget *::before,
.diaporama-widget *::after { box-sizing: border-box; }

/* ---------- Grand slider ---------- */
.diaporama-stage { position: relative; }
.diaporama-stage.is-loading { opacity: .6; transition: opacity .2s; }

.diaporama-container {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;               /* format demandé */
    overflow: hidden;
    border-radius: var(--dp-radius);
    background: #eef1f4;
    outline: none;
}
.diaporama-track { display: flex; height: 100%; will-change: transform; }
.diaporama-slide { flex: 0 0 100%; height: 100%; }
.diaporama-slide img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    user-select: none; -webkit-user-drag: none;
}

/* Légende — en bas à DROITE, texte blanc */
.diaporama-caption {
    position: absolute; inset: auto 0 0 0;
   padding: 44px 30px 26px 22px;
    background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
    color: #fff;
    text-align: right;
    pointer-events: none;
}
.diaporama-caption a { pointer-events: auto; }
.diaporama-titre   { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .2px; color: #fff; }
.diaporama-legenda { margin: 2px 0 0; font-size: .85rem; color: #fff; opacity: .9; }
.diaporama-copy    { display: inline-block; margin-top: 4px; font-size: .78rem; color: #fff; opacity: .8; }
.diaporama-insta   { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Flèches (grand slider uniquement) — discrètes, au survol */
.diaporama-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
    display: grid; place-items: center;
    opacity: 0; transition: opacity .2s, background .2s;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.diaporama-container:hover .diaporama-nav,
.diaporama-container:focus-within .diaporama-nav { opacity: 1; }
.diaporama-nav:hover { background: rgba(0,0,0,.55); }
.diaporama-prev { left: 10px; }
.diaporama-next { right: 10px; }
.diaporama-nav svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: none) { .diaporama-nav { display: none; } } /* tactile : swipe */

/* ---------- Barre de vignettes ---------- */
.diaporama-thumbs {
    display: flex;
    gap: var(--dp-gap);
    margin-top: 14px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                /* Firefox */
    cursor: grab;
}
.diaporama-thumbs::-webkit-scrollbar { display: none; }         /* WebKit */
.diaporama-thumbs.is-dragging      { scroll-snap-type: none; cursor: grabbing; }
.diaporama-thumbs.is-autoscrolling { scroll-snap-type: none; } /* pas de snap pendant le drift */

/* Vignette : carré 1×1 (desktop ET tablet, un seul format).
   --dp-show = min(nombre de galeries, cases visibles) → remplit la largeur sans perte d'espace ;
   au-delà, les vignettes débordent → glissement + auto-défilement. */
.diaporama-thumb {
    --dp-show: min(var(--dp-total), 5);          /* desktop : 5 */
    flex: 0 0 calc((100% - (var(--dp-show) - 1) * var(--dp-gap)) / var(--dp-show));
    scroll-snap-align: start;
    aspect-ratio: 1 / 1;
    position: relative;
    margin: 0; padding: 0; border: 0; background: none;
    border-radius: calc(var(--dp-radius) - 4px);
    overflow: hidden;
    cursor: pointer;
    opacity: 1;                                  /* galerie NON active : pleine opacité */
    transition: opacity .2s ease;
}
.diaporama-thumb-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    pointer-events: none;                 /* le clic vise le bouton */
    user-select: none; -webkit-user-drag: none;
}
/* Galerie active : légèrement atténuée pour marquer la sélection */
.diaporama-thumb.is-active { opacity: var(--dp-dim); }
.diaporama-thumbs:not(.is-dragging) .diaporama-thumb:not(.is-active):hover { opacity: var(--dp-dim); }
.diaporama-thumb-info { display: none; } /* pas de titre sur desktop/tablet */

/* ---------- Tablet : 3 vignettes, toujours 1×1 ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
    .diaporama-thumb { --dp-show: min(var(--dp-total), 3); }
}

/* ---------- Phone : vignettes verticales, titre + légende, scroll vertical ---------- */
@media (max-width: 640px) {
    /* Grand slider : le titre et la légende sont déjà affichés dans la liste des
       galeries ci-dessous → sur mobile on ne garde que le copyright sur l'image. */
    .diaporama-titre,
    .diaporama-legenda { display: none; }
    .diaporama-caption { padding: 22px 18px 14px; }

    .diaporama-thumbs {
        flex-direction: column;
        gap: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y proximity;
        cursor: default;
        max-height: calc(3 * var(--dp-row) + 2 * 10px); /* ~3 lignes puis défilement */
    }
    .diaporama-thumb {
        flex: 0 0 auto;
        width: 100%;
        aspect-ratio: auto;
        display: flex; align-items: center; gap: 14px;
        scroll-snap-align: start;
        border-radius: 12px;
    }
    .diaporama-thumb-img {
        flex: 0 0 var(--dp-row);
        width: var(--dp-row); height: var(--dp-row);
        border-radius: 12px;
    }
    .diaporama-thumb-info {
        display: flex; flex-direction: column; gap: 2px;
        min-width: 0; text-align: left;
    }
    .diaporama-thumb-titolo {
        font-weight: 600; font-size: .95rem; color: #111;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .diaporama-thumb-legenda {
        font-size: .8rem; color: #666;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
}

/* Accessibilité : respecte la réduction des animations (désactive l'auto-défilement) */
@media (prefers-reduced-motion: reduce) {
    .diaporama-track { transition: none !important; }
}