.dm-sans-<uniquifier> {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.besley-<uniquifier> {
  font-family: "Besley", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.lang-fr {
    display: none;
}
.lang-en {
    display: none;
}
.lang-fr.active,
.lang-en.active {
    display: inline-block;
}

/* POLICES */

/* PC */

.police_menu {
	font-family: 'DM Sans';
	font-size: clamp(14px, 1vh, 32px); /* 14px; */
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 150%;
}

.police_fren {
	font-family: 'DM Sans';
	font-size: clamp(14px, 1vh, 32px); /* 14px; */
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 18px;
}

.police_fullscale {
	font-family: 'DM Sans';
	font-size: 30px;
	font-weight: 600;
	letter-spacing: 0em;
	line-height: 110%;
	color: #FFFFFB;
}

.police_zerolimit {
	font-family: 'Besley';
	font-size: 30px;
	/*font-weight: 'italic';*/
	font-style: italic;
	letter-spacing: 0em;
	line-height: 110%;
	color: #FFFFFB;
}

.police_workwithusbutton {
	font-family: 'DM Sans';
	font-size: 14px;
	letter-spacing: 0.02em;
	line-height: 100%;
}

.police_presentation {
	font-family: 'Besley';
	font-size: 40px;
	font-weight: medium;
	letter-spacing: 0em;
	line-height: 150%;
	color: #0537F5;
}

.h1_black {
	font-family: 'DM Sans';
	font-size: 48px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 110%;
	color: #212121;
}

.h1_white {
	font-family: 'DM Sans';
	font-size: 48px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 150%;
	color: #FFFFFB;
}

.police_valuenumber {
	font-family: 'DM Sans';
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0em;
	color: #212121;
}

.police_valuetitle {
	font-family: 'DM Sans';
	font-size: 24px;
	font-weight: 300;
	letter-spacing: 0em;
	line-height: 125%;
}

.police_valuetext {
	font-family: 'DM Sans';
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 150%;
	color: #FFFFFB;
}

.police_approachslogan {
	font-family: 'DM Sans';
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 125%;
	color: #212121;
}

.police_approachtitle {
	font-family: 'DM Sans';
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 125%;
	color: #212121;
}

.police_approachtext {
	font-family: 'DM Sans';
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 150%;
	color: #212121;
}

.police_platformtext {
	font-family: 'DM Sans';
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0em;
	line-height: 125%;
	color: #212121;
}

.police_numberstitle {
	font-family: 'DM Sans';
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0em;
	line-height: 150%;
	color: #212121;
}

.police_numbers {
	font-family: 'DM Sans';
	font-size: 100px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 85%;
	color: #212121;
}

.police_commenttext {
	font-family: 'Besley';
	font-size: 32px;
	font-style: italic;
	letter-spacing: 0em;
	line-height: 125%;
	color: #000000;
}

.police_commentname {
	font-family: 'DM Sans';
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 150%;color: #000000;
}

.police_commentcompany {
	font-family: 'DM Sans';
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 150%;
	color: #000000;
}

.police_servicetitle {
	font-family: 'DM Sans';
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0em;
	line-height: 125%;
	color: #FFFFFB;
}

.police_servicesubtitle {
	font-family: 'Besley';
	font-size: 17px;
	/*font-weight: 'italic';*/
	font-style: italic;
	letter-spacing: 0em;
	line-height: 125%;
	color: #FFFFFB;
}

.police_service_included {
	font-family: 'DM Sans';
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 150%;
	color: #FFFFFB;
}

.police_service_text {
	font-family: 'DM Sans';
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.04em;
	line-height: 150%;
	color: #FFFFFB;
}

.police_question {
	font-family: 'Besley';
	font-size: 30px;
	font-weight: 300;
	font-style: italic;
	letter-spacing: 0em;
	line-height: 125%;
	color: #FFFFFB;
}

.police_founderstext {
	font-family: 'DM Sans';
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 150%;
	color: #212121;
}
/*
.police_foundersconclusion {
	font-family: 'DM Sans';
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0em;
	line-height: 150%;
	color: #212121;
}
*/

/*
.police_connect {
	font-family: 'DM Sans';
	font-size: 48px;
	font-weight: 300;
	letter-spacing: 0em;
	line-height: 100%;
	color: #FFFFFB;
}

.police_connecttext {
	font-family: 'DM Sans';
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0em;
	line-height: 150%;
	color: #FFFFFB;
}
*/

.police_footer {
	font-family: 'DM Sans';
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 150%;
	color: #FFFFFB;
}

/* Typo font mobile  */

@media (max-width: 800px) or (orientation: portrait) {

.police_menu {
	font-size: clamp(14px, 3vh, 60px);
}

.police_fren {
	font-size: clamp(14px, 1.5vh, 60px);
}

.police_fullscale {
	
	font-size: clamp(14px, 3vh, 60px);
}
.police_zerolimit {
	font-size: clamp(14px, 3vh, 60px);
}

.police_workwithusbutton {
	font-size: clamp(14px, 2vh, 60px);
}

.police_presentation {
	font-size: clamp(14px, 6vh, 70px);
}

.h1_black,
.h1_white{
	font-size: clamp(14px, 9vh, 60px);
}

.police_valuenumber {
	font-size: clamp(14px, 3vh, 60px);
}

.police_valuetitle {
	font-size: clamp(14px, 2.3vh, 60px);
}

.police_valuetext {
	font-size: clamp(14px, 2vh, 60px);
}

.police_approachslogan {
	font-size: clamp(14px, 2vh, 60px);
}

.police_approachtitle {
	font-size: clamp(14px, 4vh, 60px);	
}

.police_approachtext {
	font-size: clamp(14px, 2vh, 60px);	
}

.police_platformtext {
	font-size: clamp(14px, 3vh, 60px);	
}

.police_numberstitle {
	font-size: clamp(14px, 2vh, 60px);	
}

.police_numbers {
	font-size: clamp(14px, 10vh, 150px);
}

.police_commenttext {
	font-size: clamp(14px, 3vh, 60px);
}

.police_commentname {
	font-size: clamp(14px, 2vh, 60px);
}

.police_commentcompany {
	font-size: clamp(14px, 1.5vh, 60px);
}

.police_servicetitle {
	font-size: clamp(14px, 3vh, 60px);
}

.police_servicesubtitle {
	font-size: clamp(14px, 2.5vh, 60px);
}

.police_service_included {
	font-size: clamp(14px, 2vh, 60px);
}

.police_service_text {
	font-size: clamp(14px, 2vh, 60px);
}

.police_question {
	font-size: clamp(14px, 4vh, 100px);
}


.police_founderstext {
	font-size: clamp(14px, 2vh, 60px);
}

.police_footer {
	font-size: clamp(14px, 2vh, 60px);
}

/*








*/


}

a {
	text-decoration: none;
	color: inherit;
}

h1 {
	padding: 60px 60px 24px 60px;
	margin: 0px;
}

/* FIN POLICES */

body {
	margin: 0;
	padding: 0;
	background-color: #FFFFFB;
	min-height: 100vh;
	width: 100%;
	overflow-y: overlay;
	overflow-x: overlay;
}


	header {
		background-image: url('img/HEADER/image_home.svg');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 30% top;
		width: 100%;
		height: 100vh;
		min-height: 852px;
		position: relative;
		top: 0px;
		margin: 0px:
		padding: 0px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

		.mardiagency {
			/* background-image: url('img/HEADER/mardi_agency_lg.svg');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center center; */
			width: 540.44px;
			position: relative;
		}
		
@media (max-width: 800px) or (orientation: portrait) {

		.mardiagency {
			width: 70vw;
		}

}
		
			.mardiagency img {
				width: 100%;
			}

		.citation {
			position: relative;
			text-align: center;
			margin-top: 30px;
		}

			.citation p {
				margin: 0;
				padding: 0;
			}

				.citation #cit2 {

				}

		.workwithus {
			/*width: 160px;
			height: 42px;*/
			padding: 10px 20px 10px 20px;
			position: relative;
			margin-top: 30px;
			color: #FFFFFB; /* A laisser */
			cursor: pointer;
			border: 1px solid #FFFFFB;
			border-radius: 100px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
@media (max-width: 800px) or (orientation: portrait) {

		.workwithus {
			padding: 20px 40px 20px 40px;
		}

}
						
			.workwithus:hover {
				background-color: #FF8579;
				border-color: #FF8579;
				color: #212121; /* A laisser */
				font-weight: 700; /* A laisser */
			}


	.fondburger {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100vh; /* Pleine hauteur */
	    background-color: rgba(33, 33, 33, 0.95);
	    z-index: 999;
	    display: none; /* Initialement caché */
	    transition: display 0.3s ease-in-out; /* Ajout de la transition */
	}
	
		.fondburger-open {
		    display: block; /* Afficher quand la classe est présente */
		}

	nav {
		width: 100%;
		height: 10vh;
		min-height: 80px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;
		color: #FFFFFB; /* A laisser */
		display: flex;
		flex-direction: column;
	}
	
			nav.scrolled {
			    background-color: #FFFFFB;
			    color: #212121; /* A laisser */
			}
		
		.contentmenu {
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
		
		.contentmenu a {
			height: 100%;
			margin-left: 60px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.logo {
			width: 85px;
			height: 40px;
			background-image: url('img/NAV/logo.svg');
			background-repeat: no-repeat;
			background-size: cover;	
			z-index: 1000;
		}
		
@media (max-width: 800px) or (orientation: portrait) {

		.logo {
			width: 127px;
			height: 60px;
		}

}
		
			nav.scrolled .logo {
			    background-image: url('img/NAV/logo_noir.svg');
			}
			
		.line-menu {
			background-color: #FFFFFB;
			height: 1px;
			left: 0px;
			width: 100%;
			top: 79px;
			z-index: 1000;
		}


		.menu {
			flex-grow: 1;
			margin-right: 20px;
			margin-left: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;

		}

			.menu ul {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				list-style-type: none;
				padding: 0;
				margin: 0;
				width: 100%;
			}

				.menu li {
					margin-right: 20px;
				}

				.menu li:last-child {
					margin-right: 0;
				}

					.menu li a {
						text-decoration: none;
						color: inherit;
						margin: 0;
						padding: 0;
					}

						.menu li a:hover,
						.menu li a.nav-active
						{
							border-bottom: 3px solid #FF8579;
							/* background-image: url('img/NAV/barre_menu_rose.svg');
							background-repeat: no-repeat;
							background-size: contain;
							background-position: bottom left;*/
							padding-bottom: 1px;
						}

		.langue {
			cursor: pointer;
			margin-right: 61px;
			display: flex;
			flex-direction: row;
			height: 100%;
			align-items: center;
			justify-content: center;
		}

			#switch-fr,
			#switch-en {
				display: flex;
				flex-direction: row;
				height: 100%;
				align-items: center;
				justify-content: center;
			}

			#switch-fr p,
			#switch-en p
			{
				margin: 0px;
				padding: 0px;
			}

				#FRimg,
				#ENimg
				{
					width: 36px;
					height: 20px;
				}
				
				
@media (max-width: 800px) or (orientation: portrait) {

				#FRimg,
				#ENimg
				{
					width: 54px;
					height: 30px;
				}

}

				#FRimg {
					background-image: url('img/NAV/button.svg');
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}

				#ENimg {
					background-image: url('img/NAV/button2.svg');
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
				}
				
					nav.scrolled #FRimg {
					    background-image: url('img/NAV/button_noir.svg');
					}

					nav.scrolled #ENimg {
					    background-image: url('img/NAV/button2_noir.svg');
					}
					
					
					nav.scrolled .burger-line {
					    background-color: #212121; /* Couleur noire */
					}

			#switch-fr p {
				padding-right: 5px;
			}

			#switch-en p {
				padding-left: 5px;
			}
			
			
			
