/*
Theme Name: Saponis — Apothicaire
Theme URI: https://saponis.ch/
Author: Eric D — Realisons Brand Studio
Author URI: https://app.realisons.com/
Description: Thème blocs WordPress natif (FSE) pour la savonnerie artisanale Saponis (Lausanne). Direction artistique « Apothicaire » : crème & encre, terracotta signature, sérif Cormorant Garamond. Aucun builder propriétaire, marquee et emblème animés en CSS pur.
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.4
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saponis
Tags: full-site-editing, block-patterns, custom-colors, custom-menu, e-commerce, one-column, two-columns, editor-style, threaded-comments
*/

/* =====================================================================
   SAPONIS — Apothicaire
   Tout le CSS structurel & présentation. Les couleurs/polices viennent
   EXCLUSIVEMENT des presets theme.json (var(--wp--preset--*)).
   Couleurs hors-palette du maquette reconstruites par color-mix() sur
   les tokens, jamais hardcodées.
   ===================================================================== */

:root {
  --sap-maxw: 1240px;
  --sap-gutter: clamp(1.25rem, 5vw, 2.5rem);
  --sap-border: color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
  --sap-border-strong: color-mix(in srgb, var(--wp--preset--color--ink) 25%, transparent);
  --sap-ink-deep: color-mix(in srgb, var(--wp--preset--color--ink) 88%, #000);   /* ~#4a443c texte long */
  --sap-cream-soft: color-mix(in srgb, var(--wp--preset--color--cream) 70%, #fff); /* ~#F6F0E5 drawer */
  --sap-on-dark: color-mix(in srgb, var(--wp--preset--color--cream) 90%, var(--wp--preset--color--ink-mute)); /* ~#cabfae */
  --sap-on-dark-soft: color-mix(in srgb, var(--wp--preset--color--cream) 60%, var(--wp--preset--color--ink-mute)); /* ~#9c9183 */
  --sap-terracotta-light: color-mix(in srgb, var(--wp--preset--color--terracotta) 70%, var(--wp--preset--color--cream)); /* ~#D89177 sur sombre */
}

/* ---------- Base / réinitialisation douce ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--wp--preset--color--terracotta); color: var(--wp--preset--color--cream); }

a { color: inherit; }

/* Largeur de contenu cohérente avec layout.contentSize */
.bs-container,
.sap-wrap {
  width: 100%;
  max-width: var(--sap-maxw);
  margin-inline: auto;
  padding-inline: var(--sap-gutter);
}

/* =====================================================================
   PAGE & SECTION WRAPPERS
   ===================================================================== */
.bs-page { display: block; }

/* Bandes pleine largeur JOINTIVES : on annule le blockGap qui laissait un filet
   crème entre les sections (visible entre deux bandes colorées) et avant le
   footer. Le rythme vient uniquement du padding interne de chaque section. */
.bs-section { position: relative; margin-block: 0; }
.sap-main,
.sap-main > *,
.bs-page > * { margin-block: 0; }
/* racine : header / main / footer jointifs (le footer = template-part wrappé,
   d'où le ciblage du conteneur racine plutôt que .sap-footer seul) */
.wp-site-blocks > * { margin-block-start: 0 !important; }
.bs-section > .sap-wrap { padding-block: clamp(2.25rem, 3.5vw, 3.25rem); }

/* HAUTEUR ÉGALE — les groupes de blocs WP ne s'étirent pas dans une grille
   (align-items:stretch est ignoré) → on force height:100% sur chaque carte
   pour que les cartes d'une même rangée soient alignées (bas + boutons). */
.sap-gamme-card,
.sap-product-card,
.sap-step,
.sap-value,
.sap-stat,
.sap-contact-card,
li.wc-block-product { height: 100%; }

/* Variantes de fond de section partagées */
.sap-section-sage {
  background: var(--wp--preset--color--sage);
  color: color-mix(in srgb, var(--wp--preset--color--cream) 94%, #fff);
}
.sap-section-sage :where(h1,h2,h3,h4,p,em) { color: inherit; }

.sap-section-dark {
  background: var(--wp--preset--color--dark);
  color: var(--sap-on-dark);
}
.sap-section-dark :where(h1,h2,h3,h4) { color: color-mix(in srgb, var(--wp--preset--color--cream) 92%, #fff); }

.sap-section-terracotta {
  background: var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--cream);
}
.sap-section-terracotta :where(h1,h2,h3,h4,p) { color: inherit; }

/* =====================================================================
   ÉLÉMENTS TYPOGRAPHIQUES PARTAGÉS
   ===================================================================== */
.sap-eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .75rem;
  font-weight: 600;
  color: var(--wp--preset--color--terracotta);
  margin: 0 0 1rem;
  line-height: 1.4;
}
.sap-section-sage .sap-eyebrow,
.sap-section-dark .sap-eyebrow { color: var(--sap-terracotta-light); }

.sap-quote {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 1.875rem);
  line-height: 1.4;
  margin: 0;
}

.sap-rule {
  border: 0;
  border-top: 1px solid var(--sap-border);
  margin: 0;
}

/* =====================================================================
   BOUTONS
   ===================================================================== */
/* Les classes .sap-btn / .sap-btn-outline sont posées par Gutenberg sur le
   wrapper .wp-block-button ; on style donc le lien interne .wp-block-button__link.
   On garde aussi le cas d'un <a class="sap-btn"> direct. */
.sap-btn .wp-block-button__link, a.sap-btn,
.sap-btn-outline .wp-block-button__link, a.sap-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--wp--preset--font-family--body);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1;
  padding: 1rem 1.85rem;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.sap-btn .wp-block-button__link, a.sap-btn {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  border-color: var(--wp--preset--color--ink);
}
.sap-btn .wp-block-button__link:hover, a.sap-btn:hover { background: var(--wp--preset--color--terracotta); border-color: var(--wp--preset--color--terracotta); color: var(--wp--preset--color--cream); }

.sap-btn-outline .wp-block-button__link, a.sap-btn-outline {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border-color: var(--sap-border-strong);
}
.sap-btn-outline .wp-block-button__link:hover, a.sap-btn-outline:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); }

