/* ############# */
/* global */
/* ############# */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline: none;
    border: none;
    scroll-behavior: smooth;
    hyphens: auto;
}

li {
    display: flex;
    align-items: center;
    margin: 1vw;
    gap: 1vw;
}

:root {
    --pink: #d49390;
    --clair-pink: #dab5ad;
    --red: #b8605c;
    --s-red: #aa5955;
    --ligth: #fff7eb;
    --dark: #302c25;
}

body {
    color: var(--dark);
    background-color: var(--ligth);
    transition: background-color 0.5s ease-out;
}

.btn a,
.btn-noir a,
footer .blanc {
    font-weight: 500;
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 1vw, 3rem);
}

.paragraphe {
    font-weight: 300;
    font-family: Arial, sans-serif;
}

.paragraphe .strong {
    font-weight: 700;
}

@media (max-width: 449px) {
    .paragraphe {
        font-size: max(1.35vw, 2.6vh);
    }
}

@media (min-width: 440px) and (max-width: 1049px) {
    .paragraphe {
        font-size: max(1.35vw, 2vh);
    }
}

@media (max-width: 999px) {
    .PC {
        display: none !important;
    }

    .adaptogenese-qui-quoi-seance,
    .Pour-Q-K-exemples-avantages-resultats {
        justify-content: center;
        flex-direction: column;
        gap: max(2vw, 5.2rem);
    }
}

@media (min-width: 1000px) {
    .SM {
        display: none !important;
    }

    .adaptogenese-qui-quoi-seance,
    .Pour-Q-K-exemples-avantages-resultats {
        justify-content: space-between;
    }
}

@media (min-width: 1050px) {
    .paragraphe {
        font-size: min(1.35vw, 4rem);
    }
}

.sous-titre-geo {
    font-family: 'Geologica';
    font-size: clamp(2rem, 2.5vw, 6rem);
    font-weight: 400;
}

.titre {
    font-size: clamp(2.4rem, 3vw, 7rem);
    font-family: 'Geologica';
    font-weight: 500;
    margin-bottom: max(3vw, 2rem);
}

.titre-times {
    font-family: 'Times New Roman';
    font-size: clamp(2.4rem, 3vw, 7rem);
    font-weight: 400;
}

.headline {
    font-size: clamp(3.7rem, 6vw, 15rem);
    font-family: 'Times New Roman';
    font-weight: 500;
}
.tiret{
    display: flex;
    align-items: start;
}
.underline{
    text-decoration: underline;
}
.tiret .margin{
    margin-top: .18em;
}
.tiret .margin-b{
    margin-top: -.1em;
}
.rose {
    color: var(--clair-pink);
}

.blanc {
    color: var(--ligth);
}

.red {
    color: var(--s-red);
}

.center {
    text-align: center;
}

p,
.paragraphe,
.strong {
    line-height: 1.8;
}

ul {
    list-style-type: none;
}
a {
    color: var(--dark);
}

.btn {
    display: inline-block;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--ligth);
    height: clamp(2.4rem, 4vw, 9rem);
    padding: clamp(1.2rem, 1.5vw, 3rem) clamp(1.5rem, 2.5vw, 3.7rem);
    border-radius: 10em;
    border: solid clamp(.15rem, .2vw, .4rem) var(--ligth);
    font-weight: 400;
    transition: background-color 0.3s ease-in-out, scale 0.4s ease;
}

.btn:hover {
    scale: 0.95;
}

.btn .btn-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.btn .btn-content a {
    gap: max(2vw, 1.2rem);
}

.btn a {
    display: flex;
    position: relative;
    align-items: center;
    z-index: 2;
    transition-delay: 0.3s;
}

i {
    display: flex;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition-delay: 0.3s;
}

.btn:hover a {
    position: relative;
    z-index: 2;
}

.btn:hover i {
    transform: translateX(10px);
    color: var(--ligth);
}

.btn::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(100px);
    transition: top 0.1s ease-in;
    transition-delay: 0.2s;
    z-index: 1;
}

.btn:hover::before {
    top: 0;
}

.decouverte-box:hover .btn::before {
    top: 0;
}


.btn-noir {
    display: inline-block;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: clamp(2.4rem, 4vw, 9rem);
    padding: clamp(1.2rem, 1.5vw, 3rem) clamp(1.5rem, 2.5vw, 3.7rem);
    border-radius: 10em;
    border: solid clamp(.15rem, .2vw, .4rem) var(--dark);
    font-weight: 400;
    transition: background-color 0.3s ease-in-out, scale 0.3s ease;
}

.btn-noir:hover {
    scale: 0.95;
}

