/*  Theme Name:   Midshell

Description:  Thème personnalisé pour le site Midshell.

Author:       Just Waouh  

Author URI:   https://justwaouh.com 

Template:     blankslate  

Version:      0.1.0 */



/*

** Settings 

*/



/*

** - Fonts 

*/



@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico&display=swap');



h1 {

	font-weight: 800;

	line-height: 1;

	font-size: 2rem;

}

h2 {

	font-weight: 500;

	font-size: 1.3rem;

	text-align: left;

	color: var(--boldAccent);

}

h3 {

	font-family: "Pacifico", serif;

	font-size: 1.5rem;

	font-weight: 400;

	text-align: center;

	color:var(--darkNeutre);

}



/* 

** - Colors 

*/

:root {

  --boldMain: #7BE1F7;

  --boldAccent: #EC39A1;

  --lightAccent: #F6D41B;

  --darkNeutre: #3C0682;

  --lightNeutre:#FFFFFF;

}



/*

** - Globals

*/

*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

	margin: 0;

	padding: 0;

	background: var(--lightNeutre);

	color: var(--darkNeutre);

	font-family: "Open Sans", sans-serif;

	font-size: 16px;

	scroll-behavior: smooth;

}

body{

	margin: 0;
	padding: 0;

} 

.section{

	padding-top: 50px;

	display: flex;

	justify-content: center;

}

.section.paddingBottom{

	padding-bottom: 50px;

}

.section.paddingBottomPlus{

	padding-bottom: 100px;

}

.section.paddingTop{

	padding-top: 100px;

}

.contentWrap {

	padding: 0;

	width: 90%;

	max-width: 1280px;

}

p{

	margin: 0;

}

.page-template-default p {

	margin: 20px 0;

}

a{

	color: var(--boldAccent);

	text-decoration: none;

	transition: ease .3s;

}

a:hover{

	color: var(--darkNeutre);

}

ul, ol{

	list-style: none;

	margin: 0;

	padding: 0;

}

.wrapper{

	width:90%;

	max-width: 1280px;

}



/*

** - Waiting Page

*/
.waitingPage {
	width: 100%;
	height: 100vh;
	padding: 0;
    margin: 0;
    display: block;
}
.waitingPage .contentWrap {
	width: 100%;
	max-width: none;
}
.waitingPage figure {
	margin: 0;
	overflow: hidden;
	height: 100vh;
}
.waitingPage img {
    object-fit: cover;
}
 

/*

** -- Buttons

*/

.btn{

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 80px auto 0;

	padding: 5px 0;

    width: 250px;

    min-height: 40px;

    color: #fff;

    background: var(--boldAccent);

    border: 2px solid var(--boldAccent);

    border-radius: 10px;

    font-weight: 400;

    font-size: 1.3rem;

	text-align: center;

    z-index: 100;

	font-family: 'Pacifico',serif;

}

.btn a{

	padding: 0;

}

.btn:hover {

	cursor: pointer;

	background: #fff;

	color:var(--boldAccent);

}

.btn:hover a{

	background-color: #fff;

    color: var(--boldAccent);

}



/*

** -- Annonce

*/



#annonceSection {

	background: var(--lightAccent);

	padding: 70px 0 85px 0;

}

#annonceSection h2 {

	font-weight: 800;

	font-size: 1.3rem;

	text-transform: uppercase;

	text-align: left;

}

#annonceSection h3 {

	margin-top: 0;

}

#annonceSection .contentWrap{

	margin: 0 auto;

	display: flex;

	align-items: center;

	flex-direction: column;

}

.annonceText {

    background: var(--lightNeutre);

    padding: 20px;

    text-align: left;

    box-shadow: -5px 5px var(--boldAccent), -10px 10px var(--boldMain);

	width: 100%;

}

.annonceText p {

	font-size: 1rem;

}

.annonceImg {

	width: 100%;

	padding: 30px 0;

}

.annonceImg img {

	width: 100%;

}



/*

** -- Formulaire de contact

*/



