.carte {  
   display: block;
   margin: 0;
   min-height: 100vh;
   position:  relative;
}  

.categorie
{
   width: 100%;
   font-size: 50px;
   text-align: center;
   color: var(--color-text-3);
   font-family :  'Baskerville_SemiBold','American_Typewriter','Baskerville_Light','Baskerville_Bold', 'American_Typewriter', sans-serif;
   border-bottom: solid;
}

.souscategorie
{
   width: 98%;
   text-align: center;
   color: var(--color-text-1);
   font-family :  'Baskerville_SemiBold','American_Typewriter','Baskerville_Light','Baskerville_Bold', 'American_Typewriter', sans-serif;

}

.produit
{
   font-weight: bold;
   color: var(--color-text-3);
   font-size: 20px;
}

.composition
{
   font-size: 15px;
   font-style: italic;
}

.prix
{
   font-weight: bold;
   font-size: 18px;
}

.flextitre
{
   justify-content: space-around;
}


.flexItemDetail1 {
   width: 30%;
   min-width: 260px;
   margin-bottom: 2%;
}

.flexItemDetail1:nth-child(1) {
   text-align: center;
   width: 100%;
}


.flexDetail2 {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   border-bottom: double;
   border-color: var(--color-border-3);
   padding-bottom: 10px;
   margin-right: 10 px;
}
/*.flexDetail2 {
   display: flex;
   flex-wrap: wrap;
}*/

.flexDetailFill2 {
   flex:1;
   border-top: dashed black;
}


.flexItemDetail2 {
   margin-left: 10px;
}



.flexItemDetail2:nth-child(4) {
   width: 100%;
   margin-bottom: 2%;
}

/* gestion responsive */
@media screen and (max-width :599px)
{
   .souscategorie{font-size: 30px}
   .dessin{width: 50%;}
   .flexItemTitre1 {width: 20%;text-align: right;}
   .flexItemTitre2 {width: 50%;text-align: center;}
   .flexItemTitre3 {width: 20%;text-align: left;}
}

@media screen and (min-width :600px) and (max-width :1000px)
{
   .souscategorie{font-size: 30px}
   .dessin{width: 50%;}
   .flexItemTitre1 {width: 20%;text-align: right;}
   .flexItemTitre2 {width: 50%;text-align: center;}
   .flexItemTitre3 {width: 20%;text-align: left;}
}

@media screen and (min-width :1000px) and (max-width :1200px)
{
   .souscategorie{font-size: 35px}
   .dessin{width: 15%;}
   .flexItemTitre1 {width: 30%;text-align: right;}
   .flexItemTitre2 {width: 30%;text-align: center;}
   .flexItemTitre3 {width: 30%;text-align: left;}
}

@media screen and (min-width :1200px)
{
   .souscategorie{font-size: 35px}
   .dessin{width: 15%;}
   .flexItemTitre1 {width: 30%;text-align: right;}
   .flexItemTitre2 {width: 30%;text-align: center;}
   .flexItemTitre3 {width: 30%;text-align: left;}
}