/*
	Description: styles ek
	Author: JmG
	Version: 0.1
*/
/*
Chaque page en ID_FR et ID_BR
Logos et favicon dans le thème
Menus Entête et Pied dans WP (blocs réutilisables)
*/
/*
--bleu: rgb(46,63,91,1); #2E3F5B; complémentaire : #d1c0a4
--jaune: rgb(255,250,240,1);#FFFAF0; complémentaire : #00050f
--rouge: rgb(120,20,43,1); #78142b; complémentaire : #87ebd4
--or: rgb(226,211,189,1);#E2D3BD; complémentaire : #1d2c42
--gris: rgb(75,84,99,1); #4B5463; complémentaire : #00050f
--beige: rgb(215,211,209,1)#D7D3D1;complémentaire : #282c2e
--vert_tsara: rgb(0,77,63,1) #004d3f

--bleu-ciel:rgb(127,201,255,1);
--fushia: rgb(255,7,201,1);
--marron: rgb(160,130,60,1);
--vert_clair: rgb(75,255,0,1);#4CFF00; complémentaire:#b300ff
--lavande:rgb(178,170,255,1);
*/


:root {
--bleu: #2E3F5B;
--bleu-transparent: rgba(46,63,91,1);
--jaune: #FFFAF0;
--rouge: #78142b;
--or: #E2D3BD;
--orlight: rgb(226,211,189,0.4);
--gris: #4B5463;
--beige: #D7D3D1;

--fond-woo-1: rgb(226,211,189,0.3); /* or à 0.3 / *#f2f2f2 tableaux cart, checkout*/
--promo-woo-1: rgba(204,255,153,0.3);

--bleu-ciel:#7FC9FF;
--fushia: #8B008B;
--marron: #A0823C;
--vert_clair: #4CFF00;
--vert_tsara: #004D3F;
--lavande:#B2AAFF;

--a-couleur: var(--fushia) ;
--a-active-couleur:var(--marron);

--corps-police: "Jost",sans-serif; /*police corps*/
--corps-taille: 16px; /*1 rem*/
--corps-couleur:var(--gris);
--corps-fond:white;

--H1-police: "Inter",sans-serif;
--H1-taille: 1.2rem;
--H1-couleur: var(--rouge);
--H2-taille: 1.1rem;
--H3-taille: 1 rem;

--head-police: "Inter",sans-serif; /*police menu head*/
--head-taille: 1rem; /*la taille du menu est dans le Bloc réutilisable du menu*/
--head-couleur:var(--bleu);/*couleur texte et menu head*/
--head-fond:rgba(255,255,255,0.8);
--head-bordure:var(--or);
--head-flou:10px;
--head-largeur:5px;
--head-radius:15px;

--foot-police: "Inter", sans-serif; /*police texte et menu foot*/
--foot-taille: 0.8rem ; /*taille texte foot hors menu qui est dans bloc redistribuable*/
--foot-couleur:white; /*couleur texte et menu foot*/
--foot-fond:var(--vert_tsara);
--foot-bordure:var(--or);
--foot-flou:30px;
--foot-largeur:10px;
--foot-radius:15px;

--officiel-police:"Jost",sans-serif;
--officiel-taille:0.9rem;
}

/* #################################*/
a{
	text-decoration:none;
}

a:hover, a:focus, a:active{
	color: var(--a-active-couleur) !important;
	border: 1px dotted !important;
}

body{
/*clear: all;*/
	margin: 0%;
	font-family: var(--corps-police) !important;
}

h1{
	font-size:var(--H1-taille) !important;
	font-family: var(--H1-police) !important;
	color:var(--H1-couleur) !important;
}

h2{
	margin-top:10px;
	margin-bottom:5px;
	font-size:var(--H2-taille) !important;
	font-family: var(--H1-police) !important;
}

h3{
	margin-top:4px;
	margin-bottom:2px;
	font-size:var(--H3-taille);
	font-family: var(--H1-police) !important;
}

html{
	font-size: var(--corps-taille);
}

img {
	border-style: none;
	max-width: 100%;
}

p{
	margin-top:1px;
	margin-bottom:1px;
}

ul { 
	list-style-type:disc ; 
	margin-top:2px;
	margin-bottom:2px;
	margin-left: 0px;
	padding-left: 15px;
	list-style-position: outside;
}

ul ul {
	list-style-type:circle ; 
}

table, th, td {
}

/* #################################*/
.XX {
	margin-top: 5px;
	margin-left: 5px;
	margin-right: 5px;
	padding-top:10px;
	padding-bottom:10px;
}

.border {
	border-width:2px;
	border-style:dotted;
	border-color:red;
}

.footer-class-rond {/*menu bords arrondis non fixe*/
	text-align: center;
	font-family: var(--foot-police)!important;
	font-size:var(--foot-taille);
	color: var(--foot-couleur); 
	background-color: var(--foot-fond);
	box-shadow: inset 0px 0px var(--foot-flou) var(--foot-largeur) var(--foot-bordure) ;
	border-radius: var(--foot-radius);
}

