/**
* gestion article salamandre 
*/




figure, .video-player {
	position: relative;
}


figure#image-une figcaption {
	font-family: 'morl_sanslight', sans-serif;
	font-size: 12px;
	line-height: 14px;
	padding: 5px 15px;
	color: #000;
	background-color: #FFF;
	width: calc(100% - 30px);
}


article{
	margin-bottom: 40px;
}

article .article-content h2,
article .article-content h3,
article .article-content h4,
article .article-content h5,
article .article-content h6,
article .article-content section h2,
article .article-content section h3,
article .article-content section h4,
article .article-content section h5,
article .article-content section h6 {
	text-align: left;
	font-family: 'morl_sansbold', sans-serif;
	margin-bottom: 20px;
}

figure#image-une,
.video-player,
article .article-content p,
article#main-article p,
article .article-content figure,
article#main-article figure,
article .article-content blockquote,
article#main-article blockquote,
article .article-content .cadre,
article#main-article .cadre,
article .article-content ol,
article#main-article ol,
article .article-content ul ,
article .article-content ul,
article .article-content .player,
article .article-content .video-container {
	margin-bottom: 20px;
}


.page-liste p.intro,
article p.intro,
article .article-content p,
article#main-article p,
article .article-content ul,
article#main-article ul,
article .article-content ol ,
article#main-article ol {
	font-size: 18px;
	font-family: 'PT Serif', serif;
}

.page-liste p.intro,
article p.intro {
	font-size: 20px;
	font-weight: 600;
	/*font-family: 'morl_sanslight', sans-serif;*/
}

article aside{
	position: relative;
	z-index:	2;;
}


/** IMAGES **/
figure#image-une img{
	width: 100%;
}

article figure {
	text-align: center;
	padding: 0;
}

article figure figcaption{
	text-align: right;
	padding: 0!important;
}

article figure figcaption {
	font-family: 'morl_sanslight', sans-serif;
	font-size: 14px;
	line-height: normal;
}

article figure figcaption.container {
	width: 100%;
}

article figure img {
	min-width: 30%;
	margin-bottom: 15px;
}
article .article-content figure a,
article#main-article figure a{
	border-bottom: none!important;
}

article figure.fullwidth,
article figure.fullwidth img {
	width: 100%;
	
}

article figure.half img {
	width: 50%;
	margin: auto;
}

article figure.half figcaption {
	width: 50%;
	margin: auto;

}

article figure.left,
article figure.right {
	max-width: 50%;
	width: auto;
}

article figure.left img,
article figure.right img{
	max-width: 100%;
	width:auto;
}

article figure.left {
	float: left;
	text-align: left;
	margin-right: 15px;
}


article figure.right {
	text-align: right;
	float: right;
	margin-left: 15px;

}

article figure.left figcaption {
	text-align: left;
	padding: 0;
}

article figure.right figcaption {
	text-align: right;
	padding: 0;
}

article figure.left+p {
	text-align: right;
}


article figure.left+p:after,
article figure.right+p:after {
	width: 100%;
	height: 0;
	display: inline-block;
	content: '';
	float: none;
	clear: both;
}


article .article-content a,
article#main-article a{
    border-bottom: 2px solid var(--yellow);
}

article .article-content a:hover,
article#main-article a:hover,
article .article-content a:active,
article#main-article a:active {
    border-bottom: 2px solid #000;
}

/* Citation */
article  blockquote {
	border: none;
	padding: 15px;
	box-shadow: 5px 5px 7px 0 rgba(0, 0, 0, 0.20);
}

/*article blockquote .blockquote-inner:before,
 article blockquote .blockquote-inner:after{
	 
	display: inline-block;
	position: relative;
	font-size: 80px;
	color: #ffe200;
	font-family: 'PT Serif', serif;
	

 }
 article blockquote .blockquote-inner:before{
	 content:'\201C';
 }
 article blockquote .blockquote-inner:after{
	content:'\201E';
}*/
article blockquote .blockquote-inner {
	-webkit-box-pack: justify;
	justify-content: space-between;
	margin-bottom: 20px;
}

article blockquote .blockquote-inner p {
	font-style: italic;
	/*display: inline-block;*/
	/*width: 70%;*/
	font-size: 18px;
	line-height: 25px;
	margin: 0 0 0 10px;
}

article blockquote .blockquote-inner span {
	/* display: inline-block;*/
	line-height: initial;
	height: 100%;
	font-size: 80px;
	color: #ffe200;
	font-family: 'PT Serif', serif;
}

article blockquote .blockquote-inner span:first-child {
	-webkit-align-self: flex-start;
	align-self: flex-start;
}

article blockquote .blockquote-inner span:last-child {
	-webkit-align-self: flex-end;
	align-self: flex-end;
}

article blockquote .blockquote-legend {
	font-family: 'morl_sanslight', sans-serif;
	font-size: 14px;
}



