body {
margin: 0;
padding: 0;
scroll-behavior: smooth;
} 
main {padding-top: 3vw;}



/* 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:2px solid green;
}

/* 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;
  #disable user interactions
}

/* IN OPERA BROWSER disable user interactions with the video */
html > div {display: none !important;}

/* container pour les 4(ou5) 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;
   align-items:flex-start;
   justify-content:flex-start;
   align-content:center;
   #gap: 0;
   width:97%;
   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;
   }





/* les span-lignes 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: 230%;
  font-family: sans-serif;
  line-height: 100%;
  margin: 1.25% 0;
  #line-height:130%;
  #user-select: text;
  #border:1px solid white;
  animation: scroll-right 1s ease-out forwards;
  #color:#5CABFF;
  color:#8AD2FF;
  opacity:1;
  text-shadow: 0 0 10px rgba(42,157,244,0.5), 0 0 20px rgba(42,123,244,1);
  
  /* animation sur le text bleu et blanc */
  ###background: radial-gradient(circle at center,#5CB8FF, #B8E1FF, #5CBBFF,#2EA8FF,#5CBBFF,#B8E1FF, #5CB8FF );
  ###background-clip: text;
  ###color: transparent;
  ###background-size: 200% 100%;
  ###animation: scroll-right 1s ease-out forwards, shimmer 10s ease-out infinite;
}

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


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






/* Create the animation vertical scrolling text*/
/* @keyframes move { to {transform: translateY(-420%);}} */
@keyframes move { to {transform: translateY(-140vh);}}
/* 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;
   #text-shadow: rgba(42,157,244,0.8) 0px 0px 5px;
   text-shadow: 0 0 5px rgba(42,157,244,0.5), 0 0 15px rgba(42,123,244,1);
   position: absolute;
   #left:63%;
   left:71%;
   top:0px;
   bottom:0px;
   transform: translateY(100%);/* For the animation to start out of the screen */
   animation: move 20s linear 0s infinite; /* VITESSE DE DEFILEMENT  /Remarque : infinite make reapeat the animation indefinitely */
   animation-fill-mode: backwards;
   text-transform: uppercase;
   font-size: 90%;
   font-weight: 700;
  #font-family: sans-serif;
  font-family:"Bitcount Single";
  user-select: none;
  #border:1px solid green;
   }


##### @keyframes move_x_responsive { to {transform: translateX(-5%);}}   
/* le défilement horizontal de texte lorsqu'on est en mode mobile */
div.scrolling_responsive{   
 display: none;
  #display: none;/* Important to give the content a width */
   flex-direction:row;
   flex-wrap: nowrap;
   align-items:center;
   justify-content:center;
   #gap:2%;
   padding:0;
   height:3.5vh;
   #color : #F5F5DC;
   #color:#2a9df4;/* bleu */
   #color:white;
   text-shadow: 0 0 5px rgba(42,157,244,0.5), 0 0 15px rgba(42,123,244,1);
   position: absolute;
   right:0px;
   #top:90%;
   bottom:0px;
   transform: translateX(95%);/* For the animation to start out of the screen */
   animation: move_x_responsive 300s linear 0s infinite; /* VITESSE DE DEFILEMENT  /Remarque : infinite make reapeat the animation indefinitely */
   animation-fill-mode: backwards;
   text-transform: uppercase;
   font-size: 92%;
   font-weight: 600;
  #font-family: sans-serif;
  font-family:"Bitcount Single";
  user-select: none;
  #background: rgba(03, 121, 211, 0.5);
  border:1px solid #5CABFF;
  #border-right-color:transparent;
  #border-left-color:transparent;
  border-radius: 12px;
}

div.scrolling_responsive span{
#border:1px solid violet;
margin: 0 2vw;
white-space: nowrap;
}

.neon1_anim{animation: ScreenEffect 1.5s ease infinite;}
@keyframes ScreenEffect {
  0% { opacity: 0.7 }
  50% { opacity: 1 }
  100% { opacity: 0.7 }
}

/*****************************************

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


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

**********************************************/


.section0 {
/* la barre de navigation reste fixe */	
position:fixed;
display:flex;
flex-direction:row;
align-items:center; /* cadeau merci mon D */
justify-content:flex-start;
align-content:flex-start;
flex-wrap:wrap;
padding:0;
#right:10;
height:3vw;
###width: 100%;
width:auto;
#height:18%;
#max-height:15vh;
background-color:white;
####padding-left:1em;
z-index:10;
#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 red;
}



/* non utilisé barre au dessus à width=100%*/
/*******************************************
.separateur_dans_header_0 { 
width:10vw;
flex-grow: 10;
height:4vh;
#width:100%;
#border:2px solid red;
}  
***********************************************/

.separateur_dans_header_1 { 
width:1vw;
flex-grow: 1;
#width:3vh;
#height:18vh;
height:2vw;
border:2px solid transparent;
pointer-events:none;
}

