:root {
    --color_blanc: rgb(255, 255, 255);
    --color_noir: rgb(17, 17, 17);
    --color_texte: rgb(50, 50, 50);
    --color_marron: rgb(140, 108, 84);
    --color_marron-hover: rgb(152, 123, 102);
    --color_or: rgb(163, 139, 91);
    --color_or-hover: rgb(173, 151, 107);
    --color_argent: rgb(173, 118, 97);
    --padding_LR: 9.3vw;
    --margin_section: 15vh;
    --swiper-navigation-size: 35px!important;
    --swiper-theme-color: rgb(140, 108, 84) !important;
    --navbar-height: 95px;
}

body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Old Standard TT', serif;
}

body.no-scroll {
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

.jvflex {
    position: fixed;
    z-index: 9999;
    top: 70px;
    left: 16px;
}

.jvflex>a {
    border-radius: 24px;
    cursor: pointer;
    display: block;
    height: 48px;
    line-height: 48px;
    opacity: .9;
    position: absolute;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    speak: none;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 48px;
    background: url("/themes/jvflex/assets/images/theme-preview.png"), #f8f6f5;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 30%);
}

.noteditable {
    pointer-events: none;
}

img {
    display: block;
    max-width: 100%;
}

.img_fit {
    object-fit: cover;
    object-position: center;
}

#scroll-top {
    appearance: none;
    border: none;
    width: 40px;
    height: 40px;
    background: rgba(163, 139, 91, 0.5);
    box-shadow: 0px 0px 5px rgb(0 0 0 / 15%);
    border-radius: 40px;
    position: fixed;
    bottom: 65px;
    right: 13.5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

#scroll-top>svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(270deg);
}

p, address {
    font-size: 1.1rem;
}

.title_or {
    font-family: 'Waterfall', cursive;
    font-style: normal;
    font-weight: 400;
    color: var(--color_or);
}

header {
    background-color: var(--color_blanc);
}

header #header-top {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
    display: grid;
    grid-template-columns: 0.75fr 1fr 0.75fr;
    align-items: center;
    height: var(--navbar-height);
    padding: 0 12px;
}

header.home {
    height: 100vh;
    position: relative;
    background-color: rgb(255 255 255 / 50%);
}

header.home .img-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    background-color: rgb(250, 250, 250);
}

header #logo {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

header #logo .logo-text {
    font-family: 'Spectral SC';
    font-style: normal;
    font-weight: 200;
    font-size: 35px;
    margin: 0;
    color: #825534;
    text-transform: uppercase;
    line-height: 1;
}

header #navbar {
    justify-self: center;
}

header #navbar ul {
    display: flex;
    padding: 0;
    list-style: none;
    gap: 1rem;
}

header #navbar ul a.nav-link {
    color: var(--color_texte);
    text-decoration: none;
    font-size: 15px;
}

header #navbar ul li.contact-link {
    display: none;
}

header #navbar ul a.nav-link:hover {
    color: var(--color_marron);
}

header #navbar ul a.nav-link.active {
    color: var(--color_marron);
    font-weight: 500;
}

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

header #header-bottom {
    height: calc(100% - var(--navbar-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 11vw;
}

header #header-bottom h1,
.page-contact h1 {
    margin: 0;
    font-size: 4.6875rem;
}

header #header-bottom h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 2.625rem;
    text-transform: uppercase;
    margin: 0.5rem 0 2rem;
}

header #header-bottom p {
    max-width: 375px;
    line-height: 30px;
    margin-bottom: 4rem;
}

header #header-bottom .button-container {
    justify-content: flex-start;
}

.black-circle {
    background-color: var(--color_noir);
    color: var(--color_blanc);
    border-radius: 150px;
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 280px;
    height: 280px;
}

header #hours {
    right: 10px;
    bottom: 160px;
    transform: translateY(280px);
}

.black-circle .title {
    font-size: 1.3125rem;
}

.black-circle .content {
    line-height: 1.75;
}

header #header-top .contact {
    justify-self: flex-end;
}

.button-container {
    display: flex;
    justify-content: center;
}

