@charset "UTF-8";
/* F O N T - F A C E */
@font-face {
  font-family: "brandon-grotesque";
  font-style: medium;
  font-weight: medium;
  src: local("Brandon"), url("../fonts/hvd_fonts__brandongrotesque-medium-webfont.ttf") format("truetype");
}

@font-face {
  font-family: "brandon-grotesque";
  font-style: normal;
  font-weight: normal;
  src: local("Brandon"), url("../fonts/hvd_fonts__brandongrotesque-regular-webfont.ttf") format("truetype");
}

@font-face {
  font-family: "brandon-grotesque";
  font-style: light;
  font-weight: 100;
  src: local("Brandon"), url("../fonts/hvd_fonts__brandongrotesque-light-webfont.ttf") format("truetype");
}

@font-face {
  font-family: "proxima-nova";
  font-style: light;
  font-weight: 100;
  src: local("Proxima"), url("../fonts/mark_simonson_-_proxima_nova_light-webfont.ttf") format("truetype");
}

@font-face {
  font-family: "proxima-nova";
  font-style: normal;
  font-weight: 400;
  src: local("Proxima"), url("../fonts/mark_simonson_-_proxima_nova_regular-webfont.ttf") format("truetype");
}

/* C O L O N N E S */
.four {
  width: 940px;
}

.three {
  width: 700px;
}

.two {
  width: 460px;
}

.one {
  width: 220px;
}

/* B A S E */
ul {
  padding: 0;
  margin: 0;
}

ul li {
  list-style: none;
}

body {
  font-family: "proxima-nova", sans-serif;
  font-weight: 200;
  color: #111;
  background: #FAFAFA;
  height: 100%;
}

body.landing main {
  padding: 0;
  margin: 0;
}

p {
  font-size: 18px;
  line-height: 25px;
}

a {
  color: #111;
  font-weight: 600;
  text-decoration: none;
}

.container {
  width: 940px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

header {
  background: #E6A42E;
  color: white;
  position: fixed;
  width: 100%;
  z-index: 99999;
  height: 91px;
}

.logo {
  position: absolute;
  left: 0;
  top: 20px;
}

main {
  background: white;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
  padding: 200px 0 134px;
}

aside {
  margin-top: 0;
  float: right;
  width: 220px;
}

.button {
  background: #E6A42E;
  padding: 7px 0;
  font-size: 18px;
  width: 220px;
  text-align: center;
  text-decoration: none;
  border: none;
  color: white;
  position: relative;
  left: 240px;
  font-family: "brandon-grotesque";
  font-weight: 400;
  display: inline-block;
}

/* T Y P O */
.uppercase {
  text-transform: uppercase;
}

h1 {
  padding: 0;
  margin: 0;
  margin-bottom: 15px;
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 100;
  color: #E6A42E;
  font-size: 38px;
  line-height: 54px;
}

h2 {
  font-family: "brandon-grotesque";
  color: #E6A42E;
  font-weight: 100;
  font-size: 25px;
  line-height: 25px;
  margin-top: 0;
  margin-bottom: 10px;
}

h3 {
  font-family: "brandon-grotesque";
  color: #E6A42E;
  font-weight: 100;
  font-size: 18px;
}

/* N A V */
nav {
  display: inline;
}

.nav {
  display: block;
  text-align: center;
}

.nav--element {
  display: inline-block;
}

.nav--element__lien {
  color: white;
  font-weight: 100;
  font-family: "brandon-grotesque";
  text-transform: uppercase;
  font-size: 18px;
  padding: 5px 10px;
  margin: 25px 0;
  display: block;
  border: 2px solid #E6A42E;
}

.nav--active {
  border: 2px solid white;
}

.header--logo {
  position: absolute;
  right: 0;
  top: 30px;
}

/* F O O T E R */
footer {
  background: #FAFAFA;
  font-size: 18px;
}

.footer--list {
  margin-top: 85px;
  width: 220px;
  margin-right: 20px;
  float: left;
  padding: 0;
}

.footer--list__last-child {
  margin-right: 0;
}

.footer--one ul {
  padding: 0;
}

.footer--list__element {
  list-style: none;
  padding: 5px 0;
}

.footer--four {
  width: 940px;
  clear: both;
  display: block;
  padding: 110px 0;
  text-align: center;
}

footer a {
  font-weight: 100;
}

/* A S I D E - D I V */
.aside--div {
  position: relative;
}

.aside--div h2 {
  padding-top: 20px;
}

.aside--div__panier {
  padding: 2px;
}

.panier-block {
  display: none;
}

.aside--div__panier--element {
  list-style: none;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 100;
}

.aside--div__livraison {
  padding: 2px;
}

.aside--div__livraison--element {
  list-style: none;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 100;
}

/* P A G E   P R O D U I T */
.pageproduit--fildariane {
  color: #ADADAD;
  font-weight: 100;
}

.pageproduit--fildariane a {
  color: #ADADAD;
}

.titre-petit {
  font-size: 18px;
}

.pageproduit--text {
  font-size: normal;
}

.pageproduit--text p {
  margin-bottom: 0;
}

.pageproduit--text__livraison {
  margin-top: 0;
  color: #ADADAD;
}

.pageproduit--image {
  margin: 20px 0 70px 0;
  width: 700px;
  height: 265px;
  background: #ADADAD;
}

.pageproduit--aside {
  background: white;
  position: absolute;
  top: 99px;
  right: 0px;
  line-height: 24px;
}

.orange {
  color: #E6A42E;
}

.grey {
  color: #ADADAD;
}

.black {
  color: #111;
}

.bold {
  font-weight: normal;
}

.text-center {
  text-align: center;
  display: block;
}

.miam {
  left: 0;
  cursor: pointer;
  padding: 7px 0;
  border: 1px solid #E6A42E;
}

.miam:hover {
  background: none;
  color: #E6A42E;
  padding: 7px 0;
  border: 1px solid #E6A42E;
}

.miam-clicked {
  background: white;
  color: #E6A42E;
  padding: 6px 0;
  border: 1px solid #E6A42E;
}

#thebutton {
  width: 220px;
}