.separateur_dans_header_2 { 
width:20vw;
flex-grow:20;
#height:18vh;
height:2vw;
border:2px solid transparent;
}

/* non utilisé */
/**************************************
.separateur_dans_header_3 { 
width:5vw;
flex-grow:5;
height:18vh;
border:2px solid orange;
}
***************************************/

.separateur_dans_header_4 { 
width:1vw;
flex-grow: 1;
#height:18vh;
height:2vw;
border:2px solid transparent;
pointer-events:none;
}

/* non utilisé barre en dessous à w=100%*/
/*****************************************
.separateur_dans_header_5 { 
width:10vw;
#max-width:100%;
flex-grow: 10;
height:4vh;
#border:2px solid violet;
}
****************************/



.lion_logo {
display:flex;
flex-basis:2vw;
#####height:1.5vw;
##height:3em;     
#height:11vh; /* trop porportionnel */
width:auto;
#vertical-align:center;
align-item:baseline;
margin:0;
####margin-right:-5px;
#border:2px solid lime;
z-index:905; /* pour etre au dessus du calque de fermeture du menu */ 
}

.hpsi_letters {
#flex-basis:10%;
font-family: 'Calibri Light', sans-serif; 
#font-size: 4.2em;
#font-size: 4.6em;
####font-size: 1.5vw;  
color: #187bcd; 
#font-weight:300; 
letter-spacing:-0.1em; 
#text-indent:-5px;
#margin:0 0 0 0.5vw;
padding:0;
###line-height:6vw;
####height:6vw;
#border:2px solid violet;
}


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


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

/* l'icone en haut de chaque offre */
img.icon_offre {
	#width:11%;
	#height:8vh;
	#width:auto;
	filter: brightness(0) saturate(100%) invert(62%) sepia(59%) saturate(4477%) hue-rotate(196deg) brightness(108%) contrast(106%);	
}

.titre_rubrique_offre {
color:#51A2FF;
font-family: sans-serif;
font-weight:700;
font-size:110%;
margin-top:1%;
text-shadow: 0 0 5px rgba(42,157,244,0.5), 0 0 15px rgba(42,123,244,1);
animation: neon_titre_effect 100ms linear infinite;
#border:1px solid orange;
}

@keyframes neon_titre_effect {
   0% { opacity: 1 }
  25% { opacity: 1 }
  50% { opacity: 0.9 }
  75% { opacity: 1 }
  100% { opacity: 1 }
}



.rectangle-container {  
    display: flex;
	flex-direction:row;
    flex-wrap: wrap;
    justify-content:center;

	
    #align-items : center;
	#align-items : stretch;
    width: 100%;
    max-width: 100%;
    margin: 0%;
	font-size: 110%;
	font-weight: 900;
	#line-height:150%;
	#border:3px solid orange;
		
	}

#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;
	
    display: flex;
	/* ici l'horizontal et le vertical sont inversés */
	flex-direction:column;
    justify-content: flex-start;
    align-items : center;

	#width: 22%;
    #min-height: 200px;			
    #margin: 1%;
    ###width: 31.5%;
    padding:2% 1% 1% 1%;
    height: auto;
    #border-radius: 12px;
	border-radius: 18px;
	border:2px solid #51A2FF;

}
	
#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 15s ease infinite;
}

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

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

#rectangle5 {
    background: linear-gradient(0deg, #03254c, #0862c9, #2F7CD4, #0862c9, #03254c);
    background-size: 1000% 1000%;
	animation: gradient-rectangle5 19s 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 {
	width: 29.5%;
    margin : 1% 0.5% 1% 0.5%;
}

#rectangle4, #rectangle5 {
    width: 46%;
	margin: 0.5% 0.5% 1% 0.5%;
}
/* centrage du texte dans le carré de l'offre */

.description_offre_container {
	#padding-left:5%;
	#padding-top:3%;
	#border:2px solid orange;
	#padding:2% 7%;
	#width:94%;
	margin:0;
	
	#border:2px solid lime;
	width:97%;
	max-width:95%;
	min-width:50%;
}




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

	
	hyphenate-limit-chars:7;
	hyphens:auto;
	text-wrap: pretty;
	word-spacing:-1.5px;
	
	align-items:flex-start;
	#border:2px solid #51A2FF;
	margin : 1vw 0;
	#background: rgba(124, 124, 124, 0.2);
	border-radius: 12px;
	}

 /*image devant les lignes de l'offre */
.description_offre_ligne img{
	#display:inline;
	#vertical-align:-25px;
	#float:left;
	height:3.6vh;
	width:auto;
	margin-top:1%;
	margin-right:1%;
	#border:2px solid orange;
	filter: brightness(0) saturate(100%) invert(62%) sepia(59%) saturate(4477%) hue-rotate(196deg) brightness(108%) contrast(106%);
}

