/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 03
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */
body {
	color: #000000;
	background-color:#273990;

}
a {
	color: #273990;
}
strong {
	color: #000000;
}
#bg {
	display:inline-block;
	top: 155px;
	right:0;
	position:fixed;
	width:45%;
	height:100%;
	background-image :linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url("/style/img/BG-Centri.png");
	background-size: contain;
	/*clamp(0,contain,contain);*/
	background-position: top right;
    background-repeat: no-repeat;
}
/* Contenu */
#contenu {
	display:inline-block;
	top :155px; 
	position:relative;
	padding: 0px 0px;
	font-size: 1em; /* -> 4 */
	line-height: 1.5; /* -> 5 */
	text-align:justify;
	width:45%;
	margin-left:50px;
}
#contenu > :first-child {
	margin-top: 0px;
	margin-left: 0px;
	
}
#contenu p, #contenu li {
	line-height: 1.5;
}


div #accueil {
	color:white;
	width:100%;
	position:relative;
	left:5%;

}
div #accueil h2 {
	text-align:left;
}

#contenu.opa {
    opacity: 1;
    transition: opacity 0.4s; 
}
#contenu.fade {
    opacity: 0;
}
div #accueil #TitreBienvenue h2{
text-align:center;
}

div.lesplus {
	border:solid;
	border-width: 1px;
	border-color:white;
	border-radius: 10px;
	
	margin-left : 20px;
	margin-bottom: 15px;
	float:right;
	max-width : 50%;
	width:auto;
	padding-top: 8px;
	padding-left : 10px;
	padding-right : 5px;
	text-align:left;
	font-size: 0.95em;
}

div.lesplus ul li { 
  list-style-type: disc;
  padding-inline-start: 1ch; } 


/*changements pour les petits écrans : */
@media(max-width: 1000px) {
	div#bg {
	display:none;
	}
	div#contenu {
	width:80%;
	}
}
@media (max-width: 1350px) {
	div.sous-titre {
	display:none;
	}
}

.myButton {
  background-color: #bec3dd; /* Green */
  border: none;
  color: #273990;
  margin-top: 10px;
  padding: 10px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}
.myButton:hover {
  background-color: #e9ebf3;
}
.myButton:active {
	position:relative;
	top:1px;
}



/*Cartouche téléphone mail */
div#cartouche {
	position: absolute;
	display: inline-block;
	right: 50px;
	top : 35px;
	padding: 5px 10px 5px 10px;
	border-radius: 25px;
	color:#273990;
	background-color: white;
	border-style: solid;
	border-color: #273990;
}
#cartouche div {
	display:inline-block;
	font-size:1.7em;
}
#cartouche div  a{
	color:#273990;
	text-decoration: none;
}
#cartouche div .icon {
     float:left;
	 padding-left:10px;
	 padding-right:10px;
     width: 24px;
     height:24px;
     display:block;    
}
@media (max-width: 910px) {
	#cartouche {
	position: relative;
	display:none;
	}
}

/* Page */
#global {
	background: #FFFFFF;
}

/* Navigation */
#navigation {
	background: #273990;
	
}
#navigation a {
	color: #FFFFFF;
	font-weight:bold;
	
}
#navigation a:hover, #navigation a:focus {
	background: #ebefff;
	color: #273990;
}
/* Colonne de gauche */
#colgauche {
	background: #273990;
}
#colgauche a  {
	color: #ebefff;
}
#colgauche a:hover, #colgauche a:focus {
	background: #ebefff;
	color: #273990;
}

/* Colonne de droite */

#coldroite {
	background: #ebefff;
}
#coldroite a {
	color: #ebefff;
}
#coldroite a:hover, #coldroite a:focus {
	color: #273990;
}


/* Menu bas */
#menubas {
	background: #273990;
}
#menubas a, #menubas form {
	color: #FFFFFF;
}

#menubas div {
	text-align:center;
	display:block;
	color:#FFFFFF;
	width:250px;
	padding:5px ;
	margin:auto;
	position:relative;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	font-weight:bold;
	
}

#menubas div:hover {
	background-color: #000;
	cursor:pointer;
}

/* Contenu principal */
#contenu {
	color: #000000;

}
#contenu a {
	color: #ffffff;
}
#contenu a:hover, #contenu a:focus {
	color: #ffffff;
}
#contenu strong {
	color: #000000;
}

div#espaceClient {
	min-height:400px;
}

	
/* Pied de page */
#pied {
	color: #888888;
}

