body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    height: 200rem; /* Augmenter la hauteur du body pour voir l'élément à 83.2rem */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('Jouy-le-Moutier.jpg') no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1; /* Assurez-vous que l'overlay est en dessous du contenu */
    pointer-events: none; /* Ignore les événements de souris */
}

.barremenu {
    padding: 50px;
    color: white;
    display: flex;
    justify-content: center;
    gap: 100px;
    font-size: 25px;
    font-style: normal;
    font-weight: 200;
}

a {
    text-decoration: none;
    color: white;
}

.barremenu a {
    position: relative;
    text-decoration: none;
    color: white;
    transition: color 0.3s ease-in-out; /* Transition pour la couleur du texte */
}

.barremenu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: white;
    transition: width 0.3s ease-in-out; /* Transition pour la largeur du soulignement */
}

.barremenu a:hover {
    color: white; /* Couleur du texte au survol */
}

.barremenu a:hover::after {
    width: 100%; /* Largeur du soulignement au survol */
}

.menu-container {
    position: fixed;
    top: 0;
    left: -200px; /* Initial position, menu is off-screen */
    width: 200px;
    height: 100%;
    background-color: #2974e4;
    transition: left 0.3s ease; /* Transition effect for smooth sliding */
    z-index: 1; /* Valeur de z-index pour placer le menu au-dessus des autres éléments */
    opacity: 95%;
}

.bouton-menu, .bouton-fermer {
    position: fixed;
    top: 10px;
    font-size: 40px;
    cursor: pointer;
    color: #fff;
    background: none;
    border: none;
    z-index: 1;
}

.bouton-fermer {
    left: 150px;
    display: none; /* Initialement invisible */
}

.choix {
    margin-top: 100px;
    font-size: 25px;
    color: #fff;
    padding-left: 17px;
}

a {
    text-decoration: none;
    color: white;
}

.choix a {
    position: relative;
    text-decoration: none;
    color: white;
    transition: color 0.3s ease-in-out; /* Transition pour la couleur du texte */
}

.choix a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: white;
    transition: width 0.3s ease-in-out; /* Transition pour la largeur du soulignement */
}

.choix a:hover {
    color: white; /* Couleur du texte au survol */
}

.choix a:hover::after {
    width: 100%; /* Largeur du soulignement au survol */
}

ul {
    list-style-type: none;
    text-align: left;
    margin-left: 15px;
}

#siteweb {
    position: absolute;
    border: 2px solid white;
    width: 250px;
    height: 50px;
    font-size: 20px;
    margin-top: 1rem;
    background-color: transparent;
    right: 3rem;
    color: #ffff;
    text-align: center;
    border-radius: 30px; /* Arrondir les bords */
    z-index: 1;
    cursor: pointer;
}

#title {
    color: #ffff;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#backButton {
    position: absolute;
    border: 2px solid white;
    width: 100px;
    height: 50px;
    font-size: 20px;
    margin-top: 1rem;
    margin-left:3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: transparent;
    color: #ffff;
    text-align: right;
    border-radius: 30px; /* Arrondir les bords */
    z-index: 1;
    cursor: pointer;
}

.bandeau {
    position: absolute;
    background-color: #1a427f;
    width: 100%;
    height: 55%;
    top: 43.8rem;
    left: 0px;
}

#blason {
    width: 290px;
    margin-top: 50px;
    margin-left: 50px;
}

#text {
    position: absolute;
    top: -1.5rem;
    margin-left: 37%;
    color: #fff;
    font-size: 40px;
    border: 1px solid white;
    padding: 5px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

#text2 {
    position: absolute;
    top: -1.5rem;
    margin-left: 36%;
    color: #fff;
    font-size: 40px;
    border: 1px solid white;
    padding: 5px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

