@charset "utf-8";
/* CSS Document */

@font-face {
	font-family: 'kosmik-plainthreeregular';
	src: url('../fonts/kosmik-plainthree-webfont.eot');
	src: url('../fonts/kosmik-plainthree-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/kosmik-plainthree-webfont.woff') format('woff'),
		url('../fonts/kosmik-plainthree-webfont.ttf') format('truetype'),
		url('../fonts/kosmik-plainthree-webfont.svg#kosmik-plainthreeregular') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'kosmik-boldoneregular';
	src: url('../fonts/kosmik-boldone-webfont.eot');
	src: url('../fonts/kosmik-boldone-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/kosmik-boldone-webfont.woff') format('woff'),
		url('../fonts/kosmik-boldone-webfont.ttf') format('truetype'),
		url('../fonts/kosmik-boldone-webfont.svg#kosmik-boldoneregular') format('svg');
	font-weight: normal;
	font-style: normal;

}

@font-face {
	font-family: 'FontAwesome';
	src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
	src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
		url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
		url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
		url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
		url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}


body,html{
	margin: 0;
	padding: 0;
}



html {
	font-size: 12px;
	background: url(assets/bg.jpg) repeat-x fixed left top;
	min-height: 100%;
}
@media (min-width: 780px){ html {background: transparent;}}

body {
	min-height: 100%;
	background-color:#BFC7B8;
	background: url(assets/bg.jpg) repeat-x fixed left bottom;

}


body,
td,
th,
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
}

p {
	margin: 0 0 15px;
	line-height: 16px;
}

h1 {
	font-family: 'kosmik-plainthreeregular';
	color: #DC5E81;
	font-size: 30px;
	padding: 10px 0 0 50px;
	border-bottom: #D7426A dotted 1px;
	margin: 10px 0 15px 0;
	background: url(assets/h1-bg.png) no-repeat left -5px;

}

h2 {
	font-family: 'kosmik-plainthreeregular';
	color: #51ACCB;
	font-size: 26px;
	margin: 10px 0 25px 0;
}

h3 {
	color: #DC5E81;
	margin: 10px 0;
}


hr {
	border-right: #fff solid 1px;
	border-left: #fff solid 1px;
	border-top: #fff solid 1px;
	border-bottom: #D7426A dotted 1px;

}


hr.bleu {
	border-right: #fff solid 1px;
	border-left: #fff solid 1px;
	border-top: #fff solid 1px;
	border-bottom: #51ACCB dotted 1px;

}

a {
	text-decoration: none;
}



a.ancre {
	padding: 50px 0 0 0;
}

img {
	border: none;
}

#right img {
	max-width: 90%;
    height: auto;
}

.texte-du-contenu a {
	text-decoration: none;
	color: #a5c1b2;
	font-weight: bold;
}

.texte-du-contenu a div.haut {
	font-weight: normal !important;
}

.texte-du-contenu a:hover {
	text-decoration: underline;
}
#principal{ margin:20px; min-width: calc(100% - 40px)}
#logo{ margin:0 20px;}
iframe{ max-width:100%;}
.audio-wrapper{ width:auto; max-width:100%;}
/*-------------------------------container-------------------------------------*/



.item{ width:100%;}

#logo {
	padding-top: 60px; /* a cause du menu fixed !*/
}

#illu img {
    max-width: 100%;
    height: auto;
    padding: 3px;
}



#logo, #principal {
	box-sizing: border-box;
}


#contenu {
	width: 100%;
	display: flex;
	flex-flow:column-reverse;
	/*align-items: flex-start;*/
}

#left {
	background-color: #FFF;
	display:flex;
	flex-flow: row wrap;
	width:100%;
}
#left #menu-principal ul {
	display:flex;
	padding:0;
	margin:0;
}

#right {
	background-color: #fff;
	padding: 15px;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
	max-width: calc(100% - 30px);
}

#illu {
	display:none;
}