.parent {
    color:#FFFFFF;
    font-weight: bold;
    font-size: 10pt;
    cursor: hand;
    padding-top:3px;
    padding-bottom:3px;
    padding-left:5px;
    padding-right:0;
    text-align:right;
    
}
.child  {
    color:#FFFFFF;
	font-size: 10pt;
    font-weight: normal;
    margin-left: 14pt;
    padding-top:3px;
    padding-bottom:3px;
    padding-right:0;
    padding-left:35px;
    list-style-position: inside;
    text-align:right;
    
}

.img-menu {
	float:left;
	padding-top: 5px;
}
/* les classes menu sont là pour ajouter les arrondis pour les navirgateurs compatibles */
.menulien {

    text-align:right;
}

.menucol {
	border-radius:10px; /* pour Navigateur compatible */ 

}
/* les classes navi sont là pour modifier l'aspect des éléments de la barre de menu horizontale */
.navilien {

}


/* MENU DROPDOWN NOUVELLE GEN */

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #273990;
  font-family: Arial;
  border-bottom: solid;
  border-bottom-width: 1px;
  border-bottom-color:white;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition-property: opacity;
  transition-duration: .4s, 0s;
  transition-delay: 0s, .4s;
}


/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: white;
  color:#273990;
  transition-property: opacity;
  transition-duration: .4s, 0s;
  transition-delay: 0s, .4s;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  /*display: none;*/
  display: block;
  visibility:hidden;
  opacity: 0;
  transition-property: opacity, visibility;
  transition-duration: .4s, 0s;
  transition-delay: 0s, .4s;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: #273990;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #d3d7e8;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  visibility:visible;
   visibility: visible;
  opacity: 1;
  transition-delay: 0s, 0s;
}

/* --- POSITIONNEMENT --- */

/* Page */
html, body {
	height: 100%; /* Voir -> Note 1 ci-dessous */
}
body {
	padding: 0;
}
#global {
	min-height: 100%; /* -> 1 */
	width: 800px;
	overflow: hidden; /* -> 2 */
	margin-left: auto;
	margin-right: auto; /* -> 3 */
}

/*Menu qui entour l'entête*/
div#Menu
{
 position:fixed;
 width : 100%;
 background-color:white;
 z-index: 10;
}
/* En-tête */
#entete {
	padding: 0px 20px 5px 20px;
	background-color:#ffffff;
}
#entete h1 {
	margin: 0;
	text-align:center;
}
#entete h1 img {
	position:absolute;
	margin: 7px 20px 10px 0;
}
#entete .sous-titre {
	position:absolute;
	top:10px;
	width:auto;
	left:550px;
	margin: 0px 10px 10px 0;
	padding-top:5px;
	text-align:left;
}




/* Colonne gauche si besoin */
#colgauche {
	width: 185px; /* -> 4 */
	float: left;
	margin-bottom:0px;
	margin-left:0px;
	
}
#colgauche ul {
	margin: 0;
	list-style: none;
}
#colgauche a {
	height: 1%; /* -> 5 */
	padding: 6px 0 6px 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
	text-align:right;
	
}


/* Colonne de droite */
#coldroite {
	margin-left: 200px; /* -> 6 */
	padding: 10px 20px;
}
#coldroite > :first-child {
	margin-top: 10px;
}
#coldroite p, #contenu li {
	line-height: 1.5;
}


/* Menu de bas de page */
#menubas {
	padding: 6px 15px;
}
#menubas ul {
	margin: 0;
	list-style: none;
	text-align: center;
}
#menubas li {
	display: inline;
}
#menubas a {
	padding: 6px;
	line-height: 1.5;
	font-size: .9em;
	text-decoration: none;
}

/* Pied de page */
#pied {
	padding: 0 0 0 0;
	font-size: .85em;
	position : absolute;
	bottom:0;
	width:100%;
}
#pied p {
	margin: .5em 0;
}
#copyright {
	text-align: center;
	font-size: 1em;
}

#erreur_login {
	color:red;
}