#histoire {
    position: absolute;
    top: 6rem;
    margin-left: 25rem;
    color: #fff;
    font-size: 18px;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.services {
    position: absolute;
    background-color: #2257a5;
    width: 100%;
    top: 67.9rem;
    left: 0px;
    min-height: 50rem; /* Assurez-vous que l'élément a une hauteur visible */
    color: white; /* Pour que le texte soit visible sur le fond bleu */
    padding: 20px; /* Pour ajouter un peu d'espace autour du contenu */
    box-sizing: border-box; /* Pour inclure les padding et bordures dans la largeur totale */
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

#case1, #case2, #case3, #case4 {
    position: absolute;
    border: 2px solid white;
    padding: 10px;
    width: 250px;
    height: 50px;
    font-size: 20px;
    color: #ffff;
    text-align: center;
    line-height: 50px; /* Hauteur de la case pour centrer le texte */
    border-radius: 30px; /* Arrondir les bords */
}

#case1 {
    margin-left: 10%;
    top: 10rem;
}

#case2 {
    margin-left: 30%;
    top: 10rem;
}

#case3 {
    margin-left: 50%;
    top: 10rem;
}

#case4 {
    margin-left: 70%;
    top: 10rem;
}

#text2-1 {
    position: absolute;
    top: 20rem;
    margin-left: 43%;
    color: #fff;
    font-size: 30px;
    border: 1px solid white;
    padding: 5px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

#perso {
    position: absolute;
    top: 32rem;
    margin-left: 22%;
    color: #fff;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}


#equipier1 {
    position: absolute;
    top: 27rem;
    margin-left: 27%;
    color: #fff;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

#dimention {
    position: absolute;
    top: 38rem;
    margin-left: 22%;
    color: #fff;
    font-size: 20px;
    background-color: #3a6ab3;
    border-radius: 10px;
    padding: 10px;
}

#perso2 {
    position: absolute;
    top: 32rem;
    margin-left: 52%;
    color: #fff;
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#dimention2 {
    position: absolute;
    top: 38rem;
    margin-left: 52%;
    color: #fff;
    font-size: 20px;
    background-color: #3a6ab3;
    border-radius: 10px;
    padding: 10px;
}

.mission {
    position: relative; /* Changed from absolute to relative for better control */
    background-color: #3a6ab3;
    width: 100%;
    top: 109.2rem;
    padding: 20px 0; /* Adjust padding as needed */
    box-sizing: border-box;
    text-align: center;
    height: 45%;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

#text3 {
    position: relative; /* Changed from absolute to relative */
    color: #fff;
    font-size: 40px;
    border: 1px solid white;
    padding: 10px; /* Added padding for better spacing */
    display: inline-block; /* Ensures the text behaves like a block for centering */
    margin-bottom: 50px; /* Space between the title and the container */
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}


.mission-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 150px; /* Space between items, adjust as needed */
}

.mission-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px; /* Ensure items don't get too large */
}

.mission-image {
    width: 400px; /* Increased width */
    height: 350px; /* Increased height */
    border: 2px solid white;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#miss1 {
    background-image: url('technicien.webp');
}

#miss2 {
    background-image: url('bah_voilaaa_hein.webp');
}

#miss3 {
    background-image: url('ticket.webp');
}

.mission-text {
    color: white;
    font-size: 22px;
    margin-top: 15px; /* Space between image and text */
}

#titrecarte {
    color: white;
    position:absolute;
    font-size: 25px;
    top: 161rem;
    z-index: 1;
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.carte-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer horizontalement */
    margin-top: 8rem;

}

.carte {
    background-image: url('carte_num.png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border: 4px solid white;
    width: 900px;
    height: 610px;
    z-index: 10;
    margin-top: 60rem;
}

.archi{
    position: absolute;
    background-color: #557dba;
    width: 100%;
    height: 95%;
    top: 207rem;
    left: 0px
}

#text4 {
    margin-left: 34%;
    margin-right: 35%;
    color: #fff;
    font-size: 30px;
    border: 1px solid white;
    padding: 5px;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

#architecture {
    position: absolute;
    background-image: url('reseau.png');
    background-size: 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 4px solid white;
    width: 1200px !important;
    height: 527px !important;
    margin-left: 10%;
    top: 5rem; 
    margin-top: 3%;
    border-radius: 30px;
}