.btn-noir .btn-content {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    gap: clamp(2rem, 3vw, 4rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.btn-noir a {
    color: var(--ligth);
    display: flex;
    position: relative;
    align-items: center;
    z-index: 2;
    transition: color 0.3s ease-in-out;
    transition-delay: 0.3s;
}

i {
    display: flex;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    transition-delay: 0.3s;
    font-size: max(1vw, 1rem);
    color: var(--ligth);
}


.btn-noir::before {
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark);
    color: var(--dark);
    transition: top 0.1s ease-in;
    transition-delay: 0.2s;
    z-index: 1;
}

.btn-noir:hover::before {
    top: 0;
}

nav div,
#accueil,
#kinesiologie,
.deroulement-1,
#methodeRMMH,
.deroulement-1 div:nth-child(1),
.resultats,
.deroulement-2,
.horaires,
footer,
.content-infos {
    display: flex;
    align-items: center;
    justify-content: center;
}

.deroulement-1 div:nth-child(2),
.deroulement-2 div:nth-child(2){
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: max(3vw, 2rem);
}

img {
    width: clamp(30px, 25%, 900px);
    border-radius: clamp(2.5rem, 6vw, 9rem);
}

@media (max-width: 730px) {
    nav div div:nth-child(1) {
        display: none;
    }
}

@media (max-width: 450px) {
    nav div div:nth-child(2) {
        display: none;
    }
}

.fade {
    animation: fade-up linear;
    animation-timeline: view();
    animation-range: cover contain 50%;
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(20%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scale {
    animation: scale linear;
    animation-timeline: view();
    animation-range: cover contain 50%;
}

@keyframes scale {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 2999px) {
    nav {
        padding: 2vh 5vw;
    }

    .horaires,
    .decouverte {
        padding: 5vh 5vw;
    }

    footer {
        padding: 5vh 5vw 15vh;
    }

    #accueil {
        padding: 20vh 5vw 15vh;
    }

    #kinesiologie,
    .adaptogenese-qui-quoi-seance,
    .deroulement-1,
    #methodeRMMH,
    .Pour-Q-K-exemples-avantages-resultats,
    .resultats,
    .deroulement-2,
    .Nathalie,
    .content-infos {
        padding: 15vh 5vw;
    }
}

@media (min-width: 3000px) and (max-width: 3599px) {
    nav {
        padding: 2vh 10%;
    }

    .horaires,
    .decouverte {
        padding: 5vh 10%;
    }

    footer {
        padding: 5vh 10% 15vh;
    }

    #accueil {
        padding: 20vh 10% 15vh;
    }

    #kinesiologie,
    .adaptogenese-qui-quoi-seance,
    .deroulement-1,
    #methodeRMMH,
    .Pour-Q-K-exemples-avantages-resultats,
    .resultats,
    .deroulement-2,
    .Nathalie,
    .content-infos {
        padding: 15vh 10%;
    }
}

@media (min-width: 3600px) and (max-width: 5999px) {
    nav {
        padding: 2vh 20%;
    }

    .horaires,
    .decouverte {
        padding: 5vh 20%;
    }

    footer {
        padding: 5vh 20% 15vh;
    }

    #accueil {
        padding: 20vh 20% 15vh;
    }

    #kinesiologie,
    .adaptogenese-qui-quoi-seance,
    .deroulement-1,
    #methodeRMMH,
    .Pour-Q-K-exemples-avantages-resultats,
    .resultats,
    .deroulement-2,
    .Nathalie,
    .content-infos {
        padding: 15vh 20%;
    }
}

@media (min-width: 6000px) {
    nav {
        padding: 2vh 30%;
    }

    .horaires,
    .decouverte {
        padding: 5vh 30%;
    }

    footer {
        padding: 5vh 30% 15vh;
    }

    #accueil {
        padding: 20vh 30% 15vh;
    }

    #kinesiologie,
    .adaptogenese-qui-quoi-seance,
    .deroulement-1,
    #methodeRMMH,
    .Pour-Q-K-exemples-avantages-resultats,
    .resultats,
    .deroulement-2,
    .Nathalie,
    .content-infos {
        padding: 15vh 30%;
    }
}

/* ############# */
/* nav */
/* ############# */
nav {
    position: fixed;
    display: flex;
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: rgba(212, 147, 144, .8);
    backdrop-filter: blur(5px);
    box-shadow: 0 .2em .2em rgba(79, 79, 79, 0.1);
    transition: transform 0.4s ease-in-out .2s;
}

nav h2 {
    font-size: clamp(2rem, 2.5vw, 6rem);
    font-family: 'Geologica';
    font-weight: 500;
}

nav div {
    gap: max(3vw, 2rem);
}

/* ############# */
/* hero */
/* ############# */
#accueil {
    flex-direction: column;
    text-align: center;
    background-image: url(img/pattern.jpg);
    background-size: cover;
    /* L'image couvrira entièrement la div */
    background-position: top;
    /* Centrer l'image dans la div */
    background-repeat: no-repeat;
    gap: max(3vw, 2rem);
}

