/**
 * mtxnav.css — style de la navigation principale meilleurtauxpro (porté de l'ancien header.css).
 *
 * Reproduit le look d'origine : barre sombre horizontale, libellés blancs gras
 * en majuscules, survol orange (#ff9600), déroulants "richlayer" stylés + bloc promo.
 *
 * Adaptations volontaires (contexte Cassiopeia / standalone) :
 *   - #nav en position:relative (et non fixed/top:75px qui supposait l'ancien header fixe) ;
 *   - tailles en px (l'ancien site posait html{font-size:62.5%}, absent ici) ;
 *   - ouverture du déroulant en CSS :hover (l'ancien site utilisait jQuery slideToggle).
 *
 * Dépend de 2 images : /images_html/img/border-orange.jpg et /images_html/img/li-richlayer.png
 */

/* ---- Barre de navigation ---- */
#nav {
  background-color: #1a171b;
  min-height: 55px;
  width: 100%;
  font-family: 'Lato', Arial, Helvetica, sans-serif;
  position: relative;
}
#nav .wrap-nav {
  margin: 0 auto;
  max-width: 1240px;
  position: relative;
}
#nav ul.first-nav {
  display: table;
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
}
#nav ul.first-nav,
#nav ul.first-nav > li {
  position: relative;
  vertical-align: middle;
}
#nav ul.first-nav > li {
  border-left: 1px solid #323232;
  display: table-cell;
  height: 55px;
  padding: 0 25px;
  text-align: center;
}
#nav ul.first-nav > li:first-child {
  background: none;
  border-left: 0;
  padding: 0 10px;
  text-align: center;
}
#nav ul.first-nav > li:first-child > a {
  border-left: 0;
  padding-left: 0;
}
#nav ul.first-nav > li.bordercolor {
  border-color: #323232 !important;
}
#nav ul.first-nav > li.home .active {
  background-position: -2px -62px;
}

/* libellés de 1er niveau */
#nav ul.first-nav > li > .block_click > a,
#nav ul.first-nav > li > .block_click > span,
#nav ul.first-nav > li > a,
#nav ul.first-nav > li > span {
  box-sizing: border-box;
  color: #fff;
  display: inline;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  cursor: pointer;
}
.block_click > .sub-link-nav {
  display: block;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}

/* états actif / survol -> orange */
#nav ul.first-nav > li.active > a,
#nav ul.first-nav > li.active > span,
#nav ul.first-nav > li.current > a,
#nav ul.first-nav > li.current > span,
#nav ul.first-nav > li.active > .block_click a,
#nav ul.first-nav > li.active > .block_click span,
#nav ul.first-nav > li:hover > a,
#nav ul.first-nav > li:hover > span,
#nav ul.first-nav > li > .block_click:hover > a,
#nav ul.first-nav > li > .block_click:hover > span,
#nav ul.first-nav > li > a:hover,
#nav ul.first-nav > li > span:hover {
  color: #ff9600;
}

/* ---- Déroulant "richlayer" ---- */
#nav ul.first-nav > li:last-child .richlayer {
  left: auto;
  right: 0;
}
#nav .richlayer {
  background-color: #fff;
  border: 9px solid #c1c1c1;
  box-shadow: 0 5px 0 0 #949495;
  box-sizing: border-box;
  display: none;
  left: 0;
  padding: 20px;
  position: absolute;
  top: 55px;
  width: 296px;
  z-index: 101;
  list-style: none;
  margin: 0;
  text-align: left;
}
/* ouverture au survol (remplace le slideToggle jQuery d'origine) */
#nav ul.first-nav > li:hover > .richlayer {
  display: block;
}
#nav .richlayer li {
  list-style: none;
}
#nav .richlayer .span-data,
#nav .richlayer a {
  background: url(/images_html/img/li-richlayer.png) no-repeat left 12px;
  color: #000;
  display: block;
  font-size: 13px;
  padding: 10px 0 10px 18px;
  text-align: left;
  text-decoration: none !important;
  transition: all .2s ease;
}
#nav .richlayer .span-data:hover,
#nav .richlayer a:hover,
#nav .richlayer .current .span-data,
#nav .richlayer .current a {
  background: url(/images_html/img/li-richlayer.png) #1a171b no-repeat 220px 12px;
  color: #fff;
}
#nav .richlayer .span-data {
  cursor: pointer;
}

/* ---- Bloc promo dans un déroulant ---- */
#nav .block-richlayer {
  margin-top: 10px;
}
#nav .block-richlayer .cta {
  background-image: none !important;
  font-size: 16px;
  text-align: center;
  display: block;
  color: #ff9600;
  cursor: pointer;
}
#nav .block-richlayer .cta span {
  display: inline-block;
  padding: 16px 0 10px;
}
#nav .block-richlayer .big-title {
  background: url(/images_html/img/border-orange.jpg) left 37px repeat-x;
  display: block;
  text-align: center;
}
#nav .block-richlayer .big-title span {
  background-color: #fff;
  color: #ff9600;
  display: inline-block;
  font-size: 45px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  padding: 0 2px;
  position: relative;
}
#nav .block-richlayer p {
  font-size: 20px;
  line-height: 1.2;
  margin: 15px 0;
  text-align: left;
  color: #000;
}
#nav .block-richlayer p strong {
  font-weight: 700;
}

/* responsive léger (repris de l'ancien) */
@media only screen and (max-width: 1100px) {
  #nav ul.first-nav > li { padding: 0; }
}