/*
Theme Name: emma pfo 26
Author: emma.satti
Author URI: https://emmasatti.fr
Version: 1.6.26
*/

/*-------------------------------------------*/
/* CLASSES
/*-------------------------------------------*/
.blocfix {
	position: relative;
	width:calc(100% - 30px);
	max-width:1140px;
	margin:auto;
}
i {
	display:inline-block;
	color: var(--awf);
	margin: 0 0 0 12px;
	font-size: 24px !important;
}
i:hover { color: var(--awfh) }

.h330 { max-height: 330px }
.h220 { max-height: 220px }
/*-------------------------------------------*/
/* IDs
/*-------------------------------------------*/
.head {
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	margin:  0;
	padding: 0;
	z-index: 1000;
	/*background: #fff;
	box-shadow: 0 0 10px #ccc;*/
	background: url("images/fond-feuilles.jpg") no-repeat, #fff;
	background-size: 100%;
	background-position: center top;
}
.head .logo {
	position: absolute;
	left: 0;
	top: 20px;
	width: 100px;
}
.socialhead {
	position: absolute;
	top: 17px;
	right: 0;
}
@media screen and (min-width: 650px) {
.borderleft {
	border-left: 1px dotted var(--gris);
}
}
/*-------------------------------------------*/
/* menu
/*-------------------------------------------*/
.menutop {
	display: block;
	position: absolute;
	top: 0;
	right: 60px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	z-index: 500;
	text-align: center;
}
.menutop ul, .menutop li { margin: 0; padding: 0 }
.menutop li { display: inline-block; line-height: 60px }
.menutop a {
	position: relative;
	padding: 0 15px;
	color: var(--menu);
	text-transform: uppercase;
	text-decoration:none;
}
.menutop a:hover {
	color: var(--rose);
}
@media screen and (min-width: 880px) {
.menutop a:after {
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -10px;
	height: 4px;
	background: var(--rose);
	content: "";
}
.menutop a:hover:after {
	left: 30px;
	right: 30px;

}
}
.menutop, .menutop a, .menutop a:after {
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
/*-------------------------------------------*/
/*.show-menu .fas, .close-menu .fas { color: var(--awf) }
.show-menu .fas:hover, .close-menu .fas:hover { color: var(--rose) }*/
.show-menu, .close-menu {
	position: fixed;
	top: 17px;
	right: 15px;
	color: var(--awf);
    display: none;
	z-index: 1000;
}
/*Hide checkbox*/
.head input[type=checkbox]{ display: none }
/*Show menu when invisible checkbox is checked
#show-menu:checked ~ .menutop { left: -15px }
#show-menu:checked ~ .close-menu { display: block }
#show-menu:checked ~ .show-menu { display: none }

/*Show menu when invisible checkbox is checked*/
#show-menu:checked ~ .menutop { visibility: visible; opacity: 1 }
#show-menu:checked ~ .close-menu { display: block; opacity: 1 }
#show-menu:checked ~ .show-menu { display: block; opacity: 0 }
#show-menu:checked ~ .menutop li { margin-top: 0%; margin-top: 0 }
#show-menu:checked ~ .menutop li a { opacity: 1 }

/*-------------------------------------------*/
.foot {
	position: relative;
	width:100%;
	padding: 0;
	overflow: auto;
	background: var(--footer);
	line-height: normal;
	font-size: 0.9em;
	color: #fff;
	z-index: 10;
	box-shadow: 0 0 10px var(--gris);
}
.foot .blocfix {
    display: flex;
}
.foot ul { margin: 0; padding: 0 }
.foot li { list-style: none; line-height: 1.6em }
.foot a { color: #fff; text-decoration: none }
.foot a:hover { text-decoration: underline }
.foot .col { width: 25%; padding: 10px 15px; border-left: 1px solid #fff }
.foot .col:first-child { border: none }
.foot h3 { color: #fff; font-size: 1em; font-weight: 600 }
.foot h3, .foot li { margin: 0 0 5px 0 }
.legal {
	font-size: 0.8em;
	font-style: italic;
}

/*-------------------------------------------*/
/* RESPONSIVE
/*-------------------------------------------*/

@media screen and (max-width: 880px) {
.socialhead { right: 32px }
.show-menu { display:block }
.menutop { position: fixed; flex-direction: column; justify-content: center; top: 0; right: 0; left: 0; height: 100vh; margin: 0 auto; padding: 30px 0; background: rgba(149,193,31,0.95); visibility: hidden; opacity: 0; transition: all 0.75s ease; font-size: 18px }
.menutop ul { background: none }
.menutop li { position: relative; display: block; margin-top: 80px; -webkit-transition: all 2s; transition: all 2s }
.menutop li a {opacity: 0 }
.menutop a { display:block; padding: 0; color: #fff }
.menutop a:hover { color: black }
.menutop li.current-menu-item > a { color: black; cursor: default }
}

@media screen and (max-width: 650px) {
.foot .blocfix { flex-direction: column }
.foot .col { width: 100%; display: block; padding: 15px 0; border-top: 1px solid #fff; border-left: none }
}
@media screen and (max-width: 450px) {
.foot li:last-child:after { content: ""; margin: 0 }
}