/*
   catalogue-cfg.css — la rangée de vêtements personnalisables, et la
   page « Nos vêtements » qui l'étend.

   Extrait de `creer-mon-merch.css` : ces règles servent désormais à
   cinq pages, dont l'accueil. Les laisser dans la feuille d'une page
   d'audience aurait obligé l'accueil à charger tout le reste — pavés,
   onglets, comparatif — pour une seule rangée.
*/
/* ══ Le catalogue personnalisable ══
   Posé dans `creer-mon-merch.css` parce que les trois pages d'audience
   le chargent désormais toutes les trois — c'est devenu leur socle
   commun, au même titre que `pages-pro.css`. */
.cat-cfg[hidden] { display: none; }
.cat-cfg__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Un rail qui défile horizontalement coupe aussi ce qui dépasse en
     hauteur : la carte survolée, qui remonte de 2 px, perdait le haut de
     sa bordure. On lui laisse la place, sans décaler la rangée. */
  padding-top: 6px;
  margin-top: -6px;
  padding-bottom: 6px;
}
.cat-cfg__rail::-webkit-scrollbar { display: none; }

.cat-cfg__item {
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit;
  background: #fff;
  border: 1.5px solid #e5e0d8;
  border-radius: 16px;
  padding: 14px 14px 16px;
  transition: border-color .18s, transform .18s;
}
.cat-cfg__item:hover { border-color: #0f0f0f; transform: translateY(-2px); }

.cat-cfg__vignette {
  width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  /* Fond blanc : le gris faisait une carte dans la carte, et les photos
     pas encore détourées y laissaient un carré blanc. */
  background: #fff;
  border-radius: 12px; overflow: hidden; margin-bottom: 12px;
}
/* `contain` : ce sont des vêtements détourés, un recadrage leur
   couperait une manche. */
.cat-cfg__vignette img {
  width: 100%; height: 100%; object-fit: contain; padding: 8px;
}
.cat-cfg__sans { color: #bdb7ae; font-size: 22px; }

.cat-cfg__nom {
  font-size: 13.5px; font-weight: 700; color: #0f0f0f;
  text-align: center; line-height: 1.35;
  /* Deux lignes au plus : les noms fournisseurs sont parfois longs
     (« T-shirt unisexe oversize manches courtes Kariban ») et une carte
     plus haute que les autres casse la rangée. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-cfg__prix { font-size: 12.5px; color: #6e6e6e; margin-top: 3px; }
.cat-cfg__action {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 12.5px; font-weight: 700; color: var(--bleu, #1E39D2);
}
.cat-cfg__item:hover .cat-cfg__action svg { transform: translateX(2px); }
.cat-cfg__action svg { transition: transform .18s; }

@media (max-width: 768px) {
  .cat-cfg__rail {
    grid-auto-columns: minmax(150px, 60%);
    margin: -6px -20px 0; padding: 6px 20px 6px;
    scroll-padding-left: 20px;
  }
}

/* La page « Nos vêtements » : une grille, et non un rail. Tout est à
   l'écran, on parcourt en descendant — c'est ce qu'on vient y faire. */
.cat-cfg__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
@media (max-width: 560px) {
  .cat-cfg__grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Le lien « Tout voir », aligné à droite du titre de section. */
.cat-cfg__tete {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.cat-cfg__tout {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--bleu, #1E39D2);
  text-decoration: none; white-space: nowrap;
}
.cat-cfg__tout:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ══ Page « Nos vêtements » : filtres ══ */
.vet-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.vet-chip {
  border: 1.5px solid #e5e0d8; background: #fff; border-radius: 100px;
  padding: 8px 16px; font-family: inherit; font-size: 13.5px; font-weight: 600;
  color: #0f0f0f; cursor: pointer; transition: border-color .15s, background .15s;
}
.vet-chip:hover { border-color: #0f0f0f; }
.vet-chip[aria-pressed="true"] { background: #0f0f0f; border-color: #0f0f0f; color: #fff; }

.vet-layout { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }

.vet-aside {
  background: var(--gris, #F5F5F5); border-radius: 16px; padding: 18px 16px;
  /* Les filtres restent sous les yeux pendant qu'on parcourt la grille.
     `top` suit la barre de navigation, qui est fixe. */
  position: sticky; top: calc(var(--nav-h, 136px) + 16px);
}
.vet-aside__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.vet-aside__t { font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #0f0f0f; margin: 0; }
.vet-reinit {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--bleu, #1E39D2); text-decoration: underline; text-underline-offset: 2px;
}
.vet-reinit[hidden] { display: none; }

.vet-bloc { margin-top: 16px; }
.vet-bloc__t {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #6e6e6e; margin: 0 0 10px;
}

.vet-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; cursor: pointer; font-size: 13.5px; color: #0f0f0f;
}
.vet-opt input { accent-color: #0f0f0f; width: 15px; height: 15px; flex-shrink: 0; }
.vet-opt__nom { flex: 1; min-width: 0; }
.vet-opt__n { font-size: 12px; color: #8a8a8a; font-variant-numeric: tabular-nums; }
/* Une option qui ne renverrait rien reste cliquable mais s'efface : la
   masquer ferait sauter la liste à chaque clic. */
.vet-opt.est-vide { opacity: .4; }

.vet-pastille {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); flex-shrink: 0;
}
.vet-tailles { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }

.vet-prix input[type=range] { width: 100%; accent-color: #0f0f0f; }
.vet-prix__v { font-size: 12.5px; color: #555; margin: 6px 0 0; }

.vet-vide {
  font-size: 14px; line-height: 1.6; color: #666;
  background: var(--gris, #F5F5F5); border-radius: 14px; padding: 22px;
}
.vet-vide[hidden] { display: none; }

@media (max-width: 860px) {
  /* Sur téléphone, les filtres passent AU-DESSUS de la grille et ne
     collent plus : un panneau collant y mangerait la moitié de l'écran. */
  .vet-layout { grid-template-columns: 1fr; gap: 18px; }
  .vet-aside { position: static; }
  .vet-tailles { grid-template-columns: repeat(3, 1fr); }
}

/* Page sans hero : on resserre le haut. `.pp` réserve 72 px pour laisser
   respirer un grand visuel, et `.pp-sec` en ajoute 46 — plus de cent
   pixels de vide quand il n'y a rien à séparer. */
.pp--serre { padding-top: 18px; }
.pp--serre > .pp__in > .pp-sec:first-of-type { padding-top: 0; }

/* Le détail d'une tranche de grammage, sous son nom. */
.vet-opt__detail {
  display: block; font-size: 11.5px; color: #8a8a8a; line-height: 1.3;
}
.vet-opt--grammage { align-items: flex-start; }
.vet-opt--grammage input { margin-top: 2px; }

/* Le coloris sous le nom du modèle, sur la page « Nos vêtements ». */
.cat-cfg__coloris {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; font-size: 12px; color: #6e6e6e;
}
.cat-cfg__coloris .vet-pastille { width: 12px; height: 12px; }

/* ── La rangée sur l'accueil ──
   Les pages d'audience l'affichent dans leur gouttière commune (`.pp__in`).
   L'accueil n'en a pas : la section porte donc sa propre mise en page,
   alignée sur les autres sections de la page. */
.insta-pad { padding: 64px 96px; background: #fff; }
.cat-cfg__in { max-width: 1248px; margin: 0 auto; }
.cat-cfg__titre {
  font-family: var(--font-display, inherit);
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 800;
  letter-spacing: -.025em; color: #0f0f0f; margin: 0;
}
.cat-cfg__sous { font-size: 14.5px; color: #666; margin: 6px 0 20px; }

@media (max-width: 1024px) { .insta-pad { padding: 52px 40px; } }
@media (max-width: 768px)  { .insta-pad { padding: 44px 20px; } }

/* Deux lignes, sur l'accueil.
   `grid-auto-flow: column` remplit colonne par colonne : avec deux
   rangées déclarées, les cartes se posent deux par deux de gauche à
   droite, et la rangée continue de défiler horizontalement. */
.cat-cfg__rail--deux {
  grid-template-rows: auto auto;
  grid-auto-rows: auto;
  row-gap: 14px;
}