/* Fiche produit (charte « Seuil », docs/DESIGN.md §7) : galerie à gauche (7 colonnes), colonne d'achat à droite (5 colonnes)
   dans un panneau blanc, collant quand il tient dans l'écran ; points forts, description et caractéristiques, pose et
   livraison, barre d'achat collante en mobile. Chargée après catalogue.css. Espaces : jetons seulement. */

/* ---------- Haut de fiche ---------- */
.section.fiche-haut {
  padding-top: var(--e-3);
  padding-bottom: var(--section-serree);
}
.fiche-haut__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.fiche-haut__galerie,
.fiche-haut__achat {
  min-width: 0;
}
@media (min-width: 64rem) {
  .section.fiche-haut {
    padding-top: var(--e-5);
  }
  .fiche-haut__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e-8);
  }
}

/* ---------- Galerie : piste aimantée en mobile (pleine largeur voulue), photos empilées au bureau ---------- */
.galerie {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.galerie__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--gouttiere));
}
.galerie__piste::-webkit-scrollbar {
  display: none;
}
.galerie__piste:focus-visible {
  outline-offset: calc(-1 * var(--e-1));
}
.galerie__vue {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  min-width: 0;
  scroll-snap-align: start;
}
.galerie__agrandir {
  display: block;
  aspect-ratio: 1;
  background: var(--lin);
  overflow: hidden;
  cursor: zoom-in;
}
.galerie__agrandir picture,
.galerie__agrandir img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galerie__vue--detoure .galerie__agrandir {
  background: var(--blanc);
}
.galerie__vue--detoure .galerie__agrandir img {
  object-fit: contain;
  padding: var(--e-5);
}
.galerie__legende {
  padding-inline: var(--gouttiere);
  color: var(--texte-2);
  font-size: var(--fs-mini);
  line-height: 1.45;
}
.galerie__vignettes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.galerie__vignette {
  display: block;
  width: var(--e-8);
  aspect-ratio: 1;
  background: var(--lin);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color var(--duree-retour) var(--courbe);
}
.galerie__vignette picture,
.galerie__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galerie__vignette:hover {
  outline-color: var(--trait);
}
.galerie__vignette[aria-current="true"] {
  outline-color: var(--texte);
}
.galerie--vide .galerie__repli {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  aspect-ratio: 1;
  padding: var(--pad-panneau);
  background: var(--lin);
  color: var(--texte-2);
  text-align: center;
}
@media (min-width: 48rem) {
  .galerie__piste {
    margin-inline: 0;
  }
  .galerie__legende {
    padding-inline: 0;
  }
  .galerie__agrandir {
    aspect-ratio: 4 / 3;
  }
}
@media (min-width: 64rem) {
  .galerie__piste {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: var(--e-5);
    overflow: visible;
  }
  .galerie__agrandir {
    aspect-ratio: 4 / 5;
  }
  .galerie__vue--detoure .galerie__agrandir {
    aspect-ratio: 3 / 2;
  }
  .galerie__vignettes {
    display: none;
  }
}

/* Visionneuse plein écran */
.visionneuse {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--encre);
  color: var(--platre);
}
.visionneuse::backdrop {
  background: var(--encre);
}
.visionneuse__cadre {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-9) var(--gouttiere);
}
.visionneuse__img {
  max-width: 100%;
  max-height: calc(100dvh - 2 * var(--e-9));
  width: auto;
  height: auto;
  object-fit: contain;
}
.visionneuse__legende {
  max-width: 60ch;
  color: var(--lichen);
  font-size: var(--fs-petit);
  text-align: center;
}
.visionneuse .bouton-icone {
  position: absolute;
  color: var(--platre);
}
.visionneuse .bouton-icone:focus-visible {
  outline-color: var(--chene-clair);
}
.visionneuse__fermer {
  top: var(--e-4);
  right: var(--e-4);
}
.visionneuse__nav {
  top: 50%;
  transform: translateY(-50%);
}
.visionneuse__nav--prec {
  left: var(--e-2);
}
.visionneuse__nav--suiv {
  right: var(--e-2);
}

