/*----------------PRODUIT----------------*/

.grille {
    margin: auto; /*marge extérieur*/
    padding: 75px; /*marge intérieur*/
    display: grid; /*apparition des balises*/
    justify-content: center; /*centre horizontalement le contenu*/
    grid-gap: 75px; /*espace entre les éléments de la grille*/
    grid-template-columns: repeat(auto-fill, 350px); /*colonnes égales et s'ajuste automatiquement*/
}

article {
    width: auto; /*largeur*/
    height: auto; /*hauteur*/
    margin: auto; /*marge extérieur*/
    border-radius: 20px; /*bordure arrondi*/
    border: 2px solid var(--couleur-bordure); /*bordure tout en un*/
    overflow: hidden; /*dépassement du contenant*/
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.1); /*bordure ombre*/
}

article a:link, article a:visited {
  color: inherit; /*police couleur*/
  text-decoration: none; /*texte decoration*/
}

article .image img {
    width: 100%; /*largeur*/
    height: auto; /*hauteur*/
    display: block; /*apparition des balises*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    object-position: center; /*position du contenu*/
    background: var(--couleur-photo) /*couleur du fond*/
}

article .espace {
    height: 20px; /*hauteur*/
}

article ul  {
    list-style-type: none; /*marqueur style*/
    font-size: 0; /*supprime les espaces*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/
}

article .couleur {
    height: 22px; /*hauteur*/
    margin: 15px 2px 0px 15px; /*marge extérieur*/
    font-size: 0; /*supprime les espaces*/
    overflow: hidden; /*dépassement du contenant*/
}

article .couleur svg {
    width: 20px; /*largeur*/
    height: 100%; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    margin-right: 4px; /*marge extérieur droite*/
    color: var(--couleur-gris-150); /*couleur*/
}

article .couleur span {
    margin-right: 4px; /*marge extérieur droite*/
    font-family: var(--police-texte); /*police type*/
    font-size: var(--taille-police-11); /*police taille*/
    vertical-align: top; /*alignement vertical d'un contenant*/
    color: var(--couleur-gris-150); /*couleur*/
}

.information {
    margin: auto; /*marge extérieur*/
    padding: 15px; /*marge intérieur*/
    padding-bottom: 10px; /*marge intérieur bas*/
    font-size: 0; /*supprime les espaces*/
}

.information svg {
    width: 100%; /*largeur*/
    height: 100%; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
}

.information .nom {
    font-family: var(--police-titre); /*police type*/
    font-size: var(--taille-police-16); /*police taille*/
    text-transform: uppercase; /*texte transformer*/
}

.information .reference {
    margin-left: 6px; /*marge extérieur gauche*/
    font-family: var(--police-sous-titre); /*police type*/
    font-size: var(--taille-police-16); /*police taille*/
    text-transform: uppercase; /*texte transformer*/
}

.information .grammage {
    margin: auto; /*marge extérieur*/
    margin-bottom: 10px; /*marge extérieur bas*/
    position: relative; /*type de positionnement*/ 
    font-family: var(--police-texte); /*police type*/
    font-size: var(--taille-police-10); /*police taille*/
    color: var(--couleur-gris-150); /*police couleur*/
}

.information .separation {
    margin: auto 0.3em; /*marge extérieur*/
}

.information .texte {
    height: 38pt; /*hauteur*/
    margin-bottom: 25px; /*marge extérieur bas*/
    font-family: var(--police-texte); /*police type*/
    font-size: var(--taille-police-10); /*police taille*/
    text-align: justify; /*texte alignement*/
    line-height: 1.2; /*espace entre ligne*/
    overflow: hidden; /*dépassement du contenant*/
    color: var(--couleur-gris-150); /*police couleur*/

    display: -webkit-box; /*apparition des balises*/
    -webkit-line-clamp: 3; /*limite à 3 lignes*/
    -webkit-box-orient: vertical; /*orientation verticale*/
}

.information .prix {
    font-family: var(--police-texte-gras); /*police type*/
    font-size: var(--taille-police-12); /*police taille*/
    text-align: right; /*texte alignement*/
    vertical-align: bottom; /*alignement vertical d'un contenant*/
    color: var(--couleur-noir); /*police couleur*/
}