/*----------------TECHNIQUE----------------*/

article {
    width: 70%; /*largeur*/
    margin: auto; /*marge extérieur*/
    margin-top: 60px; /*marge extérieur haut*/
    padding: 75px 0px; /*marge intérieur*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/
}

article ul  {
    list-style-type: none; /*marqueur style*/
    font-size: 0; /*supprime les espaces*/
}


/*----------------LOGO----------------*/

.marque {
    width: 100%; /*largeur*/
}

.marque svg {
    width: auto; /*largeur*/
	height: 46px; /*hauteur*/
    display: block; /*apparition des balises*/
    color: var(--couleur-noir); /*couleur*/
}


/*----------------TITRE----------------*/

.titre {
    width: 100%; /*largeur*/
    margin-bottom: 20px; /*marge extérieur bas*/
    display: flex; /*apparition des balises*/
    justify-content: left; /*centre horizontalement le contenu*/ 
    align-items: baseline; /*centre verticalement le contenu*/
}

.titre h1 {
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    font-family: var(--police-titre); /*police type*/
    font-size: var(--taille-police-titre); /*police taille*/
    text-transform: uppercase; /*texte transformer*/
}

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

.titre .separation {
    width: 3px; /*hauteur*/
    height: 42px; /*hauteur*/
    margin: 5px 20px auto 24px; /*marge extérieur*/
    border: none; /*bordure tout en un*/
	background-color: var(--couleur-noir); /*couleur du fond*/
}

.titre a {
    display: inherit; /*apparition des balises*/
    align-items: inherit; /*centre verticalement le contenu*/
    font-family: var(--police-sous-titre); /*police type*/
    font-size: var(--taille-police-titre); /*police taille*/
    text-transform: uppercase; /*texte transformer*/
    text-decoration: none; /*texte decoration*/
    color: var(--couleur-noir); /*police couleur*/
}

.titre a svg {
    width: auto; /*hauteur*/
    height: 34px; /*hauteur*/
    margin: 0; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    color: var(--couleur-noir); /*couleur*/
}

.titre a:hover, .titre a:hover svg {
    color: var(--couleur-bouton); /*police couleur*/
}


/*----------------PHOTO----------------*/

.photo {
    width: 50%; /*largeur*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
    font-size: 0; /*police taille*/
}

.photo .afficher {
    position: relative; /*type de positionnement*/
    margin-bottom: 25px; /*marge extérieur bas*/
}

.photo .afficher img {
    width: 100%; /*largeur*/
    display: block; /*apparition des balises*/
    border-radius: 30px; /*bordure arrondi*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    background: var(--couleur-photo) /*couleur du fond*/
}

.photo .afficher button {
    height: 100%; /*hauteur*/
    padding: 0px 10px; /*marge intérieur*/
    position: absolute; /*type de positionnement*/
    top: 50%; /*position en partant du haut*/
    transform: translateY(-50%); /*postion*/
    font-size: 0; /*police taille*/
    border: none; /*bordure tout en un*/
    cursor: pointer; /*type de curseur*/
    opacity: 0; /*opacité*/
    transition: opacity 0.3s; /*transiton*/
    background-color: transparent; /*couleur du fond*/
    color: var(--couleur-bouton); /*couleur*/
}

.photo .afficher:hover button {
    opacity: 1; /*opacité*/
}

.photo .afficher .precedant {
    left: 0px; /*position en partant de la gauche*/
}

.photo .afficher .suivant {
    right: 0px; /*position en partant de la droite*/
    transform: scaleX(-1) translateY(-50%); /*transforme*/
}

.photo .afficher button svg {
    width: 40px; /*hauteur*/
}


/*----------------PHOTO VIGNETTE----------------*/

.photo .vignette {
    margin: 0 auto; /*marge extérieur*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/
    gap: 16px; /*espace entre les éléments*/
}

.photo .vignette img {
    width: 84px; /*largeur*/
    height: 84px; /*hauteur*/
    border-radius: 100%; /*bordure arrondi*/
    object-fit: cover; /*ajuster à la taille de son contenant*/
    object-position: top; /*position du contenu*/
    cursor: pointer; /*type de curseur*/
    background-color: var(--couleur-gris-235) /*couleur du fond*/
}