.description_offre_ligne .puce1{
color:#51A2FF;
#color:lime;
font-size: 110%;
#text-indent:-3vh;
margin-right:0.4vw;
line-height:100%;
}

/****************************************
#description_offre_container4{
	text-align:center;
	border:2px solid yellow;
	width:100%;
	min-width:5%;
}
********************************************/
/* la section des logos des technologies et editeurs*/
#section3 {
overflow-x: hidden;
 scrollbr-color: white white;
 background-color: #F2F2F2;
 height:13vw;
 width: 100%;
 padding:0;
 margin:0 0 0 0;
 #border:2px solid blue;
 }
/* les logos des technologies et editeurs*/ 
#section3 img{
height:12vw;
/* margin: 0 1%;*/
margin: 0 2vw 0 0;
filter: brightness(0) saturate(40%) invert(20%) sepia(60%) saturate(4477%) hue-rotate(196deg) contrast(106%) brightness(150%);
#filter: brightness(50%) grayscale(50%) saturate(50%) invert(62%) sepia(0) hue-rotate(185deg) contrast(120%);
#filter: brightness(100%) grayscale(60%) saturate(100%) hue-rotate(200deg) contrast(105%);
}	
 
.photobanner {
	display: flex;
  flex-flow: row nowrap;
	#white-space: nowrap;
	#height: 5vh;
	#width: 3100px;
	#border: 0px solid;
  #overflow: hidden;
} 
	
 
/*keyframe animations*/
.first { animation: bannermove 250s linear infinite;}
 
@keyframes bannermove {
 0% {margin-left:100vw;}
 100% {margin-left: -1450vw;}
 }  

 
#section4, #section5 {
    display: flex;
    width: 100%;
    padding: 0;
}


.section4-left{
width: 48%;
#height:auto;	
background-color: #03254c;
/* equivalent background-color: #1C3A5E */
opacity:0.9;
margin: 0;
padding:3% 5%;
#border:2px solid blue;
}

.section4_gros_titre {
color: #51A2FF; 
font-size: 200%; 
text-align: center; 
margin: 0 5%;
#padding-top:2%;
text-shadow: 0 0 5px rgba(42,157,244,0.5), 0 0 15px rgba(42,123,244,1);
animation: neon_section4_sous_titre 100ms linear infinite;
margin-bottom:4vw; /* separation entre le titre et les chapitres en dessous*/
}

.section4_sous_titre {
color:#51A2FF;
font-family: sans-serif;
font-size:115%;
font-weight:600;
#text-shadow: 0 0 5px rgba(42,157,244,0.5), 0 0 15px rgba(42,123,244,1);
#animation: neon_section4_sous_titre 100ms linear infinite;
#border:2px solid lime;
}

@keyframes neon_section4_sous_titre {
   0% { opacity: 1 }
  25% { opacity: 1 }
  50% { opacity: 0.9 }
  75% { opacity: 1 }
  100% { opacity: 1 }
}


.section4_texte_normal {
color: #CAD5E2; 
font-size: 110%; 
#text-align: start;
font-weight:900; 
#margin: 2% 5%;	

/* texte justifié et "plein" */
#text-align:justify;
#text-justify:inter-word;
hyphenate-limit-chars:5;
hyphens:auto;
text-wrap: pretty;
#word-spacing:-2px;

}

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

/* la partie image*/
.section5-left {
    width: 51%;
    padding: 0;
    margin: 0;
    #min-height: 100%;
	
	background-image: url('https://www.hpsi.fr/img/multi.jpg'); 
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat
}

.section5_gros_titre {
color: #51A2FF; 
font-size: 200%;
font-weight:600; 
text-align: center; 
margin: 1% 5% 2% 5%;
#border:2px solid violet;
width:100%;
#text-shadow: 0 0 5px rgba(42,157,244,0.5), 0 0 15px rgba(42,123,244,1);
animation: neon_section4_sous_titre 100ms linear infinite;
}

/* la partie logo des clients */
.section5-right {
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
align-content:center;
flex-wrap:wrap;
padding:1% 1% 2% 1%;
width: 49%;
height:auto;
row-gap:6%;
column-gap:6%;
#gap:2%;
background-color: #F7F5F0;
#border:2px solid lime;
}


.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%);
width:24%;
height:auto;
max-height:15%;
#flex-grow:50;

#border:2px solid violet;
}




 
 
 
 
 

#section6 {
    display : flex;  
    flex-direction:row;
	justify-content:center;
	align-items: center;
	align-content:center;
	#width: 100%;
	
    #height: 100%;
	padding: 2% 0;
    #margin: 2%; 
	background-color: #0f1941;
	opacity:0.9; /* equivalent background-color: 1C3A5E */
	#user-select: all;
	#border:0px solid transparent;
	#border:0px;
}


.section6_centered_column {
	display: flex;
	flex-direction:column;
	align-items:stretch;
  	#gap:2%;
    justify-content:center;
	#border:2px solid white;
	#min-width:45vw;
	#width:auto;
}

