/* @sleaty-echelle : conforme (ThemeLight Boutique 1.0.0) */
/* =========================================================
   THEMELIGHT BOUTIQUE (THÈME ENFANT) — BOUTIQUE (WooCommerce)
   DÉPLACÉ 22/10/2026 (1.0.0) : était theme/assets/css/boutique.css de
   Sleaty Light 3.4.x. Jetons et réglages Style : ceux du thème parent.
   AJOUTÉ 22/10/2026 (3.4.0, ThemeLight E-commerce ; architecture
   _bmad-output/initiative-ecommerce/architecture.md E-1, E-7, E-9 ;
   README du thème enfant ; maquettes Figma ZGOs1YgCrsMZiwfQZJvnVd, page
   « Les Créas de Norah — proposition » et « Composants — e-commerce »).

   Chargée SEULEMENT quand WooCommerce est actif (boutique/woocommerce.php), après
   le socle. Les feuilles de WooCommerce sont retirées : ce fichier met en
   forme SES classes (woocommerce-*, shop_table, products…) — exception
   écrite à la règle « classes de la nomenclature seulement » : on ne
   recopie aucun gabarit de WooCommerce, on habille son HTML — et nos
   classes sl-boutique-*, sl-produit-carte__*, sl-pastille*, sl-panier-lien.
   Uniquement des jetons (aucune couleur en dur ; la teinte d'une pastille
   est une DONNÉE de la couleur, posée en variable --sl-pastille par
   l'extension). Écarts sur l'échelle 0 / 2 / 4 / 8 × n.
   ========================================================= */

/* ---------- Icônes ----------
   AJOUTÉ 22/10/2026 (1.0.0) : la police réduite du parent (97 icônes) n'a
   pas shopping_bag (panier de l'en-tête) ni local_shipping (livraison).
   Même famille, mêmes réglages, déclarée APRÈS celle du parent : c'est
   celle-ci qui sert (les 97 icônes du parent + ces 2 ; refaite par
   scripts/icones-boutique.sh). Le parent n'est pas modifié. */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('icones-boutique.woff2?v=1.0.0') format('woff2');
}

/* ---------- Enveloppe ---------- */
.sl-boutique { padding-block: var(--space-48) var(--space-80); }
.sl-boutique__contenu > * + * { margin-block-start: var(--space-24); }

/* Pages Panier, Commande, Compte (page.php : colonne de lecture élargie). */
.sl-boutique-page .sl-container--texte { max-width: calc(var(--container-max-width) + 2 * var(--space-section-x)); }
.sl-boutique-page .sl-prose { max-width: none; }
.sl-boutique-page .sl-prose :where(table, ul, ol, p) { margin-block: 0; }

.sl-boutique-fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-ink-muted);
  font-size: var(--fs-body-s);
}
.sl-boutique-fil a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.sl-boutique-fil a:hover { color: var(--color-principal); }

.woocommerce-products-header__title,
.sl-boutique .page-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-h1);
  font-weight: var(--titres-graisse, 600);
  line-height: var(--lh-heading);
}
.term-description,
.page-description { max-width: var(--reading-width); color: var(--color-ink-muted); font-size: var(--fs-body-l); }
.term-description > :last-child,
.page-description > :last-child { margin-block-end: 0; }

/* ---------- Filtre par catégorie ---------- */
.sl-boutique-categories ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-boutique-categories a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-control-compact);
  padding: 0 var(--space-16);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-gris-4-border);
  color: var(--color-ink);
  font-size: var(--fs-body-s);
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
}
.sl-boutique-categories a:hover { background: var(--color-surface-chip); }
.sl-boutique-categories a[aria-current] { background: var(--color-pill-dark); box-shadow: none; color: var(--color-ink-inverse); }
.sl-boutique-categories__nombre { font-size: var(--fs-body-xs); opacity: .85; }
.sl-boutique-categories a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-2); }

.woocommerce-result-count { margin: 0; color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { width: auto; min-height: var(--size-control-compact); padding-block: 0; font-size: var(--fs-body-s); }
.sl-boutique--liste .woocommerce-result-count { float: left; padding-block: var(--space-8); margin-block-end: var(--space-24); }
.sl-boutique--liste .woocommerce-ordering { float: right; margin-block-end: var(--space-24); }
.sl-boutique--liste ul.products { clear: both; }

/* ---------- Grille de produits (cartes) ---------- */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-40) var(--space-24);
  margin: 0;
  padding: 0;
  list-style: none;
}
ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.products::before,
ul.products::after { display: none; }
ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  min-width: 0;
}
ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-ink);
  text-decoration: none;
}
ul.products li.product img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  margin: 0 0 var(--space-8);
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-surface-chip);
  transition: scale var(--motion-duration-slow) var(--motion-ease-standard);
}
ul.products li.product a.woocommerce-LoopProduct-link { overflow: visible; }
ul.products li.product a.woocommerce-LoopProduct-link:hover img { scale: 1.02; }
.sl-produit-carte__categorie {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--fs-body-xs);
}
ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body-l);
  font-weight: 500;
  line-height: var(--lh-title-s);
}
ul.products li.product .price { display: block; font-size: var(--fs-body-m); font-weight: 600; }
/* Bouton d'une carte : un lien texte souligné, toujours visible (critique 5). */
ul.products li.product .button {
  align-self: flex-start;
  min-height: var(--size-control-compact);
  margin-block-start: var(--space-4);
  padding: 0;
  background: none;
  color: var(--color-principal);
  font-size: var(--fs-body-s);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  box-shadow: none;
}
ul.products li.product .button::after { content: " →"; }
ul.products li.product .button:hover { color: var(--color-ink); box-shadow: none; }
ul.products li.product .added_to_cart { font-size: var(--fs-body-s); }

/* MODIFIÉ 22/10/2026 (1.3.0, Figma 2008:133 « fait-main » et 2008:130
   « epuise ») : badge en haut à gauche de la photo, à 12 px du bord ;
   pilule 4 / 8 px, 12 px Medium. Variantes : site et « Personnalisable » =
   fond blanc, filet et texte de la couleur principale ; « Nouveau » =
   pareil ; « Promo » = fond principal, texte clair ; « Épuisé » = fond
   gris, texte atténué, et la photo de la carte grisée. */
.onsale,
.sl-produit-carte__badge {
  position: absolute;
  top: calc(var(--space-8) + var(--space-4));
  left: calc(var(--space-8) + var(--space-4));
  z-index: 1;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-surface-page);
  box-shadow: inset 0 0 0 1px var(--color-principal);
  color: var(--color-principal);
  font-size: var(--fs-body-xs);
  font-weight: 500;
  line-height: var(--lh-caption);
  pointer-events: none;
}
.onsale,
.sl-produit-carte__badge--promo { background: var(--color-principal); box-shadow: none; color: var(--color-ink-inverse); }
.sl-produit-carte__badge--epuise { background: var(--color-surface-chip); box-shadow: none; color: var(--color-ink-muted); }
ul.products li.product.sl-produit-carte--epuise img { filter: grayscale(.7) brightness(1.1); }
ul.products li.product.sl-produit-carte--epuise .button { color: var(--color-ink-muted); }

/* ---------- Prix ---------- */
.price { color: var(--color-ink); }
.price del { color: var(--color-ink-muted); font-weight: 400; }
.price ins { text-decoration: none; }