#contactForm {

	background: var(--boldMain);

	position: relative;

	overflow: hidden;

}

#contactForm .contentWrap{

	margin: 0 auto;

	padding: 40px 0;

	position: relative;

	z-index: 100;

	position: absolute;

	top:0;

	left: 50%;

	transform: translateX(-50%);

}

#contactForm .contentWrap h2{

	text-align:center;

	font-weight: 800;

	font-size: 1.7rem;

	text-transform: uppercase;

	color: var(--darkNeutre);

}

#contactForm .contentWrap p{

	margin: 10px 0;

}

#contactForm input,

#contactForm textarea {

	width: 100%;

	border: none;

    min-height: 30px;

    border-radius: 10px;

	padding: 5px 10px;

}

#contactForm input[type="submit"]{

	max-width: 250px;

	margin: 20px auto 0;

}

#contactForm .twoCol{

	display: flex;

	flex-direction: column;

	justify-content: space-between;

}

#contactForm .twoCol p{

	width: 100%;

}

.fondContact{

	height: 650px;

}



.fondContact img{

	width: auto;

	height: 100%;

}

.wpcf7-response-output {

	text-align: center;

    background: #fff;

    margin: -20px;

    border-radius: 10px;

    border: 2px solid var(--boldAccent);

}



/*

** Barre de navigation

*/



/*

** _Global

*/

header{

	width: 100%;

	height: 80px;

	background: var(--lightNeutre);

	display: flex;

	justify-content: center;

	align-content: center;

	position: fixed;

	z-index: 1000;

}

header .wrapper{

	position: relative;

	display:flex;

	justify-content: space-between;

	font-weight: 700;

}

header nav a{

	color: var(--darkNeutre);

}

header nav a:hover{

	color: var(--boldAccent);

}

.social-menu {
	display:flex;
	gap:.5rem;
	list-style:none;
	margin:0;
	padding:0;
}
.social-menu a {
	--icon: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--size);
    height: var(--size);
    text-decoration: none;
    color: var(--boldAccent);
    transition: background .2s ease, color .2s ease;
}
.social-menu a:hover {
	color:var(--darkNeutre);
}

.icon{
	width:var(--icon);
	height:var(--icon);
	background: currentColor;
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
}
footer .icon{
	background: var(--darkNeutre);
}
footer .icon:hover{
	background: var(--boldAccent);
}
.sr-only{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,1px,1px);
	border:0;
}




/*

** _Logo

*/

header .wrapper #branding {

    position: absolute;

    width: 80px;

    height: auto;

	z-index: 500;

}

header .wrapper #branding .logo{

	width: 100%;

	height: auto;

	padding-top: 10px;

}

header .wrapper .logo-space{

	width: 80px; /* MUST be the same width as header .wrapper #branding with */

}



/*

** _navigation

*/



header .wrapper #menu,

header .wrapper .social-container{

	display: flex;

	justify-content: center;

	align-items: center;

}

header .wrapper #menu ul li:after{

	display: none;

}

header .wrapper #menu ul li:last-of-type:after{

	display: none;

}

header .wrapper #menu div:first-of-type{

	overflow: hidden;

	transform: scaleY(0);

	transform-origin: top;

	transition: transform 0.5s ease, opacity 0.3s ease;

	opacity: 0;

	position: absolute;

	top:80px;

    background: var(--lightNeutre);

    width: 100vw;

	z-index: 300;

}

header .wrapper #menu div:first-of-type.active{

	transform: scaleY(1);

	opacity: 1;

}

header .wrapper #menu div:first-of-type ul{

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	padding: 15px 0;

}

header .wrapper #menu div:first-of-type li{

	margin: 10px 0;

}

header .wrapper #menu #menu-responsive{

	display: block;

	text-transform: uppercase;

}



/*

** Footer

*/



#footer-content{

	background: var(--lightAccent);

    color: var(--darkNeutre);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

	padding: 20px 0;

	font-weight: 700;

}

#footer-content p{

	margin: 10px 0;

}

#footer-content .localisation,

