/* ==========================================================================
   ShahdTouch V4 — theme.css
   La feuille du thème V3 `shahdtouch`, reprise À L'IDENTIQUE (base, layout,
   components, pages, utilities), chargée après le socle V4 (manifeste
   `v4_stylesheets`) : les pages reprises du V3 (rubrique, fiche, recherche,
   panier, ADN, blog, offres, connexion, contact) rendent comme en V3.
   La compatibilité des pages partagées (tunnel, compte) est reprise en fin de
   feuille (ancien legacy-compat.css) ; l'habillage des blocs V4 de l'accueil
   vit dans blocks.css.

   Unités : en V3, Bootstrap 3 pose html { font-size: 10px } et toutes les tailles du
   thème, en rem, sont calibrées dessus. Le socle V4 remet la racine à 16 px (ses blocs
   écrivent leurs tailles en rem, en ligne). Les rem du V3 sont donc convertis en px sur
   la base de 10 px (16px → 16px) : rendu identique au V3, socle intact.
   ========================================================================== */

/* ═══ shahdtouch/assets/css/base.css ═══ */
/* ==========================================================================
   ShahdTouch — base.css
   Reset léger, typographie, éléments natifs. Aucune couleur en dur : tout passe
   par les tokens. Propriétés logiques partout (RTL natif, cf. PHASE 14).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* clip (et non hidden) : empeche les panneaux hors-ecran (drawer menu, drawer
     filtres, poses en translateX(-100%)) de creer un defilement horizontal
     parasite, SANS casser position:sticky comme le ferait overflow:hidden. */
  overflow-x: clip;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Le storefront legacy pose parfois une police/couleur sur body : on reprend la main. */
body.sws-theme {
  font-family: var(--font-family-base);
  color: var(--color-text);
}

/* --- Titres : échelle modulaire pilotée par --heading-scale ------------------ */
h1, h2, h3, h4, h5, h6,
.sht-h1, .sht-h2, .sht-h3 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  color: var(--color-text);
  letter-spacing: 0.005em;
}

h1, .sht-h1 { font-size: clamp(20px, 14px + 2.6vw, 34px); }
h2, .sht-h2 { font-size: clamp(17px, 12px + 1.9vw, 26px); }
h3, .sht-h3 { font-size: clamp(12.5px, 10.5px + 0.8vw, 16.5px); }
h4 { font-size: 12px; }
h5 { font-size: 10.5px; }
h6 { font-size: 9.5px; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--color-accent-ink); }

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

ul, ol { margin: 0 0 var(--space-4); padding-inline-start: var(--space-5); }

small { font-size: var(--font-size-sm); }

strong, b { font-weight: var(--font-weight-medium); }

/* --- Formulaires natifs ----------------------------------------------------- */
input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* --- Accessibilité : focus visible partout (PHASE 16) ----------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Les navigateurs sans :focus-visible gardent un focus visible. */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline-color: var(--color-accent);
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

.sws-skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-4);
  z-index: 2000;
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--border-radius);
  transition: inset-block-start var(--transition-base);
}
.sws-skip-link:focus {
  inset-block-start: var(--space-4);
  color: var(--color-on-primary);
}

/* --- Sélection --------------------------------------------------------------- */
::selection {
  background: var(--sht-accent-14);
  color: var(--color-text);
}

/* --- Mouvement réduit (PHASE 16) -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- RTL : seules les icônes DIRECTIONNELLES sont retournées ----------------- */
[dir="rtl"] .sht-flip-rtl { transform: scaleX(-1); }

/* Repli : navigateurs sans overflow-x: clip (Safari < 16). hidden y cree un
   conteneur de defilement, mais cest preferable au debordement lateral. */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* ═══ shahdtouch/assets/css/layout.css ═══ */
/* ==========================================================================
   ShahdTouch — layout.css
   Grille, sections, header (annonce + rangée principale + nav), drawer mobile,
   footer. Mobile-first : base = mobile, enrichissements via min-width.
   ========================================================================== */

/* --- Conteneur & sections ---------------------------------------------------- */
.sws-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.sws-section {
  padding-block: calc(var(--section-spacing) * 0.55);
}
.sws-section--tight { padding-block: var(--space-7); }
.sws-section--alt { background: var(--color-surface-alt); }

@media (min-width: 768px) {
  .sws-section { padding-block: var(--section-spacing); }
  .sws-section--tight { padding-block: var(--space-8); }
}

.sws-section__head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-block-end: var(--space-7);
}
.sws-section__head--start {
  text-align: start;
  margin-inline: 0;
  max-width: none;
}
.sws-section__title { margin-block-end: var(--space-3); }
.sws-section__lead {
  color: var(--color-text-muted);
  margin-block-end: 0;
}

.sws-eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-accent-ink);
  margin-block-end: var(--space-3);
}

.sws-rule {
  width: 48px;
  height: 1px;
  background: var(--color-accent);
  margin: var(--space-4) auto 0;
}
.sws-section__head--start .sws-rule { margin-inline: 0; }

.sht-main { display: block; min-height: 50vh; }

/* --- Barre d'annonce --------------------------------------------------------- */
.sht-announce {
  /* Degrade dore de la maquette : bronze -> or -> bronze. */
  background: linear-gradient(90deg,
              var(--color-accent-ink) 0%,
              var(--color-accent) 50%,
              var(--color-accent-ink) 100%);
  color: var(--color-on-accent);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sht-announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 38px;
  padding-block: var(--space-2);
}
.sht-announce__msg {
  margin: 0;
  text-align: center;
}
.sht-announce__locale {
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}
@media (min-width: 992px) {
  .sht-announce__inner { justify-content: space-between; }
  .sht-announce__locale { display: flex; }
  /* Compense la colonne de droite pour que le message reste optiquement centré. */
  .sht-announce__msg { margin-inline-start: auto; }
}

/* --- Header ------------------------------------------------------------------ */
/* Hauteur EFFECTIVE du header : header_height est un minimum ; un grand logo
   (logo_size, reglable au Studio) agrandit la rangee de logo + 16px. Tout ce
   qui se cale sous le header collant (filtres, recap panier, sommaire, ancres)
   lit cette valeur — sinon il passerait sous un header plus haut que prevu.
   Pose sur `html` (et non `:root`) : le bloc #sws-theme-tokens, emis apres le
   CSS du theme, redefinit `:root` mais pas cette variable. Mobile : le logo est
   plafonne a 44px plus bas, la hauteur reste header_height. */
html { --sht-header-h: max(var(--header-height), calc(var(--logo-size) + 16px)); }
@media (max-width: 767px) {
  html { --sht-header-h: var(--header-height); }
}

.sht-header {
  position: relative;
  z-index: 900;
  background: var(--color-background);
  border-block-end: 1px solid var(--color-border);
}
.sht-header.is-sticky {
  position: sticky;
  inset-block-start: 0;
}
.sht-header.is-stuck {
  box-shadow: var(--shadow-sm);
}

.sht-header__main {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--sht-header-h);
}
.sht-header__start,
.sht-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* flex-basis 0 : les 2 cotes pesent pareil -> le logo reste optiquement centre
     meme si les libelles de categories sont de longueurs differentes. */
  flex: 1 1 0;
  min-width: 0;
}
.sht-header__end { justify-content: flex-end; }

.sht-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Le logo ne se comprime JAMAIS et garde une gouttiere de chaque cote :
     les 2 moities de nav sont en flex:1 et venaient coller le mot-symbole
     ("BONNE HUMEUR" chevauchait l enseigne, constate en capture 1440px). */
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-inline: var(--space-5);
  color: var(--color-text);
}
.sht-logo__img {
  display: block;
  height: var(--logo-size);
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
.sht-logo__word {
  font-family: var(--font-family-heading);
  font-size: calc(var(--logo-size) * 0.72);
  line-height: 1.05;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sht-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-2);
  color: var(--color-text);
  background: none;
  border: 0;
  font-size: var(--font-size-sm);
}
.sht-action:hover { color: var(--color-accent-ink); }
.sht-action__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.sht-action__label { display: none; }
@media (min-width: 1200px) {
  .sht-action--labelled .sht-action__label { display: inline; }
}

/* Badge compteur (panier / favoris) */
.sht-action__count {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 0;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  line-height: 17px;
  text-align: center;
}

/* Burger */
.sht-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: none;
  border: 0;
}
.sht-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--color-text);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.sht-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sht-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sht-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (min-width: 992px) {
  .sht-burger { display: none; }
}

/* --- Recherche (panneau déroulant) ------------------------------------------ */
.sht-search {
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
}
.sht-search__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-4);
}
.sht-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding-inline: var(--space-4);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
}
.sht-search__input:focus {
  border-color: var(--color-accent);
  outline: none;
}
.sht-search__btn { flex: 0 0 auto; }

/* --- Navigation ECLATEE de part et d autre du logo (desktop) --------------- */
.sht-nav { display: none; }
/* Rangee 2 : la nav prend la largeur pleine du conteneur, sous l enseigne.
   Elle etait auparavant eclatee en 2 moities autour du logo -- avec 8 entrees
   elle debordait sa boite et s imprimait par-dessus le mot-symbole. */
.sht-navbar { display: none; }
@media (min-width: 992px) {
  .sht-nav { display: block; }
  .sht-navbar {
    display: block;
    border-block-start: 1px solid var(--color-border);
  }
  .sht-navbar .sht-nav__list {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-2);
  }
  .sht-nav__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .sht-nav--right .sht-nav__list { justify-content: flex-end; }
  .sht-nav__item { position: relative; }
  .sht-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: var(--space-3);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text);
    white-space: nowrap;
  }
  /* Etat actif/survol : la couleur suffit. Pas de puce devant le libelle —
     elle restait visible en permanence sur la categorie courante. */
  .sht-nav__item:hover > .sht-nav__link,
  .sht-nav__item.is-active > .sht-nav__link { color: var(--color-accent-ink); }
  .sht-nav__link--accent { color: var(--color-accent-ink); }

  /* Sous-menu */
  .sht-nav__sub {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-width: 210px;
    margin: 0;
    padding: var(--space-3) 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    z-index: 40;
  }
  .sht-nav--right .sht-nav__sub { inset-inline-start: auto; inset-inline-end: 0; }
  .sht-nav__item:hover > .sht-nav__sub,
  .sht-nav__item:focus-within > .sht-nav__sub { opacity: 1; visibility: visible; }
  .sht-nav__sub a {
    display: block;
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: nowrap;
  }
  .sht-nav__sub a:hover { background: var(--color-surface-alt); color: var(--color-accent-ink); }
}
/* --- Drawer mobile ----------------------------------------------------------- */
.sht-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(28, 24, 21, 0.45);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.sht-drawer-overlay.is-open { opacity: 1; }

.sht-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1001;
  width: min(86vw, 340px);
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  transform: translateX(-100%);
  transition: transform var(--transition-base), visibility var(--transition-base);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Ferme : retire du flux de calcul de scrollWidth. Sans cela le panneau
     hors-ecran ajoutait ~30px de defilement horizontal parasite (mesure QA). */
  visibility: hidden;
}
.sht-drawer.is-open { visibility: visible; }
[dir="rtl"] .sht-drawer { transform: translateX(100%); }
.sht-drawer.is-open { transform: translateX(0); }

.sht-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
}
.sht-drawer__title {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-family: var(--font-family-base);
}
.sht-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-end: calc(var(--space-2) * -1);
  background: none;
  border: 0;
  font-size: 20px;
  color: var(--color-text);
}
.sht-drawer__body { padding: var(--space-3) 0 var(--space-7); }
.sht-drawer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sht-drawer__list a {
  display: block;
  padding: var(--space-4) var(--space-5);
  font-size: 15px;
  color: var(--color-text);
  border-block-end: 1px solid var(--color-border);
}
.sht-drawer__list a:hover { background: var(--color-surface-alt); }
.sht-drawer__foot {
  margin-block-start: auto;
  padding: var(--space-5);
  border-block-start: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

/* --- Footer ------------------------------------------------------------------ */
.sht-footer {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-block-start: var(--space-8);
}
.sht-footer a { color: var(--color-on-primary); }
.sht-footer a:hover { color: var(--color-accent); }

.sht-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  padding-block-end: var(--space-7);
}
@media (min-width: 640px) {
  .sht-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .sht-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--space-8);
  }
}

.sht-footer__brand-name {
  font-family: var(--font-family-heading);
  font-size: 16px;
  margin-block-end: var(--space-3);
  color: var(--color-on-primary);
}
.sht-footer__logo {
  display: block;
  /* Plafonne : agrandir le logo du header ne doit pas gonfler le pied de page. */
  height: min(calc(var(--logo-size) * 1.05), 60px);
  width: auto;
  max-width: 180px;
  object-fit: contain;
  margin-block-end: var(--space-4);
}
.sht-footer__desc {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--font-size-sm);
  max-width: 38ch;
}

.sht-footer__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: var(--space-4);
}
.sht-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}
.sht-footer__list li { margin-block-end: var(--space-3); }
.sht-footer__list a { color: rgba(255, 255, 255, 0.72); }
.sht-footer__list a:hover { color: var(--color-accent); }

.sht-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}
.sht-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--border-radius);
  color: rgba(255, 255, 255, 0.8);
}
.sht-footer__social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.sht-footer__bottom {
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.55);
}
@media (min-width: 768px) {
  .sht-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: start;
  }
}
.sht-footer__pay {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.sht-footer__pay i {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
}

/* --- Bouton retour haut de page ----------------------------------------------
   Il DOIT etre sorti du flux : en position static il occupait un bloc pleine
   largeur entre la reassurance et la newsletter (bande vide constatee en
   capture). uitotop.js ne pose aucun style, c est au theme de le faire. */
#ui-to-top {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-5);
  z-index: 840;
  display: inline-flex;       /* masque par .sht-to-top--hidden tant que
                                 uitotop.js ne l a pas revele */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--border-radius);
  font-size: 18px;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base);
}
#ui-to-top:hover { background: var(--color-secondary); color: var(--color-on-primary); }
/* uitotop.js (charge par la stack partagee) n est JAMAIS initialise : il ne
   revele donc rien. Le bouton est pilote par notre propre theme.js via
   .is-visible — on garde position:fixed meme si le plugin passait par la. */
#ui-to-top { position: fixed !important; }
#ui-to-top.sht-to-top--hidden:not(.is-visible) { display: none; }

/* Liens de sous-catégorie et lien accentué du drawer mobile. */
.sht-drawer__sublink {
  padding-inline-start: var(--space-8) !important;
  color: var(--color-text-muted);
}
.sht-drawer__link--accent { color: var(--color-accent-ink); }

/* --- Widget WhatsApp (injecte par le module, #sws-wa-fab) ------------------- */
/* Le theme ne rend PAS de bouton WhatsApp : mod/whatsapp.js pose le sien selon
   les reglages de la boutique. On evite seulement le chevauchement avec la
   barre achat collante de la fiche produit en mobile. */
@media (max-width: 991px) {
  .product-single #sws-wa-fab { bottom: calc(var(--space-9) + var(--space-3)) !important; }
}