@media (min-width: 1200px){
	.illu-bg {
		background: transparent url(assets/bg-illu.jpg) fixed no-repeat 1300px  bottom;
		position: fixed;
		height: 100%;
		width: 100%;
		overflow: scroll;
	}


	#logo, #principal {
		/* width: 964px; */
		width: 1200px;
		margin-left: auto;
		box-sizing: border-box;
	}
	#contenu {
		width: 100%;
		flex-flow: row wrap;
		display: flex;
		align-items: flex-start;
	}
	#left {
		flex: 0 1 300px;
		box-sizing: border-box;
		padding: 2em;
		margin-top: 0;
		display:static;
		width:50%;
	}
	#left #menu-principal ul {
		display:static;
	}
	#right {
	
		flex: 1 0 calc( 100% - 300px - 180px ); /* 300px du left*/
		margin-left: 30px;
		box-sizing: border-box;
		padding: 2em;
	}
	#illu {
		width:298px;
		height:295px;
		background: transparent  url(assets/illu.png);
		display:block;
	}

}
@media (min-width: 1200px){
	#logo, #principal {
		margin-left: 20px;
		width:984px
	}
}
@media (min-width: 1400px){
	#logo, #principal {
		margin-left: 100px;
		width:1300px;	
	}
	#principal {
		min-width: calc(100% - 100px);
	}
	#right{max-width: 924px;}
}

.actualite {
	border-right: #fff solid 1px;
	border-left: #fff solid 1px;
	border-top: #fff solid 1px;
	border-bottom: #D7426A dotted 1px;
	width: 100%;
}
ul.mot-cle{ padding-inline-start: 0;}
.content-chanson a.web{ margin: auto; padding: 3px 10px; }

#footer {
	color: #fff;
	padding: 20px;
	font-weight: bold;
}
a.box{
	display:block;
}


/*----------------------------------menu-----------------------------------------*/



#bg-menu {
	width: 100%;
	/*background: url(assets/bg-menu.png) repeat-x left top;*/
	position: fixed;
	top: 0;
	z-index: 100;
	/*height: 53px;*/
	border-bottom: #EFF1EF solid 1px;
	background-color: #D4DBD0;
}
#bg-menu.opened{ overflow-y:auto; min-height:100%;}
#menu{
	display:none;
	background-color: white;
	
}
#bg-menu.opened #menu{
	display:block;
}
#menu-opener {
	float: right;
    font-size: 20px;
    cursor: pointer;
    padding: 5px 20px;
}
#menu-opener::after{
content : '\2630';
}
#bg-menu.opened #menu-opener::after{
	content : '\2613';
}
#menu ul {
	padding: 1em;
	margin: 0;
	list-style: none;
	margin-top: 0;
}
#menu > ul {
	margin-left: 15px;
	padding-left: 0;
	margin-right: 15px;
	padding-right: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#menu > ul >li.menu-item {border-bottom: #D7426A dotted 1px; padding: 8px 0;}
#menu > ul >li.menu-item > ul > li a{ background: none;  color: #0E6D9C; font-size: 18px; padding: 5px 12px 0 30px;}
#menu > ul >li.menu-item > ul > li a:before{ content:' - ';}

#menu a {
	font-family: 'kosmik-boldoneregular';
	text-decoration: none;
	color: #D7426A;
	font-size: 20px;
	background: url(assets/li-menu.png) no-repeat 8px 12px;
	padding: 5px 12px 0 36px;
	white-space: nowrap;
}


#menu li a:hover {
	background: #fff url(assets/li-menu.png) no-repeat 8px 12px;

}


#menu-principal {
	margin: 15px 0 0 0;
	width:100%;
}

#menu-principal a {
	font-family: 'kosmik-boldoneregular';
	text-decoration: none;
	color: #D7426A;
	font-size: 20px;
	display: block;
	text-align: center;

}

#menu-principal span {
	/* display: block; */
	/* float: right; */
	/* margin: 20px 25px 0 0; */
	width: 140px;
}

#menu-principal div.web {
	background-color: #D7426A;
	color: #fff;
	font-size: 16px;
	padding: 0 0 0 5px;
}

.collectages ul{ display: block; list-style: none;}


	.collectages ul li{ width: 85%;
    justify-content: center;
    border: #D7426A dotted 1px;
    margin: 10px 0px;
    padding: 20px;
} 
@media (min-width: 768px){
	.collectages ul li{ 
		width: 40%;
    justify-content: center;
    border: #D7426A dotted 1px;
    margin: 20px 10px;
	padding: 20px;}
	.collectages ul{ display: inline-flex; list-style: none;flex-wrap:wrap}
 }
 .collectages ul li:last-child IMG{ border:1px solid #0581C0;}
.collectages ul li a{ text-align: center; font-family: 'kosmik-boldoneregular';
    text-decoration: none;
    color:#0581C0;
    font-size: 20px; display: block;}
#menu-principal img {
	vertical-align: middle;
	margin: 0 auto;
	border: 5px solid #E3E8E1;
	display:block;
	
}

