/* Version: 1.6.0 */

/*****************************************************/
/*********************** RESET ***********************/
/*****************************************************/

* {
  margin: 0;
  padding: 0;
  border: none;
  text-decoration: none;
  list-style: none;
  font-size: 1em;
}

img {
  display: block;
}

button:focus,
input[type="button"]:focus {
  outline: 0;
}

/* Suppression des fleches */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/*****************************************************/
/********************** GENERAL **********************/
/*****************************************************/

body {
  font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.25em;
  font-weight: 400;
  color: #333333;
}

button {
  font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a {
  color: #333333;
}

.wrap {
  margin: 0 auto;
  max-width: 320px;
}

.connection-req {
  clear: both;
  margin: 10px 0 0 0;
  padding: 15px 0;
  font-size: 1em;
  line-height: 1.5em;
  text-align: center;
  background: #e4e4e4;
}

.connection-req span {
  cursor: pointer;
  font-weight: 700;
}

.connection-req span:hover {
  color: #a21a3f;
}

.connection-req .public-price {
  font-size: 1.5em;
  font-weight: 700;
  color: #1a9da2;
}

.connection-req .public-price i {
  font-size: 0.75em;
  font-style: normal;
}

.scrollup {
  display: none;
  height: 0;
}

@media screen and (min-width: 480px) {
  .wrap {
    max-width: 740px;
  }
}

@media screen and (min-width: 960px) {
  .wrap {
    max-width: 960px;
  }

  .scrollup {
    position: fixed;
    z-index: 9999;
    bottom: 150px;
    right: calc(((100% - 960px) / 4) - 50px);
    width: 100px;
    height: auto;
    padding: 30px 0 10px 0;
    background-image: url(images/scroll_top.png);
    background-position: center 10px;
    background-repeat: no-repeat;
    background-color: #FFF;
    border-radius: 5px;
    font-weight: 700;
    vertical-align: middle;
    text-align: center;
    color: #a21a3f;
    cursor: pointer;
  }

  .scrollup:hover {
    color: #333333;
    background-image: url(images/scroll_top_black.png);
  }
}


/*****************************************************/
/*********************** LOADING *********************/
/*****************************************************/

.loading {
  width: 100%;
  padding: 40px 0;
  text-align: center;
}

.loading p {
  padding: 0 0 20px 0;
  font-size: 1.5em;
  font-weight: 700;
  color: #cccccc;
  text-transform: uppercase;
}

.loading i {
  font-style: normal;
}

.loading img {
  display: inline-block;
}

#top-sale-loading {
  line-height: 205px;
}

#specials-offers-loading {
  padding: 0 0 30px 0;
}

#top-sale-loading img {
  vertical-align: middle;
}

#doc-loading {
  margin: 0 0 0 3.125%; /* 10px @320px */
  width: 93.75%; /* 300px @320px */
}

@media screen and (min-width: 480px) {
  #top-sale-loading {
    line-height: 215px;
  }

  #doc-loading {
    margin: 0 0 0 2.702702702702703%; /* 20px @740px */
    width: 94.59459459459459%; /* 700px @740px */
  }
}

@media screen and (min-width: 960px) {
  #top-sale-loading {
    line-height: 345px;
  }

  #doc-loading {
    margin: 0 0 0 26.5625%; /* 255px @960px */
    width: 73.4375%; /* 705px @960px */
  }
}

/*****************************************************/
/************************* DOCS **********************/
/*****************************************************/

/* Slideshow */

specials-offers {
  display: none;
}

.offer-slide {
  width: 100%;
}

@media screen and (min-width: 480px) {
  specials-offers {
    display: block;
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }

  specials-offers .owl-carousel {
    width: 100%;
    margin: 0;
  }

  specials-offers .owl-carousel .owl-item {
    margin: 0;
  }
}

@media screen and (min-width: 960px) {
  specials-offers {
    width: 100%;
    margin: 0;
  }

  specials-offers .owl-controls {
    display: block;
    opacity: 1;
    position: relative;
    z-index: 1000;
    width: 100%;
    height: 35px;
    top: 0;
    left: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  specials-offers .owl-pagination,
  specials-offers .owl-buttons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    line-height: 100%;
  }

  specials-offers .owl-buttons {
    opacity: 0;
    -webkit-transition: opacity 0.35s ease-in-out;
    -moz-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out;
  }

  specials-offers:hover .owl-buttons {
    opacity: 1;
  }

  specials-offers .owl-pagination {
    z-index: 1500;
    width: 84.375%; /* 810px @960px */
    margin: 0 7.8125%; /* 75px @960px */
    text-align: center;
  }

  specials-offers .owl-page {
    display: inline-block;
    width: 26px;
    height: 15px;
    margin: 10px 0 0 5px;
    background: url(images/puce.png) left center no-repeat;
  }

  specials-offers .owl-page:hover,
  specials-offers .owl-page.active {
    background: url(images/puce_h.png) left center no-repeat;
  }

  specials-offers .owl-buttons div {
    height: 100%;
    width: 7.8125%; /* 75px @960px */
    line-height: 100%;
  }

  specials-offers .owl-buttons div img {
    width: 100%;
    vertical-align: middle;
  }

  specials-offers .owl-prev {
    float: left;
    background: url(images/slide_prev.png) left center no-repeat;
    background-size: auto;
  }

  specials-offers .owl-prev:hover {
    background-image: url(images/slide_prev_h.png);
  }

  specials-offers .owl-next {
    margin: 0 0 0 92.1875%; /* 885px @960px */
    background: url(images/slide_next.png) right center no-repeat;
    background-size: auto;
  }

  specials-offers .owl-next:hover {
    background-image: url(images/slide_next_h.png);
  }
}

/* Page promotions & catalogues */

.catalogues-headline {
  background-image: url(images/img_cat/catalogues.jpg);
}

.specials-offers-headline {
  background-image: url(images/img_cat/promotions.jpg);
}

.doc {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  padding: 15px;
  border: 1px solid #e4e4e4;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.doc-img {
  width: 100%;
  background-image: url(images/eye.png);
  background-position: center;
  background-repeat: no-repeat;
}

.doc-img img {
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -ms-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
}

.doc-img img:hover {
  opacity: 0.5;
}

.doc-name {
  margin: 20px 0 0 0;
  padding: 10px 10px 8px 10px;
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  background-color: #1a9da2;
  color: #FFFFFF;
}

.doc-date {
  margin: 20px 0 0 0;
  font-size: 1.25em;
  line-height: 1.25em;
  font-style: italic;
  text-align: center;
}

.doc-dl {
  display: block;
  width: 100%;
  margin: 20px 0 0 0;
  font-size: 1.25em;
  line-height: 1.25em;
  color: #a21a3f;
  text-align: center;
}

.doc-dl:before {
  content: url(images/dl.png);
  margin: 0 10px 0 0;
}

.doc-dl:hover {
  text-decoration: underline;
}

@media screen and (min-width: 480px) {
  .doc {
    display: inline-block;
    vertical-align: top;
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    padding: 20px;
  }

  .doc-img {
    display: inline-block;
    vertical-align: top;
    width: 35%;
  }

  .doc div {
    display: inline-block;
    vertical-align: top;
    width: 65%;
  }

  .doc-name {
    margin: 0;
    padding: 0 0 0 20px;
    background-color: #FFFFFF;
    font-size: 2em;
    color: #1a9da2;
    text-align: left;
  }

  .doc-date {
    padding: 0 0 0 20px;
    font-size: 1em;
    font-style: italic;
    text-align: left;
  }

  .doc-dl {
    padding: 0 0 0 20px;
    font-size: 1em;
    line-height: 1em;
    text-align: left;
  }
}

@media screen and (min-width: 960px) {
  #doc-wrap {
    margin: 0 0 0 24.47916666666667%; /* 235px @960px */
    width: 73.4375%; /* 705px @960px */
    min-height: 710px;
  }

  .doc {
    width: 97.16312056737589%; /* 685px @705px */
  }
}


/*****************************************************/
/********************** CLEARANCE ********************/
/*****************************************************/

#clearance-sheet-wrap {
  display: flex;
  /*flex-wrap: wrap;*/
  margin: 40px auto 0;
  width: 100%;
}

/*
.clearance-sheet-article {
    width: 33.333333%;
}
*/

.clearance-sheet-article img {
  width: 100%;
}

/*****************************************************/
/********************** TOP SALE *********************/
/*****************************************************/

/* Owl carousel */

.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.owl-carousel {
  display: none; /* display none until init */
  position: relative;
  width: 100%;
  -ms-touch-action: pan-y;
}

.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper-outer {
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out;
}

.owl-carousel .owl-item {
  float: left;
  margin: 20px 0 0 0;
}

.owl-controls .owl-page,
.owl-controls .owl-buttons div {
  cursor: pointer;
}

.owl-controls {
  display: none;
}

.grabbing {
  cursor: url(grabbing.png) 8 8, move; /* mouse grab icon */
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Panneaux */

.top-sale-title {
  width: 93.75%; /* 300px @320px */
  margin: 40px auto 0;
  padding: 0 0 10px 0;
  border-bottom: 2px solid #1a9da2;
  font-size: 1.75em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #1a9da2;
}

.top-sale-section {
  border: 1px solid #e4e4e4;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 3.125%; /* 10px @320px */
  padding: 3.333333333333333%; /* 10px @300px */
}

.top-sale-section a img {
  width: auto;
  height: 130px;
  margin: 0 5% 10px 0;
  float: left;
}

.top-sale-name {
  min-height: 36px;
}

.top-sale-name a {
  font-size: 1em;
  line-height: 1.25em;
  text-transform: uppercase;
  color: #a21a3f;
}

.top-sale-name a:hover {
  text-decoration: underline;
}

.top-sale-ref {
  margin: 10px 0 0 0;
  font-style: italic;
}

.top-sale-section .top-sale-quant {
  clear: both;
  padding: 15px 0 0 0;
}

.quant-decrease,
.quantity,
.quant-increase {
  display: inline-block;
  width: 28%;
  height: 35px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}

.quantity {
  font-size: 1.25em;
  line-height: 1.25em;
}

.quant-decrease {
  margin: 0 0 0 8%;
  background-image: url(images/minus.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  background-color: transparent;
  cursor: pointer;
}

.quant-decrease:hover {
  background-image: url(images/minus-h.png);
  background-size: auto 100%;
}

.quant-increase {
  background-image: url(images/plus.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  background-color: transparent;
  cursor: pointer;
}

.quant-increase:hover {
  background-image: url(images/plus-h.png);
  background-size: auto 100%;
}

.top-sale-price {
  display: inline-block;
  width: 50%;
  margin: 15px 0 0 0;
  font-size: 1.5em;
  line-height: 1.75em;
  font-weight: 700;
  color: #1a9da2;
  text-align: center;
  background-color: #e4e4e4;
}

.top-sale-price i {
  font-size: 0.6em;
  line-height: 1em;
  font-style: normal;
}

.top-sale-add {
  float: right;
  width: 50%;
  margin: 15px 0 0 0;
  padding: 10px 0;
  line-height: 1.3em;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #1a9da2 url(images/buy_arrow_grey.png) no-repeat left center;
  cursor: pointer;
}

.top-sale-add:hover {
  background-color: #10676a;
}

@media screen and (min-width: 480px) {
  .top-sale-title {
    width: 94.59459459459459%; /* 700px @740px */
  }

  .owl-carousel {
    width: 91.89189189189189%; /* 680px @740px */
    margin: 0 0 0 4.054054054054054%; /* 30px @740px */
  }

  .top-sale-section {
    margin: 0 2.941176470588235%; /* 10px @340px */
    padding: 3.125%; /* 10px @320px */
  }
}

@media screen and (min-width: 960px) {
  .top-sale-title {
    width: 95.83333333333333%; /* 920px @960px */
  }

  .owl-carousel {
    width: 93.75%; /* 900px @960px */
    margin: 0 0 0 3.125%; /* 30px @960px */
  }

  .owl-controls {
    display: block;
    opacity: 0;
    position: absolute;
    -webkit-transition: opacity 0.35s ease-in-out;
    -moz-transition: opacity 0.35s ease-in-out;
    transition: opacity 0.35s ease-in-out;
    z-index: 0;
    width: 106.6666666666667%; /* 960px @900px */
    height: 100%;
    top: 0;
    left: -3.333333333333333%; /* 30px @900px */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .owl-carousel:hover .owl-controls {
    opacity: 1;
  }

  .owl-buttons {
    height: 95%;
    padding: 2% 0 0 0;
    line-height: 100%;
  }

  .owl-buttons div {
    height: 100%;
    line-height: 100%;
  }

  .owl-buttons div img {
    width: 100%;
    vertical-align: middle;
  }

  .owl-prev {
    float: left;
    width: 3.125%; /* 30px @960px */
    background: url(images/prev.png) center no-repeat;
    background-size: auto;
  }

  .owl-prev:hover {
    background-image: url(images/prev-h.png);
  }

  .owl-next {
    width: 3.125%; /* 30px @960px */
    margin: 0 0 0 96.875%; /* 930px @960px */
    background: url(images/next.png) center no-repeat;
    background-size: auto;
  }

  .owl-next:hover {
    background-image: url(images/next-h.png);
  }

  .top-sale-section .top-sale-quant {
    margin: 10px 0 0 0;
    padding: 10px 0 0 0;
    background-color: #e4e4e4;
  }

  .top-sale-price {
    display: block;
    width: 100%;
    margin: 0;
    padding: 5px 0 0 0;
  }

  .top-sale-add {
    float: none;
    width: 100%;
    margin: 0;
    padding: 15px 0 5px 0;
    background: #1a9da2 url(images/buy_arrow_green.png) no-repeat top center;
  }

  .top-sale-add:hover {
    background: #10676a url(images/buy_arrow_darkgreen.png) no-repeat top center;
  }

  .top-sale-section {
    margin: 0 4.444444444444444%; /* 10px @225px */
    padding: 4.878048780487805%; /* 10px @205px */
  }

  .top-sale-section a img {
    height: 180px;
    float: none;
    margin: 0 auto;
  }

  .top-sale-name, .top-sale-ref {
    text-align: center;
    margin: 10px 0 0 0;
  }
}


/*****************************************************/
/*********************** CONTENT *********************/
/*****************************************************/

#content-wrap {
  width: 100%;
  margin: 10px 0 0 0;
}

@media screen and (min-width: 480px) {
  #content-wrap {
    margin: 20px 0 0 0;
  }
}

@media screen and (min-width: 960px) {
  #content-wrap {
    position: relative;
  }
}

/* Index */

#content-menu {
  display: block;
  width: 100%;
}

