/* ===========================================================================
   AI Outlet — ag-layout.css
   Correctif de finition : conteneur unique 1280, grille produits homogène,
   anti-débordement horizontal, footer/header sombres stables, étoiles nettes.
   CHARGÉ EN DERNIER (après premium-uplift/conv/neon) → remporte la cascade.
   =========================================================================== */

:root {
  --ag-container: 1280px;   /* conteneur unique. header/footer-bg : source = premium.css :root */
}

/* ---------------------------------------------------------------------------
   1. CONTENEUR UNIQUE — 1280 / padding-inline 24 (16 en mobile)
   Toutes les largeurs divergentes (1080/1140/1180/1200/1240) ramenées à 1280.
   Les sections à fond pleine largeur gardent leur fond ; seul le CONTENU est borné.
   --------------------------------------------------------------------------- */
.container,
.ag-promo,
.ag-stickycart__inner,
.ag-reassurance__inner,
.ag-categories,
.ag-xsell__in,
.ag-finder,
.ag-recent,
.ag-fres__in,
.ag-spotlight {
  max-width: var(--ag-container) !important;
  margin-inline: auto !important;
  padding-inline: 24px !important;
}

/* Bootstrap .container : neutraliser les paliers 540/720/960/1140 → 1280 fluide */
@media (min-width: 1200px) {
  .container { width: 100% !important; max-width: var(--ag-container) !important; }
}

/* Paddings en vw (asymétrie + amplification) → padding fixe symétrique */
.ag-reassurance__inner,
.ag-categories { padding-inline: 24px !important; }
.ag-cta { padding-inline: 24px !important; }

@media (max-width: 767px) {
  .container,
  .ag-promo,
  .ag-stickycart__inner,
  .ag-reassurance__inner,
  .ag-categories,
  .ag-xsell__in,
  .ag-finder,
  .ag-recent { padding-inline: 16px !important; }
}

/* ---------------------------------------------------------------------------
   2. ANTI-DÉBORDEMENT HORIZONTAL (zéro scrollbar H)
   Sources : .carousel 100vw/-50vw (theme), featured -5vw (premium mobile).
   --------------------------------------------------------------------------- */
html, body { overflow-x: clip; }

.carousel {
  left: auto !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-bottom: .5rem;
}

/* ---------------------------------------------------------------------------
   3. GRILLE PRODUITS — source unique. La carte géante (premium-uplift) a été
   RETIRÉE à la source ; plus rien ne force le flex → grille sans !important
   (ag-layout charge après theme.css classic qui n'a pas de !important ici).
   --------------------------------------------------------------------------- */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0;
  justify-content: stretch;
}
.products > * {
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
}
.product-miniature { height: 100%; }

/* Responsive : mêmes gouttières, 4 → 3 → 2 → 1 */
@media (max-width: 1199px) { .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px)  { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .products { grid-template-columns: 1fr; } }

