*::-webkit-scrollbar{
	display:none;
}

li::marker{
	font-size: 30px;
}

/*rechercher une fonte-family pour le fond des pages*/
@font-face {
	font-family: 'Pacifico';
	src: url("fonts/Pacifico/Pacifico-Regular.ttf") format("truetype");
}
@font-face{
	font-family:"Borel";
	src: url("fonts/Borel/Borel-Regular.ttf") format("truetype");
}
@font-face{
	font-family:"Playpen";
	src: url("fonts/Playpen_sans/PlaypenSans-VariableFont_wght.ttf") format("truetype");
}
@font-face{
	font-family:"FunnelSans";
	src: url("fonts/Funnel_sans/FunnelSans_VariableFont_wght.ttf") format("truetype");
}
@font-face{
	font-family:"sourgummy";
	src: url("fonts/sourgummy/static/SourGummy-Regular.ttf") format("truetype");
}
html{
	min-height: 100%;
	margin: 0;
}
body{
	background-color: white;
	background-size: cover;
	min-height: 100%;
	margin:0px;
	/*transition: background-color 1s;*/
}
li{
	color: black;
	/*transition: color 1s;*/
}
h1{
	font-family: 'Pacifico', cursive;
	text-shadow: 1px 0 10px /*#8F00FF*/ rgb(205, 195, 255) ;
}
h2{
	text-align: center;
	color: black;
	font-family: "Borel";
	margin-bottom: 0px;
	/*transition:color 1s;*/
}
h3{
	font-family: "Borel";
	text-align: center;
	color: black;
	margin-top: 5vh;
	/*transition:color 1s;*/
}
p{
	text-align: center;
	color: black;
	font-family: "sourgummy";
	/*transition: color 1s;*/
}
/*divs accept cookie*/
#div_flou{
	position: fixed;
	width:100vw;
	z-index:999;
    align-items: center;
    display: /*flex*/ block;
    justify-content: center;
	bottom: 0px;
}

#div_flou.flash{
	animation: flash linear 0.3s 1;
}
@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}

.div_accept_cookie{
	width:100vw;
	height: 25vh;
	background-color:white;
	/*padding:3%;*/
	display: flex;
	border-radius: 10px 10px 0px 0px;
	text-align:justify;
	transition: width 1s;
	align-items: center;
    justify-content: space-evenly;
	bottom:0px;
	position: absolute;
	box-shadow: 0px 8px 16px 3px rgba(0,0,0,0.5);	
}
.div_text_cookie{
	width:50%;
}
.div_button_cookie{
	display:grid;
}
.text_cookie{
	color:black;
	font-family:"Playpen";
	margin-right:0px;
}
#el_body{
	display:block;
}
#el_body.flou{
	/*filter: blur(1.5rem);*/
}
.but_yes, .but_no{
	font-family: "Playpen";
	text-align:center;
	padding:5%;
	border:none;
	border-radius:5px;
	cursor: pointer;
	position:relative;
	margin-top:3%;
	color:white;

}
.but_yes{
	background-color:rgb(0 169 255);
}
.but_no{
	background-color:black;
}


