/* ==========================================================================
   SpaCart — Storefront UI Layer
   --------------------------------------------------------------------------
   Couche d'habillage additive. À charger APRÈS toutes les feuilles existantes
   (css.css, responsive.css, storefront_native.css, theme.css et le <style>
   inline des tokens de thème).

   Principes
   ---------
   1. Aucun markup modifié. Uniquement des sélecteurs sur les classes existantes.
   2. Les tokens de tenant (--spacart-primary, --spacart-accent, ...) restent la
      source de vérité : toute la palette en est DÉRIVÉE via color-mix().
      Changer la couleur dans la config Dolibarr repropage tout le thème.
   3. Namespace propre `--scu-*`. Les tokens legacy `--sc-*` (clone Amazon) sont
      réassignés vers les tokens sémantiques, jamais supprimés.
   4. Chargement : après les tokens et les styles du thème, avant le premier
      rendu. On utilise `:root:root` pour les tokens,
      et avec des sélecteurs doublés (`.x.x`) pour les composants. `!important`
      est réservé aux ~12 cas signalés.

   Contrainte constatée sur la démo
   --------------------------------
   demo.dolx.io envoie une CSP `style-src` à nonce : tout <style> injecté sans
   nonce est inerte (son .sheet reste null, sans erreur console visible).
   Conséquence pour l'intégration :
     · charger ce fichier via <link rel="stylesheet"> (même origine : autorisé) ;
     · si vous devez l'inliner, propager le nonce de la requête sur la balise.

   Enqueue côté Dolibarr, en dernier dans le <head> :
     print '<link rel="stylesheet" href="'.DOL_URL_ROOT.'/custom/spacart/css/spacart-ui.css?v='.$ver.'">';
     print '<script defer src="'.DOL_URL_ROOT.'/custom/spacart/js/spacart-ui.js?v='.$ver.'"></script>';

   Sommaire
   --------
   00 Tokens · 01 Reset · 02 Typographie · 03 Focus & a11y · 04 Boutons
   05 Formulaires · 06 Header & navigation · 07 Fil d'Ariane · 08 Carte produit
   09 Accueil · 10 Catalogue & facettes · 11 Fiche produit · 12 Panier
   13 Tunnel · 14 Compte · 15 Footer · 16 Consentement, toasts, divers
   17 Responsive · 18 Motion, impression
   ========================================================================== */


/* ==========================================================================
   00 · TOKENS
   ========================================================================== */

