/*
Theme Name: Les Maison Provence Occitanie
Author: emma.satti
Author URI: https://emmasatti.fr
Version: 1.0.0
*/

/*-------------------------------------------*/
/* CLASSES
/*-------------------------------------------*/
.blocfix {
	display: block;
	position: relative;
	width: 90%;
	max-width: 1140px;
	margin: auto;
}
.cursive {
	font-family: "Ms Madi", cursive;
	font-family: "Oooh Baby", cursive;
	font-size: 38px;
	font-size: 34px;
	font-weight: 400;
	line-height: 1em;
	color: var(--gris2);
}
.cursive p { text-align: inherit !important }

/*-------------------------------------------*/
/* IDs
/*-------------------------------------------*/
.head {
	display: block;
	position:relative;
	width:100%;
	max-width: 1140px;
	height: 100px;
	margin: 0 auto;
	padding: 15px 0;
	z-index: 100;
	text-align: right;
}
.headphoto {
	width: 100vw !important;
	height: 50vw !important;
	max-height: 800px;
}
.headphotopage {
	width: 100vw !important;
	height: 30vw !important;
	max-height: 450px;
}
.logo {
	display: block;
	position:relative;
	width: 80%;
	max-width: 200px;
	margin: auto;
	float: left;
}
.socialhead {
	width: fit-content;
	line-height: 70px;
	float: right;
	margin-left: 15px;
}
.socialhead i, .socialfoot i {
	display:inline-block;
	width: 30px;
	line-height: 30px !important;
	text-align:center;
	color:#FFF;
	background: var(--or);
	border-radius:50%;
	margin:0 15px 0 0;
	font-size: 20px !important;
}
.socialhead i:hover { background: var(--gris) }

/*-------------------------------------------*/
/* MENU
/*-------------------------------------------*/
.menutop {
	position: relative;
	display: block;
	width: calc(100% - 200px);
	line-height: 70px;
	margin: 0;
	padding: 0;
	text-align: right;
	float: right;
}
.menu-menutop-container {
	line-height: 70px;
	width: fit-content;
	display: inline-block;
}
.menutop .menu {
	position: relative;
	width: 100%;
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 0;
}
.menutop .menu ul, .menutop .menu li ul, .menutop .menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.menutop .menu li {
	position: relative;
	display: block;
	float: left;
}
.menutop .menu li a {
	display: block;
	line-height: 60px;
	padding: 4px 15px 0 15px;
	color: var(--gris);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
}
.menutop .menu li a:after {
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0px;
	height: 4px;
	background: var(--or);
	content: "";
}
.menutop .menu li:hover a:after {
	left: 0;
	right: 0;
}
.menutop, .menu, .menu li a, .menu li a:after {
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}
.menutop .menu li:hover > a {
  color: var(--or);
}
.menutop .menu li.current-menu-item > a {
	color: var(--or);
	cursor: default;
}
/*--------------------------------------*/
/* SOUS-MENU
/*--------------------------------------*/
.menutop .menu li ul {
	display: none;
	position: absolute;
	top: 64px;
	margin: 0;
	padding: 0;   
	z-index: 50;
	background: #f8f8f8;
	text-align: left;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
.menutop .menu li:hover ul {
	display: block;
}
.menutop .menu li li { float: none }
.menutop .menu li li a {
	line-height: normal;
	padding: 10px 15px;
	font-family: "Playfair", serif;
	font-size: 21px;
	font-weight: 500;
	font-style: italic;
	color: var(--gris);
	letter-spacing: -0.5px;
	text-decoration: none;
	text-transform: none;
	z-index: 10;
}
.menutop .menu li li a:hover, .menutop .menu li li.current-menu-item a {
	color: var(--or);
}
.menutop .menu li li a:after {
	height: 0;
}

/*-------------------------------------------*/
/* MENU RESPONSIVE
/*-------------------------------------------*/
.show-menu, .close-menu {
  display: none;
  position: fixed;
  top: 30px;
  right: 0;
  width: 40px;
  height: 40px;
  background: #000;
  padding: 0;
  z-index: 1000;
}
.show-menu img, .close-menu img {
	width: 100%;
	height: 100%;
}
/*Hide checkbox*/
.head input[type=checkbox] {
  display: none
}
/*Show menu when invisible checkbox is checked*/
#show-menu:checked ~ .menutop { left: 0px }
#show-menu:checked ~ .close-menu { display: block }
#show-menu:checked ~ .show-menu { display: none }

/*-------------------------------------------*/
.foot {
	position:relative;
	width:100%;
	overflow: auto;
	background: var(--gris);
	font-weight: 300;
	line-height: normal;
	font-size: 13px;
	color:#fff;
	padding: 30px 0 20px 0;
	text-align: center;
}
.foot .logo {
	float: none;
	margin: 0 auto 20px auto;
}
.foot p {
  margin: 0 0 5px 0
}
.foot a {
  color: #fff;
  text-decoration: none
}
.foot a:hover {
  color: var(--or)
}
.social, .coord, .menufoot {
	float: right;
	clear: right;
}
.social {
	margin: 0 0 20px auto;
	font-size: 30px;
}
.suivez {
	font-size: 34px;
	font-family: "Ms Madi", cursive;
	color: var(--or);
}
.menufoot div, .menufoot ul, .menufoot li {
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
}
.menufoot {
	margin: 15px 0;
	font-size: 13px;
	color: #fff;
	opacity: 0.5;
}
.menufoot li:before {
  content: " | "
}
.menufoot li:first-child:before {
  content: ""
}

.legal {
	margin-top: 15px;
	font-size: 12px;
	color: #999996
}
.legal a { color: #999996 }
.legal a:hover { color: var(--or) }

rl {
  display: inline-block
}
rl:before {
  content: "|";
  margin: 0 6px
}
/*-------------------------------------------*/
/* RESPONSIVE
/*-------------------------------------------*/
@media screen and (max-width: 1100px) {
#menu { width: 100%; line-height: 50px; float: none }
.show-menu {display: block }
.menutop { position: fixed; float: none; top: 0; left: -380px; right: auto; width: 380px; height: 100%; margin: 0 auto; padding: 30px 0; background: var(--gris); overflow: auto  }
.menu-menutop-container { width: 100% }
.menutop .menu ul { margin: 0; padding: 0 }
.menutop .menu li { float: none }
.menutop .menu li a, .menutop .menu li li a {
	line-height: 50px !important;
	padding: 0 !important;
	font-size: 17px;
	color: #fff;
	text-align: center;
}
.menutop .menu li a:after { height: 0 }

.menutop .menu li ul {
	display: block;
	position: relative;
	top: 0;
	margin: 0;
	background: none;
	text-align: center;
	-webkit-box-shadow: 0 0 0;
	box-shadow: 0 0 0;
}
.menutop .menu a:hover { color: var(--or) }
.socialhead { float: none; margin: auto }
}
/*-------------------------------------------*/
@media screen and (max-width: 500px) {
.head { padding: 15px }
.logo { width: 70%;  margin: 0 auto }
.foot { line-height: 1.8em }
.foot div, .foot ul, .foot li { display: block }
.menufoot li:before { content: "" }
rl { display: block }
rl:before { content: ""; margin: 0 }
}