/*
	Theme Name: Petits Ateliers Light
	Author: Alain-Aymerick FRANCOIS
	Description: Thème enfant basé sur "WP Bootstrap Starter"
	Template: wp-bootstrap-starter
	Version: 0.0.2
	Tags: canope
	Text Domain:  petits_ateliers_light
*/

/* Polices CANOPE */
@import url("css/fonts.css");

body { background-color: #FFFFFF; font-family: "Caecilia-Roman", Lato, sans-serif; }
h4 { font-family: Caecilia-Bold;font-size: 1.35em;font-weight: 300;text-transform: uppercase; }
a:hover { color:#000000; }

.box_spacing { height:2em; }

/*En tête */
header#masthead { display:none; }
/* #page-sub-header {  background-color: transparent !important; } */
#page-sub-header { height: 282px; background-color: transparent !important; padding: 0 !important; } 
#page-sub-header::before, #page-sub-header:after { display: block;content: "";height: 25%;}

/*.page-sub-header_content h1 { padding: 13px 26px 0 26px;font-family: Simplon-Medium;font-size: 200% !important;font-weight: 400;color: #31849b;letter-spacing: -.005em;display: inline-block; margin: 0;background-color: #fff; } */
/* .page-sub-header_content p { padding: 10px 22px 12px 26px;font-size: 90%;color: #000;font-family: Caecilia-Roman;letter-spacing: -.005em;background-color: #fff; } */
.page-sub-header_content { height: 50%; }

.page-sub-header_content { max-width: 100% !important; }
.page-sub-header_content h1 { display: inline-block;float: left;text-align: left;background: rgba(255,255,255, 0.8) !important;font-family: Simplon-Medium;font-size: 200% !important;text-transform: uppercase;padding: 1.25rem 1.25rem 0rem 1.25rem !important;margin-bottom: 0 !important;font-size: 2rem;line-height: 2rem; }
.page-sub-header_content .description_title { display: block;width: 100%;float: left; }
.page-sub-header_content .description_title p { background: rgba(255,255,255, 0.8) !important;margin: 0 !important;text-align: left;padding: 0.25rem 0rem 0rem 1.25rem !important;width: 32rem !important; }

#mes_abonnements a { font-family: Simplon-Regular;text-transform: uppercase;text-decoration: none; }

/* Navigation */
.navbar-container { background-color: #FFFFFF; }
.navbar { padding-bottom: 0; }
.nav-link {	color:#000000 !important;font-family: Simplon-Regular;font-size: 1.0rem; letter-spacing: .04em;text-transform: uppercase; }
/*.home_link > a:before { content:url("images/pictoHomeBlack.png");color: #00f;text-indent: 0;float: left; }*/
.home_link > a:before { background-image: url('images/pictoHomeBlack.png'); background-size: 18px 17px; display: inline-block; width: 18px; height: 17px; content:""; color: #00f;text-indent: 0;float: left; }
.home_link > a { width: 36px;white-space: nowrap;overflow: hidden;text-indent: 40px; }
.navbar-nav > li { border-bottom: 2px solid transparent !important; }
.barre_grise { position:absolute; left:0px;width:100vw; max-width:100%;display: block;background-color: #f5f5f5;border-top: solid 1px #ccc; }
.barre_grise_content { padding-top: 0.6em; /*padding-bottom: 2.6em;*/ }

#animateur { float:left;padding-top: 0.4em; }
#seconnecter { float:right; height: 34px;min-width: 180px;background-image: url('images/spriteBtAction.png');background-position: right 9px;background-repeat: no-repeat;padding: 6px 14px;margin-bottom: 0.6em; }
#seconnecter a { font-family: Caecilia-Roman, sans-serif; font-size: 1.0em; font-weight: 500; color: #fff; }
#seconnecter a { text-decoration: none; }

/* Contenu principal */
.site-content { padding-top: 0; }
.squelch-taas-toggle .ui-accordion-header, .squelch-taas-accordion .ui-accordion-header { padding: .5em .5em .5em 2.0em !important; }
.entry-content { border-bottom: solid 4px #000; padding-bottom: 20px; }

/* Contenu principal >> Popup Demo */
.demo { margin-top: 1em;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; padding:0.8em;color: #fff; }
.demo .close { float:right; }
.demo .engrenages { max-width:10%; }
.demo_title { float: left;width: 100%;font-size: 1.6em; padding:0.2em; }
.demo p { float: left;width: 100%;font-size: 1em; padding:0.4em; }
.demo > p > label { width: 330px;display: inline-block;text-align: left; }
.demo > p > span { width: 300px;display: inline-block;text-align: center;padding-bottom: 0.4em;padding-top: 0.4em;margin-bottom: 0.4em; }
.demo > p > span:hover, .demo > p > span > a:hover { cursor: pointer; }

.btn_connecter { background-color: #FFFFFF; }
.btn_essayer_acheter { background-color: #000000; }
.btn_essayer_acheter a { color:#FFFFFF; }
.btn_essayer_acheter a:hover { color:#FFFFFF; }

/* Contenu principal >> Liste ateliers */
.liste_ateliers h4 { font-family: Caecilia-Bold;font-size: 1.35em;font-weight: 300; width: 100%; padding: 1em 0 0 0; }
.type_atelier { background-color: #E5E5E5; }
.picto_theme { padding-right: 1em; }
.atelier { background: #FFFFFF;margin: 1em 0 0.8em 1.98em;padding: 0 !important; }
.atelier h4 { text-align: left;padding-left:1em;height: 3em;font-size: 1.0em;font-weight: normal;font-family: Simplon-Regular !important; text-transform: none !important; }
.atelier p { text-align: left;padding-left:1.2em;height: 3em;font-size: 0.8em;font-weight: normal;font-family: Simplon-Regular !important; text-transform: none !important; }
.atelier a[title]:hover:after { position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0.4);content: attr(title);color: #FFFFFF;font-size: 0.8em;font-weight: normal;font-family: Simplon-Regular !important; text-transform: none !important;padding: 0.6em; }
.atelier img { width:100%; height:auto; }
.atelier img:hover { opacity: 0.4; }
.atelier .note_image { float: left;width:50%;padding: 0em 0 0 2em; }
.atelier .note_image > img { width:50% }
.atelier .note_texte { float: right;width:50%;font-size: 0.8em;font-weight: normal;font-family: Simplon-Regular !important; text-transform: none !important;text-align:right;padding: 0.2em 2em 0 0; }

/* Contenu principal >> Atelier */
#btn_retour { text-decoration: none;float: right;}
#btn_retour span { background-color:#810059; color:#FFFFFF;padding: 0.4em 0.8em 0.4em 0.8em; }
#btn_retour span:before { font-family: 'dashicons';content: '\f340';margin-right: 0.4em; vertical-align: middle; }
.atelier_single_header h1 { font-size: 1.6em;font-weight: 600;text-transform: uppercase; }
.atelier_single_header h1 > span { font-size: 0.7em; font-weight: normal; color: #000000; margin-left: 0.2em; }
.atelier_single_header h4 { font-family: Caecilia-Bold, sans-serif;font-size:1em;text-transform:none;color:#000000;font-weight:normal; }
.atelier_single_header p { font-size:1.2em;text-transform:none;color:#000000; }

.atelier_single_acf { margin-top: 1em; }
.atelier_single_acf p { font-size: 0.9em !important;padding-top: 0 !important; }
.atelier_single_acf .disabled:hover { cursor: not-allowed; }
.atelier_single_acf .btn { color: #FFFFFF;margin-right:0.2em;border-radius: 0px !important; width:30%; }
.atelier_single_acf .btn img { height:1.2em; margin-right:0.2em; }
.atelier_single_acf .btn a { text-decoration:none; color: #FFFFFF; }

.atelier_single_body { margin-top: 0 !important; }
.atelier_single_body h4 { width: 100%;margin-bottom: 1em;border-top: 4px solid;padding-top: 0.6em;text-transform: uppercase; }
.atelier_single_body h5 { font-size: 1em; font-weight: 800; }
.atelier_single_body .wp-video { margin-left: auto;margin-right: auto;margin-bottom: 1em; }
.atelier_single_body .atelier_single_body_part { margin-bottom: 2em; }
.entry-content, .post.hentry { border-bottom: 0 !important;padding-bottom: 0 !important;margin-bottom: 0 !important; }

.logged-in-as > a { color: #FFFFFF; }

#comments { padding: 1em; }
#comments h1 { font-family: Caecilia-Bold;font-size: 1.35em;font-weight: 300;text-transform: uppercase;color: #FFFFFF; }
#comments p { color: #FFFFFF; }
.comment-reply-title, .comments-title { font: 900 1em Lato, sans-serif;margin: 0;color: #FFFFFF;text-transform: uppercase; }
.comment-respond h3 { margin-top: 0;margin-bottom: 2em; }
.comment-respond p { color: #FFFFFF; }
.comment-respond .alert-info, .comment-respond .form-allowed-tags { display: none; }

.bypostauthor > article .fn:before { font-family: 'dashicons'; content: '\f155';font-size: 0.8em;margin-right: 0.4em; }
.comment-list h5 { margin-bottom: 0 !important; }
.comment-list .fn { font-weight: 900;color: #FFFFFF;font-style: initial;font-size: 0.8em; }
time { color: #AAAAAA;text-transform: uppercase;font-size: 0.8em; }
.comment-content.card-block { padding: 0 1.25rem; }
.comment-content .card-header { padding: 0 1.25rem !important; }

.must-log-in a { color: #b9b9b9;font-weight: 700; }
.card, .card-header { border: none !important; background: none !important; }

video { width: 100%;height: auto; }
.modal_video_item { padding: 0 0.2em 0.6em 0.2em; }
.modal_video_item img { display: block;margin-left: auto;margin-right: auto; }

/* Barre de consentement pour les cookies */
#cookie-consent-bar { background:#d4d4d4;color:#000000;font-family: Arial !important;min-height:24px; line-height:24px;color:#595959; text-align:center;padding:3px 0; width:100%; /* opacity bar :opacity: 0.6; filter: alpha(opacity=60); */ }
#cookie-consent-bar:hover { /* opacity bar :opacity: 1.0;filter: alpha(opacity=100); */}
#cookie-consent-bar.fixed {	position: fixed;bottom: 0;left: 0;z-index: 100; }
#cookie-consent-bar .cookie_info { object-fit: none;object-position: -50px -166px;width: 26px;height: 34px;margin-right: 0.4em; }
#cookie-consent-bar .cookie_close { object-fit: none;object-position: -50px -43px;width: 26px;height: 36px; }

#cookie-consent-bar p { margin: 0;padding: 0 10px;font-size: 1em; }
#cookie-consent-bar a {	color:#ffffff;display:inline-block;border-radius:3px;text-decoration:none; padding:0 6px; }
#cookie-consent-bar .sb-enable { margin:0 8px;font-size: 1.2em;text-transform: uppercase;font-weight: bold;}
#cookie-consent-bar .sb-disable { background:#e41b40;margin:0 8px; }
#cookie-consent-bar .sb-disable:hover { background:#e93f5e; }
#cookie-consent-bar .sb-policy { text-decoration:underline;margin:0 2px; }
#cookie-consent-bar .sb-policy:hover { text-decoration:underline; }

#cookie-consent-bar .sb-enable, #cookie-consent-bar .sb-policy { color: #31849b; }

/* Pied de page */
#footer_pa { max-width: 1260px;padding-top: 1em;border-top: 4px solid #000000; margin: -30px auto;padding-left: 60px;font-size: .7rem; }
#footer_pa ul { padding: 0;margin: 0;list-style: none;}
#footer_pa ul li { display: inline-block; }
#footer_pa a:before { padding-right: 6px;content: "|"; }
#footer_pa ul li:first-child a:before { content: ""; }

/* Media queries */ 
@media screen and (max-width: 1600px) {
	.page-sub-header_content h1 { padding: 10px 26px 0 26px; }
	.page-sub-header_content p { padding: 6px 22px 0px 26px; }
}

@media screen and (max-width: 1024px) {
	.page-sub-header_content h1 { padding: 10px 26px 0 26px; }
	.page-sub-header_content p { padding: 6px 22px 0px 26px; }
}

@media screen and (max-width: 768px) {
	.page-sub-header_content h1 { padding: 8px 26px 0 26px; font-size: 140% !important; }
	.page-sub-header_content p { padding: 4px 22px 0px 26px; }
	#page-sub-header::before, #page-sub-header:after { height: 15%; }
	.atelier { margin: 1em 1.98em 0 1.98em; }
	.atelier h4 { font-size: 1.2em; }
}

@media screen and (max-width: 768px) {
	.page-sub-header_content h1 { padding: 8px 26px 0 26px; font-size: 120% !important; }
	.page-sub-header_content p { padding: 4px 22px 0px 26px; }
	.atelier_single_body .btn { width: 30%; }
	#content.site-content { padding-bottom: 3.75rem;padding-top: 7.4rem !important; }		
}

@media screen and (max-width: 512px) {
	.page-sub-header_content p { display:none; }
}

@media screen and (max-width: 360px) {
	.demo > p > label, .demo > p > span { width: 260px; }
}

@media screen and (max-width: 320px) {
	.page-sub-header_content h1 { font-size: 100% !important; }
}