body {
margin: 0;
    padding: 0;
    scroll-behavior: smooth;
} 
section {
    #scroll-margin-top: 20vh;
    min-height: 45vh;
}

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



/* 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:55vh;   /* 75vh */
	max-height:60vh; /* 100vh*/
	overflow: hidden;
	 /*object-fit: contain;*/ /*cover*/
#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:blur(1px);
  #border:1px solid red;
}

/* l'animation de du texte sur la video de la section 1 */
.video_container > .text_onvideo {
  position:relative;
  #left : 2%;
  color: white;
  font-weight: 900;
  font-size: 250%;
  font-family: sans-serif;
  #line-height:130%;
  user-select: none;
   #border:1px solid white;
  animation: scroll-right 1s ease-out forwards;
}

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

div.scrolling{
  display: none;
  #display: flex;/* Important to give the content a width */
   flex-direction:column;
   gap: 0;
   height: auto;
   #color : #F5F5DC;
   color:#2a9df4;
   position: absolute;
   left:60%;
  transform: translateY(100%);/* Animation start out of the screen */
   animation: move 40s linear 0s infinite /* infinite make reapeat the animation indefinitely */;
   animation-fill-mode: backwards;
   text-transform: uppercase;
   font-size: 150%;
   font-weight: 900;
  font-family: sans-serif;
  user-select: none;
  #border:1px solid green;
   }




/* Section 2 specific styles */
#section2 {padding: 0; 2%; 0; 2%;}

#section2 .rectangle-container {  
    color:#CAD5E2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* avant:flex-wrap*/
    align-items : start;
    width: 100%;
    #max-width: 1200px;
    margin: 2% 0;
	}

#section2 .rectangle { 
    background-color: #03254c;
    border-radius: 8px;
    margin:0 1%;
    width: 22%;
    max-width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    flex-grow: 1;
    min-height: 200px;
    height: auto;
	}

#section2 {
    padding:3%;
    margin:0% 0% 0% 0%; 
    }

#section2 .rectangle {
    width: 100%;
    margin: 2% 0 2% 0;
    min-height: auto;
    }


#section3 {
overflow-x: hidden;
 scrollbar-color: white white;}

#section6 {
    #display : flex;  
    width: 100%;
    padding : 3% 0 0 8%;
    margin: 0; 
    background-color: #0f1941;
    height: auto; 
}

.address-container1{ /* desktop */
  #font-family: Calibri, sans-serif;
	font-size: 110%;
	color:white;
	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;
	}


/* #section6 img {
    filter: brightness(0) invert(1);
}*/
#section6 > div {
    width: 50%;
    #min-height: 100vh;
}
#section4, #section5 {
    display: flex;
    width: 100%;
    padding: 0;
}
.section4-left, .section5-left {
    width: 50%;
    background-color: #03254c;
    padding: 0;
    margin: 0;
	
}
.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;
}




.photobanner {
	display: flex;
  flex-flow: row nowrap;
	#white-space: nowrap;
	height: 5vh;
	#width: 3100px;
	border: 0px solid;
  #overflow: hidden;
}

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

/*keyframe animations*/
.first { animation: bannermove 40s linear infinite;}
 
@keyframes bannermove {
 0% {margin-left:100vw;}
 100% {margin-left: -3500px;}
 }  

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

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


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

	 div.scrolling {
	display: none; /* faire disparaitre le scrolling vertical*/
	  }
	  
	  .video_container > .text_onvideo {
      font-size:175%;
	  }
	
	
	
	#section4 {
        flex-direction: column-reverse;
    }
    .section4-left,
    .section4-right, .section5-left, .section5-right {
        width: 92%;
		margin:4%; 
		border-radius: 8px;
    }
    .section4-right {
        height: 50vh;
        min-height: 300px;
    }
	
	
    #section5 {
        flex-direction: column;
    }
    .section5-left {
        height: 50vh;
        min-height: 300px;
        order: 1;
       #width: 100%;
    }
    .section5-right {
        height: auto;
        padding: 2rem 0;
        order: 2;
       #width: 100%;
    }
  

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



#section6 {
height: auto;
padding : 4% 0 0 0;} 

  #section6 {  
    flex-direction: column;
    height: auto;
    }
    #section6 > div {
        width: auto;
        height: auto;
    }

    #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% 7%;
	border:0px solid red;
	}


}