/* Pages catalogue (charte « Seuil », docs/DESIGN.md §7) : en-tête court, collections en tuiles carrées, pastilles de filtre
   et de tri, grille de produits, tableaux (empilés sous 48 rem), contenu éditorial, FAQ, guides, « Avant de commander »,
   maillage, pages pièce, recherche, coffret d'échantillons, tapis, erreurs 404 et 500.
   Espaces : jetons seulement, posés par les parents (gap) ; tout bloc à fond ou bordé a un padding de panneau. */

/* ---------- En-tête de page catalogue : titre, chapô, prix d'appel, photo de pièce ---------- */
.section.entete-catalogue {
  padding-top: var(--e-5);
  padding-bottom: var(--section-serree);
}
.entete-catalogue__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.entete-catalogue__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.entete-catalogue__titre {
  max-width: 20ch;
}
.entete-catalogue__chapo {
  max-width: 44ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.entete-catalogue__prix {
  color: var(--texte-2);
}
.entete-catalogue__montant {
  color: var(--texte);
  font-size: var(--fs-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.entete-catalogue__atouts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.entete-catalogue__atouts li {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.entete-catalogue__atouts .icone {
  color: var(--texte);
}
.entete-catalogue__actions {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  width: 100%;
  padding-top: var(--e-2);
}
.entete-catalogue__media {
  aspect-ratio: 3 / 2;
  background: var(--lin);
  overflow: hidden;
}
.entete-catalogue__media picture,
.entete-catalogue__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 30rem) {
  .entete-catalogue__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }
}
@media (min-width: 64rem) {
  .section.entete-catalogue {
    padding-top: var(--e-6);
  }
  .entete-catalogue__grille {
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
    align-items: center;
    gap: var(--e-8);
  }
  .entete-catalogue--sans-image .entete-catalogue__grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .entete-catalogue__media {
    aspect-ratio: 4 / 3;
  }
  .entete-catalogue .titre-affiche {
    font-size: min(var(--fs-affiche), 4.2vw);
  }
}

/* ---------- Collections : tuiles carrées, titre et détail sous la photo ---------- */
.collections__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--apres-entete);
}
.collections__grille > .entete-section + * {
  margin-block-start: 0;
}
.collections__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6) var(--e-4);
}
/* Quatre collections et plus : rangée défilante aimantée sous 64 rem, plutôt qu'une tuile orpheline */
@media (max-width: 63.99rem) {
  .collections--4 .collections__liste,
  .collections--5 .collections__liste {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(10rem, 42%);
    gap: var(--gap-grille);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .collections--4 .collections__liste::-webkit-scrollbar,
  .collections--5 .collections__liste::-webkit-scrollbar {
    display: none;
  }
  .collections--4 .collections__liste > li,
  .collections--5 .collections__liste > li {
    scroll-snap-align: start;
  }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .collections--3 .collections__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .collections--4 .collections__liste,
  .collections--5 .collections__liste {
    grid-auto-columns: minmax(0, 30%);
  }
}
@media (min-width: 64rem) {
  .collections__liste {
    gap: var(--gap-grille);
  }
  /* Deux collections : l'en-tête à gauche, les deux tuiles à droite */
  .collections--1 .collections__grille,
  .collections--2 .collections__grille {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--e-8);
  }
  .collections--3 .collections__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .collections--4 .collections__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .collections--5 .collections__liste {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.tuile-collection {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.tuile-collection__media {
  aspect-ratio: 1;
  background: var(--lin);
  overflow: hidden;
}
.tuile-collection__media picture,
.tuile-collection__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tuile-collection__nom {
  padding-top: var(--e-1);
  font-size: var(--fs-carte);
  line-height: 1.25;
}
.tuile-collection__nom a {
  text-decoration: none;
}
.tuile-collection__nom a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.tuile-collection:hover .tuile-collection__nom a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.tuile-collection__nom a:focus-visible {
  outline: none;
}
.tuile-collection:has(a:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: var(--e-1);
}
.tuile-collection__detail {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.45;
}

.filtres {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  padding-block: var(--e-4);
  border-block: 1px solid var(--trait);
}
.filtres__groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
.filtres__label {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
/* En mobile, le tri défile sur une ligne plutôt que de s'empiler */
@media (max-width: 47.99rem) {
  .filtres__groupe--tri {
    flex-wrap: nowrap;
  }
  .pastilles--tri {
    flex-wrap: nowrap;
    margin-inline-end: calc(-1 * var(--gouttiere));
    padding-inline-end: var(--gouttiere);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pastilles--tri::-webkit-scrollbar {
    display: none;
  }
}
@media (min-width: 64rem) {
  .filtres {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4) var(--e-7);
  }
}

/* ---------- Grille de produits ---------- */
.catalogue-produits__in {
  display: flex;
  flex-direction: column;
  gap: var(--e-7);
}
.catalogue-produits__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
}
.catalogue-produits__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-4);
}
.catalogue-produits__compte {
  color: var(--texte-2);
}
.catalogue-produits__intro {
  color: var(--texte-2);
}
@media (min-width: 64rem) {
  .catalogue-produits__tete {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: end;
    gap: var(--e-8);
  }
}
.catalogue-produits__groupes {
  display: flex;
  flex-direction: column;
  gap: var(--e-9);
}
.catalogue-produits__groupe {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.catalogue-produits__groupe-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2) var(--e-5);
}
.catalogue-produits__groupe-titre {
  font-size: var(--fs-h3);
}
.catalogue-produits__vide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  background: var(--fond);
}
.catalogue-produits__vide-texte {
  max-width: 48ch;
  color: var(--texte-2);
}
@media (min-width: 64rem) {
  .catalogue-produits__vide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--e-8);
  }
}