/* MENU BURGER -----


/* Masquer le menu sur petit écran */
@media (max-width: 800px) or (orientation: portrait) {
  .menu ul {
    display: none; /* Masquer la liste du menu */
  }

  /* Style du bouton burger */
  .burger-icon {
	width: 60px;
	height: 60px;
	cursor: pointer;
	display: flex;
	flex-direction: column;    
  	margin: 0;
  	padding: 0;
  	z-index: 1000;
  }

  .burger-line {
	width: 100%;
	background-color: #FFFFFB; /* Couleur des lignes du burger */
	transition: all 0.3s ease-in-out;
  	margin: 0;
  	padding: 0;
  }
  
  .burger-space {
  	width: 100%;
  	height: 24px;
  	margin: 0;
  	padding: 0;
  }

  .burger-line-1 {
	height: 4px;
  }

  .burger-line-2 {
	height: 2px;
/*
    transform: translateY(-50%);
    transform-origin: center center;
*/  
  }
  
  .burger-line-2bis {
	height: 2px;
/*
    transform: translateY(-50%);
    transform-origin: center center;
*/  
  }

  .burger-line-3 {
	height: 4px;
  }

  /* Style du menu ouvert */
  

  .menu.open ul {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px - 140px);
    justify-content: center; /* Centrer verticalement */
    align-items: center; /* Centrer horizontalement */
  }

  .menu.open li {
    margin: 20px; /* Espacement entre les éléments du menu */
    padding: 0;
  }

  .menu.open li a {
    color: #FFFFFB; /* A laisser Couleur du texte du menu */
  }

	/* Animation du burger (optionnel) */
	.menu.open .burger-line-1 {
	  opacity: 0;
	}

	.menu.open .burger-line-2 {
	  transform: rotate(45deg) translateY(2px) translateX(0px);
	  height: 4px;
	}
	
	.menu.open .burger-line-2bis {
	  transform: rotate(-45deg) translateY(-2px) translateX(0px);
	  height: 4px;
	}

	.menu.open .burger-line-3 {
	  opacity: 0;
	}
}

