/* --- span alert --- */
.alert{
  display:block;
  background-color:#ff5400;
  padding:1rem;
  font-weight:bold;
  color:white;
}

.alert.alert_marged{
  margin-top:2rem;
}

/*----- Header -----*/

.header_mobile{
  display:none;
}

header.haut {
  background-color:#f2f2ee;
}

header.haut>div {
  width:100%;
  max-width:75rem;
  margin:auto;
  padding:0 2rem;
}

header.haut nav.haut{
  position:relative;
  display:flex;
  justify-content: flex-end;
  padding:1rem 0;
  font-size:0.9rem;
}


header.haut nav.haut div.rechercher form input:target{
  width:10rem;
  opacity:1;
}

header.haut div.close{
  display:none;
}

header.haut nav.haut .menu_lang .button{
    display:block;
    width:100%;
    padding: 0.5rem;
    border:1px solid white;
}

header.haut nav.haut .menu_lang select{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    border: none;
    outline: none;
}

header.haut nav.haut a{
  margin-left:1rem;
  letter-spacing: 0.05rem;
  border:1px solid white;
  padding:0.5rem;
}

header.haut nav.haut a span.panier_nombre_produits{
  display:inline-block;
  font-size:0.7rem;
  line-height:0.7rem;
  text-align:center;
  vertical-align:middle;
  padding:0.3rem 0.4rem;
  border-radius:1rem;
  background-color:#cbd644;
}


header.haut nav.haut div.messages{
  position:absolute;
  top:3.5rem;
  right:0rem;
  width:15rem;
  padding:1rem;
  background-color:#cbd644;
  z-index:-100;
  animation-name: disparition;
  animation-duration: 3s;
  opacity:0;
  border-radius:0.3rem;
  font-family:'roboto_bold';
}

@keyframes disparition {
    0% {
      opacity:0;
      top:8rem;
      opacity:0;
      z-index:100;
    }
    20%{
      top:3.5rem;
      opacity:1;
    }
    70% {
      opacity:1;
    }
    99%{
      opacity:0;
      z-index:100;
    }
    100% {
      z-index:-100;
    }
}

header.haut a.logo{
  display:block;
  width:15rem;
  margin:0.5rem auto 1rem auto;
}

header.haut a.logo img{
  width:100%;
  height:auto;
}

nav.principal {
}

nav.principal ul{
  padding-bottom:1rem;
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
}

nav.principal ul li{
  margin:0.4rem;
}

nav.principal ul li a{
  display:table;
  height:100%;
  padding:0.5rem 0.7rem;
  font-family: 'roboto_light';
  text-transform:uppercase;
  letter-spacing:0.1rem;
  font-size:0.85rem;
  line-height:1rem;
  text-align:center;
  border:1px solid white;
}

nav.principal ul li a span{
  display:table-cell;
  vertical-align: middle;
}

nav.principal ul li a.on{
  background-color:white;
}

sup {
  font-size:0.7em;
  vertical-align: super;
}

/*----- Ensemble -----*/

body>div.ensemble {
  width:100%;
  max-width:75rem;
  margin:auto;
  padding:2rem;
  background-color:white;
}

/*---- Connexion -----*/
section.connexion {
  width:50%;
  margin:auto;
}

section.connexion div.seul{
  margin:auto;
}


section.connexion div form button, section.connexion div a.bouton {
  width:100%;
  text-align:center;
}

/*----- général -----*/
h1.coupe {
  display:flex;
  justify-content:center;
  background-image:url('../img/regle.svg');
  background-repeat:repeat-x;
  background-position: center;
  margin:2rem 0;
}

h1.coupe span {
  display:block;
  padding:0 2rem;
  font-size:1.7rem;
  font-family: 'roboto_light';
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  background-color:white;
  text-align:center;
  max-width: 80%;
}

p.chapeau {
  font-size:1.5rem;
}


/*--- menu collections image ---*/
nav.menu_collections ul {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-gap:2rem;
}



nav.menu_collections ul li a{
  display:block;
}

nav.menu_collections ul li a figure{
  position:relative;
}

nav.menu_collections ul li a figure img{
  width:100%;
  height:auto;
}

nav.menu_collections ul li a figure figcaption{
  position:absolute;
  top:20%;
  width:100%;
  display:flex;
  justify-content: center;
}

nav.menu_collections ul li a figure figcaption span{
  background-color:white;
  padding:1rem 1.3rem;
  border:2px solid #cbd644;
  font-family: 'roboto_light';
  text-transform: uppercase;
  letter-spacing:0.1rem;
  text-align:center;
}

