/* Styles pour le carrousel de la section "Nos engagements" */

.engagements-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 15px auto 10px;
    display: flex;
    justify-content: center;
}

.carousel-container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-track {
    position: relative;
    min-height: 500px;
    margin-bottom: 15px; /* Réduit de 25px à 15px */
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    padding: 0px 0px;
    box-sizing: border-box;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.carousel-slide.active {
    opacity: 1;
    visibility: visible;
}

/* Nouveau layout pour slide avec image unique */
.slide-layout {
    display: flex;
    align-items: stretch;
    background-color: var(--color-white); /* fond blanc pour le bandeau */
    gap: 0px;
    width: 100%;
    height: 100%;
}

.slide-image {
    width: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px; /* Réduit de 15px à 10px */
    background-color: var(--background-color-greyblue); /* fond bleu pour le texte */
    color: var(--color-white); /* texte blanc */
    padding: 20px; /* respiration intérieure */
    border-radius: 0; /* coins carrés */
    text-align: left; /* texte justifié à gauche */
}

.slide-text p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
}

.slide-text h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px; /* Réduit de 10px à 5px */
    margin-top: 0;
    text-transform: uppercase; /* respect du style de la maquette */
    color: var(--color-white); /* titre en blanc */
}

.slide-text .subtitle {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 12px; /* Réduit de 18px à 12px */
    margin-top: 0;
    font-style: italic; /* comme sur la maquette */
}

.slide-content {
    font-size: 16px;
    line-height: 1.6;
    margin-top: 0; /* Assure qu'il n'y a pas de marge supérieure */
}

.slide-content p {
    margin-bottom: 15px;
    text-align: justify;
}

.slide-content a {
    color: #ca4020;
    text-decoration: none;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0; /* Supprime la marge supérieure car nous utilisons margin-bottom sur carousel-track */
    padding: 0px 0; /* Réduit de 15px 0 à 10px 0 */
}

.nav-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.nav-button:hover {
    transform: scale(1.2);
}

.nav-button svg {
    fill: #ca4020;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    margin: 0 6px;
    padding: 0;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dot:hover {
    transform: scale(1.2);
    background-color: rgba(202, 64, 32, 0.7); /* Version semi-transparente de #ca4020 */
}

.dot.active {
    background-color: #ca4020;
}

/* Responsive styles */
@media (max-width: 768px) {
    .engagements-carousel {
        margin: 25px auto 15px; /* Ajuste les marges pour les écrans moyens */
    }
    
    .carousel-track {
        min-height: 500px;
        margin-bottom: 20px; /* Ajuste l'espacement pour les écrans moyens */
    }
    
    .carousel-slide {
        padding: 0px 0px; /* Réduit le padding pour les écrans moyens */
    }
    
    .carousel-slide h3 {
        font-size: 20px;
        margin-bottom: 8px; /* Ajuste l'espacement pour les écrans moyens */
    }
    
    .carousel-slide .subtitle {
        font-size: 16px;
        margin-bottom: 15px; /* Ajuste l'espacement pour les écrans moyens */
    }
}

/* Styles responsifs pour les sections de proximité */
/* Styles responsives pour tablettes */
@media (max-width: 768px) {
    .engagements-carousel {
        max-width: 90%;
    }
    
    .slide-layout {
        gap: 20px;
    }
    
    .slide-image {
        width: 120px;
    }
    
    .slide-text p {
        font-size: 0.9rem;
    }
}

/* Styles responsives pour mobiles */
@media (max-width: 480px) {
    .engagements-carousel {
        margin: 20px auto 10px;
        max-width: 95%;
    }
    
    .carousel-track {
        min-height: 400px;
        margin-bottom: 15px;
    }
    
    .carousel-slide {
        padding: 15px;
    }
    
    .slide-layout {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .slide-image {
        width: 100px;
        align-self: center;
    }
    
    .slide-text h3 {
        font-size: 18px;
        margin-bottom: 6px;
    }
    
    .slide-text .subtitle {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .slide-text p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .carousel-nav {
        padding: 10px 0;
    }
    
    .dot {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }
}