#footer-content .arborescence,

#footer-content .footer-reseaux{

	padding: 20px 0;

	text-align: center;

}

#footer-content .localisation .nomVille{

	text-align: left;

}

#footer-content .social-list{

	display: flex;

	justify-content: center;

}

#footer-content .social-list li {

	margin-right: 10px;

}

#footer-content .social-list li:last-child {

	margin-right: 0;

}

#footer-content .social-list path {

	fill:var(--darkNeutre);

	transition: ease .3s;

}

#footer-content .social-list li:hover path {

	fill:var(--boldAccent);

}

#footer-content .arborescence {

    border-top: 1px solid var(--darkNeutre);

    border-bottom: 1px solid var(--darkNeutre);

    width: 75%;

    display: flex;

    justify-content: center;

    text-align: center;

}

#footer-content .arborescence a{

    color: var(--darkNeutre);

	font-weight: 700;

	transition: ease .3s;

}

#footer-content .arborescence a:hover{

    color: var(--boldAccent);

}

#footer-content .arborescence li{

    margin:10px 0;

}

#copyright {

	text-align: center;

    padding: 10px 0;

    font-weight: 700;

}



/*

** BANDEAU EN-TETE

*/



#headerSection {

  position: relative;

  width: 100%;

  height: 500px;

}



#headerSection .contentWrap {

	width: 90%;

	max-width: 1280px;

	padding-left: 20px;

	text-align: center;

}



.bannerBackground {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

}



.headerSectionContent {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100%;

  color: #fff;

}



.bannerBackground img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center center;

  display: block;

}



.headerSectionContent h1 {

	position: relative;

	display: inline-block;

	margin: 0;

	background: #fff;

    display: inline-block;

    padding: 30px 25px;

    border-radius: 20px;

    color: var(--darkNeutre);

}



/*

** Prestations

*/



.listePrestations {

  display: flex;

  justify-content: space-around;

  flex-direction: column;

}



.listePrestations a {

  display: flex;

  margin-bottom: 100px;

}

.listePrestations h3{

	font-family: "Open Sans", sans-serif;

	font-weight: 700;

	margin-top: 0;

	border-bottom: 1px solid var(--darkNeutre);

}

.prestationBloc{

	transform: scale(1);
	transition: .5s ease;
	width: 100%;

}

.prestationBloc:hover{

	transform: scale(1.1);    

	cursor: pointer;

}

.imgPrestation{

	width: 100%;

	height: 150px;

	margin-bottom: 20px;

}

.imgPrestation img{

 width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

  display: block;

}

.prestationText{

	background: var(--boldMain);

    padding: 20px;

    border-radius: 20px;

    display: flex;

    flex-direction: column;

    position: relative;

    justify-content: center;

    align-items: center;

	text-align: center;

}

.prestationText p {

	color: var(--darkNeutre);

	padding-bottom: 40px;

}

.prestationText .price {

	display: inline-block;

    font-size: 2rem;

    font-weight: 800;

    background: var(--boldAccent);

    color: #fff;

    padding: 15px 20px;

    border-radius: 5px;

    position: absolute;

    bottom: 0;

    transform: translateY(50%);

	line-height: .6;

	text-align: center;

}

.prestationText .price span{

	font-weight: 400;

	font-size: 1rem;

}



.single-prestation #headerSection{

	position: relative;

}

.single-prestation h3:first-of-type{

	margin-top: 0;

}

.single-prestation .centragePrice{

	width: 100%;

	display: flex;

	justify-content: center;

}

.single-prestation .singlePrice {

	background: var(--boldAccent);

    display: inline-block;

    font-size: 3rem;

    font-weight: 700;

    color: #fff;

    padding: 25px 20px;

    border-radius: 10px;

    position: absolute;

    bottom: 0;

    transform: translateY(50%);

    margin: 0 auto;

    text-align: center;

    line-height: .5;

	box-shadow: -5px 5px var(--lightAccent), -10px 10px var(--boldMain);

}

