@import "css/variables.less";
@import "css/spip.variables.less";
@import "css/mixins.less";

@media (min-width: 768px) {
#header.affix {
	+ .container #contenu {
		padding-top: 260px;
	}
	.rp-preheader {
		display: none;
	}
	position: fixed;
	width: 100%;
	z-index: 100;

	.rp-header {
		padding-top: 5px;
		padding-bottom: 5px;
		.rp-direct a.rp-direct-lien {
			height: 50px;
			margin-top:0;
		}
		.rp-direct .rp-panneaudirect {
			margin-top: 0;
			width: 250px;
			display: none;
		}
		.rp-reecoute a, .rp-programme a {
			height: 50px;
			margin-top: 0;
		}
		.rp-direct a.rp-direct-lien, .rp-reecoute a, .rp-programme a {
			background-size: 18%;
			background-position: left top;
		}
	        #logo_site_spip {
		        background-position-y:bottom 1px;
			background-size: 60%;
			height: 50px;
	                margin-bottom: 0;
		}
	}
	.rp-postheader {
		padding-top: 0;
		margin-bottom: 0;
		.container {
			padding-top: 5px;
			padding-bottom: 5px;
		}
		.rp-menu-icones {
			top: 5px;
		}
	}
}

#header.affix .rp-header::before {
        bottom: 5px;
        min-height: 20px;
}

#content, .page #content {
	width: 100%;
        padding-left: @gridGutterWidth;
}

@media (min-width: 768px) and (max-width: 979px) {
	#content, .page #content {
		padding-left: @gridGutterWidth768;
	}
	.actions.row-fluid, .rp_accueil_article .actions.row-fluid {
		font-size: 0.7em;
	}
}

#header .rp-header {
	transition: all 2s;
	.rp-direct a.rp-direct-lien, .rp-reecoute a, #logo_site_spip img, .rp-direct .rp-panneaudirect, .rp-programme a {
		transition: all 2s;
	}
	#logo_site_spip {
		transition: all 2s;
	}
	#logo_site_spip img {
		height: 96px;
		width: auto;
	}
}
}


#header .rp-preheader {
	font-family: @sansFontFamily;
	font-weight: 200;	
	background-color: @rp-grisfonce;
	color: @white;

	padding-top: 12px;
	padding-bottom: 12px;
	
	ul {
		width: 100%;
		text-transform: uppercase;

		margin-bottom: 0;

		li {
			display: inline;
			padding-left: 15px;
			padding-right: 15px;
			border-left:1px solid white;
		}

		li:first-child {
			padding-left: 0;
			border: none;
		}

		li:last-child {
			padding-right: 0;
			border: none;
		}

		li.droite {
			float: right;
		}
	}

	a {
		display: inline-block;
		color: @white;
	}

	a:hover, a:focus {
		background-color: inherit;
		text-decoration: underline;
	}
}

#header .rp-header {
	z-index: 100;
	position: relative;
	background-color: @white;
	color: @black;
	padding-top: 20px;
	padding-bottom: 10px;

        font-family: @sansFontFamily;
        font-weight: 500;

	.row {
		position: relative;
	}

	header {
		min-height: 100%;
	}

	#logo_site_spip {
                background: url("../img/li_logo.svg") no-repeat bottom center;
		background-position-y:bottom 30px;
		background-size: 100%;
		height: 130px;
		margin-bottom: 0;
		img {
			display: none;
		}
	}

	.nomdusite {
		display: none;
	}

	.rp-reecoute {
		a {
			position:relative;
			margin-top: -10px;
			display: block;
			height: 110px;
			background: url("../img/li_bouton2.svg") no-repeat top center;
			background-size: 40%;
		}
	}

	.rp-programme {
		a {
			position:relative;
                        margin-top: -10px;
                        display: block;
                        height: 110px;
                        background: url("../img/li_bouton3.svg") no-repeat top center;
                        background-size: 40%;
		}
	}

	.rp-direct {
		position: relative;
		a.rp-direct-lien {
			margin-top: -10px;
                        display: block;
                        height: 110px;
			width: 180px;
                        background: url("../img/li_bouton1.svg") no-repeat top center;
                        background-size: 40%;
			position: absolute;
		}
		.rp-panneaudirect {
			display: inline-block;
			padding-left: 6px;
			width: 170px;
			font-weight: 200;
			font-size: 0.8em;
			margin-left: 130px;
			margin-top: 0px;

			.titre {
				text-transform: uppercase;
				font-weight: 500;
				line-height: 1.2em;
			}
			.theme {
				padding-top: 0;
			}
			.horaire {
				padding-top: 5px;
				line-height: 1em;
			}
		}

	}

	.rp-titre-menu {
		position:absolute;
		width:100%;
		bottom:0;
	}
	.eu, .fr {
		margin-top:auto;
		margin-bottom: 0;
		text-transform: uppercase;
		color: @black;
		text-align: center;
		vertical-align: bottom;
	}

	.fr {
		background-color: @rp-bleu;
	}

        a {
                color: @white;
        }

        a:hover, a:focus {
                background-color: inherit;
        }

}

#header .rp-header::before {
	content: "";
	display:block;
	position: absolute;
	bottom: 40px;
	width: 100%;
	min-height: 20px;
        background-color: @la-jaune;
}