:root:root {

  /* --- Typographie -------------------------------------------------------
     Pile système : zéro requête réseau, zéro CLS, rendu natif sur chaque OS.
     Pour passer sur Inter, décommenter le @font-face plus bas et remplacer
     la première entrée de --scu-font.                                      */
  --scu-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
              Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --scu-font-num: var(--scu-font);

  --scu-fs-100: 0.75rem;    /* 12 — légendes, compteurs         */
  --scu-fs-200: 0.8125rem;  /* 13 — méta, labels                */
  --scu-fs-300: 0.875rem;   /* 14 — UI dense, tableaux          */
  --scu-fs-400: 0.9375rem;  /* 15 — corps par défaut            */
  --scu-fs-500: 1rem;       /* 16 — corps de lecture            */
  --scu-fs-600: 1.125rem;   /* 18 — sous-titres                 */
  --scu-fs-700: 1.375rem;   /* 22 — H3                          */
  --scu-fs-800: 1.75rem;    /* 28 — H2                          */
  --scu-fs-900: 2.25rem;    /* 36 — H1                          */

  --scu-lh-tight: 1.2;
  --scu-lh-snug: 1.35;
  --scu-lh-base: 1.55;
  --scu-lh-loose: 1.7;

  --scu-tracking-tight: -0.018em;  /* titres : resserrer         */
  --scu-tracking-wide: 0.04em;     /* eyebrows / majuscules      */

  --scu-fw-regular: 400;
  --scu-fw-medium: 500;
  --scu-fw-semibold: 600;
  --scu-fw-bold: 700;

  /* --- Espacement (échelle 4 pt) ----------------------------------------- */
  --scu-1: 4px;   --scu-2: 8px;   --scu-3: 12px;  --scu-4: 16px;
  --scu-5: 20px;  --scu-6: 24px;  --scu-7: 32px;  --scu-8: 40px;
  --scu-9: 48px;  --scu-10: 64px; --scu-11: 80px; --scu-12: 96px;

  /* --- Gris neutres ------------------------------------------------------ */
  --scu-g-0:   #ffffff;
  --scu-g-25:  #fcfcfd;
  --scu-g-50:  #f7f8fa;
  --scu-g-100: #eff1f4;
  --scu-g-200: #e3e6ea;
  --scu-g-300: #ccd1d8;
  --scu-g-400: #a2aab5;
  --scu-g-500: #65707d;
  --scu-g-600: #58606b;
  --scu-g-700: #404750;
  --scu-g-800: #2a2f36;
  --scu-g-900: #161a1f;

  /* --- Marque : dérivée du token de tenant -------------------------------
     Repli statique d'abord (navigateurs sans color-mix), surchargé juste
     après dans le bloc @supports.                                          */
  --scu-brand:        var(--spacart-primary, #166534);
  --scu-brand-hover:  #14532d;
  --scu-brand-active: #104125;
  --scu-brand-tint:   #edf5ef;
  --scu-brand-line:   #c4dccb;
  --scu-brand-ring:   rgba(22, 101, 52, 0.32);
  --scu-on-brand:     var(--spacart-color-on-primary, #ffffff);

  /* --- Sémantique -------------------------------------------------------- */
  --scu-bg:            var(--scu-g-0);
  --scu-bg-subtle:     var(--scu-g-50);
  --scu-bg-sunken:     var(--scu-g-100);
  --scu-surface:       var(--scu-g-0);
  --scu-surface-hover: var(--scu-g-50);

  --scu-text:          var(--scu-g-900);
  --scu-text-muted:    var(--scu-g-600);
  --scu-text-subtle:   var(--scu-g-500);
  --scu-text-invert:   var(--scu-g-0);

  --scu-border:        var(--scu-g-200);
  --scu-border-strong: var(--scu-g-300);
  --scu-border-focus:  var(--scu-brand);

  /* --- États ------------------------------------------------------------- */
  --scu-success:    #0f7a52;  --scu-success-bg: #e8f6f0;  --scu-success-line: #b7e2d1;
  --scu-warning:    #8f5600;  --scu-warning-bg: #fdf3e3;  --scu-warning-line: #f0d5a8;
  --scu-danger:     #b42318;  --scu-danger-bg:  #fdeceb;  --scu-danger-line:  #f4c2be;
  --scu-info:       #1b5fbe;  --scu-info-bg:    #eaf1fd;  --scu-info-line:    #c2d6f6;

  /* --- Rayons ------------------------------------------------------------ */
  --scu-r-xs: 4px;  --scu-r-sm: 6px;  --scu-r-md: 8px;
  --scu-r-lg: 12px; --scu-r-xl: 16px; --scu-r-pill: 999px;

  /* --- Élévations --------------------------------------------------------
     Ombres multi-couches, faible alpha : lisibles sans salir le blanc.      */
  --scu-sh-1: 0 1px 2px rgba(22, 26, 31, .05), 0 1px 1px rgba(22, 26, 31, .04);
  --scu-sh-2: 0 2px 4px -1px rgba(22, 26, 31, .05), 0 6px 14px -3px rgba(22, 26, 31, .08);
  --scu-sh-3: 0 4px 10px -2px rgba(22, 26, 31, .07), 0 14px 32px -8px rgba(22, 26, 31, .13);
  --scu-sh-pop: 0 2px 8px rgba(22, 26, 31, .07), 0 16px 40px -10px rgba(22, 26, 31, .20);
  --scu-sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* --- Mouvement --------------------------------------------------------- */
  --scu-dur-instant: 90ms;
  --scu-dur-fast: 150ms;
  --scu-dur-base: 220ms;
  --scu-dur-slow: 380ms;
  --scu-ease: cubic-bezier(.2, .7, .3, 1);
  --scu-ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- Gabarit ----------------------------------------------------------- */
  --scu-container: var(--spacart-container-width, 1280px);
  --scu-gutter: var(--scu-6);
  --scu-header-h: 68px;
  --scu-z-header: 900;
  --scu-z-popover: 1000;
  --scu-z-drawer: 1100;
  --scu-z-toast: 1200;
  --scu-z-modal: 1300;

  /* --- Remappage des tokens legacy ---------------------------------------
     Ces variables pilotaient le header « clone Amazon ». On les réassigne
     pour que le CSS existant hérite du nouveau langage sans être réécrit.   */
  --sc-header-bg: var(--scu-surface);
  --sc-header-fg: var(--scu-text);
  --sc-nav-bg: var(--scu-surface);
  --sc-search-bg: var(--scu-brand);
  --sc-buy-bg: var(--scu-brand);
  --sc-buy-hover: var(--scu-brand-hover);
  --sc-buy-fg: var(--scu-on-brand);
  --sc-radius: var(--scu-r-md);

  --spacart-font-family: var(--scu-font);
  --spacart-radius: var(--scu-r-md);
  --spacart-radius-sm: var(--scu-r-sm);
  --spacart-radius-md: var(--scu-r-md);
  --spacart-color-surface-subtle: var(--scu-bg-subtle);
  --spacart-color-border: var(--scu-border);
  --spacart-color-muted: var(--scu-text-muted);
  --spacart-color-text: var(--scu-text);
  --spacart-promo-bg: var(--scu-g-900);
  --spacart-promo-text: var(--scu-g-0);
}

/* Dérivation réelle de la palette de marque. Une seule couleur pilote tout. */
@supports (color: color-mix(in oklab, red, blue)) {
  :root:root {
    --scu-brand-hover:  color-mix(in oklab, var(--scu-brand) 88%, #000);
    --scu-brand-active: color-mix(in oklab, var(--scu-brand) 76%, #000);
    --scu-brand-tint:   color-mix(in oklab, var(--scu-brand) 8%,  #fff);
    --scu-brand-line:   color-mix(in oklab, var(--scu-brand) 26%, #fff);
    --scu-brand-ring:   color-mix(in srgb,  var(--scu-brand) 34%, transparent);
  }
}

/* Thème sombre — opt-in explicite (<html data-scu-scheme="dark">).
   Volontairement pas branché sur prefers-color-scheme : sur une vitrine,
   les visuels produit sont fournis sur fond blanc par les marchands.       */
:root:root[data-scu-scheme="dark"] {
  --scu-bg: #101317;            --scu-bg-subtle: #161a20;
  --scu-bg-sunken: #0b0e11;     --scu-surface: #181c22;
  --scu-surface-hover: #1f242b;
  --scu-text: #eef1f4;          --scu-text-muted: #a4adb8;
  --scu-text-subtle: #7d8792;   --scu-text-invert: #101317;
  --scu-border: #272d35;        --scu-border-strong: #39414b;
  --scu-brand-tint: color-mix(in oklab, var(--scu-brand) 18%, #181c22);
  --scu-sh-1: 0 1px 2px rgba(0,0,0,.4);
  --scu-sh-2: 0 6px 16px -4px rgba(0,0,0,.5);
  --scu-sh-3: 0 14px 34px -10px rgba(0,0,0,.6);
  --scu-sh-pop: 0 18px 44px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* Variante Inter — décommenter pour l'activer.
@font-face { font-family:"InterVar"; src:url("../fonts/InterVariable.woff2") format("woff2");
             font-weight:100 900; font-display:swap; }
:root:root { --scu-font: "InterVar", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
*/


/* ==========================================================================
   01 · RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--scu-header-h) + var(--scu-6));
}

body {
  font-family: var(--scu-font);
  font-size: var(--scu-fs-400);
  line-height: var(--scu-lh-base);
  color: var(--scu-text);
  background: var(--scu-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }
img { image-rendering: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--scu-border);
  margin: var(--scu-7) 0;
}

::selection { background: var(--scu-brand-ring); color: var(--scu-text); }

/* Barre de défilement discrète (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--scu-g-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--scu-g-300);
  border: 3px solid transparent;
  border-radius: var(--scu-r-pill);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--scu-g-400); background-clip: content-box; }

/* Largeur de page unifiée sur tous les conteneurs existants */
.page-container,
.sc-shell-width,
.main-container > .content,
#home-tabs .home-tabs,
#product-tabs .product-tabs {
  width: 100%;
  max-width: var(--scu-container);
  margin-inline: auto;
  padding-inline: var(--scu-gutter);
}


/* ==========================================================================
   02 · TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--scu-font);
  color: var(--scu-text);
  line-height: var(--scu-lh-tight);
  letter-spacing: var(--scu-tracking-tight);
  font-weight: var(--scu-fw-semibold);
  margin: 0 0 var(--scu-3);
  text-wrap: balance;
}

h1 { font-size: var(--scu-fs-900); font-weight: var(--scu-fw-bold); }
h2 { font-size: var(--scu-fs-800); }
h3 { font-size: var(--scu-fs-700); }
h4 { font-size: var(--scu-fs-600); line-height: var(--scu-lh-snug); }
h5, h6 { font-size: var(--scu-fs-500); line-height: var(--scu-lh-snug); }

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

a {
  color: var(--scu-text);
  text-decoration: none;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--scu-dur-fast) var(--scu-ease);
}
a:hover { color: var(--scu-brand); }

/* Liens de contenu : soulignés, c'est un texte de lecture, pas de la nav. */
.product-description a,
.spacart-home-intro a,
.foot-column a,
.spacart-consent-copy a {
  text-decoration: underline;
  text-decoration-color: var(--scu-border-strong);
}
.product-description a:hover,
.spacart-consent-copy a:hover { text-decoration-color: currentColor; }

small, .scu-meta { font-size: var(--scu-fs-200); color: var(--scu-text-muted); }

/* Chiffres alignés : indispensable dès qu'il y a des prix en colonne. */
.res-price, .product-details-price, .cart-summary-line, .cart-summary-total,
.checkout-line-total, .checkout-grand-total, .facet-count, .catalog-count,
.product-quantity input, .cart-quantity input, td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   03 · FOCUS & ACCESSIBILITÉ
   ========================================================================== */

/* Un seul anneau de focus pour tout le site, visible sur clair comme sur
   foncé grâce au double liseré. Jamais de outline:none sans remplacement. */
:focus-visible {
  outline: 2px solid var(--scu-brand);
  outline-offset: 2px;
  border-radius: var(--scu-r-xs);
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: var(--scu-2);
  left: var(--scu-2);
  z-index: calc(var(--scu-z-modal) + 1);
  padding: var(--scu-3) var(--scu-5);
  background: var(--scu-surface);
  color: var(--scu-text);
  font-weight: var(--scu-fw-semibold);
  border: 1px solid var(--scu-border-strong);
  border-radius: var(--scu-r-md);
  box-shadow: var(--scu-sh-3);
  transform: translateY(-160%);
  transition: transform var(--scu-dur-base) var(--scu-ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

.scu-sr, .na-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Toute cible tactile atteint 44 px (WCAG 2.5.8 / 2.5.5). */
button, [role="button"], .ajax_link, .facet-label, .rating-choice label {
  min-height: 44px;
}
.carousel-arrow, .cart-remove, .product-zoom-toggle, .navigation-toggle {
  min-width: 44px;
}


/* ==========================================================================
   04 · BOUTONS
   ========================================================================== */

/* Base commune appliquée aux classes de boutons déjà présentes dans le
   markup. Sélecteurs doublés là où il faut battre les règles historiques. */
button,
.main-button,
.add2cart, .add2cart-product,
.cart-checkout-button, .cart-update, .cart-clear, .cart-quote-button,
.checkout-submit,
.facet-mobile-apply,
.home-newsletter-form button,
.foot-subscribe button,
.spacart-consent-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--scu-2);
  font-family: inherit;
  font-size: var(--scu-fs-300);
  font-weight: var(--scu-fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  padding: var(--scu-3) var(--scu-5);
  border: 1px solid transparent;
  border-radius: var(--scu-r-md);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--scu-dur-fast) var(--scu-ease),
    border-color var(--scu-dur-fast) var(--scu-ease),
    color var(--scu-dur-fast) var(--scu-ease),
    box-shadow var(--scu-dur-fast) var(--scu-ease),
    transform var(--scu-dur-instant) var(--scu-ease);
}

button:active,
.main-button:active,
.add2cart:active,
.cart-checkout-button:active,
.checkout-submit:active { transform: translateY(1px); }

button[disabled],
button[aria-disabled="true"],
.main-button[disabled],
.add2cart[disabled] {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
  box-shadow: none;
}

/* --- Primaire : l'action d'achat. Une seule par écran. ------------------- */
.add2cart.add2cart,
.add2cart-product.add2cart-product,
.cart-checkout-button.cart-checkout-button,
.checkout-submit.checkout-submit,
.main-button.main-button,
.facet-mobile-apply.facet-mobile-apply {
  background: var(--scu-brand);
  color: var(--scu-on-brand);
  border-color: transparent;
  box-shadow: var(--scu-sh-1);
}
.add2cart.add2cart:hover,
.add2cart-product.add2cart-product:hover,
.cart-checkout-button.cart-checkout-button:hover,
.checkout-submit.checkout-submit:hover,
.main-button.main-button:hover,
.facet-mobile-apply.facet-mobile-apply:hover {
  background: var(--scu-brand-hover);
  box-shadow: var(--scu-sh-2);
}
.add2cart.add2cart:active,
.cart-checkout-button.cart-checkout-button:active,
.checkout-submit.checkout-submit:active { background: var(--scu-brand-active); }

/* --- Secondaire : contour neutre ---------------------------------------- */
.cart-update.cart-update,
.cart-clear.cart-clear,
.cart-quote-button.cart-quote-button,
.spacart-consent-manage.spacart-consent-manage,
.spacart-product-contact button,
.spacart-product-question-form button,
#product-reviews form button,
#product-share form button {
  background: var(--scu-surface);
  color: var(--scu-text);
  border-color: var(--scu-border-strong);
  box-shadow: var(--scu-sh-1);
}
.cart-update.cart-update:hover,
.cart-clear.cart-clear:hover,
.cart-quote-button.cart-quote-button:hover,
.spacart-product-contact button:hover,
.spacart-product-question-form button:hover,
#product-reviews form button:hover,
#product-share form button:hover {
  background: var(--scu-surface-hover);
  border-color: var(--scu-g-400);
}

/* --- Fantôme : icônes, actions de faible poids --------------------------- */
.save2wl, .add-to-wl-product,
.carousel-arrow,
.cart-remove,
.product-zoom-toggle,
.navigation-toggle,
.facet-toggle, .facet-more {
  background: var(--scu-surface);
  color: var(--scu-text-muted);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-md);
  box-shadow: var(--scu-sh-1);
  padding: var(--scu-2);
}
.save2wl:hover, .add-to-wl-product:hover,
.carousel-arrow:hover,
.product-zoom-toggle:hover,
.facet-toggle:hover, .facet-more:hover {
  color: var(--scu-text);
  border-color: var(--scu-border-strong);
  background: var(--scu-surface-hover);
}
.cart-remove:hover { color: var(--scu-danger); border-color: var(--scu-danger-line); background: var(--scu-danger-bg); }

/* Favori actif */
.save2wl.is-active, .add-to-wl-product.is-active,
.save2wl[aria-pressed="true"], .add-to-wl-product[aria-pressed="true"] {
  color: var(--scu-danger);
  border-color: var(--scu-danger-line);
  background: var(--scu-danger-bg);
}

/* Bouton de retour en haut */
.scu-to-top, [class*="to-top"], #back-to-top {
  width: 44px; height: 44px;
  border-radius: var(--scu-r-pill);
  background: var(--scu-g-900);
  color: var(--scu-g-0);
  border: 0;
  box-shadow: var(--scu-sh-3);
}
.scu-to-top:hover, [class*="to-top"]:hover { background: var(--scu-g-800); }


/* ==========================================================================
   05 · FORMULAIRES
   ========================================================================== */

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"],
select, textarea,
.na-field input, .na-field select, .na-field textarea,
.checkout-fields input, .checkout-fields select {
  width: 100%;
  font-family: inherit;
  font-size: var(--scu-fs-400);
  line-height: 1.4;
  color: var(--scu-text);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border-strong);
  border-radius: var(--scu-r-md);
  padding: 10px var(--scu-3);
  min-height: 44px;
  box-shadow: var(--scu-sh-inset);
  transition:
    border-color var(--scu-dur-fast) var(--scu-ease),
    box-shadow var(--scu-dur-fast) var(--scu-ease),
    background-color var(--scu-dur-fast) var(--scu-ease);
  appearance: none;
}

textarea { min-height: 120px; resize: vertical; line-height: var(--scu-lh-base); }

input::placeholder, textarea::placeholder { color: var(--scu-text-subtle); opacity: 1; }

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--scu-g-400);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--scu-border-focus);
  box-shadow: 0 0 0 3px var(--scu-brand-ring);
  background: var(--scu-surface);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--scu-bg-sunken);
  color: var(--scu-text-subtle);
  cursor: not-allowed;
  box-shadow: none;
}