/* Le lien du logo doit offrir une cible tactile de 44px sans grossir le visuel. */
.sht-logo { min-height: 44px; }

/* Sous-menu des dernieres rubriques : ancre a droite pour ne pas deborder. */
@media (min-width: 992px) {
  .sht-navbar .sht-nav__item:nth-last-child(-n+2) .sht-nav__sub {
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
}

/* Rangee 1 en 3 colonnes egales : l enseigne est optiquement centree quelle que
   soit la largeur du groupe d actions, sans dependre d un flex:1 sur des navs
   qui n existent plus a cet endroit. */
/* Colonnes laterales de MEME largeur (1fr chacune) et centre au contenu : c est
   la seule facon que l enseigne tombe sur l axe reel de la page. Avec des
   pistes laterales en auto, le burger masque en desktop donnait 0px a gauche
   contre 200px d icones a droite -> le centre etait decale de 100px vers la
   gauche (mesure : logo a 850px pour une page centree a 950px).
   minmax(0,1fr) : les flancs peuvent se comprimer sous la taille de leur
   contenu, sinon la barre d icones repousserait le centre en mobile. */
.sht-header__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.sht-header__start { justify-content: flex-start; }
/* Les flancs peuvent se comprimer ; le centre (l enseigne) jamais. Sans ca,
   en mobile les icones d action debordaient sur le mot-symbole. */
.sht-header__start,
.sht-header__end { min-width: 0; }
@media (min-width: 992px) {
  .sht-logo { margin-inline: var(--space-5); }
}

/* Mot-symbole : il doit tenir dans la colonne centrale sans jamais deborder sur
   le burger ni sur les icones. Il retrecit avec le viewport plutot que de se
   superposer aux actions (constate a 390px : « ShahdTouch » sous la loupe). */
.sht-logo__word { font-size: clamp(19px, 3.6vw + 6px, 30px); }
@media (max-width: 480px) {
  .sht-header__main { gap: var(--space-2); }
  .sht-logo { margin-inline: var(--space-2); }
}

/* --- Barre d actions en mobile -------------------------------------------
   4 icones de 44px (176px) ne tiennent pas dans la colonne laterale a cote du
   mot-symbole sur un 390px : le flex debordait A GAUCHE de son conteneur et les
   icones s imprimaient sur l enseigne. On garde les 3 actions d achat
   (recherche, compte, panier) et on retire les favoris, secondaires et toujours
   accessibles depuis l espace client. Les cibles restent a 44px. */
@media (max-width: 767px) {
  .sht-header__end > .favoris { display: none; }
  .sht-header__end { gap: 0; }
  .sht-action { min-width: 40px; padding-inline: 2px; }
}

/* --- Header collant : reserver sa hauteur au defilement -------------------
   Le header est en position:sticky sur 2 rangees (~140px). Sans
   scroll-padding-top, toute ancre (#adn, retour d une facette, lien de menu)
   arrive SOUS le header : constate en capture, « MEILLEURES VENTES » et les
   etapes du parcours etaient coupes en deux. */
html { scroll-padding-block-start: calc(var(--sht-header-h) + 40px); }
@media (max-width: 991px) {
  /* En mobile la rangee de nav est masquee : seule la rangee 1 colle. */
  html { scroll-padding-block-start: calc(var(--sht-header-h) + 10px); }
}

/* Les flancs sont a 1fr pour que l enseigne tombe sur l axe de la page, mais la
   barre d icones ne doit jamais passer SOUS sa largeur utile : sinon le flex
   deborde a gauche et se superpose au mot-symbole.
   ⚠️ Pas en dessous de 380px : la somme (icones + enseigne) depasse alors le
   viewport et max-content forcait 24px de scroll horizontal. Sur ces largeurs
   c est le mot-symbole qui cede (il retrecit deja via son clamp). */
@media (min-width: 380px) {
  .sht-header__end { min-width: max-content; }
}

/* Sous 360px, la somme enseigne + 3 icones ne tient plus : on reduit le
   mot-symbole d un cran plutot que de le laisser toucher la loupe. */
@media (max-width: 359px) {
  .sht-logo__word { font-size: 17px; }
  .sht-logo { margin-inline: 4px; }
}

/* --- Taille du logo -------------------------------------------------------
   Le logo ShahdTouch est un MONOGRAMME quasi carre (1297x1212) : a hauteur
   egale il parait bien plus petit qu un logo en bandeau, qui compense par sa
   largeur. Rendu a 34px il ne faisait que 36px de large dans une rangee de
   76px — un jeton perdu au milieu du header. On lui donne donc une vraie
   presence (--logo-size : 56px, puis 100px le 2026-10-07 a la demande
   du marchand) et on releve le plafond de largeur en
   consequence : 190px etait calibre pour un bandeau. */
.sht-logo__img { max-width: 220px; }

/* Mobile : la rangee se resserre, le logo suit — mais reste nettement plus
   grand qu avant (44px contre 34px). */
@media (max-width: 767px) {
  .sht-logo__img { height: 44px; }
}
@media (max-width: 359px) {
  .sht-logo__img { height: 38px; }
}

/* ═══ shahdtouch/assets/css/components.css ═══ */
/* ==========================================================================
   ShahdTouch — components.css
   Atomes STF partagés (.sws-*) + composants propres au thème (.sht-*).
   Les .sws-* habillent aussi les pages héritées de _common (checkout, compte)
   pour qu'elles restent on-brand. Aucune couleur en dur (contrôlé par check_themes).
   ========================================================================== */

/* --- Boutons ----------------------------------------------------------------- */
.sws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 46px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  background: transparent;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: var(--button-uppercase);
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base);
}
.sws-btn:disabled,
.sws-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.sws-btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.sws-btn-primary:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-on-primary);
}

.sws-btn-accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.sws-btn-accent:hover {
  background: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
  color: var(--color-on-accent);
}

.sws-btn-outline {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.sws-btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

.sws-btn-dark {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-background);
}
.sws-btn-dark:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-background);
}

.sws-btn--sm { min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); }
.sws-btn--lg { min-height: 54px; padding: var(--space-4) var(--space-8); }
.sws-btn--block { display: flex; width: 100%; }

/* --- Badges ------------------------------------------------------------------ */
.sws-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  border-radius: var(--border-radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
}
.sws-badge--accent { background: var(--color-accent); color: var(--color-on-accent); }
.sws-badge--promo { background: var(--color-sale); color: var(--color-on-overlay); }
.sws-badge--new { background: var(--color-primary); color: var(--color-on-primary); }
.sws-badge--soft { background: var(--sht-accent-14); color: var(--color-accent-ink); }

/* --- Prix affiche (carte, PDP, vue rapide) -----------------------------------
   ATTENTION : ne PAS nommer ce composant .sws-price — cette classe appartient au
   moteur de listing (slider de prix des facettes, sws-listing.css). La collision
   cassait la mise en page du filtre de prix (constate en capture). */
.sht-price-tag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sht-price-tag__now {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  letter-spacing: 0.01em;
}
.sht-price-tag__was {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.sht-price-tag--lg .sht-price-tag__now { font-size: 15.5px; }

/* --- Carte produit (composant officiel du thème, PHASE 5) -------------------- */
.sws-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  text-align: center;
}

.sws-product-card__media {
  position: relative;
  aspect-ratio: var(--card-aspect);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-block-end: var(--space-4);
}
.sws-product-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}
.sws-product-card__img {
  width: 100%;
  height: 100%;
  /* contain : un flacon n'est jamais recadré maladroitement (PHASE 5). */
  object-fit: var(--card-fit);
  object-position: center;
  padding: var(--space-5);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.sws-product-card:hover .sws-product-card__img { transform: scale(1.035); }

.sws-product-card__img--empty {
  display: block;
  background: var(--color-surface-alt);
  padding: 0;
}

/* Image secondaire au survol (hover swap) */
.sws-product-card__img--alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.sws-product-card:hover .sws-product-card__img--alt { opacity: 1; }
.sws-product-card:hover .sws-product-card__img--main { opacity: 0; }

.sws-product-card__badges {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

.sws-product-card__fav {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px : cible tactile minimale (WCAG 2.5.5 / PHASE 16). */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-size: 14px;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.sws-product-card__fav:hover,
.sws-product-card__fav.is-active,
.sws-product-card__fav.full { color: var(--color-sale); border-color: var(--color-sale); }

/* Ajout rapide : masqué au repos en desktop, toujours visible au tactile */
.sws-product-card__quickadd {
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: var(--space-3);
  z-index: 3;
  opacity: 1;
  transform: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
}
@media (hover: hover) and (min-width: 992px) {
  .sws-product-card__quickadd {
    opacity: 0;
    transform: translateY(8px);
  }
  .sws-product-card:hover .sws-product-card__quickadd,
  .sws-product-card:focus-within .sws-product-card__quickadd {
    opacity: 1;
    transform: none;
  }
}

.sws-product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
}
.sws-product-card__title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 11.2px;
  font-weight: var(--font-weight-heading);
  line-height: 1.25;
}
.sws-product-card__title a { color: var(--color-text); }
.sws-product-card__title a:hover { color: var(--color-accent-ink); }

/* Sous-titre = type de produit (Eau de Parfum, Extrait…) */
.sws-product-card__subtitle {
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.sws-product-card__price { justify-content: center; }

.sws-product-card__tools {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}
.sws-product-card__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.sws-product-card__tool:hover { color: var(--color-accent-ink); }

/* --- Grille produits --------------------------------------------------------- */
.sws-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .sws-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
}
@media (min-width: 1024px) {
  .sws-product-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sws-product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Rating ------------------------------------------------------------------ */
.sws-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.sws-rating__stars { color: var(--color-accent); letter-spacing: 1px; }

/* --- Fil d'Ariane ------------------------------------------------------------ */
.sws-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-5) 0;
  list-style: none;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.sws-breadcrumb a { color: var(--color-text-muted); }
.sws-breadcrumb a:hover { color: var(--color-accent-ink); }
.sws-breadcrumb li + li::before {
  content: "/";
  margin-inline-end: var(--space-2);
  color: var(--color-border-strong);
}

/* --- Champs de formulaire ---------------------------------------------------- */
.sws-input, .sws-select, .sws-textarea {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  transition: border-color var(--transition-base);
}
.sws-input:focus, .sws-select:focus, .sws-textarea:focus {
  border-color: var(--color-accent);
  outline: none;
}
.sws-textarea { min-height: 130px; padding-block: var(--space-4); resize: vertical; }
.sws-label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Alertes ----------------------------------------------------------------- */
.sws-alert {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--border-radius);
  background: var(--color-surface);
  margin-block-end: var(--space-5);
}
.sws-alert--success { border-inline-start-color: var(--color-success); }
.sws-alert--danger { border-inline-start-color: var(--color-danger); }

/* --- Réassurance (trust bar) ------------------------------------------------- */
.sws-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (min-width: 992px) {
  .sws-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
}
.sws-trust__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: start;
}
.sws-trust__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--color-accent-ink);
  font-size: 17px;
}
.sws-trust__title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  line-height: 1.3;
}
.sws-trust__desc {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* --- Onglets ----------------------------------------------------------------- */
.sws-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  border-block-end: 1px solid var(--color-border);
}
.sws-tabs__btn {
  position: relative;
  padding: var(--space-3) 0;
  background: none;
  border: 0;
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sws-tabs__btn::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}
.sws-tabs__btn.is-active { color: var(--color-text); }
.sws-tabs__btn.is-active::after { width: 100%; }

/* --- Sélecteur de quantité --------------------------------------------------- */
.sws-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-surface);
  overflow: hidden;
}
.sws-qty__btn {
  width: 44px;
  height: 46px;
  background: none;
  border: 0;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1;
}
.sws-qty__btn:hover { background: var(--color-surface-alt); }
.sws-qty__input {
  width: 52px;
  height: 46px;
  border: 0;
  border-inline: 1px solid var(--color-border);
  text-align: center;
  background: transparent;
  color: var(--color-text);
  -moz-appearance: textfield;
}
.sws-qty__input::-webkit-outer-spin-button,
.sws-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- État vide --------------------------------------------------------------- */
.sws-empty {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--color-text-muted);
}
.sws-empty__ico {
  font-size: 40px;
  color: var(--color-border-strong);
  margin-block-end: var(--space-4);
}
.sws-empty__title {
  font-family: var(--font-family-heading);
  font-size: 15px;
  color: var(--color-text);
  margin-block-end: var(--space-3);
}

/* --- Carte générique --------------------------------------------------------- */
.sws-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-6);
}

/* --- Champ de formulaire (bloc label + input) -------------------------------- */
.sws-field { margin-block-end: var(--space-5); }
.sws-field:last-of-type { margin-block-end: var(--space-6); }

/* Deux champs côte à côte en desktop, empilés en mobile. */
.sht-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-4);
}
@media (min-width: 560px) {
  .sht-field-row { grid-template-columns: 1fr 1fr; }
}

/* Case à cocher inline (« rester connecté »). */
.sht-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-base);
  color: var(--color-text-muted);
  cursor: pointer;
}
.sht-check input { accent-color: var(--color-accent); width: 15px; height: 15px; }

.sht-auth__small { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sht-auth__small:hover { color: var(--color-accent-ink); }

/* Variantes d'alerte manquantes */
.sws-alert--info { border-inline-start-color: var(--color-accent); }
.sws-alert--warning { border-inline-start-color: var(--color-warning); }

/* --- Sélecteurs de langue / devise (barre d'annonce) ------------------------- */
.sht-locale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.sht-locale__select {
  padding: 2px var(--space-2);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--border-radius-sm);
  color: inherit;
  font-size: var(--font-size-xs);
  line-height: 1.6;
}
/* Le menu déroulant natif s'affiche sur fond clair : forcer un texte lisible. */
.sht-locale__select option { color: var(--color-text); background: var(--color-surface); }
.sht-locale__lang {
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius-sm);
}
.sht-locale__lang:hover { color: var(--color-on-overlay); }
.sht-locale__lang.is-active { color: var(--color-accent); }

/* Garde-fou petits ecrans : un bouton large (--space-8 de padding) ne doit
   jamais depasser son conteneur (mesure QA : 317px dans 272px a 320px). */
.sws-btn { max-width: 100%; }
@media (max-width: 400px) {
  .sws-btn--lg { padding-inline: var(--space-5); }
  .sws-btn { padding-inline: var(--space-4); }
}

/* Un libelle long (« DECOUVRIR MON ADN OLFACTIF — 60 SECONDES ») demandait 332px
   dans une boite de 270px a 320px de large : max-width:100% ne suffit pas si le
   texte ne peut pas se couper, le bouton debordait et poussait toute la page en
   scroll horizontal (constate : body 331px pour 320px de viewport). On autorise
   donc le retour a la ligne sur petits ecrans. */