/* Styles existants pour les écrans larges */
@media (max-width: 801px) and (orientation: landscape) {
  .burger-icon {
    display: none; /* Cacher le burger sur grand écran */
  }
}



FIN BURGER ------ */
			
			

	main {
		width: 100%;
		position: relative;
		margin: 0px;
		padding: 0px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	

		#presentation {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		#about {
			scroll-margin-top: 40px;
			max-width: 1172px;
			position: relative;
			padding-top: 100px;
			text-align: center;

		}
		
		#ourvalues {
			scroll-margin-top: 40px;
			width: 100%;
			margin: 0px;
			position: relative;
			display: flex;
			flex-direction : column;
			border-bottom: 1px solid #212121;
		}
		
			#ourvalues article {
				width: 100%;
				display: flex;
				flex-direction: row;
				margin: 0px;
				border-top: 1px solid #212121;
				cursor: pointer;
			}
						
				.values1 {
					width: 50%;
					margin: 0px;
					box-sizing: border-box;
					position: relative;
				}
				
					.values1 p {
						padding: 24px 60px 24px 60px;
						width: 100%;
						display: inline-block;
					}
					
					.values1 .cover {
					  width: 100%;
					  height: 100%;
					  object-fit: contain;
					  display: none;
					}
					
					.values1 .fleche_bas {
						width: 18px;
						height: 9px;
						position: absolute;
						left: 0px;
						transform: translateX(calc(100vw - 60px));
						top: 60px;
					}
					
					
				.values2 {
					width: 50%;
					flex-grow: 1;
					margin: 0px;
					padding: 24px 60px 24px 60px;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					flex-direction: column;
				}
				
				
					.values2.open {
						background-color: #0537F5;
						color: #FFFFFB; /* A laisser */
					}
				
					.values2 p {
						width: 100%;
					}
					
					.values2 br {
						display: none;
					}
					
					.values2 .txt_values {
						display: none;
						text-align: left;
						position: relative;
					}

						.values2 .fleche_haut {
							width: 18px;
							height: 9px;
							position: absolute;
							right: -25px;
							top: -60px;
						}
		
			@media (max-width: 800px) or (orientation: portrait) {
			
				#ourvalues article {
					flex-wrap: wrap;
				}
				
				.values1 {
					width: auto;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				
					.values1 .fleche_bas {
						width: 36px;
						height: 18px;
						position: absolute;
						left: 0px;
						transform: translateX(calc(100vw - 60px));
						top: 40px;
					}
				
				.values1 .cover {
					width: 100vw;
					height: auto;
				}
				
				.values2 {
					width: calc(100% - 180px);
					margin: 0;
					padding: 10px;
				}
				
				.values1 p {
					width: 180px;
					padding: 10px 10px 10px 60px;
					margin: 0;
					box-sizing: border-box;
				}
				
						.values2 .fleche_haut {
							width: 36px;
							height: 18px;
							position: absolute;
							right: 10px;
							top: -200px;
						}
				
				.values2.open br {
					display: block;
				}
			
			}
		
		#ourapproach {
			scroll-margin-top: 40px;
			margin-top: 100px;
			width: 100%;
			background-color: #F0F0F0;
			position: relative;
		}
		
			.container {
				margin: 0px;
				width: 100%;
				position: relative;
				overflow: hidden;
			}

			.controls {
			 	position: absolute;
			 	top: 45px;
			 	right: 30px;
			 	display: flex;
			 	z-index: 10;
			}

			.controls button {
				background: none;
			  	border: none;
			 	padding: 30px;
			 	margin-left: 10px;
			 	cursor: pointer;
			}

			.controls button:disabled {
			 	cursor: default;
			}

			.arrow-icon.enabled {
			 	display: inline-block;
			 	width: 36px; 
			 	height: 36px;
			 	background-repeat: no-repeat;
			 	background-size: contain;
			}
			
			.arrow-icon.disabled {
			 	display: inline-block;
			 	width: 36px; 
			 	height: 36px;
			 	background-repeat: no-repeat;
			 	background-size: contain;
			}

			.arrow-icon.left.enabled {
			 	background-image: url('img/OUR_APPROACH/approach_flechegaucherose.svg');
			}

			.arrow-icon.left.disabled {
			 	background-image: url('img/OUR_APPROACH/approach_flechegauchegrise.svg');
			}

			.arrow-icon.right.enabled {
			 	background-image: url('img/OUR_APPROACH/approach_flechedroiterose.svg');
			}

			.arrow-icon.right.disabled {
			 	background-image: url('img/OUR_APPROACH/approach_flechedroitegrise.svg');
			}
			