.button-marron, .btn-marron>a {
    display: flex;
    cursor: pointer;
    background-color: var(--color_or);
    padding: 20px 35px 18px;
    color: var(--color_blanc);
    text-decoration: none;
    border-radius: 250px;
    line-height: 1;
    margin: 0;
    transition: background-color 0.25s;
}

.button-marron:hover, .btn-marron>a:hover {
    background-color: var(--color_or-hover);
}

.button-marron>svg, .btn-marron>a>svg {
    margin-right: 14px;
}

header #header-bottom .btn-marron>a {
    font-family: 'Spectral SC';
    font-style: normal;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 5px;
    line-height: 0;
    padding: 20px 24px;
    align-items: center;
}

header #header-bottom .btn-marron>a::after {
    content: url("data:image/svg+xml, %3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40625 2.74219C5.17188 2.97656 5.19531 3.32812 5.40625 3.5625L8.24219 6.23438H1.51562C1.1875 6.23438 0.953125 6.49219 0.953125 6.79688V7.54688C0.953125 7.875 1.1875 8.10938 1.51562 8.10938H8.24219L5.40625 10.8047C5.19531 11.0391 5.19531 11.3906 5.40625 11.625L5.92188 12.1406C6.15625 12.3516 6.50781 12.3516 6.71875 12.1406L11.2891 7.57031C11.5 7.35938 11.5 7.00781 11.2891 6.77344L6.71875 2.22656C6.50781 2.01562 6.15625 2.01562 5.92188 2.22656L5.40625 2.74219Z' fill='white'/%3E%3C/svg%3E");
    margin-left: 11px;
}

p.button-container.btn-blanc {
    margin-top: 2rem!important;
}

.button-blanc, .btn-blanc>a {
    background-color: var(--color_blanc);
    border: 1px solid var(--color_marron);
    border-radius: 32px;
    padding: 24px 48px 22px;
    cursor: pointer;
    line-height: 0.8;
    align-items: center;
    display: flex;
    transition: background-color 0.3s, color 0.25s;
    text-decoration: none;
    color: inherit;
}

.button-blanc:hover, .btn-blanc>a:hover {
    color: #fff8f5;
    background-color: var(--color_marron-hover);
}

.button-blanc::after, .btn-blanc>a::after {
    content: url("data:image/svg+xml, %3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40625 2.74219C5.17188 2.97656 5.19531 3.32812 5.40625 3.5625L8.24219 6.23438H1.51562C1.1875 6.23438 0.953125 6.49219 0.953125 6.79688V7.54688C0.953125 7.875 1.1875 8.10938 1.51562 8.10938H8.24219L5.40625 10.8047C5.19531 11.0391 5.19531 11.3906 5.40625 11.625L5.92188 12.1406C6.15625 12.3516 6.50781 12.3516 6.71875 12.1406L11.2891 7.57031C11.5 7.35938 11.5 7.00781 11.2891 6.77344L6.71875 2.22656C6.50781 2.01562 6.15625 2.01562 5.92188 2.22656L5.40625 2.74219Z' fill='black'/%3E%3C/svg%3E");
    margin-left: 9px;
    transition: transform 0.25s;
}

.button-blanc:hover::after, .btn-blanc>a:hover::after {
    transform: translate(4px);
    content: url("data:image/svg+xml, %3Csvg width='12' height='13' viewBox='0 0 12 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40625 2.74219C5.17188 2.97656 5.19531 3.32812 5.40625 3.5625L8.24219 6.23438H1.51562C1.1875 6.23438 0.953125 6.49219 0.953125 6.79688V7.54688C0.953125 7.875 1.1875 8.10938 1.51562 8.10938H8.24219L5.40625 10.8047C5.19531 11.0391 5.19531 11.3906 5.40625 11.625L5.92188 12.1406C6.15625 12.3516 6.50781 12.3516 6.71875 12.1406L11.2891 7.57031C11.5 7.35938 11.5 7.00781 11.2891 6.77344L6.71875 2.22656C6.50781 2.01562 6.15625 2.01562 5.92188 2.22656L5.40625 2.74219Z' fill='white'/%3E%3C/svg%3E");
}

.button-blanc a {
    color: inherit;
    text-decoration: none;
}

main {
    padding: 3vh var(--padding_LR);
}

main#accueil {
    padding-bottom: 0;
}

section+section,
#cards+section {
    margin-top: var(--margin_section);
}