.address-container1{ /* desktop */
  #font-family: Calibri, sans-serif;
	font-family: sans-serif;
	font-size:110%;
	font-weight:900;
	color: #CAD5E2;
	#flex-wrap: wrap;
    #align-items:center;
	height:auto;
    /*hack 23 03 2026*/
	width:100%;
	min-width:5%;
	margin: 0%;
	padding:0 5px;
	user-select: all;
	#border:1px solid red;
	#vertical-align:-20px; 
	}

#section6 .address-container1 img {
	#user-select: none;
	vertical-align:middle; /* alignement de limage et du texte*/
	height: 8vh;
	width: auto;
	filter: brightness(0) saturate(100%) invert(62%) sepia(59%) saturate(4477%) hue-rotate(196deg) brightness(108%) contrast(106%);
	
	
}



/* bas de la derniere section */
#section7 {
    display : flex;  
    flex-direction:row;
	justify-content:center;
	align-items: center;
	#width: 100%;
    height: 100%;
	padding: 2%;
    margin: 0;
	font-size: 80%;
    color:#CAD5E2;
	background-color: #0f1941;
	opacity:0.9; /* equivalent background-color: 1C3A5E */

	#user-select: all;
	#border:0px solid yellow;
	border:1px solid #0f1941;
}

.section7_centered_div {
	#display: flex;
	#flex-direction:row;
  	#gap:2%;
    #justify-content:flex-start;
	text-align:center;
	#border:2px solid yellow;
	#width: 90%;
	/* hack 23 03 2026**********************************/
	width:100%;
	min-width:5%;
}

#section7 a:link, a:visited, a:focus, a:hover, a:visited {color:white;text-decoration: none;}




/* Responsive adjustments ****************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/***************************************************************************************************/
/* ECRAN PC TRES GRANDES TAILLES : ordinateurs, etc */

@media (min-width: 2561px) {
	
	
main {padding-top:9vw;}
.section0 {height:9vw;}
.separateur_dans_header_1 {height:9vw;}
.separateur_dans_header_2 {height:9vw;}
.separateur_dans_header_4 {height:9vw;}
.lion_logo {height:4vw;width:auto;}
.hpsi_letters {font-size: 6.5vw;line-height:6.5vw;}

.separateur_dans_header_1 { 
width:3vw;
flex-grow: 3;
#width:3vh;
#height:18vh;
border:2px solid transparent;
pointer-events:none;
}

.separateur_dans_header_2 { 
width:57vw;
flex-grow:57;
#height:18vh;
border:2px solid transparent;
}

.separateur_dans_header_4 { 
width:6vw;
flex-grow: 6;
#height:18vh;
border:2px solid transparent;
pointer-events:none;
}


#rectangle1, #rectangle2, #rectangle3, #rectangle4, #rectangle5 {border-radius: 26px;}
.text_onvideo{font-size: 1000%;font-weight: 800;margin: 1.5vh 0;}
@keyframes move { to {transform: translateY(-230vw);}}
div.scrolling{animation: move 120s linear 0s infinite;font-size: 320%;}

.rectangle-container {font-size: 500%;}	
.titre_rubrique_offre {font-size:110%;}
img.icon_offre {width:3.2vw;height:auto;}
#section3 img{height:3vw;}
#section3 {height:3vw; margin:0 0 2vh 0;}
.section4_gros_titre {font-size: 700%;}
.section4_texte_normal {font-size: 500%;font-weight:900;}
.section4_sous_titre {font-size:500%;}
.section5_gros_titre {font-size: 800%;}
.section5-right img {width:10vw;height:auto;} 
.section6_centered_column {min-width:5vw;}
#section6 .address-container1 img{height:4.5vh;width:auto;}
.address-container1{margin: 1.5vh 0;font-size:500%;font-weight:500;}
.section7_centered_div {padding:0 8vw;font-size: 450%;}
}