#content-menu ul li {
  display: inline-block;
  margin: 10px 0 0 3.125%; /* 10px @320px */
  width: 45.3125%; /* 145px @300px */
  background-repeat: no-repeat;
  background-size: contain;
}

#idx-heating {
  background-image: url(images/img_home/cata_bg_chauffage.jpg);
}

#idx-sanitary {
  background-image: url(images/img_home/cata_bg_sanitaire.jpg);
}

#idx-plumbing {
  background-image: url(images/img_home/cata_bg_plomberie.jpg);
}

#idx-electricity {
  background-image: url(images/img_home/cata_bg_electricite.jpg);
}

#idx-equipement {
  background-image: url(images/img_home/cata_bg_outillage.jpg);
}

#idx-zinc {
  background-image: url(images/img_home/cata_bg_zinguerie.jpg);
}

#idx-parts {
  background-image: url(images/img_home/cata_bg_piece.jpg);
}

#idx-clearence {
  background-image: url(images/img_home/cata_bg_destockage.jpg);
}

#content-menu ul li a img {
  width: 100%;
  opacity: 1;
  transition: opacity .35s ease-in-out;
  -moz-transition: opacity .35s ease-in-out;
  -webkit-transition: opacity .35s ease-in-out;
}

#content-menu ul li a img:hover {
  opacity: 0;
}

@media screen and (min-width: 480px) {
  #content-menu ul li {
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    width: 29.72972972972973%; /* 220px @740px */
  }
}

@media screen and (min-width: 960px) {
  #content-menu {
    margin: 0 0 0 24.47916666666667%; /* 235px @960px */
    width: 73.4375%; /* 705px @960px */
  }

  #content-menu ul li {
    margin: 20px 0 0 2.836879432624113%; /* 20px @705px */
    width: 30.49645390070922%; /* 215px @705px */
  }
}

/* Sidebar */

#main-sidebar {
  display: block;
  width: 100%;
}

#main-sidebar article {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
}

#main-sidebar article a {
  display: block;
  overflow: hidden;
  color: #FFFFFF;
  background-color: #333333;
}

#main-sidebar h3 {
  padding: 7px 7px 0 7px;
  font-size: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
}

#main-sidebar p {
  padding: 3px 7px 7px 7px;
}

@media screen and (min-width: 480px) {
  #main-sidebar {
    margin: 20px 0 0 0;
  }

  #main-sidebar article {
    display: inline-block;
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    width: 45.94594594594595%; /* 340px @740px */
  }
}

@media screen and (min-width: 960px) {
  #main-sidebar {
    position: absolute;
    top: 0;
    left: 2.083333333333333%;
    width: 22.39583333333333%; /* 215px @960px */
  }

  #main-sidebar article {
    margin: 0 0 9.302325581395349% 0; /* 20px @215px */
    width: 100%;
  }

  #main-sidebar article:last-child {
    margin: 0;
  }

  #main-sidebar article a:hover {
    background-color: #1a9da2;
  }
}

/* Categories Header */

#cat-header {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
}

.cat-headline {
  padding: 6.25%; /* 20px @320px */
  background-repeat: no-repeat;
}

.cat-txt {
  padding: 3.125%; /* 10px @320px */
  background: rgba(255, 255, 255, 0.9);
}

.cat-headline h2 {
  font-size: 2.5em;
  line-height: 1em;
  text-transform: uppercase;
}

.cat-headline p {
  margin: 7px 0 0 0;
}

#cat-heating {
  background-image: url(images/img_cat/chauffage.jpg);
}

#cat-sanitary {
  background-image: url(images/img_cat/sanitaire.jpg);
}

#cat-plumbing {
  background-image: url(images/img_cat/plomberie.jpg);
}

#cat-electricity {
  background-image: url(images/img_cat/electricite.jpg);
}

#cat-equipement {
  background-image: url(images/img_cat/outillage.jpg);
}

#cat-zinc {
  background-image: url(images/img_cat/zinguerie.jpg);
}

#cat-parts {
  background-image: url(images/img_cat/pieces.jpg);
}

#cat-clearence {
  background-image: url(images/img_cat/destockage.jpg);
}

#editherm {
  margin: 20px 0 0 0;
}

#editherm a {
  display: block;
  padding: 10px 85px 10px 10px;
  color: #2a2a7d;
  border: 2px solid #2a2a7d;
  background-image: url(images/editherm_port.png);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#editherm a:hover {
  color: #e95a0b;
}

#editherm a span {
  display: block;
}

#editherm span.big {
  font-size: 1.25em;
  line-height: 1.25em;
  font-weight: bold;
  text-transform: uppercase;
}

#zen-config {
  margin: 20px 0 0 0;
}

#zen-config a {
  display: flex;
  background-color: #1A9DA2;
  cursor: pointer;
  color: #FFFFFF;
  text-transform: uppercase;
  line-height: 1.2;
  font-size: 1.2rem;
}

#zen-config a:hover {
  background-color: #10676a;
}

#zen-text {
  width: 100%;
  padding: 10px 0 10px 10px;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#zen-image {
  min-width: 120px;
  background-image: url(images/config_zen_port.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

@media screen and (min-width: 480px) {
  #cat-header {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }

  .cat-txt {
    padding: 2.702702702702703%; /* 10px @320px */
  }

  .cat-headline {
    padding: 2.702702702702703%; /* 20px @740px */
  }

  #editherm a {
    padding: 10px 270px 10px 10px;
    background-image: url(images/editherm.png);
  }

  #zen-config a {
    position: relative;
    height: 80px;
    align-items: center;
  }

  #zen-text {
    width: calc(100% - 200px);
    padding: 0 0 0 20px;
    font-size: 1.3em;
  }

  #zen-image {
    position: absolute;
    top: -20px;
    right: 0;
    width: 200px;
    height: 120px;
    background-image: url(images/config-zen-small.png);
    background-repeat: no-repeat;
  }
}

@media screen and (min-width: 960px) {
  #cat-header {
    width: 100%;
    margin: 0;
  }

  .cat-headline {
    padding: 2.083333333333333%; /* 20px @960px */
  }

  .cat-txt {
    width: 47%;
    min-height: 160px;
    padding: 1.5%;
    margin: 0 0 0 50%;
  }

  #editherm a {
    display: flex;
    padding: 10px;
    background-size: auto 140%;
  }

  #editherm a span.big,
  #editherm a span {
    display: inline;
    font-size: 1.30em;
    line-height: 30px !important;
  }

  #editherm a span + span {
    margin: 0 0 0 8px;
  }

  #zen-text {
    width: calc(100% - 380px);
    font-size: 1.7em;
  }

  #zen-image {
    width: 380px;
    background-image: url(images/config-zen.png);
  }
}

/* Breadcrumbs */

#breadcrumbs {
  width: 93.75%; /* 300px @320px */
  margin: 30px 0 0 3.125%; /* 10px @320px */
}

#bc-home, .bc-nav {
  display: inline-block;
  margin: 10px 10px 0 0;
  padding: 5px;
  background-color: #e4e4e4;
}

.bc-nav:last-child {
  background-color: #1a9da2;
}

#bc-home a, .bc-nav a, .bc-prod {
  font-weight: 700;
}

.bc-nav:last-child a, .bc-prod {
  color: #FFF;
}

@media screen and (min-width: 480px) {
  #breadcrumbs {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 35px 0 0 2.702702702702703%; /* 40px & 20px @740px */
  }

  #bc-home, .bc-nav, .bc-nav:last-child {
    margin: 5px 5px 0 0;
    padding: 0;
    background-color: transparent;
  }

  #bc-home a, .bc-nav a {
    color: #1a9da2;
  }

  .bc-nav:last-child a, .bc-nav:last-child span.bc-prod {
    color: #333333;
  }

  .bc-nav:before {
    content: "/";
    margin: 0 2px 0 0;
  }

  .bc-prod:before {
    margin: 0 5px 0 0;
  }

  .bc-prod {
    color: #333333;
  }
}

@media screen and (min-width: 960px) {
  #breadcrumbs {
    margin: 40px 0 0 2.083333333333333%; /* 40px & 20px @960px */
    width: 95.83333333333333%; /* 920px @960px */
  }

}

/* Categories */

.masonry-brick {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 20px & 10px @320px */
}

.img-bloc {
  position: relative;
}

.masonry-brick .cat-solo {
  border: 3px solid #1a9da2;
}

.masonry-brick .cat-solo img,
.masonry-brick .cat-sub img {
  width: 100%;
  margin: 0 auto;
  min-height: 287px;
}

.masonry-brick .cat-solo span,
.masonry-brick .cat-sub span {
  position: absolute;
  bottom: 0;
  left: -3px;
  padding: 10px;
  font-size: 1.2em;
  color: #FFF;
  text-transform: uppercase;
  background-color: #1a9da2;
}

.masonry-brick .cat-sub {
  border: 3px solid #f2f2f2;
}

.masonry-brick .cat-sub span.fam-100000000 {
  background-color: #bc0f0f;
}

.masonry-brick .cat-sub span.fam-200000000 {
  background-color: #d78900;
}

.masonry-brick .cat-sub span.fam-300000000 {
  background-color: #1d3a7d;
}

.masonry-brick .cat-sub span.fam-400000000 {
  background-color: #1f9636;
}

.masonry-brick .cat-sub span.fam-500000000 {
  background-color: #8da191;
}

.masonry-brick .cat-sub span.fam-600000000 {
  background-color: #6a0786;
}

.masonry-brick .cat-sub span.fam-700000000 {
  background-color: #12a999;
}

.masonry-brick .cat-sub span.fam-900000000 {
  background-color: #828283;
}

.masonry-brick ul {
  padding: 3.333333333333333%; /* 10px @300px */
}

.masonry-brick ul li {
  padding: 15px 0 0 0;
}

.masonry-brick ul li:before {
  content: ">";
  font-size: 1.35em;
  font-weight: 700;
}

.masonry-brick ul.fam-100000000 li:before,
.masonry-brick ul.fam-100000000 li a:hover {
  color: #bc0f0f;
}

.masonry-brick ul.fam-200000000 li:before,
.masonry-brick ul.fam-200000000 li a:hover {
  color: #d78900;
}

.masonry-brick ul.fam-300000000 li:before,
.masonry-brick ul.fam-300000000 li a:hover {
  color: #1d3a7d;
}

.masonry-brick ul.fam-400000000 li:before,
.masonry-brick ul.fam-400000000 li a:hover {
  color: #1f9636;
}

.masonry-brick ul.fam-500000000 li:before,
.masonry-brick ul.fam-500000000 li a:hover {
  color: #8da191;
}

.masonry-brick ul.fam-600000000 li:before,
.masonry-brick ul.fam-600000000 li a:hover {
  color: #6a0786;
}

.masonry-brick ul.fam-700000000 li:before,
.masonry-brick ul.fam-700000000 li a:hover {
  color: #12a999;
}