/* ---------- Pagination ---------- */
.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin: var(--space-48) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-compact);
  min-height: var(--size-control-compact);
  padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  text-decoration: none;
}
.woocommerce-pagination .page-numbers.current { background: var(--color-pill-dark); color: var(--color-ink-inverse); }
.woocommerce-pagination a.page-numbers:hover { background: var(--color-surface-chip); }

/* ---------- Boutons de WooCommerce = sl-btn ---------- */
.woocommerce :where(.button, button.button, input.button, a.button),
:where(.single_add_to_cart_button, .checkout-button, #place_order, .woocommerce-button, .wc-forward) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--size-control);
  padding: 0 var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-pill-dark);
  color: var(--color-ink-inverse);
  font-family: var(--font-text);
  font-size: var(--fs-button-m);
  font-weight: 500;
  line-height: var(--lh-button);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--motion-duration-base) var(--motion-ease-standard), scale var(--motion-duration-base) var(--motion-ease-spring);
}
.woocommerce :where(.button, button.button, a.button):hover,
:where(.single_add_to_cart_button, .checkout-button, #place_order):hover { color: var(--color-ink-inverse); box-shadow: var(--shadow-glow); }
.woocommerce :where(.button, button.button, a.button):focus-visible,
:where(.single_add_to_cart_button, .checkout-button, #place_order):focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-2); }
.woocommerce :where(.button, button.button):disabled,
.woocommerce :where(.button.disabled, button.button[disabled]) { opacity: .5; cursor: not-allowed; }
/* Un bouton-lien dans le contenu d'une page (panier vide : « Retour à la
   boutique ») : la couleur des liens de .sl-prose (plus forte que :where)
   le rendait brun sur brun (1:1, mesuré) ; texte clair forcé ici. */
.woocommerce a.button,
.woocommerce a.button:is(:hover, :focus) { color: var(--color-ink-inverse); text-decoration: none; }
/* Boutons secondaires (mettre à jour le panier, appliquer un code). */
.woocommerce :where(button[name="update_cart"], button[name="apply_coupon"], .woocommerce-Button--previous, .woocommerce-Button--next) {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-ink);
  color: var(--color-ink);
}
.woocommerce :where(button[name="update_cart"], button[name="apply_coupon"]):hover { color: var(--color-ink); background: var(--color-surface-chip); }

/* ---------- Messages ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-16);
  margin: 0 0 var(--space-16);
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius);
  background: var(--color-badge-info-bg);
  color: var(--color-badge-info-ink);
  font-size: var(--fs-body-s);
  list-style: none;
}
.woocommerce-message { background: var(--color-badge-ok-bg); color: var(--color-badge-ok-ink); }
.woocommerce-error { flex-direction: column; align-items: flex-start; background: var(--color-badge-danger-bg); color: var(--color-badge-danger-ink); }
.woocommerce-error li { margin: 0; }
:where(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; text-decoration: underline; }
:where(.woocommerce-message, .woocommerce-info) .button {
  order: 2;
  min-height: var(--size-control-compact);
  margin-inline-start: auto;
  font-size: var(--fs-button-s);
}
.woocommerce-store-notice { margin: 0; padding: var(--space-8) var(--space-16); background: var(--color-pill-dark); color: var(--color-ink-inverse); text-align: center; }

/* ---------- Fiche produit ---------- */
.sl-boutique--fiche div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-48) var(--space-64);
  align-items: start;
}
.sl-boutique--fiche div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1 / span 2; }
.sl-boutique--fiche div.product > .summary { grid-column: 2; }
.sl-boutique--fiche div.product > :where(.woocommerce-tabs, .related, .upsells, section) { grid-column: 1 / -1; }

.woocommerce-product-gallery { position: relative; opacity: 1 !important; /* WooCommerce le cache jusqu'à son carrousel, que le thème n'utilise pas (E-9). */ }
.woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-8);
  margin: 0;
}
.woocommerce-product-gallery__image { margin: 0; }
.woocommerce-product-gallery__image:first-child { grid-column: 1 / -1; }
.woocommerce-product-gallery__image a { display: block; border-radius: var(--radius); }
.woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--color-surface-chip);
}
.woocommerce-product-gallery__image:first-child img { aspect-ratio: 1; object-fit: cover; }
.woocommerce-product-gallery__image:not(:first-child) img { aspect-ratio: 1; object-fit: cover; }
.woocommerce-product-gallery__image:not(:first-child) a[aria-current] { box-shadow: 0 0 0 2px var(--color-surface-page), 0 0 0 4px var(--color-principal); }
.woocommerce-product-gallery__image a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-2); }
.woocommerce-product-gallery__trigger { display: none; }

.summary > * + * { margin-block-start: var(--space-16); }
.summary .product_title {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-primary);
  font-size: var(--fs-h2);
  font-weight: var(--titres-graisse, 600);
  line-height: var(--lh-heading);
}
.summary .price { margin-block-start: var(--space-8); font-size: var(--fs-h4); font-weight: 600; }
.woocommerce-product-details__short-description { color: var(--color-ink); font-size: var(--fs-body-m); }
.woocommerce-product-details__short-description > :last-child { margin-block-end: 0; }
.summary .stock { margin: 0; font-size: var(--fs-body-s); font-weight: 600; }
.summary .stock.out-of-stock { color: var(--color-badge-danger-ink); }

form.cart { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-16); margin-block-start: var(--space-24); }
form.cart > .sl-perso { flex: 1 1 100%; }
form.cart .quantity { flex: none; }
form.cart .single_add_to_cart_button { flex: 1 1 240px; min-height: var(--size-control); }
.quantity .qty {
  width: calc(var(--size-control) * 2);
  min-height: var(--size-control);
  padding-inline: var(--space-16);
  text-align: center;
}
.product_meta { color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.product_meta > span { display: block; }
.product_meta a { color: var(--color-ink); }

.sl-boutique-rassurance {
  padding-block-start: var(--space-16);
  border-block-start: 1px solid var(--color-gris-3);
  font-size: var(--fs-body-s);
}

.woocommerce-tabs {
  margin-block-start: var(--space-48);
  padding: var(--space-48) var(--space-section-x);
  border-radius: var(--radius);
  background: var(--color-surface-doux, var(--color-secondaire));
  color: var(--color-surface-doux-ink, var(--color-ink));
}
.woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-24); padding: 0; list-style: none; }
.woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-control-compact);
  padding: 0 var(--space-16);
  border-radius: var(--radius-pill);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a { background: var(--color-surface-card); color: var(--color-ink); }
.woocommerce-tabs ul.tabs:has(li:only-child) { display: none; }
.woocommerce-tabs .panel { max-width: var(--reading-width); margin: 0; }
.woocommerce-tabs .panel > h2:first-child { margin-block-start: 0; font-size: var(--fs-h3); }
.woocommerce-tabs .panel ul { padding-inline-start: var(--space-24); }

section.related,
section.upsells { margin-block-start: var(--space-64); }
section.related > h2,
section.upsells > h2 { margin: 0 0 var(--space-24); font-family: var(--font-primary); font-size: var(--fs-h2); }

