/*
 * SmartOne — Atelier de la Maison Connectée
 * Overrides Hummingbird — design system v2 (Atelier warm)
 * Source : mockup-homepage-v2.html (validé 2026-05-08)
 */

/* ═══════════════════════════════════════════════════════════════════
   Base typographique (héritée de tokens.css → body)
   ═══════════════════════════════════════════════════════════════════ */
html { -webkit-text-size-adjust: 100%; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--so-font-stack);
  font-weight: var(--so-font-weight-bold);
  color: var(--so-ink);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: var(--so-space-6); letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
h3, .h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }

p { line-height: 1.6; }

/* Liens — gold accent v2 */
a { color: var(--so-gold-text); text-decoration: none; transition: color var(--so-duration-fast) var(--so-ease); }
a:hover { color: var(--so-gold-hover); text-decoration: none; }

/* Liens dans la prose (CMS, fiches produit, articles) */
.cms-content a,
article a,
.product-description a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   Boutons — radius pill v2, ink/gold
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--so-radius-pill);
  font-family: var(--so-font-stack);
  font-size: 15px;
  font-weight: var(--so-font-weight-semibold);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--so-duration) var(--so-ease-out), box-shadow var(--so-duration) var(--so-ease-out), background-color var(--so-duration) var(--so-ease-out), border-color var(--so-duration) var(--so-ease-out), color var(--so-duration) var(--so-ease-out);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.3;
}
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 10px 18px; font-size: 13.5px; }

/* Primary — ink — override Bootstrap 5 button variables (couvre actif + disabled) */
.btn-primary {
  --bs-btn-color: var(--so-surface);
  --bs-btn-bg: var(--so-ink);
  --bs-btn-border-color: var(--so-ink);
  --bs-btn-hover-color: var(--so-surface);
  --bs-btn-hover-bg: var(--so-gold);
  --bs-btn-hover-border-color: var(--so-gold-text);
  --bs-btn-active-color: var(--so-surface);
  --bs-btn-active-bg: var(--so-gold-hover);
  --bs-btn-active-border-color: var(--so-gold-hover);
  --bs-btn-disabled-color: var(--so-surface);
  --bs-btn-disabled-bg: var(--so-muted);
  --bs-btn-disabled-border-color: var(--so-muted);
  box-shadow: var(--so-shadow-1);
}
.btn-primary:not(:disabled):not(.disabled):hover,
.btn-primary:not(:disabled):not(.disabled):focus {
  transform: translateY(-1px);
  box-shadow: var(--so-shadow-gold);
}

/* Secondary — gold (CTA principal commerce) */
.btn-secondary {
  --bs-btn-color: var(--so-surface);
  --bs-btn-bg: var(--so-gold);
  --bs-btn-border-color: var(--so-gold-text);
  --bs-btn-hover-color: var(--so-surface);
  --bs-btn-hover-bg: var(--so-gold-hover);
  --bs-btn-hover-border-color: var(--so-gold-hover);
  --bs-btn-active-color: var(--so-surface);
  --bs-btn-active-bg: var(--so-gold-hover);
  --bs-btn-active-border-color: var(--so-gold-hover);
  --bs-btn-disabled-color: var(--so-surface);
  --bs-btn-disabled-bg: var(--so-muted-soft);
  --bs-btn-disabled-border-color: var(--so-muted-soft);
  box-shadow: var(--so-shadow-gold);
}
.btn-secondary:not(:disabled):not(.disabled):hover,
.btn-secondary:not(:disabled):not(.disabled):focus {
  transform: translateY(-1px);
}

/* Outline primary — ink ghost (override BS5 vars) */
.btn-outline-primary {
  --bs-btn-color: var(--so-ink);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--so-border-strong);
  --bs-btn-hover-color: var(--so-ink);
  --bs-btn-hover-bg: var(--so-surface);
  --bs-btn-hover-border-color: var(--so-ink);
  --bs-btn-active-color: var(--so-ink);
  --bs-btn-active-bg: var(--so-bg-soft);
  --bs-btn-active-border-color: var(--so-ink);
  --bs-btn-disabled-color: var(--so-muted-soft);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--so-border);
}
.btn-outline-primary:not(:disabled):not(.disabled):hover {
  transform: translateY(-1px);
}

/* Outline light — pour fonds sombres */
.btn-outline-light {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--so-surface);
  backdrop-filter: blur(6px);
}
.btn-outline-light:hover,
.btn-outline-light:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--so-surface);
}

/* Link button */
.btn-link {
  color: var(--so-gold-text);
  font-weight: var(--so-font-weight-semibold);
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  background: transparent;
  border: 0;
}
.btn-link:hover { color: var(--so-gold-hover); }

/* ─── Filet de sécurité boutons : Bootstrap d'Hummingbird met --bs-btn-bg:#0d6efd (bleu)
   sur .btn-primary/.btn-outline-primary ; selon l'ordre de chargement des CSS ça peut
   l'emporter. On force le design system v2 avec !important (rayon pilule + couleurs warm). ─── */
.btn, a.btn, button.btn, input.btn { border-radius: var(--so-radius-pill) !important; text-transform: none !important; }
.btn-primary, a.btn-primary, button.btn-primary { background-color: var(--so-ink) !important; border-color: var(--so-ink) !important; color: var(--so-surface) !important; }
.btn-primary:hover, .btn-primary:focus, a.btn-primary:hover { background-color: var(--so-gold-text) !important; border-color: var(--so-gold-text) !important; color: var(--so-surface) !important; }
.btn-secondary, a.btn-secondary, button.btn-secondary { background-color: var(--so-gold-cta) !important; border-color: var(--so-gold-cta) !important; color: var(--so-surface) !important; }
.btn-secondary:hover, .btn-secondary:focus, a.btn-secondary:hover { background-color: var(--so-gold-hover) !important; border-color: var(--so-gold-hover) !important; color: var(--so-surface) !important; }
.btn-outline-primary, a.btn-outline-primary { background-color: transparent !important; border-color: var(--so-border-strong) !important; color: var(--so-ink) !important; }
.btn-outline-primary:hover, .btn-outline-primary:focus, a.btn-outline-primary:hover { background-color: var(--so-ink) !important; border-color: var(--so-ink) !important; color: var(--so-surface) !important; }
.btn-outline-secondary, a.btn-outline-secondary { background-color: transparent !important; border-color: var(--so-gold-text) !important; color: var(--so-gold-hover) !important; }
.btn-outline-secondary:hover { background-color: var(--so-gold-text) !important; border-color: var(--so-gold-text) !important; color: var(--so-surface) !important; }
.btn-info, .btn-success, .btn-default { background-color: var(--so-ink) !important; border-color: var(--so-ink) !important; color: var(--so-surface) !important; }
.btn-info:hover, .btn-success:hover, .btn-default:hover { background-color: var(--so-gold-text) !important; border-color: var(--so-gold-text) !important; }
.btn.disabled, .btn:disabled { opacity: .55; }
/* sur fonds sombres (panneau CTA des hubs) un .btn-outline-primary doit rester lisible */
.so-hub-cta__panel .btn-outline-primary, .so-hub-cta__panel a.btn-outline-primary { border-color: rgba(255,255,255,.5) !important; color: #fff !important; background: rgba(255,255,255,.06) !important; }
.so-hub-cta__panel .btn-outline-primary:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }

/* ─── Recherche (offcanvas top) — champ + autocomplétion ─── */
#searchCanvas.offcanvas-top { background: var(--so-surface); border-bottom: 1px solid var(--so-border); box-shadow: var(--so-shadow-2); }
.so-search-canvas { padding: var(--so-space-5) 0; }
.so-search-canvas__inner { gap: var(--so-space-3); }
#search_widget.so-search-widget { flex: 1 1 auto; position: relative; }
#search_widget.so-search-widget form { display: flex; align-items: center; gap: 10px; border: 1px solid var(--so-border-strong); border-radius: var(--so-radius-pill); background: var(--so-bg-soft); padding: 6px 8px 6px 16px; }
#search_widget.so-search-widget form:focus-within { border-color: var(--so-gold-text); background: var(--so-surface); box-shadow: 0 0 0 3px var(--so-gold-soft); }
.so-search-widget__icon { color: var(--so-muted); font-size: 22px; }
#search_widget.so-search-widget input[type="text"] { flex: 1 1 auto; border: 0; background: transparent; outline: none; font: inherit; font-size: 1rem; color: var(--so-ink); padding: 8px 0; }
#search_widget.so-search-widget input[type="text"]::placeholder { color: var(--so-muted); }
.so-search-widget__submit { border: 0; background: var(--so-ink); color: #fff; border-radius: var(--so-radius-pill); padding: 9px 20px; font-weight: var(--so-font-weight-semibold); font-size: 0.95rem; cursor: pointer; white-space: nowrap; transition: background var(--so-duration) var(--so-ease); }
.so-search-widget__submit:hover { background: var(--so-gold); }
/* dropdown d'autocomplétion ps_searchbar */
.ui-autocomplete.searchbar-autocomplete { background: var(--so-surface); border: 1px solid var(--so-border); border-radius: var(--so-radius-md); box-shadow: var(--so-shadow-2); padding: 6px; list-style: none; z-index: 1090; max-height: 70vh; overflow-y: auto; }
.ui-autocomplete.searchbar-autocomplete .ui-menu-item a, .ui-autocomplete.searchbar-autocomplete .ui-menu-item-wrapper { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--so-radius-sm); color: var(--so-ink); text-decoration: none; }
.ui-autocomplete.searchbar-autocomplete .ui-menu-item a:hover, .ui-autocomplete.searchbar-autocomplete .ui-state-active, .ui-autocomplete.searchbar-autocomplete .ui-menu-item-wrapper.ui-state-active { background: var(--so-gold-soft); color: var(--so-gold-hover); }
.ui-autocomplete.searchbar-autocomplete img.autocomplete-thumbnail { width: 42px; height: 42px; object-fit: contain; border-radius: var(--so-radius-xs); background: var(--so-bg-soft); flex: 0 0 auto; }
@media (max-width: 575px) { .so-search-widget__submit { padding: 9px 14px; } }

/* ═══════════════════════════════════════════════════════════════════
   Header global — fond cream avec backdrop-blur
   ═══════════════════════════════════════════════════════════════════ */
header.header,
#header {
  background-color: transparent;
  color: var(--so-ink);
  border-bottom: 0;
  box-shadow: none;
}
#header a, .header a { color: var(--so-ink); }
#header a:hover, .header a:hover { color: var(--so-gold-text); text-decoration: none; }

/* Mega-menu — fond blanc, liens sombres */
.so-megamenu a,
.so-megamenu ul li a,
#header .so-megamenu a {
  color: var(--so-ink-2);
  font-weight: var(--so-font-weight-medium);
}
.so-megamenu a:hover,
.so-megamenu ul li a:hover,
#header .so-megamenu a:hover {
  color: var(--so-gold-text);
  text-decoration: none;
}
.so-megamenu .so-megamenu__title,
#header .so-megamenu .so-megamenu__title {
  color: var(--so-ink);
  font-weight: var(--so-font-weight-bold);
}

/* ═══════════════════════════════════════════════════════════════════
   Cards & surfaces (hover-lift v2)
   ═══════════════════════════════════════════════════════════════════ */
.card,
.product-miniature,
.featured-products .product-miniature {
  background-color: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-md);
  box-shadow: var(--so-shadow-1);
  overflow: hidden;
  transition: transform var(--so-duration) var(--so-ease),
              box-shadow var(--so-duration) var(--so-ease),
              border-color var(--so-duration) var(--so-ease);
}
.card:hover,
.product-miniature:hover {
  border-color: var(--so-gold-text);
  box-shadow: var(--so-shadow-2);
  transform: translateY(-3px);
}

.product-miniature .product-thumbnail img,
.featured-products .product-thumbnail img {
  transition: transform 0.5s var(--so-ease);
}
.product-miniature:hover .product-thumbnail img {
  transform: scale(1.05);
}

.product-miniature .product-title,
.product-miniature .h3.product-title {
  font-size: 15.5px;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
  letter-spacing: -0.01em;
}
.product-miniature .product-price-and-shipping,
.product-miniature .price {
  color: var(--so-ink);
  font-weight: var(--so-font-weight-bold);
  font-size: 17px;
  letter-spacing: -0.015em;
}

/* ═══════════════════════════════════════════════════════════════════
   Forms — radius doux, focus gold
   ═══════════════════════════════════════════════════════════════════ */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  border-radius: var(--so-radius-sm);
  border: 1px solid var(--so-border-strong);
  background-color: var(--so-surface);
  color: var(--so-ink);
  font-family: var(--so-font-stack);
  font-size: 15px;
  padding: 11px 14px;
  transition: transform var(--so-duration-fast) var(--so-ease-out), box-shadow var(--so-duration-fast) var(--so-ease-out), background-color var(--so-duration-fast) var(--so-ease-out), border-color var(--so-duration-fast) var(--so-ease-out), color var(--so-duration-fast) var(--so-ease-out);
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--so-gold-text);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
  outline: none;
}
.form-control::placeholder { color: var(--so-muted-soft); }

/* Labels */
label,
.form-label {
  font-size: 13.5px;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════════════════════════════
   Badges
   ═══════════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--so-radius-pill);
  font-weight: var(--so-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 5px 11px;
  line-height: 1;
}
.badge-primary,
.bg-primary { background-color: var(--so-ink) !important; color: var(--so-surface) !important; }
.badge-secondary,
.bg-secondary { background-color: var(--so-gold-text) !important; color: var(--so-surface) !important; }

/* ═══════════════════════════════════════════════════════════════════
   Alertes
   ═══════════════════════════════════════════════════════════════════ */