#header .rp-postheader {
	padding-top: 0px;
	margin-bottom: 0;

	.container {
		position: relative;
		padding: 0px 20px 30px 20px;
		background-color: @white;
		border: 2px solid @white;
		border-radius: 15px 15px 0 0;
	}

        ul {
                width: 100%;

		margin-left: 0;
                margin-bottom: 0;
		text-transform: uppercase;

                li {
                        display: inline;
                        font-size: 1.4em;
                        line-height: 2em;
			padding-right: 20px;
			font-weight: 300;

			a {
				display: inline;
			}
                }
        }

	a {
                color: @rp-grisfonce;
        }

        a:hover, a:focus {
                background-color: inherit;
		color: @rp-bleu;
        }

	/****** Grand menu ****/
	.rp-menu-icones {
		position: absolute;
		right: 20px;
		top: 20px;
		z-index: 501;
	}

	.rp-menu {
		display: inline-block;
		position: relative;
		cursor: default;
		z-index: 500;

		a {
			text-decoration: none;
		}

                .la-menu-item {
                    line-height: 1.1em;
                    > p {
                        margin-bottom: 0;
                    }
                }

		li {
			list-style: none;
		}

		> li {
			display: block;
			float: left;
			> a {
				font-weight: 500;
			}
		}

		> li > div {
			position: absolute;
			display: block;
			width: 100%;
			top: 50px;
			left: -20px;
			padding: 20px 20px 20px 20px;

			opacity: 0;
			visibility: hidden;
			overflow: hidden;

			background: lighten(@grayLight, 35.5%);
			border-radius: 0 0 3px 3px;

			-webkit-transition: all .3s ease .15s;
			-moz-transition: all .3s ease .15s;
			-o-transition: all .3s ease .15s;
			-ms-transition: all .3s ease .15s;
			transition: all .3s ease .15s;


			li {
				display: block;
	                        font-size: 1em;
	                        line-height: 1.2em;
	                        padding-right: 20px;
				padding-top: 5px;
				padding-bottom: 5px;
	                        font-weight: 500;
				text-transform: none;
				a {
					color: black;
				}

				ul  {
					padding-top: 10px;
					padding-bottom: 10px;
					> li {
						font-weight: 300;
						line-height: 1em;
						font-size: 0.8em;
						color: @rp-grisfonce;
					}
				}
			}
		}
		> li:hover > div {
			opacity: 1;
			visibility: visible;
			overflow: visible;
		}

		.rp-menu-boutique {
			display: block;
			margin-top: 20px;
			height: 150px;
			width: 100%;
			background-color: red;
		}
	}

	/****** Fin Grand menu ****/
        .menu-icone:hover, .menu-icone:focus {
                a {
                        opacity: 0.5;
                }
        }

	.menu-icone {
		z-index: 100;
		position: relative;
		width: 168px;
		margin: 0;
		padding-left: 54px;
		li:last-child {
			padding-right: 0;	
		}
		a {
			background-color: @la-jaune;
			display: inline-block;
			width: 40px;
			height: 40px;
			opacity: 1;
		}
		.eglise-actualite {
			background: url("../img/actualite.png") no-repeat center;
			background-color: @la-jaune;
                        background-size: contain;
		}
		.faire-don {
                        background: url("../img/don.png") no-repeat center;
			background-color: @la-jaune;
                        background-size: contain;
		}
		.recherche {
                        background: url("../img/loupe.png") no-repeat center;
			background-color: @la-jaune;
                        background-size: contain;
		}
		span {
			display: none;
		}
		a:hover, a:focus {
			opacity: 1;
			span {
				display: block;
				width: 168px;
				position: absolute;
				top: 43px;
				right: 0;
				background-color: @la-jaune;
				font-size: 0.8em;
				color: @black;
				text-transform: none;
				text-align: center;
				line-height: 1.7em;
			}
			.arrow-down {
				z-index: 99;
                                position: absolute;
                                top: 43px;
				width: 0; 
				height: 0;
				margin-left: 14px;
				margin-right: 14px;
				border-left: 6px solid transparent;
				border-right: 6px solid transparent;
  
				border-top: 6px solid @white;
			}
		}
	}
	.rp-recherche-bg {
		/* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
		position: fixed;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		filter: blur(10px);
		background: rgba(34,34,34,0.75);
		width: 100%;
		height: 100%;
		z-index: 99;
		display: none;
	}
	.rp-pave-recherche {
		position: absolute;
		top: 100px;
		width: 400px;
		right: 230px;
		z-index: 100;
		display: none;
	}
}

#footer {
	border: none;
	padding-top: 0;
	padding-bottom: 0;
}

#footer .rp-prefooter {
        background-color: @rp-bleu;
        color: @la-bleu;
        padding-top: 15px;
        padding-bottom: 10px;
}

#footer .rp-footer {
        background-color: @black;
        color: @white;
        padding-top: 20px;
        padding-bottom: 20px;

	h3 {
		color: @white;
	}
	a {
		color: @white;
		font-weight: 100;
	}
	p {
		font-weight: 100;
	}
}

#footer .rp-postfooter {
        background-color: @white;
        color: @black;
	min-height: 100px;
	margin-top: 10px;

	container {
		overflow: hidden;
	}

	ul {
                width: 100%;
                text-transform: uppercase;

                margin-bottom: 0;
		margin-left: -1px;

		display: flex;
		flex-direction: row;
		flew-wrap: wrap;
		justify-content: space-between;

                li {
			flex-grow: 1;
			flex-basis: auto;
			margin: .25em 0;
			padding: 0 1em;
			text-align: center;
                        display: inline;
                        padding-left: 15px;
                        padding-right: 15px;
                        border-left:1px solid @rp-grisfonce;

			a {
				color: @rp-grisfonce;
			}
                }

                li:first-child {
                        padding-left: 0;
                        border: none;
                }
	}
}

.reseaux-sociaux {
	text-align: right;
	i {
		margin-left: 5px;
		margin-right: 5px;
	}
	
        a {
                display: inline-block;
                color: @la-bleu;
        }

        a:hover, a:focus {
                background-color: inherit;
                text-decoration: underline;
        }
}

/**********************/
.page_article.article_emission {
	header {
		h1 {
			color: @black;
		}
	}
	.main {
		h2 {
			text-transform: uppercase;
			font-weight: 300;
		}
	}
	.emission-texte-article {
		> span {
			z-index: 1;
			.crayon-icones {
				float: left;
			}
		}
		.spip_logo {
			float: left;
			margin: 0 @gridGutterWidth 0 0;
		}
		.chapo {
			min-height: 180px;
		}
	}
	header .actions {
                margin-bottom: 2em;
                color: @grayLight;
                font-size: 0.8em;
		> span {
			display: inline-block;
		}
                .titre {
			display: inline-block;
			color: @rp-orange-bis;
	                text-transform: uppercase;
			padding-right: 15px;
			font-size: 1.2em;
                }
                ul {
			display: inline-block;
                        margin-left: 0;
			padding-right: 15px;
                        li {
                                display: inline;
                                list-style: none;
                                a {
                                        color:@grayLight;
                                        padding: 0 2px;
                                }
                                a:hover, a:focus {
                                        color:@gray;
                                        background-color: transparent;
                                }
                        }
                }
        }
}
.page_article .article_normal {
	header {
		h1 {
			text-align: center;
			color: @rp-orange-bis;
		}
		time, span.authors {
			display: block;
			text-align: center;
		}
		.partage {
			text-align: center;
			display: block;
			ul {
				border-top: 1px solid @grayLight;
				padding-top: 10px;
				margin:0;
				display: inline;
				font-size: 0.7em;
				list-style: none;
				li {
					display: inline;
					padding: 0 5px;
					a {
						color: @grayLight;
		                        }
		                        a:hover, a:focus {
		                                color: @rp-grisfonce;
		                                background-color: transparent;
		                        }
		                }
		        }
		}
	}

	.chapo {
		font-weight: 300;
	}
	.infos_associees {
		padding-bottom: 15px;
	}

	.main {
		.texte {
			padding-top: 20px;
		}
		h3 {
			color: @rp-grisfonce;
		}
	}
}

.page_rubrique, .page_auteur {
	section, .main {
                .partage {
                        text-align: left;
                        display: block;
                        ul {
                                border-top: 1px solid @grayLight;
                                padding-top: 10px;
                                margin:0;
                                display: inline;
                                font-size: 0.7em;
                                list-style: none;
                                li {
                                        display: inline;
                                        padding: 0 5px;
                                        a {
                                                color: @grayLight;
                                        }
                                        a:hover, a:focus {
                                                color: @rp-grisfonce;
                                                background-color: transparent;
                                        }
                                }
                        }
                }
	}
	.dernieres_rubriques, .derniers_articles {
		.actions {
			border-top: none;
		}
		.rp_bloc_detail {
			max-height: 165px;
		}

		.rp_accueil_article {
			min-height: 400px;
		}

		.date {
			padding-top: 0.5em;
			margin-bottom: 0.5em;
			text-transform: none;
			color: @grayLight;
		}
		.titre {
			padding-top: 0.5em;
		}
	}
}

/************** Sommaire *************/
.page_sommaire {
	.rp-titre {
		display: block;
		background-color: @rp-bleu;
	        color: @la-bleu;
		padding-top: 10px;
		padding-bottom: 7px;
		padding-left: 20px;
		margin-bottom: 15px;

	        font-family: @sansFontFamily;
	        font-weight: 500;
		text-transform: uppercase;
	}

	.rp_bloc {
		margin-bottom: 8px;

		p {
			margin-top: 10px;
		}
	}

	.rp_titre_prier {
		color: @rp-orange;
		+ p strong {
			color: @rp-bleu;
		}
	}

	.rp_titre_prier.inline {
		padding-right: 5px;
		margin-right: 5px;
		border-right: 1px solid @rp-orange;
	}

	.rp_suite_titre {
		color: @rp-bleu;
	}

	.rp-dossiers {
		margin-bottom: 10px;

		.dossier1 {
			background-color: rgba(193,39,45,0.1);
		}
		.dossier2 {
			background-color: rgba(252,238,33,0.1);
		}
		.dossier3 {
			background-color: rgba(34,181,115,0.1);
		}

                .titre {
                        padding-top: 1em;
                        margin-bottom: 0.5em;
                        a {
                                font-size: 1.5em;
                                line-height: 1em;
                                font-weight: 500;
                                color: @black;
                        }
                }

		.nb_dossiers {
			padding: 5px 0;
			i {
				color: @rp-bleu;
			}
		}

                .rp_bloc_detail {
                        max-height: 270px;
			min-height: 270px;
                        overflow: hidden;
			padding: 0 20px 10px 20px;
                }
	}

	.rp-prier {
		margin-top: 1em;
	}

	.rp-prier-bloc {
		margin-top: 1.2em;
		background-color: lighten(#5F9BD1, 30%);

                background: lighten(#5F9BD1, 30%) url("../img/prier-02.png") no-repeat right bottom;
                background-size: auto 70%;

		.rp-prier-2 {
			padding: 20px;
			background: url("../img/prier-03.png") no-repeat left bottom;
			background-size: contain;
		}
	}

	.pub-rp-vr {
		img {
			margin-bottom: 20px;
		}
		a img {
			margin-top: 11px;
		}
	}

	#carousel_actus {
		.titre-carousel {
			color: @white;
			position: absolute;
			min-height: 10px;
			bottom: 0;
                        padding: 20px;
                        background-color: rgba(0, 0, 0, 0.4);
                        width: calc(~"100% - 40px");
			font-size: 1.2em;
		}
		.carousel-indicators {
			bottom:inherit;
			top: 15px;
			right: 0;
			left: 0;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			justify-content: center;
			align-items: center;

			li {
				border-radius: 7px;
				width: 14px;
				height: 14px;
			}

			li:first-child {
				margin-left: 0;
			}
		}
	}
}

.page_rpevenement {
	.espacement {
		padding: 5px;
	}
                .rp_evt_ico {
                        min-height: 89px;
                        padding-left: 96px;
                        margin-top: 5px;
                        margin-bottom: 5px;
                        background: url("../img/autres.png") no-repeat left center;
                        background-size: 89px 89px;

                        .date {
                                font-size: 0.9em;
                                color: @rp-bleu;
                                text-transform: uppercase;
                        }
                        .dept {
                                font-size: 0.9em;
                                color: lighten(@rp-grisfonce, 30%);
                        }
                        .titre {
                                a {
                                        color: @black;
                                }
                        }
			h2 {
				color: @black;
			}
                }

                .famille {
                        background-image: url("../img/famille.png");
                }

                .diocese {
                        background-image: url("../img/diocese.png");
                }

                .paroisse {
                        background-image: url("../img/eglise.png");
                }

                .culture {
                        background-image: url("../img/culture.png");
                }

                .comm-religieuses {
                        background-image: url("../img/comm-religieuses.png");
                }

                .mouvements {
                        background-image: url("../img/mouvements.png");
                }

                .conference {
                        background-image: url("../img/conference.png");
                }
}

.page_sommaire, .rubrique_actualite, .page_rpevenement {
	.bloc-rp-evenements {
		margin-bottom: 15px;
		background-color: rgba(255,147,30,0.1);
		position: relative;
		min-height: 60px;
		
		.ajaxbloc > .row {
			min-height: 60px;
		}

		.rp_accueil_evt {
			min-height: 50px;
			padding-left: 52px;
			margin-top: 5px;
			margin-bottom: 5px;
			background: url("../img/autres.png") no-repeat left center;
                        background-size: 42px 42px;
			
			.date {
				font-size: 0.9em;
				color: @rp-bleu;
	                        text-transform: uppercase;
			}
			.dept {
				font-size: 0.9em;
				color: lighten(@rp-grisfonce, 30%);
			}
			.titre {
				a {
					color: @black;
				}
			}
		}

		.famille {
			background-image: url("../img/famille.png");
		}

		.diocese {
			background-image: url("../img/diocese.png");
		}

		.paroisse {
			background-image: url("../img/eglise.png");
		}

		.culture {
			background-image: url("../img/culture.png");
		}

		.comm-religieuses {
			background-image: url("../img/comm-religieuses.png");
		}

		.mouvements {
			background-image: url("../img/mouvements.png");
		}
	
		.conference {
			background-image: url("../img/conference.png");
		}

		.pager {
			li > span, li > a {
				display: block;
				border: none;
				background: none;
				font-size: 6em;
				font-weight: 100;
				border-radius: 0;
			}

			li > span:hover, li > a:hover, li > span:focus, li > a:focus {
				border: none;
                                background: none;
			}
			li > a:hover, li > a:focus {
				color: @rp-orange-bis;
			}
			.prev {
				a, span {
				position: absolute;
				height: 40px;
				margin: auto;
				top: calc(~"50% - 25px");
				left:0;
				}
			}
			.next {
				a, span {
				position: absolute;
				height: 40px;
				margin: auto;
				top: calc(~"50% - 25px");
				right:0;
				}
			}
		}
		.span1 {
			height: 100%;
		}

		.liens {
			i {
				color: @rp-orange-bis;
			}
		}

		.plus-un > div::before {
			content:"";
			width: 50%;
			height: 1px;
			margin-left: 55px;
			background: @grayLight;
			display: block;
		}
		.plus-un > .non-plus-un::before {
			background: none;
		}	
	}
}

.rubrique_actualite, .page_rpevenement {
	.bloc-rp-evenements {
		background-color: #ddddde;
		.pagination {
			position: absolute;
			height: 40px;
			margin: auto;
			top: calc(~"50% - 25px");
		}
		.pager {
			span, a {
				transform: rotate(90deg);
				right: 0;
				left: 0;
			}
			.prev {
				position: absolute;
				top: -20px;
				left: 30px;
			}
			.next {
				position: absolute;
				top: 20px;
				left: 30px;
			}
		}
	}

	.rp-evenemements-filtrer {
		button {
			margin-top: 20px;
			width: 100%;
			background: @rp-bleu;
			color:  @white;
			line-height: 25px;
			font-size: 14px;
			padding: 3px 10px;
			cursor: pointer;
			border: none;
		}
		ul {
			z-index: 100;
			display: none;
			position: absolute;
			margin: 0;
			background: #dddddd;
			list-style: none;
			width: 100%;
			> li {
				width: 100%;
				background: #eee;
				line-height: 25px;
				font-size: 14px;
				padding: 0 10px;
				cursor: pointer;
				a {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			> li:hover {
				background: #aaa;
				a {
					background: none;
				}
			}
		}
	}

	h3 {
		text-transform: uppercase;
	}
}

.rubrique_emission, .article_emission, .rubrique_actualite, .page_rpevenement, .rubrique_emission-distante, .page_rubrique, .page_article, .page_programme_emissions, .page_auteur, .rubrique_emission-distante {
	header h1 {
		text-align: inherit;
		color: @rp-bleu;
	}
        .infos_presentateur {
                background-color: lighten(@rp-grisfonce, 70%);
                padding-bottom: 10px;
		min-height: 337px;

                img {
                        margin-bottom: 10px;
                        background-color:lighten(@la-bleu,20%);
			/*
			background-image:url('../img/bg-presentateur.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			*/
                }

               .conteneur_presentateur {
			position: relative;
			margin: 0;
			height: 186px;
			margin-bottom: 10px;
			a img {
                                background: none;
				z-index: 10;
				position: absolute;
				top: 0;
				left: 0;
				
                        }
			.fond_presentateur {
				position: absolute;
				top: 0;
				left: 0;
				margin: 0;
				z-index: 1;
			}
                }

                div {
                        margin: 0 15px;
                }
                .presentateur {
                        font-weight: 700;
                        color: @rp-orange-bis;
                }

                .bio {
                        margin-top: 5px;
                        padding-left: 15px;
                        border-left: solid 1px @rp-orange-bis;
                }

                .liens, .twitter {
                        a {
                                display: block;
				color: @black;
                        }
                }

                .fa {
                        color: @rp-orange-bis;
                        padding-right: 5px;
                }
        }
}
.rubrique_emission, .rubrique_actualite, .page_rpevenement, .rubrique_emission-simple, .rubrique_emission-distante {
	header.cartouche {
		position: relative;
		h1 {
			color: @white;
			position: absolute;
			top: 240px;
			padding: 20px;
			background-color: rgba(0, 0, 0, 0.4);
			width: calc(~"100% - 40px");
			font-weight: 100;
			text-transform: uppercase;
			max-height: 68px;
			overflow: hidden;
		}
	}
}

.rubrique_emission-simple {
	.main h2 {
		text-transform: uppercase;
	}
	.rp_accueil_article {
		min-height: 350px;
		h4.titre {
			display: none;
		}
	}
}

.rubrique_actualite, .page_rpevenement, .article_actualite {
	.rp-player-sans-description {
		div {
			margin: 0;
		}
	}
	.ecoutez {
		color: @rp-bleu;
		padding-top: 10px;
		font-weight: 500;
	}

	.rp-evenemements-proposer {
		margin-top: 20px;
		a {
			display: block;
			width: 100%;
			color: white;
			background-color: @rp-vert;
			text-align: center;
			padding: 5px 0;
		}
	}
}

.mot_dossier {
        .infos_dossier {
                background-color: lighten(@rp-grisfonce, 70%);
                padding-bottom: 10px;
		min-height: 338px;

		h1 {
			padding: 5px 5px;
			color: @black;
			background-color: lighten(@rp-bleu, 30%);
			font-weight: 100;
			text-align: center;
			line-height: 1.2em;
			text-transform: uppercase;
		}

                img {
                        margin-bottom: 10px;
                }
                div {
                        margin: 0 15px;
                }
                .presentateur {
                        font-weight: 700;
                        color: @rp-orange-bis;
                }

                .chapo {
                        margin-top: 5px;
                        padding-left: 15px;
                        border-left: solid 1px @rp-orange-bis;
                }

                .liens {
                        a {
                                display: block;
                        }
                }

                .fa {
                        color: @rp-orange-bis;
                        padding-right: 5px;
                }
		a {
			color: @black;
		}
        }
}

/************* Général ************/
	.rp_accueil_article {
		display:block;
		min-height: 520px;

		.date {
			padding-top: 0.5em;

			color: @grayLight;
			text-transform: uppercase;
		}

		.horaire {
			color: @la-bleu;
			text-transform: uppercase;
			a {
				color: @la-bleu;
			}
		}

		.titre {
			padding-top: 0.8em;
                        margin-bottom: 0.5em;
			a {
				font-size: 1.5em;
				line-height: 1em;
				font-weight: 500;
				color: @black;
			}
			a:hover, a:focus {
				background-color: transparent;
			}
		}

		.rp_bloc_detail {
			max-height: 230px;
			overflow: hidden;
		}

		.actions {
			position: absolute;
			bottom: 0;
			border-top: 1px solid @grayLight;
			margin-bottom: 2em;
			color: @grayLight;
			font-size: 0.8em;
			.titre {
				text-transform: uppercase;
			}
			ul {
				margin-left: 0;
				li {
					display: inline;
					list-style: none;
					a {
						color:@grayLight;
						padding: 0 2px;
					}
                                        a:hover, a:focus {
                                                color:@gray;
						background-color: transparent;
                                        }
				}
			}
		}
		.bouton-action {
			position: absolute;
			top: 196px;
			right: 10px;
			font-size: 2em;
			color: @rp-orange-bis;
		}
	}


#contenu {
	position: relative;
	background-color: @white;
	margin-left: -22px;
	padding-left: 22px;
	margin-right: -22px;
	padding-right: 22px;

}

#contenu::after {
    background-clip: padding-box;
    border-radius: 30px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    content: "";
    height: 155px;
    left: 0;
    position: absolute;
    right: 0;
    top: -10px;
    width: 100%;
    z-index: -2;
}

.bandeau_infos {
	position: relative;
	background-color: @la-bleu;
	padding: 0 10px;
	margin-bottom: 10px;
	line-height: 2.5em;

	.diffusions {
		position:relative;
		color: @white;
		font-weight: 500;
		font-size: 1.3em;
		.rediffusions {
			z-index: 40;
			display: none;
			border-color: @la-bleu;
			border-style: solid;
			border-width: 0 1px 1px 1px;
			position: absolute;
			left:-10px;
			min-width: 200px;
			color: @la-bleu;
			background-color: @white;
			padding: 10px;
			line-height: 1.5em;
			
			ul {
				position: initial;
				margin-bottom: 0;
				li {
					display: block;
					color: @la-bleu;
				}
			}
		}
	}
	.abonnement, .duree, .telechargez, .date, .emission {
		text-transform: uppercase;
		color: @white;
		border-left: 1px solid @white;
		margin-left: 10px;
		padding-left: 13px;
		font-weight: 100;
		font-size: 1.1em;
                        a {
                                color:@white;
                        }
                        a:hover, a:focus {
                                color:@grayLight;
                                background-color: transparent;
                        }
		i.fa {
			font-size: 1.3em;
			padding-left: 5px;
			vertical-align: middle;
		}
	}
	.emission {
		font-weight: 500;
	}
	.abonnement {
		position:relative;
		.formats_abonnement {
                        z-index: 40;
                        display: none;
                        border-color: @la-bleu;
                        border-style: solid;
                        border-width: 0 1px 1px 1px;
                        position: absolute;
                        left:-10px;
                        min-width: 200px;
                        color: @la-bleu;
                        background-color: @white;
                        padding: 10px;
                        line-height: 1.5em;

			a {
				color: @la-bleu;
			}

                        ul {
                                position: initial;
                                margin-bottom: 0;
                                li {
                                        display: block;
                                }
                        }
		}
	}
	ul {
		position: absolute;
		right: 0;
		margin-left: 0;
		margin-right: 10px;
		margin-top: 3px;
		display: inline;
		font-size: 0.7em;
		li {
                        display: inline;
                        list-style: none;
			padding: 0 5px;
			color:@la-bleu;
                        a {
				color:@la-bleu;
                        }
                        a:hover, a:focus {
				color:@grayLight;
				background-color: transparent;
			}
		}
	}
}

.page_article.article_emission {
	.bandeau_infos {
		display: flex;
		justify-content: space-between;
		text-align: center;
		.formats_abonnement {
			text-align: left;
		}
		> span {
			flex-basis: auto;
			flex-grow: 1;
			border: none;
			position: relative;
		}
		> span + span::before {
			position: absolute;
			left: 0;
			top: 25%;
                        content:"";
                        width: 1px;
                        height: 50%;
                        background: @white;
                        display: inline-block;
		}
		
	}
}



.breadcrumb {
	background-color: transparent;
	margin-top: -20px;
	padding: 8px 0;
	li {
		color: @grayLight;
		a {
			color: @grayLight;
		}
		a:hover, a:focus {
			color:@gray;
		}
	}
	> .active {
		color: @rp-bleu;
	}
}

div.rp_pagination {
	position: relative;
        .pager {
                li > span, li > a {
                        display: block;
                        border: none;
                        background: none;
                        font-size: 6em;
                        font-weight: 100;
                        border-radius: 0;
                }

                li > span:hover, li > a:hover, li > span:focus, li > a:focus {
                        border: none;
                        background: none;
                }
                li > a:hover, li > a:focus {
                        color: @rp-orange-bis;
                }


        }
        .pagination {
                position: absolute;
                height: 40px;
                margin: auto;
                top: calc(~"50% - 25px");
        }
	.prec {
		left: -80px;
	}
	.suiv {
		right: -80px;
	}
}
/********* Player **************/
.rp-player-sans-description {
	.spip_doc_titre {
		display: none;
	}
	.spip_doc_descriptif {
		display: none;
	}
}

.spip_document_audio {
	width: 100%;

	.mejs__container {
		background-color: @grayLighter;
		color: @rp-grisfonce;

		.mejs__controls {
			background: rgba(0, 0, 0, 0) linear-gradient(rgba(50, 50, 50, 0.1), rgba(0, 0, 0, 0.1)) repeat scroll 0 0;
			.mejs__button button {
				color: @rp-orange-bis;
			}
			.mejs__time span {
				color: @rp-grisfonce;
			}
			.mejs__time-rail {
				.mejs__time-loaded {
					background: rgba(0, 0, 0, 0) linear-gradient(rgba(180, 180, 180, 0.8), rgba(200, 200, 200, 0.8)) repeat scroll 0 0;
				}
				.mejs__time-current {
                                        background: rgba(0, 0, 0, 0) linear-gradient(rgba(50, 50, 50, 0.8), rgba(70, 70, 70, 0.8)) repeat scroll 0 0;
                                }
			}

			.mejs__horizontal-volume-slider {
				.mejs__horizontal-volume-total {
					background: rgba(0, 0, 0, 0) linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)) repeat scroll 0 0;
				}
				.mejs__horizontal-volume-current {
					background: rgba(247, 147, 30, 1) repeat scroll 0 0;
                                        max-width: 90%;
				}
			}
		}
	}
}