/*SEPARATION*/

.petiteseparation {
    width: 25%;
    height: 4px;
    background-color: white;
    position: absolute;
    margin-top: 5px;
    left: 0%
}

.petiteseparation2 {
    width: 25%;
    height: 4px;
    margin-top: 5px;
    background-color: white;
    position: absolute; /* position absolue pour placer la ligne */
    right: 0%; /* distance de 25% depuis la droite */
}

@media screen and (min-width: 1920px) {
    #title {
        color: #ffff;
        position: absolute;
        top: 35%; /* Positionne le haut du texte à 50% de la hauteur de son conteneur */
        left: 50%; /* Positionne la gauche du texte à 50% de la largeur de son conteneur */
        transform: translate(-50%, -50%); /* Centre le texte horizontalement et verticalement */
        font-size: 65px;
    }
    
    .bandeau{
        position: absolute;
        background-color: #1a427f;
        width: 100%;
        height: 40%;
        top: 59.5rem;
        left: 0px
    }
    
    #blason{
        width: 290px;
        margin-top: 50px;
        margin-left: 50px;
    }
    
    #text {
        position: absolute;
        top: -1.5rem;
        margin-left: 36%;
        color: #fff;
        font-size: 40px;
        border: 1px solid white;
        padding: 5px;
    }
    
    .services {
        position: absolute;
        background-color: #2257a5;
        width: 100%;
        top: 83.2rem;
        left: 0px;
        min-height: 50rem; /* Assurez-vous que l'élément a une hauteur visible */
        color: white; /* Pour que le texte soit visible sur le fond bleu */
        padding: 20px; /* Pour ajouter un peu d'espace autour du contenu */
        box-sizing: border-box; /* Pour inclure les padding et bordures dans la largeur totale */
    }

    .mission {
        position: relative; /* Changed from absolute to relative for better control */
        background-color: #3a6ab3;
        width: 100%;
        top: 124rem;
        padding: 20px 0; /* Adjust padding as needed */
        box-sizing: border-box;
        text-align: center;
        height: 46%;
    }

    #histoire{
        position: absolute;
        top: 5rem;
        margin-left: 25rem;
        color: #fff;
        font-size: 25px;
    }
    
    #titrecarte {
        color: white;
        position:absolute;
        font-size: 30px;
        top: 173rem;
        z-index: 1;
    }

    .carte-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrer horizontalement */
        margin-top: 20rem;
    
    }

    .archi{
        position: absolute;
        background-color: #557dba;
        width: 100%;
        height: 80%;
        top: 224rem;
        left: 0px
    }
    
    #architecture {
        position: absolute;
        background-image: url('reseau.png');
        background-size: 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border: 4px solid white;
        width: 1200px !important;
        height: 529px !important;
        margin-left: 18%;
        top: 5rem; 
        border-radius: 30px;
    }

}

