/* --------------------------------------------------------------

   layout.css
   Disposition des blocs principaux
   cf.: http://romy.tetue.net/structure-html-de-base

	Breakpoints:
-------------------------------------------------------------- */

html {
	box-sizing: border-box;
}


/* CLASSES SPECIALES */
.masque {display: none; }
.visible {display: block;}
.visible_line {display: inline-block;}

ul.inline li {
	display: inline-block;
}

/*.mobile {display: none;}
@media screen and (max-width: 540px) {
	.desktop {display: none;}
	.mobile {display: inline;}
} */

@media screen and (max-width: 540px) {
	.desktop {display: none;}
}
@media screen and (min-width: 540px) {
	.mobile {display: none;}
}

/* Elements principaux
------------------------------------------ */
body { text-align: left; }
.page { position: relative; background: #fff; width: 870px; max-width:95%; margin:0 auto;}
.header {}
.main { padding: 0; }
.recentes, .content, .connexes, .footer, .menu_themes {margin: 20px 30px;}
.footer {margin-bottom: 0;}
.connexes {border-top:2px dashed #999; }
.footer { border-top:1px solid #999;}



/* largeur maximum 767px */
@media (max-width: 767px) {
	body { width: 100%; padding: 0	}
	.recentes, .content, .connexes, .footer, .menu_themes {margin-left: 15px; margin-right: 15px;}
	.page { width: 100%;  margin: 0;	max-width: none;	}
}

@media screen and (max-width: 540px) {
	.recentes, .content, .connexes, .footer, .menu_themes {margin: 20px 10px;}
	.footer {margin-bottom: 0;}
	/*.recentes, .content, .suggestions {padding: 5px 10px; margin-bottom:10px;}*/
}

/*SOMMAIRE*/
.emission {margin-bottom: 40px;margin-top: 20px;}


/* Entete et barre de navigation
------------------------------------------ */
.header { padding: 1em 0;}
.header .spip_logo_site { display: block; margin: 0; line-height: 1; font-weight: bold;  }
.header .spip_logo {margin-bottom:0;}
.header #slogan { margin: 0; }
.header .rezosocios  {padding-right: 15px; padding-top:15px;}
.header .icons {text-align: right;}


.footer .colophon { float: left; height: 40px; width: 70%; margin: 0; }
.footer .generator { float: right; }
.footer .generator a { padding: 0; background: none; }

.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }

/*
.nav {}
.nav li {display:inline;}
.nav li a { display: inline-block; padding: 0.25em 0.5em; margin: 0 0.25em 0.5em 0;border-radius: 0.25em;  text-decoration: none;  background: #f0f0f0; color: #db1762; }
.nav li.on a { background:#c41558; color:#fff; font-weight: normal; }
.nav li a:focus,
.nav li a:hover,
.nav li a:active { background: #c41558; color:#fff; }
*/

.menu_themes {padding-top: 20px;}

/* Footer
------------------------------------------*/
/*.info_site {display:flex; flex-wrap:wrap;}

.col_foot {flex: 0 0 33.3%; position:relative; width:100%;}*/

.col_foot {float: left; width: 33.3%;}

@media screen and (max-width: 540px) {
		.col_foot {float: none; width: 100%;}
}


ul.rezo_foot {margin-bottom:0; }
.rezo_foot li {display: inline; }

.footer h3 {margin-left:30px; margin-bottom: 15px; font-size:1.6em;}
.rezo_foot li a.rezosocios  { padding:.1em; margin: 0em; border-radius: 0.25em;   color: #808080; background:#fff; text-decoration: none; font-weight: bold; font-size: 1.6em;}
.rezo_foot li a.rezosocios:focus,
.rezo_foot li a.rezosocios:hover,
.rezo_foot li a.rezosocios:active {  background: #808080; color: #fff; }

.footer p.contact {font-size:1.6em; line-height: 1em;}

.footer a, .footer a:visited { color: #808080;  }
.footer a:focus,
.footer a:hover,
.footer a:active { background-color: transparent; color: #000 ; text-decoration: none; }

/* Articles
------------------------------------------ */

.cartouche {max-width: 750px; margin-left: 50px; margin-right: 50px; }
.corps  {margin-left: 100px; max-width: 650px;}
.corps {position: relative;}
.corps .sharing {position: absolute; top:5px; left:-50px;}
.corps .sharing ul.socialshare li {
	display: block;
}
.corps .themes_article {margin-top: 50px;}


@media (max-width: 767px) {

	.cartouche {margin-left: 0; margin-right: 0;}
	.corps {margin-left: 50px; }

}

@media screen and (max-width: 540px) {

	.corps, .cartouche {margin-left: 0; margin-top: 50px;}
	.corps .sharing {position: absolute; top:-40px; left: 0;}
	.corps .sharing  ul.socialshare li {display: inline-block;}
}


/* Recherche, archives, mots
------------------------------------------*/



/* Podcats
------------------------------------------ */

.podcast {display: flex; align-items: center; margin-bottom: 10px;}
.podcast .player {display: inline-block; margin-right: 20px;}
.podcast .texte_podcast {flex: 1; position: relative; min-height: 180px;}

.texte_podcast .liens_podcast {position: absolute; bottom:0; right:0;}

.dvpt_top {display: flex; }
.dvpt_top .info_dvpt {display: flex; min-height: 100%; width: 200px; margin-right: 20px;}
.dvpt_top .texte_dvpt {flex: 1;}

.info_dvpt { flex-direction: column; }
.info_dvpt .themes_article { flex: 1; padding-top: 5px; }
.info_dvpt .sharing { flex: 1; position: relative; }
.info_dvpt .sharing ul {position: absolute; bottom:10px; right:0;}

h1.ecouter {margin-top: 45px; margin-bottom: 0;}

@media screen and (max-width: 540px) {

		.menu_emissions ul { text-align: left;}

		.podcast {
			flex-direction: column;
		}

		.podcast .texte_podcast {
			flex: 0 1 auto;
			width: 100%;
		}

		.podcast .player  {
			flex: 0 1 auto;
			margin-right: 0;

		}

		.dvpt_top {
			flex-direction: column-reverse;
		}

		.dvpt_top .texte_dvpt {
			flex: 0 1 auto;
			width: 100%;
		}

		.dvpt_top .info_dvpt  {
			flex: 0 1 auto;
			margin-right: 0;
			width: 100%;
			min-height: 90px;
		}

		.info_dvpt .sharing,
		.info_dvpt .sharing ul {
			position: static;
			text-align: right;
		}

		.corps .podcast {width: 300px; margin-left: auto; margin-right: auto;}
		.corps .podcast .texte_podcast {flex: 1; position: relative; min-height: 120px;}
		h1.ecouter {margin-top: 5px; margin-bottom: 0;}
	}




/* Gabarit d'impression
------------------------------------------ */
@media print {
    .page,
    .wrapper,
    .content { width: auto; }
    .nav,
    .arbo,
    .aside,
    .footer { display: none; }
}

/* Affichage sur petits ecrans
Cf.: http://www.alsacreations.com/astuce/lire/1177
------------------------------------------ */


/* largeur maximum 640px */
@media (max-width: 640px) {
     /* layout */
    /*.wrapper,
    .content,
    .aside { width: 100%;}
    .content,
    .aside { clear: both; float: none; width: 100%; }*/

    /* Passer a une seule colonne (a appliquer aux elements multi-colonnes) */
    .nav ul li a { float: none; border: 0; }
    .arbo { display: none; }
    .footer .colophon { width: auto; float: none; }
    .footer .generator { display: none; }

    /* header du calendrier full-calendar */
    table.fc-header td { display: block; text-align: left; }

}

/* fin */