main {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-wrap: wrap; /* Permet le passage à la ligne si nécessaire */
    justify-content: space-between; /* Espacement entre les éléments */
    margin-bottom: 20px;
}


.box1 {
    display: flex;
    align-items: center;
    background-color: #555555;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;          /* Ajouté pour occuper toute la largeur disponible */
    box-sizing: border-box; /* Pour inclure padding et border dans la largeur */
}


.box1 img {
    width: 180px;
    height: 180px;
    margin-right: 20px; /* Espace entre l'image et le texte */
    border-radius: 50%;
}

.box1 p {
    margin: 0;
}


.box2 {
    background-color: #555555; /* Fond gris */
    border-radius: 10px; /* Bordures arrondies */
    padding: 20px; /* Espacement interne */
    width: calc(50% - 10px); /* Largeur de 50% moins l'espacement pour chaque boîte */
    box-sizing: border-box; /* Inclure le padding et la border dans le calcul de la largeur */
    margin-bottom: 20px;
}


.box2 .item {
    display: flex; /* Utilisation de flexbox pour aligner les éléments horizontalement */
    flex-direction: column; /* Empile les éléments les uns sur les autres */
    align-items: center; /* Centrer horizontalement les éléments */
    text-align: center; /* Centrer le texte */
    margin-top: 10px; /* Espacement en haut de chaque item */
}

/* Conteneur vidéo responsive pour maintenir un ratio 16:9 */
.box2 iframe {
    width: 100%; /* La vidéo occupe toute la largeur du conteneur */
    aspect-ratio: 16 / 9; /* Maintient un ratio 16:9 */
    border-radius: 10px; /* Ajoute des bords arrondis */
    border: none; /* Enlève la bordure */
    max-width: 100%; /* Empêche de dépasser les limites */
}


.box2 p {
    margin: 10px 0; /* Espacement autour du texte */
    color: #ffffff; /* Couleur du texte */
}



/* Règle spécifique pour la troisième vidéo dans .box2 */
.box2:nth-of-type(3) video {
    width: 75%; /* Ajustez la largeur selon vos besoins */
    height: auto; /* Conserver le rapport d'aspect */
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio = 9/16 = 0.5625 */
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.box3 {
    background-color: #555555;
    border-radius: 10px;
    padding: 50px;
    margin-top: 15px;
    text-align: center; /* centre le texte */
    margin-bottom: 20px;
    width: calc(100%);
}


.box3 .images,
.box3 .images2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 20px; /* espace entre les images */
    width: 100%;
    box-sizing: border-box;
    justify-items: center; /* centre les images dans chaque cellule */
}

/* Images elles-mêmes */
.box3 img {
    width: 85%;       /* occupe toute la largeur de sa cellule */
    height: auto;      /* garde le ratio */
    border-radius: 10px;
    object-fit: cover;
    max-width: 100%;   /* empêche de dépasser le conteneur */
    margin-top: 20px;
}



.box4 {
    background-color: #555555;
    border-radius: 10px;
    padding: 30px 30px 30px 30px; /* haut | droite | bas | gauche */
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%; /* comme box3 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 30px; /* espace entre les images */
    box-sizing: border-box;
}

.box4 img {
    margin-top: 20px; /* espace uniquement au-dessus des images */
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}

.box4 div {
    text-align: center;   /* centre le texte horizontalement */
}

.box4 .text-box {
    grid-column: 1 / -1;   /* prend toute la largeur */
    text-align: center;    /* centre le texte horizontalement */
}






/* Media queries pour une meilleure adaptabilité */
@media (max-width: 768px) {
    .box1.box2 .box3{
        width: calc(100%); /* Largeur de 100% moins l'espacement pour chaque boîte */
    }
    
}