@media (max-width: 800px) or (orientation: portrait) {
				.controls {
					position: absolute;
					top: 50px;
					right: 30px;
					display: flex;
					z-index: 10;
				}

				.controls button {
					background: none;
					border: none;
					padding: 15px;
					margin-left: 10px;
					cursor: pointer;
				}
				
			.arrow-icon.enabled,
			.arrow-icon.disabled {
			 	width: 56px; 
			 	height: 56px;
			}

}

				.content {
					margin: 0px;
					display: flex;
					flex-direction: row;
					overflow-x: auto; /* Ajout de cette ligne */
					overflow-y: hidden;
					/* width: fit-content; Important pour que le contenu ne s'étire pas */
					scroll-snap-type: x mandatory;
					padding-bottom: 20px;
					padding-left: 35px;
					padding-right: 35px;
				}
				
				.content::-webkit-scrollbar {
					display: none;
				}
				
				.content {
					-ms-overflow-style: none;
					scrollbar-width: none;
				}

					#ourapproach article {
						flex: 0 0 auto;
						margin: 0px 25px 0px 25px;
						display: flex;
						flex-direction: column;
						width: 425px;
					}

						.picapproach img {
							width: 425px;
							height: 425px;
							object-fit: cover;
							border-radius: 8px;
							margin-bottom: 25px;
						}
						
