body{
background-color:orange;
}

img. {
width: 100%;
}
.wrapper {
background-color:;
display:grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
grid-auto-rows:masonry; 
padding: 55px 0px 0px 0px; 
}

.wrapper div {
    overflow: hidden;
}

.wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.wrapper img:hover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
    opacity: 0.5;
    overflow: hidden;
}

.three{
grid-column: span 2;
grid-row: span 1;
}

.eight{
grid-column: span 2;
grid-row: span 2;
}

.fourteen{
grid-column: span 1;
grid-row: span 2;
}

.fifteen{
grid-column: span 2;
grid-row: span 1;
}

.texte {
font-size:14px;
font-family: Helvetica;
color:black;
padding: 20px;
}

.grid-container img {
    width: 100%;
    margin-bottom: 6px;
    display: block;
    border-radius: 10px;
}

.Titre a {
    text-decoration: none;
}

.Titre{
	display:inline-block;
	background-color:pink;
	margin:2% 2% 2% 2%;
	
	width:110px;

	margin:1vh 1vh 1vh 1vh;
	
	vertical-align:top;
}

h1{
font-size:15px;
margin:1vh;
font-family: Helvetica;
color:black;
}

.topbar{
	position:fixed;
	background-color:white;
	Top: 0;
}
.zonedetexte{
background-color:red;
padding:1%;
 flex: 1;
}

.zoneimage{
background-color:blue;
padding:1%;
flex: 1;

}

img{
width:100%;
}
.conteneur{
background-color:white;
display:flex;
align-items: center;
}