/* ===============================
   YC SLIDESHOW — CONTENEUR PRINCIPAL
   =============================== */
.yc-slideshow-wrap {
    width: 100vw;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: #fff;
}

/* ===============================
   YC SLIDESHOW — CONTENEUR PRINCIPAL SLIDER
   =============================== */
.yc-slideshow {
    /* Dimensions - !important gardés car override possible de thème */
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    aspect-ratio: 2.54 / 1;
    min-height: 180px;
    
    /* Positionnement et affichage */
    position: relative;
    overflow: hidden;
    background: #fff;
}

/* ===============================
   YC SLIDESHOW — SLIDE
   =============================== */
.yc-slide {
    position: absolute;
    top: 0; 
    left: 0;
    opacity: 0;
    z-index: 0;
    transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.yc-slide-active {
    opacity: 1;
    z-index: 1;
}

/* ===============================
   YC SLIDESHOW — IMAGE
   =============================== */
.yc-slide-img {
    object-fit: cover;
    display: block;
    margin: 0;
    background: #fff;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

/* ===============================
   YC SLIDESHOW — FLÈCHES SVG CHEVRON (minimaliste, inversion dynamique)
   =============================== */
.yc-slide-prev,
.yc-slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 11;
    outline: none;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yc-slide-prev { left: 1vw; }
.yc-slide-next { right: 1vw; }

.yc-slide-prev svg, .yc-slide-next svg {
    width: 2.2rem;
    height: 2.2rem;
    display: block;
}

.yc-slide-prev svg polyline,
.yc-slide-next svg polyline {
    stroke: #fafafa;
    stroke-width: 3.2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* inversion dynamique via CSS filter (adapte à la luminosité du fond) */
    filter: drop-shadow(0 0 0.5px #222);
    opacity: 0.88;
    transition: none;
}

/* Pas d'effet hover, pas d’illumination */
.yc-slide-prev:hover svg polyline,
.yc-slide-next:hover svg polyline,
.yc-slide-prev:active svg polyline,
.yc-slide-next:active svg polyline {
    stroke: #ececec;
    opacity: 0.93;
    filter: drop-shadow(0 0 0.5px #111);
}


/* ===============================
   YC SLIDESHOW — FLÈCHE : VISIBILITÉ ADAPTATIVE
   =============================== */
.yc-slide-prev,
.yc-slide-next {
    color: #fff; /* Blanc par défaut */
    mix-blend-mode: difference;
}
.yc-slide-prev:hover,
.yc-slide-next:hover {
    opacity: 1;
    color: #4477e2;
    transition: color 0.16s, opacity 0.18s;
}

/* ===============================
   YC SLIDESHOW — POINTS DE NAVIGATION
   =============================== */
.yc-slide-dots {
    position: absolute;
    left: 50%;
    bottom: 2.2vw;
    transform: translateX(-50%);
    display: flex;
    gap: 0.6rem;
    z-index: 12;
    background: none;
    padding: 0;
    margin: 0;
    align-items: center;
}
.yc-slide-dot {
    width: 0.7rem; height: 0.7rem;
    background: #e0e0e0;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    transition: background 0.18s;
    border: none;
    opacity: 0.85;
}
.yc-slide-dot.active {
    background: #444;
    opacity: 1;
}

/* ===============================
   YC SLIDESHOW — LÉGENDE
   =============================== */
.yc-slide-caption-wrap {
    position: relative;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    z-index: 10;
    pointer-events: none;
    margin-top: 0;
}
.yc-slide-caption-wrap .yc-slide-caption {
    background: rgba(255,255,255,0.92);
    padding: 1rem 2rem;
    font-size: 1rem;
    min-width: 160px;
    text-align: right;
    border-radius: 0.5em 0 0 0;
    margin: 0 2vw 2vw 0;
    max-width: 80vw;
    pointer-events: auto;
    box-shadow: none;
}
.yc-slide .yc-slide-caption { display: none; }

/* ===============================
   YC SLIDESHOW — RESPONSIVE
   =============================== */
@media (max-width: 900px) {
    .yc-slideshow,
    .yc-slide-caption-wrap { width: 100vw !important; } /* !important nécessaire pour mobile */
    .yc-slideshow { 
        aspect-ratio: 2.54 / 1;
        min-height: 120px;
    }
    .yc-slide-caption-wrap .yc-slide-caption { font-size: 0.97rem; padding: 0.7rem 1.2rem; }
    .yc-slide-prev, .yc-slide-next { width: 1.3rem; height: 1.3rem; }
    .yc-slide-prev svg, .yc-slide-next svg { width: 1.3rem; height: 1.3rem; }
    .yc-slide-dots { bottom: 2vw; }
}