@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Lato:900');

@import url('https://fonts.googleapis.com/css?family=Catamaran:100,300,700,900');
@import url('https://fonts.googleapis.com/css2?family=Edu+NSW+ACT+Foundation:wght@400;500;600&display=swap');

body {
background-color: #fdfdfd;
margin: 0;
padding: 0;
/*width: 1280px ; */
margin-left: auto;
margin-right: auto;
vertical-align: middle;
font-family: 'Catamaran', sans-serif;
font-size:17px;	
}

*, ::before, ::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
	
h1 {
	color: #231f20;
	font-family: 'Catamaran', sans-serif;
	text-transform: uppercase;
	font-weight:bold;
	font-size:20px;	
	font-weight:900;
	}
	
h2 {
	color: #231f20;
	font-family: 'Catamaran', sans-serif;
	text-transform: uppercase;
	font-weight:900;
	font-size:18px;	
	}
	
/* BARRE DE NAV */

#barre_navigation {
	width: 100%;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 150;
    overflow: hidden;
   /* background-color: #454444;*/
}

#navigation {
   width: 1280px;
	margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
}

li {
    float: left;
	/*margin-left:100px;*/
	width: 33%;
}

li a {
    display: block;
    color: /*white; */ #454444;
    text-align: center;
	font-family: 'Catamaran', sans-serif;
    padding: 14px 16px;
    text-decoration: none;
}

a {
    color: /*white; */ #454444;
	font-family: 'Catamaran', sans-serif;
    text-decoration: none;
}


p {
	font-family: 'Catamaran', sans-serif;
	font-weight:100;
	font-size:19px;	
}

/*li a:hover {
    background-color: #111;
}

	
/* fin de barre de navigation */

div#en_tete_index {
	width: 100%;
/*background-image: url("images_index//background_clair3.jpg");
  background-position: center; 
  background-repeat: no-repeat; 
  background-size: cover; /*cover pour les dessins */
background-color:#fff8de;
height:650px;
margin:auto;
text-align: center;
font-family: 'Catamaran', sans-serif;
font-weight:900;
font-size:35px;	
color:#3a3a3a;
letter-spacing : 2px; /* espace entre lettres */ 
line-height : 40px; /* espace entre ligne */ 
display: table;
}

.bandeau_texte{
vertical-align:middle;
display: table-cell;
background-color: #fdfdfd;
padding-right:30px;
padding-top:30px;
padding-bottom:20px;
z-index:1;
	}

/* -------------- INDEX ------------------------ */

.index_presentation_conteneur {
	width: 1280px;
	height:700px;
	margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
	font-family: 'Catamaran', sans-serif;
	font-size:17px;	
	padding-top:30px;
	  display: flex; /* alignement hauteur */
}


.index_presentation{
	width:600px;
	/*background-color:yellow;*/
	float:left;
	margin: auto; /* alignement hauteur */
	}
	
.image_index_apropos{
	width:530px;	
	height:650px;
	/*padding-left:50px;*/
	float:right;
	/*background-color:blue;
	/*position:relative;*/
	overflow: hidden;
	}
	
	
.image_index_apropos img{ /* propriete de l'image "enfermee" dans le div aux bonnes dimensions sans depasser (s'accordent avec overflow & position) */
	width:530px;
	height:650px;
	object-fit: cover;
	max-width: 100%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	/* couleurs */ 
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}
	
.image_index_apropos:hover img{ 
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	/* couleurs */ 
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	}



	.index_bandeaunoir{
width: 100%;
height:750px;
margin:auto;
background-color:#231f20;
text-align: center;
color:white;
vertical-align: baseline;
font-family: 'Catamaran', sans-serif;
font-size:17px;
padding-top:50px; padding-bottom:50px;
/*font-weight:100;
	*/
	}
	
.index_bandeaunoir p { width: 1260px; margin-left:auto; margin-right:auto;}

.index_bandeaunoir_conteneur {
	width: 1190px;
	height:auto;
	padding-bottom:65px;
	margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
	font-family: 'Catamaran', sans-serif;
	font-size:19px;	
	/*padding-top:75px;
	/*display: flex; /* alignement hauteur */
	position:static;	
}

.index_bandeaunoir_colonne1{
	float: left;
	width: 370px;
	margin-right: 40px;
	/*background-color:red;*/
}

