/*------------------------------------*\
    $CONTENU
\*------------------------------------*/
/**
 * TYPO.............Textes récurents
 * MENUS............Couleurs accès directs
 * FORMULAIRES......
 * STAGES...........Listes et détails
 * ACHATS...........Tableaux récapitulatifs de commande
 * BAFA.............Variations de couleurs pour le bafa
 * BAFD.............Variations de couleurs pour le bafa
 * DIVERS...........
 */


/*------------------------------------*\
    $TYPO
\*------------------------------------*/
.important{border-top:solid 1px rgb(0,114,182);border-bottom:solid 1px rgb(0,114,182); padding: 1em 0;}
p + div.important{margin-top : 1em;}
div.important + p{margin-bottom : 1em;}

/* Titraille récurente */
.section h1.titre, .section h2 {
	background-color : rgb(201,190,169);
	color : rgb(79,57,44);
}
/*.section h1.titre {	box-shadow: 5px -25px 0px rgb(0,114,182), -5px -25px 0px rgb(0,114,182);}*/

/* adaptations couleur bafa */
.footer .types_stages {
	float :			left;
	width :			20%;
	margin :		0% 2.5%;
	text-align :	left;
}
@media only screen and (max-width: 479px) {
	.footer .types_stages {
		display :		inline-block;
		width :			100%;
		text-align :	left;
	}
	.header{background-color: #002236;}
}

/* Liste des thèmes d'appro */
.actu_liste .actu_detail p, .liste_articles .article-detail p {
	margin-left: 0px; /* Évite un décalage des paragraphe avec des petites images */
}
.administration {
	background-color : rgb(255,255,220);
	/* Envellopper les h2 */
	margin-left: -20px;
	padding-left: 20px;
}

.aide-picto {
    display:		inline-block;
    margin:			0px 2px -2px;
    /*vertical-align:	super; exposant */
    height:			14px;
    width:			14px;
    background: 	url("../img/aide-sprite.jpeg") no-repeat scroll 0px 0px transparent;
}
.aide-picto:hover {
    background-position:	0px -14px;
}

/*------------------------------------*\
    $MENUS
\*------------------------------------*/
.acces_directs.institutionnel{}
	.acces_directs.institutionnel:hover .bloc{border:1px solid rgb(0,114,182);}
	.acces_directs.institutionnel .onglet{background-color: rgb(0,114,182);}
	.acces_directs.institutionnel .titre{color: rgb(0,114,182);}

.acces_directs.formation{}
	.acces_directs.formation:hover .bloc{border:1px solid rgb(244,159,13);}
	.acces_directs.formation .onglet{background-color: rgb(244,159,13);}
	.acces_directs.formation .titre{color: rgb(244,159,13);}

/* logo dans menu principal sous mobile */
@media only screen and (max-width: 479px) {
	.header{position:absolute;top:0px;z-index:999;}
	.header .wrapper{background:none;}
	#nom_site{display:none;}
	#baseline{color:#FFF;}
	#titre_site{top:8px;margin-right:60px;}
	.logo_site{width:50px;margin:4px;}
}




/*------------------------------------*\
    $FORMULAIRES
\*------------------------------------*/
.etape{width:100%;padding:10px;}
.etape-conteneur {
	position : relative;
	width:100%;
	color : rgb(255,255,255);
	padding: 10px 0px 5px 0px;
}

.etape-numero{
	position:absolute;top:5px;left:-20px;width:30px;height:30px;
	padding:5px;
	background-color : rgb(201,190,169);font-size:30px;text-align:center;
}
.etape-texte{margin: 0px 0px 0px 30px;}
.etape-duree{float:right; margin-right:10px; color:rgb(79,57,44);}

.etape .big{font-size:2em;}

input.date {display:inline-block; width: 30px; margin-top:-5px;}
	input.date.annee{width:45px;}
@media only screen and (max-width: 479px) {
	form .start_date, form .end_date{
		display :	inline-block;
		margin :	10px;
	}
}

input.montant {
	display :	inline-block;
	width :		50px;
}
input[hidden="hidden"].montant {display:none;}

/* formulaire de recherche de stage */
#stage_rechercher fieldset ul li {margin: 0px;}

#stage_rechercher legend {font-size: 1.5em; color: rgb(244,159,13); font-family: 'roboto', helvetica, arial, sans-serif;}
#stage_rechercher .switch::before{
	content: 'Au choix';
	display: inline-block;
	position: relative;
	top: -2em;
	background-color: rgb(240,240,240);
	height: 2em;
	padding: 0px 5px;
}
#stage_rechercher .switch::after{
	content: '';
	background-image: url('../../plugins/bafa-bafd/prive/themes/spip/images/switch-32.png');
	background-repeat: no-repeat;
	height: 32px;
	width: 32px;
	display: inline-block;
	position: relative;
	top: -16px;
	background-color: rgb(240,240,240);
}
#stage_rechercher .switch {
	display: inline-block;
	width: 80%;
	height: 0px;
	text-align:center;
	border: 1px dashed #CCC;
	margin-top: 2em;
	margin-left:10%;
	margin-right: 10%;
}

