.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;
}

.myButton {
	vertical-align: middle;
	background:url(img/ordervideFR.jpg);
	  text-align: center;
   width: 80px;
   height: 80px;
}
.myButton:hover {
	/*background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);*/
	background:url(img/orderFR.jpg);
	/*background-color:#bab1ba;*/
}
.myButton: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;
}

.myButton {
	vertical-align: middle;
	background:url(img/ordervideFR.jpg);
	  text-align: center;
   width: 80px;
   height: 80px;
}
.myButton:hover {
	/*background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);*/
	background:url(img/orderFR.jpg);
	/*background-color:#bab1ba;*/
}
.myButton: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;
}

.mytext {
   grid-area: mytext;
}

@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;
 }
}