input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"],
.na-field.has-error input, .checkout-fields .has-error input {
  border-color: var(--scu-danger);
  background: var(--scu-danger-bg);
}
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, .28); }

/* Chevron du <select>, dessiné en CSS — pas d'image à charger. */
select {
  padding-right: var(--scu-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--scu-text-muted) 50%),
    linear-gradient(135deg, var(--scu-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% + 1px),
    calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Labels et aides */
label, .na-field > span, .facet-panel-heading {
  display: block;
  font-size: var(--scu-fs-200);
  font-weight: var(--scu-fw-semibold);
  color: var(--scu-text);
  margin-bottom: var(--scu-2);
  letter-spacing: 0;
}
.na-help, .field-optional, .enter-3-chars, .cart-shipping-help {
  font-size: var(--scu-fs-200);
  color: var(--scu-text-muted);
  font-weight: var(--scu-fw-regular);
  margin-top: var(--scu-1);
}

/* Cases et radios : 18 px, cochage en accent natif, cible de 44 px héritée
   du label parent. */
input[type="checkbox"], input[type="radio"] {
  width: 18px; height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--scu-brand);
  border: 1px solid var(--scu-border-strong);
  border-radius: var(--scu-r-xs);
  cursor: pointer;
  box-shadow: none;
}
input[type="radio"] { border-radius: 50%; }

.facet-label, .checkout-option, .checkout-terms label,
.spacart-consent-options label, .cart-benefit-form label {
  display: flex;
  align-items: center;
  gap: var(--scu-3);
  font-size: var(--scu-fs-300);
  font-weight: var(--scu-fw-regular);
  color: var(--scu-text);
  margin: 0;
  padding: var(--scu-2) 0;
  cursor: pointer;
  border-radius: var(--scu-r-sm);
  transition: color var(--scu-dur-fast) var(--scu-ease);
}
.facet-label:hover, .checkout-option:hover { color: var(--scu-brand); }

/* Options du tunnel : vraies cartes sélectionnables */
.checkout-option {
  padding: var(--scu-4);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-md);
  background: var(--scu-surface);
  margin-bottom: var(--scu-2);
}
.checkout-option:hover { border-color: var(--scu-border-strong); background: var(--scu-surface-hover); }
.checkout-option:has(input:checked) {
  border-color: var(--scu-brand);
  background: var(--scu-brand-tint);
  box-shadow: 0 0 0 1px var(--scu-brand);
}

/* Messages d'état des formulaires (aria-live) */
.product-form-status, .na-feedback, .checkout-status,
.cart-update-status, .cart-quote-status, .cart-benefit-status,
.home-newsletter-status, .options-error {
  font-size: var(--scu-fs-200);
  border-radius: var(--scu-r-md);
  margin-top: var(--scu-3);
}
/* Ne JAMAIS déclarer `display` ici. Le thème masque ces blocs par
   `.options-error, .product-form-status { display:none }` et les révèle en
   style inline. Forcer un display les rendrait visibles en permanence. */
.product-form-status:not(:empty), .na-feedback:not(:empty),
.checkout-status:not(:empty), .cart-update-status:not(:empty),
.home-newsletter-status:not(:empty), .options-error:not(:empty) {
  padding: var(--scu-3) var(--scu-4);
  border: 1px solid var(--scu-info-line);
  background: var(--scu-info-bg);
  color: var(--scu-info);
  gap: var(--scu-2);
}
.options-error:not(:empty),
[class*="-status"].is-error:not(:empty) {
  border-color: var(--scu-danger-line);
  background: var(--scu-danger-bg);
  color: var(--scu-danger);
}
[class*="-status"].is-success:not(:empty) {
  border-color: var(--scu-success-line);
  background: var(--scu-success-bg);
  color: var(--scu-success);
}


/* ==========================================================================
   06 · HEADER & NAVIGATION
   ========================================================================== */

.sc-desktop-header {
  position: sticky;
  top: 0;
  z-index: var(--scu-z-header);
  background: var(--scu-surface);
  color: var(--scu-text);
  border-bottom: 1px solid var(--scu-border);
  box-shadow: none;
  transition:
    box-shadow var(--scu-dur-base) var(--scu-ease),
    border-color var(--scu-dur-base) var(--scu-ease);
}
/* Classe posée par spacart-ui.js au défilement */
.sc-desktop-header.is-stuck {
  box-shadow: var(--scu-sh-2);
  border-bottom-color: transparent;
}

.sc-header-belt {
  display: flex;
  align-items: center;
  gap: var(--scu-5);
  min-height: var(--scu-header-h);
  padding-block: var(--scu-3);
}

/* Marque : plus de bloc de texte brut sur deux lignes.
   `.logo-link` porte une largeur fixe dans le thème d'origine, ce qui tronquait
   le nom de la boutique — on la libère. */
.brand-wordmark {
  font-size: var(--scu-fs-600);
  font-weight: var(--scu-fw-bold);
  letter-spacing: var(--scu-tracking-tight);
  color: var(--scu-text);
  white-space: nowrap;
  line-height: 1.1;
  display: inline;
  overflow: visible;
}
.logo-link.logo-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  overflow: visible;
}
.logo-link img { max-height: 36px; width: auto; }

/* --- Recherche ----------------------------------------------------------
   Markup réel : form.searchform > div.search > input + button + .instant-search.
   Le conteneur en pilule est donc `.search`, pas le <form>.                 */
.searchform.searchform { flex: 1 1 auto; min-width: 0; margin: 0; }

.searchform .search {
  display: flex;
  align-items: stretch;
  position: relative;
  border: 1px solid var(--scu-border-strong);
  border-radius: var(--scu-r-pill);
  background: var(--scu-surface);
  transition: border-color var(--scu-dur-fast) var(--scu-ease),
              box-shadow var(--scu-dur-fast) var(--scu-ease);
}
.searchform .search:focus-within {
  border-color: var(--scu-brand);
  box-shadow: 0 0 0 3px var(--scu-brand-ring);
}
.searchform .search input[type="text"] {
  border: 0;
  border-radius: var(--scu-r-pill) 0 0 var(--scu-r-pill);
  box-shadow: none;
  background: transparent;
  padding-inline: var(--scu-5);
  height: 44px;
  min-height: 44px;
}
.searchform .search input[type="text"]:focus { box-shadow: none; outline: none; }
.searchform .search > button[type="submit"] {
  flex: 0 0 auto;
  width: 52px;
  height: 44px;
  min-height: 44px;
  border-radius: 0 var(--scu-r-pill) var(--scu-r-pill) 0;
  background: var(--scu-brand);
  color: var(--scu-on-brand);
  border: 0;
  padding: 0;
  box-shadow: none;
}
.searchform .search > button[type="submit"]:hover { background: var(--scu-brand-hover); }
.searchform .search > button svg { width: 18px; height: 18px; fill: currentColor; }

.enter-3-chars {
  position: absolute;
  top: calc(100% + var(--scu-2));
  left: 0;
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-md);
  padding: var(--scu-2) var(--scu-3);
  box-shadow: var(--scu-sh-2);
  z-index: var(--scu-z-popover);
}

/* Suggestions instantanées */
.instant-search {
  position: absolute;
  top: calc(100% + var(--scu-2));
  left: 0; right: 0;
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  box-shadow: var(--scu-sh-pop);
  overflow: hidden;
  z-index: var(--scu-z-popover);
  max-height: min(70vh, 560px);
  overflow-y: auto;
}
.instant-search a, .instant-search li > * {
  display: flex;
  gap: var(--scu-3);
  align-items: center;
  padding: var(--scu-3) var(--scu-4);
  border-bottom: 1px solid var(--scu-border);
}
.instant-search a:hover { background: var(--scu-brand-tint); color: var(--scu-text); }
.instant-search img { width: 40px; height: 40px; object-fit: contain; border-radius: var(--scu-r-sm); }

/* --- Actions du header : compte, commandes, panier ---------------------- */
.sc-header-preferences, .sc-header-account, .sc-header-orders, .sc-header-cart {
  position: relative;
  flex: 0 0 auto;
}
.sc-header-account > a, .sc-header-account > div,
.sc-header-orders, .sc-minicart-link, .cart-icon-btn, .language_select {
  display: flex;
  align-items: center;
  gap: var(--scu-2);
  padding: var(--scu-2) var(--scu-3);
  border-radius: var(--scu-r-md);
  font-size: var(--scu-fs-200);
  color: var(--scu-text);
  line-height: 1.25;
  transition: background-color var(--scu-dur-fast) var(--scu-ease);
}
.sc-header-account:hover > a, .sc-header-orders:hover, .sc-minicart-link:hover {
  background: var(--scu-bg-subtle);
  color: var(--scu-text);
}
/* Ligne 1 discrète / ligne 2 forte : la hiérarchie que l'original inversait */
.sc-header-account > a > :first-child,
.sc-header-orders > :first-child {
  display: block;
  font-size: var(--scu-fs-100);
  color: var(--scu-text-muted);
  font-weight: var(--scu-fw-regular);
}
.sc-header-account > a > :last-child,
.sc-header-orders > :last-child {
  display: block;
  font-weight: var(--scu-fw-semibold);
  font-size: var(--scu-fs-300);
}

/* Panier. Attention au piège du markup : `.minicart` est le CONTENEUR
   (#minicart-desktop / #minicart-mobile), pas la pastille. Le compteur est
   `.sc-minicart-icon > [data-cart-count]`. */
.minicart.minicart {
  position: static;
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  font: inherit;
}
.sc-minicart-link { display: flex; align-items: center; gap: var(--scu-2); padding: var(--scu-2) var(--scu-3); border-radius: var(--scu-r-md); color: var(--scu-text); }
.sc-minicart-link strong { font-size: var(--scu-fs-300); font-weight: var(--scu-fw-semibold); }
.sc-minicart-icon { position: relative; display: inline-flex; align-items: center; }
.sc-minicart-icon svg { width: 24px; height: 24px; fill: currentColor; }
.sc-minicart-icon [data-cart-count] {
  position: absolute;
  top: -6px; right: -9px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--scu-fw-bold);
  line-height: 1;
  color: var(--scu-on-brand);
  background: var(--scu-brand);
  border: 2px solid var(--scu-surface);
  border-radius: var(--scu-r-pill);
}

