/* ==========================================================================
   ShahdTouch V4 — blocks.css
   Habillage des blocs V4 de l'accueil, À L'IDENTIQUE de l'accueil du thème V3
   en production. Chaque valeur est MESURÉE sur shahdtouch.simwebshop.com
   (styles calculés à 1440 et 390 px, 2026-10-12), en px : l'accueil V4 garde la
   racine du socle (16 px), alors que les rem du V3 valaient 10 px.

   Les blocs du moteur posent leurs styles EN LIGNE : ce qui doit les
   contredire porte `!important`, et seulement ça. Les sections sont visées par
   leur emplacement (`[data-v4-placement="…"]`, layout.home.shahdtouch), jamais
   par leur rang.
   ========================================================================== */

/* ── Hero : 540 px, texte à gauche centré verticalement ─────────────────── */
.sht-theme [data-v4-placement="hero"] .sws-v4-hero {
  height: auto !important; min-height: 46vh !important; padding: 0 !important;
  display: flex !important; align-items: center !important; justify-content: flex-start !important;
}
.sht-theme [data-v4-placement="hero"] .sws-v4-hero__inner {
  width: 100%; max-width: var(--container-max-width) !important;
  margin: 0 auto !important; padding: 64px var(--container-padding) !important;
  text-align: start !important; align-items: flex-start !important;
}
.sht-theme .sws-v4-hero__title {
  max-width: 620px; margin: 0 0 16px !important;
  font-family: var(--font-family-heading) !important; font-size: clamp(21px, 14px + 3vw, 36px) !important; font-weight: 500 !important;
  line-height: 1.14 !important; letter-spacing: 0.02em !important; text-transform: uppercase;
  color: #fff !important; text-wrap: balance;
}
.sht-theme .sws-v4-hero__lead {
  max-width: 46ch !important; margin: 0 0 48px !important;
  font-family: var(--font-family-base) !important; font-size: clamp(15px, 14px + 0.4vw, 19px) !important; font-weight: 400 !important;
  line-height: 1.55 !important; color: rgba(255, 255, 255, 0.88) !important;
}
.sht-theme .sws-v4-hero__ctas { justify-content: flex-start !important; gap: 16px !important; flex-wrap: wrap; margin: 0 !important; }
.sht-theme .sws-v4-hero__veil {
  background: linear-gradient(90deg, rgba(26, 21, 18, 0.62) 0%, rgba(26, 21, 18, 0.28) 48%, rgba(26, 21, 18, 0) 75%) !important;
  opacity: 1 !important;
}

/* ── Boutons (comme .sws-btn du V3) ─────────────────────────────────────── */
.sht-theme .sws-v4-hero__cta,
.sht-theme .sws-v4-cta__cta,
.sht-theme [data-v4-placement="bestsellers"] .sws-v4-product-pick__more a,
.sht-theme [data-v4-placement="bestsellers"] a.sws-v4-product-pick__more {
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: var(--button-radius) !important; border: 1px solid transparent !important;
  font-family: var(--font-family-base) !important; font-weight: 500 !important;
  text-transform: uppercase; text-decoration: none !important; white-space: normal;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.sht-theme .sws-v4-hero__cta {
  min-height: 54px; padding: 16px 32px !important;
  font-size: 14px !important; line-height: 16.8px !important; letter-spacing: 1.54px !important;
  background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important;
}
.sht-theme .sws-v4-hero__cta:hover { background: var(--color-accent-ink) !important; border-color: var(--color-accent-ink) !important; }
.sht-theme .sws-v4-hero__ctas > a + a {
  background: transparent !important; border-color: rgba(255, 255, 255, 0.7) !important; color: #fff !important;
}
.sht-theme .sws-v4-hero__ctas > a + a:hover { border-color: var(--color-accent) !important; color: var(--color-accent) !important; }
.sht-theme .sws-v4-cta__cta {
  min-height: 46px; padding: 12px 32px !important; margin: 0 !important;
  font-size: 13px !important; line-height: 15.6px !important; letter-spacing: 1.43px !important;
  background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: #fff !important;
}
.sht-theme .sws-v4-cta__cta:hover { background: var(--color-accent-ink) !important; border-color: var(--color-accent-ink) !important; }

/* ── Réassurance (haut et bas) : bande beige 88 px, pictos dorés ─────────── */
.sht-theme .mnx-perks {
  background: var(--color-surface-alt) !important; border-block: 1px solid var(--color-border);
  padding: 24px 0 !important; margin: 0 !important;
  --band-icon-size: 18px;
}
.sht-theme [data-v4-placement="reassurance"] .mnx-perks { border-block-start: 0; }
.sht-theme .mnx-perks__inner {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  max-width: var(--container-max-width); margin: 0 auto; padding: 0;
}
.sht-theme .mnx-perks__item { display: flex !important; align-items: center; justify-content: center; gap: 12px !important; padding: 0 !important; }
.sht-theme .mnx-perks__item > div {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 30px !important; height: 38px !important; background: none !important; border-radius: 0 !important;
}
.sht-theme .mnx-perks__item i {
  display: inline-block !important; width: 18px !important; height: auto !important; background: none !important; border-radius: 0 !important;
  color: var(--color-accent-ink) !important; font-size: 18px !important; line-height: 1 !important; text-align: center;
}
.sht-theme .mnx-perks__label { text-align: start; }
.sht-theme .mnx-perks__label > span:first-child {
  font-family: var(--font-family-base) !important; font-size: 12px !important; font-weight: 500 !important;
  line-height: 15.6px !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text) !important;
}
.sht-theme .mnx-perks__sub {
  font-family: var(--font-family-base) !important; font-size: 12px !important; font-weight: 400 !important;
  line-height: 16.8px !important; color: var(--color-text-muted) !important; margin: 0 !important;
}

