/* ==========================================================================
   CAROUSEL PERSONNALISÉ (MODE "FLOTTAISON SPATIALE" & 3D MANÈGE)
   ========================================================================== */

.my-custom-carousel {
    /* Écartement des flèches (0px = posées pile sur la frontière des 1000px) */
    --arrow-spread: 0px; 
    
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 2rem auto;
    overflow: visible; /* Permet aux ombres et aux cartes 3D de déborder librement */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 1.5rem 0 2.5rem 0; 
}

/* Le conteneur scénique 3D */
.my-custom-carousel .carousel-inner {
    position: relative;
    width: 100%;
    /* Ratio de la scène à 20:9 + slide à 80% de large = format final 16:9 parfait */
    aspect-ratio: 20 / 9; 
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* ÉTAT 0 (Par défaut) : La carte est planquée tout au fond au centre, invisible */
.my-custom-carousel .carousel-slide {
    position: absolute;
    top: 0;
    left: 10%; /* Centrage mathématique parfait : (100% - 80%) / 2 */
    width: 80%;
    height: 100%; 
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8);
    
    transform: translateX(0%) scale(0.5) translateZ(-200px);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    
    /* Le moteur de fluidité du manège (0.6s) */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease, z-index 0.6s;
}

.my-custom-carousel .carousel-slide a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.my-custom-carousel .carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   LES 3 POSITIONS ACTIVES (Gérées par les classes du JS)
   ========================================================================== */

/* 1. SLIDE CENTRALE (Au premier plan) */
.my-custom-carousel .carousel-slide.slide-main {
    transform: translateX(0%) scale(1) translateZ(0px);
    opacity: 1;
    z-index: 10;
    pointer-events: auto; /* Active le clic sur le lien de la carte */
}

/* 2. SLIDE DE GAUCHE (Arrière-plan) */
.my-custom-carousel .carousel-slide.slide-prev {
    transform: translateX(-32%) scale(0.82) translateZ(-80px);
    opacity: 0.6;
    z-index: 5;
    pointer-events: auto; /* Permet de cliquer dessus pour la ramener au centre */
    cursor: pointer;
}

/* 3. SLIDE DE DROITE (Arrière-plan) */
.my-custom-carousel .carousel-slide.slide-next {
    transform: translateX(32%) scale(0.82) translateZ(-80px);
    opacity: 0.6;
    z-index: 5;
    pointer-events: auto; /* Permet de cliquer dessus pour la ramener au centre */
    cursor: pointer;
}

/* ==========================================================================
   HABILLAGE DE TEXTE & BOUTONS
   ========================================================================== */

/* Encart de texte semi-transparent en bas de slide */
.my-custom-carousel .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: #fff;
    padding: 2rem 1.5rem 1rem 1.5rem;
    text-align: center;
}

.my-custom-carousel .carousel-caption h3 {
    margin: 0 0 0.5rem 0;
    font-size: clamp(1.2rem, 2.5vh, 1.8rem);
    color: #fff;
}

.my-custom-carousel .carousel-caption p {
    margin: 0;
    font-size: clamp(0.9rem, 1.5vh, 1rem);
    color: rgba(255, 255, 255, 0.9);
}

/* Boutons Précédent / Suivant */
.my-custom-carousel .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--c-brand-primary);
    color: #fff;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20; 
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease, left 0.3s, right 0.3s;
}

.my-custom-carousel .carousel-btn:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.my-custom-carousel .carousel-btn.prev { 
    left: calc(-1 * var(--arrow-spread)); 
}

.my-custom-carousel .carousel-btn.next { 
    right: calc(-1 * var(--arrow-spread)); 
}

/* Garde-fou responsive si tu passes le spread en positif un jour */
@media (max-width: 1150px) {
    .my-custom-carousel {
        --arrow-spread: 0px; 
    }
}

/* ==========================================================================
   ACCESSIBILITÉ : MASQUAGE VISUEL POUR BOTS & LECTEURS D'ÉCRANS
   ========================================================================== */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}