section h2 {
    font-size: 2.875rem;
    text-align: center;
    margin: 1rem 0;
}

div#cards {
    display: grid;
    margin-top: 18vh;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 4rem;
}

div#cards div {
    min-width: 290px;
}

div#cards div:nth-child(2), div#cards div:nth-child(3), div#cards div:nth-child(5), div#cards div:nth-child(6){
    border-left: 1.5px solid var(--color_or);
}

div#cards img {
    border-radius: 176px;
    margin: 0 auto;
}

div#cards .title_or {
    font-size: 2.875rem;
    margin: 22px 0;
    text-align: center;
    max-width: unset;
}

div#cards p {
    text-align: center;
    max-width: 300px;
    margin: 1rem auto;
}

section#bienfaits,
section#huiles,
#bienetre_top,
section#avis {
    background: radial-gradient(50% 50% at 50% 50%, rgba(173, 118, 97, 0.1) 60.42%, rgba(173, 118, 97, 0) 100%);
}

section#bienfaits p {
    text-align: center;
}

.advice {
    font-size: 2.625rem;
    margin: 30px auto;
    text-align: center;
}

section#bienfaits .text,
section#partenaires .text {
    max-width: 1000px;
    margin: 0 auto;
    line-height: 35px;
    text-align: center;
}

section.full {
    margin: var(--margin_section) calc(-1 * var(--padding_LR) + 10px) 0;
}

section.fulla, div.fulla {
    margin: var(--margin_section) calc(-1 * var(--padding_LR)) 0;
}

section#bienetre {
    margin: calc(var(--margin_section) + 50px) calc(-1 * var(--padding_LR) + 10px) 0;
}

section#massages #massages_grid,
section#bienetre #bienetre_grid {
    display: grid;
    gap: 1.25rem;
    color: var(--color_blanc);
}

section#massages #massages_grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 2rem;
}

section#massages #massages_grid div {
    height: 475px;
}

section#bienetre #bienetre_grid div {
    height: 425px;
}

section#massages #massages_grid div,
section#bienetre #bienetre_grid div {
    padding: 0.9rem;
    display: flex;
    flex-direction: column;
}

section#massages #massages_grid div.card,
section#bienetre #bienetre_grid div.card {
    transition: transform 0.4s ease;
}

section#massages #massages_grid div.card:hover,
section#bienetre #bienetre_grid div.card:hover {
    transform: translateY(-6px);
}

section#massages #massages_grid div.with_img,
section#bienetre #bienetre_grid div.with_img {
    padding: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
}

section#massages #massages_grid div.with_img img,
section#bienetre #bienetre_grid div.with_img img {
    transform: scale(1, 1);
    transition: transform 0.3s ease;
}

section#massages #massages_grid div.with_img:hover img,
section#bienetre #bienetre_grid div.with_img:hover img {
    transform: scale(1.02, 1.02);
}

section#massages #massages_grid div.popup,
section#bienetre #bienetre_grid div.popup {
    display: none;
}

section#massages #massages_grid #massages_grid_card_1 {
    grid-area: 1 / 1 / 2 / 2;
}

section#massages #massages_grid #massages_grid_card_2,
section#massages #massages_grid #massages_grid_popup_2 {
    grid-area: 1 / 2 / 2 / 3;
}

section#massages #massages_grid .massages_grid_3 {
    grid-area: 1 / 3 / 2 / 4;
}

section#massages #massages_grid #massages_grid_card_4,
section#massages #massages_grid #massages_grid_popup_4 {
    grid-area: 1 / 4 / 2 / 5;
}

section#massages #massages_grid #massages_grid_card_5,
section#massages #massages_grid #massages_grid_popup_5 {
    grid-area: 2 / 1 / 3 / 2;
}

section#massages #massages_grid .massages_grid_6 {
    grid-area: 2 / 2 / 3 / 3;
}

section#massages #massages_grid #massages_grid_card_7,
section#massages #massages_grid #massages_grid_popup_7 {
    grid-area: 2 / 3 / 3 / 4;
}

section#massages #massages_grid .massages_grid_8 {
    grid-area: 2 / 4 / 3 / 5;
}

section#massages #massages_grid .massages_grid_9 {
    grid-area: 3 / 1 / 4 / 2;
}