.alert {
  border-radius: var(--so-radius-md);
  border-width: 1px;
  font-weight: var(--so-font-weight-medium);
  padding: 14px 18px;
}
.alert-info {
  background-color: var(--so-navy-soft);
  border-color: var(--so-navy);
  color: var(--so-navy);
}
.alert-warning {
  background-color: var(--so-gold-soft);
  border-color: var(--so-gold-text);
  color: var(--so-gold-hover);
}
.alert-success {
  background-color: var(--so-gold-soft);
  border-color: var(--so-gold-text);
  color: var(--so-gold-hover);
}
.alert-danger {
  background-color: var(--so-error-soft);
  border-color: var(--so-error);
  color: var(--so-error);
}

/* ═══════════════════════════════════════════════════════════════════
   Tables sobres
   ═══════════════════════════════════════════════════════════════════ */
.table {
  --bs-table-bg: var(--so-surface);
  --bs-table-striped-bg: var(--so-bg-soft);
  border-radius: var(--so-radius-md);
  overflow: hidden;
}
.table th {
  background-color: var(--so-ink);
  color: var(--so-surface);
  font-weight: var(--so-font-weight-semibold);
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.table td {
  vertical-align: middle;
  border-color: var(--so-border);
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER SmartOne — ink (noir chaud) avec accents gold
   ═══════════════════════════════════════════════════════════════════ */
footer.page-footer,
#footer { background-color: transparent; border-top: 0; padding: 0; }

/* Hide PrestaShop's inline footer/copyright (we render our own) */
.footer__main { display: none !important; }
.footer__before { display: none !important; }

.so-footer {
  background-color: var(--so-ink);
  color: rgba(255, 255, 255, 0.78);
  padding: var(--so-space-20) 0 var(--so-space-6);
  font-family: var(--so-font-stack);
}
.so-footer__main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--so-space-12);
  padding-bottom: var(--so-space-14);
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 992px) {
  .so-footer__main { grid-template-columns: 1fr 1fr; gap: var(--so-space-8); }
}
@media (max-width: 576px) {
  .so-footer__main { grid-template-columns: 1fr; }
}

.so-footer__col {
  font-size: 0.92rem;
  line-height: 1.6;
}
.so-footer__col--brand { padding-right: var(--so-space-6); }

.so-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--so-space-5);
  color: var(--so-surface);
  font-size: 22px;
  font-weight: var(--so-font-weight-bold);
  letter-spacing: -0.025em;
  text-decoration: none;
}
.so-footer__logo:hover { color: var(--so-gold-bright); text-decoration: none; }
.so-footer__logo img { height: 40px; width: auto; }

.so-footer__tagline {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--so-space-5);
  max-width: 32ch;
}
.so-footer__address {
  font-style: normal;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin-bottom: var(--so-space-5);
}
.so-footer__address strong { color: var(--so-surface); font-weight: var(--so-font-weight-semibold); }
.so-footer__address a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.so-footer__address a:hover { color: var(--so-gold-bright); text-decoration: none; }
.so-footer__hours {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  margin: 0;
}

.so-footer__title {
  font-size: 0.78rem;
  font-weight: var(--so-font-weight-bold);
  color: var(--so-surface);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 0 0 var(--so-space-5);
}
.so-footer__list { margin: 0; padding-left: 0; list-style: none; }
.so-footer__list li { margin-bottom: 11px; }
.so-footer__list a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--so-duration-fast) var(--so-ease);
}
.so-footer__list a:hover {
  color: var(--so-gold-bright);
  text-decoration: none;
  border-bottom: none;
}

.so-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: var(--so-space-7, 28px) 0 var(--so-space-6);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}
.so-footer__copy { margin: 0; color: rgba(255, 255, 255, 0.78); }
.so-footer__copy a { color: var(--so-surface); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.45); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.so-footer__copy a:hover { color: var(--so-gold-bright); text-decoration-color: var(--so-gold-bright); }
.so-footer__sep { opacity: 0.4; margin: 0 6px; }
.so-footer__bottom-right { display: flex; gap: 12px; }
.so-footer__social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--so-radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0;
  transition: transform var(--so-duration-fast) var(--so-ease-out), box-shadow var(--so-duration-fast) var(--so-ease-out), background-color var(--so-duration-fast) var(--so-ease-out), border-color var(--so-duration-fast) var(--so-ease-out), color var(--so-duration-fast) var(--so-ease-out);
}
.so-footer__social:hover {
  background: var(--so-gold);
  border-color: var(--so-gold-text);
  color: var(--so-surface);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════
   Container / sections génériques
   ═══════════════════════════════════════════════════════════════════ */
section, .section { background-color: transparent; }
.section--surface {
  background-color: var(--so-surface);
  padding: var(--so-space-16) 0;
}
.section--cream { background-color: var(--so-bg); }
.section--alt   { background-color: var(--so-surface-alt); }
.section--ink   { background-color: var(--so-ink); color: var(--so-surface); }

/* Container max-width Bootstrap remap */
.container-md { max-width: var(--so-container); }

/* Sentence case partout, pas de uppercase implicite */
.btn,
.nav-link,
button {
  text-transform: none !important;
  letter-spacing: 0.005em;
}

/* Image hero / catégorie : pas de filtre par défaut */
.category-cover img,
.banner img { filter: none; }

/* ═══════════════════════════════════════════════════════════════════
   Pagination
   ═══════════════════════════════════════════════════════════════════ */
.pagination .page-link {
  border-radius: var(--so-radius-sm);
  border: 1px solid var(--so-border);
  color: var(--so-ink);
  font-weight: var(--so-font-weight-medium);
  margin: 0 3px;
  transition: transform var(--so-duration-fast) var(--so-ease-out), box-shadow var(--so-duration-fast) var(--so-ease-out), background-color var(--so-duration-fast) var(--so-ease-out), border-color var(--so-duration-fast) var(--so-ease-out), color var(--so-duration-fast) var(--so-ease-out);
}
.pagination .page-link:hover {
  background-color: var(--so-gold-soft);
  border-color: var(--so-gold-text);
  color: var(--so-gold-text);
}
.pagination .page-item.active .page-link {
  background-color: var(--so-ink);
  border-color: var(--so-ink);
  color: var(--so-surface);
}

/* ═══════════════════════════════════════════════════════════════════
   Breadcrumb
   ═══════════════════════════════════════════════════════════════════ */
.breadcrumb {
  background: transparent;
  padding: 12px 0;
  font-size: 13.5px;
  color: var(--so-muted);
}
.breadcrumb-item a { color: var(--so-muted); }
.breadcrumb-item a:hover { color: var(--so-gold-text); }
.breadcrumb-item.active { color: var(--so-ink); font-weight: var(--so-font-weight-semibold); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--so-muted-soft); }

/* ═══════════════════════════════════════════════════════════════════
   PANIER + CHECKOUT — cohérence design system v2
   Override des templates Hummingbird sans toucher aux .tpl parent.
   ═══════════════════════════════════════════════════════════════════ */

/* Container : aligner .container (Bootstrap 1140px) sur notre container-md (1240px par défaut) */
body.checkout .container,
body.cart .container,
#checkout .container,
#cart .container {
  max-width: var(--so-container);
}

/* H1 page Panier */
#cart h1,
.cart-container h1,
.cart-grid h1 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--so-font-weight-bold);
  color: var(--so-ink);
  letter-spacing: -0.025em;
  margin-bottom: var(--so-space-6);
}

/* Cards panier — arrondies, douces */
.cart-grid__body .card,
.cart-grid__right .card,
#checkout .card,
.checkout-step.card {
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-md);
  box-shadow: var(--so-shadow-1);
  margin-bottom: var(--so-space-5);
}

/* Step-title checkout — titres d'étape cohérents */
.checkout-step .step-title,
.step-title {
  font-size: 1.18rem;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
  letter-spacing: -0.015em;
  padding: var(--so-space-4) var(--so-space-5);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--so-space-3);
}
.checkout-step .step-number,
.step-number {
  background: var(--so-gold-soft);
  color: var(--so-gold-text);
  font-weight: var(--so-font-weight-bold);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  flex-shrink: 0;
}
.checkout-step.-current .step-title,
.checkout-step.-current .step-number {
  background: var(--so-gold);
  color: var(--so-surface);
}

/* Inputs et selects checkout — taille et radius cohérents */
#checkout .form-control,
#checkout .custom-select,
.cart-detailed .form-control,
.checkout-form .form-control {
  border-radius: var(--so-radius-sm);
  border: 1px solid var(--so-border-strong);
  padding: 10px 14px;
  font-size: 0.95rem;
  height: auto;
  transition: border-color var(--so-duration-fast) var(--so-ease),
              box-shadow var(--so-duration-fast) var(--so-ease);
}
#checkout .form-control:focus,
.cart-detailed .form-control:focus {
  border-color: var(--so-gold-text);
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
  outline: 0;
}

/* Labels lisibles */
#checkout label,
.cart-detailed label {
  font-weight: var(--so-font-weight-medium);
  color: var(--so-ink);
  margin-bottom: 6px;
}

/* CTA "Commander" / "Procéder au paiement" en or (cohérent avec le dropdown panier).
   Cible : panneau résumé panier + actions détaillées + bouton submit checkout. */
.cart-detailed-actions .btn-primary,
.cart-detailed-actions a[href*="/commande"],
.cart-summary a.btn-primary,
.cart-summary a[href*="/commande"],
.cart-grid__right a.btn-primary,
.cart-grid__right a[href*="/commande"],
#cart a.btn-primary[href*="/commande"],
.checkout-summary-products .btn-primary,
#checkout .js-cart-summary .btn-primary,
.checkout #payment-confirmation .btn-primary {
  background: var(--so-gold) !important;
  border-color: var(--so-gold-text) !important;
  color: #fff !important;
  font-weight: var(--so-font-weight-semibold);
  box-shadow: var(--so-shadow-gold);
}
.cart-detailed-actions .btn-primary:hover,
.cart-detailed-actions a[href*="/commande"]:hover,
.cart-summary a.btn-primary:hover,
.cart-summary a[href*="/commande"]:hover,
.cart-grid__right a.btn-primary:hover,
.cart-grid__right a[href*="/commande"]:hover,
#cart a.btn-primary[href*="/commande"]:hover,
.checkout-summary-products .btn-primary:hover,
#checkout .js-cart-summary .btn-primary:hover,
.checkout #payment-confirmation .btn-primary:hover {
  background: var(--so-gold-hover) !important;
  border-color: var(--so-gold-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Cart-summary panneau résumé droit */
.cart-summary,
.cart-grid__right {
  position: sticky;
  top: 24px;
}
.cart-summary .cart-detailed-totals .label,
.cart-summary .label { color: var(--so-muted); }
.cart-summary .cart-detailed-totals .value,
.cart-summary .value { color: var(--so-ink); font-weight: var(--so-font-weight-semibold); }
.cart-summary .cart-total,
.cart-detailed-totals .cart-total {
  border-top: 1px solid var(--so-border);
  padding-top: var(--so-space-4);
  margin-top: var(--so-space-4);
}
.cart-total .label { font-size: 0.95rem; color: var(--so-ink) !important; font-weight: var(--so-font-weight-semibold); }
.cart-total .value { font-size: 1.18rem; color: var(--so-ink) !important; font-weight: var(--so-font-weight-bold); }

/* Lignes produit panier — espacement et bordures cohérentes */
.product-line-grid,
.cart-detailed .product-line {
  border-bottom: 1px solid var(--so-border);
  padding: var(--so-space-4) 0;
}
.product-line-grid:last-child { border-bottom: 0; }
.cart-line-product-actions a { color: var(--so-muted); transition: color .15s; }
.cart-line-product-actions a:hover { color: var(--so-gold-text); }

/* Bouton "Continuer mes achats" — outline ink (cohérent design v2) */
/* Important : exclure .btn-primary pour ne pas casser le bouton submit "Continuer" du checkout */
.continue.btn:not(.btn-primary),
a[href*="continue"].btn:not(.btn-primary),
.cart-detailed-actions .btn-link,
a.btn-primary[href*="/index"] {
  background: transparent;
  color: var(--so-ink) !important;
  border: 1px solid var(--so-border-strong);
  font-weight: var(--so-font-weight-medium);
  box-shadow: none;
}
.continue.btn:not(.btn-primary):hover {
  background: var(--so-bg-soft);
  border-color: var(--so-ink);
  color: var(--so-ink) !important;
  transform: none;
}

/* Largeurs raisonnables sur les fields telephone, code postal */
#checkout input[name="postcode"],
#checkout input[name="phone"],
#checkout input[type="tel"] {
  max-width: 200px;
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE CATÉGORIE — design v2 premium, aéré, clean
   ═══════════════════════════════════════════════════════════════════ */

/* Container catégorie aligné sur --so-container */
#category .container,
.page-category .container,
#manufacturer .container,
#search .container,
#new-products .container,
#prices-drop .container,
#best-sales .container { max-width: var(--so-container); }

/* En-tête de catégorie compact (le bloc titre + description + sous-catégories prenait
   trop de hauteur, on ne voyait pas les produits — on resserre tout). */
#category #content, .page-category #content, #manufacturer #content { padding-top: var(--so-space-5) !important; }
#js-product-list-header { margin-bottom: var(--so-space-4); }
#category .page-title-section,
.block-category .page-title-section,
#category h1,
.page-category h1 {
  font-size: clamp(1.7rem, 2.8vw, 2.25rem) !important;
  font-weight: var(--so-font-weight-bold) !important;
  color: var(--so-ink) !important;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin-bottom: var(--so-space-2) !important;
}
#category-description.rich-text,
.block-category .text-muted,
#category-description {
  color: var(--so-ink-2);
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: none;        /* pleine largeur du conteneur, aligné sur la grille produits */
  width: 100%;
  margin-bottom: var(--so-space-3);
}
#category-description > *:first-child { margin-top: 0; }
#category-description > *:last-child { margin-bottom: 0; }
#category-description p { margin-bottom: 0.5em; }
.category-cover { margin-bottom: var(--so-space-4) !important; }
.category-cover img { border-radius: var(--so-radius-lg); max-height: 220px; width: auto; object-fit: cover; }
.block-category { margin-bottom: var(--so-space-4); }