@media (max-width: 480px) {
  .sws-btn {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
}

/* ═══ shahdtouch/assets/css/pages.css ═══ */
/* ==========================================================================
   ShahdTouch — pages.css
   Mises en page spécifiques : home (hero, collections, éditorial, notes),
   listing (sidebar + grille), fiche produit, panier. Mobile-first.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   HOME — HERO
   ══════════════════════════════════════════════════════════════════════════ */
.sht-hero {
  position: relative;
  background: var(--color-surface-alt);
}

.sht-hero__slider {
  position: relative;
  overflow: hidden;
}

.sht-hero__slide {
  position: relative;
  display: none;
  min-height: 62vh;
  background-size: cover;
  background-position: center;
  color: var(--color-on-overlay);
}
.sht-hero__slide.is-active { display: block; }
@media (min-width: 768px) { .sht-hero__slide { min-height: 76vh; } }
@media (min-width: 1280px) { .sht-hero__slide { min-height: 82vh; } }

/* Voile sombre : garantit le contraste AA du texte quelle que soit l'image. */
.sht-hero__slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(20, 16, 13, 0.72) 0%,
    rgba(20, 16, 13, 0.48) 45%,
    rgba(20, 16, 13, 0.18) 100%
  );
}
[dir="rtl"] .sht-hero__slide-overlay { background: linear-gradient(
    to left,
    rgba(20, 16, 13, 0.72) 0%,
    rgba(20, 16, 13, 0.48) 45%,
    rgba(20, 16, 13, 0.18) 100%
  );
}

.sht-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  padding-block: var(--space-9);
}
.sht-hero__content { max-width: 620px; }

.sht-hero__eyebrow {
  color: var(--color-accent);
  margin-block-end: var(--space-4);
}
.sht-hero__title {
  font-size: clamp(23px, 15px + 3.6vw, 42px);
  line-height: 1.06;
  color: var(--color-on-overlay);
  margin-block-end: var(--space-4);
  text-wrap: balance;
}
.sht-hero__lead {
  /* Accroche : nettement au-dessus du corps de texte, sinon elle se perd sous un
     titre serif de 56px (defaut vu en capture). */
  font-size: clamp(10.5px, 9.5px + 0.6vw, 13.5px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin-block-end: var(--space-7);
  max-width: 46ch;
}
.sht-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
/* Les 2 CTA doivent tenir COTE A COTE des 480px : le texte du hero est limite a
   620px (mesure de lecture), mais la rangee de boutons ne lest pas — sinon deux
   libelles francais longs sempilent inutilement. */
.sht-hero__actions .sws-btn--lg { padding-inline: var(--space-6); }
@media (min-width: 480px) {
  .sht-hero__actions {
    width: max-content;
    max-width: 100%;
    flex-wrap: nowrap;
  }
  .sht-hero__actions .sws-btn { white-space: nowrap; }
}
@media (max-width: 479px) {
  .sht-hero__actions .sws-btn { flex: 1 1 100%; }
}
/* Sur image sombre, l'outline doit rester lisible. */
.sht-hero .sws-btn-outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-on-overlay);
}
.sht-hero .sws-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-on-overlay);
  color: var(--color-on-overlay);
}
/* Hero sans slider configure : le fond est desormais SOMBRE
   (.sht-hero__slide--empty), le texte reste donc clair. Les anciennes regles
   --static imposaient une encre sombre heritee du hero creme d origine :
   titre noir sur brun = illisible (constate en capture). */
.sht-hero--static .sht-hero__inner { padding-block: var(--space-8); }

/* Flèches & pagination du slider */
.sht-hero__arrow {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--color-on-overlay);
  font-size: 16px;
  transition: background var(--transition-base);
}
.sht-hero__arrow:hover { background: rgba(255, 255, 255, 0.28); }
.sht-hero__arrow--prev { inset-inline-start: var(--space-5); }
.sht-hero__arrow--next { inset-inline-end: var(--space-5); }
@media (min-width: 992px) {
  .sht-hero__slider:has(.sht-hero__slide + .sht-hero__slide) .sht-hero__arrow { display: inline-flex; }
}

.sht-hero__dots {
  position: absolute;
  inset-block-end: var(--space-6);
  inset-inline: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.sht-hero__dot {
  width: 26px;
  height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.4);
  transition: background var(--transition-base);
}
.sht-hero__dot.is-active { background: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   HOME — CARROUSEL PRODUITS
   ══════════════════════════════════════════════════════════════════════════ */
.sht-carousel { position: relative; min-width: 0; }
.sht-carousel__track {
  display: grid;
  grid-auto-flow: column;
  /* Sans cette borne, une grille en flux colonne se dimensionne sur son CONTENU
     et deborde le conteneur au lieu de defiler (mesure QA : 1384px > 1280px). */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-auto-columns: 62%;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Espace pour que l'ombre/hover ne soit pas rognée */
  padding-block-end: var(--space-2);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sht-carousel__track::-webkit-scrollbar { display: none; }
.sht-carousel__track > * { scroll-snap-align: start; }

@media (min-width: 640px) { .sht-carousel__track { grid-auto-columns: 38%; } }
@media (min-width: 992px) { .sht-carousel__track { grid-auto-columns: 25%; gap: var(--grid-gap); } }
@media (min-width: 1280px) { .sht-carousel__track { grid-auto-columns: 20%; } }

.sht-carousel__arrow {
  position: absolute;
  inset-block-start: 38%;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), color var(--transition-base);
}
.sht-carousel__arrow:hover { border-color: var(--color-accent); color: var(--color-accent-ink); }
.sht-carousel__arrow[disabled] { opacity: 0.3; pointer-events: none; }
/* Fleches POSEES SUR le rail, pas en dehors : a -32px elles depassaient du
   conteneur et creaient un defilement horizontal de la page (mesure QA). */
.sht-carousel__arrow--prev { inset-inline-start: calc(var(--space-2) * -1); }
.sht-carousel__arrow--next { inset-inline-end: calc(var(--space-2) * -1); }
@media (min-width: 1280px) { .sht-carousel__arrow { display: inline-flex; } }

/* ══════════════════════════════════════════════════════════════════════════
   HOME — COLLECTIONS
   ══════════════════════════════════════════════════════════════════════════ */
.sht-collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .sht-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
}
@media (min-width: 1200px) {
  .sht-collections--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sht-collection {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: var(--space-5);
  background-color: var(--color-surface-alt);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
  overflow: hidden;
  color: var(--color-on-overlay);
}
.sht-collection__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 16, 13, 0.78) 0%, rgba(20, 16, 13, 0.18) 55%, rgba(20, 16, 13, 0.06) 100%);
  transition: background var(--transition-base);
}
.sht-collection:hover .sht-collection__overlay {
  background: linear-gradient(to top, rgba(20, 16, 13, 0.86) 0%, rgba(20, 16, 13, 0.3) 60%, rgba(20, 16, 13, 0.12) 100%);
}
.sht-collection__body { position: relative; z-index: 2; width: 100%; }
.sht-collection__name {
  display: block;
  font-family: var(--font-family-heading);
  font-size: clamp(11.5px, 10px + 0.7vw, 16px);
  line-height: 1.2;
  color: var(--color-on-overlay);
  margin-block-end: var(--space-2);
}
.sht-collection__cta {
  display: inline-block;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Sans image : carte crème, texte sombre (le blanc serait illisible). */
.sht-collection--nobg { color: var(--color-text); border: 1px solid var(--color-border); }
.sht-collection--nobg .sht-collection__overlay { background: none; }
.sht-collection--nobg .sht-collection__name { color: var(--color-text); }
.sht-collection--nobg .sht-collection__cta { color: var(--color-accent-ink); }

/* ══════════════════════════════════════════════════════════════════════════
   HOME — FAMILLES OLFACTIVES
   ══════════════════════════════════════════════════════════════════════════ */
.sht-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 640px) { .sht-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .sht-notes { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sht-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  text-align: center;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.sht-note:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.sht-note__ico { font-size: 20px; color: var(--color-accent-ink); }
.sht-note__label {
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME — ÉDITORIAL / BRAND STORY
   ══════════════════════════════════════════════════════════════════════════ */
.sht-editorial__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 992px) {
  .sht-editorial__inner { grid-template-columns: 1fr 1fr; gap: var(--space-9); }
  .sht-editorial--reverse .sht-editorial__media { order: 2; }
}

.sht-editorial__media {
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-alt);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
}
.sht-editorial__title { margin-block-end: var(--space-5); }
.sht-editorial__lead {
  color: var(--color-text-muted);
  margin-block-end: var(--space-6);
  max-width: 52ch;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME — NEWSLETTER
   ══════════════════════════════════════════════════════════════════════════ */
.sht-newsletter {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.sht-newsletter__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.sht-newsletter__title { color: var(--color-on-primary); margin-block-end: var(--space-3); }
.sht-newsletter__lead {
  color: rgba(255, 255, 255, 0.66);
  margin-block-end: var(--space-6);
}
.sht-newsletter .sws-eyebrow { color: var(--color-accent); }

/* Le module newsletter SWS rend son propre <form> : on l'habille sans le réécrire. */
.sht-newsletter form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}
.sht-newsletter input[type="email"],
.sht-newsletter input[type="text"] {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 48px;
  padding-inline: var(--space-4);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--border-radius);
  color: var(--color-on-overlay);
}
.sht-newsletter input::placeholder { color: rgba(255, 255, 255, 0.45); }
.sht-newsletter input:focus {
  border-color: var(--color-accent);
  outline: none;
}
.sht-newsletter button,
.sht-newsletter input[type="submit"] {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: var(--space-7);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--button-radius);
  color: var(--color-on-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  text-transform: var(--button-uppercase);
}
.sht-newsletter button:hover,
.sht-newsletter input[type="submit"]:hover {
  background: var(--color-accent-ink);
  border-color: var(--color-accent-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   LISTING — catégorie / recherche
   ══════════════════════════════════════════════════════════════════════════ */
.sht-listing__hero {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: var(--color-on-overlay);
}
.sht-listing__hero-title { color: var(--color-on-overlay); margin: 0; }
@media (min-width: 768px) { .sht-listing__hero { min-height: 300px; } }

.sht-listing__head { padding-block: var(--space-6) var(--space-4); }
.sht-listing__title { margin-block-end: var(--space-3); }
.sht-listing__desc {
  color: var(--color-text-muted);
  max-width: 60ch;
  margin-block-end: 0;
}
.sht-listing__count {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-inline-start: var(--space-3);
  letter-spacing: 0;
}

.sht-listing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 992px) {
  .sht-listing { grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-8); }
}

/* Sidebar : drawer en mobile, colonne fixe en desktop */
.sht-listing__sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 1001;
  width: min(86vw, 340px);
  padding: 0 0 var(--space-7);
  background: var(--color-background);
  transform: translateX(-100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
[dir="rtl"] .sht-listing__sidebar { transform: translateX(100%); }
/* Meme correctif que le drawer de menu : hors-ecran = hors calcul de scroll. */
.sht-listing__sidebar { visibility: hidden; }
.sht-listing__sidebar.is-open { transform: translateX(0); visibility: visible; }

.sht-listing__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sht-listing__sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline-end: calc(var(--space-3) * -1);
  background: none;
  border: 0;
  font-size: 19px;
  color: var(--color-text);
}

@media (min-width: 992px) {
  .sht-listing__sidebar {
    position: sticky;
    inset-block-start: calc(var(--sht-header-h) + var(--space-5));
    inset-inline-start: auto;
    width: auto;
    max-height: calc(100vh - var(--sht-header-h) - var(--space-8));
    transform: none;
    background: transparent;
    padding: 0;
    border-inline-end: 1px solid var(--color-border);
    padding-inline-end: var(--space-5);
  }
  [dir="rtl"] .sht-listing__sidebar { transform: none; }
  .sht-listing__sidebar { visibility: visible; }
  .sht-listing__sidebar-head { padding-inline: 0; padding-block-start: 0; }
  .sht-listing__sidebar-close { display: none; }
}

/* Facettes (rendues par sws-listing.js — on habille sans réécrire la structure) */
.sht-facets { padding-inline: var(--space-5); }
@media (min-width: 992px) { .sht-facets { padding-inline: 0; } }

.sht-facets .filterbox__group,
.sht-facets > div {
  margin-block-end: var(--space-6);
}
.sht-facets h3, .sht-facets h4, .sht-facets .filterbox__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text);
  margin-block-end: var(--space-4);
}
.sht-facets label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-base);
  color: var(--color-text-muted);
  cursor: pointer;
  margin: 0;
}
.sht-facets label:hover { color: var(--color-text); }
.sht-facets input[type="checkbox"],
.sht-facets input[type="radio"] {
  accent-color: var(--color-accent);
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
}
.sht-facets .facet-count,
.sht-facets small {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.sht-listing__results { min-width: 0; }

.sht-listing__topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-6);
  border-block-end: 1px solid var(--color-border);
}
.sht-listing__showing {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.sht-listing__tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}
.sht-listing__sort {
  min-height: 42px;
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.sht-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}
@media (min-width: 992px) { .sht-filters-toggle { display: none; } }

.sht-listing__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .sht-listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .sht-listing__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sht-listing__more {
  display: flex;
  justify-content: center;
  padding-block-start: var(--space-8);
}

/* ══════════════════════════════════════════════════════════════════════════
   FICHE PRODUIT (PDP)
   ══════════════════════════════════════════════════════════════════════════ */
.sht-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 992px) {
  .sht-pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-9); }
}

/* --- Galerie ----------------------------------------------------------------- */
.sht-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .sht-gallery {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: start;
  }
  /* Produit a UNE seule photo : pas de colonne de vignettes rendue — sans cette
     regle limage principale atterrissait dans la colonne de 84px (bug vu en
     capture : vignette minuscule + grand vide). */
  .sht-gallery--single,
  .sht-gallery:not(:has(.sht-gallery__thumbs)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sht-gallery__main {
  position: relative;
  order: -1;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}
@media (min-width: 768px) { .sht-gallery__main { order: 0; } }
.sht-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-6);
}
/* Zoom au survol (ordinateur) : la classe n'est posée par theme.js que si le
   pointeur est une souris. Le cadre coupe déjà le débordement. */
.sht-gallery__main.is-zoomable { cursor: zoom-in; }
.sht-gallery__main.is-zoomable img { transition: transform .2s ease-out; }
.sht-gallery__main.is-zooming img { transform: scale(2.2); }
@media (prefers-reduced-motion: reduce) {
  .sht-gallery__main.is-zoomable img { transition: none; }
}

.sht-gallery__thumbs {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sht-gallery__thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .sht-gallery__thumbs {
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 520px;
  }
}

