*{padding:0; margin:0;}
#enveloppe {width:960px; margin:0 auto;}
body{background-image:url(images/fond_body.jpg); background-repeat:repeat-x;}

img{border:0;}
p{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:15px; padding:2px;}
h1{color:#096; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:30px;}
h3{color:#096; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:20px; padding:15px 0 0 0;}

body.login-page {
    margin: 0;
    height: 100vh;
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    display: flex;
    justify-content: center;
    align-items: center;
}


#bannier {width:960px; height:160px; background-image:url(images/bannier.png);}

#zone_contenu{width:100%; margin-top:0;}

#zone_left {width:470px; float:left;margin-top: 0px;}
#zone_right {width:370px; float:left; margin-left:5px;direction: ltr }



#zone_contenu_etablissement{width:100%; margin-top:0;direction:rtl;}
#zonegauche {width:450px;float:left;margin-top: 0px;  margin-left:30px;}
#zonedroite {width:450px;float:left;margin-top: 0px;  margin-left:30px;}
#groupe{border-radius:12px;border-color: #1075a4;;color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px;}
#barrebouttons{border-radius:12px; float:right ; width:50%; height:30px; border:1px solid #1075a4; margin-top:20px;text-align: center }
#groupe_x{border-radius:12px;}

#clear{clear:both;}

#bas_page{width:100%; height:120px; border-top:1px solid #ccc; margin-top:20px;}

#bannerbanner {width:960px; height:40px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px;}








#navigation{width:100%; height:38px;direction: ltr }
#menu{list-style-type:none;}
#menu li{float:left; -moz-border-radius:10px 10px 10px 0 0; -webkit-border-radius:10px 10px 10px 0 0; border-radius:10px 10px 0 0; border-right:1px solid #fff;}
#menu .lien_menu{display:block; width:119px; text-align:center; text-decoration:none; font-family:Tahoma, Geneva, sans-serif; font-size:13px; color:#ffffff; background-image:url(images/fond_menu.jpg); background-repeat:repeat-x; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 10px 0 0; border-radius:10px 10px 0 0; padding:6px 0 6px 0;}
#menu a:hover{background-image:url(images/fond_menu_survole.jpg); background-repeat:repeat-x;}
#menu .lien_sortir{display:block; width:119px; text-align:center; text-decoration:none; font-family:Tahoma, Geneva, sans-serif; font-size:13px; color:#ffffff; background-image:url(images/fond_lien_sortir.jpg); background-repeat:repeat-x; -moz-border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 10px 0 0; border-radius:10px 10px 0 0; padding:6px 0 6px 0;}
#menu .lien_sortir:hover{background-image:url(images/fond_lien_sortir_survole.jpg); background-repeat:repeat-x;}



#menu_bas{width:400px; list-style-type:none; margin:0 auto;}
#menu_bas li{float:left; border-right:1px solid #ccc;}
#menu_bas a{display:block; width:120px; text-align:center; text-decoration:none; color:#85807f; font-family:Tahoma, Geneva, sans-serif; font-size:12px; 
padding:8px 0 8px 0;}
#menu_bas a:hover{color:#fff; background-color:#bbb;}















#formulaire_inscription{width:440px; direction:rtl; border-radius:6px; border:1px solid #cfa9a6; padding:20px;}
#formulaire_inscription label{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:15px;}
#formulaire_inscription input[type="submit"]{color:#1075a4; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:16px; font-weight:bold; cursor:pointer;}
.champ_nom{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:0 11px 0 0;}
.champ_prenom{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 8px 0 0;}
.champ_select_sexe{width:80px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 4px 0 0;}
.champ_dateN{width:135px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 10px 0 0;}
.champ_lieuN{width:135px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 8px 0 0;}
.champ_select_si-fa{width:114px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 22px 0 0;}
.champ_select_si-so{width:114px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 0 0 0;}
.champ_select_niv-sco{width:120px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 0 0 0;}
.champ_adresse{width:240px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 0 0 0;}
.champ_select_wilaya{width:120px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 5px 0 0;}
.champ_codeCo{width:91px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 0 0 0;}
.champ_email{width:170px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 0 0 0;}
.champ_tel{width:120px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 16px 0 0;}
.champ_fax{width:120px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 8px 0 0;}
.champ_mobilis{width:120px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 1px 0 0;}
.champ_djezy{width:120px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 20px 0 0;}
.champ-nedjma{width:120px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 22px 0 0;}
.champ_select_AEJ{width:90px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 0 0 0;}
.champ_select_AAJ{width:90px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 62px 0 0;}

.bouton_inscription{width:90px; height:35px; margin:15px 0 0 0;}
.bouton_changer{width:90px; height:35px; margin:5px 0 0 0;}
.bouton_annuler{width:90px; height:35px; margin:5px 0 0 0;}
.bouton_supprimer{width:90px; height:35px; margin:5px 0 0 0;}
.bouton_complet{width:90px; height:35px; margin:5px 0 0 0;}
.bouton_changer_02{display:block; margin-top:20px;}



#zone_confirmation{width:200px; border:1px dashed #666; padding:10px; margin:10px 0 0 0;}
#zone_infos{width:200px; border:1px dashed #666; padding:5px; margin:5px auto 2px auto; direction:ltl;}
#zone_infos1{ width:960px; padding:5px; margin:5px auto 2px auto; direction:ltr;}
#zone_infos_etablissement{ width:960px; padding:5px; margin:5px auto 2px auto;}










#formulaire_authentification{width:430px; direction:rtl; border-radius:6px; border:1px solid #cfa9a6; padding:20px; margin-left:8px;}
#formulaire_authentification label{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:13px;}
#formulaire_authentification input[type="submit"]{color:#1075a4; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:16px; font-weight:bold; cursor:pointer;}
.champ_matricule{margin:0 25px 0 0;}
.champ_motpass1{margin:5px 3px 0 0;}
.image_upload{margin:10px 0 0 0;}
.bouton_charger_photo{width:128px; height:35px; display:block; margin:5px 0 0 0;}
.bouton_charger_info{width:128px; height:35px; display:block; margin:5px 0 0 0;}
.bouton_imprim_form{width:128px; height:35px; margin:5px 0 0 0;}






#formulaire_connexion{width:320px; background-color:#edf1e9; direction:rtl; border-radius:6px; border:1px solid #cfa9a6; padding:20px;}
#formulaire_connexion label{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:13px;}
#formulaire_connexion input[type="submit"]{color:#1075a4; font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif; font-size:14px; font-weight:bold; cursor:pointer;}
.champ_pseudo{width:140px; margin:0 0 0 0;}
.champ_mot_pass{width:140px; margin:5px 20px 0 0;}
.bouton_entrer{width:70px; height:30px; margin:10px 170px 0 0;}


#deconnexion{position:absolute; width:100px; height:50px; background-color:#ccc; margin:4px 0 0 270px;}






#zone_texte_left{float:left; width:460px; padding:10px;}
#zone_texte_right{float:left; width:458px; padding:10px; border-left:1px solid #bbb; direction:rtl;}

#zone_texte_left ul{margin:5px 0 0 20px;}
#zone_texte_right ul{margin:5px 20px 0 0;}
#zone_texte_left li{list-style-type:circle; color:#43750d; font-family:Tahoma, Geneva, sans-serif; font-size:13px; margin:2px 0 5px 0;}
#zone_texte_right li{list-style-type:circle; color:#43750d; font-family:Tahoma, Geneva, sans-serif; font-size:14px; margin:2px 0 5px 0;}















/*--------------------------------style de la page charger un fichier image-------------------------------------------------------*/
#page_charger_photo #zone_contenu{width:500px; text-align:center; margin:0 auto;}
.bouton_uploader{display:block; width:100%; height:100px; height:35px; cursor:pointer; margin:20px 0 0 0;}





/*------------------------------styles de la page des statestiques-------------------------------------------------------*/
#zone_statestiques{width:480px; margin:20px auto;}
#right{float:right; margin:2px 50px 0 0;}
#left{float:right; margin:2px 1px 0 0;}		

#right a{display:block; width:275px; text-align:right; text-decoration:none; color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:14px; background-image:url(images/fond_bouton_right.jpg); background-repeat:repeat-x; border-radius:0 6px 6px 0; padding:16px 10px 16px 5px;}
#left a{display:block; width:100px; text-align:center; color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:14px; background-image:url(images/fond_bouton_left.jpg); background-repeat:repeat-x; border-radius:6px 0 0 6px; padding:16px 0 16px 0;}

#right a:hover{background-image:url(images/fond_bouton_left.jpg);}





/*------------------------------styles de la page getsion des comptes-------------------------------------------------------*/
#page_gestion_comptes #tableau_enveloppe_infos{border:1px solid #ccc; padding:2px; margin:10px 0 0 0;}
#page_gestion_comptes #formulaire_authentification{width:250px; direction:rtl; border-radius:6px; border:1px solid #cfa9a6; padding:10px; margin:10px 0 0 88px;}

.champ_user{width:140px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:12px; padding:2px; margin:0 3px 0 0;}
.champ_pass_user{width:140px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:12px; padding:2px; margin:5px 23px 0 0;}
#page_gestion_comptes #formulaire_authentification .champ_email {width:140px; font-size:12px; margin:5px 8px 0 0;}
#page_gestion_comptes #formulaire_authentification .champ_select_wilaya {width:140px; font-size:12px; margin:5px 52px 0 0;}
#page_gestion_comptes #formulaire_authentification .champ_tel {width:140px; font-size:12px; margin:5px 39px 0 0;}
#page_gestion_comptes #formulaire_authentification .bouton_charger_info {margin:20px 0 0 0;}





/*------------------------------styles de la page etat des comptes-------------------------------------------------------*/
#page_etat_compte #zone_left {width:450px; direction:rtl;}
#page_etat_compte #zone_right {width:345px; direction:rtl; margin-left:36px;}
#page_etat_compte #tableau_enveloppe_infos{border:1px solid #ccc; padding:2px; margin:20px 0 0 0;}
#page_etat_compte #formulaire_authentification{width:345px; direction:rtl; border-radius:6px; border:1px solid #cfa9a6; padding:10px;}

#page_etat_compte .champ_user{width:200px; font-size:14px; padding:2px; margin:0 5px 0 0;}
#page_etat_compte .champ_pass_user{width:200px; font-size:14px; padding:2px; margin:5px 16px 0 0;}
#page_etat_compte #formulaire_authentification .champ_email {width:200px; font-size:14px; margin:5px 4px 0 0;}
#page_etat_compte #formulaire_authentification .champ_select_wilaya {width:200px; font-size:14px; margin:5px 48px 0 0;}
#page_etat_compte #formulaire_authentification .champ_tel {width:200px; font-size:14px; margin:5px 23px 0 0;}

#page_etat_compte #formulaire_authentification strong{margin:0 3px 0 3px;}





/*-----------------------------------------styles de la page de l'impression-------------------------------------------------------*/
#page_impression{background-image:none;}
#page_impression #zone_contenu{background-image:none; margin-top:30px;}

#page_impression #formulaire_inscription{width:560px; direction:rtl; border-radius:6px; border:1px solid #cfa9a6; padding:30px;}
#page_impression #formulaire_inscription label{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:16px;}

#page_impression #formulaire_inscription .champ_nom{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_prenom{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_select_sexe{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_dateN{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_lieuN{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_select_si-fa{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_select_si-so{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_select_niv-sco{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_adresse{border:hidden; width:400px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:16px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_select_wilaya{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_codeCo{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_email{border:hidden; width:400px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_tel{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_fax{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_mobilis{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_djezy{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ-nedjma{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_select_AEJ{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}
#page_impression #formulaire_inscription .champ_select_AAJ{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:8px 4px 0 0;}

#page_impression #formulaire_authentification{width:280px; direction:rtl; border-radius:6px; border:1px solid #cfa9a6; padding:20px; margin-left:150px;}
#page_impression #formulaire_authentification label{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:15px;}
#page_impression #formulaire_authentification .champ_matricule{border:hidden; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:18px; padding:2px; margin:0 20px 0 0;}

#page_impression #zone_confirmation{width:220px; margin-top:50px;}
#page_impression #zone_confirmation p{font-size:16px;}

#zone_signature{width:400px; direction:rtl; margin:160px 0 0 500px;}
#zone_signature p{font-size:18px;}









/*-----------------------------------------style de la page des web masters-------------------------------------------------------*/

#page_webmaster #zone_texte_left{float:left; width:460px; padding:10px;}
#page_webmaster #zone_texte_right{float:left; width:458px; padding:10px; border-left:1px solid #bbb; direction:ltr;}

#page_webmaster #tableau_enveloppe_infos{border:1px solid #ccc; padding:2px; margin:10px 0 10px 0;}

#page_webmaster #zone_texte_right #tableau_enveloppe_infos{margin-left:55px;}
#page_webmaster #zone_texte_right h1{margin-left:55px;}











/*-----------------------------------------style de la carte a imprimer-------------------------------------------------------*/
div#Impressioncarte{
background-image:url('images/carte.jpg');
width: 6cm;
height: 8cm;
padding:0px;

}