.single-prestation .singlePrice span{

	font-weight: 400;

    font-size: 1rem;

}



/*

** Bon à savoir

*/

#bonASavoirSection {

	background: var(--boldAccent);

	color:#fff;

	padding: 40px 0;

}

#bonASavoirSection h2 {

	color:#fff;

	margin-top: 0;

	font-size: 1.8rem;

	font-weight: 700;

}



/*

** Accueil 

*/



.page-template-template-Home #contentSection{

	display: block;

}

.wp-block-jwh-liste-detaillee{

	min-height: 60px;

}

.wp-block-jwh-liste-detaillee .jwh-content-title {

	font-size: 1rem;

}



/*

** - Bandeau 

*/



.wp-block-jwh-banner .jwh-img-leftright img{

	height: 50% !important;

}

.wp-block-jwh-banner .jwh-img-leftright {

    align-items: end;

}

.wp-block-jwh-banner .jwh-block-wrapper{

	height: 350px !important;

}

.wp-block-jwh-banner {

	width: 100vw;

	margin: 0;

}



/*

** - Vidéo

*/



.page-template-template-Home figure{

	width: 100%;

	margin: 0 !important;

	padding: 0;

}
.page-template-template-Home figure.fullvideo{

	width: 100vw;

}


/*

** Responsive --------------------------------------------------------------

*/



/*

** - Tablette ----------

*/



/*

** -- Font

*/

@media (min-width: 720px) {

h1 {

	font-size: 4rem;

}

h2 {

	font-size: 2.5rem;

}

h3 {

	font-size: 1.5rem;

}

	

/*

** -- Navigation

*/

	

header{

	height: 50px;

}

header .wrapper #menu div:first-of-type{

	transform: scaleY(1);

	opacity: 1;

	position: relative;

	top:0;

    width: auto;

}

header .wrapper #menu div:first-of-type ul {

    flex-direction: row;

    padding: 0;

}

header .wrapper #menu div:first-of-type ul li{

    margin-right: 20px;

}

header .wrapper #menu #menu-responsive{

	display: none;

}

	

/*

** -- Footer

*/



#footer-content{

    flex-direction: row;

	justify-content: space-around;

	align-items: flex-start;

}

#footer-content .arborescence,

#footer-content .localisation { 

    border:none;

    width: auto;

    text-align: left;

}

#footer-content .social-list {

    justify-content: start;

}

#footer-content .social-list svg {

	width: 25px;

	height: 25px;

}

#footer-content .localisation .logoVille{

	flex-direction: row;

}



/*

** -- Bannière Accueil 

*/

.wp-block-jwh-banner .jwh-img-leftright img{

	height: 60% !important;

}

.wp-block-jwh-banner .jwh-block-wrapper{

	height: 450px !important;

}



/*

** Annonce

*/

#annonceSection .contentWrap{

	margin: 0 auto;

	display: flex;

	align-items: center;

	flex-direction: row;

}

.annonceText {

    background: var(--lightNeutre);

    padding: 20px;

    text-align: left;

    box-shadow: -10px 10px var(--boldAccent), -20px 20px var(--boldMain);

	width: 60%;

}

.annonceText p {

	font-size: 1rem;

}

.annonceImg {

	width: 40%;

	padding: 0 30px;

}



/*

** Formulaire de contact

*/



#contactForm .twoCol{

	flex-direction: row;

}

#contactForm .twoCol p{

	width: 49%;

}



.fondContact{

	height: 550px;

}



/*

** Prestations

*/



.listePrestations{

	flex-direction: row;
	flex-wrap: wrap;

}

.listePrestations a {

	width: 30%;

	margin-bottom: 70px;

}





/*

** - Desktop ----------

*/

@media (min-width: 960px) {



/*

** -- Bannière Accueil 

*/

.wp-block-jwh-banner .jwh-img-leftright img{

	height:80% !important;

}





.fondContact img{

	width: 100%;

	height: auto;

}



}



/*

** - Maxi-Desktop ----------

*/

@media (min-width: 1280px) {

}