.sht-gallery__thumb {
  flex: 0 0 auto;
  width: 74px;
  height: 74px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.sht-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sht-gallery__thumb:hover { border-color: var(--color-border-strong); }
.sht-gallery__thumb.is-active { border-color: var(--color-accent); }
@media (min-width: 768px) { .sht-gallery__thumb { width: 84px; height: 84px; } }

/* --- Colonne d'achat --------------------------------------------------------- */
.sht-pdp__info { min-width: 0; }
.sht-pdp__title {
  font-size: clamp(18px, 14px + 1.4vw, 25px);
  margin-block-end: var(--space-2);
}
.sht-pdp__subtitle {
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}
.sht-pdp__rating { margin-block-end: var(--space-5); }
.sht-pdp__price { margin-block-end: var(--space-5); }
.sht-pdp__desc {
  color: var(--color-text-muted);
  margin-block-end: var(--space-6);
  max-width: 56ch;
}

.sht-pdp__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  margin-block-end: var(--space-5);
}
.sht-pdp__stock--in { color: var(--color-success); }
.sht-pdp__stock--out { color: var(--color-danger); }

/* Notes olfactives (issues des ATTRIBUTS produit — jamais de champ dédié) */
.sht-notes-list {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--color-border);
}
.sht-notes-list__row {
  display: grid;
  grid-template-columns: minmax(90px, 128px) minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.sht-notes-list__label {
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.sht-notes-list__value { color: var(--color-text); }

.sht-pdp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}
.sht-pdp__actions .sws-btn-primary { flex: 1 1 220px; }
.sht-pdp__fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--button-radius);
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.sht-pdp__fav:hover,
.sht-pdp__fav.is-active,
.sht-pdp__fav.full { color: var(--color-sale); border-color: var(--color-sale); }

.sht-pdp__qty-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
}

/* --- Barre d'achat collante (mobile) ----------------------------------------- */
.sht-sticky-buy {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-block-start: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(28, 24, 21, 0.07);
  transform: translateY(100%);
  transition: transform var(--transition-base);
}
.sht-sticky-buy.is-visible { transform: translateY(0); }
.sht-sticky-buy__price { flex: 0 0 auto; font-weight: var(--font-weight-medium); }
.sht-sticky-buy__cta { flex: 1 1 auto; }
@media (min-width: 992px) { .sht-sticky-buy { display: none; } }

/* --- Onglets & contenus ------------------------------------------------------ */
.sht-pdp__panel { display: none; }
.sht-pdp__panel.is-active { display: block; }
.sht-pdp__panel-body {
  max-width: 74ch;
  color: var(--color-text-muted);
}
.sht-pdp__panel-body h1, .sht-pdp__panel-body h2, .sht-pdp__panel-body h3 { color: var(--color-text); }
.sht-pdp__panel-body img { border-radius: var(--border-radius); }
.sht-pdp__panel-body table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: var(--space-5);
}
.sht-pdp__panel-body th, .sht-pdp__panel-body td {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  text-align: start;
}

/* ══════════════════════════════════════════════════════════════════════════
   PANIER
   ══════════════════════════════════════════════════════════════════════════ */
.sht-cart__title { margin-block-end: var(--space-2); }
.sht-cart__count {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin-block-end: var(--space-7);
}

.sht-cart__layout {
  display: grid;
  /* minmax(0,1fr) et NON 1fr : 1fr vaut minmax(auto,1fr) et refuse de passer
     sous la largeur intrinseque du contenu -> debordement en 320px (mesure QA). */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 992px) {
  .sht-cart__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); }
}

/* En-tête de table : desktop uniquement (mobile = cards) */
.sht-cart__head {
  display: none;
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .sht-cart__head {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) 130px 150px 130px 44px;
    gap: var(--space-4);
    align-items: center;
  }
  .sht-cart__head span:nth-child(n+2) { text-align: center; }
  .sht-cart__head span:last-child { text-align: end; }
}

/* Ligne article : card en mobile, ligne en desktop. Jamais de scroll horizontal. */
.sht-cart__row {
  display: grid;
  /* 72px en tres petit ecran (320px) : a 92px + gap, les cellules prix/qte/total
     ne pouvaient plus retrecir et la ligne debordait (mesure QA : 379>272). */
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--color-border);
  align-items: center;
}
@media (min-width: 400px) {
  .sht-cart__row { grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-4); }
}
@media (min-width: 768px) {
  .sht-cart__row {
    grid-template-columns: minmax(0, 2.4fr) 130px 150px 130px 44px;
    gap: var(--space-4);
  }
}

.sht-cart__product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  min-width: 0;
}
.sht-cart__product > div { min-width: 0; }
.sht-cart__name { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .sht-cart__product {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
  }
  .sht-cart__thumb { max-width: 108px; }
}

.sht-cart__thumb {
  grid-row: span 2;
  width: 100%;
  max-width: 92px;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}
@media (max-width: 767px) {
  .sht-cart__thumb { grid-row: auto; }
}
.sht-cart__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-2);
}

.sht-cart__name {
  font-family: var(--font-family-heading);
  font-size: 11.2px;
  line-height: 1.25;
  margin: 0 0 var(--space-1);
}
.sht-cart__name a { color: var(--color-text); }
.sht-cart__name a:hover { color: var(--color-accent-ink); }
.sht-cart__variant {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Cellules : en mobile elles portent un libellé, en desktop non. */
.sht-cart__cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--font-size-sm);
}
@media (min-width: 768px) {
  .sht-cart__cell { justify-content: center; }
  .sht-cart__cell-label { display: none; }
}
.sht-cart__cell-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}
.sht-cart__total { font-weight: var(--font-weight-medium); }

.sht-cart__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font-size: 15px;
}
.sht-cart__remove:hover { color: var(--color-danger); }
@media (min-width: 768px) { .sht-cart__remove { margin-inline-start: auto; } }

.sht-cart__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-block-start: var(--space-6);
}

/* --- Résumé de commande (sticky desktop) ------------------------------------- */
.sht-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-6);
}
@media (min-width: 992px) {
  .sht-summary {
    position: sticky;
    inset-block-start: calc(var(--sht-header-h) + var(--space-5));
  }
}
.sht-summary__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
}
.sht-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  font-size: var(--font-size-sm);
}
.sht-summary__row dt { color: var(--color-text-muted); font-weight: var(--font-weight-base); margin: 0; }
.sht-summary__row dd { margin: 0; color: var(--color-text); }
.sht-summary__row--free dd { color: var(--color-success); }
.sht-summary__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  margin-block-start: var(--space-3);
  border-block-start: 1px solid var(--color-border);
}
.sht-summary__total dt {
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}
.sht-summary__total dd {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.sht-summary__cta { margin-block-start: var(--space-4); }
.sht-summary__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.sht-summary__pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}
.sht-summary__pay i { font-size: 24px; color: var(--color-text-muted); }

/* Coupon (contrat coupon.js : #coupon_code dans .shoping-cart) */
.sht-coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}
.sht-coupon input {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 44px;
  padding-inline: var(--space-3);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGES SIMPLES (connexion, inscription, contact, 404, CMS)
   ══════════════════════════════════════════════════════════════════════════ */
.sht-auth {
  max-width: 460px;
  margin-inline: auto;
}
.sht-auth__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-7);
}
.sht-auth__title { text-align: center; margin-block-end: var(--space-6); }
.sht-auth__alt {
  text-align: center;
  margin-block-start: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.sht-auth__alt a { color: var(--color-accent-ink); text-decoration: underline; }

.sht-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 992px) {
  .sht-contact { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-8); }
}
.sht-contact__info { font-size: var(--font-size-sm); }
.sht-contact__info dt {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-start: var(--space-5);
  margin-block-end: var(--space-1);
  font-weight: var(--font-weight-base);
}
.sht-contact__info dd { margin: 0; color: var(--color-text); }

.sht-404 {
  text-align: center;
  padding-block: var(--space-9);
}
.sht-404__code {
  font-family: var(--font-family-heading);
  font-size: clamp(40px, 30px + 8vw, 80px);
  line-height: 1;
  color: var(--color-border-strong);
  margin-block-end: var(--space-4);
}

/* Page CMS */
.sht-cms { max-width: 78ch; margin-inline: auto; }
.sht-cms img { border-radius: var(--border-radius); }

/* ══════════════════════════════════════════════════════════════════════════
   BANDE DE RÉASSURANCE
   ══════════════════════════════════════════════════════════════════════════ */
.sht-trust-band {
  background: var(--color-surface-alt);
  border-block: 1px solid var(--color-border);
}

/* Badge promo posé sur la galerie produit. */
.sht-gallery__badge {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 2;
}

/* Liste de tags sous la description produit. */
.sht-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Lien « Modifier » d'une ligne panier. */
.sht-cart__edit {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
}
.sht-cart__edit:hover { color: var(--color-accent-ink); }

/* Économie réalisée + libellé des moyens de paiement (résumé). */
.sht-summary__saving { font-size: var(--font-size-sm); }
.sht-summary__pay-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   VUE RAPIDE (modale)
   ══════════════════════════════════════════════════════════════════════════ */
.sht-quickview { position: relative; padding: var(--space-6); }
.sht-quickview__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 3;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--color-text-muted);
}
.sht-quickview__close:hover { color: var(--color-text); }
.sht-quickview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .sht-quickview__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.sht-quickview__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.sht-quickview__media img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: var(--space-5);
}
.sht-quickview__badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
}
.sht-quickview__info { display: flex; flex-direction: column; }
.sht-quickview__title {
  font-size: 16px;
  margin-block-end: var(--space-3);
}
.sht-quickview__buy {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.sht-quickview__buy .sws-btn { flex: 1 1 160px; }
.sht-quickview__link {
  display: inline-block;
  margin-block-start: var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--color-accent-ink);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   FAVORIS (panneau AJAX)
   ══════════════════════════════════════════════════════════════════════════ */
.sht-fav { padding: var(--space-5); }
.sht-fav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sht-fav__list { margin: 0; padding: 0; list-style: none; }
.sht-fav__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 40px;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}
.sht-fav__media {
  width: 64px;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.sht-fav__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sht-fav__info { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sht-fav__title {
  font-family: var(--font-family-heading);
  font-size: 10.5px;
  color: var(--color-text);
}
.sht-fav__title:hover { color: var(--color-accent-ink); }
.sht-fav__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-muted);
}
.sht-fav__remove:hover { color: var(--color-danger); }

/* ══════════════════════════════════════════════════════════════════════════
   GALERIE PHOTO PARTAGÉE (vue rapide / appels directs)
   ══════════════════════════════════════════════════════════════════════════ */
.sht-photo-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.sht-photo-stage__img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-5);
  cursor: zoom-in;
}
.sht-photo-stage__img.is-active { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   PANIER — conteneur et avis multi-devise
   ══════════════════════════════════════════════════════════════════════════ */
.sht-cart { min-height: 40vh; }
.sht-cart__items { min-width: 0; }

.sht-dualnotice {
  margin-block-start: var(--space-3);
  font-size: var(--font-size-sm);
}
.sht-dualnotice__hint {
  display: block;
  margin-block-start: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT — captcha
   ══════════════════════════════════════════════════════════════════════════ */
.sht-captcha {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.sht-captcha .sws-field { flex: 1 1 200px; margin-block-end: var(--space-5); }
.sht-captcha img {
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  margin-block-end: var(--space-5);
}

/* ══════════════════════════════════════════════════════════════════════════
   404 — actions
   ══════════════════════════════════════════════════════════════════════════ */
.sht-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGE CMS — sommaire, sections éditoriales
   ══════════════════════════════════════════════════════════════════════════ */
.sht-cms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
@media (min-width: 992px) {
  .sht-cms-layout--toc { grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-8); }
}

.sht-cms-toc {
  position: sticky;
  inset-block-start: calc(var(--sht-header-h) + var(--space-5));
}
.sht-cms-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  border-inline-start: 1px solid var(--color-border);
}
.sht-cms-toc__list li { margin: 0; }
.sht-cms-toc__list a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  border-inline-start: 1px solid transparent;
  margin-inline-start: -1px;
}
.sht-cms-toc__list a:hover {
  color: var(--color-accent-ink);
  border-inline-start-color: var(--color-accent);
}

.sht-cms { max-width: 78ch; }
.sht-cms__intro {
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-block-end: var(--space-7);
}
.sht-cms__section + .sht-cms__section { margin-block-start: var(--space-8); }

/* Sections CMS — habillage commun */
.sht-sec { scroll-margin-block-start: calc(var(--sht-header-h) + var(--space-5)); }
.sht-sec--center { text-align: center; }
.sht-sec--right { text-align: end; }

.sht-sec__title {
  font-size: clamp(15px, 12px + 1.1vw, 21px);
  margin-block-end: var(--space-4);
}
.sht-sec__hero-title {
  font-size: clamp(19px, 14px + 2.2vw, 30px);
  margin-block-end: var(--space-4);
}
.sht-sec__lead {
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
  max-width: 68ch;
}
.sht-sec--center .sht-sec__lead { margin-inline: auto; }
.sht-sec__body { color: var(--color-text); }
.sht-sec__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}
.sht-sec--center .sht-sec__actions { justify-content: center; }
.sht-sec__note {
  margin-block-start: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.sht-sec__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
  margin-inline: auto;
}

/* Sections sur fond sombre (hero dark, cta accent, témoignages) */
.sht-sec--hero,
.sht-sec--cta,
.sht-sec--proof {
  padding: var(--space-8) var(--space-6);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface-alt);
}
.sht-sec--dark {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.sht-sec--dark .sht-sec__title,
.sht-sec--dark .sht-sec__hero-title { color: var(--color-on-primary); }
.sht-sec--dark .sht-sec__lead,
.sht-sec--dark .sht-sec__note { color: rgba(255, 255, 255, 0.72); }
.sht-sec--dark .sws-eyebrow { color: var(--color-accent); }
.sht-sec--dark .sws-btn-outline { border-color: rgba(255, 255, 255, 0.45); color: var(--color-on-overlay); }
.sht-sec--dark .sws-btn-outline:hover { border-color: var(--color-on-overlay); background: rgba(255, 255, 255, 0.1); color: var(--color-on-overlay); }

/* Grille de fonctionnalités */
.sht-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 640px) {
  .sht-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sht-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .sht-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* FAQ */
.sht-faq { display: flex; flex-direction: column; gap: var(--space-3); }
.sht-faq__item {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}
.sht-faq__q {
  cursor: pointer;
  font-family: var(--font-family-heading);
  font-size: 11.5px;
  color: var(--color-text);
  list-style: none;
}
.sht-faq__q::-webkit-details-marker { display: none; }
.sht-faq__q::after {
  content: "+";
  float: inline-end;
  color: var(--color-accent);
  font-family: var(--font-family-base);
}
.sht-faq__item[open] .sht-faq__q::after { content: "\2212"; }
.sht-faq__a {
  margin-block-start: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Témoignage + chiffres clés */
.sht-quote { margin: 0 0 var(--space-6); }
.sht-quote p {
  font-family: var(--font-family-heading);
  font-size: clamp(12px, 10px + 0.9vw, 16px);
  line-height: 1.4;
}
.sht-quote__by {
  margin-block-start: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-accent);
}
.sht-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
}
@media (min-width: 768px) {
  .sht-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sht-stats__item { margin: 0; }
.sht-stats__item dt {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--font-weight-base);
  margin-block-end: var(--space-2);
}
.sht-stats__item dd {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: 18px;
  color: var(--color-accent);
}

