/*
	Theme Name:   DALified Customizr
	Theme URI:    http://www.droitaulogement.org/wp-content/themes/customizr-child/
	Description:  Bricolage pour le site ouèbe du DAL
	Author:       Vincent DAL44
	Author URI:   http://v.lesimple.free.fr/
	Template:     customizr
	Version:      1.0.0
	License:      GNU General Public License v2 or later
	License URI:  http://www.gnu.org/licenses/gpl-2.0.html
	Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
	Text Domain:  customizr-child
 */


body{
	background-color: transparent ;
	font-size: 1em ;
	line-height: 1.2em ;
}

.navbar .nav>li>a {
	padding-top: 0.1em ;
	padding-bottom: 0.1em ;
	font-size: 1.25em ;
	font-weight: 800 ;
	text-transform: uppercase ;
	text-shadow: none ;
	letter-spacing: auto ;
}
@media (min-width: 1200px){
	.navbar .nav>li>a {
		margin-right: 1.5em ;
	}
}
.dropdown-menu {
	font-size: 0.9em ;
	text-transform: uppercase ;
}
.navbar .navbar-inner{
	min-height: auto ;
	margin: auto ;
	z-index: 2000 ;
}

.tc-header{
	background-color: RGB(255,240,10) ;
	border-bottom: none ;
}
.row-fluid [class*="span"]{
	/* eh bé je sais plus du tout pourquoi j'ai foutu ça moi... bon je laisse ça pour l'instant */
	min-height: 10px ;
}
hr{
	border-top: none ;
	border-bottom: none ;
}
h1{
	font-size: 2em ;
	line-height: 2em ;
	font-weight: 800 ;
	text-transform: uppercase ;
}
h2{
	font-size: 1.2em ;
	line-height: 1.4em ;
	font-weight: 600 ;
	text-transform: uppercase;
	text-align: justify ;
	 text-justify: inter-character ;
}
h3{
	font-size: 1.1em ;
	font-weight: 400 ;
	text-transform: none;
}
form{
	margin: auto ;
}
.uneditable-input, 
input[type="color"], 
input[type="date"], 
input[type="datetime-local"], 
input[type="datetime"], 
input[type="email"], 
input[type="month"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
input[type="tel"], 
input[type="text"], 
input[type="time"], 
input[type="url"], 
input[type="week"], 
select, 
textarea{
	height: auto ;
	padding: 3px 4px ;
	margin-bottom: auto ;
	margin: 0.5em ;
	font-size: 1em ;
	line-height: 1.2em ;
}
input[type="submit"]{
	padding: 3px ;
	margin-bottom: auto;
	margin: 0.3em ;
	font-size: 1em ;
	line-height: 1.2em ;
}
input, textarea{
	max-width: 60% ;
}

tc-post-list-grid article .entry-title{
	/* Ah les connards - non en fait ça c'est configuré inline, surement généré par une fonction en .php... Non mais sans déconner */
}
.tc-header{
}
.site-description{
	/*gonflage... Je planque par défaut pour n'activer que sur écran */
	display: none ;
}
.navbar-wrapper, .navbar-wrapper.span9{
	/*putain il faut ramer pour overrider leurs conneries de spans tirés par les cheveux...*/
	width: 100% ;
}
/*Bon je laisse tomber mes efforts pour mieux présenter la barre de navigation...
.sticky-disabled .logo-centered .pull-menu-center .nav-collapse .nav{
	min-width: 80% ;
	display: flex ;
	justify-content: space-around ;
}
.nav.tc-hover-menu li{
	margin: auto ;
}
*/
@media (min-width: 1200px){
	.navbar-wrapper{
		width: 80% ;
	}
}
.tc-header .brand{
	text-align: left ;
}
.navbar-wrapper .navbar .site-description {
}
.navbar .navbar-inner .social-block {
	/*Putain mais comment ça me saoule ces conneries... Tout va finir en "position fixed" je le sens */
	position: absolute ;
	right: 10px ;
	top: -100% ;
	max-width: 1.60em ;
	overflow: visible ;
	/*z-index: 240 ;*/
	margin: 0 0 0 ;
	display: flex ;
	flex-direction: row-reverse ;
}
.social-block a{
	width: auto ;
	margin: auto ;
}
.social-block:hover{
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
	transform: scale(1.3);
}
@media (min-width: 980px){
	.tc-header .brand{
		text-align: center ;
	}
	.navbar-wrapper .navbar .site-description {
		/*ouais d'accord admettons j'applique uniquement dans la navbar */
		/* (besoin de le remonter parce que son activation fait un truc chelou avec la mise en forme wordpress, y'a un séparateur avec margin-top écrit inline qui fait que le menu cache le contenu principal) */
		display: auto ;
		margin-top: -2.5em;
	}
	.navbar .navbar-inner .social-block{
		top: -50% ;
		right: 0.5em ;
		max-width: 15em ;
	}
	.social-block:hover{
	}
	.social-block a{
		
	}
}
@media (max-width: 979px){/*gaffe, mélanger des min-width et des max-width c'est pas très prudent*/
	.navbar-wrapper.clearfix.span9{
		/*bah je renonce à controler cette merde, c'est trop inextricable leur code*/
	}
}

/* attends j'hallucine ou tout est dimensionné en pixels!? Mais ils sont neuneu ou quoi!? */
/* Me demande si je devrais pas carrément imposer tous .container à width auto, et certains ids à width=XX% - mais pour l'instant je vais me satisfaire de ça*/
/* OH PUTAIN LES DEBILES PROFONDS. Z'ont fait une media query pour chaque fourchette de largeur d'écrans et imposé des largeurs d'objets en pixels en fonction de chaque. PUTAIN MAIS Y FAUT ETRE DEMEURE */
#main-wrapper{
	margin-top: 2em ;
}
#main-wrapper.container{
	
	width: 80% ;
}
@media screen and (max-aspect-ratio: 1/1){
	/*(bon petite coquetterie que j'annule, je me garde l'idée en post-it...)*/
	#main-wrapper.container{
	}
}