@media (max-width: 800px) or (orientation: portrait) {

					#ourapproach article {
						width: 80vw;
					}

						.picapproach img {
							width: 80vw;
							height: 80vw;
						}
}
						
						.content p {
							margin: 0px;
							padding: 0px;
						}

						.titreapproach {

						}

						.objapproach {

						}

						.txtapproach {
							margin-top: 25px;
							text-align: left;
						}

		#acrossplatforms {
			scroll-margin-top: 40px;
			width: 100%;
			position: relative;
			background-image: url('img/PLATFORMS/ellipse_bleu.svg'), url('img/PLATFORMS/ellipse_rose.svg');
			background-repeat: no-repeat, no-repeat;
			background-position: top left, bottom right;
			margin: 0px;
			padding: 0px;
			display: flex;
			flex-direction: column;
		}
		
			.platformscontent {
				display: flex;
				flex-direction: row;
				width: 100%;
				height: 423px;
				box-sizing: border-box;
			}
			
			
				.picplatforms {
					flex-grow: 1;
					padding-left: 60px;
				}
				
					.picplatforms img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: 8px;
					}

				.listplatforms {
					min-width: 500px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					text-align: center;
				}
				
					.listplatforms ul {
						margin: 0 auto; 
						padding: 0px;
						text-align: left;
						width: fit-content;
						list-style: none;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
					}
				
						.listplatforms li {
							diplay: flex;
							flex-direction: row;
							align-items: center;
							position: relative;
							padding-left: 40px;
							margin-bottom: 20px;
							box-sizing: border-box;
						}
						
							.listplatforms li::before {
								content: "";
								display: inline-block;
								width: 30px;
								height: 30px;
								background-size: contain;
								background-repeat: no-repeat;
								background-position: center;
								position: absolute;
								left: 0;
							}
						
								#fb::before {
									background-image: url('img/PLATFORMS/fb.svg');
								}
								#tt::before {
									background-image: url('img/PLATFORMS/tt.svg');
								}
								#yt::before {
									background-image: url('img/PLATFORMS/yt.svg');
								}
								#sc::before {
									background-image: url('img/PLATFORMS/sc.svg');
								}
								#ig::before {
									background-image: url('img/PLATFORMS/ig.svg');
								}

@media (max-width: 800px) or (orientation: portrait) {
			
				.picplatforms {
					display: none;
				}
				
				.listplatforms {
					min-width: 0;
					width: 100%;
					margin-top: 60px;
				}
				
						.listplatforms li {
							padding-left: 70px;
						}
				

							.listplatforms li::before {
								max-width: 60px;
								max-height: 60px;
								width: 3vh;
								height: 3vh;
							}		
			
}
			
			
			.numbers {
				display: flex;
				/*flex-direction: row;*/
				width: 100%;
				margin-top: 100px;
				flex-wrap: wrap;
			}
			
				.numbers ul {
					margin: 0 auto; 
					padding: 0 20px 0 20px;
					text-align: left;
					list-style: none;
					display: flex;
					flex-direction: column;
				}

					.numbers li {
						diplay: flex;
						flex-direction: row;
						align-items: center;
						position: relative;
						margin: 0px;
						padding: 0px;
					}
					
						.titrenumbers {
							margin: 0px;
							padding: 0px;							
						}
						
						.valnumbersli {
							margin: 0px;
							padding: 0px;
						}
				
@media (max-width: 800px) or (orientation: portrait) {

			.numbers {
				padding-left: 60px;
				box-sizing: border-box;
			}
			
				.numbers ul {						
					width: 50%;
					box-sizing: border-box;
				}
}
					
			
			.sepnoire {
				height: 1px;
				margin: 100px 60px 100px 60px;
				background-color: #212121;
			}
			
			.coms-container {
				position: relative;
				width: 100%;
				overflow: hidden;
				padding-bottom: 20px;
			}

				.coms-controls {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					width: calc(100% - 120px); /* Ajuster la largeur pour laisser 60px de chaque côté */
					display: flex;
					justify-content: space-between;
					left: 60px; /* Positionner à 60px du bord gauche */
					right: 60px; /* Positionner à 60px du bord droit (inutile si left et width sont corrects) */
					z-index: 10;
					padding: 0; /* Supprimer le padding */
				}
				
					.coms-controls button {
						background: none;
						border: none;
						padding: 0;
						cursor: pointer;
					}

						.coms-controls button:disabled {
							cursor: default;
						}

							.arrow-icon {
							    display: inline-block;
							    background-repeat: no-repeat;
							    background-size: contain;
							    transition: opacity 0.2s ease-in-out; /* Conserver la transition pour d'autres effets si vous en ajoutez */
							}

							.arrow-icon.coms-left.enabled {
							    background-image: url('img/PARTNERS/approach_flechegaucherose.svg');
							    width: 36px; /* Taille pour les flèches activées */
							    height: 36px;
							}

							.arrow-icon.coms-left.disabled {
							    background-image: url('img/PARTNERS/approach_flechegauchegrise.svg');
							    width: 36px; /* Taille pour les flèches désactivées */
							    height: 36px;
							}

							.arrow-icon.coms-right.enabled {
							    background-image: url('img/PARTNERS/approach_flechedroiterose.svg');
							    width: 36px; /* Taille pour les flèches activées */
							    height: 36px;
							}

							.arrow-icon.coms-right.disabled {
							    background-image: url('img/PARTNERS/approach_flechedroitegrise.svg');
							    width: 36px; /* Taille pour les flèches désactivées */
							    height: 36px;
							}