/* ─── Vignettes sous-catégories — NOM SEUL, sans image ─── */
#subcategories.subcategories {
  margin: 0 0 var(--so-space-12) 0;
  --bs-gutter-x: var(--so-space-3);
  row-gap: var(--so-space-3);
  display: flex !important;
  flex-wrap: wrap;
}
.subcategory__wrapper {
  width: auto !important;       /* override col-6 col-lg-4 col-xl-3 → largeur auto */
  flex: 0 0 auto !important;
  max-width: none !important;
  margin-bottom: 0;
  padding: 0 6px;
}
.subcategory {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-direction: row !important;
  text-decoration: none !important;
  background: var(--so-surface);
  border: 1px solid var(--so-border-strong);
  border-radius: var(--so-radius-pill);
  padding: 10px 22px;
  height: auto;
  transition: background var(--so-duration-fast) var(--so-ease),
              border-color var(--so-duration-fast) var(--so-ease),
              color var(--so-duration-fast) var(--so-ease),
              transform var(--so-duration-fast) var(--so-ease);
  box-shadow: none;
}
.subcategory:hover {
  background: var(--so-ink);
  border-color: var(--so-ink);
  transform: translateY(-1px);
  box-shadow: var(--so-shadow-1);
  text-decoration: none !important;
}
/* Masquer complètement l'image de sous-catégorie */
.subcategory__image,
.subcategory .subcategory-image,
.subcategory picture { display: none !important; }
.subcategory__name {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0.92rem;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
}
.subcategory:hover .subcategory__name { color: #fff; }

/* ─── Cards produit — layout clean, une seule "couche" visuelle ─── */
.products.row {
  --bs-gutter-x: var(--so-space-5);
  --bs-gutter-y: var(--so-space-5);
}
/* L'<article> .product-miniature = conteneur transparent (pas de bordure/ombre/fond) */
article.product-miniature,
.featured-products article.product-miniature {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin-bottom: 0;
  padding: 0;
}
article.product-miniature:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}
/* La .card interne = la vraie carte visible */
.product-miniature > .card {
  border: 1px solid var(--so-border) !important;
  border-radius: var(--so-radius-md) !important;
  overflow: hidden;
  background: var(--so-surface) !important;
  box-shadow: none !important;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  transition: transform var(--so-duration) var(--so-ease),
              box-shadow var(--so-duration) var(--so-ease),
              border-color var(--so-duration) var(--so-ease);
}
.product-miniature:hover > .card {
  transform: translateY(-4px);
  box-shadow: var(--so-shadow-2) !important;
  border-color: var(--so-gold-text) !important;
}
.product-miniature__link {
  text-decoration: none !important;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Image — pleine largeur de la carte, fond cream doux, petit padding interne pour respirer */
.product-miniature__image-container,
.product-miniature .thumbnail-container,
.product-miniature .card-img-top-wrapper {
  aspect-ratio: 1 / 1;
  background: var(--so-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.product-miniature__image,
.product-miniature .card-img-top,
.product-miniature picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 18px !important;
  transition: transform 0.5s var(--so-ease);
}
.product-miniature:hover .product-miniature__image,
.product-miniature:hover .card-img-top { transform: scale(1.05); }

/* Bloc infos — UNE seule zone de padding, espacement régulier */
.product-miniature__infos,
.product-miniature .card-body {
  padding: var(--so-space-5) var(--so-space-5) var(--so-space-5) !important;
  display: flex;
  flex-direction: column;
  gap: var(--so-space-3);
  flex: 1 1 auto;
  margin: 0 !important;
  border: 0 !important;
}
.product-miniature__infos__top { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--so-space-2); margin: 0; }
.product-miniature__infos__bottom { margin: 0; }

/* Titre */
.product-miniature__title,
.product-miniature .product-title,
.product-miniature h2.h3,
.product-miniature h3 {
  font-size: 0.95rem !important;
  font-weight: var(--so-font-weight-semibold) !important;
  color: var(--so-ink) !important;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.66em;
}
.product-miniature__title a, .product-miniature .product-title a { color: inherit !important; text-decoration: none !important; }
.product-miniature:hover .product-miniature__title,
.product-miniature:hover .product-title { color: var(--so-gold-text) !important; }

/* Catégorie / marque secondaire si présente */
.product-miniature .product-reference,
.product-miniature__category,
.product-miniature .product-manufacturer {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--so-muted);
  font-weight: var(--so-font-weight-semibold);
  margin: 0;
}

/* Prix — gros, en or, avec suffixe "TTC" */
.product-miniature__prices,
.product-miniature__price-and-shipping,
.product-miniature .product-price-and-shipping {
  display: flex;
  align-items: baseline;
  gap: var(--so-space-2) var(--so-space-3);
  flex-wrap: wrap;
  margin: 0;
}
.product-miniature__price,
.product-miniature .price,
.product-miniature .product-price,
.product-miniature span[itemprop="price"] {
  font-size: 1.22rem !important;
  font-weight: var(--so-font-weight-bold) !important;
  color: var(--so-gold-text) !important;
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.product-miniature__price::after,
.product-miniature .price::after {
  content: "TTC";
  font-size: 0.62em;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-muted);
  letter-spacing: 0.02em;
}
.product-miniature__discount-price,
.product-miniature .regular-price {
  font-size: 0.86rem !important;
  color: var(--so-muted) !important;
  text-decoration: line-through;
  font-weight: var(--so-font-weight-regular);
}
.product-miniature .discount-percentage,
.product-miniature .product-flag.discount,
.product-miniature .discount.discount-percentage {
  background: var(--so-gold) !important;
  color: #fff !important;
  border-radius: var(--so-radius-pill);
  font-size: 0.72rem;
  font-weight: var(--so-font-weight-bold);
  padding: 2px 9px;
}

/* Bouton "Ajouter" — pill or, pleine largeur */
.product-miniature [data-button-action="add-to-cart"],
.product-miniature button.add-to-cart,
.product-miniature__add-to-cart .btn,
.product-miniature .product-add-to-cart .btn {
  display: flex !important;
  width: 100% !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--so-ink) !important;
  border: 1px solid var(--so-ink) !important;
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: var(--so-font-weight-semibold);
  padding: 10px 16px !important;
  border-radius: var(--so-radius-pill) !important;
  box-shadow: none !important;
  margin-top: var(--so-space-2);
  transition: background var(--so-duration-fast) var(--so-ease),
              border-color var(--so-duration-fast) var(--so-ease),
              transform var(--so-duration-fast) var(--so-ease);
  text-transform: none;
  letter-spacing: -0.005em;
  flex-grow: 0 !important;
}
.product-miniature [data-button-action="add-to-cart"]:hover,
.product-miniature button.add-to-cart:hover,
.product-miniature__add-to-cart .btn:hover {
  background: var(--so-gold) !important;
  border-color: var(--so-gold-text) !important;
  color: #fff !important;
  transform: translateY(-1px);
}
.product-miniature [data-button-action="add-to-cart"][disabled],
.product-miniature [data-button-action="add-to-cart"]:disabled {
  background: var(--so-muted-soft) !important;
  border-color: var(--so-muted-soft) !important;
  cursor: not-allowed;
}
.product-miniature [data-button-action="add-to-cart"] i,
.product-miniature [data-button-action="add-to-cart"] .material-icons { font-size: 18px; }

/* Variantes couleur/taille sous le produit */
.product-miniature__variants,
.product-miniature .variant-links {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.product-miniature .variant-links a, .product-miniature__variants .color {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--so-border-strong);
  display: inline-block;
}

/* Flags produit */
.product-flags { position: absolute; top: 10px; left: 10px; z-index: 2; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.product-flag {
  display: inline-block;
  background: var(--so-ink);
  color: #fff;
  font-size: 0.68rem;
  font-weight: var(--so-font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--so-radius-pill);
}
.product-flag.new, .product-flag.online-only { background: var(--so-gold); }
.product-flag.on-sale, .product-flag.discount { background: var(--so-ink); }
.product-flag.out_of_stock, .product-flag.pack { background: var(--so-muted); }

/* Quickview — discret au hover */
.product-miniature__quickview,
.product-miniature .quick-view { opacity: 0; transition: opacity var(--so-duration-fast) var(--so-ease); }
.product-miniature:hover .product-miniature__quickview,
.product-miniature:hover .quick-view { opacity: 1; }
.product-miniature__quickview_button.btn,
.product-miniature .quick-view {
  background: rgba(28,25,23,.85) !important;
  color: #fff !important;
  border: 0;
  border-radius: var(--so-radius-pill);
  font-size: 0.78rem;
  padding: 6px 14px;
  backdrop-filter: blur(8px);
}
.product-miniature__quickview_button.btn:hover,
.product-miniature .quick-view:hover { background: var(--so-gold) !important; }

/* Barre de tri / filtres */
.products-selection,
.products-selections-filters {
  margin-bottom: var(--so-space-6);
  padding-bottom: var(--so-space-4);
  border-bottom: 1px solid var(--so-border);
  align-items: center;
}
.products-sort-order .select-title,
.products-sort-order .dropdown-toggle,
.products-sort-order .btn {
  border: 1px solid var(--so-border-strong) !important;
  border-radius: var(--so-radius-sm) !important;
  background: var(--so-surface) !important;
  color: var(--so-ink) !important;
  font-size: 0.9rem;
  padding: 8px 14px;
  box-shadow: none !important;
}
.total-products p, .total-products { color: var(--so-muted); font-size: 0.9rem; margin: 0; }

/* Sidebar filtres (ps_facetedsearch) */
#search_filters, #_desktop_left_column .block, .left-column .block {
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-md);
  background: var(--so-surface);
  padding: var(--so-space-5);
  margin-bottom: var(--so-space-5);
}
#search_filters .facet-title, .left-column .block .title { color: var(--so-ink); font-weight: var(--so-font-weight-semibold); }
#search_filters .facet .collapse, #search_filters .facet ul { list-style: none; padding: 0; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   FICHE PRODUIT — design v2, cohérent avec le reste du site
   ═══════════════════════════════════════════════════════════════════ */
#product .container, .page-product .container { max-width: var(--so-container); }
#product .breadcrumb, .page-product .breadcrumb { margin-bottom: var(--so-space-4); }

/* Layout produit : 2 colonnes (images à gauche / infos à droite).
   NE PAS ajouter de gap sur la .row Bootstrap (col-6 + col-6 = 100%, un gap
   ferait déborder → la 2e colonne passerait à la ligne et tout s'empilerait). */
.page-product .product.js-product-container,
#product .row.product {
  align-items: flex-start;
  gap: 0;
}
/* Forcer le côté gauche = images, côté droit = infos, côte à côte dès lg */
@media (min-width: 992px) {
  .product__left, #product .product__left { order: 0; }
  .product__col,  #product .product__col  { order: 1; }
}
/* Filet de sécurité : si les colonnes Bootstrap ne s'appliquent pas, forcer le flex */
.product__left { min-width: 0; }
.product__col  { min-width: 0; }

/* Galerie images */
.product__images, .js-images-container {
  position: relative;
}
.product-cover, .product__cover, .js-product-cover {
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-lg);
  overflow: hidden;
  background: var(--so-bg-soft);
}
.product-cover img, .product__cover img { width: 100%; height: auto; object-fit: contain; padding: clamp(20px, 4vw, 48px); }
.product-images, .product__thumbs, .js-product-images {
  display: flex; gap: var(--so-space-3); margin-top: var(--so-space-3); flex-wrap: wrap;
}
.product-images li, .product__thumb {
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-sm);
  overflow: hidden;
  width: 76px; height: 76px;
  background: var(--so-bg-soft);
  cursor: pointer;
  transition: border-color var(--so-duration-fast) var(--so-ease);
}
.product-images li:hover, .product-images li.selected, .product__thumb:hover, .product__thumb.selected { border-color: var(--so-gold-text); }
.product-images li img, .product__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* Titre produit — H1 grand */
.product__name, #product h1.product__name, .page-product h1 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem) !important;
  font-weight: var(--so-font-weight-bold) !important;
  color: var(--so-ink) !important;
  line-height: 1.2;
  letter-spacing: -0.022em;
  margin-bottom: var(--so-space-3) !important;
}
.product__reference, .product-reference {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--so-muted);
  font-weight: var(--so-font-weight-semibold);
  margin-bottom: var(--so-space-4);
}
.product-manufacturer, .product__manufacturer { color: var(--so-muted); font-size: 0.88rem; margin-bottom: var(--so-space-3); }
.product-manufacturer img, .product__manufacturer img { max-height: 36px; width: auto; }

/* Prix produit — gros, en or, suffixe TTC */
.product__prices, .product-prices, .js-product-prices {
  margin: var(--so-space-5) 0;
  padding: var(--so-space-5) 0;
  border-top: 1px solid var(--so-border);
  border-bottom: 1px solid var(--so-border);
}
.product-price, .current-price-value, .product__price, .current-price span[itemprop="price"], .current-price .price {
  font-size: 2rem !important;
  font-weight: var(--so-font-weight-bold) !important;
  color: var(--so-gold-text) !important;
  letter-spacing: -0.02em;
  line-height: 1;
}
.current-price { display: inline-flex; align-items: baseline; gap: 6px; }
.current-price::after, .product__price-wrapper::after {
  content: "TTC";
  font-size: 0.5em;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-muted);
  letter-spacing: 0.02em;
}
.regular-price, .product-discount .regular-price {
  font-size: 1rem !important;
  color: var(--so-muted) !important;
  text-decoration: line-through;
  margin-left: var(--so-space-2);
}
.product-discount .discount, .discount.discount-percentage, .product-flag.discount {
  background: var(--so-gold) !important;
  color: #fff !important;
  border-radius: var(--so-radius-pill);
  font-size: 0.8rem;
  font-weight: var(--so-font-weight-bold);
  padding: 3px 12px;
  margin-left: var(--so-space-2);
}
.product-unit-price, .tax-shipping-delivery-label { font-size: 0.8rem; color: var(--so-muted); margin-top: var(--so-space-2); }