#main-wrapper.container .container{
	width: auto ;
	margin-left: 5% ;
}
.article-container{
	width: 100% ;
}
.tc-post-list-grid .grid__item{
	border: none ;
	padding: 3% ;
}
.tc-grid .entry-header{
	padding: 0.2em ; 
}
.tc-grid-border .grid__item{
	border: none ; 
}
.tc-grid-border .grid__item:hover{
}
.tc-grid-shadow .grid__item{
	-moz-box-shadow: 2px 2px 6px 2px lightgrey;
	-webkit-box-shadow: 2px 2px 6px 2px lightgrey;
	box-shadow: 2px 2px 6px 2px lightgrey;
	/*box-shadow: none ; */
}
.tc-grid-shadow .grid__item:hover{
	-moz-box-shadow: 4px 4px 12px 2px grey;
	-webkit-box-shadow: 4px 4px 12px 2px grey;
	box-shadow: 4px 4px 12px 2px grey;
}

/*ah putain mais ces connards wordpress sont infoutus d'utiliser des h1, h2, h3 et de s'y tenir de façon saine, ils rajoutent des couches et des mélanges... impossible de régir la taille de police des titres d'articles*/
.grid__item .entry-title{
	/*(je pinaille parce que pas moyen d'appliquer une line-height)
	-webkit-transform: scale(.8);
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	-o-transform: scale(.8);
	transform: scale(.8);*/
}
.grid__item .entry-title a{
	font-size: 0.9em ; 
}

@media (min-width: 980px){
	.grid__item .entry-title a{
		font-size: 0.72em ; 
	}
	.article-container{
		
	}
}
/* non mais c'est des débiles profonds les mecs qui ont conçu ce code y'a pas d'autre explication. Je neutralise cette saloperie...*/
.featurette-divider{
	display: none ;
	margin: auto ;
	clear: none ;
}

