.ecran_produit{
display: grid;
        width: 850px;
        height: 480px;
        padding: 30px;
      /* background-color: aqua;  */
        grid-column-gap: 10px;
         margin-left: auto;
  margin-right: auto;
  grid-row-gap: 1em; 
  gap: 0.6em; 
 /* margin: 1em auto;*/
  padding: 0.2em;  

  grid-template-columns: 400px 200px 300px;
  grid-template-rows: repeat(20,1fr);

/* grid-template:
  "titre_produit titre_produit titre_produit titre_produit" 140px
  "grande_photo grande_photo vignettes prix-container"1 40px
  "grande_photo grande_photo vignettes description" 140px
  "grande_photo grande_photo vignettes prix-container" 140px /  1fr 1fr 1fr 1fr;*/


    }

titre_produit {
       
        grid-area: titre_produit;
         grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
    }  

grande_photo {
        background-color: #ffffff;
        text-align: center;
        grid-area: grande_photo;
         grid-column-start: 1;         
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 20;
        width: 400px;
        height: 400px;     
    }
  

     

    vignettes {
       /* display: flex;
        flex-direction: column;*/
        width: 195px;
        height: 390px;       
       
        grid-area: vignettes;
         grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start:2;
  grid-row-end: 20;


 display: grid;
 float: left;

 grid-template-columns: 1fr 1fr;
  /*gap: 5px 1em;*/

 /* grid-template-columns: repeat(2, 1fr);*/
  grid-template-rows: auto auto;
  gap: 0.2em; 
 /* margin: 1em auto;*/
  padding: 0.3em;
  overflow-Y: scroll; 
 /*justify-content: space-between;*/
    }

 /***************pave prix**************/
    .prix-container {
 grid-column-start: 3;
  grid column-end 3;
  grid-row-start: 1;
  grid-row-end: 5;


    display: grid;
    width: 205px;
    height: 135px;  
 padding: 1px;
      border: 1px solid;
      border-color: #ff0000;
      border-radius: 0 10% 0 10%;
     
            grid-template:
  "prix_unitaire_ht prix_unitaire_ht prix_unitaire_ht" 30px
  "detail_prix detail_prix detail_prix" 50px 
  "panneau_tva caddy caddy" 60px /  1fr 1fr 1fr;
        }

prix_unitaire_ht {    
        text-align: center;
      font-size: 18px;
      color: #e90f80;
      font-weight: bold;
      width: 200px;
      
      grid-area: prix_unitaire_ht;      
      
    }
 
detail_prix {
    text-align: center;
    font-size: 12px;
    color: black;
    width: 200px;
    height: 40px;
    
    grid-area: detail_prix;
  /*  background-color: lightcoral;*/
    }
 panneau_tva {
   /* background-color: #ff0000;*/
    color: #dc123a;
    font-size: 10px;
    width: 83px;
    height: 50px; 
    vertical-align: middle;
    text-align: center; 
     line-height: 6em;    

    grid-area: panneau_tva;     
    }

caddy {
    /*  background-color: sandybrown;*/
    width: 115px;
    height: 50px; 
    text-align: center;  
    grid-area: caddy;
    }
     /*************** finpave prix**************/



    /***************pave prix**************/
    .prix-container_2 {
 grid-column-start: 3;
  gridcolumn-end 3;
  grid-row-start: 11;
  grid-row-end: 20;




   display: grid;
    width: 205px;
    height: 135px;  
 padding: 1px;
      border: 1px solid;
      border-color: #ff0000;
      border-radius: 0 10% 0 10%;
     
            grid-template:
  "prix_unitaire_ht prix_unitaire_ht prix_unitaire_ht" 30px
  "detail_prix detail_prix detail_prix" 50px 
  "panneau_tva caddy caddy" 60px /  1fr 1fr 1fr;
        }

prix_unitaire_ht {    
        text-align: center;
      font-size: 18px;
      color: #e90f80;
      font-weight: bold;
      width: 200px;
      
      grid-area: prix_unitaire_ht;      
      
        }
 
detail_prix {
    text-align: center;
    font-size: 12px;
    color: black;
    width: 200px;
    height: 40px;
    line-height: 1.5em; 
    grid-area: detail_prix;
   
    }
 panneau_tva {
   
    color: #dc123a;
    font-size: 10px;
    width: 83px;
    height: 50px; 
    vertical-align: middle;
    text-align: center; 
     line-height: 6em;    

    grid-area: panneau_tva;     
    }