/* ############# */
/* decrouvrir */
/* ############# */
.decouverte div {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: max(3vw, 2rem);
}

.decouverte-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    background-color: var(--pink);
    text-align: center;
    width: clamp(330px, 46%, 2000px);
    padding: max(1vw, .6rem);
    border-radius: clamp(1.5rem, 2vw, 5vh);
    transition: scale .4s ease;
}

.decouverte-box:hover {
    scale: 0.95;
}

/* ############# */
/* C quoi */
/* ############# */
#kinesiologie {
    flex-direction: column;
    background-color: var(--clair-pink);
    text-align: center;
    gap: max(3vw, 2rem);
}

#kinesiologie img {
    width: max(310px, 50%);
    box-shadow: 0 .2em .2em rgba(79, 79, 79, 0.1);
}

/* ############# */
/* Adaptogenèse-Pour Qui, quoi. Séance */
/* ############# */
.adaptogenese-qui-quoi-seance {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
}

.adaptogenese-qui-quoi-seance div,
.adaptogenese-qui-quoi-seance img {
    width: max(310px, 40%);
}

.adaptogenese-qui-quoi-seance div {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.adaptogenese-qui-quoi-seance div p {
    line-height: normal;
}

.pour-qui-box {
    background-color: var(--red);
    padding: max(1vw, .6rem);
    border-radius: clamp(1.5rem, 2vw, 9rem);
}

.trait {
    height: 1vw;
    width: 100%;
    background-color: var(--clair-pink);
}

/* ############# */
/* Deroulé 1 */
/* ############# */
.deroulement-1 {
    flex-direction: column;
    gap: max(3vw, 2rem);
}

.deroulement-1 div:nth-child(1) {
    flex-direction: column;
}

.deroulement-1-box-parent-img {
    flex-wrap: wrap;
}

.deroulement-1 div:nth-child(1) div {
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.deroulement-1-box-parent-img img {
    width: max(300px, 27%);
    box-shadow: 0 .2em .2em rgba(79, 79, 79, 0.1);
}

/* ############# */
/* Methode */
/* ############# */
#methodeRMMH {
    flex-direction: column;
    background-color: var(--clair-pink);
    text-align: center;
    gap: max(3vw, 2rem);
}

#methodeRMMH h4 {
    text-align: center;
}

/* ############# */
/* Pour qui, pourquoi , exemples, avantages,résultats */
/* ############# */
.Pour-Q-K-exemples-avantages-resultats {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    gap: max(3vw, 2rem);
    background-color: var(--pink);
}

.Pour-Q-K-exemples-avantages-resultats div {
    width: max(310px, 50%);
}

.Pour-Q-K-exemples-avantages-resultats img {
    width: max(300px, 32%);
    box-shadow: 0 .2em .2em rgba(79, 79, 79, 0.1);
}

/* ############# */
/* Resultats */
/* ############# */
.resultats {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--pink);
    text-align: left;
}

/* ############# */
/* Déroulé */
/* ############# */
.deroulement-2 {
    flex-direction: column;
    gap: max(3vw, 2rem);
}

.deroulement-2 div:nth-child(2) {
    flex-wrap: wrap;
}

.deroulement-2 div:nth-child(2) div {
    width: max(330px, 40%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.deroulement-2 div:nth-child(2) img {
    width: max(330px, 30%);
}

/* ############# */
/* Horaires */
/* ############# */
.horaires {
    flex-direction: column;
    background-color: var(--clair-pink);
    text-align: center;
    gap: max(3vw, 2rem);
}

/* ############# */
/* Qui sui-je */
/* ############# */
.Nathalie {
    background-color: var(--pink);
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: end;
    gap: max(3vw, 2rem);
}
.PP{
    width: max(310px, 35%);
}
.Nathalie img {
    width: 100%;
    box-shadow: 0 .2em .2em rgba(79, 79, 79, 0.1);
}

.Nathalie .parcours {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(310px, 50%);
    flex-direction: column;
    gap: max(3vw, 2rem);
}
.Nathalie .btns{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: max(3vw, 2rem);
}

.num-add {
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: space-between;
    flex-wrap: wrap;
}
.num-add a, .num-add div{
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1000px){
    .num-add{
        flex-direction: column;
    }
}


/* ############# */
/* footer */
/* ############# */
footer {
    background-color: var(--pink);
    flex-direction: column;
    gap: max(1.5vw, 1.5rem);
}

/* ############# */
/* mentions */
/* ############# */

.content-infos {
    background-color: var(--pink);
    gap: max(1.5vw, 1.5rem);
    flex-direction: column;
}

.content-infos p a {
    text-decoration: underline;
}