/**
 * Florâme — Diaporama des créations florales (WPBakery)
 * Reproduit le bloc « Diaporama » de la maquette Figma.
 *
 * Tokens : Vert olive foncé #828D7D (flèches), texte blanc par défaut,
 * titre The Seasons 32px, description Montserrat Medium 16px.
 */

.flo-slider {
    --flo-olive: #828d7d;
    --flo-radius: 15px;
    --flo-nav: 70px;

    position: relative;
    width: 100%;
    max-width: 1033px;
    margin: 0 auto;
    box-sizing: border-box;
}

.flo-slider *,
.flo-slider *::before,
.flo-slider *::after {
    box-sizing: border-box;
}

/* Scène = image + flèches (les flèches se centrent verticalement sur l'image) */
.flo-slider__stage {
    position: relative;
}

.flo-slider__viewport {
    max-width: 960px;
    margin: 0 auto;
    aspect-ratio: 960 / 678;
    border-radius: var(--flo-radius);
    overflow: hidden;
}

.flo-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
}

.flo-slider__slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.flo-slider__image {
    width: 100%;
    height: 100%;
    background-color: #f5f4f2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Fonds alternés FORCÉS : slide impair → Fond A, slide pair → Fond B.
   Les 2 fichiers sont fournis dans ce dossier (bg-a.jpg / bg-b.jpg). */
.flo-slider__slide:nth-child(odd) .flo-slider__image {
    background-image: url(bg-a.jpg);
}
.flo-slider__slide:nth-child(even) .flo-slider__image {
    background-image: url(bg-b.jpg);
}

.flo-slider__image img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    margin-bottom: 0px !important;
}

/* Ajustement de la composition par-dessus le fond */
.flo-slider--fit-cover .flo-slider__image img {
    object-fit: cover;
}
.flo-slider--fit-contain .flo-slider__image {
    padding: 24px;
}
.flo-slider--fit-contain .flo-slider__image img {
    object-fit: contain;
}

/* Flèches rondes olive */
.flo-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--flo-nav);
    height: var(--flo-nav);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--flo-olive);
    color: #ffffff;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.flo-slider__nav:hover {
    background: #6f7a6a;
}

.flo-slider__nav:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

.flo-slider__nav svg {
    width: 28px;
    height: 28px;
}

.flo-slider__nav--prev { left: 0; }
.flo-slider__nav--next { right: 0; }

/* Légende */
.flo-slider__captions {
    position: relative;
    margin-top: 35px;
    padding: 0 50px;
    text-align: center;
    color: var(--flo-slider-text, #ffffff);
}

.flo-slider__caption {
    display: none;
}

.flo-slider__caption.is-active {
    display: block;
    animation: flo-slider-fade 0.5s ease both;
}

@keyframes flo-slider-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.flo-slider__title {
    margin: 0;
    font-family: "the-seasons";
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
        color: var(--flo-slider-text, #ffffff);
}

.flo-slider__desc {
    margin-top: 15px;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    max-width: 800px;
    margin: auto;
    display: inline-block;
}

/* Un seul slide : on masque les flèches */
.flo-slider[data-single="true"] .flo-slider__nav {
    display: none;
}
/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 990px) {
    .flo-slider {
        --flo-nav: 48px;
    }
    .flo-slider__nav{
      width: 34px;
      height: 34px;
    }
    .flo-slider__nav svg {
        width: 23px;
        height: 23px;
    }
    .flo-slider__nav--next{
      right: 10px;
    }
    .flo-slider__nav--prev{
      left:10px;
    }
  }
/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 790px) {
    .flo-slider {
        --flo-nav: 48px;
    }
    .flo-slider__nav{
      width: 25px;
      height: 25px;
    }
    .flo-slider__nav svg {
        width: 20px;
        height: 20px;
    }
    .flo-slider__captions {
        margin-top: 24px;
        padding: 0 16px;
    }
    .flo-slider__title {
        font-size: 24px;
    }
}