.modele_archive .page-header-text {
	width: 75%;
}
.modele_archive .page-header-text h1 {
    font-size: calc(9px + 5.5vw);
    word-break:normal;
}
.modele_archive .desc{
	padding:6vh 10%;
}
.modele_archive .desc h1{
	font-weight:100;
	max-width:70vw;
	color:var(--grisfonce);
	font-size: calc(5px + 4vw);
	margin-bottom: 0;
}
.articles{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.articles .sidebar{
	flex-basis: 280px;
	min-width: 280px;
	margin: 12vh 2.5vw 12vh 10vw;
}
.articles .sidebar ul{
	padding:20px 0;
	background-color: var(--grispale);
	margin:0;
	list-style: none;
}
.articles .sidebar li a{
	color:var(--grisfonce);
	font-size: calc(8px + 1.1vw);
	padding: 15px 25px;
	background-color: var(--grispale);
	display: block;
	font-weight: 100;
	transition: background-color 0.4s ease-in-out;
}
.articles .sidebar li a:hover{
	background-color: var(--grisfonce);
	color:white;
}
.articles .blog{
	padding: 12vh 10vw 12vh 2.5vw;
}
.articles form{
	margin-bottom: 8px;
	position: relative;
}
.articles input[type="submit"]{
	width: 26px;
	height: 26px;
	position: absolute;
	left: 10px;
	top: 10px;
	background-image: url(../img/loupe.png);
	background-size: contain;
	background-position: center center;
	background-color: transparent;
	border:none;
	text-indent: -1000px;
}
.articles input#s{
	background-color: var(--grisfonce);
	padding: 15px 10px 15px 50px;
	color: var(--blanc);
	border:none;
	width: 100%;
	font-size: 16px;
}
.articles input#s::placeholder{
	color:var(--blanc);
} 

 
.intro > div{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    -ms-align-items: flex-start;
    align-items: flex-start;
}
.intro {
	padding:8vh 0;
}
.intro .content{
	flex-basis: 50%;
	padding: 0 6vw 0 12vw;
}
.intro .img{
	flex-basis: 50%;
}

/*
.intro > div > div.img > img{
	height: 100%;
	object-fit: cover;
}
*/


@media screen and (max-width:1750px){
	.articles .blog .article {
		flex-basis: 30%;
	}
}
@media screen and (max-width:1250px){
	.articles .blog .article {
		flex-basis: 48%;
	}
}
@media screen and (max-width: 1200px){
	.intro > div > div.img > img {
		padding: 10vw;
		
	}
	.intro .img{
		flex-basis: 100%;
		display: none;
	}
	.intro .content{
		flex-basis: 100%;
		    padding: 0px 6vw;
	}
	.intro {
    padding: 0vh 0;
}
	
}

@media screen and (max-width:960px){
	.articles .sidebar, .articles .blog{
		flex-basis: 100%;
		margin: 6vh 10vw 6vh 10vw;
		padding: 0;
	}
	.articles{
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
	}
}