.masonry-brick ul.fam-900000000 li:before,
.masonry-brick ul.fam-900000000 li a:hover {
  color: #828283;
}

.masonry-brick ul li a {
  color: #333333;
}

@media screen and (min-width: 480px) {
  .masonry-brick {
    width: 45.94594594594595%; /* 340px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }
}

@media screen and (min-width: 960px) {
  .masonry-brick {
    width: 30.55555555555556%; /* 293.33333px @960px */
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
  }

  .masonry-brick ul li {
    padding: 5px 0 0 0;
  }
}

/* Side produits */

#products-sidebar {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
}

#side-search {
  background-color: #1a9da2;
  padding: 3.333333333333333%; /* 10px @300px */
}

#side-options {
  display: none;
}

#show-options {
  display: none;
}

#show-options-label {
  display: block;
  margin: 10px 0 0 0;
  padding: 10px;
  color: #FFF;
  cursor: pointer;
  background: #10676a url(images/menu_down.png) center right 10px no-repeat;
}

#show-options-label + #show-options:checked {
  background: #10676a url(images/menu_up.png) center right 10px no-repeat;
}

#show-options:checked + #side-options {
  display: block;
}

.side-option {
  padding: 15px;
  background-color: #e4e4e4;
}

#side-search p,
.side-option p {
  margin: 0 0 5px -2px;
  font-size: 1.25em;
  line-height: 1;
  font-weight: 700;
}

#side-search p {
  color: #FFF;
}

#side-search input {
  width: 97%;
  padding: 1.5%;
  border: none;
}

.side-option select {
  width: 100%;
  padding: 1.5%;
  border: none;
}

.min-max-prices {
  display: inline-block;
  width: 47.5%;
}

.min-max-prices + .min-max-prices {
  margin: 0 0 0 5%;
}

.min-max-prices label {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}

.min-max-prices input {
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0 0;
  padding: 0 3.25%;
  width: 85%;
  line-height: 26px;
  text-align: right;


  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.min-max-prices .currency {
  display: inline-block;
  vertical-align: top;
  margin: 5px 0 0 0;
  padding: 0 3.25%;
  width: 15%;
  line-height: 26px;
  background-color: #FFF;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#side-categories li {
  padding: 10px 0 0 0;
}

#side-categories li label {
  cursor: pointer;
}

@media screen and (min-width: 480px) {
  #products-sidebar {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #side-search {
    padding: 1.428571428571429%; /* 10px @700px */
    margin: 10px 0 0 0; /* 10px @700px */
  }

  #show-options-label {
    padding: 1.428571428571429%; /* 10px @700px */
  }

  .min-max-prices {
    width: 48.57142857142857%; /* 340px @700px */
  }

  .min-max-prices + .min-max-prices {
    margin: 0 0 0 2.857142857142857%; /* 20px @700px */
  }

  .min-max-prices input, .min-max-prices .currency {
    line-height: 38px;
    padding: 0 1.5%;
  }

  .min-max-prices input {
    width: 92.5%;
  }

  .min-max-prices .currency {
    width: 7.5%;
  }
}

@media screen and (min-width: 960px) {
  #products-sidebar {
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 2.083333333333333%; /* 20px @960px */
    width: 22.39583333333333%; /* 215px @960px */
  }

  #side-options {
    display: block;
  }

  #show-options-label {
    display: none;
  }

  #side-search,
  .side-option {
    display: block;
    margin: 20px 0 0 0;
    padding: 10px;
  }

  #side-search input {
    width: 96%;
    padding: 2%;
    border: none;
  }

  .side-option li {
    padding: 5px 0 0 0;
  }

  .side-option li input[type="checkbox"] {
    float: left;
    margin: 2px 0 0 0;
  }

  .side-option li label {
    display: block;
    margin: 0 0 0 18px;
  }

  .min-max-prices {
    width: 45.94594594594595%; /* 85px @185px */
  }

  .min-max-prices + .min-max-prices {
    margin: 0 0 0 8.108108108108108%; /* 15px @185px */
  }

  .min-max-prices input, .min-max-prices .currency {
    line-height: 26px;
    padding: 0 3%;
  }

  .min-max-prices input {
    width: 77.5%;
  }

  .min-max-prices .currency {
    width: 22.5%;
  }
}

/* Produits */

#products-wrap {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
}

#products-wrap > .no-result {
  width: 100%;
  border: none;
}

#products-wrap li {
  position: relative;
  margin: 20px 0 0 0;
  border: 3px solid #1a9da2;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#products-wrap li.loading {
  position: relative;
  margin: 20px 0 0 0;
  border: 0;
  width: 100%;
}

.discount-icon {
  position: absolute;
  top: -8px;
  left: -8px;
}

.delivery-icon {
  position: absolute;
  top: 10px;
  right: 10px;
}

.prod-pict {
  display: flex;
  align-items: center;
  height: 270px;
  background: #fff;
  overflow: hidden;
}

.prod-pict img {
  /*width: 100%;*/
  margin: 0 auto;
  max-width: 270px;
  max-height: 270px;
}

.prod-name {
  margin: 15px 0 0 0;
  padding: 0 5%; /* 15px @300px */
  min-height: 57px;
  text-align: center;
}

.prod-name a {
  font-size: 1.25em;
  line-height: 1.25em;
  text-transform: uppercase;
}

.prod-name a:hover {
  text-decoration: underline;
}

.ref {
  white-space: nowrap; /* Evite la cassure du span sur 2 lignes */
  font-style: italic;
  font-weight: 400;
}

.prices {
  position: relative;
  padding: 15px 0 0 0;
  background: #e4e4e4;
}

.p-price, .c-price {
  display: block;
  font-size: 1.5em;
  font-weight: 700;
  width: 50%;
  text-align: center;
}

.p-price i, .c-price i {
  font-size: 0.75em;
  font-style: normal;
  display: block;
}

.p-price {
  float: left;
  border-right: 1px solid #333333;
}

.c-price {
  margin: 0 0 0 50%;
  color: #a21a3f;
}

.new-price {
  display: none;
  position: absolute;
  top: -25px;
  right: 5%;
  width: 40%;
  padding: 0 0 9px 0;
  background: url(images/new_price_arrow.png) no-repeat center bottom;
}

.new-price span {
  display: block;
  padding: 5px 0;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
  background-color: #a21a3f;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.prod-quant {
  padding: 20px 0 0 0;
  background: #e4e4e4;
}

.prod-add button {
  width: 100%;
  margin: 10px 0 0 0;
  padding: 30px 0 15px 0;
  font-size: 1.25em;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #1a9da2 url(images/buy_arrow_green.png) no-repeat center top;
  cursor: pointer;
}

.prod-add button:hover {
  background: #10676a url(images/buy_arrow_darkgreen.png) no-repeat center top;
}

@media screen and (min-width: 480px) {
  #products-wrap {
    width: 97.2972972972973%; /* 720px @740px */
    margin: 20px 0 0 0;
  }

  #products-wrap > .no-result {
    width: 97.22222222222222%; /* 700px @740px */
  }

  #products-wrap li {
    display: inline-block;
    margin: 20px 0 0 2.777777777777778%; /* 20px @720px */
    width: 47.22222222222222%; /* 340px @720px */
  }
}

@media screen and (min-width: 960px) {
  #products-wrap {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    width: 75.52083333333333%; /* 725px @960px */
  }

  #products-wrap > .no-result {
    width: 94.48275862068966%; /* 685px @725px */
  }

  #products-wrap li {
    margin: 20px 0 0 2.758620689655172%; /* 20px @725px */
    width: 45.86206896551724%; /* 332.5px @725px */
  }

  .p-price i, .c-price i {
    display: inline;
  }

  .prod-add button {
    padding: 20px 0 10px 0;
  }
}


/*****************************************************/
/************************ CART ***********************/
/*****************************************************/

#cart-title {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
  font-size: 2em;
  line-height: 1em;
  text-transform: uppercase;
}

#cart-wrap {
  margin: 40px 0 0 0;
}

#cart-header {
  display: none
}

.cart-article {
  position: relative;
  width: 93.75%; /* 300px @320px */
  margin: 0 0 20px 3.125%; /* 10px @320px */
  padding: 10px;
  border: 1px solid #333333;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cart-article div {
  display: inline-block;
  vertical-align: middle;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.cart-article-img,
.cart-article-name,
.cart-article-ref,
.cart-article-quantity {
  width: 100%;
  text-align: center;
}


.cart-article-name,
.cart-article-ref,
.cart-article-price {
  margin: 10px 0 0 0;
}

.cart-article-img img {
  width: 82.5%;
  margin: 0 auto;
}

.cart-article-name a:hover {
  text-decoration: underline;
}

.cart-article-disponibility {
  position: absolute;
  top: 100px;
  right: 10px;
}

.cart-article-discount {
  position: absolute;
  top: 145px;
  right: 10px;
}

.cart-article-ref {
  width: 50%;
  font-size: 1.25em;
  line-height: 30px;
  background-color: #e4e4e4;
}

.cart-article-price {
  width: 50%;
  font-size: 1.25em;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  background-color: #e4e4e4;
}

.cart-article-quantity + .cart-article-price {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  font-size: 1.5em;
  line-height: 1em;
  background-color: #e4e4e4;;
}

.cart-article-quant-decrease,
.cart-article-quant,
.cart-article-quant-increase {
  display: inline-block;
  width: 33.3333333333%;
  height: 50px;
  text-align: center;
  vertical-align: top;
  background-color: transparent;
}

.cart-article-quant {
  -moz-appearance: textfield;
}

.cart-article-quant {
  font-weight: bold;
  font-size: 1.25em;
}

.cart-article-quant-decrease {
  background-image: url(images/minus.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 50%;
  background-color: transparent;
  cursor: pointer;
}

.cart-article-quant-decrease:hover {
  background-image: url(images/minus-h.png);
  background-size: auto 50%;
}

.cart-article-quant-increase {
  background-image: url(images/plus.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 50%;
  background-color: transparent;
  cursor: pointer;
}

.cart-article-quant-increase:hover {
  background-image: url(images/plus-h.png);
  background-size: auto 50%;
}

.cart-article-del {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 35px;
  height: 35px;
  background-image: url(images/trash_m.png);
  background-repeat: no-repeat;
}

#cart-total {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
  font-size: 1.5em;
  line-height: 1.25em;
  text-align: right;
  text-transform: uppercase;
}

#cart-order,
#cart-estimate {
  width: 93.75%; /* 300px @320px */
  padding: 20px 0;
  font-size: 1.25em;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
}

#cart-order {
  margin: 40px 0 0 3.125%; /* 10px @320px */
  background-color: #1a9da2;
}

#cart-order:hover {
  background-color: #10676a;
}

#cart-estimate {
  margin: 20px 0 0 3.125%; /* 10px @320px */
  background-color: #a21a3f;
}

#cart-estimate:hover {
  background-color: #7e0e2c;
}

.cart-article-price_eco {
  font-size: 0.8em;
  font-weight: 200;
}

@media screen and (min-width: 480px) {
  #cart-title {
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
    width: 94.59459459459459%; /* 700px @740px */
    font-size: 4em;
  }

  .cart-article {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 0 0 40px 2.702702702702703%; /* 20px @740px */
    padding: 0 0 10px 0;
    border: none;
    border-bottom: 1px solid #333333;
  }

  .cart-article-img {
    width: 25%;
    margin: 0 2.5% 0 0;
    float: left;
  }

  .cart-article-img img {
    width: 100%;
  }

  .cart-article-name {
    font-size: 1.5em;
    width: 65%;
    height: 45px;
    text-align: left;
  }

  .cart-article-ref,
  .cart-article-price {
    width: 32.5%;
    line-height: 40px;
  }

  .cart-article-price_net {
    line-height: normal;
  }

  .cart-article-price_eco {

    margin-left: 20px;
    font-size: 0.75em;
    line-height: normal;
  }

  .cart-article-quantity {
    width: 32.5%;
  }

  .cart-article-disponibility {
    top: 70px;
    right: 0;
  }

  .cart-article-discount {
    top: 115px;
    right: 0;
  }

  .cart-article-quantity + .cart-article-price {
    width: 32.5%;
    padding: 0;
    font-size: 1.25em;
    line-height: 70px;
    background-color: transparent;
  }

  .cart-article-del {
    position: absolute;
    top: 0;
    right: 0;
  }

  #cart-total {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #cart-order,
  #cart-estimate {
    display: inline-block;
    width: 45.94594594594595%; /* 340px @740px */
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
  }

}