/*Aaah d'accord. En fait y'avait une raison, mais elle est encore plus débile que je croyais. Ils se sont démerdés pour refabriquer un tableau comme si on était dans les années 90, en définissant des sections contenant un nombre de vignettes fixe, forcément alignées, dont ils définissent la largeur en fonction... */
/*Faut les piquer les gars qui ont conçu ce code...*/
/*Aaah et puis ils ont foutu des sections. Pour faire des rangées d'articles. Non mais les gars c'est pas du tout, du tout fait pour ça, non mais c'est pas vrai...*/
/*PUTAIN et y'a des sections dans les sections, ils s'en servent pour afficher juste les images. Invraisemblable. Bon, je peux pas sélectionner par sections donc, ni par row-fluid parce qu'ils s'en servent aussi pour d'autres trucs. Hmmm soit je sélectionne grid-cols-1, soit post-list>section, et j'essaie d'ignorer toute leur foutue grille. */
.article-container{
}
.article-container>section{
	margin: 0.5em ;
}
.tc-post-list-grid{
	display: grid ;
/*	max-width: 100% ;
	border: 1px solid red ;
 	grid-auto-columns: 90% ;*/
	grid-template-columns: 100% ;
	grid-auto-flow: dense ;
	grid-gap: 1em ;
}
.tc-post-list-grid>section{
	/*Parait pas utile en fin de compte: 
	min-width: 100% ;
	*/
}
@media (min-width: 600px) and (max-width: 1199px){
	.tc-post-list-grid>section{
	}
	.tc-post-list-grid{
		grid-template-columns: 49% 49% ;
	}
}
@media (min-width: 1200px){
	.tc-post-list-grid{
		grid-template-columns: 32% 32% 32% ;
	}
	.tc-post-list-grid>section{
	}
}
/* Bon faut que je style ce header, ou la class archive-header, pour ressortir ce bouzin du flux de la grid... */
.tc-post-list-grid>header{
	width: auto ;
	position: absolute ;
	margin: -2.5em ;
	z-index: 10 ;
}
.tc-post-list-grid>header h1{
	font-size: 1.4em ;
	padding: 0em 2.5em 0em 1em;
	line-height: auto ;
	background-color: white ;
	-moz-box-shadow: 2px 2px 4px 2px black;
	-webkit-box-shadow: 2px 2px 4px 2px black;
	box-shadow: 2px 2px 4px 2px black;
}

.archive-meta{
	display: none ;
}
.entry-meta{
/*	position: fixed ;
	max-width: 15% ;
	top: 40% ;
	right: 5% ;*/
	font-size: 0.1em ;
	margin-bottom: 0.5em ;
}
.entry-meta .btn, 
.entry-meta .entry-date{
	border-radius: 0.6em ;
	font-size: 6em ;
	margin: 0em 0.6em ;
	padding: 0em 0.6em ;
}
@media (min-width: 980px){
	.entry-meta .btn, 
	.entry-meta .entry-date{
		font-size: 8em ;
		margin: 0em 1em ;
	}
}
/*je pinaille un peu, ce truc me défrise mais ça serait mauvais pour le référencement de le sabrer complètement */
.breadcrumb-trail{
	font-size: 0.7em ;
	filter: alpha(opacity=50) ;
	opacity: 0.5 ;
	margin: -0.5em ;
}
.breadcrumb-trail:hover{
	font-size: 0.8em ;
	filter: alpha(opacity=90) ;
	opacity: 0.9 ;
}
.breadcrumb-trail a{
	padding: .8em ;
}

nav#nav-below{
	clear: both ;
}
#nav-below .assistive-text{
	display: none ;
}
.pager li>a, 
.pager li>span{
	font-weight: 600 ;
	padding: .3em .8em ;
	margin: .5em ;
	border: none ;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 2px 2px 4px 2px lightgrey;
	-webkit-box-shadow: 2px 2px 4px 2px lightgrey;
	box-shadow: 2px 2px 4px 2px lightgrey;
}

footer#footer{
	background-color: RGB(255,240,10) ;
	border-top: none ;
	text-align: center ;
	font-size: 0.9em ;
	padding-top: 1em ;
}
footer#footer .container{
	width: 80% ;
	padding: 0.5em ;
}
#footer_one.span4, 
#footer_two.span4, 
#footer_three.span4{
	min-height: 100% ;
	margin-left: auto ;
	float: left ;
	width: 40% ;
	display: flex ;
}
#footer_two.span4{
	width: 10% ;
}
#footer_three.span4{
	float: right ;
}
footer#footer .container .span4 .form{
	width: 100% ;
	margin: auto ;
}
footer#footer .widget-title{
	display: none ;
}
#footer_three aside{
	
}
footer#footer .colophon{
	position: relative ;
	background-color: transparent ;
}
footer#footer .pull-left{
	display: none ;
}
footer#footer .credits{
	border-top: 2px solid grey ;
	width: 100% ;
}
footer#footer .colophon{
	padding: 0px ;
}
/* putain comment ils m'énervent les mecs */
.credits p{
	margin: auto ;
}
#footer_one{
	
}
#footer_one aside, 
#footer_three aside{
	margin: auto ;
}
#footer_one .logo{
	/* font chier ils insèrent les dimensions inline */
}
@media (max-width: 800px){
	footer#footer{
		font-size: 0.6em ;
		padding-top: .5em ;
	}
	#footer_one.span4, 
	#footer_two.span4, 
	#footer_three.span4{
		float: none ;
	}
	#footer_one.span4 {
		width: 100% ;
	}
	#footer_three.span4 {
		width: 100% ;
	}
}
.bouton a{
	display: block ;
	font-size: 1.2em ;
	font-weight: 600 ;
	background-color: rgb(54,54,54);
	background-image: linear-gradient(rgb(90,90,90), rgb(30,30,30));
	padding: 0.2em 1em ;
	transition: all 0.5s ;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 0px 2px 1px black;
	-webkit-box-shadow: 0px 0px 2px 1px black;
	box-shadow: 0px 0px 2px 1px black;
}
.bouton a:hover{
	background-image: linear-gradient(rgb(60,60,60), rgb(20,20,20));
	-moz-box-shadow: 2px 2px 4px 2px black;
	-webkit-box-shadow: 2px 2px 4px 2px black;
	box-shadow: 2px 2px 4px 2px black;
}