/** encadré **/
article .cadre {
	margin: 40px 0 40px 5%;
	width: 95%;
	border-left: 3px solid #ffe200;
	padding: 5px 0 5px 20px;
}

article .cadre p {
	/*font-family: 'morl_sanslight', sans-serif;
	font-family: 'morl_sanslight', sans-serif;*/
	color: #666666;
	/*font-style: italic;*/
	/*font-size: 20px;*/
}


 .time,
 .reading-time,
 .reading-time-infos {

	padding: 0;
}

 .time,
 .reading-time p {
	font-family: 'morl_sanslight', sans-serif;
	font-size: 12px;
	line-height: normal;
}

 .time {
	border-left: 1px solid #ccc;
}

 .time .time-picto img,
 .reading-time-picto img {
	margin: auto;
}
 .time .time-infos{
	padding: 0;
}
 .time .time-infos time {
	text-align: left;
	display: block;
	width: 100%;
}

.time .time-infos time:last-child {
	font-style: italic;
	color: #666666;
}

.reading-time p {
	margin-bottom: 0;

}
article .socials{
	margin-bottom: 10px;
}
article .socials ul{

			-webkit-box-orient: horizontal;

			-webkit-box-direction: normal;
			        flex-direction: row;
			-webkit-box-pack: center;
					justify-content: center;
}

article .socials ul li{
	margin-bottom: 5px;
	text-align: center;
}



/* MISE EN PAGE */

/*article non abonné*/
article.restricted, 
article .article-content.restricted{
/*article.restricted .article-content{*/
	max-height: 600px;
	overflow: hidden;
	position: relative;
	display: inline-block;
}

article.restricted:after,
article .article-content.restricted:after{
/*article.restricted .article-content:after{*/
	content:'';
	display: inline-block; /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)),to(rgba(255,255,255,1)));
	background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	height: 100px;
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 3;
}
article header {
	margin-bottom: 20px;
}
article header .promo-abonne,
article header .promo-abonne .abonne-text {
	padding: 0;
}
article header .promo-abonne .abonne-text{
	padding-right: 15px;
}
article header .promo-abonne {
	margin-top: 5px;
}

article header .promo-abonne .abonne-picto{
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 15px;
	margin: 0;
}

article header .promo-abonne img.picto-abonne{
	margin-bottom: 0;
	/*height: 18px;
	width: auto;*/
}

article header .promo-abonne p.promo-advert{
	font-size: 12px;
	line-height: 14px;
	margin: 0;
}

article header .abonne-text p{
	font-size: 12px;
    line-height: normal;
    margin-bottom: 0;
}
.article-container{
	position: relative;
	z-index:1;
}
.article-end{ /* FF3.6-15 */

	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)),to(rgba(0,0,0,0.2)));

	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	height: 150px;
	top: -150px;
	margin-bottom: -100px;
	position: relative;
	
	z-index: 0;

}

/************************************** Header dossier ******************************/

#article-dossier{
	position: relative;
	background-color: #1d1d1b;
	margin-bottom: 20px;
	margin-top: -20px;
}
.same-articles .dossiers-header{
	padding: 15px;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	        flex-direction: column;
-webkit-box-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	        align-items: center;
}

.same-articles .dossier-infos{
	-webkit-box-align: center;
	        align-items: center;
	-webkit-box-pack: center;
			justify-content: center;
			margin-bottom: 10px;
}
.same-articles .dossier-infos img,
.same-articles .dossier-infos{
	margin-right: 20px;
}
.same-articles .dossier-infos p{
	font-family: 'Domine', serif;
	color: #FFF;
	font-size: 12px;
	margin-bottom: 0;
}

.same-articles .dossier-infos h4{
	color: #ffe200;
	margin-bottom: 0;
	font-size: 24px;
}


#article-dossier.same-articles .dossier-nav{
	color: var(--yellow);
	font-size: 3rem;
	position: absolute;
	top: 50%;
	
}

#article-dossier.same-articles .dossier-nav.dossier-prev{
	left: 10%;
	-webkit-transform: translateY(-50%) rotate(-180deg);
	        transform: translateY(-50%) rotate(-180deg);
}
#article-dossier.same-articles .dossier-nav.dossier-next{
	right: 10%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
}
#article-dossier.same-articles .dossiers-list{
	background-color: #edeae1;
	padding: 20px 0;
}
.same-articles .dossiers-list ul{
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	        flex-direction: row;
	flex-wrap: wrap;
}

.same-articles .dossiers-list ul:after,
.same-articles .dossiers-list ul:before{
	content: normal;
}
.same-articles .dossiers-list ul li{
	padding: 0 15px; 
	margin-bottom: 10px;
	position: relative;
}

.same-articles .dossiers-list ul li .active-overlay{
	height: 100%;
	width: calc(100% - 30px);
	background-color: rgba(0, 0, 0, 0.60);
	position: absolute;
	z-index: 5;
	top: 0;
	left: 15px;
	color: #FFF;
	display: -webkit-box;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
			flex-direction: column;
			-webkit-box-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			        align-items: center;
	
}