@media screen and (min-width: 960px) {
  #cart-title {
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
    width: 95.83333333333333%; /* 920px @960px */
  }

  #cart-header {
    display: block;
    width: 95.83333333333333%; /* 920px @960px */
    margin: 0 0 20px 2.083333333333333%; /* 20px @960px */
    padding: 5px 0;
    background-color: #e4e4e4;
  }

  .cart-head {
    display: inline-block;
    text-align: center;
    border-right: 1px solid #000000;

    /* box-sizing sort le padding du calcul du width */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  #cart-head-1 {
    width: 39.1304347826087%; /* 360px @920px */
  }

  #cart-head-2 {
    width: 11.41304347826087%; /* 105px @920px */
  }

  #cart-head-3 {
    width: 9.782608695652174%; /* 90px @920px */
  }

  #cart-head-4 {
    width: 10.32608695652174%; /* 95px @920px */
  }

  #cart-head-5 {
    width: 16.30434782608696%; /* 150px @920px */
  }

  #cart-head-6 {
    width: 13.04347826086957%; /* 120px @920px */
    border: none !important;
  }

  .cart-article {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 0 0 20px 2.083333333333333%; /* 20px @960px */
  }


  .cart-article-price, .cart-article-price_net .cart-article-price_eco {
    line-height: 1em !important;
  }

  .cart-article div {
    /*line-height: 50px;*/
  }

  .cart-article-img {
    width: 5.434782608695652%; /* 50px @920px */
    margin: 0;
  }

  .cart-article-name {
    width: 33.69565217391304%; /* 310px @920px */
    padding: 0 5px 0 10px;
    margin: 0;
    height: auto;
    line-height: normal !important;
    font-size: 1em;
  }

  .cart-article-ref {
    width: 11.41304347826087%; /* 105px @920px */
    margin: 0;
    text-align: center;
    font-size: 1em;
    background-color: transparent;
  }

  .cart-article-disponibility,
  .cart-article-discount {
    position: relative;
    top: auto;
    right: auto;
    width: 4.891304347826087%; /* 45px @920px */
  }

  .cart-article-disponibility img,
  .cart-article-discount img {
    vertical-align: middle;
    margin: 0 auto;
  }

  /*.cart-article-price {*/
  /*  line-height: 50px;*/
  /*}*/
  .cart-article-price,
  .cart-article-quantity + .cart-article-price {
    width: 10.32608695652174%; /* 95px @920px */
    padding: 0 5px;
    margin: 0;
    text-align: right;
    font-weight: bold;
    font-size: 1em;
    line-height: 50px;
    background-color: transparent;
  }

  .cart-article-quantity {
    width: 16.30434782608696%; /* 150px @920px */
    padding: 0;
  }

  .cart-article-quant {
    font-size: 1em;
  }

  .cart-article-del {
    position: relative;
    top: auto;
    right: auto;
    width: 2.717391304347826%; /* 25px @920px */
    height: 50px;
    background-image: url(images/trash.png);
    background-position: center right;
  }

  #cart-total {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #cart-order,
  #cart-estimate {
    width: 46.875%; /* 450px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
  }
}

/*****************************************************/
/******************* DELIVERY FORM *******************/
/*****************************************************/

#delivery-form-title {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
  font-size: 2em;
  font-weight: normal;
  line-height: 1em;
  text-transform: uppercase;
}

#delivery-form-wrap {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  border: 3px solid #1a9da2;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#delivery-form-img {
  display: none;
}

#const-site-ref,
#delivery-type,
#reg-add,
#const-site-add,
#store-choices,
#delivery-date,
#observation {
  width: 93.33333333333333%; /* 280px @300px */
  margin: 10px 0 0 3.333333333333333%; /* 10px @300px */
}

#const-site-add div {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 10px 0;
}

.address-options {
  position: absolute;
  top: 42px;
  right: 0;
  z-index: 9999;
  padding: 5px;
  width: 55%;
  background-color: #FFF;
  box-sizing: border-box;
  border: 1px solid #000000;
}

.address-options li {
  padding: 5px;
  cursor: pointer;
}

.address-options li:hover {
  background-color: #e4e4e4;
}

.street-options,
.postcode-options {
  display: none;
}

.delivery-ref-error {
  margin-top: 10px !important;
}

#delivery-form-wrap label {
  display: inline-block;
  width: 45%; /* 135px @300px */
  line-height: 32px;
  vertical-align: middle;
}

#delivery-form-wrap label b {
  font-weight: bold;
  color: #a21a3f;
}

#delivery-form-wrap input,
#delivery-form-wrap select,
#delivery-form-wrap textarea {
  display: inline-block;
  width: 55%; /* 165px @300px */
  padding: 5px;
  vertical-align: middle;
  border: 1px solid #000000;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#observation textarea {
  min-height: 75px;
}

.delivery-input-error {
  border: 1px solid #a21a3f !important;
}

.delivery-form-error {
  margin: 5px 0 0 45%; /* 135px @300px */
  color: #a21a3f;
}

#delivery-type h3 {
  padding: 20px 0 0 0;
  font-size: 2em;
  font-weight: bold;
  color: #a21a3f;
  text-align: center;
  text-transform: uppercase;
}

.delivery-choice {
  margin: 15px 0 0 0;
  padding: 15px 0;
  background-color: #e4e4e4;
  font-size: 1.25em;
  text-align: center;
  cursor: pointer;
  outline: none;
}

.delivery-choice.active,
.delivery-choice:hover {
  background-color: #a21a3f;
  background-image: url(images/white-arrow.png);
  background-position: left center;
  background-repeat: no-repeat;
  color: #FFFFFF;
}

#reg-add p {
  font-size: 1.5em;
  line-height: 1.25em;
  color: #333333;
  text-align: center;
  text-transform: uppercase;
}

#const-site-add .delivery-comp-add {
  margin-left: 45%; /* 135px @300px */
}

#delivery-form-valid {
  width: 93.33333333333333%; /* 280px @300px */
  margin: 30px 0 3.333333333333333% 3.333333333333333%; /* 10px @300px */
  padding: 15px 0 13px 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.5em;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #1a9da2;
  cursor: pointer;
}

#delivery-form-valid:hover {
  background-color: #10676a;
}

#order-confirm-message {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
  font-size: 1.5em;
  line-height: 1.25em;
  text-align: center;
  color: #333333;
}

#order-confirm-message b {
  color: #1a9da2;
}

#order-confirm-home {
  display: block;
  margin: 40px auto 0;
  padding: 10px 0;
  width: 65%;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25em;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #1a9da2;
}

#order-confirm-home:hover {
  background-color: #10676a;
}

#delivery-form-loading {
  width: 93.33333333333333%; /* 280px @300px */
  margin: 30px 0 3.333333333333333% 3.333333333333333%; /* 10px @300px */
}

#delivery-form-loading p {
  margin: 0 0 10px 0;
  font-size: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #1a9da2;
}

#delivery-form-loading img {
  width: 75%;
  margin: 0 auto;
}

@media screen and (min-width: 480px) {
  #delivery-form-title {
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
    width: 94.59459459459459%; /* 700px @740px */
    font-size: 4em;
  }

  #delivery-form-wrap {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #const-site-ref,
  #delivery-type,
  #reg-add,
  #const-site-add,
  #store-choices,
  #delivery-date,
  #observation {
    width: 94.28571428571429%; /* 660px @700px */
    margin: 20px 0 0 2.857142857142857%; /* 20px @700px */
  }

  #const-site-add div {
    margin: 0 0 20px 0;
  }

  .address-options {
    width: 78.57142857142857%;
  }

  #delivery-form-wrap label {
    width: 21.42857142857143%; /* 150px @700px */
  }

  #delivery-form-wrap input,
  #delivery-form-wrap select,
  #delivery-form-wrap textarea {
    width: 78.57142857142857%; /* 550px @700px */
  }

  #const-site-add .delivery-comp-add {
    margin-left: 21.42857142857143%; /* 150px @700px */
  }

  .delivery-form-error {
    margin: 5px 0 0 21.42857142857143%; /* 150px @700px */
  }

  #delivery-form-valid {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 40px 0 2.702702702702703% 2.702702702702703%; /* 20px @740px */
  }

  #order-confirm-message {
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
    width: 94.59459459459459%; /* 700px @740px */
  }

  #order-confirm-home {
    font-size: 1.25em;
    width: 35%;
  }

  #delivery-form-loading p {
    margin: 0 0 10px 0;
    font-size: 1.5em;
  }

  #delivery-form-loading img {
    width: 50%;
  }
}

@media screen and (min-width: 960px) {
  #delivery-form-title {
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
    width: 95.83333333333333%; /* 920px @960px */
  }

  #delivery-form-wrap {
    display: inline-block;
    vertical-align: top;
    width: 54.16666666666667%; /* 520px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #delivery-form-img {
    display: inline-block;
    vertical-align: top;
    width: 37.5%; /* 360px @960px */
    margin: 40px 0 0 4.166666666666667%; /* 40px @960px */
  }

  #delivery-form-img img {
    width: 100%;
  }

  #const-site-ref,
  #delivery-type,
  #reg-add,
  #const-site-add,
  #store-choices,
  #delivery-date,
  #observation {
    width: 92.30769230769231%; /* 480px @520px */
    margin: 20px 0 0 3.846153846153846%; /* 20px @520px */
  }

  #delivery-form-wrap label {
    width: 30.20833333333333%; /* 145px @480px */
  }

  #delivery-form-wrap input,
  #delivery-form-wrap select,
  #delivery-form-wrap textarea {
    width: 69.79166666666667%; /* 335px @480px */
  }

  .address-options {
    width: 69.79166666666667%;
  }

  #const-site-add .delivery-comp-add {
    margin-left: 30.20833333333333%; /* 145px @480px */
  }

  .delivery-form-error {
    margin: 5px 0 0 30.20833333333333%; /* 145px @480px */
  }

  #delivery-form-valid {
    width: 92.30769230769231%; /* 480px @520px */
    margin: 40px 0 3.846153846153846% 3.846153846153846%; /* 20px @520px */
  }

  #order-confirm-message {
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
    width: 95.83333333333333%; /* 920px @960px */
  }

  #order-confirm-home {
    width: 25%;
  }
}

/* MD-CALENDAR */

md-datepicker {
  overflow: visible !important;
}

.md-datepicker-input {
  min-width: inherit !important;
  max-width: none !important;
  width: 100% !important;
}

._md-datepicker-has-triangle-icon {
  display: inline-block;
  width: 55%;
  margin: 0 !important;
  padding: 0 !important;
}

.md-datepicker-triangle-button.md-button.md-icon-button {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.md-datepicker-triangle-button {
  -webkit-transform: none !important;
  transform: none !important;
}

.md-datepicker-expand-triangle {
  left: 92% !important;
}

.md-datepicker-input-container {
  border: none !important;
  display: block !important;
}

.md-default-theme .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator, .md-default-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator, .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator {
  background: #1a9da2 !important;
}

.md-default-theme .md-calendar-date-disabled, .md-calendar-date-disabled, .md-default-theme .md-calendar-month-label-disabled, .md-calendar-month-label-disabled, .md-default-theme .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled, .md-calendar-date.md-calendar-date-today.md-calendar-date-disabled {
  color: #a21a3f !important;
  font-weight: bold;
}

.md-button:not([disabled]).md-focused {
  background-color: transparent !important;
}

@media screen and (min-width: 480px) {
  ._md-datepicker-has-triangle-icon {
    width: 78.57142857142857%;
  }

  .md-datepicker-expand-triangle {
    left: 97% !important;
  }
}

@media screen and (min-width: 960px) {
  ._md-datepicker-has-triangle-icon {
    width: 69.79166666666667%;
  }

  .md-datepicker-expand-triangle {
    left: 96% !important;
  }
}

/*****************************************************/
/************************ USER ***********************/
/*****************************************************/

.alert-bloc {
  width: 93.75%; /* 300px @320px */
  margin: 40px 3.125% 0; /* 10px @320px */
  font-size: 0.8em;
}

#user-name {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
  font-size: 2em;
  line-height: 1em;
  text-transform: uppercase;
}

#user-name b {
  color: #a21a3f;
}

#user-video {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
  text-align: center;
  background-color: #000000;
}

#user-menu {
  margin: 30px 0 0 0;
  display: flex;
  flex-wrap: wrap;
}

#user-provider {
  margin: 30px 0 0 0;
  width: 100%;
}

#user-menu li {
  margin: 10px 0 0 3.125%; /* 10px @320px */
  width: 45.3125%; /* 145px @300px */
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

#user-menu li a img {
  width: 100%;
  opacity: 1;
  transition: opacity .35s ease-in-out;
  -moz-transition: opacity .35s ease-in-out;
  -webkit-transition: opacity .35s ease-in-out;
}

#user-menu li a img:hover {
  width: 100%;
  opacity: 0;
}

#user-ce,
#user-inventory {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
}

#user-ce img,
#user-inventory img {
  width: 100%;
  height: auto;
}