/* Formulaire embarqué (bloc CMS) */
.sht-sec--form { padding: var(--space-7); }
.sws-funnel-form-embed { margin-block-start: var(--space-4); }

/* Blocs de page insérés par le Page Builder : ils gèrent leur propre largeur. */
.sws-page-flush > .sht-sec--hero,
.sws-page-flush > .sht-sec--cta,
.sws-page-flush > .sht-sec--proof { margin-inline: 0; }

/* Bloc éditorial : sans visuel, le texte occupe toute la largeur au lieu de
   rester coincé dans une demi-colonne (le média est conditionnel). */
.sht-editorial__text { min-width: 0; }
@media (min-width: 992px) {
  .sht-editorial__inner:not(:has(.sht-editorial__media)) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FACETTES DU MOTEUR (.sws-facet* / .sws-price*)
   Ces classes sont générées par /theme/base/js/sws-listing.js et pré-stylées
   par sws-listing.css (chargé AVANT le thème). On se contente de les remettre
   au langage visuel du thème — sans jamais renommer quoi que ce soit.
   ⚠️ .sws-price ici = SLIDER DE PRIX du moteur (le prix produit du thème
   s'appelle .sht-price-tag, cf. components.css).
   ══════════════════════════════════════════════════════════════════════════ */

.sws-facet {
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-border);
}
.sws-facet:last-child { border-block-end: 0; }

.sws-facet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0 0 var(--space-3);
  background: none;
  border: 0;
  text-align: start;
}
.sws-facet__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.sws-facet__arrow { color: var(--color-text-muted); transition: transform var(--transition-base); }

.sws-facet__opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-base);
  color: var(--color-text-muted);
  cursor: pointer;
}
.sws-facet__opt:hover { color: var(--color-text); }
.sws-facet__opt input[type="checkbox"],
.sws-facet__opt input[type="radio"] {
  accent-color: var(--color-accent);
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
}
.sws-facet__opt-label { min-width: 0; }
.sws-facet__count {
  margin-inline-start: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.sws-facet__colors,
.sws-facet__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.sws-facet__color {
  display: inline-flex;
  padding: 2px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.sws-facet__color.is-active { border-color: var(--color-accent); }
.sws-facet__swatch {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
}
.sws-facet__size {
  min-width: 40px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  text-align: center;
  cursor: pointer;
}
.sws-facet__size.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Bouton « Appliquer » du filtre de prix : il héritait d'un .sws-btn sans
   variante → texte clair sur fond clair, donc invisible (constaté en capture). */
.sws-facet__apply {
  width: 100%;
  margin-block-start: var(--space-4);
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
}
.sws-facet__apply:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* --- Slider de prix du moteur ------------------------------------------------ */
.sws-price__track { background: var(--color-border); }
.sws-price__fill { background: var(--color-accent); }
.sws-price__range::-webkit-slider-thumb {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
}
.sws-price__range::-moz-range-thumb {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
}
.sws-price__labels {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.sws-price__single {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════════════════
   PANIER — mise en page MOBILE reprise (carte lisible)
   Constat QA : en 390px le nom passait sous la vignette, prix/quantité/total
   flottaient et la croix de suppression restait orpheline. On repasse la ligne
   en vraie carte : vignette + infos en haut, puis une grille prix/qté/total.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .sht-cart__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    position: relative;
    padding-inline-end: var(--space-7); /* place pour la croix */
  }

  /* Vignette + nom + variante sur une même ligne */
  .sht-cart__product {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
  .sht-cart__thumb {
    grid-row: auto;
    width: 84px;
    max-width: 84px;
  }
  .sht-cart__name { font-size: 10.5px; }

  /* Prix / quantité / total : une grille régulière, libellés visibles */
  .sht-cart__cell {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    justify-content: start;
  }
  .sht-cart__cell-label {
    display: block;
    font-size: var(--font-size-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  /* Croix de suppression : ancrée en haut à droite de la carte */
  .sht-cart__remove {
    position: absolute;
    inset-block-start: var(--space-4);
    inset-inline-end: 0;
  }
}

/* Nom d'article : c'est l'element dominant de la ligne. En serif 11.2px il
   passait sous le lien « Modifier » (sans-serif 14px) — hierarchie inversee. */
.sht-cart__name {
  font-size: 13px;
  line-height: 1.25;
  margin-block-end: var(--space-2);
}
.sht-cart__edit {
  display: inline-block;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-xs);
}

/* ══════════════════════════════════════════════════════════════════════════
   ALIGNEMENT MAQUETTE v2
   Losange doré, collections rondes, packs éditoriaux, hero à flèches,
   bandes de réassurance. Ces règles arrivent APRÈS les précédentes : à
   sélecteur de même poids, ce sont elles qui s'appliquent.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Séparateur de titre : petit losange doré (remplace le trait) --------- */
.sht-rule {
  display: block;
  width: 7px;
  height: 7px;
  margin: var(--space-4) auto 0;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.sws-section__head--start .sht-rule { margin-inline: 0; }

/* Le titre de section reprend la casse et l'interlettrage de la maquette. */
.sws-section__title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(13.5px, 11px + 1.1vw, 19px);
}
.sws-section__lead { margin-block-start: var(--space-4); }

/* --- HERO : flèches toujours présentes, voile plus doux ------------------- */
.sht-hero { position: relative; }
.sht-hero__slide { min-height: 46vh; }
@media (min-width: 768px)  { .sht-hero__slide { min-height: 56vh; } }
@media (min-width: 1280px) { .sht-hero__slide { min-height: 60vh; } }

/* Voile : dégradé horizontal, texte lisible à gauche, image visible à droite. */
.sht-hero__slide-overlay {
  background: linear-gradient(to right,
              rgba(22, 18, 14, 0.80) 0%,
              rgba(22, 18, 14, 0.55) 42%,
              rgba(22, 18, 14, 0.15) 100%);
}
[dir="rtl"] .sht-hero__slide-overlay {
  background: linear-gradient(to left,
              rgba(22, 18, 14, 0.80) 0%,
              rgba(22, 18, 14, 0.55) 42%,
              rgba(22, 18, 14, 0.15) 100%);
}

/* Hero sans slider configuré : fond crème sombre, pas d'image blanche vide. */
.sht-hero__slide--empty { background: var(--color-secondary); }

.sht-hero__title {
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(19px, 13px + 2.6vw, 31px);
  line-height: 1.14;
}
.sht-hero__inner { padding-block: var(--space-8); }

/* Flèches du hero : posées sur les bords, discrètes (maquette). */
.sht-hero__arrow {
  display: inline-flex;
  background: transparent;
  border: 0;
  color: var(--color-on-overlay);
  font-size: 26px;
  opacity: 0.85;
  width: 44px;
  height: 44px;
}
.sht-hero__arrow:hover { background: transparent; opacity: 1; }
.sht-hero__arrow--prev { inset-inline-start: var(--space-3); }
.sht-hero__arrow--next { inset-inline-end: var(--space-3); }
@media (min-width: 992px) {
  .sht-hero__slider:has(.sht-hero__slide + .sht-hero__slide) ~ .sht-hero__arrow,
  .sht-hero__arrow { display: inline-flex; }
}

/* --- BANDES DE RÉASSURANCE ------------------------------------------------ */
.sht-trust-band {
  background: var(--color-surface-alt);
  border-block: 1px solid var(--color-border);
  padding-block: var(--space-5);
}
/* Celle sous le hero est plus compacte et sépare le hero du contenu. */
.sht-trust-band--top { border-block-start: 0; }
.sht-trust-band .sws-trust__item { justify-content: center; }
.sht-trust-band .sws-trust__ico { width: 30px; font-size: 18px; }
.sht-trust-band .sws-trust__title {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sht-trust-band .sws-trust__desc { font-size: 11px; }

/* --- COLLECTIONS : médaillons ronds --------------------------------------- */
.sht-collections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 768px) {
  .sht-collections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
}

.sht-collection {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  /* On neutralise l'ancienne carte rectangulaire. */
  aspect-ratio: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: var(--color-text);
}
.sht-collection__media {
  display: block;
  width: min(72vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background-color: var(--color-surface-alt);
  background-size: cover;
  background-position: center;
  margin-block-end: var(--space-4);
  transition: transform var(--transition-base);
}
.sht-collection:hover .sht-collection__media { transform: scale(1.03); }
.sht-collection__media--empty { border: 1px solid var(--color-border); }

.sht-collection__name {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
}
.sht-collection__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 26ch;
  line-height: 1.5;
}
.sht-collection__cta {
  margin-block-start: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

/* --- CARTES PRODUIT : notes en étoiles ------------------------------------ */
.sws-product-card__rating { justify-content: center; }
.sws-product-card__rating .sws-rating__stars {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--color-accent);
}
.sws-product-card__title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sws-product-card__subtitle { font-size: var(--font-size-xs); }
.sht-price-tag__now { font-size: var(--font-size-sm); letter-spacing: 0.04em; }

/* Grille des miniatures : format plus compact (6 par ligne en desktop). */
@media (min-width: 992px) {
  .sht-grid-mini { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
}

/* --- DEUX PACKS ÉDITORIAUX ------------------------------------------------ */
.sht-packs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .sht-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sht-pack {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 210px;
  padding: var(--space-7);
  background-color: var(--color-surface-alt);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius);
  overflow: hidden;
}
/* Voile clair : le texte du pack est SOMBRE (maquette), il faut donc éclaircir
   l'image, pas l'assombrir comme sur le hero. */
.sht-pack__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(245, 241, 232, 0.94) 0%,
              rgba(245, 241, 232, 0.80) 55%,
              rgba(245, 241, 232, 0.35) 100%);
}
[dir="rtl"] .sht-pack__veil {
  background: linear-gradient(to left,
              rgba(245, 241, 232, 0.94) 0%,
              rgba(245, 241, 232, 0.80) 55%,
              rgba(245, 241, 232, 0.35) 100%);
}
.sht-pack__body {
  position: relative;
  z-index: 2;
  max-width: 30ch;
}
.sht-pack__title {
  font-size: clamp(12.5px, 10.5px + 0.8vw, 16.5px);
  margin-block-end: var(--space-3);
}
.sht-pack__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
}
/* Lien couvrant : toute la carte est cliquable, sans imbriquer de <a>. */
.sht-pack__link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.sht-pack:hover .sws-btn-outline {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHIE — montée en taille et en graisse (demande client)
   Base 16 → 17px, corps en 450, libellés/titres nettement plus affirmés.
   Tout passe par les tokens : le marchand garde la main depuis le Studio.
   ══════════════════════════════════════════════════════════════════════════ */
/* Les tokens de taille/graisse vivent dans tokens.css + tokens.json :
   renderTokens() les reinjecte apres ce fichier, un :root ici serait ecrase. */


body { font-size: var(--font-size-base); }

/* --- Titres de section : plus grands, plus gras -------------------------- */
.sws-section__title {
  font-size: clamp(16px, 12px + 1.5vw, 23px);
  font-weight: 500;
  letter-spacing: 0.07em;
}
.sws-section__lead {
  font-size: clamp(9.5px, 9px + 0.25vw, 10.6px);
  color: var(--color-text-muted);
}

/* --- Hero ---------------------------------------------------------------- */
.sht-hero__title {
  font-size: clamp(21px, 14px + 3vw, 36px);
  font-weight: 500;
}
.sht-hero__lead {
  font-size: clamp(10.5px, 9.8px + 0.5vw, 12.8px);
  font-weight: 400;
}

/* --- Navigation ---------------------------------------------------------- */
@media (min-width: 992px) {
  .sht-nav__link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
  }
  .sht-nav__sub a { font-size: var(--font-size-sm); font-weight: 500; }
}
.sht-announce { font-size: 12px; font-weight: 500; }

/* --- Cartes produit ------------------------------------------------------ */
.sws-product-card__title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.09em;
}
.sws-product-card__subtitle {
  font-size: 13px;
  font-weight: 400;
}
.sht-price-tag__now {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.sws-product-card__rating .sws-rating__stars { font-size: 13px; }

/* --- Collections --------------------------------------------------------- */
.sht-collection__name {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.13em;
}
.sht-collection__desc { font-size: 14px; }
.sht-collection__cta { font-size: 12px; font-weight: 500; }

/* --- Réassurance --------------------------------------------------------- */
.sht-trust-band .sws-trust__title { font-size: 12px; font-weight: 500; }
.sht-trust-band .sws-trust__desc  { font-size: 12px; }

/* --- Boutons ------------------------------------------------------------- */
.sws-btn {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.11em;
}
.sws-btn--lg { font-size: 14px; }
.sws-btn--sm { font-size: 12px; }

/* --- Packs éditoriaux ---------------------------------------------------- */
.sht-pack__title { font-size: clamp(13.5px, 11px + 1vw, 18.5px); font-weight: 500; }
.sht-pack__text  { font-size: 15px; }

/* --- Fiche produit ------------------------------------------------------- */
.sht-pdp__title { font-weight: 500; }
.sht-pdp__subtitle { font-size: 15px; font-weight: 500; }
.sht-price-tag--lg .sht-price-tag__now { font-size: 17px; font-weight: 600; }
.sht-notes-list__row { font-size: 15px; }
.sht-notes-list__label { font-weight: 500; color: var(--color-text); }
.sws-tabs__btn { font-size: 13px; font-weight: 500; }

/* --- Panier -------------------------------------------------------------- */
.sht-cart__name { font-weight: 500; }
.sht-cart__head { font-size: 12px; font-weight: 500; }
.sht-summary__title { font-size: 13px; font-weight: 500; }
.sht-summary__row { font-size: 15px; }
.sht-summary__total dt { font-size: 15px; font-weight: 600; }
.sht-summary__total dd { font-weight: 600; }

/* --- Footer -------------------------------------------------------------- */
.sht-footer__title { font-size: 12px; font-weight: 500; }
.sht-footer__list  { font-size: 15px; }
.sht-footer__desc  { font-size: 15px; }

/* --- Listing ------------------------------------------------------------- */
.sht-listing__title { font-weight: 500; }
.sht-listing__showing { font-size: 15px; font-weight: 500; }
.sws-facet__title { font-size: 12px; font-weight: 500; }
.sws-facet__opt { font-size: 15px; }

/* Hero sans AUCUN visuel : on ne reserve pas 56vh de fond uni, le contenu
   dicte la hauteur (constate en capture : 620px de brun vide).
   ⚠️ Depuis l integration du hero de marque, le repli porte la classe
   --media (image + video livrees avec le theme) et garde ses hauteurs
   pleines. Ces regles --empty ne servent donc que si le visuel du theme est
   retire : on les conserve comme filet. */
.sht-hero__slide--empty { min-height: 0; }
.sht-hero__slide--empty .sht-hero__inner {
  min-height: 0;
  padding-block: var(--space-9);
}

/* ══════════════════════════════════════════════════════════════════════════
   THÈME V3 — enveloppes de slot
   Le wrapper doit être TRANSPARENT à la mise en page : sans display:contents,
   il introduirait un bloc intermédiaire qui casserait les sections pleine
   largeur. Ne JAMAIS utiliser display:none sur un slot vide (piège documenté
   sur carat : tous les slots s'empileraient à top:0).
   ══════════════════════════════════════════════════════════════════════════ */
.sht-slot,
.sht-slot--static { display: contents; }

/* Grille produits AVEC PEU D'ARTICLES : une grille en repeat(4) laisse 3 colonnes
   vides quand la boutique n'a qu'un similaire (constate en capture). Les colonnes
   s'ajustent au nombre reel, et le rail reste centre. */
.sws-product-grid {
  justify-content: center;
}
.sws-product-grid:has(> :last-child:nth-child(1)) { grid-template-columns: minmax(0, 320px); }
.sws-product-grid:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 320px)); }
@media (min-width: 768px) {
  .sws-product-grid:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 320px)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHAHDTOUCH — ADN OLFACTIF (questionnaire + révélation)
   Le dégradé NECTAR est réservé à DEUX usages, et à eux seuls :
   la barre de progression, et les badges de % de match. Règle de DA.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Coquille ---------------------------------------------------------- */
