/*

Theme Name: EtienneFerrer.com
Description: Thème du site internet etienneferrer.com
Version: 1.0
Author: Stéphane Bourgeaud-Lignot
Author URI: https://www.stamhina.fr

*/



/* ----- Imports ----- */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- CSS RESET ----- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body { line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* ------ Structure ------ */

.ncontainer {max-width:900px; margin: 20px auto; /*background-color:#F99;*/}

#cover {position: relative; }
#cover img {width:100%; height:500px; object-fit: cover; margin:0; position: relative; top:0; left:0; border-radius: 0 0 200px 0;}
#cover div.ncontainer {width:900px; position:relative; margin: 0 auto; position: relative; top:-302px; padding-bottom:-300px; box-sizing: border-box;}
#cover div.hero { position:absolute; top:0; right:50px; width:500px; padding: 20px; border-radius: 20px 20px 100px 20px; height:300px; box-sizing: border-box; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /*border: 1px solid rgba(255, 255, 255, 0.2);*/}

footer { background: #FFFFFF; background: linear-gradient(185deg,rgba(255, 255, 255, 1) 50%, rgba(221, 221, 221, 1) 100%); background-size: 100% 200px; background-repeat: no-repeat; min-height: 500px; margin-top:300px;}


/* ------ Fonts ------ */
html {font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; }
h1 {font-family: 'EB Garamond', serif; font-size: 48px; font-weight: bold; margin-bottom: 30px}
h1 span {font-family: 'Inter', serif; font-size:20px; font-weight: bold; text-transform: uppercase; display:block;}
h2 {font-family: 'EB Garamond', serif; font-size: 36px; /*font-weight: bold;*/ margin: 50px 0px 30px;}
p {line-height: 1.3; text-align: justify; margin-bottom: 20px;}
p a {text-decoration: none; color:inherit;}
p a:hover {text-decoration: underline; color:#D93;}
b {font-weight: bold;}
.hid {display:none;}


a.cta {display:block; text-align: center; padding:10px 25px; margin: auto; border:1px solid #D93; border-radius: 30px; color:#D93; max-width: 50%; text-decoration: none; font-weight: bold;}
a.cta:hover {background-color:#D93; color:#FFF;}

a.cta_inline {display:inline-block; text-align: center; padding:10px 25px; margin: auto; border:1px solid #D93; border-radius: 30px; color:#D93; text-decoration: none; font-weight: bold; margin-right: 20px; margin-bottom: 20px;}
a.cta_inline:hover {background-color:#D93; color:#FFF;}


/* ------ Nav Desktop ------ */
nav {position: absolute; top:0; left:0; width:100%;}
nav a {text-decoration: none; color:inherit; cursor: pointer;}
#nav_desk1 {max-width: 900px; background-color: #FFF; border-radius: 0 0 30px 30px; position: relative; margin: 0 auto; display: flex; box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;}
#nav_desk2 {min-width: 790px; background-color: #DD9933; border-radius: 0 0 30px 30px; position: relative; margin: 0; display: flex;}

/* ------ Nav Mobile ------ */
#nav_mob1, #nav_mob2 {display:none; height:60px; width:300px; border-radius: 0 0 30px 0; position:absolute; top:0; left: 0;}
#nav_mob1 {height:60px; overflow: hidden; transition: all 1s; background-color: #D93; border-radius: 0 0 30px 0;}
#nav_mob2 {background-color: #D93; border-radius: 0 0 50px 0;}

#nav_mob1.active {height:auto; overflow: auto; width:100%; border-radius: 0 0 100px 0;}

#nav_mob2_toggle {width:40px; line-height: 60px; padding: 0 20px;}
#nav_mob2_toggle:after {content:"\2630"; color:#FFF; font-size: 36px;}
#nav_mob1.active #nav_mob2_toggle:after {content:"\2716"; color:#FFF; font-size: 36px;}

#logo {font-family: 'EB Garamond', serif; font-size:24px; font-weight: bold; color:#FFF; padding: 13px 25px;}
#logo span {font-family: 'Inter', serif; font-size:10px; font-weight: 400; text-transform: uppercase; display:block;}

#nav_desk1 > ul {position: absolute; top:0; right: 0; height: 60px;}
#nav_desk1 > ul li { display:inline-block; line-height: 60px; padding: 0 20px;}
#nav_desk2 ul {position: relative;}
#nav_desk2 li {display:inline-block; line-height: 60px; padding: 0 25px; color:#FFF; font-weight: bold; border-bottom: #DD9933 3px solid;}
#nav_desk2 li:hover {border-bottom: #FFF 3px solid;}


/*#nav_mob2 > ul {position: absolute; top:0; right: 0; height: 60px;}*/
/*#nav_mob2 > ul li { display:inline-block; line-height: 60px; padding: 0 25px;}*/
/*#nav_mob2 ul {position: relative;}*/
#nav_mob2 li {display:inline-block; line-height: 60px; color:#FFF; font-weight: bold; border-left: #DD9933 3px solid;}
#nav_mob2 li:hover {border-left: #FFF 3px solid;}


/* ------ Repertoire ----- */

ul.repertoire {width:100%;  margin-top: 50px;}
ul.repertoire li {width: 100%;  margin-bottom: 10px; display:flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #CCC;}
ul.repertoire li div {width:30%;  font-weight: bold; color:#D93; text-align: right;}
ul.repertoire ul {width:60%; }
ul.repertoire ul li {margin-bottom: 10px; padding-bottom: 0; border-bottom: none;}


/* ------ Agenda Full ----- */

ul.agenda_full {width:100%;  margin-top: 50px;}
ul.agenda_full li {width: 100%;  margin-bottom: 10px; display:flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #DDD;}
ul.agenda_full li div.col1 {width:5%;  font-weight: bold; color:#D93; text-align: right;}
ul.agenda_full li div.col1 span.date1 {font-size: 24px;}
ul.agenda_full li div.col1 span.date2 {text-transform: uppercase;}
ul.agenda_full li div.col1 span.date3 {}


ul.agenda_full li div.col3 {width:35%; text-align: right;}
ul.agenda_full ul {width:50%;}
ul.agenda_full ul li {margin-bottom: 30px; padding-bottom: 0; border-bottom: none; width:100%; display:block;}
ul.agenda_full ul li h3 {display:inline; width:100%; font-size: 24px; font-weight: bold;}

ul.agenda_full li:last-of-type {border-bottom:none;}


/* ------ Breadcrumbs ------ */
.breadcrumbs li {display : inline-block; margin-right: 10px;}
.breadcrumbs a {font-size: 10px; text-transform: uppercase; color:#D93; text-decoration: none;}
.breadcrumbs a:hover {text-decoration: underline;}
.breadcrumbs a:after {content:"\00BB"; margin-left: 10px; color:#CCC; text-decoration: none;}
.breadcrumbs li:last-of-type a:after {content:""; margin-left: 10px;}


/* ------ Contact ------ */
footer #contact {max-width: 900px; min-height: 300px; background-color: #DD9933; border-radius: 30px 30px 100px 30px; margin: 50px auto 0; padding: 0 30px 0 0; box-sizing: border-box; display: flex; flex-direction: row; justify-content:space-between; align-items: flex-end;}
footer #contact img {margin:0 auto; width:300px; height:300px; border-radius: 30px; object-fit: cover; background-color: #F00;}
footer #contact .wpforms-container {width:60%;}
footer #contact h2 {display:none;}
footer #contact input {width:100%; background-color: #DD9933; color:#FFF; border: 1px solid #FFF; height: 40px; line-height: 40px; border-radius: 10px 10px 10px 10px; font-size: 16px;}
footer #contact textarea {width:100%; background-color: #DD9933; color:#FFF; border: 1px solid #FFF; height: 120px;font-size: 16px; border-radius: 10px 10px 40px 10px; transition: height; transition-duration: 0.5s;}
footer #contact textarea:focus {height:300px;}
footer #contact button {background-color: #DD9933; border-radius: 30px; border: 1px solid #FFF; color:#FFF;}

/* ------- Footer ------ */
ul#menu-footer li {display : inline-block; margin-right: 20px;}
ul#menu-footer a {font-size: 10px; text-transform: uppercase; color:#CCC; text-decoration: none;}
ul#menu-footer a:hover {font-size: 10px; text-transform: uppercase; color:#D93;}




@media (max-width: 940px) { 

	/* --- Structure --- */

	nav {padding:0px;}
	footer {padding: 0 20px;}
	.ncontainer {margin: 20px;}


	#nav_desk1 {display:none;}
	#nav_mob1 {display:flex;}
	#nav_mob1 ul {padding:100px 0px 20px;}
	#nav_mob1 li {padding:20px 20px;}
	#nav_mob2 {display:flex;}
	#nav_mob1.active #nav_mob2 {border-bottom: 2px #FFF solid; border-right: 2px #FFF solid;}


	ul.repertoire li div span {display:none;}

	ul.agenda_full li div.col3 {display:none;}
	ul.agenda_full ul {width:85%;}

	#contact img {display:none;}
	#contact {padding: 30px; width: 100%; box-sizing: border-box;}
	#contact .wpforms-container {width:100%; flex-grow: 1; justify-content:space-around;}


	/*--- Cover --- */
	#cover img {width:100%; height:300px; object-fit: cover; margin:0; position: relative; top:0; left:0; border-radius: 0 0 50px 0;}
	#cover div.ncontainer {width:100%; position:relative; margin: 0 auto; position: relative; top:-0px; padding: 20px 20px 30px; box-sizing: border-box; /*border-bottom:3px solid #D93;*/ border-radius: 0 0 0 0;}
	#cover div.hero { position:relative; top:0; right:0; width:100%; padding: 0; height:auto; box-sizing: border-box; background:none;}




	}