/* ---------- Colonne d'achat (panneau blanc) ---------- */
.achat {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
@media (min-width: 64rem) {
  /* Collante seulement si elle tient dans l'écran (classe posée par product.js) */
  .achat.is-collant {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-5));
  }
}
.achat__tete {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.achat__gamme {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.achat__gamme a {
  color: inherit;
  text-decoration-color: var(--trait);
}
.achat__gamme a:hover {
  color: var(--texte);
  text-decoration-color: currentColor;
}
.achat__titre {
  font-size: var(--fs-h2);
  line-height: 1.1;
}
.achat__variante {
  display: block;
  padding-top: var(--e-2);
  color: var(--texte-2);
  font-family: var(--police-texte);
  font-size: var(--fs-chapo);
  line-height: 1.4;
}
.achat__variante::first-letter {
  text-transform: uppercase;
}
.achat__accroche {
  color: var(--texte-2);
}
.achat__technique {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.achat__technique li {
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  color: var(--texte-2);
  font-size: var(--fs-mini);
  line-height: 1.4;
  white-space: nowrap;
}
.achat__prix {
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.achat .prix--lg .prix__montant {
  font-size: var(--fs-h2);
  line-height: 1.05;
}
.achat .prix--lg .prix__secondaire {
  font-size: var(--fs-texte);
}

/* Autres décors de la collection, en vignettes de matière */
.achat__decors {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.achat__libelle {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.achat__decor-courant {
  color: var(--texte);
  font-weight: 500;
}
.achat__vignettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: var(--e-4) var(--e-3);
}
.achat__vignettes .matiere__nom {
  font-size: var(--fs-mini);
}
.achat__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--succes);
  font-size: var(--fs-petit);
  font-weight: 500;
}
.achat__stock--epuise {
  color: var(--erreur);
}

.achat__commande {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-4);
}
.achat__commande .quantite {
  flex: none;
}
.achat__total {
  flex: 1 1 10rem;
  padding-bottom: var(--e-3);
  color: var(--texte-2);
  font-size: var(--fs-petit);
  font-variant-numeric: tabular-nums;
}
.achat__commande .bouton--plein {
  flex: 1 1 100%;
}
.achat__services {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.achat__services li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.5;
}
.achat__services .icone {
  color: var(--texte);
}
.achat__services a {
  color: var(--texte);
  font-weight: 500;
}

/* ---------- Ce qu'il faut savoir ---------- */
/* Colonnes selon le nombre de points (classe --N posée par la vue), sans élément seul sur sa rangée :
   2 et 3 points sur une rangée dès 48 rem ; 4 en 2 × 2 puis sur une rangée ; 5 en 2 + 2 + 1 pleine largeur,
   puis 3 + 2 (grille de 6) et enfin 5 sur une rangée. */
.fiche-atouts__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6) var(--gap-grille);
}
@media (min-width: 48rem) {
  .fiche-atouts__liste--2,
  .fiche-atouts__liste--4,
  .fiche-atouts__liste--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fiche-atouts__liste--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fiche-atouts__liste--5 > :last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 64rem) {
  .fiche-atouts__liste--5 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .fiche-atouts__liste--5 > * {
    grid-column: span 2;
  }
  .fiche-atouts__liste--5 > :nth-child(n + 4) {
    grid-column: span 3;
  }
}
@media (min-width: 80rem) {
  .fiche-atouts__liste--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .fiche-atouts__liste--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .fiche-atouts__liste--5 > *,
  .fiche-atouts__liste--5 > :nth-child(n + 4) {
    grid-column: auto;
  }
}
.fiche-atouts__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding-top: var(--e-4);
  border-top: 1px solid var(--trait);
}
.fiche-atouts__nom {
  font-size: var(--fs-carte);
}
.fiche-atouts__texte {
  color: var(--texte-2);
}

/* ---------- Description et caractéristiques ---------- */
.fiche-details__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-8);
}
.fiche-details__description,
.fiche-details__specs {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
@media (min-width: 64rem) {
  .fiche-details__grille {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: var(--e-9);
  }
}
.caracteristiques {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--texte);
}
.caracteristiques__ligne {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--trait);
  font-size: var(--fs-petit);
  line-height: 1.5;
}
.caracteristiques dt {
  color: var(--texte-2);
}
.caracteristiques dd {
  font-variant-numeric: tabular-nums;
}

/* ---------- Pose et livraison ---------- */
/* 3 engagements (carrelage sans guide de pose) : une rangée de 3 dès 48 rem, au lieu de 2 + 1 puis d'une grille de 4
   à moitié vide ; 4 engagements : 2 × 2 puis une rangée (règle du socle). Compté par :has(), le composant ne pose pas
   de classe de nombre. */
.fiche-pose .reassurance--bandeau .reassurance__liste {
  gap: var(--e-5) var(--gap-grille);
}
@media (min-width: 48rem) {
  .fiche-pose .reassurance--bandeau .reassurance__liste:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Barre d'achat collante (mobile et tablette seulement) ---------- */
.barre-achat {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-entete);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-3) var(--gouttiere);
  border-top: 1px solid var(--trait);
  background: var(--blanc);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--duree-etat) var(--courbe), visibility 0s linear var(--duree-etat);
}
.barre-achat.is-visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}
.barre-achat__prix {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.barre-achat__montant {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.barre-achat__unite {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  font-weight: 400;
}
.barre-achat__detail {
  overflow: hidden;
  color: var(--texte-2);
  font-size: var(--fs-mini);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barre-achat__bouton {
  flex: none;
}
@media (min-width: 64rem) {
  .barre-achat {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .barre-achat {
    transition: none;
  }
}