section#massages #massages_grid #massages_grid_card_10,
section#massages #massages_grid #massages_grid_popup_10 {
    grid-area: 3 / 2 / 4 / 3;
}

section#massages #massages_grid .massages_grid_11 {
    grid-area: 3 / 3 / 4 / 4;
}

section#massages #massages_grid #massages_grid_card_12,
section#massages #massages_grid #massages_grid_popup_12 {
    grid-area: 3 / 4 / 4 / 5;
}

.img_fulla {
    height: 100%;
    width: 100%;
    position: absolute;
}

section#massages #massages_grid h3,
section#bienetre #bienetre_grid h3{
    font-size: 1.75rem;
    font-weight: bold;
    text-align: center;
    margin: 1.5rem 0;
}

section#massages #massages_grid img,
section#bienetre #bienetre_grid img {
    margin: 0 auto;
}

section#massages #massages_grid .card img,
section#bienetre #bienetre_grid .card img {
    margin: 0 auto;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(26deg) brightness(109%) contrast(113%);
}

section#massages #massages_grid p,
section#bienetre #bienetre_grid p {
    text-align: center;
    height: 100%;
    margin-top: 0;
}

section#massages #massages_grid span,
section#bienetre #bienetre_grid span {
    display: flex;
    justify-content: center;
}

section#massages #massages_grid button,
section#bienetre #bienetre_grid button {
    appearance: none;
    border-radius: 150px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.05);
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

section#massages #massages_grid button:hover,
section#bienetre #bienetre_grid button:hover {
    background: rgba(255, 255, 255, 0.35);
    box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.20);
}

.card_marron {
    background-color: var(--color_marron);
}

.card_or {
    background-color: var(--color_or);
}

.card_gris {
    background-color: var(--color_noir);
}

.card_argent {
    background-color: var(--color_argent);
}

section#bienetre #bienetre_grid {
    margin-top: var(--margin_section);
    grid-template-columns: 1fr 1fr;
}

section#bienetre #bienetre_grid .bienetre_grid_1 {
    grid-area: 1 / 1 / 2 / 2;
}

section#bienetre #bienetre_grid #bienetre_grid_card_2,
section#bienetre #bienetre_grid #bienetre_grid_popup_2 {
    grid-area: 1 / 2 / 2 / 3;
}

section#bienetre #bienetre_grid #bienetre_grid_card_3,
section#bienetre #bienetre_grid #bienetre_grid_popup_3 {
    grid-area: 2 / 1 / 3 / 2;
}

section#bienetre #bienetre_grid .bienetre_grid_4 {
    grid-area: 2 / 2 / 3 / 3;
}

section#bienetre #bienetre_grid .bienetre_grid_5 {
    grid-area: 3 / 1 / 4 / 2;
}

section#bienetre #bienetre_grid #bienetre_grid_card_6,
section#bienetre #bienetre_grid #bienetre_grid_popup_6 {
    grid-area: 3 / 2 / 4 / 3;
}

section#bienetre .text {
    text-align: center;
    line-height: 35px;
    max-width: 450px;
    margin: 30px auto 0;
}

section#huiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10vw;
}

section#huiles .left {
    position: relative;
    min-height: 600px;
}

section#huiles .left_img {
    height: 100%;
}

section#huiles .img_circle {
    z-index: 2;
    position: absolute;
    bottom: -100px;
    right: -100px;
}

section#tarifs #tarifs_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    padding: 0;
    column-gap: 7vw;
    row-gap: 0.75rem;
    margin-top: 1.5rem;
}

section#tarifs #tarifs_grid h3 span {
    padding: 2px 0;
    background: rgba(173, 118, 97, 0.1);

    font-size: 1.3125rem;
}

section#tarifs .rappel {
    font-size: 0.875rem;
    text-align: center;
}

section#a-propos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7vw;
}

section#a-propos .left .title_or {
    text-align: left;
}

section#a-propos .right {
    position: relative;
    min-height: 665px;
}

section#a-propos #rejoindre {
    right: -70px;
    bottom: 70px;
}

section#a-propos #rejoindre p+p {
    margin-top: 0;
}