footer a:hover, header a:hover, .ailleurs--part__element a:hover, .pageproduit--fildariane a:hover, .credits a:hover {
  text-decoration: underline;
}

.plus-de-produits, .accueil-produits {
  padding: 0;
  list-style: none;
  display: inline;
}

.plus-de-produits--element, .accueil-produits--element {
  width: 220px;
  height: 220px;
  border: 1px solid #E6A42E;
  background: white;
  margin-top: 10px;
  margin-right: 17px;
  position: relative;
  float: left;
}

.plus-de-produits--element p, .accueil-produits--element p {
  line-height: 1;
}

.section--produits .accueil-produits--element:hover, .plus-de-produits--element:hover {
  border: 1px solid #111;
  transition: .2s ease-out;
}

.plus-de-produits--element:nth-child(3) {
  margin: 0;
  margin-top: 10px;
}

.plus-de-produits--element__image, .accueil-produits--element__image {
  width: 220px;
  height: 160px;
  background: #ADADAD;
}

.plus-de-produits--element__titre, .accueil-produits--element__titre {
  position: absolute;
  margin-bottom: 0;
  bottom: 10px;
  left: 10px;
  width: 135px;
}

.text--element__double {
  width: 440px;
}

.accueil-produits--element__prix {
  position: absolute;
  right: 10px;
  bottom: -10px;
}

.accueil-produits a, .plus-de-produits a {
  position: relative;
  display: block;
  height: 220px;
  font-weight: 100;
}

.button:hover {
  padding: 6px 0;
  text-decoration: none;
}

aside {
  margin-bottom: 134px;
}

.panier-relative {
  position: relative;
  width: 166px;
  padding-bottom: 20px;
}

.aside-div__panier--element {
  position: relative;
}

.aside--div__panier--element__titre {
  width: 120px;
  margin-bottom: 10px;
}

.aside-div__panier--element__prix {
  position: absolute;
  bottom: 12px;
  right: 0;
  font-weight: bold;
}

.aside-div__panier--element__croix {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
}

.aside-div__panier--element__input {
  width: 40px;
  height: 10px;
  left: 0;
  text-align: center;
  position: relative;
  color: #111;
}

.aside--div__total--prix {
  font-weight: bold;
  position: absolute;
  right: 10px;
}

.aside--div__total {
  padding-top: 0px;
  border-top: 1px solid #ADADAD;
  margin-right: 10px;
}

.button--verification {
  position: relative;
  left: 478px;
}

.accepter-conditions {
  position: relative;
  top: 0;
  left: 260px;
}

.accepter-conditions__button {
  position: relative;
  right: -280px;
}

.header--logo__panier {
  margin-left: 10px;
  position: relative;
}

.panier-quantite {
  position: absolute;
  top: 9px;
  margin: 0;
  display: block;
  width: 35px;
  color: #E6A42E;
  font-family: "brandon-grotesque", sans-serif;
  font-weight: bold;
  font-size: 15px;
  text-align: center;
}