.sht-adn {
  max-width: 780px;
  margin-inline: auto;
  padding-block: var(--space-7);
}
.sht-adn__intro { text-align: center; margin-block-end: var(--space-7); }
.sht-adn__intro h1 {
  font-size: clamp(19px, 14px + 2.4vw, 30px);
  margin-block-end: var(--space-4);
}
.sht-adn__intro p { color: var(--color-text-muted); max-width: 48ch; margin-inline: auto; }

/* --- Barre de progression (NECTAR #1) ---------------------------------- */
.sht-adn__progress {
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
  margin-block-end: var(--space-6);
}
.sht-adn__progress-bar {
  height: 100%;
  width: 0;
  background: var(--gradient-nectar);
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sht-adn__step-count {
  display: block;
  text-align: center;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-5);
}

/* --- Un écran = une question ------------------------------------------- */
.sht-adn__screen { display: none; }
.sht-adn__screen.is-active { display: block; }
.sht-adn__q {
  font-size: clamp(13.5px, 11px + 1.2vw, 19px);
  text-align: center;
  margin-block-end: var(--space-6);
  text-wrap: balance;
}

/* Cartes de réponse : cibles tactiles ≥48px (règle mobile-first). */
.sht-adn__options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
@media (min-width: 620px) {
  .sht-adn__options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sht-adn__opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.sht-adn__opt:hover { border-color: var(--color-accent); }
.sht-adn__opt.is-selected {
  border-color: var(--color-accent);
  background: var(--color-surface-alt);
}
.sht-adn__opt-label { flex: 1 1 auto; font-weight: var(--font-weight-medium); }
.sht-adn__opt-hint {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-base);
  color: var(--color-text-muted);
  margin-block-start: 2px;
}
/* Pastille de sélection (multi-choix) */
.sht-adn__opt-mark {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--color-on-accent);
}
.sht-adn__opt.is-selected .sht-adn__opt-mark {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.sht-adn__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}
.sht-adn__hint {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-4);
}

/* --- Révélation : le PROFIL d'abord, la vente ensuite ------------------- */
.sht-adn__reveal { display: none; }
.sht-adn__reveal.is-active { display: block; }

.sht-profile {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-7) var(--space-6);
  text-align: center;
  margin-block-end: var(--space-7);
}
.sht-profile__eyebrow {
  display: block;
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: var(--space-3);
}
.sht-profile__family {
  font-family: var(--font-family-heading);
  font-size: clamp(19px, 14px + 2.6vw, 30px);
  line-height: 1.1;
  color: var(--color-on-primary);
  margin-block-end: var(--space-4);
}
.sht-profile__traits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sht-profile__traits li {
  padding: 6px var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.86);
}

/* --- Les 3 matchs ------------------------------------------------------- */
.sht-matches { display: grid; gap: var(--space-5); }
@media (min-width: 900px) {
  .sht-matches { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.sht-match {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sht-match--first { border-color: var(--color-accent); }

.sht-match__media {
  aspect-ratio: 4 / 5;
  background: var(--color-surface-alt);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.sht-match__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); }

/* Badge de % (NECTAR #2) — élément typographique majeur, en Cormorant. */
.sht-match__score {
  font-family: var(--font-family-heading);
  font-size: clamp(24px, 20px + 2vw, 34px);
  font-weight: 500;
  line-height: 1;
  background: var(--gradient-nectar);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Repli navigateurs sans background-clip:text : l'or plein reste lisible. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sht-match__score { background: none; color: var(--color-accent-ink); }
}
.sht-match__score-unit { font-size: 0.4em; }
.sht-match__name {
  font-family: var(--font-family-heading);
  font-size: 12.5px;
  margin: 0;
}
.sht-match__type { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.sht-match__price { font-weight: 600; }
/* Le POURQUOI : on reprend les réponses du client. */
.sht-match__why {
  margin: 0;
  padding: var(--space-3) 0 0;
  border-block-start: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}
.sht-match__actions { margin-block-start: auto; display: grid; gap: var(--space-2); }

.sht-adn__replay {
  text-align: center;
  margin-block-start: var(--space-7);
}

/* --- Résultat vide (aucun produit ne correspond) ------------------------ */
.sht-adn__empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface-alt);
  border-radius: var(--border-radius-lg);
}

/* --- Niveau 2 : ADN non couvert + capture de contact -------------------- */
/* Aucun parfum n'atteint le seuil de correspondance : message POSITIF puis
   formulaire « prévenez-moi ». Ce n'est pas un échec du parcours — l'ADN est
   identifié, c'est la sélection qui n'a pas encore le parfum. */
.sht-adn__uncovered {
  max-width: 340px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: var(--color-surface-alt);
  border-radius: var(--border-radius-lg);
}
.sht-adn__uncovered .sht-rule { margin-block: var(--space-4); }
.sht-adn__uncovered-text {
  margin: 0 auto var(--space-6);
  max-width: 300px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.sht-adn__waitlist {
  display: grid;
  gap: var(--space-3);
  max-width: 240px;
  margin: 0 auto;
}
.sht-adn__wl-choice {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}
.sht-adn__wl-kind {
  flex: 1 1 0;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.sht-adn__wl-kind.is-active {
  color: var(--color-text);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}
.sht-adn__wl-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
}
.sht-adn__wl-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.sht-adn__wl-submit { width: 100%; }
.sht-adn__wl-feedback {
  margin: 0;
  min-height: 1.2em;
  font-size: var(--font-size-sm);
}
.sht-adn__wl-feedback.is-error { color: var(--color-danger); }
.sht-adn__wl-feedback.is-ok    { color: var(--color-success); }
.sht-adn__wl-thanks {
  margin: 0;
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.6;
}

/* Contact demandé AVANT le résultat (`lead_gate`) : même habillage que la liste
   d'attente, plus large (trois champs étiquetés) et un consentement facultatif. */
.sht-adn__lead { text-align: center; }
.sht-adn__lead .sht-adn__uncovered-text { max-width: 360px; }
.sht-adn__lead-form {
  max-width: 360px;
  gap: var(--space-2);
  text-align: start;
}
.sht-adn__lead-label {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}
.sht-adn__lead-form .sht-adn__wl-input[aria-invalid="true"] { border-color: var(--color-danger); }
.sht-adn__lead-consent {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin: var(--space-3) 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.sht-adn__lead-consent input { margin-top: .2em; accent-color: var(--color-accent); flex: none; }
.sht-adn__lead-note {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
}


/* --- Encart d'appel vers l'ADN (réutilisable) --------------------------- */
.sht-adn-callout {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--space-6);
  text-align: center;
}
.sht-adn-callout h2 { font-size: 15px; margin-block-end: var(--space-3); }
.sht-adn-callout p { color: var(--color-text-muted); margin-block-end: var(--space-5); }

/* --- Mouvement réduit --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sht-adn__progress-bar { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHAHDTOUCH — sections propres au cahier
   ══════════════════════════════════════════════════════════════════════════ */

/* Séparateur de titre : goutte de miel (losange adouci). */
.sht-rule {
  display: block;
  width: 8px;
  height: 8px;
  margin: var(--space-4) auto 0;
  background: var(--color-accent);
  border-radius: 60% 60% 60% 0;
  transform: rotate(-45deg);
}
.sws-section__head--start .sht-rule { margin-inline: 0; }

/* --- LE PARCOURS (5 étapes) --------------------------------------------- */
.sht-journey {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (min-width: 700px)  { .sht-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sht-journey { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sht-journey__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-5) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
}
/* Le fil qui relie les étapes, uniquement là où elles sont alignées. */
@media (min-width: 1024px) {
  .sht-journey__step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(var(--space-5) * -1);
    width: var(--space-5);
    height: 1px;
    background: var(--color-border-strong);
  }
  [dir="rtl"] .sht-journey__step:not(:last-child)::after { transform: scaleX(-1); }
}
.sht-journey__num {
  font-family: var(--font-family-heading);
  font-size: 11.5px;
  color: var(--color-accent);
}
.sht-journey__ico { font-size: 22px; color: var(--color-accent-ink); }
.sht-journey__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

/* --- LES 5 EXPÉRIENCES (cartes photo, pas des cercles) ------------------- */
.sht-experiences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .sht-experiences { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); }
}
.sht-experience {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 3 / 4;
  padding: var(--space-4);
  background-color: var(--color-surface-alt);
  background-size: cover;
  background-position: center;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  color: var(--color-on-overlay);
}
.sht-experience__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,21,18,.82) 0%, rgba(26,21,18,.20) 60%, rgba(26,21,18,.05) 100%);
  transition: background var(--transition-base);
}
.sht-experience:hover .sht-experience__veil {
  background: linear-gradient(to top, rgba(26,21,18,.88) 0%, rgba(26,21,18,.34) 65%, rgba(26,21,18,.10) 100%);
}
.sht-experience__body { position: relative; z-index: 2; }
.sht-experience__name {
  display: block;
  font-family: var(--font-family-heading);
  font-size: clamp(10.5px, 9.5px + 0.5vw, 13.5px);
  color: var(--color-on-overlay);
}
.sht-experience__line {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.4;
}
/* Sans photo : carte crème, texte sombre (le blanc serait illisible). */
.sht-experience--nobg { color: var(--color-text); border: 1px solid var(--color-border); }
.sht-experience--nobg .sht-experience__veil { background: none; }
.sht-experience--nobg .sht-experience__name { color: var(--color-text); }
.sht-experience--nobg .sht-experience__line { color: var(--color-text-muted); }

