/* ============================================================
   Vertical Carousel Section — v1.4.0
   Auteur : Webananas
   Fond transparent — géré par la section Elementor parente
   ============================================================ */

.vcs-section {
    --vcs-left-width:    240px;
    --vcs-track-height:  290px;  /* 5 × 52px + 4 × 6px = 284px */
    --vcs-item-height:   58px;   /* 52px + 6px gap — sync JS */
    --vcs-content-gap:   20px;
    --vcs-radius:        35px;
    --vcs-panel-bg:      #C4D7F4;
    --vcs-transition:    .42s cubic-bezier(.25,.46,.45,.94);
    /* Item : fond et bordure toujours visibles sur les 5 slots */
    --vcs-item-border:   rgba(255,255,255,.18);
    --vcs-item-bg:       rgba(255,255,255,.07);
}

/* ── Wrapper — fond transparent ── */
.vcs-section {
    display: flex;
    align-items: stretch;
    background: transparent;
    padding: 20px 0;
    min-height: 300px;
    position: relative;
    gap: 0;
    box-sizing: border-box;
    width: 100%;
}


/* ════════════════════════════════════════
   COLONNE GAUCHE — Carrousel vertical infini
   ════════════════════════════════════════ */

.vcs-left {
    flex: 0 0 var(--vcs-left-width);
    position: relative;
    align-self: center;
}

.vcs-track-wrapper {
    height: var(--vcs-track-height);
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(
        to bottom,
        transparent     0%,
        rgba(0,0,0,.15) 4%,
        rgba(0,0,0,.6)  10%,
        black           20%,
        black           80%,
        rgba(0,0,0,.6)  90%,
        rgba(0,0,0,.15) 96%,
        transparent     100%
    );
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent     0%,
        rgba(0,0,0,.15) 4%,
        rgba(0,0,0,.6)  10%,
        black           20%,
        black           80%,
        rgba(0,0,0,.6)  90%,
        rgba(0,0,0,.15) 96%,
        transparent     100%
    );
}

.vcs-track {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform var(--vcs-transition);
    will-change: transform;
}

/* ── Item : base (hors des 5 slots visibles) ── */
.vcs-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 10px;
    cursor: pointer;
    min-height: 52px;
    user-select: none;
    /* Fond et bordure TOUJOURS visibles (même sans survol) */
    border: 1px solid var(--vcs-item-border);
    background: var(--vcs-item-bg);
    transition:
        opacity      var(--vcs-transition),
        transform    var(--vcs-transition),
        background   var(--vcs-transition),
        border-color var(--vcs-transition);
    opacity: 0;           /* invisible hors des 5 slots */
    transform: scale(.87);
}

.vcs-item:focus-visible {
    outline: 2px solid rgba(255,255,255,.5);
    outline-offset: 2px;
}

/* ── Slot central ── */
.vcs-item.is-active {
    opacity: 1;
    transform: scale(1);
    background: rgba(255,245,245,.50);   /* #fff5f5 à 50% */
    border-color: rgba(255,255,255,.50);
    box-shadow: 0 2px 14px rgba(0,0,0,.12);
}
.vcs-item.is-active:hover {
    background: rgba(255,245,245,.65);
}

/* ── Slots ±1 — fond + bordure visibles, opacité 70% ── */
.vcs-item.is-near {
    opacity: .70;
    transform: scale(.960);
    background: var(--vcs-item-bg);
    border-color: var(--vcs-item-border);
}
.vcs-item.is-near:hover {
    opacity: .85;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
}

/* ── Slots ±2 — fond + bordure visibles, opacité 30% ── */
.vcs-item.is-mid {
    opacity: .30;
    transform: scale(.920);
    background: var(--vcs-item-bg);
    border-color: var(--vcs-item-border);
}
.vcs-item.is-mid:hover {
    opacity: .50;
    background: rgba(255,255,255,.10);
}

/* ── Vignette : background-image cover, cercle ── */
.vcs-item-thumb {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,.30);
    transition: border-color var(--vcs-transition), box-shadow var(--vcs-transition);
    /* L'image est gérée en background via style inline dans le PHP */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,.15);
}

.vcs-item.is-active .vcs-item-thumb {
    border-color: rgba(255,255,255,.75);
    box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

/* On masque le <img> si on utilise background — fallback si img présente */
.vcs-item-thumb img {
    display: none;
}

.vcs-thumb-placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Titre item ── */
.vcs-item-title {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .01em;
}


/* ════════════════════════════════════════
   ZONE CONTENU : image (55%) + texte (45%)
   ════════════════════════════════════════ */

.vcs-content-area {
    flex: 1;
    display: flex;
    align-items: stretch;
    gap: var(--vcs-content-gap);
    padding-left: 20px;
    min-height: 260px;
}

/* ── Image 55% — background cover, radius 35px ── */
.vcs-center {
    flex: 0 0 calc(55% - var(--vcs-content-gap) / 2);
    position: relative;
    border-radius: var(--vcs-radius);
    overflow: hidden;
    min-height: 220px;
    background: rgba(255,255,255,.08);
}

.vcs-center-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: var(--vcs-radius);
    opacity: 0;
    transform: scale(.97);
    transition:
        opacity   var(--vcs-transition),
        transform var(--vcs-transition);
}