.panier-quantite-aside {
  font-size: 18px;
}

.pageproduit--aside__quantite {
  width: 70px;
  height: 40px;
  position: absolute;
  top: 14px;
  right: 0;
  color: black;
  text-align: center;
  border: 1px solid #E6A42E;
}

.normal {
  margin-top: 23px;
}

.aside-div__panier--element__input {
  width: 70px;
  height: 40px;
  color: black;
  text-align: center;
  border: 1px solid #E6A42E;
}

.div-plus-de-produits {
  padding-top: 40px;
  border-top: 1px solid #E6A42E;
}

.pagedeproduit--aside__prix {
  position: absolute;
  right: 0;
}

.button--panier__lateral {
  background: #E6A42E;
  padding: 6px 51px;
  font-size: 18px;
  width: 120px;
  text-align: center;
  border: none;
  color: white;
  position: relative;
  left: -20px;
  font-family: "brandon-grotesque";
  font-weight: medium;
  display: inline-block;
  margin-top: 55px;
  padding: 10px 20px;
  width: 180px;
}

.button--panier__lateral:hover {
  background: white;
  border: 1px solid #E6A42E;
  color: #E6A42E;
  text-decoration: none;
  padding: 9px 0;
  width: 218px;
}

.panier-lateral {
  padding-top: 100px;
  padding-left: 20px;
  width: 200px;
  height: 100%;
  display: none;
  position: fixed;
  right: 0;
  background: #FAFAFA;
  z-index: 9999;
}

.panier-lateral .aside--div__total {
  margin-right: 30px;
}

.panier-lateral .position-right {
  right: 30px;
}

.unecolone-deux {
  width: 220px;
  position: relative;
  top: -30px;
  left: 240px;
  height: 100px;
}

.unecolone-deux img {
  position: relative;
  left: 30px;
}

.unecolone-deux input {
  position: inherit;
  top: -25px;
}

.header--logo__panier {
  width: 35px;
  height: 31px;
  float: right;
  cursor: pointer;
}

.header--logo__panier-vide {
  background: url("/_assets/img/panier.svg");
}

.header--logo__panier-full {
  background: url("/_assets/img/panier-plein.svg");
}

.button-input {
  width: 220px;
  padding: 6px 0;
  border: 1px solid #E6A42E;
}