/* boutons posés sur fond sombre / terracotta */
.sap-section-dark .sap-btn .wp-block-button__link,
.sap-section-terracotta .sap-btn .wp-block-button__link { background: var(--wp--preset--color--terracotta); border-color: var(--wp--preset--color--terracotta); }
.sap-section-dark .sap-btn .wp-block-button__link:hover,
.sap-section-terracotta .sap-btn .wp-block-button__link:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); }
.sap-section-dark .sap-btn-outline .wp-block-button__link,
.sap-section-terracotta .sap-btn-outline .wp-block-button__link {
  color: var(--wp--preset--color--cream);
  border-color: color-mix(in srgb, var(--wp--preset--color--cream) 35%, transparent);
}
.sap-section-dark .sap-btn-outline .wp-block-button__link:hover,
.sap-section-terracotta .sap-btn-outline .wp-block-button__link:hover { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); }

/* Harmonise tous les core/button (templates + contenu) */
.wp-block-button__link {
  border-radius: 0 !important;
  letter-spacing: .04em;
  padding: 1rem 1.75rem;
  transition: background .25s ease, color .25s ease;
}

/* =====================================================================
   HEADER — sticky translucide
   ===================================================================== */
.sap-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--wp--preset--color--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}
.sap-header__inner {
  max-width: var(--sap-maxw);
  margin-inline: auto;
  padding: 0 var(--sap-gutter);
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.sap-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.sap-brand img { height: 26px; width: auto; }
.sap-brand .sap-brand__word {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink);
  line-height: 1;
}

/* Navigation */
.sap-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.sap-nav .wp-block-navigation__container,
.sap-nav ul {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sap-nav-link,
.sap-nav a {
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-soft);
  text-decoration: none;
  transition: color .2s ease;
  line-height: 1;
}
.sap-nav-link:hover,
.sap-nav a:hover { color: var(--wp--preset--color--terracotta); }
.sap-nav-link.is-cta,
.sap-nav .is-cta a { color: var(--wp--preset--color--ink); font-weight: 600; }

.sap-header__aside { display: flex; align-items: center; gap: 1.125rem; flex: none; }
.sap-phone { font-size: .8125rem; letter-spacing: .05em; color: var(--wp--preset--color--ink-soft); white-space: nowrap; margin: 0; }
.sap-phone a { color: inherit; text-decoration: none; }
.sap-phone a:hover { color: var(--wp--preset--color--terracotta); }

/* Bouton Panier — pilule outline (le wrapper .wp-block-button porte .sap-cart-btn) */
.sap-cart-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid var(--sap-border-strong);
  border-radius: 40px !important;
  padding: .5rem 1.15rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.sap-cart-btn .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--ink);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
}
.sap-cart-count {
  background: var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--cream);
  border-radius: 40px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 600;
  padding: 0 5px;
}

/* Menu mobile natif — bloc Navigation core, overlayMenu:"mobile".
   Le hamburger et l'overlay sont gérés par WordPress ; on ne fait que les habiller. */
.sap-nav .wp-block-navigation__responsive-container-open,
.sap-nav .wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--ink);
}
.sap-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--cream);
  padding: clamp(2rem, 8vw, 4rem) var(--sap-gutter);
}
.sap-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
}
.sap-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
}
.sap-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.75rem;
  letter-spacing: .01em;
  text-transform: none;
  padding: .45rem 0;
}
.sap-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-cta a {
  color: var(--wp--preset--color--terracotta);
}

/* =====================================================================
   HERO — 2 colonnes
   ===================================================================== */
.sap-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 560px;
  position: relative;
}
.sap-hero__body {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sap-hero__body > * { margin-block: 0; }
.sap-hero__body h1 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0 0 1.5rem;
}
.sap-hero__lead {
  font-size: 1.0625rem;
  color: var(--wp--preset--color--ink-soft);
  max-width: 470px;
  margin: 0 0 1.75rem;
}
.sap-hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin: 0; }

.sap-hero-media {
  background: var(--wp--preset--color--dark);
  overflow: visible;        /* l'emblème déborde à gauche sans être rogné */
  position: relative;
  min-height: 360px;
}
/* Gutenberg pose la classe sur <figure>, l'image est .sap-hero-media__photo img */
.sap-hero-media .sap-hero-media__photo {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;         /* clip du zoom-survol (déplacé depuis .sap-hero-media) */
}
.sap-hero-media .sap-hero-media__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.sap-hero-media:hover .sap-hero-media__photo img { transform: scale(1.06); }

/* Emblème tournant (CSS animation) — <figure> dans .sap-hero-media, posé sur
   son bord gauche = césure des colonnes : moitié crème / moitié photo. Le clip
   du zoom est déplacé sur .sap-hero-media__photo pour ne JAMAIS rogner l'emblème. */
.sap-emblem {
  position: absolute;
  left: 0;              /* bord gauche de la média = césure des deux colonnes */
  top: 50%;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--wp--preset--color--cream);
  padding: 12px;
  box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--wp--preset--color--dark) 55%, transparent);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}
.sap-emblem img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }

@keyframes sapSpin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* =====================================================================
   TICKER / MARQUEE terracotta (CSS @keyframes)
   ===================================================================== */
.sap-ticker {
  background: var(--wp--preset--color--terracotta);
  color: color-mix(in srgb, var(--wp--preset--color--cream) 96%, #fff);
  overflow: hidden;
}
.sap-ticker__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  white-space: nowrap;
  gap: 0;
  align-items: center;
  animation: sapMarquee 36s linear infinite;
  will-change: transform;
}
/* deux paragraphes identiques côte à côte = boucle continue à -50% */
.sap-ticker__group {
  flex: 0 0 auto;
  margin: 0;
  padding: 15px 0;
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-size: 1.3125rem;
  line-height: 1.2;
}

@keyframes sapMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sap-ticker__track { animation: none; }
  .sap-emblem { animation: none; }
}

/* =====================================================================
   GAMMES — cartes
   ===================================================================== */
