/********************* DEBUT DU CSS NAVBAR *************************
/** Resolv problem of ecart of marg 
#subhead .flex-grow-1 {flex-grow: 0 !important;} */
/** affichage des element de head (head1 a head5) */
.sticky-top, .bg-light, #navbar_top {
  padding-top: 0px; padding-bottom: 0px;
}
.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-icon:focus {}
.form-select{width: auto;}
.navbar-brand .band{ color: green; font-size:22px; font-family:Sans-serif; font-weight:800; margin-right:0px; }
.navbar-nav li a, ul, option{color:black; font-family: Arial, Helvetica, sans-serif; font-size:; font-weight:500;}
.navbar-expand-md .navbar-nav .nav-link {background-color: #ffffff; }
.navbar-expand-md .dropdown-menu .dropdown-item {background-color: #ffffff; }
.navbar-expand-md .navbar-nav .nav-link:hover {background-color: #40e0d0;}
.navbar-expand-md .dropdown-menu .dropdown-item:hover {background-color: #40e0d0;}			
.navbar-expand-md .navbar-nav .nav-link:active {color:#40e0d0;}
.navbar-expand-md .dropdown-menu .dropdown-item:active {color:#40e0d0;}
			
#container-fluid {background-color: #ffffff;  border-bottom: 0.5px solid; border-color: #4c0bce; padding-bottom: 5px;}
			
@media screen and (min-width: 1400px) {
	.navbar-nav li {
		margin-left: 20px;
		margin-right: 20px;
	}
	.navbar-brand .band{ 
		padding-left:10px;
	}
}
@media screen and (max-width: 1400px) and (min-width: 958px) {
	.navbar-nav li {
		margin-left: 20px;
		margin-right: 20px;
	}
	.navbar-brand .band{ 
		padding-left:10px;
	}
}
@media screen and (max-width: 958px) and (min-width: 768px) {
	.navbar-nav li {
		margin-left: 8px;
		margin-right: 8px;
	}
	.navbar-brand .band{ 
	    padding-left:5px;
	}
}
@media screen and (max-width: 768px) {
	.navbar-nav li {
		margin-left: 8px;
		margin-right: 8px;
    }
	.navbar-brand .band{ 
		padding-left:2px;
	}
}
.dropdown:hover .dropdown-menu{ display: block;}
.select{border: 0px; background-color: white; margin-top: 5px; margin-bottom: 2px;}
.btn-sm {width: 90px;}
/** footer */
#titlfooter {font-weight: bold; text-decoration: underline; font-size: 14px;}
.pt-2 p a{color: #003; text-decoration: none;}
/** end of footer */
/* whatsapp fixed */
#buttonwhatsap {margin-bottom:100px; margin-right:100px; background-color: #25D366; color:#fff; font-size:28px; }
#circlewhatsap {margin-bottom:100px; margin-right:100px; width: 45px; height:45px; background-color: #25D366; box-shadow: 20px 20px 60px grey; border-color: #25D366;}
#buttonwhatsap:hover {background-color: #25D366; color:#fff; font-size:31px; }
#circlewhatsap:hover {width: 48px; height:48px; background-color: #25D366; box-shadow: 20px 20px 60px grey; border-color: #25D366;}
/** whatsapp fixed */
/********************* FIN DE CSS NAVBAR *************************

/** footer */
#titlfooter {font-weight: bold;}
.pt-2 p a{color: #003; text-decoration: none;}	
/** end of footer */

/****************/
/*   index      */
/****************/
@media (min-width: 768px) { 
	#index-start {
		height: 400px;
		background-position: center; 
		background-repeat: no-repeat;
		background-size: cover;
		align-items: center;
	}
	#index-start h3{ 
	   margin-top: 50px;
	}
	#index-start h4 {
		margin-top: 30px;
	}
	#index-start  .lien {
		margin-top: 40px;
	}
}
@media (max-width: 768px) { 
	#index-start {
		height: 300px;
		background-position: center; 
		background-repeat: no-repeat;
		background-size: cover;
		align-items: center;
	}
	#index-start h3{ 
	   margin-top: 40px;
	   font-size: 22px;
	}
	#index-start h4 {
		margin-top: 20px;
	}
	#index-start  .lien {
		margin-top: 30px;
	}
}
#index-start  #lien {
	padding: 10px 20px 10px 20px;
	border: 2px solid;
	border-radius: 50%;
}
#index-start  #lien:hover {
	background-color: #ff7f50;
}
/** 2ième container */
#index-second {
	line-height: 2;
	font-size: 17px;
}
#index-second .contenu h4 {
	text-align: center;
	margin-bottom: 10px;
}
#index-second .contenu h5{
	
}
#index-second .contenu .fa-check{
	color: red;
	font-weight: bold;
	margin-right: 10px;
}
#index-second #image3 {
	border-radius: 100px;
}

