body {
margin: 0;
    padding: 0;
    scroll-behavior: smooth;
} 


.header_hpsi {
display:flex;
align-items:center; /* vertical */
justify-content: flex-start; /* horizontal : à gauche */


position:fixed;
top:0;
width: 100%;
height:20vh;
background-color:white;
padding-left:2%;
z-index:250;
box-shadow: 0 0 3px 0 rgb(0 0 0 / 0.1); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */
#border:2px solid yellow;
}

/******************************* a effacer
.div_in_header_hpsi {
#h-full flex items-center justify-between px-8
height: auto;
display:flex;
align-items:center; 
justify-content: flex-start;
padding:0 2px;
border:2px solid red;
} *****************************/
 


/* la div de la section 1 qui engloble la video et les texte en sliding dessus */
.video_container {
 display:flex;
 position:relative;
 justify-content:flex-start;
 align-items : center;
  #gap:0;
  padding:0;
  margin:0;
	width:100%;
	height:50%; /* 50% */
	min-height:65vh;   /* 75vh */
	max-height:65vh; /* 100vh*/
	overflow: hidden;
	 /*object-fit: contain;*/ /*cover*/
background-color: #1C3A5E;
#border:1px solid yellow;
}

/* la video de la section 1 en elle meme */
.bg-video {
  position:absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding:0;
  margin:0;
  object-fit: cover;
  z-index: 0;
  filter: sepia(80%) hue-rotate(185deg) saturate(400%) brightness(80%) contrast(110%) opacity(40%) blur(0px);
  #filter: brightness(0.25);
  #border:1px solid red;
}


/* container pour les 4 lignes d'expertises (span) à gauche sur la vidéo */
.nos_expertises_container {
  display: flex;
  #display: none;/* Important to give the content a width */
   flex-direction:column;
   gap: 0;
   height: auto;

   #position: absolute;
   #left:0;
   #top:0px;
   #text-transform: uppercase;
   #font-size: 100%;
   #font-weight: 800;
  #font-family: sans-serif;
  #user-select: none;
  #border:2px solid green;
   }





/*******
.video_container > .text_onvideo {
********/

/* les spanlignes du texte coté gauche sur la video de la section 1 */
.text_onvideo {
  display: flex;
  #display: none;/* Important to give the content a width */
   flex-direction:column;
   gap: 0;	
  position:relative;
  #left : 2%;
  #color: white;
  #opacity:0.8;
 /* color: transparent;*/
  font-weight: 900;
  font-size: 250%;
  font-family: sans-serif;
  #line-height:130%;
  #user-select: text;
   #border:1px solid white;
  #animation: scroll-right 1s ease-out forwards;
  
  background: radial-gradient(circle at center,#E6F4FF, #B8E1FF, #5CBBFF,#2EA8FF,#5CBBFF,#B8E1FF, #E6F4FF );
  #background: linear-gradient(to right,#818cf8,#e0e7ff,#38bdf8,#e879f9,#38bdf8,#e0e7ff,#818cf8);
  #background: radial-gradient(circle at center,#818cf8,#e0e7ff,#38bdf8,#e879f9,#38bdf8,#e0e7ff,#818cf8);
  
  background-clip: text;
  color: transparent;
  background-size: 200% 100%;
  animation: scroll-right 1s ease-out forwards, shimmer 18s ease-out infinite;
}

@keyframes shimmer {
  0%{background-position: 150% 0;}
  100%{background-position: -150% 0;}
}


@keyframes scroll-right {
  from {left: 0;}
  to {left: 6%;}
}






/* Create the animation vertical scrolling text*/

@keyframes move { to {transform: translateY(-500%);}} /* Plus il y a de ligne à faire défiler plus on augmente le chiffre*/
/* mettre le bon chiffre permet de ne pas avoir de latence entre la fin et la reprise de chaque section  scrolling */
div.scrolling{
  display: flex;
  #display: none;/* Important to give the content a width */
   flex-direction:column;
   gap: 0;
   height: auto;
   #color : #F5F5DC;
   #color:#2a9df4;/* bleu */
   color:white;
   position: absolute;
   left:63%;
   top:0px;
   bottom:0px;
   transform: translateY(100%);/* For the animation to start out of the screen */
   animation: move 90s linear 0s infinite; /* VITESSE DE DEFILEMENT  /Remarque : infinite make reapeat the animation indefinitely */
   animation-fill-mode: backwards;
   text-transform: uppercase;
   font-size: 120%;
   font-weight: 500;
  font-family: sans-serif;
  user-select: none;
  #border:1px solid green;
   }

#Mentions_legales {
	#border:1px solid green;
}