.loader {
  width: 60px;
  height: 40px;
  position: relative;
  display: inline-block;
  --base-color: #273990; /*use your base color*/
}
.loader::before {
  content: '';  
  left: 0;
  top: 0;
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #FFF;
  background-image: radial-gradient(circle 8px at 18px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 0px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 36px 18px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 18px 36px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 5px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 30px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 30px, var(--base-color) 100%, transparent 0), radial-gradient(circle 4px at 5px 5px, var(--base-color) 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 3s linear infinite;
}
.loader::after {
  content: '';  
  left: 35px;
  top: 15px;
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FFF;
  background-image: radial-gradient(circle 5px at 12px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 0px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 0px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 24px 12px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 12px 24px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 3px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 20px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 20px, var(--base-color) 100%, transparent 0), radial-gradient(circle 2.5px at 3px 3px, var(--base-color) 100%, transparent 0);
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 4s linear infinite reverse;
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}  


  .floating-menu {
    font-family: sans-serif;
    background: none;
    width: 50px;
    z-index: 100;
    position: fixed;
	left: 10px;
  }
  .floating-menu a, 
  .floating-menu h3 {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
	padding: 5px;
    border-radius : 100% 100% 100% 100%;
	width : 32px;
	height: 32px;

  }
  .floating-menu a img {
	height : 32px;
	width : 32px;
  }
  .floating-menu a img.clear {
	height : 24px;
	width : 24px;
	float:right;
	margin-top: 6px;
	transition: all 0.1s ease-in-out;
	visibility:hidden;
  }
 .floating-menu a:hover {
	background-color: #5fa2db;
} 
 .floating-menu a.affiche {
	background-color: #5fa2db;
	border-radius : 5px 0 0 5px;
} 
.floating-menu a.affiche img.clear {
visibility: visible;
}

 #Filtre {
	/*display: none;*/
	display: inline-block;
	position:absolute;
	float:right;
	width:0;
	/*partie animation*/
	transition: all 0.4s ease-in-out;
	overflow:hidden;
 }
 
  #imgFiltre {
   transition: opacity 0.5s, border-radius 0.1s;
  }
 #imgFiltre.translucide {
	opacity: 0.5;
 }
 
 #Filtre.affiche {
	/*display: inline-block;*/
	width: 229px;
	height: 40px;
	padding-top: 2px;
	padding-left : 5px;
	padding-right: 8px;
	padding-bottom: 0px;
	position: fixed;
	margin-top: -5px;
	background-color: #5fa2db;
	border-radius : 0 5px 5px 0;
	/*partie animation*/
	transition: all 0.4s ease-in-out;
 }
 #Filtre.affiche #InputFilter {
  width:180px;
 }
#InputFilter {
 width : 0;
 height:28px;
 display:inline-block;
 padding-left:10px;
 margin-right: 7px;
 margin-top: 2px;
 transition: all 0.1s ease-in-out;
 
 }
 #InputFilter [type="text"]
{
    font-size:20px;
}



/* Tooltip container */
.tooltip  {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #5fa2db;
  color: #fff;
  text-align: left;
  padding: 4px 0;
  padding-left : 10px;
  border-radius: 0 6px 6px 0;
  margin-top:5px;
  margin-left:32px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:not(.affiche):hover .tooltiptext {
  visibility: visible;
}

.cachee {
 visibility: hidden;
}

div.encartClient {
	border-radius: 10px;
	height:20px;
	font-weight: bold;
	vertical-align:center;
	text-align:center;
	margin-top : 5px;
	
}
div.encartClient.ClientExist {
	color : white;
	width: 180px;
	background-color: green;
}
div.encartClient.ClientNouv {
	color : white;
	width: 230px;
	background-color: red;
}
div.encartClient.ClientUpdt {
	color : white;
	width: 230px;
	background-color: orange;
}

div.deconnect:hover {
	cursor: pointer;
}

div.deconnect {
	display:inline-block; 
	width:170px;
	height:60px;
	border: 2px;
	font-size: 1.1em;
	font-weight:bold;
	border-style:none;
	border-color:white;
	border-radius:3px;
	padding-top:4px;
}
div.deconnect.img {
 position:relative;
 float:left;
 left:4px;
 top:4px;
}
div.deconnect.div {
display:inline-block;
 position:relative;
 float:right;
 right:4px;
 top:4px;
}

.slider {
    background: white;
    height: 120px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;

}

.slider::before, .slider::after {
    background: linear-gradient(to right, #273990 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 100%;
    position: absolute;
    width: 50px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider .slide-track {
    animation: scroll 25s linear infinite;
    display: flex;
	margin-top:10px;
    
}

.slider .slide-track:hover {
    animation-play-state: paused;
}

.slider .slide {
    height: 100px;
    width: 300px;
	margin-left:30px;
	margin-right:30px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.slider .slide img {
  margin: 0;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-1369px));
    }
}