@media screen and (max-width: 601px){
    .menu ol{
        display: none;
    }
    .menu{
        height: fit-content !important;
    }
    .responsive-nav{
        padding: 10px 10px 10px 10px;
        display: flex;
        justify-content: space-between;
    }
    .bg-logo-responsive img{
        width: 55px;
    }
    .bg-logo-responsive{
        position: fixed;
        top: 5px;
        right: 10px;
    }

    [role=button]{
        padding-top: 5px;
    }

    .offcanvas-body ul{
        display: grid;
        row-gap: 20px;
    }
    
    .accordion{
        border: none !important;
        --bs-accordion-active-bg: white !important;
        --bs-accordion-border-color: none !important;
        --bs-accordion-btn-padding-x: 0rem !important;
        --bs-accordion-btn-focus-box-shadow: none !important;
    }
    .accordion-button{
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        border: none !important;
        border-radius: 0px !important;
        cursor: pointer;
    }
    
    .accordion-body ul li a, .offcanvas-body ul li a{
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .accordion-button:not(.collapsed){
        color: black;
    }
    .accordion-button{
        width: 200px;
    }
    .accordion-button span{
        font-size: 20px;
        z-index: 1;
    }
    .offcanvas-body ul{
        font-size: 20px;
    }
    .offcanvas-body-ul{
        row-gap: 35px !important;
    }

    .offcanvas-body{
        position: relative;
    }
    .bg-logo-responsive-nav{
        position: fixed;
        bottom: 10px;
        right: 10px;
    }
    .bg-logo-responsive-nav p{
        font-weight: bold;
        font-size: 25px;
        color: rgba(191, 27, 51, 1.0);
    }
}

@media screen and (min-width: 601px){
    .responsive-nav{
        display: none;
    }
}


@media screen and (max-width: 600px){

    /* ACCUEIL */
    
    /* FIN ACCUEIL */

    /* BTN CONTACT */
    .contain-contact{
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-areas:"contain-contact-p-2"
                            "contain-contact-p-3"
                            "contain-contact-p-1"
                            "contain-contact-p-4";
        row-gap: 30px;
    }
    .contain-contact-p-2{
        grid-area: contain-contact-p-2;
    }
    .contain-contact-p-3{
        grid-area: contain-contact-p-3;
    }
    .contain-contact-p-1{
        grid-area: contain-contact-p-1;
    }
    .contain-contact-p-4{
        grid-area: contain-contact-p-4;
    }

    .bg-btn-contact button{
        padding: 10px;
        font-size: 20px;
    }
    /* FIN BTN CONTACT */

    /* A PROPOS */
    .contain-section-propos{
        padding-top: 30px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:"contain-section-propos-left"
                            "contain-section-propos-right";
    }
    .bloc-left{
        background-color: black;
        width: 60px;
        height: 60px;
        position: absolute;
        top: -50px;
        left: -50px;
        border-radius: 10px;
    }
    .bloc-right{
        position: relative;
        background-color: rgba(191, 27, 51, 1.0);
        width: 100px;
        height: 100px;
        z-index: -1;
        border-radius: 10px;
    }
    /* FIN A PROPOS */

    /* FOOTER */
    footer{
        margin-top: 0px !important;
    }
    .p-footer-responsive span:first-child{
        letter-spacing: 1px;
    }
    .p-footer-responsive span:last-child{
        letter-spacing: 1.5px;
    }
    /* FIN FOOTER */
}

/* BTN CONTACT SHOW OR NOT */
@media screen and (max-width: 800px){
    .bg-btn-contact-ordi{
        display: none;
    }
}
@media screen and (min-width: 801px){
    .bg-btn-contact-responsive{
        display: none;
    }
}
/* FIN BTN CONTACT SHOW ORNOT */

/* FOOTER */
@media screen and (min-width: 601px){
    .p-footer-responsive{
        display: none;
    }
}
@media screen and (max-width: 600px){
    .p-footer-ordi{
        display: none;
    }
}
/* FIN FOOTER */