.sap-gamme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.625rem;
}
.sap-gamme-card {
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--sap-border);
  text-decoration: none;
  color: inherit;
  display: block;
  overflow: hidden;
}
.sap-gamme-card > * { margin-block: 0; }
.sap-gamme-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--wp--preset--color--dark);
}
.sap-gamme-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.sap-gamme-card:hover .sap-gamme-card__media img { transform: scale(1.06); }
.sap-gamme-card__body { padding: 1.625rem 1.625rem 1.875rem; }
.sap-gamme-card__body > * { margin-block: 0; }
.sap-gamme-card__count {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .6875rem;
  color: var(--wp--preset--color--terracotta);
  font-weight: 600;
  margin: 0 0 .625rem;
}
.sap-gamme-card__body h3 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.6875rem;
  margin: 0 0 .5rem;
  line-height: 1.15;
}
.sap-gamme-card__body p { font-size: .90625rem; color: var(--wp--preset--color--ink-soft); margin: 0; }

/* En-tête de section avec lien "tout voir" */
.sap-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.sap-section-head h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  margin: 0;
}
.sap-section-head__link {
  margin: 0;
  font-size: .875rem;
  letter-spacing: .05em;
  white-space: nowrap;
}
.sap-section-head__link a {
  color: var(--wp--preset--color--terracotta);
  border-bottom: 1px solid var(--wp--preset--color--terracotta);
  padding-bottom: 2px;
  text-decoration: none;
}

/* =====================================================================
   PRODUITS — grille & cartes
   ===================================================================== */
.sap-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.375rem;
}
.sap-product-grid.is-cols-3 { grid-template-columns: repeat(3, 1fr); }

.sap-product-card {
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--sap-border);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sap-product-card > * { margin-block: 0; }
.sap-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--wp--preset--color--dark) 55%, transparent);
}
.sap-product-media {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--wp--preset--color--dark);
  position: relative;
}
.sap-product-media.is-ratio-3-2 { aspect-ratio: 3 / 2; }
.sap-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.sap-product-card:hover .sap-product-media img { transform: scale(1.06); }
.sap-product-card__body {
  padding: 1.125rem 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sap-product-card__body > * { margin-block: 0; }
.sap-product-card__cat {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .65625rem;
  color: var(--wp--preset--color--ink-mute);
  margin: 0 0 .4375rem;
}
.sap-product-card__body h3 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.3125rem;
  margin: 0 0 .625rem;
  line-height: 1.15;
}
.sap-product-card__desc {
  font-size: .8125rem;
  color: var(--wp--preset--color--ink-mute);
  margin: 0 0 .875rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sap-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
}
.sap-product-card__foot > * { margin-block: 0; }
.sap-product-actions { margin: 0; }
.sap-price { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--wp--preset--color--ink); }

/* .sap-add-btn est posé sur le wrapper .wp-block-button : on style le lien interne */
.sap-add-btn .wp-block-button__link,
a.sap-add-btn {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  border: none;
  padding: .5625rem .9375rem;
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .25s ease;
}
.sap-add-btn .wp-block-button__link:hover,
a.sap-add-btn:hover { background: var(--wp--preset--color--terracotta); }

/* Chips de filtre boutique */
.sap-chips {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--sap-border);
  padding-bottom: 1.375rem;
}
.sap-chip {
  background: none;
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .04em;
  padding: .5625rem 1.125rem;
  cursor: pointer;
  border-radius: 40px;
  border: 1px solid var(--sap-border-strong);
  color: var(--wp--preset--color--ink-soft);
  text-decoration: none;
  transition: all .2s ease;
}
.sap-chip:hover { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.sap-chip.is-active {
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  border-color: var(--wp--preset--color--ink);
}
/* Chips au-dessus de la grille boutique WooCommerce (v2) */
.woocommerce .sap-shop-chips {
  justify-content: center;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0 0 2rem;
}

/* =====================================================================
   STATS (bandeau chiffres) & STAT unitaire
   ===================================================================== */
.sap-stats {
  border-top: 1px solid var(--sap-border);
  border-bottom: 1px solid var(--sap-border);
}
.sap-stats__inner {
  max-width: var(--sap-maxw);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 2.75rem) var(--sap-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(2.25rem, 6vw, 5.5rem);
}
.sap-stat {
  padding: 0;
  border: 0;
  flex: 0 0 auto;          /* largeur = contenu, plus de cellules vides */
}
.sap-stat__num {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(2.75rem, 4.5vw, 3.75rem);  /* nettement plus grand */
  line-height: .9;
  color: var(--wp--preset--color--ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.sap-stat__num sup, .sap-stat__num .sap-stat__unit {
  font-size: .42em;
  vertical-align: top;
  margin-left: .04em;
}
.sap-stat__label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--wp--preset--color--ink-mute);
  margin-top: .55rem;
}

/* =====================================================================
   STEPS — savoir-faire (4 étapes)
   ===================================================================== */
.sap-savoirfaire {
  border-top: 1px solid var(--sap-border);
  padding-top: 2.25rem;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 3.5rem;
  align-items: start;
}
.sap-savoirfaire > * { margin-block: 0; }
.sap-savoirfaire__intro > * { margin-block: 0; }
.sap-savoirfaire__intro .sap-eyebrow { margin-bottom: 1.125rem; }
.sap-savoirfaire__intro h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.12;
  margin: 0 0 1rem;
}
.sap-savoirfaire__intro p { font-size: .96875rem; color: var(--wp--preset--color--ink-soft); margin: 0; }