#user-new-estimate {
  background-image: url(images/user_page/user_new_estimate_h.png);
}

#user-estimate-search {
  background-image: url(images/user_page/user_estimate_search_h.png);
}

#user-order {
  background-image: url(images/user_page/user_order_h.png);
}

#user-estimate-bill {
  background-image: url(images/user_page/user_estimate_bill_h.png);
}

#user-catalogues {
  background-image: url(images/user_page/user_catalogues_h.png);
}

#user-spec-offers {
  background-image: url(images/user_page/user_spec_offers_h.png);
}

#user-label {
  background-image: url(images/user_page/user_label_h.png);
}

#user-data-sheet {
  background-image: url(images/user_page/user_data_sheet_h.png);
}

#user-soft {
  background-image: url(images/user_page/user_soft_h.png);
}

#user-fgas {
  background-image: url(images/user_page/f_gas_h.png)
}

#user-edf {
  background-image: url(images/user_page/edf_h.png)
}

#user-prices {
  background-image: url(images/user_page/user_prices_h.png)
}

#user-suppliers-prices {
  background-image: url(images/user_page/user_suppliers_prices_h.png);
}

#user-egroupware {
  background-image: url(images/user_page/user_egroupware_h.png);
}

#user-gmail {
  background-image: url(images/user_page/user_gmail_h.png);
}

#user-away {
  background-image: url(images/user_page/user_away_h.png);
}

#user-alfresco {
  background-image: url(images/user_page/user_alfresco_h.png);
}

#user-dashboard {
  background-image: url(images/user_page/user_dashboard_h.png);
}

#user-supp-dashboard {
  background-image: url(images/user_page/user_provider_dash_h.png);
}

#user-stats {
  background-image: url(images/user_page/user_stats_h.png);
}

#resp-stats {
  background-image: url(images/user_page/resp_agc_h.png);
}

#user-report {
  background-image: url(images/user_page/user_report_h.png);
}

#user-desk {
  background-image: url(images/user_page/user_desk_h.png);
}

#user-heat-cod {
  background-image: url(images/user_page/user_heat_cod_h.png);
}

#user-san-cod {
  background-image: url(images/user_page/user_san_cod_h.png);
}

#user-elect-cod {
  background-image: url(images/user_page/user_elect_cod_h.png);
}

#user-kelio {
  background-image: url(images/user_page/user_kelio_h.png);
}

#user-qare {
  background-image: url(images/user_page/user_qare_h.png);
}

#user-car {
  background-image: url(images/user_page/user_car_h.png);
}

#user-kibana {
  background-image: url(images/user_page/user_kibana_h.png);
}

#user-supervision-kibana {
  background-image: url(images/user_page/user_supervision_kibana_h.png);
}

#user-zabbix {
  background-image: url(images/user_page/user_zabbix_h.png);
}

#user-travel-anchor {
  background-image: url(images/user_page/user_travel_h.png);
}

#user-gift {
  background-image: url(images/user_page/user_gift_h.png);
}

#user-name-button {
  padding: 10px;
  margin: 0 0 0 15px;
  font-size: 18px;
  border-radius: 5px;
  color: #FFF;
  background-color: #1a9da2;
}

#user-name-button:hover {
  background-color: #10676a;
}

#order-search-input {
  border: 1px solid #1a9da2;
  width: 100%;
  padding: 5px;
  box-sizing: border-box;
}

#order-search-table {
  margin: 15px 0 0 0;
}

.order-search-btn {
  display: flex;
  line-height: 30px;
  margin: 0 0 20px 0;
  padding: 5px 15px 5px 5px;
  color: #FFF;
  border: none;
  cursor: pointer;
  outline: inherit;

  border-radius: 20px;
  background-color: #1a9da2;
  background-repeat: no-repeat;
  background-size: contain;
}

.order-search-btn + .order-search-btn {
  margin: 0 0 0 10px;
}

.order-search-btn img {
  height: 30px;
  width: auto;
  margin: 0 5px 0 0;
}

.order-search-btn.active {
  background-color: #10676a;
}

.order-search-btn:hover {
  background-color: #10676a;
}

.order-estimate-action {
  position: absolute;
  display: flex;
  top: 0;
  right: 0;
}

#user-away-wrap h1 {
  margin: 20px 0 0 3.125%;
  width: calc(100% - 20px);
  font-size: 2.5em;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1em;
}

.user-away-login {
  border: 2px solid #333333;
  margin: 20px 0 0 3.125%;
  padding: 5px;
  width: 93.75%;
  box-sizing: border-box;
}

.user-away-login img {
  width: 100%;
}

.user-away-column {
  margin: 20px 0 0 3.125%;
  width: 93.75%;
}

.user-away-column h2 {
  margin: 20px 0 0 0;
  font-size: 2em;
  line-height: 1em;
  text-transform: uppercase;
  color: #1a9da2;
}

.user-away-list li {
  border: 2px solid #1a9da2;
  margin: 20px 0 0 0;
  padding: 5px;
  box-sizing: border-box;
}

.user-away-column + .user-away-column > h2 {
  color: #a21a3f;
}

.user-away-column + .user-away-column > .user-away-list li {
  border: 2px solid #a21a3f;
}

.user-away-list li img {
  width: 100%;
}

#user-away-button {
  display: block;
  margin: 20px 0 0 3.125%;
  padding: 10px 0;
  width: 93.75%;
  text-align: center;
  font-size: 2em;
  line-height: 1em;
  color: #FFFFFF;
  background-color: #1a9da2;
}

#user-away-button:hover {
  background-color: #10676a;
}

@media screen and (min-width: 480px) {
  .alert-bloc {
    margin: 40px 2.702702702702703% 0; /* 20px @740px */
    width: 94.59459459459459%; /* 700px @740px */
    font-size: 1em;
  }

  #user-name {
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
    width: 94.59459459459459%; /* 700px @740px */
    font-size: 4em;
  }

  #user-menu,
  #user-provider {
    margin: 20px 0 0 0;
  }

  #user-menu li {
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    width: 29.72972972972973%; /* 220px @740px */
  }

  #user-video,
  #user-ce,
  #user-inventory {
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
    width: 94.59459459459459%; /* 700px @740px */
  }

  #user-video iframe {
    width: 70%;
    height: 350px;
  }

  #order-title {
    display: flex;
    margin: 0 0 10px 0;
  }

  #order-title h2 {
    width: 75%;
  }

  .order-search-btn {
    height: 28px;
    padding: 5px 10px;
    margin: 0;
    line-height: 18px;
  }

  .order-search-btn img {
    height: 18px;
  }

  #user-away-wrap {
    display: flex;
    flex-wrap: wrap;
  }

  #user-away-wrap h1 {
    margin: 20px 0 0 20px;
  }

  .user-away-login {
    margin: 20px 0 0 20px;
  }

  .user-away-column {
    margin: 20px 0 0 20px;
    width: calc(50% - 30px);
  }

  #user-away-button {
    margin: 20px 0 0 20px;
    width: calc(100% - 40px);
  }
}

@media screen and (min-width: 960px) {
  .alert-bloc {
    margin: 40px 2.083333333333333% 0; /* 20px @960px */
    width: 95.83333333333333%; /* 920px @960px */
    font-size: 1em;
  }

  #user-name {
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
    width: 95.83333333333333%; /* 920px @960px */
  }

  #user-menu li {
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
    width: 17.5%; /* 168px @960px */
  }

  #user-video,
  #user-ce,
  #user-inventory {
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
    width: 95.83333333333333%; /* 920px @960px */
  }

  #user-video iframe {
    width: 70%;
    height: 350px;
  }

  #user-content-wrap {
    display: flex;
    flex-wrap: wrap;
  }
}

/* POP UP */
.md-datepicker-calendar-pane {
  z-index: 9999 !important;
}

#modal-wrap {
  position: fixed;
  z-index: 2500;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(51, 51, 51, 0.80)
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px;
  width: 90%;
  max-height: 90vh;
  overflow: scroll;
  scrollbar-width: none;
  background-color: #FFFFFF;
  box-sizing: border-box;
  border-radius: 10px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.modal::-webkit-scrollbar {
  display: none;
}

.close-modal {
  position: fixed;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-image: url("images/close.png");
  background-position: center;
  background-repeat: no-repeat;
  background-color: #a21a3f;
}

.close-modal:hover {
  color: #FFF;
  background-color: #7e0e2c;
  cursor: pointer;
}

.modal-button {
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 1px rgba(68, 68, 68, 0.08);
  background-color: rgb(220 220 220);
}

.modal-header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
}

.modal-header-info {
  flex-basis: 33.333333%;
}

.modal-header-form {
  display: flex;
}

.modal-header-form-button {
  margin-left: 20px;
}

.modal-title {
  width: 100%;
  font-size: 1.5em;
  line-height: 1.5em;
  margin: 0 0 5px 0;
}

.modal-title b,
.modal-title span {
  display: block;
}

#order-modal ul {
  margin: 10px 0 0 0;
}

#order-modal-order-sum {
  margin: 20px 0 0 0;
  text-align: right;
  font-size: 1.5em;
  line-height: 1em;
}

.stock-green {
  color: #0bab13 !important;
  font-weight: bold;
}

.stock-red {
  color: #e70d0d !important;
  font-weight: bold;
}

.stock-orange {
  color: #f26522;
  font-weight: bold;
}

@media screen and (min-width: 960px) {
  .modal {
    width: 50%;
  }
}

/* Devis & commande */
.module {
  margin: 40px 0 0 0;
  position: relative;
}

.module h2 {
  font-size: 1.5em;
  line-height: 1.5em;
}

.order-pages li {
  display: inline-block;
  margin: 10px 5px 0 0;
  width: 35px;
  border-radius: 20px;
  text-align: center;
  line-height: 20px;
  background-color: #a21a3f;
  color: #FFF;
}

.order-pages li:hover {
  background-color: #1a9da2;
  cursor: pointer;
}

.order-pages li.active {
  background-color: #1a9da2;
}

.table {
  display: table;
  /*table-layout: fixed; Répartition régulière des cellules */
  width: 100%;
}

.table-row {
  display: table-row;
}

.table-row:nth-child(odd) {
  background-color: #e4e4e4;
}

.table-row span {
  display: table-cell;
  max-width: 150px;
  padding: 10px 0;
  font-size: 1em;
  text-align: center;
  vertical-align: middle;
}

.table-row.head {
  background-color: #1a9da2;
  color: #FFFFFF;
}

.table-row.row span:first-child {
  text-align: left;
  padding: 5px 0 5px 5px;
  min-width: 60px;
}

.table-row.row span:last-child {
  text-align: right;
  padding: 5px 5px 5px 0;
  min-width: 75px;
}

.left-overflow {
  text-align: left;
  overflow: hidden;
}

.active-row:hover {
  background-color: #a21a3f;
  color: #FFF;
  cursor: pointer;
}

/* Voyage */

#user-travel-offer {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
}

#user-travel-offer img {
  width: 100%;
}

#user-travel-offer img.other-device {
  display: none;
}

#user-travel {
  position: relative;
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
}

#user-travel-img-mobile img,
#user-travel-img img {
  width: 100%;
}

#user-travel-info {
  padding: 15px;
  color: #FFFFFF;
  background-color: #a21a3f;
  display: flex;
  flex-wrap: wrap;
}

#user-travel-img,
#travel-progress {
  display: none;
}

#travel-title {
  margin: 10px 0 0 0;
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}

#travel-obj {
  display: inline-block;
  margin: 20px 0 0 0;
  width: 57.5%;
}

#travel-obj span {
  display: block;
  width: 100%;
}

#travel-percent {
  display: inline-block;
  margin: 20px 0 0 0;
  width: 42.5%;
  font-size: 2.75em;
  font-weight: 700;
  text-align: right;
  text-transform: uppercase;
}

#user-travel-prog {
  width: 93.75%; /* 300px @320px */
  margin: 0 0 0 3.125%; /* 10px @320px */
  display: flex;
}

.user-travel-prog-btn {
  display: block;
  width: 100%;
  margin: 10px 0 0 0;
}

.user-travel-prog-btn img {
  width: 100%;
}

