@media screen and (min-width: 800px) {

    nav {
        background-color: #F2C9FB;
        padding: 35px;
        margin: 10px;
        border-radius: 30px;
        width: 500px;
        height: 27px;
        margin-right: 5vw;

    }

    .logo {
        display: flex;
        margin-right: 45vw;
        flex-direction: column;
    }

    .logo img {
        width: 200px;
        margin-top: -70px;
        margin-bottom: -70px;
    }

    .insta {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-top: 50px;
        margin-left: -100px;

    }

    .insta img {
        width: 10px;
        margin-top: 5px;
        margin-right: 5px;
    }

    .logo a {
        color: white;
        text-decoration: none;

    }

    .icon-nav {
        display: none;
    }

    .titrePricipal {
        margin-top: 200px;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        font-family: Arial, sans-serif;
        font-size: 75px;

    }



    h1 {
        margin-right: 300px;
    }

    .boite {
        width: 40%;
        flex-direction: row;
        padding: 10px;
    }

    .enginderoulan {
        margin-left: 393px;
        margin-top: 50px;
        background-color: #F2C9FB;
    }

    .biographie {
        flex-direction: row-reverse;
    }

    .section-h2 {
        width: 50%;
    }


    .calendar {
        flex-direction: row;

    }

    .ffg {
        flex-direction: row;
    }

    .competition {
        flex-direction: row;
    }



    #boutonconcours1 {
        margin-right: 300px;
    }

    #boutonconcours2 {
        margin-left: 300px;
        margin-right: 1vw;
    }

    .description {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 20px;
        margin-right: 200vw;
    }

    .table-section {
        width: 100%;
        flex-direction: row;
    }

    .table-section table {
        width: 1000px;
        margin-bottom: 5vw;
        margin-top: -4vw;
    }


    .boxMateriel {
        margin-top: -10vw;
        margin-bottom: 10vw;
        margin-left: 20vw;
    }

    .boxelements {
        margin-left: -60vw;
        margin-right: 38vw;
    }

    .logogo {

        margin-top: 100px;
        margin-left: -190%;


    }

    .logogo img {
        margin-left: 7vw;
        margin-right: 44vw;
    }

    .anneauengin>img {
        width: 100%;
    }

    .img {
        width: 250px;
    }

    .table-section {
        flex-direction: row;
        justify-content: space-between;
    }

    .iframe {
        margin-left: 370px;
    }

    .container {

        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        align-self: center;
        grid-column: auto;
        width: 95%;
        height: 60%;
    
    }

    .toutengin {

        padding-top: 10%;
        margin-left: 67px;
    
    }
    
    .toutengin img {
    
        width: 350px;
        border-radius: 8px;
    
    }





}

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

    nav {
        background-color: #F2C9FB;
        padding: 20px;
        margin: 10px;
        border-radius: 30px;
        width: 100px;
        height: 200px;
        margin-right: 5vw;
        margin-top: 250px;
        display: none;
        position: fixed;
        flex-direction: column;
    }



    nav a {
        margin-top: 5px;
        font-size: 13px;
    }

    .logo {
        display: flex;
        margin-right: 15vw;
        flex-direction: column;
    }

    .logo img {
        width: 100px;
        margin-top: -30px;
        margin-bottom: -70px;
    }

    .insta {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-top: 50px;
        margin-left: -100px;

    }

    .insta img {
        width: 10px;
        margin-top: 5px;
        margin-right: 2px;
    }

    .logo a {
        color: white;
        text-decoration: none;

    }

    .ruban {
        align-items: center;
        margin-right: 10px;
    }

    .icon-nav {
        display: block;
        width: 40px;
        margin-right: 50px;
    }

    .titrePricipal {
        margin-top: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 30px;

    }

    .boite {
        display: flex;
        flex-direction: column;
        padding: 10px;
        margin-right: 10px;
        font-size: smaller;
    }



    .boite h1 {
        font-size: 17px;
    }

    .actualités {
        display: none;
    }

    .enginderoulan {
        margin-top: 80px;
        margin-left: -150px;
        background-color: #432355;
    }

    .toutengin img{
        margin: 0%;
        width: 300px;
    }

    /* Centrage de toutes les pages engins */
    .engin-page .tout {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding: 20px;
    }


    .engin-page .description,
    .engin-page .boxdescription,
    .engin-page .boxelements {
        width: 90%;
        max-width: 500px;
        background-color: #fafafa;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .engin-page .anneauengin {
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px auto;
    }

    .engin-page .boxMateriel {
        width: 90%;
        max-width: 500px;
        background-color: #fafafa;
        padding: 20px;
        
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .engin-page .table-section {
        width: 90%;
        max-width: 500px;
        margin: 20px auto;
        border-collapse: collapse;
    }

    .engin-page .table-section th,
    .engin-page .table-section td {
        padding: 10px;
        border: 1px solid #ccc;
        text-align: center;
    }

    .engin-page .iframe {
        width: 100%;
        height: auto;
        max-width: 500px;
        border-radius: 10px;
        margin: 20px 0;
        aspect-ratio: 16/9;
    }


    .biographie {
        flex-direction: column;
        align-items: center;
    }

    .calendar {
        flex-direction: column;

    }

    h2 {
        margin-bottom: 4vw;
    }



    .boxtotal {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .ffg {
        flex-direction: column;
        align-items: center;
    }

    .imgffg {
        margin-bottom: 20px;
    }

    .competition {
        flex-direction: column;
        align-items: center;
    }

    .boutonconcours {
        align-items: center;
    }

    #boutonconcours1 {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .tout {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .description {
        display: flex;
        flex-direction: column;
    }

    .boxMateriel {
        display: flex;
        flex-direction: column;
    }

    .boxelements {
        margin-top: 100px;
    }

    .boxelements {
        max-width: 200px;
    }

    .table-section {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }


    .logogo img {
        display: none;
    }

    .anneauengin img {
        width: 80%;
    }

    .logogo {
        display: flex;
        flex-direction: column;
    }

    .anneauengin {
        display: flex;
        flex-direction: column;
        align-items: center;


    }

    .photo {
        width: 80%;
    }

    .container{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .container div {
        width: 80%;
        margin: 0;
        margin-top: 20px;
    }


}






/* css pour le ruban*/
#listeDeroulante {
    display: none;
    position: absolute;
    text-align: center;
}