#Mentions_legales .text-container {  
    color:#03254c;
    #max-width: 1200px;
	padding: 0 2% 2% 5%;
	margin:auto;
	}

*/
section {
    #scroll-margin-top: 20vh;
    #min-height: 45vh;
}*/

/* section 1 specific style*/
#section1 {
	padding: 0;
	overflow-y: hidden;
	#background: #03254c;
	#max-height:50vh;
	#height:50%;
	#border:4px solid green;
}


/* Section 2 specific styles */
#section2 {
	#padding: 0 2% 0 2%;
	#border:1px solid green;
	background-color: #FFFFFF;
	}

img.icon_offre {
	#width:11%;
	height:11%;
}

.rectangle-container {  
    display: flex;
	flex-direction:row;
    flex-wrap: wrap;
    justify-content: space-evenly; 
    #align-items : center;
	#align-items : stretch;
    width: 100%;
    #max-width: 100%;
    margin: 0%;
	#border:1px solid orange;
	font-size: 100%;
	font-weight: 900;
	}

#rectangle1, #rectangle2, #rectangle3, #rectangle4, #rectangle5 { 
    color:#CAD5E2;
	opacity:0.9; /* equivalent background-color: #1C3A5E */
    background-color: #03254c;

	#background-image: url("file:///C:/Users/David/Documents/Garbage%20collector/----====%20[%20IA%20]%20===----/WEBSITE/css/video/diam5_144.png");
	#background-repeat: repeat;
	#background-position: right;
	
	

	
    border-radius: 12px;
    display: flex;
	flex-direction:column;
    justify-content: stretch;
    align-items : center;
	#width: 22%;
    #min-height: 200px;			
    #margin: 1%;
    width: 31.5%;
    padding: 5% 1% 0 1%;
    height: auto;
	#border:2px solid green;
	}
	
#rectangle1 {
    background: linear-gradient(225deg, #03254c, #0862c9, #2F7CD4, #0862c9, #03254c);
    background-size: 1000% 1000%;
	animation: gradient-rectangle1 25s ease infinite;
}

#rectangle2 {
	#background-image: url("file:///C:/Users/David/Documents/Garbage%20collector/----====%20[%20IA%20]%20===----/WEBSITE/css/video/lion_118x100.png");
	#background-repeat: no-repeat;
	#background-position: 50% 100%;
	
	background: linear-gradient(270deg, #03254c, #0862c9, #2F7CD4, #0862c9, #03254c);
    background-size: 1000% 1000%;
	animation: gradient-rectangle2 27s ease infinite;
}

#rectangle3 {
    background: linear-gradient(315deg, #03254c, #0862c9, #2F7CD4, #0862c9, #03254c);
    background-size: 1000% 1000%;
	animation: gradient-rectangle3 29s ease infinite;
}

#rectangle4 {
    background: linear-gradient(45deg, #03254c, #0862c9, #2F7CD4, #0862c9, #03254c);
    background-size: 1000% 1000%;
	animation: gradient-rectangle4 33s ease infinite;
}

#rectangle5 {
    background: linear-gradient(0deg, #03254c, #0862c9, #2F7CD4, #0862c9, #03254c);
    background-size: 1000% 1000%;
	animation: gradient-rectangle5 31s ease infinite;
}



@keyframes gradient-rectangle1 {
	0% {background-position: 100% 0%;}
	50% {background-position: 0% 100%;}
	100% {background-position: 100% 0%;}
}

@keyframes gradient-rectangle2 {
	0% {background-position: 0% 50%;}
	50% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}



@keyframes gradient-rectangle3 {
	0% {background-position: 0% 0%;}
	50% {background-position: 100% 100%;}
	100% {background-position: 0% 0%;}
}

@keyframes gradient-rectangle4 {
	0% {background-position: 100% 0%;}
	50% {background-position: 0% 100%;}
	100% {background-position: 100% 0%;}
}

