/* CSS Document */

/* Begin Reset */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video { 
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section { 
		display: block;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

/* End Reset */
	
/* Fonts */
/* End Fonts */

/* Begin Links */

	a {
		font-family: 'Roboto', Helvetica, Arial, sans-serif ;
		color: #000;
		text-decoration: none;
	}
	
	a:link {	
		color: #000;

	}
	
	a:visited {
		color: #000;
	}
	
	a:active {
		color: #000;
		}
	
	a:focus {
		color: #000;
	}
	
	a.selected {
		color: #000;
	}
	
	a:hover {
		color: #000;
	}
		
/* End Links */

/* Begin Main containers */

	html{
		scroll-behavior: smooth;
	}

	body {
		max-width: 1100px;
		padding: 50px;
		height: auto;
		margin: auto;
		background-color:#FFF ;
		background-size: auto auto;
		background-attachment: fixed;
	}
	
		@media screen and (max-width: 768px){ 
			body {
			padding: 10px 10px;
			}
		}

	#logo_main { 
		margin-bottom: 10px;
		width: 100%;
	}

	#logo_main a img { 
		width: 550px;
	}

		@media screen and (max-width: 768px){
			#logo_main a {
			display: flex;
			justify-content: center;
			}

			#logo_main a img { 
			width: 80%;
			max-width: 400px;
			}
		}
	
	#nav_main ul {
		display: flex;
		gap: 5px;
	}

		@media screen and (max-width: 768px){
			#nav_main ul {
			flex-direction: column;
			}
		}
	
	#nav_main ul li {
		height: 25px;
		flex: 1;
	}
	
	#nav_main a {
		display: flex;
		justify-content: center;
		padding: 6px 0px;
		font-size: 14px;
		border-top: 1px solid rgba(170, 170, 170);
		border-bottom: 1px solid rgba(170, 170, 170);
		transition: border-color 0.2s ease;
		}

	#nav_main a.selected {
		background-color:#000;
		color: #FFF;
	}
	
	#nav_main a:hover {
		border-color: #000 ;
	}
	
	#nav_main a:active {
		background-color:#000;
		color: #FFF;
	}
	
	main {
		margin: 25px 0px;
	}
		
	section {
		display: flex;
		height: auto;
		overflow: visible; 
	}
		
	footer {
		width: 100%;
		height: auto;
		text-align: center;
	}

	footer p {
		font-family: 'Roboto', Arial, Helvetica, sans-serif;
		font-size:14px;
		line-height: 14px;
		color:rgb(170, 170, 170);
	}
	
	footer .grey:hover{
		color:#000;
		text-decoration: underline;
	}

	footer .grey {
		font-family: 'Roboto', Arial, Helvetica, sans-serif;
		font-size:14px;
		color: rgb(170, 170, 170);
	}

	footer img {
		height: 25px;
		width: auto;
		margin-top: 10px;
		opacity: 0.7;
	}
	
/* End Main containers */
	
/* Begin Headings */

	h1 { 
		font-family: 'Roboto', Arial, Helvetica, sans-serif;
		font-weight: 250;
		font-size: 16px; 
		line-height: 16px;
		color: #000; 
		margin-bottom: 5px;
	}
	
	h2 {
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-weight: 400;
		font-size: 30px;
		line-height: 30px;
		color: #000; 
	}
	
	h3 {
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-weight: 400;
		font-size: 22px;
		line-height: 26px;
		color: #000;
		}
		
	h4 {
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-weight: 200;
		font-size: 16px;
		line-height: 22px;
		color: #000;
	}

	.arial {
		font-family: Arial, Helvetica, sans-serif;
	}
	
/* End Headings */

/* Begin Text elements */

	.red {
		color: #ff3c32;
	}
	
	p {
		font-family: 'Roboto', Helvetica, Arial, sans-serif ;
		font-weight: 250;
		font-size: 16px;
		line-height: 23px;
		color: #000;
		font-style: normal; 
	}
	
	.bold {
		font-weight: 800;
	}

	.grey {
		color: rgb(170, 170, 170);
	}

	.underline {
		text-decoration: underline ;
		text-underline-offset : 3px ;
		text-decoration-thickness: 1px ;
	}

	.italic{
		font-style: italic;
	}

/* End Text elements */


/* Begin Images */
/* End Images */


