/* IMAGE EN PLUS */

#image1 {
margin-top:25px;
background-image: url(img/stock-reflexologie-large.png);
background-position: center center;
border-radius: 20px;
width:70vw;
height:300px;
}

#image2 {
margin-top:25px;
background-image: url(img/stock-reflexologie-large.png);
background-position: center center;
border-radius: 20px;
width:70vw;
height:300px;
}

#image3 {
margin-top:25px;
background-image: url(img/stock-reflexologie-large.png);
background-position: center center;
border-radius: 20px;
width:70vw;
height:300px;
}




/* COULEURS */

:root {
--background:#faecd1;
--second:#fc6470;
--third:#f8e2b9;
--text:#000000;
--header:#896150;
}

/* IMPORT FONT */

@font-face {
    font-family: 'Tan' ;
    src: url(/fonts/tan-mon-cheri.ttf);
}

@font-face {
    font-family: 'Noto' ;
    src: url(/fonts/NotoSansLinearA-Regular.ttf);
}

@font-face {
    font-family: 'Archivo' ;
    src: url(/fonts/Archivo-VariableFont_wdth\,wght.ttf);
}


/* POLICES */

a {
font-family: 'Archivo';
text-decoration: none;
border-radius: 20px;
background-color: var(--second);
padding:3px 10px;
color:black;
align-items: baseline;
color:white;
}

p {
font-family: 'Archivo';
font-size:16px;
font-weight:100;
letter-spacing: 0.0125em;
line-height:22px;
margin-bottom:12px;
}


span {
text-decoration: underline;
}

h1 {
font-family: 'Tan';
font-weight: 900;
font-size:32px;
line-height:22px;
}


h2 {
font-family: 'Tan';
font-size:24px;
font-weight: 700;
line-height:32px;
text-decoration:underline dashed 1px var(--header);

}

h3 {
font-family: 'Archivo';
font-size:24px;
font-weight: 200;
line-height:22px;
margin-top:30px;
margin-bottom:10px;

}

h4 {
font-family: 'Archivo';
font-size:16px;
font-weight: 400;
margin-bottom:12px;
}


/* STRUCTURE */

body {
padding:0;
margin:0;
background-color:var(--background);
height:100%;
overflow:scroll;
}

html {
overscroll-behavior-y: none;
height: 100%;
}

#header-mobile {
display:none;
}

#header-screen {
font-family :"Archivo";
position: fixed;
top:0;
left:0;
width:100vw;
height:20px;
background-color: var(--header);
padding:10px;
box-shadow: -10px 5px 5px #00000020;
}

#header-screen a {
    color:white;
    font-weight: 200;
    font-size: 20px;
    text-decoration: none;
    background-color: unset;
}

#menu-mobile img {
display:none;
}



#logo {
position:absolute;
float:left;
margin-left:50px;
}

#liens {
position:absolute;
float:right;
right:75px;
}

#logo a {
margin-right:50px;
}

section {
padding: 50px 15vw;
}

#accueil {
width:auto;
height:calc(100vh - 95px);
background-color: var(--third);
}

#massage {
background-color: var(--third);
}




#rdv {
background-color: var(--third);
}

#rdv p {
    max-width: 33vw;
}

#accueil-container {
margin-top:10vh;
display:flex;
}

#accueil-img {
width:400px;
max-height:auto;
vertical-align: middle;
background-image: url(img/aurelie3.png);
background-position: center center;
background-size:cover;
border-radius: 25px;

}

#accueil-texte {
margin-left:50px;
width:35em;
float:left;
}

.reflexologie-container {
display:flex;
gap:35px;
grid-template-columns: repeat(2, 1fr);
}

.reflexologie-cell {
width: 50%;
}



#grid-tarifs {
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:15px;
column-rule: solid 6px;
margin-top:25px;
}

#grid-tarifs .cell {
border:1px solid var(--second);
padding:15px;
border-radius:10px;
}

.cell {
align-items: center;
text-align: center;
}

#grid-huiles {
display:grid;
grid-template-columns: repeat(4, 1fr);
gap:15px;
column-rule: solid 6px;
margin-top:25px;
}

#grid-huiles .huiles {
   background-color: var(--background);
    padding: 20px 5px;
    border:1px solid var(--second);
    border-radius: 10px;
}

.huiles {
align-items: center;
text-align: center;
}

.huiles p {
    margin:0;
}


.huiles h4 {
    margin-bottom:10px;
    margin-top:0;
}

#reflexologie-img {
margin-top:25px;
background-image: url(img/stock-reflexologie-large.png);
background-position: center center;
border-radius: 20px;
width:70vw;
height:300px;
}


#massage-img {
margin-top:20px;
margin-bottom:50px;
background-image: url(img/stock-massage-large.png);
background-size: cover;
background-position: center center;
border-radius: 20px;
width:70vw;
height:300px;
}


#huiles-img {
margin-top:30px;
margin-bottom:50px;
background-image: url(img/otera.png);
background-size: cover;
background-position: center center;
border-radius: 20px;
width:70vw;
height:300px;
}


footer {
    background-color: var(--header);
    font-family:sans-serif;
    text-align: center;
    color:white;
    padding:15px;
    font-weight: 300;
    font-size:12px;
}

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

    #accueil-container {
margin-top:3vh;
}


    #grid-tarifs {
display:grid;
grid-template-columns: repeat(2, 2fr);
gap:15px;
column-rule: solid 6px;
}

#grid-huiles {
display:grid;
grid-template-columns: repeat(2, 2fr);
gap:15px;
column-rule: solid 6px;
}

#header-screen a {
    font-size:16px;
}

#accueil-img {
display:none;
}

#accueil-texte {
width:80%;
float:left;
}

}


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

 #accueil-container {
margin-top:10vh;

}

#huiles-img {
width:80vw;
background-image: url(img/stock-massage.png);
}

section {
padding: 50px 10vw;
}

#header-screen {
display: none;
}

#header-mobile {
position:fixed;
display:block;
background-color: var(--header);
height:50px;
width:100vw;
}

#menu-button {
    position:absolute;
    right:25px;
    top:10px;
    width:25px;
    height:25px;
}

#menu-button img {
    max-width:30px;
    max-height:30px;
}

#menu-mobile {
    z-index:2;
    position:fixed;
    display:none;
    width:100%;
    height:100%;
    background-color: var(--second);
    padding:50px;

}

#menu-mobile a {
 color:white;
 display: flex;
 flex-direction: column;
 font-size:24px;
 margin-top:25px;
    transition: all .1s ease;
}

#menu-mobile img {
z-index:3;
position:fixed;
top:50px;
right:50px;
max-width: 50px;
max-height: 50px;
display:block;
}

.reflexologie-container {
display:block;
gap:none;
grid-template-columns: none;
}

.reflexologie-cell {
width: unset;
}

#reflexologie-img {
background-image: url(img/stock-reflexologie-large.png);
width:80vw;
}

#massage-img {
    background-image: url(img/stock-massage-large.png);
width:80vw;
}

#huiles-img {
        background-image: url(img/otera.png);

width:80vw;
}


#accueil-img {
display:none;
}

#accueil-texte {
margin-left:0px;
margin-top:-20px;
width:90vw;
float:none;
}

#grid-tarifs {
display:grid;
grid-template-columns: repeat(2, 2fr);
gap:15px;
column-rule: solid 6px;
}

#grid-huiles {
display:grid;
grid-template-columns: repeat(2, 2fr);
gap:15px;
column-rule: solid 6px;
}



#rdv p {
    max-width: 80vw;
}


}