.photo .vignette img.active {
    border: 2px solid var(--couleur-bouton); /*bordure tout en un*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
}

.photo, .information {
    margin-bottom: 50px; /*marge extérieur bas*/
}


/*----------------IMFORMATION----------------*/

.information {
    width: 50%; /*largeur*/
    padding: 0px 50px; /*marge intérieur*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
}


/*----------------IMFORMATION COULEUR----------------*/

.information .couleur {
    width: 100%; /*largeur*/
    padding: 4px 0px 0px 12px; /*marge intérieur : haut, droite, bas, gauche*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/
    gap: 10px 15px; /*espace entre les éléments*/
}

.information .couleur li {
    display: flex; /*apparition des balises*/
    flex-direction: column; /*direction des contenants*/
    position: relative; /*type de positionnement*/
    cursor: pointer; /*type de curseur*/
}

.information .couleur svg {
    width: 32px; /*largeur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    margin-bottom: 5px; /*marge extérieur bas*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
    color: var(--couleur-gris-130); /*couleur*/
}

.information .couleur svg.active {
    border: 2px solid var(--couleur-bouton); /*bordure tout en un*/
    border-radius: 100%;
    color: transparent; /*bordure tout en un*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
}

.information .couleur .couleur-nombre {
    font-size: 11pt; /*police taille*/
    text-align: center; /*texte alignement*/
    font-family: var(--police-texte-gras); /*police type*/
}

.information .couleur .kids {
    width: 32px; /*largeur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/ 
    top: -4px; /*position en partant du haut*/
    left: -12px; /*position en partant de la gauche*/
    color: var(--couleur-noir); /*couleur*/
}

.information .couleur .couleur-nom {
    padding: 3px 12px; /*marge intérieur*/
    position: absolute; /*type de positionnement*/
    top: -10px; /*position en partant du haut*/
    left: 50%; /*position en partant de la gauche*/
    transform: translateX(-50%) translateY(-100%); /*transforme*/
    font-family: var(--police-texte-gras); /*police type*/
    font-size: var(--taille-police-10); /*police taille*/
    text-transform: capitalize; /*texte transformer*/
    white-space: nowrap; /*gestion de l'espace*/
	border: 1px solid var(--couleur-gris-150); /*bordure tout en un*/
    border-radius: 50px; /*bordure arrondi*/
    opacity: 0; /*opacité*/
    visibility: hidden; /*visibilité*/
    transition: opacity 0.2s ease, transform 0.2s ease; /*transiton*/
    color: var(--couleur-noir); /*police couleur*/
    background-color: var(--couleur-blanc); /*couleur du fond*/
}

.information .couleur li:hover .couleur-nom {
    opacity: 1; /*opacité*/
    visibility: visible; /*visibilité*/
}


/*----------------IMFORMATION TEXTE----------------*/

.information h2 {
    margin-top: 30px; /*marge extérieur haut*/
    margin-bottom: 5px; /*marge extérieur bas*/
    font-family: var(--police-texte-gras); /*police type*/
    font-size: var(--taille-police-18); /*police taille*/
    text-transform: uppercase; /*texte transformer*/
}

.information h2:first-child {
    margin-top: 0px; /*marge extérieur haut*/
} 

.information p {
    display: flex; /*apparition des balises*/
    justify-content: left; /*centre horizontalement le contenu*/ 
    align-items: center; /*centre verticalement le contenu*/
    font-family: var(--police-texte); /*police type*/
    font-size: var(--taille-police-12); /*police taille*/
    line-height: 1.5; /*espace entre ligne*/
    text-align: justify; /*texte alignement*/
    text-justify: inter-word; /*type de justification*/
    color: var(--couleur-noir); /*police couleur*/
}

.information .entretien svg {
    width: 40px; /*largeur*/
	height: 100%; /*hauteur*/
    margin-right: 10px; /*marge extérieur droite*/
    color: var(--couleur-noir); /*police couleur*/
}

.information .tailles {
    width: 100%; /*largeur*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/
}

.information .tailles svg {
    width: 100%; /*largeur*/
    height: 48px; /*hauteur*/
    margin-top: 6px; /*marge extérieur haut*/
    margin-right: 6px; /*marge extérieur droite*/
    color: var(--couleur-noir); /*police couleur*/
}


/*----------------IMFORMATION BOUTON----------------*/

.information .bouton {
    margin: 40px 0px; /*marge extérieur*/
    display: flex; /*apparition des balises*/
    flex-wrap: wrap; /*disposés en ligne*/
    justify-content: left; /*centre horizontalement le contenu*/ 
    align-items: center; /*centre verticalement le contenu*/
    gap: 30px 40px; /*espace entre les éléments*/
}

.information .bouton a {
    width: 240px; /*largeur*/
    padding: 12px 0px; /*marge intérieur : haut, droite, bas, gauche*/
    border: none; /*bordure tout en un*/
    border-radius: 100px; /*bordure arrondi*/
    cursor: pointer; /*type de curseur*/
    text-decoration: none; /*texte decoration*/
    text-align: center; /*texte alignement*/ 
    font-family: var(--police-texte-gras); /*police type*/
    font-size: var(--taille-police-bouton); /*police taille*/
    background-color: var(--couleur-bouton);/*couleur du fond*/
    color: var(--couleur-blanc); /*police couleur*/
}


/*----------------SCHÉMA----------------*/

.schema {
    width: 20%; /*largeur*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/ 
    text-align: center; /*texte alignement*/
}

.schema h3 {
    margin-bottom: 20px; /*marge extérieur bas*/
    text-transform: uppercase; /*texte transformer*/
    font-size: var(--taille-police-18); /*police taille*/
    font-family: var(--police-texte-gras); /*police type*/
}

.schema svg {
    width: 90%; /*largeur*/
    height: auto; /*hauteur*/
}


/*----------------TABLEAU DES TAILLES----------------*/

.dimension {
    width: 75%; /*largeur*/
    margin-left: auto; /*marge extérieur gauche*/
    box-sizing: border-box; /*largeur et la hauteur totales d'un élément*/
}

.dimension h3 {
    margin-bottom: 20px; /*marge extérieur bas*/
    text-transform: uppercase; /*texte transformer*/
    font-size: var(--taille-police-18); /*police taille*/
    font-family: var(--police-texte-gras); /*police type*/
    text-align: center; /*texte alignement*/ 
}

table {
    width: 100%; /*largeur*/
    border-spacing: 0; /*distance entre les bordures*/
    border-radius: 20px; /*bordure arrondi*/
    border: 2px solid var(--couleur-gris-200); /*bordure haut tout en un*/
    overflow: hidden; /*dépassement du contenant*/
}

table caption {
    width: 1px; /*largeur*/
    height: 1px; /*hauteur*/
    margin: -1px; /*marge extérieur*/
    padding: 0; /*marge intérieur*/
    position: absolute; /*type de positionnement*/
    overflow: hidden; /*dépassement du contenant*/
    clip-path: rect(0 0 0 0); /*rectangle*/
    white-space: nowrap;/*gestion de l'espace*/
}

table th {
    font-family: var(--police-texte-gras); /*police type*/
    font-size: var(--taille-police-14); /*police taille*/
    border-right: 2px solid var(--couleur-gris-200); /*bordure droite tout en un*/
    color: var(--couleur-noir); /*police couleur*/
    background-color: var(--couleur-gris-235); /*couleur du fond*/
}

table td, table th[scope="row"] {
    font-family: var(--police-texte); /*police type*/
    font-size: var(--taille-police-12); /*police taille*/
    border-right: 2px solid var(--couleur-gris-200); /*bordure droite tout en un*/
    border-top: 2px solid var(--couleur-gris-200); /*bordure haut tout en un*/
    background-color: var(--couleur-blanc); /*couleur du fond*/
}

table td:last-child, table th:last-child {
    border-right: none; /*bordure droite tout en un*/
}

table th[scope="row"] {
    font-family: var(--police-texte-gras); /*police type*/
    font-size: var(--taille-police-14); /*police taille*/
}

table th, table td {
    height: 75px; /*hauteur*/
    text-align: center; /*texte alignement*/
}

.dimension table:not(:nth-child(-n+2)) {
    margin-top: 50px; /*marge extérieur haut*/
}