/*--- menu collections liste ---*/
nav.menu_collections_liste ul {
  display:flex;
  flex-wrap: wrap;
  justify-content:center;
  margin:auto;
  margin-bottom:3rem;
  width:80%;
}

nav.menu_collections_liste ul li a{
  display:block;
  background-color:white;
  padding:0.5rem 0.7rem;
  border:1px solid #e9eccb;
  font-family: 'roboto_light';
  font-size:0.85rem;
  text-transform: uppercase;
  letter-spacing:0.1rem;
  text-align:center;
  margin:0.6rem 0.8rem;
}

nav.menu_collections_liste ul li a.on{
  border:1px solid #cbd644;
}

/*--- collection ---*/

div.collection_display {
  display:grid;
  grid-template-columns: 10rem 1fr;
  grid-gap:2rem;
}

div.filtres form{
  font-size:0.9rem;
  display:block;
}

div.filtres form>label{
  display:block;
  font-size:1rem;
  color:rgba(0,0,0,0.7);
  padding-bottom:0.5rem;
}

div.filtres form ul{
  padding-bottom:1rem;
}

div.filtres form input[type="submit"].bouton{
  padding:0.5rem;
  font-size:0.9rem;
}

section.collection {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap:2rem;
}

section.collection a{
}

section.collection a figure img{
  width:100%;
  height:auto;
}

h1.collection{
  display:block;
  font-family: 'roboto_light';
  font-size:1.9rem;
  text-transform: uppercase;
  letter-spacing:0.1rem;
  text-align:center;
  margin:0 1rem 1.5rem 1rem;
}

p.collection_description{
  display:block;
  font-family: 'roboto_light';
  font-size:1rem;
  letter-spacing:0.1rem;
  text-align:center;
  max-width:50rem;
  margin:auto;
  margin-bottom:1.5rem;
}

section.collection a div.visuel{
  display:block;
}

section.collection a div.visuel img{
  display:block;
  z-index:2;
}

section.collection a div.visuel h2.titre{
  position:absolute;
  bottom:0;
  width:100%;
  display:block;
  font-family: 'roboto_light';
  font-size:0.8rem;
  text-transform: uppercase;
  letter-spacing:0.1rem;
  text-align:center;
  padding:0.3rem 0.8rem;
  background-color:#e9eccb;
  z-index:1;
  transition:all 0.1s;
}

section.collection a div.visuel:hover h2.titre,
section.collection a div.visuel:focus h2.titre{
  transform: translate(0, 100%);
}

section.collection a figure figcaption .reference{
  display:block;
  font-family: 'roboto_light';
  font-size:0.8rem;
  text-transform: uppercase;
  letter-spacing:0.1rem;
  text-align:center;
  margin:0.5rem 0.8rem;
}

/*--- papier ---*/

article.papier h1.coupe{
  margin-bottom:0.2rem;
}

article.papier div.reference{
  display:block;
  font-family: 'roboto_light';
  font-size:0.7rem;
  text-transform: uppercase;
  letter-spacing:0.2rem;
  text-align:center;
  margin:0rem 0.8rem 2rem 0.8rem;
}

article.papier header{
  display:flex;
  justify-content:space-between;
  margin-bottom:2rem;
}

article.papier header div.description{
  width:38%;
}

article.papier header div.bouton{
  width:18%;
}

article.papier header div.bouton a.bouton span.details{
  display:block;
  padding-top:0.1rem;
  font-size:0.9rem;
}

/*--- recadrage ----*/

article.papier.recadrer form{
  padding-bottom:3rem;
}
article.papier.recadrer form>div{
  width:30%;
}
article.papier.recadrer form>div.infos span{
  display:block;
}
article.papier.recadrer form>div.infos span.titre{
  font-family: 'roboto_bold';
}
article.papier.recadrer form>div.infos span.prix_ttc{
  font-size:1.2rem;
}

/*- pour l'aperçu --*/

article.papier nav.miniatures ul{
  display:flex;
  flex-wrap: wrap;
}

article.papier nav.miniatures ul li a{
  display:flex;
  flex-wrap: wrap;
  margin:0 1rem 1rem 0;
}

article.papier div.cible {
  display:none;
}

article.papier div.ecran_apercu {
  width:100%;
  overflow:hidden;
}

article.papier div.apercu  {
  display:flex;
  transition:0.3s left;
  left:0;
}

article.papier figure img{
  width:100%;
}



/*--- formulaires et bourons ---*/
a.bouton, input[type='submit'].bouton, button, .passwordreset form input[type='submit'] {
  font-family: 'roboto';
  font-size:1.1rem;
  color:rgba(0,0,0,0.7);
  display:block;
  padding:1rem 1.2rem;
  border-radius: 0.2rem;
  background-color:#e9eccb;
  border:0;
  cursor:pointer;
}

