/* Spliff — Product Images + Gallery Thumbs */

.spliff-pimages {
    display: flex;
    width: 100%;
    gap: 12px;
    align-items: stretch;
}

.spliff-pimages *,
.spliff-pimages *::before,
.spliff-pimages *::after {
    box-sizing: border-box;
}

/* Direction selon position des thumbs */
.spliff-pimages--right  { flex-direction: row; }
.spliff-pimages--left   { flex-direction: row-reverse; }
.spliff-pimages--bottom { flex-direction: column; }
.spliff-pimages--top    { flex-direction: column-reverse; }

/* ─── Image principale ─── */

.spliff-pimages__main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #F4F4F4;
    aspect-ratio: 16 / 10;
    position: relative;
}

.spliff-pimages__main img,
.spliff-pimages__main-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.spliff-pimages__main-link {
    position: absolute;
    inset: 0;
    display: block;
    cursor: zoom-in;
}

.spliff-pimages__main-link .spliff-pimages__main-img {
    position: absolute;
    inset: 0;
}

/* ─── Thumbs ─── */

.spliff-pimages__thumbs {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
}

/* Layout : thumbs latéraux = colonne, thumbs haut/bas = ligne */
.spliff-pimages--right .spliff-pimages__thumbs,
.spliff-pimages--left  .spliff-pimages__thumbs {
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}
.spliff-pimages--top    .spliff-pimages__thumbs,
.spliff-pimages--bottom .spliff-pimages__thumbs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* ─── Beaucoup de thumbnails : rail défilant ───
   Le JS pose `.is-scroll` sur le conteneur UNIQUEMENT quand les thumbs
   dépassent la place disponible (hauteur de l'image principale en latéral,
   largeur du bloc en haut/bas). Les thumbs gardent alors leur taille normale
   (lisibles, cliquables) et on fait défiler, plutôt que de les tasser ou de
   les laisser déborder. En latéral, la hauteur max est calée sur l'image
   principale via un style inline posé par le JS. */
.spliff-pimages--right .spliff-pimages__thumbs.is-scroll,
.spliff-pimages--left  .spliff-pimages__thumbs.is-scroll {
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-inline-end: 4px;
}
.spliff-pimages--top    .spliff-pimages__thumbs.is-scroll,
.spliff-pimages--bottom .spliff-pimages__thumbs.is-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    padding-block-end: 4px;
}

/* Scrollbar discrète (Firefox + WebKit) */
.spliff-pimages__thumbs.is-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    -webkit-overflow-scrolling: touch;
}
.spliff-pimages__thumbs.is-scroll::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.spliff-pimages__thumbs.is-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 3px;
}
.spliff-pimages__thumbs.is-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.spliff-pimages__thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: transform 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* Bordure en overlay (n'occupe pas d'espace, ne crée pas de bande blanche
   autour de l'image). Visible uniquement quand le thumb est actif. */
.spliff-pimages__thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    pointer-events: none;
    transition: border-color 0.2s ease;
    z-index: 2;
}

.spliff-pimages__thumb:hover {
    transform: translateY(-1px);
}

/* ─── Neutralise le « hover noir » hérité du thème ───
   Astra (et d'autres thèmes) colorisent les <button> au survol/focus/active
   (fond foncé, ombre). Le thumb a un fond transparent par design : on force
   donc la transparence sur tous les états interactifs. Spécificité boostée
   (2 classes + pseudo) + !important pour l'emporter sur le CSS du thème. */
.spliff-pimages .spliff-pimages__thumb:hover,
.spliff-pimages .spliff-pimages__thumb:focus,
.spliff-pimages .spliff-pimages__thumb:active {
    background-color: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* Anneau de focus clavier conservé (accessibilité), protégé par !important
   pour ne pas être effacé par la règle ci-dessus ni par le thème. */
.spliff-pimages__thumb:focus-visible {
    outline: 2px solid #3D5BFF !important;
    outline-offset: 2px;
}

.spliff-pimages__thumb.is-active::after {
    border-color: #3D5BFF;
}

.spliff-pimages__thumb-img,
.spliff-pimages__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Vidéo dans la galerie principale ─── */

/* Couche vidéo superposée à l'image principale (affichée au clic sur la vignette vidéo). */
.spliff-pimages__main-video {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: #000;
}
.spliff-pimages__main-video[hidden] {
    display: none;
}
.spliff-pimages__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    background: #000;
}

/* Bouton play/pause sur la vidéo principale (transparent — neutralise le hover thème). */
.spliff-pimages__video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .25s ease;
}
.spliff-pimages__video-play:hover,
.spliff-pimages__video-play:focus,
.spliff-pimages__video-play:active {
    background: transparent !important;
    box-shadow: none !important;
}
/* Auto-masquage : .is-controls-hidden posé par le JS après 1s d'inactivité (lecture
 * uniquement ; visible en pause). pointer-events:none → le clic passe à la vidéo
 * (= réafficher + lecture/pause). */
.spliff-pimages__main-video.is-controls-hidden .spliff-pimages__video-play {
    opacity: 0;
    pointer-events: none;
}

.spliff-pimages__video-btn {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}
.spliff-pimages__video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.spliff-pimages__video-icon--play {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-style: solid;
    border-width: 12px 0 12px 19px;
    border-color: transparent transparent transparent #0F0F10;
}
.spliff-pimages__video-icon--pause {
    display: none;
    width: 18px;
    height: 20px;
    border-left: 6px solid #0F0F10;
    border-right: 6px solid #0F0F10;
    box-sizing: border-box;
}
.spliff-pimages__main-video.is-playing .spliff-pimages__video-icon--play { display: none; }
.spliff-pimages__main-video.is-playing .spliff-pimages__video-icon--pause { display: block; }

/* ─── Vignette vidéo : pastille play ─── */
.spliff-pimages__thumb--video {
    background: #000;
}
.spliff-pimages__thumb--video::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    z-index: 2;
    pointer-events: none;
}
.spliff-pimages__thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    margin-left: 1px;
    border-style: solid;
    border-width: 7px 0 7px 11px;
    border-color: transparent transparent transparent #FFFFFF;
    z-index: 3;
    pointer-events: none;
}

/* État vide / placeholder */
.spliff-pimages--empty .spliff-pimages__main {
    aspect-ratio: 1 / 1;
}

/* Mobile : si thumbs sur le côté, on les laisse en colonne (par défaut),
   mais on peut les passer en ligne via Elementor responsive si besoin */
@media (max-width: 480px) {
    .spliff-pimages--right .spliff-pimages__thumb,
    .spliff-pimages--left  .spliff-pimages__thumb {
        width: 60px;
        height: 60px;
    }
}