/* --- Popovers compte / langue ------------------------------------------- */
.sc-header-panel {
  position: absolute;
  top: calc(100% + var(--scu-2));
  right: 0;
  min-width: 232px;
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  box-shadow: var(--scu-sh-pop);
  padding: var(--scu-2);
  z-index: var(--scu-z-popover);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: top right;
  transition:
    opacity var(--scu-dur-fast) var(--scu-ease),
    transform var(--scu-dur-fast) var(--scu-ease-out),
    visibility 0s linear var(--scu-dur-fast);
}
.sc-header-popover[open] > .sc-header-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
.sc-header-popover a, .sc-header-panel a,
.sc-header-popover button, .sc-header-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px var(--scu-3);
  border-radius: var(--scu-r-sm);
  font-size: var(--scu-fs-300);
  font-weight: var(--scu-fw-regular);
  color: var(--scu-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  min-height: 40px;
}
.sc-header-popover a:hover, .sc-header-panel a:hover,
.sc-header-panel button:hover { background: var(--scu-bg-subtle); color: var(--scu-brand); }
.sc-header-panel form { border-top: 1px solid var(--scu-border); margin-top: var(--scu-2); padding-top: var(--scu-2); }

/* --- Barre de catégories ------------------------------------------------ */
.sc-catalogue-nav {
  background: var(--scu-surface);
  border-top: 1px solid var(--scu-border);
}
.sc-catalogue-nav ul {
  display: flex;
  align-items: center;
  gap: var(--scu-1);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  scrollbar-width: none;
}
.sc-catalogue-nav ul::-webkit-scrollbar { display: none; }
.sc-catalogue-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--scu-2);
  padding: var(--scu-3) var(--scu-4);
  font-size: var(--scu-fs-300);
  font-weight: var(--scu-fw-medium);
  color: var(--scu-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  border-radius: 0;
}
.sc-catalogue-nav a:hover { color: var(--scu-text); background: var(--scu-bg-subtle); }
.sc-catalogue-nav a.active, .sc-catalogue-nav .active > a,
.sc-catalogue-nav [aria-current="page"] {
  color: var(--scu-brand);
  border-bottom-color: var(--scu-brand);
  background: transparent;
}
.sc-catalogue-all a { font-weight: var(--scu-fw-semibold); color: var(--scu-text); }

/* Méga-menu */
.sc-mega-menu { position: relative; }
.sc-mega-panel {
  position: absolute;
  top: 100%; left: 0;
  min-width: 620px;
  max-width: min(94vw, var(--scu-container));
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: 0 0 var(--scu-r-lg) var(--scu-r-lg);
  box-shadow: var(--scu-sh-pop);
  padding: var(--scu-6);
  z-index: var(--scu-z-popover);
}
.sc-mega-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--scu-5) var(--scu-7);
}
.sc-mega-category > a:first-child,
.sc-mega-category > strong {
  display: block;
  font-size: var(--scu-fs-200);
  font-weight: var(--scu-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--scu-tracking-wide);
  color: var(--scu-text-subtle);
  padding-bottom: var(--scu-2);
  margin-bottom: var(--scu-2);
  border-bottom: 1px solid var(--scu-border);
}
.sc-mega-category a { display: block; padding: var(--scu-1) 0; font-size: var(--scu-fs-300); color: var(--scu-text-muted); }
.sc-mega-category a:hover { color: var(--scu-brand); }

/* Bandeau promotionnel */
.spacart-promo-bar {
  background: var(--scu-g-900);
  color: var(--scu-g-0);
  font-size: var(--scu-fs-200);
  text-align: center;
  padding: var(--scu-2) var(--scu-4);
  letter-spacing: .01em;
}
.spacart-promo-bar a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* Barre de chargement en tête de page */
.loading-header, .cssload-container { pointer-events: none; }
.loading-header {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--scu-brand);
  z-index: calc(var(--scu-z-header) + 1);
}

/* --- Header mobile ------------------------------------------------------
   Ordre du markup : minicart, toggle, logo, recherche. On remet l'ordre
   visuel attendu — menu | marque | panier, puis la recherche pleine largeur. */
#head_mobile {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--scu-2) var(--scu-3);
  padding: var(--scu-2) var(--scu-gutter) var(--scu-3);
  width: 100%;
  max-width: var(--scu-container);
  margin-inline: auto;
  background: var(--scu-surface);
  border-bottom: 1px solid var(--scu-border);
}
#head_mobile .navigation-toggle {
  order: 1;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--scu-text);
  border-color: transparent;
  box-shadow: none;
}
#head_mobile .navigation-toggle svg { width: 22px; height: 22px; fill: currentColor; }
#head_mobile .logo-link { order: 2; flex: 1 1 auto; min-width: 0; }
#head_mobile .brand-wordmark {
  font-size: var(--scu-fs-500);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#head_mobile .minicart { order: 3; flex: 0 0 auto; }
#head_mobile .searchform { order: 4; flex: 1 0 100%; width: 100%; }
.mobile-menu-fade {
  position: fixed;
  inset: 0;
  background: rgba(22, 26, 31, .5);
  backdrop-filter: blur(2px);
  z-index: calc(var(--scu-z-drawer) - 1);
}
.mobile-left_menu {
  background: var(--scu-surface);
  box-shadow: var(--scu-sh-pop);
  z-index: var(--scu-z-drawer);
  padding: var(--scu-4);
}
.mobile-menu-links a, .mobile-left_menu a {
  display: block;
  padding: var(--scu-3) var(--scu-2);
  border-bottom: 1px solid var(--scu-border);
  font-size: var(--scu-fs-400);
}


/* ==========================================================================
   07 · FIL D'ARIANE
   ========================================================================== */

.bread_crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--scu-1) var(--scu-2);
  font-size: var(--scu-fs-200);
  color: var(--scu-text-muted);
  padding-block: var(--scu-4);
  margin: 0;
}
.bread_crumbs a { color: var(--scu-text-muted); }
.bread_crumbs a:hover { color: var(--scu-brand); text-decoration: underline; }
/* Le séparateur est déjà dans le markup (<span aria-hidden="true">/</span>) :
   on le colore, on n'en ajoute surtout pas un second en ::after. */
.bread_crumbs [aria-hidden="true"] { color: var(--scu-g-300); }
.bread_crumbs > *:last-child { color: var(--scu-text); font-weight: var(--scu-fw-medium); }


/* ==========================================================================
   08 · CARTE PRODUIT (.res-item) — grille, carrousel, « consultés »
   ========================================================================== */

.products, .spacart-home-grid, .spacart-recent-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: var(--scu-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.res-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--scu-2);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  padding: var(--scu-4);
  overflow: hidden;
  transition:
    border-color var(--scu-dur-base) var(--scu-ease),
    box-shadow var(--scu-dur-base) var(--scu-ease),
    transform var(--scu-dur-base) var(--scu-ease-out);
}
.res-item:hover {
  border-color: var(--scu-border-strong);
  box-shadow: var(--scu-sh-2);
  transform: translateY(-2px);
}
.res-item:focus-within { border-color: var(--scu-brand); }

/* Le visuel : ratio fixe, contain, jamais déformé ni rogné. */
.res-item .photo, .res-item > a:has(img), .res-zoom {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--scu-bg-subtle);
  border-radius: var(--scu-r-md);
  overflow: hidden;
}
.res-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--scu-3);
  transition: transform var(--scu-dur-slow) var(--scu-ease-out);
}
.res-item:hover img { transform: scale(1.04); }

.res-name, .res-name a {
  font-size: var(--scu-fs-300);
  font-weight: var(--scu-fw-medium);
  line-height: var(--scu-lh-snug);
  color: var(--scu-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * var(--scu-lh-snug) * var(--scu-fs-300));
}
.res-name a:hover { color: var(--scu-brand); }

.res-price {
  font-size: var(--scu-fs-600);
  font-weight: var(--scu-fw-bold);
  color: var(--scu-text);
  letter-spacing: var(--scu-tracking-tight);
  margin-top: auto;
}
.res-price del, .res-price .old-price {
  font-size: var(--scu-fs-200);
  font-weight: var(--scu-fw-regular);
  color: var(--scu-text-subtle);
  margin-left: var(--scu-2);
}

.res-rating { display: flex; align-items: center; gap: var(--scu-1); font-size: var(--scu-fs-200); color: var(--scu-warning); }
.card-no-reviews { font-size: var(--scu-fs-100); color: var(--scu-text-subtle); }

.res-buttons { display: flex; gap: var(--scu-2); margin-top: var(--scu-2); }
.res-buttons .add2cart { flex: 1 1 auto; }

/* Favori en surimpression, révélé au survol/focus (toujours visible au tactile) */
.res-item > .save2wl, .res-item > .add-to-wl-product {
  position: absolute;
  top: var(--scu-3);
  right: var(--scu-3);
  z-index: 2;
  width: 36px; height: 36px;
  min-height: 36px;
  border-radius: var(--scu-r-pill);
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, .88);
  opacity: 0;
  transform: scale(.9);
  transition: opacity var(--scu-dur-fast) var(--scu-ease), transform var(--scu-dur-fast) var(--scu-ease-out);
}
.res-item:hover > .save2wl, .res-item:focus-within > .save2wl,
.res-item:hover > .add-to-wl-product, .res-item:focus-within > .add-to-wl-product {
  opacity: 1;
  transform: scale(1);
}
@media (hover: none) {
  .res-item > .save2wl, .res-item > .add-to-wl-product { opacity: 1; transform: none; }
}

/* Badges */
.product-bestseller, .out-of-stock {
  position: absolute;
  top: var(--scu-3);
  left: var(--scu-3);
  z-index: 2;
  font-size: var(--scu-fs-100);
  font-weight: var(--scu-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--scu-tracking-wide);
  padding: 4px var(--scu-2);
  border-radius: var(--scu-r-xs);
  line-height: 1.4;
}
.product-bestseller { background: var(--scu-warning-bg); color: var(--scu-warning); border: 1px solid var(--scu-warning-line); }
.out-of-stock { background: var(--scu-g-100); color: var(--scu-text-muted); border: 1px solid var(--scu-border); }
.res-item .res-buttons .out-of-stock { position:static; inset:auto; max-width:100%; white-space:normal; padding:4px 6px; }