/***** Abonnement newsletter *****/
.rp-prefooter {
	.abo {
		padding-top: 0;
		display: inline-block;
	}
	.abo-newsletter {
		display: inline-block;
		width: 60%;
		height: 27px;
		padding-left: 20px;
	}
	.input-prepend {
		border-collapse: separate;
		display: table;
		position: relative;
		width: 80%;
		margin-bottom: 0;
		border-radius: 0;
		color: @white;
	}

	.input-prepend .add-on {
		background-color: #ffffff;
		border-right: none;
		color: #999999;
	}

	.input-prepend input {
		border-left: none;
	}

	.input-prepend input {
		border-radius: 0;
	}
	
	.input-prepend .buttons input {
                border-radius: 0;
                color: @white;
                background: @rp-grisfonce;
		border: none;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	.ariaformprop, .formulaire_newsletter_subscribe, form {
		display: inline;
	}

	form {
		margin-bottom: 0;
	}

	.reponse_formulaire {
		/* Ici gestion des réponses... */
	}

}


.abo_newsletter {
	border-left: 15px solid @rp-orange-bis;
	padding-left: 10px;
	margin: 10px 0;
	position: relative;

	a {
		position: absolute;
		right: 0;
		top: 0;
		display: bloc;
		background-color: @rp-orange-bis;
		color: @white;
		padding: 5px 10px;
		margin: 5px 10px;
	}
}

.page_programme_emissions, .page_programme_emissions_test {
	.table_programme {
		display: table;
		width: 100%;
		.accordion-toggle {
			span {
				display: inline-block;
				width: 1px;
				background-color: @rp-orange-bis;
				height: 10px;
			}
			.tranche {
				width: auto;
				background-color: inherit;
				height: auto;
				padding-left: 20px;
			}
			color: @grayLight;
			text-transform: uppercase;
		}

		.tbl_programme {
			display: table;
			width: 100%;
		}

		.item {
			display: table-row;
			height: 60px;

			> div {
				display: table-cell;
				vertical-align: middle;
			}
		}

		.odd {
			background-color: lighten(@grayLight, 25%);
		}

		.titre {
			font-weight: 600;
			color: @rp-orange-bis;
		}

		.horaire {
			text-align: center;
			.sep {
				color: @rp-orange-bis;
				padding: 0 5px;
			}
		}

		.actions {
			.voir {
				color: @grayLight;
			}
			.ecouter {
				color: @rp-orange-bis;
			}
			a:hover, a:focus {
				background-color: transparent;
			}
		}
	}

	.zones {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		margin-left: 0;
		margin-bottom: 0;
		li {
			display: inline;
			flex-basis: auto;
			flex-grow: 1;
			text-align: center;
			a {
				display: block;
				width: 100%;
				padding: 10px 0;
			}
			.on {
				background-color: lighten(@grayLight,25%);
			}
		}
	}

	.programmelocal {
		font-weight: 100;
		font-style : italic;
		font-size: 0.9em;
	}

	.datejour {
		text-align: center;
		color: @rp-orange-bis;
		font-weight: 500;
		font-size: 1.4em;
		padding-bottom: 15px;
		display: none;
	}

        .menu_date {
		font-size: 0.8em;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                width: 100%;
                margin-left: 0;
                margin-bottom: 0;
                li {
                        display: inline;
                        flex-basis: auto;
                        flex-grow: 1;
                        text-align: center;
			text-transform: uppercase;
			span {
				display: block;
                                width: 100%;
                                padding: 10px 0;
			}
                        a {
                                display: block;
                                width: 100%;
                                padding: 10px 0;
				color: @grayLight;
                        }
			.inactif {
				color: lighten(@grayLight,25%);
			}
                        .on {
                                background-color: lighten(@grayLight,25%);
                        }
			.jourj {
				color: @rp-orange-bis;
			}
			.prev_next {
				font-size: 2em;
			}
                }
        }
}
.mini_lecteur {
	margin: 10px 0 0 0;

        .mejs__container:focus {
            outline: none;
	}

	.mejs__container {
		background: none;
		.mejs-mediaelement, .mejs-layers {
			display: none;
		}
		.mejs__controls {
			background: none;
                        position:relative;
			.mejs__time, .mejs__horizontal-volume-slider, .mejs__time-rail, .mejs__volume-button {
			display: none;
			}
			.mejs__playpause-button {
				color: @grayLight;
				font-size: 2em;
				button {
					display:none;
				}
			}
			.mejs__play::before {
				content: "\f04b";
				font-family: FontAwesome;
			}
			.mejs__pause::before {
				content: "\f04c";
				font-family: FontAwesome;
			}
		}
	}

	form input {
display: none;
	}
}


.simple_mini_lecteur {
	.pause {
		display: none;
	}
}

.simple_mini_lecteur.lecture_en_cours {
	.lecture {
		display: none;
	}
	.pause {
		display: block;
	}
}

        .chapo {
                font-weight: 300;
        }

.composition_contact #content, .article_actualite #content {
	.separateur_contact {
		height: 75px;
	}
	h1, h2, h3, .article_normal header h1 {
		text-align: left;
		color: @rp-bleu;
		font-size: 1.8em;
		font-weight: 300;
		text-transform: uppercase;
		line-height: 1.8em;
	}
	
	.infos_adresses {
		.texte {
			margin-top: 40px;
			border: 1px @grayLight solid;
			padding: 15px;

			strong {
				color: @rp-bleu;
			}
			i {
				color: @grayLight;
				font-style: normal;
			}
		}
	}
}