/*------------------------------------*\
    $STAGES
\*------------------------------------*/

/* Stages éléments généraux */
.tarif{background-color: rgb(255,255,255); border: 1px solid rgb(201,190,169); padding:1em;}
.tarif.complet{}
.tarif.dernieresPlaces, .tarif.liste_attente{background-color:rgb(255,246,191); border-color:rgb(255,211,36);}
.tarif p{text-align:right;}
.tarif .nav{
	max-height:0px;
	overflow: hidden;
	-webkit-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	transition: max-height 0.8s;
	margin : 0px;
}
.tarif:hover .nav{max-height: 100px;}
	.tarif .tarif_reduit{
		font-family: robotobold;
	}
		.tarif .tarif_reduit .montant{
			text-decoration: line-through;
			color: rgb(255,0,0);
			font-family: robotoregular;
		}




/* Stages liste de résultats */
.resultat{padding:0.5em; color:#333; border: solid 1px rgb(201,190,169); border-top: 0px; }
.resultat.row_odd{}
.resultat.row_even{background-color:rgba(201,190,169,0.2);}
.resultat.row_odd:hover, .resultat.row_even:hover{background-color:rgba(201,190,169,0.7);}
.resultat .stages-dates-commentaires{color: rgb(201,190,169);}
.stage-periodes{
	padding :			1em;
	margin-top :		0.5em;
	background-color :	rgb(187,204,0);
	text-align :		center;
	font-size :			1.5em;
	color :				#fff;
}
.stage-dates{
	padding :			0.5em;
	margin-top :		0.5em;
	background-color :	rgb(201,190,169);
	text-align :		center;
	color :				#fff;
	font-size: 			1.2em;
}
.stage-dates-commentaires{font-size:0.8em;}


/* Stages - fiche détail */
.stage{}
	.stage .code_stage_conteneur {}
		.stage .code_stage_conteneur .code_stage{color: #999; margin-top:0.5em;}
	.stage .appro .logo-appro {float: right; }
	
@media only screen and (min-width: 480px) {	
	.colonneGaucheRWD{float:left; width:65%;} /*à replacer dans layout ? */
	.colonneDroiteRWD{float:right; width:30%;} /*à replacer dans layout ? */
	.pageDetail.stage .tarif{margin-top : 20px;}
	.stage .gisencart{margin-top:1em;}
}		
	


/* Liste thème appro bafa */
.theme{border-top:solid 1px rgb(187,204,0);margin: 1em 0em;}
.theme-famille{padding:1em; background-color:rgb(187,204,0); color:rgb(255,255,255); font-size:1.5em; text-align:center;}

/*------------------------------------*\
    $ACHATS
\*------------------------------------*/
.achat{
	margin :	30px 0px;
}
.achat table {
	width: 			100%;
	text-align:		left;
	border: 		none;
	boder-collapse:	collapse; 
}
	.achat table caption {
		text-align :	left;
		padding :		0.5em;
		border : 		1px solid rgb(0,114,182);
		background-color : 	rgb(0,114,182);
		color : rgb(255,255,255);
	}
		.achat table caption strong.caption{}
	
	.achat table td {
		padding: 0.5em;
		border: 1px solid #999;
	}
	.achat table td.tarif {
		float :			none;
		padding :		0.5em;
		text-align :	right;
		max-width :		30%;
		border : 		1px solid #999;
	}
	.achat table tr.titre_element td{
		background-color: 	rgb(220,220,220);
		font-weight :		700;
		padding :			0.34625em;
		font-size :			13px;
	}
		.achat table tr.titre_element td span.nom{
			background-color: 	rgb(220,220,220);
		}
	.achat table tr.sous_total td{
		color :	rgb(0,114,182);
	}
	
	.achat table tr.total td{
		background-color :	rgb(120,120,120);
		color : 			rgb(255,255,255);
		font-weight :		700;
		padding :			0.34625em;
		font-size :			13px;
	}
/* Sur mobile, on évite que les prix passent sur 2 lignes */
@media only screen and (max-width: 479px) {
	.achat table td.tarif {width:25%;}
	.achat table tr.total td{font-size:10px;}
}



/*------------------------------------*\
    $BAFA
\*------------------------------------*/
.nav.main li.bafa{background-color : rgb(187,204,0);}
.bafa .stage-periodes {background-color : rgb(187,204,0);}
.bafa .stage-dates {background-color : rgb(201,190,169);}
.bafa .etape-conteneur{background-color : rgb(187,204,0);}
.bafa section::before{display:block; height:20px; margin-bottom: -20px; background-color : rgb(187,204,0); content:"";}
@media only screen and (min-width: 980px) {
	.bafa .corps_texte{
		/*background-image: url("https://www.bafa-bafd.net/squelettes/img/univers_bafa.jpg");*/
		background-position: top center;
		background-repeat: no-repeat;
	}
	.bafa .wrapper, .bafa .section{background: none;}
	/*.bafa .section .texte{background-color:rgb(255,255,255);}*/
}


/*------------------------------------*\
    $BAFD
\*------------------------------------*/
.nav.main li.bafd{background-color : rgb(172,109,166);}
.bafd .stage-periodes {background-color : rgb(172,109,166);}
.bafd .stage-dates {background-color : rgb(201,190,169);}
.bafd .etape-conteneur{background-color : rgb(172,109,166);}
.bafd section::before{display:block; height:20px; margin-bottom: -20px; background-color : rgb(172,109,166); content:"";}
@media only screen and (min-width: 980px) {
	.bafd .corps_texte{
		/*background-image: url("https://www.bafa-bafd.net/squelettes/img/univers_bafd.jpg");*/
		background-position:top center;
		background-repeat: no-repeat;
	}
	.bafd .wrapper, .bafd .section{background: none;}
	/*.bafd .section .texte{background-color:rgb(255,255,255);}*/
}


/*------------------------------------*\
    $DIVERS
\*------------------------------------*/
/* Arborescence */
ul.tree, ul.tree ul {
	list-style-type: none;
	background: url("../img/vline.png") repeat-y;
	margin: 0;
	padding: 0;
}
ul.tree ul { 
	margin-left: 10px;
}
ul.tree li {
	margin: 0;
	padding: 0 12px;
	line-height: 20px;
	background: url("../img/node.png") no-repeat;
}
ul.tree li a {
	font-family: robotobold;
}
ul.tree li:last-child {
	background: #fff url("../img/lastnode.png") no-repeat;
}

/* Menu principal */
.nav.main {background-color: rgb(244,159,13);}
.primary-nav li a:hover {background-color: inherit;}
.primary-nav li:hover,
.primary-nav li ul a:hover,
.secondary-nav li a:hover,
.secondary-nav li ul a:hover,
.etapes span.active, .etapes input.active,
.nav .actif{
	background-color: rgb(74,83,25);
}

/* Exports PDF */
.PDF {display: none;}

/*------------------------------------*\
    $FOOTER
\*------------------------------------*/
.site-footer {
	background-color: rgb(0,34,54);
	color: #FFF;
	padding-top: 20px;
	clear: both;
	font-size: 13px;
}
.site-footer .wrapper {
	width: 100%;
	max-width: 970px;
}

.site-footer .col {float: left;}
	.col.col-2 {width: 50%;}
	.col.col-3 {width: 33%;}
	.col.col-4 {width: 25%;}
	.col.col-6 {width: 16.5%;}
@media screen and (max-width: 989px) {
	.col.col-6 {
		width:50%;
		margin: 0 auto;
	}
}
	
.site-footer .row {
	width: 100%;
	margin-bottom: 2em;
	text-align: center;
}

.site-footer h3 {
	color: #FFF;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 1em;
}

.site-footer li {margin: 1em 0;}
	.site-footer a {}
	.site-footer a:hover {color: rgb(0,114,182);}

	.site-footer .social-tag {
		margin-bottom: 0.5em;
		text-align: left;
		display: inline-block;
		min-width: 150px;
		text-align: left;
	}


	.site-footer .social-tag img {
		vertical-align: middle;
		margin-right: 1em;
		transition : all;
		-webkit-transition-duration: 0.8s;
		   -moz-transition-duration: 0.8s;
			 -o-transition-duration: 0.8s;
				transition-duration: 0.8s;

		-webkit-transition-property: -webkit-transform;
		   -moz-transition-property: -moz-transform;
			 -o-transition-property: -o-transform;
				transition-property: transform;
	}
	.site-footer .social-tag:hover img {
		-webkit-transform: rotate(360deg);
		   -moz-transform: rotate(360deg);
			 -o-transform: rotate(360deg);
				transform: rotate(360deg);
	}


.galaxie {
	display: flex;
	border-top: 1px solid #555;
	align-items : stretch;
	justify-content: space-between;
}
a.planete {
	padding: 1em;
	flex:1;
	text-align:center;
}
a.planete:hover {
	background-color: #000;
	color: #FFF;
}

@media screen and (max-width: 639px) {
	.galaxie {
		flex-direction : column;
	}
	a.planete {text-align: left;}
}