:root{
	--q-dark:#1f1f1f;
	--q-accent:#E0001B;
	--ff-alt:"inherit";
}

.blogue{
	margin-top: 40px;
}

img.preh2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    width: 80px;
	filter: invert(.8);
}

.blogue h1, .blogue h2, .article-single h1, .article-single h2{
	font-size: 30px;
	font-weight: 400;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

.article-single h1{margin-top: 20px;}
.article-single h2{text-align: left;font-size: 26px;}
.article-single h3{
	font-weight: bold;
	font-size: 20px;
	margin-top: 0;
	margin-bottom: 0;
}
.article-single h4{
	font-weight: bold;
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0;
}

.articles-grid{
	display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    padding: 50px 0;
    width: 100%;
}

a.article-thumb{
	text-align: center;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none !important;
    background-color: #e7e9ef;
    color: #000 !important;
}

img.sectpropimg {
    display: block;
    width: 100%;
    height: auto;
    transform-origin: bottom center;
    transition: all .4s;
}
a:hover img.sectpropimg{transform: scale(1.05);opacity: .8;}

.rollinfos{
	display: block;
	width: calc(100% - 30px);
	margin-left: 15px;
	background-color: #fff;
	padding: 20px 0;
	position: relative;
	z-index: 99;
	transform: translateY(-15px);
}

.rollinfos p{
	margin-top: 0;
	margin-bottom: 20px;
}

.rollinfos p.date, .article-single p.date{
	color: rgba(0,0,0,.7);
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 13px;
}

.article-single p.date{text-align: center;}

.rollinfos p:last-child{margin-bottom: 0;}

.rollinfos h3{
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 0px;
}
.blogmorep{color: var(--q-accent);display: inline-block;margin-top: 5px;font-size: 18px;}

.pagination-blogue{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap:10px;
}

.pagination-blogue a{
	text-decoration: none !important;
	color: var(--q-dark) !important;
	padding: 5px 10px;
	font-size: 16px;
}

.pagination-blogue a.active, .pagination-blogue a:hover{
	color: var(--q-accent) !important;
}

a.btnback2blog{
	color: var(--q-accent) !important;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: bold;
	display: inline-block;
	margin: 40px 0;
	transition: all .4s;
}

a.btnback2blog:hover{
	color: var(--q-dark) !important;
}

a.btnback2blog i{
	font-size: 12px;
	display: inline-block;
	margin-right: 5px;
}

.article-single article{
	padding: 0px 80px 0px;
	border-bottom: 4px solid rgba(0,0,0,.05);
	margin-bottom: 80px;
}

.article-single article p{
	margin-top: 0;
	margin-bottom: 25px;
}

.article-single h2+p, .article-single h3+p{margin-top: 25px;}

.article-single article img{
	display: block;
	width: auto;
	max-width: 100%;
	margin: 45px auto;
}

.article-single article a{
	color: var(--q-accent) !important;
	text-decoration: underline !important;
}

.article-single article a:hover{text-decoration: none !important;}

.article-single ul {
    padding-left: 20px;
	margin-top: 0;
	margin-bottom: 25px;
}

.article-single li{
	margin-bottom: 5px;
}

.article-single li::marker{
	color: var(--q-accent) !important;
}

.article-end{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	margin-top: 80px;
	margin-bottom: 30px;
}

.article-info p{
	margin: 0;
	font-size: 16px;
	color: rgba(0,0,0,.5);
		margin-bottom: 0 !important;
}

.article-info p i{display: inline-block;margin-right: 5px;}

.article-share{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap:8px;
}
.article-share p{
	margin-bottom: 0 !important;
	font-weight: bold;
	color: rgba(0,0,0,.5);
		margin-right: 10px;
}
.article-single article a.bouton-share, a.bouton-share{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--q-accent);
	border-radius: 3px;
	width: 34px;
	height: 34px;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 16px;
	transition: all .4s;
}

.article-single article a.bouton-share:hover, a.bouton-share:hover{
	background-color: var(--q-dark);
}

@media screen and (max-width: 900px) {
	.articles-grid{
		grid-template-columns: 1fr 1fr;
	}
	img.preh2{width: 60px;}
	
	.article-single article{padding-left: 0;padding-right: 0;padding-bottom: 0px;}

}
@media screen and (max-width: 750px) {
	.article-end>*{margin-top: 10px;margin-bottom: 10px;}
	.articles-grid{
		display: block;
		width: 90%;
		max-width: 400px;
		margin-left: auto;margin-right: auto;
	}
	img.preh2{width: 60px;}

	a.article-thumb{margin-bottom: 20px;}
	
	.blogue h1, .blogue h2, .article-single h1{
		font-size: 25px;
	}
	.article-single h2{font-size: 22px;}
}