/* ---------- Choix des couleurs : pastilles (extension, § 36) ---------- */
.sl-perso { display: flex; flex-direction: column; gap: var(--space-32); }
.sl-pastilles {
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--space-24);
  border: 0;
  border-block-end: 1px solid var(--color-gris-3);
}
.sl-pastilles__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  padding: 0;
  color: var(--color-ink);
  font-size: var(--fs-body-m);
}
.sl-pastilles__titre { font-weight: 600; }
.sl-pastilles__regle { color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.sl-pastilles__compteur {
  display: inline-flex;
  margin: var(--space-8) 0 0;
  padding: var(--space-2) var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--color-surface-chip);
  color: var(--color-ink);
  font-size: var(--fs-body-xs);
  font-weight: 600;
}
.sl-pastilles__compteur:empty { display: none; }
.sl-pastilles.is-complet .sl-pastilles__compteur { background: var(--color-pill-dark); color: var(--color-ink-inverse); }
.sl-pastilles__aide { margin: var(--space-8) 0 0; color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.sl-pastilles__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: var(--space-16) var(--space-8);
  margin: var(--space-16) 0 0;
  padding: 0;
  list-style: none;
}
.sl-pastille { position: relative; margin: 0; min-width: 0; }
/* La case reste dans le flux d'accessibilité (clavier, lecteur d'écran),
   invisible : c'est l'étiquette qui se dessine. */
.sl-pastille__case {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.sl-pastille__etiquette {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  color: var(--color-ink);
  font-size: var(--fs-body-xs);
  font-weight: 400;
  line-height: var(--lh-caption);
  text-align: center;
  cursor: pointer;
}
.sl-pastille__teinte {
  --sl-pastille: var(--color-surface-chip);
  position: relative;
  display: block;
  width: var(--space-48);
  height: var(--space-48);
  overflow: hidden;
  border-radius: var(--radius-round);
  background: var(--sl-pastille);
  box-shadow: inset 0 0 0 1px var(--color-gris-4-border);
  transition: box-shadow var(--motion-duration-base) var(--motion-ease-standard), scale var(--motion-duration-base) var(--motion-ease-spring);
}
.sl-pastille__teinte img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl-pastille__nom { overflow-wrap: break-word; hyphens: auto; }
.sl-pastille__etat { color: var(--color-ink-muted); font-size: var(--fs-body-xs); font-weight: 600; }
.sl-pastille:hover .sl-pastille__teinte { scale: 1.06; }
.sl-pastille__case:focus-visible + .sl-pastille__etiquette .sl-pastille__teinte { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-4); }
.sl-pastille__case:checked + .sl-pastille__etiquette .sl-pastille__teinte {
  box-shadow: 0 0 0 2px var(--color-surface-page), 0 0 0 4px var(--color-principal);
  overflow: visible;
}
.sl-pastille__case:checked + .sl-pastille__etiquette .sl-pastille__teinte img { border-radius: var(--radius-round); }
.sl-pastille__case:checked + .sl-pastille__etiquette .sl-pastille__teinte::after {
  content: "check" / "";
  position: absolute;
  top: calc(-1 * var(--space-4));
  right: calc(-1 * var(--space-4));
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-round);
  background: var(--color-principal);
  color: var(--color-ink-inverse);
  font-family: var(--font-icons);
  font-size: 14px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "GRAD" 0, "opsz" 20, "wght" 600;
}
.sl-pastille__case:checked + .sl-pastille__etiquette .sl-pastille__nom { font-weight: 600; }
/* Épuisée : visible mais grisée, barrée, mot « épuisée » (jamais la couleur seule). */
.sl-pastille--rupture .sl-pastille__case,
.sl-pastille--rupture .sl-pastille__etiquette { cursor: not-allowed; }
.sl-pastille--rupture .sl-pastille__teinte img,
.sl-pastille--rupture .sl-pastille__teinte { opacity: .45; }
.sl-pastille--rupture .sl-pastille__teinte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--color-ink) calc(50% - 1px), var(--color-ink) calc(50% + 1px), transparent calc(50% + 1px));
}
.sl-pastille--rupture .sl-pastille__nom { text-decoration: line-through; }
.sl-pastille--rupture:hover .sl-pastille__teinte,
.sl-pastille__case:disabled + .sl-pastille__etiquette .sl-pastille__teinte { scale: 1; }
.sl-pastilles:not(.is-complet) .sl-pastille__case:disabled:not(:checked) + .sl-pastille__etiquette { cursor: not-allowed; }
.sl-pastilles.is-complet .sl-pastille:not(.sl-pastille--rupture) .sl-pastille__case:disabled + .sl-pastille__etiquette { opacity: .6; cursor: not-allowed; }

/* Catalogue public des couleurs (page « Couleurs »). */
.sl-pastilles--catalogue { padding-block-end: var(--space-32); }
.sl-pastilles--catalogue .sl-pastilles__legende { font-family: var(--font-primary); font-size: var(--fs-h3); }
.sl-pastilles--catalogue .sl-pastilles__liste { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-24) var(--space-16); }
.sl-pastilles--catalogue .sl-pastille__teinte { width: var(--space-80); height: var(--space-80); }
.sl-pastilles--catalogue .sl-pastille__etiquette { cursor: default; font-size: var(--fs-body-s); }
.sl-pastilles--catalogue .sl-pastille:hover .sl-pastille__teinte { scale: 1; }

/* Champs à remplir de la fiche. */
.sl-field__requis { color: var(--color-ink); }
.sl-field--case .sl-field__case { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-ink); font-size: var(--fs-body-s); }
.sl-perso .sl-field__label { color: var(--color-ink); font-size: var(--fs-body-s); font-weight: 600; }

/* ---------- Lien « Panier » de l'en-tête (fragment) ---------- */
.sl-panier-lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--size-control-compact);
  padding: 0 var(--space-16);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--color-gris-4-border);
  color: var(--color-ink);
  font-size: var(--fs-body-s);
  font-weight: 500;
  text-decoration: none;
}
.sl-panier-lien:hover { background: var(--color-surface-chip); }
.sl-panier-lien__nombre {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-pill-dark);
  color: var(--color-ink-inverse);
  font-size: var(--fs-body-xs);
  font-weight: 600;
  line-height: 1;
}

/* ---------- Tableaux (panier, commande, compte) ---------- */
table.shop_table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-s);
}
table.shop_table :where(th, td) {
  padding: var(--space-16) var(--space-8);
  border-block-end: 1px solid var(--color-gris-3);
  text-align: start;
  vertical-align: middle;
}
table.shop_table thead th { color: var(--color-ink-muted); font-size: var(--fs-body-xs); font-weight: 600; }
table.shop_table tfoot :where(th, td) { font-size: var(--fs-body-m); }
table.shop_table .order-total :where(th, td) { font-size: var(--fs-body-l); font-weight: 600; }
.shop_table .product-thumbnail img { display: block; width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius); }
.shop_table .product-name a { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.shop_table .product-name a:hover { text-decoration: underline; }
.shop_table a.remove {
  display: inline-grid;
  place-items: center;
  width: var(--size-control-compact);
  height: var(--size-control-compact);
  border-radius: var(--radius-round);
  color: var(--color-ink);
  font-size: var(--fs-body-l);
  text-decoration: none;
}
.shop_table a.remove:hover { background: var(--color-badge-danger-bg); color: var(--color-badge-danger-ink); }

/* Couleurs et champs choisis, sous l'article (dl.variation / wc-item-meta). */
:where(dl.variation, .wc-item-meta) {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-8);
  margin: var(--space-8) 0 0;
  padding: 0;
  color: var(--color-ink);
  font-size: var(--fs-body-xs);
  list-style: none;
}
dl.variation :where(dt, dd) { margin: 0; }
dl.variation dt { color: var(--color-ink-muted); font-weight: 600; }
dl.variation dd p { margin: 0; }
.wc-item-meta li { display: contents; }
.wc-item-meta .wc-item-meta-label { color: var(--color-ink-muted); font-weight: 600; }
.wc-item-meta p { display: inline; margin: 0; }

