@media screen and (max-width:1220px) {
    :root {
        --header_height: 70px;
    }

    header#layout-header>#burger-menu {
        display: block;
    }

    header#layout-header>nav#navbar {
        display: none;
    }

    header#layout-header>nav>ul>li.nav-item>a.nav-link {
        width: 100%;
        display: block;
        text-align: center;
    }

    header#layout-header>#burger-menu.active~nav {
        position: absolute;
        display: flex;
        top: var(--header_height);
        flex-direction: column;
        width: 100%;
        background: var(--color_blanc);
        box-sizing: border-box;
        height: calc(100vh - var(--header_height));
        z-index: 10;
    }

    header#layout-header>#burger-menu.active~nav>ul {
        height: 100%;
        flex-direction: column;
        /* justify-content: center; */
        row-gap: 2rem;
        padding-top: 1rem;
    }
}

@media all and (max-width: 992px) {

.gap {
    gap: 1rem;
}

    /* smartphone et tablette*/
    /* class x fois */
    .container.grid2 {
        display: flex;
    }

    #bcg {
        width: unset;
        margin: 3vw;
    }
    
    .flex,
    .container,
    #content_most_grid #top {
        flex-direction: column;
    }

    .container.reverse {
        flex-direction: column-reverse;
    }

    #content_most_grid #top>div {
        width: 100%;
    }

    #choix_luxo {
        padding: 3rem var(--padding_LR);
    }

    #framed, #list {
        padding: var(--padding_LR);
    }
    
    #first_content img {
        max-width: 100%;
    }

    .balance {
        width: calc(100vw - 4rem);
    }

    .right,
    .left,
    .container.grid2 .left,
    .container.grid2 .right,
    footer .block {
        width: 100%;
    }

    .img_fulla {
        position: unset;
    }

    footer address,
    footer a,
    footer p {
        text-align: center;
    }

    #list {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: unset;
    }

    #list .left {
        grid-area: 1 / 1 / 2 / 2;
    }

    #list .right {
        grid-area: 2 / 1 / 3 / 2;
    }

    /* luxopuncture */
    #what_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #what .left .what_img {
        width: 80%;
    }
    
    /* rééquilibrage alimentaire */
    #reequilibrage-alimentaire .left,
    #reequilibrage-alimentaire .right {
        width: unset;
    }

    #bcg_food {
        height: 100%;
    }

    #bcg_food .left {
        max-width: 500px;
    }

    #contact_content {
        padding: 2.5rem;
    }

    .help>img {
        width: 80%;
    }

    /* tarifs */
    #popup_park,
    #popup_mask {
        display: block;
    }
}

@media all and (max-width:950px) {

    footer .block.flex {
        flex-direction: column;
    }

    footer .logo {
        margin-right: 0;
        margin-bottom: 8px;
    }

    #footer_top {
        display: flex;
    }
}
@media all and (max-width: 850px){
    #contact_content .contact_form  .form-identity {
        flex-direction: column;
    }
}
@media all and (min-width:768px) and (max-width:992px) {
    /* tablettes et ordinateurs */

    /* tarifs */
    #grid_tarif {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 1.5rem;
        grid-row-gap: 5rem;
        justify-items: center;
    }

    #tarif1,
    #popup_tarif1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    #tarif2,
    #popup_tarif2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    #tarif3,
    #popup_tarif3 {
        grid-area: 2 / 1 / 3 / 2;
    }

    #tarif4,
    #popup_tarif4 {
        grid-area: 2 / 2 / 3 / 3;
    }

    #tarif5 {
        grid-area: 3 / 1 / 4 / 2;
    }

    #tarif6 {
        grid-area: 3 / 2 / 4 / 3;
    }

    #tarif7,
    #popup_tarif7 {
        grid-area: 4 / 1 / 5 / 3;
    }
}

@media all and (max-width: 768px) {

    /* smartphone */
    :root {
        --header_height: 60px;
        --padding_LR: 24px;
    }

    header#layout-header {
        column-gap: unset;
        position: fixed;
        top: 0px;
        z-index: 100;
        background-color: rgba(254, 254, 254, 0.95);
        backdrop-filter: blur(2px);
        width: 100%;
    }

    .logo-name {
        font-size: clamp(1.75rem, 2.5vw, 3rem);
    }

    main {
        padding-top: var(--header_height);
    }

    p {
        text-align: left;
    }

    /* accueil */
    #content_header p:first-of-type {
        text-align: center;
    }

    #content_grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 2rem;
        grid-row-gap: 4rem;
        justify-items: center;
    }

    #content_grid img {
        min-height: 350px;
    }

    #my_msg {
        width: 100%;
    }

    .guillemet {
        width: 45px;
    }

    /* accompagnements */
    #last p {
        padding-bottom: 0;
    }

    #accompagnements button {
        font-size: 1rem;
    }

    /* Contact */
    #contact_content {
        grid-template-columns: 1fr;
        padding: var(--padding_LR);
    }

    #contact_content .contact_explain {
        grid-area: 1 / 1 / 2 / 2;
    }

    #contact_content .contact_infos {
        grid-area: 3 / 1 / 4 / 2;
    }

    #contact_content .contact_form {
        grid-area: 2 / 1 / 3 / 2;
    }
    
}

@media all and (max-width: 565px) {
    :root {
        --padding_LR: 18px;
    }

    #content_grid {
        grid-row-gap: 2rem;
    }

    #content_grid img {
        min-height: 200px;
    }

    .btn, .btn-container>a {
        padding: 0.5rem 1.75rem;
    }

    .guillemet {
        width: 35px;
    }
    
    header#layout-header>#burger-menu.active~nav>ul {
        row-gap: 1.75rem;
        padding-top: 1.75rem;
    }
}