.grille-boutique {
  display: grid;
  grid-template-columns: 600px 600px;
  grid-gap: 10px;
  padding: 10px;
  justify-content: center;
  /*border: 1px solid black;*/
}

.grille-boutique > div {
  background-color: rgba(255, 255, 255, 0.8);
  background-color: var(--arriere_plan);
  text-align: center;
  padding: 20px 0;
  font-size: 1rem;
  margin:10px;
  padding:10px;
}

#cell-apercu {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}

.apercu {
	display: grid;
    grid-template-columns: 100%;
  	grid-template-rows: 80% 20%;
	grid-gap: 10px;
	width: 600px;
	height:700px;
/*	border: 1px solid red;*/
}


/* couverture */
#apercu-couverture {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}

.grande-image {
	/*border: 1px solid black;*/
}

.grande-image img {
  height: 550px;
  object-fit: contain;
  margin:auto;
  padding:5px;
/*  border: 1px solid var(--vert-fonce);*/
}

/* imagettes */

#apercu-imagettes {
	grid-column: 1 / span 1;
	grid-row: 2 / span 1;
}

.imagettes {
	display: grid;
    grid-template-columns: 10% 20% 20% 20% 20% 10%;
  	grid-template-rows: 100%;
	grid-gap: 5px;
}

.petite-image {
	margin:5px;
	padding:5px;
	border: 1px solid var(--vert-fonce);
}

.petite-image img {
	object-fit: contain;
	padding:2px;
	max-width: 90px;
	max-height: 105px;
/*	width: 80px;*/
}

.image-courante {
	border: 2px solid var(--vert-fonce);
}

.sans-bordure {
	border: none;
	margin:auto;
	font-size: 2rem;
}

.sans-bordure a {
	text-decoration:none;
	color: var(--vert-fonce);
	font-weight: 400;
}

.sans-bordure a:hover {
	font-weight: 800;
}

#fleche-gauche{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}

#imagette1 {
	grid-column: 3 / span 1;
	grid-row: 1 / span 1;
}
#imagette2 {
	grid-column: 4 / span 1;
	grid-row: 1 / span 1;
}
#imagette3 {
	grid-column:2 / span 1;
	grid-row: 1 / span 1;
}
#imagette4 {
	grid-column: 5 / span 1;
	grid-row: 1 / span 1;
}
#fleche-droite {
	grid-column: 6 / span 1;
	grid-row: 1 / span 1;
}

#cell-description {
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
	width:600px;
	height:auto;
	margin:auto;
	justify-content: center;
/*	border: 1px solid black;*/
}

.desc-entete {
	text-align: left;
}


.desc-prix {
	text-align: left;
	font-size: 0.9rem;
	color: var(--prix);
	margin-top:10px;
	font-weight: 400;
}

.desc-presentation {
	text-align: justify;
	margin-top: 20px;
}

.desc-extrait-titre {
	text-align: left;
	margin-top: 20px;
	margin-bottom: 20px;
}

.desc-auteur {
	text-align: justify;
}

.desc-extrait {
	text-align: left;
}

.desc-description {
	text-align: left;
	margin-top: 5px;
}

.desc-choix {
	display: grid;
	grid-template-columns: 150px auto;
	grid-gap: 10px;
	text-align: left;
	margin-top: 5px;
/*	border: 1px solid black;*/
}

.desc-choix2 {
	display: grid;
	grid-template-columns: 30px auto;
	grid-gap: 10px;
	
}

.desc-choix2 > div {
	text-align: left;
/*	border: 1px solid black;*/
}

.boite {
	padding-top: 5px;
	padding-left: 10px;
}

#affiche1 {
	grid-row: 1 / span 1;
}

#affiche2 {
	grid-row: 2 / span 1;
}

#affiche3 {
	grid-row: 3 / span 1;
}

#affiche1-desc {
	grid-row: 1 / span 1;
}

#affiche2-desc {
	grid-row: 2 / span 1;
}

#affiche3-desc {
	grid-row: 3 / span 1;
}

#choix-medium {
	grid-column: 2 / span 1;
	display: grid;
	grid-template-rows: auto auto;
	grid-gap: 10px;
	margin-left:30px;
	margin-top:auto;
	margin-bottom:auto;
}

#info-envoi {
	grid-row: 1 / span 1;
/*	border: 1px solid black;*/
}

#bouton {
	grid-row: 2 / span 1;
/*	border: 1px solid black;*/
}


#ajout-panier {
    display: grid;
    grid-template-columns: auto auto auto;
	grid-gap: 20px;
/*	border: 1px solid black;*/
	justify-content: left;
	align-items: center;
}

#ajout-qte {
	grid-column: 1 / span 1;
	padding-top:20px;
}

#ajout-prix {
	grid-column: 2 / span 1;
	align-items: center;
	padding-top: 20px;
	padding-left: 60px;
}

#ajout-bouton {
	grid-column: 3 / span 1;
	align-items: top;
	padding-top: 10px;
	padding-left: 60px;
}