.footer-class {
	text-align: center;
	font-family: var(--foot-police) !important;
	font-size:var(--foot-taille);
	color: var(--foot-couleur); 
	background-color: var(--foot-fond);
/*width:100%;*/
	margin-top: -10px;
	margin-left:-15px;
	margin-right:-15px;

	padding-top:20px;
	padding-bottom:20px;
	padding-left:50px;
	padding-right:50px;

	box-shadow: inset 0px -25px 20px -20px var(--foot-bordure),
inset 0px 25px 20px -20px var(--foot-bordure);
}

.header-class-rond {/*menu haut bords arrondis non fixe*/
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items:center;
	font-family: var(--head-police) !important;
	font-size:var(--head-taille);
	color: var(--head-couleur); 
	background-color: var(--head-fond);
/*border-bottom:  3px solid ;
border-bottom-color: var(--head-bordure);*/
	padding-left: 30px;
	padding-right: 30px;
	border-radius: var(--head-radius);
	box-shadow: inset 0px 0px var(--head-flou)var(--head-largeur) var(--head-bordure);
}

.header-class {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items:center;
	font-family: var(--head-police) !important;
	font-size:var(--head-taille);
	color: var(--head-couleur);
	background-color: var(--head-fond);
	box-shadow: 0px -25px 20px -20px var(--head-bordure),
0px 25px 20px -20px var(--head-bordure);

	margin-top:15px;
	margin-left:-15px;
	margin-right:-15px;

	padding-left:50px;
	padding-right:50px;

	position:fixed;/*ex sticky*/ 
	top:0;
	left:0;
	right:0;
	z-index: 9990;
	/*100000 pour popup menu sandwich ouvert, 9999 pour overlay ecran du mini-cart et 9998 pour contenu mini-cart */
}

.logo {
	width: 100px;
	height: auto;
	vertical-align: middle;
	
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index: 9999;
}

.logo_shop {
	width: 100px;
	height: auto;
	vertical-align: middle;
	
	position:fixed;
	top:0;
	left:30px;
	right:0;
	z-index: 9999;
}
.menu-footer {
/* couleur et taille texte définise dans bloc réulisable WordPress*/
}

.menu-head {
/* taille texte définie dans le bloc réulisable WordPress*/
	flex-grow: 3;
}

.menu-head .wp-block-columns{
	/*centrer le menu verticalement*/
	margin-bottom: 0 !important;
}

.monpanier{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items:center;
	
	/*text-align:center ;
	width: 80px;*/
}

.monpanier :is(.woocommerce-Price-amount,.amount){
	color: var(--bleu) !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
}

.officiel {/*corps des pages textes officiels*/
	margin-top:100px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	font-family: var(--officiel-police) !important;
	font-size:var(--officiel-taille);
	color: var(--corps-couleur) ; 
	background-color: var(--corps-fond);	
}
.officiel a{
	color:var(--a-couleur) !important;
}

.page{
	margin-top:100px;
	padding-left: 30px;
	padding-right: 30px;
	margin-bottom:20px;
	font-size:var(--corps-taille);
	color: var(--corps-couleur); 
	background-color: var(--corps-fond);
}
 .page .wp-block-columns{
	/* moins d'espace après titre dans la page*/
	margin-bottom: 1rem !important;
}

.prestation{
	margin-top: 0.6rem;
}

.prestation_button{
	cursor: pointer !important;
	border: 1px solid var(--beige) !important;
	background-color: transparent !important;
}

.prestation_button::before{
	/* image pour add to cart  */
	content: url(./media/menus/opencart-in-30px.svg);
}

.wp-block-navigation__responsive-container-close{
	right: 50% !important; /*le X du menu mobile au milieu*/
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container{
	padding-top: 0.3rem !important;
}

/*###formulaires ##############################################################*/

:is(input,button)[type="submit"], :is(input,button)[type="reset"]{
	cursor:pointer;
}

.formulaire{
	padding-left: 30px;
	padding-right: 30px;
	font-size:var(--corps-taille);
	color: var(--corps-couleur) ;
}

.obligatoire::after{
	content: " *";
	color: red;
	font-size: 1.3em;
}

#benzimento {
	padding-top:10px;
	background-color: var(--orlight);
	border-radius:5px;
}

#benzimento label{
	font-style: italic;
	line-height: 1.2;
}

#benzimento :is(input, textarea){
	border-width: 0 !important;
	padding: .5rem !important;
	background-color: var(--corps-fond) !important;
}

#benzimento textarea{
	width: 80%;
}

#benzimento input[type=submit]{
	width: 100px;
	margin-left: 5px;
	font-size: 1.1rem;
	background-color: var(--vert_tsara) !important;
	color: var(--corps-fond) !important;
}
#benzimento input[type=reset]{
	margin-left: 50px;
	font-size: 1.1rem;
	background-color: var(--vert_tsara) !important;
	color: var(--corps-fond) !important;
}
 /*### fin formulaires ###################################*/