/* =============================== WRAPPER - SECTION AVEC IMAGE & TEXTE =============================== */
.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    background: linear-gradient(to bottom, #f8f9fc 92%, #840033 8%);
    padding: 25px 5%; /* Réduction du padding global */
}

/* Section Titre et Description */
.projects-header {
    text-align: center;
    max-width: 85%;
    margin-bottom: 15px; /* Réduction de l’espace sous le titre */
}

.projects-header p {
    font-size: 15px; /* Taille réduite pour éviter les textes trop longs */
    line-height: 1.5;
}

.projects-title {
    font-size: clamp(1.8rem, 2.5vw, 2rem);
    font-weight: bold;
    color: #002b5c;
    margin-bottom: 8px; /* Réduction de l’espace */
}

.projects-description,
.projects-schedule {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: #333;
    line-height: 1.5;
    margin-bottom: 5px; /* Moins d’espace entre les paragraphes */
}

.project-link {
    font-weight: bold;
    color: #0046c0;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.project-link:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* Conteneur de l'information */
.wrapper .info-container {
    display: flex;
    background-color: #f8f9fc;
    border: 1px solid #840033;
    flex-direction: row; /* Toujours en ligne sur PC */
    justify-content: space-between;
    align-items: stretch; /* Assure que l'image et le texte ont la même hauteur */
    width: 90%; /* Augmentation de la largeur */
    max-width: 85%;
    gap: 5px;
    height: 380px; /* Réduction de la hauteur */
}

/* Texte */
.wrapper .info-text {
    flex: 1;
    padding: 15px; /* Moins de padding */
    box-sizing: border-box;
    color: #333;
    font-size: 15px; /* Taille plus adaptée */
    line-height: 1.5; /* Réduction de l’espacement des lignes */
    background: #f8f9fc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    height: 100%;
}

.wrapper .info-text h2 {
    font-size: clamp(1.4rem, 2vw, 1.6rem);
    font-weight: bold;
    color: #002b5c;
    margin-bottom: 8px;
}

/* Image avec Overlay */
.wrapper .info-image {
    flex: 0 0 45%; /* Image légèrement réduite pour donner plus d'espace au texte */
    display: flex;
    align-items: stretch;
    height: 100%;
    position: relative;
    overflow: hidden;
}

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


/* 📱 Correction spécifique pour écrans ≤ 1240px */
@media (max-width: 1240px) {
    .wrapper .info-container {
        flex-direction: row; /* Conserver l’image à droite */
        align-items: stretch;
        width: 95%;
        min-height: auto; /* Permet d’adapter la hauteur au contenu */
        height: auto; /* Laisse la boîte s’étendre en fonction du texte */
    }

    .wrapper .info-text {
        width: 55%; /* Élargir le texte pour réduire la hauteur */
        font-size: 15px;
        padding: 12px; /* Ajustement du padding */
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        flex-grow: 1; /* Permet au texte d’utiliser tout l’espace disponible */
        min-height: auto; /* Ajuste la hauteur en fonction du texte */
    }

    .wrapper .info-image {
        flex: 0 0 45%;
        height: 380px; /* Ajuste automatiquement la hauteur de l’image */
    }
}

/* 📱 Correction spécifique pour iPad */
@media (max-width: 1024px) {
    .wrapper .info-container {
        flex-direction: row;
        align-items: stretch;
        width: 95%;
        min-height: auto; /* Permet d’adapter la hauteur */
        height: auto; /* Laisse la boîte s’agrandir selon le contenu */
    }

    .wrapper .info-text {
        width: 55%; /* Élargir la boîte pour éviter qu'elle devienne trop haute */
        font-size: 14px;
        padding: 12px; /* Ajustement du padding */
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        flex-grow: 1; /* Permet au texte de prendre tout l’espace disponible */
    }

    .wrapper .info-image {
        flex: 0 0 45%;
        height: auto; /* Ajuste la hauteur automatiquement */
    }
}

/* 📱 Responsive pour Mobile */
@media (max-width: 768px) {
    .wrapper .info-container {
        flex-direction: column; /* Image en haut, texte en bas */
        align-items: stretch;
        width: 95%;
        height: auto;
    }

    .wrapper .info-image {
        flex: 1;
        width: 100%;
        height: 220px; /* Réduction de la hauteur de l’image */
    }

    .wrapper .info-text {
        flex: 1;
        font-size: 14px;
        padding: 10px; /* Moins de padding */
        text-align: left; /* Alignement normal du texte */
        width: 90%; /* Plus de largeur pour réduire la hauteur */
    }
}





/* ============================= */
/*        SECTION EVENTS         */
/* ============================= */
.events-section {
    text-align: center;
    padding: 20px 5%;
    background: #f8f9fc;
}

/* TITRE PRINCIPAL */
.events-title {
    font-size: clamp(2rem, 3vw, 2.2rem);
    font-weight: bold;
    color: #002b5c;
    margin-bottom: 10px;
}

/* SOUS-TITRE */
.events-subtitle {
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: #666;
    margin-bottom: 10px;
}

/* SLIDER */
.events-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

/* ============================= */
/*        CARTES EVENTS          */
/* ============================= */
.event-card {
    width: 220px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin: 15px;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

/* IMAGE */
.event-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-bottom: 3px solid #0073e6;
}

/* TEXTE */
.event-info {
    padding: 20px;
}

.event-date {
    font-size: clamp(0.9rem, 1vw, 1rem);
    color: #555;
    font-weight: bold;
    margin-bottom: 5px;
}

.event-headline {
    font-size: clamp(1.2rem, 1.5vw, 1.4rem);
    font-weight: bold;
    color: #003366;
    margin-bottom: 10px;
}

.event-description {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: #444;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* LIEN */
.event-link {
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    font-weight: bold;
    color: #0073e6;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.event-link:hover {
    color: #ff6600;
    text-decoration: underline;
}

/* ============================= */
/*    SLICK SLIDER NAVIGATION    */
/* ============================= */
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    width: 35px; /* Réduction de la taille */
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05); /* Transparent initial */
    transition: background-color 0.4s ease-in-out, transform 0.3s ease-in-out, opacity 0.4s;
    opacity: 0.4; /* Transparence initiale */
}

