main { background-color:#FFF; }

.main-dtg {
	width:100%;
	max-width:1200px;
	margin:auto;
	padding:20px 40px 45px 40px;
	color:#555555;
}

.main-dtg #dtg-picture {
	width:100%;
	margin:auto;
}

.main-dtg h1 { font-weight:bold; }

.main-dtg .ul-infos { 
	display:grid;
	width:100%;
	grid-template-columns:repeat(auto-fill, 300px);
	grid-template-rows:auto;
	column-gap:30px;
	row-gap:30px ;
	margin-bottom:30px;
}

/*	ul > li	*/

.main-dtg .material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.main-dtg ul { padding:0; margin:0; }
.main-dtg li { display:flex; list-style-type:none; line-height:1.8; align-items: start; }
.main-dtg .material-symbols-outlined { display:flex; align-items:center; margin-right:5px; }

/*	Paralax Staff	*/

.main-dtg .parallax {
	background-image:url("./images/parallax.jpg");
	background-size:cover;
	background-repeat:no-repeat !important;
	background-attachment:fixed !important;
	background-position:center !important;
}

.webp-supported .main-dtg .parallax { background-image:url("./images/parallax.webp") !important; }

.main-dtg .parallax.bottom {
	background-image:url("./images/bottom-parallaxe.jpg");
	background-size:cover;
	background-repeat:no-repeat !important;
	background-attachment:fixed !important;
	background-position:center !important;	
}

.webp-supported .main-dtg .parallax.bottom { background-image:url("./images/bottom-parallaxe.webp") !important; }

.main-dtg .parallax {
	position:relative;
	overflow:hidden;
	width:100%;
	height:fit-content;
	margin-bottom:30px;
}

.main-dtg .parallax .content {
	overflow:hidden;
	width:100%;
	height:fit-content;
	padding:45px;
	background-color:rgba(221, 51, 51, 0.7);
}

.main-dtg .parallax.bottom .content { background-color:rgba(255, 255, 255, 0); }

.main-dtg .parallax .content p {
	margin-top:8px;
	max-width:640px;
	margin:20px auto;
	font-size:24px;
	font-weight:bold;
	color:#FFF;
	text-align:center;
}

.main-dtg .parallax .staff {
	display:flex;
	flex-direction:row;
	justify-content:center;
	width:100%;
	flex-wrap:wrap;
	gap:80px;
	margin-top:40px;
}

.staff-person { display:flex; flex-direction:column; gap:20px; font-size:20px; color:#FFF; font-weight:bold; align-items:center; justify-content:center; }

.main-dtg .parallax .staff img { border-radius:50%; }

.main-dtg .para-flex { min-height:540px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.main-dtg .para-white { width:100%; padding-top:50px; padding-bottom:50px; background:#FFF; }
.main-dtg .para-white ul {
	display:flex;
	flex-direction:row;
	align-items:start;
	justify-content:center;
	width:100%;
	flex-wrap:wrap;
	gap:40px 80px;
	list-style-type:none;
}

.main-dtg .para-white ul li {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-size:24px;
	color:grey;
	line-height:1;
}

.main-dtg .para-white ul li .title {
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content:center;
	width:100%;
	font-size:42px;
	color:grey;
}

.main-dtg .para-white ul li .title .material-symbols-outlined { font-size:56px; }

.main-dtg .para-white ul li p { text-align:center; }

.main-dtg .para-bottom {
	padding-top:50px;
	padding-bottom:50px;
}

/*		Masonry		*/

.main-dtg .masonry {
    margin:0;
    padding:0;
    -moz-column-gap:0;
    -webkit-column-gap:0;
    column-gap:5px;
    margin-bottom:20px;
}

.main-dtg .masonry .item {
    display:inline-block;
	padding:0;
    margin-bottom:1px;
    width:100%;
    box-sizing:border-box;
}

.main-dtg .masonry .item img {
	max-width:100%;
	height:auto;
	display:block;
	padding:0;
    margin:0;
}

.main-dtg .masonry {
	-moz-column-count:4;
	-webkit-column-count:4;
	column-count:4;
}

@media only screen and (max-width:840px) {
	.main-dtg .masonry {
		-moz-column-count:3;
		-webkit-column-count:3;
		column-count:3;
	}

	.main-dtg { padding:0; }
	.main-dtg h1 { padding:0 20px; }
	.main-dtg p { padding:0 20px; }
	.main-dtg .ul-infos { padding:0 20px; }
	.main-dtg .dtg-brands { padding:0 20px; }
}

@media only screen and (max-width:480px) {
	.main-dtg .masonry {
		-moz-column-count:2;
		-webkit-column-count:2;
		column-count:2;
	}
}

@media only screen and (max-width:380px) {
	.main-dtg .masonry {
		-moz-column-count:1;
		-webkit-column-count:1;
		column-count:1;
	}
}

/*		Atelier		*/

.main-dtg .atelier {
	display:flex;
	flex-direction:row;
	flex:wrap;
	width:100%;
}

.main-dtg .atelier .left {
	padding:20px;
	max-width:700px;
}

.main-dtg .atelier img {
	display:inline;
	width:100%;
}

.main-dtg .atelier .right { padding:20px; }

@media only screen and (max-width:940px) {
	.main-dtg .atelier { flex-direction:column; }
	.main-dtg .atelier .left { max-width:100%; }
}

/*  End bloc  */

.main-dtg .end-bloc {
  display:grid;
  grid-gap:15px;
  grid-template-columns:2fr 1fr;
  grid-auto-flow:dense;
}

.main-dtg .end-bloc img { max-height:260px; width:auto; max-width:100%; }

.main-dtg .end-bloc .txt { display:inline-grid; order:1; align-content:flex-start; }
.main-dtg .end-bloc .txt p { margin-top:0; }
.main-dtg .end-bloc .pic1 { display:inline-grid; order:2; align-content:flex-start; }
.main-dtg .end-bloc .pic2 { display:inline-grid; order:4; align-content:flex-start; }
.main-dtg .end-bloc .pic3 { display:inline-grid; order:3; align-content:flex-start; }

@media only screen and (max-width:1000px) {
	.main-dtg .end-bloc img { max-height:220px; width:auto; }
}

@media only screen and (max-width:840px) {
	.main-dtg .end-bloc {
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:center;
	}

	.main-dtg .end-bloc .txt { display:inline-grid; order:1; }

	.main-dtg .end-bloc img { max-height:auto; width:auto; }

	.main-dtg .end-bloc .pic1 { display:inline-grid; order:2;  }
	.main-dtg .end-bloc .pic2 { display:inline-grid; order:3; }
	.main-dtg .end-bloc .pic3 { display:inline-grid; order:4; }
}