/* Quantité + bouton ajouter */
.product-quantity, .product__quantity, .js-product-actions {
  display: flex;
  gap: var(--so-space-3);
  align-items: stretch;
  flex-wrap: wrap;
  margin: var(--so-space-5) 0;
}
.product-quantity .qty, .product__quantity .qty, .quantity-button {
  display: flex; align-items: stretch;
  border: 1px solid var(--so-border-strong);
  border-radius: var(--so-radius-sm);
  overflow: hidden;
}
.product-quantity input.js-cart-line-product-quantity,
.product-quantity #quantity_wanted,
input[name="qty"] {
  width: 56px !important;
  text-align: center;
  border: 0 !important;
  font-size: 1rem;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
  background: var(--so-surface);
}
.product-quantity .bootstrap-touchspin-up, .product-quantity .bootstrap-touchspin-down,
.btn-touchspin {
  background: var(--so-bg-soft) !important;
  border: 0 !important;
  color: var(--so-ink) !important;
  width: 38px;
  font-size: 1.1rem;
}
.btn-touchspin:hover { background: var(--so-border) !important; }

/* Bouton "Ajouter au panier" fiche produit — gros, or, pill */
.product__add-to-cart .btn,
.product-add-to-cart .btn,
button.add-to-cart,
[data-button-action="add-to-cart"].btn-primary {
  background: var(--so-gold) !important;
  border: 1px solid var(--so-gold) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: var(--so-font-weight-semibold);
  padding: 14px 32px !important;
  border-radius: var(--so-radius-pill) !important;
  box-shadow: var(--so-shadow-gold) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  transition: transform var(--so-duration) var(--so-ease-out), box-shadow var(--so-duration) var(--so-ease-out), background-color var(--so-duration) var(--so-ease-out), border-color var(--so-duration) var(--so-ease-out), color var(--so-duration) var(--so-ease-out);
  flex-grow: 1;
}
.product__add-to-cart .btn:hover,
.product-add-to-cart .btn:hover,
button.add-to-cart:hover {
  background: var(--so-gold-hover) !important;
  border-color: var(--so-gold-hover) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* Description / onglets produit */
.product-information, .product__description-short, .product__description {
  color: var(--so-ink-2);
  font-size: 1.02rem;
  line-height: 1.7;
}
.product-tabs, .tabs, .product__tabs { margin-top: var(--so-space-12); }
.product-tabs .nav-tabs, .product__tabs .nav-tabs {
  border-bottom: 1px solid var(--so-border);
  gap: var(--so-space-2);
}
.product-tabs .nav-tabs .nav-link, .product__tabs .nav-tabs .nav-link {
  color: var(--so-muted);
  font-weight: var(--so-font-weight-medium);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: var(--so-space-3) var(--so-space-4);
}
.product-tabs .nav-tabs .nav-link.active, .product__tabs .nav-tabs .nav-link.active {
  color: var(--so-ink);
  border-bottom-color: var(--so-gold-text);
  background: transparent;
}
.product-tab-content, .tab-content, .product__tab-content { padding: var(--so-space-6) 0; }

/* Accordéons produit (caractéristiques, etc.) */
.product-features .feature-name, .product-features dt { color: var(--so-muted); font-weight: var(--so-font-weight-medium); }
.product-features .feature-value, .product-features dd { color: var(--so-ink); font-weight: var(--so-font-weight-semibold); }
.data-sheet, .product-features table { width: 100%; }
.data-sheet dt, .data-sheet dd, .product-features table td { padding: 8px 12px; border-bottom: 1px solid var(--so-border); }

/* Bloc réassurance / livraison sous le bouton */
.product-additional-info, .product__additional-info, .reassurance-block {
  display: flex; flex-direction: column; gap: var(--so-space-3);
  margin-top: var(--so-space-6);
  padding-top: var(--so-space-5);
  border-top: 1px solid var(--so-border);
}
.product-additional-info .item, .reassurance-item {
  display: flex; align-items: center; gap: var(--so-space-3);
  font-size: 0.9rem; color: var(--so-ink-2);
}
.product-additional-info .item i, .reassurance-item i { color: var(--so-gold-text); font-size: 22px; }

/* Produits associés / accessoires en bas de fiche */
.product-accessories, .featured-products, .product-related { margin-top: var(--so-space-16); }
.product-accessories h2, .featured-products h2, .product-related h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: var(--so-font-weight-bold);
  color: var(--so-ink);
  margin-bottom: var(--so-space-6);
}

/* ─── Compléments : texte "Ajouter" visible + sélecteurs prix Hummingbird ─── */
/* Le bouton add-to-cart miniature n'a qu'une icône + un span visually-hidden.
   On rend le texte visible et on garde l'icône. */
.product-miniature [data-button-action="add-to-cart"] .visually-hidden,
.product-miniature button.add-to-cart .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: nowrap !important;
  font-size: 0.88rem;
  font-weight: var(--so-font-weight-semibold);
}

/* Prix fiche produit — sélecteurs Hummingbird réels (.product__current-price, .product__prices) */
#product .product__current-price,
.page-product .product__current-price,
#product .product__price,
.product__current-price .price {
  font-size: 2rem !important;
  font-weight: var(--so-font-weight-bold) !important;
  color: var(--so-gold-text) !important;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
#product .product__current-price::after,
.page-product .product__current-price::after {
  content: "TTC";
  font-size: 0.5em;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-muted);
  letter-spacing: 0.02em;
}
#product .product__prices, .page-product .product__prices,
.prices__wrapper {
  margin: var(--so-space-5) 0;
  padding: var(--so-space-5) 0;
  border-top: 1px solid var(--so-border);
  border-bottom: 1px solid var(--so-border);
}
.product__regular-price, .product__discount .regular-price {
  font-size: 1rem !important;
  color: var(--so-muted) !important;
  text-decoration: line-through;
  margin-left: var(--so-space-2);
}

/* ─── Corrections retours utilisateur 2026-05-10 (lot 2) ─── */

/* 1. Checkbox conditions générales (page paiement) — visible ET sur la même ligne que son texte.
   Structure PS : <div class="condition-checkbox"><input type=checkbox><label>…</label></div>
   → on met le conteneur en flex pour aligner input (gauche) + label (droite) sur une ligne. */
.condition-checkbox,
#conditions-to-approve,
#conditions-to-approve > div,
.js-terms,
.checkout-terms,
#payment-confirmation .ps-shown-by-js {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: var(--so-space-4) 0;
  flex-wrap: nowrap;
}
.condition-checkbox input[type="checkbox"],
#conditions-to-approve input[type="checkbox"],
.checkout-terms input[type="checkbox"],
.js-terms input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin: 2px 0 0 0 !important;
  accent-color: var(--so-gold-text);
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  flex: 0 0 18px;
  display: inline-block !important;
}
.condition-checkbox label,
#conditions-to-approve label,
.checkout-terms label,
.js-terms label {
  display: inline;
  margin: 0;
  font-size: 0.92rem;
  color: var(--so-ink-2);
  line-height: 1.5;
  cursor: pointer;
  flex: 1 1 auto;
}
.condition-checkbox label a,
#conditions-to-approve label a { color: var(--so-gold-text); text-decoration: underline; }

/* 2. Page Mon Panier : masquer le prix unitaire affiché SOUS le nom du produit.
   Le prix reste affiché à côté de la quantité (ligne total / current price). */
.product-line__content .product-line__prices.product-line__item,
.product-line__content .product-line__price,
.product-line .product-line__content > .price { display: none !important; }
/* S'assurer que le prix de ligne (à côté de la quantité) reste visible et lisible */
.product-line__informations .product-line__current,
.product-line__current,
.product-line__informations .price,
.product-line .price.product-line__total {
  display: block !important;
  font-size: 1.05rem;
  font-weight: var(--so-font-weight-bold);
  color: var(--so-ink);
}
.product-line__informations { display: flex; flex-direction: column; gap: var(--so-space-3); }

/* 3. Page liste produits : GRILLE 3 produits par ligne (cards verticales : image en haut, infos dessous).
   Override des colonnes Bootstrap des .product-miniature → 33,33 % sur desktop, 50 % sur tablette, 100 % mobile. */
.products.row { --bs-gutter-x: var(--so-space-5); --bs-gutter-y: var(--so-space-5); }
.products.row .product-miniature.js-product-miniature {
  width: 33.3333% !important;
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
}
@media (max-width: 992px) {
  .products.row .product-miniature.js-product-miniature {
    width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important;
  }
}
@media (max-width: 575px) {
  .products.row .product-miniature.js-product-miniature {
    width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
  }
}
/* Card verticale */
.product-miniature > .card,
.product-miniature > .card .product-miniature__link {
  flex-direction: column !important;
  align-items: stretch;
}
.product-miniature__image-container,
.product-miniature .thumbnail-container {
  flex: 0 0 auto !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-right: 0;
}
.product-miniature__infos,
.product-miniature .card-body {
  flex: 1 1 auto;
  justify-content: flex-start;
}
.product-miniature__infos__top { gap: var(--so-space-2); flex: 1 1 auto; }

/* ─── Corrections fiche produit 2026-05-10 (lot 3) ─── */

/* 1. Le "TTC" en dessous du prix est masqué (le "TTC" ajouté à côté du prix via ::after suffit) */
.product__tax-info,
.product__tax-label,
#product .product-unit-price + .tax-shipping-delivery-label { display: none !important; }
/* Le ::after "TTC" reste sur .product__current-price (cf. bloc plus haut) — bien collé au prix */
#product .product__current-price,
.page-product .product__current-price {
  display: inline-flex !important;
  align-items: baseline;
  gap: 6px;
}
.prices__wrapper { margin-bottom: var(--so-space-4) !important; }

/* 2. Boutons quantité +/- — blancs, petits, de part et d'autre du champ. 
   Markup réel : .product-actions__quantity > .input-group > button.btn.decrement / input / button.btn.increment */
.product-actions__quantity,
.quantity-button { display: inline-block; margin: var(--so-space-5) 0; }
.product-actions__quantity .input-group,
.quantity-button .input-group {
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: stretch;
  border: 1px solid var(--so-border-strong);
  border-radius: var(--so-radius-sm);
  overflow: hidden;
  width: auto;
  background: var(--so-surface);
  margin-bottom: 0 !important;
}
.product-actions__quantity .input-group .btn,
.product-actions__quantity .btn.decrement,
.product-actions__quantity .btn.increment,
.quantity-button .input-group .btn,
.quantity-button .btn.decrement,
.quantity-button .btn.increment {
  background: var(--so-surface) !important;
  color: var(--so-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 36px !important;
  min-width: 36px;
  height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background var(--so-duration-fast) var(--so-ease);
  flex: 0 0 36px;
}
.product-actions__quantity .btn.decrement { border-right: 1px solid var(--so-border) !important; }
.product-actions__quantity .btn.increment { border-left: 1px solid var(--so-border) !important; }
.product-actions__quantity .input-group .btn:hover,
.quantity-button .input-group .btn:hover {
  background: var(--so-bg-soft) !important;
  color: var(--so-ink) !important;
  transform: none;
}
.product-actions__quantity .input-group .btn .material-icons,
.quantity-button .input-group .btn .material-icons { font-size: 18px; }
.product-actions__quantity .input-group input,
.product-actions__quantity input#quantity_wanted,
.product-actions__quantity input[name="qty"],
.quantity-button .input-group input {
  width: 50px !important;
  min-width: 50px;
  text-align: center;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: 1rem;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
  background: var(--so-surface) !important;
  box-shadow: none !important;
  padding: 0 4px !important;
  height: 40px !important;
}
.product-actions__quantity .input-group input:focus { box-shadow: none !important; outline: 0; }

/* 3. "Description" et "Détails du produit" — sections propres, pas de bandeau blanc rectangulaire.
   Markup réel : #product-infos-accordion.accordion.accordion-flush > .info.accordion-item
                 > h2.info__title.accordion-header > button.accordion-button + .info__content.accordion-collapse */
#product-infos-accordion.accordion,
.product__infos.accordion {
  --bs-accordion-border-width: 0;
  --bs-accordion-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-bg: transparent;
  background: transparent;
  border: 0;
  margin-top: var(--so-space-12);
}
#product-infos-accordion .info.accordion-item,
.product__infos .info.accordion-item {
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--so-border) !important;
  padding: var(--so-space-6) 0;
}
#product-infos-accordion .info.accordion-item:first-child,
.product__infos .info.accordion-item:first-child { border-top: 0 !important; padding-top: 0; }
#product-infos-accordion .info__title,
.product__infos .info__title {
  margin: 0;
  background: transparent;
}
#product-infos-accordion .accordion-button,
.product__infos .accordion-button {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 0 var(--so-space-4) 0 !important;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem) !important;
  font-weight: var(--so-font-weight-bold) !important;
  color: var(--so-ink) !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  cursor: pointer;
}
#product-infos-accordion .accordion-button:not(.collapsed),
.product__infos .accordion-button:not(.collapsed) { color: var(--so-ink) !important; }
/* Chevron — petit, en pastille or-soft (comme la FAQ des hubs) */
#product-infos-accordion .accordion-button::after,
.product__infos .accordion-button::after {
  width: 1.4rem;
  height: 1.4rem;
  background-size: 0.85rem;
  background-position: center;
  background-color: var(--so-gold-soft);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23D97706' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  margin-left: var(--so-space-3);
}
#product-infos-accordion .accordion-button:not(.collapsed)::after,
.product__infos .accordion-button:not(.collapsed)::after {
  background-color: var(--so-gold-text);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  transform: rotate(-180deg);
}
#product-infos-accordion .accordion-body,
.product__infos .accordion-body {
  padding: 0 !important;
  color: var(--so-ink-2);
  font-size: 1.02rem;
  line-height: 1.7;
}
#product-infos-accordion .accordion-body p { line-height: 1.7; }
/* Liste des détails produit (Marque, etc.) — propre */
#product-infos-accordion .product__details,
.product__details {
  list-style: none;
  padding: 0;
  margin: 0;
}
#product-infos-accordion .product__details .detail,
.product__details .detail {
  display: flex;
  justify-content: space-between;
  gap: var(--so-space-4);
  padding: var(--so-space-3) 0;
  border-bottom: 1px solid var(--so-border);
}
#product-infos-accordion .product__details .detail:last-child,
.product__details .detail:last-child { border-bottom: 0; }
.product__details .detail__title { color: var(--so-muted); font-weight: var(--so-font-weight-medium); }
.product__details .detail__value, .product__details .detail__right { color: var(--so-ink); font-weight: var(--so-font-weight-semibold); }