.index_bandeaunoir_colonne2 {
	float: right;
	width: 370px;
	margin-left: 40px;
    /*background-color:yellow;*/
}

.index_bandeaunoir_centre {
	overflow: hidden;
}




.index_services_image {
	width:530px;
	height:400px;
	float:right;
	overflow: hidden;
	/*position:relative;	*/
}

	
.index_services_image img{ /* propriete de l'image "enfermee" dans le div aux bonnes dimensions sans depasser (s'accordent avec overflow & position) */
	width:530px;
	height:400px;
	object-fit: cover;
	max-width: 100%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	/* couleurs */ 
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}

.index_services_image:hover img{ 
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	/* couleurs */ 
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	}

.index_services_texte {
	/*width:680px;
	float:left;*/
	position:relative;	
	padding-left: 70px;
	padding-right:70px;
	text-align: center;
}

.service_gauche { 
	width:300px;
	height:340px; 
	margin-bottom:100px;
	/*background-color:blue;*/
	float:left;
	padding-right:80px;
	}
	
.service_droite {
	width:300px;
	height: 340px;
	float:right;
	position:relative;	
}



.index_services_texte hr {
	border-top: 2px solid #3a3a3a;
}

.index_services_conteneur {
	width: 1280px;
	height:auto;
	padding-bottom:70px;
	margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
	font-family: 'Catamaran', sans-serif;
	font-size:19px;	
	padding-top:75px;
	/*display: flex; /* alignement hauteur */
	position:static;	
}


.index_services_colonne1{
	float: left;
	width: 370px;
	margin-right: 40px;
}

.index_services_colonne2 {
	float: right;
	width: 370px;
	margin-left: 40px;
}

.index_services_centre {
	overflow: hidden;
}

/* en-tete */

.bandeau_texte{
vertical-align:middle;
display: table-cell;
	}

.bouton_appel_action {
	width:300px;
	background-color: white;
	margin-top:25px;
	padding:10px;
	text-align: center;
	/*border-radius: 30px;*/
	font-weight:900;
	font-size:15px;
	font-family: 'Catamaran', sans-serif;
	font-weight:900;
	color:#3a3a3a;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
z-index:2;
}

a {
	text-decoration:none;
}

.special-section {
  width: 100%;
  /*height: 100vh;*/
  height:650px;
  font-family: 'Catamaran', sans-serif;
font-weight:900;
font-size:35px;	
color:#3a3a3a;
background-color:#fdfdfd;
	overflow: hidden;
  display: flex;
  /*align-items: center;*/
  justify-content: space-between;
}
.special-section .left {
  width: 450px;
  min-width: 300px;
  height: 100%;
  padding-left: 300px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 30px;
  line-height:40px;
  z-index:1;
}
.left .desc {
  font-style: italic;
}
.left .prods-btn {
  all: unset;
  background-color: #111;
  color: #fff;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 30px;
  font-weight: 600;
}

.special-section .right {
  width: 1100px;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  margin-right:40px;
  transform: rotate(10deg);
}
.image-container {
  /*width: 20vw;*/
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-shrink: 0;
  gap: 10px;
  padding-block: 10px;
}
.image-container .image-box {
  width: 350px;
  height: 300px;
  box-shadow: 0 0 20px #00000040;
  flex-shrink: 0;
}
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.image-container:nth-child(1) {
  align-self: flex-start;
  animation: animateOne 25s linear infinite alternate;
}
.image-container:nth-child(2) {
  align-self: flex-end;
  animation: animateTwo 25s linear infinite alternate;
}

.image-container:nth-child(3) {
  align-self: flex-start;
  animation: animateThree 25s linear infinite alternate;
}

@keyframes animateOne {
  from {
    transform: translatey(-10%);
  }
  to {
    transform: translatey(-55%);
  }
}

@keyframes animateTwo {
  from {
    transform: translatey(10%);
  }
  to {
    transform: translatey(55%);
  }
}

@keyframes animateThree {
  from {
    transform: translatey(-10%);
  }
  to {
    transform: translatey(-55%);
  }
}

/* ------------------- ILS MONT FAIT CONFIANCE ---------- */

.index_clients_confiance {
	width:100%;
	/*height:220px;
	/*background-color:yellow;*/
	 margin: 0;
  overflow: hidden;
  padding-top:20px;
}