.woocommerce-cart-form .actions { padding-block: var(--space-24); }
.woocommerce-cart-form .coupon { display: inline-flex; flex-wrap: wrap; gap: var(--space-8); margin-inline-end: var(--space-16); }
.woocommerce-cart-form .coupon input { width: 220px; min-height: var(--size-control-compact); padding-block: 0; }
.woocommerce-cart-form .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.woocommerce-cart-form button[name="update_cart"] { float: inline-end; }
.cart-collaterals { display: flex; justify-content: flex-end; margin-block-start: var(--space-32); }
.cart_totals {
  width: min(100%, 440px);
  padding: var(--space-24);
  border-radius: var(--radius);
  background: var(--color-surface-chip);
}
.cart_totals h2 { margin: 0 0 var(--space-8); font-size: var(--fs-h4); }
.cart_totals table.shop_table :where(th, td) { padding-inline: 0; }
.cart_totals table.shop_table th { padding-inline-end: var(--space-16); white-space: nowrap; }
.wc-proceed-to-checkout { margin-block-start: var(--space-16); }
.wc-proceed-to-checkout .checkout-button { width: 100%; }
.cart-empty.woocommerce-info { font-size: var(--fs-body-m); }
.return-to-shop { margin-block-start: var(--space-16); }

/* Livraison : choix en liste verticale. */
#shipping_method { margin: 0; padding: 0; list-style: none; }
#shipping_method li { display: flex; align-items: flex-start; gap: var(--space-8); margin-block-end: var(--space-8); }
.woocommerce-shipping-destination,
.woocommerce-shipping-calculator { font-size: var(--fs-body-xs); color: var(--color-ink-muted); }
.shipping-calculator-form { margin-block-start: var(--space-8); }

/* ---------- Commande ---------- */
form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-24) var(--space-64);
  align-items: start;
}
form.checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 3; }
/* AJOUTÉ 23/10/2026 (vu avec Mondial Relay sur Les Créas de Norah, mais vrai pour TOUTE erreur de commande : champ
   manquant, conditions non cochées…) : WooCommerce glisse le message d'erreur en tête du formulaire ; les
   coordonnées occupant les lignes 1 à 3, le message tombait en ligne 4 et poussait « Votre commande » sous le
   formulaire (colonne de droite vide). Avec un message, il prend la ligne 1 et tout descend d'une ligne. Bureau
   seulement (au téléphone, tout est déjà sur une colonne). */
@media (min-width: 1024px) {
  form.checkout:has(> .woocommerce-NoticeGroup) > .woocommerce-NoticeGroup { grid-row: 1; }
  form.checkout:has(> .woocommerce-NoticeGroup) #customer_details { grid-row: 2 / span 3; }
  form.checkout:has(> .woocommerce-NoticeGroup) #order_review_heading { grid-row: 2; }
  form.checkout:has(> .woocommerce-NoticeGroup) #order_review { grid-row: 3; }
}
form.checkout #order_review_heading,
form.checkout #order_review { grid-column: 2; }
form.checkout #order_review_heading { margin: 0; font-size: var(--fs-h4); }
form.checkout #order_review {
  padding: var(--space-24);
  border-radius: var(--radius);
  background: var(--color-surface-chip);
}
.col2-set .col-1 + .col-2 { margin-block-start: var(--space-32); }
.woocommerce :where(.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields) h3 { margin: 0 0 var(--space-16); font-size: var(--fs-h4); }
.woocommerce form :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
}
.woocommerce form .form-row { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; }
.woocommerce form .form-row-wide,
.woocommerce form :where(#billing_country_field, #shipping_country_field, #billing_address_1_field, #shipping_address_1_field, #billing_address_2_field, #shipping_address_2_field, #billing_email_field, #billing_company_field, #shipping_company_field) { grid-column: 1 / -1; }
.woocommerce form .form-row label { color: var(--color-ink); font-size: var(--fs-body-xs); font-weight: 600; }
.woocommerce form .form-row .required { color: var(--color-ink); text-decoration: none; }
.woocommerce form .form-row .optional { color: var(--color-ink-muted); font-weight: 400; }
.woocommerce form .form-row.woocommerce-invalid :where(input, select) { box-shadow: 0 0 0 2px var(--color-state-rouge); }
.woocommerce form .form-row :where(.woocommerce-input-wrapper) { display: block; }
.woocommerce form .form-row :where(input.input-checkbox, input[type="checkbox"]) { width: 20px; min-height: 0; }
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: var(--space-8); font-weight: 400; font-size: var(--fs-body-s); }
#ship-to-different-address { margin: var(--space-24) 0 var(--space-16); font-size: var(--fs-body-m); }
.woocommerce-account-fields,
.woocommerce form .create-account { margin-block-start: var(--space-16); }
#ship-to-different-address label { display: inline-flex; align-items: center; gap: var(--space-8); }

#payment .payment_methods { margin: var(--space-16) 0; padding: 0; list-style: none; }
#payment .payment_methods > li {
  margin-block-end: var(--space-8);
  padding: var(--space-16);
  border-radius: var(--radius);
  background: var(--color-surface-card);
}
#payment .payment_methods > li > label { display: inline; color: var(--color-ink); font-size: var(--fs-body-s); font-weight: 600; }
#payment .payment_methods > li > input { margin-inline-end: var(--space-8); vertical-align: middle; }
#payment .payment_box { margin: var(--space-8) 0 0; color: var(--color-ink); font-size: var(--fs-body-s); }
#payment .payment_box p { margin: 0; }
#payment .place-order { display: flex; flex-direction: column; gap: var(--space-16); margin: 0; }
#payment #place_order { width: 100%; }
.woocommerce-privacy-policy-text,
.woocommerce-terms-and-conditions-wrapper { font-size: var(--fs-body-xs); color: var(--color-ink); }
.woocommerce-privacy-policy-text a,
.woocommerce-terms-and-conditions-wrapper a { color: var(--color-ink); }
.woocommerce-form-coupon-toggle .woocommerce-info { background: var(--color-surface-chip); color: var(--color-ink); }
form.checkout_coupon { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-block-end: var(--space-24); }
form.checkout_coupon .form-row { flex: 1 1 200px; }

/* ---------- Commande reçue, compte ---------- */
ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16) var(--space-40);
  margin: var(--space-24) 0;
  padding: var(--space-24);
  border-radius: var(--radius);
  background: var(--color-surface-chip);
  list-style: none;
  font-size: var(--fs-body-xs);
  color: var(--color-ink-muted);
}
ul.woocommerce-order-overview strong { display: block; color: var(--color-ink); font-size: var(--fs-body-m); }
.woocommerce-thankyou-order-received { font-size: var(--fs-h4); font-weight: 600; }
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-bacs-bank-details { margin-block-start: var(--space-32); }
:where(.woocommerce-order-details, .woocommerce-customer-details, .woocommerce-bacs-bank-details) > h2 { font-size: var(--fs-h4); }
.woocommerce-customer-details address { font-style: normal; line-height: var(--lh-body); }
.woocommerce-bacs-bank-details ul.bacs_details { padding: 0; list-style: none; }

.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-48); }
.woocommerce-account .woocommerce > :where(.woocommerce-notices-wrapper, h2, .u-columns, .woocommerce-form-login, .woocommerce-ResetPassword) { grid-column: 1 / -1; }
.woocommerce-MyAccount-navigation ul { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  min-height: var(--size-control-compact);
  padding: 0 var(--space-16);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--color-surface-chip); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--color-pill-dark); color: var(--color-ink-inverse); }
