.wrapper {
	width:100%;
	margin: 0 auto;
	display:grid;
}
* {box-sizing: border-box;}
.wrapper {
  /*border: 2px solid #f76707;*/
  /*border-radius: 5px;*/
  /*background-color: #fff4e6;*/
  grid-template-columns: 0.5fr 6.1fr 0.8fr ;
  margin-top:1em; /*ajoute une marge au-dessus des cadres date*/
 
}.wrapper sunday{
	background-color:blue;
}
.wrapper > div {
  /*background-color: #ffd8a8;*/
  background-color: #fff;
  padding: 0.5em;
   color: #333333;
    vertical-align: middle;
}

.agenda {
  border-left: 2px solid #B3B1AF;
  border-top: 2px solid #B3B1AF;
  border-bottom: 2px solid #B3B1AF;
  border-right: 1px solid #B3B1AF;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;	
  text-align: center;
  font-size: small;

 
}

.agenda.saturday{
  background-color:#D6E2FF;
  font-size: larger;
		
}

.agenda.sunday{
  background-color:#FCE0E8;
  font-size: larger;
 }
.agenda.week{
  background-color:#DDE0E8;
  font-size: larger;
}

.agenda.gold{
  background-color:#BDB76B;
  font-size: larger;
}

.agendadate{
	font-family: 'Barlow', sans-serif;
	font-size:150%;
	font-weight: bold;
	
}

.agendadate.saturday{
	color:#01257E;
}
.agendadate.sunday{
	color:#561010;
}
.event {
  border-left: none;
  border-top: 2px solid #B3B1AF;
  border-bottom: 2px solid #B3B1AF;
  /*border-right: 1px solid #d6bcd6;*/
  /*border-right:2px solid #ccc;*/
  font-family: 'Manrope', sans-serif;
  font-size:medium;
 
}

.radio {
  border-right: 2px solid #B3B1AF;
  border-top: 2px solid #B3B1AF;
  border-bottom: 2px solid #B3B1AF;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;

}

.radio.input{
{
   text-align: center;
   width: 180px;
   height: 180px;
}
}
.event.open{
  color:green;
  border-right:none;
  border-top: none;
  border-bottom: none;
  font-size:small;
  font-style: italic;
}

.event.closed{
  color:red;
  border-right:none;
  border-top: none;
  border-bottom: none;
  font-size:small;
  font-style: italic;
}


.myButtonold {
	box-shadow: 3px 4px 0px 0px #899599;
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	background-color:#ededed;
	border-radius:10px;
	border:1px solid #d6bcd6;
	display:inline-block;
	cursor:pointer;
	color:#595d5e;
	font-family: 'Barlow', sans-serif;
	font-size:12px;
	padding:10px 10px;
	text-decoration:none;
	text-shadow:1px 2px 0px #e1e2ed;
	vertical-align: middle;
}