#Impressioncarte {width:300px; height:300px;
	background-image: url('images/carte.jpg');
	margin:20px 0 0 400px;
}



/*----------------------------------------------------STYLES EN GENERALE----------------------------------------------------------------------------*/


















/*styles des tableau*/
#tableau_enveloppe_infos{border:1px solid #ccc; padding:2px; margin:10px 0 30px 20px;}
.cellule{padding:4px 2px 4px 6px; border-bottom:1px solid #fff;}
.cellule_right{padding:4px 2px 4px 6px; border-bottom:1px solid #fff; border-left:1px solid #fff;}



/*styles des titres*/
.titre_moyen_bleu{color:#3a556a; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold;}
.titre_petit_bleu{color:#3a556a; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px; font-weight:bold;}
.titre_petit_ocre{color:#ba3906; font-family:"Adobe Arabic"; font-size:18px; font-weight:bold;}


/*styles des liens*/
.lien_petit_bleu{color:#06F; text-decoration:underline; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px;}
.lien_petit_bleu:hover{color:#C06;}


/*style barre de navigation avec des fleches de direction */
#zone_fleches{width:600px; border:1px solid #cfa9a6; padding:5px; margin:5px auto 2px auto; text-align:center;color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:15px; }
#zone_fleches label{color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:15px;}

.champ_pages{width:60px; color:#1075a4; font-family:Tahoma, Geneva, sans-serif; font-size:14px; padding:2px; margin:5px 4px 0 0;}

.login-link {
    text-decoration: none;
    color: #0d6efd;
    font-weight: 500;
}

.login-link:hover {
    text-decoration: underline;
}

.btn-group {
    display: flex;
    align-items: center;
}

.btn-gap {
    margin-bottom: 10px;
}
.btn-row {
    display: flex;
}

.badge-toggle:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.badge-toggle:active {
    transform: scale(0.95);
}
.badge-toggle {
    pointer-events: auto !important;
}


.exemple {
    background: #f0f0f0;
    padding: 20px;
}

.boite {
    border: 3px solid black;
    width: 200px;
    height: 100px;
    display: inline-block;
    font-weight: bold;
}

/* BOÎTE 1 : PADDING SEULEMENT */
.boite1 {
    background: lightblue;
    padding: 30px; /* Espace INTÉRIEUR */
    margin: 0;     /* Pas d'espace extérieur */
}

/* BOÎTE 2 : MARGIN SEULEMENT */
.boite2 {
    background: lightgreen;
    padding: 0;    /* Pas d'espace intérieur */
    margin: 30px;  /* Espace EXTÉRIEUR */
}

/* BOÎTE 3 : LES DEUX */
.boite3 {
    background: lightcoral;
    padding: 15px; /* Espace intérieur */
    margin: 15px;  /* Espace extérieur */
}
.bm1 {
   background-color:red; 
   color:white;
}