.same-articles .dossiers-list ul li .active-overlay>img{
	margin-bottom: 10px;
}

.same-articles .dossiers-list ul li .active-overlay p{
	margin-bottom: 50px;
	font-size: 24px;
}

.same-articles .dossiers-list .ressource-item .ressource-infos{
	background-color: transparent;
}

.same-articles .dossiers-list .ressource-item .ressource-description{
	display: block;
}


#article-dossier>.close-dossier-preview{
	position: absolute;
	right: 15px;
	top: 10px;
}


#article-dossier .dossiers-list .close-dossier-preview{
	display: block;
	margin: 0 auto;
}

#article-dossier .dossiers-list .close-dossier-preview img{
	display: inline-block;
	margin: 0 0 0 10px;
	vertical-align: sub;
}




/** exceptions only for xs and small */
@media screen and (max-width:991px) {

	figure#image-une {
		height: 250px;
	}
	figure#image-une a{
		height: 100%;
	}
	
	figure#image-une img {
		
		position: relative;
		/*width: auto;*/
		min-height: 100%;
		height: auto;
		min-width: 100%;
		max-width: none;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	figure#image-une a img{
		top: 0%;
		-webkit-transform: translate(-50%, 0%);
		transform: translate(-50%, 0%);
	}


	.page-content article h1 {
		text-align: left;
		margin-bottom: 20px;
		font-size: 34px;
	}
	.page-content .article-content h2 {
		font-size: 26px;
	}
}

/** SM **/
@media screen and (min-width:768px) {}

/** MD **/
@media screen and (min-width:992px) {

	article{
		margin-bottom: 0;
	}


article .socials ul{

			-webkit-box-orient: vertical;

			-webkit-box-direction: normal;

			        flex-direction: column;
					border-right: 3px solid #ffe200;
}

figure#image-une {
	height: 350px;
}

	
	.video-player img{
		width: auto;
		height: auto;
	}

	figure#image-une img {
		height: auto;
	}
	
	figure#image-une figcaption {
		font-size: 18px;
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		text-align: right;
		color: #FFF;
		background-color: transparent;
		bottom: 0;
		padding: 15px 0;
		padding-left: 0;
		padding-right: 0;
	}

	.page-liste p.intro,
	article p.intro {
		font-size: 24px;
		line-height: 30px;
		font-weight: 500;
	}

	article .article-content p,
	article#main-article p{
		line-height: 24px;
	}

	article figure.left,
	article figure.right {
		margin-top: 5px;
	}


	article blockquote .blockquote-inner {
		margin-bottom: 0;
	}

	article blockquote .blockquote-inner span {
		font-size: 150px;
	}

	article blockquote .blockquote-inner p {
		font-size: 22px;
		line-height: 31px;
	}

	article header {
		margin-bottom: 40px;
	}

	article header .right,
	.sidebar-infos {
		border-left: 1px solid #ccc;
	}
	article header .right .author.small {
		margin-top: 20px;
	}



	article header .promo-abonne .abonne-text,
	article header .promo-abonne {
		padding: 0 15px;
	}

	article header .promo-abonne {
		margin-top: 5px;
	}

	article header .promo-abonne .abonne-picto{
		width: 35px;
		height: 35px;
		line-height: 35px;
		font-size: 16px;
	}



	article header .promo-abonne p.promo-advert{
		font-size: 16px;
		color:var(--red);
	}

	article header .abonne-text p{
		font-size: 16px;
		
	}
	



	.time,
	.reading-time,
	.reading-time-infos,
	.time .time-infos{
		padding: 0 15px;
	}

	.time,
	.reading-time {
		border-left: none;
		margin-bottom: 20px;
	}
	.sidebar-infos{
		margin-bottom: 20px;
	}
	.sidebar-infos .time, 
	.sidebar-infos .reading-time{
		padding-left: 0;
	}

	.sidebar-infos .reading-time{
		margin-bottom: 0;
	}

	.time .time-infos time:first-child,
	.reading-time p {
		font-size: 16px;
	}

#article-dossier.same-articles .dossier-nav.dossier-prev{
	right: 15%;
	left: auto;
	
}
#article-dossier.same-articles .dossier-nav.dossier-next{
	right: 10%;
	left: auto;
}
	#article-dossier .dossiers-header{
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		        flex-direction: row;
	}

	#article-dossier .dossier-infos{
		margin-bottom: 0;
	}

	#article-dossier .dossiers-list ul li .active-overlay p{
		margin-bottom: 150px;
	}


	#article-dossier>.close-dossier-preview{
		
		right: 30px;
		top: 30px;
	}

}

/** LG **/
@media screen and (min-width:1200px) {
	
	figure#image-une {
		height: 550px;
	}
}