.woocommerce-MyAccount-content > :first-child { margin-block-start: 0; }
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 480px;
  padding: var(--space-32);
  border-radius: var(--radius);
  background: var(--color-surface-chip);
}
.u-columns.col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-32); }
.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: var(--space-8); }
.lost_password a { color: var(--color-ink); }
.woocommerce-orders-table .button { min-height: var(--size-control-compact); font-size: var(--fs-button-s); }


/* ---------- Tuiles des catégories (pages Canvas : <div data-sl-categories>) ---------- */
.sl-boutique-tuiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-24) var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-boutique-tuile__lien { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-ink); text-decoration: none; }
.sl-boutique-tuile__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin-block-end: var(--space-8);
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--color-surface-chip);
  transition: scale var(--motion-duration-slow) var(--motion-ease-standard);
}
.sl-boutique-tuile__lien:hover .sl-boutique-tuile__image { scale: 1.02; }
.sl-boutique-tuile__nom { font-weight: 600; }
.sl-boutique-tuile__nombre { color: var(--color-principal); font-size: var(--fs-body-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sl-boutique-tuile__nombre::after { content: " →"; }
.sl-boutique-tuile__lien:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-4); border-radius: var(--radius); }
/* Grille de produits dans une page Canvas (code court [products] de WooCommerce). */
.woocommerce.columns-4,
.woocommerce.columns-3 { width: 100%; }


/* ---------- 3.4.1 : options repliables de la fiche (sl-option) ----------
   AJOUTÉ 22/10/2026 (retour 3 de Thibault). Une option = <details> ; le
   <summary> (vrai bouton, clavier) porte le nom, la règle, le résumé du
   choix et un chevron. La légende du groupe et le libellé du champ restent
   pour les lecteurs d'écran (le titre visible est dans le summary). */
.sl-perso { gap: 0; border-block-start: 1px solid var(--color-gris-3); }
.sl-option { border-block-end: 1px solid var(--color-gris-3); }
.sl-option__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
  min-height: var(--size-control);
  padding-block: var(--space-16);
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
}
.sl-option__titre::-webkit-details-marker { display: none; }
.sl-option__titre:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-2); border-radius: var(--space-4); }
.sl-option__nom { font-size: var(--fs-body-m); font-weight: 600; }
.sl-option__regle { color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.sl-option__regle::before { content: "— "; }
.sl-option__resume { margin-inline-start: auto; color: var(--color-ink); font-size: var(--fs-body-s); font-weight: 600; text-align: end; }
.sl-option__resume:empty { display: none; }
.sl-option__chevron { margin-inline-start: auto; font-size: 24px; transition: rotate var(--motion-duration-base) var(--motion-ease-standard); }
.sl-option__resume:not(:empty) + .sl-option__chevron { margin-inline-start: 0; }
.sl-option[open] > .sl-option__titre .sl-option__chevron { rotate: 180deg; }
.sl-option[open] > .sl-option__titre .sl-option__resume { display: none; }
.sl-option__corps { padding-block-end: var(--space-24); }
.sl-option .sl-pastilles { padding: 0; border: 0; }
.sl-option :is(.sl-pastilles__legende, .sl-field__label) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sl-option .sl-pastilles__compteur { margin-block-start: 0; }

/* ---------- 3.4.1 : étapes de la commande (sl-etapes-commande) ----------
   AJOUTÉ 22/10/2026 (retour 5 de Thibault ; Figma « sl-etapes-commande »). */
.sl-etapes-commande { margin-block-end: var(--space-32); }
.sl-etapes-commande ol { display: flex; gap: var(--space-8); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.sl-etapes-commande__etape { position: relative; flex: 1 1 0; min-width: 0; }
.sl-etapes-commande__etape + .sl-etapes-commande__etape::before {
  content: "";
  position: absolute;
  top: 16px;
  right: calc(50% + 24px);
  left: calc(-50% + 16px);
  height: 2px;
  background: var(--color-gris-3);
}
.sl-etapes-commande__etape.is-fait + .sl-etapes-commande__etape::before,
.sl-etapes-commande__etape.is-en-cours::before { background: var(--color-principal); }
.sl-etapes-commande__lien {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  color: var(--color-ink-muted);
  font-size: var(--fs-body-s);
  text-align: center;
  text-decoration: none;
}
a.sl-etapes-commande__lien:hover .sl-etapes-commande__nom { text-decoration: underline; }
a.sl-etapes-commande__lien:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-4); border-radius: var(--space-4); }
.sl-etapes-commande__num {
  display: grid;
  place-items: center;
  width: var(--space-32);
  height: var(--space-32);
  border-radius: var(--radius-round);
  background: var(--color-surface-card);
  box-shadow: inset 0 0 0 2px var(--color-gris-6-texte-secondaire);
  color: var(--color-ink);
  font-weight: 600;
}
.sl-etapes-commande__num .sl-icon { font-size: 18px; }
.sl-etapes-commande__etape.is-fait .sl-etapes-commande__num { background: var(--color-principal); box-shadow: none; color: var(--color-ink-inverse); }
.sl-etapes-commande__etape.is-en-cours .sl-etapes-commande__num { background: var(--color-principal); box-shadow: 0 0 0 4px var(--color-extra-2); color: var(--color-ink-inverse); }
.sl-etapes-commande__etape:is(.is-fait, .is-en-cours) .sl-etapes-commande__lien { color: var(--color-ink); }
.sl-etapes-commande__etape.is-en-cours .sl-etapes-commande__nom { font-weight: 600; }

/* ---------- 3.4.1 : champs de la boutique sur fond « extra 2 » ----------
   AJOUTÉ 22/10/2026 (retour 6 de Thibault : « on ne distingue pas les
   champs blancs »). Fond = jeton --color-extra-2 (le gris clair de la marque chez Norah),
   bordure gris 6 (contraste d'élément d'interface ≥ 3:1, mesuré), focus :
   fond carte + anneau. LIMITÉ à la boutique (pages de WooCommerce, fiche,
   panier, commande, compte, connexion) : un site sans boutique ne change pas.
   Proposition pour tout le parc : un réglage « fond des champs » dans la
   page Style (noté pour Thibault). */
:is(.sl-boutique, .sl-boutique-page, .sl-perso) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="range"], [type="color"], [type="file"], [type="image"]), select, textarea) {
  background-color: var(--color-extra-2);
  box-shadow: inset 0 0 0 1px var(--color-gris-6-texte-secondaire);
}
:is(.sl-boutique, .sl-boutique-page, .sl-perso) :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"]), select, textarea):focus-visible {
  outline: none;
  background-color: var(--color-surface-card);
  box-shadow: inset 0 0 0 1px var(--color-principal), 0 0 0 3px var(--color-focus-ring);
}
:is(.sl-boutique, .sl-boutique-page) .woocommerce-invalid :is(input, select) { box-shadow: inset 0 0 0 2px var(--color-state-rouge); }

/* Pastilles des couleurs choisies (panier, récapitulatif, commande) : la
   forme vient du style en ligne (e-mails) ; ici seulement l'alignement. */
.sl-element-nom { display: inline-flex; align-items: center; }