/** 3ième container */
#index-third {
	margin-top: 60px;
	margin-bottom: 50px;
}
#index-third .domaine {
	margin: 10px;
	border: 1px solid;
	border-top-left-radius: 15px;
	transition: transform 250ms;
}
#index-third .domaine:hover {
	transform: translateY(-5px);
}
#index-third .domaine h5 {
	padding: 2px 2px 2px 2px;
	border-radius: 50px;
	border-bottom: 1px solid;
	box-shadow: 0 2px 5px 1px rgba(64,60,67,.6);
}
#index-third .domaine .text {
	padding-top: 0px; 
	margin-top: 0px;
	padding-left: 5px; 
	padding-right: 5px;
	border-bottom: 2px solid;
	border-left: 2px solid;
	border-color: green;
	border-bottom-left-radius: 50%;
	background-color: #ffffff;
}

#index-third .domaine .text:hover {
	background: url("paper.gif");
}
/* for background  for NET */
#container_background {
	display: grid; 
	background-color: #fff;
	margin: 0px; padding: 0px;
}
#container_background .main__bg {
	background-image: linear-gradient(-60deg, #404258 50%, #6B728E 50%);
	animation: slide 12s ease-in-out infinite alternate;
	position: fixed;
	top: 0;
	bottom: 0;
	left: -50%;
	right: -50%;
	opacity: 0.5;
	z-index: -1;
}
#container_background .layer1 {
	animation-direction: alternate-reverse;
	animation-duration: 16s;
}
#container_background .layer2 {
	animation-duration: 20s;
}
@keyframes slide {
	0% {
		  transform: translateX(-25%);
	   }
	100% {
			transform: translateX(25%);
		 }
}
/* end of background  for NET */

/** 4ième container */
#index-four {
	margin-top: 60px;
	margin-bottom: 50px;
}
#index-four .logot {
	 transition: transform 250ms;
	 margin: 10px;
}
#index-four .logot:hover {
	transform: translateY(-3px);
}
#index-four .logot #logotu {
	height: 60px;
	width: 70px;
}
#index-four .logot #logotu_name {
	line-height: 2;
	font-size: 20px;
}
/** 5ième container */
#index-five .secteur {
	margin: 10px;
	 transition: transform 250ms;
}
#index-five .secteur h5 {
	color: #fff;
}
#index-five .secteur:hover {
	transform: translateY(-3px);
	background-color: 
}

#index-five .secteur .secteur-image #logosecteur {
	height: 150px;
	width: 200px;
	border: 1px solid;
}
/* 6ième container */ 
#container-six {
	background-color: ;
}
#index-six #halp1 {
	border: 1px;
	background-color: #ffffff;
	border-top-left-radius: 50px;
	border-top-right-radius: 100%;
	border-bottom-right-radius: 100%;
}
#index-six #halp2 {
	border: 1px;
	background-color: #ffffff;
	border-top-left-radius: 100%;
	border-bottom-right-radius: 300px;
}
#index-six .accordionmenu1 #halp2 h3 {
   font-size: 16px;	
}
#index-six .accordionmenu1 #halp2 .conten {
	line-height: 2; 
   font-size: 17px;	
}
#index-six #halp1 .halp11 .halp111 .p { 
   font-size: 20px;
   font-weight: bold;
}
#index-six #halp1 .halp11 .halp111 #dev { 
   border: 1px solid;
   border-color: #fff;
   margin-right: 10px;
   height: 50px;
   width: 50px;
   border-radius: 100px;
}
/* 7ième container */ 
#container-seven #index-seven .quality .fa-square-check {
	color: green;
	margin-right: 10px;
}
#container-seven #index-seven .quality p {
	font-weight: 350;
	font-size: 19px;
	color: #fff;
}

