/* ==========================================================================
   @3-GLOBAL
   ========================================================================== */
/** Correctif permettant d'émuler la propriété border-radius sur IE6/7/8*/
.old-ie .box {
  behavior: url(border-radius.htc);
}

.primary {
  color: #1c99d5;
}

/* GRILLE ET POINTS DE RUPTURES TABLETTE / DESKTOP
  ========================================================================== */
.old-ie header, .old-ie footer, .old-ie section, .old-ie hgroup, .old-ie aside, .old-ie nav, .old-ie article, .old-ie figure, .old-ie figcaption, .old-ie time, .old-ie dialog {
  display: block;
}

.row {
  min-height: 1px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.row:first {
  padding: 0;
  margin: 0;
}

.col {
  min-height: 1px;
  /*width: 100%;*/
  overflow: hidden;
  margin-bottom: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.col:first {
  padding: 0;
  margin: 0;
}

.grid-1 {
  float: left;
  margin-right: 3.06748%;
  width: 5.52147%;
}

.middle-1 {
  float: left;
  width: 7.05521%;
}

.last-1 {
  float: left;
  width: 5.52147%;
}

.grid-2 {
  float: left;
  margin-right: 3.06748%;
  width: 14.11043%;
}

.middle-2 {
  float: left;
  width: 15.64417%;
}

.last-2 {
  float: left;
  width: 14.11043%;
}

.grid-3 {
  float: left;
  margin-right: 3.06748%;
  width: 22.69939%;
}

.middle-3 {
  float: left;
  width: 24.23313%;
}

.last-3 {
  float: left;
  width: 22.69939%;
}

.grid-4 {
  float: left;
  margin-right: 3.06748%;
  width: 31.28834%;
}

.middle-4 {
  float: left;
  width: 32.82209%;
}

.last-4 {
  float: left;
  width: 31.28834%;
}

.grid-5 {
  float: left;
  margin-right: 3.06748%;
  width: 39.8773%;
}

.middle-5 {
  float: left;
  width: 41.41104%;
}

.last-5 {
  float: left;
  width: 39.8773%;
}

.grid-6 {
  float: left;
  margin-right: 3.06748%;
  width: 48.46626%;
}

.middle-6 {
  float: left;
  width: 50%;
}

.last-6 {
  float: left;
  width: 48.46626%;
}

.grid-7 {
  float: left;
  margin-right: 3.06748%;
  width: 57.05521%;
}

.middle-7 {
  float: left;
  width: 58.58896%;
}

.last-7 {
  float: left;
  width: 57.05521%;
}

.grid-8 {
  float: left;
  margin-right: 3.06748%;
  width: 65.64417%;
}

.middle-8 {
  float: left;
  width: 67.17791%;
}

.last-8 {
  float: left;
  width: 65.64417%;
}

.grid-9 {
  float: left;
  margin-right: 3.06748%;
  width: 74.23313%;
}

.middle-9 {
  float: left;
  width: 75.76687%;
}

.last-9 {
  float: left;
  width: 74.23313%;
}

.grid-10 {
  float: left;
  margin-right: 3.06748%;
  width: 82.82209%;
}

.middle-10 {
  float: left;
  width: 84.35583%;
}

.last-10 {
  float: left;
  width: 82.82209%;
}

.grid-11 {
  float: left;
  margin-right: 3.06748%;
  width: 91.41104%;
}

.middle-11 {
  float: left;
  width: 92.94479%;
}

.last-11 {
  float: left;
  width: 91.41104%;
}

.grid-12 {
  float: left;
  margin-right: 3.06748%;
  width: 100%;
}

.middle-12 {
  float: left;
  width: 101.53374%;
}

.last-12 {
  float: left;
  width: 100%;
}

.grid-f-1 {
  float: left;
  margin-right: 15px;
  width: 54px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-1 {
  float: left;
  width: 69px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-1 {
  float: left;
  width: 54px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-2 {
  float: left;
  margin-right: 15px;
  width: 123px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-2 {
  float: left;
  width: 138px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-2 {
  float: left;
  width: 123px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-3 {
  float: left;
  margin-right: 15px;
  width: 192px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-3 {
  float: left;
  width: 207px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-3 {
  float: left;
  width: 192px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-4 {
  float: left;
  margin-right: 15px;
  width: 261px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-4 {
  float: left;
  width: 276px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-4 {
  float: left;
  width: 261px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-5 {
  float: left;
  margin-right: 15px;
  width: 330px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-5 {
  float: left;
  width: 345px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-5 {
  float: left;
  width: 330px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-6 {
  float: left;
  margin-right: 15px;
  width: 399px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-6 {
  float: left;
  width: 414px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-6 {
  float: left;
  width: 399px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-7 {
  float: left;
  margin-right: 15px;
  width: 468px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-7 {
  float: left;
  width: 483px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-7 {
  float: left;
  width: 468px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-8 {
  float: left;
  margin-right: 15px;
  width: 537px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-8 {
  float: left;
  width: 552px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-8 {
  float: left;
  width: 537px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-9 {
  float: left;
  margin-right: 15px;
  width: 606px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-9 {
  float: left;
  width: 621px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-9 {
  float: left;
  width: 606px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-10 {
  float: left;
  margin-right: 15px;
  width: 675px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-10 {
  float: left;
  width: 690px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-10 {
  float: left;
  width: 675px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f_11 {
  float: left;
  margin-right: 15px;
  width: 744px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-11 {
  float: left;
  width: 759px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-11 {
  float: left;
  width: 744px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.grid-f-12 {
  float: left;
  margin-right: 15px;
  width: 813px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.middle-f-12 {
  float: left;
  width: 828px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.last-f-12 {
  float: left;
  width: 813px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Table Base */
table {
  font-family: arial;
  max-width: 100%;
  background-color: transparent;
  border-collapse: collapse;
  border-spacing: 0;
}

.table {
  width: 100%;
  /*margin-bottom: 20px;*/
}

.table th,
.table td {
  font-weight: normal;
  font-size: 12px;
  padding: 8px 15px;
  line-height: 20px;
  text-align: left;
  vertical-align: middle;
  border-top: 1px solid #dddddd;
}

.table thead th {
  background: #eeeeee;
  vertical-align: bottom;
}

.table tbody > tr:nth-child(odd) > td,
.table tbody > tr:nth-child(odd) > th {
  background-color: #fafafa;
}

.table .t-small {
  width: 5%;
}

.table .t-medium {
  width: 15%;
}

.table .t-status {
  font-weight: bold;
}

.table .t-active {
  color: #46a546;
}

.table .t-inactive {
  color: #e00300;
}

.table .t-draft {
  color: #f89406;
}

.table .t-scheduled {
  color: #049cdb;
}

/* Small Sizes */
@media (max-width: 480px) {
  .table-action thead {
	display: none;
  }

  .table-action tr {
	border-bottom: 1px solid #dddddd;
  }

  .table-action td {
	border: 0;
  }

  .table-action td:not(:first-child) {
	display: block;
  }
}
/* Général
  ========================================================================== */
.clear {
  clear: both;
  margin: 0;
  padding: 0;
  font-size: 1px !important;
  height: 0 !important;
}

.end, .last {
  margin-right: 0 !important;
}

hr {
  display: block;
  clear: both;
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #a5a5a5;
  margin: 15px 0 15px 0;
  padding: 0;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}

.floatLeft {
  float: left;
}

img.floatLeft {
  margin-right: 30px;
}

.floatRight {
  float: right;
}

.weight {
  font-weight: bold;
}

.widthAuto {
  width: 95%;
}

img, a img, a:visited img, a:hover img, a:focus img, a:active img {
  border: none;
}

a:visited, a:hover, a:focus, a:active {
  border: none;
  outline: 0;
}

body {
  /*width: 100%;
  height: 100%;*/
  margin: 0;
  padding: 0;
  background: url(img/bg.jpg);
  border-top: 5px solid #1c9ad5;
}

/*#page section{
	overflow: hidden;
	margin-top:30px;
}*/
.intro {
  font: 1em/21px "open_sansregular", Arial, sans-serif;
  color: #a5a5a5;
}

.overflowHidden {
  overflow: hidden;
}

.pointilles {
  border: 1px dashed #454545;
}

.formulaire .niveau2 {
  padding-left: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.niveau2 {
  padding-left: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.chapo {
  background: #e7e7e7;
  font: 1em 'open_sansregular', Arial, sans-serif;
  padding: 27px;
}

.complement {
  padding-top: 3px;
}

/* -------------------------------- @texte en info-bulle ----------------------------*/
/*exemple 1*/
/*<div class="grid-5">
	<span>Vous n'êtes pas satisfait d'e-Benefits ?<br />
	<abbr data-tip="Pourquoi souhaitez-vous
	supprimer votre compte ?"<br />Supprimer mon compte</abbr></span>
</div>*/
[data-tip] {
  /* on sélectionne l'attribut data-tip */
  position: relative;
  cursor: help;
  border-bottom: 1px dotted #aaa;
}

[data-tip]:hover:after {
  content: attr(data-tip);
  /* on récupère la valeur de l'attribut data-tip */
  position: absolute;
  top: -1em;
  left: 105%;
  white-space: nowrap;
  /* no wrapping */
  padding: 5px 10px;
  background: #FFFFFF;
  color: #212121;
  border: 1px solid #1c99d5;
}

/*exemple 2*/
/*<div class="grid-5">
<p>Vous n'êtes pas satisfait d'e-Benefits ?<br /><a href="#" class="info">Supprimer mon compte<span class="contenu">Pourquoi souhaitez-vous
supprimer votre compte ?<br />
<select class="grid-8">
  <option value="">Sélectionner</option>
  <option value="">Option 1</option>
  <option value="">Option 2</option>
  <option value="">Option 3</option>
</select></span></a></p>
</div>*/
a.info {
  position: relative;
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px gray dotted;
  /* On souligne le texte. */
}

a.info span.contenu {
  display: none;
  /* On masque l'infobulle. */
}

a.info:hover {
  background: none;
  /* Correction d'un bug d'Internet Explorer. */
  z-index: 9999;
  /* On définit une valeur pour l'ordre d'affichage. */
  cursor: help;
  /* On change le curseur par défaut par un curseur d'aide. */
}

a.info:hover span.contenu {
  display: inline;
  /* On affiche l'infobulle. */
  position: absolute;
  white-space: nowrap;
  /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
  top: -3em;
  /* On positionne notre infobulle. */
  left: 105%;
  background: white;
  color: #212121;
  padding: 10px;
  border: 1px solid #1c99d5;
}

/* -------------------------------- Messages d'info ----------------------------*/
.message {
  color: #1c99d5;
}

/* -------------------------------- Texte variable ----------------------------*/
.variable {
  font-weight: bold;
}

/* -------------------------------- header ----------------------------*/
.bg-header {
  height: 125px;
  overflow: hidden;
  clear: both;
}

#header {
  width: 978px;
  padding: 0 30px;
  height: 125px;
  margin: 0 auto;
}

/* -------------------------------- .logo-adding ----------------------------*/
#header .logo-adding {
  float: left;
  padding: 10px 0 0 0;
  /*margin-right: percentage(185px/978px);*/
}

#header .logo-adding p {
  text-align: center;
  content: #707070;
}

/* -------------------------------- .client ----------------------------*/
#header .client {
  float: right;
  background: url(img/espace-personnel.png) no-repeat;
  background-position: right 0;
}

/* -------------------------------- .logo-entreprise ----------------------------*/
/*#header .logo-entreprise {
  float: left;
  width: 104px;
  height: 65px;
  text-align: center;
  padding: 30px 0 0 50px;
}

#header .logo-entreprise img {
  width: 104px;
  height: 65px;

}*/
#header .logo-entreprise {
  float: left;
  height: 125px;
}

#header .logo-entreprise .degrade,
#header .logo-entreprise .degrade img {
  float: left;
}

#header .logo-entreprise .bg-dimensions {
  float: left;
  background-color: #FFFFFF;
}

#header .logo-entreprise .dimensions {
  width: 100%;
  line-height: 125px;
}

/*img = toujours 80px de haut*/
#header .logo-entreprise .dimensions img {
  vertical-align: middle;
  max-width: 200px;
  max-height: 80px;
}

/* -------------------------------- .espace-personnel ----------------------------*/
#header .espace-personnel {
  float: left;
  /*width: 158px;*/
  padding: 25px 20px 0 60px;
  color: #ffffff;
}

#header .espace-personnel .titre {
  font-size: 12px;
  color: #ffffff;
  padding-bottom: 5px;
}

#header .espace-personnel a {
  color: #ffffff !important;
}

#header .espace-personnel .valign-middle span {
  vertical-align: middle;
}

#header .espace-personnel .arrow-right {
  width: 0;
  height: 0;
  border-bottom: 5px solid transparent;
  /* left arrow slant */
  border-top: 5px solid transparent;
  /* right arrow slant */
  border-left: 5px solid #ffffff;
  /* bottom, add background color here */
  font-size: 0;
  line-height: 0;
  padding-right: 10px;
}

/* #Menu http://letrainde13h37.fr/44/menu-deroulant-accessible-css/
  ========================================================================== */
.bg-nav {
  width: 100%;
  height: 44px;
  background-color: #454545;
}

@media screen and (max-device-width: 768px) {
  .bg-nav {
	width: 1036px;
	height: 44px;
	background-color: #454545;
  }
}
#menuPrincipal {
  /*width: 81.25%;*/
  max-width: 1036px;
  /*max-width: 1040px;*/
  margin: 0 auto;
}

@media screen and (max-device-width: 768px) {
  #menuPrincipal {
	/*width: 81.25%;*/
	width: 980px;
	/*max-width: 1040px;*/
	margin: 0 auto;
  }
}
/* Supprime les styles appliqués par défaut aux listes. S'applique également à la sous-liste */
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  z-index: 9999;
}

.nav a {
  display: block;
  padding: 13px;
  color: #FFFFFF;
  text-decoration: none;
  font: 16px Arial, Helvetica, sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav .first a {
  padding: 11px 11px 10px 11px;
}

.nav a:focus,
.nav a:hover {
  color: #FFFFFF;
  background: #1c9ad5;
  text-decoration: none;
}

.nav-item {
  float: left;
  /* Pour que les liens s’affichent horizontalement */
  position: relative;
  /* Crée un contexte de positionnement pour les sous-listes */
}

.sub-nav {
  display: none;
  /* Masque la sous-liste */
  position: absolute;
  /* Evite que la dimension du conteneur ne change quand la sous-liste est affichée */
  left: 0;
  /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur */
  top: 46px;
  /* FIX IE7 : pour que le sous-menu s’aligne avec son conteneur, on le positionne explicitement en bas du conteneur */
  white-space: nowrap;
  /* Pour que le texte ne revienne pas à la ligne */
  background: #454545;
  /* FIX IE7 : évite que la sous-liste ne disparaisse au moment où le curseur arrive au-dessus */
  margin-top: -2px;
  /* Pour que le sous-menu recouvre son parent, facilitant le passage de la souris de l’un à l’autre */
}

.nav-item:hover .sub-nav {
  display: block;
  /* Affiche cette sous-liste au survol de son conteneur */
}

/* #Search
  ========================================================================== */
.nav .last_4 {
  float: right !important;
}

.search {
  height: 26px;
  padding: 5px;
  margin: 3px 30px 0 0;
  background-color: #616161;
  float: right !important;
}

.search .recherche {
  width: 64.77612%;
  border: 0;
  color: #808080;
  font-style: italic;
  background: url(img/loupe.png) no-repeat 5px 5px white;
  padding-left: 30px !important;
}

.search .btn {
  width: 22.08955%;
  height: 26px;
  padding: 0;
  border: 0;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background-color: #1c9ad5;
  color: #FFFFFF;
  cursor: pointer;
  font-weight: bold;
}

/* Page
  ========================================================================== */
.bg-page {
  width: 100%;
  height: 190px;
  background-color: #1c9ad5;
}

/*@media screen and (max-width: 768px) {
  #page {
	width: 768px;
	margin-left: 5px;
	margin-right: 5px;
	padding: 0 5px 30px 5px;
  }
}*/
#page {
  max-width: 978px;
  padding: 0 30px;
  margin: 0 auto;
  background-color: #FFFFFF;
}

#page .ariane {
  font-size: 0.857em;
  margin: 0 0 15px 0;
  padding: 5px 0 0 0;
}

/* -------------------------------- Info bulles ----------------------------*/
.infoBulle {
  padding: 7px 0 7px 0;
}

.infoBulle-small {
  padding: 3px 0 3px 0;
}

/* Rend invisible tout notre bloc span */
a.lienInfoBulle span,
a.info-bulle-blanche span {
  position: absolute;
  top: -2000em;
  left: -2000em;
  width: 1px;
  height: 1px;
  padding: 10px;
  overflow: hidden;
  background: #FFFFFF;
  /* Définition du fond, sinon on a le même que notre lien */
  border: 1px solid #1c9ad5;
  /* Définition des bordures */
}

a.lienInfoBulle-small span {
  position: absolute;
  top: -2000em;
  left: -2000em;
  width: 1px;
  height: 1px;
  padding: 10px;
  overflow: hidden;
  background: #FFFFFF;
  /* Définition du fond, sinon on a le même que notre lien */
  border: 1px solid #1c9ad5;
  /* Définition des bordures */
}

a.lienInfoBulle,
a.info-bulle-blanche {
  color: #212121 !important;
  text-decoration: none;
  padding: 6px 16px 10px 10px;
  /*Définition des marges intérieures de notre lien */
  /* Définition de l'arrière plan de notre lien */
  background: url(img/info-bulle.png) no-repeat right center;
  /*position: relative;*/
  /* Indispensable pour le bon positionnement de l'info-bulle */
  margin: 0 0 0 10px;
}

a.lienInfoBulle-small {
  color: #212121 !important;
  text-decoration: none;
  padding: 3px 16px 5px 10px;
  /*Définition des marges intérieures de notre lien */
  /* Définition de l'arrière plan de notre lien */
  background: url(img/info-bulle-small.png) no-repeat right center;
  /*position: relative;*/
  /* Indispensable pour le bon positionnement de l'info-bulle */
  margin: 0 0 0 10px;
}

a.info-bulle-blanche {
  color: #212121 !important;
  text-decoration: none;
  padding: 6px 16px 10px 10px;
  /*Définition des marges intérieures de notre lien */
  /* Définition de l'arrière plan de notre lien */
  background: url(img/info-bulle-blanche.png) no-repeat right center;
  /*position: relative;*/
  /* Indispensable pour le bon positionnement de l'info-bulle */
  margin: 0 0 0 10px;
}

a.lienInfoBulle:hover,
a.info-bulle-blanche:hover {
  border: 0;
  /* ligne qui corrige le bug d'IE6 et inférieur */
}

a.lienInfoBulle-small:hover {
  border: 0;
  /* ligne qui corrige le bug d'IE6 et inférieur */
}

/* Rend visible tout notre bloc span et lui attribue une taille */
a.lienInfoBulle:hover span,
a.lienInfoBulle:focus span,
a.lienInfoBulle:active span,
a.info-bulle-blanche:hover span,
a.info-bulle-blanche:focus span,
a.info-bulle-blanche:active span {
  top: auto;
  left: auto;
  width: 320px;
  height: auto;
  overflow: visible;
  z-index: 999999;
}

a.lienInfoBulle-small:hover span,
a.lienInfoBulle-small:focus span,
a.lienInfoBulle-small:active span,
a.info-bulle-blanche-small:hover span,
a.info-bulle-blanche-small:focus span,
a.info-bulle-blanche-small:active span {
  top: auto;
  left: auto;
  width: 320px;
  height: auto;
  overflow: visible;
  z-index: 999999;
}

a.lienInfoBulleHaut:hover span {
	bottom:0px;
	width:auto;
}

a.lienInfoBulle-small img {
	max-width: 320px;
}


/* -------------------------------- .article ----------------------------*/
.article {
  clear: both;
  overflow: hidden;
  margin: 0 0 30px 0;
}

.article img {
  float: left;
  margin: 0 30px 10px 0;
}

/*.article p{
  display: block;
}*/
.somme {
  display: block;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  /*color: #1c9ad5;*/
}

.etape3 #tabs-2 .somme, .etape3 #tabs-3 .somme {
  display: block;
  font-weight: bold;
  font-size: 25px;
  text-align: center;
  /*color: #1c9ad5;*/
}

table .somme {
  display: block;
  font-weight: bold;
  font-size: 14px !important;
  text-align: right !important;
  /*color: #1c9ad5;*/
}

/* -------------------------------- .legende ----------------------------*/
.legende {
  font-weight: bold;
  font-style: italic;
}

.annotation {
  font-style: italic;
}

.noteBasDePage {
  font-size: 12px;
}

.triangle-right {
	margin-left: 25%;
	margin-top: 1.2%;
	margin-right: 2.8%;
	float: left;
	width: 0px;
	height: 0px;
	border-top: 5px solid transparent;
	border-left: 7px solid #1c9ad5;
	border-bottom: 5px solid transparent;
}

/* -------------------------------- TABLE ----------------------------*/
table {
  width: 640px;
  margin: 0;
  padding: 0;
}

table tr td {
  padding: 0 0 0 15px;
  list-style-type: circle;
}

table tr td > td {
  font-size: 12px !important;
}

table .titreTable {
  text-align: left;
  font-weight: bold;
  padding: 5px;
  margin: 15px 0 5px 0;
  background-color: #e1e1e1;
}

/* section
  ========================================================================== */
#page #section,#page .section {
  width: 100%;
  height: auto;
  float: left;
  /*padding:0 0 30px 0;*/
}

/*.col1{
  clear:both;
  margin:0 0 30px 0;
}*/
/*section .col1-2 {
  display: inline-block;
  vertical-align: top;
  width: percentage(473px/980px);
  margin :20px percentage(30px/980px) 0 0;
}*/
/*section .infos-et-conseils .col1-2 {
  width:330px !important;
  padding:0 15px 15px 0;
  float:left;
}*/
section .infos-et-conseils .titre {
  border: none !important;
}

section .first {
  padding-top: 15px;
}

/*2ème colonne à droite de l'autre*/
/*section .col1-2 .col1-2 {
  width: 200px;
  float: left;
}*/
/*2ème colonne à droite de l'autre*/
/*section .col1-2 .col2-2 {
  width: auto;
  float: right;
  padding: 6px 0 6px 0;
  margin: 0;
}*/
/*section .col2-2 {
  display: inline-block;
  vertical-align: top;
  width: percentage(473px/980px);
  margin:20px 0 0 0;
}*/
/*section .col1-3 {
width: 201px;
  padding: 0 10px;
  margin:0 15px 0 0;
  background-color: #e1e1e1;
  float: left;
}*/
/*section .col2-3 {
width: 201px;
  padding: 0 10px;
  margin:0 15px 0 0;
  background-color: #e1e1e1;
  float: left;
}*/
/*section .col3-3 {
width: 201px;
padding: 0 10px;
background-color: #e1e1e1;
float: left;
}*/
/* ------ .etapesSimulation -------*/
.etapesSimulation a.bouton {
  display: inline-block;
  margin: 25px 10px 0 0;
  width: 280px;
  height: 85px;
  line-height: 85px;
  font-size: 24px;
}

.etapesSimulation a.bouton:hover {
  display: inline-block;
  margin: 25px 10px 0 0;
  width: 280px;
  height: 85px;
  line-height: 85px;
}

/* ------ autres simulations -------*/
.autresSimulations .simulation {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 19.4%;
  height: 175px;
  margin-right: 5px;
  float: left;
  text-align: center;
}

/*.autresSimulations .simulation a{
  display: block;
  width: 100%;
  height: 100%;
  color:#212121;
text-decoration: none !important;
	$start: #f2f2f2;
	$stop: #DDDDDD;
	@include filter-gradient($start, $stop); // IE < 10
	@include background-with-css2-fallback(
		linear-gradient(#f2f2f2 85%, #DDDDDD 100%),
		#f2f2f2 // Background simple
	);
}*/
.autresSimulations .simulation a {
  display: block;
  width: 100%;
  height: 100%;
  color: #212121;
  text-decoration: none !important;
  background: #f2f2f2;
}

.autresSimulations .simulation a:hover {
  background: #1c99d5 !important;
  color: #ffffff;
}

.autresSimulations .bg {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 94.59459%;
  height: 100%;
  margin: 0 auto;
  padding: 10px 5px;
}

.autresSimulations .simulation {
  border-bottom: 4px solid #1c9ad5;
}

.autresSimulations .last {
  margin-right: 0 !important;
}

/* ------ .nav-simulation -------*/
.nav-simulation {
  overflow: hidden;
  padding: 10px 15px 10px 15px;
  background-color: #454545;
}

.nav-lightBox {
  overflow: hidden;
  padding: 10px 15px 10px 15px;
  background-color: #454545;
}

.nav-simulation a, .nav-lightBox a {
  color: #ffffff!important;
}

.nav-lightBox input.btnSmallBleu {
  width: 185px !important;
  border: none !important;
}

.next {
  background: url(img/btn-droite.png) right no-repeat !important;
  margin: 0 0 0 15px;
  padding-right: 30px !important;
  padding-left: 30px !important;
  text-align: left;
  height: 50px;
  line-height: 50px;
  color: #FFFFFF;
  float: right;
  cursor: pointer;
  border: none !important;
}

.prev {
  background: url(img/btn-gauche.png) left no-repeat !important;
  margin: 0 0 0 15px;
  padding-right: 30px !important;
  padding-left: 40px !important;
  text-align: left;
  height: 50px;
  line-height: 50px;
  color: #FFFFFF;
  cursor: pointer;
  border: none !important;
  display: inline-block;
}

.next a, .prev a {
  color: #FFFFFF !important;
}

.next a:hover, .prev a:hover {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
}

.next a:hover, .prev a:hover {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none !important;
  border: none !important;
}

/*
.next{
  background: url(img/etape-suivante.png);
  width: 230px;
  height: 48px;
  line-height: 48px;
  float:right;
}

.next a{
  display: inline-block;
  height:100%;
  color:#FFFFFF;
  text-decoration: none;
  padding:0 10px 0 10px;
  font-weight: bold;
}

.next input{
  display: block;
  width: 100%;
  height: 100%;
  border:none !important;
  background: none !important;
  color:#FFFFFF !important;
  cursor: pointer;
  padding:0 30px 0 0 !important;
  font-size: 14px;
}

.prev input{
  display: block;
  width: 100%;
  height: 100%;
  border:none !important;
  background: none !important;
  color:#FFFFFF !important;
  cursor: pointer;
  padding:0 0 0 30px !important;
  font-size: 14px;
}

.prev a:hover{
}

.prev{
  background: url(img/etape-precedente.png);
  width: 105px;
  height: 48px;
  line-height: 48px;
  float:left;
  text-align: center;
  margin: 0 0 0 15px;
}

.prev a{
  display: inline-block;
  width: 100%;
  height:100%;
  color:#FFFFFF;
  text-decoration: none;
  font-size: 14px;
}

.prev a:hover{
}
*/
/* #sidebarGauche
  ========================================================================== */
#sidebarGauche {
  width: 22.65306%;
  float: left;
  margin: 0 3.06122% 0 0;
  padding: 0 0 30px 0;
}

#sidebarGauche ul {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#sidebarGauche ul li {
  width: 100%;
  height: 100%;
  list-style-type: none;
  background-color: #f4f4f4;
  border-bottom: 1px solid #cccccc;
}

#sidebarGauche ul li a {
  display: block;
  padding: 22px 0 22px 15px;
  list-style-type: none;
  color: #212121;
  font: 1.2em 'open_sansregular', Arial, sans-serif;
}

#sidebarGauche ul li a:active {
  text-decoration: none;
  color: #FFFFFF;
  background: #1c9ad5 url(img/fleche-contacts.jpg) no-repeat right center;
}

#sidebarGauche ul li a:hover {
  text-decoration: none;
  color: #FFFFFF;
  background: #1c9ad5 url(img/fleche-contacts.jpg) no-repeat right center;
}

#sidebarGauche ul li a.active {
  text-decoration: none;
  color: #FFFFFF;
  background: #1c9ad5 url(img/fleche-contacts.jpg) no-repeat right center;
}

/* #sidebarDroite
  ========================================================================== */
/*#sidebarDroite {
  width: 222px;
  float:left;

  padding:0 0 30px 0;
}*/
/*margin:28px 0 0 30px;*/
#sidebarDroite .titre {
  background-color: #f4f4f4;
  border-bottom: 2px solid #1c9ad5;
  padding: 10px;
}

#sidebarDroite .bg {
  background-color: #e7e7e7;
}

#sidebarDroite .mot {
  color: #1c99d5;
  font-size: 1.286em;
}

/*.titre a:hover, .simulation .titre a:hover{
  background-color:#1c9ad5;
  color:#FFFFFF;
  text-decoration: none;
}


.mes-documents section a:hover, .simulation section .titre a:hover{
  background:none !important;
}*/
/* img */
#sidebarDroite img, .simulation img {
  float: none !important;
  padding: 0 10px 0 0;
}

/* lienTitre */
#sidebarDroite .lienTitre, .simulation .lienTitre {
  display: block;
  width: auto;
  height: 100%;
  padding: 10px;
  /* espace interne du conteneur */
}

/* vAlign */
#sidebarDroite .vAlign, .simulation .vAlign {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  margin: 0 !important;
}

.vAlign {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  /*margin: 0 !important;*/
}

#sidebarDroite .h4 {
  width: 70%;
  /*width:155px;*/
  font-weight: bold;
}

#sidebarDroite .titre a:hover .h4 {
  color: #FFFFFF;
}

#sidebarDroite .texte {
  padding: 15px 0 0 0;
}

#sidebarDroite .contenu {
  background-color: #f3f3f3;
  padding: 10px;
}

a.bouton, a.btn {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #a5a5a5;
  float: right;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
}

a.bouton:hover, a.btn:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1c9ad5;
  float: right;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.boutonLeft,
a.btnLeft,
button.boutonLeft,
button.btnLeft {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #a5a5a5;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

a.boutonLeft:hover,
a.btnLeft:hover,
button.boutonLeft:hover,
button.btnLeft:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1c9ad5;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

a.btn1 {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #a5a5a5;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
  clear: both;
}

a.btn1:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1c9ad5;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btn2 {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #a5a5a5;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
}

a.btn2:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1c9ad5;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btnMediumBleu {
  display: inline-block;
  width: 82%;
  padding: 10px;
  background-color: #1c99d5;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
}

a.btnMediumBleu:hover {
  display: inline-block;
  width: 82%;
  padding: 10px;
  background-color: #1881b4;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btnBigBleu {
  display: inline-block;
  /*width:82%;*/
  padding: 20px;
  background-color: #1c99d5;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
}

a.btnBigBleu:hover {
  display: inline-block;
  /*width:82%;*/
  padding: 20px;
  background-color: #1881b4;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btnSmallBleu, .btnSmallBleu {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1c9ad5;
  float: right;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
}

a.btnSmallBleu:hover, .btnSmallBleu:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1881b4;
  float: right;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btnSmallBleu2, .btnSmallBleu2 {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1c9ad5;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
}

a.btnSmallBleu2:hover, .btnSmallBleu2:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
  background-color: #1881b4;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btnXSmallBleu {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 25px;
  line-height: 25px;
  background-color: #1c9ad5;
  float: right;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
}

a.btnXSmallBleu:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 25px;
  line-height: 25px;
  background-color: #1881b4;
  float: right;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btnXSmallGris {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 0 15px;
  height: 25px;
  line-height: 25px;
  background-color: #a5a5a5;
  float: right;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  text-decoration: none;
}

a.btnXSmallGris:hover {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 25px;
  line-height: 25px;
  background-color: #1c9ad5;
  float: right;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

a.btnXXSmallBleu {
  display: inline-block;
  /*width: 168px;*/
  width: auto;
  padding: 5px;
  height: 33px;
  line-height: 15px;
  background-color: #a5a5a5;
  color: #FFFFFF;
  text-align: center;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  text-decoration: none;
  vertical-align: top;
}

a.btnXXSmallBleu:hover {
  display: inline-block;
  width: auto;
  padding: 5px;
  height: 33px;
  line-height: 15px;
  background-color: #1c9ad5;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
}

input.btnSmallBleu {
  border: 0;
  padding: 0 15px!important;
}

.boutonFleche, .boutonFleche span {
  float: none!important;
  padding: 0!important;
}

.boutonFleche img {
  display: inline-block;
  vertical-align: text-top;
  width: 8px;
  padding-top: 3px;
  margin: 0 7px 0 0 !important;
  float: none !important;
}

.introA, .introB .boutonFleche span {
  width: 92%;
}

.introA, .introB .boutonFleche {
  margin-top: 10px;
}

#sidebarDroite ul {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#sidebarDroite ul li {
  width: 100%;
  height: 100%;
  list-style-type: none;
  background-color: #f4f4f4;
  border-bottom: 1px solid #cccccc;
}

#sidebarDroite ul li > a {
  display: block;
  padding: 22px 0 22px 15px;
  list-style-type: none;
  color: #212121;
  font: 1.2em 'open_sansregular', Arial, sans-serif;
}

#sidebarDroite ul li > a:active {
  text-decoration: none;
  color: #FFFFFF;
  background: #1c9ad5 url(img/fleche-contacts.jpg) no-repeat right center;
}

#sidebarDroite ul li > a:hover {
  text-decoration: none;
  color: #FFFFFF;
  background: #1c9ad5 url(img/fleche-contacts.jpg) no-repeat right center;
}

/* footer
  ========================================================================== */
#footer {
  max-width: 978px;
  margin: 0 auto;
  padding: 0 30px;
  /*padding-bottom=0; margin à insérer sur siderbar*/
  border-top: 1px solid #454545;
}

#footer ul {
  list-style: none;
  float: right;
  padding: 30px 0 30px 0;
  margin: 0;
}

#footer ul li {
  float: left;
}

#footer ul li a {
  padding: 0 15px 0 0;
}


td.highlighted-Points{
	background:url('/img/list-marker-check.png') no-repeat 92% 50% #7fc7e5;
	color:white;
	opacity:0.8;
	filter: alpha(opacity=80);
}

.error-Points {
	background-color:red;
	color:white;
	opacity:0.6;
	filter: alpha(opacity=60);
}

/*.k-grid-content {
	overflow-y: auto !important;
}

.k-grid-header-wrap {
	width: 102.7% !important;
}

.k-grid-footer-wrap {
	width: 101% !important;
}*/