section#partenaires .partenaires_content {
    background: linear-gradient(90.08deg, rgba(173, 118, 97, 0.5) 0.07%, rgba(173, 118, 97, 0.25) 50.38%, rgba(173, 118, 97, 0.5) 100%);
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 1rem;
    gap: 1rem;
}

section#partenaires .partenairesButton {
    width: 300px;
    white-space: nowrap;
}

section#partenaires .partenairesButton .button-container {
    display: flex;
    justify-content: center;
}

section#partenaires .swiperPartenaires {
    max-width: 700px;
    height: 150px;
}

section#partenaires #partenaires_list {
    align-items: center;
    padding: 0 2rem;
}

section#partenaires #partenaires_list .swiper-slide {
    font-weight: 400;
    display: flex;
    text-decoration: none;
    color: inherit;
}

section#partenaires #partenaires_list .swiper-slide img {
    border-radius: 100px;
    width: 100px;
    height: 100px;
    margin-right: 1rem;
}

section#avis {
    position: relative;
    overflow: hidden;
    padding: 50px 0;
}

section#avis #avis_list>div {
    /* visibility: hidden; */
    text-align: center;
    /* max-width: 800px; */
    grid-row-start: 1;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section#avis #avis_list .avisQuote {
    width: 32px;
    height: 32px;
}

section#avis #avis_list p {
    width: 80%;
    font-size: 0.9875rem;
}

section#avis #avis_list .rate {
    display: flex;
    justify-content: center;
}

section#avis #avis_list .avisCircle {
    width: 55px;
    height: 55px;
}

section#avis .swiper-slide,
swiper-slide {
    height: unset;
    padding: 0 50px;
}

section#caroussel {
    margin-top: 2rem;
    margin-bottom: 0;
}

section#caroussel .carousselFooter {
    width: 100%;
    height: 300px;
}

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

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

footer {
    display: flex;
    justify-content: space-between;
    background-color: var(--color_argent);
    color: var(--color_blanc);
    font-style: normal;
    padding: 24px 20px;
    align-items: center;
}

footer a {
    text-decoration: none;
}

footer a,
footer p,
footer address {
    color: inherit;
    font-style: inherit;
}

footer p {
    margin: 0;
}

footer p+p {
    margin-top: 8px;
}

footer .footer-infos {
    display: flex;
}

footer .footer-socials {
    display: flex;
}

footer .footer-socials a {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px;
}

footer .footer-socials a:hover img {
    filter: brightness(0) saturate(100%) invert(91%) sepia(5%) saturate(574%) hue-rotate(327deg) brightness(104%) contrast(83%);
}

footer .footer-socials a+a {
    border-left: none;
}

footer .footer-infos img {
    margin-right: 0.8rem;
}

@media all and (min-width:1440px) {
    section {
        max-width: 1440px;
        margin: var(--margin_section) auto 0;
    }

    section#massages #massages_grid,
    section#bienetre #bienetre_grid {
        max-width: 1500px;
        /* margin:0 auto; */
    }

    section#massages,
    section#bienetre {
        margin: var(--margin_section) auto 0;
    }

    section#partenaires,
    section#caroussel {
        max-width: unset;
    }

    section#partenaires .swiperPartenaires {
        max-width: 1300px;
    }
}

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

    div#cards,
    section#massages #massages_grid {
        grid-template-columns: repeat(2, 1fr);
    }


div#cards div:nth-child(2), div#cards div:nth-child(4), div#cards div:nth-child(6){
    border-left: 1.5px solid var(--color_or);
}