/* Neutralise le carrousel mobile featured (flex scroll + margin -5vw = overflow) */
@media (max-width: 767px) {
  .page-home .featured-products .products {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    overflow-x: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }
  .page-home .featured-products .products > * {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    scroll-snap-align: none !important;
  }
}
@media (max-width: 575px) {
  .page-home .featured-products .products { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------------
   4. RYTHME VERTICAL uniforme entre sections
   --------------------------------------------------------------------------- */
.ag-promo,
.ag-reassurance,
.ag-categories,
.featured-products,
.ag-newproducts,
.ag-finder,
.ag-cta { padding-block: 64px; }
@media (max-width: 767px) {
  .ag-promo,
  .ag-reassurance,
  .ag-categories,
  .featured-products,
  .ag-newproducts,
  .ag-finder,
  .ag-cta { padding-block: 40px; }
}

/* ---------------------------------------------------------------------------
   5. HEADER — recherche centrée (max 560) + séparation barre ↔ nav ≈ 33px
   (Le fond est déjà sur --ag-header-bg ; on ne touche qu'au layout.)
   --------------------------------------------------------------------------- */
#header .header-top #search_widget,
#header .header-top .search-widget,
#header .header-top .ag-search {
  max-width: 560px;
  margin-inline: auto;
  width: 100%;
}
#header .header-nav { margin-top: 33px; }
@media (max-width: 991px) { #header .header-nav { margin-top: 16px; } }

/* ---------------------------------------------------------------------------
   6. FOOTER — fond sombre STABLE (remplace var(--ag-black)) + logos paiement
   --------------------------------------------------------------------------- */
#footer { background: var(--ag-footer-bg, #0f0f13) !important; }

.ag-payments { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 1.1rem 0 0; padding: 0; }
.ag-payments__item { line-height: 0; }
.ag-payments svg { display: block; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }

/* ---------------------------------------------------------------------------
   7. VIGNETTES — étoiles nettes (retire tout filtre qui ternit/floute l'or)
   --------------------------------------------------------------------------- */
.ag-stars span.on { color: var(--ag-gold) !important; }
.star-content div.star-on,
.star-content div.star-hover { filter: none !important; }

/* ---------------------------------------------------------------------------
   8. MEGA MENU — vignettes de catégories visibles.
   (#header sticky défini une seule fois dans premium.css ; doublon retiré ici.
    Fermeture au scroll = ag-finish.js.)
   --------------------------------------------------------------------------- */
/* Le passage en .ag-scrolled ne change QUE le fond/ombre, jamais la hauteur : */
#header.ag-scrolled { padding-block: inherit !important; }
.ag-mega img,
.ag-mega .ag-mega__thumb,
.ag-mega picture { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* ---------------------------------------------------------------------------
   9. CROSS-SELL « souvent achetés ensemble » — contraste AA (clair + sombre)
   --------------------------------------------------------------------------- */
.ag-xsell,
.ag-xsell__in,
.ag-xsell__title,
.ag-xsell h2,
.ag-xsell h3,
.ag-xsell .product-title,
.ag-xsell a { color: var(--ag-ink) !important; }
.ag-xsell .price,
.ag-xsell .ag-price { color: var(--ag-ink) !important; font-weight: 600; }
html.ag-dark .ag-xsell,
html.ag-dark .ag-xsell__in,
html.ag-dark .ag-xsell__title,
html.ag-dark .ag-xsell h2,
html.ag-dark .ag-xsell h3,
html.ag-dark .ag-xsell .product-title,
html.ag-dark .ag-xsell a { color: #ececf0 !important; }
html.ag-dark .ag-xsell .price,
html.ag-dark .ag-xsell .ag-price { color: #ffffff !important; }

/* ---------------------------------------------------------------------------
   10. MÉGA-MENU premium : vignettes de sous-catégories + bloc mis en avant
   (le CSS .ag-mm-feat/.ag-mm-thumb existe déjà mais était display:none)
   --------------------------------------------------------------------------- */
.ag-mega__head { display: flex; align-items: center; gap: .6rem; }
.ag-mega .ag-mm-thumb { flex: 0 0 34px; width: 34px; height: 34px; margin: 0; border-color: rgba(255,255,255,.14); }
.ag-mega .ag-mm-feat { display: block; }
.ag-mega .ag-mm-feat__cap b { color: #fff; }
/* AA : libellés cross-sell « souvent achetés ensemble » en mode sombre (contraste renforcé) */
html.ag-dark .ag-xsell .product-title,
html.ag-dark .ag-xsell .product-title a,
html.ag-dark .ag-xsell a { color: #f3f3f6 !important; }
html.ag-dark .ag-xsell .regular-price { color: #c7c7cf !important; }
/* Touch targets ≥ 44px sur les actions carte + nav mobile */
@media (max-width: 767px) {
  .ag-navm__toggle, .ag-navm__link, .ag-navm__sub { min-height: 44px; display: flex; align-items: center; }
  .product-miniature .btn, .product-miniature .add-to-cart { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   11. SWATCHES COULEUR sur la carte produit — toujours visibles (pas au survol)
   --------------------------------------------------------------------------- */
.ag-card-swatches { display: flex; gap: 7px; margin: 10px 0 2px; flex-wrap: wrap; }
.ag-card-swatch {
  width: 18px; height: 18px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.35);
  background-size: cover; background-position: center; display: block;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ag-card-swatch:hover, .ag-card-swatch:focus-visible {
  transform: scale(1.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 2px var(--ag-gold);
  outline: none;
}
/* Touch : au moins 24px de cible cliquable via padding transparent */
@media (max-width: 767px) { .ag-card-swatches { gap: 10px; } .ag-card-swatch { width: 20px; height: 20px; } }

/* ---------------------------------------------------------------------------
   12. AVIS (productcomments) — retirer la bande blanche par défaut sur fond sombre.
   Cause : .product-list-reviews a background:rgba(255,255,255,.5) → bande grise.
   --------------------------------------------------------------------------- */
.product-list-reviews { background: transparent !important; padding: 0 !important; }
.product-miniature .product-list-reviews { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; }
.ag-reviews-summary { margin: 4px 0 14px; display: flex; align-items: center; gap: 8px; }
.ag-reviews-summary .product-list-reviews { margin: 0; }
/* Sur la fiche, displayProductAdditionalInfo agrège aussi le partage social (déjà présent
   plus bas) → on ne garde que la note productcomments près du titre. */
.ag-reviews-summary .social-sharing { display: none !important; }
.ag-reviews-summary .product-comments-additional-info { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: transparent; }
.ag-reviews-summary .product-comments-additional-info .comments_note { display: flex; align-items: center; gap: 8px; }
.ag-reviews-summary a { color: var(--ag-gold); font-size: .85rem; }
.comments-nb { color: #b8b8c0; font-size: .82rem; }
.grade-stars .star, .grade-stars svg { color: var(--ag-gold) !important; }

/* ---------------------------------------------------------------------------
   13. ONGLETS PRODUITS (Populaires / Nouveautés / Promo)
   --------------------------------------------------------------------------- */
.ag-tabs { max-width: var(--ag-container) !important; margin-inline: auto !important; padding-inline: 24px !important; padding-block: 64px; }
.ag-tabs__nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 28px; }
.ag-tab {
  appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.14);
  color: #d6d6de; font: 600 .92rem/1 var(--ag-head, sans-serif); letter-spacing: .04em;
  padding: 11px 22px; border-radius: 999px; cursor: pointer; min-height: 44px;
  transition: color .2s, border-color .2s, background .2s;
}
.ag-tab:hover, .ag-tab:focus-visible { color: #fff; border-color: color-mix(in srgb, var(--ag-gold) 55%, transparent); outline: none; }
.ag-tab.is-active { color: var(--ag-btn-ink, #0a0a0c); background: var(--ag-gold); border-color: var(--ag-gold); }
.ag-tabs__panel[hidden] { display: none; }
.ag-tabs__panel .products { margin-top: 0; }

@media (max-width: 767px) { .ag-tabs { padding-block: 40px; } .ag-tab { padding: 10px 16px; font-size: .85rem; } }

/* ---------------------------------------------------------------------------
   14. BANDEAU MARQUES (wordmarks typographiques)
   --------------------------------------------------------------------------- */
.ag-brands { max-width: var(--ag-container) !important; margin-inline: auto !important; padding-inline: 24px !important; padding-block: 40px; }
.ag-section-title--sm { font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: #9a9aa2; margin-bottom: 22px; }
.ag-brands__row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 44px; }
.ag-brands__item { line-height: 1; }
.ag-brands__mark {
  font: 800 1.25rem/1 var(--ag-head, sans-serif); letter-spacing: .16em; text-transform: uppercase;
  color: #6f6f78; opacity: .8; transition: color .25s, opacity .25s;
  -webkit-text-stroke: 0;
}
.ag-brands__item:hover .ag-brands__mark { color: var(--ag-gold); opacity: 1; }
@media (max-width: 767px) { .ag-brands__row { gap: 14px 26px; } .ag-brands__mark { font-size: 1.02rem; letter-spacing: .12em; } }

/* ---------------------------------------------------------------------------
   15. TÉMOIGNAGES
   --------------------------------------------------------------------------- */
.ag-testi { max-width: var(--ag-container) !important; margin-inline: auto !important; padding-inline: 24px !important; padding-block: 64px; }
.ag-testi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ag-testi__card {
  margin: 0; padding: 28px 26px; border-radius: 16px;
  background: linear-gradient(160deg, #17171c 0%, #121217 100%);
  border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 14px;
}
.ag-testi__stars { color: var(--ag-gold); letter-spacing: .12em; font-size: 1rem; }
.ag-testi__quote { margin: 0; color: #e7e7ec; font-size: 1.02rem; line-height: 1.6; font-style: italic; }
.ag-testi__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ag-testi__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #e2c98a, #E63946); color: #141317;
  font: 800 1.05rem/1 var(--ag-head, sans-serif);
}
.ag-testi__meta { display: flex; flex-direction: column; line-height: 1.35; }
.ag-testi__meta b { color: #fff; font-size: .95rem; }
.ag-testi__meta i { color: #9a9aa2; font-size: .8rem; font-style: normal; }
@media (max-width: 991px) { .ag-testi__grid { grid-template-columns: 1fr; } .ag-testi { padding-block: 44px; } }

/* ---------------------------------------------------------------------------
   16. BASCULE GRILLE / LISTE (catégorie)
   --------------------------------------------------------------------------- */
.ag-viewswitch { display: inline-flex; gap: 5px; margin-left: auto; align-items: center; }
.ag-viewbtn {
  appearance: none; background: transparent; border: 1px solid rgba(255,255,255,.14);
  color: #9a9aa2; width: 40px; height: 40px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.ag-viewbtn:hover, .ag-viewbtn:focus-visible { color: #fff; border-color: color-mix(in srgb, var(--ag-gold) 45%, transparent); outline: none; }
.ag-viewbtn.is-active { color: var(--ag-btn-ink, #0a0a0c); background: var(--ag-gold); border-color: var(--ag-gold); }

/* Vue LISTE : une colonne, carte horizontale (image | description).
   NB : .products est un bootstrap .row (flex) avec items col-*. On force donc les
   colonnes à 100 % (le grid-template-columns n'a jamais gouverné cette grille). */
.products.ag-list { gap: 16px; }
.products.ag-list > .js-product,
.products.ag-list > .product { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; float: none !important; }
.products.ag-list .thumbnail-container { display: flex; gap: 24px; align-items: center; }
.products.ag-list .thumbnail-top { flex: 0 0 240px; max-width: 240px; }
.products.ag-list .product-description { flex: 1 1 auto; text-align: left; padding: 8px 12px; }
.products.ag-list .product-title { font-size: 1.15rem; }
.products.ag-list .ag-card-swatches { justify-content: flex-start; }
@media (max-width: 575px) {
  .products.ag-list .thumbnail-container { flex-direction: column; align-items: stretch; }
  .products.ag-list .thumbnail-top { flex: none; max-width: none; }
}

/* ---------------------------------------------------------------------------
   17. BOUTON D'ACHAT — correctif de CAUSE
   .btn-primary/.add-to-cart utilisaient background:var(--ag-black). Or la palette
   injecte html.ag-dark{--ag-black:#fff} (token sémantique inversé en mode sombre)
   → fond blanc + texte blanc = « Ajouter au panier » invisible.
   Correctif : CTA d'achat en OR + encre (stable, contrasté dans les 2 thèmes).
   --------------------------------------------------------------------------- */
.btn-primary, .add-to-cart, button.btn-primary {
  background: var(--ag-gold) !important;
  border-color: var(--ag-gold) !important;
  color: var(--ag-btn-ink, #0a0a0c) !important;
}
.btn-primary:hover, .add-to-cart:hover, button.btn-primary:hover {
  background: var(--ag-gold-d, #C41E2F) !important;
  border-color: var(--ag-gold-d, #C41E2F) !important;
  color: #0a0a0c !important;
}
.add-to-cart .material-icons, .add-to-cart i { color: inherit !important; }

/* ---------------------------------------------------------------------------
   18. ÉCHELLE TYPOGRAPHIQUE (application) — Space Grotesk titres / Inter corps.
   Tokens + doc dans ag-fonts.css. Sélecteurs génériques : les sections aux tailles
   spécifiquement réglées (fiche h1, hero…) conservent leur taille via leur spécificité.
   --------------------------------------------------------------------------- */
body { font-family: var(--ag-font-body); font-size: var(--ag-fs-body); line-height: var(--ag-lh-body); letter-spacing: var(--ag-ls-body); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .ag-section-title { font-family: var(--ag-font-display); }
h1, .h1 { font-size: clamp(2.4rem, 5vw, var(--ag-fs-h1)); line-height: var(--ag-lh-tight); letter-spacing: var(--ag-ls-display); }
h2, .h2 { font-size: clamp(2rem, 4vw, var(--ag-fs-h2)); line-height: var(--ag-lh-heading); letter-spacing: var(--ag-ls-display); }
h3, .h3 { font-size: var(--ag-fs-h3); line-height: var(--ag-lh-heading); letter-spacing: var(--ag-ls-display); }
h4, .h4 { font-size: var(--ag-fs-h4); line-height: var(--ag-lh-heading); letter-spacing: -0.01em; }
h5, .h5 { font-size: var(--ag-fs-h5); line-height: var(--ag-lh-heading); }
h6, .h6 { font-size: var(--ag-fs-h6); line-height: var(--ag-lh-heading); }
small, .small { font-size: var(--ag-fs-small); }

/* ---------------------------------------------------------------------------
   19. SÉLECTEURS DEVISE + LANGUE — panneau sombre opaque (clair ET sombre)
   CAUSE du « panneau blanc » : la règle sombre existait pour #_desktop_language_selector
   mais PAS pour #_desktop_currency_selector → le panneau devise retombait sur le blanc
   Bootstrap (.dropdown-menu{background:#fff}). On couvre les DEUX + lisibilité des items.
   (Le header reste sombre dans les 2 thèmes → panneau sombre cohérent partout.)
   --------------------------------------------------------------------------- */
#_desktop_currency_selector .dropdown-menu,
#_desktop_language_selector .dropdown-menu,
.currency-selector .dropdown-menu,
.language-selector .dropdown-menu {
  background: #141418 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.5) !important;
  padding: .35rem 0 !important;
  min-width: 180px !important;
}
#_desktop_currency_selector .dropdown-menu a,
#_desktop_currency_selector .dropdown-item,
.currency-selector .dropdown-menu a,
#_desktop_language_selector .dropdown-menu a,
.language-selector .dropdown-menu a {
  color: #ececf0 !important;
  padding: .5rem 1.1rem !important;
  display: block;
}
#_desktop_currency_selector .dropdown-menu a:hover,
#_desktop_currency_selector .dropdown-menu a:focus-visible,
.currency-selector .dropdown-menu a:hover,
#_desktop_language_selector .dropdown-menu a:hover,
.language-selector .dropdown-menu a:hover {
  color: var(--ag-gold) !important;
  background: rgba(255,255,255,.05) !important;
}
#_desktop_currency_selector .dropdown-menu li.current > a,
.currency-selector .dropdown-menu li.current > a,
#_desktop_language_selector .dropdown-menu li.current > a,
.language-selector .dropdown-menu li.current > a { color: var(--ag-gold) !important; }