#menu-principal ul{ border-top: #D7426A dotted 1px; border-bottom: #D7426A dotted 1px;}
#menu-principal li {
	flex-basis:25%;
	list-style: none;
	
	padding: 8px 0;
}
.actualite{ width: 100%;}
#menu-principal li:hover {
	background-color: #DFE5DD;
}

#menu-principal li:hover IMG {
	border: 5px #fff solid;
}

@media (min-width: 1200px){
	#menu-principal ul{ border:none;}
	#menu-principal li:first-child{ border-top: #D7426A dotted 1px;}
	#menu-principal li {
		flex-basis:50%; border-bottom: #D7426A dotted 1px;
	}
	#menu li.menu-item ul li {
		padding: 5px;
		margin: 10px 0 0 0;
	}
	#menu{ width:1200px;}
	#menu-principal a{ display:inherit; text-align: left;}
	#menu-principal img {
		margin: 0 15px 0 5px;
	}
}

.logos{ display: flex;
    flex-wrap: wrap;
	justify-content: space-evenly;}

.logos span {
			flex-basis: 100%;
		}
@media (min-width: 624px){
	.logos span {flex-basis: 48%;}
}


/* sous menu */

#menu li.menu-item ul li {
	padding: 5px 0 0 0;
	margin: 0;
}

#left #menu-principal ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	padding:10px;
	flex-basis: 100%;
	justify-content: center;
}
@media (min-width: 390px){
	#left #menu-principal ul {
	flex-basis: 50%;} 
}
@media (min-width: 768px){
	#left #menu-principal ul {
		flex-basis: 25%;} 
}

/* Ajouts Adrien */
#menu .menu-item ul {
	background: #fff;
	text-align: left;
	/*margin-top: 10px; */
	padding-bottom: 10px;
	margin-left: 0;
}

#menu .menu-item ul li {
	background: #fff;
	display: block;
	float: none;
}

#menu .menu-item ul li a {
	padding-bottom: 5px;
}

#menu .menu-item ul li a:hover {
	color: #51ACCB;
}



.menu-secondaire {
	font-family: 'kosmik-plainthreeregular';
	color: #DC5E81;
	font-size: 20px;
	border: #D7426A dotted 1px;
	padding: 0 20px;
	margin: 0;
}
ol{ margin:0; padding:0;}

.menu-secondaire a {
	text-decoration: none;
	color: #DC5E81;
}
#right hr {
	display:none;
}

.texte{ display: flex; flex-wrap:wrap;}

.chanson .texte{ display: flex; flex-wrap:wrap;justify-content: /*space-around*/center;}
    
@media (min-width: 1200px){
	#menu > ul >li.menu-item {border-bottom: none; padding: 0;}
	#menu > ul {
		margin-left: 0;
		padding-left: 0;
		margin-right: 0;
		padding-right: 0;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		
	}


	.box.boutique,.box.media{
		width: 159px;
	}
	#right hr {
		display:inherit;
	}
	#left #menu-principal ul {
		display: flex;
		flex-direction: column;
	}
	#menu {
		padding: 5px 0 0 100px;
		display:block;
		background-color:transparent;
	}
	#menu-opener {
		display:none;
	}
	.menu-item ul {
		display: none;
	}

	.menu-item:hover ul {
		display: block;
	}
	#menu .menu-item {
		display: inline;
		zoom: 1;
		position:relative;
	}
	.menu-item ul {
		z-index: 10;
		position: absolute;
		left:0;
	}
	.menu-item li {
		display: inline;
	}

	.menu-item li a:hover {
		background: url(assets/li-menu.png) no-repeat 8px 12px;
		background: none;
	}
	.menu-item a {
		font-family: 'kosmik-boldoneregular';
		text-decoration: none;
		color: #D7426A;
		font-size: 20px;
		background: url(assets/li-menu.png) no-repeat 8px 12px;
		padding: 5px 12px 10px 36px;
	}

	#menu-principal a {
			white-space: nowrap;
	}
	#menu-principal img {
		display:inline-block;
	}
}





/*-------------------------------mise en page-------------------------------------*/



.en-avant {
	background-color: #E3E8E1;
	padding: 15px;
	line-height: 20px;
}

.trio{
	display:flex;
	flex-wrap:wrap;
	flex-basis:100%;
	justify-content:center;
}

.box {
	width: 184px;
	border: solid 1px #DFE5DD;
	margin: 10px;
	height: 137px;
	background-color: #fff;
}

.box:hover {
	border: solid 1px #fff;
}