/* Begin Accueil */

	.index_banner{
		display: flex;
		width: 100%;
		height: auto;
		gap: 5px;
		margin-bottom: 5px;
	}
		@media screen and (max-width: 768px){
			.index_banner {
			flex-direction: column;
			}
		}

	.index_slide {
		flex: 0 0 calc((100% - 20px) / 5 * 3 + 10px); 
		width: 100%;
		height: auto;
	}

	.index_slide .splide__slide img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1/1;
		object-fit: cover;
		display: block;
	}

	.index_tiles_group1 {
		display :flex;
		flex:0 0 calc((100% - 20px) / 5 * 2 + 5px); 
		flex-wrap: wrap;
		height: auto;
		gap: 5px;
	}

	.index_tiles_group2 {
		display :flex;
		flex:0 0 calc((100% - 20px) / 5 * 3 + 10px); 
		flex-wrap: wrap;
		height: auto;
		gap: 5px;
	}
	
	.index_tiles_items1 {
		flex: 0 0 calc((100% - 5px) / 2); 
		display :flex;
		flex-direction: column;
		overflow: hidden;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
		container-type: inline-size;
	}

	.index_tiles_items1 a {
		width: 100%;
		height: 100%;
		aspect-ratio: 1/1;
	}

	.index_tiles_items1 a img{
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.index_tiles_items1 h2{
		font-size: 13.88cqw;
		line-height: 13.88cqw;
	}
	
	.index_tiles_items1 p{
		font-size: 7.40cqw;
		line-height: 10.65cqw;
	}
	
	.index_tiles_items2 {
		flex: 0 0 calc((100% - 10px) / 3); 
		width: 100%;
		display :flex;
		flex-direction: column;
		overflow: hidden;
		box-sizing: border-box;
		justify-content: center;
		text-align: center;
		container-type: inline-size ;
	}

	.index_tiles_items2 a {
		width: 100%;
		height: 100%;
		aspect-ratio: 1/1;
	}

	.index_tiles_items2 a img{
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	.index_tiles_items2 h2{
		font-size: 13.88cqw;
		line-height: 13.88cqw;
	}
	
	.index_tiles_items2 p{
		font-size: 7.40cqw;
		line-height: 10.65cqw;
	}

		@media screen and (max-width: 768px){
			.index_tiles_items2 {
			flex: 0 0 calc((100% - 5px) / 2); 
			}
		}

	.clickable_items {
		border-top: 1px solid transparent;
		border-bottom: 1px solid transparent;
		transition: border-color 0.2s ease;
	}

	.clickable_items:hover {
		border-top: 1px solid black ;
		border-bottom: 1px solid black;
	}
	
	.index_flyer {
		display: flex;
		flex:0 0 calc((100% - 20px) / 5 * 2 + 5px); 
	}

	.index_flyer a {
		width: 100%;
		height: auto;
	}
 
	.index_flyer a img {
		width: 100%;
		height: 100%;
		aspect-ratio: 1 / 1; 
		object-fit: cover;
	}
	
/* End Acceuil */

/* Begin Agence */

	.agence_banner {
		display: flex;
		height: auto;
	}

	.agence_banner img {
		width: 100%;
		aspect-ratio: 2/1;
		object-fit: cover;
	}

	.agence {
		display: flex;
		justify-content: space-between;
		gap: 25px;
		margin-top: 25px;
		flex-wrap: wrap;
	}
		@media screen and (max-width: 768px){ 
			.agence {
			flex-direction: column;
			}
		}

	.agence_presentation{
		flex:0 0 calc((100% - 12.5px) / 3*2); 
	}

	.agence_presentation h2{
		border-top: 1px solid rgb(170, 170, 170);
		border-bottom: 1px solid rgb(170, 170, 170);
		padding: 5px 0px;
	}
	
	.agence_presentation h3{
		margin-top: 25px;
		margin-bottom: 10px;
	}

	.agence_informations{
		flex:0 0 calc((100% - 50px) / 3); 
		flex-direction: column;
		flex-wrap: wrap;
		display: flex;
		gap: 25px;
	}

	.agence_informations {
		box-sizing: border-box;
	}

	.agence_informations h3{
		width: 100%;
		margin-bottom: 5px;
	}

	.agence_informations h4{
		width: 100%;
		margin-bottom: 5px;
	}

	.agence_informations p{
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-size:14px;
		font-weight:200;
		color:#000;
		line-height:23px;
	}


	.agence_member{
		border-top: 1px solid rgb(170, 170, 170);
		border-bottom: 1px solid rgb(170, 170, 170);
	}

	.agence_member{
		padding: 10px 0px;
	}
	
	.agence_informations_légales{
		padding: 10px 0px;
		border-top: 1px solid rgb(170, 170, 170);
		border-bottom: 1px solid rgb(170, 170, 170);
	}

	.agence_informations_légales ul {
		list-style: inside none;
	}
	
	.agence_informations_légales ul li {
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-size:14px;
		font-weight:200;
		color: #000;
		line-height:23px;
		padding-bottom: 5px;
	}

/* End Agence */

/* Begin Réalisations Wall*/
	
	#project_wall {
		width: 100%;
		height: auto;
	}
	
	#project_wall ul{
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
	}

	#project_wall ul li {
		flex: 0 0 calc((100% - 10px) / 3); 
	}

		@media screen and (max-width: 800px){
			#project_wall ul li {
			flex: 0 0 calc((100% - 5px) / 2); 
			}
		}
	
	#project_wall ul li a {
		display: block;
		width: 100%;
		height: 100%;
		opacity: 1;
		position: relative;
		aspect-ratio: 1/1; 
	}

	#project_wall ul li a img{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 1;
		transition: opacity 0.5s ease;
		position: absolute;
		z-index: 2;
	}

	#project_wall ul li a img:hover{
		opacity: 0.3;
	}

	.wall_legend {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20px;
		color: black;
		z-index: 1;
		transform: translateX(-20px);
		transition: transform 0.7s ease;
		opacity: 0; 
	}
		@media screen and (max-width: 500px){
			.wall_legend {
				padding: 10px;
				transform: translateX(-10px);
			}
		}

	.wall_legend h2 {
		color: black;
	}

		@media screen and (max-width: 500px){
			.wall_legend h2 {
			font-size: 22px;
			line-height: 26px ;
			}
		}

		@media screen and (max-width: 500px){
			.wall_legend h3 {
			font-size: 16px;
			line-height: 22px ;
			}
		}

	#project_wall ul li a:hover .wall_legend {
		opacity: 1;
		transform: translateX(0px);
	}