/* ── Titres de section : 23 px capitales, colonne de 640 px, losange doré ─ */
.sht-theme [data-v4-placement="experiences"] .mnx-section__title,
.sht-theme [data-v4-placement="bestsellers"] h2 {
  position: relative; max-width: 640px; margin: 0 auto 40px !important;
  font-family: var(--font-family-heading) !important; font-size: clamp(16px, 12px + 1.5vw, 23px) !important; font-weight: 500 !important;
  line-height: 1.12 !important; letter-spacing: 0.07em !important; text-transform: uppercase;
  text-align: center !important; color: var(--color-text) !important;
}
.sht-theme [data-v4-placement="bestsellers"] h2 { margin-bottom: 72px !important; }
.sht-theme [data-v4-placement="experiences"] .mnx-section__title::after,
.sht-theme [data-v4-placement="bestsellers"] h2::after {
  content: ""; position: absolute; left: 50%; bottom: -21px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 60% 60% 60% 0; transform: rotate(-45deg); background: var(--color-accent);
}
.sht-theme [data-v4-placement="experiences"] .mnx-section__subtitle {
  max-width: 640px; margin: 0 auto 48px !important; text-align: center !important;
  font-family: var(--font-family-base) !important; font-size: clamp(14px, 13px + 0.3vw, 17px) !important; line-height: 1.7 !important;
  color: var(--color-text-muted) !important;
}

/* ── Les Expériences : 5 tuiles 3/4, nom seul en bas ────────────────────── */
.sht-theme [data-v4-placement="experiences"] .sws-v4-category-grid {
  padding: 76px 0 !important; margin: 0 !important; background: var(--color-background) !important;
}
.sht-theme [data-v4-placement="experiences"] .sws-container { max-width: var(--container-max-width) !important; padding: 0 var(--container-padding) !important; }
.sht-theme [data-v4-placement="experiences"] .sws-v4-category-grid__tiles {
  display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap) !important;
  max-width: var(--container-max-width); margin: 0 auto !important; padding: 0 var(--container-padding) !important;
}
.sht-theme [data-v4-placement="experiences"] .mnx-dept-tile {
  aspect-ratio: 3 / 4; height: auto !important; min-height: 0 !important; margin: 0 !important;
  border-radius: var(--border-radius-lg) !important; padding: 16px !important;
  display: flex !important; flex-direction: column; justify-content: flex-end !important; align-items: flex-start !important;
}
.sht-theme [data-v4-placement="experiences"] .mnx-dept-tile > span[aria-hidden="true"] {
  background: linear-gradient(to top, rgba(26, 21, 18, 0.92) 0%, rgba(26, 21, 18, 0.62) 34%, rgba(26, 21, 18, 0.18) 68%, rgba(26, 21, 18, 0.04) 100%) !important;
}
.sht-theme [data-v4-placement="experiences"] .mnx-hero__promo-label,
.sht-theme [data-v4-placement="experiences"] .mnx-hero__promo-cta { display: none !important; }
.sht-theme [data-v4-placement="experiences"] .mnx-hero__promo-title {
  position: relative; margin: 0 !important;
  font-family: var(--font-family-heading) !important; font-size: clamp(16px, 14px + 0.6vw, 21px) !important; font-weight: 400 !important;
  line-height: 1.7 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #fff !important; text-shadow: 0 1px 12px rgba(26, 21, 18, 0.55);
}