.enginderoulan {
    display: flex;
    flex-direction: column;
    width: 85px;
    padding: 20px;
    border-radius: 30px;
}

.engin {
    margin: 5px;
    width: 60px;
}


.ruban {
    background-color: #432355;
    padding: 50px 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}


body {
    margin: 0;
    width: 100%;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

nav a {
    background-color: #d2afe6;
    color: black;
    text-decoration: none;
    border-radius: 30px;
    padding: 10px;
}

nav a:hover {
    background-color: white;
}

#active {
    background-color: white;
}



/* css acceuil*/



.boite {
    display: flex;
    border: solid black 2pt;
    background-color: #fafafa;
    color: #555;
}

.partitBas {
    display: flex;
    flex-direction: row;
    justify-content: end;
    padding: 35px;
    margin: 10px;
    border-radius: 30px;
    right: 300px;

}

.admin {
    margin: 1vw;
    margin-top: 1.7vw;
    align-items: center;
}

.actualités {
    font-size: 17px;
    margin-left: 1vw;
}

h1 {
    font-family: Arial, sans-serif;
    font-style: italic;
    text-align: left;

}

.ligne {
    height: 2px;
    width: 60%;
    background-color: black;
}

/* css introduction*/


.img4 {
    margin-top: 11vw;
    margin-right: 3vw;
    margin-bottom: 18vw;
}



.box {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    margin-right: 30vw;
}

.box:hover {
    transform: scale(1.1);
}



.logoengin {
    margin-right: 2vw;
}