.orb {
  width: 180px;
  height: 100px;
  background: #999;
  border-radius: 50px;
  display: inline-block;
  /*margin: 0 24.7px;*/
  margin:20px;
  float: left;
  transition: all .2s ease-out;
}

.marquee {
  height: 200px;
  width: /* à gérer = largeur de tous les logos = 12 x (180+20) = 2160px; */ 2640px;
  overflow: hidden;
  position: relative;
}

.marquee--inner {
  display: block;
  width: 200%;
  margin: 20px 0;
  position: absolute;
  animation: marquee 20s linear infinite;
}


/*.half {
  float: left;
  width: 10%;
}*/

/*span {
  float: left;
  width: 50%:
}*/

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

/* ------------ DEUX TYPES DE PRESTATIONS  ---------------- */

.ligne_type_prestations {
	width: 1280px;
	height:525px;
	margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
	margin-top:17px;
	margin-bottom:25px;
	font-family: 'Catamaran', sans-serif;
	font-size:17px;	
	padding-top:30px;
}


	  
	
/*.texte_miniature_droite{
	width:300px;
	margin-left: 285px;
	background-color:white;
	padding:20px;
	position: absolute;
	top: 50%; /* poussé de la moitié de hauteur du référent 
	transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur 
	} */

.numero_projet {
	font-size:50px;	
	}
	
.type_projet {
	font-size:18px;	
	font-family: 'Catamaran', sans-serif;
	font-weight:700;
	color:#3a3a3a;
	}

.nom_projet_gauche {
	font-size:30px;	
	font-family: 'Catamaran', sans-serif;
	font-weight:900;
	color:#3a3a3a;
	}	
	
	
/* --------------------------------------------------- A PROPOS  ---------------- */

.nom_projet_droite {
	color: #231f20;
	font-family: 'Catamaran', sans-serif;
	text-transform: uppercase;
	font-weight:900;
	font-size:60px;	
	line-height: 100%;
	}
	
	.reseau{
width: 100%;
height:150px;
line-height:150px;
margin:auto;
background-color:#231f20;
text-align: center;
color:white;
vertical-align: baseline;
font-family: 'Catamaran', sans-serif;
font-weight:100;
font-size:30px;	
/*position:relative;*/
	}

.reseau img{
vertical-align:middle; }
	
	.categorie_apropos{
	width: 1280px;
	height:550px;
	/*padding-bottom:50px;*/
	margin-left: auto;
    margin-right: auto;
	position:relative;
	display: flex; /* contexte sur le parent */
	flex-direction: column; /* direction d'affichage verticale */
	justify-content: center; /* alignement vertical */
	}
	
	.apropos_textedroite {
	width:480px;
	height:auto;
	background-color:#fdfdfd;
	padding:50px;
	position:absolute;
	z-index:1;
	font-family: 'Catamaran', sans-serif;
	font-size:17px;
	/*top: 50%; /* poussé de la moitié de hauteur du cadre */
	/*transform: translateY(-50%;); /* positionné à la moitié de sa propre hauteur */

	
	/*justify-content:center;
	text-align:center;*/
}
	
	.miniature_apropos {
	width:1280px;
	height: 550px;
	display:flex;
	}
	
	.image_apropos{
	height: 550px;	
	/*position:relative;*/
	overflow: hidden;
	}
	
	
.image_apropos img{ /* propriete de l'image "enfermee" dans le div aux bonnes dimensions sans depasser (s'accordent avec overflow & position) */
	width:1280px;
	height:550px;
	object-fit: cover;
	max-width: 100%;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	/* couleurs */ 
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	}
	
.image_apropos:hover img{ 
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	/* couleurs */ 
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	}	
	
.credit {
	font-size:12px; 
	color: #3a3a3a;
	font-family: 'Hind', 	sans-serif; 
	display: block;
	text-align: center;
	padding-bottom:15px;
}
	
	.columns {
  -webkit-columns: 4;
  -moz-columns: 4;
  columns: 4;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
  padding-top:20px;
  	font-family: 'Catamaran', sans-serif;
	font-weight:100;
	font-size:19px;	
}

.columns hr {
	border-top: 2px solid #3a3a3a;
}

	.page_info{
	width: 1280px;
	height:auto;
	/*background-color:yellow;*/
	margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
	font-family: 'Catamaran', sans-serif;
	font-size:17px;
	margin-top:17px;
}
	

