@charset "utf-8";
/* CSS Document */

.div-gris {
	margin: auto;
	justify-content: center;
	border: solid 1px #e0deda;
	border-radius: 5px;
	background-color: #e9ecef;
	padding: 30px;
}

.div-blanc {
	margin: auto;
	justify-content: center;
	border: solid 1px #e0deda;
	border-radius: 5px;
	background-color: ;
	padding: 30px;
}

.div-deux {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: 1 1;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	width: 100%;
	margin: auto;
	justify-content: center;
}

.div-deux-21 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1 1;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	width: 100%;
	margin: auto;
	justify-content: center;
}

.div-deux-12 {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: 1 1;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	width: 100%;
	margin: auto;
	justify-content: center;
}

.div-trois {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1 1;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	width: 100%;
	margin: auto;
	justify-content: center;
}

.div-quatre {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1 1;
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	width: 100%;
	margin: auto;
	justify-content: center;
}

.div-l1-gris {
	grid-column: auto;
	grid-row: 1/2;
	padding: 30px;
	border: solid 1px #e0deda;
	border-radius: 5px;
	background-color: #e9ecef;
	margin: auto;
	justify-content: center;
	width: 100%;
}

.div-l2-gris {
	grid-column: auto;
	grid-row: 2/3;
	padding: 30px;
	border: solid 1px #e0deda;
	border-radius: 5px;
	background-color: #e9ecef;
	margin: auto;
	justify-content: center;
	width: 100%;
}

.div-l1-blanc {
	grid-column: auto;
	grid-row: 1/2;
	padding: 30px;
	border: solid 1px #e0deda;
	border-radius: 5px;
	background-color: #ffffff;
	margin: auto;
	justify-content: center;
	width: 100%;
}

.div-l2-blanc {
	grid-column: auto;
	grid-row: 2/3;
	padding: 30px;
	border: solid 1px #e0deda;
	border-radius: 5px;
	background-color: #ffffff;
	margin: auto;
	justify-content: center;
	width: 100%;
}

.div-l1 {
	grid-column: auto;
	grid-row: 1/2;
	margin: auto;
	justify-content: center;
	width: 100%;
}

.div-l2 {
	grid-column: auto;
	grid-row: 2/3;
	margin: auto;
	justify-content: center;
	width: 100%;
}

@media only screen and (min-width: 0px) and (max-width: 1024px) {
	
.div-gris {
	padding: 15px;
	}
	
.div-blanc {
	padding: 15px;
	}
	
.div-deux {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	width: 100%;
}

.div-deux-21 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	width: 100%;
}

.div-deux-12 {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	width: 100%;
}

.div-trois {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	width: 100%;
}

.div-quatre {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	width: 100%;
}

.div-l1-gris {
	grid-column: 1/2;
	grid-row: auto;
}
	
.div-l2-gris {
	grid-column: 1/2;
	grid-row: auto;
}
	
.div-l1-blanc {
	grid-column: 1/2;
	grid-row: auto;
}
	
.div-l2-blanc {
	grid-column: 1/2;
	grid-row: auto;
}
	
.div-l1 {
	grid-column: 1/2;
	grid-row: auto;
}

.div-l2 {
	grid-column: 1/2;
	grid-row: auto;
}
}

@media only screen and (min-width: 1025px) {
}