/* ---------- 1.2.0 : bouton texte et champ « nombre » ----------
   AJOUTÉ 22/10/2026 (ThemeLight Boutique 1.2.0). Un élément sans pastille
   (une taille, une finition, une police) se choisit dans un BOUTON TEXTE :
   pilule bordée, pleine (foncée) quand il est choisi ; une liste de boutons
   s'aligne en ligne au lieu de la grille des pastilles. Champ « nombre » :
   l'unité (« cm ») suit la case. */
.sl-pastilles__liste:has(> .sl-pastille--texte) { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sl-pastille--texte .sl-pastille__etiquette {
  flex-direction: row;
  justify-content: center;
  min-height: var(--size-control-compact);
  padding: var(--space-4) var(--space-16);
  border-radius: var(--radius-round);
  box-shadow: inset 0 0 0 1px var(--color-gris-4-border);
  font-size: var(--fs-body-s);
}
.sl-pastille--texte .sl-pastille__etat::before { content: "· "; }
.sl-pastille--texte .sl-pastille__case:checked + .sl-pastille__etiquette { background: var(--color-pill-dark); color: var(--color-ink-inverse); box-shadow: none; }
.sl-pastille--texte .sl-pastille__case:checked + .sl-pastille__etiquette .sl-pastille__etat { color: var(--color-ink-inverse); }
.sl-pastille--texte .sl-pastille__case:focus-visible + .sl-pastille__etiquette { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-2); }
.sl-pastille--texte.sl-pastille--rupture .sl-pastille__etiquette { opacity: .6; }
.sl-field__groupe { display: flex; align-items: center; gap: var(--space-8); }
.sl-field__groupe .sl-field__input { max-width: 160px; }
.sl-field__unite { color: var(--color-ink); font-size: var(--fs-body-s); }

/* ---------- 1.4.0 : délais, article personnalisé, écarts avec le Figma ----------
   AJOUTÉ 22/10/2026 (ThemeLight Boutique 1.4.0). « Fabrication : 5 à 10
   jours ouvrables » sous le prix ; mention « article personnalisé » sous
   le bouton et sur la page Commande (cadre doux, icône info) ; « +10
   jours » sous un élément ; surtitre de la fiche ; note « le prix et la
   photo restent les mêmes » ; cartes : lien collé en bas, aligné à gauche ;
   pastille épuisée nettement grisée. */
.sl-delai { display: flex; align-items: center; gap: var(--space-8); margin: 0 0 var(--space-16); color: var(--color-ink); font-size: var(--fs-body-s); }
.sl-mention-perso { display: flex; flex: 1 1 100%; align-items: flex-start; gap: var(--space-8); margin: var(--space-16) 0 0; padding: calc(var(--space-8) + var(--space-4)) var(--space-16); border-radius: var(--radius); background: var(--color-badge-info-bg); color: var(--color-ink); font-size: var(--fs-body-s); line-height: var(--lh-body); }
.sl-mention-perso .sl-icon { flex: none; margin-block-start: 2px; }
.sl-mention-perso a { color: var(--color-ink); font-weight: 600; }
.woocommerce-checkout-payment .sl-mention-perso { margin: 0 0 var(--space-16); }
.sl-pastille__delai { color: var(--color-ink); font-size: var(--fs-body-xs); }
.sl-produit__surtitre { margin: 0 0 var(--space-4); color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.sl-produit__note { display: flex; align-items: flex-start; gap: var(--space-8); margin: 0 0 var(--space-16); padding: calc(var(--space-8) + var(--space-4)) var(--space-16); border-radius: calc(var(--radius) - var(--space-2)); background: var(--color-surface-chip); color: var(--color-ink); font-size: var(--fs-body-s); }
ul.products li.product .button { display: block; margin-block-start: auto; text-align: start; }
ul.products li.product .price { margin-block-end: var(--space-8); }
.sl-pastille--rupture .sl-pastille__teinte img,
.sl-pastille--rupture .sl-pastille__teinte { filter: grayscale(1); }

/* ---------- 1.3.0 : espace client (écarts avec le Figma 2017:4464 / 2017:4691) ----------
   AJOUTÉ 22/10/2026 (ThemeLight Boutique 1.3.0). Menu : lien actif sur fond
   doux et texte principal ; au téléphone, une bande de pilules qui défile.
   Commandes : pastilles d'état (sl-badge du parent), « n° », bouton « Voir »
   secondaire, cartes au téléphone (fin du défilement horizontal). Adresses
   et informations du compte remises au gabarit du thème. */
.sl-compte__bonjour { margin: 0 0 var(--space-24); color: var(--color-ink-muted); font-size: var(--fs-body-l); }
.sl-compte__titre { margin: 0 0 var(--space-24); font-size: var(--fs-h3); }
.woocommerce-MyAccount-navigation a { border-radius: var(--radius); min-height: var(--size-control); font-size: var(--fs-body-m); }
.woocommerce-MyAccount-navigation .is-active a { background: var(--color-badge-info-bg); color: var(--color-principal); font-weight: 600; }
.woocommerce-orders-table { width: 100%; border-collapse: collapse; }
.woocommerce-orders-table thead th { padding: var(--space-8) var(--space-8) var(--space-8) 0; background: none; color: var(--color-ink-muted); font-size: var(--fs-body-s); font-weight: 600; text-align: start; border-block-end: 1px solid var(--color-gris-4-border); }
.woocommerce-orders-table tbody :is(td, th) { padding: var(--space-16) var(--space-8) var(--space-16) 0; border-block-end: 1px solid var(--color-gris-4-border); vertical-align: middle; }
.woocommerce-orders-table__header-order-actions { font-size: 0; }
.sl-commande-numero { color: var(--color-principal); font-size: var(--fs-body-m); font-weight: 600; }
.sl-commande-nombre { color: var(--color-ink-muted); }
.woocommerce-MyAccount-content .woocommerce-orders-table a.button,
.woocommerce-MyAccount-content a.woocommerce-button { display: inline-flex; align-items: center; min-height: var(--size-control-compact); padding: 0 var(--space-16); border-radius: var(--radius-pill); background: var(--color-surface-page); box-shadow: inset 0 0 0 1px var(--color-gris-4-border); color: var(--color-ink); font-size: var(--fs-body-s); text-decoration: none; }
.woocommerce-orders-table .button + .button { margin-inline-start: var(--space-4); }
.sl-commande-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); margin-block-end: var(--space-16); }
.sl-commande-tete .sl-compte__titre { margin: 0; }
.woocommerce-MyAccount-content mark { background: none; color: inherit; font-weight: 600; }
/* La phrase « La commande n° … est actuellement En attente » redit le titre et la pastille : retirée. */
.woocommerce-MyAccount-content > p:has(> mark.order-status) { display: none; }
.sl-commande-date { flex-basis: 100%; margin: 0; color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.sl-commande-virement { margin-block: var(--space-16) var(--space-24); padding: var(--space-24); border-radius: var(--radius); background: var(--color-surface-chip); }
.sl-commande-virement :is(h2, h3) { margin-block-start: 0; font-size: var(--fs-h4); }
.woocommerce-Addresses { gap: var(--space-24); align-items: start; }
.woocommerce-Addresses > * { margin: 0; }
.woocommerce-Address { padding: var(--space-24); border-radius: var(--radius); background: var(--color-surface-chip); }
.woocommerce-Address-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-8); }
.woocommerce-Address-title :is(h2, h3) { margin: 0; font-size: var(--fs-h4); }
.woocommerce-Address address { font-style: normal; }
.woocommerce-EditAccountForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-24); }
.woocommerce-EditAccountForm > * { grid-column: 1 / -1; margin: 0; }
.woocommerce-EditAccountForm > .form-row-first { grid-column: 1; }
.woocommerce-EditAccountForm > .form-row-last { grid-column: 2; }
.woocommerce-EditAccountForm em { font-style: normal; color: var(--color-ink-muted); font-size: var(--fs-body-s); }
.woocommerce-EditAccountForm fieldset { display: grid; gap: var(--space-16); margin: var(--space-8) 0 0; padding: var(--space-24); border: 1px solid var(--color-gris-4-border); border-radius: var(--radius); }
.woocommerce-EditAccountForm legend { padding: 0 var(--space-8); font-weight: 600; }
.password-input { position: relative; display: block; }
.password-input input { width: 100%; padding-inline-end: var(--size-control); }
.show-password-input {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--space-4);
  width: var(--size-control-compact);
  margin-block: auto;
  height: var(--size-control-compact);
  border: 0;
  border-radius: var(--radius-round);
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}
.show-password-input::after { content: "visibility"; font-family: 'Material Symbols Rounded'; font-size: 20px; font-feature-settings: 'liga'; }
.show-password-input.display-password::after { content: "visibility_off"; }
.show-password-input:focus-visible { outline: 2px solid var(--color-focus-ring); }
@media (max-width: 767.98px) {
  .woocommerce-account .woocommerce-MyAccount-navigation ul { flex-wrap: nowrap; overflow-x: auto; gap: var(--space-8); padding-block-end: var(--space-4); scrollbar-width: thin; }
  .woocommerce-account .woocommerce-MyAccount-navigation a { min-height: var(--size-control-compact); padding: 0 var(--space-16); border-radius: var(--radius-pill); background: var(--color-gris-1); font-size: var(--fs-body-s); white-space: nowrap; }
  .woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--color-pill-dark); color: var(--color-ink-inverse); }
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); margin-block-end: var(--space-16); padding: var(--space-16); border: 1px solid var(--color-gris-4-border); border-radius: var(--radius); }
  .woocommerce-orders-table tbody :is(td, th) { display: block; padding: 0; border: 0; }
  .woocommerce-orders-table tbody :is(td, th)::before { content: none; }
  .woocommerce-orders-table__cell-order-number { grid-column: 1; }
  .woocommerce-orders-table__cell-order-date { grid-column: 1; color: var(--color-ink-muted); font-size: var(--fs-body-s); }
  .woocommerce-orders-table__cell-order-total { grid-column: 2; grid-row: 1; text-align: end; font-weight: 600; }
  .woocommerce-orders-table__cell-order-status,
  .woocommerce-orders-table__cell-order-actions { grid-column: 1 / -1; }
  .woocommerce-EditAccountForm { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-EditAccountForm > :is(.form-row-first, .form-row-last) { grid-column: 1; }
}