/* End Réalisations Wall*/

/* Begin Projet */

	.project_banner {
		display: flex;
		height: auto;
	}	

	.project_banner img{
		width: 100%;
		aspect-ratio: 3/2;
		object-fit: cover;
	}
	
	.align_top img{
		object-position: top;
	}
	.align_bottom img{
		object-position: bottom;
	}
	.align_left img{
		object-position: left;
	}
	.align_right img{
		object-position: right;
	}

	.project_header {
		display: flex;
		min-height: 200px;
		gap: 25px;
		margin: 25px 0px;
	}	
		@media screen and (max-width: 768px){
			.project_header {
			flex-direction: column;
			}
		}

	.project_header_column {
		display: flex;
		flex-direction: column;
		flex: 1;
		border-top: solid 1px rgb(170, 170, 170);
		border-bottom: solid 1px rgb(170, 170, 170);
		padding: 10px 0px;
	}	

	.project_header_column p{
		text-align: justify ;
	}

	.project_header li {
		margin-bottom: 10px;
		text-align: left;
	}
	
	.project_header li h3{
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-weight: 300;
		font-size: 22px;
		line-height: 26px;
		color: #000;
	}
	.project_title h3{
		font-weight: 300;
	}
	
	.project_title p{
		margin-top: auto;
		text-align:left;
	}

	.project_content{
		display:flex;
		flex-wrap: wrap;
		gap: 25px;
	}
			@media screen and (max-width: 768px){
			.project_content{
				flex-direction: column;
			}
		}

	.project_content_1column {
		flex:0 0 calc((100% - 50px) / 3); 
		height: auto;
	}

			@media screen and (max-width: 768px){
			.project_content_1column {
				width: 100%;
			}
		}

	.project_content_2columns {
		flex:0 0 calc((100% - 12.5px) / 3 * 2);
		height: auto;
	}

			@media screen and (max-width: 768px){
			.project_content_2columns {
				width: 100%;
			}
		}

	.project_content_3columns {
		width: 100%;
		height: auto;
	}

	.project_content_half {
		flex:0 0 calc((100% - 25px) / 2); 
	}

	.project_content img {
		width: 100%;
		height: 100%;
		object-fit: cover ;
	}

	.project_content .landscape img {
		aspect-ratio: 3/2;
	}

	.project_content .portrait img {
		aspect-ratio: 2/3;
	}

	.project_info {
		border-top: solid 1px rgb(170, 170, 170);
		border-bottom: solid 1px rgb(170, 170, 170);
		padding: 10px 0px;
	}

	.project_content h3{
		color: #000;
		margin-bottom: 10px;
	}
	.project_content p {
		margin-top: 10px;
	}