@keyframes gradient-rectangle5 {
	0% {background-position: 0% 0%;}
	50% {background-position: 100% 100%;}
	100% {background-position: 0% 0%;}
}

#rectangle1, #rectangle2, #rectangle3 {
    margin : 1% 0.5% 1% 0.5%;
}

#rectangle4, #rectangle5 {
    width: 48%;
	margin: 0.5% 0.5% 1% 0.5%;
}
/* centrage du texte dans le carré de l'offre */
#section2 .description_offre_container {
	#padding-left:5%;
	padding-top:3%;
	#border:2px solid orange;
}

/* ça marche pas??? */
/* 
img.description_offre_ligne {
vertical-align:-150%;
}
*/

/* ligne de chaque offre */
.description_offre_ligne { 
	display:flex;
	flex-direction:row;
	flex-wrap: nowrap;
	#border:2px solid yellow;
	#width:auto;
	}

 /*image devant les lignes de l'offre */
.description_offre_ligne img{
	display:inline;
	#float:left;
	width:6%;
	height:6%;
	margin-right:2%;
}
 /*image devant les lignes de l'offre */
#rectangle4 .description_offre_ligne img, #rectangle5 .description_offre_ligne img {
	width:3.5%;
	height:3.5%;
}



#section3 {
overflow-x: hidden;
 scrollbr-color: white white;
 background-color: #F2F2F2;
 height:12vh;
 width: 100%;
 padding:0;
 margin:0 0 1% 0;
 #border:2px solid blue;
 }
 
#section3 img{
height:12vh;
margin: 0 1%;
}	
 
.photobanner {
	display: flex;
  flex-flow: row nowrap;
	#white-space: nowrap;
	#height: 5vh;
	#width: 3100px;
	#border: 0px solid;
  #overflow: hidden;
} 
 
/*keyframe animations*/
.first { animation: bannermove 70s linear infinite;}
 
@keyframes bannermove {
 0% {margin-left:100vw;}
 100% {margin-left: -3500px;}
 }  

 
#section4, #section5 {
    display: flex;
    width: 100%;
    padding: 0;
}
.section4-left, .section5-right {
    width: 50%;
    padding: 0;
    margin: 0;
}
.section4-left{
background-color: #03254c;
	opacity:0.9; /* equivalent background-color: #1C3A5E */
}
.section5-right {
background-color: #F7F5F0;
}

.section5-right img {/* couleur bleu des logos clients */
filter: brightness(0) saturate(100%) invert(62%) sepia(59%) saturate(4477%) hue-rotate(196deg) brightness(108%) contrast(106%);
}



.section4-right, .section5-left { /* la partie image*/
    width: 50%;
    padding: 0;
    margin: 0;
    min-height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

 
 
 
 
 

#section6 {
    #display : flex;  
    width: 100%;
    padding : 3% 0 2% 8%;
    margin: 0; 
	background-color: #0f1941;
	opacity:0.9; /* equivalent background-color: #1C3A5E */
    height: auto;
	
	#background-image: url("file:///C:/Users/David/Documents/Garbage%20collector/----====%20[%20IA%20]%20===----/WEBSITE/css/video/lion_75_netb.png");
	#background-repeat: no-repeat;
	#background-position: 90% 50%;
	
	
	#user-select: all;
	#border:3px solid yellow;
}

.address-container1{ /* desktop */
  #font-family: Calibri, sans-serif;
	font-size: 110%;
	#color:white;
	color: #CAD5E2;
	display: flex;
  #flex-wrap: wrap;
  	gap:1%;
    justify-content:flex-start;
    #align-items:center;
    width: 50%;
    height:auto;
    #max-width: 1200px;
    margin: 1% 20% 1% 30%;
	border:0px solid blue;
	user-select: all;
	#border:3px solid red;
	}


#section6 img {
	user-select: all;
}
#section6 div {
    width: 50%;
    #min-height: 100vh;
	#border:1px solid yellow;
	user-select: all;
}

#section7 {
opacity:0.9; /* equivalent background-color: #1C3A5E */

padding : 2% 1% 4% 1%;

}


/*
img {display: inline-block;
	margin : 0 2px;
	height:auto;
	#max-width: none;
	}
*/