div#cards div:nth-child(3), div#cards div:nth-child(5) {
    border-left:none;
}

    /* section#bienetre #bienetre_grid div {
        height: 550px;
    } */

    section#massages #massages_grid #massages_grid_card_1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    section#massages #massages_grid #massages_grid_card_2,
    section#massages #massages_grid #massages_grid_popup_2 {
        grid-area: 1 / 2 / 2 / 3;
    }

    section#massages #massages_grid .massages_grid_3 {
        grid-area: 2 / 2 / 3 / 3;
    }

    section#massages #massages_grid #massages_grid_card_4,
    section#massages #massages_grid #massages_grid_popup_4 {
        grid-area: 2 / 1 / 3 / 2;
    }

    section#massages #massages_grid #massages_grid_card_5,
    section#massages #massages_grid #massages_grid_popup_5 {
        grid-area: 3 / 2 / 4 / 3;
    }

    section#massages #massages_grid .massages_grid_6 {
        grid-area: 3 / 1 / 4 / 2;
    }

    section#massages #massages_grid #massages_grid_card_7,
    section#massages #massages_grid #massages_grid_popup_7 {
        grid-area: 4 / 1 / 5 / 2;
    }

    section#massages #massages_grid .massages_grid_8 {
        grid-area: 4 / 2 / 5 / 3;
    }

    section#massages #massages_grid .massages_grid_9 {
        grid-area: 5 / 1 / 6 / 2;
    }

    section#massages #massages_grid #massages_grid_card_10,
    section#massages #massages_grid #massages_grid_popup_10 {
        grid-area: 5 / 2 / 6 / 3;
    }

    section#massages #massages_grid .massages_grid_11 {
        grid-area: 6 / 2 / 7 / 3;
    }

    section#massages #massages_grid #massages_grid_card_12,
    section#massages #massages_grid #massages_grid_popup_12 {
        grid-area: 6 / 1 / 7 / 2;
    }

    section#huiles .left>div>img {
        position: relative;
        min-height: 600px;
    }

    section#huiles .img_circle {
        bottom: -55px;
        right: -60px;
        width: 80px;
        height: 80px;
    }
}

@media all and (max-width: 975px) {
    :root {
        --swiper-navigation-size: 24px!important;
    }
    header #header-top {
        display: flex;
        justify-content: space-between;
        gap: 15px;
    }

    header #navbar,
    header #header-top .contact {
        display: none;
    }

    header#layout-header>#header-top>#burger-menu {
        display: block;
        justify-self: flex-end;
        width: 2.25rem;
        height: 1.5rem;
        cursor: pointer;
        position: relative;
        appearance: none;
        border: none;
        background: none;
        box-sizing: border-box;
        padding: 0;
        flex-shrink: 0;
    }

    header#layout-header>#header-top>#burger-menu span {
        width: 100%;
        height: 4px;
        background-color: var(--color_marron);
        display: block;
        transition: background-color 0.5s ease-in-out;
    }

    header#layout-header>#header-top>#burger-menu span:nth-child(1) {
        transform: translateY(-10px);
    }

    header#layout-header>#header-top>#burger-menu span:nth-child(3) {
        transform: translateY(10px);
    }

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

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

    header#layout-header>#header-top>nav>ul>li.nav-item>a.nav-link {
        font-size: 1.25rem;
    }

    header#layout-header>#header-top>#burger-menu.active~nav>ul {
        height: 100%;
        flex-direction: column;
        justify-content: center;
    }

    header #navbar ul {
        gap: 2.5rem;
    }

    header #navbar ul li.contact-link {
        display: block;
    }

    header #header-bottom p {
        margin-bottom: 2rem;
    }
}

@media all and (max-height:500px) {
    header #header-bottom h1 {
        font-size: 3.5rem;
    }

    header #header-bottom h2 {
        display: none;
    }

    main#accueil {
        padding-top: 168px;
    }
}

@media all and (max-width:765px) and (min-height:400px) {

    header.home {
        min-height: 100vh;
        height: unset;
        padding-bottom: 1rem;
    }

    header #hours {
        position: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        transform: unset;
    }
    
    div#cards {
        margin-top: 5vh;
    }
}