@media screen and (min-width: 480px) {

  .module {
    margin: 40px 20px 0 20px;
    position: relative;
  }

  .module h2 {
    margin: 0 0 10px 0;
  }

  #user-travel-offer {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #user-travel-offer img.mobile {
    display: none;
  }

  #user-travel-offer img.other-device {
    display: block;
  }

  #user-travel {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #user-travel-img-mobile {
    display: none;
  }

  #user-travel-img,
  #travel-progress {
    display: block;
  }

  #user-travel-info {
    position: absolute;
    top: 27.5%;
    left: 27.5%;
    width: 45%;
    padding: 0;
    color: #333333;
    background-color: transparent;
  }

  #travel-title {
    margin: 0;
    font-size: 2.75em;
    line-height: 1em;
    text-align: left;
    color: #a21a3f;
  }

  #travel-obj,
  #travel-percent {
    margin: 20px 0 0 0;
  }

  #travel-obj {
    line-height: 1.25em;
  }

  #travel-percent {
    color: #1a9da2;
    font-size: 2.5em;
  }

  #user-travel-prog {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 0 0 0 2.702702702702703%; /* 20px @740px */
  }

  .user-travel-prog-btn {
    display: inline-block;
    width: 48.57142857142857%;
    margin: 10px 0 0 0;
  }

  .user-travel-prog-btn + .user-travel-prog-btn {
    margin: 10px 0 0 2.857142857142857%; /* 20px @700px */
  }
}

@media screen and (min-width: 960px) {
  #user-menu.customer-display li {
    width: calc(50% - 2.5px);
    margin: 0;
  }

  #user-menu.customer-display li:nth-child(even) {
    margin: 0 0 0 5px;
  }

  #user-menu.customer-display li:nth-child(n+3) {
    margin-top: 5px;
  }

  #user-order-estimate {
    margin: 20px 0 0 20px;
  }

  #user-menu.customer-display {
    width: calc(30% - 20px);
    margin: 20px 0 0 20px;
    height: fit-content;
  }

  #user-order-estimate {
    width: calc(70% - 60px);
    margin: 20px 0 0 40px;
  }

  .module {
    margin: 0;
  }

  .module + .module {
    margin: 40px 0 0 0;
  }

  #user-travel-offer {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #user-travel {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #travel-title {
    font-size: 3.5em;
  }

  #travel-obj,
  #travel-percent {
    margin: 30px 0 0 0;
  }

  #travel-obj {
    font-size: 1.25em;
    line-height: 1.25em;
  }

  #travel-percent {
    font-size: 3.5em;
  }

  #user-travel-prog {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 0 0 0 2.083333333333333%; /* 20px @960px */
  }

  .user-travel-prog-btn {
    width: 48.91304347826087%;
    margin: 20px 0 0 0;
  }

  .user-travel-prog-btn + .user-travel-prog-btn {
    margin: 20px 0 0 2.173913043478261%; /* 20px @920px */
  }

}


/*****************************************************/
/******************** CODIFICATION *******************/
/*****************************************************/

#codification-title {
  width: 93.75%;
  margin: 40px 0 0 3.125%;
  font-size: 2em;
  line-height: 1em;
  text-transform: uppercase;
}

#codification-title b {
  color: #a21a3f;
}

#codification-form {
  width: 93.75%;
  margin: 30px 0 0 3.125%;
}

#codification-form p {
  width: 100%;
  margin: 0 0 20px 0;
}

#codification-error {
  padding: 10px;
  box-sizing: border-box;
  color: #FFF;
  background-color: red;
}

#attachment-error {
  padding: 10px;
  box-sizing: border-box;
  color: #FFF;
  background-color: #f26522;
}

#attachment-loading img {
  margin: 0 auto;
}

#codification-confirm {
  padding: 10px;
  color: #FFF;
  background-color: green;
}

#codification-form label {
  display: block;
  width: 100%;
  margin: 0 0 5px 0;
}

#codification-form input,
#codification-form select,
#codification-form textarea {
  display: block;
  width: 100%;
  padding: 5px;
  line-height: 15px;
  border: 1px solid #333333;
  background-color: transparent;
  box-sizing: border-box;
}

#codification-form p.required label {
  color: red;
}

#codification-form p.required input,
#codification-form p.required select,
#codification-form p.required textarea {
  border: 1px solid red;
  color: red;
}

#codification-send button {
  width: 100%;
  padding: 15px 0;
  text-transform: uppercase;
  color: #FFF;
  border: none;
  background-color: #1a9da2;
}

/*****************************************************/
/************* SEARCH & TECHNICAL SHEET **************/
/*****************************************************/

#page-search-field {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  padding: 20px 0;
}

#page-search-field h3 {
  width: 86.66666666666667%; /* 260px @300px */
  margin: 0 0 0 6.666666666666667%; /* 20px @300px */
  font-size: 1.75em;
  line-height: 1em;
  font-weight: 700;
  color: #1a9da2;
  text-transform: uppercase;
  text-align: center;
}

#page-search-field input[type="text"] {
  border: 3px solid #1a9da2;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 86.66666666666667%; /* 260px @300px */
  margin: 20px 0 0 6.666666666666667%; /* 20px @300px */
  padding: 10px;
  font-size: 1.75em;
}

#page-search-field button {
  width: 86.66666666666667%; /* 260px @300px */
  margin: 10px 0 0 6.666666666666667%; /* 20px @300px */
  padding: 9px;
  background-color: #1a9da2;
  color: #FFFFFF;
  font-size: 1.25em;
  line-height: 3.25em;
  text-transform: uppercase;
}

#page-search-field button:hover {
  background-color: #10676a;
  cursor: pointer;
}

#page-search-field button img {
  display: inherit;
  margin: 0 5px 0 0;
  vertical-align: middle;
}

#search-help {
  width: 86.66666666666667%; /* 260px @300px */
  margin: 10px 0 0 6.666666666666667%; /* 20px @300px */
  padding: 10px;
  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #FFF;
  background-color: #1a9da2;
}

.no-result {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
}

.no-result p {
  font-size: 2em;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
  text-align: center;
  color: #b0b0b0;
}

.no-result > .no-result_caption {
  font-size: 1.5em;
}

@media screen and (min-width: 480px) {
  #page-search-field {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    padding: 40px 0;
  }

  #page-search-field h3 {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 0 0 0 2.702702702702703%; /* 20px @740px */
    font-size: 3em;
    text-align: left;
  }

  #page-search-field input[type="text"] {
    width: 67.56756756756757%; /* 500px @740px */
    margin: 10px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #page-search-field button {
    width: 27.02702702702703%; /* 200px @740px */
    margin: 10px 0 0 0;
    padding: 0;
    min-height: 57px;
    vertical-align: top;
  }

  #search-help {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 10px 0 0 2.702702702702703%; /* 20px @740px */
  }

  .no-result {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
  }

  .no-result p {
    font-size: 3em;
  }
}

@media screen and (min-width: 960px) {
  .no-result {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #page-search-field {
    width: 100%;
    margin: -20px 0 0 0;
    padding: 65px 0;
  }

  #page-search-field h3 {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 0 0 0 2.083333333333333%; /* 20px @960px */
  }

  #page-search-field input[type="text"] {
    width: 75%; /* 720px @960px */
    margin: 10px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #page-search-field button {
    width: 20.83333333333333%; /* 200px @960px */
    margin: 10px 0 0 0;
  }

  #search-help {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 10px 0 0 2.083333333333333%; /* 20px @960px */
    font-size: 1.5em;
    line-height: 1em;
  }
}


/*****************************************************/
/************************ SEARCH *********************/
/*****************************************************/

.search-back {
  background-image: url(images/img_cat/recherche.jpg);
}

#side-search-options {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  padding: 10px 0;
  background-color: #e4e4e4;
}

#side-search-options i {
  font-style: normal;
}

#search-count {
  width: 93.33333333333333%; /* 280px @300px*/
  margin: 0 0 0 3.333333333333333%; /* 10px @300px */
  text-transform: uppercase;
  font-weight: 700;
}

#side-search-options select {
  width: 93.33333333333333%; /* 280px @300px*/
  margin: 10px 0 0 3.333333333333333%; /* 10px @300px */
  padding: 10px;
}

#search-page-results {
  margin: 40px 0 0 0;
}

#search-page-results li {
  position: relative;
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  padding: 10px;
  border: 3px solid #1a9da2;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (min-width: 480px) {
  #side-search-options {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    padding: 10px 0 20px 0;
  }

  #search-count {
    width: 94.28571428571429%; /* 660px @700px */
    margin: 10px 0 0 2.857142857142857%; /* 20px @700px */
    font-size: 1.25em;
  }

  #side-search-options select {
    width: 45.71428571428571%; /* 320px @700px*/
    margin: 10px 0 0 2.857142857142857%; /* 20px @700px */
  }

  #search-page-results {
    margin: 20px 0 0 0;
  }

  #search-page-results li {
    display: inline-block;
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    width: 45.94594594594595%; /* 340px @740px */
  }
}

@media screen and (min-width: 960px) {
  #side-search-options {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #search-count {
    width: 95.65217391304348%; /* 880px @920px */
    margin: 10px 0 0 2.173913043478261%; /* 20px @920px */
  }

  #side-search-options select {
    width: 46.73913043478261%; /* 430px @920px*/
    margin: 10px 0 0 2.173913043478261%; /* 20px @920px */
  }

  #search-page-results li {
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
    width: 30.55555555555556%; /* 293px @960px */
  }

  #search-page-results .prod-name {
    min-height: 79px;
  }

  #search-page-results .prod-name .ref,
  #search-page-results .prices i {
    display: block;
  }

}


/*****************************************************/
/******************** TECHNICAL SHEET ****************/
/*****************************************************/

.tech-back {
  background-image: url(images/img_cat/fiche_tech.jpg);
}

#tech-sheet-results {
  margin: 40px 0 0 0;
}

#tech-sheet-results li {
  position: relative;
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  padding: 10px;
  border: 1px solid #e4e4e4;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tech-sheet-name {
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.tech-sheet-look,
.tech-sheet-dl {
  display: inline-block;
  width: 48.33333333333333%; /* 145px @300px */
  padding: 10px 0;
  font-weight: 700;
  text-align: center;
  line-height: 25px;
  color: #FFFFFF;
}

.tech-sheet-look {
  background-color: #1a9da2;
  margin: 20px 0 0 0;
}

.tech-sheet-look:hover {
  background-color: #10676a;
}

.tech-sheet-dl {
  background-color: #a21a3f;
  margin: 20px 0 0 3.333333333333333%; /* 10px @300px */
}

.tech-sheet-dl:hover {
  background-color: #7e0e2c;
}

.tech-sheet-look img,
.tech-sheet-dl img {
  display: inline-block;
  margin: 0 10px 0 0;
  vertical-align: top;
}

@media screen and (min-width: 480px) {
  #tech-sheet-results li {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    padding: 20px;
  }

  .tech-sheet-name {
    display: inline-block;
    width: 53.03030303030303%; /* 350px @660px */
    vertical-align: middle;
    text-align: left;
  }

  .tech-sheet-look,
  .tech-sheet-dl {
    width: 20.45454545454545%; /* 135px @660px */
    margin: 0 0 0 3.03030303030303%; /* 20px @660px */
    padding: 0;
    line-height: 45px;
    vertical-align: middle;
  }

  .tech-sheet-look img,
  .tech-sheet-dl img {
    vertical-align: middle;
  }
}

@media screen and (min-width: 960px) {
  #tech-sheet-results li {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
  }

  .tech-sheet-name {
    width: 61.36363636363636%; /* 540px @880px */
  }

  .tech-sheet-look,
  .tech-sheet-dl {
    width: 17.04545454545455%; /* 150px @880px */
    margin: 0 0 0 2.272727272727273%; /* 20px @660px */
  }
}


/*****************************************************/
/******************** PRODUCT SHEET ******************/
/*****************************************************/

.product-sheet-col {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
}

#product-sheet-img-btn {
  padding: 15px 0 0 0;
  min-height: 35px;
}

.img-btn {
  float: right;
  width: 35px;
  height: 35px;
  margin: 0 0 0 15px;
  cursor: pointer;
}

.img-btn.zoom {
  background-image: url(images/zoom.png);
  background-repeat: no-repeat;
}

.img-btn.zoom:hover {
  background-image: url(images/zoom_h.png);
}

.img-btn.dl {
  background-image: url(images/img-dl.png);
  background-repeat: no-repeat;
}

.img-btn.dl:hover {
  background-image: url(images/img-dl_h.png);
}

#product-sheet-img-hd {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.75);
}

#product-sheet-img-hd > img {
  margin: 40px auto 0;
  display: block;
  width: calc(100% - 80px);
  max-width: 1000px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#img-hd-btn-bloc {
  margin: 20px auto 0;
  width: calc(100% - 80px);
}

.img-hd-btn {
  display: block;
  float: right;
  width: 80px;
  height: 20px;
  margin: 0 0 0 20px;
  padding: 60px 0 0 0;
  color: #FFF;
  text-align: center;
  cursor: pointer;
}

.img-hd-btn:hover {
  color: #9c9c9c;
}

.img-hd-btn.close {
  background-image: url(images/img-hd-close.png);
  background-repeat: no-repeat;
  background-position: top center;
}