@media (max-width: 800px) or (orientation: portrait) {
				
					.coms-container {
						padding-bottom: 100px;
					}
			
					.coms-controls {
						position: absolute;
						top: calc(100% - 40px);
						left: calc(50% - 75px);
						transform: translateY(-50%);
						width: 140px; /* Ajuster la largeur pour laisser 60px de chaque côté */
						display: flex;
						justify-content: space-between;
						z-index: 10;
						padding: 0; /* Supprimer le padding */
					}
					
							.arrow-icon.coms-left.enabled,
							.arrow-icon.coms-left.disabled,
							.arrow-icon.coms-right.enabled,
							.arrow-icon.coms-right.disabled {
							    width: 56px;
							    height: 56px;
							}
							
}

				.coms {
					display: flex;
					flex-direction: row;
					overflow-x: auto;
					overflow-y: hidden;
					scroll-snap-type: x mandatory;
					scroll-behavior: smooth;
					-ms-overflow-style: none;
					scrollbar-width: none;
				}

					.coms::-webkit-scrollbar {
						display: none;
					}

					.coms-article {
						flex: 0 0 auto;
						width: 100%;
						margin: 0px;
						scroll-snap-align: center;
						display: flex;
						flex-direction: column;
						align-items: center;
						text-align: center;
						padding: 0px;
						justify-content: center;
						box-sizing: border-box;
					}

						.txtcom {
							max-width: 850px; /* 760 */
						}

						.auteurcom {
							margin-top: 40px;
							max-width: 760px;
						}

						.societycom {
							max-width: 760px;
						}



				.partners {
					width: 100%;
					padding: 200px 60px 0px 60px;
					box-sizing: border-box;
				}

				.partners ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					list-style: none;
					padding: 0;
					margin: 0;
				}

				.partners li {
					/*width: 105px;*/
					height: auto;
					margin: 0 40px 20px;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.partners li img {
					/*max-width: 100%;
					max-height: 100%;*/
					display: block;
					margin: 0 auto;
				}

		
		#ourservices {
			scroll-margin-top: 40px;
			width: 100%;
			position: relative;
			margin-top: 0px;
			padding-bottom: 125px;
			background-color: #002F6C;
			background-image: url('img/OUR_SERVICES/mardiagency_blue.svg');
			background-repeat: no-repeat;
			background-size: contain;
			background-position: bottom center;
		}
		
			#ourservices h1 {
			}

			.services-container {
			    margin: 0px;
			    width: 100%;
			    position: relative;
			    overflow: hidden;
			}

				.services-controls {
				     position: absolute;
				     top: 70px;
				     right: 30px;
				     display: none; /* flex pour le mobile */
				     z-index: 10;
				}

					.services-controls button {
					    background: none;
					      border: none;
					     padding: 30px;
					     margin-left: 10px;
					     cursor: pointer;
					}

						.services-controls button:disabled {
						     cursor: default;
						}

						.arrow-icon.services-left.enabled {
						     background-image: url('img/OUR_SERVICES/arrow_blanc_g.svg');
						     width: 19px;
						     height: 19px;
						     background-repeat: no-repeat;
						     background-size: contain;
						}

						.arrow-icon.services-left.disabled {
						     background-image: url('img/OUR_SERVICES/arrow_gris_g.svg');
						     width: 19px;
						     height: 19px;
						     background-repeat: no-repeat;
						     background-size: contain;
						}

						.arrow-icon.services-right.enabled {
						     background-image: url('img/OUR_SERVICES/arrow_blanc_d.svg');
						     width: 19px;
						     height: 19px;
						     background-repeat: no-repeat;
						     background-size: contain;
						}

						.arrow-icon.services-right.disabled {
						     background-image: url('img/OUR_SERVICES/arrow_gris_d.svg');
						     width: 19px;
						     height: 19px;
						     background-repeat: no-repeat;
						     background-size: contain;
						}