/* ─── Corrections fiche produit + catégorie 2026-05-10 (lot 4) ─── */

/* A. Fiche produit : retrait du cadre/border autour de la quantité */
#product .product-actions__quantity .input-group,
.page-product .product-actions__quantity .input-group,
#product .quantity-button .input-group {
  border: 0 !important;
  border-radius: var(--so-radius-sm) !important;
  overflow: visible;
  background: transparent !important;
}
#product .product-actions__quantity .btn.decrement,
#product .product-actions__quantity .btn.increment,
.page-product .product-actions__quantity .btn.decrement,
.page-product .product-actions__quantity .btn.increment {
  background: var(--so-surface) !important;
  border: 1px solid var(--so-border) !important;
  border-radius: var(--so-radius-xs) !important;
}
#product .product-actions__quantity .input-group input,
.page-product .product-actions__quantity .input-group input {
  border: 0 !important;
  background: transparent !important;
  width: 44px !important;
  min-width: 44px;
}

/* B. Fiche produit : bouton "Ajouter" à la largeur du texte (pas pleine largeur) */
#product .product-actions__button.add,
#product .product-actions__button.add.col,
.page-product .product-actions__button.add {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: max-content;
}
#product .product__add-to-cart .btn,
#product .product-add-to-cart .btn,
#product button.add-to-cart,
.page-product button.add-to-cart {
  flex-grow: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 13px 28px !important;
}

/* C. Catégorie : bouton "Aperçu rapide" — intégré en bas de l'image, petit, centré */
/* On masque la version texte placée dans le card-body (mal positionnée) */
.product-miniature__quickview { display: none !important; }
/* Et on restyle le bouton "touch" qui est posé sur l'image → petit pill centré, apparait au hover */
.product-miniature__image-container .product-miniature__quickview_touch,
.product-miniature .thumbnail-container .product-miniature__quickview_touch {
  position: absolute !important;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  background: rgba(28, 25, 23, 0.85) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--so-radius-pill) !important;
  padding: 7px 16px !important;
  font-size: 0.78rem;
  font-weight: var(--so-font-weight-medium);
  backdrop-filter: blur(8px);
  box-shadow: var(--so-shadow-1);
  opacity: 0;
  transition: opacity var(--so-duration-fast) var(--so-ease),
              transform var(--so-duration-fast) var(--so-ease),
              background var(--so-duration-fast) var(--so-ease);
  z-index: 3;
}
.product-miniature:hover .product-miniature__quickview_touch {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.product-miniature__quickview_touch:hover { background: var(--so-gold) !important; }
.product-miniature__quickview_touch .material-icons { font-size: 16px; }
/* Ajouter le libellé "Aperçu" après l'icône (le bouton touch n'a qu'une icône) */
.product-miniature__quickview_touch::after {
  content: "Aperçu";
}

/* D. Catégorie : le bloc du produit a bien sa quantité +/- et son bouton "Ajouter" */
.product-miniature form[action*="/panier"],
.product-miniature .product-miniature__add-to-cart form {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--so-space-2);
  align-items: stretch;
  margin-top: var(--so-space-3) !important;
}
.product-miniature .quantity-button,
.product-miniature .js-quantity-button {
  width: auto !important;
  flex: 0 0 auto;
}
.product-miniature .quantity-button .input-group {
  display: inline-flex !important;
  flex-wrap: nowrap;
  border: 1px solid var(--so-border-strong);
  border-radius: var(--so-radius-sm);
  overflow: hidden;
  margin-bottom: 0 !important;
  background: var(--so-surface);
}
.product-miniature .quantity-button .btn.decrement,
.product-miniature .quantity-button .btn.increment {
  background: var(--so-surface) !important;
  color: var(--so-ink) !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 32px !important;
  min-width: 32px;
  height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
}
.product-miniature .quantity-button .btn.decrement { border-right: 1px solid var(--so-border) !important; }
.product-miniature .quantity-button .btn.increment { border-left: 1px solid var(--so-border) !important; }
.product-miniature .quantity-button .btn.decrement:hover,
.product-miniature .quantity-button .btn.increment:hover { background: var(--so-bg-soft) !important; }
.product-miniature .quantity-button .btn .material-icons { font-size: 16px; }
.product-miniature .quantity-button .input-group input {
  width: 40px !important;
  min-width: 40px;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center;
  font-size: 0.9rem;
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
  background: var(--so-surface) !important;
  box-shadow: none !important;
  height: 38px !important;
  padding: 0 !important;
}
/* Bouton "Ajouter" du card — natural width, icône + texte visibles */
.product-miniature [data-button-action="add-to-cart"] {
  width: auto !important;
  flex: 1 1 auto !important;
  flex-grow: 1 !important;
  background: var(--so-ink) !important;
  border: 1px solid var(--so-ink) !important;
  color: #fff !important;
  font-size: 0.86rem !important;
  font-weight: var(--so-font-weight-semibold);
  padding: 8px 16px !important;
  border-radius: var(--so-radius-pill) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: none !important;
  height: 38px;
  text-transform: none;
}
.product-miniature [data-button-action="add-to-cart"]:hover {
  background: var(--so-gold) !important;
  border-color: var(--so-gold-text) !important;
  transform: translateY(-1px);
}
.product-miniature [data-button-action="add-to-cart"] .material-icons { font-size: 18px; }

/* E. Fiche produit : items "Détails du produit" / "Fiche technique" — homogènes, SANS gras */
#product-infos-accordion .product__details,
#product-infos-accordion .product__features,
.product__details, .product__features {
  list-style: none;
  padding: 0;
  margin: 0;
}
#product-infos-accordion .product__details .detail,
#product-infos-accordion .product__features .detail,
.product__details .detail, .product__features .detail {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--so-space-5);
  padding: var(--so-space-3) 0;
  border-bottom: 1px solid var(--so-border);
  margin: 0;
}
#product-infos-accordion .product__details .detail:last-child,
#product-infos-accordion .product__features .detail:last-child,
.product__details .detail:last-child, .product__features .detail:last-child { border-bottom: 0; }
.detail__left, .detail__right { margin: 0; padding: 0; }
.detail__title {
  color: var(--so-muted) !important;
  font-weight: var(--so-font-weight-regular) !important;
  font-size: 0.95rem;
}
.detail__right, .detail__value, .detail__right a {
  color: var(--so-ink) !important;
  font-weight: var(--so-font-weight-regular) !important;
  font-size: 0.95rem;
  text-align: right;
}
.detail__right a { text-decoration: none; }
.detail__right a:hover { color: var(--so-gold-text) !important; text-decoration: underline; }
/* Annule les anciennes règles .product-features.feature-* qui mettaient du gras */
.product-features .feature-name, .product-features dt { font-weight: var(--so-font-weight-regular) !important; color: var(--so-muted) !important; }
.product-features .feature-value, .product-features dd { font-weight: var(--so-font-weight-regular) !important; color: var(--so-ink) !important; }

/* ─── Popup "Produit ajouté au panier" (#blockcart-modal — ps_shoppingcart) ─── */
/* Le modal natif a un markup brut (div > div > section > h1). On le stylise en popup propre. */
#blockcart-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 25, 23, 0.5);
  backdrop-filter: blur(3px);
  padding: var(--so-space-4);
}
#blockcart-modal > div {
  background: var(--so-surface);
  border-radius: var(--so-radius-lg);
  box-shadow: var(--so-shadow-3);
  max-width: 460px;
  width: 100%;
  padding: var(--so-space-8);
  text-align: center;
  position: relative;
}
#blockcart-modal section { margin-bottom: var(--so-space-5); }
#blockcart-modal h1 {
  font-size: 1.25rem !important;
  font-weight: var(--so-font-weight-bold) !important;
  color: var(--so-ink) !important;
  margin: 0 0 var(--so-space-3) 0 !important;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
/* Petite pastille de confirmation or au-dessus du titre */
#blockcart-modal h1::before {
  content: "✓";
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--so-space-4);
  border-radius: 50%;
  background: var(--so-gold-soft);
  color: var(--so-gold-text);
  font-size: 1.5rem;
  line-height: 48px;
  font-weight: var(--so-font-weight-bold);
}
#blockcart-modal .cart-content { color: var(--so-ink-2); font-size: 0.95rem; line-height: 1.6; }
#blockcart-modal .cart-content p { margin: 4px 0; }
#blockcart-modal .product-name, #blockcart-modal .cart-content .product-name {
  font-weight: var(--so-font-weight-semibold);
  color: var(--so-ink);
}
#blockcart-modal .cart-content-btn,
#blockcart-modal .modal-dialog .modal-footer,
#blockcart-modal .cart-content + div {
  display: flex;
  gap: var(--so-space-3);
  justify-content: center;
  margin-top: var(--so-space-5);
  flex-wrap: wrap;
}
#blockcart-modal .cart-content-btn .btn,
#blockcart-modal a.btn, #blockcart-modal button.btn {
  font-size: 0.92rem;
  padding: 11px 22px;
}
/* Bouton "continuer mes achats" en outline, "passer commande" en or */
#blockcart-modal .btn-secondary, #blockcart-modal [data-dismiss], #blockcart-modal .continue {
  background: transparent !important;
  color: var(--so-ink) !important;
  border: 1px solid var(--so-border-strong) !important;
}
#blockcart-modal .btn-primary, #blockcart-modal a[href*="/commande"], #blockcart-modal a[href*="/panier"] {
  background: var(--so-gold) !important;
  border-color: var(--so-gold-text) !important;
  color: #fff !important;
}
/* Bouton de fermeture (croix) si présent */
#blockcart-modal .close, #blockcart-modal .btn-close, #blockcart-modal [aria-label="Close"] {
  position: absolute;
  top: var(--so-space-4);
  right: var(--so-space-4);
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  color: var(--so-muted);
  cursor: pointer;
  line-height: 1;
}
#blockcart-modal .close:hover, #blockcart-modal .btn-close:hover { color: var(--so-ink); }
/* Cacher si pas affiché (le JS ajoute une classe pour montrer) */
#blockcart-modal:not(.show):not(.in):not([style*="display: block"]):not([style*="display:block"]) {
  /* on laisse PrestaShop gérer l'affichage via JS — pas de display:none forcé ici
     pour éviter de casser l'ouverture. Si le modal reste visible en permanence,
     décommenter : display: none; */
}

/* ════════════════════════════════════════════════════════════
   Journal (smartblog) — liste d'articles + page article — design v2
   ════════════════════════════════════════════════════════════ */
/* on masque l'en-tête de page vide (« <h1 class="h4"></h1> ») des pages du journal */
.page-blog-category .page-header, .page-blog-details #content > .page-header, #blog-details + #content .page-header { display: none; }
body#blog-details .page-header, body[class*="page-blog"] .page-header { display: none; }

/* --- conteneur de la liste --- */
#box-blog-grid, .smartblogcat {
  max-width: var(--so-container); margin-inline: auto; padding: var(--so-space-8) var(--so-space-4);
}
.smartblogcat #box-blog-grid { max-width: none; margin: 0; padding: 0; }
/* description / intro éventuelle de la catégorie blog */
.smartblogcat .category-description, .blog-category-description { max-width: 760px; margin: 0 auto var(--so-space-7); color: var(--so-ink-2); line-height: 1.7; }

/* --- grille adaptative : colonnes ≥ 290 px, autant que la largeur le permet --- */
#box-blog-grid .wrapper-items, .blogs .wrapper-items, .archive-wrapper-items.wrapper-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--so-space-6);
  list-style: none; padding: 0; margin: 0;
}
#box-blog-grid .item, .blogs .item, .archive-wrapper-items .item {
  margin: 0 !important; padding: 0 !important; width: auto !important;
  max-width: none !important; float: none !important; list-style: none; min-width: 0;
}