.dropdwn-content{ /* div des listes du menue */
	display: block;
	position: fixed;
	min-width: 28vw;
	box-shadow: 0px 8px 16px 3px rgba(0,0,0,0.5);
	z-index:1000;
	border-radius: 5px;
	background-color:rgb(150,70,180);
	padding: 5px;
	height:100vh;
	padding-top:5%;
	opacity:0;
	transition: opacity 0.7s;
}
.navi{
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	min-width: 165px;	
}
.me a {
	display: block;
	color: black;
	text-decoration: none;
	transition: color 0.5s;
}
.me {
	margin-top: 8%;
	text-align:center;
	border-bottom-color: black;
	border: 1px solid ;
	border-radius: 20px;
	padding: 2%;
	font-family:"Playpen";
	transition: background 1.5s;
}
.me:hover{
	background-color: gray;
}
.me a:hover{
	color: white;
	border-radius: 20px;
}
/*corps des pages*/
.dcorps{
	position: relative;
	object-position: center;
	text-align: center;
	padding-top: 110px;
}
.aff{/*mise en forme de l'affiche*/
	margin-left: auto;
	margin-right: auto;
	border-radius: 20px;
	margin-top: auto;
	margin-bottom: 10px;
}
/*div de l'en-tete*/
header{
	text-align: center;
	position: fixed;
	width: 100%;
	/*background-color: white;*/
	z-index: 999;
	height: 100px;
	background-image: radial-gradient(circle, rgba(143, 0, 255, 0.6), #ffffff00);
}
.a_facebook{
	color:white;
	/*transition: color 1s;*/
}

.a_inter_page{
	color:black;
}

/*colonnes de la page interventions*/
.div_princ{
	color:white;
	display: flex;
	justify-content:space-evenly;
}
.div_col{
	width:50%;
	padding:2%;
	margin:1%;
	background-color:rgba(70, 50, 70, 1);
	border-radius:10px;
	min-height:80vh;
	transition:background-color 1s;
	box-shadow:0px -5px 7px rgb(139 96 139);
}
.div_col:hover{
	background-color:rgba(120,90,120,1);
}
/*div du fons de la page*/
footer{
	background-image: linear-gradient(#ffffff00, rgba(126, 0, 127, 0.5), rgba(143, 0, 255, 0.6));
	width: 100%;
	height:fit-content;
	position: absolute;
	font-family: "Playpen";
}
.cont{
	text-align: center;
	padding-top: 20px;
	color: white;
}
.tit{
	color:black;
	font-size: 25px;
	margin-bottom: auto;
	font-family:"Playpen";
}
.ulInf{
	margin-top: 0px;
	padding-left: 0px;
}
.inf{
	color: black;
	list-style-type: none;
	font-family:"Playpen";
}
/*tableau prix*/
th, td{
	color: black;
	border: 2px solid black;
	padding: 5px;
	border-radius: 3px;
	/*transition: color 1s, border-color 1s;*/
}
th{
	background-color: rgba(233, 185, 255,0.8);
}
td{
	background-color: rgba(204, 147, 205,0.35);
}
table{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	font-family:"sourgummy";
}
.infoPrix{
	font-size: 13px;
	font-style: italic;
}
/*tableau*/
.profil {
	border: none;
	border-radius: 0px;
	width: 50%;
}
.table_profil{
	border: 2px solid white;
	border-radius: 10px;
	border-spacing: 0;
	width: 90%;	
	font-size: 15px;
	border-color:black;
	/*transition:border 1s;*/
}
ul{
	margin-top:0px;
}
.image_profil, .image_logo_contact{
	border-radius:10px;
	width: 40vw;
	margin-left: auto;
	margin-right: auto;
}
.text_profil{
	text-align: justify;
	margin-left: 5vw;
	margin-right: 5vw;
	font-family: "sourgummy";
}
/*mise en forme page atelier*/
.texte_atelier{
	display: none;
}
.atelier_div_glob{
	display:grid;
}
.atelier_div_prix{
	display:flex;
}
.atelier_texte_prix{
	width:50%;
}
label{
	color: white;
	font-family:"Playpen";
}
textarea{
	width: 40vw;
	height: 20vh;
	border-radius: 15px;
	padding: 5px;
}
input{
	padding: 5px;
	border-radius: 10px;
	width:  20vw;
}
/*Page des bienfaits*/
.table_bienfait{
	border: none;
	border-spacing: 0;
	width: 90vw;	
	font-size: 15px;
}
.bienfait{
	border: none;
	border-radius: 0px;
	width: 50%;
	background-color: rgba(0,0,0,0) !important;
}
/*concernant le carousel*/
.t_carousel_style{
	background-color: rgba(0,0,0,0) !important;
	border:none;
}
.bouton_carousel_next, .bouton_carousel_prev{
	background-color:black;
	width:20px;
	height:20px;
	cursor:pointer;
	/*transition: background-color 1s;*/
}
.bouton_carousel_next{
	clip-path:polygon(0 0, 0 100%, 100% 50%);
}
.bouton_carousel_prev{
	clip-path: polygon(0 50%, 100% 100%, 100% 0);
}

/*bouton pour le menu*/

.burger{
	height:26px;
	width:34px;
	cursor:pointer;
	position:fixed;
	z-index:1000;
	background-color: rgb(150, 70, 180);
	border-radius:5px;
	padding:5px;
	margin-left:4px;
	margin-top:4px;
	transition:transform 0.4s;
}
.burger span{
	background-color:black;
	height:5px;
	width: 75%;
	display:block;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	transition:background-color 0.5s;
	border-radius:5px;
}
.burger span::before, .burger span::after{
	content:'';
	position:absolute;
	background-color:black;
	width:100%;
	height:5px;
	transition: transform 0.5s;
	border-radius:5px;
}
.burger span::before{
	transform:translateY(-10px);
}
.burger span::after{
	transform:translateY(10px);

}
.burger.active span{
	background-color:transparent;
}
.burger.active span::before{
	transform:translateY(0px) rotate(45deg);
	
}	
.burger.active span::after{
	transform:translateY(0px) rotate(-45deg);
}

/*buton pour passer du mode sombre au light*/
.sombre_light{
	width:10px;
	height:10px;
	right: 30px;
	position:fixed;
	z-index:999;
	cursor:pointer;
	top:10px;
}
.sombre_light span{
	top:50%;
	position:absolute;
	content:'';
	background-color: black;
	width:10px;
	height:20px;
	border: solid 2px;
	border-color:black;
	border-radius: 0px 20px 20px 0px;
	transition: transform 2s, background-color2s, border 2s;
}
.sombre_light span::before{
	position:absolute;
	transform:translateX(-12px) translateY(-2px);
	border-radius: 20px 0px 0px 20px;
	content:'';
	background-color: white;
	width:10px;
	height:20px;
	border: solid 2px;
	border-color: black;
	transition: background-color 2s, border 2s;
}

.sombre_light.active span{
	transform: scaleX(-1) translateX(10px);
	border-color: white;
}
.sombre_light.active span::before{
	border-color: white;
}

/* le site web en mode light (avec "sombre_light.active")*/
body.active {
	background-color: black;
}
p.active, .a_inter_page.active, .tit.active{
	color:white;
}
.bouton_carousel_next.active, .bouton_carousel_prev.active{
	background-color:white;
}
li.active, h3.active, h2.active, .a_facebook.active{
	color:white;
}
.table_profil.active{
	border-color:white;
}
th.active, td.active{
	border-color:white;
	color:white;
}
/*mise en page du formulaire de contact*/
form{
	position:center;
}
.td_form{
	background: none;
	border: none;
}
input {
	width: 25vw;
}
.error{
	color:red;
}
/*.div_col.active{							a finir la page !!
	background-color:grey;
	
}*/
/*Donne les attributs si L'écran fait moins de 800px*/
@media only screen and (max-width: 800px){
	p{
		font-size: 17px;/*20px est un peu trops petit pour voir sur un iPhone*/
	}
	.burger.active {
		transform: translateX(50%);
		margin:0px;
		right:50%;
	}
	.dropdwn-content{
		height: 100vh;
		width: 100%;
		display:flex;
		/*position:absolute;*/
	}

	li{
		font-size: 17px;
	}
	.me{
		margin-top: 17px;
	}
	h2{
		font-size: 30px;
	}
	h1{
		font-size: 35px;
		margin-top: 0px;
		margin-left: 40px;
		margin-right: auto;
		margin-bottom:6px;
	}
	h3{
		font-size: 27px !important;
	}

	.tit{
		font-size: 33px  !important; /*le mot  !important permet de réécrire des donnés en écrasant les précédentes*/
	}
	.inf{
		font-size: 15px;
	}
	.aff{
		width:99vw !important;
		height:auto !important;
	}
	header{
		height: fit-content !important;
	}
	.info-prix{
		font-size: 16px !important;
	}
	table{
		font-size: 17px;
		width: 75% !important;
	}
	.div_princ{
		flex-direction: column;
	}
	.div_col{
		width:94%;
	}
}
@media only screen and (max-width: 670px){
	.dcorps{
		padding-top:130px !important;
	}
}
@media screen and (orientation: landscape) {
	.me{
		margin-top:2vh;
	}
	.navi{
		max-height:100%;
	}
}
@media only screen and (min-width: 1000px){
	.div_button_cookie{
		display: flex;
		width: 45vw;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: center;
	}
}