/* les trois colonnes*/
.page_formules{
	width: 1280px;
	height:auto;
	position:sticky;
	margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
	padding-bottom:60px;
	padding-top:60px;
	margin-top:17px;
	font-family: 'Catamaran', sans-serif;
	color: #231f20;
	/*font-size:17px;	
	  /*display: flex;*/
}

div.colonne1 {
	position:relative;
	float: left;
	width: 400px;
	order: 1;
}

div.colonne3 {
	position:relative;
	float: right;
	width: 400px;
	order: 3;
}

div.colonne2 {
	position:relative;
	overflow: hidden;
	width: 400px;
	text-align: center;
	margin-left: 440px;
	order: 2;
}

	.colonne2 img{ 
	width:400px;
	}
	
/* ------------- TEMOIGNAGE */

div#temoignage_index {
	width: 100%;
/*-image: url("ambassadeurs/fond_ambassadeur.jpg");
  background-position: center; /* Center the image 
  background-repeat: no-repeat; /* Do not repeat the image
  background-size: contain; /*cover pour les dessins */
  	margin-top:17px;
background-color:grey;
height:400px;
margin:auto;
display: table;
}

/* ---------------------------------------------------------------------------------------------------------------
------------------------ RESPONSIVE 1750 ------------------------------------------------------------------------ */

@media screen and (max-width: 1750px) 
{
/* --INDEX */
.special-section {height:600px;}
.special-section .left { width: 200px;   min-width: 150px;  padding-left: 280px;}
.special-section .right {  width: 770px; /*  margin-right:40px;*/}
.image-container .image-box {  width: 250px;  height: 200px;}
}

/* ---------------------------------------------------------------------------------------------------------------
------------------------ RESPONSIVE 1300 ------------------------------------------------------------------------ */

@media screen and (max-width: 1300px) 
{
	
#navigation { width: 800px; }
	
.categorie_apropos{ width: 800px; }	
	
.miniature_apropos { width:800px; }
	
.page_info{ width: 800px; }
	
.page_formules{ width: 800px; height:auto; }

.formule_special_responsive {display:flex; flex-wrap:wrap;}

div.colonne1 { float: none;  width: 800px; flex: 1;  }
div.colonne3 { float: none; width: 800px;  }
div.colonne2 { float:none; width: 400px; height:600px; /*padding-top:20px;*/ margin-left: 50px; }
.colonne2 img{ width:100%; height:100%x; }
	
.index_presentation_conteneur {width: 800px; height:auto; display: block;}	
.index_presentation{ float:none; width:800px; margin:none; padding-bottom:30px;}
.image_index_apropos{ float:none;  width:700px; height:700px;	margin-left: auto;  margin-right: auto;}
.image_index_apropos img{ width:700px; height:700px;}

/* */
.index_bandeaunoir { height:1500px; padding-top:none; padding-bottom:none; }	
.index_bandeaunoir_conteneur {width:800px; height:auto; display: block; padding-top:20px; padding-bottom:20px; }	
.index_bandeaunoir_colonne1{ float:none; width:800px;	margin-right: 0px; padding-bottom:50px;}
.index_bandeaunoir_colonne2 {float:none; width:800px; 	margin-left: 0px; padding-bottom:50px;}
.index_bandeaunoir_centre { width:800px; padding-bottom:50px; }
/* */
	
.index_services_conteneur {width:800px; height:auto; display: block; padding-top:40px; }	
.index_services_image {float:none; width:800px; height:400px;}
.index_services_image img {width:800px; height:400px;}
.index_services_texte {float:none; width:800px; padding-left: 0px; padding-top:20px; }
.service_gauche {float:none; width:800px; height: auto; padding-right:0px; margin-bottom:20px;}
.service_droite {float:none; width:800px; height: auto; margin-bottom:40px; }

.index_services_colonne1{ float:none; width:800px;	margin-right: 0px; padding-bottom:50px;}
.index_services_colonne2 {float:none; width:800px; 	margin-left: 0px; padding-bottom:50px;}
.index_services_centre { /*overflow: hidden;*/ width:800px; padding-bottom:50px; }


/* --INDEX */
.special-section {height:450px;}
.special-section .left { width: 200px;   min-width: 150px;  padding-left: 100px;}
.special-section .right {  width: 680px; /*  margin-right:40px;*/}
.image-container .image-box {  width: 200px;  height: 200px;}
}