/* --- carte article --- */
.so-blog-card {
  display: flex; flex-direction: column;
  background: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-md);
  overflow: hidden; height: 100%;
  transition: transform var(--so-duration) var(--so-ease), box-shadow var(--so-duration) var(--so-ease), border-color var(--so-duration) var(--so-ease);
}
.so-blog-card:hover { transform: translateY(-3px); box-shadow: var(--so-shadow-2); border-color: var(--so-gold-text); }
.so-blog-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--so-bg-soft); }
.so-blog-card__media img, .so-blog-card__media picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--so-ease); display: block; }
.so-blog-card:hover .so-blog-card__media img { transform: scale(1.04); }
.so-blog-card__media-ph { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--so-bg-soft), var(--so-border)); }
.so-blog-card__body { padding: var(--so-space-5); display: flex; flex-direction: column; gap: var(--so-space-3); flex: 1 1 auto; }
.so-blog-card__date { font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--so-gold-text); font-weight: var(--so-font-weight-semibold); margin: 0; }
.so-blog-card__title {
  font-size: 1.08rem; font-weight: var(--so-font-weight-bold); color: var(--so-ink); line-height: 1.35; margin: 0; letter-spacing: -0.015em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.so-blog-card__title a { color: inherit; text-decoration: none; }
.so-blog-card:hover .so-blog-card__title a, .so-blog-card__title a:hover { color: var(--so-gold-text); }
.so-blog-card__excerpt {
  font-size: 0.92rem; color: var(--so-muted); line-height: 1.6; margin: 0; flex: 1 1 auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.so-blog-card .so-link-more { margin-top: auto; font-size: 0.9rem; }

/* --- titre éventuel de la page Journal (catégorie blog) --- */
.page-blog-category h1.h4, .blog-category-title, #smart-blog > h1 {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem); font-weight: var(--so-font-weight-bold); color: var(--so-ink); letter-spacing: -0.025em;
}

/* --- pagination de la liste d'articles ---
   markup smartblog : <div class="archive-bottom"><nav class="pagination">
     <span class="page-numbers current">1</span><a class="page-numbers">2</a>…<a class="page-numbers next">Suivant »</a></nav></div>
   (les <a>/<span> sont des enfants directs de <nav.pagination>, pas dans des <li>) */
.archive-bottom { display: flex; justify-content: center; margin: var(--so-space-8) 0 0; }
.archive-bottom .pagination, .smartblogcat .pagination, #smart-blog .pagination {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  list-style: none; padding: 0; margin: 0; border: 0; background: transparent;
}
.archive-bottom .pagination .page-numbers,
.smartblogcat .pagination .page-numbers,
#smart-blog .pagination .page-numbers,
.smartblogcat .pagination > li > a, .smartblogcat .pagination > li > span,
#smart-blog .pagination > li > a, #smart-blog .pagination > li > span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--so-border); border-radius: var(--so-radius-sm);
  background: var(--so-surface); color: var(--so-ink);
  font-size: 0.95rem; font-weight: var(--so-font-weight-semibold); text-decoration: none; line-height: 1;
  transition: background var(--so-duration) var(--so-ease), border-color var(--so-duration) var(--so-ease), color var(--so-duration) var(--so-ease);
}
.archive-bottom .pagination a.page-numbers:hover,
.smartblogcat .pagination a.page-numbers:hover, .smartblogcat .pagination > li > a:hover,
#smart-blog .pagination a.page-numbers:hover, #smart-blog .pagination > li > a:hover {
  background: var(--so-gold-soft); border-color: var(--so-gold-text); color: var(--so-gold-hover);
}
.archive-bottom .pagination .page-numbers.current,
.smartblogcat .pagination .page-numbers.current, .smartblogcat .pagination > li.active > span,
#smart-blog .pagination .page-numbers.current, #smart-blog .pagination > li.active > span {
  background: var(--so-gold); border-color: var(--so-gold-text); color: #fff;
}
.archive-bottom .pagination .page-numbers.next, .archive-bottom .pagination .page-numbers.prev,
.smartblogcat .pagination .next, .smartblogcat .pagination .prev { padding: 0 16px; }
.archive-bottom .pagination .dots, .archive-bottom .pagination .page-numbers.dots { border-color: transparent; background: transparent; min-width: 24px; }

/* --- navigation entre articles (bas de page d'un article) ---
   markup smartblog : <nav class="single-navigation"><div class="nav-btn prev-btn">…<a class="previous-post"><span class="btn-label">Plus récent</span><span class="title-post">…</span></a>…</div>
                       <div class="back-btn"><a class="back-blog">…</a></div><div class="nav-btn next-btn">…<a class="next-post">…</a></div></nav> */
.single-footer { margin: var(--so-space-7) 0 0; min-height: 0; }
.single-navigation {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--so-space-4); align-items: stretch;
  margin: var(--so-space-7) 0 var(--so-space-4); padding: 0;
}
.single-navigation .nav-btn, .single-navigation .back-btn, .single-navigation .nav-btn-inner { display: flex; width: 100%; min-width: 0; }
.single-navigation a {
  display: flex; flex-direction: column; gap: 2px; width: 100%; height: 100%; padding: 14px 16px;
  border: 1px solid var(--so-border); border-radius: var(--so-radius-md); background: var(--so-surface); text-decoration: none;
  transition: border-color var(--so-duration) var(--so-ease), box-shadow var(--so-duration) var(--so-ease), transform var(--so-duration) var(--so-ease);
}
.single-navigation a:hover { border-color: var(--so-gold-text); box-shadow: var(--so-shadow-1); transform: translateY(-2px); }
.single-navigation .next-btn a { text-align: right; }
.single-navigation .btn-label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--so-gold-text); font-weight: var(--so-font-weight-semibold); }
.single-navigation .prev-btn .btn-label::before { content: "‹  "; }
.single-navigation .next-btn .btn-label::after { content: "  ›"; }
.single-navigation .title-post {
  font-size: 0.95rem; color: var(--so-ink); font-weight: var(--so-font-weight-semibold); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.single-navigation .back-btn a {
  flex-direction: row; align-items: center; justify-content: center; white-space: nowrap;
  color: var(--so-ink-2); font-weight: var(--so-font-weight-semibold); font-size: 0.9rem;
}
.single-navigation [class^="axicon"], .single-navigation [class*=" axicon"], .single-navigation i.fa { display: none; } /* icônes du thème Axon non chargées */
@media (max-width: 660px) {
  .single-navigation { grid-template-columns: 1fr; }
  .single-navigation .next-btn a { text-align: left; }
  .single-navigation .back-btn { order: 3; }
}

/* ════════════ Page d'un article (smartblog details.tpl) ════════════ */
/* .blog-single occupe toute la largeur de contenu du site (= homepage, var(--so-container)),
   et le contenu de l'article (titre, méta, image, texte, nav) remplit cette largeur. */
.blog-single { max-width: var(--so-container); margin-inline: auto; padding: var(--so-space-8) var(--so-space-4); }
.blog-single .blog-single-inner { background: transparent; max-width: none; }
.blog-single .entry-title { font-size: clamp(1.95rem, 3.6vw, 2.85rem); font-weight: var(--so-font-weight-bold); color: var(--so-ink); line-height: 1.18; letter-spacing: -0.025em; margin: 0 0 var(--so-space-4); }
.blog-single .entry-info { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 0; margin: 0 0 var(--so-space-7); font-size: 0.85rem; color: var(--so-muted); }
.blog-single .entry-info li { display: inline-flex; align-items: center; }
.blog-single .entry-info li + li::before { content: "·"; margin-right: 18px; color: var(--so-border-strong); }
.blog-single .entry-info a { color: var(--so-gold-text); text-decoration: none; }
.blog-single .entry-info a:hover { text-decoration: underline; }
.blog-single .entry-thumbnail, .blog-single .entry-thumbnail .wrapper-imgs { margin: 0 0 var(--so-space-7); border-radius: var(--so-radius-lg); overflow: hidden; }
.blog-single .entry-thumbnail img, .blog-single .wrapper-imgs img, .blog-single .wrapper-imgs picture { width: 100%; height: auto; display: block; }
.blog-single .entry-content { max-width: none; font-size: 1.06rem; line-height: 1.78; color: var(--so-ink-2); }
.blog-single .entry-content > * + * { margin-top: var(--so-space-4); }
.blog-single .entry-content > h2:first-child { margin-top: 0; }
.blog-single .entry-content h2 { font-size: 1.55rem; font-weight: var(--so-font-weight-bold); color: var(--so-ink); margin-top: var(--so-space-7); letter-spacing: -0.02em; line-height: 1.3; }
.blog-single .entry-content h3 { font-size: 1.25rem; font-weight: var(--so-font-weight-bold); color: var(--so-ink); margin-top: var(--so-space-6); line-height: 1.35; }
.blog-single .entry-content h4 { font-size: 1.08rem; font-weight: var(--so-font-weight-semibold); color: var(--so-ink); margin-top: var(--so-space-5); }
.blog-single .entry-content p { margin-bottom: 0; }
.blog-single .entry-content img { max-width: 100%; height: auto; border-radius: var(--so-radius-md); display: block; margin: var(--so-space-5) auto; }
.blog-single .entry-content a { color: var(--so-gold-text); }
.blog-single .entry-content a:hover { color: var(--so-gold-hover); }
.blog-single .entry-content ul, .blog-single .entry-content ol { padding-left: 1.4em; }
.blog-single .entry-content li + li { margin-top: 0.4em; }
.blog-single .entry-content blockquote { border-left: 3px solid var(--so-gold); padding: 0.15em 0 0.15em 1.2em; color: var(--so-muted); font-style: italic; margin-left: 0; }
.blog-single .entry-content table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.blog-single .entry-content th, .blog-single .entry-content td { border: 1px solid var(--so-border); padding: 8px 12px; text-align: left; }
.blog-single .entry-content th { background: var(--so-bg-soft); }
/* tags / blocs liés / commentaires de l'article */
.blog-single .post-tags, .blog-single .entry-tags { margin-top: var(--so-space-7); display: flex; flex-wrap: wrap; gap: 8px; }
.blog-single .post-tags a, .blog-single .entry-tags a { display: inline-block; padding: 4px 12px; border: 1px solid var(--so-border); border-radius: var(--so-radius-pill); font-size: 0.82rem; color: var(--so-ink-2); text-decoration: none; }
.blog-single .post-tags a:hover, .blog-single .entry-tags a:hover { border-color: var(--so-gold-text); color: var(--so-gold-text); }
.blog-single .related-posts, #smartblogrelatedpost, .blog-single .blog-related { margin-top: var(--so-space-8); }
.blog-single .related-posts h3, #smartblogrelatedpost .title, #smartblogrelatedpost h3, .blog-single .blog-related .title { font-size: 1.4rem; font-weight: var(--so-font-weight-bold); color: var(--so-ink); margin-bottom: var(--so-space-5); }
.blog-single #comments, .blog-single .comments, .comment_form, #respond { margin-top: var(--so-space-8); }
.comment_loop .comment, #comments .comment { border: 1px solid var(--so-border); border-radius: var(--so-radius-md); padding: var(--so-space-5); margin-bottom: var(--so-space-4); background: var(--so-surface); }
#comments h3, .comment_form .title, #respond .title, .comment-respond-title { font-size: 1.4rem; font-weight: var(--so-font-weight-bold); color: var(--so-ink); margin-bottom: var(--so-space-5); }
#commentForm input[type=text], #commentForm input[type=email], #commentForm input[type=url], #commentForm textarea,
.comment_form input[type=text], .comment_form input[type=email], .comment_form textarea {
  width: 100%; border: 1px solid var(--so-border-strong); border-radius: var(--so-radius-sm); padding: 10px 12px; background: var(--so-surface); margin-bottom: var(--so-space-3); font: inherit; color: var(--so-ink);
}

/* ───────────────────────────────────────────────────────────────
 * Radios + checkboxes Bootstrap 5 (.form-check-input) — style v2
 * Bootstrap met appearance:none mais ne charge pas le SVG par défaut
 * → on dessine nous-mêmes radio (pastille gold) et checkbox (check blanc sur gold)
 * ─────────────────────────────────────────────────────────────── */
.form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .2rem;
  border: 1.5px solid var(--so-border-strong) !important;
  background-color: var(--so-surface) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
  print-color-adjust: exact;
}
.form-check-input[type="radio"]    { border-radius: 50%; }
.form-check-input[type="checkbox"] { border-radius: 4px; }
.form-check-input:hover            { border-color: var(--so-gold-text) !important; }
.form-check-input:focus,
.form-check-input:focus-visible {
  border-color: var(--so-gold-text) !important;
  box-shadow: 0 0 0 3px rgba(217,119,6,.18);
  outline: none;
}
.form-check-input:checked {
  background-color: var(--so-gold-text) !important;
  border-color: var(--so-gold-text) !important;
}
.form-check-input[type="radio"]:checked {
  background-image: radial-gradient(circle, #fff 0 28%, transparent 32%);
}
.form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-size: 70%;
}
.form-check-input:disabled,
.form-check-input[disabled] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}
.form-check-label { cursor: pointer; }

/* ───────────────────────────────────────────────────────────────
 * File input v2 (formulaire contact, etc.) — wrapper pour franciser
 * le bouton natif et appliquer le style v2.
 * ─────────────────────────────────────────────────────────────── */
.so-file-upload {
  position: relative;
  display: block;
}
.so-file-upload__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.so-file-upload__face {
  display: flex;
  align-items: center;
  gap: var(--so-space-3, 12px);
  width: 100%;
  padding: 8px 8px 8px 0;
  background: var(--so-surface);
  border: 1px solid var(--so-border-strong);
  border-radius: var(--so-radius-sm, 6px);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  margin: 0;
}
.so-file-upload__face:hover { border-color: var(--so-gold-text); }
.so-file-upload__input:focus-visible + .so-file-upload__face {
  border-color: var(--so-gold-text);
  box-shadow: 0 0 0 3px rgba(217,119,6,.18);
}
.so-file-upload__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--so-bg-soft);
  color: var(--so-ink);
  border: 1px solid var(--so-border-strong);
  border-radius: var(--so-radius-sm, 6px);
  font-weight: var(--so-font-weight-medium, 500);
  font-size: 0.92rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.so-file-upload__face:hover .so-file-upload__btn {
  background: var(--so-ink);
  color: var(--so-surface);
  border-color: var(--so-ink);
}
.so-file-upload__name {
  color: var(--so-muted);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.so-file-upload__name.is-filled {
  color: var(--so-ink);
  font-weight: var(--so-font-weight-medium, 500);
}

/* ───────────────────────────────────────────────────────────────
 * Page Contact v2 (/nous-contacter) — layout 2 colonnes
 * Panneau atelier (NAP + horaires + carte + CTA) + form
 * ─────────────────────────────────────────────────────────────── */
.so-contact {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--so-space-6, 32px) var(--so-space-4, 16px) var(--so-space-9, 64px);
}
.so-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--so-space-7, 48px);
  align-items: start;
}
@media (max-width: 900px) {
  .so-contact__grid { grid-template-columns: 1fr; gap: var(--so-space-6, 32px); }
}