a.bouton:hover, input[type='submit'].bouton:hover, button:hover, .passwordreset form input[type='submit']:hover,
a.bouton:focus,input[type='submit'].bouton:focus, button:focus, .passwordreset form input[type='submit']:focus,
a.bouton:active, input[type='submit'].bouton:active, button:active, .passwordreset form input[type='submit']:active{
  color:rgba(0,0,0,1);
  background-color:#cbd644;
}

.formulaire, .passwordreset form {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.formulaire p{
  padding:0 0 1rem 0;
}

.formulaire p.c100, .passwordreset form p {
  width:100%;
}

.formulaire p.c50{
  width:49%;
}

.formulaire p.c33{
  width:33%;
}

.formulaire p.c67{
  width:65%;
}

.formulaire label, .passwordreset form label{
  font-size:1.1rem;
  display:block;
}

.formulaire input, .formulaire textarea, .passwordreset form input{
  font-size:1.1rem;
  padding:0.5rem;
  border: 1px solid rgba(0,0,0,0.2);
  width:100%;
}

.errorlist{
  padding:2rem 0;
}

.errorlist a.bouton{
  margin-top:1rem;
}



/*--- Recherche ----*/
section.recherche form {
  width:50%;
  margin:auto;
  padding:2rem 0;
}

section.recherche form button{
  font-size:1.1rem;
  padding:0.5rem 0.7rem;
}


section.recherche h1 {
  font-size:1.2rem;
}


/*--- profil utilisateur ----*/
section.utilisateur article.commande {
  padding:1rem 0;
  border-bottom:1px solid black;
  display: flex;
}

section.utilisateur h1{
  font-size:1.5rem;
  padding-top:2rem;
  padding-bottom:0.5rem;
}

section.utilisateur article.commande div{
  width:20%;
}


/*------ panier ---------*/
section.commande h1.coupe {
  margin-bottom:0.2rem;
}

section.commande h1.coupe span{
  font-size:0.8rem;
}

section.commande nav{
  padding: 1rem 0 1.5rem 0;
  border-bottom:2px solid #cbd644;
  margin-bottom:2rem;
}

section.commande nav ul{
  display:flex;
  justify-content: center;
  flex-wrap: wrap;
}

section.commande nav ul li {
  font-family: 'roboto_light';
  font-size:1rem;
  text-transform: uppercase;
  letter-spacing:0.2rem;
  padding: 0 1rem;
  margin:0.2rem 0;
  color:rgba(0,0,0,0.3);
}


section.commande nav ul li.passe {
  color:rgba(0,0,0,0.4);
  font-family: 'roboto';
}

section.commande nav ul li.on {
  color: black;
  font-family: 'roboto';
}

section.commande article.infos_commande{
  padding-bottom:3rem;
}

section.commande article.produit{
  display:grid;
  grid-template-columns: 5rem 1fr 1fr 1fr 5rem;
  grid-gap:1rem;
  padding:2rem 0;
  border-bottom:1px solid black;
}

section.commande article.produit div span{
  display:block;
}


section.commande article.produit div.visuel img{
  width: 100%;
}

section.commande article.produit div.papier{
  font-size:0.9rem;
  text-transform: uppercase;
  letter-spacing:0.2rem;
}

section.commande article.produit div.papier span.reference{
  padding-top:0.5rem;
  font-size:0.8rem;
}


section.commande article.produit div.prix span.prix_ttc{
  font-size:1.2rem;
}

section.commande article.produit div.supprimer{
  text-align: right;
}

section.commande article.produit div.supprimer a{
  font-size:1.1rem;
  display:inline-block;
}

section.commande article.total {
  font-family: 'roboto_medium';
  display:flex;
  padding-top:2rem;
}

section.commande article.total div.titre{
  width:70%;
  text-align:right;
  padding-right:2rem;
  font-size:1.4rem;
}

section.commande article.total div.prix{
  width:30%;
}

section.commande article.total div.prix span{
  display:block;
  font-size:1.1rem;
}

section.commande article.total div.prix span.total_ttc{
  font-size:1.3rem;
}

section.commande h1.adresse {
  text-align:center;
  font-size:2rem;
  padding-bottom:2rem;
}

section.commande form.adresse div.champs {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width:50%;
  margin:auto;
}

section.commande div.adresses{
  padding-top:4rem;
  padding-bottom:4rem;
  display:grid;
  grid-gap:1rem;
  grid-template-columns:repeat(3,1fr);
}


section.commande article.adresse h3, section.commande article.infos_commande h3, section.commande h3.contenu {
  font-size:1.4rem;
  padding-bottom:0.5rem;
  margin-bottom:1rem;
  border-bottom:1px solid black;
  display:inline-block;
}

section.commande article.paiement {
  text-align:center;
  font-size:3rem;
}

section.commande div.controles {
  display: flex;
  justify-content:space-between;
  padding-top:3rem;
  width:100%;
}

section.commande div.controles a.bouton, section.commande div.controles button{
  font-family: 'roboto_medium';
  font-size: 1.2rem;
}

section.commande div.controles a.bouton.droite span{
  letter-spacing:0rem;
  padding-left:0.5rem;
}

section.commande div.controles a.bouton.gauche span{
  letter-spacing:0rem;
  padding-right:0.5rem;
}

section.commande div.accepter_cgv {
  font-size:1.3rem;
  text-align:center;
  margin-top:1rem;
  padding: 1rem 1.2rem;
  border-radius: 0.2rem;
  background-color: rgb(240,240,240);
  border: 0;
}

section.commande div.accepter_cgv a{
  text-decoration: underline;
}

section.commande div.accepter_cgv input[type="checkbox"] {
  font-size:1.3rem;
}

section.commande form.paiement {
  padding:2rem 0 3rem 0;
  text-align:center;
}

section.commande form.paiement .payer{
  font-size:1.4rem;
  display:inline-block;
}

section.commande article.suivi{
  margin-bottom:2rem;
  text-align:center;
}

section.commande article.suivi a.bouton{
  display:inline-block;
}

/*--- trois colonne ---*/
section.colonne_3 {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:2rem;
}

section.colonne_3 article header figure img{
  width:100%;
  height:auto;
}

section.colonne_3 article header h2{
  font-size:1.5rem;
  padding-bottom:1rem;
  font-family: 'roboto_light';
  letter-spacing:0.1rem;
  text-transform: uppercase;
  color:#cbd644;
}


section.colonne_3 p,
section.colonne_6 p{
  padding-bottom:1rem;
  letter-spacing:0.01rem;
  line-height:1.45rem;
}

section.colonne_3 p a,
section.colonne_6 p a{
  color: rgb(255,48,0);
}

section.colonne_3 p a:hover,
section.colonne_6 p a:hover{
  color: rgb(255,0,0);
}
/*--- six colonne ---*/
section.colonne_6 {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:2rem;
}

section.colonne_6 article header figure img{
  width:100%;
  height:auto;
}

section.colonne_6 article header h2{
  font-size:1.5rem;
  padding-bottom:1rem;
  font-family: 'roboto_medium';
  letter-spacing:0.1rem;
  text-transform: uppercase;
  color:#cbd644;
}

/*--- colonne image ---*/

section.colonne_image,
figure.image_principale{
  padding-bottom:1rem;
}

section.colonne_image figure img,
figure.image_principale img {
  width:100%;
  height:auto;
}



/*---- cgv -----*/
div.cgv h2{
  font-size:2rem;
  padding-bottom:2rem;
}

div.cgv h3{
  font-size:1.4rem;
  padding-bottom:2rem;
}

div.cgv p{
  padding-bottom:1rem;
}

/*---- pied ----*/
footer.pied {
  margin-top:5rem;
  border-top:0.3rem solid #f2f2ee;
  color:rgba(0,0,0,0.5);
  font-size:0.8rem;

}

footer.pied a{
  color:rgba(0,0,0,0.5);
}

footer.pied a:hover{
  color:rgba(0,0,0,1);
}

footer.pied>div {
  width:100%;
  max-width:75rem;
  margin:auto;
  padding:2rem 2rem 4rem 2rem;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap:2rem;
}


footer.pied span{
  display:block;
}

footer.pied > div span.titre{
  font-size:1rem;
}


footer.pied > div div.reseaux{
  font-size:1.2rem;
}

footer.pied > div div.reseaux span{
  display:inline-block;
}

footer.pied > div div.reseaux a{
  display:block;
  margin-bottom:1rem;
}


/*------ diaporama -----*/
section.diaporama {
  padding-bottom:2rem;
  position:relative;
}

section.diaporama figure {
  width:100%;
  height:auto;
  position:relative;
}

section.diaporama figure a{
  display:block;
}

section.diaporama figure img{
  width:100%;
  height:auto;
}

section.diaporama figure figcaption{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color:white;
}

section.diaporama figure figcaption span.texte_haut{
  display:block;
  font-size:3rem;
  text-align:center;
  text-shadow: 0px 0px 6px rgba(0,0,0,0.6);
}

section.diaporama figure figcaption span.texte_bas{
  display:block;
  font-size:3rem;
  text-align:center;
  text-shadow: 0px 0px 6px rgba(0,0,0,0.6);
}