.sap-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.sap-step {
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--sap-border);
  padding: 1.75rem;
}
.sap-step > * { margin-block: 0; }
.sap-step__num {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.875rem;
  color: var(--wp--preset--color--terracotta);
  line-height: 1;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.sap-step__title { font-weight: 600; margin: .625rem 0 .375rem; font-size: 1rem; }
/* description = paragraphe sans classe (num/title sont classés) */
.sap-step p:not([class]) { margin: 0; font-size: .875rem; color: var(--wp--preset--color--ink-soft); }

/* =====================================================================
   VALUES — 4 valeurs (sur terracotta)
   ===================================================================== */
.sap-values {
  max-width: var(--sap-maxw);
  margin-inline: auto;
  padding-inline: var(--sap-gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.sap-values > * { margin-block: 0; }
.sap-value {
  padding: 3.25rem 1.875rem;
  border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 22%, transparent);
}
.sap-value > * { margin-block: 0; }
.sap-value:first-child { padding-left: 0; }
.sap-value:last-child { border-right: 0; padding-right: 0; }
.sap-value__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: 1.625rem;
  margin: 0 0 .5625rem;
}
.sap-value p:not([class]) { margin: 0; font-size: .875rem; color: color-mix(in srgb, var(--wp--preset--color--cream) 82%, var(--wp--preset--color--terracotta)); }

/* =====================================================================
   BLOC CITATION / ORIGINE (centré, sur sauge)
   ===================================================================== */
.sap-centered { max-width: 1000px; margin-inline: auto; text-align: center; }
.sap-centered > * { margin-block: 0; }
.sap-centered .sap-eyebrow { margin: 0 auto 1.5rem; }
.sap-centered .sap-quote { max-width: 760px; margin-inline: auto; }
.sap-centered .wp-block-buttons { justify-content: center; margin-top: 1.75rem; }
.sap-centered__cap {
  font-size: .875rem;
  margin: 1.5rem auto 0;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--wp--preset--color--cream) 85%, var(--wp--preset--color--sage));
}

/* =====================================================================
   FONDATRICE / MEDIA-TEXT 2 colonnes (générique)
   ===================================================================== */
.sap-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.75rem;
  align-items: center;
}
.sap-split--reverse { grid-template-columns: 1.05fr 1fr; }
.sap-split > * { margin-block: 0; }
.sap-split__media {
  background: var(--wp--preset--color--dark);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.sap-split__media { margin: 0; }
.sap-split__media .wp-block-image,
.sap-split__media figure { margin: 0; height: 100%; }
.sap-split__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.sap-split__media:hover img { transform: scale(1.06); }
.sap-split__body > * { margin-block: 0; }
.sap-split__body h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.625rem);
  line-height: 1.1;
  margin: 0 0 1.375rem;
}
.sap-split__body p:not([class]) { font-size: 1rem; color: var(--wp--preset--color--ink-soft); margin: 0 0 1rem; }
.sap-split__body p:not([class]):last-child { margin-bottom: 0; }

/* =====================================================================
   SECTION SÉLECTION — fond crème profond + filets (proto #EAE2D3)
   ===================================================================== */
.sap-section-surface {
  background: var(--wp--preset--color--surface-3);
  border-top: 1px solid var(--sap-border);
  border-bottom: 1px solid var(--sap-border);
}

/* =====================================================================
   TEASER FLEURS DU MALT — fond sombre + image de fond en cover
   ===================================================================== */
.sap-teaser { position: relative; overflow: hidden; }
/* image de fond : figure posée en absolu, sur toute la section */
.sap-teaser .sap-teaser__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.sap-teaser .sap-teaser__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
}
.sap-teaser__inner { position: relative; z-index: 1; }
.sap-teaser__content { max-width: 520px; }
.sap-teaser__content > * { margin-block: 0; }
.sap-teaser__content h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 2.875rem);
  line-height: 1.08;
  margin: 0 0 1.125rem;
}
.sap-teaser__content p:not([class]) { font-size: 1rem; color: var(--sap-on-dark); margin: 0 0 1.875rem; }
.sap-teaser__actions { margin: 0; }

/* =====================================================================
   FICHE PRODUIT (single-produit)
   ===================================================================== */
.sap-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.sap-product__media-col { position: sticky; top: 96px; }
/* image en arche d'apothicaire */
.sap-product__arch {
  background: var(--wp--preset--color--dark);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 300px 300px 0 0;
}
.sap-product__arch img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.sap-product__arch:hover img { transform: scale(1.06); }

.sap-product__info { padding-top: .625rem; }
.sap-product__info h1 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.125rem);
  line-height: 1.04;
  margin: 0 0 .875rem;
}
.sap-product__price {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.sap-product__desc {
  font-size: 1.03125rem;
  color: var(--sap-ink-deep);
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 460px;
}
.sap-product__buy {
  display: flex;
  gap: .875rem;
  align-items: stretch;
  margin-bottom: 1.125rem;
  flex-wrap: wrap;
}
.sap-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--sap-border-strong);
}
.sap-qty button {
  background: none; border: none;
  width: 46px; height: 52px;
  font-size: 1.25rem; cursor: pointer;
  color: var(--wp--preset--color--ink);
}
.sap-qty span { width: 42px; text-align: center; font-size: 1rem; font-weight: 600; }
.sap-product__buy .sap-btn { flex: 1; min-width: 200px; }

