/*
	Project		: FruiTrop online
	Author		: Maximilien LELEU <maximilien.leleu@actimage.com>
	Revision	: Janvier 2018
	Description	: Contient l’ensemble des règles du gabarit principal (squelette) du projet
				  
	Copyright	: ACTIMAGE
*/
body {
  color: #333;
  background-color: #ffffff;
  font: 1.3em Arial, sans-serif;
}
/********************************/
/*********** COMMON *************/
/********************************/
header,
footer,
nav,
aside,
section,
article {
  display: block;
}
.toggle-menu,
.toggle-zone {
  display: none;
}
/********************************/
/*********** BANNER *************/
/********************************/
#banner-wrapper {
  background-color: #000000;
}
#banner {
  color: #ffffff;
  margin: 0 auto;
  padding: 5px 0;
  width: 1200px;
}
#banner > * {
  display: inline-block;
  vertical-align: middle;
}
/* Langues */
#banner #language img {
  vertical-align: baseline;
}
/* Liens */
#banner .inbl-list li {
  padding: 10px 0;
}
#banner .inbl-list li:before {
  content: "|";
  padding: 0 12px;
}
#banner .inbl-list li:first-child {
  margin-left: 15px;
}
#banner .inbl-list li:first-child:before {
  content: "";
  padding: 0;
}
#banner a {
  color: #ffffff;
}
/* Sous-menu */
#banner ul .submenu {
  display: none;
  position: absolute;
  background: #000000;
  top: 100%;
  z-index: 10;
  padding: 10px 40px;
  width: 200px;
}
#banner ul .submenu li {
  margin: 4px 0 !important;
  font-size: 0.9em;
  padding: 0;
}
#banner ul .submenu li:before {
  display: none;
}
#banner-wrapper ul li {
  position: relative;
}
#banner ul > li:hover .submenu,
#banner ul > li .submenu:hover {
  display: block;
}
/* Recherche */
#quick-search {
  float: left;
  background-color: #ffffff;
  position: relative;
}
#quick-search > input {
  display: inline-block;
  vertical-align: middle;
}
#banner input[type=text] {
  background: none;
  border: none;
  font-size: 0.9em;
  min-width: 150px;
  padding: 0;
}
#banner input[type=submit] {
  background: url(../../images/base/icons/icon-search-input.png) center center no-repeat transparent;
  border: none;
  height: 17px;
  margin-right: 5px;
  padding: 0;
  width: 17px;
}
/********************************/
/************ HEADER ************/
/********************************/
#header-wrapper {
  background-color: #F5F5F5;
  padding-bottom: 40px;
}
#header {
  display: table;
  margin: 0 auto;
  width: 980px;
}
/* Box du header */
.header-box {
  margin: 20px 15px 10px 15px;
  position: relative;
}
#right-menu {
  float: right;
}
#right-menu .btn-menu {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 58px;
  text-align: center;
  background-color: #000000;
  color: #ffffff;
}
#right-menu .btn-menu.search {
  background-color: #b4003c;
  border: none;
  cursor: pointer;
}
#right-menu .btn-menu.search:before {
  font-size: 2.6rem;
  font-family: icons;
  content: '\e902';
}
#right-menu .btn-menu.basket {
  background-color: #6a9c32;
}
#right-menu .btn-menu.basket:before {
  font-size: 2.6rem;
  font-family: icons;
  content: '\e900';
}
#right-menu .btn-menu.basket:hover .counter {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -o-animation-name: pulse;
  animation-name: pulse;
}
#right-menu .btn-menu.account {
  background-color: #574a44;
}
#right-menu .btn-menu.account:before {
  font-size: 2.6rem;
  font-family: icons;
  content: '\e907';
}
#right-menu .counter {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #F5F5F5;
  color: #000;
  font-size: 11px;
  font-family: sans-serif;
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  width: 20px;
  line-height: 20px;
}
#right-menu .btn-container {
  position: relative;
  display: inline-block;
}
#right-menu .btn-container .content-menu {
  color: #000000;
  visibility: hidden;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  margin: 0 !important;
  min-width: 340px;
  background-color: #ffffff;
}
#right-menu .btn-container .content-menu:hover {
  visibility: visible;
}
#right-menu .btn-container .btn-menu:hover + .content-menu,
#right-menu .btn-container .btn-menu:focus + .content-menu {
  visibility: visible;
}
#right-menu #quick-search input[type=text] {
  border: 0;
  height: 60px;
  padding: 0 11px;
  font-size: 22px;
  vertical-align: top;
  text-align: center;
}
#right-menu #basket {
  /* top cart  */
  /* Top Shopping Cart */
}
#right-menu #basket .product-name {
  margin-top: 5px;
  width: 170px;
  line-height: 1;
}
#right-menu #basket .product-name a {
  font-size: 13px;
  line-height: normal;
  font-weight: normal;
  color: #333;
}
#right-menu #basket .pull-right {
  margin-right: 10px;
  padding-top: 3px;
}
#right-menu #basket .basket a {
  border: none;
  color: #ffffff;
}
#right-menu #basket .empty {
  padding: 10px;
}
#right-menu #basket .product-details .btn-remove {
  position: absolute;
  right: 10px;
  top: 4px;
}
#right-menu #basket .block-subtitle {
  color: #fff;
  overflow: hidden;
  padding: 0px 5px;
  text-align: left;
  background: #333;
}
#right-menu #basket .block-subtitle .top-subtotal {
  color: #fff;
  float: left;
  font-size: 14px;
  font-weight: bold;
  padding: 20px 12px;
  text-align: left;
}
#right-menu #basket li.item {
  width: 310px;
  margin: 5px 0 10px;
  border-bottom: 1px #eee solid;
  display: inline-block;
  padding-bottom: 10px;
}
#right-menu #basket li.item.last {
  margin: 0;
  border-bottom: 0px #eee solid;
  padding-bottom: 10px;
}
#right-menu #basket .product-details {
  position: relative;
  text-align: left;
}
#right-menu #basket .mini-products-list .product-details {
  margin-left: 80px;
  padding: 0;
}
#right-menu #basket .btn-edit:hover,
#right-menu #basket .btn-remove:hover,
#right-menu #basket .btn-edit:focus,
#right-menu #basket .btn-remove:focus {
  text-decoration: none;
  color: #fba606;
}
#right-menu #basket .product-details .btn-edit {
  position: absolute;
  right: 30px;
  top: 0;
  font-size: 1.3rem;
}
#right-menu #basket .product-details .btn-edit:before {
  font-family: icons;
  content: '\e903';
}
#right-menu #basket .product-details .btn-remove {
  position: absolute;
  right: 0;
  top: -1px;
  font-size: 1.5rem;
}
#right-menu #basket .product-details .btn-remove:before {
  font-family: icons;
  content: '\e904';
}
#right-menu #basket .actions {
  padding: 20px;
  margin: 0px 0 0;
  overflow: hidden;
}
#right-menu #basket .empty-basket {
  margin: 15px;
}
#right-menu #basket .mini-products-list {
  padding-left: 0;
  margin: 15px;
}
#right-menu #basket .mini-products-list .product-image {
  float: left;
  padding: 0;
  width: 60px;
}
#right-menu #basket .mini-products-list .product-image img {
  width: 60px;
}
#right-menu #basket .price {
  color: #fba606;
  font-weight: bold;
  font-size: 15px;
}
#right-menu #basket .read-all {
  margin-bottom: 15px;
}
#right-menu #account #login-form {
  width: 100%;
}
#right-menu #account #login-form + ul {
  padding-left: 30px;
  margin: 15px 0;
  width: 100%;
}
#right-menu #account fieldset,
#right-menu #account .fieldset-like {
  margin: 0;
  padding: 0;
  border: 0;
}
#right-menu #account fieldset legend,
#right-menu #account .fieldset-like legend,
#right-menu #account fieldset .legend-like,
#right-menu #account .fieldset-like .legend-like {
  color: #fff;
  overflow: hidden;
  margin: 0;
  text-align: left;
  background: #333;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  padding: 20px 12px;
  display: block;
}
#right-menu #account fieldset legend + p,
#right-menu #account .fieldset-like legend + p,
#right-menu #account fieldset .legend-like + p,
#right-menu #account .fieldset-like .legend-like + p {
  margin: 15px 15px 0;
}
#right-menu #account fieldset p,
#right-menu #account .fieldset-like p {
  margin: 15px 15px 0;
  text-align: center;
}
#right-menu #account input[type=text],
#right-menu #account input[type=password] {
  height: 40px;
  width: 100%;
  padding: 0 10px;
  vertical-align: top;
  border: 1px solid #d4d4d4;
}
#right-menu #account input[type=submit] {
  border: none;
}
.header-box fieldset,
.header-box .fieldset-like {
  background-color: #fba606;
  border: none;
  margin: 0;
  padding: 14px 8px 4px 8px;
}
.header-box fieldset {
  padding-right: 0;
}
.header-box fieldset > p,
.header-box .fieldset-like > p {
  display: inline-block;
  margin: 0;
  vertical-align: top;
}
.header-box legend,
.header-box .legend-like {
  background-color: transparent;
  background-position: left top;
  background-repeat: no-repeat;
  display: inline-block;
  font-size: 1.1em;
  font-weight: bold;
  padding: 2px 0 4px 25px;
  position: absolute;
  top: -12px;
}
#login-form legend,
#login-form .legend-like,
#generated-login-form legend,
#generated-login-form .legend-like {
  background-image: url(../../images/base/icons/icon-login.png);
}
#newsletter-subscribe legend,
#generated-newsletter-subscribe legend {
  background-image: url(../../images/base/icons/icon-newsletter.png);
}
/* Logo */
#left-menu {
  float: left;
  text-align: center;
}
#left-menu .slogan {
  font-size: 22px;
  color: #574a44;
  font-family: Boogaloo;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  /*.slogan-titre {
            color: @cirad-green;
            font-weight: bold;
        }

        .slogan-info {
            color: @cirad-red;
        }*/
}
#logo {
  padding: 20px 0;
  display: inline-block;
  height: 140px;
}
#logo img {
  max-height: 100%;
}
/* Colonne 1 */
#header-column1 {
  width: 490px;
}
/* Accès abonnés */
div#login-form {
  width: 460px;
}
#login-form,
#login-form + ul {
  display: inline-block;
}
#login-form legend + p {
  margin-right: 3px;
}
#login-form input[type=text],
#login-form input[type=password] {
  width: 140px;
}
#login-form + ul {
  font-size: 0.9em;
  padding-left: 0;
  vertical-align: bottom;
}
/* Mise en avant du bloc Abonnés */
#login-form:target fieldset,
#login-form:target .fieldset-like,
#login-form.target fieldset,
#login-form.target .fieldset-like {
  background-color: #f37800;
}
#login-form:target .action-list,
#login-form.target .action-list {
  border-color: #f37800;
}
/* Colonne 1 */
#header-column2 {
  width: 200px;
}
/* Panier et Bloc Utilisateur connecté */
.fieldset-like .action-detail {
  background: url(../../images/base/background/list-triangle-white.png) left center no-repeat transparent;
  font-weight: bold;
  list-style: none;
  padding: 2px 0 2px 20px;
}
.fieldset-like .action-detail.action-close {
  background-image: url(../../images/base/background/list-triangle-white-top.png);
}
.action-list {
  background-color: #ffffff;
  border-color: #fba606;
  border-style: solid;
  border-width: 0 2px 2px 2px;
  width: 100%;
  z-index: 100;
}
.action-list ul {
  font-size: 0.9em;
  margin: 0;
  padding: 5px 5px 5px 20px;
}
#login-form .action-list a {
  background: url(../../images/base/background/list-triangle-style4.png) left 4px no-repeat transparent;
  padding-left: 15px;
}
.action-list p {
  font-weight: bold;
  margin: 2px 5px;
}
div#open-login:target {
  display: block;
}
div#open-login {
  display: none;
}
div#open-basket {
  display: none;
}
/* Newsletter */
#newsletter-subscribe input[type=email] {
  width: 130px;
}
#newsletter-subscribe .action-detail {
  font-weight: bold;
  margin-right: 10px;
}
/********************************/
/********** ADVERTISING **********/
/********************************/
.advertise {
  text-align: center;
}
.advertise a {
  display: inline-block;
}
.advertise.flash {
  position: relative;
  border: none;
}
.advertise.flash a {
  display: block;
  position: absolute;
}
#wrapper .advertise a {
  background: none;
  padding: 0;
}
#header .advertise {
  margin: 15px 0 0px 0;
  float: right;
  width: 690px;
  position: relative;
  right: -110px;
  margin-left: -110px;
}
/********************************/
/********** NAVIGATION **********/
/********************************/
#navigation {
  position: relative;
  background: #6a9c32;
  top: -28px;
  width: 1200px;
  margin: 0 auto;
  z-index: 2;
}
#navigation > ul {
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
#navigation > ul > li {
  background-color: #6a9c32;
  display: inline-block;
  background-image: none;
  padding: 0;
}
#navigation > ul > li:first-child > a:before,
#navigation > ul > li:first-child > span:before {
  display: none;
}
#navigation > ul > li:hover > a,
#navigation > ul > li:focus > a,
#navigation > ul > li:hover > span,
#navigation > ul > li:focus > span {
  background-color: #ffffff;
  color: #6a9c32;
  text-decoration: none;
  margin-right: -2px;
}
#navigation > ul > li:hover > a:before,
#navigation > ul > li:focus > a:before,
#navigation > ul > li:hover > span:before,
#navigation > ul > li:focus > span:before {
  color: #ffffff;
}
#navigation > ul > li > a,
#navigation > ul > li > span {
  color: #ffffff;
  display: block;
  font-size: 18px;
  padding: 15px;
  position: relative;
  text-transform: uppercase;
  text-align: center;
  font-family: AlegreyaSansSC;
}
#navigation > ul > li > a:before,
#navigation > ul > li > span:before {
  content: "|";
  position: absolute;
  left: -2px;
}
#navigation > ul > li > span + div {
  left: 0;
  padding: 18px 260px 18px 14px;
  position: absolute;
  top: -3000px;
  transition: position 2s ease;
  z-index: 40;
  background-color: #fff;
  background-position: calc(100% - 30px) 15px;
  background-size: auto calc(100% - 35px);
  background-repeat: no-repeat;
  margin: 0;
  border: none;
  border-top: 5px solid transparent;
  box-shadow: 0 10px 20px -5px;
  width: 100%;
  text-align: left;
}
#navigation > ul > li > span + div.no-image {
  padding-right: 14px;
}
#navigation > ul > li > span:hover + div,
#navigation > ul > li > span + div:hover {
  top: 52px;
}
#navigation > ul > li > span + div:empty {
  border-width: 0;
  padding: 0;
}
.family-image {
  border: 1px solid #33872d;
  float: left;
  padding: 2px;
  max-width: 129px;
}
.family-description {
  background-color: #efefef;
  border-left: 10px solid #fba606;
  padding: 15px;
  margin: 0 0 18px 20px;
  width: calc(100% - 40px);
}
.specific-case .family-products {
  width: 400px;
}
.family-products {
  padding-left: 15px;
}
.family-products li {
  list-style: none;
  display: inline-block;
  margin: 0 20px 5px 0;
}
.specific-case .family-products li {
  display: inline-block;
  margin: 0 0 4px 30px;
}
.family-products a {
  display: block;
  font-size: 15px;
  min-width: 155px;
  padding: 2px 6px;
}
#navigation .flagship a {
  font-weight: bold;
}
/********************************/
/************ CONTENT ***********/
/********************************/
#page {
  background-color: #ffffff;
}
#content {
  margin: 0 auto 40px;
  width: 1200px;
}
#content + .advertise {
  margin-bottom: 40px;
}
#content.cols2 #content-1,
#content.cols2 #content-2 {
  display: inline-block;
  vertical-align: top;
}
#content.cols2 #content-1 {
  padding-right: 30px;
  width: 940px;
}
#content.alternate #content-1 {
  display: block;
}
/* Gestion du overflow pour le float */
.alternate #breadcrumb,
.alternate h1,
.alternate .article-intro,
.alternate .article-info,
.alternate .article-suggest {
  overflow-x: hidden;
}
.alternate .article-suggest {
  width: auto;
}
#content.cols2 #content-2 {
  width: 260px;
}
#content.alternate #content-2 {
  display: block;
  float: right;
}
#content-2 > div,
#content-2 > article {
  margin: 0 0 16px 0;
}
#content-2 > div:last-child {
  margin-bottom: 0;
}
#content-3 {
  margin: 0 auto 40px;
  width: 1200px;
}
#content-3 .grid3 {
  margin: 0 -12px;
}
/***********************************/
/*********** FIL ARIANE ************/
/***********************************/
#breadcrumb,
.page-intro {
  background-color: #F0F0F0;
  margin: 0 0 30px 0;
  padding: 10px;
  border-radius: 0;
}
#breadcrumb .btn-like,
.page-intro .btn-like {
  min-width: 0;
  margin: 2px 2px 2px 0;
  padding: 5px;
}
#breadcrumb p:last-child,
.page-intro p:last-child {
  margin-bottom: 0;
}
#breadcrumb ul {
  padding: 0;
}
#content #breadcrumb li {
  background: url(../../images/base/background/list-tick-menu.png) left center no-repeat transparent;
  display: inline;
  margin: 0 5px;
  padding-left: 10px;
}
#content #breadcrumb li:first-child {
  background: none;
  padding-left: 0;
}
#breadcrumb a,
#breadcrumb span {
  margin: 0 2px;
}
#breadcrumb a {
  color: #333333;
  text-decoration: underline;
}
#breadcrumb a:hover,
#breadcrumb a:focus {
  color: #b4003c;
  text-decoration: none;
}
/********************************/
/************ FOOTER ***********/
/********************************/
#footer {
  background: linear-gradient(to bottom right, #f5f5f5, #dad6c5);
  color: #574a44;
}
#footer .container {
  border-collapse: separate;
  border-spacing: 20px 25px;
  display: table;
  table-layout: fixed;
  width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
}
#footer .container > *:not(script) {
  display: table-cell;
  vertical-align: middle;
}
#footer .container > *:not(script):nth-child(1) {
  text-align: center;
}
#footer h2 {
  white-space: nowrap;
}
#footer .pub {
  background-color: #FFF;
  background-image: url(../../images/base/tmp/pub.jpg);
  background-size: cover;
  min-height: 245px;
  padding: 0 10px 0 110px;
  vertical-align: middle;
  text-align: right;
  overflow: hidden;
  position: relative;
}
#footer .pub:before {
  content: '';
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#footer .pub > * {
  position: relative;
  z-index: 1;
}
#footer .pub h2 {
  padding-top: 30px;
}
#footer .pub p a {
  display: block;
}
#footer .partners {
  text-align: center;
  background-color: #f9f9f9;
}
#footer .partners h2 {
  padding-top: 20px;
}
#footer .partners .owl-item {
  padding: 0 20px;
}
#footer .partners .partner-img {
  height: 90px;
  position: relative;
  margin-bottom: 20px;
}
#footer .partners .partner-img img,
#footer .partners .partner-img .no-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
#footer .partners .partner-img img {
  max-height: 100%;
  width: auto;
}
#footer .partners .partner-img .no-img {
  font-family: Boogaloo;
  font-size: 20px;
  width: 100%;
}
#footer .staticmap .address {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 30px;
  margin-top: 10px;
  text-align: center;
}
#footer .to-top {
  background-image: url(../../images/base/background/white-pattern.png);
  background-position: top center;
  display: block;
  text-align: center;
}
#footer .to-top span {
  font-size: 2em;
  padding: 10px 0;
  display: inline-block;
}
#footer .big {
  line-height: 1.4;
}
#footer ul li {
  margin-bottom: 5px;
}
#footer ul a {
  font-size: 15px;
}