/* Effet hover plus fluide */
.slick-prev:hover, .slick-next:hover {
    background-color: rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}

/* Icône flèche gauche */
.slick-prev::before {
    content: "❮";
    font-size: 16px; /* Taille réduite */
    color: #003366;
    font-weight: bold;
}

/* Icône flèche droite */
.slick-next::before {
    content: "❯";
    font-size: 16px; /* Taille réduite */
    color: #003366;
    font-weight: bold;
}

/* Position des flèches */
.slick-prev {
    left: -45px;
}

.slick-next {
    right: -45px;
}

/* ============================= */
/*        RESPONSIVE             */
/* ============================= */
@media (max-width: 1024px) {
    .events-container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .event-card {
        width: 90%;
        max-width: 350px;
    }
    
    .slick-prev {
        left: -35px;
    }
    
    .slick-next {
        right: -35px;
    }
}

@media (max-width: 768px) {
    .events-title {
        font-size: 1.8rem;
    }

    .events-subtitle {
        font-size: 1rem;
    }

    .event-info {
        padding: 15px;
    }

    .event-card img {
        height: 150px;
    }

    .slick-prev, .slick-next {
        width: 30px; /* Encore plus petit sur mobile */
        height: 30px;
    }

    .slick-prev::before, .slick-next::before {
        font-size: 14px; /* Icônes réduites sur mobile */
    }

    .slick-prev {
        left: -30px;
    }

    .slick-next {
        right: -30px;
    }
}

@media (max-width: 480px) {
    .events-container {
        flex-direction: column;
    }

    .event-card {
        width: 100%;
        max-width: 350px;
    }

    .slick-prev {
        left: -25px;
    }
    
    .slick-next {
        right: -25px;
    }
}