* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none; /* Enlever le soulignement */
    color: inherit; /* Hérite de la couleur du parent (par exemple, noir) */
}

body {
    font-family: Arial, sans-serif;
}

header {
    width: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column; /* Pour une disposition en colonne */
    justify-content: center; /* Centrer les éléments horizontalement */
    align-items: center; /* Centrer verticalement les éléments */
    height: 140px; /* Hauteur du header plus grande pour les grands écrans */
    padding: 0 5%;
}

.texte {
    color: white;
    font-size: 40px; /* Taille du texte AutoSpotteur */
}

.nav-droite {
    display: flex;
    flex-direction: row; /* Par défaut, les éléments sont sur une ligne */
    gap: 40px; /* Espacement horizontal entre les éléments */
    flex-wrap: wrap; /* Permet de faire un retour à la ligne si nécessaire */
}

.Actu, .Events, .Photos {
    color: white;
    font-size: 25px;
}

.container {
    display: flex;
    flex-direction: row; /* Positionner les boîtes horizontalement */
    gap: 20px; /* Espacement entre les boîtes */
    flex-wrap: wrap; /* Permet de revenir à la ligne si nécessaire */
    justify-content: center;
    align-items: center;
}

.rounded-box, .rounded-box1 {
    background-color: #c5c5c5;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 300px;
    height: 400;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: right;
    margin-top: 50px;
    margin-left: 50px;
    text-decoration: none;
}

.rounded-box:hover, .rounded-box1:hover {
    background-color: #868686;
}

.rounded-box .titre1{
    margin: 15px;
    text-align: center;
    font-size: 18px;
    color: #333;
}

.rounded-box1 .titre2{
    margin: 15px;
    text-align: center;
    font-size: 18px;
    color: #333;
}

.IMG {
    margin-top: -2%;
    display: flex;
    margin-left: 55%;
    height: 400px;
    width: 620px;
}

.IMG1 {
    margin-top: 7%;
    display: flex;
    margin-left: 55%;
    height: 400px;
    width: 620px;
}

.Text1 {
    display: flex;
    margin-left: 2%;
    margin-top: -20%;
}

.DNews {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center;
    margin-top: 3%;
}

.DActu {
    font-size: 50px;
}

.DContact {
    color: grey;
    font-size: 45px;
}