.vcs-center-image.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* ── Texte 45% — fond bleu clair, radius 35px ── */
.vcs-right {
    flex: 0 0 calc(45% - var(--vcs-content-gap) / 2);
    position: relative;
    min-height: 220px;
}

.vcs-panel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(14px);
    transition:
        opacity   var(--vcs-transition),
        transform var(--vcs-transition);
    pointer-events: none;
    border-radius: var(--vcs-radius);
    background: var(--vcs-panel-bg);
    padding: 32px 36px;
    box-sizing: border-box;
}

.vcs-panel.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.vcs-panel-inner {
    width: 100%;
    text-align: center;
    position: relative;
}

/* Picto — au-dessus du h3, dans le flux, centré */
.vcs-picto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border-radius: 50%;
    padding: 14px;
    margin: 0 auto 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.vcs-picto img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Titre H3 — noir #000000, hérite la typo Elementor */
.vcs-panel-title {
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px;
    line-height: 1.25;
}

/* Texte — hérite 100% des styles <p> Elementor */
.vcs-panel-text {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    font-family: inherit;
    text-align: center;
}
.vcs-panel-text p            { margin: 0 0 8px; }
.vcs-panel-text p:last-child { margin-bottom: 0; }
.vcs-panel-text ul           { margin: 0 0 8px; padding-left: 18px; text-align: left; }
.vcs-panel-text li           { margin-bottom: 4px; }
.vcs-panel-text strong,
.vcs-panel-text b            { font-weight: 600; }
.vcs-panel-text a            { text-decoration: underline; }


/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */

@media (max-width: 1024px) {
    .vcs-section {
        flex-direction: column;
        padding: 20px 0;
        gap: 20px;
    }
    .vcs-left {
        flex: 0 0 auto;
        width: 100%;
    }
    .vcs-track-wrapper {
        height: auto;
        overflow-x: auto;
        overflow-y: hidden;
        mask-image: none;
        -webkit-mask-image: none;
        /* Pas de scroll-snap CSS — centrage géré en JS pour tous les items */
        scroll-snap-type: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .vcs-track-wrapper::-webkit-scrollbar { display: none; }
    .vcs-track {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        transform: none !important;
        /* Padding de secours 50vw — remplacé précisément en JS */
        padding: 4px 50vw 10px;
        box-sizing: content-box;
    }
    .vcs-item {
        flex-shrink: 0;
        min-width: 150px;
        opacity: 1 !important;
        transform: scale(1) !important;
        /* Pas de scroll-snap-align — géré en JS */
    }
    .vcs-content-area {
        flex-direction: column;
        padding-left: 0;
        gap: 16px;
    }
    .vcs-center       { flex: 0 0 240px; width: 100%; min-height: 240px; }
    .vcs-right        { flex: 0 0 auto; min-height: auto; width: 100%; }
    .vcs-panel        { position: relative; inset: auto; display: none; opacity: 1; transform: none; }
    .vcs-panel.is-active { display: flex; }
    .vcs-center-image { display: none; }
    .vcs-center-image.is-visible { display: block; }
}

@media (max-width: 600px) {
    .vcs-panel       { padding: 24px 20px; border-radius: 20px; }
    .vcs-center      { flex: 0 0 200px; min-height: 200px; border-radius: 20px; }
    .vcs-panel-title { font-size: 16px; }
}


/* ════════════════════════════════════════
   THÈME CLAIR — .vcs-theme-light
   ════════════════════════════════════════ */

.vcs-theme-light {
    --vcs-item-border:   rgba(0,0,0,.12);
    --vcs-item-bg:       rgba(196,215,244,.25);
    --vcs-active-bg:     #C4D7F4;
    --vcs-border-active: #93b8e8;
}

/* Items thème clair */
.vcs-theme-light .vcs-item {
    background: var(--vcs-item-bg);
    border-color: var(--vcs-item-border);
}
.vcs-theme-light .vcs-item.is-active {
    background: var(--vcs-active-bg);
    border-color: var(--vcs-border-active);
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.vcs-theme-light .vcs-item.is-near {
    background: rgba(196,215,244,.20);
    border-color: rgba(0,0,0,.10);
}
.vcs-theme-light .vcs-item.is-mid {
    background: rgba(196,215,244,.12);
    border-color: rgba(0,0,0,.07);
}
.vcs-theme-light .vcs-item-title { color: #1a1a1a; }
.vcs-theme-light .vcs-item.is-active .vcs-item-title { color: #0a2a5c; font-weight: 600; }

/* Thumb thème clair */
.vcs-theme-light .vcs-item-thumb {
    border-color: rgba(0,0,0,.15);
    background-color: rgba(255,255,255,.6);
}
.vcs-theme-light .vcs-item.is-active .vcs-item-thumb {
    border-color: #93b8e8;
    box-shadow: 0 0 0 3px rgba(147,184,232,.25);
}


/* ════════════════════════════════════════
   POSITION IMAGE DROITE — .vcs-img-right
   ════════════════════════════════════════ */

.vcs-img-right .vcs-content-area {
    flex-direction: row-reverse;
}


/* ════════════════════════════════════════
   RESPONSIVE — overrides thème clair
   ════════════════════════════════════════ */

@media (max-width: 1024px) {
    .vcs-img-right .vcs-content-area {
        flex-direction: column; /* colonne en mobile, pas d'inversion */
    }
}