/* Responsive adjustments **********************************************************************************/
/**********************************************************************************************************/
@media (max-width:768px) {

   /*  .menu__item {font-size: 40%;}
    .menu__box {width: 60%;}
	
	*/


@keyframes move { to {transform: translateY(-500%);}}



.video_container {
 	height:35%; /* 50% */
	min-height:40vh;   /* 75vh */
	max-height:40vh; /* 100vh*/
	overflow: hidden;
    margin:2%; 
	border-radius: 8px;
	#border:3px solid orange;
	}

 div.scrolling {
	#display: none; /* activer pour faire disparaitre le scrolling vertical */
	  left:60%;
	  font-size: 90%;
	  font-weight: 900;
	  }



/* les span avec les expertises sur le coté gauche de la video */   
.text_onvideo{
font-size: 160%;
font-weight: 700;
#font-family: sans-serif;
	  line-height: 2;
}

#ordo {
font-size: 145%;
font-weight: 700;
#font-family: sans-serif;
line-height: 2;
}
	
	
#Mentions_legales {
    padding:1%;
    }	


#section0 {
		border:0;
}

#section1 {
	#height: auto;
    margin:2% 2% 1% 2%;
    width: 96%;
	border-radius:8px;
}


#section2 {
    margin-bottom:1%;
	}

#section2 .rectangle {
   width: 96%;
    #margin: 2%;
    #height: auto;
    }

#section2 .description_offre_container {
	padding-left:1%;
}

.description_offre_ligne img{
	display:inline;
	#float:left;
	width:3%;
	height:3%;
	margin-right:2%;
}
	
#section3 {
 margin:0 0 1% 0;
 #border:2px solid violet;
 height:8vh;
 }

 
#section3 img{
height:8vh;
margin: 0 1%;
}	






	
	#section4 {
        flex-direction: column-reverse;
    }
	
    .section4-left, .section4-right, .section5-left, .section5-right {
        width: 96%;
		margin:1% 2%; 
		border-radius: 8px 8px 8px 8px;
         #border:3px solid blue;
	}
    .section4-right, .section5-left {
        height: 50vh;
		padding:0%;
		#border:3px solid blue;
    }

	
	
    #section5 {
        flex-direction: column;
    }
	
	/*
    .section5-left {
       #order: 1;
    }
    */
	
	
	.section5-right {
       # height: auto;
       padding: 1% 0; /*important pour pouvoir avoir les bords bas ronds malgre le tableau */ 
       # order: 2;
       #width: 100%;
	   border:1px solid darkgrey;
	   border-radius:8px;
	}
     
	.section5-right table{ /* juste pour du test */
	#border:3px solid yellow;
	#border-radius:8px;
	}

    header {height: 15vh;}
    main {padding-top: 15vh;}
/* section {scroll-margin-top: 15vh;} */


	#section6 {
	height: auto;
	flex-direction: column;
    margin:0 2% 0 2%;
    padding:5% 0 0 0;
	width: 96%;
	border-radius:8px 8px 0 0;
	}

   #section6 > div {
        width: auto;
        height: auto;
    }


	
	#section7 {
	height: auto;
    margin:0 2% 2% 2%;
    width: 96%;
	border-radius: 0 0 8px 8px;
	}
	
	

  


    #logowhite {
  position:relative;
  left: 80vw; 
}

/* img #logowhite {width:auto;}  */


.address-container1{ /* rubrique adresse de la section 6 */
  font-size: 110%;
	  width: 92%;
   margin: 1% 1% 1% 11%;
	border:0px solid red;
	}


}

/*******************************************************************************************************
ANCIENS PORTABLES
********************************************************************************************************/
@media (max-width:360px) {
/* Styles pour cette Media Queries */

@keyframes move { to {transform: translateY(-500%);}}

.text_onvideo{
font-size: 120%;
font-weight: 600;
#font-family: sans-serif;
line-height: 2;
}

#ordo {
font-size: 120%;
font-weight: 600;
#font-family: sans-serif;
line-height: 2;
}

div.scrolling {
	#display: none; /* activer pour faire disparaitre le scrolling vertical */
	  left:60%;
	  font-size: 70%;
	  font-weight: 500;
	  }


}