.button-input:hover {
  border: 1px solid #E6A42E;
  background: white;
  color: #E6A42E;
  width: 220px;
  padding: 6px 0;
  transition: .2s ease-out;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

/* A N I M   P A N I E R */
.panier-animation {
  animation: panierFrames linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: panierFrames ease-out 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: panierFrames ease-out 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: panierFrames ease-out 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: panierFrames ease-out 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes panierFrames {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(10deg);
  }
  40% {
    transform: rotate(-9deg);
  }
  60% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@-moz-keyframes panierFrames {
  0% {
    -moz-transform: rotate(0deg);
  }
  20% {
    -moz-transform: rotate(10deg);
  }
  40% {
    -moz-transform: rotate(-9deg);
  }
  60% {
    -moz-transform: rotate(10deg);
  }
  80% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}

@-webkit-keyframes panierFrames {
  0% {
    -webkit-transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(10deg);
  }
  40% {
    -webkit-transform: rotate(-9deg);
  }
  60% {
    -webkit-transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

@-o-keyframes panierFrames {
  0% {
    -o-transform: rotate(0deg);
  }
  20% {
    -o-transform: rotate(10deg);
  }
  40% {
    -o-transform: rotate(-9deg);
  }
  60% {
    -o-transform: rotate(10deg);
  }
  80% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(0deg);
  }
}

@-ms-keyframes panierFrames {
  0% {
    -ms-transform: rotate(0deg);
  }
  20% {
    -ms-transform: rotate(10deg);
  }
  40% {
    -ms-transform: rotate(-9deg);
  }
  60% {
    -ms-transform: rotate(10deg);
  }
  80% {
    -ms-transform: rotate(0deg);
  }
  100% {
    -ms-transform: rotate(0deg);
  }
}

/* À P R O P O S */
.apropos--aside {
  position: absolute;
  top: 75px;
  right: 0px;
  line-height: 24px;
}

.apropos--grid {
  margin-top: 145px;
  overflow: hidden;
}

.apropos--grid p {
  line-height: 1.5;
}

.grid {
  width: 940px;
}

.grid--element {
  width: 218px;
  height: 218px;
  margin-right: 20px;
  margin-bottom: 20px;
  background: white;
  border: 1px solid #E6A42E;
  float: left;
  position: relative;
}

.grid--element__double {
  width: 458px;
}

.grid--element:last-child {
  margin-right: 0;
}

.apropos--grid .grid--element:nth-child(4n) {
  margin-right: 0;
}

.objectifs--grid .grid--element:nth-child(3) {
  margin-right: 0;
}

.strategie--grid .grid--element:nth-child(2) {
  margin-right: 0;
}

.apropos--grid .grid--element p:first-child {
  font-weight: 100;
  font-size: 18px;
  color: #111;
  margin: 0;
  margin-top: 60px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.apropos--grid .grid--element p:nth-child(2) {
  font-weight: 100;
  font-size: 39px;
  color: #ADADAD;
  margin: 0;
  font-family: "brandon-grotesque", sans-serif;
  text-align: center;
}

.apropos--grid .grid--element p:nth-child(3) {
  font-weight: 100;
  font-size: 15px;
  color: #ADADAD;
  margin: 0;
  font-family: "proxima-nova", sans-serif;
  text-align: center;
}

/* P R O D U C T I O N */
.production--element {
  margin-bottom: 150px;
  position: relative;
}

.production--element p {
  width: 420px;
}

.production--element img {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}

.production--element__right {
  position: relative;
  left: 220px;
}

/* P R O D U I T S */
.listedeproduits {
  width: 940px;
}

.produits--filtres {
  width: 940px;
  border-bottom: 1px solid #E6A42E;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.produits--filtres__list {
  margin-top: 55px;
}

.produits--filtres__element {
  display: inline;
  margin-right: 15px;
}

.produits--filtres__element-button {
  background: white;
  color: #ADADAD;
  border: 1px solid #ADADAD;
  width: 220px;
  padding: 6px 0px;
  position: relative;
  left: 0;
}

.produits--filtres__element-button:focus {
  outline: none;
}

.produits--filtres__element-button:hover {
  background: white;
  color: #111;
  border: 1px solid #111;
  transition: .7s ease-out;
}

.produits--filtres__element:nth-child(4n) {
  margin: 0px;
}

.produits--listedeproduits__element {
  width: 220px;
  height: 220px;
  border: 1px solid #ADADAD;
  margin-right: 17px;
  margin-bottom: 17px;
  position: relative;
  float: left;
}

.produits--listedeproduits__element:nth-child(4n) {
  margin: 0;
}

.produits--listedeproduits__element:hover {
  border: 1px solid #111;
  transition: .7s ease-out;
}

/* A C C U E I L */
.accueil {
  margin: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.section--accueil {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #E6A42E;
  width: 100%;
  color: white;
}

.section--accueil h1 {
  color: white;
  font-size: 57px;
  margin-top: 70px;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 1px;
}

.section--accueil p {
  width: 437px;
  letter-spacing: .8px;
  font-size: 27px;
  font-weight: 100;
  line-height: 1.2;
}

.section--accueil .container {
  position: relative;
  padding-top: 150px;
  height: 600px;
  /*	background: url(/_assets/img/accueil-background.svg) right bottom no-repeat;*/
}

.section--accueil__container .button {
  background: white;
  color: #E6A42E;
  left: 0;
}

.section--accueil__container .button:hover {
  background: #E6A42E;
  color: white;
  border: 1px white solid;
  width: 218px;
  transition: .2s ease-out;
}

.section--accueil__arrow {
  z-index: 10;
  width: 100%;
  height: 100px;
  background: url(/_assets/img/accueil-arrow.svg) center center no-repeat;
  position: absolute;
  bottom: 0;
  border: none;
  cursor: pointer;
}

.section--objectifs {
  background: white;
}

.section--strategie {
  background: #FAFAFA;
}

.section--produits {
  background: #E6A42E;
}

.section--produits h1 {
  color: white;
}

.section--produits .button {
  background: white;
  color: #E6A42E;
  position: relative;
  left: 720px;
  margin-top: 20px;
  border: 1px solid white;
  padding: 6px 0;
  width: 218px;
}

.section--produits .button:hover {
  background: #E6A42E;
  color: white;
  border: 1px white solid;
  width: 218px;
  transition: .2s ease-out;
}

.accueil-produits--element {
  width: 220px;
  height: 220px;
  border: 1px solid #E6A42E;
  background: white;
  margin-right: 17px;
  position: relative;
  float: left;
}

.accueil-produits--element:last-child {
  margin-right: 0;
}

.accueil-produits--element__double {
  width: 460px;
}

.section--produits .accueil-produits--element {
  border: 1px solid white;
  background: white;
}

section .container {
  padding: 145px 0;
}

.blog--element {
  border: 1px solid #E6A42E;
  padding: 15px 20px;
  margin-bottom: 20px;
  width: 660px;
  background: url(/_assets/img/blog-arrow.svg) 650px center no-repeat;
}

.blog--element:hover {
  border: 1px solid #111;
  transition: .2s ease-out;
  text-decoration: none;
}

.blog--element h3 {
  text-transform: uppercase;
  color: #111;
}

.blog--element p {
  margin: 0;
  padding-right: 120px;
  font-weight: 100;
  padding-bottom: 15px;
  color: #ADADAD;
}

.blog--element__p:hover {
  text-decoration: none;
}

/*Objectifs*/
.objectif--texte {
  position: absolute;
  bottom: 10px;
  text-align: center;
  width: 100%;
}

.objectif--texte__titre {
  font-size: 25px;
  color: #111;
  text-transform: uppercase;
  margin: 0;
}

.objectif--texte__suite, .strategie--text__suite {
  font-size: 18px;
  color: #ADADAD;
  line-height: 22px;
  margin: 0 auto;
  width: 90%;
  text-align: center;
  font-family: "proxima-nova", sans-serif;
  font-weight: 100;
}

.objectif--texte__suite--double {
  width: 85%;
  margin: 0 auto;
}

.objectif-augmenter {
  background: url(/_assets/img/objectifs/augmenter.svg) center 20px no-repeat;
}

.objectif-transformation {
  background: url(/_assets/img/objectifs/transformation.svg) center 20px no-repeat;
}

.objectif-ameliorer {
  background: url(/_assets/img/objectifs/ameliorer.svg) center 20px no-repeat;
}

.objectif-renforcement {
  background: url(/_assets/img/objectifs/renforcement.svg) center 20px no-repeat;
}

.objectif-contribuer {
  background: url(/_assets/img/objectifs/contribuer.svg) center 20px no-repeat;
}

.strategie--texte__titre {
  font-size: 25px;
  color: #111;
  text-transform: uppercase;
  margin: 0;
  text-align: center;
}

.strategie--texte__suite {
  color: #ADADAD;
  line-height: 22px;
  font-family: "proxima-nova", sans-serif;
  font-weight: 100;
  margin: 0 auto;
  width: 90%;
  text-align: center;
}

.strategie--texte {
  position: absolute;
  top: 60px;
  text-align: center;
  width: 100%;
}

.strategie-decentraliser {
  width: 235px;
  margin: 0 auto;
}

.strategie-decentraliser, .strategie--texte__suite {
  margin-top: 5px;
}

.strategie-sensibiliser {
  top: 90px;
}

.strategie-former {
  top: 60px;
}

.strategie-nationale {
  top: 50px;
}

.strategie-femmes {
  top: 40px;
}

.image--element__double {
  width: 460px;
  height: 160px;
  border: none;
  padding: 0px;
  margin: 0;
  position: absolute;
  left: -0px;
  top: 0px;
}

/* ANIMATIONS */
@-webkit-keyframes SlideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    transform: translateX(-40px);
  }
  50% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.SlideLeft {
  -webkit-animation-name: SlideLeft;
  -moz-animation-name: SlideLeft;
  -o-animation-name: SlideLeft;
  animation-name: SlideLeft;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes SlideUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    transform: translateY(-40px);
  }
  50% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.SlideUp {
  -webkit-animation-name: SlideUp;
  -moz-animation-name: SlideUp;
  -o-animation-name: SlideUp;
  animation-name: SlideUp;
  opacity: 0;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

/* CONTACT */
.contact--aside {
  position: absolute;
  top: 75px;
  right: 0px;
  line-height: 24px;
}

.contact-weight {
  font-weight: 100;
}

.ailleurs--part {
  padding-bottom: 20px;
  position: relative;
}

.contact--element input, .contact--element textarea {
  padding: 9px 15px;
  border: #E6A42E 1px solid;
  border-radius: 0;
  width: 190px;
  color: #111;
  font-weight: 100;
  resize: none;
}

.contact--element input:focus, .contact--element textarea:focus, .pageproduit--aside__quantite:focus, .aside-div__panier--element__input:focus {
  outline: none;
  border: 1px solid #111;
}

.contact--form {
  width: 460px;
  position: relative;
}

.contact--form .button {
  margin-top: 20px;
}

#prenom {
  float: left;
}

#nom {
  float: right;
}

#mail {
  width: 428px;
  margin-top: 20px;
  clear: both;
}

#entreprise {
  float: left;
  margin-top: 20px;
}

#ville {
  float: right;
  margin-top: 20px;
}

