#page {
  margin: 10px 20px;
}
#header {
  display: grid;
  grid-template-columns:auto auto;
}
#description {
  display: grid;
  grid-template-columns:60% auto;
}
#presentation {
  margin-right: 10px;
}
#afficher {
  text-align:right;
  vertical-align:top;  
}
#reservation {
  padding: 10px;
  border: solid 1px gray;
  box-shadow: 5px 5px 5px lightgray;
  height:19em;
}
#reservation h2 {
  margin-top:10px;
  text-align:center;
}
#cartouche {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
#afficher {
  width:200px;
  height:20px;
  text-align:center;
}
div.photo img {
  width:100%;  
  cursor: pointer;  
} 
div.gauche {
  grid-column: 1;
}
div.droite {
  grid-column: 2;
  display:grid;
  grid-row-gap: 10px;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
}
div.haut {
  grid-row:1;
  display:grid;
  grid-column-gap: 10px;
  grid-template-columns: 1fr 1fr; 
  grid-auto-rows: minmax(100px, auto);
}
div.bas {
  grid-row:2;
  display:grid;
  grid-column-gap: 10px;
  grid-template-columns: 1fr 1fr; 
  grid-auto-rows: minmax(100px, auto);
}
.deux {
  grid-column: 1;
}
.trois {
  grid-column: 2;
}
.quatre {
  grid-column: 1;
}
.cinq {
  grid-column: 2;
}
@media (max-width: 640px) { 
  div.droite {
    grid-column: 1;
    grid-row: 2;
    display:grid;
    grid-row-gap: 10px;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(100px, auto);
  }
  #cartouche {
    grid-template-columns: auto;
    grid-row-gap: 10px;
  }  
  #description {
    display: grid;
    grid-template-columns: auto;
  }  
}