.box-1,
.box-2,
.box-3,
.box-4 {
    width: 100%;
    background-color: #fafafa;



}

.box h3 {
    color: #555;
}


.box-1 {
    margin-left: 1vw;
    margin-bottom: 20vw;
    margin-top: 2vw;

}

.box-3 {
    margin-top: 2vw;
    margin-bottom: 20vw;
    margin-left: -1vw;

}

.box-4 {
    margin-top: 11vw;
    margin-left: -1vw;
    margin-right: 2vw;
    margin-bottom: -2px;
}

.box p {
    color: #555;
}

/* css compétitions */

.competition {
    display: flex;

}

.boutonconcours {
    padding: 10px 20px;
    background-color: #432355;
    border-radius: 5px;
    display: flex;
}

#boutonconcours1 {
    width: 100px;
}

#boutonconcours2 {
    width: 100px;
}

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

.boutonconcours:hover {
    transform: scale(1.1);
}

.ffg {
    display: flex;
    padding: 15px;
    margin-bottom: 20px;
    align-items: center;

}

.grid {
    display: flex;
    flex-direction: column;
    margin-top: 2vw;

}

.imgffg {
    width: 100%;
    margin-top: 20px;
    border-radius: 3vw;

}

.box1 {
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fafafa;
    margin-left: 15px;
    padding: 15px;
    color: #555;

}

.boxi {
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fafafa;
    margin-left: 15px;
    padding: 15px;
    color: #555;
    margin-right: 7vw;

}

.box0 {
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fafafa;
    margin-left: 15px;
    padding: 15px;
    color: #555;
    margin-right: 30vw;
}

.boxtotal {

    margin-left: 2vw;
    margin-right: 2vw;
}


/* css romont gym */


.calendar {
    display: flex;

}

.calendrier {
    margin-top: 10vw;
    margin-right: 2vw;
    margin-left: 2vw;

}

.biographie {
    display: flex;

}


.section {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fafafa;
}

.section h2 {
    font-size: 1.5rem;
    margin-right: 2vw;
}

.section-h2 {
    height: auto;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fafafa;
    margin-right: 20px;
}

.section,
.section-h2 {
    color: #555;
}

.section p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

.image-section img {
    display: flex;
    margin-top: 0.3vw;
    margin-right: 2.5vw;
    margin-left: 2vw;
    margin-bottom: 1vw;
    border-radius: 8px;

}

.toutbox {
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 2vw;
}

.groupe {
    display: flex;
    justify-content: space-between;


}

.groupe a:hover {
    transform: scale(1.1);
}

.groupe a {
    color: #6c308f;
}


/* css engin */


.tout {
    margin-top: 2vw;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-bottom: 2vw;
}

.boxdescription {
    background-color: #fafafa;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 2vw;
    margin-top: 3VW;
    margin-right: 100px;
    width: 30%;
}

.boxelements {
    background-color: #fafafa;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;

}

.table-section th,
.table-section td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

.table-section th {
    background-color: #f3f3f3;
}

.description {
    background-color: #fafafa;
    color: #555;
    width: auto;
}

.table-section {
    width: 100%;
    display: flex;


}



.anneauengin {
    width: 660px;
    display: flex;
    margin-left: 60vw;
    background-color: white;
    color: #555;
    margin-top: -8vw;
}

.anneauengin img {
    border-radius: 8px;
    margin-left: 5vw;

}


.boxelements:hover,
.boxdescription:hover {
    transform: scale(1.1);
}

.iframe iframe {
    margin-left: 400px;
}

/* css sources*/
.sources a {
    color: rgb(79, 18, 79);
    text-decoration: none;
   }
   .sources {
       color: rgb(79, 18, 79);
   }
   .page_sources a{
       text-decoration: none;
       color:#432355;
       font-size: 20px;
       margin-left: 1vw;
       padding-top: 3px;
       margin-top: 10px;
       border: 3px solid #432355;
       align-items: center;
       
   }