/* Bidouillages pour groupe d'icones bulles flottantes */

.tc-sidebar{
}
.left.tc-sidebar{
	left: 5% ;
	/*top: 20% ; virer la propriété top si je veux que ça s'aligne sur le mainwrapper, j'hésite encore, parce que justement ça s'aligne pas forcément c'est chelou*/
	position: fixed ;
	width: auto ;
	margin-left: 0px ;
	height: 70% ;
	z-index: 10 ;/* putain c'est relou... seul moyen, identifier le z-index du menu survol sur portable, mais j'arrive pas à mettre le doigt dessus*/
}
.tc-sidebar:hover{
	/*pas super-satisfaisant mais fonctionnel, et puis, merde, y'a pas moyen d'arriver à controler le menu mobiles*/
	z-index: 120 ;
}
.right.tc-sidebar{
}
#left.widget-area {
	/*Bon. Je voudrais utiliser du flex, c'est là pour ça; mais entre les conflits avec le code wordpress, et bizarreries de comportements des navigateurs tablettes, ça fout juste le bordel. Tant pis, répartitions arbitraires et cons 
	display: flex ; 
	justify-content: space-around ;
	flex-direction: column ;*/
	padding-right: 1em;
	border-right: none ;
	height: 100% ;
	position: relative;
}
#left.widget-area aside {
	margin: auto ;
	padding: 10% ;
	clear: both ;
	margin-bottom: 30% ;
}
#left.widget-area aside>h3 {
	display: none ;
}
#left.widget-area::after {
	border-right: none ;
}
/*Classes faites pour afficher les bulles flottantes. Eventuellement complexifier un chouilla plus tard pour permettre l'application de différentes formes, dimensions, comportements*/
.bulleDAL{
	display: block ;
	width: 80px ;
	height: 80px ;
	overflow: visible ;
	-webkit-border-radius: 200px;
	-moz-border-radius: 200px;
	border-radius: 200px;
	transition: all 0.3s ;
	/*margin: 15% ;*/
}
.bulleDAL a{
	overflow: hidden ;
	filter: alpha(opacity=60) ;
	opacity: 0.6 ;
}
.bulleDAL:hover a{
	filter: alpha(opacity=90) ;
	opacity: 0.9 ;
}
.bulleDAL:hover{
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
	-moz-box-shadow: 2px 2px 6px 2px black;
	-webkit-box-shadow: 2px 2px 6px 2px black;
	box-shadow: 2px 2px 6px 2px black;
	z-index: 200 ;
}
.bulleDAL img{
	width: 100% ;
	height: auto ;
}
/*je préfèrerais utiliser max-aspect-ratio: 1/1 mais multiples conflits avec le code wordpress/customizr...*/
@media (max-width: 600px){
	.left.tc-sidebar{
		left: 2% ;
	}
	.left.tc-sidebar:hover{
	}
	#left.widget-area {
		width: 38px ;
		height: 38px ;
	}
	.bulleDAL {
	}
	#left.widget-area:hover .bulleDAL {
		width: 52px ;
		height: 52px ;
	}
}
@media (max-width: 800px){
	#left.widget-area {
		height: 80% ;
	}
	.bulleDAL {
		width: 45px ;
		height: 45px ;
	}
	#left.widget-area:hover .bulleDAL {
		width: 60px ;
		height: 60px ;
	}
}


/* AH! AHAH! Bon ça devient le bordel, mais en fin de compte je vais utiliser une zone de widgets personnalisée que je fais apparaître de force, comme ça je me démerde, je fais ce que je veux*/