.img-hd-btn.close:hover {
  background-image: url(images/img-hd-close_h.png);
  color: #a21a3f;
}

.img-hd-btn.dl {
  background-image: url(images/img-hd-dl.png);
  background-repeat: no-repeat;
  background-position: top center;
}

.img-hd-btn.dl:hover {
  background-image: url(images/img-hd-dl_h.png);
  color: #1a9da2;
}

#product-sheet-img {
  /* width: 100%;*/
  max-width: 320px;
  max-height: 320px;
  margin: auto;
}

#product-sheet-brand {
  margin: 20px 0 0 0;
}

#product-sheet-name {
  margin: 10px 0 0 0;
  font-size: 1.25em;
  line-height: 1.25em;
}

#product-sheet-ref {
  margin: 10px 0 0 0;
}

#product-sheet-ref p {
  font-style: italic;
}

#product-sheet-tech-data {
  margin: 20px 0 0 0;
}

#product-sheet-specification,
#product-sheet-dimensions {
  margin: 20px 0 0 0;
}

#product-sheet-specification img {
  display: inline-block;
  margin: 0 5px 0 0;
}

#product-sheet-delivery,
#product-sheet-discount {
  padding: 15px 5% 0 5%; /* 15px @300px */
  background-color: #e4e4e4;
}

#product-sheet-delivery img,
#product-sheet-delivery p,
#product-sheet-discount img,
#product-sheet-discount p {
  display: inline-block;
}

#product-sheet-delivery img,
#product-sheet-discount img {
  margin: 0 5px 0 0;
  vertical-align: middle;
}

#product-sheet-delivery p,
#product-sheet-discount p {
  font-weight: 700;
}

#product-sheet-prices {
  position: relative;
  padding: 40px 5% 0 5%; /* 15px @300px */
  background-color: #e4e4e4;
}

#product-sheet-prices .eco-participation {
  text-align: center;
  margin-top: 10px;
}

#product-sheet-prices p {
  width: 50%;
  text-align: center;
}

#product-sheet-prices p b {
  font-size: 1.25em;
}

#product-sheet-p-price {
  float: left;
  border-right: 1px solid #333333;
}

#product-sheet-c-price {
  margin: 0 0 0 50%;
  color: #a21a3f;
}

#product-quant {
  padding: 20px 0 0 0;
  background-color: #e4e4e4;
}

.quant-decrease, .quantity, .quant-increase {
  height: 25px;
}

#product-quant .quantity {
  font-size: 1.25em;
}

#product-sheet-discount + .connection-req {
  margin: 0;
  padding: 35px 0 15px 0;
}

#product-sheet-tech,
#product-notice,
#product-safety {
  margin: 20px 0 0 0;
  text-align: center;
  background-color: #a21a3f;
  cursor: pointer;
}

#product-sheet-tech:hover,
#product-notice:hover,
#product-safety:hover {
  background-color: #7e0e2c;
}

#product-sheet-tech a,
#product-notice a,
#product-safety a {
  display: block;
  line-height: 45px;
  color: #FFFFFF;
  text-transform: uppercase;
}

#product-sheet-tech img,
#product-notice img,
#product-safety img {
  display: inline-block;
  margin: -3px 10px 0 0;
  vertical-align: middle;
}

#stocks {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
}

#global-stock,
#stocks label {
  display: inline-block;
  width: 47%;
  padding: 5px 1.5%;
  background-color: #f26522 !important;
  font-weight: 700;
}

#global-stock {
  width: 62%;
}

#stocks label {
  width: 32%;
  text-align: right;
}

#stock-details {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#showDetails {
  display: none
}

#showDetails:checked + #stock-details {
  max-height: 9999px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#stocks li:nth-child(2n+1) {
  background-color: #e4e4e4;
}

#stock-entete {
  display: none;
}

#stocks li span {
  display: inline-block;
  padding: 5px 1%;
}

.shop {
  width: 38%;
}

.shop-quant {
  text-align: right;
  font-weight: 700;
  width: 10%;
}

.product-sub-section {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 40px, 20px & 10px @320px */
  padding: 0 0 5px 0;
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #1a9da2;
  border-bottom: 2px solid #1a9da2;
}

#comp-data-tabs {
  display: table;
  table-layout: fixed;
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 20px & 10px @320px */
  padding: 0 0 5px 0;
  border-bottom: 2px solid #1a9da2;
}

#comp-data-tabs li {
  display: table-cell;
  text-align: center;
}

#comp-data-tabs li a {
  font-weight: 700;
  color: #d1d1d1;
  text-transform: uppercase;
}

#comp-data-tabs li.active a,
#comp-data-tabs li a:hover {
  color: #1a9da2;
}

.comp-data {
  margin: 20px 0 0 3.125%; /* 10px @320px */
}

.proddoc {
  padding: 10px;
  border: 1px solid #e4e4e4;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.proddoc img {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin: 0 5% 0 0;
}

.proddoc div {
  display: inline-block;
  vertical-align: top;
  width: 70%;
}

.proddoc p {
  font-size: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
}

.proddoc a {
  display: block;
  margin: 20px 0 0 0;
  color: #a21a3f;
}

.proddoc a:hover {
  color: #7e0e2c;
}

.proddoc a:before {
  content: url(images/dl.png);
  margin: 0 10px 0 0;
}

@media screen and (min-width: 480px) {
  #product-sheet-info {
    display: inline-block;
    width: 54.05405405405405%; /* 400px @740px */
    margin: 0 0 0 2.702702702702703%; /* 20px @740px */
    vertical-align: top;
  }

  #product-sheet-stock-col {
    display: inline-block;
    width: 37.83783783783784%; /* 280px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    vertical-align: top;
  }

  .product-sheet-col {
    width: 100%;
    margin: 20px 0 0 0;
  }

  #product-sheet-delivery,
  #product-sheet-discount {
    width: 92.85714285714286; /* 260px @280px */
    padding: 20px 0 0 7.142857142857143%; /* 20px @280px */
  }

  #product-sheet-prices {
    width: 85.71428571428571%; /* 240px @280px */
    padding: 40px 7.142857142857143% 0 7.142857142857143%; /* 20px @280px */
  }

  #stocks {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 40px 0 0 2.702702702702703%; /* 40px & 20px @740px */
  }

  #stock-entete-mob {
    display: none;
  }

  #stock-entete {
    display: block;
  }

  .shop {
    width: 23%;
  }

  .shop-quant {
    width: 13%;
  }

  #comp-data-tabs,
  .product-sub-section {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 80px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #comp-data-tabs li a {
    font-size: 1.5em;
  }

  .comp-data {
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }

  .proddoc {
    display: inline-block;
    width: 45.94594594594595%; /* 340px @740px */
  }
}

@media screen and (min-width: 960px) {
  #product-sheet-info {
    width: 70.83333333333333%; /* 680px @960px*/
    margin: 0;
  }

  .product-sheet-col {
    display: inline-block;
    width: 47.05882352941176%; /* 320px @680px*/
    margin: 20px 0 0 2.941176470588235%; /* 20px @680px*/
    vertical-align: top;
  }

  #product-sheet-stock-col {
    width: 25%; /* 240px @960px*/
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px*/
  }

  #delivery-discount {
    float: none;
    width: auto;
    padding: 0;
  }

  #product-sheet-delivery,
  #product-sheet-discount {
    width: 87.5%;
    padding: 15px 6.25% 0 6.25%; /* 15px @240px */
  }

  #product-sheet-prices {
    width: auto;
    padding: 40px 6.25% 0 6.25%; /* 15px @240px */
  }

  #stocks {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 40px & 20px @960px */
  }

  #comp-data-tabs,
  .product-sub-section {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 80px 0 0 2.083333333333333%; /* 40px & 20px @960px */
  }

  .comp-data {
    margin: 20px 0 0 2.083333333333333%; /* 20px @96px */
  }

  .proddoc {
    width: 30.55555555555556%; /* 253px @960px */
  }
}

@media screen and (min-width: 1200px) {
  #img-hd-btn-bloc {
    position: absolute;
    width: auto;
    margin: 0;
    top: 40px;
    right: 40px;
  }

  .img-hd-btn {
    float: none;
    margin: 0 0 40px 0;
  }
}


/*****************************************************/
/*********************** OFFICES *********************/
/*****************************************************/

.office-headline {
  background-image: url(images/img_cat/agences.jpg);
}

#selected-office {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  background-color: #1a9da2;

  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  transition: all 0.30s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

#selected-office-map {
  width: 100%;
  height: 280px;
}

#selected-office-add {
  padding: 15px;
  background-color: #1a9da2;
  color: #FFFFFF;
}

#selected-office-add img {
  width: 100%;
}

#selected-office-name {
  margin: 15px 0 0 0 !important;
  font-size: 1.5em;
  line-height: 1em;
  font-weight: 700;
}

#selected-office-add p {
  margin: 10px 0 0 0;
}

#selected-office-schedule {
  padding: 25px 15px 15px 15px;
  background-image: url(images/schedule_arrow.png);
  background-position: top center;
  background-repeat: no-repeat;
  background-color: #10676a;
  color: #FFFFFF;
}

#selected-office-schedule div + div {
  margin: 15px 0 0 0;
}

.selected-office-schedule-title {
  font-size: 1.25em;
  font-weight: 700;
}

.selected-office-schedule-title + p {
  margin: 10px 0 0 0;
}

.office {
  width: 93.75%; /* 300px @320px */
  margin: 20px 0 0 3.125%; /* 10px @320px */
  background-color: #a21a3f;
  cursor: pointer;
}

.office.actithermie {
  background-color: #25408f;
}

.office:hover {
  background-color: #333333;
}

.office img {
  width: 100%
}

.office p {
  padding: 10px 0;
  font-size: 1.25em;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
}

@media screen and (min-width: 480px) {
  #selected-office {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
    background-color: #10676a;
  }

  #selected-office-map {
    display: inline-block;
    vertical-align: top;
    width: 64.28571428571429%; /* 450px @700px */
    height: 575px;
  }

  #selected-office-info {
    display: inline-block;
    vertical-align: top;
    width: 35.71428571428571%; /* 250px @700px */
  }

  .office {
    display: inline-block;
    vertical-align: top;
    width: 29.72972972972973%; /* 220px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }
}

@media screen and (min-width: 960px) {
  #selected-office {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #selected-office-map {
    width: 65.21739130434783%; /* 600px @920px */
    height: 600px;
  }

  #selected-office-info {
    width: 34.78260869565217%; /* 320px @920px */
  }

  .office {
    width: 22.39583333333333%; /* 215px @960px */
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
  }
}


/*****************************************************/
/********************* SALE TERMS ********************/
/*****************************************************/

.sale-terms {
  width: 93.75%; /* 300px @320px */
  margin: 0 0 0 3.125%; /* 10px @320px */
}

.sale-terms + .sale-terms {
  margin: 60px 0 0 3.125%; /* 10px @320px */
}

.sale-terms h2 {
  margin: 20px 0 0 0;
  font-size: 2em;
  font-weight: 700;
  line-height: 1.25em;
  text-transform: uppercase;
  color: #a21a3f;
}

.sale-terms h3 {
  margin: 20px 0 0 0;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.25em;
  text-transform: uppercase;
  color: #a21a3f;
}

.sale-terms h4 {
  margin: 20px 0 0 0;
  font-weight: 700;
  text-transform: uppercase;
}

.sale-terms p {
  margin: 10px 0 0 0;
}

@media screen and (min-width: 480px) {
  .sale-terms {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 0 0 0 2.702702702702703%; /* 20px @740px */
  }

  .sale-terms + .sale-terms {
    margin: 60px 0 0 2.702702702702703%; /* 20px @740px */
  }
}

@media screen and (min-width: 960px) {
  .sale-terms {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 0 0 0 2.083333333333333%; /* 10px @960px */
  }

  .sale-terms + .sale-terms {
    margin: 60px 0 0 2.083333333333333%; /* 10px @960px */
  }
}


/*****************************************************/
/********************* USER PRICES *******************/
/*****************************************************/

#user-prices-title {
  width: 93.75%; /* 300px @320px */
  margin: 40px auto 0;
  padding: 0 0 10px 0;
  font-size: 1.75em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  color: #1a9da2;
}

.user-prices-options-box {
  width: 93.75%; /* 300px @320px */
  margin: 20px auto 0;
}

.user-prices-option {
  width: 100%;
  padding: 10px;
  background-color: #e4e4e4;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.user-prices-option:nth-child(even) {
  margin: 20px 0 0 0;
  border: 2px solid #e4e4e4;
  background-color: transparent;
}

.user-prices-option h2 {
  font-size: 1.25em;
  font-weight: 700;
  padding: 0 0 10px 0;
  text-transform: uppercase;
  text-align: center;
  color: #1a9da2;
}