.boutique {
	background: url(assets/boutique.png) no-repeat left top;
}

.ecoute {
	background: url(assets/ecouter.png) no-repeat left top;
}

.media {
	background: url(assets/media.png) no-repeat left top;
}

.boutique:hover {
	background: #DFE5DD url(assets/boutique-on.png) no-repeat left top;
}

.ecoute:hover {
	background: #DFE5DD url(assets/ecouter-on.png) no-repeat left top;
}

.media:hover {
	background: #DFE5DD url(assets/media-on.png) no-repeat left top;
}

.intro p {
	font-size: 1.2em;
	font-weight: bold;
	color: #C0C8BD;
}

.players {
	margin: 20px auto;
	width: 100%;
    height: 100%;
	max-width:400px;
	display: table;
}

a.web {
	background-color: #D7426A;
	color: #fff;
	font-size: 18px;
	padding: 0 10px;
	font-family: 'kosmik-boldoneregular';
	text-decoration: none;
	margin: 15px;
	float: right;
	vertical-align: top;

}

.texte-du-contenu {
	padding: 0 20px;
}

.haut {
	text-align: right;
	color: #51ACCB;
	font-size: 14px;
	background: url(assets/haut.png) no-repeat right top;
	padding: 26px 0 0 0;
	font-family: 'kosmik-boldoneregular';
}
/*
#haut {
	margin: -40px 0 0 0;
	padding: 40px 0 0 0;
}
*/
.plus-infos {
	text-align: right;
	margin: 15px 0;

}

.plus-infos a {
	font-family: 'kosmik-boldoneregular';
	font-size: 18px;
	color: #fff;
	background-color: #DC5E81;
	padding: 4px 14px;
}

div.facebook {
	background-color: #EAEDE8;
	border: 1px #fff solid;
	margin: 4px 0 0 10px;
	padding: 2px;
	font-family: 'kosmik-boldoneregular';
	font-size: 20px;
	width: auto;
	float: right;
}
div.facebook span{ display: none;}

@media (min-width: 690px){
	div.facebook { width: 144px; margin: 4px 0 0 10px; padding: 2px 6px 2px 4px; }
	div.facebook img {margin: 0 10px 0 0;}
	div.facebook span{ display: inline-block;margin: 0 0 0 10px;}
}

div.facebook img {
	margin: 0 0 0 0;
	vertical-align: middle;
}

#logo div.facebook a {
	font-family: 'kosmik-boldoneregular';
	font-size: 20px;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
	color: #3B579D;
	padding: 0;
	text-decoration: none;
}



/*--------------------------------------SPIP--------------------------------------*/
.spip_documents_left {
	margin-right: 18px;
	margin-top: 8px;
	margin-bottom: 8px;
	text-align: center;
	clear: both;
}

.spip_documents_left img {
	margin-bottom: 4px;
	max-width: 100%;
	height: auto;
}

.spip_documents_right {
	margin-left: 18px;
	margin-top: 8px;
	margin-bottom: 8px;
	text-align: center;
	clear: both;
}

.spip_documents_right img {
	margin-bottom: 4px;
	max-width: 100%;
	height: auto;
}


.spip_documents {
	text-align: center;
}

.spip_documents_center {
	clear: both;
	padding: 5px;
	background-color: #FFFFFF;
	display: block;
}

.spip_documents_center img {
	border: none;
	text-align: center;
	margin: auto;
	max-width: 100%;
	height: auto;
}

.spip_documents_center dt {
	text-align: center;
	margin: auto;
}


p.spip_note {
	font-size: 0.8em;
	margin-top: 25px;
	border-top: #CCCCCC 1px solid;
	margin-bottom: 5px;
	margin-top: 15px;
	text-align: justify;
}


.spip_bouton input {
	height: 25px;
}

.formulaire_spip fieldset {
	margin-bottom: 10px;
	padding: 15px;
}


table {
	border: 1px #4EBDD8 #CCCCCC;
	border-collapse: collapse;
	margin: 10px auto;
	width: 95%;
}

td {
	border: 1px solid #CCCCCC;
	padding: 10px;
	text-align: left;
}

th {
	background-color: #4EBDD8;
	border: 1px solid #fff;
	color: white;
	padding: 10px;
	text-align: center;
	text-transform: uppercase;
	font-size: 1.1em;
}


ol {
	margin: 20px 0 20px 30px;
}