.so-contact__atelier {
  background: var(--so-surface-alt, #FCF8F4);
  border: 1px solid var(--so-border, #EEEDED);
  border-radius: var(--so-radius-lg, 16px);
  padding: var(--so-space-6, 32px);
  position: sticky;
  top: var(--so-space-5, 24px);
}
@media (max-width: 900px) { .so-contact__atelier { position: static; } }

.so-contact__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--so-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--so-gold-text, #9A4F08);
  margin-bottom: var(--so-space-2, 8px);
}
.so-contact__title {
  font-size: 1.6rem;
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink, #1C1917);
  margin: 0 0 var(--so-space-3, 12px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.so-contact__lede {
  color: var(--so-muted, #78716C);
  margin: 0 0 var(--so-space-5, 24px);
  font-size: 0.95rem;
  line-height: 1.55;
}

.so-contact__nap {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--so-space-6, 32px);
}
.so-contact__nap-item {
  display: flex;
  align-items: flex-start;
  gap: var(--so-space-3, 12px);
  padding: var(--so-space-3, 12px) 0;
  border-bottom: 1px solid var(--so-border, #EEEDED);
  font-size: 0.95rem;
  color: var(--so-ink, #1C1917);
  line-height: 1.5;
}
.so-contact__nap-item:last-child { border-bottom: 0; }
.so-contact__nap-item a { color: var(--so-ink, #1C1917); text-decoration: none; }
.so-contact__nap-item a:hover { color: var(--so-gold-text, #9A4F08); }
.so-contact__nap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--so-gold-soft, #FEF3E7);
  color: var(--so-gold-text, #9A4F08);
  flex-shrink: 0;
}
.so-contact__nap-body { flex: 1 1 auto; min-width: 0; }
.so-contact__nap-link {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.85rem;
  color: var(--so-gold-text, #9A4F08) !important;
  font-weight: var(--so-font-weight-medium, 500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.so-contact__nap-link:hover { color: var(--so-gold-hover, #B45309) !important; }
.so-contact__nap-muted { color: var(--so-muted, #78716C); font-size: 0.83rem; }

.so-contact__subtitle {
  font-size: 0.92rem;
  font-weight: var(--so-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--so-muted, #78716C);
  margin: 0 0 var(--so-space-3, 12px);
}
.so-contact__hours {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  margin-bottom: var(--so-space-5, 24px);
}
.so-contact__hours th,
.so-contact__hours td {
  padding: 8px 0;
  text-align: left;
  border-bottom: 1px solid var(--so-border, #EEEDED);
  font-weight: var(--so-font-weight-regular, 400);
  color: var(--so-ink, #1C1917);
}
.so-contact__hours th {
  font-weight: var(--so-font-weight-medium, 500);
  width: 40%;
  white-space: nowrap;
}
.so-contact__hours tr:last-child th,
.so-contact__hours tr:last-child td { border-bottom: 0; }
.so-contact__hours-closed {
  display: inline-block;
  padding: 2px 8px;
  background: var(--so-bg-soft, #F4ECE5);
  color: var(--so-muted, #78716C);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: var(--so-font-weight-medium, 500);
}

.so-contact__map {
  position: relative;
  border-radius: var(--so-radius-md, 10px);
  overflow: hidden;
  border: 1px solid var(--so-border, #EEEDED);
  margin-bottom: var(--so-space-5, 24px);
  aspect-ratio: 560 / 260;
  background: var(--so-bg-soft, #F4ECE5);
}
.so-contact__map-iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: saturate(.92);
}
.so-contact__map-direction {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--so-ink, #1C1917);
  color: var(--so-surface, #fff) !important;
  font-size: 0.85rem;
  font-weight: var(--so-font-weight-semibold, 600);
  border-radius: var(--so-radius-sm, 6px);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(28,25,23,.18);
  transition: background .15s ease;
}
.so-contact__map-direction:hover { background: var(--so-gold, #D97706); }

.so-contact__cta {
  width: 100%;
  text-align: center;
  padding: 14px 20px !important;
  font-size: 0.95rem;
  font-weight: var(--so-font-weight-semibold, 600) !important;
}

.so-contact__form .h2 {
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  color: var(--so-ink, #1C1917);
}

/* ═══════════════════════════════════════════════════════════════
 * Craft Emil — micro-interactions & polish
 * ═══════════════════════════════════════════════════════════════ */

/* :active scale(0.97) sur tous les boutons + liens-boutons
   Donne le feedback de press : l'UI dit "j'ai entendu" */
.btn,
button.btn,
a.btn,
input[type="submit"].btn,
button[type="submit"],
.so-btn-primary,
.so-btn-secondary,
.so-contact__cta,
.so-file-upload__face {
  transition: transform var(--so-duration-press) var(--so-ease-out),
              box-shadow var(--so-duration) var(--so-ease-out),
              background-color var(--so-duration) var(--so-ease-out),
              border-color var(--so-duration) var(--so-ease-out),
              color var(--so-duration) var(--so-ease-out);
}
.btn:active,
button.btn:active,
a.btn:active,
input[type="submit"].btn:active,
button[type="submit"]:active,
.so-btn-primary:active,
.so-btn-secondary:active,
.so-contact__cta:active,
.so-file-upload__face:active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

/* Gate les hover-lift décoratifs sous pointer fin :
   évite les false positives sur tap mobile (où :hover persiste) */
@media (hover: hover) and (pointer: fine) {
  /* (les hover existants conservent leur comportement,
     ce media query active uniquement les lift décoratifs ci-dessous) */
  .so-card:hover,
  .so-product-card:hover,
  .so-room-card:hover,
  .so-pillar-card:hover,
  .so-blog-card:hover,
  .so-hub-card:hover,
  .product-miniature:hover {
    transform: translateY(-4px);
  }
}

/* prefers-reduced-motion : couper les translate / scale, garder fade */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  button.btn:active,
  a.btn:active {
    transform: none;
  }
  .so-card:hover,
  .so-product-card:hover,
  .so-room-card:hover,
  .so-pillar-card:hover,
  .so-blog-card:hover,
  .so-hub-card:hover,
  .product-miniature:hover {
    transform: none;
  }
}

/* Focus visible : ring gold cohérent avec la palette
   plus net que le focus navigateur par défaut */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--so-gold);
  outline-offset: 2px;
  border-radius: var(--so-radius-sm, 6px);
}
.btn:focus-visible,
button.btn:focus-visible {
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════
 * Avis Garantis (widget externe .agJsWidget) — DÉSACTIVÉ
 * Le module steavisgarantis a été désactivé (BDD + hooks retirés)
 * au profit des avis Google My Business intégrés server-side.
 * On force display:none au cas où le module serait réactivé par erreur.
 * ═══════════════════════════════════════════════════════════════ */
.agJsWidget { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
 * Fiche produit v2 atelier (so-product-page__*)
 * SEO préservé : H1, schema Product, OG, breadcrumb, description
 * Ajout : signature, trust signals, charte de sélection, CTA conseil
 * ═══════════════════════════════════════════════════════════════ */

/* Signature "Sélectionné par l'atelier" sous le H1 */
.so-product-page__signature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 var(--so-space-3, 12px);
  padding: 6px 12px 6px 8px;
  background: var(--so-gold-soft);
  color: var(--so-gold-hover);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: var(--so-font-weight-semibold, 600);
  letter-spacing: 0.01em;
}
.so-product-page__signature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--so-gold);
  color: #fff;
}

/* Trust signals (4 items) sous l'add-to-cart */
.so-product-page__trust {
  list-style: none;
  padding: 0;
  margin: var(--so-space-4, 16px) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--so-border);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-md, 10px);
  overflow: hidden;
}
@media (max-width: 520px) {
  .so-product-page__trust { grid-template-columns: 1fr; }
}
.so-product-page__trust-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  background: var(--so-surface);
}
.so-product-page__trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--so-gold-soft);
  color: var(--so-gold-text);
}
.so-product-page__trust-body {
  font-size: 0.86rem;
  line-height: 1.4;
  min-width: 0;
}
.so-product-page__trust-body strong {
  display: block;
  color: var(--so-ink);
  font-weight: var(--so-font-weight-semibold, 600);
  margin-bottom: 2px;
}
.so-product-page__trust-body span,
.so-product-page__trust-body a {
  color: var(--so-muted);
  font-size: 0.8rem;
}
.so-product-page__trust-body a {
  text-decoration: underline;
  text-decoration-color: var(--so-border-strong);
  text-underline-offset: 2px;
}
.so-product-page__trust-body a:hover {
  color: var(--so-gold-text);
  text-decoration-color: var(--so-gold-text);
}

/* Section atelier en pied de fiche */
.so-product-page__atelier {
  margin-top: var(--so-space-8, 56px);
  padding: var(--so-space-7, 48px) 0 var(--so-space-6, 32px);
  border-top: 1px solid var(--so-border);
}
.so-product-page__atelier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--so-space-7, 48px);
  align-items: start;
}
@media (max-width: 900px) {
  .so-product-page__atelier-grid { grid-template-columns: 1fr; gap: var(--so-space-5, 24px); }
}

.so-product-page__eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: var(--so-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--so-gold-text);
  margin-bottom: var(--so-space-2, 8px);
}
.so-product-page__why-title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 var(--so-space-4, 16px);
}
.so-product-page__why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--so-space-3, 12px);
}
.so-product-page__why-list li {
  padding: var(--so-space-3, 12px) 0 var(--so-space-3, 12px) var(--so-space-4, 16px);
  border-left: 3px solid var(--so-border-strong);
  color: var(--so-ink-2, #3A3631);
  font-size: 0.95rem;
  line-height: 1.55;
}
.so-product-page__why-list li:first-child { border-left-color: var(--so-gold-text); }
.so-product-page__why-list strong {
  color: var(--so-ink);
  font-weight: var(--so-font-weight-semibold, 600);
}
.so-product-page__why-list a {
  color: var(--so-ink);
  text-decoration: underline;
  text-decoration-color: var(--so-gold-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.so-product-page__why-list a:hover { color: var(--so-gold-text); }

/* Bloc CTA conseil */
.so-product-page__advice {
  padding: var(--so-space-5, 24px);
  background: var(--so-bg-soft);
  border-radius: var(--so-radius-lg, 16px);
  border: 1px solid var(--so-border);
}
.so-product-page__advice-title {
  font-size: 1.15rem;
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink);
  margin: 0 0 var(--so-space-2, 8px);
  letter-spacing: -0.02em;
}
.so-product-page__advice-lede {
  color: var(--so-muted);
  font-size: 0.9rem;
  margin: 0 0 var(--so-space-4, 16px);
  line-height: 1.5;
}
.so-product-page__advice-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-product-page__advice-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  font-weight: var(--so-font-weight-semibold, 600) !important;
}
.so-product-page__advice-cta svg { flex-shrink: 0; }
.so-product-page__advice-hours {
  margin: var(--so-space-3, 12px) 0 0;
  font-size: 0.78rem;
  color: var(--so-muted);
  text-align: center;
}

/* NB : la règle .continue.btn:not(.btn-primary) ne capture pas ce .so-product-page__advice-cta
   donc btn-primary garde son style ink+cream, btn-secondary garde son outline. */

/* ═══════════════════════════════════════════════════════════════
 * Page catégorie v2 (so-category-header / so-category-footer)
 * SEO préservé : H1, breadcrumb, description rich-text, cover alt,
 * meta tags, count produits, pagination, hooks displayHeader/Footer
 * Ajout : eyebrow + signature atelier + section pied "Pourquoi"
 * ═══════════════════════════════════════════════════════════════ */

/* Header catégorie */
.so-category-header {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--so-space-7, 48px);
  align-items: center;
  margin-bottom: var(--so-space-7, 48px);
  padding-bottom: var(--so-space-6, 32px);
  border-bottom: 1px solid var(--so-border);
}
.so-category-header:not(:has(.so-category-header__cover)) {
  grid-template-columns: 1fr;
  max-width: 820px;
}
@media (max-width: 900px) {
  .so-category-header { grid-template-columns: 1fr; gap: var(--so-space-5, 24px); }
}

.so-category-header__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--so-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--so-gold-text);
  margin-bottom: var(--so-space-2, 8px);
}
.so-category-header__title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 var(--so-space-3, 12px);
}
.so-category-header__lede {
  color: var(--so-ink-2);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--so-space-4, 16px);
  max-width: 70ch;
}
.so-category-header__lede p:last-child { margin-bottom: 0; }

.so-category-header__signature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px 6px 8px;
  background: var(--so-gold-soft);
  color: var(--so-gold-hover);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: var(--so-font-weight-semibold, 600);
}
.so-category-header__signature-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--so-gold);
  color: #fff;
}

.so-category-header__cover {
  margin: 0;
  border-radius: var(--so-radius-lg, 16px);
  overflow: hidden;
  background: var(--so-bg-soft);
}
.so-category-header__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Footer catégorie (section atelier après la grille produits) */
.so-category-footer {
  margin-top: var(--so-space-8, 56px);
  padding: var(--so-space-7, 48px) 0 var(--so-space-6, 32px);
  border-top: 1px solid var(--so-border);
}
.so-category-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--so-space-7, 48px);
  align-items: start;
}
@media (max-width: 900px) {
  .so-category-footer__grid { grid-template-columns: 1fr; gap: var(--so-space-5, 24px); }
}

.so-category-footer__eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: var(--so-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--so-gold-text);
  margin-bottom: var(--so-space-2, 8px);
}
.so-category-footer__title {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 var(--so-space-4, 16px);
}
.so-category-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--so-space-3, 12px);
}
.so-category-footer__list li {
  padding: var(--so-space-3, 12px) 0 var(--so-space-3, 12px) var(--so-space-4, 16px);
  border-left: 3px solid var(--so-border-strong);
  color: var(--so-ink-2, #3A3631);
  font-size: 0.95rem;
  line-height: 1.55;
}
.so-category-footer__list li:first-child { border-left-color: var(--so-gold-text); }
.so-category-footer__list strong {
  color: var(--so-ink);
  font-weight: var(--so-font-weight-semibold, 600);
}
.so-category-footer__list a {
  color: var(--so-ink);
  text-decoration: underline;
  text-decoration-color: var(--so-gold-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.so-category-footer__list a:hover { color: var(--so-gold-text); }

.so-category-footer__advice {
  padding: var(--so-space-5, 24px);
  background: var(--so-bg-soft);
  border-radius: var(--so-radius-lg, 16px);
  border: 1px solid var(--so-border);
}
.so-category-footer__advice-title {
  font-size: 1.15rem;
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink);
  margin: 0 0 var(--so-space-2, 8px);
  letter-spacing: -0.02em;
}
.so-category-footer__advice-lede {
  color: var(--so-muted);
  font-size: 0.9rem;
  margin: 0 0 var(--so-space-4, 16px);
  line-height: 1.5;
}
.so-category-footer__advice-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.so-category-footer__advice-cta {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px !important;
  font-size: 0.95rem !important;
  font-weight: var(--so-font-weight-semibold, 600) !important;
}
.so-category-footer__advice-cta svg { flex-shrink: 0; }
.so-category-footer__advice-hours {
  margin: var(--so-space-3, 12px) 0 0;
  font-size: 0.78rem;
  color: var(--so-muted);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
 * Home — asymétrie des grilles (anti "identical card grids")
 * Cible : so-pillars (3 piliers) et so-journal (3 articles)
 * Pattern : 1 featured large + 2 compacts stackés à droite
 * ═══════════════════════════════════════════════════════════════ */

/* PILLARS — 1 featured + 2 compacts */
@media (min-width: 993px) {
  .so-pillars__grid {
    grid-template-columns: 1.55fr 1fr !important;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
  }
  .so-pillar:nth-child(1) {
    grid-row: span 2;
    padding: var(--so-space-10, 56px) var(--so-space-9, 48px) !important;
  }
  .so-pillar:nth-child(1) .so-pillar__icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    margin-bottom: var(--so-space-7, 40px);
  }
  .so-pillar:nth-child(1) .so-pillar__icon svg {
    width: 48px;
    height: 48px;
  }
  .so-pillar:nth-child(1) .so-pillar__title {
    font-size: clamp(1.65rem, 2.6vw, 2.1rem);
    margin-bottom: var(--so-space-4, 20px);
  }
  .so-pillar:nth-child(1) .so-pillar__desc {
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 52ch;
  }
  /* Pillars 2 et 3 : compacts en layout grid (icône col gauche, contenu empilé col droite) */
  .so-pillar:nth-child(n+2) {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--so-space-4, 20px);
    row-gap: var(--so-space-2, 8px);
    align-items: start;
    padding: var(--so-space-6, 32px) var(--so-space-7, 40px) !important;
  }
  .so-pillar:nth-child(n+2) .so-pillar__icon {
    grid-row: 1 / -1;
    grid-column: 1;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 0;
    align-self: start;
  }
  .so-pillar:nth-child(n+2) .so-pillar__icon svg {
    width: 32px;
    height: 32px;
  }
  .so-pillar:nth-child(n+2) .so-pillar__title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.18rem;
    margin: 0;
    line-height: 1.25;
  }
  .so-pillar:nth-child(n+2) .so-pillar__desc {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
    flex-grow: 0;
  }
  .so-pillar:nth-child(n+2) .so-pillar__link {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.86rem;
    margin-top: var(--so-space-2, 8px);
    align-self: start;
    white-space: nowrap;
  }
}