.DAImage {
    height: 360px;
    width: 550px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LImage {
    display: flex;
    flex-direction: wrap;
    gap: 3%;
    width: 100%;
    align-items: center;
    margin-top: 3%;
    justify-content: center;
}

.LImage1 {
    display: flex;
    flex-direction: wrap;
    gap: 3%;
    width: 100%;
    align-items: center;
    margin-top: 3%;
    justify-content: center;
}

.LIMG1 {
    height: 290px;
    width: 445px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LImage1 {
    display: flex;
    flex-direction: wrap;
    gap: 3%;
    width: 100%;
    align-items: center;
    margin-top: 3%;
    justify-content: center;
}

.LIMG2 {
    height: 450px;
    width: 290px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LIMG3 {
    height: 450px;
    width: 335px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LIMG4 {
    height: 450px;
    width: 260px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LIMG5 {
    height: 290px;
    width: 500px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LIMG6 {
    height: 450px;
    width: 300px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LIMG7 {
    height: 290px;
    width: 445px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LIMG8 {
    height: 335px;
    width: 445px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.LIMG9 {
    height: 450px;
    width: 340px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Ajout de flexbox pour centrer les éléments */
.INFOS {
    margin-top: 120px; /* Pour éviter que le contenu soit caché sous la barre */
    width: 90%;
    max-width: 800px;
    margin-left: auto; /* Ajoute cet attribut pour centrer horizontalement */
    margin-right: auto; /* Ajoute cet attribut pour centrer horizontalement */
    justify-content: center;
    align-items: center;
}

/* Centrer les images et éviter qu'elles soient trop grandes */
.IMG, .IMG1 {
    display: block;
    margin: 20px auto;
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Optionnel : coins arrondis */
}

/* Ajustement du texte pour éviter qu'il chevauche l'image */
.Text1 {
    text-align: justify;
    background-color: white; /* Ajout d'un fond blanc pour plus de lisibilité */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}

.Title {
    margin-top: 20px;
    color: #000;
    text-align: center;
    font-size: 70px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}



@media (max-width: 1000px) {
    .texte {
        font-size: 32px; /* Réduit la taille du texte sur les petits écrans */
    }

    header {
        width: 100%;
        background-color: #000;
        display: flex;
        justify-content: center; /* Centrer la barre de navigation */
        padding: 10px 0;
        position: fixed; /* Fixer la barre en haut */
        top: 0;
        left: 0;
        z-index: 100; /* Assurer que la barre soit toujours au-dessus */
    }

    .nav-droite {
        flex-direction: column; /* Sur les petits écrans, les éléments sont empilés verticalement */
        gap: 15px; /* Espacement vertical entre les éléments */
        width: 100%; /* Pour occuper toute la largeur disponible */
        align-items: center; /* Centrer les éléments sous AutoSpotteur */
    }

    header {
        height: 230px; /* Augmenter la hauteur du header sur les petits écrans pour plus d'espace */
    }

    .container {
        display: flex;
        margin-top: 10%;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 5%;
    }

    .rounded-box, .rounded-box1 {
        margin: 1%;
        width: 90%;
    }

    .INFOS {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .Title {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 70%;
        font-size: 40px;
    }

    .IMG, .IMG1 {
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 15%;
        height: 200px;
        width: 300px;
    }

    .Text1 {
        margin-top: 5%;
    }

    .Photos {
        margin-top: 6%;
        display: flex;
        flex-direction: column; /* Positionner les boîtes horizontalement */
        gap: 20px; /* Espacement entre les boîtes */
        flex-wrap: wrap; /* Permet de revenir à la ligne si nécessaire */
        justify-content: center;
        align-items: center;
    }
}

@media (min-width: 2200px) {
    /* Sur les très grands écrans */
    body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column; /* Empile les éléments verticalement */
        justify-content: flex-start; /* Ne pas forcer un centrage vertical total */
        align-items: center; /* Centrer horizontalement */
        min-height: 100vh; /* Utiliser la hauteur de l'écran */
        overflow-x: hidden; /* Empêcher le débordement horizontal */
        box-sizing: border-box;
    }

    /* Barre de navigation en haut */
    header {
        width: 100%;
        background-color: #000;
        display: flex;
        justify-content: center; /* Centrer la barre de navigation */
        padding: 10px 0;
        position: fixed; /* Fixer la barre en haut */
        top: 0;
        left: 0;
        z-index: 100; /* Assurer que la barre soit toujours au-dessus */
    }

    .nav-droite {
        display: flex;
        justify-content: center; /* Centrer les éléments dans la barre de navigation */
        gap: 40px;
        flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    }

    /* Titre principal */
    .Title {
        font-size: 70px; /* Taille du titre */
        text-align: center; /* Centrer le texte */
        margin-top: 150px; /* Marge suffisante sous la barre de navigation pour éviter la superposition */
        width: 100%; /* Assurer que le titre occupe toute la largeur de l'écran */
        display: flex;
        justify-content: center; /* Centrer le contenu à l'intérieur du conteneur */
        margin-left: 0;
        margin-right: 0;
    }

    /* Images */
    .IMG, .IMG1 {
        width: 60%; /* Limiter la taille des images */
        max-width: 1200px; /* Empêcher l'image de dépasser 1200px */
        height: auto;
        display: block;
        margin: 20px auto; /* Centrer les images */
    }

    /* Texte sous l'image */
    .Text1 {
        font-size: 18px;
        text-align: justify;
        margin-top: 20px;
        padding: 0 10px;
        width: 60%; /* Limite la largeur du texte pour une meilleure lisibilité */
        margin-left: auto;
        margin-right: auto; /* Centrer le texte */
    }

    /* Conteneur des boîtes */
    .container {
        display: flex;
        justify-content: center; /* Centrer les boîtes */
        gap: 20px;
        flex-wrap: wrap; /* Permet de revenir à la ligne si nécessaire */
        margin-top: 5%;
    }

    /* Boîtes rondes */
    .rounded-box, .rounded-box1 {
        width: 350px;
        height: 450px;
        background-color: #c5c5c5;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-top: 5%;
        margin-left: auto; /* Centrer les boîtes */
        margin-right: auto; /* Centrer les boîtes */
    }

    /* Barres de navigation centrées */
    .nav-droite h2 {
        font-size: 20px;
        color: white;
    }

    .DNews {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: center;
        margin-top: 7%;
    }

    .LImage {
        display: flex;
        flex-direction: wrap;
        gap: 3%;
        width: 100%;
        align-items: center;
        margin-top: 10%;
        justify-content: center;
    }

    .LImage1 {
        display: flex;
        flex-direction: wrap;
        gap: 3%;
        width: 100%;
        align-items: center;
        margin-top: 10%;
        justify-content: center;
    }
}

/* Pour les écrans moyens (entre 600px et 1200px) */
@media (max-width: 1200px) {
    body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        min-height: 100vh;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    header {
        width: 100%;
        background-color: #000;
        display: flex;
        justify-content: center;
        padding: 10px 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
    }

    .nav-droite {
        display: flex;
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .Title {
        font-size: 40px;
        text-align: center;
        margin-top: 67%;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-left: 0;
        margin-right: 0;
    }

    .IMG, .IMG1 {
        width: 90%;
        max-width: 1000px;
        height: auto;
        display: block;
        margin: 20px auto;
    }

    .Text1 {
        font-size: 14px;
        text-align: justify;
        margin-top: 20px;
        padding: 0 10px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .container {
        display: flex;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 60%;
    }

    .rounded-box, .rounded-box1 {
        width: 90%;
        height: 350px;
        background-color: #c5c5c5;
        border-radius: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-top: 50px;
    }

    .DNews {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: center;
        margin-top: 65%;
    }
    
    .DActu {
        font-size: 50px;
    }

    .DContact {
        color: grey;
        font-size: 30px;
    }
    
    .DAImage {
        height: 220px;
        width: 350px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .LImage {
        display: flex;
        flex-direction: column;
        gap: 3%;
        width: 100%;
        align-items: center;
        margin-top: 60%;
        justify-content: center;
    }

    .LImage1 {
        display: flex;
        flex-direction: column;
        gap: 3%;
        width: 100%;
        align-items: center;
        margin-top: 3%;
        justify-content: center;
    }
    
    .LIMG1 {
        margin-top: 5%;
        height: 230px;
        width: 350px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
    
    .LImage1 {
        display: flex;
        flex-direction: column;
        gap: 3%;
        width: 100%;
        align-items: center;
        margin-top: 3%;
        justify-content: center;
    }
    
    .LIMG2 {
        margin-top: 5%;
        height: 350px;
        width: 225px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .EspaceLC38 {
        margin-top: 50%;
    }

    .LIMG3 {
        margin-top: 5%;
        height: 350px;
        width: 255px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .LIMG4 {
        margin-top: 5%;
        height: 355px;
        width: 200px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .LIMG5 {
        margin-top: 5%;
        height: 210px;
        width: 360px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }  

    .LIMG6 {
        margin-top: 5%;
        height: 350px;
        width: 235px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .LIMG7 {
        margin-top: 5%;
        height: 230px;
        width: 350px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .LIMG8 {
        margin-top: 5%;
        height: 265px;
        width: 350px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .LIMG9 {
        margin-top: 5%;
        height: 350px;
        width: 270px;
        border-radius: 15px;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .barre {
        transition: all 0.3s ease-in-out;
    }
    
    .nav-droite {
        transition: opacity 0.3s ease-in-out;
    }
}