/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
@media (min-width: 1921px) and (max-width: 2560px) {
/***********************************************************************************************************/
/***********************************************************************************************************/
main {padding-top:8vw;}
.section0 {height:8vw;}
.separateur_dans_header_1 {height:8vw;}
.separateur_dans_header_2 {height:8vw;}
.separateur_dans_header_4 {height:8vw;}
.lion_logo {height:4vw;width:auto;}
.hpsi_letters {font-size: 6.5vw;line-height:6.5vw;}

.separateur_dans_header_1 { 
width:3vw;
flex-grow: 3;
#width:3vh;
#height:18vh;
border:2px solid transparent;
pointer-events:none;
}

.separateur_dans_header_2 { 
width:57vw;
flex-grow:57;
#height:18vh;
border:2px solid transparent;
}

.separateur_dans_header_4 { 
width:6vw;
flex-grow: 6;
#height:18vh;
border:2px solid transparent;
pointer-events:none;
}


#rectangle1, #rectangle2, #rectangle3, #rectangle4, #rectangle5 {border-radius: 26px;}
.text_onvideo{font-size: 800%;font-weight: 800;margin: 1.5vh 0;}

@keyframes move {to {transform: translateY(-230vw);}}
div.scrolling{animation: move 100s linear 0s infinite;font-size: 200%;left:72%;}

.rectangle-container {font-size: 350%;}	
.titre_rubrique_offre {font-size:85%;}
img.icon_offre {width:3.2vw;height:auto;}
#section3 img{height:4vw;}
#section3 {height:4vw; margin:0 0 1vw 0;}
.section4_gros_titre {font-size: 500%;}
.section4_sous_titre {font-size:375%;}
.section4_texte_normal {font-size: 350%;font-weight:600;}
.section5_gros_titre {font-size: 500%;}
.section5-right img {width:10vw;height:auto;} 
.section6_centered_column {min-width:5vw;}
#section6 .address-container1 img{width:3.5vw;height:auto;}
.address-container1{margin: 0.25vw 0;font-size:350%;font-weight:500;}
.section7_centered_div {padding:0 3vw;font-size:300%;}
}




/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
@media (min-width: 1681px) and (max-width: 1920px) {

main {padding-top: 7vw;}
.section0 {height:7vw;}
.separateur_dans_header_1 {height:7vw;}
.separateur_dans_header_2 {height:7vw;}
.separateur_dans_header_4 {height:7vw;}
.lion_logo {height:4.2vw;width:auto;}
.hpsi_letters {font-size: 6.5vw;line-height:6.5vw;}
##.hpsi_letters {font-size: 8.1em;text-indent:-8px;}


.text_onvideo{font-size: 550%;font-weight: 800;margin: 1.vw 0;}
@keyframes move { to {transform: translateY(-230vw);}}
div.scrolling{animation: move 150s linear 0s infinite;font-size: 190%;}

.rectangle-container {font-size: 250%;}	
.titre_rubrique_offre {font-size:110%;}
img.icon_offre {width:3.1vw;height:auto;}
#section3 img{height:5vw;}
#section3 {height:5vw; margin:0 0 1vw 0;}
.section4_gros_titre {font-size: 320%;}
.section4_texte_normal {font-size: 250%;font-weight:900;}
.section4_sous_titre {font-size:250%;}
.section5_gros_titre {font-size: 320%;}
.section5-right img {width:10vw;height:auto;} 
.section6_centered_column {min-width:5vw;}
#section6 .address-container1 img{height:4.5vh;width:auto;}
.address-container1{margin: 1.5vh 0;font-size:250%;font-weight:500;}
.section7_centered_div {padding:0 8vw;font-size: 220%;}
}


/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
@media (min-width: 1025px) and (max-width: 1680px) {

main {padding-top:6vw;}
.section0 {height:6vw;}
.separateur_dans_header_1 {height:6vw;}
.separateur_dans_header_2 {height:6vw;}
.separateur_dans_header_4 {height:6vw;}
.lion_logo {height:4.2vw;width:auto;}
.hpsi_letters {font-size: 6vw;line-height:6vw;}


.video_container {
	#border: 3px solid orange;
	height:35vw; 
	min-height:25vw;   
	max-height:45vw;
	overflow: hidden;
	}
.text_onvideo{font-size: 360%;font-weight:800;margin:1vw 0;}

@keyframes move { to {transform: translateY(-255vw);}}
div.scrolling{animation: move 140s linear 0s infinite;font-size: 130%;}

.rectangle-container {font-size: 190%;}	
.titre_rubrique_offre {font-size:110%;}
img.icon_offre {width:5vw;height:auto;}
#section3 img{height:4vw;width:auto;}
#section3 {height:4vw; margin:0 0 1vw 0;}
.section4_gros_titre {font-size: 320%;}
.section4_texte_normal {font-size: 190%;font-weight:900;}
.section4_sous_titre {font-size:180%;font-weight:600;}
.section5_gros_titre {font-size: 300%;}
.section5-right img {width:10vw;height:auto;} 
.section6_centered_column {min-width:5vw;}
#section6 .address-container1 img{width:3vw;height:auto;}
.address-container1{margin: 0 0 1.2vw 0;font-size:180%;font-weight:200;}
.section7_centered_div {padding:0 8vw;font-size: 220%;}
}