@media screen and (max-width: 500px){

    .bandeau{
        position: absolute;
        background-color: #1a427f;
        width: 100%;
        height: 75%;
        top: 44rem;
        left: 0px
    }

    #text2 {
        position: absolute;
        top: 1rem;
        margin-left: 10%;
        color: #fff;
        font-size: 30px;
        border: 1px solid white;
        padding: 5px;
    }

    .services {
        position: absolute;
        background-color: #2257a5;
        width: 100%;
        top: 77rem;
        left: 0px;
        height: 35rem; /* Assurez-vous que l'élément a une hauteur visible */
        color: white; /* Pour que le texte soit visible sur le fond bleu */
        padding: 20px; /* Pour ajouter un peu d'espace autour du contenu */
        box-sizing: border-box; /* Pour inclure les padding et bordures dans la largeur totale */
    }
    #text2-1 {
        position: absolute;
        top: 33rem;
        margin-left: 25%;
        color: #fff;
        font-size: 30px;
        border: 1px solid white;
        padding: 5px;
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
    }

    #perso {
        position: absolute;
        top: 47rem;
        margin-left: 10%;
        color: #fff;
        font-size: 20px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    
    #equipier1 {
        position: absolute;
        top: 40rem;
        margin-left: 10%;
        color: #fff;
        font-size: 20px;
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
    }
    
    #dimention {
        position: absolute;
        top: 53rem;
        margin-left: 10%;
        color: #fff;
        font-size: 16px;
        z-index: 1;
    }
    
    #perso2 {
        position: absolute;
        top: 61rem;
        margin-left: 10%;
        color: #fff;
        font-size: 16px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    
    #dimention2 {
        position: absolute;
        top: 66rem;
        margin-left: 10%;
        color: #fff;
        font-size: 16px;
    }

    .mission {
        position: relative; /* Changed from absolute to relative for better control */
        background-color: #3a6ab3;
        width: 100%;
        top: 111rem;
        padding: 20px 0; /* Adjust padding as needed */
        box-sizing: border-box;
        text-align: center;
        height: 51%;
    }

    #titrecarte {
        color: white;
        position:absolute;
        font-size: 18px;
        top: 191rem;
        z-index: 1;
    }

    .carte-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrer horizontalement */
        margin-top: 33rem;
    
    }

    .archi{
        position: absolute;
        background-color: #557dba;
        width: 100%;
        height: 110%;
        top: 212rem;
        left: 0px
    }

    #text4 {
        margin-left: 4rem;
        margin-right: 5rem;
        color: #fff;
        font-size: 30px;
        border: 1px solid white;
        padding: 5px;
    }
}

