/* Tablet Styles (landscape and portrait) */
@media screen and (max-width: 1180px) {

    h1,
    h2 {
        font-size: 3rem;
    }


    .nomLogo {
        font-size: 2vw;
    }

    .menu {
        width: 50%;
    }

    .menu-toggle {
        display: none;
    }

    .menu-icon {
        display: block;
        cursor: pointer;
        font-size: 1.5rem;
    }

    .menu {
        display: none;
        position: absolute;
        top: 90px;
        left: 0;
        z-index: 1000;
        width: 100%;
        background-color: #f1f1f1;
        flex-direction: column;
        align-items: center;
    }

    .menu a {
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }

    .menu-toggle:checked~.menu {
        display: flex;
    }

    /* Fermer le menu lorsqu'un lien est cliqué */
    .menu-toggle:checked~.menu a:focus {
        outline: none;
    }

    .menu-toggle:checked~.menu a:active {
        background-color: #e0e0e0;
    }

    .menu-toggle:checked~.menu a:active~.menu {
        display: none;
    }

    .landing h1 {
        font-size: 5rem;
    }

    .avantage {
        width: 100%;
    }

    .containerAvantages {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .grids {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px;
        height: 400px;
    }

    .grids p {
        height: 120px;
        width: 260px;
        font-size: 1rem;
    }

    .grids img {
        object-fit: cover;
        height: 260px;
        width: 260px;
    }

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

 /*    .containerOnglets {
        width: 80%;
    }
 */
    .container {
        flex-direction: column;
        height: auto;
        max-height: none;
        padding: 20px;
    }

    .container img {
        max-width: 80%;
        height: 350px;
        margin-left: 0;
        margin-bottom: 20px;
    }
    .dd{
        flex-direction: row;
    }
    .infoCours {
        width: 100%;
    }

    .titreDesc h3 {
        font-size: 1.5rem;
    }

    .filtres {
        width: 80%;
        flex-direction: row;
    }

    .offresTarifs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:center;
        gap: 20px;
        width: 100%;
        margin: 0 auto;
        font-size: 0.9rem;
    }
    

    .filtresTarifs {
        height: 100vh;
    }
    .prix{
        font-size: 1.2rem;
        align-self: center;
    }

    .pricing {
        width: 40%;
        margin-bottom: 20px;
    }


}

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

    .grids {
        width: 90%;
        height: 260px;
    }

    .grids p {
        height: 80px;
        width: 160px;
    }

    .grids img {
        height: 160px;
        width: 160px;
    }
}

/* Phone Styles */
@media screen and (max-width: 600px) {

    h1,
    h2 {
        font-size: 2rem;
    }

    .nomLogo {
        font-size: 3vw;
    }

    .menu {
        width: 80%;
        flex-direction: column;
        align-items: center;
    }



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

    .landing h1 {
        font-size: 3rem;
    }

    .avantage {
        width: 80%;
    }

    .containerAvantages {
        margin-top: 10%;
        margin-bottom: 10%;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .grids {
        flex-direction: row;
        height: 160px;
    }

    .grids p {
        font-size: 0.8rem;
    }

    .containerCours {
        height: 150%;
    }
    .container img{
        height: 250px;
    }
    .containerOnglets {
        width: 95%;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }

    .ongletC {
        padding: 2% 4%;
        font-size: 0.8rem;
    }

    .container {
        margin-top: 10vh;
        border-radius: 0;
        font-size: 0.8rem;
    }

    .dd {
        flex-direction: row;
        margin-top: 2%;
    }

    .dd h4 {
        margin-bottom: 10px;
    }

    .titreDesc h3 {
        font-size: 1.2rem;
    }

    .filtres {
        width: 80%;
        flex-direction:row;
        height: 60px;
        margin-top: 2%;
    }

    .tarifs{
        height: 850px;
    }
    .filtre {
        width: 100%;
        margin-bottom: 10px;
    }
    .pricing{
        height: 250px;
    }
    .pricing p{
        font-size: 0.6rem;
    }
    .pricing h4 {
        font-size: 0.7rem;
        height: 15%;

    }

    .prix {
        font-size: 1.2rem;
        width: 100px;
        height: 60px;
    }


    .lieuxInfo {
        display: flex;
        flex-flow: wrap column;
        justify-content: space-around;
    }

    .lieuxInfo iframe {
        width: 95%;
    }

    .infoContainer {
        margin: 0 auto;
        width: 95%;
        margin-bottom: 5%;
        margin-top: 5%;
    }

    .lienContact {
        display: flex;
    }
}

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

    .containerCours {
        height: 150%;
    }
    .container img{
        height: 160px;
    }

    .dd{
        flex-direction: row;
    }
    .ajoutCoursCo {
        width: 90%;
    }
}