@media (max-width: 800px) or (orientation: portrait) {
				.services-controls {
				     position: absolute;
				     top: 45px;
				     right: 30px;
				     display: flex; /* flex pour le mobile */
				     z-index: 10;
				}
				
						.arrow-icon.services-left.enabled,
						.arrow-icon.services-left.disabled,
						.arrow-icon.services-right.enabled,
						.arrow-icon.services-right.disabled {
						     width: 39px;
						     height: 39px;
						}
				
}

				.services-content {
				    display: flex;
				    flex-wrap: wrap;
				    justify-content: center; /* mobile : flex-start */
				    box-sizing: border-box;
				    overflow-x: auto;
				    overflow-y: hidden;
				    scroll-snap-type: none;
				    scroll-behavior: auto;
				    -ms-overflow-style: auto;
				    scrollbar-width: auto;
				    padding-bottom: 20px;
				    padding-left: 35px;
				    padding-right: 35px;
				}
				
@media (max-width: 800px) or (orientation: portrait) {
				
				.services-content {
				
				/* Pour le mobile : */
				    display: flex;
				    flex-wrap: nowrap;
				    justify-content: flex-start;
				    flex-direction: row;
				    overflow-x: auto;
				    overflow-y: hidden;
				    scroll-snap-type: x mandatory;
				    scroll-behavior: smooth;
				    -ms-overflow-style: none;
				    scrollbar-width: none;
				    padding-bottom: 20px;
				    padding-left: 35px;
				    padding-right: 35px;
				  
				  
				  }
}

					.services-content::-webkit-scrollbar {
					    display: none;
					}

					.service-item {
					    flex: 0 0 auto;
					    width: 425px; 
					    margin: 0 25px; 
					    scroll-snap-align: start;
					}
				
					#ourservices article {
						flex: 0 0 auto;
						margin: 0px 25px 0px 25px;
						padding: 0 0 30px 0px;
						display: flex;
						flex-direction: column;
						width: 425px;
					}
					
						.services-content p {
							margin: 0px;
							padding: 0px;
						}
				
						.picarticles img {
							width: 425px;
							height: 459px;
							object-fit: cover;
							border-radius: 8px;
							margin-bottom: 15px;
						}

						.titreservice {

						}

						.stservices {

						}
						
						.whatst {
							display: flex;
							flex-direction: row;
							border-top: 1px solid #FF8579;
							margin-top: 30px;
						}
						
							.whats {
								padding-top: 20px;
								flex-grow: 1;
							}

							.tiret {
								padding-top: 20px;
								text-align:right;
								cursor: pointer;
								user-select: none;
							}				

						.txtservices {
							padding-top: 15px;
							text-align: left;
						}

						.listservices {

							padding-bottom: 0px;
						}
						
							.listservices ul {
								list-style: none;
								margin: 0px;
								padding: 30px 0px 0px 0px;
							}
							
								.listservices li {
									padding-left: 30px;
									background-image: url('img/OUR_SERVICES/check.svg'); 
									background-repeat: no-repeat;
									background-size: 15px 15px;
									background-position: 0 5px;
									margin-bottom: 10px;
								}

@media (max-width: 800px) or (orientation: portrait) {

					#ourservices article {
						width: 80vw;
					}
				
						.picarticles img {
							width: 80vw;
							height: 86vw;
						}

}


			.notsure {
				margin-top: 80px;
				width: 100%;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			
				.notsure p {
					width: 385px;
					text-align: center;
					margin: 0 auto;
				}

				.bookacall {
					margin-top: 40px;
					/* width: 140px;
					height: 42px; */
					padding: 10px 20px 10px 20px;
					cursor: pointer;
					border: 1px solid #FFFFFB;
					border-radius: 100px;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #FFFFFB; /* A laisser */
					
				}

				
@media (max-width: 800px) or (orientation: portrait) {

				.notsure p {
					width: 100%;
					text-align: center;
					margin: 0 60px;
				}

		.bookacall {
			padding: 20px 40px 20px 40px;
		}

}
				
					.bookacall:hover {
						background-color: #FF8579;
						border-color: #FF8579;
						color: #212121; /* A laisser */
						font-weight: 700; /* A laisser */
					}

		#ourfounders {
			scroll-margin-top: 40px;
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: row;
		}
			
		
			.picfounders {
				margin: 0px;
				padding: 0px;
				width: 50%;
				background-image: url('img/OUR_FOUNDERS/founders.svg');
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center right;
				border-radius: 8px;
			}

			.txtfoundeurs {
				width: 50%;
				padding: 100px 60px 30px 100px;
			}
			
				.txtfoundeurs h1 {
					margin: 0px;
					padding: 0px;
				}
				
				.txtfoundeurs p {
					max-width: 560px;
				}
				