#message {
  width: 428px;
  height: 120px;
  margin-top: 20px;
  clear: both;
}

label {
  display: none;
}

.listedeproduits-element {
  margin-top: 20px;
  margin-right: 20px;
  width: 218px;
  border: 1px solid #ADADAD;
}

.listedeproduits-element__double {
  width: 458px;
}

.listedeproduits-element a {
  font-weight: 100;
}

.listedeproduits-element p {
  margin-top: 0;
  padding-top: 20px;
}

.listedeproduits-element img {
  width: 218px;
}

.listedeproduits-element__double img {
  width: 458px;
}

.listedeproduits-element:hover {
  border: 1px solid #111;
  transition: .2s ease-out;
}

.listedeproduits-element:nth-child(3) {
  margin-right: 0;
}

@-webkit-keyframes accueilbrasg {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  30% {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
  40% {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes accueilbrasd {
  0% {
    -webkit-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    -o-transform: rotateZ(0);
    transform: rotateZ(0);
  }
  50% {
    -webkit-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    -o-transform: rotateZ(0);
    transform: rotateZ(0);
  }
  75% {
    -webkit-transform: rotateZ(20deg);
    -moz-transform: rotateZ(20deg);
    -o-transform: rotateZ(20deg);
    transform: rotateZ(20deg);
  }
  100% {
    -webkit-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    -o-transform: rotateZ(0);
    transform: rotateZ(0);
  }
}

.section--accueil__animation {
  position: absolute;
  bottom: 0;
  right: 0;
}

#bras_gauche {
  -webkit-animation: accueilbrasg ease 3s infinite;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: .7s;
  -moz-animation: accueilbrasg ease 3s infinite;
  -moz-animation-fill-mode: forwards;
  -moz-animation-delay: .7s;
  -o-animation: accueilbrasg ease 3s infinite;
  -o-animation-fill-mode: forwards;
  -o-animation-delay: .7s;
  animation: accueilbrasg ease 3s infinite;
  animation-fill-mode: forwards;
  animation-delay: .7s;
}

#bras_droit {
  -webkit-animation: accueilbrasd ease 3s infinite;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: .7s;
  -moz-animation: accueilbrasd ease 3s infinite;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode: forwards;
  -moz-animation-delay: .7s;
  -o-animation: accueilbrasd ease 3s infinite;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode: forwards;
  -o-animation-delay: .7s;
  animation: accueilbrasd ease 3s infinite;
  transform-origin: 50% 50%;
  animation-fill-mode: forwards;
  animation-delay: .7s;
}

.titre-partieun {
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 100;
  text-transform: uppercase;
}

.titre-partiedeux {
  font-family: "brandon-grotesque", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

.titre-light {
  font-weight: 100;
  text-transform: uppercase;
}

.titre-bold {
  font-weight: 400;
  text-transform: uppercase;
}

.credits--aside img {
  position: absolute;
  right: 0;
  top: 0;
}

.styleguide--couleur {
  width: 220px;
  height: 220px;
  margin-right: 20px;
  float: left;
  position: relative;
}

.styleguide--couleur:last-child {
  margin-right: 0;
}

.styleguide--couleur p {
  color: white;
  text-align: center;
  position: relative;
  top: 80px;
}

.styleguide--couleur__orange {
  background: #E6A42E;
}

.styleguide--couleur__gris {
  background: #ADADAD;
}

.styleguide--couleur__grisclair {
  background: #FAFAFA;
}

.styleguide--couleur__noir {
  background: #111;
}

.styleguide--section {
  clear: both;
  margin: 80px 0;
  overflow: hidden;
}

.styleguide--section .button {
  margin-right: 20px;
  margin-top: 20px;
  border: 1px solid #E6A42E;
}

.styleguide--section .button:hover {
  margin-right: 20px;
  margin-top: 20px;
  background: white;
  color: #E6A42E;
  transition: .2s ease-out;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

main {
  padding-top: 200px;
  padding-bottom: 200px;
  margin-top: 0;
  margin-bottom: 0;
}

body {
  background: #FAFAFA;
}

body.landing main {
  padding: 0;
}