/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
/* PC/TABLETTE DE TAILLE INTERMEDIAIRES ******************************************************************************/
@media (min-width: 769px) and (max-width: 1024px) {

main {padding-top:8vw;}
.section0 {height:8vw;}
.separateur_dans_header_1 {height:8vw;}
.separateur_dans_header_2 {height:8vw;}
.separateur_dans_header_4 {height:8vw;}
.lion_logo {height:4.5vw;width:auto;}
.hpsi_letters {font-size: 7vw;line-height:7vw;}

.video_container {
	#border: 3px solid orange;
	height:40vw; 
	min-height:30vw;   
	max-height:50vw;
	overflow: hidden;
	}	

@keyframes scroll-right {from {left: 0;} to {left: 3vw;}}
.text_onvideo{font-size: 290%;font-weight:800;margin: 1vw 0;}
@keyframes move { to {transform: translateY(-255vw);}}
div.scrolling{animation: move 120s linear 0s infinite;left:70%;}
	
img.icon_offre {width:4vw;height:auto;}
/* .description_offre_ligne img{height:3.5vh;width:auto;#margin-right:2%;}*/
#section3 img{height:4vw;}
#section3 {height:4vw;margin:0 0 1vw 0;}
.section4_sous_titre {font-size:100%;}
.section4_gros_titre {font-size: 200%;}
.section5_gros_titre {font-size:200%;font-weight:500;}
#section6 .address-container1 img{width:3vw;height:auto;}
.address-container1{margin: 0 0 1.2vw 1vh;font-size:110%;font-weight:500;}
.section7_centered_div {font-size: 120%;padding:0 8vw;}
}

/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
/**********************************************************************************************************/
/* TABLETTES 1 */
@media all and (min-width: 481px) and (max-width: 768px) {
	
main {padding-top:8vw;}
.section0 {height:7vw;}
.separateur_dans_header_1 {height:7vw;}
.separateur_dans_header_2 {height:7vw;}
.separateur_dans_header_4 {height:7vw;}

.lion_logo {height:4vw;width:auto;}
.hpsi_letters {font-size:6vw;line-height:6vw;}	

@keyframes scroll-right {from {left: 0;} to {left: 3vw;}}

@keyframes move { to {transform: translateY(-225vw);}}
div.scrolling{animation: move 120s linear 0s infinite;font-size: 70%;}

.video_container {
	#border: 3px solid pink;
	height:40vw; 
	min-height:30vw;   
	max-height:50vw;
	overflow: hidden;
	}	
/* les span avec les expertises sur le coté gauche de la video */   
.text_onvideo{
font-size: 120%;
font-weight: 700;
#font-family: sans-serif;
#line-height: 90%;
#border:3px solid orange;
margin: 1vh 0;
}

 	
img.icon_offre {width:3.8vw;height:auto;}
.text_onvideo{font-size: 250%;font-weight:800;margin: 1vh 0;}	
/* .description_offre_ligne img{height:1.75vh;width:auto;}*/

.rectangle-container {font-size: 100%;}	
#section3 img{height:5vw;}
#section3 {height:5vw;margin:0 0 1vh 0;}
.section4_sous_titre {font-size:100%;}
.section4_gros_titre {font-size: 150%;}
.section5_gros_titre {font-size:130%;font-weight:500;}
#section6 .address-container1 img{width:4vw;height:auto;}
.address-container1{margin: 0 0 1.2vw 0;font-size:110%;font-weight:500;#border:2px solid orange;}
.section7_centered_div {font-size: 120%;padding:0 10vw;}


}

/***********************************************************************************************************/
/***********************************************************************************************************//***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
/**********************************************************************************************************/
/*********************************************************************************************************/
/* M O B I L E S ******************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
/***********************************************************************************************************/
@media (min-width:330px) and (max-width:480px) {

main {padding-top:19vw;}
.section0 {height:18vw;}
.separateur_dans_header_1 {height:18vw;}
.separateur_dans_header_2 {height:18vw;}
.separateur_dans_header_4 {height:18vw;}
.lion_logo {height:14vw;width:auto;}
.hpsi_letters {font-size: 19vw;line-height:19vw;}

.separateur_dans_header_1 { 
width:0.25vw;
flex-grow:0.25;
border:2px solid transparent;
}

/* dans la barre de navigation*/
.separateur_dans_header_2 { 
width:2vw; 
flex-grow:2;
border:2px solid transparent;
}

.separateur_dans_header_4 { 
width: 0.25vw;
flex-grow: 0.25;
border:2px solid transparent;
}


.video_container {
 	height:50vh; 
	min-height:40vh;   
	max-height:40vh;
	overflow: hidden;
    margin:1vw 2vw; 
	#border-radius: 8px;
	border-radius:18px;
	#border:3px solid red;
	}


 div.scrolling {
/* activer pour faire disparaitre le scrolling vertical */
display: none;
	  }

@keyframes move_x_responsive { to {transform: translateX(-2%);}}   
div.scrolling_responsive{   
display:flex;
/* le défilement horizontal de texte lorsqu'on est en mode mobile */
   animation: move_x_responsive 650s linear 0s infinite; 
}

/* les span avec les expertises sur le coté gauche de la video */   
.text_onvideo {
font-size: 180%;
font-weight: 900;
#font-family: sans-serif;
#line-height: 90%;
#border:3px solid orange;
margin: 1vh 0;
opacity:0.9;
}

@keyframes scroll-right {
  from {left: 0;}
  to {left: 10vw;}
}
	
	
#Mentions_legales {
    padding:1%;
    }	





#section0 {
 #border:0;
 #height:16%;
}

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