/* JOURNAL — 1 featured + 2 compacts */
@media (min-width: 993px) {
  .so-journal__grid {
    grid-template-columns: 1.8fr 1fr !important;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
  }
  .so-article:nth-child(1) {
    grid-row: span 2;
    padding: var(--so-space-9, 48px) !important;
    background: var(--so-ink) !important;
    color: var(--so-bg) !important;
    border-color: var(--so-ink) !important;
    position: relative;
    overflow: hidden;
  }
  .so-article:nth-child(1)::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -20%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(217,119,6,0.25), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .so-article:nth-child(1) > * { position: relative; z-index: 1; }
  .so-article:nth-child(1) .so-article__category {
    color: var(--so-gold-bright, #FBBF24) !important;
    font-size: 0.8rem;
  }
  .so-article:nth-child(1) .so-article__title {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
    color: var(--so-bg) !important;
    margin-bottom: var(--so-space-4, 20px);
    max-width: 22ch;
  }
  .so-article:nth-child(1) .so-article__title a {
    color: var(--so-bg) !important;
  }
  .so-article:nth-child(1) .so-article__title a:hover {
    color: var(--so-gold-bright, #FBBF24) !important;
  }
  .so-article:nth-child(1) .so-article__excerpt {
    color: rgba(250, 245, 242, 0.78) !important;
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 52ch;
  }
  .so-article:nth-child(1) .so-article__meta {
    color: rgba(250, 245, 242, 0.55) !important;
  }
  .so-article:nth-child(1):hover {
    border-color: var(--so-gold-text) !important;
    transform: translateY(-4px);
  }
  /* Articles 2 et 3 : compacts, padding réduit */
  .so-article:nth-child(n+2) {
    padding: var(--so-space-6, 32px) !important;
  }
  .so-article:nth-child(n+2) .so-article__title {
    font-size: 1.05rem;
  }
  .so-article:nth-child(n+2) .so-article__excerpt {
    font-size: 0.88rem;
    margin-bottom: var(--so-space-4, 16px);
  }
}

/* Mobile : stack vertical pour pillars + journal (fallback) */
@media (max-width: 992px) {
  .so-pillars__grid,
  .so-journal__grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * Dropdowns origin-aware (principe Emil Kowalski)
 * Cart dropdown : ancré en haut-droite (depuis le bouton panier)
 * Mega-menu     : ancré en haut-centre (depuis le nav link)
 * ═══════════════════════════════════════════════════════════════ */

/* Cart dropdown — scale depuis top-right */
.so-cart-dropdown {
  transform-origin: top right;
  transform: translateY(-8px) scale(0.96) !important;
  transition: opacity 180ms var(--so-ease-out, cubic-bezier(0.23,1,0.32,1)),
              transform 180ms var(--so-ease-out, cubic-bezier(0.23,1,0.32,1)),
              visibility 0s linear 180ms !important;
}
.so-cart-wrapper:hover .so-cart-dropdown,
.so-cart-wrapper:focus-within .so-cart-dropdown,
.so-cart-dropdown:hover {
  transform: translateY(0) scale(1) !important;
  transition: opacity 180ms var(--so-ease-out, cubic-bezier(0.23,1,0.32,1)),
              transform 180ms var(--so-ease-out, cubic-bezier(0.23,1,0.32,1)),
              visibility 0s !important;
}

/* Mega-menu — scale depuis top-center (le nav link au-dessus) */
.so-megamenu {
  transform-origin: top center;
  transform: translateX(-50%) translateY(8px) scale(0.98) !important;
  transition: opacity 200ms var(--so-ease-out, cubic-bezier(0.23,1,0.32,1)),
              transform 200ms var(--so-ease-out, cubic-bezier(0.23,1,0.32,1)) !important;
}
.has-mega:hover .so-megamenu,
.has-mega:focus-within .so-megamenu {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Reduced-motion : pas de scale, juste fade */
@media (prefers-reduced-motion: reduce) {
  .so-cart-dropdown,
  .so-megamenu {
    transform: none !important;
  }
  .so-cart-wrapper:hover .so-cart-dropdown,
  .so-cart-wrapper:focus-within .so-cart-dropdown,
  .has-mega:hover .so-megamenu,
  .has-mega:focus-within .so-megamenu {
    transform: translateX(-50%) translateY(0) !important;
  }
  .so-cart-wrapper:hover .so-cart-dropdown,
  .so-cart-wrapper:focus-within .so-cart-dropdown {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * Liens dans paragraphes — underline obligatoire (WCAG 1.4.1)
 * Évite que les liens reposent uniquement sur la couleur pour
 * être distingués du texte environnant. Ne touche pas les liens
 * de navigation (header/footer/menus) qui sont visuellement
 * identifiés par leur position.
 * ═══════════════════════════════════════════════════════════════ */
.rich-text a:not(.btn),
.so-section p a:not(.btn):not(.so-link-more),
.so-product-page__why a:not(.btn),
.so-category-footer__list a:not(.btn),
.so-hub-section p a:not(.btn),
.so-hub-faq__answer a:not(.btn),
#category-description a:not(.btn),
.product__description a:not(.btn),
.product__description-short a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--so-gold-text);
  text-underline-offset: 3px;
  color: var(--so-ink);
  font-weight: var(--so-font-weight-medium, 500);
}
.rich-text a:not(.btn):hover,
.so-section p a:not(.btn):not(.so-link-more):hover,
.so-product-page__why a:not(.btn):hover,
.so-category-footer__list a:not(.btn):hover,
.so-hub-section p a:not(.btn):hover,
.so-hub-faq__answer a:not(.btn):hover,
#category-description a:not(.btn):hover,
.product__description a:not(.btn):hover,
.product__description-short a:not(.btn):hover {
  color: var(--so-gold-text);
  text-decoration-color: var(--so-gold-hover);
}

/* ═══════════════════════════════════════════════════════════════
 * Mainbar mobile — fix débordement icônes search/cart
 * Sur < 768px : on masque le CTA Diagnostic (utilise.btn .so-mainbar__cta)
 * et on contraint le brand pour libérer la place aux icônes (ms-auto).
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Masquer le CTA Diagnostic gratuit (visible dès md=768 normalement,
     mais on durcit pour les viewports limites) */
  .so-mainbar .so-mainbar__cta, .so-mainbar a.so-mainbar__cta:link, .so-mainbar a.so-mainbar__cta:visited {
    display: none !important;
  }
  /* Brand : forcer un max-width pour éviter qu'il pousse les icônes */
  .so-mainbar .so-mainbar__brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100vw - 130px);  /* laisse la place pour 2 icônes + marges */
    overflow: hidden;
  }
  .so-mainbar .so-mainbar__logo-img {
    height: 28px !important;
    max-width: 100%;
  }
  /* Icônes : empêcher tout shrink */
  .so-mainbar .so-mainbar__mobile {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 4px;
  }
  .so-mainbar .so-mainbar__icon-btn {
    flex-shrink: 0;
  }
  /* Container : réduire le padding latéral pour gagner de la place */
  .so-mainbar .container-md {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ═══════════════════════════════════════════════════════════════
 * Avis Google My Business (bandeau footer server-side)
 * Render statique depuis ps_smartone_gmb_reviews. Zero JS runtime.
 * ═══════════════════════════════════════════════════════════════ */
.so-gmb {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--so-space-7, 48px) var(--so-space-5, 24px) var(--so-space-6, 32px);
}
.so-gmb__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--so-space-5, 24px);
  margin-bottom: var(--so-space-6, 32px);
  padding-bottom: var(--so-space-4, 16px);
  border-bottom: 1px solid var(--so-border);
}
.so-gmb__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--so-font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--so-gold-text);
  margin-bottom: var(--so-space-2, 8px);
}
.so-gmb__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink);
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.15;
}
.so-gmb__rating-wrap {
  display: flex;
  align-items: center;
  gap: var(--so-space-3, 12px);
}
.so-gmb__rating-value {
  font-size: 2.6rem;
  font-weight: var(--so-font-weight-bold, 700);
  color: var(--so-ink);
  line-height: 1;
  letter-spacing: -0.04em;
}
.so-gmb__rating-meta { line-height: 1.3; }
.so-gmb__stars {
  color: var(--so-gold);
  font-size: 1.1rem;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.so-gmb__count {
  color: var(--so-muted);
  font-size: 0.85rem;
}
.so-gmb__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--so-space-5, 24px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--so-space-4, 16px);
}
.so-gmb__card {
  background: var(--so-surface);
  border: 1px solid var(--so-border);
  border-radius: var(--so-radius-md, 10px);
  padding: var(--so-space-5, 24px);
  display: flex;
  flex-direction: column;
  gap: var(--so-space-3, 12px);
}
.so-gmb__card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.so-gmb__card-author {
  font-weight: var(--so-font-weight-semibold, 600);
  color: var(--so-ink);
  font-size: 0.92rem;
}
.so-gmb__card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.so-gmb__card-stars {
  color: var(--so-gold);
  letter-spacing: 1px;
}
.so-gmb__card-time {
  color: var(--so-muted);
}
.so-gmb__card-text {
  margin: 0;
  font-style: normal;
  color: var(--so-ink-2);
  font-size: 0.92rem;
  line-height: 1.55;
  position: relative;
  padding-left: 0;
  border-left: 2px solid var(--so-gold);
  padding: 4px 0 4px 12px;
}
.so-gmb__cta { text-align: right; }
.so-gmb__cta-link {
  color: var(--so-gold-text);
  font-weight: var(--so-font-weight-semibold, 600);
  text-decoration: underline;
  text-decoration-color: var(--so-gold);
  text-underline-offset: 3px;
  font-size: 0.9rem;
}
.so-gmb__cta-link:hover { color: var(--so-gold-hover); }