@charset "iso-8859-1";
/* auteur: WonkaStudio */

#password-container {
    /* Le conteneur doit être positionné en relatif pour que l'icône absolue soit ancrée dedans */
    position: relative; 
    /* Assurez-vous que le conteneur n'est pas plus large que l'input pour ne pas casser la mise en page du tableau */
    display: inline-block; 
}

#motdepasse {
    /* Le champ doit avoir une largeur définie (ajustez si besoin) */
    padding-right: 30px; /* Laisse de l'espace à droite pour l'icône */
    width: 130px; /* Exemple de largeur, ajustez à votre `size="22"` */
}

#togglePassword {
    /* L'icône est positionnée de manière absolue par rapport à #password-container */
    position: absolute;
    top: 50%; /* Centre verticalement */
    right: 5px; /* Décalage de 5px depuis le bord droit */
    transform: translateY(-50%); /* Ajustement final pour un centrage parfait */
    z-index: 10; /* Assure que l'icône est au-dessus du champ de saisie */
    color: #888; /* Couleur grise pour l'icône */
    font-size: 1.2em; /* Taille de l'icône */
}

body { font-family: Arial, sans-serif; }

        /* ------------------------------------------------------
           CLASSE POUR L'ASCENSEUR VERTICAL
           ------------------------------------------------------ */
        .scroll-container {
            width: 800px; /* Largeur totale du conteneur */
            height: 350px; /* Hauteur fixe pour forcer l'ascenseur */
            border: 1px solid #ccc;
            overflow-y: auto; /* Ascenseur vertical si nécessaire */
            overflow-x: hidden; /* Pas d'ascenseur horizontal */
            padding: 5px;
        }

        /* ------------------------------------------------------
           Styles du Tableau à l'intérieur
           ------------------------------------------------------ */
        .scroll-container table {
            width: 100%; /* Le tableau prend toute la largeur du conteneur */
            border-collapse: collapse;
        }
        
        .scroll-container th {
             /* Rendre les en-têtes visibles lors du défilement */
            position: sticky; 
            top: 0;
            background-color: #f0f0f0;
            z-index: 10;
        }
        
        .scroll-container td, .scroll-container th {
            padding: 5px;
            border: 1px solid #eee;
        }

body {
  background-image:url(images/back_page.jpg);
	background-color: #ffffff; 
	background-repeat: repeat-x;
	text-align:center;
	margin:0;
	padding:0;
	font-size:100.1%;
	font:83%/1.4 verdana, arial, helvetica, sans-serif;
}

h1 	{
	padding:0 10px 10px 10px;
	font-size:15px;
	color:#fff;
	font-weight:bold;
	margin:0px;
	text-align:left;
	}
	
h2 	{
	padding:0px 0px 0px 10px;
	font-size:12px;
	color:#527c91;
	font-weight:bold;
	margin:0px;
	text-align:left;
	}
	
h3 	{
	padding:10px 10px 0px 10px;
	font-size:15px;
	color:#527c91;
	font-weight:bold;
	margin:0px;
	text-align:left;
	}
.h3_detail {
	padding:0 10px 10px 20px;
	font-size:10px;
	color:#527c91;
	margin:0px;
	text-align:left;
	}
  	
.texte {
	text-align:justify;
	font-size:10px;
	padding:0px 10px 0px 10px;
	color:#527c91;
	font-weight:none;
	}
	
#imgleft { border-top:10px solid white; border-bottom:10px solid white; display:block; }

.conteneur_page {
	width:942px;
	margin-right:auto;
	margin-left:auto;
	}
	
.conteneur_head
	{
	height:123px;
	width:942px;
	text-align:right;
	background-image:url(images/header.jpg);
	}
	
.conteneur_left
	{
	float:left;
	width:170px;
	border-left:solid 5px white;
	}
.conteneur_center
	{
	float:left;
	width:568px;
	border-top:6px solid white;
	border-left:12px solid white;
	}
.conteneur_center_sommaire
	{
	float:left;
	width:738px;
	border-top:6px solid white;
	border-left:12px solid white;
	}	
.conteneur_right
	{
	float:left;
	width:170px;
	border-left:solid 12px white;
	}
.conteneur_foot
	{
	height:49px;
	width:942px;
	line-height:49px;
	text-align:center;
	border-bottom:20px solid white;
	background-image:url(images/footer_back.jpg);
	font-size:10px;
	padding:0px;
	color:#527c91;
	}
.lien_footer {
	font-size:10px;
	text-decoration:none;
	color:#527c91;
  }
