/* =============================================================
   CUSTOM CAROUSEL — carousel.css
   Transition : fade | Hauteur : 850px | Full-width
   ============================================================= */

/* ---------------------------------------------------------------
   Tokens
--------------------------------------------------------------- */
:root {
    --cc-height:          850px;
    --cc-arrow-size:      52px;
    --cc-dot-size:        12px;
    --cc-color-white:     #ffffff;
    --cc-color-overlay:   rgba(0, 0, 0, 0.38);
    --cc-color-accent:    #ffffff;
    --cc-transition-dur:  700ms;
    --cc-transition-ease: ease-in-out;
    --cc-focus-ring:      0 0 0 3px rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------------------------------
   Wrapper principal
--------------------------------------------------------------- */
.cc-carousel {
    position:   relative;
    width:      100vw;
    height:     var(--cc-height);
    overflow:   hidden;
    background: #111;
    margin-left: calc(50% - 50vw);
    top: 0px;
}

@media (min-width: 960px) {
    .cc-carousel {
        top: 77px;
    }
}

/* WPBakery injecte .vc_row — on neutralise le max-width sur la ligne parente */
.vc_row:has(.cc-carousel) {
    max-width:  100% !important;
    padding:    0    !important;
    margin:     0    !important;
}
.vc_column_container:has(.cc-carousel) {
    padding: 0 !important;
}

/* ---------------------------------------------------------------
   Liste de slides
--------------------------------------------------------------- */
.cc-slides {
    list-style: none;
    margin:     0;
    padding:    0;
    width:      100%;
    height:     100%;
    position:   relative;
    z-index: 10;
}

/* ---------------------------------------------------------------
   Slide individuelle
--------------------------------------------------------------- */
.cc-slide {
    position:       absolute !important;
    inset:          0 !important;
    opacity:        0 !important;
    visibility:     hidden !important;
    transition:     opacity var(--cc-transition-dur) var(--cc-transition-ease),
                    visibility 0s var(--cc-transition-dur) !important;
    pointer-events: none !important;
}

.cc-slide.is-active {
    opacity:        1 !important;
    visibility:     visible !important;
    transition:     opacity var(--cc-transition-dur) var(--cc-transition-ease),
                    visibility 0s 0s !important;
    pointer-events: auto !important;
}

/* ---------------------------------------------------------------
   Image de fond
--------------------------------------------------------------- */
.cc-slide__bg {
    position: absolute;
    inset:    0;
    overflow: hidden;
}

.cc-slide__bg img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center center;
}

/* Overlay semi-transparent pour lisibilité du texte */
.cc-slide__bg::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: var(--cc-color-overlay);
}

/* ---------------------------------------------------------------
   Contenu (titre, description, bouton)
--------------------------------------------------------------- */
.cc-slide__content {
    position:         relative;   /* au-dessus de l'overlay */
    z-index:          1;
    display:          flex;
    flex-direction:   column;
    gap: 4rem;
    align-items:      center;
    justify-content:  center;
    text-align:       center;
    height:           100%;
    padding:          2rem clamp(1.5rem, 6vw, 8rem);
    color:            var(--cc-color-white);
}

.cc-slide__title {
    margin:      0 0 1rem;
    font-size:   clamp(1.75rem, 4.5vw, 3.75rem) !important;
    font-weight: 700;
    line-height: 1 !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
    max-width:   900px;
    color: var(--cc-color-white) !important;
}

.cc-slide__content div.cc-slide__subtitle p {
    margin:      0 0 1.75rem;
    font-size:   clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    max-width:   680px;
    opacity:     0.92;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    color: var(--cc-color-white) !important;
}

.cc-slide__btn {
    display:         inline-block;
    padding:         0.75em 2.25em;
    /* border:          2px solid var(--cc-color-white); */
    border-radius:   8px;
    color:           var(--cc-color-white);
    background-color: #418509;
    font-size:       1rem;
    font-weight:     600;
    letter-spacing:  0.04em;
    text-decoration: none;
    text-transform:  uppercase;
    transition:      background 220ms ease, color 220ms ease;
}

.cc-slide__btn:hover,
.cc-slide__btn:focus-visible {
    background: var(--cc-color-white);
    color:      #111;
    outline:    none;
    box-shadow: var(--cc-focus-ring);
}

/* ---------------------------------------------------------------
   Flèches
--------------------------------------------------------------- */
.cc-arrow {
    position:         absolute;
    top:              50%;
    transform:        translateY(-50%);
    z-index:          10;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            var(--cc-arrow-size);
    height:           var(--cc-arrow-size);
    background:       rgba(0, 0, 0, 0.35);
    border:           2px solid rgba(255, 255, 255, 0.5);
    border-radius:    50%;
    color:            var(--cc-color-white);
    cursor:           pointer;
    transition:       background 200ms ease, border-color 200ms ease;
    padding:          0;
}

.cc-arrow--prev { left:  clamp(0.75rem, 2vw, 2rem); }
.cc-arrow--next { right: clamp(0.75rem, 2vw, 2rem); }

.cc-arrow:hover,
.cc-arrow:focus-visible {
    background:   rgba(0, 0, 0, 0.65);
    border-color: var(--cc-color-white);
    outline:      none;
    box-shadow:   var(--cc-focus-ring);
}

/* ---------------------------------------------------------------
   Dots
--------------------------------------------------------------- */
.cc-dots {
    position:        absolute;
    bottom:          1.5rem;
    left:            50%;
    transform:       translateX(-50%);
    z-index:         10;
    display:         flex;
    gap:             0.6rem;
    align-items:     center;
}

.cc-dot {
    width:         var(--cc-dot-size);
    height:        var(--cc-dot-size);
    padding:       0;
    border:        2px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background:    transparent;
    cursor:        pointer;
    transition:    background 200ms ease, transform 200ms ease, border-color 200ms ease;
}

.cc-dot.is-active,
.cc-dot:hover {
    background:    var(--cc-color-white);
    border-color:  var(--cc-color-white);
    transform:     scale(1.25);
}

.cc-dot:focus-visible {
    outline:    none;
    box-shadow: var(--cc-focus-ring);
}

/* ---------------------------------------------------------------
   Bouton pause/play
--------------------------------------------------------------- */
.cc-pause {
    position:        absolute;
    bottom:          1.35rem;
    right:           clamp(0.75rem, 2vw, 2rem);
    z-index:         10;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    padding:         0;
    background:      rgba(0, 0, 0, 0.35);
    border:          2px solid rgba(255, 255, 255, 0.5);
    border-radius:   50%;
    color:           var(--cc-color-white);
    cursor:          pointer;
    transition:      background 200ms ease;
}

.cc-pause:hover,
.cc-pause:focus-visible {
    background: rgba(0, 0, 0, 0.65);
    outline:    none;
    box-shadow: var(--cc-focus-ring);
}

/* ---------------------------------------------------------------
   Respect des préférences de mouvement réduit
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cc-slide {
        transition-duration: 1ms !important;
    }
    .cc-arrow,
    .cc-dot,
    .cc-slide__btn {
        transition: none !important;
    }
}

/* ---------------------------------------------------------------
   Responsive — mobile
--------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --cc-height: 560px;
    }

    .cc-arrow {
        display: none; /* sur mobile, la navigation se fait via les dots et le swipe */
    }

    .cc-slide__content {
        padding: 1.5rem 1.25rem;
    }
}

@media (max-width: 480px) {
    :root {
        --cc-height: 420px;
    }
}