@media (max-width: 800px) or (orientation: portrait) {
		
			#ourfounders {
				flex-direction: column;
				margign: 0;
				padding: 0;
			}
			
			.picfounders {
				margin: 0px;
				padding: 0px;
				width: 100vw;
				height: 100vw;
				background-image: url('img/OUR_FOUNDERS/founders.svg');
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center right;
				border-radius: 8px;
				box-sizing: border-box;
			}
			
			.txtfoundeurs {
				width: 100vw;
				padding: 10px 60px 30px 60px;
				box-sizing: border-box;
			}
			
				.txtfoundeurs p {
					max-width: 100vw;
				}
		
}
		
		#letsconnect {
			scroll-margin-top: 0px;
			margin: 100px 0 0 0;
			padding: O
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			background-image: url('img/LETSCONNECT/background.svg');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 75% center;
		}
			
			.contact {
				max-width: 630px;
				margin-left: 60px;
				padding: 235px 0 235px 0;
			}

				.contact h1 {
					margin: 0;
					padding: 0;
				}
				
				.contact a {
					/*justify-content: center;
					align-items: center;
					display: flex;
					flex-direction: column;*/
				}
				
					.boutoncontact {
						margin-top: 40px;
						/* width: 140px;
						height: 42px; */
						padding: 10px 20px 10px 20px;
						cursor: pointer;
						border: 1px solid #FFFFFB;
						border-radius: 100px;
						text-align: center;
						display: inline-flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFB; /* A laisser */

					}
					
@media (max-width: 800px) or (orientation: portrait) {

		.boutoncontact {
			padding: 20px 40px 20px 40px;
		}

}
					


						.boutoncontact:hover {
							background-color: #FF8579;
							border-color: #FF8579;
							color: #212121; /* A laisser */
							font-weight: 700; /* A laisser */
						}

			.pied {
				scroll-margin-top: -800px;
				width: 100%;
				height: 70px;
				margin: 0;
				padding: 0;
				border-top: 1px solid #FFFFFB;
				display: flex;
			}
			
				.pied a {
				    display: flex;
				    height: 100%;
				    max-width: 175px;
				    width: 15%;
				    text-decoration: none;
				    color: inherit;
				    align-items: center;
				    justify-content: center;
				    box-sizing: border-box;
				    margin: 0;
				    padding: 0;
				}
				
				.pied a:hover {
					color: #FF8579;
				}
				
				
				.annee
				{
					width: 15%;
					max-width: 175px;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0;
					padding: 0;
				}
				
				.borderfoot,
				.borderfoot2 {
					border-left: 1px solid #FFFFFB;
					border-right: 1px solid #FFFFFB;
				}
				
				.logofoot {
					flex-grow: 1;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0;
					padding: 0;
				}
					
					.logofoot img {
						height: 40px;
					}
					
@media (max-width: 800px) or (orientation: portrait) {
		
			.pied {
				scroll-margin-top: -800px;
				width: 100%;
				height: auto;
				margin: 0;
				padding: 0;
				border: 0;
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
			}
			
				.pied-open {
					position: fixed;
					bottom: 0;
					z-index: 1000;
				}
				
					.pied-open .logofoot {
						display: none;
					}
			
				.pied a {
				    display: flex;
				    height: 6vh;
				    max-width: none;
				    flex-basis: 50%;
				    text-decoration: none;
				    color: inherit;
				    align-items: center;
				    justify-content: center;
				    box-sizing: border-box;
				    margin: 0;
				    padding: 0;
				    border-top: 1px solid #FFFFFB;
				}
				
				.pied a:hover {
					color: #FF8579;
				}
				
				
				.annee
				{
					flex-basis: 50%;
					max-width: none;
					height: 6vh;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0;
					padding: 0;
					box-sizing: border-box;
					border-top: 1px solid #FFFFFB;
				}
								
				.borderfoot,
				.borderfoot2 {
					border-left: 0;
					border-right: 0;
				}
				
				.borderfoot,
				.borderfoot3 {
					border-right: 1px solid #FFFFFB;
				}
				
				.logofoot {
					height: 8vh;
					flex-basis: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 0;
					padding: 0;
					order: 3;
					box-sizing: border-box;
					border-top: 1px solid #FFFFFB;
				}
					
					.logofoot img {
						height: 4vh;
					}		
}


/* Style global de la barre de défilement (fond transparent) */
::-webkit-scrollbar {
  width: 8px; /* Largeur de la barre verticale */
  height: 8px; /* Hauteur de la barre horizontale */
  background-color: transparent;
}

/* Style du "pouce" (curseur de défilement) arrondi et légèrement gris */
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3); /* Gris légèrement transparent */
  border-radius: 4px; /* Pour arrondir les bords */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Bordure subtile (facultatif) */
}

/* Style du "track" (la zone sur laquelle le pouce se déplace) - transparent */
::-webkit-scrollbar-track {
  background-color: transparent;
}

/* Style du "pouce" au survol (facultatif) */
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Style du "pouce" en état actif (cliqué et maintenu) (facultatif) */
::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.7);
}