/* ========== Base ========== */
html {font-size: 62.5%;}
body {
   font-family: "Montserrat", sans-serif;
   font-size: 1.7rem;
   color: var(--clr-black);
   background-color: var(--clr-white);
}
.container {
   max-width: 120rem;
   margin-inline: auto;
   padding-inline: 3.2rem;
}
ul {
   list-style: none;
   padding: 0;
}
a {
   text-decoration: none;
   color: inherit;
}
/* Texte accessible aux lecteurs d'écran mais invisible à l'écran */
.sr-only {
   position: absolute;
   width: 0.1rem;
   height: 0.1rem;
   overflow: hidden;
   clip-path: inset(50%);
   white-space: nowrap;
}
/* ========== Header ========== */
.site-header {
   position: relative;
   border-bottom: 0.1rem solid var(--clr-border);
}
.header-bar {
   display: flex;
   align-items: center;
   min-height: 8rem;
}
.logo {
   margin-right: auto;
   font-size: 2rem;
   font-weight: 700;
   color: var(--clr-dark);
}
.main-nav ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 3rem;
}
.main-nav a {
   position: relative;
   font-size: 1.7rem;
   color: var(--clr-nav);
   transition: color 0.2s;
}
.main-nav a:hover {color: var(--clr-dark);}
/* Soulignement qui glisse de gauche à droite au survol */
.main-nav a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -0.4rem;
   width: 100%;
   height: 0.1rem;
   background-color: var(--clr-dark);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform 0.3s ease;
}
.main-nav a:hover::after {
   transform: scaleX(1);
   transform-origin: left;
}
/* Burger et sa case à cocher : masqués hors mobile */
.nav-toggle,.burger {display: none;}
/* ========== Fil d'Ariane ========== */
.breadcrumb {margin-top: 2.2rem;}
.breadcrumb ol {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
   font-size: 1.4rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   color: var(--clr-breadcrumb);
}
.breadcrumb li:not(:last-child)::after {
   content: "/";
   margin-inline: 0.8rem;
}
.breadcrumb a {transition: color 0.2s;}
.breadcrumb a:hover {color: var(--clr-dark);}
.breadcrumb [aria-current="page"] {color: var(--clr-dark);}
/* ========== Produit ========== */
.product {
   display: grid;
   grid-template-columns: 57% 1fr;
   column-gap: 3.3rem;
   margin-top: 3.1rem;
}
/* Empêche le contenu à largeur fixe (bouton) d'élargir les pistes de la grille au-delà du container sur petits écrans (min-width: auto par défaut) */
.product > * {min-width: 0;}
/* Cadre le zoom des images : la partie agrandie est rognée */
.gallery-frame {overflow: hidden;}
.gallery-main {
   width: 100%;
   transition: transform 0.4s ease;
}
.gallery-frame:hover .gallery-main {transform: scale(1.04);}
.gallery-thumbs {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.3rem;
   margin-top: 1.7rem;
}
.gallery-thumbs li {overflow: hidden;}
.gallery-thumbs img {transition: transform 0.35s ease;}
.gallery-thumbs li:hover img {transform: scale(1.08);}
.product-info h1 {
   font-size: 4.2rem;
   font-weight: 400;
   line-height: 1.4;
   margin-top: 2.2rem;
}
.price {
   font-size: 3rem;
   letter-spacing: 0.05em;
   line-height: 1.4;
   margin-top: 1.1rem;
}
.info-sep {
   border: 0;
   border-top: 0.1rem solid var(--clr-border);
   margin-block: 3rem 0;
}
.product-info p:not(.price) {
   line-height: 2.2rem;
   margin-top: 3.3rem;
}
.product-info p:not(.price) + p {margin-top: 1.8rem;}
.cart-form {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 1.6rem;
   margin-top: 3.3rem;
}
.btn-cart {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 28.1rem;
   max-width: 100%;
   height: 6.1rem;
   border: 0;
   background-color: var(--clr-dark);
   color: var(--clr-white);
   font-size: 1.8rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   cursor: pointer;
   transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-cart:hover {
   background-color: var(--clr-black);
   transform: translateY(-0.2rem);
   box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.2);
}
.btn-cart:active {
   transform: translateY(0);
   box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
}
/* Sélecteur de quantité : caché tant que le bouton n'a pas été cliqué, puis apparition en fondu */
.qty-field {
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.cart-form:focus-within .qty-field {
   visibility: visible;
   opacity: 1;
   transition: opacity 0.3s ease;
}
.qty-field input {
   width: 7rem;
   height: 6.1rem;
   border: 0.1rem solid var(--clr-border);
   text-align: center;
   font-size: 1.6rem;
   transition: border-color 0.2s ease;
}
.qty-field input:focus {
   border-color: var(--clr-dark);
   outline: none;
}
/* ========== Séparateur de sections ========== */
.separator {
   border: 0;
   border-top: 0.1rem solid var(--clr-border);
   margin: 4.5rem -3.2rem 0;
}
/* ========== Produits consultés ========== */
.related {margin-bottom: 8rem;}
.related h2 {
   font-size: 3.2rem;
   font-weight: 500;
   line-height: 1.27;
   margin-top: 4.1rem;
}
.cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 3.3rem;
   margin-top: 4.8rem;
}
.card-media {overflow: hidden;}
.card img {
   width: 100%;
   transition: transform 0.35s ease;
}
.card:hover img {transform: scale(1.05);}
.card h3 {
   font-size: 2.2rem;
   font-weight: 400;
   line-height: 1.4;
   color: var(--clr-dark);
   margin-top: 2.2rem;
}
.card-price {
   font-size: 1.7rem;
   line-height: 1.4;
   color: var(--clr-dark);
   margin-top: 1.2rem;
}
/* ========== Footer ========== */
.site-footer {
   background-color: var(--clr-dark);
   color: var(--clr-white);
}
.site-footer p {
   padding-block: 2.9rem;
   font-size: 1.5rem;
   text-align: center;
}
/* ========== Accessibilité : animations réduites ========== */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      transition-duration: 0.01ms !important;
      transition-delay: 0.01ms !important;
   }
}