/* --- LA PREUVE D'AUTHENTICITÉ (fond encre) ------------------------------ */
.sht-proof {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.sht-proof__inner { max-width: 760px; }
.sht-proof__title {
  color: var(--color-on-primary);
  font-size: clamp(16px, 13px + 1.6vw, 24px);
  margin-block-end: var(--space-4);
}
.sht-proof__lead { color: rgba(255, 255, 255, 0.72); margin-block-end: var(--space-5); }
.sht-proof__list {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.sht-proof__list li {
  padding-inline-start: var(--space-5);
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.sht-proof__list li::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-proof__list strong { color: var(--color-on-primary); }
.sht-proof .sws-btn-outline {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-on-overlay);
}
.sht-proof .sws-btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}

/* --- FIDÉLITÉ ----------------------------------------------------------- */
.sht-loyalty { background: var(--color-surface-alt); }
.sht-loyalty__line {
  font-family: var(--font-family-heading);
  font-size: clamp(11.5px, 10px + 0.8vw, 16px);
  max-width: 46ch;
  margin-inline: auto;
  margin-block-end: var(--space-5);
}

/* --- Grille des décants ------------------------------------------------- */
@media (min-width: 992px) {
  .sht-grid-decants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --- Bouton WhatsApp : libellé « Un conseil ? » -------------------------- */
/* Le widget est injecté par le module (mod/whatsapp.js) : on ne le duplique
   pas, on lui laisse la place au-dessus de la barre d'achat collante. */
@media (max-width: 991px) {
  .product-single #sws-wa-fab { bottom: calc(var(--space-9) + var(--space-3)) !important; }
}

/* Révélation ADN — hiérarchie corrigée (constatée en capture).
   ⚠️ Le socle pose html{font-size:62.5%} : 10px = 10px, pas 16px. Un 13.5px
   rendait 13.5px — plus petit que la catégorie. On fixe donc en px ici. */
/* ⚠️ PAS de order:-1 ici : cela remontait le nom AVANT le visuel, en tete de
   carte, coupe du score et du prix auxquels il appartient (constate en
   capture). Le nom domine par sa TAILLE, pas en changeant l ordre de
   lecture : media, puis score, nom, categorie, prix. */
.sht-match__name {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}
.sht-match__type {
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sht-match__score {
  font-size: clamp(48px, 3vw + 32px, 64px);
  line-height: 0.95;
}
.sht-match__price { font-size: 17px; }

/* Cartes de match : hauteurs egales, action alignee en bas. */
.sht-matches { align-items: stretch; }
.sht-match { height: 100%; }
.sht-match__why { flex: 1 1 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   Lisibilite — correction du piege rem
   Le socle pose html{font-size:62.5%} : 10px = 10px, PAS 16px. Les clamp()
   ci-dessus, ecrits en rem comme si la base etait 16px, plancheraient a 9.5px
   sur mobile (releve : lead 10-11px, nom d Experience 11px, numero d etape
   11.5px). On refixe donc ces tailles en px, ou le calcul est explicite.
   ══════════════════════════════════════════════════════════════════════════ */
.sws-section__lead   { font-size: clamp(14px, 13px + 0.3vw, 17px); }
.sht-hero__lead      { font-size: clamp(15px, 14px + 0.4vw, 19px); }
.sht-experience__name{ font-size: clamp(16px, 14px + 0.6vw, 21px); }
.sht-journey__num    { font-size: 18px; }

/* Pastille du compteur panier : 10px etait sous le seuil de lisibilite. */
.sht-action__count { font-size: 11px; }

/* Deux sections voisines cumulaient 104px de padding EN BAS puis 104px EN HAUT,
   soit 208px de vide entre chaque bloc (constate en capture : une bande vide
   sous « Commencer l experience »). On fait se chevaucher la respiration : la
   section qui suit une section de meme fond allege son padding haut. */
.sws-section + .sws-section { padding-block-start: calc(var(--section-spacing) * 0.62); }

/* --- Prix : resorber le double espace ------------------------------------
   Le socle emet : <span class="price">110</span>&nbsp;<span class="originprice"
   style="display:none">110</span>&nbsp;<span class="currency">DH</span>.
   Les deux &nbsp; sont des CARACTERES du flux : masquer le noeud du milieu n en
   retire aucun -> « 110  DH » avec un espace double (constate en capture).
   On annule la taille sur le CONTENEUR (les espaces cessent d occuper de la
   largeur) et on la redonne aux seuls enfants visibles. Cette regle doit vivre
   dans pages.css : layout.css est ecrase par le bloc typographique ci-dessus.
   ⚠️ html{font-size:62.5%} -> 10px = 10px, donc tailles en px. */
.sht-price-tag__now { font-size: 0; letter-spacing: normal; }
.sht-price-tag__now > * { font-size: 15px; letter-spacing: 0.04em; }
.sht-price-tag__now > .currency { margin-inline-start: 0.32em; }
.sht-price-tag--lg .sht-price-tag__now { font-size: 0; }
.sht-price-tag--lg .sht-price-tag__now > * { font-size: 25px; }

/* --- ADN : ne pas dessiner l anneau de focus sur le titre de question -----
   adn.js donne le focus au <h2 tabindex="-1"> a chaque changement d ecran pour
   que les lecteurs d ecran annoncent la nouvelle question. Ce focus est
   PROGRAMMATIQUE : l anneau dore encadrait le titre comme un champ de saisie
   (constate en capture). :focus-visible ne s affiche qu au clavier, on garde
   donc l accessibilite sans l artefact visuel. */
.sht-adn__q:focus { outline: none; }
.sht-adn__q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* Taille du titre de question : clamp() en rem plancherait a 13.5px
   (html{font-size:62.5%}). En px, comme le reste du bloc typographique. */
.sht-adn__q { font-size: clamp(21px, 18px + 0.9vw, 30px); }

/* ══════════════════════════════════════════════════════════════════════════
   PARCOURS SHAHDTOUCH — traitement en medaillons
   Avant : numero pale, icone flottante et libelle empiles dans un rectangle
   blanc ; le fil de liaison passait au MILIEU de la carte, sans rien relier de
   visible. Desormais chaque etape a un point focal unique — un medaillon
   creme cercle d or portant l icone, le numero en pastille sur sa couronne —
   et le fil relie les medaillons entre eux, a leur hauteur.
   ══════════════════════════════════════════════════════════════════════════ */
.sht-journey { gap: var(--space-4); }

.sht-journey__step {
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
  background: var(--color-surface);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              border-color var(--transition-base);
}
.sht-journey__step:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: 0 10px 30px -18px var(--color-accent-ink);
}

/* Le medaillon : cercle creme, filet dore, icone ambre au centre. */
.sht-journey__medal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 62px;
  block-size: 62px;
  border-radius: 50%;
  background: var(--color-background);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-accent-ink);
}
.sht-journey__ico { font-size: 24px; line-height: 1; color: inherit; }

/* Le numero en pastille sur la couronne du medaillon : il ordonne le parcours
   sans concurrencer l icone. */
.sht-journey__num {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  /* ⚠️ PAS le gradient nectar : le cahier le reserve strictement a deux usages
     (barre de progression ADN + badges de % de match). Miel plein ici. */
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.sht-journey__label {
  font-size: 15px;
  line-height: 1.45;
  text-wrap: balance;
}

/* Le fil relie les MEDAILLONS (et non le milieu des cartes) : il se cale sur
   leur axe — padding haut de la carte + demi-hauteur du medaillon. */
@media (min-width: 1024px) {
  .sht-journey__step:not(:last-child)::after {
    inset-block-start: calc(var(--space-6) + 31px);
    inset-inline-end: calc(var(--space-4) * -1);
    width: var(--space-4);
    background: color-mix(in srgb, var(--color-accent) 40%, transparent);
  }
}

/* Affinage : le fil de liaison etait trop pale pour se lire, et l etape
   manquait d air sous le libelle (carte visuellement lourde du bas). */
@media (min-width: 1024px) {
  .sht-journey__step:not(:last-child)::after {
    background: color-mix(in srgb, var(--color-accent) 62%, transparent);
  }
}
/* Le libelle est pousse EN BAS (margin-block-start:auto) pour que les cinq
   etapes alignent leur texte sur la meme ligne de base, qu il tienne sur une
   ou deux lignes — sinon la carte la plus longue creusait un vide sous les
   autres. Le medaillon reste, lui, cale en haut. */
.sht-journey__step { padding-block-end: var(--space-6); justify-content: flex-start; }
.sht-journey__label {
  padding-inline: var(--space-2);
  text-wrap: pretty;
}
/* L alignement bas ne vaut QUE lorsque les etapes partagent une rangee : en
   colonne unique (mobile), margin:auto creusait un vide sous chaque libelle. */
@media (min-width: 700px) {
  .sht-journey__label { margin-block-start: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO DE MARQUE — image responsive + video d ambiance
   Trois couches empilees : l image (socle, toujours peinte), la video (par
   dessus, opacite montee par JS une fois qu elle joue vraiment) et le voile
   degrade qui garantit la lisibilite du texte a gauche.
   L image reste visible si la video ne demarre pas — data saver, autoplay
   refuse, prefers-reduced-motion : on ne se retrouve jamais avec un fond noir.
   ══════════════════════════════════════════════════════════════════════════ */
.sht-hero__slide--media {
  position: relative;
  overflow: hidden;
  background: var(--color-secondary);
}

.sht-hero__media,
.sht-hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Cadrage a DROITE : le sujet (la femme au flacon) y est place dans les
     deux medias, et c est la moitie que le voile laisse claire. Centrer
     rognait le sujet des que le hero devenait large et plat. */
  object-position: 70% center;
}
/* La video ne se revele qu une fois qu elle joue (classe posee par theme.js) :
   sinon on verrait un aplat noir le temps du premier rendu. */
.sht-hero__video {
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.sht-hero__video.is-playing { opacity: 1; }

/* Le voile et le contenu passent AU-DESSUS des deux couches media. */
.sht-hero__slide--media .sht-hero__slide-overlay { z-index: 2; }
.sht-hero__slide--media .sht-hero__inner { position: relative; z-index: 3; }

/* Mouvement reduit : on garde l image fixe, jamais la video. */
@media (prefers-reduced-motion: reduce) {
  .sht-hero__video { display: none; }
}

/* Voile du hero en MOBILE : le degrade horizontal (sombre a gauche, clair a
   droite) suppose deux moities — il n y en a pas sur un ecran portrait, et le
   texte se retrouvait pose sur le visage du sujet. On bascule donc sur un
   degrade vertical : sombre en haut derriere le texte, clair en bas ou le
   sujet reste visible. Le cadrage suit (le sujet descend dans l image). */
@media (max-width: 767px) {
  .sht-hero__slide--media .sht-hero__slide-overlay {
    background: linear-gradient(to bottom,
                rgba(22, 18, 14, 0.86) 0%,
                rgba(22, 18, 14, 0.72) 46%,
                rgba(22, 18, 14, 0.34) 100%);
  }
  .sht-hero__media,
  .sht-hero__video { object-position: 62% center; }
}

/* --- Matchs ADN : le bouton debordait de sa carte -------------------------
   .sht-match__actions est une grille, et un enfant de grille a min-width:auto
   par defaut : il refuse de passer sous la largeur de son contenu. Or .sws-btn
   est en white-space:nowrap — « DECOUVRIR CE PARFUM » + padding reclame ~239px
   dans une carte de 244px, bord a bord : le bouton sortait de la carte par la
   droite (mesure : carte 454→698, bouton 479→718).
   La correction du hero existe deja mais sous 480px seulement ; ici la carte
   est etroite A TOUTE largeur d ecran, la regle ne peut donc pas etre bornee
   au mobile. */
.sht-match__actions { min-inline-size: 0; }
.sht-match__actions > .sws-btn {
  min-inline-size: 0;
  inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
  text-align: center;
}

/* --- Fond des visuels produit : degrade, plus l aplat blanc ----------------
   Le blanc pur de --color-surface se decoupait durement sur le creme de fond —
   effet « vignette collee » (constate en capture, compare a lunettes.simwebshop
   ou le visuel se fond dans la carte). On reprend la recette du theme optic :
   un degrade vertical de la teinte creme vers le blanc, qui ancre le produit
   en bas et laisse respirer le haut. Teintes ShahdTouch : ivoire -> blanc. */
.sws-product-card__media,
.sht-match__media {
  background: linear-gradient(to bottom,
              var(--color-surface-alt) 0%,
              var(--color-surface) 100%);
}

/* --- Selecteur de quantite : ne pas l etirer sur toute la ligne ------------
   .sht-pdp__qty-row est un flex en COLONNE : align-items y vaut stretch par
   defaut, ce qui etirait le stepper (inline-flex pourtant) sur les 555px de la
   colonne, avec un grand vide entre le « + » et le bord droit du cadre
   (constate en capture). Il ne doit occuper que la largeur de ses commandes. */
.sht-pdp__qty-row { align-items: flex-start; }
.sht-pdp__qty-row .sws-qty { inline-size: auto; }

/* --- Tuiles Experience : lisibilite du nom sur visuel CLAIR ----------------
   Le voile tombait a .20 des 60% de hauteur, or le libelle est dans cette zone
   faible : sur les univers lumineux (Elegance, Fraicheur, Bonne Humeur) le
   blanc devenait difficile a lire (constate en capture). On renforce le bas du
   degrade — la ou vit le texte — sans assombrir le haut de l image, et on
   ajoute une ombre portee discrete qui detache le nom quel que soit le visuel. */
.sht-experience__veil {
  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%);
}
.sht-experience:hover .sht-experience__veil {
  background: linear-gradient(to top,
              rgba(26, 21, 18, 0.95) 0%,
              rgba(26, 21, 18, 0.72) 40%,
              rgba(26, 21, 18, 0.30) 72%,
              rgba(26, 21, 18, 0.10) 100%);
}
.sht-experience__name,
.sht-experience__line { text-shadow: 0 1px 12px rgba(26, 21, 18, 0.55); }
.sht-experience--nobg .sht-experience__name,
.sht-experience--nobg .sht-experience__line { text-shadow: none; }

/* --- Tuiles Experience : leger zoom au survol -----------------------------
   Le visuel est pose en background-image INLINE (point focal calcule par
   _partials/cat-bg.php) : un transform:scale ne l atteindrait pas, et scaler la
   tuile entiere emporterait aussi le texte et le voile. On anime donc
   background-size — l image grandit dans un cadre qui, lui, ne bouge pas
   (overflow:hidden deja pose), le libelle reste parfaitement net et stable. */
.sht-experience {
  background-size: 100% 100%;
  transition: background-size 620ms cubic-bezier(.22, .61, .36, 1),
              box-shadow var(--transition-base);
}
.sht-experience:hover,
.sht-experience:focus-visible {
  background-size: 108% 108%;
  box-shadow: 0 14px 38px -22px var(--color-accent-ink);
}

/* Le zoom est une invitation, pas une necessite : on le retire si l utilisateur
   a demande moins de mouvement. */
@media (prefers-reduced-motion: reduce) {
  .sht-experience { transition: none; }
  .sht-experience:hover,
  .sht-experience:focus-visible { background-size: 100% 100%; }
}

/* --- Description de catégorie : c est ici qu elle se lit ------------------
   Elle a quitté les tuiles « Expériences » (elle y noyait le visuel) pour la
   PAGE catégorie, où elle a la place de respirer. Le marchand la saisit dans
   un éditeur riche : elle arrive donc en HTML purifié, d où le <div> et les
   règles sur ses enfants plutôt qu un simple <p>. */
.sht-listing__desc {
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.65;
}
.sht-listing__desc > :first-child { margin-block-start: 0; }
.sht-listing__desc > :last-child  { margin-block-end: 0; }
.sht-listing__desc p { margin-block: 0 var(--space-3); }
.sht-listing__desc strong { font-weight: 600; color: var(--color-text); }



/* ══════════════════════════════════════════════════════════════════════════
   HÉRO DE PAGE CATÉGORIE — les 5 Expériences
   Chaque visuel place le flacon au centre et les éléments qui IDENTIFIENT
   l'univers plus bas (fleurs d'oranger, velours grenat, menthe, perles,
   dunes). Un cadrage centré ne montrait donc que le médaillon. On descend
   dans la source via --sht-hero-focal, posé PAR CATÉGORIE par le gabarit
   (_partials/listing-shell.php) — une valeur unique ne convient pas aux cinq.
   ══════════════════════════════════════════════════════════════════════════ */
.sht-listing__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--sht-hero-focal, center 62%);
  background-color: var(--color-secondary);
  color: var(--color-on-overlay);
  padding-block: var(--space-6);
}
@media (min-width: 768px)  { .sht-listing__hero { min-height: 400px; } }
@media (min-width: 1280px) { .sht-listing__hero { min-height: 440px; } }

/* Dégradé LATÉRAL : sombre à gauche derrière le texte, transparent à droite
   pour laisser le visuel intact. Garantit le contraste AA du titre et de
   l'accroche même sur les visuels clairs (Élégance, Fraîcheur). */
.sht-listing__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(26, 21, 18, 0.55) 0%,
      rgba(26, 21, 18, 0.34) 38%,
      rgba(26, 21, 18, 0) 55%),
    linear-gradient(to top,
      rgba(26, 21, 18, 0.52) 0%,
      rgba(26, 21, 18, 0) 62%);
  pointer-events: none;
}
.sht-listing__hero-inner { position: relative; z-index: 2; }

.sht-listing__hero-title {
  margin: 0;
  color: var(--color-on-overlay);
  text-shadow: 0 1px 16px rgba(26, 21, 18, 0.5);
}

/* Accroche : UNE phrase sous le titre, alignée dessus. Distincte du
   paragraphe long du marchand, qui reste sous la bannière. */
.sht-listing__hero-tagline {
  /* UNE seule ligne en desktop : `max-width` en ch cassait la plus longue
     (Bonne Humeur, 64 caracteres) sur deux lignes alors que la place ne
     manquait pas. On laisse donc la phrase respirer et on empeche le retour. */
  max-width: none;
  white-space: nowrap;
  margin: var(--space-2) 0 0;
  color: var(--color-on-overlay);
  font-size: 16.8px;              /* ~10.5px a base 16 — html est en 62.5% */
  line-height: 1.5;
  opacity: 0.92;
  text-shadow: 0 1px 12px rgba(26, 21, 18, 0.58);
}

/* ── Mobile ──
   Bande plus courte, titre fluide, voile renforcé. Le point focal est CONSERVÉ
   (pas de recentrage) : sans cela on retomberait sur le médaillon seul. */
@media (max-width: 767px) {
  .sht-listing__hero { min-height: 340px; }
  .sht-listing__hero::after {
    background:
      linear-gradient(to right,
        rgba(26, 21, 18, 0.65) 0%,
        rgba(26, 21, 18, 0.42) 45%,
        rgba(26, 21, 18, 0.08) 100%),
      linear-gradient(to top,
        rgba(26, 21, 18, 0.62) 0%,
        rgba(26, 21, 18, 0) 66%);
  }
  .sht-listing__hero-title { font-size: clamp(24px, 5.4vw + 8px, 34px); }
  .sht-listing__hero-tagline {
    /* En mobile la phrase NE tient pas sur une ligne : on leve le nowrap
       (sinon elle deborderait) et on la borne a 2 lignes. */
    white-space: normal;
    font-size: 15px;
    max-width: 34ch;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LA CASA DE AROMA — blog de la boutique
   ══════════════════════════════════════════════════════════════════════════ */
.sht-blog__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}
.sht-blog__nav-link {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sht-blog__nav-link.is-active,
.sht-blog__nav-link:hover { color: var(--color-accent-ink); }

/* État vide : centré sous le chapô, pas collé au bord gauche. */
.sht-blog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding-block: var(--space-6) var(--space-8);
}
.sht-blog__empty-title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: clamp(19px, 16px + 0.7vw, 24px);
  color: var(--color-text);
}
.sht-blog__empty-text { margin: 0; color: var(--color-text-muted); }