.user-prices-option:nth-child(even) h2 {
  color: #a21a3f;
}

.user-prices-option p {
  margin: 0 0 20px 0;
  text-align: center;
}

.user-prices-option button {
  width: 100%;
  margin: 0 auto;
  padding: 20px 20px 20px 50px;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  background-repeat: no-repeat;
  background-color: #1a9da2;
  background-position: 12px center;
  background-image: url(images/doc_dl.png);
  cursor: pointer;

  /* box-sizing sort le padding du calcul du width */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.user-prices-option:nth-child(even) button {
  background-color: #a21a3f;
}

#user-prices-validation {
  width: 93.75%; /* 300px @320px */
  margin: 20px auto 0;
}

#user-prices-validation h2 {
  text-align: center;
}

#user-prices-validation h2 span {
  display: inline-block;
  width: 150px;
  padding: 10px 0 10px 90px;
  font-size: 2em;
  line-height: 1.15em;
  font-weight: bold;
  text-transform: uppercase;
  text-align: left;
  color: #0bab13;
  background-image: url(images/user-prices-check.png);
  background-position: left center;
  background-repeat: no-repeat;
}

#user-prices-validation p {
  margin: 20px 0 0 0;
}

#user-prices-actions a {
  display: block;
  padding: 20px 20px 20px 50px;
  text-align: center;
  text-transform: uppercase;
  color: #FFFFFF;
  background-repeat: no-repeat;
}

#user-prices-return {
  margin: 20px auto 0;
  background-color: #a21a3f;
  background-position: 5px center;
  background-image: url(images/user.png);
}

#user-prices-method {
  margin: 20px auto 0;
  background-color: #1a9da2;
  background-position: 12px center;
  background-image: url(images/doc_dl.png);
}

@media screen and (min-width: 480px) {
  #user-prices-title {
    width: 94.59459459459459%; /* 700px @740px */
  }

  .user-prices-options-box {
    width: 80%;
    display: flex;
  }

  .user-prices-option,
  #user-prices-actions a {
    width: calc(50% - 10px);
  }

  .user-prices-option:nth-child(even) {
    margin: 0 0 0 20px;
  }

  #user-prices-validation {
    width: 80%;
  }

  #user-prices-actions {
    display: flex;
  }

  #user-prices-method {
    margin: 20px 0 0 0;
  }

  #user-prices-return {
    margin: 20px auto 0;
  }

  #user-prices-method + #user-prices-return {
    margin: 20px 0 0 20px;
    padding: 29px 20px 20px 50px;
  }
}

@media screen and (min-width: 960px) {
  #user-prices-title {
    width: 95.83333333333333%; /* 920px @960px */
  }

  .user-prices-options-box,
  #user-prices-validation {
    width: 60%;
  }

  .user-prices-option button {
    padding: 10px 10px 10px 30px;
  }
}


/*****************************************************/
/********************* BRANDS PAGE *******************/
/*****************************************************/

.brands-headline {
  background-image: url(images/img_cat/marques.jpg);
}

.brand-title {
  width: 93.75%; /* 300px @320px */
  margin: 60px 0 10px 3.125%; /* 10px @320px */
  padding: 0 0 10px 0;
  font-size: 3em;
  font-weight: 700;
  line-height: 1em;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 3px solid #a21a3f;
  color: #a21a3f;
}

.brand-list li {
  display: inline-block;
  vertical-align: top;
  width: 45.3125%; /* 145px @320px */
  margin: 10px 0 0 3.125%; /* 10px @320px */
}

.brand-list li img {
  width: 100%;
}

@media screen and (min-width: 480px) {
  .brand-title {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 60px 0 10px 2.702702702702703%; /* 20px @740px */
  }

  .brand-list li {
    width: 29.72972972972973%; /* 220px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }
}

@media screen and (min-width: 960px) {
  .brand-title {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 60px 0 10px 2.083333333333333%; /* 20px @960px */
  }

  .brand-list li {
    width: 22.39583333333333%; /* 215px @960px */
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
  }
}


/*****************************************************/
/*********************** COOKIES *********************/
/*****************************************************/

#cookies {
  width: 100%;
  padding: 5px 0;
  background-color: rgba(51, 51, 51, 0.75);
}

#cookies p {
  color: #FFFFFF;
  font-size: 0.85em;
  text-align: center;
}


/*****************************************************/
/*********************** USERBAR *********************/
/*****************************************************/

#userbar {
  width: 100%;
  background-color: #a21a3f;
  vertical-align: middle;
  position: fixed;
  z-index: 1500;
  bottom: 0;
  left: 0;
}

#userbar-submenu {
  display: none;
}

#userbar-name, #userbar-shopping-cart,
#userbar-search-form, #userbar-log {
  display: none;
}

#mobile-userbar {
  padding: 5px 0;
}

#mobile-userbar > div, #mobile-userbar a, #mobile-userbar input {
  display: inline-block;
  width: 21.09375%;
  margin: 0 0 0 3.125%; /* 10px @320px */
  padding: 5px 0;
  min-height: 40px;
  vertical-align: top;
  background-color: #a21a3f;
}

#mobile-userbar > div img, #mobile-userbar a img {
  margin: 0 auto;
}

#mobile-search {
  background-image: url(images/search.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#mobile-cart {
  position: relative;
}

.cart-alert {
  display: none;
  position: absolute;
  z-index: 9999;
  top: -60px;
  left: -10%;
  width: 120%;
  padding: 0 0 9px 0;
  background: url(images/cart-alert.png) no-repeat center bottom;
}

.cart-alert span {
  display: block;
  padding: 5px 0;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
  background-color: #1a9da2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#mobile-log-in-out {
  height: 50px;
  background-color: #7e0e2c !important;
  background-image: url(images/log.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

#ecom-choice-wrap {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

#ecom-choice {
  position: relative;
  top: 50%;
  width: 300px;
  margin: -100px auto 0;
  padding: 20px;
  box-sizing: border-box;
  background-color: #FFF;
}

#ecom-choice b {
  text-transform: uppercase;
}

#old-ecom, #new-ecom {
  cursor: pointer;
  padding: 10px 0;
  color: #FFF;
  text-align: center;
  line-height: 25px;
}

#old-ecom {
  background-color: #a21a3f;
}

#old-ecom:hover {
  background-color: #7e0e2c;
}

#new-ecom {
  margin: 20px 0 0 0;
  background-color: #1a9da2;
}

#new-ecom:hover {
  background-color: #10676a;
}

@media screen and (min-width: 960px) {
  #userbar-submenu {
    display: block;
    border-top: 5px solid #a21a3f;
    background-color: #333333;
  }

  #userbar-submenu div {
    display: table;
    width: 100%;
  }

  #userbar-submenu a {
    display: table-cell;
    width: 25%;
    line-height: 45px;
    color: #FFFFFF;
    text-align: center;
    cursor: pointer;
  }

  #userbar-submenu a:hover {
    background-color: #1a9da2;
  }

  #userbar-submenu a img {
    display: inline-block;
    margin: -3px 5px 0 0;
    vertical-align: middle;
  }

  #userbar-name, #userbar-shopping-cart,
  #userbar-search-form {
    display: inline-block;
    min-height: 40px;
    margin: 5px 2.083333333333333% 5px 0; /* 20px @960px */
    vertical-align: top;
  }

  #userbar-name {
    width: 26.04166666666667%; /* 250px @960px */
  }

  #userbar-name p, #userbar-shopping-cart p {
    line-height: 40px;
    color: #FFFFFF;
  }

  #userbar-name p:hover, #userbar-shopping-cart p:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  #userbar-name p:before {
    content: url(images/user.png);
    float: left;
    margin: 0 5px 0 0;
    height: 40px;
  }

  #userbar-name p span {
    display: block;
    padding: 6px 0 0 0;
    line-height: 15px;
  }

  #userbar-name p span + span {
    padding: 0;
    font-size: 0.85em;
  }

  #userbar-shopping-cart p:before {
    content: url(images/cart.png);
    float: left;
    margin: 0 5px 0 0;
    height: 40px;
  }

  #userbar-shopping-cart, #userbar-search-form {
    position: relative;
    width: 31.25%; /* 300px @960px */
  }

  .cart-alert {
    top: -55px;
    left: 25%;
    width: 42.5%;
  }

  .cart-alert span {
    padding: 10px 0;
  }

  #userbar-field, #userbar-search {
    min-height: 40px;
    vertical-align: top;
  }

  #userbar-field {
    width: 70%; /* 210px @300px */
    padding: 0 3.333333333333333%; /* 10px @300px */
  }

  #userbar-search {
    width: 13.33333333333333%; /* 40px @300px */
    background: url(images/search.png) no-repeat center #1a9da2;
    background-size: 90%;
    cursor: pointer;
  }

  #userbar-search:hover {
    background-color: #10676a;
  }

  #userbar-log {
    display: inline-block;
    width: 5.208333333333333%; /* 50px @960px */
  }

  #log-in-out {
    width: 100%;
    min-height: 50px;
    line-height: 50px;
    background-color: #7e0e2c;
    background-image: url(images/log.png);
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: top;
    cursor: pointer;
  }

  #log-in-out:hover {
    background-color: #1a9da2
  }

  #mobile-userbar {
    display: none;
  }
}


/*****************************************************/
/*********************** FOOTER **********************/
/*****************************************************/

footer {
  clear: both;
  margin: 40px 0 0 0;
  border-top: 5px solid #a21a3f;
  background-color: #333333;
}

#location {
  color: #FFFFFF;
}

#office {
  width: 93.75%; /* 300px @320px */
  margin: 40px 0 0 3.125%; /* 10px @320px */
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
}

#map {
  width: 93.75%; /* 300px @320px */
  height: 300px;
  margin: 20px 0 0 3.125%; /* 10px @320px */
}

#office-info {
  width: 93.75%; /* 300px @320px */
}

#add-phone {
  margin: 20px 0 0 3.125%; /* 10px @320px */
}

#add-phone p + p {
  margin: 10px 0 0 0;
}

#schedule {
  margin: 0 0 0 3.125%; /* 10px @320px */
}

.schedule-title {
  margin: 20px 0 0 0 !important;
  font-size: 1.25em;
  font-weight: 700;
}

#schedule p {
  margin: 5px 0 0 0;
}

.foot-menu {
  width: 93.75%; /* 300px @320px */
  margin: 0 0 0 3.125%; /* 10px @320px */
  padding: 0 0 100px 0;
}

.foot-menu nav {
  margin: 40px 0 0 0;
}

.foot-menu nav h4 {
  padding: 0 0 5px 0;
  border-bottom: 2px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 1.25em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.foot-menu nav ul li {
  padding: 15px 0 0 0;
  text-align: center;
}

.foot-menu nav ul li a {
  color: #FFFFFF;
}

.foot-menu nav ul li a:hover {
  font-weight: 700;
}

@media screen and (min-width: 480px) {
  #office {
    width: 94.59459459459459%; /* 700px @740px */
    margin: 40px 0 0 2.702702702702703%; /* 20px @740px */
    border-bottom: 2px solid #FFFFFF;
  }

  #map {
    display: inline-block;
    vertical-align: top;
    width: 40.54054054054054%; /* 300px @740px */
    margin: 20px 0 0 2.702702702702703%; /* 20px @740px */
  }

  #office-info {
    display: inline-block;
    vertical-align: top;
    width: 43.24324324324324%; /* 320px @740px */
    margin: 20px 0 0 5.405405405405405%; /* 40px @740px */
  }

  #add-phone {
    width: 100%;
    margin: 0;
  }

  #schedule {
    width: 100%;
    margin: 20px 0 0 0;
  }

  .foot-menu {
    width: 100%;
    margin: 0;
  }

  .foot-menu nav {
    display: inline-block;
    vertical-align: top;
    width: 27.92792792792793%; /* 206px @740px */
    margin: 40px 2.702702702702703% 0 2.702702702702703%; /* 20px @740px */
  }

  .foot-menu nav h4,
  .foot-menu nav ul li {
    text-align: left;
  }
}

@media screen and (min-width: 960px) {
  #office {
    width: 95.83333333333333%; /* 920px @960px */
    margin: 40px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #map {
    width: 46.875%; /* 450px @960px */
    margin: 20px 0 0 2.083333333333333%; /* 20px @960px */
  }

  #office-info {
    width: 42.70833333333333%; /* 410px @960px */
    margin: 20px 0 0 5.405405405405405%; /* 40px @740px */
  }

  .foot-menu {
    padding: 0 0 135px 0;
  }

  .foot-menu nav ul li {
    padding: 10px 0 0 0;
  }

  .foot-menu nav {
    width: 29.16666666666667%; /* 280px @960px */
    margin: 40px 2.083333333333333% 0 2.083333333333333%; /* 20px @960px */
  }

}