/* Cette classe est uniquement utilisée dans le menu d'admin wordpress:*/
/* (... mais a pas l'air de marcher... bon OSEF)*/
#zonedewidgetperso .sidebar-name{
	border: 1px solid red ;
	background-color: RGB(255,240,10) ;
}
.specialouidgette{
	/*border: 1px solid red ;*/
	position: fixed ;
	display: block ;
	top: 25% ; 
	right: 0px ;
	/*max-width: 10% ;*/
	/*height: 30% ;*/
	z-index: 10 ;
	overflow: visible ;
	transition: all 0.3s ;
}
.specialouidgette:hover{
	z-index: 110 ;
}
.specialouidgette>h2{
	display: none ; /*(ça suffit pas, même comme ça le titre apparait qqs instants avant que le css soit appliqué... Bon, ben yaka ne jamais mettre de titre à ce widget, gaffe)*/
}

.specialouidgette>div, .specialouidgette>ol{
	display: flex ;
	width: 100% ;
	min-height: 100% ;
	overflow: visible ;
	margin: auto ;
	text-align: center ;
	flex-direction: column ;
	justify-content: space-around;
}
.evenementDAL,
.specialouidgette>ol li
{
	margin: auto ;
	width: 70px ;
	height: 70px ;
	margin-right: -12% ;
	/*-webkit-border-radius: 100px;	-moz-border-radius: 100px;	border-radius: 100px;*/
	overflow: hidden ;
	transition: all 0.2s ;
	-moz-box-shadow: 1px 1px 6px 4px black;
	-webkit-box-shadow: 1px 1px 6px 4px black;
	box-shadow: 1px 1px 6px 4px black;
	filter: alpha(opacity=75) ;
	opacity: 0.75 ;
	background-color: RGB(250,250,250) ;
	z-index: 10 ;
}
.evenementDAL:hover,
.specialouidgette>ol:hover li
{
	width: 100px ;
	height: auto ;
	margin-right: 10px ;
	padding-right: 1em ;
	filter: alpha(opacity=95) ;
	opacity: .95 ;
	overflow: auto ;
}
.evenementDAL a{
	text-decoration: none ;
}
.evenementDAL:hover a{
}
.evenementDAL h2{
	text-align: center ;
	padding: 0.5em ;
}
@media screen and (min-width: 920px){
	.specialouidgette{
		top: 30% ; 
		right: 1% ;
	}
	.evenementDAL,
	.specialouidgette>ol li
	{
		width: 125px ;
		height: 125px ;
		margin-right: auto ;
		/*-webkit-border-radius: 200px;		-moz-border-radius: 200px;		border-radius: 200px;*/
	}
	.evenementDAL:hover,
	.specialouidgette>ol li:hover
	{
		width: 180px ;
		height: auto ;
	}

/*Section pour mise en forme du truc tout pourri que je me propose d'utiliser via shortcodes pour une page "archives"*/
/*(Bon je préfèrerais fabriquer mon propre code pour avoir un meilleur contrôle, mais comme d'hab, wordpress est un empilement d'usines à gaz et ça s'avère excessivement compliqué...)*/
.sya_container{
	line-height: auto ;
}
.sya_container>a{
	font-size: 1.5em ;
	font-weight: bold ;
	line-height: auto ;
	margin: 0px ;
	padding: 0.2em ;
	padding-right: 1.6em ;
	border: none ;
	filter: alpha(opacity=80) ;
	opacity: 0.80 ;
	background-color: RGB(255,240,10) ;
}
.sya_container>a:hover{
	-moz-box-shadow: 1px 1px 4px 3px lightgrey;
	-webkit-box-shadow: 1px 1px 4px 3px lightgrey;
	box-shadow: 1px 1px 4px 3px lightgrey;
	filter: alpha(opacity=100) ;
	opacity: 1 ;
	z-index: 10 ;
}
.sya_container ul{
	list-style-type: circle;
	border: none ;
	margin: 1.2em ;
}
@media screen and (min-width: 980px){
	.sya_container ul{
		list-style-type: none;
	}
}
.sya_container li{
	border: none ;
	background: none ;
}
.sya_date, .sya_categories{
	color: RGB(160,160,160);
}
.sya_categories{
	display: none;
}
.sya_container li:hover .sya_categories{
	display: inline ;
	color: RGB(90,90,90);
}
.sya_postcontent a{
}
.sya_container li:hover a{
	font-size: 1.2em ;
}
}