/*
Theme Name: Tielle
URI: https://mon-webmaster.fr/
Author: Cédric lengagne
Version: 1.0

*/

@font-face {
    font-family: 'LTSaeada';
    src: url('/wp-content/themes/tielle/font/LTSaeada-Light.otf') format('opentype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'LTSaeada';
    src: url('/wp-content/themes/tielle/font/LTSaeada-Medium.otf') format('opentype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'LTSaeada';
    src: url('/wp-content/themes/tielle/font/LTSaeada-Regular.otf') format('opentype');
    font-weight: 400; /* Regular */
    font-style: normal;
}

@font-face {
    font-family: 'LTSaeada';
    src: url('/wp-content/themes/tielle/font/LTSaeada-SemiBold.otf') format('opentype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

@font-face {
    font-family: 'LTSaeada';
    src: url('/wp-content/themes/tielle/font/LTSaeada-Bold.otf') format('opentype');
    font-weight: 700; /* Bold */
    font-style: normal;
}

@font-face {
    font-family: 'LTSaeada';
    src: url('/wp-content/themes/tielle/font/LTSaeada-ExtraBold.otf') format('opentype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
}
@font-face {
    font-family: 'nexa';
    src: url('/wp-content/themes/tielle/font/nexa-rust-sans-black.otf') format('opentype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
}


body {
    font-family: 'LTSaeada', sans-serif;
    font-weight: 500;
}




* {outline : none;}
html {width:100%; height:100%; margin:0; padding:0;}
body { 
	width:100%; height:100%; 
	margin:0; padding:0; 
	font-size:15pt;
	transition-duration:0.5s; 
	background-color: #fff;
	overflow-x:hidden;
}
a 		{text-decoration: none!important; transition : all 0.3s;}
a:hover {text-decoration:none!important;}
button 	{transition: all 0.3s; }

:root {
  --color-1: #ffc836;
  --color-dark: #ffc836;
}
/*
#2D2A8C   bleu
#03A696   vert
#04BF9D   vert plus clair
#F2E6D8   beige
#F29985   orange
*/

.reveal {
  position: relative;
  transform: translateY(-80px);
  opacity: 0;
  transition: 1.2s all ease;
  z-index: 0;
}

.reveal.on {
  transform: translateY(0) !important;
  opacity: 1 !important;
  z-index: 99;
}

.reveal-right {
  position: relative;
  transform: translateX(100px);
  opacity: 0;
  transition: 1.2s all ease;
  z-index: 0;
}

.reveal-right.on {
  transform: translateX(0) !important;
  opacity: 1 !important;
  z-index: 99;
}

.reveal-left {
  position: relative;
  transform: translateX(-100px);
  opacity: 0;
  transition: 1.2s all ease;
  z-index: 0;
}

.reveal-left.on {
  transform: translateX(0) !important;
  opacity: 1 !important;
  z-index: 99;
}

/* POLICES */
p {font-weight: 400;}
a { color:var(--color-1); }
h1, h2, h3, h4 { font-family:'nexa'; }
h3 { font-size:25px;}
#hero-page h1 	{ font-size:65px; -webkit-text-stroke: 1px black; }
.baseline 		{ font-family:'nexa'; -webkit-text-stroke: 1px black; font-size:35px; }
.home h2 		{ text-transform: uppercase; font-size:35px; font-family:'nexa'; }
.home h1 		{ font-size:65px; -webkit-text-stroke: 1px black; /* width and color */ }

@media (max-width:1491) {
	#hero-page h1 	{ font-size:45px; }
}
@media (max-width:991px) {
	.home h1 		{ font-size:50px; }
	#hero-page h1 	{ font-size:50px; }
}
@media (max-width:767px) {
	.home h2 		{ font-size:33px!important; }
	.home h1 		{ font-size:45px; }
	#hero-page h1 	{ font-size:45px; }
	.baseline 		{ font-family:'nexa'; -webkit-text-stroke: 1px black; font-size:25px; }

}
@media (max-width:467px) {
	.home h2 		{ font-size:28px!important; }
	.home h1 		{ font-size:34px; }
	#hero-page h1 	{ font-size:36px; }
}
@media (max-width:359px) {
	#hero-page h1 	{ font-size:28px; }
}
/* ============================================================================================================================================ */
/* === INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON === */
/* ============================================================================================================================================ */

/* --- Bouton 1 --- */
	.btn.btn-primary,
	.button,
	form.wpcf7-form input[type=submit]
	{
		transition : all 0.1s; background:var(--color-1)!important; color:#000!important; border-radius:0px!important; border:1px solid #000!important;
		padding:10px 25px!important; font-size: 20px!important; font-weight: 700!important; box-shadow: 3px 3px 3px #000;
		margin-right:2px; margin-bottom:2px;
		   text-align: center;
    display: inline-block;
    width: auto!important;
	}

	.btn.btn-primary:hover,
	.button:hover,
	form.wpcf7-form input[type=submit]:hover
	{
		background-color:#ffffff !important;
		margin-left:2px; margin-top:2px;margin-right:0px; margin-bottom:0px;
		box-shadow: 1px 1px 5px #000;
	}

/* --- Input et select --- */
	input[type=text], input[type=email], input[type=number], input[type=password], textarea, select,
	#customer_details input, .checkout_coupon input,	.edit-account input
	{
		transition : all 0.3s;
		font-weight: 300;
		border: 1px solid rgba(0, 0, 0, 0.1) !important;
		padding-left: 15px;	padding-right: 15px;
		background: #f6fffc !important;
		color: rgba(0, 0, 0, 0.9) !important;
		font-size: 17px;
		border-radius: 0px;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}
	textarea {
		padding:10px;
	}
	input:focus, textarea:focus {border:solid 1px var(--color-1)!important; }




/* ==================================================================================================================================== */
/* ===== HOMEPAGES===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== */
/* ==================================================================================================================================== */
.home h1 {  }



.owl-carousel-expertises .item { height:100%; }
.owl-carousel button.owl-dot { width: 13px; height: 13px; background: #8f8f8f55!important; margin-left: 4px; margin-right: 4px; border-radius: 100%; }
.owl-carousel button.owl-dot.active { width: 13px; height: 13px; background: var(--color-1)!important; }
.owl-dots { text-align: center; }

.bouton { background-color:#fff!important; color:#1f3159!important; text-transform:uppercase; border:solid 2px #5c3b28; box-shadow:3px 3px 0px 0px #5c3b28; border-radius:8px; padding:8px 15px; transition-duration:0.3s; font-weight:600; }
.bouton:hover { background-color:#f5ecdd!important; color:#f6a305!important; text-transform:uppercase; border:solid 2px #5c3b28; box-shadow:3px 3px 0px 0px #5c3b28; border-radius:8px; padding:8px 15px; transition-duration:0.3s; }


#hero .container 			{ position:relative; }
#hero .hero-img 			{ border-radius:30px; width:100%; }
#hero 						{ background-color: #fff!important; position:relative; color: #f5ecdd!important; text-transform:uppercase; padding-bottom:180px; }
#hero-container 			{ position: absolute; top:0; text-align:center; margin:auto; margin-top:10%; left:20%; width:60%;}
#tielle-hero 				{ position: absolute; right:4%; bottom:0px; width:50%; max-width:700px; z-index:98; }
	@media (max-width:1491px) {
		#hero-container 			{ margin:auto; margin-top:10%; left:10%; width:80%;}
		#tielle-hero 				{ right:0px; bottom:-30px; max-width:50%; }
	}
	@media (max-width:991px) {
		#hero-container 			{ margin-top:70px; left:10%; width:80%;}
		#tielle-hero 				{ top:350px; width:90%; max-width:550px; }
		#hero .hero-img 			{ min-height:500px; object-fit:cover; }
	}
	@media (max-width:767px) {
		#tielle-hero 				{ top:360px; width:100%; max-width:700px;  }
		#hero .hero-img 			{ border-radius:0px; }
		#hero 						{ padding-bottom:0px; }
	}
	@media (max-width:591px) {
		#tielle-hero 				{ top:410px; max-width:550px; }
	}
	@media (max-width:467px) {
		#hero-container 			{ left:5%; width:90%;}
		#tielle-hero 				{ top:450px;}
		#hero .hero-img 			{ min-height:500px; object-fit:cover; }
	}

#saveurs 					{ position: relative; margin-top:-100px; }
#saveurs .background 		{ background-color: #f5ecdd; position: relative; padding-bottom: 100px; padding-top:60px; }
#saveurs .clipped 			{ position:relative; width:100%; height:80px; background:url('/wp-content/themes/tielle/assets/clippath1.svg') no-repeat center top; background-size:cover; }
#saveurs h2 				{ color: #7dcad2!important;}
#saveurs img 				{ position: absolute; right: 0; top: -2%; width: 45%; max-width:580px; }

	@media (max-width:1491px) {
		#saveurs .background 		{ background-color: #f5ecdd; position: relative; padding-bottom: 100px; padding-top:60px; }
		#saveurs img 				{ top: 22%; width: 40%; max-width:470px; }
	}
	@media (max-width:991px) {
		#saveurs .background 		{ padding-top:60px; }
		#saveurs img 				{ top: 25%; width: 50%; max-width:100%; }
	}
	@media (max-width:767px) {
		#saveurs .background 		{ padding-top:280px; }
		#saveurs img 				{ top: -5%; width: 80%; }
	}
	@media (max-width:591px) {
		#saveurs .background 		{ padding-top:220px; }
	}

#histoire 					{ position: relative;	margin-top:-100px; }
#histoire .background 		{ background-color: #7dcad2; color:#f5ecdd!important; position:relative; padding-bottom:0px; }
#histoire .clipped 			{ position:relative; width: 100%; height: 100px; background-color: #7dcad2; clip-path: polygon(0 0, 100% 100%, 0 100%); z-index: 2; }
#histoire h2 				{ color: #f5ecdd!important; margin-bottom: 20px;}
#histoire .bouton 			{ display: inline-block; margin-top:25px;  }
#histoire .pouffre 			{ max-width: 420px; width:100%; height:auto; margin:auto; display:block; margin-bottom:20px; }
	@media (max-width:767px) {
		#histoire .bouton 		{ padding:8px 5px; transition-duration:0.3s; margin:auto; margin-bottom:20px; margin-top:25px;  }
		#histoire .bg-bleu 		{  }
	}

#simplicite 				{ position: relative; margin-top:-80px; }
#simplicite .background 	{ background-color: #f5ecdd; color:#000!important; position: relative; padding-bottom: 100px; padding-top:60px; }
#simplicite .clipped 		{ position: relative; width: 100%; height: 80px; background: url('/wp-content/themes/tielle/assets/clippath1.svg') no-repeat center top; background-size:cover; }
#simplicite h2 				{ color: #f59701!important; margin-bottom:25px;}
#simplicite img 			{ position: absolute; left:0; bottom:16%; width:43%; max-width:560px; z-index: 1; }

	@media (max-width:991px) {
		#simplicite .background 	{ background-color: #f5ecdd; color:#000!important; position: relative; padding-bottom: 69%; padding-top:60px; }
		#simplicite img 			{ position: absolute; left: 0; bottom: 0; top:auto; width: 80%; max-width:780px; }
	}
	@media (max-width:767px) {
		#simplicite .background 	{ background-color: #f5ecdd; color:#000!important; position: relative; padding-bottom: 69%; padding-top:60px; }
		#simplicite img 			{ position: absolute; left: 0; bottom: 0; top:auto; width: 80%; max-width:600px; }
	}

#convivialite 				{ position: relative; margin-top:-100px; }
#convivialite .background 	{ background-color: #7dcad2; color:#f5ecdd!important; position:relative; padding-bottom:100px; }
#convivialite .clipped 		{ position:relative; width: 100%; height: 100px; background-color: #7dcad2; clip-path: polygon(0 0, 100% 100%, 0 100%);; z-index: 2; }
#convivialite h2 			{ color: #f5ecdd!important; font-size:3rem; }

#conclusion 				{ position: relative; margin-top:-80px; }
#conclusion .background 	{ background-color: #f5ecdd; color:#7dcad2!important; position: relative; font-weight:600; font-size:1.4rem; padding-bottom:80px; padding-top:40px; }
#conclusion .clipped 		{ position: relative; width: 100%; height: 80px; background: url('/wp-content/themes/tielle/assets/clippath1.svg') no-repeat center top; background-size:cover; }

#recettes 					{ position: relative; margin-top:-80px; }
#recettes .background 		{ background-color: #7dcad2; color:#fff!important; position: relative; padding-top:80px; padding-bottom:60px; }
#recettes .clipped 			{ position: relative; width: 100%; height: 80px; background: url('/wp-content/themes/tielle/assets/clippath2.svg') no-repeat center top; background-size:cover; }
#recettes h2 				{ color: #f5ecdd!important; text-align:center; margin-bottom:35px; }


.card-tielle 				{ padding: 0px 0px; position:relative; margin-bottom:60px; display:block; }
.card-tielle-container 		{ text-align:center }
.card-tielle-container img 	{ max-width:100%; height:400px; object-fit:cover; border:solid 4px #f5ecdd; border-radius:15px; cursor:pointer; }
.card-tielle-title 			{ padding: 0px 20px; position:absolute; width:100%; bottom:-16px; text-align:center; }
.card-tielle-title p 		{ display:inline-block; margin:auto; color:#1f3159!important; background-color:#f5ecdd;
    text-transform: uppercase; padding: 4px 5px;
    font-size: 0.88rem !important;
    font-weight: 600;
    border: solid 2px #5c3b28;
    box-shadow: 4px 4px 0px 0px #5c3b28;
    border-radius: 8px;
    font-family: 'nexa'; 
	transition-duration: 0.3s;
	cursor:pointer;
}

.card-tielle:hover .card-tielle-title p { background-color: #f5ecdd !important; color: #f6a305 !important; }

/* ============================================================================================================================ */
/* ===== PAGES===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== */
/* ============================================================================================================================ */

#hero-page .container 			{ position:relative;  }
#hero-page img 					{ min-height: 550px; object-fit: cover; }
#hero-page 						{ background-color: #fff!important; position:relative; color: #f5ecdd!important; text-transform:uppercase; padding-bottom:80px; }
#hero-page #hero-container 		{ position: absolute; top:0; width:100%; text-align:center; margin-top:8%; left:8%; width:84%; }
	@media (max-width:1491px) {
		#hero-page #hero-container 		{ margin-top:9%; left:8%; width:84%; }
	}
	@media (max-width:991px) {
		#hero-page #hero-container 		{ margin-top:10%; }
	}
	@media (max-width:767px) {
		#hero-page #hero-container 		{ margin-top:80px; }	
		#hero-page img 					{ min-height: 500px; object-fit: cover; }
	}
	@media (max-width:359px) {
		#hero-page #hero-container 		{ margin-top:22%; }	
		#hero-page img 					{ min-height: 420px; object-fit: cover; }
	}
#introduction 				{ position: relative; margin-top:-145px; }
#introduction .background 	{ background-color: #7dcad2; color:#000!important; position: relative; padding-bottom: 140px; padding-top:40px; }
#introduction .clipped 		{ position: relative; width: 100%; height: 80px; background: url('/wp-content/themes/tielle/assets/clippath2.svg') no-repeat center top; background-size:cover; }

#contenu 					{ position: relative; margin-top:-80px; }
#contenu .background 		{ background-color: #f5ecdd; position: relative; padding-bottom: 200px; }
#contenu .clipped 			{ position: relative; width: 100%; height: 80px; background: url('/wp-content/themes/tielle/assets/clippath1.svg') no-repeat center top; background-size:cover; }

#conclusion-page 				{ position: relative; margin-top:-100px; }
#conclusion-page .background 	{ background-color: #7dcad2; color:#fff!important; position: relative; font-weight:600; font-size:1.4rem; padding-bottom:80px; padding-top:30px; }
#conclusion-page .clipped 		{ position: relative; width: 100%; height: 80px; background: url('/wp-content/themes/tielle/assets/clippath2.svg') no-repeat center top; background-size:cover; }

#similaire 					{ position: relative;	margin-top:-100px; }
#similaire .background 		{ background-color: #7dcad2; color:#f5ecdd!important; position:relative; padding-top:100px; padding-bottom:100px; }
#similaire .clipped 		{ position:relative; width: 100%; height: 100px; background-color: #7dcad2; clip-path: polygon(0 0, 100% 100%, 0 100%); z-index: 2; }
#similaire ul 				{ list-style:none; padding:0px; }
#similaire p.title-2 		{ color: #f5ecdd!important; text-align: center;font-family: 'nexa';text-transform: uppercase;font-size: 28px !important; margin-bottom: 35px;}

.the-content h2 { margin-top:40px; margin-bottom:25px; line-height:inherit; color:#f59701!important }
.the-content h3 { margin-top:30px; margin-bottom:25px; line-height:inherit; }
.the-content h4 { margin-top:25px; margin-bottom:25px; line-height:inherit; }
.the-content img { border-radius:15px; }






/* ============================================================================================================================ */
/* ===== BLOG ===== BLOG ===== BLOG ===== BLOG ===== BLOG ===== BLOG ===== BLOG ===== */
/* ============================================================================================================================ */
.blog-card-container	{ background-color: #ffffff88; box-shadow: 0px 0px 15px 0px #d9d9d955; }
.blog-card h2, 
.blog-card h3, 
.blog-card p.titre 	{ font-weight:bold;font-size:18px!important;border-left:solid 3px #003542;color:#003542!important;margin:10px 5px;padding:0 5px;text-align:left!important; }

.blog-card:hover h2,
.blog-card:hover h3, 
.blog-card:hover p.titre  	{color:#08092d!important; padding-left:10px; padding-right:0px;}



.blog-card img 			{ object-fit:cover; aspect-ratio: 16/9; filter: grayscale(1) sepia(100%) hue-rotate(180deg) brightness(0.5); transition-duration: 0.3s; }
.blog-card:hover img 	{ filter: grayscale(0.5) sepia(0%) hue-rotate(0deg) brightness(0.8); }
.blog-card-cat 			{ position: absolute; padding:2px 8px;right: 0; top: 0; display: block; z-index:12; }
.blog-card .excerpt,.blog-card .excerpt p  	{ text-align:start; font-size: 16px !important; padding:5px; }






/* === SINGLE === SINGLE === SINGLE === SINGLE === SINGLE === SINGLE === */




/* ========================================================================================================================== */
/* ===== FOOTER ===== FOOTER ===== FOOTER ===== FOOTER ===== FOOTER ===== FOOTER ===== FOOTER ===== FOOTER ===== FOOTER ===== */
/* ========================================================================================================================== */

footer 					{ color:#1f3159!important; font-size:16px; background:#f5ecdd!important;  }

footer p.heading		{ font-weight: normal; font-size: 15px!important; font-weight: 400; }
footer p 				{ font-size:13px!important; color:#1f3159!important; }
footer a 				{ font-size:13px!important; color:#1f3159!important; }
footer ul a 			{ padding-right:6px; font-size:13px; }

#subsubFooter p			{ font-size:12px!important; text-align:center;}
#subsubFooter a			{ font-size:12px!important; text-align:center;}
#subsubFooter a:hover	{ color: rgba(255,255,255,1);}


/* ============================================================================================================================= */
/* ===== MEDIA QUERIES ===== MEDIA QUERIES ===== MEDIA QUERIES ===== MEDIA QUERIES ===== MEDIA QUERIES ===== MEDIA QUERIES ===== */
/* ============================================================================================================================= */

@media (max-width: 1297.98px) {
	nav ul li a { padding:1.5rem 14px;}
}

@media only screen and (max-width: 991px) {
	.nav-mobile { display: flex; justify-content:center; align-content:center; height:40px!important; position: relative; }
	.menu { flex-direction:column; flex-wrap:nowrap; display:none; }
	#main-nav { width: 100%; }
	#main-nav ul { display: none; }
	#main-nav ul li { float: none; }
	#main-nav ul li a { padding: 15px; line-height: 20px; }
	#main-nav ul li ul li a { padding-left: 30px; }
	.sub-menu { position: static; }  nav { top: 0px; }
	.menu-msw-primary-menu-photography-container,
	.menu-menu-container { position:absolute; left:0; right:0; text-align:left; background-color:#000000!important;box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1);}
	#header.bis .menu-msw-primary-menu-photography-container,
	#header.bis .menu-menu-container { background-color:#ffffff!important; }
}




@media (min-width: 850px) 	{
	.container { max-width: 820px; }
	.no-customize-support main { max-width:820; margin:auto; }
}

@media (min-width: 992px) 	{
	.container { max-width: 960px; }
	.no-customize-support main { max-width:960px; margin:auto; }
	.menu { display:flex!important;	}
	.nav-list { display: block !important; }
}
@media (min-width: 1400px) 	{
	.container { max-width:1320px; }
	.no-customize-support main { max-width:1320px; margin:auto; }

}