#section2 {margin-bottom:1vw;}

#section2 .rectangle {
   width: 94%;
    margin: 1vw 2vw;
	#border:2px solid violet;
    #height: auto;
    }

#section2 .description_offre_container {
	#padding-left:1%;
	#border:2px solid violet;
}

.rectangle-container {font-size: 140%;}	

.titre_rubrique_offre {font-size:110%;}

img.icon_offre {width:14vw;height:auto;}

.description_offre_ligne {align-items:flex-start;text-align:justify;hyphenate-limit-chars:5;hyphens:auto;text-wrap:pretty;#word-spacing:-2px;border:0.5px solid #51A2FF;border-style:outset;background: rgba(81, 162, 255, 0.3);padding:0% 2% 0% 0%;}

.description_offre_ligne img{
	height:2.5vh;
	width:auto;
	margin-right:2%;
	#margin-top:8vw;
	#border:2px solid lime;
}

	
#section3 {
 margin: 1.5vw 0;
 #border:2px solid violet;
 background-color: #FFFFFF;
 height:15vw;
 #border-radius:8px;
 }

#section3 img{
height:15vw;
#margin: 0 1vw;
margin: 0 4vw 0 0;
}	

.first { animation: bannermove 250s linear infinite;}
@keyframes bannermove {
 0% {margin-left:100vw;}
 100% {margin-left: -5000vw;}
 }  


#section4 {flex-direction: column-reverse;}
	
.section4-left {
        width: 90%;
		margin:1% 2%; 
		padding:2% 3% 2% 3%;
		border-radius: 18px;
        #border:3px solid red;
		
}

.section4-right {
        width: 90%;
        #border:3px solid blue;
        height: 53vh;
		width: auto;
		margin:1% 2%; 
		border-radius: 18px;
		#border:3px solid blue;
}

.section4_gros_titre {font-size:180%;font-weight:600;}
.section4_sous_titre {font-size:130%;font-weight:900;}
/* texte justifié et "plein" */
.section4_texte_normal {font-size:130%;font-weight:900;#text-align:justify;hyphenate-limit-chars:3;hyphens:auto;text-wrap:pretty;#word-spacing:-2px;}
.section5_gros_titre {font-size:180%;font-weight:600;}

#section5 {flex-direction: column;}

.section5-left {
        width: 93.4%;
		height: 55vh;
		width:auto;
		margin:1% 2%;
		#padding:2%;		
		border-radius: 18px;
        #border:1px solid green;
}

.section5_gros_titre {font-size: 150%}

/* logos clients */
.section5-right {
       width: 96%;
	   margin:1% 2%; 
       padding:0; /*important pour pouvoir avoir les bords bas ronds malgre le tableau */ 
       #border:1px solid green;
       #width: 100%;
	   border-radius:18px;
}
	

/* couleur bleu des logos clients */
.section5-right img {
#width:18%;
width:25vw;
height:auto;
#max-height:12%;
#border:2px solid violet;
}     





#section6 {
	height: auto;
	border-radius:18px 18px 0 0;
	#width:94%;
	#min-width:30%;
	margin:1.5vw 2vw -0.5px 2vw;
	#border-bottom:1px solid #0f1941;

}



.address-container1{
	font-size:95%;
	font-weight:500;
    margin: 1% 0%;
	/*hack 23 03 2026*/
	width:100%;
	min-width:5%;
	#min-width:88vw;
	#padding:0 0 0 1%;
	#border:1px solid lightblue;
	#vertical-align:-20px; 
	}

#section6 .address-container1 img{
	width:4vw;
	height:auto;
}

	
	
	
#section7 {
	height: auto;
	#margin:0 2% 2% 2%;
	#width: 94%;
	#border:1px solid orange;
	border-radius: 0 0 18px 18px;
	margin:0 2vw 2vw 2vw; 
	#margin-bottom:2%;
	#min-width:96%;
 }

}