/* --- Carrousel ---------------------------------------------------------- */
.carousel-pr { position: relative; min-width: 0; }
.carousel-wrapper { position: relative; padding-inline: 0; width: 100%; }
.carousel-wrapper .products {
  display: flex;
  gap: var(--scu-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--scu-1);
  padding-block: var(--scu-2) var(--scu-4);
  scrollbar-width: none;
}
.carousel-wrapper::-webkit-scrollbar { display: none; }
.carousel-wrapper .products > .res-item { flex: 0 0 196px; scroll-snap-align: start; }

.carousel-arrow {
  position: absolute;
  top: 40%;
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: var(--scu-r-pill);
  background: var(--scu-surface);
  box-shadow: var(--scu-sh-3);
  border-color: var(--scu-border);
}
.carousel-prev { left: calc(var(--scu-5) * -1); }
.carousel-next { right: calc(var(--scu-5) * -1); }
.carousel-arrow[disabled] { opacity: 0; pointer-events: none; }


/* ==========================================================================
   09 · ACCUEIL
   ========================================================================== */

.spacart-home-section { padding-block: var(--scu-9); }
.spacart-home-section + .spacart-home-section { border-top: 1px solid var(--scu-border); }

.spacart-home-section > h2, .spacart-home-section > .scu-section-head h2 {
  font-size: var(--scu-fs-800);
  margin-bottom: var(--scu-6);
}

.spacart-home-intro {
  background:
    radial-gradient(120% 140% at 12% 0%, var(--scu-brand-tint) 0%, transparent 62%),
    var(--scu-bg-subtle);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  padding: clamp(var(--scu-7), 5vw, var(--scu-11));
  margin-block: var(--scu-6);
}
.spacart-home-intro h1 {
  font-size: clamp(var(--scu-fs-800), 4.2vw, 2.75rem);
  max-width: 22ch;
  margin-bottom: var(--scu-4);
}
.spacart-home-intro p {
  font-size: var(--scu-fs-500);
  color: var(--scu-text-muted);
  max-width: 62ch;
  line-height: var(--scu-lh-loose);
}

.spacart-home-usp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--scu-4);
  list-style: none;
  padding: 0;
  margin-block: var(--scu-6);
}
.spacart-home-usp > * {
  display: flex;
  gap: var(--scu-3);
  align-items: flex-start;
  padding: var(--scu-4) var(--scu-5);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  font-size: var(--scu-fs-300);
  color: var(--scu-text-muted);
}
.spacart-home-usp strong { display: block; color: var(--scu-text); font-weight: var(--scu-fw-semibold); margin-bottom: 2px; }

.spacart-home-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--scu-4);
  list-style: none;
  padding: 0;
}
.spacart-home-category-grid a {
  display: flex;
  flex-direction: column;
  gap: var(--scu-3);
  padding: var(--scu-5);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  font-weight: var(--scu-fw-medium);
  transition: border-color var(--scu-dur-base) var(--scu-ease),
              box-shadow var(--scu-dur-base) var(--scu-ease),
              transform var(--scu-dur-base) var(--scu-ease-out);
}
.spacart-home-category-grid a:hover {
  border-color: var(--scu-brand);
  box-shadow: var(--scu-sh-2);
  transform: translateY(-2px);
}

/* Newsletter accueil + pied de page */
.spacart-home-newsletter, .foot-subscribe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--scu-5);
  padding: var(--scu-7);
  background: var(--scu-bg-subtle);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
}
.spacart-home-newsletter h2, .foot-subscribe h2, .foot-subscribe h3 {
  font-size: var(--scu-fs-700);
  margin: 0;
}
.home-newsletter-form, .foot-subscribe form {
  display: flex;
  gap: var(--scu-2);
  flex: 1 1 380px;
  max-width: 520px;
}
.home-newsletter-form input, .foot-subscribe input[type="email"] { flex: 1 1 auto; }
.home-newsletter-form button, .foot-subscribe button {
  flex: 0 0 auto;
  background: var(--scu-brand);
  color: var(--scu-on-brand);
  padding-inline: var(--scu-6);
}
.home-newsletter-form button:hover, .foot-subscribe button:hover { background: var(--scu-brand-hover); }


/* ==========================================================================
   10 · CATALOGUE & FACETTES
   ========================================================================== */

.withleftmenu {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--scu-7);
  align-items: start;
  padding-block: var(--scu-6) var(--scu-10);
}
.no_left_menu { grid-template-columns: minmax(0, 1fr); }

.search-page-heading { grid-column: 1 / -1; margin-bottom: 0; }
.search-page-heading h1 { font-size: var(--scu-fs-800); }

/* --- Colonne de filtres ------------------------------------------------- */
.left_filter {
  position: sticky;
  top: calc(var(--scu-header-h) + var(--scu-4));
  max-height: calc(100vh - var(--scu-header-h) - var(--scu-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--scu-2);
}

.facet-group, [class^="filter-box-"] {
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  background: var(--scu-surface);
  padding: var(--scu-4);
  margin-bottom: var(--scu-3);
}

.facet-panel-heading, .facet-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--scu-fs-300);
  font-weight: var(--scu-fw-semibold);
  color: var(--scu-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 var(--scu-2);
  min-height: 32px;
  text-align: left;
}
.facet-toggle::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--scu-text-muted);
  border-bottom: 1.5px solid var(--scu-text-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--scu-dur-fast) var(--scu-ease);
}
.facet-toggle[aria-expanded="false"]::after { transform: rotate(-45deg) translate(-2px, 2px); }

.facet-options { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.facet-option { margin: 0; }
.facet-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.facet-count {
  flex: 0 0 auto;
  font-size: var(--scu-fs-100);
  color: var(--scu-text-subtle);
  background: var(--scu-bg-sunken);
  border-radius: var(--scu-r-pill);
  padding: 1px 7px;
}
.facet-option:has(input:checked) .facet-value { font-weight: var(--scu-fw-semibold); color: var(--scu-brand); }
.facet-option:has(input:checked) .facet-count { background: var(--scu-brand-tint); color: var(--scu-brand); }

.facet-value-search input { min-height: 38px; font-size: var(--scu-fs-200); margin-bottom: var(--scu-2); }
.facet-more, .facet-no-match {
  font-size: var(--scu-fs-200);
  color: var(--scu-brand);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: var(--scu-2) 0 0;
  min-height: 32px;
  text-align: left;
}
.facet-more:hover { text-decoration: underline; background: transparent; }
.facet-options.is-overflow { max-height: 232px; overflow-y: auto; }
/* Legacy quick views keep this class while their controller reveals them inline. */
.hidden { display: none; }

/* Résumé des filtres actifs, en puces retirables */
.facet-summary { display: flex; flex-wrap: wrap; gap: var(--scu-2); margin-bottom: var(--scu-4); }
.facet-summary a, .facet-summary button {
  display: inline-flex;
  align-items: center;
  gap: var(--scu-2);
  font-size: var(--scu-fs-200);
  padding: 5px var(--scu-3);
  min-height: 30px;
  background: var(--scu-brand-tint);
  color: var(--scu-brand);
  border: 1px solid var(--scu-brand-line);
  border-radius: var(--scu-r-pill);
}
.facet-summary a:hover, .facet-summary button:hover { background: var(--scu-brand); color: var(--scu-on-brand); border-color: transparent; }

/* --- Barre d'outils du catalogue ---------------------------------------- */
.catalog-toolbar, .products-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--scu-4);
  padding: var(--scu-3) var(--scu-4);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  margin-bottom: var(--scu-5);
}
.catalog-count, .facet-result-count {
  font-size: var(--scu-fs-300);
  color: var(--scu-text-muted);
}
.catalog-count strong { color: var(--scu-text); font-weight: var(--scu-fw-semibold); }
.catalog-sort, .sort-by { display: flex; align-items: center; gap: var(--scu-2); }
.catalog-sort label, .sort-by label { margin: 0; white-space: nowrap; font-weight: var(--scu-fw-regular); color: var(--scu-text-muted); }
.catalog-sort select, .sort-by select { width: auto; min-width: 180px; min-height: 38px; font-size: var(--scu-fs-300); }

/* Pagination */
.products-nav a, .products-nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px; height: 38px;
  padding-inline: var(--scu-2);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-md);
  font-size: var(--scu-fs-300);
  background: var(--scu-surface);
}
.products-nav a:hover { border-color: var(--scu-border-strong); background: var(--scu-surface-hover); }
.products-nav .active, .products-nav [aria-current="page"] {
  background: var(--scu-brand);
  color: var(--scu-on-brand);
  border-color: transparent;
  font-weight: var(--scu-fw-semibold);
}

.products-results { min-width: 0; }
.product-empty-state, .facet-no-match {
  text-align: center;
  padding: var(--scu-10) var(--scu-5);
  color: var(--scu-text-muted);
  background: var(--scu-bg-subtle);
  border: 1px dashed var(--scu-border-strong);
  border-radius: var(--scu-r-xl);
}

/* Tiroir de filtres mobile (classe posée par le JS) */
.left_filter.scu-drawer-open {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 380px);
  max-height: none;
  background: var(--scu-surface);
  z-index: var(--scu-z-drawer);
  box-shadow: var(--scu-sh-pop);
  padding: var(--scu-5);
  overflow-y: auto;
}
.facet-mobile-apply {
  position: sticky;
  bottom: 0;
  width: 100%;
  margin-top: var(--scu-4);
}


/* ==========================================================================
   11 · FICHE PRODUIT
   ========================================================================== */

.product-page { padding-block: 0 var(--scu-10); }

.product-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: var(--scu-8);
  align-items: start;
  padding-bottom: var(--scu-8);
  border-bottom: 1px solid var(--scu-border);
}

/* --- Titre -------------------------------------------------------------- */
.product-heading { margin-bottom: var(--scu-4); }
.product-title {
  font-size: clamp(var(--scu-fs-700), 2.4vw, var(--scu-fs-800));
  font-weight: var(--scu-fw-semibold);
  line-height: var(--scu-lh-snug);
  margin-bottom: var(--scu-2);
}
.product-reference, .product-sku {
  font-size: var(--scu-fs-200);
  color: var(--scu-text-muted);
}
.product-reference .product-sku, .product-sku {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: var(--scu-fs-200);
  color: var(--scu-text);
  background: var(--scu-bg-sunken);
  padding: 1px 6px;
  border-radius: var(--scu-r-xs);
}

/* --- Galerie ------------------------------------------------------------ */
.product-media-panel { position: sticky; top: calc(var(--scu-header-h) + var(--scu-4)); }