.sap-product__ship {
  font-size: .8125rem;
  color: var(--wp--preset--color--ink-mute);
  margin-bottom: 2.125rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sap-product__ship .sap-dot { color: var(--wp--preset--color--sage); }

.sap-accordion { border-top: 1px solid var(--sap-border); }
.sap-accordion__item { padding: 1.5rem 0; border-bottom: 1px solid var(--sap-border); }
.sap-accordion__title {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .75rem;
  font-weight: 600;
  margin: 0 0 .625rem;
}
.sap-accordion__item p { margin: 0; font-size: .90625rem; color: var(--wp--preset--color--ink-soft); }

/* lien retour */
.sap-back {
  font-size: .8125rem;
  letter-spacing: .05em;
  color: var(--wp--preset--color--ink-mute);
  text-decoration: none;
}
.sap-back:hover { color: var(--wp--preset--color--terracotta); }

/* encart "note" (huile de palme, savonnerie) */
.sap-note {
  background: var(--wp--preset--color--surface-3);
  border-left: 3px solid var(--wp--preset--color--terracotta);
  padding: 1.75rem 2rem;
}
.sap-note__title { font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; margin-bottom: .625rem; }
.sap-note p { margin: 0; font-size: .96875rem; color: var(--sap-ink-deep); line-height: 1.7; }

/* =====================================================================
   FOOTER — sombre (colonnes natives WordPress)
   ===================================================================== */
.sap-footer {
  background: var(--wp--preset--color--dark);
  color: var(--sap-on-dark);
  padding-block: clamp(2.25rem, 4vw, 3rem) clamp(1.1rem, 2vw, 1.5rem);
}
.sap-footer .sap-footer-cols { gap: clamp(2rem, 4vw, 3rem); margin-bottom: 1.75rem; }

/* Marque (site-title) + accroche */
.sap-footer .wp-block-site-title,
.sap-footer .wp-block-site-title a {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: .04em;
  color: var(--wp--preset--color--cream);
  text-decoration: none;
  margin: 0 0 .6rem;
  line-height: 1.1;
}
.sap-footer p { font-size: .8125rem; color: var(--sap-on-dark-soft); margin: 0; max-width: 290px; line-height: 1.6; }

/* Titres de colonnes — petites capitales (pas de gros sérif) */
.sap-footer h3 {
  font-family: var(--wp--preset--font-family--body);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .6875rem;
  font-weight: 600;
  color: var(--wp--preset--color--ink-mute);
  margin: 0 0 .9rem;
}

/* Liens (navigation verticale + coordonnées) */
.sap-footer a { color: var(--sap-on-dark); text-decoration: none; }
.sap-footer a:hover { color: var(--wp--preset--color--terracotta); }
.sap-footer .wp-block-navigation { font-size: .8125rem; }
.sap-footer .wp-block-navigation__container { gap: .5rem; }

/* Filet + mentions légales */
.sap-footer .sap-rule { border-top: 1px solid color-mix(in srgb, var(--sap-on-dark) 16%, transparent); margin: 0 0 1rem; }
.sap-footer .sap-legal { font-size: .78125rem; color: var(--wp--preset--color--ink-mute); margin: 0; }
.sap-footer .sap-legal a { color: inherit; }
.sap-footer .sap-legal a:hover { color: var(--sap-on-dark); }

/* Infolettre (colonne 4) */
.sap-newsletter {
  display: flex;
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--sap-on-dark) 30%, transparent);
  border-radius: 40px;
  overflow: hidden;
  max-width: 290px;
}
.sap-newsletter input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: .7rem 1rem;
  color: var(--wp--preset--color--cream);
  font: inherit;
  font-size: .8125rem;
  outline: none;
}
.sap-newsletter input::placeholder { color: var(--sap-on-dark-soft); }
.sap-newsletter button {
  background: var(--wp--preset--color--terracotta);
  color: var(--wp--preset--color--cream);
  border: 0;
  padding: 0 1.1rem;
  font: inherit;
  font-size: .8125rem;
  cursor: pointer;
  transition: background .25s ease;
}
.sap-newsletter button:hover { background: color-mix(in srgb, var(--wp--preset--color--terracotta) 80%, #000); }

/* =====================================================================
   PANIER LATÉRAL (facultatif, CSS only — caché par défaut)
   ===================================================================== */
.sap-cart-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 392px; max-width: 92vw;
  background: var(--sap-cream-soft);
  z-index: 1200;
  box-shadow: -30px 0 60px -30px color-mix(in srgb, var(--wp--preset--color--dark) 50%, transparent);
  transform: translateX(105%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1);
  display: flex;
  flex-direction: column;
}
.sap-cart-drawer.is-open { transform: translateX(0); }
.sap-cart-drawer__head {
  padding: 1.5rem 1.625rem;
  border-bottom: 1px solid var(--sap-border);
  display: flex; align-items: center; justify-content: space-between;
}
.sap-cart-drawer__head .sap-cart-title { font-family: var(--wp--preset--font-family--display); font-size: 1.625rem; }
.sap-cart-drawer__body { flex: 1; overflow-y: auto; padding: .5rem 1.625rem; }
.sap-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2.5rem; }

/* =====================================================================
   PAGES DE CONTENU — composants réutilisables (savonnerie, cosmétiques,
   à-propos, contact, fleurs-du-malt). Mêmes tokens que l'accueil.
   ===================================================================== */
/* Pavé d'introduction de page — aligné à gauche comme le reste du site
   (la mise en page constrained centre sinon les enfants à largeur réduite). */
.sap-page-head { max-width: 820px; margin-inline: 0 !important; }
.sap-page-head > * { margin-block: 0; }
.sap-page-head .sap-eyebrow { margin-bottom: 1.1rem; }
.sap-page-head h1 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  margin: 0 0 1.25rem;
}

/* Accroche */
.sap-lead { font-size: 1.0625rem; color: var(--wp--preset--color--ink-soft); max-width: 620px; margin: 0; }
.sap-section-dark .sap-lead { color: var(--sap-on-dark); }

/* Colonne de texte lisible — alignée à gauche */
.sap-prose { max-width: 720px; margin-inline: 0 !important; }
.sap-prose > * { margin-block: 0; }
.sap-prose > * + * { margin-top: 1.1rem; }
.sap-prose h2 {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  margin-top: 2.5rem;
}
.sap-prose > h2:first-child { margin-top: 0; }
.sap-prose p { color: var(--sap-ink-deep); line-height: 1.7; }

/* Image cadrée en pleine largeur de section */
.sap-page-media { margin: 0; overflow: hidden; }
.sap-page-media img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; display: block; }

/* Contact — grille de cartes */
.sap-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.sap-contact-card {
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--sap-border);
  padding: 1.75rem;
}
.sap-contact-card > * { margin-block: 0; }
.sap-contact-card > * + * { margin-top: .5rem; }
.sap-contact-card .sap-eyebrow { margin-bottom: .25rem; }
.sap-contact-card h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.375rem; line-height: 1.2; }
.sap-contact-card a { color: var(--wp--preset--color--terracotta); text-decoration: none; }
.sap-contact-card a:hover { text-decoration: underline; }
.sap-contact-card.sap-section-dark { background: var(--wp--preset--color--dark); border-color: transparent; color: var(--sap-on-dark); }
.sap-contact-card.sap-section-dark a { color: var(--sap-terracotta-light); }

