#content {
  position: relative;
}
#produit .articles {
  display: grid;
  margin: 0 auto;
  grid-template-columns: 1fr;
  grid-template-areas:  'titre'
                        'image'
                        'desc';
  gap: 0 50px;
}

section#produit {margin: 3em auto 5em}

#produit #infos {/*display: grid; */margin-bottom: 2em; order: 0; grid-area: titre}
#produit #infos h2 {order: 0; padding: 0; line-height: 1em;}
#produit #infos h2 b {
  padding: 0 .5em;
  margin: 1px 0 25px;
  line-height: 1.2em;
  display: inline-block;
  font-variant-caps: all-petite-caps;
  border-top: 3px double var(--clr-secondary-2);
  border-bottom: 1px double var(--clr-secondary-2);
}

#produit .article {margin : 0 auto;	width: min(450px, 100%)}
#produit .article.desc * {transition: 0.25s}

#produit .image {display: grid; gap: 8px; order: 1; grid-area: image}

#produit figure.zoom:hover {cursor: zoom-in}
#produit figure.zoom:hover img {opacity: 0}
#produit figure.zoom img {transition: opacity 0.3s;display: block}

#produit .article .altern {display: flex; gap: 8px;margin-top: 8px}
#produit .article .altern img {cursor: pointer; opacity: 1; height: min-content; transition: opacity .25s}
#produit .article .altern img.active {opacity: 0.5}
#produit .article .altern img:hover {opacity: 0.7}

#produit .article.desc {margin : 50px auto 0; order: 3; display: grid; grid-area: desc}

#produit .article .titre { position: inherit;border-radius: 0px;background: transparent;color: var(--clr-primary-2);border: none;padding: 0 }
#produit .article .prix {flex-basis: 25%;text-align: right;margin-top: 0}

#produit .article .qte {margin-top: 50px;display: flex; justify-content: center; align-items: center; gap: 5px}

#produit .disable {opacity: 0.4; pointer-events: none}

#produit .invisible {display: none; pointer-events: none}

@media (max-width: 499px) {
  #produit .article .altern img {width: 48px; height: 48px}

  @media (max-width: 420px) { /* for panier */
    @media (max-width: 340px) {
      @media (max-width: 299px) {
        #produit .article .titre span:not(.prix) {font-size: 0.8em;}
        .qte .txt {font-size: 0.8em;}
      }
    }
  }
}

@media (min-width: 600px) {
  #produit #infos h2 b {width: min(450px, 100%)}

  .qte {gap: 10px}
  .qte .txt {padding-right: 15px}

  @media (min-width: 900px) {
    #produit .articles {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:  'image titre'
                            'image desc'
                            'image desc'
                            'image desc'
                            'image desc';
      align-items: flex-start;
    }

    #produit #infos {order: 2}
    #produit .article.desc {margin: 0 auto; order: 3}
  }
}