.product-gallery, .product-gallery-main, .product-main-image, .product-zoom-surface {
  position: relative;
  border-radius: var(--scu-r-xl);
  overflow: hidden;
}
.product-gallery-main, .product-zoom-surface {
  aspect-ratio: 1 / 1;
  background: var(--scu-bg-subtle);
  border: 1px solid var(--scu-border);
  display: grid;
  place-items: center;
}
.product-image, .product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--scu-7);
  cursor: zoom-in;
}

.product-zoom-toggle {
  position: absolute;
  top: var(--scu-4);
  right: var(--scu-4);
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: var(--scu-r-pill);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  box-shadow: var(--scu-sh-2);
}

/* Miniatures — le JS les génère depuis les images disponibles */
.scu-thumbs {
  display: flex;
  gap: var(--scu-2);
  margin-top: var(--scu-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.scu-thumbs::-webkit-scrollbar { display: none; }
.scu-thumb {
  flex: 0 0 72px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-md);
  background: var(--scu-bg-subtle);
  padding: var(--scu-1);
  cursor: pointer;
  transition: border-color var(--scu-dur-fast) var(--scu-ease);
}
.scu-thumb img { width: 100%; height: 100%; object-fit: contain; }
.scu-thumb:hover { border-color: var(--scu-border-strong); }
.scu-thumb[aria-current="true"] { border-color: var(--scu-brand); box-shadow: 0 0 0 1px var(--scu-brand); }

/* --- Buy box ------------------------------------------------------------ */
.product-summary { display: flex; flex-direction: column; gap: var(--scu-5); }

.product-purchase {
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  padding: var(--scu-6);
  box-shadow: var(--scu-sh-2);
  display: flex;
  flex-direction: column;
  gap: var(--scu-4);
}

.product-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--scu-3); }
.product-details-price {
  font-size: clamp(1.75rem, 3.6vw, 2.125rem);
  font-weight: var(--scu-fw-bold);
  letter-spacing: var(--scu-tracking-tight);
  color: var(--scu-text);
  line-height: 1.1;
}
/* Décimales et devise en retrait — hiérarchie interne du prix (JS). */
.product-details-price .scu-price-frac { font-size: .56em; font-weight: var(--scu-fw-semibold); vertical-align: super; margin-left: 1px; }
.product-details-price .scu-price-cur { font-size: .56em; font-weight: var(--scu-fw-semibold); color: var(--scu-text-muted); margin-left: 3px; }
.product-details-price del { font-size: var(--scu-fs-400); font-weight: var(--scu-fw-regular); color: var(--scu-text-subtle); }

.product-weight, .product-weight-line { font-size: var(--scu-fs-200); color: var(--scu-text-muted); }

/* Disponibilité en pastille */
.product-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--scu-2);
  font-size: var(--scu-fs-200);
  font-weight: var(--scu-fw-semibold);
  padding: 5px var(--scu-3);
  border-radius: var(--scu-r-pill);
  border: 1px solid var(--scu-border);
  background: var(--scu-bg-subtle);
  color: var(--scu-text-muted);
  align-self: flex-start;
}
.product-stock::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.product-stock.is-available {
  background: var(--scu-success-bg);
  color: var(--scu-success);
  border-color: var(--scu-success-line);
}
.product-stock.out-of-stock, .product-stock.is-unavailable {
  background: var(--scu-danger-bg);
  color: var(--scu-danger);
  border-color: var(--scu-danger-line);
  position: static;
  text-transform: none;
  letter-spacing: 0;
}

/* Ligne d'achat */
.product-buy-row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 48px;
  align-items: end;
  gap: var(--scu-3);
}
.product-quantity { display: flex; flex-direction: column; gap: var(--scu-2); }
.product-quantity label { margin: 0; }
.product-quantity input { width:100%; min-width:0; box-sizing:border-box; }
.product_popup .product-buy-row { grid-template-columns:minmax(0,1fr) 48px; }
.product_popup .product-buy-row .add2cart-product { grid-column:1 / -1; width:100%; }
.product_popup .product-buy-row .add-to-wl-product { grid-column:2; grid-row:1; align-self:end; }

/* Compteur : boutons − / + injectés par le JS */
.scu-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--scu-border-strong);
  border-radius: var(--scu-r-md);
  overflow: hidden;
  background: var(--scu-surface);
  height: 48px;
}
.scu-stepper button {
  width: 40px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--scu-surface);
  color: var(--scu-text);
  font-size: var(--scu-fs-500);
  box-shadow: none;
  padding: 0;
}
.scu-stepper button:hover { background: var(--scu-bg-sunken); }
.scu-stepper input {
  width: 52px;
  min-height: 0;
  height: 100%;
  text-align: center;
  border: 0;
  border-inline: 1px solid var(--scu-border);
  border-radius: 0;
  box-shadow: none;
  font-weight: var(--scu-fw-semibold);
  -moz-appearance: textfield;
}
.scu-stepper input::-webkit-outer-spin-button,
.scu-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-purchase .add2cart, .product-purchase .add2cart-product {
  height: 48px;
  font-size: var(--scu-fs-400);
  border-radius: var(--scu-r-md);
}
.product-purchase .save2wl, .product-purchase .add-to-wl-product {
  width: 48px; height: 48px;
  position: static;
  opacity: 1;
  transform: none;
  border-radius: var(--scu-r-md);
}

/* Bandeau de réassurance sous le CTA (généré par le JS si absent) */
.scu-trust {
  display: grid;
  gap: var(--scu-2);
  padding-top: var(--scu-4);
  border-top: 1px solid var(--scu-border);
  font-size: var(--scu-fs-200);
  color: var(--scu-text-muted);
}
.scu-trust > * { display: flex; align-items: center; gap: var(--scu-2); }

/* --- Navigation des sections ------------------------------------------- */
.product-section-nav {
  position: sticky;
  top: var(--scu-header-h);
  z-index: calc(var(--scu-z-header) - 1);
  display: flex;
  gap: var(--scu-1);
  overflow-x: auto;
  background: var(--scu-surface);
  border-bottom: 1px solid var(--scu-border);
  margin-bottom: var(--scu-7);
  scrollbar-width: none;
}
.product-section-nav::-webkit-scrollbar { display: none; }
.product-section-nav a {
  padding: var(--scu-4) var(--scu-4);
  font-size: var(--scu-fs-300);
  font-weight: var(--scu-fw-medium);
  color: var(--scu-text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.product-section-nav a:hover { color: var(--scu-text); }
.product-section-nav a.is-active, .product-section-nav a[aria-current="true"] {
  color: var(--scu-brand);
  border-bottom-color: var(--scu-brand);
}

/* --- Sections de contenu ------------------------------------------------ */
.product-content-section { padding-block: var(--scu-7); }
.product-content-section + .product-content-section { border-top: 1px solid var(--scu-border); }

.product-section-heading, .product-content-section > h2 {
  font-size: var(--scu-fs-700);
  font-weight: var(--scu-fw-semibold);
  margin-bottom: var(--scu-4);
  padding: 0;
  border: 0;               /* supprime le filet orange hérité */
  color: var(--scu-text);
}

.product-description {
  font-size: var(--scu-fs-500);
  line-height: var(--scu-lh-loose);
  color: var(--scu-text-muted);
  max-width: 72ch;
}
.product-description h2, .product-description h3 { color: var(--scu-text); margin-top: var(--scu-6); }
.product-description ul, .product-description ol { padding-left: var(--scu-5); margin-bottom: var(--scu-4); }
.product-description li { margin-bottom: var(--scu-2); }
.product-description table { width: 100%; border-collapse: collapse; margin-block: var(--scu-4); }
.product-description th, .product-description td {
  padding: var(--scu-3) var(--scu-4);
  border-bottom: 1px solid var(--scu-border);
  text-align: left;
  font-size: var(--scu-fs-300);
}
.product-description th { background: var(--scu-bg-subtle); font-weight: var(--scu-fw-semibold); color: var(--scu-text); }

/* Formulaires de section : contact vendeur, question, avis, recommandation */
.spacart-product-contact form,
.spacart-product-question-form,
#product-reviews form,
#product-share form {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: var(--scu-4);
  padding: var(--scu-5);
  background: var(--scu-bg-subtle);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
}
.spacart-product-contact form input[type="hidden"],
#product-reviews form input[type="hidden"] { display: none; }

.spacart-product-contact > p,
.spacart-product-questions > p,
#product-questions > p {
  font-size: var(--scu-fs-300);
  color: var(--scu-text-muted);
  max-width: 68ch;
  margin-bottom: var(--scu-4);
}

/* Notation par étoiles — radios natifs restylés */
.rating-fieldset {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: var(--scu-1);
  border: 0;
  padding: 0;
  margin: 0;
}
.rating-fieldset > legend, .rating-fieldset > :first-child {
  float: left;
  width: 100%;
  font-size: var(--scu-fs-200);
  font-weight: var(--scu-fw-semibold);
  margin-bottom: var(--scu-2);
}
.rating-choice { position: relative; cursor: pointer; margin: 0; min-height: 0; }
.rating-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating-choice > span, .rating-choice > generic { display: none; }
.rating-choice::before {
  content: "★";
  font-size: 26px;
  line-height: 1;
  color: var(--scu-g-300);
  transition: color var(--scu-dur-instant) var(--scu-ease);
}
.rating-choice:hover::before,
.rating-choice:hover ~ .rating-choice::before,
.rating-fieldset:not(:hover) .rating-choice:has(input:checked)::before,
.rating-fieldset:not(:hover) .rating-choice:has(input:checked) ~ .rating-choice::before {
  color: #e8a317;
}
.rating-choice:has(input:focus-visible)::before { outline: 2px solid var(--scu-brand); outline-offset: 2px; }

/* Liste des questions et avis */
.spacart-question-list, #product-reviews ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--scu-5);
  display: grid;
  gap: var(--scu-3);
}
.spacart-question-list > li, #product-reviews ul > li {
  padding: var(--scu-4) var(--scu-5);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
}

/* Bloc « consultés récemment » dans la colonne d'achat */
.spacart-recently, .spacart-recent-products { margin-top: var(--scu-2); }
.spacart-recently h2, .spacart-recently h3 {
  font-size: var(--scu-fs-200);
  font-weight: var(--scu-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--scu-tracking-wide);
  color: var(--scu-text-subtle);
  border: 0;
  padding: 0;
  margin-bottom: var(--scu-3);
}
.spacart-recently ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--scu-2); }
.spacart-recently li a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--scu-3);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-md);
  font-size: var(--scu-fs-300);
  text-decoration: none;
}
.spacart-recently li a:hover { border-color: var(--scu-brand); background: var(--scu-brand-tint); }
.spacart-recently li a > :last-child { font-size: var(--scu-fs-100); color: var(--scu-text-subtle); }

