@import './da-gallery.css';

/**
* gestion article salamandre 
*/


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


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


.single-article article {
	margin-bottom: 40px;
}
.single-article article strong{
	font-weight: bold;
}
.single-article article em{
	font-style: italic;
}

.single-article article .article-content h1,
.single-article article .article-content h2,
.single-article article .article-content h3,
.single-article article .article-content h4,
.single-article article .article-content h5,
.single-article article .article-content h6,
.single-article article .article-content section h1,
.single-article article .article-content section h2,
.single-article article .article-content section h3,
.single-article article .article-content section h4,
.single-article article .article-content section h5,
.single-article article .article-content section h6 {
	text-align: left;
	font-family: "Museo Sans Rounded 1000";
	margin-bottom: 20px;
	color: #34559f;
}

.single-article .article-header h1{
	margin-bottom: 20px;
}

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


.page-liste p.intro,
.single-article article table,
.single-article article p.intro,
.single-article article .article-content p,
.single-article article#main-article article p,
.single-article article .article-content ul,
.single-article article#main-article article ul,
.single-article article .article-content ol,
.single-article article#main-article article ol {
	font-size: 18px;
	font-family: "din-2014",sans-serif;
}

.single-article article .article-content ul li:not(.files__tags--item){
	padding-left: 18px;
    position: relative;
}
.single-article article .article-content ul li:not(.files__tags--item)::before{
	content: "";
    position: absolute;
    left: 0;
    top: 7px;
    border-radius: 100%;
    width: 6px;
    height: 6px;
    background: #ffe202;
}

.page-liste p.intro,
.single-article article p.intro {
	font-size: 20px;
	font-weight: 600;
	/*font-family: "din-2014",sans-serif;*/
}

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

.single-article article a:not(.btn),
.single-article article a:not(.btn):hover, 
.single-article article a:not(.btn):focus, 
.single-article article a:not(.btn):visited {
		text-decoration: none;
		outline: none;
		color: #000;
	}



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

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

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

.single-article article figure figcaption {
	font-family: "din-2014",sans-serif;
	font-size: 14px;
	line-height: normal;
}

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

.single-article article figure img {
	min-width: 30%;
	margin-bottom: 15px;
}

.single-article article .article-content figure a,
.single-article article#main-article article figure a {
	border-bottom: none !important;
}

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

}

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

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

}

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

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

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


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

}

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

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

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


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


.single-article article .article-content a:not(.btn),
.single-article article#main-article article a:not(.btn) {
	border-bottom: 2px solid #ffe202;
}

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

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

/*.single-article article blockquote .blockquote-inner:before,
 .single-article article blockquote .blockquote-inner:after{
	 
	display: inline-block;
	position: relative;
	font-size: 80px;
	color: #ffe200;
	font-family: "din-2014",sans-serif;
	

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

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

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

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

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

.single-article article blockquote .blockquote-legend {
	font-family: "din-2014",sans-serif;
	font-size: 14px;
}



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

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


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

	padding: 0;
}

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



.time .time-picto,
.reading-time-picto{
	margin-right: 10px;
}
.time .time-picto:after,
.reading-time-picto:after{
	float: none;
	clear: both;
}
.time .time-picto img,
.reading-time-picto img {
	margin: 3px auto 0;
	width: 20px;
	max-width: none;

}

.reading-time-picto img{
	/*position: relative;
    top: 50%;
    transform: translateY(-50%);*/
}

.time .time-infos {
	padding: 0;
}

.time .time-infos time {
	text-align: left;
	display: block;
	width: 100%;
}

.time .time-infos time:first-child, 
.reading-time p{
	font-weight: 900;
}
.time .time-infos time:last-child {
	font-style: italic;
	color: #b4bed7;
}

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

}

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

.single-article article .socials ul {


	flex-direction: row;
	justify-content: flex-start;
}

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

/******************************* BLOC NOTES DE BAS DE PAGE ***************/

.single-article article .sal-notes{
	line-height: inherit;
	font-size: 16px;
	margin: 1rem auto;
	font-family: "din-2014",sans-serif;
  color: #b4bed7;
}

