/*
 * Moteur V4 — blocs-v4.css
 *
 * Styles de blocs du socle qui doivent AUSSI servir aux thèmes sans socle (`v4_foundation: false`,
 * ex. modern-luxe-v4) : ceux-ci l'ajoutent à leur `v4_stylesheets`. Chaque règle n'agit que si le
 * bloc la demande (présentation « vitrine », rubriques avec titre, moins de 4 rubriques) — une
 * vitrine existante qui n'emploie rien de cela ne change pas.
 */
/* ─── product_pick, présentation « vitrine » ─────────────────────────────────
   Image pleine, dégradé en bas, nom et prix posés dessus — ni bouton ni favori.
   Pour les emplacements étroits (demi-colonne) où la carte complète s'écrasait.
   Grille fluide : 2 colonnes dans une demi-colonne ou sur mobile, plus en pleine largeur. */
.sws-v4-vitrine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
  gap: var(--grid-gap, 16px);
}
.sws-v4-vitrine__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md, var(--btn-radius, 6px));
  background: var(--color-surface, #f1ede6);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.sws-v4-vitrine__item:hover,
.sws-v4-vitrine__item:focus-visible { color: #fff; text-decoration: none; }
.sws-v4-vitrine__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.sws-v4-vitrine__img--vide { background: var(--color-surface, #f1ede6); }
.sws-v4-vitrine__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 10, 8, .78) 0%, rgba(12, 10, 8, .38) 34%, rgba(12, 10, 8, 0) 62%);
  pointer-events: none;
}
.sws-v4-vitrine__info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.sws-v4-vitrine__titre {
  font-family: var(--font-family-heading, inherit);
  font-weight: var(--font-weight-heading, 600);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sws-v4-vitrine__prix {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  opacity: .95;
}
.sws-v4-vitrine__prix .originprice { display: none; }
.sws-v4-vitrine__prix .linethrough { margin-left: 6px; font-weight: 400; opacity: .7; text-decoration: line-through; }
.sws-v4-vitrine__item:hover .sws-v4-vitrine__img,
.sws-v4-vitrine__item:focus-visible .sws-v4-vitrine__img { transform: scale(1.04); }
.sws-v4-vitrine__item:focus-visible { outline: 2px solid var(--color-accent, #fff); outline-offset: 3px; }
@media (max-width: 767px) {
  .sws-v4-vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sws-v4-vitrine__info { padding: 10px 12px 12px; gap: 2px; }
  .sws-v4-vitrine__titre { font-size: 14px; }
  .sws-v4-vitrine__prix { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .sws-v4-vitrine__img { transition: none; } }


/* ─── category_grid, présentation « tuiles » ─────────────────────────────────
   Avec un titre : la bande respire (le titre n'est plus collé au bloc précédent).
   Moins de 4 rubriques : tuiles de largeur bornée, CENTRÉES (plus de trou à droite). */
.sws-v4-category-grid--titre.mnx-dept-band,
.sws-v4-category-grid--centre.mnx-dept-band {
  padding-top: calc(var(--section-spacing, 80px) / 2);
  padding-bottom: calc(var(--section-spacing, 80px) / 2);
}
.sws-v4-category-grid--titre .mnx-section__title { margin-bottom: 18px !important; }
.sws-v4-category-grid .sws-v4-category-grid__tiles:not(:has(> :nth-child(4))) {
  grid-template-columns: repeat(auto-fit, minmax(200px, 320px));
  justify-content: center;
}
@media (max-width: 560px) {
  .sws-v4-category-grid .sws-v4-category-grid__tiles:not(:has(> :nth-child(4))) { grid-template-columns: 1fr; }
}


/* ─── feature_grid, présentation « cartes encadrées » ────────────────────────
   Sur mobile, deux cartes par rangée : quatre cartes empilées pleine largeur
   faisaient 1 500 px de haut (recette du parcours, 2026-10-09). La grille est
   posée en ligne par le bloc, d'où `!important`. Ne vise que cette forme. */
/* La carte garde SA surface et son filet. Un thème peut effacer le fond de
   tout élément de grille (`.mc-theme .sws-v4-feature-grid__item{background:
   transparent!important}`, maison-couture) : dans un bandeau sombre, le texte
   de la carte (couleur du thème) se retrouvait sur le noir — 1,16:1 mesuré
   (recette 2026-10-10). Spécificité 0-3-0 pour passer devant le thème. */
.sws-v4-block .sws-v4-feature-grid__item.sws-v4-feature-grid__item--cartes_encadrees {
  background: var(--color-surface, #fff) !important;
  border: 1px solid var(--color-border, rgba(0,0,0,.08)) !important;
  border-radius: var(--border-radius, 8px) !important;
}
@media (max-width: 560px) {
  .sws-v4-feature-grid__items:has(> .sws-v4-feature-grid__item--cartes_encadrees) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75em !important;
  }
  .sws-v4-feature-grid__item--cartes_encadrees { padding: .75em .75em 1em !important; }
  .sws-v4-feature-grid__item--cartes_encadrees > img { margin-bottom: .75em !important; }
  .sws-v4-feature-grid__item--cartes_encadrees h3 { font-size: .95rem !important; }
  .sws-v4-feature-grid__item--cartes_encadrees p { font-size: .85rem; line-height: 1.45 !important; }
}

/* ── Rythme d'or du hero (`config.rythme = or`, posé par le parcours de création) ──────────────
   φ = 1,618. Échelle : 0,618 · 1 · 1,618 · 2,618 · 4,236 rem. Le titre prend le plus grand palier où il
   tient (classe `--titre-court|moyen|long`, calculée sur sa longueur) ; interligne 1,618 pour le texte,
   ~1,15 pour les titres ; marges sur l'échelle ; le cadre respire (2,618 rem en haut et en bas).
   Sélecteurs plus précis que ceux d'un thème : un thème dessiné pour SON titre court (66 px, interligne
   0,87, colonne de 5,3 em, aucune marge verticale) faisait déborder le titre d'un marchand hors du hero.
   Un hero sans ce réglage (toutes les boutiques existantes) n'est pas concerné. */
.sws-v4-block.sws-v4-hero.sws-v4-hero--or .sws-v4-hero__inner {
  padding-block: 2.618rem !important; max-width: min(38rem, 100%) !important; box-sizing: border-box !important;
}
.sws-v4-block.sws-v4-hero.sws-v4-hero--or .sws-v4-hero__eyebrow {
  line-height: 1.618 !important; margin: 0 0 1rem !important;
}
.sws-v4-block.sws-v4-hero.sws-v4-hero--or .sws-v4-hero__title {
  max-width: none !important; margin: 0 0 1rem !important; line-height: 1.15 !important; text-wrap: balance;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.618rem) !important;
}
.sws-v4-block.sws-v4-hero.sws-v4-hero--or.sws-v4-hero--titre-court .sws-v4-hero__title {
  font-size: clamp(2.618rem, 1.6rem + 3.4vw, 4.236rem) !important; line-height: 1.08 !important;
}
.sws-v4-block.sws-v4-hero.sws-v4-hero--or.sws-v4-hero--titre-long .sws-v4-hero__title {
  font-size: clamp(1.618rem, 1.2rem + 1.4vw, 2rem) !important; line-height: 1.2 !important;
}
.sws-v4-block.sws-v4-hero.sws-v4-hero--or .sws-v4-hero__lead {
  max-width: 32em !important; line-height: 1.618 !important; margin: 0 0 1.618rem !important;
  font-size: clamp(1rem, .94rem + .25vw, 1.125rem) !important;
}
.sws-v4-block.sws-v4-hero.sws-v4-hero--or .sws-v4-hero__ctas { margin-top: 0 !important; }
@media (max-width: 720px) {
  .sws-v4-block.sws-v4-hero.sws-v4-hero--or .sws-v4-hero__inner { padding-block: 1.618rem !important; }
}