/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/******************************************************************************************/
/*ANCIENS PORTABLES width:329px*/
/*****************************************************************************************/
/*****************************************************************************************/
/*****************************************************************************************/
/*****************************************************************************************/
@media (max-width:329px){ 
main {padding-top:18vw;}
.section0 {height:17vw;}

.separateur_dans_header_1 { 
width:0.25vw;
flex-grow:0.25;
border:2px solid transparent;
}

/* dans la barre de navigation*/
.separateur_dans_header_2 { 
width:2vw; 
flex-grow:2;
border:2px solid transparent;
}

.separateur_dans_header_4 { 
width: 0.25vw;
flex-grow: 0.25;
border:2px solid transparent;
}

.lion_logo {height:12vw;width:auto;}
.hpsi_letters {font-size: 19vw;line-height:19vw;}

.video_container {
 	height:50vh; 
	min-height:40vh;   
	max-height:40vh;
	overflow: hidden;
    margin:2vw; 
	#border-radius: 18px;
	#border:3px solid red;
	}


 div.scrolling {
/* activer pour faire disparaitre le scrolling vertical */
display: none;
	  }

@keyframes move_x_responsive { to {transform: translateX(-2%);}}   
div.scrolling_responsive{   
display:flex;
/* le défilement horizontal de texte lorsqu'on est en mode mobile */
   animation: move_x_responsive 650s linear 0s infinite; 
}

/* les span avec les expertises sur le coté gauche de la video */   
.text_onvideo {
display: flex;
font-size: 150%;
font-weight: 800;
#font-family: sans-serif;
line-height: 100%;
#border:3px solid orange;
margin: 0.5vh 0;
opacity:0.9;
}


@keyframes scroll-right {
  from {left: 0;}
  to {left: 10vw;}
}
	
	
#Mentions_legales {
    padding:1%;
    }	




#section1 {
	#height: auto;
    #margin:1vh 2vh 1vh 2vh;
    width: 96%;
	border-radius:18px;
	#border:3px solid yellow;
}


#section2 {margin-bottom:1vw;}

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

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

.rectangle-container {font-size: 140%;word-spacing: -3px;}	

.titre_rubrique_offre {
font-size:110%;
}



img.icon_offre {
	width:14vw;
	height:auto;
}

.description_offre_ligne {align-items:flex-start;#text-align:justify;hyphenate-limit-chars:2;hyphens:auto;text-wrap:pretty;#word-spacing:-1px;border:0.5px solid #51A2FF;border-style:outset;background:rgba(81, 162, 255, 0.3);padding:0% 1.5% 0% 0%;}

.description_offre_ligne img{
	height:2.5vh;
	width:auto;
	margin-right:2%;
	#margin-top:8vh;
	#border:2px solid lime;
}

	
#section3 {
 margin: 1.5vw 0;
 #border:2px solid violet;
 height:15vw;
 #border-radius:18px;
 background-color: #FFFFFF;
 }

#section3 img{
height:15vw;
#margin: 0 1%;
margin: 0 4vw 0 0;
}	

.first { animation: bannermove 250s linear infinite;}
@keyframes bannermove {
 0% {margin-left:100vw;}
 100% {margin-left: -5000vw;}
 }  


#section4 {flex-direction: column-reverse;}
	
.section4-left {
        width: 90%;
		margin:1% 2%; 
		padding:2% 3% 2% 3%;
		border-radius: 18px;
        #border:2px solid red;
		}

.section4-right {
        width: 90%;
        #border:3px solid blue;
        height: 53vh;
		width: auto;
		margin:1% 2%; 
		border-radius: 18px;
		#border:3px solid blue;
}


.section4_gros_titre {font-size: 180%;font-weight:600;}
.section4_sous_titre {font-size:130%;font-weight:600;}
/* texte justifié et "plein" */
.section4_texte_normal {font-size:130%;font-weight:600;text-align:justify;#text-justify:inter-word;hyphenate-limit-chars:3;hyphens:auto;text-wrap:pretty;#word-spacing:-2.5px;}
.section5_gros_titre {font-size:160%;font-weight:600;}






#section5 {flex-direction: column;}

.section5-left {
        width: 93.4%;
		height: 55vh;
		width:auto;
		margin:1% 2%;
		#padding:2%;		
		border-radius: 18px;
        #border:1px solid green;
}



/* logos clients */
.section5-right {
       width: 96%;
	   margin:1% 2%; 
       padding:0; /*important pour pouvoir avoir les bords bas ronds malgre le tableau */ 
       #border:1px solid green;
       #width: 100%;
	   border-radius:18px;
}
	

/* couleur bleu des logos clients */
.section5-right img {
#width:18%;
width:25vw;
height:auto;
#max-height:12%;
#border:2px solid violet;
}     





#section6 {
	height: auto;
	border-radius:18px 18px 0 0;
	#width:94%;
	#min-width:30%;
	margin:1.5vw 2vw -0.5px 2vw;
	#border-bottom:1px solid #0f1941;
}



.address-container1{
	font-size:80%;
	font-weight:500;
    margin: 1% 0%;
	/*hack 23 03 2026*/
	width:100%;
	min-width:5%;
	#min-width:88vw;
	#padding:0 0 0 1%;
	#border:1px solid lightblue;
	#vertical-align:-20px; 
	}

#section6 .address-container1 img{
	height:4vh;
	width:auto;
}

	
	
	
#section7 {
	height: auto;
	#margin:0 2% 2% 2%;
	#width: 94%;
	#border:1px solid orange;
	border-radius: 0 0 18px 18px;
	margin:0 2% 2% 2%; 
	#margin-bottom:2%;
	#min-width:96%;
 }



}