.ancres_pagination a {
	display: block;
	position: relative;
	top: -250px;
	visibility: hidden;
}



.formulaire_spip {
	.boutons {
		text-align: left;
		input.submit {
	                border-radius: 0;
	                color: @white;
	                background: @rp-orange-bis;
	                border: none;
	                padding: 5px 18px;
			box-shadow: none;
			text-shadow: none;
			text-transform: uppercase;
			margin-right: 10px;
	        }
		input.submit:active {
			background: darken(@rp-orange-bis,10%);
		}
		input.submit.effacer {
			background: @grayLight;
		}
		input.submit.effacer:active {
			background: darken(@grayLight,10%);
		}
	}
}

.formulaire_contact_radiopresence, .formulaire_proposer_evenement {
	label {
		color: @grayLight;
	}
}

.partenaire {
	margin:10px 0;
}

.page_recherche {
	.resultats {
		.liste-items {
			display: table;
			width: 100%;
			.item {
				display: table-row;
				width: 100%;
				> div {
					vertical-align: middle;
					display: table-cell;
					padding: 5px 1px;
				}
				.titre {
					font-weight: 600;
					color: @rp-orange-bis;
				}
				.presentateur {
					font-style: italic;
					color: @grayLight;
				}
				.actions {
					.voir {
						color: @grayLight;
					}
					.ecouter {
						color: @rp-orange-bis;
					}
					a.lecture_en_cours .fa-play::before {
						content: "\f04c";
					}
		                        a:hover, a:focus {
						background-color: transparent;
		                        }
					.mini_lecteur {
						display: none;
					}
				}
			}
			.odd {
				background-color: lighten(@grayLight, 25%);
			}
		}
	}
}