/* ---------------------------------------------------------------------------------------------------------------
------------------------ RESPONSIVE 900 ------------------------------------------------------------------------ */

@media screen and (max-width: 900px) 
{

#navigation { width: 510px; }

.index_bandeaunoir p { width: 510px;}

.categorie_apropos{	width: 510px; height:auto; }	

.miniature_apropos { width:510px; }

.page_formules{ width: 510px; }

div.colonne1 { width: 510px; }

div.colonne3 { width: 510px; }

div.colonne2 {margin-bottom:20px; margin-left: 0px; }

.apropos_textedroite { 	width:510px; padding:0px; position:relative; padding-bottom:20px;}

.miniature_apropos { width:510px; height: 250px; }

.image_apropos{ height: 250px; }

.image_apropos img{ width:510px; height:250px;	}

.columns {  -webkit-columns: 2;   -moz-columns: 2;  columns: 2; }

.page_info{	width: 510px; }

.index_presentation_conteneur {width: 510px;}	
.index_presentation{ width:510px;}
.image_index_apropos{ width:510px;}
.image_index_apropos img{ width:510px;}


/* */
.index_bandeaunoir {height:1585px;}
.index_bandeaunoir_conteneur {width:510px; padding-top:0px; padding-bottom:0px;}
.index_bandeaunoir_colonne1{  width:510px;}
.index_bandeaunoir_colonne2 {width:510px; }
.index_bandeaunoir_centre { width:510px;  }
/* */

.index_services_conteneur {width:510px; }	
.index_services_image {width:510px; height:400px;}
.index_services_image img {width:510px; height:400px;}
.index_services_texte {width:510px; }
.service_gauche {width:510px; }
.service_droite {width:510px; }

.index_services_colonne1{  width:510px;}
.index_services_colonne2 {width:510px; }
.index_services_centre { width:510px;  }

	/* --INDEX */
.special-section {height:450px;}
.special-section .left { width: 200px;   min-width: 150px;  padding-left: 50px;}
.special-section .right {  width: 350px; /*  margin-right:40px;*/}
.image-container .image-box {  width: 100px;  height: 200px;}
}


/* ---------------------------------------------------------------------------------------------------------------
------------------------ RESPONSIVE 750 ------------------------------------------------------------------------ */

@media screen and (max-width: 750px) 
{

#navigation { width: 340px; }

.index_bandeaunoir p { width: 340px; }

.categorie_apropos{ width: 340px; }	
	
.miniature_apropos { width:340px; }

.page_formules{ width: 340px; }

div.colonne1 { width: 340px; }

div.colonne3 { width: 340px; }

div.colonne2 { width: 340px; height:500px; padding-top:20px; margin-left: 0px; order: 2; }
	
.apropos_textedroite { width:340px; }

.columns {  -webkit-columns: 1;  -moz-columns: 1;  columns: 1; }
	
.page_info{ width: 340px; }

.index_presentation_conteneur {width: 340px;}	
.index_presentation{ width:340px;}
.image_index_apropos{ width:340px; height:500px;}
.image_index_apropos img{ width:340px; height:500px;}



/* */
.index_bandeaunoir {height:1840px;}
.index_bandeaunoir_conteneur {width:340px;}
.index_bandeaunoir_colonne1{  width:340px;}
.index_bandeaunoir_colonne2 {width:340px; }
.index_bandeaunoir_centre { width:340px;  }
/* */


	
.index_services_conteneur {width:340px; }	
.index_services_image {width:340px; height:400px;}
.index_services_image img {width:340px; height:400px;}
.index_services_texte {width:340px; }
.service_gauche {width:340px; }
.service_droite {width:340px; }

.index_services_colonne1{  width:340px;}
.index_services_colonne2 {width:340px; }
.index_services_centre { width:340px;  }

	/* --INDEX */
/*.special-section .left { width: 200px;   min-width: 150px;  padding-left: 50px;}*/
.special-section .right {  width: 350px; /*  margin-right:40px;*/}
.image-container .image-box {  width: 70px;  height: 200px;}
}

.nom_projet_droite {	/*font-weight:900;*/ font-size:40px;	}


	
}