.product-assistance a { font-size: var(--scu-fs-300); color: var(--scu-brand); text-decoration: underline; }


/* ==========================================================================
   12 · PANIER
   ========================================================================== */

.cart-page { padding-block: var(--scu-6) var(--scu-10); }
.cart-page-heading h1 { font-size: var(--scu-fs-800); margin-bottom: var(--scu-6); }

.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--scu-7);
  align-items: start;
}

.cart-items-panel {
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  overflow: hidden;
}

.carttable { width: 100%; border-collapse: collapse; }
.carttable th {
  font-size: var(--scu-fs-100);
  font-weight: var(--scu-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--scu-tracking-wide);
  color: var(--scu-text-subtle);
  text-align: left;
  padding: var(--scu-4) var(--scu-5);
  background: var(--scu-bg-subtle);
  border-bottom: 1px solid var(--scu-border);
}
.carttable td {
  padding: var(--scu-5);
  border-bottom: 1px solid var(--scu-border);
  vertical-align: middle;
  font-size: var(--scu-fs-300);
}
.carttable tr:last-child td { border-bottom: 0; }
.carttable .image img {
  width: 76px; height: 76px;
  object-fit: contain;
  background: var(--scu-bg-subtle);
  border-radius: var(--scu-r-md);
  padding: var(--scu-1);
}
.cart-quantity input { width: 76px; text-align: center; min-height: 40px; }

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--scu-2);
  padding: var(--scu-4) var(--scu-5);
  border-top: 1px solid var(--scu-border);
  background: var(--scu-bg-subtle);
}
.cart-continue-link { margin-right: auto; align-self: center; font-size: var(--scu-fs-300); color: var(--scu-brand); }

/* --- Récapitulatif ------------------------------------------------------ */
.cart-summary {
  position: sticky;
  top: calc(var(--scu-header-h) + var(--scu-4));
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  padding: var(--scu-6);
  box-shadow: var(--scu-sh-2);
  display: flex;
  flex-direction: column;
  gap: var(--scu-3);
}
.cart-summary-line {
  display: flex;
  justify-content: space-between;
  gap: var(--scu-4);
  font-size: var(--scu-fs-300);
  color: var(--scu-text-muted);
}
.cart-summary-line > :last-child { color: var(--scu-text); font-weight: var(--scu-fw-medium); }
.cart-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--scu-4);
  padding-top: var(--scu-4);
  margin-top: var(--scu-1);
  border-top: 1px solid var(--scu-border);
  font-size: var(--scu-fs-600);
  font-weight: var(--scu-fw-bold);
}
.cart-summary-total > :last-child { font-size: var(--scu-fs-700); letter-spacing: var(--scu-tracking-tight); }
.cart-tax-included { font-size: var(--scu-fs-100); color: var(--scu-text-subtle); }
.cart-checkout-button { width: 100%; height: 48px; font-size: var(--scu-fs-400); margin-top: var(--scu-2); }

/* Codes promo / avoirs */
.cart-benefits {
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-lg);
  padding: var(--scu-4);
  background: var(--scu-bg-subtle);
}
.cart-benefit-form { display: flex; gap: var(--scu-2); align-items: flex-end; }
.cart-benefit-control { flex: 1 1 auto; }
.cart-benefit-remove { background: transparent; border: 0; box-shadow: none; color: var(--scu-danger); font-size: var(--scu-fs-200); padding: 0; min-height: 32px; }

.cart-recovery {
  border: 1px solid var(--scu-info-line);
  background: var(--scu-info-bg);
  border-radius: var(--scu-r-lg);
  padding: var(--scu-4) var(--scu-5);
  margin-bottom: var(--scu-5);
}
.cart-recovery-list { list-style: none; padding: 0; margin: var(--scu-3) 0 0; display: grid; gap: var(--scu-2); }
.cart-recovery-actions { display: flex; gap: var(--scu-2); margin-top: var(--scu-3); }


/* ==========================================================================
   13 · TUNNEL DE COMMANDE
   ========================================================================== */

.checkout-container { padding-block: var(--scu-6) var(--scu-10); }
.checkout-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--scu-7);
  align-items: start;
}
.checkout-wide { grid-template-columns: minmax(0, 1fr); }

.checkout-main { display: flex; flex-direction: column; gap: var(--scu-5); }

.checkout-main > section, .checkout-business, .spacart-extension-panel, .spacart-pickup-selector {
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  padding: var(--scu-6);
}
.checkout-main > section > h2, .checkout-business > h2 {
  font-size: var(--scu-fs-600);
  font-weight: var(--scu-fw-semibold);
  margin-bottom: var(--scu-5);
  padding-bottom: var(--scu-3);
  border-bottom: 1px solid var(--scu-border);
}

.checkout-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--scu-4);
}
.checkout-fields > .checkout-wide, .checkout-fields > [data-full] { grid-column: 1 / -1; }

.checkout-summary {
  position: sticky;
  top: calc(var(--scu-header-h) + var(--scu-4));
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  padding: var(--scu-6);
  box-shadow: var(--scu-sh-2);
}
.checkout-line {
  display: flex;
  justify-content: space-between;
  gap: var(--scu-3);
  padding-block: var(--scu-2);
  font-size: var(--scu-fs-300);
  color: var(--scu-text-muted);
}
.checkout-line-total { color: var(--scu-text); font-weight: var(--scu-fw-medium); white-space: nowrap; }
.checkout-total-row, .checkout-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--scu-4);
  padding-top: var(--scu-4);
  margin-top: var(--scu-3);
  border-top: 1px solid var(--scu-border);
  font-size: var(--scu-fs-600);
  font-weight: var(--scu-fw-bold);
}
.checkout-submit { width: 100%; height: 50px; font-size: var(--scu-fs-500); margin-top: var(--scu-4); }
.checkout-terms { font-size: var(--scu-fs-200); color: var(--scu-text-muted); margin-top: var(--scu-4); }
.back-to-cart { display: inline-flex; align-items: center; gap: var(--scu-2); font-size: var(--scu-fs-300); color: var(--scu-text-muted); margin-bottom: var(--scu-4); }
.back-to-cart:hover { color: var(--scu-brand); }


/* ==========================================================================
   14 · ESPACE COMPTE (.na-*)
   ========================================================================== */

.na-account { padding-block: var(--scu-6) var(--scu-10); }
.na-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--scu-7);
  align-items: start;
}
.na-heading h1 { font-size: var(--scu-fs-800); margin-bottom: var(--scu-6); }

.na-account-menu, .na-nav {
  position: sticky;
  top: calc(var(--scu-header-h) + var(--scu-4));
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  padding: var(--scu-3);
}
.na-nav-group + .na-nav-group { margin-top: var(--scu-3); padding-top: var(--scu-3); border-top: 1px solid var(--scu-border); }
.na-nav-group > :first-child:not(a) {
  font-size: var(--scu-fs-100);
  font-weight: var(--scu-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--scu-tracking-wide);
  color: var(--scu-text-subtle);
  padding: var(--scu-2) var(--scu-3);
}
.na-nav a, .na-account-menu a {
  display: flex;
  align-items: center;
  gap: var(--scu-3);
  padding: 10px var(--scu-3);
  border-radius: var(--scu-r-md);
  font-size: var(--scu-fs-300);
  color: var(--scu-text-muted);
  min-height: 40px;
}
.na-nav a:hover, .na-account-menu a:hover { background: var(--scu-bg-subtle); color: var(--scu-text); }
.na-nav a.active, .na-nav a[aria-current="page"],
.na-account-menu a.active, .na-account-menu a[aria-current="page"] {
  background: var(--scu-brand-tint);
  color: var(--scu-brand);
  font-weight: var(--scu-fw-semibold);
}

.na-main { display: flex; flex-direction: column; gap: var(--scu-5); min-width: 0; }
.na-card {
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  padding: var(--scu-6);
}
.na-card > h2, .na-card > h3 {
  font-size: var(--scu-fs-600);
  margin-bottom: var(--scu-4);
  padding-bottom: var(--scu-3);
  border-bottom: 1px solid var(--scu-border);
}
.na-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--scu-4); }
.na-form .na-wide, .na-wide { grid-column: 1 / -1; }
.na-actions { display: flex; flex-wrap: wrap; gap: var(--scu-2); margin-top: var(--scu-5); padding-top: var(--scu-5); border-top: 1px solid var(--scu-border); }
.na-secondary { color: var(--scu-text-muted); font-size: var(--scu-fs-300); }

/* Tables de commandes / documents */
.na-card table { width: 100%; border-collapse: collapse; font-size: var(--scu-fs-300); }
.na-card th {
  text-align: left;
  font-size: var(--scu-fs-100);
  text-transform: uppercase;
  letter-spacing: var(--scu-tracking-wide);
  color: var(--scu-text-subtle);
  padding: var(--scu-3) var(--scu-4);
  border-bottom: 1px solid var(--scu-border);
}
.na-card td { padding: var(--scu-4); border-bottom: 1px solid var(--scu-border); }
.na-card tbody tr:hover { background: var(--scu-bg-subtle); }


/* ==========================================================================
   15 · PIED DE PAGE
   ========================================================================== */

.foot {
  background: var(--scu-bg-subtle);
  border-top: 1px solid var(--scu-border);
  margin-top: var(--scu-10);
  padding-block: var(--scu-9) 0;
}
.foot-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--scu-7);
  padding-bottom: var(--scu-8);
}
.foot-column h2, .foot-column h3 {
  font-size: var(--scu-fs-200);
  font-weight: var(--scu-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--scu-tracking-wide);
  color: var(--scu-text);
  margin-bottom: var(--scu-4);
}
.foot-column ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--scu-2); }
.foot-column a { font-size: var(--scu-fs-300); color: var(--scu-text-muted); text-decoration: none; }
.foot-column a:hover { color: var(--scu-brand); text-decoration: underline; }

.foot-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--scu-4);
  padding-block: var(--scu-6);
  border-top: 1px solid var(--scu-border);
}
.brand-wordmark--footer { font-size: var(--scu-fs-600); font-weight: var(--scu-fw-bold); }
.foot-logo img { max-height: 32px; width: auto; }

