@import 'https://fonts.googleapis.com/css?family=Crete+Round:400,400i|Noto+Sans:400,400i,700,700i'/*------------------------

vert foncée:#63A503
noir :#000A00
bleu clair :#D4F5D8
vert clair:#ABDA11
font-family: 'Noto Sans', sans-serif;
font-family: 'Crete Round', serif;
/*-------------------------
GENERAL
------------------------*/

*{
  box-sizing: border-box;
}

html{
  font-size: 62.5%;
}

body{
  font-family: 'Noto Sans',sans-serif;
  font-size: 1.6rem;
  line-height: 1.6; /*defini l'interligne*/
  margin: auto;
  color:#000A00;
  }

section{
  text-align: center;
  margin: 0;
  padding:0;
}

nav, footer,
section.presentation-produits{
  background-color: #63A503;
  color :white;
}
.xflex{
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.xflex li{
  margin: 3%;
}


a{
  color: #000A00;
}
a:hover,.btn{
  text-decoration: none;
  cursor: pointer;
}

img{
  max-width: 100%;
}
.panier:hover{
  cursor: pointer !important;
}

.container {
  max-width: 90%;
  padding: 0 10px;

}
.btn{
  height: 50px;
  margin:20px 0 40px;
  background-color: #ABDA11;
  border-radius:25px 50px 20px 50px;
  text-transform: uppercase;
  box-shadow: -2px -3px 0px #63A503;
}

.btnUpdate{
  background-color: #ABDA11;
  border-radius:25px 50px 20px 50px;
  text-transform: uppercase;
  box-shadow: -2px -3px 0px #63A503;
}

.btn2{
  border: none;
  background-color: #ABDA11;
  border-radius:25px 50px 20px 50px;
  padding: 5px 10px;
  margin:20px 0;
  font-size: 1rem;
  width: 60%;
}

button:focus,.btn:focus, .btn2:focus,.btn3:focus{
  border:none;
  box-shadow: none;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

/*-----------
typographie
---------------*/
h1,h2,h3,h4{
  margin: 2%;
}
h1,h2{
  font-family: 'Crete Round', serif;
}
h1 {
  font-size: 6rem;
}
h2,h3{
  font-size: 3rem;
}
h4,h5{
  font-size: 1.5rem;
}
p, .btn{
  font-family: 'Noto Sans',sans-serif;
  font-size: 1.5rem;
}

.user h3{
  color : white;
}
/*-----------
HEADER
---------------*/
.navbar-light .navbar-nav .nav-link{
  color: white;
  z-index: 2;
}

/*-------------------
 Navigation principal
 -----------------*/
header >nav{
  font-size: 1rem;
}
span.navbar-text ul{
  list-style: none;
  padding: 0;
  font-size: 1rem;
}
.user{
  text-align: center;

  border: solid 1px grey;

  cursor: pointer;
}


/*------------------------------
section presentation produits
------------------------------*/


 figcaption{
  background-color: #D4F5D8;
  padding: 10px 0 5px;
  color: #000A00;
}
/*------------------------------
section presentation relais
------------------------------*/
.presentation-relais select{
  width: 50%;
  margin:20px;
}
.presentation-relais article.selected{
  background-color:#D4F5D8;
  display: block;
}

iframe{
  width: 100%;
  height: 60vh;
  border: none;
}
/*------------------------------
section presentation producteur
------------------------------*/
.presentation-producteur{
  padding: 0;
}
.presentation-producteur div.producteur{

  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-gap: 60px;
  background-color:#D4F5D8;
}
/*-----------------------------
    affichage panier
--------------------------------*/
.showpanier{
  width: 35%;
  height: auto;
  background: #D4F5D8;
  border: 1px solid black;
  z-index : 1000000;
  position: fixed;
  top: 16vh;
  left : 15vw;

}
.arrow-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 25px solid #D4F5D8;
position: fixed;
top: 13vh;
left : 23vw;
}
div .showPanier ul{
  padding: 0;
  list-style: none;
}
/*------------------------------
footer
-----------------------------*/

footer{
  height: 10vh;
  padding: 25px 0;
}

/* footer ul{
  padding-bottom: 3.5%;

} */
.footer{
  margin-top: 5%
}