.campagne_encart_vertical, .campagne_encart_horizontal {
	padding-bottom: 15px;
}

@media (max-height: 820px) {
	#header .rp-postheader .rp-menu {
		ul {
			font-size: 0.9em;
			line-height: 1em;
		}
		> li > div li {
			padding-top: 2px;
			padding-bottom: 2px;
			font-size: 0.9em;
			line-height: 1em;
		}
		> li > div li ul {
			padding: 3px 0;
		}
	}
}

@media (max-width: 767px) {
	.actions.row-fluid {
		.span4 {
			float: left;
			width: 33%;
		}
	}
	#header {
		padding: 0;

		.rp-preheader {
			font-size: 0.8em;
			> .container {
				padding: 0 5px;
			}
		}
		.rp-header {
                        height: 200px;
			> .container {
				padding: 0 5px;
			}
			.accueil {
                                width: 20%;
                                float: left;
                        }
                        .rp-reecoute, .rp-direct, .rp-programme {
				width: 75%;
				float: none;
                                height: 50px;
                                margin-left: 20%;
                                a, a.rp-direct-lien {
                                    background-position: left center;
                                    background-size: contain;
                                    height: auto;
                                    padding-left: 40px;
                                    position: inherit;
                                    margin: 0;
                                    width: 100%;
                                }
			}
                        .rp-titre-menu {
                            position: inherit;
                        }

			.rp-direct {
				a.rp-direct-lien {
				}
			}
                        .rp-programme a {
                        }
		}
		.rp-postheader .rp-menu > li > a {
			font-size: 0.8em;
		}
	}
	#contenu {
		margin: 0;
		padding: 0;
		.bandeau_infos {
			font-size: 0.9em;
		}
	}
	#contenu::after {
		display: none;
	}

	div.rp_pagination .suiv {
		right: 0;
	}
	#footer {
                padding: 0;
		> div {
			padding-right: 5px;
			padding-left: 5px;
		}
	}
	.rp_accueil_article.pub, .rp-menu-icones, .rp-vie, .pub-rp-vr, #header .rp-preheader ul li.no_phone, #header .rp-header .rp-direct .rp-panneaudirect, #footer .rp-postfooter ul li.no_phone {
		display: none;
	}
	.rp-footer .row > div {
		padding-bottom: 20px;
		p {
			margin-bottom: 0.1em;
		}
	}
	.page_programme_emissions .zones {
		font-size: 0.7em;
	}
	.page_sommaire .bloc-rp-evenements {
		padding: 20px 0;
	}
	.page_sommaire .bloc-rp-evenements .pagination {
		position: inherit;
		.prev {
			a, span {
				margin: auto;
				width: 25px;
				position: absolute;
				top: -20px;
				left: inherit;
				right: calc(~'50% - 22px');
				transform: rotate(90deg);
			}
		}
		.next {
                        a, span {
                                margin: auto;
                                width: 25px;
                                position: absolute;
                                bottom: -27px;
				top: inherit;
                                right: calc(~'50% - 22px');
				transform: rotate(90deg);
                        }
		}
	}
	.page_sommaire .bloc-rp-evenements .span10 {
		margin-left: 20px;
		margin-righr: 20px;
		.row-fluid {
			.span6 + .span6::before {
				content:"";
				width: 50%;
				height: 1px;
				margin-left: 55px;
				background: @grayLight;
				display: block;	
			}
			.span6 + .span6.non-plus-un::before {
				display: none;
			}
		}
	}

	.rubrique_emission header.cartouche h1, .rubrique_actualite header.cartouche h1, .page_rpevenement header.cartouche h1, .rubrique_emission-simple header.cartouche h1, .rubrique_emission-distante header.cartouche h1 {
		top: 60px;
	}
	.page_rpevenement .infos_presentateur {
		display: none;
	}
}