/* ---------- Avant de commander (sapin) ---------- */
.aide-achat__grille {
  display: flex;
  flex-direction: column;
  gap: var(--e-7);
}
.aide-achat__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--gap-grille);
}
@media (min-width: 48rem) {
  .aide-achat__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .aide-achat__liste--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.aide-achat__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.aide-achat__icone {
  color: var(--chene-clair);
}
.aide-achat__nom {
  font-size: var(--fs-h3);
}
.aide-achat__texte {
  max-width: 40ch;
  color: var(--texte-2);
}

/* ---------- Maillage : pages voisines ---------- */
.voisines__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.voisines__titre {
  font-size: var(--fs-h3);
}
.voisines__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--trait);
}
.voisines__liste > li {
  border-bottom: 1px solid var(--trait);
}
.voisines__lien {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding-block: var(--e-4);
  text-decoration: none;
}
.voisines__nom {
  font-family: var(--police-titre);
  font-size: var(--fs-carte);
  line-height: 1.3;
}
.voisines__lien:hover .voisines__nom {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.voisines__detail {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.45;
}
@media (min-width: 48rem) {
  .voisines__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap-grille);
    border-top: 0;
  }
  .voisines__liste > li:nth-child(-n + 2) {
    border-top: 1px solid var(--trait);
  }
}
@media (min-width: 64rem) {
  .voisines__grille {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--e-8);
  }
}