.myButtonBasket {
	vertical-align: middle;
	background:background:url(https://www.pickandcollect.be/img/order/basket_empty.jpg);
	background-repeat: no-repeat;
	  text-align: center;
   width: 80px;
   height: 80px;
}
.myButtonBasket:hover {
	/*background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);*/
	background:url(https://www.pickandcollect.be/img/order/basket_full.jpg);
	background-repeat: no-repeat ;
	cursor: pointer;
	/*background-color:#bab1ba;*/
}
.myButtonBasket:active {
	position:relative;
	top:1px;
}

.grid-containerindex {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "myphoto mytext";}

  
.myphoto {
  grid-area: myphoto;
  border-radius: 10px;
  margin:auto;
}

.mytext {
   grid-area: mytext;
   margin-left : 10px;
}


@media screen and (max-width: 800px) {
 .grid-containerindex {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(2, 1fr);
   grid-template-areas: "myphoto" "mytext";
 }
 
 
.myphoto{
  text-align:center;
  padding:0;
  margin:0;
 }

 .mytext{
  margin:0;
  padding:0;
 }
 h2{
  margin:0;
  padding:0;
 }
.wrapper {
	width:100%;
	margin: 0 auto;
	display:grid;
}
* {box-sizing: border-box;}
.wrapper {
  /*border: 2px solid #f76707;*/
  /*border-radius: 5px;*/
  /*background-color: #fff4e6;*/
  grid-template-columns: 0.5fr 6.1fr 0.8fr ;
  margin-top:1em; /*ajoute une marge au-dessus des cadres date*/
 
}.wrapper sunday{
	background-color:blue;
}
.wrapper > div {
  /*background-color: #ffd8a8;*/
  background-color: #fff;
  padding: 0.5em;
   color: #333333;
    vertical-align: middle;
}

.agenda {
  border-left: 2px solid #B3B1AF;
  border-top: 2px solid #B3B1AF;
  border-bottom: 2px solid #B3B1AF;
  border-right: 1px solid #B3B1AF;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;	
  text-align: center;
  font-size: small;

 
}

.agenda.saturday{
  background-color:#D6E2FF;
  font-size: larger;
		
}

.agenda.sunday{
  background-color:#FCE0E8;
  font-size: larger;
 }
.agenda.week{
  background-color:#DDE0E8;
  font-size: larger;
}


.agendadate{
	font-family: 'Barlow', sans-serif;
	font-size:150%;
	font-weight: bold;
	
}

.agendadate.saturday{
	color:#01257E;
}
.agendadate.sunday{
	color:#561010;
}
.event {
  border-left: none;
  border-top: 2px solid #B3B1AF;
  border-bottom: 2px solid #B3B1AF;
  /*border-right: 1px solid #d6bcd6;*/
  /*border-right:2px solid #ccc;*/
  font-family: 'Manrope', sans-serif;
  font-size:medium;
 
}

.radio {
  border-right: 2px solid #B3B1AF;
  border-top: 2px solid #B3B1AF;
  border-bottom: 2px solid #B3B1AF;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;

}

.radio.input{
{
   text-align: center;
   width: 180px;
   height: 180px;
}
}
.event.open{
  color:green;
  border-right:none;
  border-top: none;
  border-bottom: none;
  font-size:small;
  font-style: italic;
}

.event.closed{
  color:red;
  border-right:none;
  border-top: none;
  border-bottom: none;
  font-size:small;
  font-style: italic;
}


.myButtonold {
	box-shadow: 3px 4px 0px 0px #899599;
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	background-color:#ededed;
	border-radius:10px;
	border:1px solid #d6bcd6;
	display:inline-block;
	cursor:pointer;
	color:#595d5e;
	font-family: 'Barlow', sans-serif;
	font-size:12px;
	padding:10px 10px;
	text-decoration:none;
	text-shadow:1px 2px 0px #e1e2ed;
	vertical-align: middle;
}


.grid-containerindex {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  grid-template-rows: 1fr;
  gap: 1px 1px;
  grid-template-areas: "myphoto mytext";}

  
.myphoto {
  grid-area: myphoto;
  border-radius: 10px;
}

.mytext {
   grid-area: mytext;
}

 .msgerr{
  color:red;
  background-color:#FFF;
  text-decoration: none;
  font-size:1em;
  text-align: center;
  vertical-align: middle;
 /* width:100%;*/
  font-weight:normal;
  margin-top:10px;
  padding-top:0.3em;
  padding-bottom:0.3em;
  position: relative;
  border: 1px solid red;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -khtml-border-radius: 10px 10px 10px 10px;
 border-radius: 10px 10px 10px 10px;
 padding:10px;
 margin-bottom:10px;
 /*grid-column: 1 / 4;*/
  
}

.msgOK{
  color:green;
  background-color:#FFF;
  text-decoration: none;
  font-size:1em;
  text-align: center;
  vertical-align: middle;
  /*width:100%;*/
  font-weight:normal	;
  margin-top:10px;
  padding-top:0.3em;
  padding-bottom:0.3em;
  position: relative;
  border: 1px solid green;
 -moz-border-radius: 10px 10px 10px 10px;
 -webkit-border-radius: 10px 10px 10px 10px;
 -khtml-border-radius: 10px 10px 10px 10px;
 border-radius: 10px 10px 10px 10px;
 padding:10px;
 margin-bottom:10px;
 /*grid-column: 1 / 4;*/
  
}


@media screen and (max-width: 800px) {
 .grid-containerindex {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(2, 1fr);
   grid-template-areas: "myphoto" "mytext";
 }
 
 
.myphoto{
  text-align:center;
  padding:0;
  margin:0;
 }

 .mytext{
  margin:0;
  padding:0;
 }
 h2{
  margin:0;
  padding:0;
 }
}