/* aboutISIVC Section */
.about-section {
    margin-top: 0; /* Réduit la marge en haut de la section */
    width: 100%; /* Définit la largeur de la section à 100% de la largeur de son conteneur parent */
    height: auto; /* Permet à la hauteur de la section de s'adapter automatiquement à son contenu */
    position: relative; /* Définit le positionnement relatif pour les éléments enfants positionnés de manière absolue */
}

.about-container {
    max-height: 50vh; /* Limite la hauteur maximale du conteneur à 50% de la hauteur de la vueport (viewport height) */
    display: flex; /* Utilise Flexbox pour aligner et distribuer les éléments enfants */
    align-items: flex-start; /* Aligne les éléments enfants au début de l'axe transversal (vertical) */
    justify-content: flex-start; /* Aligne les éléments enfants au début de l'axe principal (horizontal) */
    padding: 2rem; /* Ajoute un espace intérieur de 2rem autour du contenu */
    background-size: cover; /* Assure que l'image de fond couvre tout le conteneur sans déformation */
    background-position: center; /* Centre l'image de fond horizontalement et verticalement */
    margin: 0 auto; /* Centre le conteneur horizontalement en définissant des marges automatiques à gauche et à droite */
    border-radius: 20px; /* Ajoute des coins arrondis au conteneur avec un rayon de 20px */
    background-image: url('/assets/images/ISIVC_Background-v2.jpg'); /* Définit l'image de fond du conteneur */
}

.about-content {
    position: relative; /* Utilisez position: relative pour le conteneur du texte */
    top: 20%; /* permet de positionner le texte plus bas au lieu d’être collé en haut de la page */
    text-align: left;
    margin-left: 50px; /* Décale le texte de 50px vers la droite */
}

.about-title {
    font-size: 4rem;
    color: #E87722; /* Orange dynamique */
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.about-subtitle {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 2rem;
}

.about-subtitle span {
    color: #3e5d22;
    font-weight: 600;
}

.about-buttons {
    margin-top: 3rem;
    display: flex;
    gap: 2rem;
}





.section2024 {
    display: flex; /* Utilise Flexbox pour aligner les éléments enfants */
    align-items: flex-start; /* Aligne les éléments enfants en haut */
    padding: 2rem; /* Ajoute un espace intérieur de 2rem autour du contenu */
    gap: 2rem; /* Ajoute un espace de 2rem entre les éléments enfants */
    background-color: #fff; /* Définit la couleur de fond de la section en blanc */
    margin: 1rem auto; /* Centre la section horizontalement avec des marges automatiques à gauche et à droite */
    border-radius: 10px; /* Ajoute des coins arrondis à la section avec un rayon de 10px */
/*    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ajoute une ombre portée à la section pour un effet de profondeur */
}

.section2024:nth-child(even) {
    flex-direction: row-reverse; /* Inverse la direction des éléments enfants pour les sections paires */
}

.section2024-content {
    display: flex; /* Utilise Flexbox pour aligner les éléments enfants */
    align-items: flex-start; /* Aligne les éléments enfants en haut */
    justify-content: center; /* Centre les éléments enfants horizontalement */
    gap: 1.5rem; /* Ajoute un espace de 1.5rem entre les éléments enfants */
    width: 100%; /* Assure que le conteneur occupe toute la largeur de la section */
}

.section2024-header {
    display: flex;
    flex-direction: column; /* Empile les éléments verticalement */
    align-items: center; /* Centre les éléments horizontalement */
    margin-bottom: 1rem; /* Ajoute un espace en bas du conteneur */
    
    font-size: 1.5rem; /* Définit la taille de la police du titre à 2rem */
    color: #1D5C9E; /* Couleur de texte par défaut */
}

.section2024-image {
    width: 80%; /* Largeur de l'image */
    border-radius: 10px; /* Ajoute des coins arrondis à l'image avec un rayon de 10px */
    object-fit: cover; /* Assure que l'image couvre tout le conteneur sans déformation */
}

.section2024-text {
    width: 80%; /* Largeur du texte */
}

.section2024-text h2 {
    font-size: 2rem; /* Définit la taille de la police du titre à 2rem */
    margin-bottom: 1rem; /* Ajoute une marge en bas du titre de 1rem */
    color: #1D5C9E; /* Couleur de texte par défaut */
}

.section2024-text ul {
    list-style: disc inside; /* Définit le style des puces de la liste à l'intérieur du conteneur */
}

.section2024-text .highlight {
    color: #1E3A2B; /* Définit la couleur du texte en surbrillance */
    font-weight: bold; /* Définit le poids de la police du texte en surbrillance en gras */
}



.showOff-section {
    width: 100%;
    overflow: hidden;
    position: relative;

    display: flex;
    flex-direction: column; /* Assure que les enfants sont empilés verticalement */
    align-items: center; /* Centre les enfants horizontalement */
}

.showOff-container {
    display: flex;
    width: 80%;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px; /* Espace entre les images */
    padding: 10px;
    margin-left: auto; /* Marge automatique à gauche */
    margin-right: auto; /* Marge automatique à droite */
    margin-bottom: 10px; /* Ajoute un espace en bas du conteneur */

}



.thumbnail {
    display: flex;
    gap: 10px; /* Espace entre les images */
    padding: 10px;
    width: max-content; /* Permet au conteneur de s'adapter à la largeur totale des images */
}


.item {
    min-width: 300px; /* Largeur minimale pour chaque image */
    height: 200px; /* Hauteur fixe pour chaque conteneur d'image */
}

.item img {
    width: 100%; /* Largeur de l'image à 100% du conteneur */
    height: 100%; /* Hauteur de l'image à 100% du conteneur */
    object-fit: contain; /* Affiche l'image entière sans déformation */
    border-radius: 8px; /* Optionnel : coins arrondis */
}

.arrows {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.arrows button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrows button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Media query pour adapter la taille des logos sur mobiles */
@media (max-width: 768px) {
    .partner-logo {
        max-height: 80px;
        margin-right: 1.5rem;
    }
}





.swipe-instruction {
    text-align: center;
    color: #666;
    font-style: italic;
    width: 100%;
    margin-top: 10px; /* Ajoute un espace au-dessus du texte */
}