/* ── Meilleures ventes : bande beige, carrousel du V3 (theme.js) ────────── */
.sht-theme [data-v4-placement="bestsellers"] .sws-v4-block {
  background: var(--color-surface-alt) !important; padding: 76px 0 !important; margin: 0 !important;
}
.sht-theme [data-v4-placement="bestsellers"] .sws-container { max-width: var(--container-max-width) !important; padding: 0 var(--container-padding) !important; }
.sht-theme [data-v4-placement="bestsellers"] .sws-v4-product-pick__more,
.sht-theme [data-v4-placement="bestsellers"] .sws-v4-block > .sws-container > p:last-child { text-align: center !important; margin: 48px 0 0 !important; }
.sht-theme [data-v4-placement="bestsellers"] .sws-v4-product-pick__more a,
.sht-theme [data-v4-placement="bestsellers"] a.sws-v4-product-pick__more {
  min-height: 46px; padding: 12px 32px !important;
  font-size: 13px !important; line-height: 15.6px !important; letter-spacing: 1.43px !important;
  background: transparent !important; border-color: var(--color-border-strong) !important; color: var(--color-text) !important;
}
.sht-theme [data-v4-placement="bestsellers"] .sws-v4-product-pick__more a:hover,
.sht-theme [data-v4-placement="bestsellers"] a.sws-v4-product-pick__more:hover { border-color: var(--color-accent) !important; color: var(--color-accent-ink) !important; }

/* Cartes : celles du thème V3. Le socle (components.css) leur pose fond, cadre, arrondi et
   marges intérieures, et au corps padding + flex : le V3 n'en a aucun. Valeurs du V3. */
.sht-theme .sws-product-card {
  padding: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; transition: none;
}
.sht-theme .sws-product-card__body { padding: 0; flex: 0 1 auto; }
.sht-theme .sws-product-card__title { color: var(--color-text); }
/* Prix : les règles V3 ne fixent pas la police, elle s’hérite — Jost dans le carrousel V3 de
   l’accueil, alors que le bloc V4 transmet la police des titres. */
.sht-theme [data-v4-placement="bestsellers"] .sws-product-card__price { font-family: var(--font-family-base); }

/* ── Deux circuits : bande sombre, puces dorées ─────────────────────────── */
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid {
  background: var(--color-primary) !important; color: var(--color-on-primary);
  padding: 76px 0 !important; margin: 0 !important;
}
.sht-theme [data-v4-placement="proof"] .sws-container { max-width: calc(712px + 2 * var(--container-padding)) !important; padding: 0 var(--container-padding) !important; margin: 0 auto; }
.sht-theme [data-v4-placement="proof"] .sws-container > * { max-width: 712px; }
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__eyebrow { display: none !important; }
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__title {
  margin: 0 0 16px !important; text-align: start !important; text-transform: none;
  font-family: var(--font-family-heading) !important; font-size: clamp(16px, 13px + 1.6vw, 24px) !important; font-weight: 500 !important;
  line-height: 1.12 !important; letter-spacing: 0.005em !important; color: var(--color-on-primary) !important;
}
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__lead {
  margin: 0 0 24px !important; text-align: start !important;
  font-family: var(--font-family-base) !important; font-size: var(--font-size-base) !important; line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.72) !important;
}
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__items {
  display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin: 0 0 32px !important;
}
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__item {
  display: block !important; position: relative; padding: 0 0 0 24px !important; margin: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, 0.82);
}
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__item::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.65em; width: 6px; height: 6px;
  border-radius: 60% 60% 60% 0; transform: rotate(-45deg); background: var(--color-accent);
}
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__item h3,
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__item p {
  display: inline !important; margin: 0 !important;
  font-family: var(--font-family-base) !important; font-size: 15px !important; line-height: 24px !important; letter-spacing: normal !important;
}
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__item h3 { font-weight: 500 !important; color: var(--color-on-primary) !important; text-transform: none !important; }
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__item h3::after { content: " — "; font-weight: 400; color: rgba(255, 255, 255, 0.82); }
.sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid__item p { font-weight: 400 !important; color: rgba(255, 255, 255, 0.82) !important; }