/* ---------- 1.3.0 : suppléments de prix ----------
   AJOUTÉ 22/10/2026 (ThemeLight Boutique 1.3.0). « +3,00 € » sous la
   pastille (ou dans le bouton texte) ; « Prix avec vos choix » sous les
   options quand un supplément est choisi (choix.js de l'extension). */
.sl-pastille__supplement { color: var(--color-ink); font-size: var(--fs-body-xs); font-weight: 600; }
.sl-pastille--texte .sl-pastille__supplement::before { content: "· "; }
.sl-pastille--texte .sl-pastille__case:checked + .sl-pastille__etiquette .sl-pastille__supplement { color: var(--color-ink-inverse); }
.sl-perso__total { margin: var(--space-16) 0 0; padding: calc(var(--space-8) + var(--space-4)) var(--space-16); border-radius: var(--radius); background: var(--color-surface-chip); color: var(--color-ink); font-size: var(--fs-body-m); }
.sl-perso__total[hidden] { display: none; }

/* ---------- 1.2.0 : recherche d'articles ----------
   AJOUTÉ 22/10/2026 (ThemeLight Boutique 1.2.0, demande de Thibault). Le
   champ (pilule, bouton loupe) en haut de la boutique, des catégories et
   des résultats ; la loupe de l'en-tête (data-sl-recherche, fragment du
   site) ouvre le même champ sous l'en-tête ; message « rien trouvé » avec
   les catégories en suggestion. Jetons seulement. */