/* MISE EN PAGE */

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

.single-article article.restricted:after,
.single-article article .article-content.restricted:after {
	/*article.restricted .article-content:after{*/
	content: '';
	display: inline-block;
	/* FF3.6-15 */
	/* Chrome10-25,Safari5.1-6 */
	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;
}

.single-article article header {
	margin-bottom: 20px;
}

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

.single-article article header .promo-abonne .abonne-text {
	padding-right: 15px;
}

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

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

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

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

.single-article article header .abonne-text p {
	font-size: 12px;
	line-height: normal;
	margin-bottom: 0;
}

.single-article .article-container {
	position: relative;
	z-index: 1;
}

.single-article .article-end {
	/* FF3.6-15 */

	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;

}


.single-article article .flex-row {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}

.single-article article .flex-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.single-article article .flex-wrap {
	flex-wrap: wrap;
}

/***************************** ARTICLE TABLE *********************/
.single-article article table, 
.single-article article table th, 
.single-article article table td {
    border: 1px solid #000;
}
.single-article article table {
    table-layout: fixed;
    width: 100%;
    margin: 20px auto;
	background-color: transparent;
}

.single-article article table th, 
.single-article article table td {
    padding: 5px;
}

.single-article article table  tr th:last-child, 
.single-article article table  tr td:last-child {
    background-color: #ffe301;
}
.single-article article table th {
    text-align: left;
}



/********************* ARTICLE ASIDE *****************/
.single-article article aside .block-items.item-product .block-content h2,
.single-article article aside .block-items.item-product .block-content .current-price,
.single-article article aside .block-items.item-product .block-footer
 {
	text-align: center;
	margin-left: 0;
	margin-right: 0;
}

.single-article article aside .block-items.item-product .block-visual{
	/*height: 200px;*/
	max-width: 176px !important;
	height: 240px;
}
.single-article article aside .block-items.item-product .block-visual img{
	position: relative;
	transform: none;
	left: 0;
	top: 0;
	margin: auto;
	width: auto;
}

.single-article article aside .block-items.item-product .block-content h2{
	text-transform: uppercase;
	max-width: none;
}
.single-article article aside .block-items.item-product .block-content .current-price{
	margin-top: 0;
	margin-bottom: 0;
}

.single-article article aside .block-items.item-product .center{
	max-width: 176px!important;
}
.single-article article aside .block-items.item-product .item__contenu--taxo{

text-transform: uppercase;
font-family: "museo-sans-rounded";
line-height: 1;
padding: 8px 21px;
margin: 0 auto;
text-align: center;
background: #000;
color: #ffe202;
align-self: center;
border-top-left-radius: 17.5px;
border-top-right-radius: 17.5px;
width: auto;
max-width: auto;
flex: 0 0 auto;
}


/** 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%;
		transform: translate(-50%, -50%);
	}

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


	 .single-article article h1 {
		text-align: left;
		margin-bottom: 20px;
	}
}

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

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


	.single-article article {
		margin-bottom: 0;
	}


	.single-article article .socials ul {

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



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


	
	figure#image-une img {
		height: auto;
	}

	figure#image-une figcaption {
		font-size: 18px;
		position: relative;
		left: 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,
	.single-article article p.intro {
		font-size: 24px;
		line-height: 30px;
		font-weight: 500;
	}

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

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


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

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

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

	.single-article article header {
		margin-bottom: 40px;
	}

	



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

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

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



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

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

	}




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

	.time,
	.reading-time {
		border-top: 1px solid #ccc;
		border-left: none;
	}

	.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: 15px;
	}


	.single-article article aside .block-items.item-product .block-visual img{
		margin: 0;
	}

	.single-article article aside .block-items.item-product .block-content h2,
.single-article article aside .block-items.item-product .block-content .current-price,
.single-article article aside .block-items.item-product .block-footer
 {
	text-align: left;
}

.single-article article aside .block-items.item-product .block-content h2{
	max-width: 161px;
}

	



}

/** XL **/
@media screen and (min-width:1200px) {



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

}