img.spip_logos {
	vertical-align: middle;
	margin: 0 6px 10px 0;
	max-width: 95%;
	height:auto;
}
.chanson img.spip_logos{  max-width: 600px; width:100%;}
.chanson blockquote {
	background: #d1d1d1;
	padding: 12px;
	margin: 10px 0;
	flex-basis:100%;
}

.chanson blockquote.spip_poesie {
	padding: 12px 12px 12px 12px;
	margin: 10px 0 10px;
}

@media (min-width: 690px){
	.rubrique25 blockquote{ flex-basis:41%; margin: 10px 5px ;}
	.chanson blockquote {
		flex-basis:42%;}
		.chanson blockquote.spip_poesie {
			padding: 30px 12px 12px 12px;
			
		}
		.chanson blockquote{ margin: 10px;}
}

div.chapo {
	font-weight: bold;
	color: #BFCE01;
	margin: 0 0 20px;
}

html body div.illu-bg div#principal div#contenu div#right div.en-avant img.spip_logos {
	float: left;
	margin: 0 20px 0 0;
}



.mejs-container .mejs-controls {
	background-color: #D5DBD2;
}

h1.yellow a {
	color: #D7426A;
}

/* Rajout Css */
.radiobox {
	margin-left: 10px !important;
	width: 165px !important;
	margin-top: 90px !important;
	position: absolute !important;
	background-color: #DFE5DD !important;
	border-radius: 10px !important;
	height: 30px !important;
}
p.noresult{ text-align:center; margin:6px auto; font-weight: bold;}
.radiobox span {
	float: left;
	margin-top: 3px !important;
}

.radiobox span.play {
	margin-left: 5px !important;
}

ul.playliste {
	display: none;
}

#scrollbar {
	width: 50% !important;
	clear: none !important;
	/*margin-left:25px!important*/
	;
	float: left !important;
	margin: 11px 10px 0px 10px !important;
}

.controles {
	position: absolute !important;
	margin-top: 30px !important;
}

#scroller_container {
	border: none !important;
}

/* Livre d'or */
div.message {
	padding: 10px;
}

div.message p span.titre {
	font-weight: bold;
	font-size: 1em;
	color: #DC5E81;
}

div.message p span.auteur {
	font-weight: normal;
	font-size: 0.9em;
	color: #333;
}

/* formulaire livre d'or (forum) */
#formulaire_forum fieldset {
	border: 1px dotted #51ACCB;
}

#formulaire_forum fieldset legend {
	color: #51ACCB;
	margin: 0px 5px 0px 5px;
}

#formulaire_forum label {
	width: 120px;
	display: block;
	float: left;
	margin-bottom: 10px;
}

#formulaire_forum input {
	margin-bottom: 10px;
}

#formulaire_forum li.saisie_texte label {
	width: 200px;
	display: block;
	float: left;
}

#formulaire_forum fieldset.moderation_info {
	border: none !important;
}

#formulaire_forum fieldset.moderation_info legend {
	display: none !important;
}

#formulaire_forum fieldset.moderation_info p.explication {
	color: #DC5E81;
}

#formulaire_forum ul {
	list-style: none;
}

#formulaire_forum input.submit {
	font-family: 'kosmik-boldoneregular';
	font-size: 18px;
	color: #fff;
	background-color: #DC5E81;
	padding: 4px 14px;
}

#formulaire_forum span.erreur_message {
	color: #DC5E81;
}


hr.spip {
	border-style: dotted !important;
	border-width: 1px;
	margin-top: 0px !important;
	margin-bottom: 10px !important;
	clear: both;
}

div.notre_image_gauche {
	float: left;
	margin: 0px 20px 5px 0px;
}
div.notre_image_gauche IMG{ max-width: 100%; height: auto;}

/* Bouton Plus */
div.les_autres {
	width: 100%;
	background: #fff;
	min-height: 32px;
}

div.les_autres img.plus {
	float: right;
	cursor: pointer;
	max-width: 100%;
}

div.les_autres ul {
	padding: 0 0 12px 0;
}

div.les_autres span {
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	line-height: 32px;
	text-align: right;
	width: 90%;
	/* 580-40/620 */
}

nav a {
	color: #51ACCB;
	font-family: 'kosmik-plainthreeregular';
	font-size: 22px;
}

nav strong.on {
	font-family: 'kosmik-plainthreeregular';
	font-size: 22px
}

nav span.pages {
	padding: 0 20px;
}


.ecoute {
	position: relative;
}

.play-liste {
	position: absolute;
	width: 100%;
	bottom: 0px;
}

/* chanson */
h1 span p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	display: inherit;
	margin: 0 15px;
}