@media screen and (min-width: 390px) and (max-width: 500px) {

    .choix {
        margin-top: 100px;
        font-size: 25px;
        color: #fff;
        padding-left: 15px;
    }

    .barremenu {
        padding: 50px;
        color: white;
        display: flex;
        justify-content: center;
        gap: 5px;
        font-size: 25px;
        font-style: normal;
        font-weight: 200;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('Jouy-le-Moutier.jpg') no-repeat;
        background-size: cover;
        background-position: center;
        pointer-events: none; /* Ignore les événements de souris */
    }
    
    #title {
        color: #ffff;
        position: absolute;
        top: 35%; /* Positionne le haut du texte à 50% de la hauteur de son conteneur */
        left: 50%; /* Positionne la gauche du texte à 50% de la largeur de son conteneur */
        transform: translate(-50%, -50%); /* Centre le texte horizontalement et verticalement */
        font-size: 40px;
        margin-left: 1rem;
        margin-right: -10rem;
    }
    
    .bandeau{
        position: absolute;
        background-color: #1a427f;
        width: 100%;
        height: 107%;
        top: 38rem;
        left: 0px
    }
    
    #blason{
        width: 100px;
        margin-top: 25px;
        margin-left: 15px;
    }
    
    #text {
        position: absolute;
        top: 1rem;
        margin-left: 35%;
        color: #fff;
        font-size: 18px;
        border: 1px solid white;
        padding: 5px;
    }
    
    #histoire{ 

        position: absolute;
        top: 9rem;
        margin-left: 2rem;
        margin-right: 2rem;
        color: #fff;
        font-size: 18.5px;
    }

    .services {
        position: absolute;
        background-color: #2257a5;
        width: 100%;
        top: 81rem;
        left: 0px;
        height: 188%; /* Assurez-vous que l'élément a une hauteur visible */
        color: white; /* Pour que le texte soit visible sur le fond bleu */
        padding: 20px; /* Pour ajouter un peu d'espace autour du contenu */
        box-sizing: border-box; /* Pour inclure les padding et bordures dans la largeur totale */
    }

    #text2 {
        position: absolute;
        top: 1rem;
        margin-left: 7%;
        color: #fff;
        font-size: 30px;
        border: 1px solid white;
        padding: 5px;
    }
    
    #container-case {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrer les cases horizontalement */
    }

    #case1, #case2, #case3, #case4 {
        display: flex;
        flex-direction: column;
        border: 2px solid white;
        padding: 10px;
        width: 250px;
        height: 50px;
        font-size: 23px;
        color: #fff; /* Corrigé de #ffff à #fff */
        text-align: center;
        line-height: 50px; /* Hauteur de la case pour centrer le texte */
        margin-bottom: 10px; /* Ajouter un espace entre les cases */
    }

    #case1 {
        margin-left: 3%;
        top: 10rem;
    }
    
    #case2 {
        margin-left: 3%;
        top: 16rem;
    }
    
    #case3 {
        margin-left: 3%;
        top: 22rem;
    }
    
    #case4 {
        margin-left: 3%;
        top: 28rem;
    }

    #text2-1 {
        position: absolute;
        top: 33rem;
        margin-left: 25%;
        color: #fff;
        font-size: 30px;
        border: 1px solid white;
        padding: 5px;
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
    }
    
    #perso {
        position: absolute;
        top: 47rem;
        margin-left: 10%;
        color: #fff;
        font-size: 20px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    
    #equipier1 {
        position: absolute;
        top: 40rem;
        margin-left: 10%;
        color: #fff;
        font-size: 20px;
        font-family: "Poppins", sans-serif;
        font-weight: 300;
        font-style: normal;
    }
    
    #dimention {
        position: absolute;
        top: 53rem;
        margin-left: 10%;
        color: #fff;
        font-size: 16px;
        z-index: 1;
    }
    
    #perso2 {
        position: absolute;
        top: 61rem;
        margin-left: 10%;
        color: #fff;
        font-size: 16px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
    
    #dimention2 {
        position: absolute;
        top: 66rem;
        margin-left: 10%;
        color: #fff;
        font-size: 16px;
    }

    .mission {
        position: relative; /* Changed from absolute to relative for better control */
        background-color: #3a6ab3;
        width: 100%;
        top: 157rem;
        padding: 20px 0; /* Adjust padding as needed */
        box-sizing: border-box;
        text-align: center;
        height: 53%;
    }

    .mission-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Allows wrapping on smaller screens */
        gap: 50px; /* Space between items, adjust as needed */
    }
    
    .mission-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 300px; /* Ensure items don't get too large */
    }
    
    .mission-image {
        width: 330px; /* Increased width */
        height: 270px; /* Increased height */
        border: 2px solid white;
        border-radius: 30px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    #miss1 {
        background-image: url('technicien.webp');
    }
    
    #miss2 {
        background-image: url('bah_voilaaa_hein.webp');
    }
    
    #miss3 {
        background-image: url('ticket.webp');
    }
    
    .mission-text {
        color: white;
        font-size: 25px;
        margin-top: 15px; /* Space between image and text */
    }
    
    #text3 {
        position: relative; /* Changed from absolute to relative */
        color: #fff;
        font-size: 30px;
        border: 1px solid white;
        padding: 10px; /* Added padding for better spacing */
        display: inline-block; /* Ensures the text behaves like a block for centering */
        margin-bottom: 50px; /* Space between the title and the container */
    }
    
    #titrecarte {
        color: white;
        position:absolute;
        font-size: 18px;
        top: 238rem;
        z-index: 1;
        font-size: 17px;
    }

    .carte {
        background-image: url('carte_num.png');
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        border: 4px solid white;
        width: 360px;
        height: 240px;
        z-index: 10;
        margin-top: 60rem;
    }

    .carte-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centrer horizontalement */
        margin-top: 76rem;
    }

    .archi{
        position: absolute;
        background-color: #557dba;
        width: 100%;
        height: 120%;
        top: 260rem;
        left: 0px
    }
    
    #architecture {
        position: absolute;
        left: 50%;
        top: 18rem; 
        transform: translateX(-50%) rotate(90deg);
        background-image: url('reseau.png');
        background-size: 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        border: 4px solid white;
        width: 600px !important;
        height: 270px !important;
        margin-left: 0; /* Supprimer la marge gauche */
        border-radius: 30px;
    }
    
    #text4 {
        margin-left: 2rem;
        margin-right: 2rem;
        color: #fff;
        font-size: 30px;
        border: 1px solid white;
        padding: 5px;
    }

}