/****************/
/*   web_site   */
/****************/
#web-start, #commerce-start, #application-start,
#security-start, #donnees-start, #client-start, #demande-start, #contact-start {
	background-color: #ffffff;
	line-height: 2;
	font-size: 17px;
}
#web-start #web-title, #web-start #web-title1, #web-start #web-title2,
#security-start #sec-title, #security-start #sec-title1, #security-start #sec-title2  {
	margin-bottom: 18px;
}

/****************/
/*  e-commerce  */
/****************/ 
#commerce-start #e-title {
	margin-bottom: 18px;
}
#commerce-start #avantages .fa-square-check {
	color: green;
	margin-right: 10px;
}
/****************/
/* application  */
/****************/
#application-start #app-tile, #application-start #app-tile1, #application-start #app-tile2 {
	margin-bottom: 18px;
} 
#application-start .fa-square-check {
	margin-right: 10px;
}
/****************/
/*   security   */
/****************/
#security-start #sec-title, #security-start #sec-title1, #security-start #sec-title2 {
	margin-bottom: 18px;
}

/****************/
/*   donnees    */
/****************/
#donnees-start #donnee-title, #donnees-start #donnee-title1 {
	margin-bottom: 18px;
}
/****************/
/*   client     */
/****************/
#client-start {
	line-height: 2;
	font-size: 17px;
}
#client-start #client-title, #client-start #client-title1 {
	margin-bottom: 18px; 
}
#client-start .formular .card {
	border-radius: 15px;
	box-shadow: 0 2px 5px 1px rgba(64,60,67,.6);
	background-color: #fff;
}
#client-start .formular .card .input-group { 
	margin-bottom: 25px;
}
#client-start .formular .card .input-group .input-group-text,
#client-start .formular .card .input-group .form-control,
#client-start .formular .card .input-group .form-select,
#client-start .formular .card .form-group .form-check .form-check-input { 
	border-radius: 0px;
	border: 1px solid;
	border-color: #00ffff;
}
#client-start .formular .card .form-group .btn {
	width: 40%;
	border-radius: 50px;
}


/****************/
/*   demande    */
/****************/ 
#demande-start {
	line-height: 2;
	font-size: 17px;
}
  
#demande-start #demande-title, #demande-start #demande-title1,
#demande-start #demande-title2, #demande-start #demande-title3 {
	margin-bottom: 18px;
}
#demande-start .formular .card {
	border-radius: 15px;
	box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
	background-color: #fff;
}
#demande-start .formular .card .input-group { 
	margin-bottom: 25px;
	border-radius: 10px;
}
#demande-start .formular .card .input-group .input-group-text,
#demande-start .formular .card .input-group .form-control,
#demande-start .formular .card .input-group .form-select,
#demande-start .formular .card .form-group .form-check .form-check-input { 
	border: 1px solid;
	border-color: #000;
}
#demande-start .formular .card .form-group .btn {
	width: 40%;
	border-radius: 50px;
}

/****************/
/*   contact    */
/****************/
#contact-start .fa-magnifying-glass {
	color: #0000ff;
	margin-right: 8px;
}
#contact-start .lieu .fa-phone,
#contact-start .lieu .fa-envelope,
#contact-start .lieu .fa-location-dot {
	color: #bf00ff;
	font-size: 20px;
	margin-right: 10px;
}
/*  formular  */
#contact-start .formular .card {
	line-height: 1;
	border-radius: 20px;
}
#contact-start .formular .card .input-group { 
	margin-bottom: 20px;
}
#contact-start .formular .card .form-group .btn-danger {
	width: 100%;
	border-radius: 50px;
} 


/** ********************* CSS IN HTML *******************/