/* Contact — layout asymétrique v2 : colonne infos + grand panneau carte */
.sap-contact-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.25rem; align-items: stretch; }
.sap-contact-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.sap-contact-aside > * { margin-block: 0; }
.sap-contact-map {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border: 1px solid var(--sap-border);
  background:
    repeating-linear-gradient(135deg,
      var(--wp--preset--color--surface-2),
      var(--wp--preset--color--surface-2) 14px,
      var(--wp--preset--color--surface-3) 14px,
      var(--wp--preset--color--surface-3) 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .9rem;
  padding: 2.5rem;
}
.sap-contact-map > * { margin-block: 0; }
.sap-contact-map__dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--wp--preset--color--terracotta);
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--wp--preset--color--terracotta) 22%, transparent);
}
.sap-contact-map h3 { font-family: var(--wp--preset--font-family--display); font-size: 1.625rem; line-height: 1.2; margin: 0; }
.sap-contact-map p { font-size: .9375rem; color: var(--wp--preset--color--ink-soft); margin: 0; }

/* =====================================================================
   WOOCOMMERCE — boutique (archive) + fiche produit (single) + panier.
   Habillage Apothicaire du markup WooCommerce CLASSIQUE.
   ===================================================================== */
/* En-tête boutique */
.woocommerce-breadcrumb {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--ink-mute); margin-bottom: 1.5rem;
}
.woocommerce-breadcrumb a { color: var(--wp--preset--color--terracotta); text-decoration: none; }
.woocommerce-products-header__title.page-title,
.woocommerce .woocommerce-loop-category__title {
  font-family: var(--wp--preset--font-family--display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 .75rem; line-height: 1.1;
}
.woocommerce-result-count { color: var(--wp--preset--color--ink-mute); font-size: .875rem; margin: 0; }
.woocommerce .woocommerce-ordering { margin-bottom: 2rem; }
.woocommerce .woocommerce-ordering select {
  font: inherit; font-size: .8125rem; padding: .5rem .9rem; border-radius: 0;
  border: 1px solid var(--sap-border-strong);
  background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink);
}

/* Grille produits */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.375rem; margin: 0 0 2.5rem; padding: 0; list-style: none;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; padding: 0; float: none !important;
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--sap-border);
  display: flex; flex-direction: column; text-align: left !important;
  transition: transform .35s ease, box-shadow .35s ease;
}
.woocommerce ul.products li.product * { text-align: left; }
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--wp--preset--color--dark) 55%, transparent);
}
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
.woocommerce ul.products li.product img {
  margin: 0; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--wp--preset--color--dark);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display); font-weight: 600;
  font-size: 1.3125rem; line-height: 1.2; padding: 1.125rem 1.125rem 0; margin: 0;
}
.woocommerce ul.products li.product .price {
  padding: .5rem 1.125rem 0; margin: 0; color: var(--wp--preset--color--ink);
  font-weight: 600; font-size: .9375rem; font-family: var(--wp--preset--font-family--body);
}
.woocommerce ul.products li.product .price del { color: var(--wp--preset--color--ink-mute); font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  align-self: flex-start; margin: .875rem 1.125rem 1.25rem; padding: .5625rem .9375rem;
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
  border: none; border-radius: 0; font: inherit; font-size: .8125rem; letter-spacing: .04em;
  text-decoration: none; transition: background .25s ease;
}
.woocommerce ul.products li.product .button:hover { background: var(--wp--preset--color--terracotta); }
.woocommerce ul.products li.product .added_to_cart { margin-top: 0; }

/* Fiche produit (single) — CLASSIQUE uniquement (le template blocs gère sa propre grille) */
.woocommerce div.product:not(.wp-block-group) {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.woocommerce div.product .woocommerce-product-gallery { width: 100% !important; margin: 0; float: none; }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image > a,
.woocommerce div.product .woocommerce-product-gallery img {
  border-radius: 280px 280px 0 0; overflow: hidden; background: var(--wp--preset--color--dark);
}
.woocommerce div.product .summary.entry-summary { margin: 0; }
.woocommerce div.product .product_title.entry-title {
  font-family: var(--wp--preset--font-family--display); font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.05; margin: 0 0 .75rem;
}
.woocommerce div.product .summary .price,
.woocommerce div.product p.price {
  font-size: 1.5rem; font-weight: 600; color: var(--wp--preset--color--ink); margin: 0 0 1.5rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--sap-ink-deep); line-height: 1.7; margin-bottom: 1.75rem; max-width: 460px;
}
.woocommerce div.product form.cart { display: flex; gap: .875rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 1.5rem; }
.woocommerce div.product form.cart .quantity { display: flex; align-items: center; border: 1px solid var(--sap-border-strong); }
.woocommerce .quantity .qty {
  width: 56px; height: 52px; border: none; background: none; text-align: center;
  font: inherit; font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--ink);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1; min-width: 200px; border-radius: 0; border: 1px solid var(--wp--preset--color--ink);
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
  font: inherit; font-size: .95rem; letter-spacing: .05em; font-weight: 500; padding: 1rem 1.85rem;
  transition: background .25s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover { background: var(--wp--preset--color--terracotta); }
.woocommerce div.product .product_meta { font-size: .8125rem; color: var(--wp--preset--color--ink-mute); margin-top: 1.25rem; }

/* Fiche produit BLOCS (template WooCommerce blockifié) — habillage Apothicaire */
.woocommerce div.product.wp-block-group .wp-block-columns { gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.woocommerce div.product.wp-block-group .wp-block-post-title,
.woocommerce div.product.wp-block-group h1.entry-title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 500; font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.05; margin: 0 0 .75rem;
}
.woocommerce div.product.wp-block-group .wc-block-components-product-price { font-size: 1.5rem; font-weight: 600; color: var(--wp--preset--color--ink); }