/* Billet mis en avant */
.sht-blog__featured {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  color: var(--color-text);
}
@media (min-width: 900px) {
  .sht-blog__featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.sht-blog__featured-media {
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius-lg);
  background: linear-gradient(to bottom, var(--color-surface-alt) 0%, var(--color-surface) 100%);
}
.sht-blog__featured-media img { display: block; width: 100%; height: auto; }
.sht-blog__featured-body { display: block; }
.sht-blog__featured-title {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-family-heading);
  font-size: clamp(22px, 18px + 1.1vw, 32px);
  line-height: 1.2;
}
.sht-blog__featured-excerpt {
  display: block;
  margin-block-start: var(--space-3);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.sht-blog__date {
  display: block;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.sht-blog__more {
  display: inline-block;
  margin-block-start: var(--space-4);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
  border-block-end: 1px solid currentColor;
}

/* Grille */
.sht-blog__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
@media (min-width: 640px)  { .sht-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sht-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sht-blog__card { display: block; color: var(--color-text); }
.sht-blog__card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: linear-gradient(to bottom, var(--color-surface-alt) 0%, var(--color-surface) 100%);
}
.sht-blog__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sht-blog__card-body { display: block; padding-block-start: var(--space-3); }
.sht-blog__card-title {
  display: block;
  margin-block-start: var(--space-1);
  font-family: var(--font-family-heading);
  font-size: 18px;
  line-height: 1.3;
}
.sht-blog__card:hover .sht-blog__card-title { color: var(--color-accent-ink); }

/* Page blog SANS article : l'en-tête et le bloc vide sont deux sections
   distinctes, leurs paddings se cumulaient et creusaient ~200px de vide entre
   le chapô et le message. On les rapproche tant qu'il n'y a rien à afficher. */
.sht-blog__head { padding-block-end: 0; }
.sht-blog__head + .sws-section { padding-block-start: var(--space-5); }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE /offres — habillage ShahdTouch
   La vue partagee (_common/promo/offres.tpl) stylait tout en INLINE, en dur :
   un rouge vif, un noir, des pastilles totalement arrondies. Le theme pose sa vue
   (promo/offres.tpl) et tout le style vit ici, aux tokens de la boutique.
   ══════════════════════════════════════════════════════════════════════════ */
.sht-offers__head { padding-block-end: 0; }

/* Banniere « toute la boutique » : miel, pas rouge vif. */
.sht-offers__banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  border-radius: var(--border-radius-lg);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}
.sht-offers__banner-badge {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sht-offers__banner-body { display: flex; flex-direction: column; gap: 2px; }
.sht-offers__banner-title {
  font-family: var(--font-family-heading);
  font-size: clamp(18px, 15px + 0.7vw, 23px);
  color: var(--color-text);
}
.sht-offers__banner-end { font-size: 13px; color: var(--color-text-muted); }

/* Filtres : chips sobres, angles du theme — pas des pastilles noires. */
.sht-offers__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
}
.sht-offers__chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  transition: color var(--transition-base), border-color var(--transition-base),
              background var(--transition-base);
}
.sht-offers__chip:hover {
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}
.sht-offers__chip.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.sht-offers__filters-sep {
  inline-size: 1px;
  block-size: 22px;
  margin-inline: var(--space-2);
  background: var(--color-border);
}

/* Titre de sous-section : lisible, pas un filet dore minuscule. */
.sht-offers__section-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-heading);
  font-size: clamp(20px, 17px + 0.8vw, 26px);
  font-weight: 500;
  color: var(--color-text);
}

/* Offres du moment */
.sht-offers__promos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px)  { .sht-offers__promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sht-offers__promos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sht-offers__promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
}
.sht-offers__promo-badge {
  padding: 4px var(--space-3);
  border-radius: var(--border-radius);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 14px;
  font-weight: 600;
}
.sht-offers__promo-title {
  font-family: var(--font-family-heading);
  font-size: 18px;
  color: var(--color-text);
}
.sht-offers__promo-end { font-size: 13px; color: var(--color-text-muted); }

/* Categories en promotion */
.sht-offers__cats { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sht-offers__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
}
.sht-offers__cat:hover { border-color: var(--color-accent); color: var(--color-accent-ink); }
.sht-offers__cat-media {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.sht-offers__cat-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sht-offers__cat-name { font-size: 15px; }

/* Aucune promotion : message centre + renvoi au catalogue. */
.sht-offers__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding-block: var(--space-6) var(--space-7);
}
.sht-offers__empty-title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: clamp(18px, 16px + 0.6vw, 23px);
  color: var(--color-text);
}
.sht-offers__empty-text { margin: 0; color: var(--color-text-muted); }

/* Page /offres SANS promotion : le titre de section restait aligne a gauche
   face a un message centre, et les paddings de deux sections consecutives
   creusaient un vide sous le bouton. On aligne et on resserre — uniquement
   dans ce cas, la mise en page a gauche reste la bonne des qu il y a une
   grille de produits a lire. */
.sht-offers__section-title:has(+ .sht-offers__empty) { text-align: center; }
.sht-offers__empty { padding-block-end: var(--space-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   SHAHDTOUCH — UN BILLET DE LA CASA DE AROMA (annonce/article/single.tpl)

   Le thème n'avait aucun style d'article : la vue manquait, donc le besoin ne
   s'était jamais présenté. Mesure de lecture : la colonne est bornée à 68ch —
   au-delà, l'œil perd la ligne suivante en revenant à la marge.
   ═══════════════════════════════════════════════════════════════════════════ */

.sht-post { max-width: 72ch; margin-inline: auto; }

.sht-post__head { text-align: center; margin-block-end: var(--space-6); }

.sht-post__cover {
  margin: 0 0 var(--space-6);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}
.sht-post__cover img { display: block; width: 100%; height: auto; }

.sht-post__body { line-height: 1.75; }
.sht-post__body > * + * { margin-block-start: var(--space-4); }
.sht-post__body h2,
.sht-post__body h3 { margin-block-start: var(--space-6); }
.sht-post__body img { max-width: 100%; height: auto; border-radius: var(--border-radius-sm); }
.sht-post__body a { text-decoration: underline; }

/* Les tableaux d'un billet peuvent dépasser la colonne de lecture : ils
   défilent dans leur propre boîte plutôt que d'élargir toute la page. */
.sht-post__body table { display: block; overflow-x: auto; max-width: 100%; }

.sht-post__more {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--color-border);
}
.sht-post__more-list { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.sht-post__more-list li + li { margin-block-start: var(--space-3); }

.sht-post__back { margin-block-start: var(--space-7); text-align: center; }

/* ─── ADN : etats du calcul serveur ─────────────────────────────────────────
   Le classement part sur le reseau : l ecran doit le dire, sinon le visiteur
   voit un ecran fige et reclique. Et les deux avis (budget elargi, accord
   faible) ne sont pas decoratifs — les masquer reviendrait a mentir. */

.sht-adn__loading {
  text-align: center;
  padding-block: var(--space-7);
  color: var(--color-text-muted);
}

.sht-adn__notice {
  margin-block-end: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-accent);
  background: var(--color-surface-alt);
  border-radius: var(--border-radius-sm);
  font-size: 9.375px;
}

/* ═══ shahdtouch/assets/css/utilities.css ═══ */
/* ==========================================================================
   ShahdTouch — utilities.css
   Utilitaires atomiques. Volontairement minimal : une utilitaire n'existe que
   si elle sert au moins deux fois dans le thème.
   ========================================================================== */

.sws-text-center { text-align: center; }
.sws-text-start { text-align: start; }
.sws-text-end { text-align: end; }
.sws-text-muted { color: var(--color-text-muted); }
.sws-text-accent { color: var(--color-accent-ink); }

.sws-mt-3 { margin-block-start: var(--space-3); }
.sws-mt-4 { margin-block-start: var(--space-4); }
.sws-mt-5 { margin-block-start: var(--space-5); }
.sws-mt-6 { margin-block-start: var(--space-6); }
.sws-mt-7 { margin-block-start: var(--space-7); }
.sws-mb-4 { margin-block-end: var(--space-4); }
.sws-mb-5 { margin-block-end: var(--space-5); }
.sws-mb-6 { margin-block-end: var(--space-6); }

.sws-hide { display: none !important; }

@media (max-width: 991px) {
  .sws-hide-mobile { display: none !important; }
}
@media (min-width: 992px) {
  .sws-hide-desktop { display: none !important; }
}

/* Masqué visuellement mais lu par les lecteurs d'écran (PHASE 16). */
.sws-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Verrouille le scroll de la page quand un drawer/modal est ouvert. */
body.sht-no-scroll { overflow: hidden; }

.sws-flex { display: flex; }
.sws-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sws-gap-2 { gap: var(--space-2); }
.sws-gap-3 { gap: var(--space-3); }
.sws-gap-4 { gap: var(--space-4); }

.sws-stack > * + * { margin-block-start: var(--space-4); }

/* ═══ shahdtouch/assets/css/legacy-compat.css — pages partagées (tunnel, compte, Bootstrap 3), reprise dans la feuille du thème comme modern-luxe-v4 (H1 O2 lot 2) ═══ */
/**
 * ShahdTouch — legacy-compat.css
 * Deux rôles, dans cet ordre :
 *   1. aligner la stack partagée /theme/base/ (bootstrap3, toastr, select2,
 *      star-rating, slick) sur les tokens du thème ;
 *   2. habiller les pages héritées de front/theme/_common/ (checkout, adresses,
 *      espace client) qui ne sont PAS re-déclinées par le thème.
 *
 * PHASE 10 — le checkout garde sa logique métier _common intacte : on ne touche
 * qu'à la présentation, via des sélecteurs génériques (.btn, .form-control) déjà
 * portés par ce markup. Aucun override de comportement, aucun !important sauf
 * là où Bootstrap 3 impose une spécificité supérieure.
 * Chargé en DERNIER des 7 CSS du thème.
 */

/* ── Bootstrap 3 : arrondis/ombres neutralisés (aspect éditorial net) ───────── */
.btn, .form-control, .panel, .well, .input-group-addon {
  border-radius: var(--border-radius-sm) !important;
}
.form-control {
  box-shadow: none;
  border-color: var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
}
.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--sht-accent-14);
}

/* Boutons Bootstrap → langage visuel du thème */
.btn {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  transition: background var(--transition-base), border-color var(--transition-base);
}
.btn-primary, .btn-success {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-on-primary);
}
.btn-default {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn-default:hover, .btn-default:focus {
  background: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn-link { color: var(--color-accent-ink); }

/* Panels / wells / thumbnails partagés */
.panel, .well, .thumbnail {
  background: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: none;
}
.panel-heading {
  background: var(--color-surface-alt);
  border-block-end-color: var(--color-border);
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
}
.panel-title { font-family: var(--font-family-base); font-size: var(--font-size-sm); }

/* Tables partagées (commandes, adresses, récap checkout) */
.table > thead > tr > th {
  border-block-end-color: var(--color-border);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-base);
}
.table > tbody > tr > td { border-block-start-color: var(--color-border); }
.table-hover > tbody > tr:hover { background: var(--color-surface-alt); }

/* Alertes / labels Bootstrap */
.alert {
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  border-inline-start-width: 3px;
  background: var(--color-surface);
  color: var(--color-text);
}
.alert-success { border-inline-start-color: var(--color-success); }
.alert-danger, .alert-error { border-inline-start-color: var(--color-danger); }
.alert-info { border-inline-start-color: var(--color-accent); }
.alert-warning { border-inline-start-color: var(--color-warning); }

.label-primary, .badge { background: var(--color-accent); color: var(--color-on-accent); }

/* Pagination partagée */
.pagination > li > a, .pagination > li > span {
  color: var(--color-text);
  border-color: var(--color-border);
  background: var(--color-surface);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Titres des pages _common : reprendre la serif éditoriale */
.pagetitle, .page-title, .page-header {
  font-family: var(--font-family-heading);
  color: var(--color-text);
  border-block-end-color: var(--color-border);
}

/* ── Checkout / tunnel (_common) ────────────────────────────────────────────── */
/* Structure conservée : on habille uniquement. */
.checkout-step, .checkout-box, .payment-method, .shipping-method {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}
.payment-method.active, .shipping-method.active,
.payment-method.selected, .shipping-method.selected {
  border-color: var(--color-accent);
}
.checkout-total, .order-total {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* ── Bibliothèques tierces ─────────────────────────────────────────────────── */

/* Toastr */
#toast-container > .toast {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
  opacity: 1;
}
#toast-container > .toast-success { background-color: var(--color-success); }
#toast-container > .toast-error { background-color: var(--color-danger); }
#toast-container > .toast-info { background-color: var(--color-secondary); }
#toast-container > .toast-warning { background-color: var(--color-warning); }

/* Select2 v3 (devise, langue, filtres) */
.select2-container .select2-choice {
  border-radius: var(--border-radius-sm);
  border-color: var(--color-border);
  background: var(--color-surface);
  height: auto;
  padding: 6px 10px;
  color: var(--color-text);
}
.select2-drop {
  border-color: var(--color-border);
  border-radius: var(--border-radius-sm);
  background: var(--color-surface);
}
.select2-results .select2-highlighted { background: var(--color-primary); color: var(--color-on-primary); }

/* Star-rating → or */
.star-rating .star.rating-input, .rating .star, .rating-stars .star,
.rating-symbol-filled, .star-rating .filled-stars { color: var(--color-accent); }

/* Slick (utilisé par certains widgets partagés) */
.slick-dots li button:before { color: var(--color-border-strong); opacity: 1; }
.slick-dots li.slick-active button:before { color: var(--color-accent-ink); }
.slick-prev:before, .slick-next:before { color: var(--color-text); }

/* Modale vue rapide (#quickproductview — contrat base.js, structure intacte) */
.modal-content {
  border-radius: var(--border-radius);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
}
.modal-header { border-block-end-color: var(--color-border); }
.modal-footer { border-block-start-color: var(--color-border); }

/* jQuery UI (slider de prix des facettes) */
.ui-slider { background: var(--color-border); border: 0; height: 3px; }
.ui-slider .ui-slider-range { background: var(--color-accent); }
.ui-slider .ui-slider-handle {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  width: 16px;
  height: 16px;
  top: -7px;
}

/* ── Garde-fou responsive : aucun débordement horizontal hérité (PHASE 15) ─── */
.table-responsive { border: 0; }
img, table, pre { max-width: 100%; }