.embed {
	position:relative;
        .block_embed {
		z-index: 40;
                display: none;
                border-color: @rp-bleu;
                border-style: solid;
                border-width: 1px;
                position: absolute;
                left:-40px;
                min-width: 200px;
                color: @rp-bleu;
                background-color: @white;
                padding: 10px;
                line-height: 1.5em;

		form {
			margin-bottom: 0;
		}
		input[readonly] {
			cursor: pointer;
			width:calc(~"100% - 20px");
		}
	}
}

.bandeau_infos .embed .block_embed {
	left: inherit;
	right: 0;
}


#embed {
	.tableau {
		display: flex;
                align-items: center;

	}
	.tableau [class*="span"] {
		float: none;
		margin: 0;
	}

	.tableau .span2 {
		width: 116px;
		min-width: 116px;
		min-height: 72px;

	}
	.tableau .span8 {
		margin: 0 10px;
		width: 100%;
	}
	.en_savoir_plus {
		text-align: center;
		a:hover, a:focus {
			background-color: transparent;
		}
	}

	@media (max-width: 530px) {
		.tableau {
			display: block;
		}
		.tableau [class*="span"] {
			float: none;
			display: block;
			width: 100%;
		}
		.tableau .plus {
			display: none;
		}
		.tableau .image {
			display: none;
		}
		.tableau .logo {
			width: 60px;
			float: right;
		}
		.date, .horaire {
			display: inline-block;
		}
	}

	@media (max-width: 470px) {
		.tableau .logo {
			display: none;
		}
	}

	.date {
		padding-top: 0.5em;
		color: @grayLight;
		text-transform: uppercase;
	}

                .horaire {
                        color: @la-bleu;
                        text-transform: uppercase;
                        a {
                                color: @la-bleu;
                        }
                }

                .titre {
                        padding-top: 0.1em;
                        margin-bottom: 0.5em;
                        a {
                                font-size: 1.5em;
                                line-height: 1em;
                                font-weight: 500;
                                color: @black;
                        }
                        a:hover, a:focus {
                                background-color: transparent;
                        }
                }

                .rp_bloc_detail {
                        max-height: 230px;
                        overflow: hidden;
                }	
	
	.spip_documents {
		margin-top: 0.3em;
	}
	margin: 5px;
}


