/* Mise en forme du body */

body { background-color:#ffffff; background-image:url(../images/bg.gif); background-position: top; background-repeat: repeat-x; margin: 0px 0px 0px 0px;}



/* ID(#) - Mise en forme de la page en DIV -  */

#header { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height:153px; width: 100%; background-image:url(../images/header.jpg); background-size: auto 153px; background-repeat: no-repeat; padding: 0px; position: relative; }

#menu { margin: 0 auto; width: 800px; padding: 0; position: relative; }

#sheader { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height:24px; width: 100%;}

#contenuBg {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height:auto; width: 100%; padding: 0px; display: flex; align-items: flex-start;}

#boiteMenuG{width: 207px; min-width: 207px; height: auto; margin: 0; padding: 0;}
#boiteMenuG a:link {color: #556074; text-decoration: none;}
#boiteMenuG a:visited {color: #556074; text-decoration: none;}
#boiteMenuG a:hover {color: #556074; text-decoration: underline;}
#boiteMenuG p {font-size: 11px;}

#boiteTexte{flex: 1; min-width: 0; height: auto; padding: 0px 33px 0px 14px;}

#boiteMenuD{width: 207px; min-width: 207px; height: auto; margin: 0; padding: 0;}
#boiteMenuD a:link {color: #ffffff; text-decoration: none;}
#boiteMenuD a:visited {color: #ffffff; text-decoration: none;}
#boiteMenuD a:hover {color: #ffffff; text-decoration: underline;}

#footer {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height: 67px; width: 100%; background: url(../images/bgFooter.gif) repeat-x; text-align:center; background-color: #fff;}
#menufooter {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height: 40px; width: 100%; text-align:center; padding: 0;}
#menufooter p {font-size: 11px;}

.spacer {
  flex: 1;
}

/* CLASS - Mise en forme des textes */

p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #556074;}

ul { padding:0; margin:auto; margin: 0px 0px 0px 0px;}
li { font-family: Verdana, Arial; margin: 0px 5px 0px 0px; }

.imagePositionGauche { padding-right :20px; float:left;}

/* Titre */

.titre {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; color: #2d93c1; font-weight: bold;}
.soustitre {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #FF6666; font-weight: bold;}
.titreMenu {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold;}
.titreMenuB {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #2c91c0; font-weight: bold; margin: 0px 0px 0px 0px; padding-left: 30px; background: url(../images/menuBg.gif) repeat-y;}

/* Autre textes */

.texte {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #556074;}
.textePetit {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #556074;}

.elementMenu {background-color: #fff; background: url(../images/menuE.gif) no-repeat; height: 21px; width: 162px; margin: 0px 0px 0px 0px; padding-top:7px; padding-left: 45px; padding-bottom: 0px;}
.elementMenuG {background-color: #fff; background: url(../images/menuE2.gif) no-repeat; height: 21px; width: 162px; margin: 0px 0px 0px 0px; padding-top:7px; padding-left: 45px; padding-bottom: 0px;}
.elementMenuV {background-color: #fff; background: url(../images/bgMenuGV.gif) no-repeat; height: 17px; width: 177px; margin: 0px 0px 0px 0px; padding-top:4px; padding-left: 30px; padding-bottom: 0px;}
.elementMenuB {background-color: #fff; background: url(../images/bgMenuGB.gif) no-repeat; height: 17px; width: 177px; margin: 0px 0px 0px 0px; padding-top:4px; padding-left: 30px; padding-bottom: 0px;}

.tiret {background: url(../images/tiret.gif) no-repeat; height: 1px; width: 207px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
.tiretD {background: #e2e3e4 url(../images/tiretPx.gif) repeat; height: 1px; width: 207px; margin: 0px 0px 0px 0px;}

/* Liens par d�fault */

a:link {color: #2ca1d7; text-decoration: underline;}
a:visited {color: #2ca1d7; text-decoration: underline;}
a:hover {color: #2ca1d7; text-decoration: none;}

/* Liens pour MENU DES ONGLETS - Doir �tre appliqu� sur la cellule <td> ou tableau est non sur le texte*/

.menu a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: none;}
.menu a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: none;}
.menu a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: underline;}
.menu{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #fff; text-decoration: none; text-align:center;}

.menuPadding {width: 150px; padding-top: 8px; margin: 0px; vertical-align:top; background: url(../images/boutonNActif.gif) no-repeat; background-size: 100% 100%;}
.menuSeparateur {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; width: 1px;}

/* === FORMULAIRE DE CONNEXION (header) === */

#login-zone {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

#login-error {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #fff;
  background: rgba(180, 0, 0, 0.75);
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 5px;
  text-align: center;
}

#login-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}

#login-form input[type="text"],
#login-form input[type="password"] {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 5px 8px;
  width: 130px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.88);
  color: #333;
  box-sizing: border-box;
}

#login-form input[type="text"]:focus,
#login-form input[type="password"]:focus {
  outline: none;
  border-color: #fff;
  background: #fff;
}

#btn-login {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #2ca1d7;
  color: #fff;
  border: 1px solid #fff;
  padding: 5px 14px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
#btn-login:hover { background: #2075a0; }

/* Zone connecté */
#login-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

#login-username {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}

#logout-form { margin: 0; padding: 0; }

#btn-logout {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
#btn-logout:hover { background: rgba(255, 255, 255, 0.35); }

@media (max-width: 768px) {
  #login-zone {
    position: static;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
  }
  #login-form { flex-wrap: wrap; justify-content: flex-end; }
  #login-form input[type="text"],
  #login-form input[type="password"] { width: 140px; }
}

/* === MENU RESPONSIVE === */

#menu-toggle {
  display: none;
  width: 100%;
  background: #2ca1d7;
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
#menu-toggle:hover { background: #2075a0; }

#menu-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 51px;
  width: 100%;
}

/* margin:0 écrase la règle globale li { margin: 0px 5px 0px 0px } */
#menu-nav .menuItem {
  flex: 1;
  margin: 0;
  padding: 0;
  background: url(../images/boutonNActif.gif) no-repeat center;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}
#menu-nav .menuItem + .menuItem { margin-left: 1px; }

#menu-nav .menuItem.actif {
  background-image: url(../images/boutonActif.gif);
}

/* L'ancre remplit toute la cellule pour maximiser la zone cliquable */
#menu-nav .menuItem a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
#menu-nav .menuItem a:link,
#menu-nav .menuItem a:visited { color: #fff; text-decoration: none; }
#menu-nav .menuItem a:hover  { color: #fff; text-decoration: underline; }

@media (max-width: 768px) {
  #menu-toggle { display: block; }

  #menu-nav {
    display: none;
    flex-direction: column;
    height: auto;
    width: 100%;
  }
  #menu-nav.open { display: flex; }

  #menu-nav .menuItem {
    flex: none;
    width: 100%;
    height: 40px;
    background: #2ca1d7;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  #menu-nav .menuItem.actif { background: #1a7aa8; }
  #menu-nav .menuItem + .menuItem { margin-left: 0; }
}

/* Liens pour le menu vertical RUBRIQUE - Doir �tre appliqu� sur la cellule <td> ou tableau ou DIV est non sur le texte*/

.rubriqueD a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #5e7a1c; text-decoration: none; font-weight: bold;}
.rubriqueD a:visited {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;  color: #5e7a1c; text-decoration: none; font-weight: bold;}
.rubriqueD a:hover {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #383c47; text-decoration: none; font-weight: bold;}
.rubriqueD{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #383c47; text-decoration: none; text-align:left; font-weight: bold;}


/* A appliquer a form */

.formulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #4e4e4e; border: 0px; background-color: #fff; margin: 0px 0px 0px 0px; padding-top: 15px; padding-left:17px;}
.boiteFormulaire {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #6f6f6f; border: 1px solid #e2e3e4; background-color: #fff; padding-top:2px; padding-bottom:2px; padding-left: 5px; font-weight:normal;}
.formMenu {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#6f6f6f; font-weight:normal; margin: 0px 0px 0px 0px}