.lien_footer:hover {
	color:#fff;
  }

.center_head_1
	{
	height:38px;
	line-height:35px;
	position:relative;
	width:568px;
	text-align:left;
	background-image:url(images/center_head_back.jpg);
	}

.top_carre
	{
	height:61px;
    padding-top:5px;
	width:66px;
	border-left:8px solid #b3cbd7;
	background-image:url(images/back_top.jpg);
	}
	
.flag
	{
	height:35px;
	position:relative;
	width:942px;
	text-align:right;
	}
	
ul#menu { background:url(images/menu_back.jpg); list-style-type: none; width:933px; border-left:5px solid white; border-right:5px solid white;	float:left;	padding:0;	margin:0; }
ul#menu li { float: left; }
ul#menu li a { display:block; float:left; height:38px; line-height:38px; color:#527c91; text-decoration:none; font-family:verdana, sans-serif; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px; margin-left:5px; }
ul#menu li a b { float:left; display:block; padding:0 28px 0 14px; }
.current a {color:#000; background: url(images/menu_back_hover.jpg);}
.current a b { background:url(images/menu_back_hover.jpg) no-repeat right top; }
ul#menu li a:hover {color:#000; background: url(images/menu_back_hover.jpg);}
ul#menu li a:hover b { background:url(images/menu_back_hover.jpg) no-repeat right top; }

ul#menu2 { list-style-type: none; padding:0;	margin:0; }
ul#menu2 li a { display:block; height:19px; line-height:19px; color:#fff; text-decoration:none; font-family:verdana, sans-serif; text-align:left; padding:0 0 0 14px; cursor:pointer; font-size:11px; margin-left:5px; }
ul#menu2 li a b { display:block; padding:0 0 0 10px; }
ul#menu2 li a:hover {color:#527c91; background: url(images/menu_left_back_hover.jpg);}
ul#menu2 li a:hover b { background:url(images/menu_left_back_hover.jpg) no-repeat right top; }

ul#center_liste { list-style-type: none; padding:5px;	margin:0; width:400px; }
ul#center_liste li a { display:block; background-color:#d6e3ea; border-bottom:1px solid white; height:25px; line-height:25px; color:#527c91; text-decoration:underline; font-family:verdana, sans-serif; text-align:left; padding:0 0 0 14px; cursor:pointer; font-size:10px; margin-left:5px; }
ul#center_liste li a:hover {color:#fff; background-image:url(images/liste_back.jpg); }


.menu_left_head
	{
	font-size:0.1em;
	margin-top:6px;
	display:block;
	height:14px;
	width:170px;
  background-image:url(images/menu_left_top.jpg);
	}
.menu_left_bot
	{
	font-size:0.1em;
	display:block;
	height:14px;
	width:170px;
    background-image:url(images/menu_left_bot.jpg);
	}
.menu_left_back
	{
	display:block;
	width:170px;
  background-image:url(images/menu_left_back.jpg);
	}

.menu_right_head
	{
	font-size:0.1em;
	margin-top:6px;
	display:block;
	height:14px;
	width:170px;
    background-image:url(images/menu_right_top.jpg);
	}
.menu_right_bot
	{
	font-size:0.1em;
	display:block;
	height:14px;
	width:170px;
    background-image:url(images/menu_right_bot.jpg);
	}
.menu_right_back
	{
	display:block;
	width:170px;
	position:relative;
  background-image:url(images/menu_left_back.jpg);
	}

.stock_titre {
  border-top:5px solid white;	
	font-size:14px;
	padding:0px;
	color:#000000;
	font-weight:bold; }
.stock_texte {	
	font-size:10px;
	padding:0px;
	color:#527c91;
  }
  
.table_titre {
  text-align:left;
	font-size:14px;
	padding:0px;
	color:#527c91;
	text-decoration:underline;
	font-weight:bold; }
.table_texte {
  text-align:left;
  border-top:5px solid white;	
	font-size:10px;
	padding:0px;
	color:#527c91;
  }
.table_detail {
  text-align:left;
  border-top:5px solid white;	
	font-size:10px;
	padding:0px;
	color:#527c91;
	font-weight:bold;
  }

.separator{
	clear: both;
	visibility: hidden;
	margin: 0;
	padding: 0;
	height: 1px;
	line-height: 1px;
	font-size: 1em;
	}

/* PAGE CONTACT ------------------------------------------------------------------------------------------------ */

.input_contact {
	background-color:#ffffff;
	border:solid 1px #527c91;
	color: #527c91;
	font-size:10px;
	padding:3px;
	margin:0;
	font-weight: bold;
	font-family:verdana, Helvetica, sans-serif;
	}
.boiteFormulaire2 {font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: underline; text-align: left; font-size: 12px;  font-style: italic; font-weight: bold; border: 0px solid; background-color: transparent; color: rgb(204, 0, 0); padding-top:2px; padding-bottom:2px; padding-left: 5px;}
.boiteFormulaire3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #CC0000; text-align: left; font-weight: bold; border: 0px solid; background-color: transparent; color: rgb(0, 0, 0); padding-top:2px; padding-bottom:2px; padding-left: 5px;}

.imageflottante_gauche
{
   float: left;
}

.imageflottante_droite
{
   float: right;
}
/*------------------------Mise en forme tableaux----------------------------------------------------------------------*/
.titre_haut
{
   caption-side: top; /* Le titre sera placé en haut du tableau */
   margin: auto;
   font-family: "Comic Sans MS", Times, verdana, "Trebuchet MS", "Times New Roman", serif;
   font-size: 1.0em;
   font-weight: bold;
   text-decoration: underline;
   color: rgb(153, 51, 153);
   padding-bottom: 10px; /* La marge doit se faire au-dessous et non en-dessus maintenant */
   text-align: left;
   font-style: italic;
}

.table_design
{
   margin: auto;
   border: 3px outset rgb(51, 102, 255);
   border-collapse: collapse;
   width: 100%;
   background-image:url(images/fond_table_design.jpg);
   background-repeat: repeat;

}

.th_design
{
   background-color: rgb(51, 102, 255);
   color: white;
   font-size: small ;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
   text-align: center;
}

.td_left
{
   
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé en bas */
   border: 1px solid silver;
   font-family: "Comic Sans MS", Times, verdana, "Trebuchet MS", "Times New Roman", serif;
   text-align: left;
   padding-left: 20px;
   padding: 10px;
   font-size: small;
   
}

.td_right
{
   
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé en bas */
   border: 1px solid silver;
   font-family: "Comic Sans MS", Times, verdana, "Trebuchet MS", "Times New Roman", serif;
   text-align: right;
   padding-right: 20px;
   padding: 10px;
   font-size: small;

}

.td_center
{
   
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé en bas */
   border: 1px solid silver;
   font-family: "Comic Sans MS", Times, verdana, "Trebuchet MS", "Times New Roman", serif;
   text-align: center;
   padding: 10px;
   font-size: small;
}

.table_formulaire
{
   margin: auto;
   border-top:  1px solid rgb(51, 102, 255);
   border-left : 1px solid rgb(51, 102, 255);
   border-right: 2px ridge rgb(51, 102, 255);
   border-bottom: 2px ridge rgb(51, 102, 255);
   background-image:url(images/fond.gif);
   background-repeat: repeat-x;
  
   width: 100%;
}

.message_validation
{
   margin: auto;
   border-top:  1px solid rgb(51, 102, 255);
   border-left : 1px solid rgb(51, 102, 255);
   border-right: 2px ridge rgb(51, 102, 255);
   border-bottom: 2px ridge rgb(51, 102, 255);
   background-image:url(images/decision_fond.png);
  
   width: 100%;
}
.td_message_validation
{
   
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé en bas */
   border: 1px solid silver;
   font-family: Arial, "Comic Sans MS", Times, verdana, "Trebuchet MS", "Times New Roman", serif;
   text-align: left;
   padding: 10px;
   font-size: 1.0em;
}

.message_erreur
{
   margin: auto;
   border-top:  1px solid rgb(51, 102, 255);
   border-left : 1px solid rgb(51, 102, 255);
   border-right: 2px ridge rgb(51, 102, 255);
   border-bottom: 2px ridge rgb(51, 102, 255);
   background-image:url(images/message_erreur.jpg);
  
   width: 100%;
}
.td_message_erreur
{
   
   vertical-align: middle; /* Alignement vertical, le contenu des cellules sera placé en bas */
   border: 1px solid silver;
   color: rgb(0, 0, 153);
   font-weight: bold;
   font-family: Arial, "Comic Sans MS", Times, verdana, "Trebuchet MS", "Times New Roman", serif;
   text-align: left;
   padding: 10px;
   font-size: 1.0em;
}

.table_information
{
   margin: auto;
   border: 1px outset rgb(51, 102, 255);
   border-collapse: collapse;
   width: 100%;
   background-image:url(images/fond_table_information.gif);
   background-repeat: repeat;

}