.foot-pm-icons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--scu-2); }
.foot-pm-item {
  display: inline-flex;
  align-items: center;
  gap: var(--scu-2);
  height: 34px;
  padding-inline: var(--scu-3);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-sm);
  font-size: var(--scu-fs-100);
  color: var(--scu-text-muted);
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--scu-3);
  padding-block: var(--scu-4) var(--scu-6);
  border-top: 1px solid var(--scu-border);
  font-size: var(--scu-fs-200);
  color: var(--scu-text-subtle);
}
.copyright { margin: 0; }

.social-icons { display: flex; gap: var(--scu-2); }
.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--scu-r-pill);
  border: 1px solid var(--scu-border);
  background: var(--scu-surface);
  color: var(--scu-text-muted);
}
.social-icons a:hover { border-color: var(--scu-brand); color: var(--scu-brand); }


/* ==========================================================================
   16 · CONSENTEMENT, TOASTS, ÉTATS DE CHARGEMENT
   ========================================================================== */

.spacart-consent {
  position: fixed;
  left: 50%;
  bottom: var(--scu-4);
  transform: translateX(-50%);
  width: min(720px, calc(100vw - var(--scu-8)));
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-radius: var(--scu-r-xl);
  box-shadow: var(--scu-sh-pop);
  padding: var(--scu-6);
  z-index: var(--scu-z-modal);
  display: flex;
  flex-direction: column;
  gap: var(--scu-4);
}
.spacart-consent h2, .spacart-consent > :first-child:is(h2, h3) { font-size: var(--scu-fs-600); margin: 0; }
.spacart-consent-copy { font-size: var(--scu-fs-300); color: var(--scu-text-muted); margin: 0; }
.spacart-consent-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--scu-2);
  padding: var(--scu-3);
  background: var(--scu-bg-subtle);
  border-radius: var(--scu-r-md);
}
.spacart-consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--scu-2);
}
.spacart-consent-actions button { flex: 0 1 auto; }

/* --- Toasts (injectés par le JS) ---------------------------------------- */
.scu-toasts {
  position: fixed;
  top: calc(var(--scu-header-h) + var(--scu-3));
  right: var(--scu-4);
  z-index: var(--scu-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--scu-2);
  pointer-events: none;
  width: min(360px, calc(100vw - var(--scu-8)));
}
.scu-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--scu-3);
  padding: var(--scu-4);
  background: var(--scu-surface);
  border: 1px solid var(--scu-border);
  border-left: 3px solid var(--scu-brand);
  border-radius: var(--scu-r-lg);
  box-shadow: var(--scu-sh-pop);
  font-size: var(--scu-fs-300);
  animation: scu-toast-in var(--scu-dur-base) var(--scu-ease-out) both;
}
.scu-toast.is-success { border-left-color: var(--scu-success); }
.scu-toast.is-error { border-left-color: var(--scu-danger); }
.scu-toast.is-leaving { animation: scu-toast-out var(--scu-dur-fast) var(--scu-ease) both; }
.scu-toast strong { display: block; font-weight: var(--scu-fw-semibold); }
.scu-toast button {
  margin-left: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--scu-text-subtle);
  padding: 0;
  min-height: 24px;
  font-size: 18px;
  line-height: 1;
}

@keyframes scu-toast-in {
  from { opacity: 0; transform: translateX(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes scu-toast-out {
  to { opacity: 0; transform: translateX(16px); }
}

/* --- Squelettes de chargement ------------------------------------------- */
.scu-skeleton, .loading .photo, .ajax_container.loading {
  background: linear-gradient(90deg, var(--scu-g-100) 25%, var(--scu-g-50) 37%, var(--scu-g-100) 63%);
  background-size: 400% 100%;
  animation: scu-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--scu-r-md);
  color: transparent;
}
@keyframes scu-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.cssload-speeding-wheel {
  border-color: var(--scu-border) !important;
  border-top-color: var(--scu-brand) !important;
}

/* Révélation douce au défilement (classes posées par le JS) */
.scu-reveal { opacity: 0; transform: translateY(12px); }
.scu-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--scu-dur-slow) var(--scu-ease-out),
              transform var(--scu-dur-slow) var(--scu-ease-out);
}


/* ==========================================================================
   17 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
  .product-main { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: var(--scu-6); }
  .cart-layout, .checkout-flow { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--scu-5); }
  .withleftmenu { grid-template-columns: 236px minmax(0, 1fr); gap: var(--scu-5); }
}

@media (max-width: 900px) {
  :root:root { --scu-gutter: var(--scu-4); --scu-header-h: 60px; }

  /* Le thème pose des grid-template-areas ("gallery heading" / "gallery
     purchase"). Redéfinir seulement les colonnes laisserait une 2e colonne
     implicite : il faut réécrire les zones. Ordre mobile : titre, visuel, achat. */
  .product-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "gallery" "purchase";
    gap: var(--scu-5);
  }
  .product-media-panel { position: static; }
  .product-summary { position: static; }

  .cart-layout, .checkout-flow, .na-layout,
  .withleftmenu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .cart-summary, .checkout-summary, .na-account-menu, .na-nav, .left_filter { position: static; max-height: none; }

  /* The existing native filter drawer owns visibility and focus. */



  .spacart-home-newsletter, .foot-subscribe { flex-direction: column; align-items: stretch; padding: var(--scu-5); }
  .home-newsletter-form, .foot-subscribe form { max-width: none; }
}

@media (max-width: 720px) {
  h1 { font-size: var(--scu-fs-800); }
  h2 { font-size: var(--scu-fs-700); }

  .products, .spacart-home-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--scu-3); }
  .res-item { padding: var(--scu-3); border-radius: var(--scu-r-md); }
  .carousel-wrapper .products > .res-item { flex-basis: 158px; }
  .carousel-prev, .carousel-next { display: none; }

  .product-purchase { padding: var(--scu-4); border-radius: var(--scu-r-lg); }
  .product-buy-row { grid-template-columns: auto minmax(0, 1fr); }
  .product-buy-row .add2cart-product { grid-column: 1 / -1; width: 100%; }
  .product-buy-row .save2wl, .product-buy-row .add-to-wl-product { grid-column: 2; grid-row: 1; justify-self: end; }
  .product-image, .product-gallery-main img { padding: var(--scu-4); }

  /* Le tableau du panier devient une pile de cartes */
  .carttable, .carttable tbody, .carttable tr, .carttable td { display: block; width: 100%; }
  .carttable thead { display: none; }
  .carttable tr {
    border-bottom: 1px solid var(--scu-border);
    padding: var(--scu-4);
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--scu-2) var(--scu-4);
    align-items: center;
  }
  .carttable td { border: 0; padding: 0; }
  .carttable td.image { grid-row: span 3; }

  .spacart-consent { left: var(--scu-2); right: var(--scu-2); bottom: var(--scu-2); width: auto; transform: none; padding: var(--scu-5); }
  .spacart-consent-actions button { flex: 1 1 140px; }

  .scu-toasts { top: auto; bottom: var(--scu-3); left: var(--scu-3); right: var(--scu-3); width: auto; }

  .foot { padding-top: var(--scu-7); }
  .foot-columns { gap: var(--scu-5); }
}


/* ==========================================================================
   18 · MOUVEMENT RÉDUIT, IMPRESSION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .res-item:hover { transform: none; }
  .scu-reveal { opacity: 1; transform: none; }
}

/* Contraste renforcé : on épaissit les bordures plutôt que de changer les teintes. */
@media (prefers-contrast: more) {
  :root:root {
    --scu-border: var(--scu-g-400);
    --scu-border-strong: var(--scu-g-600);
    --scu-text-muted: var(--scu-g-700);
  }
  .res-item, .product-purchase, .cart-summary, .na-card { border-width: 1.5px; }
}

@media print {
  .sc-desktop-header, #head_mobile, .sc-catalogue-nav, .foot, .spacart-consent,
  .scu-toasts, .carousel-arrow, .product-section-nav, .left_filter,
  .add2cart, .save2wl, .cart-actions, .checkout-submit, .spacart-promo-bar { display: none !important; }

  body { font-size: 11pt; color: #000; background: #fff; }
  .product-main { display: block; }
  .product-purchase, .na-card, .res-item { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* Native controllers own hidden states, responsive menus and carousel scroll. */
html.area-c [hidden] { display: none !important; }
html.area-c [data-carousel] .carousel-wrapper { overflow-x: auto; overflow-y: hidden; }
html.area-c [data-carousel].carousel-pr { display: block; overflow: visible; }
html.area-c [data-carousel] .carousel-wrapper .products { overflow: visible; }
html.area-c form[aria-busy="true"] button[type="submit"] { cursor: progress; }
html.area-c .fade { z-index: calc(var(--scu-z-modal) - 1); }
html.area-c .popup-wrap, html.area-c .popup[role="dialog"],
html.area-c .alert_message, html.area-c .alert { z-index: var(--scu-z-modal); }
html.area-c .product-section-nav a.is-active { color: var(--scu-brand); border-bottom-color: var(--scu-brand); }

/* Adapt the supplied appearance to the native details and section markup. */
html.area-c .sc-header-popover { position: relative; flex: 0 0 auto; }
html.area-c .sc-header-popover > summary { color: var(--scu-text); border-radius: var(--scu-r-md); }
html.area-c .sc-header-popover > summary:hover { border-color: var(--scu-border); background: var(--scu-bg-subtle); }
html.area-c .sc-catalogue-nav, html.area-c .sc-catalogue-nav #menu > li > .parent-link,
html.area-c .sc-mega-menu > summary { color: var(--scu-text); }
html.area-c .sc-catalogue-nav #menu { overflow: visible; }
html.area-c .spacart-home-products { display:block; min-width:0; }
html.area-c .spacart-home-products > [data-carousel] { width:100%; min-width:0; }
html.area-c .spacart-home-section { padding:24px; }
html.area-c .spacart-home-section h2 { margin:0 0 20px; font-size:22px; }
html.area-c .na-account-menu > .na-nav { position:static; border:0; border-radius:0; box-shadow:none; background:transparent; padding:0; }
html.area-c .sc-mega-menu:not([open]) > .sc-mega-panel { display:none; }
@media (min-width:851px) { html.area-c #head_mobile { display:none; } }
@media (max-width:850px) {
 html.area-c .sc-header-belt, html.area-c .sc-catalogue-nav { display:none; }
 html.area-c #head_mobile { display:flex; position:sticky; top:0; z-index:var(--scu-z-header); }
 html.area-c .spacart-home-section { padding:16px; }
}