.chanson {
	position: relative;
	z-index: 0;
	width:100%;
}

.chanson .background-image {
	display: none;
}

.chanson .mots li span {
	background-color: #ddd;
	padding: 2px 6px;
	font-size: 0.9em;
	font-weight: bold;
}

.chanson .mots li {
	display: inline-block;
	padding: 0;
	margin: 2px 0;
}

.chanson .mots li::after {
	content: '\2605';
	margin: 0 8px;
	color: #DDDDDD;
}

.chanson .mots li:last-child::after {
	content: ' ';
}

.chanson .texte blockquote {
	float: right;
}

.chanson .texte::after {
	content: " ";
	display: block;
	clear: both;
}
.players .spip_documents{ display: inline-block;}
.chanson .media-left img {
	/*border-radius: 50%;*/
	max-width: 90px;
	height: auto;
	margin: 0 10px 0 0;
}

.filtremot {
	padding: 5px;
	background: #DC5E81;
	margin: 4px;
	font-weight: bold;
	color: #FFF;
	border-radius: 5px;
	cursor: pointer;
}

.filtremot.opened {
	text-decoration: underline;
	background: #b03e5d;
}

.filtremot.filled::after {
	content: 'v';
	display: inline-block;
	margin: 0 4px;
}

.filtres_wrapper {
	display: flex;
	justify-content: space-between;
	margin: 6px ;
	flex-direction: column;
}

@media (min-width: 690px){
	.filtres_wrapper {
	justify-content: center;
	margin: 2px -4px;
	flex-direction: row;}
}
.rubrique25 .texte { display:flex; flex-direction: row; flex-wrap:wrap;}
@media (min-width: 690px){.rubrique25 .texte { /*flex-direction: inherit;*/ } }
.find.form {
	padding: 10px;
	text-align: center;
	background-color: #DDD;
}

.find.form .togglefiltre ul {
	list-style: none;
	padding: 10px 0;
}
.find .input-group{ display: flex; justify-content:center;}
.find.form .togglefiltre ul li {
	display: inline-block;
	align-items: center;
	padding: 5px;
	text-transform: capitalize;
}

.control-label {
	text-transform: uppercase;
	padding: 12px 0 5px 0;
	font-weight: bold;
	display: inline-block;
}

.control-label::after {
	content: '';
	display: block;
	width: 50px;
	height: 1px;
	background: #000;
	margin: 3px auto;
}

.togglefiltre {
	display: none;
}

h1.nobg {
	background: unset;
	padding: 0;
}

article.chanson.well {
	width: 100%;
}


.content-chanson {
	display: flex;
	flex-wrap:wrap;
	align-items: center;
	justify-content: space-between;
	/*width: 80%;*/
}

.mots {
	margin-bottom: 25px;
}

.mots::before {
	width: 60px;
	height: 1px;
	display: block;
	content: '';
	background: #ddd;
	margin: 10px 0;
}

ul.mot-cle li {
	padding: 0 5px;
	text-transform: capitalize;
}

.media-left {
	min-height: 100px;
	min-width: 100px;
}


button.recherche {
	background-color: #fff;
	border: none;
	font-size: 16px;
	padding: 2px 10px 5px 10px;
	margin: 0 -5px;
	cursor: pointer;
}

INPUT.form-control {
	border: none;
	padding: 6px 4px;
}
.cache{display: none;}
ul.dynlist{ list-style: none; margin: 15px 0; padding: 15px;}
ul.dynlist li.last-child{ display: block; text-align: right;}
ul.dynlist li.last-child a:after { content: '+ articles supplémentaires'; cursor: pointer;}

.mejs-container .mejs-controls{ background-color:#006666}
body .mejs-container{ background-color: #OO6666;}
.retour{text-align: right; display: block; font-weight: bold; margin:0 0 -46px;}
a.retour img{ vertical-align: middle; margin: 0 5px 0 0;}
a.retour span{display: inline-block;
    max-width: 60px;
    vertical-align: middle;
    margin: 0;
    text-align: center;
	font-size: 0.8em;}
.initiative IMG{width: 90px; height: auto; vertical-align: middle; }
.initiative{ font-weight: 700; margin: auto; text-align: center;}
.initiative a{ color:#D7416A;}

/* SPIP 4.1 */
.pagination-items {
	display: flex;
    justify-content: center;
	list-style:none;
}

.pagination-items li {
	padding-left:5px;
	padding-right:5px;	
}
.actualité {
	max-width:870px;
}