@media all and (max-width: 765px) {
    :root {
        --margin_section: 8vh;
        --padding_LR: 5vw;
    }

    section h2 {
        font-size: 2.675rem;
    }

    div#cards {
        grid-template-columns: 1fr;
        
    }

    div#cards>div{
        border-left: none!important;
    }

    #navbar,
    header #header-top .contact {
        display: none;
    }

    header #header-bottom {
        margin: 0 3vw;
    }

    div#cards {
        row-gap: 2rem;
    }

    .advice {
        font-size: 2.25rem;
    }

    section#tarifs #tarifs_grid,
    section#bienetre #bienetre_grid,
    section#a-propos {
        grid-template-columns: 1fr;
    }

    section#bienetre #bienetre_grid .bienetre_grid_1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    section#bienetre #bienetre_grid #bienetre_grid_card_2,
    section#bienetre #bienetre_grid #bienetre_grid_popup_2 {
        grid-area: 2 / 1 / 3 / 2;
    }

    section#bienetre #bienetre_grid #bienetre_grid_card_3,
    section#bienetre #bienetre_grid #bienetre_grid_popup_3 {
        grid-area: 4 / 1 / 5 / 2;
    }

    section#bienetre #bienetre_grid .bienetre_grid_4 {
        grid-area: 3 / 1 / 4 / 2;
    }

    section#bienetre #bienetre_grid .bienetre_grid_5 {
        grid-area: 5 / 1 / 6 / 2;
    }

    section#bienetre #bienetre_grid #bienetre_grid_card_6,
    section#bienetre #bienetre_grid #bienetre_grid_popup_6 {
        grid-area: 6 / 1 / 7 / 2;
    }

    section#huiles .left>div>img,
    section#huiles .left {
        height: 350px;
        min-height: unset;
    }

    section#huiles .img_circle {
        bottom: -45px;
        right: -25px;
        width: 60px;
        height: 60px;
    }

    section#partenaires .partenaires_content {
        flex-direction: column;
    }

    section#partenaires .swiperPartenaires {
        max-width: 100%;
    }

    section#partenaires #partenaires_list {
        padding: 0;
    }

    section#a-propos #rejoindre {
        right: 0;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
    }

    section#avis {
        padding-top: 0;
    }

    section#huiles {
        display: flex;
        flex-direction: column;
    }

    section#huiles .img_fulla {
        position: unset;
        height: 35vh;
    }

    section#massages #massages_grid .img_fulla,
    #bienetre #bienetre_grid .img_fulla {
        position: unset;
    }

    section#a-propos .img_fulla {
        position: unset;
        height: 350px;
    }

    footer {
        flex-direction: column;
        gap: 1.5rem;
    }

    footer .footer-legals {
        text-align: center;
    }
}

@media all and (max-width: 565px) {
    :root {
        --swiper-navigation-size: 20px!important;
    }
    header #logo .logo-text {
        font-size: 30px;
    }
    
    section#massages #massages_grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }

    section#massages #massages_grid #massages_grid_card_1 {
        grid-area: 1 / 1 / 2 / 2;
    }

    section#massages #massages_grid #massages_grid_card_2,
    section#massages #massages_grid #massages_grid_popup_2 {
        grid-area: 2 / 1 / 3 / 2;
    }

    section#massages #massages_grid .massages_grid_3 {
        grid-area: 3 / 1 / 4 / 2;
    }

    section#massages #massages_grid #massages_grid_card_4,
    section#massages #massages_grid #massages_grid_popup_4 {
        grid-area: 4 / 1 / 5 / 2;
    }

    section#massages #massages_grid #massages_grid_card_5,
    section#massages #massages_grid #massages_grid_popup_5 {
        grid-area: 6 / 1 / 7 / 2;
    }

    section#massages #massages_grid .massages_grid_6 {
        grid-area: 5 / 1 / 6 / 2;
    }

    section#massages #massages_grid #massages_grid_card_7,
    section#massages #massages_grid #massages_grid_popup_7 {
        grid-area: 8 / 1 / 9 / 2;
    }

    section#massages #massages_grid .massages_grid_8 {
        grid-area: 7 / 1 / 8 / 2;
    }

    section#massages #massages_grid .massages_grid_9 {
        grid-area: 9 / 1 / 10 / 2;
    }

    section#massages #massages_grid #massages_grid_card_10,
    section#massages #massages_grid #massages_grid_popup_10 {
        grid-area: 10 / 1 / 11 / 2;
    }

    section#massages #massages_grid .massages_grid_11 {
        grid-area: 11 / 1 / 12 / 2;
    }

    section#massages #massages_grid #massages_grid_card_12,
    section#massages #massages_grid #massages_grid_popup_12 {
        grid-area: 12 / 1 / 13 / 2;
    }

    section#huiles .img_circle {
        right: -5px;
    }
}

@media all and (max-width: 380px) {
    section#massages #massages_grid div {
        height: 500px;
    }
}
/*
@media all and (max-width: 340px) {
    section#bienetre #bienetre_grid div {
        height: 675px;
    }
} */