/* End Projet */	
	
/* Begin Services */

	.key_achievements {
		width: 100%;
		height: auto;
		display: flex;
		gap: 25px;
		flex-wrap: wrap;
		margin-bottom: 25px;
	}

		@media screen and (max-width: 768px){
			.key_achievements {
				flex-direction: column;
				min-width: 100%;
			}
		}
	
	.key_achievements_columns{
		column-count: 3;
  		column-gap: 25px; 
		width: 100%;
		height: auto;
	}

			@media screen and (max-width: 768px){
			.key_achievements_columns {
			column-count: 1 ;
			}
		}

	.key_achievements_columns .h3_tittle  {
		font-size: 30px;
	}


	.key_achievements_columns h3 {
		margin-bottom: 10px;
	}

	.key_achievements_columns p {
		margin-bottom: 10px;
		text-align: justify;
	}
	
	.services {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.services_header {
		width: 100%;
		padding: 5px 0px;
		text-align: center;
		border-top: 1px solid rgb(170, 170, 170);
		border-bottom: 1px solid rgb(170, 170, 170);
	}
	.services_header h2{
		text-align: center;
	}
	
	.services_articles {
		display: flex;
		flex-wrap: wrap;
		gap: 25px;
		margin: 25px 0px;
	}

	.services_article {
		min-width: calc((100% - 50px) / 3);
		flex: 1;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border: 1px solid rgb(170, 170, 170);
		background-color: rgba(170, 170, 170, 0.0);
		box-shadow: 0px 0px 20px rgba(170, 170, 170, 0.0);
		padding: 20px;
	}

		@media screen and (max-width: 768px){
			.services_article {
			min-width: 100%;
			}
		}

	.services_article_logo {
		text-align: center;
		padding-bottom: 20px;
	}

	.services_article_logo img {
		width: auto;
		max-height: 150px;
	}
		@media screen and (max-width: 768px){
			.services_article_logo img {
			width: auto;
			max-height: 150px;
			}     
		}

	.services_article_description {
		height: 100%;
		text-align: center;
	}

	.services_article_description h2 {
		text-align: center;
	}
	
	.services_article_description p {
		margin-top: 10px;
	}

/* End Services */
	
/* Begin Contact */

	.contact {
		display: flex;
		justify-content: space-between;
		gap: 25px;

	}
		@media screen and (max-width: 768px){ 
			.contact {
			flex-direction: column;
			}
		}

	.contact_map {
		flex:0 0 calc((100% - 12.5px) / 3*2); 
	}

	.contact_map iframe{
		width: 100%;
		height: 100%;
	}

		@media screen and (min-width: 768px){
			.contact_map iframe{
			aspect-ratio : 1 / 1;
			}
		}

		@media screen and (max-width: 768px){ 
			.contact_map iframe{
			aspect-ratio : auto;
			}
		}

	.contact_details {
		flex:0 0 calc((100% - 50px) / 3); 
		height: auto;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.contact_details h2 {
		margin-bottom: 25px;
		border-top: 1px solid rgb(170, 170, 170);
		border-bottom: 1px solid rgb(170, 170, 170);
		padding: 5px 0px;
	}

	.contact_details a:hover {
		color:blue;
	}

	.contact_details ul {
		margin-top: 25px;
		display: flex ;
		justify-content: left;
		gap: 10px;
	}
	.contact_details ul li {
		width: 40px;
		height: auto;
		aspect-ratio: 1/1;
		}

	.contact_details ul li img {
		width: 100%;
		height: auto;
		object-fit: cover;
		}

	
	.contact_details form {
		margin-top: auto;
	}

	.contact_details form label {
		display: block;
		width: 100%;
		height: auto;
		margin-top: 10px;
		margin-bottom: 5px;
		box-sizing: border-box;
		font-family: 'Roboto', Helvetica, Arial, sans-serif ;
		font-weight: 250;
		font-size: 16px;
		line-height: 23px;
		color: #000;
		font-style: normal; 
	}

	.contact_details form input {
		padding: 0px;
		box-sizing: border-box;
		padding: 5px;
		font-family: 'Roboto', Helvetica, Arial, sans-serif ;
		font-weight: 250;
		font-size: 16px;
		line-height: 20px;
	}
	.contact_details form input::placeholder {
  		font-style: italic;
		font-size: 12px;
	}
	
	.contact_details form textarea {
		padding: 5px;
		margin: 0px;
		box-sizing: border-box;
		font-family: 'Roboto', Helvetica, Arial, sans-serif ;
		font-weight: 300;
		font-size: 16px;
		line-height: 20px;
	}
	.contact_details form textarea::placeholder {
  		font-style: italic;
		font-size: 12px;
	}

	#nom {
		width: 100%;
		height: 25px;
		border: 1px solid rgb(170, 170, 170);
		box-sizing: border-box;
	}
	#telephone {
		width: 100%;
		height: 25px;
		border: 1px solid rgb(170, 170, 170);
		box-sizing: border-box;
	}

	#email {
		width: 100%;
		height: 25px;
		border: 1px solid rgb(170, 170, 170);
		box-sizing: border-box;
	}
	
	#objet {
		width: 100%;
		height: 25px;
		border: 1px solid rgb(170, 170, 170);
		box-sizing: border-box;
	}
	
	#message {
		width: 100%;
		height: 200px;
		border: 1px solid rgb(170, 170, 170);
		box-sizing: border-box;
	}
	
	#button {
		margin-top: 20px;
		height: 25px;
		width: 100%;
		font-size: 14px;
		line-height: 14px;
		font-weight: 300;
		color:#000;
		border: 1px solid rgba(170, 170, 170) ;
		background-color: #FFF;
		box-sizing: border-box;
	}
	
	#button:hover {
		color:#FFF;
		background-color: #000;
		cursor: pointer;
	}
	
	:invalid {
		color:#000;
	}