/*** Formulaire de don ***/
.don .formulaire_don {
	background-color: @white;
	.formulaire_don_montant {
		.titre {
			display: block;
			border-top: 5px solid @rp-bleu;
			background-color: @rp-vert;
			text-transform: uppercase;
			color: @white;
			font-size: 1.5em;
			padding: 0.3em;
		}

		.montant_choix {
			border: 1px solid @rp-bleu;
			border-top: none;
		}

		.input-append {
			padding-top: 15px;
			width: 80%;
			text-align: center;
			margin: 0 auto 10px auto;
		}

		.editer_montant {
			display: inline-block;
			label {
				padding-left: 20px;
				padding-right: 20px;
				padding-top: 3px;
				display: inline-block;
				.obligatoire {
					display: none;
				}
			}
			input {
				display: inline-block;
				width: 100px;	
			}
		}

		.montant_apres_deduction {
			text-align: center;
			background-color: fade(lighten(@rp-bleu, 25%), 30%);
			margin-top: 5px;
			padding: 5px;
		}
		
		#montant_apres_deduction {
			color: @rp-bleu;
			font-weight: 800;
			i {
				font-weight: 100;
				color: @black;
			}
		}
	}
	.editer_montant_choix {
		.choix {
			display: block;
			position: relative;
			float: left;
			width: 20%;
			height: 60px;

			input[type=radio]{
				position: absolute;
				visibility: hidden;
			}

			input[type=radio]:checked ~ label {
				border: 5px solid @rp-bleu;
				background-color: @rp-bleu;
				color: @white;
			}

			label {
				display: block;
				position: absolute;
				border: 5px solid @rp-bleu;
				color: @rp-bleu;
				border-radius: 100%;
				text-align: center;
				line-height: 40px;
				height: 40px;
				width: 40px;
				top: 10px;
				left: 20px;
				z-index: 5;
				transition: border .25s linear;
				-webkit-transition: border .25s linear;
			}
		}
		.choix:hover {
			label {
				border: 5px solid @rp-vert;
			}
		}
	}

        .formulaire_don_coordonnees {
		margin-top: 20px;
                .titre {
                        display: block;
                        text-transform: uppercase;
                        color: @rp-bleu;
                        font-size: 1.5em;
                        padding: 0.3em;
			padding-left: 0;
                }
		.editer_civilite {
			display: inline-block;
			div, label {
				display: inline-block;
			}
			input {
				margin-left: 15px;
			}
		}
	}
}

.page_sommaire {
	.rp_accueil_article {
		.horaire {
			padding-top: 10px;
		}
		.date, .datediff {
			display: none;
		}
	}
        .rp-vie {
                .spip_doc_titre {
                        display: none;
                }
        }
}


.progress-bar-rp {
	width: 100%;
	progress {
		width: 100%;
		max-height: 5px;
	}
}

.page_sommaire .boitemodale {
    display: none;
}

.coordonnees-pied {
    padding-top: 5px;
    text-align:center;
}

.la-actu {
    color:@la-bleu;
    text-align:center;
    font-size:1.2em;
}

.affix .la-actu {
    display: none;
}

.biblia {
    padding:0 10px;
    text-align: center;
    p {
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }
}