/* ── Fidélité : bande beige, phrase en Cormorant ────────────────────────── */
.sht-theme [data-v4-placement="loyalty"] .sws-v4-cta {
  background: var(--color-surface-alt) !important; padding: 64px 0 !important; margin: 0 !important; text-align: center;
}
.sht-theme [data-v4-placement="loyalty"] .sws-v4-cta > div { max-width: none !important; padding: 0 var(--container-padding) !important; gap: 0 !important; }
.sht-theme [data-v4-placement="loyalty"] .sws-v4-cta__text {
  max-width: 46ch !important; margin: 0 auto 24px !important;
  font-family: var(--font-family-heading) !important; font-size: clamp(11.5px, 10px + 0.8vw, 16px) !important; font-weight: 400 !important;
  line-height: 1.7 !important; color: var(--color-text) !important;
}

/* ── Newsletter : colonne étroite centrée (le conteneur du socle l'élargissait) */
.sht-theme .sht-newsletter__inner { max-width: 620px; }

/* ── Navigation : « Offres » en accent, comme le thème V3 ───────────────── */
.sht-theme .sht-nav__link[href="/offres"] { color: var(--color-accent-ink); }

/* ── Tablette et mobile ─────────────────────────────────────────────────── */
@media (min-width: 768px) { .sht-theme [data-v4-placement="hero"] .sws-v4-hero { min-height: 56vh !important; } }
@media (min-width: 1280px) { .sht-theme [data-v4-placement="hero"] .sws-v4-hero { min-height: 60vh !important; } }
@media (max-width: 767px) {
  .sht-theme [data-v4-placement="experiences"] .sws-v4-category-grid,
  .sht-theme [data-v4-placement="bestsellers"] .sws-v4-block,
  .sht-theme [data-v4-placement="proof"] .sws-v4-feature-grid { padding: 41.8px 0 !important; }
  .sht-theme [data-v4-placement="loyalty"] .sws-v4-cta { padding: 48px 0 !important; }
}
@media (max-width: 480px) {
  .sht-theme .sws-v4-hero__cta, .sht-theme .sws-v4-cta__cta,
  .sht-theme [data-v4-placement="bestsellers"] .sws-v4-product-pick__more a { line-height: 1.35 !important; overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .sht-theme .sws-v4-cta__cta, .sht-theme [data-v4-placement="bestsellers"] .sws-v4-product-pick__more a { padding-inline: 16px !important; }
}
@media (max-width: 991px) {
  .sht-theme .mnx-perks__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .sht-theme [data-v4-placement="experiences"] .sws-v4-category-grid__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px !important; }
}
@media (max-width: 575px) {
  .sht-theme .mnx-perks__item { justify-content: flex-start; }
  .sht-theme .sws-v4-hero__ctas > a { width: 100%; }
}

/* ── Éléments collants calés sur l'en-tête RÉEL (--sht-sticky-h, mesuré par theme.js) ──
   Le V3 utilisait --sht-header-h (rangée du logo seule) : sous l'en-tête V4, plus haut (menu +
   barre d'univers), la colonne de filtres remontait SOUS lui et, empilée à 1001 (valeur du tiroir
   mobile), le recouvrait au défilement (constaté en prod sur /product/search, 2026-10-12). */
html { scroll-padding-block-start: calc(var(--sht-sticky-h, var(--sht-header-h)) + 16px); }
.sht-theme .sht-sec { scroll-margin-block-start: calc(var(--sht-sticky-h, var(--sht-header-h)) + var(--space-5)); }
.sht-theme .sht-cms-toc { inset-block-start: calc(var(--sht-sticky-h, var(--sht-header-h)) + var(--space-5)); }
@media (min-width: 992px) {
  .sht-theme .sht-listing__sidebar {
    z-index: 1;
    inset-block-start: calc(var(--sht-sticky-h, var(--sht-header-h)) + var(--space-5));
    max-height: calc(100vh - var(--sht-sticky-h, var(--sht-header-h)) - var(--space-8));
  }
  /* Plus haute que l'écran sous l'en-tête (posé par theme.js) : elle suit la page au lieu
     d'ouvrir une barre de défilement dans la colonne (relevé Mohamed, 2026-10-15). */
  .sht-theme .sht-listing__sidebar.is-taller { position: static; max-height: none; overflow: visible; }
  .sht-theme .sht-summary { inset-block-start: calc(var(--sht-sticky-h, var(--sht-header-h)) + var(--space-5)); }
}

/* ── Page ADN : parcours en 4 étapes (le décant est retiré, 2026-10-12) — 2 × 2 en tablette,
   une rangée de 4 sur grand écran (la grille V3 prévoyait 3 puis 5 colonnes). ── */
@media (min-width: 700px)  { .sht-theme .sht-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sht-theme .sht-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); } }