/* ---------- Pages pièce ---------- */
.piece-attention__grille {
  display: flex;
  flex-direction: column;
  gap: var(--e-7);
}
.piece-attention__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--gap-grille);
}
@media (min-width: 48rem) {
  .piece-attention__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.piece-attention__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.piece-attention__texte {
  color: var(--texte-2);
}

/* ---------- Recherche ---------- */
.recherche-entete__in {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.recherche-entete__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.recherche-entete__titre {
  overflow-wrap: anywhere;
}
.recherche-entete .recherche {
  max-width: 40rem;
}

/* ---------- Coffret d'échantillons : produit vedette ---------- */
.section.coffret-vedette {
  padding-top: var(--e-5);
}
.coffret-vedette__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.coffret-vedette__media {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.coffret-vedette__media picture,
.coffret-vedette__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--lin);
}
.coffret-vedette__legende {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  line-height: 1.45;
}
@media (min-width: 64rem) {
  .section.coffret-vedette {
    padding-top: var(--e-6);
  }
  .coffret-vedette__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: var(--e-7);
  }
  .coffret-vedette__media {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-5));
  }
}
.coffret-achat {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.coffret-achat__tete {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.coffret-achat__titre {
  font-size: var(--fs-h2);
}
.coffret-achat__chapo {
  color: var(--texte-2);
}
.offre-coffret {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-block: var(--e-5);
  border-block: 1px solid var(--trait);
}
.offre-coffret__prix {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-3);
}
.offre-coffret__montant {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.offre-coffret__mention {
  color: var(--texte-2);
}
.offre-coffret__bon {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.offre-coffret__indispo {
  color: var(--texte-2);
}
.offre-coffret__note {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.coffret-achat__contenu {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.coffret-achat__sous-titre {
  font-family: var(--police-texte);
  font-size: var(--fs-texte);
  font-weight: 500;
  line-height: 1.45;
}
.coffret-achat__decors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-4) var(--e-3);
}
@media (min-width: 30rem) and (max-width: 63.99rem) {
  .coffret-achat__decors {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Étapes réelles : une vraie suite, donc numérotée */
.etapes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6) var(--gap-grille);
}
@media (min-width: 48rem) {
  .etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .etapes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.etapes__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.etapes__numero {
  display: grid;
  place-items: center;
  width: var(--e-7);
  height: var(--e-7);
  border: 1px solid var(--texte);
  border-radius: var(--r-pilule);
  font-family: var(--police-titre);
  font-size: var(--fs-carte);
  line-height: 1;
}
.etapes__texte {
  color: var(--texte-2);
}

/* Comment comparer : quatre gestes en texte */
.coffret-methode__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-7);
}
.coffret-methode__liste {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6) var(--gap-grille);
}
@media (min-width: 48rem) {
  .coffret-methode__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.coffret-methode__item {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-width: 52ch;
}
.coffret-methode__titre {
  font-size: var(--fs-carte);
}
.coffret-methode__texte {
  color: var(--texte-2);
}
.coffret-methode__suite {
  gap: var(--e-2) var(--e-6);
}

/* ---------- Tapis : page d'attente ---------- */
.section.tapis-entete {
  padding-top: var(--e-5);
}
.tapis-entete__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.tapis-entete__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.tapis-entete__chapo {
  max-width: 40ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.tapis-entete__attente {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  width: 100%;
  max-width: 34rem;
}
.tapis-entete__attente-texte {
  color: var(--texte-2);
}
.tapis-entete__media {
  aspect-ratio: 4 / 5;
  background: var(--lin);
  overflow: hidden;
}
.tapis-entete__media picture,
.tapis-entete__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 47.99rem) {
  .tapis-entete__media {
    aspect-ratio: 4 / 3;
  }
  .tapis-entete__media img {
    object-position: center 70%;
  }
}
@media (min-width: 64rem) {
  .section.tapis-entete {
    padding-top: var(--e-6);
  }
  .tapis-entete__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--e-9);
  }
  .tapis-entete .titre-affiche {
    font-size: min(var(--fs-affiche), 5vw);
  }
}
.tapis-contenu__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.tapis-contenu__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.tapis-contenu__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-width: var(--mesure);
}
.tapis-contenu__bloc p {
  color: var(--texte-2);
}
.tapis-contenu__points {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.tapis-contenu__points li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-weight: 500;
}
.tapis-contenu__media {
  aspect-ratio: 1;
  background: var(--lin);
  overflow: hidden;
}
.tapis-contenu__media picture,
.tapis-contenu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 64rem) {
  .tapis-contenu__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e-9);
  }
}