:root
{
	--couleurPrincipale: #17f;
	--borderRadius:10px;
	--boxShadow:0 4px 30px rgba(0, 0, 0, 0.1);

}

*{box-sizing:border-box}

a{color: var(--couleurPrincipale)}

.masquer{display: none}
body{background: #F7F7F7}
body > div > header
{
	text-align: center;
	font-family: sans-serif;
}
.btn{
	background: var(--couleurPrincipale); 
	color: #fff;
	padding: 10px 40px;
	display: inline-flex;
	text-decoration: none;
	border-radius: var(--borderRadius);
}

.contenuPetit
{
	max-width: 800px;
	width: 100%;
	margin: auto;
	padding: 20px;
}
#reseaux
{ 
	display: flex; 
	justify-content: center;
	gap: 1em;
}
#reseaux li, #reseaux{list-style: none; padding: 0; margin: 0}
#reseaux li a
{
	width: 50px;
	aspect-ratio: 1/1;
	background: var(--couleurPrincipale);
	display: grid;
	place-items: center;
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	font-size: 1.5em;
}
#recherche
{
	position: sticky; 
	top: 10px;	
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: center;
	outline: none;
	padding-left: 0;
	border-radius: 50px;
	overflow: hidden;
	width: 100%;
	margin: 40px auto;
	background: #fff;
	
}


#recherche i{text-align: center}

#recherche input 
{
	font-size: 1em;
	padding: 20px;
	padding-left: 0;
	border: none;
	outline: none;
	background: none;
}

article
{
	display: grid;
	grid-template-columns: 250px 1fr;
	margin-bottom: 50px;
	min-height: 250px;
	align-items: center;
	border-radius: var(--borderRadius);
	box-shadow: var(--boxShadow);
	color: #000;
	text-decoration: none;
	background: #fff;
}


article:target{background: rgb(226, 245, 255)}
article:hover
{
	background: #F7F7F7;
}

.article__img
{
	background: #ccc;
	overflow: hidden;
	width: 100%;
	height: 100%;
	border-top-left-radius: var(--borderRadius);
	border-bottom-left-radius: var(--borderRadius);
		
}
.article__img__img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


@media only screen and (max-width : 768px)
{	
	article
	{
		display: block
	}	
	.article__img{height: 200px; border-radius: var(--borderRadius)}
	.article__txt{display: none}
}



.article__main{padding: 20px;}

#pied
{
	text-align: center;	
}

#pied ul, #pied li{padding: 0; margin: 0; font-size:.9em}