/* =====================================================================
 * JM Image Slider — frontend styles
 * ===================================================================== */

.jis {
    --jis-trans-ms: 700ms;
    --jis-ease: cubic-bezier(.4,.0,.2,1);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}
.jis *,
.jis *::before,
.jis *::after { box-sizing: border-box; }

/* Pleine largeur dans n'importe quel conteneur (row Divi, page, etc.) */
.jis,
.et_pb_section .jis {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* === Viewport === */
.jis-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
    /* La hauteur initiale est définie par aspect-ratio inline (côté PHP), */
    /* puis le JS la remplace par une hauteur en px animée. */
    transition: height var(--jis-trans-ms) var(--jis-ease);
}

.jis-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* === Slides === */
.jis-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Image : taille naturelle (largeur 100%, hauteur auto), centrée */
.jis-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    /* Pour l'overlay caption, l'image doit occuper tout le slide */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* === Transition fade === */
.jis-trans-fade .jis-slide {
    opacity: 0;
    transition: opacity var(--jis-trans-ms) var(--jis-ease);
    pointer-events: none;
    z-index: 1;
}
.jis-trans-fade .jis-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}

/* === Transition slide === */
.jis-trans-slide .jis-slide {
    transform: translateX(100%);
    transition: transform var(--jis-trans-ms) var(--jis-ease);
    z-index: 1;
}
.jis-trans-slide .jis-slide.is-active {
    transform: translateX(0);
    z-index: 2;
}
.jis-trans-slide .jis-slide.is-prev {
    transform: translateX(-100%);
}

/* === Lien par image === */
.jis-slide-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    text-decoration: none;
    cursor: pointer;
    /* Indicateur visuel discret au survol */
    transition: background-color .2s ease;
}
.jis-slide-link:hover {
    background-color: rgba(0,0,0,.05);
}
.jis-slide.jis-has-link .jis-img {
    cursor: pointer;
}

/* === Captions === */
.jis-caption {
    position: absolute;
    left: 0;
    right: 0;
    padding: clamp(12px, 2.5vw, 24px) clamp(20px, 5vw, 60px);
    color: #fff;
    font-size: clamp(.95rem, 1.4vw, 1.1rem);
    line-height: 1.5;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    z-index: 5;
    pointer-events: none;
}
.jis-cap-overlay-bottom .jis-caption {
    bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
}
.jis-cap-overlay-top .jis-caption {
    top: 0;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
}
.jis-cap-below .jis-caption {
    position: static;
    background: transparent;
    color: inherit;
    text-shadow: none;
    text-align: center;
    padding: 14px 20px;
}
.jis-cap-below .jis-slide {
    /* En mode "below", la caption fait partie du flow → la slide doit être plus haute */
    /* Géré par JS qui mesure aussi la caption pour ajuster la hauteur du viewport */
}

/* === Flèches === */
.jis-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #fff;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
.jis-arrow svg { width: 28px; height: 28px; }
.jis-arrow-prev { left: 16px; }
.jis-arrow-next { right: 16px; }
.jis-arrow:hover { transform: translateY(-50%) scale(1.08); }
.jis-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.jis-arrows-rounded .jis-arrow { background: rgba(0,0,0,.45); border-radius: 50%; }
.jis-arrows-square  .jis-arrow { background: rgba(0,0,0,.45); }
.jis-arrows-minimal .jis-arrow { text-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* === Puces === */
.jis-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 16px;
}
.jis-dot {
    background: rgba(120,120,120,.5);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, width .3s ease;
}
.jis-dots-dot .jis-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.jis-dots-line .jis-dot {
    width: 24px;
    height: 3px;
    border-radius: 2px;
}
.jis-dots-line .jis-dot.is-active { width: 40px; }
.jis-dots-square .jis-dot {
    width: 12px;
    height: 12px;
}
.jis-dot.is-active     { background: #222; }
.jis-dot:focus-visible { outline: 2px solid #222; outline-offset: 3px; }

/* === Notice vide === */
.jis-empty {
    padding: 40px;
    text-align: center;
    background: #f5f5f5;
    color: #555;
    border: 1px dashed #ccc;
    font-style: italic;
}

/* === Responsive === */
@media (max-width: 767px) {
    .jis-arrow { width: 44px; height: 44px; }
    .jis-arrow svg { width: 22px; height: 22px; }
    .jis-arrow-prev { left: 6px; }
    .jis-arrow-next { right: 6px; }
    .jis-caption { padding: 12px 16px; font-size: .92rem; }
}

/* === prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    .jis[data-reduced="1"] .jis-slide,
    .jis[data-reduced="1"] .jis-viewport {
        transition: none !important;
        animation: none !important;
    }
}