/* Onglets produit */
.woocommerce div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 2.5rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--sap-border); padding: 0; margin: 0 0 1.5rem; display: flex; gap: 1.75rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none; border: 0; border-radius: 0; padding: 0 0 .7rem; margin: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 600;
  color: var(--wp--preset--color--ink-mute); padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--wp--preset--color--terracotta); }
.woocommerce div.product .woocommerce-Tabs-panel h2 { font-family: var(--wp--preset--font-family--display); font-weight: 500; }

/* Boutons WooCommerce génériques (panier, etc.) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
  border-radius: 0; font: inherit; letter-spacing: .04em; padding: .85rem 1.5rem; transition: background .25s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--wp--preset--color--terracotta); }
.woocommerce .button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--wp--preset--color--terracotta); }
.woocommerce .button.alt:hover, .woocommerce a.button.alt:hover { background: var(--wp--preset--color--ink); }

/* Notices WC */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--wp--preset--color--terracotta);
  background: var(--wp--preset--color--surface-2);
}

/* --- Grille BLOCS (Product Collection : ul.wc-block-product-template) --- */
/* Spécificité ↑ + reset des items pour battre le layout flex WooCommerce
   (.wc-block-product-template.is-flex-container.columns-N → flex avec largeurs forcées). */
ul.wc-block-product-template,
.woocommerce ul.wc-block-product-template.is-flex-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.375rem !important; margin: 0 0 2.5rem; padding: 0; list-style: none;
}
.woocommerce ul.wc-block-product-template.is-flex-container > li.wc-block-product,
ul.wc-block-product-template > li.wc-block-product {
  width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important;
}
li.wc-block-product {
  background: var(--wp--preset--color--surface-2);
  border: 1px solid var(--sap-border);
  margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column;
  transition: transform .35s ease, box-shadow .35s ease;
}
li.wc-block-product:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--wp--preset--color--dark) 55%, transparent);
}
/* image : remplir le carré (par défaut la vignette flotte au centre = "blanc") */
li.wc-block-product .wc-block-components-product-image {
  margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--wp--preset--color--dark);
}
li.wc-block-product .wc-block-components-product-image a { display: block; width: 100%; height: 100%; margin: 0; }
li.wc-block-product .wc-block-components-product-image img {
  width: 100% !important; height: 100% !important; object-fit: cover; margin: 0; max-width: none;
}
/* titre */
li.wc-block-product .wp-block-post-title {
  text-align: left !important; font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600; font-size: 1.3125rem !important; line-height: 1.2;
  padding: 1.125rem 1.125rem 0; margin: 0;
}
li.wc-block-product .wp-block-post-title a { color: inherit; text-decoration: none; }
/* prix */
li.wc-block-product > .has-small-font-size,
li.wc-block-product .wc-block-components-product-price {
  text-align: left !important; padding: .5rem 1.125rem 0; margin: 0;
  color: var(--wp--preset--color--ink); font-weight: 600; font-size: .9375rem !important;
  font-family: var(--wp--preset--font-family--body) !important;
}
/* bouton */
li.wc-block-product .wp-block-button.wc-block-components-product-button {
  align-self: flex-start; margin: auto 1.125rem 1.25rem; text-align: left !important;
}
li.wc-block-product .wc-block-components-product-button .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button a.button {
  background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--cream) !important;
  border: none !important; border-radius: 0 !important; padding: .5625rem .9375rem !important;
  font-size: .8125rem !important; letter-spacing: .04em; font-weight: 500;
}
li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover,
li.wc-block-product .wc-block-components-product-button a.button:hover { background: var(--wp--preset--color--terracotta) !important; }
/* annule le centrage par défaut des blocs internes */
li.wc-block-product .has-text-align-center { text-align: left !important; }
li.wc-block-product .wp-block-button.align-center { justify-content: flex-start; text-align: left; }

/* =====================================================================
   RESPONSIVE — desktop d'abord
   ===================================================================== */
/* Tablette : resserrer la nav et masquer le téléphone pour éviter le chevauchement */
@media (max-width: 1120px) {
  .sap-header__inner { gap: 1rem; }
  .sap-nav .wp-block-navigation__container { gap: 1.15rem; }
  .sap-nav a { font-size: .78125rem; letter-spacing: .035em; }
  .sap-phone { display: none; }
}

@media (max-width: 1000px) {
  .sap-savoirfaire { grid-template-columns: 1fr; gap: 2.25rem; }
}

@media (max-width: 900px) {
  .sap-hero { grid-template-columns: 1fr; }
  .sap-hero-media { min-height: 380px; order: -1; }
  .sap-emblem { display: none; } /* décoratif : masqué une fois les colonnes empilées */
  .sap-product-grid { grid-template-columns: repeat(2, 1fr); }
  .sap-product-grid.is-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .sap-gamme-grid { grid-template-columns: repeat(2, 1fr); }
  .sap-product { grid-template-columns: 1fr; gap: 2.5rem; }
  .sap-product__media-col { position: static; }
  .sap-split, .sap-split--reverse { grid-template-columns: 1fr; gap: 2.25rem; }
  .woocommerce ul.products,
  ul.wc-block-product-template { grid-template-columns: repeat(2, 1fr) !important; }
  .woocommerce div.product:not(.wp-block-group) { grid-template-columns: 1fr; gap: 2rem; }
  .woocommerce div.product .woocommerce-product-gallery__image > a,
  .woocommerce div.product .woocommerce-product-gallery img { border-radius: 200px 200px 0 0; }
  .sap-footer__top { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
  .sap-stats__inner { grid-template-columns: repeat(2, 1fr); }
  .sap-stat:nth-child(2) { border-right: 0; }
  .sap-stat:nth-child(odd) { padding-left: 0; }
  .sap-stat:nth-child(even) { padding-left: 1.5rem; }
  .sap-values { grid-template-columns: repeat(2, 1fr); }
  .sap-value:nth-child(2) { border-right: 0; }
  .sap-value:nth-child(odd) { padding-left: 0; }
  .sap-value:nth-child(even) { padding-right: 0; }

  /* Header compact ; le téléphone vit dans le footer en mobile */
  .sap-header__inner { min-height: 64px; gap: 1rem; }
  .sap-phone { display: none; }
}

@media (max-width: 600px) {
  .sap-product-grid,
  .sap-product-grid.is-cols-3,
  .sap-gamme-grid,
  .sap-contact-grid,
  .woocommerce ul.products { grid-template-columns: 1fr; }
  ul.wc-block-product-template { grid-template-columns: 1fr !important; }
  .sap-footer__top { grid-template-columns: 1fr; }
  .sap-stats__inner,
  .sap-values { grid-template-columns: 1fr; }
  .sap-stat { border-right: 0; padding-left: 0 !important; border-bottom: 1px solid var(--sap-border); }
  .sap-stat:last-child { border-bottom: 0; }
  .sap-value { border-right: 0; padding: 2rem 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--cream) 22%, transparent); }
  .sap-value:last-child { border-bottom: 0; }
  .sap-hero__body { padding: 3rem 1.5rem; }
  .sap-steps { grid-template-columns: 1fr; }
  .sap-product__buy .sap-btn { min-width: 0; }
}