.sl-boutique-recherche { position: relative; display: flex; align-items: center; width: min(100%, 520px); }
.sl-boutique-recherche__champ {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--size-control);
  padding: 0 calc(var(--size-control) + var(--space-8)) 0 var(--space-24);
  border: 1px solid var(--color-gris-4-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-page);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--fs-body-m);
}
.sl-boutique-recherche__champ::placeholder { color: var(--color-ink-muted); opacity: 1; }
.sl-boutique-recherche__champ:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-2); }
.sl-boutique-recherche__bouton {
  position: absolute;
  inset-block: var(--space-4);
  inset-inline-end: var(--space-4);
  display: inline-grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-pill-dark);
  color: var(--color-ink-inverse);
  cursor: pointer;
}
.sl-boutique-recherche__bouton:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: var(--space-2); }
.sl-boutique-recherche-zone { margin-block: var(--space-16) var(--space-24); }
.sl-boutique-recherche__nombre { margin: 0 0 var(--space-24); color: var(--color-ink); font-size: var(--fs-body-s); font-weight: 600; }
.sl-boutique-vide { display: grid; gap: var(--space-16); padding: var(--space-32); border-radius: var(--radius); background: var(--color-surface-chip); }
.sl-boutique-vide p { margin: 0; }
.sl-boutique-vide__titre { font-size: var(--fs-h4); font-weight: 600; }
.sl-boutique-vide__categories { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
.sl-boutique-vide__categories a { display: inline-flex; align-items: center; min-height: var(--size-control-compact); padding: 0 var(--space-16); border-radius: var(--radius-pill); background: var(--color-surface-page); box-shadow: inset 0 0 0 1px var(--color-gris-4-border); color: var(--color-ink); font-size: var(--fs-body-s); text-decoration: none; }
.sl-boutique-vide__categories a:hover { background: var(--color-surface-doux); }
/* Panier et loupe TOUJOURS visibles, même quand l'en-tête passe au menu du
   téléphone (le parent masque alors .sl-header__actions : un site vitrine
   n'y met que des boutons repris dans le menu ; une boutique doit garder
   son panier sous la main). Sélecteur plus précis que celui du parent. */
.sl-header__actions:has(.sl-panier-lien, [data-sl-recherche]) { display: flex; align-items: center; gap: var(--space-8); }
/* Menu du téléphone (classe posée par boutique/recherche.js) : logo, puis
   loupe et panier, puis le bouton du menu, sur une seule ligne. */
.sl-menu-mobile .sl-header__barre { flex-wrap: nowrap; gap: var(--space-8); }
.sl-menu-mobile .sl-header__barre > .sl-logo { min-width: 0; margin-inline-end: auto; }
.sl-menu-mobile .sl-header__barre > .sl-header__actions { order: 2; gap: var(--space-4); }
.sl-menu-mobile .sl-header__barre > .sl-nav { order: 3; }
@media (max-width: 479.98px) {
  /* Téléphone : panier en pastille ronde (icône + nombre), logo un peu plus petit : tout tient sur une ligne. */
  .sl-menu-mobile .sl-panier-lien { gap: var(--space-4); padding-inline: var(--space-8); }
  .sl-menu-mobile .sl-header__barre > .sl-logo { gap: var(--space-8); }
  .sl-menu-mobile .sl-header__barre > .sl-logo .sl-logo__image { width: var(--space-40); height: var(--space-40); }
  .sl-menu-mobile .sl-header__barre > .sl-logo { overflow: hidden; }
  .sl-menu-mobile .sl-header__barre > .sl-logo .sl-logo__image { flex: none; }
  .sl-menu-mobile .sl-header__barre > .sl-logo .sl-logo__nom { min-width: 0; font-size: var(--fs-body-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Loupe de l'en-tête : un bouton rond ; le champ s'ouvre sous l'en-tête. */
.sl-recherche-entete { display: inline-flex; }
.sl-recherche-entete__bouton {
  display: inline-grid;
  place-items: center;
  width: var(--size-control-compact);
  height: var(--size-control-compact);
  border-radius: var(--radius-round);
  box-shadow: inset 0 0 0 1px var(--color-gris-4-border);
  color: var(--color-ink);
  text-decoration: none;
}
.sl-recherche-entete__bouton:hover, .sl-recherche-entete.is-ouvert .sl-recherche-entete__bouton { background: var(--color-surface-chip); }
.sl-recherche-entete__formulaire {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 20;
  width: auto;
  justify-content: center;
  padding: var(--space-16) var(--space-section-x);
  background: var(--color-surface-page);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--color-ink) 12%, transparent);
}
.sl-recherche-entete__formulaire[hidden] { display: none; }
.sl-recherche-entete__formulaire .sl-boutique-recherche__champ { max-width: 640px; }
.sl-recherche-entete__formulaire .sl-boutique-recherche__bouton { position: static; margin-inline-start: calc(-1 * var(--size-control)); height: calc(var(--size-control) - 2 * var(--space-4)); }

/* ---------- 1.1.0 : panier en deux colonnes (écrans larges) ----------
   AJOUTÉ 22/10/2026 (ThemeLight Boutique 1.1.0, correction de Thibault) :
   à partir de 1024 px (seuil habituel du thème), lecture en diagonale : à
   GAUCHE la liste des articles (options, pastilles, quantités, code promo),
   à DROITE le bloc « Total panier » et le bouton « Valider la commande ».
   Le bloc de droite reste visible quand la liste est longue (colonne
   collante, calée sous l'en-tête par --size-header-collant, le même décalage
   que le scroll-padding de la 3.3.5). Au téléphone : une seule colonne,
   articles puis total (règles plus bas, inchangées). Étapes et messages
   gardent toute la largeur. */
@media (min-width: 1024px) {
  .woocommerce:has(> .woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    column-gap: var(--space-48);
    align-items: start;
  }
  .woocommerce:has(> .woocommerce-cart-form) > * { grid-column: 1 / -1; }
  .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-cart-form { grid-column: 1; min-width: 0; }
  .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals {
    display: block;
    grid-column: 2;
    position: sticky;
    top: calc(var(--size-header-collant) + var(--space-16));
    margin-block-start: 0;
  }
  .woocommerce:has(> .woocommerce-cart-form) .cart_totals { width: auto; }
  .woocommerce:has(> .woocommerce-cart-form) .cart_totals h2 { margin-block-start: 0; }
}

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 1023.98px) {
  ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-boutique-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sl-boutique--fiche div.product { grid-template-columns: minmax(0, 1fr); }
  /* Sélecteurs écrits en entier (pas :where, sans poids) : ils doivent battre la règle du bureau. */
  .sl-boutique--fiche div.product > .woocommerce-product-gallery,
  .sl-boutique--fiche div.product > .summary { grid-column: 1; grid-row: auto; }
  form.checkout { grid-template-columns: minmax(0, 1fr); }
  form.checkout #customer_details,
  form.checkout #order_review_heading,
  form.checkout #order_review { grid-column: 1; grid-row: auto; }
  .woocommerce-account .woocommerce { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  .woocommerce-MyAccount-navigation ul { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 767.98px) {
  .sl-boutique { padding-block: var(--space-24) var(--space-56); }
  ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32) var(--space-16); }
  .sl-boutique-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* MODIFIÉ 22/10/2026 (1.4.0, écart Figma 390) : nombre et tri restent sur la même ligne. */
  .sl-boutique--liste .woocommerce-ordering select { max-width: 52vw; }
  .sl-boutique-categories ul { flex-wrap: nowrap; overflow-x: auto; padding-block-end: var(--space-4); scrollbar-width: thin; }
  .sl-boutique-categories a { white-space: nowrap; min-height: var(--size-control); }
  .sl-pastilles__liste { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .sl-etapes-commande__etape:not(.is-en-cours) .sl-etapes-commande__nom { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sl-etapes-commande__etape.is-en-cours .sl-etapes-commande__nom { font-size: var(--fs-body-xs); }
  .woocommerce form :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) { grid-template-columns: 1fr; }
  .woocommerce-tabs { padding: var(--space-32) var(--space-16); }
  .woocommerce-product-gallery__wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  form.cart .single_add_to_cart_button { flex-basis: 100%; }
  .cart-collaterals { display: block; }

  /* Tableaux en cartes (WooCommerce pose data-title sur chaque cellule). */
  table.cart.shop_table_responsive thead { display: none; }
  table.cart.shop_table_responsive tbody tr { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-4) var(--space-16); padding-block: var(--space-16); border-block-end: 1px solid var(--color-gris-3); }
  table.cart.shop_table_responsive tbody td { display: flex; justify-content: space-between; gap: var(--space-8); padding: 0; border: 0; grid-column: 2; }
  table.cart.shop_table_responsive tbody td[data-title]::before { content: attr(data-title); color: var(--color-ink-muted); font-weight: 600; }
  table.cart.shop_table_responsive tbody td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  table.cart.shop_table_responsive tbody td.product-remove { justify-content: flex-end; }
  table.cart.shop_table_responsive tbody td.product-name { display: block; }
  table.cart.shop_table_responsive tbody td.product-name::before { content: none; }
  table.cart.shop_table_responsive tbody td.actions { display: flex; flex-direction: column; grid-column: 1 / -1; }
  /* Totaux du panier et récapitulatif de la commande : libellé et montant l'un sous l'autre si la place manque. */
  .cart_totals table.shop_table :where(th, td),
  .woocommerce-checkout-review-order-table :where(th, td) { overflow-wrap: anywhere; }
  .cart_totals table.shop_table_responsive :where(tr) { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: var(--space-8); border-block-end: 1px solid var(--color-gris-3); }
  .cart_totals table.shop_table_responsive :where(th, td) { display: block; padding: 0; border: 0; }
  .cart_totals table.shop_table_responsive td::before { content: none; }
  .woocommerce-cart-form .coupon { display: flex; margin: 0; }
  .woocommerce-cart-form .coupon input { flex: 1 1 auto; width: auto; }
  .woocommerce-cart-form button[name="update_cart"] { float: none; width: 100%; }
  .woocommerce :where(.button, button.button, a.button) { min-height: var(--size-control); }
}

/* Mouvement réduit : ni zoom des photos ni rebond des pastilles. */
@media (prefers-reduced-motion: reduce) {
  ul.products li.product img,
  .sl-boutique-tuile__image,
  .sl-pastille__teinte,
  .sl-option__chevron,
  .sl-boutique-categories a { transition: none; }
  ul.products li.product a.woocommerce-LoopProduct-link:hover img,
  .sl-pastille:hover .sl-pastille__teinte,
  .sl-boutique-tuile__lien:hover .sl-boutique-tuile__image { scale: 1; }
}