caddy {
    /*  background-color: sandybrown;*/
    width: 115px;
    height: 50px; 
    text-align: center;  
    grid-area: caddy;
    }
     /*************** finpave prix**************/

    description {
        /*display: flex;*/
        width: 205px;
        height: 150px;
     /* background-color: #632626;  */
        grid-area: description;
        margin-top: 15px;
        padding: 5px;
        grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start:4  ;
  grid-row-end: 11;
  overflow-Y: scroll; 
    }





   @media screen and (max-width:900px) {
        .ecran_produit {
            width: 100%;
            height:auto;
       /*  align-items: center;*/
        /* justify-content: center;*/
           

 display: grid;
        grid-template-columns: 1fr;
/*grid-template-rows: 1fr 0.8fr 0.7fr 14.5fr 4.5fr;*/
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas:
            "titre_produit"
            "grande_photo"
            "vignettes"
             "description"
            "prix-container"
             "prix-container_2";
        }

        titre_produit {
            grid-area: titre_produit;
             width: 100%;
             grid-column-start: 1;            
  grid-column-end:1;
  grid-row-start: 1;
  grid-row-end: 1;
        }

        grande_photo {
           
             height: auto;
              width: fit-content;
	margin: 0 auto;
            grid-area: grande_photo;
            grid-column-start: 1;            
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 2;
        }

        vignettes {
            grid-area: vignettes;
          /*   width: 80%;*/
       height: 150px; 
       /* justify-content: center;*/

        width: fit-content;
	margin: 0 auto;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
 
 /*padding: 0.3em;*/  
  overflow-Y: scroll; 
 /*justify-content: space-between;*/
 /* grid-template-columns: repeat(2, 1fr);*/
  grid-template-rows:75px 75px;
        /* gap:1px 0.1em;*/
       
            grid-column-start: 1;            
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
        }

       
        description {
            width: 100%;
             height: fit-content;           
            grid-area: description;
            grid-column-start: 1;            
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 4;
        }



         .prix-container_2 {
            grid-area: prix-container_2;
             grid-column-start: 1;            
  grid-column-end: 2;
  grid-row-start: 6;
  grid-row-end: 6;
  
 width: fit-content;
	margin: 0 auto;

     display: grid;
    width: 400px;
    height: 105px;  
 padding: 3px;
      border: 1px solid;
      border-color: #ff0000;
      border-radius:3%;
     /* background-color: #c04343;    */
            grid-template:
  "prix_unitaire_ht panneau_tva" 40px
  "detail_prix caddy" 40px /  1fr 1fr ; 
       }

prix_unitaire_ht {
    vertical-align: top;
        text-align: center;
      font-size: 28px;
      color: #e90f80;
      width: 280px;
      height: 30px;
     line-height: 2em; 
      grid-area: prix_unitaire_ht;     
     
    }
 
detail_prix {
    text-align: center;
    font-size: 15px;
    color: black;
    width: 280px;
    height: 40px;
    line-height: 1.5em; 
    grid-area: detail_prix;
  /*  background-color: lightcoral;*/
    }
 panneau_tva {
  /*  background-color: #7bff00;*/
    color: #dc123a;
    font-size: 10px;
    width: 83px;
    height: 30px; 
   /* vertical-align: middle;*/
    text-align: center; 
     line-height: 3em; 

    grid-area: panneau_tva;     
    }

caddy {
     /* background-color: sandybrown;*/
    width: 85px;
    height: 50px; 
    text-align: center;  
    grid-area: caddy;

    
    }

        


 /***************pave prix**************/
    .prix-container {
 position: relative;
 grid-area: prix-container;
             grid-column-start: 1;            
  grid-column-end: 2;
  grid-row-start: 5;
  grid-row-end: 5;
 width: fit-content;
	margin: 0 auto;


    display: grid;
     width: 400px;
    height: 105px; 
 padding: 3px;
      border: 1px solid;
      border-color: #ff0000;
      border-radius:3%;
        
            grid-template:
  "prix_unitaire_ht panneau_tva" 40px
  "detail_prix caddy" 40px /  1fr 1fr ; 
       }

prix_unitaire_ht {
    vertical-align: top;
        text-align: center;
      font-size: 28px;
      color: #e90f80;
      width: 280px;
      height: 30px;
     line-height: 2em; 
      grid-area: prix_unitaire_ht;     
     /* background-color: aquamarine;*/
    }
 
detail_prix {
    text-align: center;
    font-size: 15px;
    color: black;
    width: 280px;
    height: 40px;
    line-height: 1.5em; 
    grid-area: detail_prix;
  /*  background-color: lightcoral;*/
    }
 panneau_tva {
  /*  background-color: #7bff00;*/
    color: #dc123a;
    font-size: 10px;
    width: 83px;
    height: 30px; 
   /* vertical-align: middle;*/
    text-align: center; 
     line-height: 3em; 

    grid-area: panneau_tva;     
    }

caddy {
     /* background-color: sandybrown;*/
    width: 85px;
    height: 50px; 
    text-align: center;  
    grid-area: caddy;

    
    }
     /*************** finpave prix**************/

    }