/* =====================================================================
   V2 « DOUCEUR » — passe de fidélité au proto (claude.ai/design)
   Coins arrondis + boutons pilule + bandes sauge claires + héro en arche.
   ===================================================================== */

/* --- Boutons en pilule (proto: radius 40px partout) --- */
.wp-block-button__link,
.sap-btn .wp-block-button__link, a.sap-btn,
.sap-btn-outline .wp-block-button__link, a.sap-btn-outline,
.sap-add-btn .wp-block-button__link, a.sap-add-btn,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .single_add_to_cart_button,
li.wc-block-product .wc-block-components-product-button .wp-block-button__link,
li.wc-block-product .wc-block-components-product-button a.button { border-radius: 40px !important; }

/* --- Cartes & médias arrondis (proto 20–22px) --- */
.sap-product-card, .sap-contact-card, .sap-step, .sap-note,
li.wc-block-product, .woocommerce ul.products li.product { border-radius: 20px; overflow: hidden; }
.sap-gamme-card { border-radius: 22px; }
.sap-contact-map { border-radius: 20px; }
.sap-section-surface { border-top: 0; border-bottom: 0; }

/* --- Bande SAUGE claire (proto: bg #E4E6D7 + texte sombre) ---
   !important pour battre la classe WP has-sage-background-color / has-cream-color. */
.sap-section-sage,
.sap-section-sage.has-sage-background-color {
  background-color: color-mix(in srgb, var(--wp--preset--color--sage) 20%, var(--wp--preset--color--cream)) !important;
  color: color-mix(in srgb, var(--wp--preset--color--ink) 88%, var(--wp--preset--color--sage)) !important;
}
.sap-section-sage :where(h1,h2,h3,h4,p,em) { color: inherit !important; }
.sap-section-sage .sap-eyebrow { color: color-mix(in srgb, var(--wp--preset--color--sage) 60%, var(--wp--preset--color--ink)) !important; }
.sap-section-sage .sap-centered__cap { color: color-mix(in srgb, var(--wp--preset--color--ink) 70%, var(--wp--preset--color--sage)) !important; }

/* --- Images média 2 colonnes : douceur (léger arrondi) --- */
.sap-split__media { border-radius: 24px; }
/* --- Images d'intro de page (savonnerie/cosmétiques) : arrondies aussi --- */
.sap-page-media, .sap-page-media img { border-radius: 24px; }
.sap-page-media { overflow: hidden; }

/* --- HÉRO en arche d'apothicaire (proto exact) --- */
.sap-hero {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  min-height: 600px;
  padding-block: clamp(3rem, 5vw, 4rem);
  padding-inline: max(var(--sap-gutter), calc((100% - var(--sap-maxw)) / 2 + var(--sap-gutter)));
  background: linear-gradient(170deg, var(--wp--preset--color--cream) 0%, var(--wp--preset--color--surface-3) 100%);
}
.sap-hero__body { padding: 0; }
.sap-hero__body .sap-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  background: color-mix(in srgb, #fff 55%, transparent);
  border: 1px solid var(--sap-border);
  border-radius: 40px; padding: .45rem 1rem .45rem .85rem;
  color: var(--wp--preset--color--ink-mute); letter-spacing: .16em; margin-bottom: 1.75rem;
}
.sap-hero__body .sap-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--wp--preset--color--terracotta); flex: none;
}
.sap-hero__body h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); line-height: 1.05; }
.sap-hero-media { background: transparent; overflow: visible; display: flex; align-items: center; justify-content: center; min-height: 0; }
.sap-hero-media .sap-hero-media__photo {
  width: 100%; height: auto; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 280px 280px 26px 26px;
  background: var(--wp--preset--color--surface-3);
  box-shadow: 0 40px 80px -40px color-mix(in srgb, var(--wp--preset--color--dark) 50%, transparent);
}
.sap-emblem {
  left: -26px; bottom: 46px; top: auto; transform: none;
  width: 124px; height: 124px;
}

/* v2 : « et l'âme. » en accent italique terracotta, sur sa propre ligne */
.sap-hero-accent { display: block; font-style: italic; color: var(--wp--preset--color--terracotta); }

/* v2 : en-tête de la section "gammes" centré (la sélection reste alignée à gauche) */
.bs-section-gammes .sap-eyebrow { text-align: center; }
.bs-section-gammes .sap-section-head { flex-direction: column; align-items: center; text-align: center; gap: .4rem; }

/* --- Fiche produit (blocs) : image en arche aussi --- */
.woocommerce div.product.wp-block-group .wp-block-woocommerce-product-image-gallery img,
.woocommerce div.product.wp-block-group .woocommerce-product-gallery__image img {
  border-radius: 280px 280px 26px 26px;
}

@media (max-width: 900px) {
  .sap-hero { grid-template-columns: 1fr; min-height: 0; }
  .sap-hero-media .sap-hero-media__photo { aspect-ratio: 5 / 4; border-radius: 160px 160px 22px 22px; max-width: 460px; margin-inline: auto; }
}