@import url(accueil.css);
@import url(contact.css);
@import url(monHistoire.css);
@import url(prestations.css);
@import url(temoignages.css);
@import url(mentionLegale.css);


* {
    margin: 0;
    padding: 0;
}
.container {
    width: 90%;
    margin: 0 auto;
}
figure > img {
    width: 100%;
}

:root{
	--akaya:'Akaya Kanadaka', system-ui;
	--cinzel:"Cinzel", serif;
	--winky:"Winky Sans", sans-serif;
	--iansui:"Iansui", cursive;
	--dosis:"Dosis", sans-serif;
	--abel:"Abel", sans-serif;
	--cormorant:"Cormorant Garamond", serif;
	--delius:"Delius", cursive;
	--marcellus:"Marcellus", serif;
	--acme:"Acme", sans-serif;
	--noir: #110D0C;
	--blanc: white;
	--orRose: #d9d9d9;
	--rose: #bf8080;
	--peche: #fad4c0;
	--violet: #e4c8e0;
	--beige: #d0d0c5;
}

h1 {
    font-family: var(--cinzel);
    text-align: center;
    margin: 5% 0;
}
h2 {
    font-family: var(--akaya);
    color: var(--rose);
    text-align: center;
}
h3 {
    font-family: var(--marcellus);
}
p {
    font-family: var(--winky);
}
li {

    /* font-family: var(--abel); */
    /* font-family: var(--acme); */
    /* font-family: var(--akaya); */
    /* font-family: var(--cinzel); */
    /* font-family: var(--winky); */
    /* font-family: var(--iansui); */
    /* font-family: var(--dosis); */
    font-family: var(--delius);
    /* font-family: var(--cormorant); */
    /* font-family: var(--marcellus);*/
}
/*p{
    /* font-family: var(--acme); */
    /* font-family: var(--akaya); */
    /* font-family: var(--cinzel); */
    /* font-family: var(--winky); */
    /* font-family: var(--iansui); */
    /* font-family: var(--dosis); */
    /* font-family: var(--delius); */
    /* font-family: var(--cormorant); */
    /* font-family: var(--marcellus);*/
/*}*/

/* --------------------------- Header ------------------------ */

header {
    width: 100%;
}
/* Logo */
header > #logoHeader {
    width: 15%;
    margin: 2% auto; 
}
header > #logoHeader > a > img {
    width: 100%;
}
/* Nav */
header > nav {
	width: 100%;
	background-color: #bf8080;
}
header > nav > ul {
	width: 80%;
	display: flex;
	margin: 0px auto;
	padding-left: 0;
}
header > nav > ul > li {
	font-family: var(--cinzel);
	list-style: none;
	width: 25%;
	padding: 1%;
	text-align: center;
	font-size: 1.2rem;
}
header > nav > ul > li:hover , 
header > nav > ul > li:focus {
  background-color: #d9a9a9;
}
header > a[href="#burger"] , #burger > li:first-child {
  display: none;
}
header > nav > ul > li > a {
	color: white;
    text-decoration: none;
}
/* --------------------------- Boutons ----------------------- */
/* bouton voir plus */
.boutonVoirPlus {
    background-color: var(--rose);
    border: darkgray;
    padding: 5%;
    border-radius: 5px;
    color: white;
    text-decoration: none;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.boutonVoirPlus:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}

/* bouton prendre rendez-vous */
.btnPrendreRdv{
	width: 50%;
	margin: 5% auto;
}
/* Animation bouton prendre rendez-vous */
.btnPrendreRdv > a > img {
	width: 100%;
    border-radius: 10px;
    margin-top: 5%;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.btnPrendreRdv:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
/* bouton Me contacter */
.btnMeContacter{
    width: 30%;
	margin: 5% auto;
}
/* Animation bouton Me contacter */
.btnMeContacter > a > img {
	width: 100%;
    border-radius: 10px;
    margin-top: 5%;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.btnMeContacter:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
/* bouton Plus d'infos */
.btnPlusInfos{
    width: 30%;
	margin: 5% auto;
}
/* Animation bouton Plus d'infos */
.btnPlusInfos > a > img {
	width: 100%;
    border-radius: 10px;
    margin-top: 5%;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.btnPlusInfos:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
/* ---------------------- footer ------------------------- */
footer{
	text-align: center;
	background-color:var(--beige);
	color: var(--rose);
	padding: 5% 0;
}

footer > p > a {
	color: var(--rose);
	text-decoration: none;
}

/********************************************* Média query 768px ************************************************************************/
/* Limite des tablettes */ 
@media screen and ( max-width:768px) {  
	/* Gestion du lien MENU */

	/* On affiche le lien burger et la X du premier li  */
	header > a[href="#burger"] {
		display: block;
		text-align: center;
	    text-transform: uppercase;
		color: var(--orange);
	}
	header > nav > ul > li {
		width: 100%;
	}
	/* Affichage du li X qui est le premier li du ul burger*/
	#burger > li:first-child {
	    display: block;
	}
	/* Gestion de burger */
	#burger {
	    position: fixed;
		z-index: 2000000;
	    top: 10vh;
	    width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
		margin: 0;
	}
	/* Quand le lien burger n'est pas cliqué ou on clique sur un autre lien de la page */
	#burger:not(:target) {
		right: 100%;
		transition: right 1s ease-in-out;
	}	
	/* Quand le lien burger est cliqué */
	#burger:target {
		background-color: var(--rose);
		right: 0;
		transition: right .5s ease-in-out
	}
	#contact > p:nth-of-type(2){
		font-size: 1rem;
	}
}