/*
Theme Name: Yaz
URI: https://mon-webmaster.com/
Author: Cédric L
Version: 1.0
*/

@font-face {
    src: url('/wp-content/themes/yaz/font/Montserrat-Light.ttf') format('truetype');
    font-weight: 300; font-style: normal; font-family: 'Montserrat';
}
@font-face {
    src: url('/wp-content/themes/yaz/font/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500; font-style: normal; font-family: 'Montserrat';
}
@font-face {
    src: url('/wp-content/themes/yaz/font/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600; font-style: normal; font-family: 'Montserrat';
}
@font-face {
    src: url('/wp-content/themes/yaz/font/Montserrat-Black.ttf') format('truetype');
    font-weight: 900; font-style: normal; font-family: 'Montserrat';
}
:root 		{ --bleu: #284283; --jaune: #ffbe0b; --blanc:#fff; }

* 		{outline : none;}
html 	{ width:100%; height:100%; margin:0; padding:0;}
body 	{ width:100%; height:100%; margin:0; padding:0; overflow-x:hidden; font-family: 'Montserrat', sans-serif; background-color:var(--bleu); color:var(--blanc)!important; }
a 		{ text-decoration: none!important; transition : all 0.3s;}
a:hover { text-decoration: none!important;}
button 	{transition: all 0.3s; }

.bg-jaune 	{ background-color:var(--jaune)!important; color:#fff; }
.bg-gris 	{ background-color:#dddacd !important; color:#000; }

.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; }
.italic { font-style:italic; }
.underyellow { display:table; margin:auto; text-align:center; border-bottom: solid var(--jaune) 4px; padding-bottom: 6px;}


/* =========================================================================================================================================== */
/* === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === NAV === */
/* =========================================================================================================================================== */
#header                             { color: var(--blanc); }
#logo                               { max-width: 60px; height: auto; }
.menu                               { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; transition: all 0ms linear; padding: 0px; }
li.sidebar-item a.active            { text-decoration: underline !important; }

.side-nav-push                      { position: relative; left: 0; right: 0; }
.side-nav-push, .side-nav           { -webkit-transition: 280ms linear all; -o-transition: 280ms linear all; transition: 280ms linear all; }
.side-nav-open                      { -webkit-box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.35); box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.35); }

/* ------- Menu Bars ------- */
#menu_bars                          { padding: 5px; width: 38px; cursor: pointer; position: absolute; z-index: 1102; }
#menu_bars, #menu_bars span         { -webkit-transition: 300ms linear all; -o-transition: 300ms linear all; transition: 300ms linear all; }
.navbar-toggle-visible #menu_bars   { top: 21px; }
#menu_bars.active                   { position: fixed; height: 36px; }
#menu_bars span                     { width: 30px; background: #333333; height: 1px; display: block; margin: 0 auto; }
.navbar-toggle-visible #menu_bars span { background: #fff; }
#menu_bars span:nth-child(1),
#menu_bars span:nth-child(3)        { width: 30px; margin: 0 auto; }
#menu_bars span:nth-child(2)        { margin: 5px 0; }
#menu_bars:hover span:nth-child(1)  { width: 20px; margin: 0 auto; }
#menu_bars:hover span:nth-child(3)  { width: 10px; margin: 0 auto; }
#menu_bars.active span:nth-child(2) { display: none; }
#menu_bars.active span:nth-child(1),
#menu_bars.active span:nth-child(3) { width: 30px; top: 20px; position: absolute; left: 5px; margin-top: -1px; }
#menu_bars.active span:nth-child(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
#menu_bars.active span:nth-child(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }

/* ------- Menu Bars Left ------- */
.side-nav.side-nav-left.side-nav-open { -webkit-transition: 230ms linear all; -o-transition: 230ms linear all; transition: 230ms linear all; }
.navbar-toggle-visible #menu_bars.left { left: 14px; transition: 0.3s; }
.navbar-toggle-visible #menu_bars.left.active { left: 140px; transition: 0.4s; }

/* ------- Side Nav ------- */
.navbar-toggle-visible              { background-color: var(--jaune) !important; width: 70px; background: #fff; position: fixed; right: 0; top: 0; height: 70px; z-index: 800; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }
.side-nav                           { height: 100vh !important; background: #fff; padding: 55px 15px; width: 0; top: 0; bottom: 0; z-index: 900; position: relative; overflow: hidden !important; visibility: hidden; }
.side-nav-inner-setting             { margin: 20px auto 50px; }
.side-nav-open                      { visibility: visible; }
.side-nav .side-nav-list li         { display: block; width: 100%; opacity: 0; visibility: hidden; position: relative; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; }
.side-nav .side-nav-list li > a     { display: block; font-size: 17px; font-weight: 900; color: var(--bleu); margin: 10px 0; position: relative; text-transform: uppercase; }
.side-nav .side-nav-list li > a:active,
.side-nav .side-nav-list li > a:focus { color: #fff; }
.side-nav.side-nav-open .side-nav-list li { visibility: visible; }
.side-nav.side-nav-open li         { -webkit-transition-duration: 300ms; transition-duration: 300ms; -webkit-transition-property: all; transition-property: all; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 1; }
.side-nav .bottom-share             { text-align: center; visibility: hidden; opacity: 0; bottom: 0; padding-bottom: 50px; position: absolute; }
.nav-copyright                      { text-align: left; bottom: 30px; }
.side-nav.side-nav-open .bottom-share { visibility: visible; opacity: 1; }

/* ------- Side Nav Left ------- */
.navbar-toggle-visible.left         { left: 0; right: auto; }
.side-nav-left.slide-nav            { left: -180px; }
.side-nav-left.slide-nav.side-nav-open { left: 0; width: 180px; background-color: var(--jaune); border-right: 2px solid #fff; }
.side-nav.side-nav-left .side-nav-list { max-width: 180px; margin: 0 auto; }
.side-nav.side-nav-left .side-nav-list li { -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); }
.side-nav.side-nav-left li > a:hover { margin-left: 10px; }
.side-nav.side-nav-left .social_icon li > a:hover,
.side-nav.side-nav-right .social_icon li > a:hover { margin: 0; }
.side-nav.side-nav-left .side-nav-list li > a:active,
.side-nav.side-nav-left .side-nav-list li > a:focus { margin-left: 10px; }
.side-nav.side-nav-left.side-nav-open li { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.side-nav.side-nav-left .side-nav-list .side-nav-open li { transition: all linear !important; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+1) { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+2) { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+3) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+4) { -webkit-transition-delay: 0.25s; transition-delay: 0.25s; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+5) { -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+6) { -webkit-transition-delay: 0.35s; transition-delay: 0.35s; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+7) { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.side-nav.side-nav-left .side-nav-list li:nth-child(n+8) { -webkit-transition-delay: 0.45s; transition-delay: 0.45s; }



/* ============================================================================================================================================ */
/* === INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON ==== INPUT FORM BUTTON === */
/* ============================================================================================================================================ */

.btn { background-color:var(--jaune); color:var(--bleu)!important; border: solid 1px var(--jaune)!important; padding:15px 20px!important; font-weight:600; min-width: 300px;
    display: inline-block; border-radius:0px!important; }
.btn:hover { background-color:transparent; color:var(--blanc)!important; border: solid 1px var(--blanc)!important;}


.header hr { width:50%; }

.page-content h2 { font-size:26px; margin-bottom:50px!important; margin-top:60px!important; font-weight:600; text-align:center; display:table; margin:auto; text-align:center;
    border-bottom: solid var(--jaune) 4px; padding-bottom:6px; }
.page-content h3 { font-size:20px; margin-bottom:25px!important; margin-top:40px!important; text-align: center; }
.page-content h4 { font-size:19px; margin-bottom:25px!important; margin-top:30px!important; text-align: center; }
.page-content h5 { font-size:19px; text-align: center; }
.page-content ul { margin-bottom:15px!important; }
.page-content p  { margin-bottom:15px!important; }


/* ==================================================================================================================================== */
/* ===== HOMEPAGES===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== HOMEPAGES ===== */
/* ==================================================================================================================================== */



/* ============================================================================================================================ */
/* ===== PAGES===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== PAGES ===== */
/* ============================================================================================================================ */
.card { border-radius: 0px!important; }
.card-body { padding:5px!important; }
.card-title { text-align:center; margin-bottom:0px; }
.card-title a { color: var(--bleu)!important; }
.card-title a:hover { color: var(--jaune)!important; }
p.short-description { font-size:13px; text-align:center; margin-bottom:4px!important; }
p.annee { text-align:center; margin:0px!important; font-size:14px; margin-bottom:8px!important; }


#filtre-oeuvres { border-bottom: solid 2px #ffffff33; text-align:center; }
#filtre-oeuvres button { background-color:transparent; color:#fff; border: none; padding-bottom: 10px; margin-bottom: -2px; }
#filtre-oeuvres button.actif { border-bottom: solid 2px var(--jaune);  }

.card-img, .card-img-top { border-radius: 0px; }

/* --- Single oeuvre --- */
h1.titre-oeuvre { margin-bottom:50px!important; margin-top:60px!important; font-weight:600; text-align:center; display:table; margin:auto; text-align:center; border-bottom: solid var(--jaune) 4px; padding-bottom:6px; }

p.description-courte-oeuvre { font-weight:300; }

.wpcf7 { background-color: var(--orange); color: #fff; border-radius:5px;}
.form-container { box-shadow: rgba(0, 0, 0, 0.15) 0px 0.5rem 1rem; }
.wpcf7-form { padding: 20px 8px; }
.wpcf7-form label, .wpcf7-form input, .wpcf7-form textarea { width: 100%; border-radius:4px!important; }

.wpcf7-form input[type=submit] { transition-duration:0.3s; background-color: var(--bleu); color:#fff; padding: 8px; border:solid 1px #fff; }
.wpcf7-form input[type=submit]:hover { background-color: var(--jaune); color:var(--bleu); }
#contact-infos a {color:var(--orange)!important;}
#contact-infos a:hover { text-decoration:underline!important; }



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

footer 					{ font-size:16px; }
footer p 				{ font-size: 19px !important; }
footer img				{ max-width:40px; }
footer a 				{ font-size:13px!important; color:#fff!important; }
footer a:hover			{ color:var(--jaune)!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 (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; }
}