/* End Contact */

/* Begin Mentions légales */

	.mentions_légales {
		width: 100%;
		height: auto;
		display: block;
	}

	.mentions_légales_header {
		width: 100%;
		padding: 5px 0px;
		text-align: center;
		border-top: 1px solid rgb(170, 170, 170);
		border-bottom: 1px solid rgb(170, 170, 170);
		margin: 25px 0px;
	}

	.mentions_légales li{
		font-family: 'Roboto', Helvetica, Arial, sans-serif ;
		font-weight: 250;
		font-size: 16px;
		line-height: 23px;
		color: #000;
		font-style: normal; 
	}

/* End Mentions légales */


/* Begin Miscellaneous  */

	#scrollToTop{
			margin: 25px auto;
			height: 25px;
			display: flex;
			justify-content: center;
	}

	#scrollToTop a {
			font-size: 14px;
			line-height: 14px;
			font-weight: 300;
			color: #888;
			border: 1px solid rgba(170, 170, 170) ;
			padding: 5px;
		}
		
	#scrollToTop a:hover {
		color:#FFF;
		background-color: #000;
	}

	#cookie-banner{
		position:fixed;
		top:0;
		left: 0;
		background: rgba(255, 255, 255, 0.95);
		padding:10px 0px;
		width:100% ;
		z-index:9999;
		display: none !important;
		gap: 15px;
		flex-wrap: wrap;
		animation: descendre 0.5s ease-out forwards;
		justify-content: center;
		align-items: center;
	}

	@keyframes descendre {
		from {
			transform: translateY(-100%);
		}
		to {
			transform: translateY(0);
		}
	}

	#cookie-banner p{
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-weight: 300;
		font-size: 15px;
		margin: 0;
	}
	
	#cookie-banner button{
		font-family: 'Roboto', Helvetica, Arial, sans-serif;
		font-size: 14px;
		line-height: 15px;
		padding: 5px 15px;
		border: none;
		border-top: 1px solid rgb(170, 170, 170);
		border-bottom: 1px solid rgb(170, 170, 170);
		background: transparent;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	#cookie-banner button:hover{
		border-color: #000;
		background-color: #000;
		color: #FFF;
	}

/* End Miscellaneous  */